/* Lebrijoya · taller: /taller/ y sus servicios (inc/taller.php la carga solo ahí, después de tema.css).
   Mismos tokens y piezas que el resto del tema; .taller-pagina (clase del body) gana a las reglas genéricas de
   .texto-pagina. Mientras no haya fotos del taller, la cabecera lleva la de la fachada (contenido/paginas-nuevas.json). */

.taller-pagina .texto-pagina { padding-bottom: 0; }
.taller-pagina .texto-pagina > section { margin-top: clamp(var(--e-8), 7vw, var(--e-9)); }
.taller-pagina .texto-pagina h2 { margin-top: 0; font: 400 var(--t-36)/1.1 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.taller-pagina .texto-pagina h3 { margin-top: 0; }
.taller-pagina .texto-pagina figure { margin: 0; }
.taller-pagina .taller-seccion > .lead { margin-top: var(--e-3); }

/* ---------- Cabecera: H1, entradilla, llamada a encargar y foto ---------- */
.taller-cabeza { display: grid; gap: var(--e-7); padding-block: var(--e-2) var(--e-4); }
.taller-cabeza .titulo-1 { max-width: 13em; }
.taller-cabeza .lead { margin-top: var(--e-4); }
.encargo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-6); }
.encargo .boton .icono--relleno { color: #25d366; transition: color var(--rapido); }
.encargo .boton:hover .icono--relleno { color: currentColor; }
.encargo .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 479px) { .encargo .boton { width: 100%; } }

/* Foto en vitrina: recuadro blanco con un filete fino por dentro, como el paspartú de un estuche */
.taller-cabeza__foto { justify-self: center; width: min(100%, 30rem); padding: var(--e-4); background: var(--blanco); outline: 1px solid var(--piedra-300); outline-offset: calc(-1 * var(--e-2)); }
.taller-cabeza__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }

@media (min-width: 1024px) {
  .taller-cabeza { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); align-items: center; padding-block: var(--e-4) var(--e-6); }
  .taller-cabeza__foto { justify-self: end; }
}

/* ---------- Bloques de texto ---------- */
.taller-dos { display: grid; gap: var(--e-7); }
.taller-pagina .taller-dos .prosa { margin-top: var(--e-5); color: var(--piedra-700); }
.taller-nota { padding: var(--e-6) var(--e-5); background: var(--marfil); border-top: 2px solid var(--oro); }
.taller-pagina .taller-nota__titulo { font: 400 var(--t-24)/1.2 var(--f-display); }
.taller-nota p { margin-top: var(--e-3); color: var(--piedra-700); }
@media (min-width: 1024px) { .taller-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-9); align-items: start; } }

/* Opciones: rótulo en Bodoni y texto, separados por filetes */
.taller-pagina .taller-lista { display: grid; gap: var(--e-5) var(--e-8); margin-top: var(--e-6); }
.taller-lista li { padding-top: var(--e-4); border-top: 1px solid var(--piedra-300); }
.taller-lista strong { display: block; font: 400 var(--t-21)/1.2 var(--f-display); }
.taller-lista p { margin-top: var(--e-2); color: var(--piedra-700); }
@media (min-width: 768px) { .taller-pagina .taller-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pasos del encargo: número en un óvalo dorado, como el sello del joyero */
.taller-pagina .taller-pasos { display: grid; gap: var(--e-5); margin-top: var(--e-6); counter-reset: paso; }
.taller-pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--e-4); align-content: start; }
.taller-pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--oro); border-radius: var(--r-sello); color: var(--oro-osc); font: 400 var(--t-21)/1 var(--f-display); }
.taller-pasos strong { padding-top: .55rem; font-weight: 600; line-height: 1.3; }
.taller-pasos p { margin-top: var(--e-1); color: var(--piedra-700); }
@media (min-width: 1024px) {
  .taller-pagina .taller-pasos { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e-6); }
  .taller-pasos li { grid-template-columns: minmax(0, 1fr); }
  .taller-pasos li::before { grid-row: auto; margin-bottom: var(--e-3); }
  .taller-pasos strong { padding-top: 0; }
}

