/* ===========================================================================
   AM Decora · estilos. Un solo archivo: cambiar «ese rojo más oscuro» es
   cambiar una línea (patrones/mantenimiento.md).

   Piel clara del sistema de Hernán Mora (patrones/sistema-hm.md) con la marca
   del cliente. Colores muestreados de SU logo y SU CSS (branding.json):
     --rojo        #EE1C25  su rojo: 4,35 sobre blanco → SOLO decoración
     --rojo-texto  #C8161E  oscurecido NUESTRO: 5,85 sobre blanco, 5,38 sobre --claro
     --rojo-hondo  #A31218  7,90 sobre blanco: foco y texto sobre fondos rojizos
     --gris-marca  #646466  su gris del logo: 5,90 sobre blanco (texto secundario)
     --oscuro      #3D4852  su gris del pie: blanco encima da 9,34
   Escala tipográfica y de espacios con nombre; suelo de 16 px en cualquier texto.
   Puntos de ruptura: 600 · 900 · 1000 (sale el menú completo) · 1100.
   =========================================================================== */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: optional;               /* sin saltos al cargar (CLS 0) */
  src: url("assets/fuentes/poppins-700.woff2") format("woff2");
}

:root {
  --rojo: #EE1C25;
  --rojo-texto: #C8161E;
  --rojo-hondo: #A31218;
  --gris-marca: #646466;
  --oscuro: #3D4852;
  --oscuro-2: #2E3740;     /* el pie: blanco encima 12,1 */
  --verde-wa: #0E6B3B;     /* botón de WhatsApp: blanco encima 6,6 */
  --tinta: #1F2328;        /* 15,8 sobre blanco */
  --tinta-2: #4A4F55;      /* 8,2 sobre blanco, 7,5 sobre --claro */
  --fondo: #FFFFFF;
  --claro: #F6F4F1;        /* fondo de sección, cálido */
  --claro-2: #E9E4DE;
  --linea: #DDD7D0;
  --borde-campo: #7C8288;  /* 3,9 sobre blanco: borde de los campos */
  --sobre-oscuro: #E8EBEE; /* texto secundario sobre --oscuro: 7,6 */

  --titular: "Poppins", "Segoe UI", system-ui, sans-serif;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-s: 1rem;             /* el suelo: nada por debajo de 16 px */
  --t-m: 1.125rem;         /* cuerpo: 18 px */
  --t-l: 1.3rem;
  --t-xl: 1.6rem;
  --h1: clamp(1.9rem, 5.4vw, 3.05rem);
  --h2: clamp(1.5rem, 3.6vw, 2.2rem);
  --h3: clamp(1.15rem, 2.2vw, 1.35rem);
  --cifra: clamp(1.55rem, 6.6vw, 2.9rem);

  --e1: .4rem; --e2: .8rem; --e3: 1.2rem; --e4: 2rem; --e5: 3.2rem; --e6: 5rem;

  --barra: 64px;           /* el alto de la barra fija, en UN sitio */
  --radio: 12px;
  --sombra: 0 6px 24px rgb(31 35 40 / .10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--t-m)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); padding-bottom: 60px; }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--rojo-texto); text-underline-offset: .18em; }
:where(a, button, summary, input, select, textarea, video):focus-visible { outline: 3px solid var(--rojo-hondo); outline-offset: 2px; }
/* El rojo hondo no se ve alrededor de un botón rojo ni sobre el gris oscuro
   (QA, vuelta 1): los botones llevan anillo de tinta y las zonas oscuras, blanco. */
