/* ==================================================================== *
 * epstudio.es — hoja de responsive
 *
 * BASE: la capa de Claude Design del 27-08-2026, tal cual la entregaron.
 * Todo su archivo vive dentro de `max-width:1199.98px`, así que no puede
 * alcanzar al escritorio. Está medida a 360/390/430/768/1024 px: 0
 * desbordes, 0 textos bajo 16 px, 0 táctiles bajo 44 px. No se toca, no se
 * limpia y no se le quitan los !important: están justificados en su
 * INFORME-RESPONSIVE.md.
 *
 * Mi capa de móvil anterior se retira entera el 27-08 (queda de respaldo en
 * responsive-mia-20260826.css.bak). Dos capas peleándose era exactamente el
 * problema que llevábamos toda la semana arrastrando.
 *
 * DESPUÉS, y solo por encima de 1024 px, van los añadidos propios que el
 * diseño no cubre: la escala de página, el acordeón de la FAQ en escritorio,
 * el reparto del bloque de contacto y el pie a dos columnas.
 * ==================================================================== */


/* ── BASE · Claude Design, 27-08-2026 ────────────────────────────────── */

/* ============================================================================
   EP STUDIO · responsive.css
   Capa responsive única. Escritorio ≥1200 px queda intacto.
   ----------------------------------------------------------------------------
   CONTRATO DE ESTE ARCHIVO

   1. Entra SIEMPRE en último lugar, después del <style> de la página:
        <link rel="stylesheet" href="responsive.css">
      (o, en producción, concatenado al final de la hoja principal).

   2. Todo el archivo vive dentro de @media (max-width:1199.98px), salvo:
        · el bloque de variables (§1), que no pinta nada por sí solo;
        · §2, que sólo desbloquea el lienzo de 1440 px;
        · §17, accesibilidad, que aplica a cualquier ancho.
      Consecuencia: por encima de 1200 px este archivo es inerte. El escritorio
      no puede romperse porque no hay ninguna regla que lo alcance.

   3. Sobre !important. El HTML lleva los estilos en atributo `style`, y un
      estilo en línea gana a cualquier selector de hoja externa. Para bajar un
      valor en móvil no hay alternativa técnica: o !important, o se toca el
      HTML. Se ha elegido !important y no tocar el HTML, según el encargo.
      No es descuido; es la única salida con el HTML actual. La forma de
      quitarlos está en el informe (siete clases y desaparece el 90 %).

   4. Selectores. Se usan sólo hooks estables:
        · [data-screen-label="…"]  — presente y constante en las nueve páginas
        · .ep-* / .fb-*            — clases ya existentes
        · etiquetas semánticas     — h1, h2, h3, p, footer, article
      Quedan CUATRO selectores por subcadena de `style`, marcados con
      /* FRÁGIL *​/ y listados en el informe: son elementos sin ningún hook.

   Cortes: 1200 (tablet h.) · 1024 (iPad h.) · 768 (iPad v.) · 600 (móvil)
   Verificado a 360 / 390 / 430 / 600 / 768 / 1024 / 1200 / 1440 px.
   ========================================================================== */


/* ─── 1. VARIABLES ─────────────────────────────────────────────────────────
   Escala fluida interpolada entre 390 px y 1200 px. En 390 px cae exactamente
   en los valores de la maqueta aprobada; en 1200 px enlaza con el escritorio.
   No hay saltos: cada clamp() es continuo en todo el recorrido.            */