/* ---------- /taller/: servicios y razones ---------- */
.taller-pagina .taller-servicios { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
.taller-servicio { position: relative; display: grid; align-content: start; gap: var(--e-3); padding: var(--e-6) var(--e-5) var(--e-5); background: var(--blanco); outline: 1px solid var(--piedra-300); outline-offset: -1px; transition: outline-color var(--rapido); }
.taller-servicio::before { content: ""; width: 2rem; height: 1px; background: var(--oro); }
.taller-servicio:hover, .taller-servicio:focus-within { outline-color: var(--oro); }
.taller-pagina .taller-servicio h3 { font: 400 var(--t-24)/1.2 var(--f-display); }
.taller-servicio a { color: var(--forja); text-decoration: none; }
.taller-servicio a::after { content: ""; position: absolute; inset: 0; }
.taller-servicio:hover a { text-decoration: underline; text-decoration-color: var(--oro); }
.taller-servicio p { color: var(--piedra-700); }
.taller-servicio--destacado { background: var(--forja); outline-color: var(--forja); }
.taller-servicio--destacado::before { background: var(--oro-claro); }
.taller-servicio--destacado a { color: var(--cal); }
.taller-servicio--destacado p { color: var(--piedra-300); }
.taller-servicio--destacado a:focus-visible { outline-color: var(--oro-claro); }
@media (min-width: 768px) {
  .taller-pagina .taller-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taller-servicio--destacado { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .taller-pagina .taller-servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); } }

.taller-pagina .taller-razones { display: grid; gap: var(--e-6) var(--e-5); margin-top: var(--e-6); padding-block: var(--e-6); border-block: 1px solid var(--piedra-300); }
.taller-razones li { display: grid; gap: var(--e-2); align-content: start; }
.taller-razones .icono { width: 1.75rem; height: 1.75rem; color: var(--oro-osc); stroke-width: 1.25; }
.taller-razones strong { font: 400 var(--t-21)/1.15 var(--f-display); }
.taller-razones p { font-size: var(--t-14); color: var(--piedra-700); }
@media (min-width: 768px) { .taller-pagina .taller-razones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .taller-pagina .taller-razones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); } }

/* ---------- Preguntas, enlaces, «Ven a vernos» y otros servicios ---------- */
.taller-pagina .pagina-faq .faq { margin-top: var(--e-6); }
@media (min-width: 1024px) {
  .taller-pagina .pagina-faq .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: var(--e-8); border-top: 0; }
  .pagina-faq .faq details:nth-child(-n + 2) { border-top: 1px solid var(--piedra-300); }
}
.taller-pagina .ayuda { margin-top: var(--e-6); }

.taller-visita { display: grid; gap: var(--e-2); padding-top: var(--e-8); border-top: 1px solid var(--piedra-300); }
.taller-visita .lead { margin-top: var(--e-4); }
@media (min-width: 1024px) {
  .taller-visita { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: start; }
  .taller-visita .visita { margin-top: 0; }
}

.taller-pagina .taller-otros { margin-top: clamp(var(--e-8), 7vw, var(--e-9)); padding-top: var(--e-6); border-top: 1px solid var(--piedra-300); }
.taller-pagina .taller-otros h2 { font-size: var(--t-24); }
.taller-otros ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.taller-otros ul a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--e-4); border: 1px solid var(--piedra-500); border-radius: var(--r-sello); color: var(--forja); font-size: var(--t-14); font-weight: 500; text-decoration: none; transition: background var(--rapido), border-color var(--rapido); }
.taller-otros ul a:hover { border-color: var(--forja); background: var(--piedra-100); }
.taller-otros .enlace { display: inline-block; margin-top: var(--e-4); }