.boton:focus-visible { outline-color: var(--tinta); }
:is(.franja, .sec--oscuro, .cierre, .pie) :focus-visible { outline-color: #fff; }
.barra-movil a:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
:where(p, li, td, dd) a:where([href^="tel:"], [href^="mailto:"], [href*="wa.me"]) { display: inline-flex; align-items: center; min-height: 44px; }
h1, h2, h3, .cierre__t, .pie__marca { font-family: var(--titular); font-weight: 700; line-height: 1.18; text-wrap: balance; }
h1 { font-size: var(--h1); margin: 0 0 var(--e3); letter-spacing: -.01em; }
h2 { font-size: var(--h2); margin: var(--e5) 0 var(--e3); }
h3 { font-size: var(--h3); margin: var(--e4) 0 var(--e2); }
p, ul, ol { margin: 0 0 var(--e3); }
small, .pequeno { font-size: var(--t-s); }

.contenedor { width: min(100% - 2.2rem, 74rem); margin-inline: auto; }
.estrecho { max-width: 46rem; }
.estrecho > :is(p, ul, ol) { max-width: 35rem; }   /* ~70 caracteres por línea: a 46rem salían 87-94 en las guías (diseño, vuelta 5) */
.seccion { padding: var(--e5) 0; }
.seccion > .contenedor > h2:first-child, .seccion > .contenedor > .antetitulo:first-child + h2 { margin-top: 0; }
.seccion--claro { background: var(--claro); }
.seccion--claro a:not(.boton) { color: var(--rojo-hondo); }
.antetitulo { margin: 0 0 var(--e2); color: var(--rojo-texto); font-family: var(--titular); font-weight: 700; font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; }
.antetitulo--claro { color: #fff; }
.entrada { font-size: var(--t-l); color: var(--tinta-2); max-width: 42rem; }
.micro { color: var(--tinta-2); font-size: var(--t-s); margin-top: var(--e2); }

/* --- franja de datos y barra fija --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); }
.salto:focus { left: 1rem; }
.franja { background: var(--oscuro); color: #fff; font-size: var(--t-s); }
.franja__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e3); min-height: 44px; }
.franja a { color: #fff; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.franja__calle, .franja__hora { display: none; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 3px solid var(--rojo); }
.barra__in { display: flex; align-items: center; gap: var(--e3); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.barra__logo { height: 36px; width: auto; display: block; }
.nav-escritorio { display: none; gap: .1rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--tinta); text-decoration: none; font-weight: 600; border-radius: 8px; }
.nav-escritorio a:hover { color: var(--rojo-texto); }
.nav-escritorio a[aria-current="page"] { color: var(--rojo-texto); box-shadow: inset 0 -3px 0 var(--rojo); border-radius: 0; }
.barra .barra__tel { display: none; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 2px solid var(--tinta); border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil nav { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 3px); display: grid; background: var(--fondo); border-bottom: 3px solid var(--rojo); padding: var(--e1) 1.1rem var(--e3); box-shadow: var(--sombra); max-height: calc(100vh - var(--barra) - 60px); overflow-y: auto; }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--claro-2); }
.nav-movil nav a[aria-current="page"] { color: var(--rojo-texto); }

/* --- migas --- */
.migas-fondo { background: var(--claro); }
.migas { font-size: var(--t-s); color: var(--tinta-2); }
.migas ol { list-style: none; margin: 0; padding: .5rem 0; display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.migas li + li::before { content: "›"; margin-right: .5rem; color: var(--gris-marca); }
.migas a { color: var(--tinta-2); display: inline-flex; align-items: center; min-height: 44px; }
.migas [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .4rem 1.4rem; border-radius: 999px; background: var(--rojo-texto); color: #fff; font-family: var(--titular); font-weight: 700; font-size: var(--t-s); letter-spacing: .02em; text-decoration: none; border: 2px solid var(--rojo-texto); text-align: center; cursor: pointer; }
.boton:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); }
.boton--sec { background: #fff; color: var(--rojo-texto); }
.boton--sec:hover { background: var(--claro); color: var(--rojo-hondo); }
.boton--claro { background: #fff; color: var(--tinta); border-color: #fff; }
.boton--claro:hover { background: var(--claro); border-color: var(--claro); }
.boton--borde-claro { background: transparent; color: #fff; border-color: #fff; }
.boton--borde-claro:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 0; }

/* --- portada --- */
.hero { background: var(--claro); padding: var(--e4) 0 var(--e5); }
.hero__rej { display: grid; gap: var(--e4); align-items: center; }
.hero__foto { position: relative; }
.hero__foto .foto img { border-radius: var(--radio); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tienda { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e3) var(--e4); border-top: 4px solid var(--rojo); }
.tienda p { margin: 0 0 var(--e1); }
.tienda__tel { font-family: var(--titular); font-weight: 700; font-size: var(--t-xl); }
.tienda__tel a { color: var(--tinta); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.tienda__t { font-family: var(--titular); font-weight: 700; color: var(--rojo-texto); font-size: var(--t-s); text-transform: uppercase; letter-spacing: .06em; }

/* --- interiores --- */
.hero-int { background: var(--claro); padding: var(--e4) 0 var(--e4); }
.hero-int h1 { max-width: 48rem; }
.dos { display: grid; gap: var(--e4); align-items: start; }
.dos .foto img { border-radius: var(--radio); }

/* --- cifras --- */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); list-style: none; padding: 0; margin: 0; }
.cifras li { background: #fff; border-radius: var(--radio); padding: var(--e3); box-shadow: var(--sombra); }
.cifras b { display: block; font-family: var(--titular); font-size: var(--cifra); line-height: 1.1; color: var(--rojo-texto); white-space: nowrap; }
.cifras span { display: block; color: var(--tinta-2); font-size: var(--t-s); margin-top: var(--e1); }

/* --- triaje: una puerta por necesidad --- */
.triaje { background: #fff; border-radius: calc(var(--radio) + 4px); box-shadow: var(--sombra); padding: var(--e4) var(--e3); }
.triaje h2 { margin-top: 0; }
.casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--e2); list-style: none; padding: 0; margin: 0; }
.caso { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 var(--e2); align-items: start; align-content: start; padding: var(--e3); border-radius: var(--radio); background: var(--claro); border: 1px solid transparent; }
.caso:hover { border-color: var(--rojo); background: #fff; }
.caso svg { width: 2.4rem; height: 2.4rem; color: var(--rojo); grid-row: span 2; }
.caso h3 { margin: 0 0 .2rem; font-size: var(--h3); }
.caso h3 a { color: var(--tinta); text-decoration: none; }
.caso h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radio); } /* la tarjeta entera se pulsa */
.caso p { margin: 0; color: var(--tinta-2); font-size: var(--t-s); }

/* --- la figura del oficio: de la idea a la llave --- */
.sec--oscuro { background: var(--oscuro); color: #fff; padding: var(--e5) 0; }
.sec--oscuro h2 { color: #fff; margin-top: 0; }
.sec--oscuro p { color: var(--sobre-oscuro); }
.sec--oscuro a:not(.boton) { color: #fff; }
.flujo { counter-reset: paso; list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; gap: var(--e2); }
.flujo li { counter-increment: paso; position: relative; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .18); border-top: 4px solid var(--rojo); border-radius: var(--radio); padding: var(--e3); }
.flujo li::before { content: counter(paso); display: block; font-family: var(--titular); font-weight: 700; font-size: var(--t-xl); color: #fff; line-height: 1; margin-bottom: var(--e1); }
.flujo h3 { margin: 0 0 .3rem; font-size: var(--h3); color: #fff; }
.flujo h3 a { color: #fff; text-decoration: none; }
.flujo h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.flujo p { margin: 0; font-size: var(--t-s); }

/* --- fotos, galería y vídeo --- */
.foto figcaption, .video figcaption { font-size: var(--t-s); color: var(--tinta-2); margin-top: .45rem; }
.galeria { columns: 15rem; column-gap: var(--e3); }
.galeria .foto { break-inside: avoid; margin: 0 0 var(--e3); }
/* Galerías cortas (una galería no repite las fotos sueltas de su página y a
   veces quedan 1-3): sin columnas vacías a la derecha (QA, vuelta 4). */
.galeria:has(> :only-child) { columns: 1; max-width: 34rem; }
@media (min-width: 600px) {
  .galeria:has(> :nth-child(2):last-child), .galeria:has(> :nth-child(3):last-child) { columns: auto; display: grid; gap: var(--e3); align-items: start; }
  .galeria:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria:has(> :nth-child(2):last-child) .foto, .galeria:has(> :nth-child(3):last-child) .foto { margin: 0; }
}
.galeria img { border-radius: var(--radio); display: block; width: 100%; background: var(--claro); }
.video video { display: block; width: 100%; border-radius: var(--radio); background: #000; }
.videos { display: grid; gap: var(--e4); }
.foto--cartel img { background: var(--claro); }
.foto__ampliar { position: relative; display: block; cursor: zoom-in; }
.foto__lupa { position: absolute; right: .5rem; bottom: .5rem; padding: .15rem .6rem; border-radius: 999px; background: rgb(31 35 40 / .82); color: #fff; font-size: var(--t-s); line-height: 1.5; }
.foto__ampliar:hover .foto__lupa { background: var(--rojo-texto); }

/* --- preguntas --- */
.faq { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; align-items: center; min-height: 52px; padding: .5rem 2rem .5rem 0; cursor: pointer; font-weight: 700; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; font-family: var(--titular); font-size: 1.5rem; color: var(--rojo-texto); }
.faq[open] summary::after { content: "–"; }
.faq > p, .faq > ul { margin-top: 0; }

/* El título de una tarjeta que se pulsa entera: 44 px con relleno y margen
   negativo iguales, sin mover la tarjeta (patrones/sistema-hm.md).
   Con min-height + margen fijo, un título de DOS líneas pisaba el texto de
   debajo (triaje a 1280, vuelta 1): relleno y margen iguales valen para
   cualquier número de líneas. */
.caso h3 a, .flujo h3 a, .tarjeta h3 a, .noticia h3 a { display: block; padding: .8rem 0; margin: -.8rem 0; }
.migas a { min-width: 44px; justify-content: center; }
a[data-evento="mapa"] { display: inline-flex; align-items: center; min-height: 44px; }

/* --- bloques de contenido --- */
.rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* Sin última fila a medias (diseño, vuelta 3): las columnas según cuántas
   tarjetas haya. Sin :has() se queda el auto-fit de arriba, que también vale. */
@media (min-width: 600px) and (max-width: 899px) {
  .rejilla > :last-child:nth-child(odd), .flujo > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .rejilla:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla:has(> :nth-child(6):last-child), .rejilla:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rejilla:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .rejilla:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .rejilla:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tarjeta { position: relative; display: block; padding: var(--e3) var(--e4); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); color: var(--tinta); }
.tarjeta h3 { margin-top: 0; }
.tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radio); }
.tarjeta p { margin-bottom: var(--e1); color: var(--tinta-2); font-size: var(--t-s); }
.lista { padding-left: 1.2rem; }
.lista li { margin-bottom: .35rem; }
.lista li::marker { color: var(--rojo); }
.dato { font-family: var(--titular); font-weight: 700; font-size: var(--t-xl); color: var(--rojo-texto); }
.nota { background: var(--claro); border-left: 4px solid var(--rojo); border-radius: 0 var(--radio) var(--radio) 0; padding: var(--e3); }
.nota p:last-child { margin-bottom: 0; }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e3); }
.pasos li { counter-increment: paso; padding-left: 3.2rem; position: relative; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--rojo-texto); color: #fff; font-family: var(--titular); font-weight: 700; }
.pasos b { display: block; }
.banda { background: var(--claro); border-radius: var(--radio); padding: var(--e4); margin: var(--e4) 0; display: grid; gap: var(--e2); }
.banda__t { font-family: var(--titular); font-weight: 700; font-size: var(--t-l); margin: 0; }
.banda .acciones { margin-top: 0; }
.tabla { width: 100%; border-collapse: collapse; margin: var(--e3) 0; font-size: var(--t-s); }
.tabla th, .tabla td { padding: .7rem .5rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla th { color: var(--tinta-2); }
.tabla-envoltorio { overflow-x: auto; }
.cita-ley { margin: var(--e3) 0; padding: var(--e3); background: var(--claro); border-radius: var(--radio); border-left: 4px solid var(--oscuro); }
.cita-ley p:last-child { margin-bottom: 0; }
.fuentes { font-size: var(--t-s); color: var(--tinta-2); }
.fuentes li { margin-bottom: .4rem; overflow-wrap: anywhere; }
.fecha-guia { font-size: var(--t-s); color: var(--tinta-2); }
.noticias { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.noticia { position: relative; display: grid; gap: var(--e3); background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e3); }
.noticia h3 { margin: 0 0 .3rem; }
.noticia h3 a { color: var(--tinta); text-decoration: none; }
.noticia h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radio); }
.noticia p { margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
.noticia img { border-radius: var(--radio); width: 100%; max-width: 12rem; }
.datos { display: grid; gap: var(--e3); }
.datos dt { font-family: var(--titular); font-weight: 700; color: var(--rojo-texto); font-size: var(--t-s); text-transform: uppercase; letter-spacing: .05em; }
.datos dd { margin: 0; }

/* --- cierre --- */
.cierre { background: var(--oscuro); color: #fff; padding: var(--e5) 0; }
.cierre__rej { display: grid; gap: var(--e4); align-items: center; }
.cierre p { color: var(--sobre-oscuro); }
.cierre a:not(.boton) { color: #fff; }
.cierre__t { font-size: var(--h2); color: #fff !important; margin: 0 0 var(--e2); }
.cierre .micro { color: var(--sobre-oscuro); }
.tel-xl { font-family: var(--titular); font-weight: 700; font-size: clamp(1.9rem, 6vw, 2.7rem); margin: 0 0 var(--e2); }
.tel-xl a { text-decoration: none; }

/* --- formulario --- */
.form { display: grid; gap: var(--e3); grid-template-columns: 1fr; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4) var(--e3); }
.campo label { display: block; font-weight: 700; margin-bottom: .3rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 50px; padding: .6rem .8rem; font: inherit; color: var(--tinta); background: #fff; border: 1.5px solid var(--borde-campo); border-radius: 10px; }
.campo textarea { min-height: 7rem; resize: vertical; }
.campo--casilla { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; }
.campo--casilla input { width: 1.5rem; height: 1.5rem; min-height: 0; margin: .2rem 0 0; accent-color: var(--rojo-texto); }
.campo--casilla label { font-weight: 400; margin: 0; }
.form__capa { font-size: var(--t-s); color: var(--tinta-2); margin: 0; }
.form__demo { background: #FFF6DA; border-radius: 8px; padding: .8rem 1rem; margin: 0; font-size: var(--t-s); }
.form__trampa { display: none; }   /* el campo trampa de Netlify: solo lo rellenan los robots */
.form p:last-child { margin-bottom: 0; }

/* --- pie --- */
.pie { background: var(--oscuro-2); color: var(--sobre-oscuro); padding: var(--e5) 0 var(--e4); font-size: var(--t-s); }
.pie a { color: #fff; }
.pie__rej { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pie__marca { color: #fff; font-size: var(--t-l); margin: 0 0 var(--e2); }
.pie__t { color: #fff; font-family: var(--titular); font-weight: 700; margin: 0 0 var(--e1); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie ul a { display: flex; align-items: center; min-height: 44px; }
.pie p a { display: inline-flex; align-items: center; min-height: 44px; }
.pie p { margin: 0 0 .6rem; }
.pie__legal { border-top: 1px solid rgb(255 255 255 / .2); margin-top: var(--e4); padding-top: var(--e3); }
.pie__demo { margin: var(--e2) 0 0; }

/* --- barra fija de llamar (móvil y tableta) --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; box-shadow: 0 -2px 12px rgb(0 0 0 / .18); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 58px; color: #fff; font-family: var(--titular); font-weight: 700; text-decoration: none; background: var(--rojo-texto); }
.barra-movil a + a { background: var(--verde-wa); }
.cookies-abierto .barra-movil { display: none; }

/* En el móvil: el triaje en baldosas de dos (icono y titular), la galería
   a dos columnas y el pie con las listas de dos en dos (patrones/sistema-hm.md). */
@media (max-width: 599px) {
  .triaje { padding: var(--e3) var(--e2); }
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .caso { grid-template-columns: 1fr; padding: .75rem .8rem; }
  .caso svg { grid-row: auto; width: 2rem; height: 2rem; margin-bottom: .25rem; }
  .caso h3 { font-size: 1rem; margin: 0; }
  .caso p { display: none; }
  .galeria { columns: 2; column-gap: .7rem; }
  .galeria .foto { margin-bottom: .9rem; }
  .flujo li { padding: var(--e2) var(--e3); }
  .flujo li::before { display: inline-block; margin: 0 .6rem 0 0; font-size: var(--t-l); }
  .flujo h3 { display: inline; }
  .flujo h3 a { display: inline-block; }
  .flujo p { margin-top: .3rem; }
  .pie__rej { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e2); }
  .pie__rej > .pie__col:first-child { grid-column: 1 / -1; }
  .pie ul a { min-height: 44px; line-height: 1.3; padding: .3rem 0; }
  .cifras li { padding: var(--e2) var(--e3); }
  .seccion, .sec--oscuro, .cierre { padding: 2.1rem 0; }
  .hero { padding: var(--e3) 0 var(--e4); }
  .hero__rej { gap: var(--e3); }
  .pie { padding-top: var(--e4); }
  .pie__lema { display: none; }
  .flujo { gap: .6rem; }
  .flujo p { display: none; }
  .seccion--cifras { padding: 1.6rem 0; }
  .migas li:last-child { display: none; }   /* en el móvil ya lo dice el antetítulo */
  .hero-int { padding-top: .4rem; }
  /* En el móvil la tarjeta de la tienda repite la franja, los botones y el
     cierre: se queda para tableta y escritorio (portada de 8 pantallas). */
  .hero__foto .tienda { display: none; }
}
@media (min-width: 600px) {
  .franja__calle { display: inline; }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form { grid-template-columns: 1fr 1fr; padding: var(--e4); }
  .campo--ancho { grid-column: 1 / -1; }
  .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noticia { grid-template-columns: 12rem 1fr; align-items: center; }
  .triaje { padding: var(--e4); }
}
@media (min-width: 900px) {
  .hero { padding: var(--e5) 0 var(--e6); }
  .hero__rej { grid-template-columns: 1.1fr .9fr; }
  .hero__foto .tienda { position: relative; margin: -3.5rem 0 0 -1.5rem; max-width: 24rem; }   /* menos que el hueco (--e4): con -2.5rem tapaba el texto entre 900 y 1100 px */
  .triaje { margin-top: calc(-1 * var(--e5)); position: relative; }
  .casos { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* ocho puertas: de dos en dos (de tres dejaba un hueco, vuelta 1) */
  .dos { grid-template-columns: 1.15fr .85fr; }
  .dos--foto-izq { grid-template-columns: .85fr 1.15fr; }
  .flujo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cierre__rej { grid-template-columns: 1.2fr .8fr; }
  .videos { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .seccion { padding: var(--e6) 0; }
  .franja__hora { display: inline; }
}
/* El menú completo desde 1000 px: a 1024 (tableta apaisada, portátil
   pequeño) salía el del móvil con la barra fija (QA, vuelta 1). */
@media (min-width: 1000px) {
  .nav-escritorio { display: flex; }
  .barra .barra__tel { display: inline-flex; }
  .nav-movil, .barra-movil { display: none; }
  .barra__logo { height: 40px; }
  body { padding-bottom: 0; }
}
@media (min-width: 1100px) {
  .casos { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* y de cuatro en cuatro: dos filas justas */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto, .franja { display: none !important; }
  body { padding: 0; }
}