:root{
  /* Paleta — un solo granate. No añadir tonos. */
  --gr:#681B32;
  --gr-num:#C29AA6;
  --gr-vers:#E0C6CD;
  --gr-vers-2:#C9AEB6;
  --gr-dest:#E8D5C4;
  --mf:#F7F3ED;
  --mf-2:#EEE8E0;
  --bd:#DCD3C8;
  --bd-2:#D3C8BC;
  --tx:#26211D;
  --tx-2:#5E5854;
  --tx-3:#8C8079;

  /* Tipografía fluida (390 → 1200 px) */
  --fs-h1:clamp(37px, 25.93px + 2.84vw, 60px);
  --fs-h2:clamp(29px, 23.70px + 1.358vw, 40px);
  --fs-h3:clamp(21px, 18.59px + .617vw, 26px);
  --fs-num:clamp(44px, 40.15px + .988vw, 52px);
  --fs-manif:clamp(21px, 16.67px + 1.111vw, 30px);
  --fs-body:clamp(16px, 15.52px + .123vw, 17px);
  --fs-sec:clamp(15px, 14.76px + .062vw, 15.5px);
  --fs-vers:11px;              /* la maqueta dice 10,5. Ver informe, punto 3. */

  /* Métrica */
  --pad-x:clamp(22px, 13.33px + 2.222vw, 40px);
  --pad-t:clamp(44px, 18.96px + 6.420vw, 96px);
  --pad-b:clamp(40px, 17.85px + 5.679vw, 86px);
  --tap:44px;                  /* área táctil mínima */
  --bar:44px;                  /* barra superior, alto real */
  --dock:56px;                 /* barra inferior de contacto */
}


/* ─── 2. EL LIENZO DEJA DE SER DE 1440 px ──────────────────────────────────
   El wrapper del body lleva min-width:1440px en línea. Es la causa raíz del
   scroll lateral: sin esto, ninguna otra regla sirve de nada.              */

@media (max-width:1439.98px){
  body > div{min-width:0 !important; width:100% !important}
  img,video,svg,iframe{max-width:100%}
}


/* ══════════════════════════════════════════════════════════════════════════
   A partir de aquí, todo por debajo de 1200 px.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1199.98px){

/* ─── 3. TIPOGRAFÍA ───────────────────────────────────────────────────────
   Se baja la escala manteniendo la proporción: el display baja mucho, el
   cuerpo casi nada. En 390 px el H1 es 2,3× el cuerpo (en escritorio 4,1×):
   la jerarquía se comprime, no se aplana.                                  */

  h1{font-size:var(--fs-h1) !important; line-height:1.06 !important; text-wrap:balance}
  h2{font-size:var(--fs-h2) !important; line-height:1.12 !important; text-wrap:balance}
  h3{font-size:var(--fs-h3) !important; line-height:1.22 !important; text-wrap:balance}

  /* Cuerpo. Nunca por debajo de 16 px: bajo esa cifra iOS hace zoom al
     enfocar un campo y el texto corrido deja de leerse cómodamente. */
  article p, section p, footer p,
  [data-screen-label] p{
    font-size:var(--fs-body) !important;
    line-height:1.62 !important;
    text-wrap:pretty;
  }

  /* Excepción: el enunciado grande de la banda «Criterio» es display, no
     cuerpo. Mantiene su papel de titular. */
  [data-screen-label="Criterio"] > p:first-of-type{
    font-size:var(--fs-h2) !important;
    line-height:1.16 !important;
    max-width:24ch !important;
  }
  [data-screen-label="Criterio"] > p:last-of-type{
    font-size:var(--fs-body) !important;
    line-height:1.66 !important;
  }

  /* Manifiesto en versalitas (estudio.html) */
  [data-screen-label="Manifiesto"] p{
    font-size:var(--fs-manif) !important;
    line-height:1.34 !important;
  }

  /* Versalitas y etiquetas. 11 px con tracking abierto: por debajo, en
     mayúsculas y sobre granate, dejan de leerse en pantalla al sol. */
  [data-screen-label] > span[style*="text-transform:uppercase"],   /* FRÁGIL */
  [data-screen-label] span[style*="letter-spacing:.22em"]{         /* FRÁGIL */
    font-size:var(--fs-vers) !important;
    letter-spacing:.2em !important;
  }

  /* Numeral Instrument Serif de cada sección (01–08) */
  [data-screen-label] div[style*="align-items:baseline"] > span:first-child{ /* FRÁGIL */
    font-size:var(--fs-num) !important;
    line-height:1 !important;
  }

  /* Ancho de línea: 40–60 caracteres. Si un párrafo llega al borde falta
     padding lateral, no falta cuerpo de letra. */
  article p, section p{max-width:62ch}


