/* ══════════════════════════════════════════════════════════════════════════════
   Auxilia · clon de emergency-128.webflow.io/home

   Todo lo que hay aquí sale de `ref/inventario.json`, no del ojo:

     · paleta   #fafafa 53 % · #222222 17 % · #ff3333 14 % (acento) · #eeeeee 11 %
                tintas #757575 35 % · #222222 31 % · #8a8a8a 17 % · #ffffff 15 %
     · escala   40 / 30 / 24 / 20 / 16 / 14 px, ratio 2,86 sobre seis escalones
     · rejilla  1200 px de contenido, margen 40
     · ritmo    espaciados 4/8/12/20/32/40 · radios 0/4/6/60 · borde 1px #eee
     · tipo     Geist al 98 %, peso dominante 400, tracking -0,02em

   En modo `clon` la paleta se COPIA, acento incluido: la puerta exige el acento a
   ΔE ≤ 8 del original. Lo que cambia es el copy, y las fotos, que se regeneran.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --fondo: #fafafa;
  --blanco: #ffffff;
  --linea: #eeeeee;
  --tinta: #222222;
  --gris: #757575;
  --gris-claro: #8a8a8a;
  --rojo: #ff3333;

  /* Los seis escalones medidos, tal cual. */
  --t-40: 40px;
  --t-30: 30px;
  --t-24: 24px;
  --t-20: 20px;
  --t-16: 16px;
  --t-14: 14px;

  --ancho: 1200px;
  --margen: 40px;
  --r-pastilla: 60px;   /* el radio grande de la lista: botones y flechas */
  --r-caja: 6px;        /* el radio medio: fichas, tarjetas, paneles */

  /* Los dos pisos de la cabecera, que es fija: la barra de progreso se cuelga de
     ahí, el héroe se aparta ahí y el panel del menú de móvil empieza ahí. Una sola
     cifra para las tres cosas, porque a 768 abajo cambia y tenían que cambiar
     todas a la vez. */
  --alto-cabecera: 123px;

  /* Una sola curva para toda la página. El original no declara transiciones en el
     CSS —las hace en JavaScript— pero la forma que se ve en la hoja es ésta: sale
     rápido y frena largo. */
  --curva: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }


body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ol, ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote { margin: 0; }

.ancho {
  width: min(var(--ancho), 100% - var(--margen) * 2);
  margin-inline: auto;
}

/* ── CABECERA ────────────────────────────────────────────────────────────────
   Fija y clara siempre: sale idéntica en las 31 tomas de la hoja de contactos,
   así que no hay un solo estado alternativo que reproducir. */

.progreso {
  position: fixed;
  top: var(--alto-cabecera);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.progreso__barra {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rojo);
  transform-origin: left center;
}

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--fondo);
}

.cinta { border-bottom: 1px solid var(--linea); }
.cinta__direccion {
  text-align: right;
  padding: 12px 0;
  color: var(--rojo);
  font-size: var(--t-16);
}

.barra { border-bottom: 1px solid var(--linea); }
.barra__fila {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 0;
}

.marca { display: inline-flex; align-items: flex-start; gap: 2px; }
.marca__texto {
  font-size: var(--t-20);
  letter-spacing: 0.06em;    /* el logotipo del original va espaciado, al revés que el texto */
  font-weight: 400;
}
.marca--pie .marca__texto { font-size: var(--t-24); }

/* LA CRUZ. Es la marca gráfica del original: una cruz de brazos finos, con los
   cuatro trazos separados del centro. Sale en el logotipo, sobre la foto del hero
   y delante de cada kicker. Aquí se dibuja con dos gradientes, sin ningún fichero. */
.cruz {
  display: inline-block;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--rojo), var(--rojo)) center / 2px 100% no-repeat,
    linear-gradient(var(--rojo), var(--rojo)) center / 100% 2px no-repeat;
  -webkit-mask: radial-gradient(circle at center, transparent 0 2px, #000 2.5px);
          mask: radial-gradient(circle at center, transparent 0 2px, #000 2.5px);
}
.cruz--marca { width: 12px; height: 12px; margin-top: 2px; }
.cruz--kicker { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }
.cruz--blanca {
  background:
    linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
}
.cruz--foto { position: absolute; width: 34px; height: 34px; }
.cruz--a { top: 16%; left: 33%; }
.cruz--b { top: 46%; right: 6%; }
.cruz--c { bottom: 14%; left: 6%; }

.barra__aviso { color: var(--gris); white-space: nowrap; }
.barra__tel { color: var(--rojo); }

.barra__nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }

/* LA HAMBURGUESA. Oculta por defecto: sólo existe de 900 abajo, que es donde el
   original esconde los enlaces. Los tres trazos se convierten en un aspa. */
.hamburguesa {
  display: none;
  width: 32px; height: 22px;
  position: relative;
  margin-left: auto;
  flex: none;
}
.hamburguesa span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--tinta);
  transition: transform .22s var(--curva), opacity .18s var(--curva);
}
.hamburguesa span:nth-child(1) { top: 0; }
.hamburguesa span:nth-child(2) { top: 10px; }
.hamburguesa span:nth-child(3) { top: 20px; }
body.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
body.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
body.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* El panel del menú no existe por encima de 900: ahí la navegación va en la barra. */
.menu { display: none; }
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gris);
  transition: color .25s var(--curva);
}
.enlace:hover { color: var(--tinta); }