/* ─── 4. RITMO VERTICAL Y PADDING LATERAL ─────────────────────────────────
   El aire de escritorio (96/86) hace la página kilométrica en móvil. Se
   reduce un 45 % en 390 px, proporcionalmente, sin aplanar todo a un valor. */

  body > div > section,
  body > div > div[data-screen-label],
  article > section,
  footer > div{
    padding-left:var(--pad-x) !important;
    padding-right:var(--pad-x) !important;
  }
  article > section,
  body > div > section:not([data-screen-label="Hero"]){
    padding-top:var(--pad-t) !important;
    padding-bottom:var(--pad-b) !important;
  }
  article > section > div,
  section > div[style*="max-width:780px"]{max-width:100% !important} /* FRÁGIL */

  /* La columna de lectura ya no necesita centrarse: es el ancho de pantalla */
  article > section{align-items:stretch !important}


/* ─── 5. REJILLAS A UNA COLUMNA ───────────────────────────────────────────
   768 px → 2 columnas donde el contenido lo admite. 600 px → 1, sin excepción.
   El gap baja en la misma proporción que el padding.                        */

  [data-screen-label="Criterio"],
  [data-screen-label="Manifiesto"],
  [data-screen-label="Retrato"],
  [data-screen-label="04 Google y Meta"],
  [data-screen-label="04 Tipos de proyecto"],
  #contacto{
    grid-template-columns:1fr !important;
    gap:clamp(22px, 14px + 2vw, 40px) !important;
  }

  /* El símbolo decorativo de la banda «Criterio» no cabe y no aporta:
     es <img> decorativa, no contenido indexable. */
  [data-screen-label="Criterio"] > img{display:none}

  /* Retrato de /estudio: la foto pasa arriba con ratio en vez de 620 px fijos */
  [data-screen-label="Retrato"] > div:first-child{
    min-height:0 !important;
    aspect-ratio:4/5;
  }


/* ─── 6. HERO ─────────────────────────────────────────────────────────────
   El hero es un lienzo de altura fija (900/700/660 px) con la cabecera
   posicionada dentro. En móvil pasa a flujo: altura automática y la cabecera
   como primer elemento. Sin esto la foto se recorta y el texto se sale.     */

  [data-screen-label="Hero"]{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  [data-screen-label="Hero"] > img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:30% bottom !important;
  }
  [data-screen-label="Hero"] > div{
    position:relative !important;
    height:auto !important;
    padding-top:clamp(40px, 20px + 5vw, 72px) !important;
    padding-bottom:clamp(48px, 26px + 5.6vw, 84px) !important;
  }

  /* CAUSA DE DESBORDE 1 — el bloque de texto del hero lleva width:52% junto a
     un min-width en píxeles pensado para el lienzo de 1440. width:100% no lo
     desactiva: hay que anular el min-width y el padding de 80/90 px. */
  [data-screen-label="Hero"] > div > div{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding-left:var(--pad-x) !important;
    padding-right:var(--pad-x) !important;
  }
  [data-screen-label="Hero"] *{min-width:0}

  /* CAUSA DE DESBORDE 2 — la foto del hero lleva un transform:scale de la
     animación de respiración. Apagar la animación no borra la escala: el
     rectángulo sigue midiendo 1,2× el ancho de pantalla. */
  .ep-hero-img{
    animation:none !important;
    transform:none !important;
  }


/* ─── 7. CABECERA, BARRA FIJA Y MENÚ ──────────────────────────────────────
   La barra granate mide 44 px REALES (no 44 nominales + 12 de padding = 68).
   Es la única navegación persistente en móvil.                              */

  .ep-bar{display:block !important}
  .ep-bar > div{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    height:var(--bar) !important;
    padding:0 var(--pad-x) !important;
    padding-top:env(safe-area-inset-top) !important;
    box-sizing:content-box !important;
    background:var(--gr) !important;
  }
  .ep-bar > div > div:first-child,
  .ep-bar > div > span{display:none !important}
  .ep-bar img[alt="EP Studio"]{width:128px !important; height:auto !important}

  .ep-burger{
    display:flex !important;
    align-items:center;
    min-width:var(--tap);
    min-height:var(--tap);
  }

  /* CAUSA DE DESBORDE 3 — la cabecera del hero es una rejilla 1fr auto 1fr
     con el menú de anclas, el logotipo y el botón de contacto. Los tres no
     caben en 390 px y se salen por la derecha.
     En móvil queda el logotipo solo: el menú de anclas ya está en el sumario,
     y el contacto, en la barra inferior fija. Nada se pierde, no se duplica. */
  [data-screen-label="Hero"] > div[style*="grid-template-columns:1fr auto 1fr"]{ /* FRÁGIL */
    order:-1;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:16px !important;
    margin-inline:0 !important;
    padding:0 var(--pad-x) !important;
    height:var(--bar) !important;
    min-height:var(--bar) !important;
    background:var(--gr) !important;
    overflow:hidden !important;
  }
  [data-screen-label="Hero"] > div[style*="grid-template-columns:1fr auto 1fr"] > div, /* FRÁGIL */
  [data-screen-label="Hero"] > div[style*="grid-template-columns:1fr auto 1fr"] > span{ /* FRÁGIL */
    display:none !important;
  }
  [data-screen-label="Hero"] > div[style*="grid-template-columns:1fr auto 1fr"] img[alt="EP Studio"]{ /* FRÁGIL */
    width:128px !important;
    min-width:0 !important;
    height:auto !important;
  }

  /* Al abrir el menú, el fondo no se mueve */
  body:has(.ep-burger[aria-expanded="true"]){overflow:hidden}


/* ─── 8. SUMARIO DE ANCLAS ────────────────────────────────────────────────
   Deja de ser sticky en móvil: dos barras fijas compitiendo por 44 px de
   alto cada una se comen un quinto de la pantalla.                          */

  .ep-sum, [data-screen-label="Sumario"]{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    display:flex !important;
    grid-template-columns:none !important;
    padding:0 var(--pad-x) !important;
  }
  .ep-sum > span, [data-screen-label="Sumario"] > span{display:none !important}
  .ep-sum > nav, [data-screen-label="Sumario"] > nav{
    gap:24px !important;
    border-left:0 !important;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 84%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
  }
  .ep-sum > nav::-webkit-scrollbar,
  [data-screen-label="Sumario"] > nav::-webkit-scrollbar{display:none}
  .ep-anc, [data-screen-label="Sumario"] nav a{
    min-height:var(--tap);
    scroll-snap-align:start;
  }
  /* Sin barra pegada arriba, el ancla no necesita compensación grande */
  section,[id]{scroll-margin-top:calc(var(--bar) + 16px)}


/* ─── 9. BANDAS PANORÁMICAS E IMÁGENES ────────────────────────────────────
   Ratio muy ancho: a 390 px una banda de 520 px de alto ocupa pantalla y
   media, y con height:auto quedaría en 60 px. Se recorta con aspect-ratio.
   El aspect-ratio también evita el salto de layout (CLS) al cargar: es la
   parte de este archivo que sí afecta a Core Web Vitals, y por tanto al SEO. */

  [data-screen-label="Banda panorámica"]{
    height:auto !important;
    aspect-ratio:16/10;
  }
  [data-screen-label="Banda panorámica"] > img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  [data-screen-label="Banda panorámica"] > div{padding:0 var(--pad-x) !important}

  /* Parálaje fuera: en táctil cuesta más de lo que aporta */
  [data-screen-label="Banda panorámica"] > img{transform:none !important}