.chevron {
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--curva);
}
.enlace--desplegable .chevron { transform: rotate(45deg) translate(-1px, -1px); }
.chevron--rojo { color: var(--rojo); transform: rotate(-45deg); }
.chevron--der { transform: rotate(-45deg); }
.chevron--izq { transform: rotate(135deg); }

/* ── BOTONES ─────────────────────────────────────────────────────────────────
   Pastilla de radio 60, que es el radio grande medido. El original no declara el
   hover en CSS y lo resuelve en JavaScript; la sonda midió 34,6 de reacción neta
   en el secundario y 28,3 en el rojo, así que los dos cambian, y poco. */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 34px;
  border-radius: var(--r-pastilla);
  font-size: var(--t-16);
  line-height: 1;
  white-space: nowrap;
  transition: background-color .18s var(--curva), color .18s var(--curva);
}
.boton--pequeno { padding: 12px 22px; font-size: var(--t-14); }

.boton--rojo { background: var(--rojo); color: var(--blanco); }
.boton--rojo:hover { background: #e01d1d; }

.boton--oscuro { background: var(--tinta); color: var(--blanco); padding: 16px 26px; }
.boton--oscuro:hover { background: #000; }

.boton--claro { background: var(--linea); color: var(--tinta); }
/* Recorta las tomas 26 y 27 del original una encima de otra y no hay dudas: la
   pastilla clara se vuelve #222 con el texto en blanco, y el chevrón se queda
   rojo. La primera versión de este clon le puso un gris apenas más oscuro y los
   dos críticos lo cazaron por separado. */
.boton--claro:hover { background: var(--tinta); color: var(--blanco); }

.boton--blanco { background: var(--blanco); color: var(--tinta); }
.boton--blanco:hover { background: var(--linea); }

/* En la toma 22 del original los DOS botones de la franja roja son pastillas
   blancas; lo que los distingue es el icono y el orden, no el valor. Un blanco
   sobre rojo aclarado, que es lo que tenía antes, no es un secundario: es un
   rótulo que se pierde dentro de su propia pastilla. */
.boton--contorno { background: var(--blanco); color: var(--tinta); }
.boton--contorno:hover { background: var(--linea); }

.icono { width: 16px; height: 16px; background: currentColor; }
.icono--tel {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.6a1 1 0 0 1-.25 1z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.6a1 1 0 0 1-.25 1z'/></svg>") center / contain no-repeat;
}
.icono--pin {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
}

/* ── TIPOS DE TEXTO ──────────────────────────────────────────────────────────
   Sólo tres piezas de texto en toda la página, que es lo que hace la escala del
   original: un titular a 40, un cuerpo a 20 y el resto a 16. */

.titular {
  font-size: var(--t-40);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.titular--grande { font-size: 50px; }   /* el maxPx medido en el original */

.kicker {
  display: flex;
  align-items: center;
  font-size: var(--t-16);
  color: var(--tinta);
  margin-bottom: 20px;
}

.entrada { font-size: var(--t-16); color: var(--gris); max-width: 46ch; }
.parrafo { font-size: var(--t-16); color: var(--gris); max-width: 78ch; }

/* ── SECCIÓN 0 · HERO ────────────────────────────────────────────────────────
   674 px de alto y dos columnas. La foto va a sangre por arriba y por la derecha,
   contra el borde de la ventana, no contra la caja de 1200. */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 674px;
  padding-top: var(--alto-cabecera);
  background: var(--fondo);
}
.hero__texto {
  margin-top: 66px;
  padding: 40px 40px 40px max(var(--margen), calc((100vw - var(--ancho)) / 2));
}
.hero .entrada { margin-top: 32px; }
/* 34 y no 48: el guion de captura apunta el ratón a fy=0.672, o sea 538 px del alto
   de la ventana, y con 48 el botón empezaba en 545. Siete píxeles por debajo de la
   diana bastan para que la toma de hover salga igual que la de reposo y para que dos
   críticos independientes concluyan, con razón desde lo que ven, que el estado no
   existe. La banda de botones queda ahora entre 533 y 593; en el original, 541-601. */
.hero__botones { display: flex; gap: 20px; margin-top: 34px; flex-wrap: wrap; }


/* 551 px de alto fijo, y no `stretch`: con la altura libre la fila de la rejilla se
   estiraba a la proporción natural del JPEG (589 px) y el héroe se iba a 712 en vez
   de a los 674 medidos. Treinta y ocho píxeles que luego arrastra la página entera
   y descolocan las tomas de hover, que van por posición de documento. 123 de
   cabecera más 551 son los 674 del original, y coincide con lo que se ve en la toma
   26: la foto va de y=123 a y=674. */
.hero__foto { position: relative; height: 551px; }
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);   /* el hero del original va en blanco y negro */
}

/* ── TIRA DE VENTAJAS ────────────────────────────────────────────────────────
   La banda oscura de 285 px pegada al hero, con cuatro columnas y los iconos en
   rojo a 34 px. */

.ventajas { background: var(--tinta); color: var(--blanco); padding: 56px 0; }
.ventajas__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.ventaja__icono { display: block; width: 34px; height: 34px; color: var(--rojo); }
.ventaja__icono svg { width: 100%; height: 100%; }
.ventaja__titulo {
  font-size: var(--t-20);
  font-weight: 400;
  margin: 20px 0 12px;
}
.ventaja__texto { font-size: var(--t-16); color: var(--gris-claro); }

/* ── SECCIÓN 1 · NOSOTROS ────────────────────────────────────────────────────
   702 px, fondo blanco. La foto es pequeña, cuadrada y baja; el texto ocupa dos
   tercios y el botón rojo cuelga solo a la derecha, a la altura del final de la
   lista, tal como está en la toma 24. */

.nosotros { background: var(--blanco); padding: 72px 0; }
.nosotros__rejilla {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 84px;
  align-items: start;
}
.nosotros__kicker { grid-column: 1; grid-row: 1; margin-bottom: 32px; }
.nosotros__foto { grid-column: 1; grid-row: 2; padding-top: 0; }
.nosotros__cuerpo { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
.nosotros__boton { grid-column: 2; grid-row: 3; justify-self: end; align-self: start; margin-top: 32px; }
.nosotros__foto img {
  width: 300px;
  height: 320px;
  object-fit: cover;
  filter: grayscale(1);
}
.nosotros .titular { max-width: 32ch; font-size: 44px; margin-bottom: 20px; }
.nosotros .parrafo { margin-bottom: 32px; }

.valores { border-top: 1px solid var(--linea); }
.valor {
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--linea);
}
.valor__num { color: var(--gris); font-variant-numeric: tabular-nums; }
.valor__texto { font-size: var(--t-20); }



/* ── SECCIÓN 2 · SERVICIOS ───────────────────────────────────────────────────
   1014 px, la sección más alta. Tres filas de 1px #eee. El hover pone el titular
   en rojo: es lo que enseña la toma 28, y es el estado más legible de los cuatro
   que sondeó `inspect_interactions`. */

.servicios { background: var(--fondo); padding: 84px 0 0; }
.kicker--suelto { margin-bottom: 36px; }
.kicker--claro { color: var(--blanco); }

.servicio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 26px 20px;
  border-top: 1px solid var(--linea);
  border-radius: var(--r-caja);
  transition: background-color .18s var(--curva);
}
.servicio:last-of-type { border-bottom: 1px solid var(--linea); }
/* El hover de fila es del original y no está en su CSS: `inspect_interactions`
   leyó 2165 reglas y no encontró ni un `:hover`, porque Webflow los hace en JS.
   La toma 28 enseña qué pasa: el titular se tiñe de rojo y la fila entera coge
   una banda de fondo claro. */
.servicio:hover { background: var(--blanco); }
.servicio__cuerpo { transition: transform .18s var(--curva); }
.servicio:hover .servicio__cuerpo { transform: translateX(8px); }
.servicio__titulo {
  display: block;
  font-size: var(--t-40);          /* el peso de esta sección lo llevan estos titulares */
  line-height: 1.15;
  letter-spacing: -0.03em;
  /* 90 ms: un cambio de color de #222 a #ff3333 en 180 ms se fotografía a mitad de
     camino y sale marrón sucio, que se lee como «no cambia». */
  transition: color .09s linear;
}
.servicio:hover .servicio__titulo { color: var(--rojo); }
.servicio__texto { color: var(--gris); margin-top: 8px; max-width: 58ch; }
.servicio__accion { flex: none; }
.servicio:hover .servicio__accion { background: var(--linea); }

/* LA CORTINA · el bloque rojo YA ESTÁ AHÍ, a tamaño completo, y lo que entra es
   primero su color y después su contenido. No es un capricho de implementación:
   es lo único compatible con las dos tomas. En la bajada, la toma 04 enseña esta
   franja ENTERA en rosa pálido —o sea, ya ocupa su sitio— y la toma 22, al subir,
   la enseña en rojo pleno con el texto puesto. Una cortina que barriera de
   izquierda a derecha daría, a mitad de camino, media franja y medio hueco, y eso
   no sale en ninguna de las 31 tomas.

   La primera versión de este clon lo hizo con `clip-path` y el resultado fue que
   los pares salían en BLANCO donde el original tenía rojo: la ventana de captura
   son unos 170 ms y el barrido tardaba 700, así que la foto pillaba el bloque aún
   sin abrir. El reposo lo declara el CSS; lo que se anima es corto. */