/* ─── 10. CARRUSELES ──────────────────────────────────────────────────────
   Marquesina de clientes: a 26 s. A 34 s, con el ancho de móvil, parece
   detenida. Máscara al 8 % para que se lea que hay más a los lados.         */

  /* Marquesina de clientes: a 26 s. A 34 s, con el ancho de móvil, parece
     detenida. Máscara al 8 % para que se lea que hay más a los lados.
     :not(:has(.ep-pz)) la distingue del carrusel de piezas, que comparte clase. */
  .ep-mq-wrap:not(:has(.ep-pz)) .ep-mq{animation-duration:26s !important}
  .ep-mq-wrap:not(:has(.ep-pz)){
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
  }
  [data-screen-label="Clientes"]{flex-direction:column !important; align-items:stretch !important}
  [data-screen-label="Clientes"] > span{
    border-right:0 !important;
    padding:14px var(--pad-x) 0 !important;
  }

  /* Carrusel de piezas: una a pantalla, arrastre táctil con scroll-snap.
     Sin JS. Ratio 4:5. Las vecinas se insinúan, no se ven a medias.
     El contenedor comparte clase con la marquesina de clientes, así que se
     distingue por lo que contiene: :has(.ep-pz). */
  .ep-mq-wrap:has(.ep-pz){
    display:block !important;
    margin:2px 0 24px 0 !important;   /* anula el -256px del lienzo de 1440 */
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad-x);
    padding-inline:var(--pad-x) !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 92%,transparent) !important;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent) !important;
  }
  .ep-mq-wrap:has(.ep-pz)::-webkit-scrollbar{display:none}

  /* La tira deja de desplazarse sola: ahora la mueve el dedo. */
  .ep-mq-wrap:has(.ep-pz) .ep-mq{
    animation:none !important;
    display:flex !important;
    gap:12px !important;
    padding-right:0 !important;
  }
  /* La segunda tira sólo existía para que el bucle no tuviera costura.
     Sin animación no hay bucle, y duplicar 18 imágenes sí cuesta. */
  .ep-mq-wrap:has(.ep-pz) .ep-mq[aria-hidden="true"]{display:none !important}

  .ep-pz{
    flex:0 0 86% !important;
    width:86% !important;
    height:auto !important;
    aspect-ratio:4/5;
    scroll-snap-align:center;
    display:flex !important;
    flex-direction:column !important;
  }
  .ep-pz > img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
  }
  /* Sin ratón no hay hover: nada se atenúa y la etiqueta se ve siempre */
  .ep-mq-wrap:hover .ep-pz{opacity:1 !important}

  /* Sin ratón no hay hover: la etiqueta de cliente vive debajo de la pieza */
  .ep-pz figcaption{
    position:static !important;
    opacity:1 !important;
    transform:none !important;
    background:var(--gr) !important;
    padding:13px 15px !important;
  }


/* ─── 11. FAQ ─────────────────────────────────────────────────────────────
   Home: índice + panel con radios (.fb-*). En móvil el panel sale debajo de
   SU pregunta, no al final de la lista.
   Servicios: <details> nativos, que ya funcionan; sólo medidas.             */

  .fb-grid{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:1fr !important;
  }
  .fb-grid > div{display:contents !important}
  .fb-sticky{position:static !important}
  .fb-lbl{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:var(--tap);
    padding:14px 0 !important;
    font-size:19px !important;
  }
  .fb-pan{padding:4px 0 26px !important}

  article summary{
    min-height:var(--tap);
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-size:19px !important;
  }


/* ─── 12. FORMULARIO Y CONTACTO ───────────────────────────────────────────
   16 px en los campos es funcional, no estético: por debajo, Safari iOS hace
   zoom al enfocar y descuadra la página.                                    */

  #contacto input,
  #contacto textarea,
  #contacto select{
    width:100% !important;
    box-sizing:border-box !important;
    font-size:16px !important;
    min-height:var(--tap);
  }
  #contacto button,
  #contacto button[type="submit"]{
    width:100% !important;
    min-height:48px !important;
  }
  #contacto{padding-top:var(--pad-t) !important; padding-bottom:var(--pad-b) !important}
  .ep-wa-box{
    flex-direction:row !important;
    align-items:center !important;
    gap:14px !important;
    padding:16px !important;
    min-height:var(--tap);
  }
  .ep-wa-arr{display:none}


/* ─── 13. PIE ─────────────────────────────────────────────────────────────*/

  footer[data-screen-label="Footer"] > div{
    grid-template-columns:1fr !important;
    gap:32px !important;
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
  footer img[alt="EP Studio"]{width:156px !important; height:auto !important}
  footer nav{display:flex !important; flex-direction:column !important}
  footer nav a,
  footer a{
    display:flex;
    align-items:center;
    min-height:var(--tap);
  }
  /* Deja hueco a la barra inferior fija. 8 px de margen para que la última
     línea del pie no quede lamiendo el filete de la barra. */
  footer{
    padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom) + 8px) !important;
  }