.cortina {
  position: relative;
  margin: 64px 0;
  border-radius: var(--r-caja);
  background: #ffd4d4;                    /* el rosa pálido de la toma 04 */
  color: var(--blanco);
  overflow: hidden;
  transition: background-color .45s var(--curva);
}
.cortina.esta-dentro { background: var(--rojo); }
.cortina__contenido {
  padding: 64px;
  opacity: .35;
  transform: translateY(14px);
  transition: opacity .4s var(--curva) .2s, transform .4s var(--curva) .2s;
}
.cortina.esta-dentro .cortina__contenido { opacity: 1; transform: none; }
.cortina__titulo {
  font-size: var(--t-40);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.cortina__kicker { display: flex; align-items: center; gap: 8px; font-size: var(--t-16); margin-bottom: 20px; }
/* Blanco puro, no un rosa aguado: sobre #ff3333 un blanco al 88 % se lee con esfuerzo
   y el crítico de belleza lo puso como fallo serio. */
.cortina__texto { margin-top: 20px; max-width: 60ch; color: var(--blanco); font-size: var(--t-20); line-height: 1.45; }
.cortina__botones { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; }

/* ── SECCIÓN 3 · TESTIMONIOS ─────────────────────────────────────────────────
   885 px y una tira más ancha que la pantalla: el seccionador la marcó
   `tira_horizontal: true`, y el desplazamiento lo mandan las dos flechas. */

.testimonios { background: var(--fondo); padding: 100px 0; overflow: hidden; }
.testimonios__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.testimonios .titular { max-width: 28ch; }

.flechas { display: flex; gap: 12px; }
.flecha {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--linea);
  transition: background-color .25s var(--curva);
}
.flecha:hover { background: #e2e2e2; }

.carrusel {
  width: min(var(--ancho), 100% - var(--margen) * 2);
  margin-inline: auto;
  overflow: hidden;
}
.carrusel__pista {
  display: flex;
  gap: 20px;
  transition: transform .6s var(--curva);
}

.cita {
  position: relative;
  flex: 0 0 386px;
  background: var(--linea);
  border-radius: var(--r-caja);
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  overflow: hidden;
}
.cita__cara {
  position: relative;
  z-index: 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  margin-bottom: 24px;
}
.cita__texto { position: relative; z-index: 2; font-size: var(--t-20); line-height: 1.4; }
.cita__pie {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 32px;
  color: var(--gris);
  font-size: var(--t-14);
}
/* La firma manuscrita de la esquina. En el original son tres SVG de 57 px que
   `plan_clone_imagery` descartó por diminutos y recomendó dibujar; esto es eso. */
.cita__firma { width: 60px; height: 34px; flex: none; opacity: .85; }

/* EL ESTADO DE VÍDEO. No es otra tarjeta: es esta misma tarjeta cubierta. Compara
   la toma 21 con la 29 —misma sección, mismas tres columnas— y se ve que la que
   está bajo el puntero se llena con el retrato a sangre, el avatar se queda
   pequeño arriba a la izquierda, sale un play traslúcido en el centro y el nombre
   pasa a blanco abajo. Sólo la llevan algunas: `inspect_interactions` encontró dos
   `a.testimonials-video-wrap` entre las seis tarjetas. */
.cita__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .2s var(--curva);
}
.cita--video:hover .cita__video { opacity: 1; }
.cita--video:hover .cita__texto,
.cita--video:hover .cita__pie { opacity: 0; transition: opacity .2s var(--curva); }
.cita__retrato {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1);
}
.cita__video::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 45%);
}
.cita__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  z-index: 2;
}
.cita__play::before {
  content: "";
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--tinta);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.cita__nombre {
  position: absolute;
  left: 32px; bottom: 28px;
  z-index: 2;
  color: var(--blanco);
  font-size: var(--t-14);
}

/* ── SECCIÓN 4 · PROCESO ─────────────────────────────────────────────────────
   948 px sobre #222 y tres columnas. Los números van a 40 px en rojo y llevan una
   línea de 1px que cruza toda la fila, no solo la celda: es lo que ordena la
   rejilla en la toma 19. */

.proceso { background: var(--tinta); color: var(--blanco); padding: 96px 0; }
.proceso__entrada { max-width: 46ch; color: var(--blanco); margin-bottom: 56px; }
.proceso__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
}
.paso { padding-bottom: 32px; }
.paso__num {
  letter-spacing: -0.03em;
  display: block;
  font-size: var(--t-40);
  color: var(--rojo);
  line-height: 1;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  margin-bottom: 40px;
}
.paso__titulo { font-size: var(--t-40); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; }
.paso__texto { color: var(--gris-claro); }

/* ── SECCIÓN 5 · BASES ───────────────────────────────────────────────────────
   680 px. Mapa a sangre en gris con los marcadores en rojo y, encima a la derecha,
   el panel rojo con las direcciones subrayadas. */

.bases { position: relative; background: var(--blanco); }
.mapa { position: relative; height: 680px; overflow: hidden; }
.mapa__lienzo { width: 100%; height: 100%; display: block; }

.pin {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  background: var(--rojo);
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.pin::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--blanco);
}
.pin--a { top: 26%; left: 17%; }
.pin--b { top: 48%; left: 36%; }
.pin--c { top: 66%; left: 24%; }

.bases__capa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 50px;   /* la toma 17 deja el panel a ~90 px del borde de la ventana */
  pointer-events: none;
}
/* Aquí el bloque rojo entra MACIZO y el contenido aparece después dentro de él:
   la toma 09 lo enseña como un rectángulo rojo liso a mitad de la bajada y la 17,
   al subir, con las tres direcciones dentro. Así que el rojo no se anima: se anima
   lo de dentro, y sólo eso. */
.panel {
  pointer-events: auto;
  width: 530px;
  background: var(--rojo);
  color: var(--blanco);
}
.panel__contenido {
  padding: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s var(--curva) .25s, transform .4s var(--curva) .25s;
}
.panel.esta-dentro .panel__contenido { opacity: 1; transform: none; }
.panel__kicker { font-size: var(--t-16); color: var(--blanco); margin-bottom: 44px; }
.panel__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
}
.panel__direccion {
  font-size: var(--t-30);   /* en la toma 17 pesan como titulares, no como enlaces */
  line-height: 1.2;
  max-width: 15ch;
  text-underline-offset: 4px;
}
.panel__direccion:hover { text-decoration: underline; }

/* ── SECCIÓN 6 · DUDAS ───────────────────────────────────────────────────────
   680 px en dos columnas: el rótulo a la izquierda, estrecho, y el acordeón
   ocupando el resto. Abre al clic, no al pasar: por eso el sondeo de puntero le
   dio 0 de reacción neta. */

.dudas { background: var(--blanco); padding: 90px 0; }
.dudas__rejilla {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.acordeon { border-top: 1px solid var(--linea); }
.fila { border-bottom: 1px solid var(--linea); }
.fila__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 4px;
  text-align: left;
  transition: color .25s var(--curva);
}
.fila__cabeza:hover { color: var(--rojo); }
.fila__pregunta { font-size: var(--t-20); }

.mas {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
}
.mas::before, .mas::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}
.mas::after { transform: translateY(-50%) rotate(90deg); transition: transform .3s var(--curva); }
.fila.abierta .mas::after { transform: translateY(-50%) rotate(0deg); }

.fila__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--curva);
}
.fila.abierta .fila__cuerpo { grid-template-rows: 1fr; }
.fila__cuerpo > p {
  overflow: hidden;
  color: var(--gris);
  max-width: 70ch;
  padding-right: 40px;
}
.fila.abierta .fila__cuerpo > p { padding-bottom: 24px; }

/* ── SECCIÓN 7 · LA LLAMADA ──────────────────────────────────────────────────
   383 px, fondo rojo pleno. La foto ocupa la izquierda y la tarjeta roja cae
   encima por la derecha: la toma 11 la enseña maciza durante la bajada y la 15
   con su contenido dentro al subir. */

/* La banda vive DENTRO de la caja de 1200, por los dos lados. No es una lectura de
   ojo: en la toma 15 del original el píxel (1200, 400) es rojo puro y el (1275, 400)
   es blanco, así que el bloque termina en el margen de 40 de la derecha. Foto y rojo
   van pegados, sin solape: nada flota encima de nada. */
.llamada {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  min-height: 383px;
  width: min(var(--ancho), 100% - var(--margen) * 2);
  margin-inline: auto;
  border-radius: var(--r-caja);
  overflow: hidden;
  background: var(--rojo);
}
.llamada__foto { position: relative; overflow: hidden; }
.llamada__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(1);
}
.cruz--d { top: 12%; left: 22%; }
.cruz--e { bottom: 22%; left: 10%; }