/* ─── 14. BARRA INFERIOR DE CONTACTO ──────────────────────────────────────
   56 px de alto REAL, como la barra superior son 44 reales. El CSS base le da
   9 px de padding y 50 px de alto a los botones (9+50+9 = 68): fijar sólo
   `height` no sirve, la caja crece. Hay que anular el padding y bajar el alto
   de los botones a 44, que es el mínimo táctil y cabe holgado en 56.        */

  .ep-cta{
    display:flex !important;
    height:var(--dock) !important;
    box-sizing:border-box !important;
    padding:6px 12px !important;
    padding-bottom:calc(6px + env(safe-area-inset-bottom)) !important;
    background:var(--gr) !important;
  }
  .ep-cta > a{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height:var(--tap) !important;
  }


/* ─── 15. TODO LO QUE SE TOCA MIDE 44 px ──────────────────────────────────
   Umbral de WCAG 2.2 (2.5.8) y de las guías de Apple. No es un detalle:
   es la diferencia entre una web que se usa con el pulgar y una que no.     */

  a[href], button, summary, label[for], [role="button"]{
    min-height:var(--tap);
  }
  a[href]:not(article p a):not(section p a),
  button{
    display:inline-flex;
    align-items:center;
  }
  /* Los enlaces dentro de un párrafo son texto corrido: forzarles 44 px
     rompería el interlineado. Se les da área táctil sin alterar el flujo. */
  article p a, section p a{
    display:inline;
    padding-block:.35em;
  }
  .ep-tel, .ep-tel-alt, .ep-tel-inv, .ep-wa{min-height:var(--tap)}


/* ─── 16. CORTES ESTRECHOS ────────────────────────────────────────────────*/

  /* iPad vertical y menores: lo que quedaba en dos columnas cae a una */
  @media (max-width:767.98px){
    [style*="grid-template-columns"]{grid-template-columns:1fr !important} /* FRÁGIL */
    [data-screen-label="Retrato"] > div:first-child{aspect-ratio:1/1}
  }

  /* Móvil. La tabla de dos columnas de «Punto de partida» no cabe: la
     respuesta pasa debajo de su pregunta, sangrada, con filete granate. */
  @media (max-width:600px){
    [data-screen-label^="01"] > div > div{
      display:flex !important;
      flex-direction:column !important;
      gap:8px !important;
    }
    [data-screen-label^="01"] > div > div > p:last-child{
      margin-left:14px !important;
      padding-left:14px !important;
      border-left:2px solid var(--gr-num) !important;
    }
    /* Servicios: foto 96×66 a la izquierda, texto a la derecha */
    [data-screen-label^="02"] article,
    [data-screen-label^="02"] > div > div{gap:14px !important}
    [data-screen-label^="02"] img{
      width:96px !important;
      height:66px !important;
      object-fit:cover !important;
      flex:none !important;
    }
    /* Cifras de experiencia: apiladas, no en fila */
    [data-screen-label^="06"] > div:first-child{
      flex-direction:column !important;
      gap:26px !important;
    }
    .ep-pz{flex-basis:88% !important; width:88% !important}
  }

} /* fin de max-width:1199.98px */


/* ─── 17. ACCESIBILIDAD Y MOVIMIENTO (cualquier ancho) ────────────────────*/

@media (prefers-reduced-motion:reduce){
  .ep-mq, .ep-hero-img, .ep-rv{animation:none !important; transition:none !important}
  .ep-rv{opacity:1 !important; transform:none !important}
  .ep-pz-wrap, .ep-sum > nav{scroll-behavior:auto}
  html{scroll-behavior:auto}
}

/* Foco visible de verdad, también en táctil con teclado externo */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gr);
  outline-offset:3px;
}
@media (max-width:1199.98px){
  a:focus-visible, button:focus-visible{outline-color:var(--mf)}
  [data-screen-label="Hero"] a:focus-visible{outline-color:var(--mf)}
}

/* Evita el zoom de iOS al girar el dispositivo */
html{-webkit-text-size-adjust:100%}
*{-webkit-tap-highlight-color:rgba(104,27,50,.14)}


/* ─── 18. CINTURÓN DE SEGURIDAD ───────────────────────────────────────────
   Va al final y a propósito. §2 arregla la causa del desborde (el lienzo de
   1440 px); esto sólo cubre un caso futuro que se nos escape. Si hace falta
   para que la página no se mueva en horizontal, hay un bug que buscar arriba,
   no un parche que dejar aquí.

   `overflow-x:clip` y no `hidden`: hidden crea un contenedor de scroll y
   rompe position:sticky en los descendientes. clip no.                      */