.tarjeta { background: var(--rojo); color: var(--blanco); }
.tarjeta__contenido {
  padding: 56px 60px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s var(--curva) .25s, transform .4s var(--curva) .25s;
}
.tarjeta.esta-dentro .tarjeta__contenido { opacity: 1; transform: none; }
.tarjeta__kicker { display: flex; align-items: center; gap: 8px; font-size: var(--t-16); }
.tarjeta__titulo {
  font-size: var(--t-40);
  font-weight: 400;
  margin: 12px 0 20px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.tarjeta__texto { color: var(--blanco); max-width: 56ch; }

.tarjeta__forma {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  max-width: 500px;
  background: var(--blanco);
  border-radius: var(--r-pastilla);
  padding: 8px 8px 8px 24px;
}
.tarjeta__campo {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--tinta);
  padding: 12px 0;
}
.tarjeta__campo:focus { outline: none; }
.tarjeta__campo::placeholder { color: var(--gris-claro); }
.tarjeta__envio {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  transition: background-color .25s var(--curva);
}
.tarjeta__envio:hover { background: #e01d1d; }

/* ── SECCIÓN 8 · LECTURAS ────────────────────────────────────────────────────
   755 px. Las únicas tres fotos en COLOR de la página, y el botón rojo de cada
   ficha aparece al pasar el ratón: es lo que enseña la toma 30. */

.lecturas { background: var(--fondo); padding: 60px 0; }
.lecturas__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}
.lecturas .titular { max-width: 26ch; }
.lecturas__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ficha {
  display: flex;
  flex-direction: column;
  background: var(--linea);
  border-radius: var(--r-caja);
  padding: 12px 12px 32px;
  transition: background-color .3s var(--curva);
}
.ficha:hover { background: #e6e6e6; }
.ficha__foto {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ficha__foto img {
  width: 100%;
  aspect-ratio: 383 / 220;
  object-fit: cover;
  transition: transform .3s var(--curva);
}
.ficha:hover .ficha__foto img { transform: scale(1.05); }
.ficha__titulo { font-size: var(--t-20); font-weight: 400; line-height: 1.3; padding: 0 20px; }
.ficha__texto { color: var(--gris); margin-top: 12px; padding: 0 20px; }
/* El botón se ve SIEMPRE, en las tres: la toma 30 lo enseña puesto en dos tarjetas
   a la vez y sólo una podía estar bajo el puntero. Del hover es el zoom. */
.ficha__boton { align-self: flex-start; margin: 20px 0 0 20px; }

/* ── SECCIÓN 9 · PIE ─────────────────────────────────────────────────────────
   434 px sobre el mismo #fafafa del hero, con la línea de 1px que separa el
   legal. */

.pie { background: var(--fondo); padding: 80px 0 32px; border-top: 1px solid var(--linea); }
.pie__rejilla {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.pie__texto { color: var(--gris); margin: 20px 0; max-width: 34ch; }
.pie__tel { font-size: var(--t-24); color: var(--rojo); }
.pie__titulo { font-size: var(--t-16); font-weight: 400; margin-bottom: 20px; }
.pie__columna { display: flex; flex-direction: column; gap: 12px; }
.pie__enlace { color: var(--gris); transition: color .25s var(--curva); }
.pie__enlace:hover { color: var(--rojo); }

.pie__linea {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--linea);
}
.pie__legal { color: var(--gris-claro); font-size: var(--t-14); }
/* Un teléfono partido en dos líneas deja de ser un teléfono. */
.sin-cortar { white-space: nowrap; }

/* ── EL REVELADO ─────────────────────────────────────────────────────────────
   Opacidad más una subida corta, escalonada dentro del bloque, y DISPARA UNA VEZ:
   la pasada de vuelta de la captura enseña las mismas fracciones ya completas al
   subir (tomas 23 y 24 contra las 02 y 03), así que nada rebobina. La clase la
   pone el IntersectionObserver de script.js y no se quita nunca. */

[data-linea] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
[data-revelar].esta-dentro [data-linea],
[data-linea].esta-dentro { opacity: 1; transform: none; }
/* LAS DOS FORMAS DEL SELECTOR SON OBLIGATORIAS, Y OLVIDAR LA SEGUNDA COSTÓ UNA RONDA
   ENTERA. En escritorio la clase la recibe la SECCIÓN y los hijos se revelan por
   descendencia; en móvil, desde que el revelado pasó a ir pieza a pieza, la clase la
   recibe LA PIEZA. Con sólo la primera regla escrita, en móvil no se cumplía ninguna
   de las dos condiciones: ocho bloques de la página se quedaron a opacidad cero para
   siempre y el crítico —con toda la razón desde lo que veía— los dio por no montados
   y puso la fidelidad en 4,2. El JavaScript estaba bien; el que no cerraba el circuito
   era el CSS. */

@media (prefers-reduced-motion: reduce) {
  [data-linea] { opacity: 1; transform: none; transition: none; }
  .cortina { background: var(--rojo); transition: none; }
  .cortina__contenido, .panel__contenido, .tarjeta__contenido { opacity: 1; transform: none; transition: none; }
  .carrusel__pista { transition: none; }
}

/* ── ANCHOS PEQUEÑOS ─────────────────────────────────────────────────────────
   El original se mide y se juzga a 1280×800, que es el viewport del plan de
   captura. Esto es sólo para que la página no se rompa por debajo. */

/* ══════════════════════════════════════════════════════════════════════════════
   MÓVIL

   No es «la de escritorio encogida». El original se volvió a capturar entero a
   390×844 —`clones/emergency-128-movil/`, 31 tomas propias— y todo lo que hay
   debajo sale de esa medida, no de una regla general:

     · 12 263 px de alto = 14,5 pantallas de 844 (en escritorio eran 9,3)
     · caja de contenido 360 px, margen 15 (en escritorio, 1200 y 40)
     · escala 40 / 32 / 28 / 24 / 20 / 16 / 14 · ratio 2,29 (en escritorio, 2,86)
     · radios 0 y 60: el radio de 6 de las tarjetas DESAPARECE, y los bloques
       pasan a esquina viva. Sólo las pastillas siguen redondas.
     · el héroe se CENTRA; el resto de la página sigue a bandera por la izquierda
     · once secciones en vez de diez: la tira oscura de ventajas, que apilada mide
       802 px, deja de ser un apéndice del héroe y se corta como sección propia

   El corte va en 900 px para la navegación —ahí es donde el original cambia a
   hamburguesa— y en 768 para la maqueta.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── DE 1100 A 769 · el tramo intermedio, que nadie juzga pero tiene que existir ── */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero__foto { height: 420px; }
  .ventajas__rejilla { grid-template-columns: repeat(2, 1fr); }
  .nosotros__rejilla, .dudas__rejilla { grid-template-columns: 1fr; }
  .nosotros__kicker, .nosotros__foto, .nosotros__cuerpo, .nosotros__boton { grid-column: 1; }
  .nosotros__cuerpo { grid-row: auto; }
  .nosotros__boton { grid-row: auto; justify-self: start; }
  .nosotros__foto { padding-top: 0; margin-top: 40px; }
  .proceso__rejilla { grid-template-columns: 1fr 1fr; }
  .lecturas__rejilla { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .llamada { grid-template-columns: 1fr; }
  .panel, .tarjeta { width: 100%; }
  .bases__capa { position: static; padding: 0; display: block; }
  .mapa { height: 420px; }
}

/* ── LA NAVEGACIÓN CAMBIA ANTES QUE LA MAQUETA ────────────────────────────────
   A 900 px el original ya esconde los enlaces, el aviso del teléfono y la
   pastilla de llamar, y deja sólo el logotipo y la hamburguesa. El panel abierto
   NO es un cajón lateral: ocupa la pantalla entera bajo la cabecera, sobre el
   mismo #fafafa, con los enlaces a bandera y en gris, sus chevrones donde había
   desplegable, el aviso del teléfono y la pastilla oscura al final. */
@media (max-width: 900px) {
  .barra__aviso, .barra__nav, .barra__fila > .boton--oscuro { display: none; }
  .hamburguesa { display: block; }

  .barra__fila { justify-content: space-between; gap: 20px; }

  .menu {
    position: fixed;
    inset: var(--alto-cabecera) 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px var(--margen) 40px;
    background: var(--fondo);
    border-left: 1px solid var(--linea);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--curva), transform .22s var(--curva), visibility .22s;
  }
  body.menu-abierto .menu { opacity: 1; transform: none; visibility: visible; }
  body.menu-abierto { overflow: hidden; }

  .menu__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: var(--t-20);
    color: var(--gris);
  }
  .menu__aviso { padding: 20px 0 24px; color: var(--gris); }
  .menu__boton { align-self: flex-start; }
  .menu__aviso a { color: var(--rojo); }
}