@media (max-width:1199.98px){
  html, body{overflow-x:clip; max-width:100%}
}



/* ── AÑADIDOS PROPIOS · solo escritorio ──────────────────────────────── */

/* La cabecera del hero va `position:static` y aparece antes que el bloque de
   texto, que es `position:relative` y ocupa el hero entero. Sin subirla de
   nivel, ese bloque se come los clics del menú en las páginas de servicio.
   Comprobado con elementFromPoint: devolvía el div, no el enlace. */
.r-cabecera { position: relative; z-index: 4; }

/* Formulario inyectado por el portador. El resto de su estilo lo pone el
   marcado, copiado del formulario que el diseño trae en la home. */
.trampa { position: absolute; left: -9999px; }
.nota-form { font-size: 12.5px; color: #8C8079; margin: 0; }

.fb-lbl { position: relative; padding-right: 48px !important; }
.fb-lbl::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  line-height: 1;
  color: #C29AA6;
  transition: color .22s ease;
}
.fb-lbl:hover::after { color: #681B32; }

.fb-in:nth-of-type(1):checked ~ .fb-grid .fb-lbl:nth-of-type(1)::after,
.fb-in:nth-of-type(2):checked ~ .fb-grid .fb-lbl:nth-of-type(2)::after,
.fb-in:nth-of-type(3):checked ~ .fb-grid .fb-lbl:nth-of-type(3)::after,
.fb-in:nth-of-type(4):checked ~ .fb-grid .fb-lbl:nth-of-type(4)::after,
.fb-in:nth-of-type(5):checked ~ .fb-grid .fb-lbl:nth-of-type(5)::after,
.fb-in:nth-of-type(6):checked ~ .fb-grid .fb-lbl:nth-of-type(6)::after,
.fb-in:nth-of-type(7):checked ~ .fb-grid .fb-lbl:nth-of-type(7)::after,
.fb-in:nth-of-type(8):checked ~ .fb-grid .fb-lbl:nth-of-type(8)::after,
.fb-in:nth-of-type(9):checked ~ .fb-grid .fb-lbl:nth-of-type(9)::after {
  content: "\2212";
  color: #E8D5C4;
}

/* El panel: crema, filete granate arriba y texto en tinta. */
.fb-pan {
  background: #FBF8F2 !important;
  color: #26211D !important;
  border-top: 2px solid #681B32 !important;
  border-bottom: 1px solid #DCD3C8 !important;
  padding: 30px 34px 34px !important;
  gap: 14px !important;
  animation: fb-abre .34s cubic-bezier(.22, .61, .36, 1) both !important;
}
.fb-pan > span:first-child { color: #8C8079 !important; }
.fb-pan h3 { color: #681B32 !important; font-size: 23px !important; }
.fb-pan p  { color: #5E5854 !important; }

@keyframes fb-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}


@media (min-width: 1201px) and (max-width: 1439px) {
  :root { --z: 0.86; }
  body { zoom: 0.86; }
}
}
@media (min-width: 1025px) {
  /* Estirar la columna y mandar los datos al pie no arreglaba nada: movía
     el hueco al centro, que se ve todavía peor. Con la tarjeta ya corta,
     el texto se centra y lo que sobra se reparte arriba y abajo, que es
     como se lee un bloque a dos columnas de alturas distintas. */
  [style*="grid-template-columns:minmax(0,1fr) 560px"][style*="background:#681B32"] > div:first-child {
    align-self: center !important;
  }
}
@media (min-width: 1025px) {
  .r-pie > nav:last-of-type,
  footer nav:last-of-type {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px 36px;
    align-content: start;
  }
  .r-pie > nav:last-of-type > span:first-child,
  footer nav:last-of-type > span:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
  .fb-grid { display: flex !important; flex-direction: column !important; }
  .fb-grid > div { display: contents !important; }

  .fb-lbl:nth-of-type(1) { order: 1 }   .fb-pan:nth-of-type(1) { order: 2 }
  .fb-lbl:nth-of-type(2) { order: 3 }   .fb-pan:nth-of-type(2) { order: 4 }
  .fb-lbl:nth-of-type(3) { order: 5 }   .fb-pan:nth-of-type(3) { order: 6 }
  .fb-lbl:nth-of-type(4) { order: 7 }   .fb-pan:nth-of-type(4) { order: 8 }
  .fb-lbl:nth-of-type(5) { order: 9 }   .fb-pan:nth-of-type(5) { order: 10 }
  .fb-lbl:nth-of-type(6) { order: 11 }  .fb-pan:nth-of-type(6) { order: 12 }
  .fb-lbl:nth-of-type(7) { order: 13 }  .fb-pan:nth-of-type(7) { order: 14 }
  .fb-lbl:nth-of-type(8) { order: 15 }  .fb-pan:nth-of-type(8) { order: 16 }
  .fb-lbl:nth-of-type(9) { order: 17 }  .fb-pan:nth-of-type(9) { order: 18 }

  /* Aire entre el rótulo de sección y la primera pregunta. Con 46 px la
     primera fila seguía pegada al filete del 07. */
  [style*="position:relative;margin:6px 0 0 -256px"] { margin-top: 74px !important; }
}


/* ── PARCHE SOBRE LA CAPA DE CLAUDE DESIGN ───────────────────────────── *
 *
 * Su INFORME-RESPONSIVE.md declara 0 desbordes en las nueve páginas a 390 px.
 * Servida su propia carpeta `html-estatico/` con un servidor local, la home
 * da **1.568 px de desborde** a 390. La sección culpable es la misma en su
 * build y en el nuestro: «06 Experiencia».
 *
 * Causa, medida sobre su archivo: dentro de esa sección hay dos bloques con
 * `margin-left:-256px` (la rejilla de tres cifras y el carrusel de piezas).
 * El margen negativo estira el min-content del contenedor, y como los hijos
 * de la rejilla `160px minmax(0,1fr)` llevan `min-width:auto`, la sección
 * entera se planta en 1.936 px aunque la pantalla mida 390. El envoltorio
 * del carrusel llega a 30.197 px de `scrollWidth`.
 *
 * Tres reglas lo cierran. Van dentro de su mismo corte, así que el
 * escritorio sigue sin enterarse.
 * -------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  /* Un hijo de rejilla o de flex no baja de su contenido salvo que se le
     diga. Es la causa de fondo de casi todos los desbordes de esta web. */
  [style*="grid-template-columns:160px minmax(0,1fr)"] > *,
  [style*="grid-template-columns:180px minmax(0,1fr)"] > * { min-width: 0; }

  /* Los bloques que en escritorio se meten bajo la columna del número. En
     una sola columna no hay nada bajo lo que meterse, y el margen negativo
     solo sirve para estirar la página. */
  [style*="-256px"] { margin-left: 0 !important; }

  .ep-mq-wrap { min-width: 0; }

  /* La rejilla de contacto de la home: sus dos columnas seguían midiendo
     443 px dentro de una pantalla de 390, y la sección lo tapaba con
     `overflow:hidden`. Se apila y sus hijos pueden encogerse. */
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] > *,
  [style*="grid-template-columns:minmax(0,1fr) 560px"] > * { min-width: 0; }

  /* La rejilla del retrato de /estudio lleva la columna fija a la
     izquierda: `560px minmax(0,1fr)`. Sin colapsarla, la foto se sale. */
  [style*="grid-template-columns:560px minmax(0,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:560px minmax(0,1fr)"] > * { min-width: 0; }

  /* La fila de datos de contacto (teléfono, dirección y símbolo) es un flex
     que no envolvía: el símbolo acababa a 465 px en una pantalla de 390. */
  [style*="background:#681B32"] [style*="display:flex"][style*="gap:"] { flex-wrap: wrap; }

  /* Los tres enlaces de contacto directo que inyecta el portador (teléfono,
     WhatsApp y correo) medían 33 px de alto. Son los únicos que quedaban
     por debajo del umbral táctil de 44. */
  a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    /* el correo mide 205 px y con inline-flex dejaba de partirse */
    overflow-wrap: anywhere;
  }

  /* Añadidos propios que su capa no podía prever porque no existen en su
     build: el bloque de garantías del contacto y la fila de legales del
     pie. Los dos son rejillas de tres y dos columnas. */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  footer [style*="justify-content:space-between"] { flex-wrap: wrap !important; row-gap: 14px !important; }
}