/* ── DE 768 ABAJO · LA MAQUETA DE MÓVIL ──────────────────────────────────────── */
@media (max-width: 768px) {
  .progreso { display: none; }

  /* Fondo y contenido entran JUNTOS: a este ancho el panel ocupa casi la pantalla y
     el original no lo enseña nunca vacío. Ver la nota de script.js. */
  .cortina__contenido, .panel__contenido, .tarjeta__contenido {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cortina { background: var(--rojo); }

  :root {
    --alto-cabecera: 112px;
    --t-40: 32px;      /* el escalón mayor de texto corriente baja de 40 a 32 */
    --t-30: 28px;
    --margen: 15px;    /* medido: caja de 360 sobre 390 */
    --ancho: 360px;
    --r-caja: 0px;     /* los radios medidos a este ancho son 0 y 60, y nada más */
  }

  /* CABECERA · la línea de la dirección se centra. */
  .cinta__direccion { text-align: center; font-size: var(--t-16); }
  .barra__fila { padding: 16px 0; }
  .marca__texto { font-size: var(--t-20); }

  /* HÉROE · centrado, botones apilados a todo el ancho de la caja y la foto
     debajo, a sangre de lado a lado. Es la única sección centrada de la página. */
  .hero {
    display: block;
    min-height: 0;
    padding-top: var(--alto-cabecera);
  }
  .hero__texto {
    margin: 0;
    padding: 64px var(--margen) 56px;
    text-align: center;
  }
  .hero .titular--grande { font-size: 40px; margin-inline: auto; max-width: 14ch; }
  .hero .entrada { margin: 24px auto 0; max-width: 34ch; }
  .hero__botones {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
  }
  .hero__botones .boton { width: 280px; }
  .hero__foto { height: 320px; }

  /* VENTAJAS · una columna. Apiladas miden 802 px y por eso el seccionador las
     corta como sección propia a este ancho. */
  .ventajas { padding: 56px 0; }
  .ventajas__rejilla { grid-template-columns: 1fr; gap: 32px; }
  .ventaja__icono { width: 32px; height: 32px; }
  .ventaja__icono svg { stroke-width: 2; }
  .ventaja__titulo { font-size: var(--t-20); }

  /* NOSOTROS · rótulo, titular, párrafo, lista, botón y la foto AL FINAL. */
  .nosotros { padding: 92px 0; }
  .nosotros__rejilla { gap: 0; display: flex; flex-direction: column; }
  .nosotros__kicker { order: 1; margin-bottom: 40px; }
  .nosotros__cuerpo { order: 2; }
  .nosotros__boton { order: 3; }
  .nosotros__foto { order: 4; }
  .nosotros .titular { font-size: var(--t-40); max-width: none; margin-bottom: 32px; }
  .nosotros .parrafo { margin-bottom: 40px; }
  .nosotros__foto { margin-top: 56px; }
  .nosotros__foto { width: 100%; }
  .nosotros__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .valor { gap: 24px; padding: 24px 0; }

  .nosotros__boton { margin-top: 40px; }

  /* SERVICIOS · la fila se parte y la pastilla cae debajo del texto. */
  .servicios { padding: 88px 0 0; }
  .kicker--suelto { margin-bottom: 40px; }
  .servicio {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 44px 0;
    margin-inline: 0;
  }
  .servicio:hover { background: none; }             /* no hay puntero que posar */
  .servicio:hover .servicio__cuerpo { transform: none; }
  .servicio:hover .servicio__titulo { color: inherit; }
  .servicio__titulo { font-size: var(--t-40); }

  /* LA FRANJA ROJA · a sangre por los dos lados, texto centrado y botones
     apilados, como en la toma 26 del móvil. */
  .cortina { margin: 72px 0; }
  .cortina__contenido { padding: 48px 32px; text-align: center; }
  .cortina__kicker { justify-content: center; }
  /* `balance` en vez de un <br> a mano: a 326 px de caja y 32 px de cuerpo, cualquier
     salto fijo deja una línea con una palabra suelta, y centrado eso agujerea el
     bloque. Que reparta el navegador. */
  .cortina__titulo,
  .tarjeta__titulo { font-size: var(--t-40); max-width: none; text-wrap: balance; }
  .cortina__texto { margin-inline: auto; }
  .cortina__botones { flex-direction: column; align-items: center; }
  .cortina__botones .boton { width: 260px; }

  /* TESTIMONIOS · titular a bandera, flechas centradas debajo y UNA tarjeta. */
  .testimonios { padding: 72px 0; }
  .testimonios__cabeza { flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 40px; }
  .testimonios .titular { max-width: none; }
  .flechas { align-self: center; }
  .cita { flex: 0 0 88%; min-height: 460px; padding: 32px var(--margen) 40px; }
  .cita__texto { font-size: 20px; line-height: 1.4; }
  .cita--video:hover .cita__video { opacity: 0; }   /* el estado de hover no existe aquí */

  /* PROCESO · una columna. Apilado son 1948 px, la sección más alta del móvil. */
  .proceso { padding: 88px 0; }
  .proceso__entrada { margin-bottom: 72px; }
  .proceso__rejilla { grid-template-columns: 1fr; column-gap: 0; }
  .paso { padding-bottom: 40px; }                  /* 325 px por paso, que es lo medido */
  .paso__num {
  letter-spacing: -0.03em; font-size: var(--t-40); padding-bottom: 32px; margin-bottom: 28px; }
  .paso__titulo { font-size: var(--t-40); margin-bottom: 20px; }

  /* BASES · el mapa arriba y el panel rojo debajo, montado sobre su borde. */
  .mapa { height: 380px; }
  .bases__capa { position: static; display: block; padding: 0; }
  .panel { width: auto; margin: -60px var(--margen) 0; }
  .panel__contenido { padding: 40px 32px; text-align: center; }
  .panel__kicker { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .panel__fila { flex-direction: column; gap: 16px; padding: 24px 0; }
  .panel__direccion {
    font-size: var(--t-24);
    max-width: none;
    text-decoration: underline;                     /* aquí sí: no hay hover que lo revele */
  }

  /* DUDAS · una columna, el rótulo encima del acordeón. */
  .dudas { padding: 80px 0; }
  .dudas__rejilla { gap: 32px; }
  .fila__cabeza { padding: 32px 0; }

  .fila__cuerpo > p { padding-right: 0; }

  /* LA LLAMADA · el rojo ARRIBA y la foto DEBAJO, los dos a sangre. Es el orden
     que enseñan las tomas 12 y 18 del móvil, y es el inverso del escritorio, donde
     van uno al lado del otro con la foto a la izquierda. */
  .llamada {
    display: flex;
    flex-direction: column-reverse;
    width: auto;
    margin-inline: var(--margen);
    min-height: 0;
  }
  .llamada__foto { height: 440px; }
  .tarjeta__contenido { padding: 40px 32px; text-align: center; }
  .tarjeta__kicker { justify-content: center; }
  .tarjeta__titulo { font-size: var(--t-40); }
  .tarjeta__texto { margin-inline: auto; }
  .tarjeta__forma { max-width: none; }

  /* LECTURAS · fichas apiladas con la foto en 16:9 grande. */
  .lecturas { padding: 56px 0; }
  .lecturas__cabeza { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .lecturas .titular { max-width: none; }
  .lecturas__rejilla { grid-template-columns: 1fr; gap: 24px; }
  /* La foto va a sangre contra los bordes de la tarjeta y el relleno se queda sólo
     en el bloque de texto: es lo que enseña la toma 17 del móvil. */
  .ficha { padding: 0 0 32px; }
  .ficha__foto { border-radius: 0; margin-bottom: 24px; }
  .ficha__titulo, .ficha__texto { padding: 0 20px; }
  .ficha__boton { margin-left: 20px; }
  /* El original NO pone la pastilla de «todas las entradas» a este ancho: del titular
     salta directo a la primera ficha. */
  .lecturas__cabeza > .boton { display: none; }

  /* PIE · una columna. */
  /* El pie es la única sección que SOBRABA: 1009 px contra los 634 medidos. Las tres
     columnas de enlaces caben en dos, y así deja de ser una lista de nueve pantallas. */
  .pie { padding: 32px 0 20px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__texto { margin: 16px 0; }
  .pie__columna { gap: 8px; }
  .pie__titulo { margin-bottom: 12px; }
  .pie__linea { flex-direction: column; gap: 8px; margin-top: 24px; padding-top: 20px; }
}

/* Por debajo de 340 px de caja los botones de 280 dejan de tener aire a los lados.
   El corte va en 330 y no en 400: a 390, que es el ancho al que se mide y se juzga
   esta página, el original NO los estira, los deja en 280 y centrados. */
@media (max-width: 330px) {
  .hero__botones .boton, .cortina__botones .boton { width: 100%; }
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}