/* ═══════════════════════════════════════════════════════════════════════════════
   landing.css — hoja PROPIA de /diagnostico-nuevo/ (sesión 253, 11 nov 2026, solo preview).

   Qué es: la landing calcada de hire-us.bycrawford.com (David: «tomes la base de Sam y haces
   exactamente lo mismo, pero traduciéndolo a lo nuestro… el mismo tamaño de letra, el mismo
   diseño; la diferencia, los colores de la marca: su verde, nuestro naranja»).
   No comparte nada con sitio.css: la primera versión mezclaba las dos y quedó «Frankenstein».

   De dónde sale cada cosa:
   · Medidas, escala y ritmo: los de la referencia. Todo va en em sobre una letra base que
     crece con el ancho (16 px a 390 px de pantalla), por eso se lee grande en el celular.
   · Colores y letra: marca v4.1 (00_Base/marca/tokens.json). Switzer, ya servida por la web.
   · Lo que la marca no tiene (escala fluida, radios en em, peso 400 en titulares): anotado en
     marca/FALTANTES.md, F-031.
   Sin JavaScript se ve todo: el estado oculto de las entradas cuelga de la clase .con-guion,
   que solo pone landing.js cuando arranca.
   ═══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Switzer"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); }
/* Caveat: la letra «a mano» de las tres notas (la flecha del formulario, «¿Te suena?» y la carta de David).
   La pidió David el 11 nov 2026 («agrega ese tipo de letra… hecha a mano»). Licencia SIL OFL (Caveat-OFL.txt).
   No es parte de la marca v4.1: está anotada en marca/FALTANTES.md y solo se usa en esta página. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/caveat-500-latin.woff2") format("woff2"); }

/* ─── 1. Base: colores de marca y la letra que crece con la pantalla ─────────── */
:root {
  --tinta: #1F1815;            /* c-negro */
  --tinta-2: #2B2321;          /* c-negro-sup */
  --tinta-3: #3E3633;          /* c-negro-linea */
  --blanco: #FBFAF6;           /* c-papel: las tarjetas */
  --papel: #F4F0EA;            /* c-hundido: el fondo de la página */
  --niebla: #DFDAD2;           /* c-linea: el fondo de las escenas */
  --cuerpo: #3E3633;           /* texto corrido sobre claro */
  --apagado: #6B6656;          /* c-gris-oscuro */
  --sobre-tinta: #FBFAF6;
  --sobre-tinta-cuerpo: #AAA39D;   /* c-gris */
  --acento: #D75928;           /* c-naranja */
  --acento-noche: #F0834E;     /* c-naranja-noche: el naranja cuando es texto sobre negro */
  --linea: color-mix(in srgb, var(--tinta) 12%, transparent);
  --linea-fuerte: color-mix(in srgb, var(--tinta) 28%, transparent);
  --linea-noche: color-mix(in srgb, var(--blanco) 14%, transparent);
  --linea-noche-fuerte: color-mix(in srgb, var(--blanco) 32%, transparent);
  --letra: "Switzer", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mano: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --radio: 1.25em;
  --pildora: 100em;
  --curva: cubic-bezier(.19, 1, .22, 1);
  --curva-vaiven: cubic-bezier(.77, 0, .175, 1);

  --ancho-ideal: 1440; --ancho-min: 992px; --ancho-max: 1440px;
  --ancho: clamp(var(--ancho-min), 100vw, var(--ancho-max));
  --tam: calc(var(--ancho) / (var(--ancho-ideal) / 16));
  --margen: 3.5em;
}
@media (width <= 991px) { :root { --ancho-ideal: 834; --ancho-min: 768px; --ancho-max: 991px; --margen: 1.5em; } }
@media (width <= 767px) { :root { --ancho-ideal: 550; --ancho-min: 480px; --ancho-max: 767px; --margen: 1em; } }
@media (width <= 479px) { :root { --ancho-ideal: 390; --ancho-min: 320px; --ancho-max: 479px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-size: var(--tam); font-family: var(--letra); font-weight: 400; line-height: 1.5; color: var(--cuerpo); background: var(--papel); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: .125em; }
.salto { position: absolute; left: -999em; }
.salto:focus { left: 1em; top: 1em; z-index: 20; background: var(--blanco); color: var(--tinta); padding: .5em 1em; border-radius: .5em; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: 5.5em; }
.seccion--blanca { background: var(--blanco); }
.suave { color: var(--apagado); }
.seccion--noche .suave, .tarjeta-noche .suave, .lp-hero .suave { color: var(--sobre-tinta-cuerpo); }

.h2 { max-width: 15em; color: var(--tinta); font-size: 3.25em; font-weight: 400; line-height: 1.04; letter-spacing: -1.6px; }
.h2--noche { color: var(--blanco); }
.cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 1.5em 4em; }
.cabeza__apoyo { color: var(--cuerpo); font-size: 1.1875em; line-height: 1.45; }
.micro { margin-top: 1em; color: var(--apagado); text-align: center; font-size: .9375em; }
.micro--noche { color: var(--sobre-tinta-cuerpo); }
.accion { display: flex; flex-direction: column; align-items: center; margin-top: 3em; text-align: center; }

/* ─── 2. El botón: píldora naranja con su círculo de tinta ───────────────────── */
.boton { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; justify-content: space-between; align-items: center; gap: 1.25em; padding: .5em .5em .5em 1.75em; border: 0; border-radius: var(--pildora); background: var(--acento); color: var(--tinta); font-family: inherit; font-size: 1.1875em; font-weight: 500; line-height: 1.2; letter-spacing: -.2px; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blanco) 45%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--tinta) 14%, transparent), 0 .75em 2em -.625em color-mix(in srgb, var(--acento) 75%, transparent);
  transition: transform .3s var(--curva), box-shadow .3s ease; }
.boton--ancho { display: flex; width: 100%; }
.boton::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -40%; width: 30%; opacity: 0; transform: skew(-18deg); background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--blanco) 60%, transparent), transparent); }
.boton__icono { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--tinta); color: var(--acento-noche); }
.boton__flecha { grid-area: 1 / 1; width: .8125em; height: .8125em; transition: transform .5s var(--curva); }
.boton__flecha--entra { transform: translate(-260%, 260%); }
.boton[disabled] { cursor: not-allowed; opacity: .45; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .boton:not([disabled])::before { animation: boton-brillo 4.2s ease-in-out 1.5s infinite; } }
@media (hover: hover) and (pointer: fine) {
  .boton:not([disabled]):hover { transform: translateY(-2px); }
  .boton:not([disabled]):hover .boton__flecha--sale { transform: translate(260%, -260%); }
  .boton:not([disabled]):hover .boton__flecha--entra { transform: none; }
}
@keyframes boton-brillo { 0%, 70% { left: -40%; opacity: 0; } 75% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* ─── 3. Primera pantalla: la idea a la izquierda, el formulario a la derecha ── */
.lp-hero { position: relative; background: var(--tinta); color: var(--sobre-tinta); }
.lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--blanco) 11%, transparent) 1px, transparent 1.5px); background-size: 1.5em 1.5em; -webkit-mask-image: radial-gradient(90% 100% at 0 0, #000, #0000 72%); mask-image: radial-gradient(90% 100% at 0 0, #000, #0000 72%); }
.lp-hero__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; gap: 5em; padding-block: 3.5em 4em; }
.lp-hero__texto { display: flex; flex-direction: column; align-items: flex-start; }
.lp-hero__texto--solo { justify-content: center; }   /* sin el video debajo, el texto se centra frente al formulario */
.lp-hero__aviso { display: inline-flex; align-items: center; gap: .625em; min-height: 2.5em; padding: 0 1.125em 0 .5em; border: 1px solid var(--linea-noche-fuerte); border-radius: var(--pildora); color: var(--sobre-tinta); font-size: .9375em; }
.lp-hero__titulo { margin-top: .4em; color: var(--blanco); font-size: 4.5em; font-weight: 400; line-height: 1.1; letter-spacing: -2.8px; text-wrap: balance; }
.lp-hero__bajada { max-width: 28em; margin-top: 1.25em; color: var(--sobre-tinta-cuerpo); font-size: 1.25em; line-height: 1.5; }
.lp-hero__video { align-self: stretch; margin-top: auto; padding-top: 2em; }
.lp-hero__form { position: relative; display: flex; flex-direction: column; }

/* Las tres redes rotan dentro del círculo: una a la vez, cada 2 s. Sin animación se ve la primera. */
/* Los logos de las redes van con su forma y su color de marca, no con los del estudio (David, 11 nov 2026). */
.redes { position: relative; flex: none; width: 1.75em; height: 1.75em; }
.redes__una { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.redes__una:first-child { opacity: 1; }
.redes__una svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .redes__una { animation: redes-turno 6s infinite; }
  .redes__una:first-child { opacity: 0; }
  .redes__una:nth-child(2) { animation-delay: 2s; }
  .redes__una:nth-child(3) { animation-delay: 4s; }
}
@keyframes pin-cae { from { opacity: 0; transform: scale(0); } 60% { opacity: .95; transform: scale(1.3); } to { opacity: .95; transform: none; } }
@keyframes pin-clava { from { opacity: 0; transform: translateY(-170px); animation-timing-function: cubic-bezier(.55, 0, .9, .45); } 58% { opacity: 1; transform: translateY(0) scale(1.14, .84); } 78% { opacity: 1; transform: translateY(-9px) scale(.96, 1.05); } to { opacity: 1; transform: none; } }
@keyframes texto-sale { from { opacity: 0; } to { opacity: 1; } }
@keyframes halo-late { 0% { opacity: .4; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes redes-turno { 0% { opacity: 0; transform: translateY(40%) scale(.8); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-40%) scale(.8); } }

/* La palabra resaltada: un trazo naranja que se pasa de izquierda a derecha al cargar. */
.marca { position: relative; isolation: isolate; display: inline-block; margin-inline: .04em; padding-inline: .1em; color: var(--tinta); }
.marca::before { content: ""; position: absolute; z-index: -1; inset: .18em 0 .04em; border-radius: .1em .22em .12em .2em; background: var(--acento); box-shadow: 0 0 1.25em color-mix(in srgb, var(--acento) 45%, transparent); transform-origin: 0; rotate: -1deg; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .marca::before { animation: marca-pasa .65s var(--curva-vaiven) .5s both; }
  .marca { animation: marca-tinta 1ms linear .8s both; }
}
@keyframes marca-pasa { 0% { transform: scaleX(0); } to { transform: none; } }
@keyframes marca-tinta { 0% { color: var(--blanco); } to { color: var(--tinta); } }

/* El video: maqueta 16:9 con su botón y su duración, lista para recibir el de David. */
.video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radio); background: var(--tinta-2); box-shadow: 0 0 0 1px var(--linea-noche); }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 4.5em; height: 4.5em; border-radius: 50%; background: var(--acento); color: var(--tinta); box-shadow: 0 0 0 .5em color-mix(in srgb, var(--acento) 28%, transparent), 0 1em 2.5em -.5em color-mix(in srgb, var(--tinta) 70%, transparent); }
.video__play svg { width: 1.5em; height: 1.5em; margin-left: .2em; }
.video__dura { position: absolute; right: .875em; bottom: .875em; padding: .25em .625em; border-radius: .375em; background: color-mix(in srgb, var(--tinta) 82%, transparent); color: var(--blanco); font-size: .8125em; font-weight: 500; }
.video__maqueta { position: absolute; left: .875em; bottom: .875em; max-width: 60%; padding: .25em .625em; border: 1px dashed var(--linea-noche-fuerte); border-radius: .375em; background: color-mix(in srgb, var(--tinta) 82%, transparent); color: var(--blanco); font-size: .75em; line-height: 1.3; }

/* La nota suelta con su flecha, a la izquierda del formulario (solo escritorio). */
.nota-flecha { position: absolute; z-index: 2; top: -1em; right: calc(100% + 1em); color: var(--acento-noche); pointer-events: none; }
.nota-flecha__texto { display: block; white-space: nowrap; font-family: var(--mano); font-size: 2.125em; font-weight: 500; line-height: 1; rotate: -5deg; }
.nota-flecha svg { position: absolute; top: 90%; left: calc(45% - 2em); width: 8.25em; height: auto; }

/* El formulario: marco naranja, pestaña con la cara de David y la tarjeta blanca dentro. */
.sobre { position: relative; flex: 1; display: flex; flex-direction: column; padding: 0 .25em .25em; border-radius: calc(var(--radio) + .25em); background: var(--acento); box-shadow: 0 2em 5em -2em color-mix(in srgb, var(--acento) 55%, transparent); scroll-margin-top: 1.5em; }
.sobre__pestana { display: flex; justify-content: center; align-items: center; gap: .625em; min-height: 3em; padding: .5em 1em; color: var(--tinta); font-size: .9375em; font-weight: 500; }
.sobre__cara { flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; object-fit: cover; border: 1.5px solid color-mix(in srgb, var(--tinta) 22%, transparent); }
.form { flex: 1; display: flex; flex-direction: column; gap: 1.25em; padding: 2em; border-radius: var(--radio); background: var(--blanco); color: var(--tinta); }
.form__trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1em; }   /* el WhatsApp lleva el país delante y necesita más ancho que el nombre */
.form__campo { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.form__campo--ancho { grid-column: 1 / -1; }
.form__rotulo { font-weight: 500; }
.form__entrada { width: 100%; min-height: 3.25em; padding: .875em 1em; border: 1px solid var(--linea-fuerte); border-radius: .75em; background: var(--blanco); color: var(--tinta); font-size: max(1em, 16px); line-height: 1.4; transition: border-color .3s; }
.form__entrada::placeholder { color: var(--apagado); opacity: 1; }
.form__entrada:hover { border-color: var(--tinta); }
.form__entrada:focus-visible { outline: 2px solid var(--acento); outline-offset: .125em; border-color: var(--tinta); }
.form__lista { position: relative; display: block; }
.form__lista select { appearance: none; padding-right: 2.75em; cursor: pointer; }
.form__lista select:invalid { color: var(--apagado); }
.form__lista select option { color: var(--tinta); }
.form__lista svg { position: absolute; top: 50%; right: 1.125em; translate: 0 -50%; color: var(--apagado); pointer-events: none; }
.form__texto { height: 4.75em; min-height: 4.75em; resize: vertical; }
/* El WhatsApp con su país delante, y el par «terreno · pisos», que va lado a lado también en celular. */
/* El WhatsApp es un solo campo (David, 11 nov 2026, 17:00): la caja es .form__tel y dentro van, sin borde
   propio, el país y el número. Con el guion, el país muestra solo su código y la lista va encima, invisible. */
.form__tel { display: flex; align-items: stretch; min-height: 3.25em; border: 1px solid var(--linea-fuerte); border-radius: .75em; background: var(--blanco); transition: border-color .3s; }
.form__tel:hover { border-color: var(--tinta); }
.form__tel:focus-within { outline: 2px solid var(--acento); outline-offset: .125em; border-color: var(--tinta); }
.form__tel .form__entrada { min-height: 0; border: 0; border-radius: .75em; background: transparent; outline: none; }
.form__tel > .form__entrada { flex: 1; min-width: 0; padding-left: .75em; }
.form__pais { flex: none; display: flex; border-right: 1px solid var(--linea); }
.form__pais select { width: 7em; padding-right: 2em; text-overflow: ellipsis; }
.form__pais svg { right: .75em; }
/* Dentro de la caja única, el país que tiene el foco se tiñe: con el teclado se ve cuál de los dos está activo. */
.form__pais:focus-within { border-radius: .6875em 0 0 .6875em; background: color-mix(in srgb, var(--acento) 14%, transparent); }
.form__codigo { display: none; align-items: center; padding: 0 1.875em 0 1em; color: var(--tinta); font-size: max(1em, 16px); white-space: nowrap; }
.con-guion .form__codigo { display: flex; }
.con-guion .form__pais select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; }
.form__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.form__aviso { padding: .75em 1em; border-radius: .75em; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--tinta); font-size: .9375em; line-height: 1.4; }
.form__aviso[hidden] { display: none; }
.form__aviso b { font-weight: 500; }
.form__error { padding: .75em 1em; border: 1px solid var(--acento); border-radius: .75em; color: var(--tinta); font-size: .9375em; line-height: 1.4; }
.form__prueba { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1em; padding: 1.25em 1.375em; border-radius: .875em; background: var(--papel); }
.form__cuenta { display: flex; align-items: center; gap: .875em; }
.form__caras { display: flex; }
.form__caras img, .form__caras span { width: 2.125em; height: 2.125em; margin-left: -.625em; border: 2px solid var(--papel); border-radius: 50%; object-fit: cover; }
.form__caras span { display: grid; place-items: center; background: var(--niebla); color: var(--tinta); font-size: 1em; font-weight: 500; }
.form__caras > :first-child { margin-left: 0; }
.form__cuenta-texto { display: flex; flex-direction: column; gap: .1875em; color: var(--cuerpo); font-size: .875em; line-height: 1.25; }
.estrellas { color: var(--acento); font-size: 1.0625em; letter-spacing: 1px; line-height: 1; }
.form__cuenta-texto strong { color: var(--tinta); font-weight: 500; }
.form__cita { margin: 0; padding-top: 1em; border-top: 1px solid var(--linea); }
.form__cita blockquote { color: var(--tinta); font-size: 1.0625em; line-height: 1.45; }
.form__cita figcaption { margin-top: .375em; color: var(--apagado); font-size: .8125em; }
.form__llamada { margin-top: -.25em; color: var(--cuerpo); text-align: center; font-size: .9375em; }
.form__llamada a, .form__letra a { color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }
.form__llamada a { font-weight: 500; }
.form__letra { margin-top: -.5em; color: var(--apagado); text-align: center; font-size: .8125em; line-height: 1.5; }

/* ─── 4. Para quién es: la tarjeta negra del sí y la punteada del no ──────────── */
.encaje { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: .5em; margin-top: 3em; }
.encaje__si, .encaje__no { padding: 3em; border-radius: var(--radio); }
.encaje__si { position: relative; isolation: isolate; overflow: hidden; background: var(--tinta); color: var(--blanco); }
.encaje__si::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, color-mix(in srgb, var(--blanco) 12%, transparent) 1px, transparent 1.5px); background-size: 1.5em 1.5em; -webkit-mask-image: radial-gradient(90% 90% at 100% 100%, #000, #0000 70%); mask-image: radial-gradient(90% 90% at 100% 100%, #000, #0000 70%); }
.encaje__si::after { content: ""; position: absolute; z-index: -1; right: -15%; bottom: -55%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 26%, transparent), transparent); }
.encaje__no { display: flex; flex-direction: column; border: 1px dashed var(--linea-fuerte); color: var(--cuerpo); }
.encaje__titulo { font-size: 1.125em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.encaje__si .encaje__titulo { color: var(--acento-noche); }
.encaje__no .encaje__titulo { color: var(--apagado); }
.encaje__lineas { display: flex; flex-direction: column; margin-top: 1.25em; }
.encaje__linea { display: flex; align-items: flex-start; gap: 1em; padding-block: 1.125em; border-top: 1px solid var(--linea-noche); font-size: 1.5em; line-height: 1.25; letter-spacing: -.4px; }
.encaje__no .encaje__linea { border-top-color: var(--linea); font-size: 1.125em; line-height: 1.4; letter-spacing: -.1px; }
.encaje__linea svg { flex: none; border-radius: 50%; margin-top: .02em; padding: .2em; }
.encaje__si .encaje__linea svg { width: 1.25em; height: 1.25em; background: var(--acento); color: var(--tinta); }
.encaje__no .encaje__linea svg { width: 1.375em; height: 1.375em; background: var(--niebla); color: var(--apagado); }
.encaje__ir { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.5em; margin-top: 1.75em; }
.encaje__guino { display: inline-flex; align-items: flex-end; gap: .25em; color: var(--blanco); font-family: var(--mano); font-size: 1.75em; font-weight: 500; line-height: 1; rotate: -3deg; }
.encaje__guino svg { width: 1.75em; height: auto; color: var(--acento-noche); }

/* ─── 5. A distancia: el mapa de proyectos dentro de la tarjeta negra ─────────── */
.marco { padding: .5em; background: var(--blanco); }
.tarjeta-noche { border-radius: var(--radio); background: var(--tinta); color: var(--sobre-tinta-cuerpo); }
.tarjeta-noche__dentro { padding-block: 4em; }
.tarjeta-noche__cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1.5em 4em; }
.tarjeta-noche__apoyo { max-width: 26em; color: var(--sobre-tinta-cuerpo); font-size: 1.1875em; line-height: 1.45; }
.tarjeta-noche__cierre { display: flex; flex-direction: column; align-items: center; margin-top: 3.5em; text-align: center; }
.tarjeta-noche__frase { max-width: 24em; margin-bottom: 1.25em; color: var(--blanco); font-size: 1.375em; line-height: 1.3; letter-spacing: -.3px; }
/* Un solo orden de lectura (David, 11 nov 2026, 16:00): título, texto y cifras; el mapa; las ciudades. */
.distancia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2em 4em; }
.distancia__texto { grid-column: 1; grid-row: 1; align-self: end; }
.distancia__mapa { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.distancia__ciudades { grid-column: 1; grid-row: 2; align-self: start; }
.distancia__rotulo { color: var(--sobre-tinta-cuerpo); font-size: .8125em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.distancia__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; margin-top: 2em; }
.distancia__cifra { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .375em; padding: 1.5em 1.375em 1.375em; border-radius: .875em; background: var(--tinta-2); border: 1px solid var(--linea-noche); }
.distancia__cifra dd { color: var(--blanco); font-size: 3.5em; font-weight: 500; line-height: .95; letter-spacing: -2.4px; }
.distancia__cifra:first-child dd { color: var(--acento-noche); }
.distancia__cifra dt { color: var(--sobre-tinta-cuerpo); font-size: .9375em; }
.distancia__nota { max-width: 30em; margin-top: 1em; color: var(--sobre-tinta-cuerpo); font-size: 1.0625em; line-height: 1.5; }
.distancia__texto .h2 + .distancia__nota { margin-top: 1.5em; }
/* Todas las ciudades con su número: una nube en escritorio, una fila que se desliza en celular. */
.ciudades { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .875em; }
.ciudad { flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 2.25em; padding: 0 .375em 0 .875em; border: 1px solid var(--linea-noche); border-radius: var(--pildora); background: var(--tinta-2); color: var(--sobre-tinta); font-size: .9375em; white-space: nowrap; }
.ciudad b { display: grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .375em; border-radius: var(--pildora); background: var(--acento); color: var(--tinta); font-size: .8125em; font-weight: 500; }
.mapa { margin: 0 auto; max-width: 30em; width: 100%; }
.distancia__mapa .mapa { max-width: 34em; }
.mapa svg { display: block; width: 100%; height: auto; border-radius: var(--radio); }
.mapa__pin { fill: var(--acento); stroke: var(--tinta); stroke-width: 6; opacity: .95; }
.mapa__pin--pais { fill: var(--acento-noche); }
.mapa__halo { fill: var(--acento); opacity: .2; }
/* El pin de mapa: la punta marca la ciudad; dentro, el número de proyectos (desde tres) o un punto. */
.mapa__pin--forma { stroke-width: 4; stroke-linejoin: round; }
.mapa__num { font-family: var(--letra); font-weight: 500; fill: var(--tinta); stroke: none; }
.mapa__ojo { fill: var(--tinta); stroke: none; }
.mapa__texto { font-family: var(--letra); font-size: 40px; font-weight: 500; fill: var(--blanco); paint-order: stroke; stroke: var(--tinta); stroke-width: 10; stroke-linejoin: round; }

/* ─── 6. El trabajo: tres casos, texto a un lado e imagen al otro ─────────────── */
.trabajo__casos { display: grid; gap: 6em; margin-top: 4em; }
.trabajo__caso { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 4em; }
.trabajo__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em; min-width: 0; }
.ficha { display: inline-flex; align-items: center; padding: .5em .75em; border: 1px solid var(--linea-fuerte); border-radius: var(--pildora); color: var(--tinta); font-size: .75em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.trabajo__fichas { display: flex; flex-wrap: wrap; gap: .5em; }
.trabajo__nombre { color: var(--tinta); font-size: 4.5em; font-weight: 400; line-height: 1; letter-spacing: -2.6px; }
.trabajo__cuerpo { max-width: 27em; font-size: 1.125em; line-height: 1.5; letter-spacing: -.1px; }
.trabajo__imagen { position: relative; overflow: hidden; min-width: 0; aspect-ratio: 1; border-radius: var(--radio); background: var(--niebla); }
.trabajo__imagen img { width: 100%; height: 100%; object-fit: cover; }
.trabajo__pie { position: absolute; left: .875em; bottom: .875em; padding: .25em .625em; border-radius: .375em; background: color-mix(in srgb, var(--tinta) 82%, transparent); color: var(--blanco); font-size: .75em; }
.trabajo__avance { display: none; }

/* ─── 7. Tarjetas con escena hecha en código (el servicio y los tres pasos) ───── */
.piezas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; margin-top: 2.5em; }
.pieza { display: flex; flex-direction: column; padding: .5em .5em 1.5em; border-radius: var(--radio); background: var(--blanco); }
.pieza__escena { display: grid; place-items: center; height: 12em; padding: 1.25em; overflow: hidden; border-radius: .875em; background: var(--niebla); }
.pieza:nth-child(2) .pieza__escena { background: var(--papel); }
.pieza:nth-child(3) .pieza__escena { background: var(--tinta-3); }
.pieza:nth-child(4) .pieza__escena { background: var(--tinta); }
.pieza__texto { display: flex; flex-direction: column; padding-inline: 1.125em; }
.etiqueta { align-self: flex-start; padding: .375em .875em; border-radius: var(--pildora); background: color-mix(in srgb, var(--acento) 20%, transparent); color: var(--tinta); font-size: .75em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.pieza .etiqueta { margin-top: 1.25em; }
.pieza__titulo { margin-top: .75em; color: var(--tinta); font-size: 1.375em; font-weight: 500; line-height: 1.2; letter-spacing: -.4px; }
.pieza__cuerpo { margin-top: .5em; color: var(--cuerpo); font-size: 1em; line-height: 1.5; }

/* Las escenas: un plano, un panel de especialidades, un chat y el expediente. */
.plano { position: relative; width: 100%; padding: .5em; border-radius: .75em; background: var(--blanco); box-shadow: 0 1em 2em -.75em color-mix(in srgb, var(--tinta) 40%, transparent); }
.plano svg { width: 100%; height: auto; color: var(--tinta); }
.plano__chapa { position: absolute; left: 50%; bottom: -.875em; translate: -50%; padding: .5em 1.125em; border-radius: var(--pildora); background: var(--acento); color: var(--tinta); font-size: .8125em; font-weight: 500; white-space: nowrap; box-shadow: 0 .75em 1.5em -.5em color-mix(in srgb, var(--acento) 70%, transparent); }
.panel { width: 100%; padding: .375em .875em .5em; border-radius: .75em; background: var(--blanco); box-shadow: 0 1em 2em -1em color-mix(in srgb, var(--tinta) 30%, transparent); }
.panel__titulo { display: flex; align-items: center; gap: .5em; padding-block: .5em; color: var(--apagado); font-size: .6875em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.panel__fila { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-block: .375em; border-top: 1px solid var(--linea); }
.panel__clave { color: var(--cuerpo); font-size: .75em; }
.panel__valor { display: inline-flex; align-items: center; gap: .4375em; color: var(--tinta); font-size: .8125em; font-weight: 500; white-space: nowrap; }
.punto { flex: none; width: .4375em; height: .4375em; border-radius: 50%; background: var(--acento); }
.chat { display: flex; flex-direction: column; gap: .5em; width: 100%; }
.chat__globo { display: block; padding: .5em .875em; border-radius: 1em; font-size: .8125em; line-height: 1.3; }
.chat__globo--pide { align-self: flex-start; max-width: 85%; border-bottom-left-radius: .25em; background: var(--blanco); color: var(--tinta); }
.chat__vuelta { display: flex; justify-content: flex-end; align-items: flex-end; gap: .5em; }
.chat__vuelta img { order: 2; flex: none; width: 1.75em; height: 1.75em; border: 1.5px solid var(--blanco); border-radius: 50%; object-fit: cover; }
.chat__globo--responde { border-bottom-right-radius: .25em; background: var(--acento); color: var(--tinta); font-weight: 500; }
.chat__estado { align-self: flex-end; display: inline-flex; align-items: center; gap: .4375em; padding: .25em .75em; border-radius: var(--pildora); background: color-mix(in srgb, var(--tinta) 35%, transparent); color: var(--acento-noche); font-size: .75em; font-weight: 500; }
.late { flex: none; width: .4375em; height: .4375em; border-radius: 50%; background: var(--acento-noche); }
@media (prefers-reduced-motion: no-preference) { .late { animation: late 1.6s ease-in-out infinite; } }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento-noche) 60%, transparent); } 50% { box-shadow: 0 0 0 .4em transparent; } }
.registro { width: 100%; padding: .125em 1em .5em; border: 1px solid var(--linea-noche); border-radius: .875em; background: var(--tinta-2); }
.registro__titulo { padding-block: .625em; color: var(--sobre-tinta-cuerpo); font-size: .6875em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.registro__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-block: .4375em; border-top: 1px solid var(--linea-noche); }
.registro__clave { color: var(--sobre-tinta-cuerpo); font-size: .75em; }
.registro__valor { color: var(--acento-noche); font-size: .9375em; font-weight: 500; }

/* ─── 8. Complementos: la tarjeta base negra, el «más» y dos tarjetas ─────────── */
.suma { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); gap: .5em; margin-top: 3em; }
.suma__base { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 2em; border-radius: var(--radio); background: var(--tinta); color: var(--sobre-tinta-cuerpo); }
.suma__puntos-base { display: flex; flex-direction: column; margin: 1.5em 0 auto; padding-bottom: 2em; }
.suma__puntos-base li { display: flex; align-items: flex-start; gap: .75em; padding-block: .875em; border-bottom: 1px solid var(--linea-noche); color: var(--blanco); line-height: 1.35; }
.suma__puntos-base svg { flex: none; width: 1.25em; height: 1.25em; padding: .2em; border-radius: 50%; background: var(--acento); color: var(--tinta); }
.suma__titulo { margin-top: .75em; color: var(--tinta); font-size: 1.75em; font-weight: 500; line-height: 1.1; letter-spacing: -.6px; }
.suma__base .suma__titulo { color: var(--blanco); }
.suma__precio { margin-top: .25em; color: var(--acento-noche); font-size: 2em; font-weight: 500; line-height: 1.1; letter-spacing: -.8px; }
.suma__cuerpo { margin-top: .625em; font-size: 1.0625em; line-height: 1.5; }
.suma__mas { position: absolute; z-index: 2; top: 50%; right: -.25em; translate: 50% -50%; display: grid; place-items: center; box-sizing: content-box; width: 2.5em; height: 2.5em; border: .25em solid var(--papel); border-radius: 50%; background: var(--acento); color: var(--tinta); }
.suma__mas svg { width: 1em; height: 1em; }
.suma__tarjeta { display: flex; flex-direction: column; padding: .625em; border-radius: var(--radio); background: var(--blanco); }
.suma__escena { position: relative; display: grid; place-items: center; height: 15em; padding: 1.5em; overflow: hidden; border-radius: .875em; background: var(--niebla); }
.suma__tarjeta:last-child .suma__escena { background: var(--tinta-3); }
.suma__ejemplo { position: absolute; top: .875em; right: .875em; padding: .25em .625em; border-radius: var(--pildora); background: color-mix(in srgb, var(--blanco) 70%, transparent); color: var(--tinta); font-size: .625em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.suma__copia { flex: 1; display: flex; flex-direction: column; padding: 1.75em 1.375em 1.375em; }
.suma__tipo { align-self: flex-start; padding: .375em .875em; border: 1px dashed var(--linea-fuerte); border-radius: var(--pildora); color: var(--apagado); font-size: .75em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.suma__tipo--base { border: 0; background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento-noche); }
.suma__puntos { display: flex; flex-direction: column; gap: .625em; margin-top: 1.25em; padding-top: 1.25em; border-top: 1px solid var(--linea); }
.suma__puntos li { display: flex; align-items: flex-start; gap: .75em; color: var(--tinta); line-height: 1.4; }
.suma__puntos svg { flex: none; width: 1.25em; height: 1.25em; margin-top: .1em; padding: .25em; border-radius: 50%; background: var(--niebla); }
.suma__costo { margin-top: auto; padding-top: 1.5em; color: var(--apagado); font-size: .8125em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
/* Escena de interiores: la paleta de materiales y la ficha del mueble. */
.paleta { width: 100%; max-width: 21em; padding: 1em 1.125em; border-radius: .875em; background: var(--blanco); box-shadow: 0 1em 2em -1em color-mix(in srgb, var(--tinta) 40%, transparent); }
.paleta__titulo { color: var(--apagado); font-size: .6875em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.paleta__muestras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375em; margin-top: .5em; }
.paleta__muestras span { height: 3.5em; border-radius: .375em; }
.paleta__muestras span:nth-child(1) { background: var(--niebla); }
.paleta__muestras span:nth-child(2) { background: var(--apagado); }
.paleta__muestras span:nth-child(3) { background: var(--tinta-3); }
.paleta__muestras span:nth-child(4) { background: var(--acento); }
.paleta__fila { display: flex; justify-content: space-between; gap: 1em; margin-top: .75em; padding-top: .75em; border-top: 1px solid var(--linea); color: var(--tinta); font-size: .8125em; }
.paleta__fila span:last-child { color: var(--apagado); }
/* Escena del acompañamiento: los hitos de la obra con su revisión. */
.hitos { width: 100%; max-width: 21em; padding: .5em 1.125em; border-radius: .875em; background: var(--blanco); box-shadow: 0 1em 2em -1em color-mix(in srgb, var(--tinta) 60%, transparent); }
.hitos__fila { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-block: .625em; color: var(--tinta); font-size: .875em; }
.hitos__fila + .hitos__fila { border-top: 1px solid var(--linea); }
.hitos__estado { padding: .2em .625em; border-radius: var(--pildora); background: var(--niebla); color: var(--cuerpo); font-size: .8125em; }
.hitos__estado--hecho { background: var(--acento); color: var(--tinta); font-weight: 500; }

/* ─── 9. Tres pasos ───────────────────────────────────────────────────────────── */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin-top: 3em; }
.paso { position: relative; display: flex; flex-direction: column; padding: .625em .625em 2.25em; border-radius: var(--radio); background: var(--papel); }
.paso:first-child { z-index: 3; }
.paso:nth-child(2) { z-index: 2; }
.paso__escena { display: grid; place-items: center; height: 17em; padding: 1.5em; overflow: hidden; border-radius: .875em; background: var(--niebla); }
.paso:nth-child(3) .paso__escena { align-items: end; padding-bottom: 0; background: var(--tinta-3); }
.paso__texto { display: flex; flex-direction: column; padding-inline: 1.375em; }
.paso .etiqueta { margin-top: 1.75em; }
.paso__titulo { margin-top: .875em; color: var(--tinta); font-size: 1.625em; font-weight: 500; line-height: 1.15; letter-spacing: -.5px; }
.paso__cuerpo { margin-top: .625em; font-size: 1.0625em; line-height: 1.5; }
.paso__sigue { position: absolute; z-index: 2; top: 9.125em; right: -.25em; translate: 50% -50%; display: grid; place-items: center; box-sizing: content-box; width: 2.5em; height: 2.5em; border: .25em solid var(--blanco); border-radius: 50%; background: var(--acento); color: var(--tinta); }
.paso__sigue svg { width: .875em; height: .875em; }
/* Escena con foto real en vez de una interfaz dibujada: la foto llena la caja y lleva su pie. */
.paso__escena.paso__escena--foto, .suma__escena.suma__escena--foto { position: relative; padding: 0; }
.paso__escena--foto img, .suma__escena--foto img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.suma__escena--foto { grid-template-columns: 1fr 1fr; gap: 2px; place-items: stretch; }
.suma__escena--una { grid-template-columns: 1fr; }
.suma__escena--obra img { object-position: 50% 32%; }
.suma__escena--interior img { object-position: 50% 60%; }
.pieza__escena.pieza__escena--foto { position: relative; padding: 0; }
.pieza__escena--foto img, .pieza__escena--foto video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
/* El cartel ocupa la esquina superior izquierda de la foto: se acerca para que se lea «Licencia de edificación». */
.pieza__escena--cartel img { position: absolute; top: -2%; left: -34%; width: 250%; height: auto; max-width: none; }
.pieza__escena--foto .trabajo__pie { left: .625em; bottom: .625em; }
.mini-form { width: 100%; max-width: 19em; padding: 1.25em; border-radius: .875em; background: var(--blanco); box-shadow: 0 1em 2em -1em color-mix(in srgb, var(--tinta) 30%, transparent); }
.mini-form__pregunta { color: var(--tinta); font-size: 1em; font-weight: 500; line-height: 1.25; }
.mini-form__opcion { display: flex; justify-content: space-between; align-items: center; gap: .75em; margin-top: .5em; padding: .75em .875em; border: 1px solid var(--linea-fuerte); border-radius: .625em; color: var(--tinta); font-size: .875em; font-weight: 500; }
.mini-form__opcion--si { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.mini-form__opcion svg { flex: none; width: 1.25em; height: 1.25em; padding: .15em; border-radius: 50%; background: var(--acento); color: var(--tinta); }
.lamina { position: relative; width: 100%; max-width: 21em; border-radius: .75em .75em 0 0; background: var(--blanco); box-shadow: 0 1em 2.5em -.75em color-mix(in srgb, var(--tinta) 60%, transparent); }
.lamina__barra { display: flex; align-items: center; gap: .75em; padding: .625em .75em; color: var(--apagado); font-size: .75em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.lamina__barra::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--linea-fuerte); }
.lamina img { width: 100%; height: 11em; object-fit: cover; object-position: top; }
.lamina__nota { position: absolute; left: -1em; bottom: 1.25em; display: flex; align-items: center; gap: .625em; max-width: 15em; padding: .5em .875em .5em .5em; border-radius: var(--pildora); background: var(--blanco); color: var(--tinta); font-size: .8125em; font-weight: 500; line-height: 1.25; box-shadow: 0 .75em 1.5em -.5em color-mix(in srgb, var(--tinta) 45%, transparent); }
.lamina__nota img { flex: none; width: 2.25em; height: 2.25em; border-radius: 50%; object-fit: cover; }
.vivo { width: 100%; max-width: 19em; padding: .5em 1.25em; border: 1px solid var(--linea-noche); border-radius: .875em; background: var(--tinta-2); }
.vivo__fila { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-block: .875em; }
.vivo__fila + .vivo__fila { border-top: 1px solid var(--linea-noche); }
.vivo__nombre { color: var(--blanco); font-size: .8125em; }
.vivo__estado { display: inline-flex; align-items: center; gap: .5em; padding: .25em .75em; border-radius: var(--pildora); background: color-mix(in srgb, var(--acento-noche) 18%, transparent); color: var(--acento-noche); font-size: .8125em; font-weight: 500; }
.vivo__clave { color: var(--sobre-tinta-cuerpo); font-size: .75em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.vivo__valor { color: var(--blanco); font-size: 1.125em; font-weight: 500; white-space: nowrap; }

/* ─── 10. El canal y la nota firmada ──────────────────────────────────────────── */
.canal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: stretch; gap: 4em; margin-top: 3em; }
.canal__tarjeta { display: flex; flex-direction: column; padding: .625em; border-radius: var(--radio); background: var(--blanco); }
.canal__tarjeta--corta { align-self: center; }   /* sin la fila de videos no se estira al alto de la carta */
.canal__tarjeta--corta .canal__cifras { margin-bottom: 0; }
.canal__cabeza { display: flex; align-items: center; gap: 1em; padding: 1em 1.125em 1.25em; }
.canal__avatar { flex: none; width: 3.75em; height: 3.75em; border-radius: 50%; object-fit: cover; }
.canal__quien { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.canal__nombre { color: var(--tinta); font-size: 1.375em; font-weight: 500; line-height: 1.15; letter-spacing: -.4px; }
.canal__usuario { color: var(--apagado); font-size: .875em; }
.canal__abrir { flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 2.5em; margin-left: auto; padding: 0 1.125em 0 .5em; border-radius: var(--pildora); background: var(--tinta); color: var(--blanco); font-size: .875em; font-weight: 500; white-space: nowrap; }
.canal__abrir .redes { width: 1.625em; height: 1.625em; }
.canal__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin: 0 0 .5em; }
.canal__cifra { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .375em; padding: 1.5em 1.375em 1.375em; border-radius: .875em; background: var(--papel); }
.canal__cifra:first-child { background: var(--tinta); }
.canal__cifra dd { color: var(--tinta); font-size: 3.5em; font-weight: 500; line-height: .95; letter-spacing: -2.4px; }
.canal__cifra:first-child dd { color: var(--acento-noche); }
.canal__cifra dt { color: var(--cuerpo); font-size: .9375em; }
.canal__cifra:first-child dt { color: var(--sobre-tinta-cuerpo); }
.canal__videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin-top: auto; }
.canal__video { display: flex; flex-direction: column; gap: .75em; padding-bottom: .875em; }
/* Tres videos verticales del canal. Sin el guion llevan los controles del navegador; con él, la
   portada muestra su botón y al tocarla el video suena ahí mismo, sin salir a TikTok. */
.canal__miniatura { position: relative; overflow: hidden; display: block; aspect-ratio: 9 / 16; border-radius: .75em; background: var(--tinta-2); }
.canal__miniatura video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.canal__play { position: absolute; inset: 0; display: grid; place-items: end start; padding: .625em; border: 0;   /* abajo a la izquierda: en el centro tapaba el título de la portada */ background: linear-gradient(to top, color-mix(in srgb, var(--tinta) 50%, transparent), transparent 45%); cursor: pointer; }
.canal__play[hidden] { display: none; }
.canal__play span { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--acento); color: var(--tinta); }
.canal__play svg { width: 1em; height: 1em; margin-left: .125em; }
.canal__dura { position: absolute; right: .625em; bottom: .625em; padding: .2em .5em; border-radius: .375em; background: color-mix(in srgb, var(--tinta) 82%, transparent); color: var(--blanco); font-size: .75em; font-weight: 500; pointer-events: none; }
.canal__miniatura--suena .canal__dura { display: none; }
.canal__titulo { padding-inline: .25em; color: var(--tinta); font-size: .9375em; font-weight: 500; line-height: 1.3; }
.carta { position: relative; align-self: center; margin: 0; padding: 2.75em 2.25em 2em; border: 1px solid var(--linea); border-radius: .375em; background: var(--blanco); color: var(--tinta); rotate: 1deg; }
.carta__cinta { position: absolute; top: -.875em; left: 50%; width: 7em; height: 1.875em; margin-left: -3.5em; border: 1px solid var(--linea); background: color-mix(in srgb, var(--niebla) 75%, transparent); rotate: -2deg; }
.carta p { font-family: var(--mano); font-size: 1.5625em; font-weight: 500; line-height: 1.25; }
.carta p + p { margin-top: .625em; }
.carta .carta__firma { margin-top: .375em; font-size: 2.625em; line-height: 1; }
.carta__de { display: flex; align-items: center; gap: .875em; margin-top: 1.25em; padding-top: 1.25em; border-top: 1px dashed var(--linea-fuerte); }
.carta__de img { width: 3em; height: 3em; border-radius: 50%; object-fit: cover; }
.carta__de span { display: flex; flex-direction: column; line-height: 1.3; }
.carta__de b { font-weight: 500; }
.carta__de small { color: var(--apagado); font-size: .875em; }

/* ─── 11. Lo que dicen las familias ───────────────────────────────────────────── */
.voces { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: .5em; margin-top: 3em; }
.voces__principal { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 3.5em; border-radius: var(--radio); background: var(--tinta); color: var(--blanco); }
.voces__principal::before { content: ""; position: absolute; z-index: -1; left: -15%; bottom: -45%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 24%, transparent), transparent); }
.voces__comilla { width: 3em; height: auto; color: var(--acento-noche); }
.voces__cita-grande { margin: 2em 0 2.5em; font-size: 2em; line-height: 1.25; letter-spacing: -.7px; text-wrap: pretty; }
.voces__de { display: flex; align-items: center; gap: 1em; margin-top: auto; }
.voces__foto { flex: none; display: grid; place-items: center; width: 3.75em; height: 3.75em; border-radius: 50%; object-fit: cover; background: var(--niebla); color: var(--tinta); font-size: 1em; font-weight: 500; }
.voces__foto--chica { width: 2.75em; height: 2.75em; }
.voces__quien { display: flex; flex-direction: column; gap: .125em; }
.voces__nombre { font-size: 1.125em; font-weight: 500; }
.voces__detalle { color: var(--apagado); font-size: .875em; }
.voces__principal .voces__detalle { color: var(--sobre-tinta-cuerpo); }
.voces__lado { display: flex; flex-direction: column; gap: .5em; }
.voces__cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: .75em 1em; padding: 1.25em 1.75em; border-radius: var(--radio); background: var(--acento); color: var(--tinta); }
.voces__caras { display: inline-flex; padding-left: .625em; }
.voces__caras img, .voces__caras span { width: 2.5em; height: 2.5em; margin-left: -.625em; border: 2px solid var(--acento); border-radius: 50%; object-fit: cover; }
.voces__caras span { display: grid; place-items: center; background: var(--blanco); font-weight: 500; }
.voces__cuenta-texto { font-size: 1.125em; font-weight: 500; }
.voces__cuenta-texto b { font-size: 1.5em; font-weight: 500; letter-spacing: -.6px; }
.voces__cuenta-texto { display: flex; flex-direction: column; gap: .125em; }
.voces__cuenta .estrellas { color: var(--tinta); font-size: .9375em; }
.voces__tarjeta { flex: 1; display: flex; flex-direction: column; padding: 2em; border-radius: var(--radio); background: var(--papel); color: var(--tinta); }
.voces__cita { margin: 0 0 1.5em; font-size: 1.125em; line-height: 1.5; }

/* ─── 12. Preguntas ───────────────────────────────────────────────────────────── */
.h2--preguntas { max-width: 10em; margin-bottom: 1.1em; font-size: 3.5em; letter-spacing: -1.9px; }
.pregunta { border-top: 1px solid var(--linea-fuerte); }
.pregunta:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.pregunta summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2em; padding-block: 2em; border-radius: .5em; list-style: none; cursor: pointer; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta h3 { color: var(--tinta); font-size: 2em; font-weight: 400; line-height: 1.12; letter-spacing: -.8px; }
.pregunta__mas { position: relative; display: block; width: 3em; height: 3em; border: 1px solid var(--linea-fuerte); border-radius: 50%; color: var(--tinta); transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .4s var(--curva); }
.pregunta__mas::before, .pregunta__mas::after { content: ""; position: absolute; top: 50%; left: 50%; width: .875em; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.pregunta__mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.pregunta[open] .pregunta__mas { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); transform: rotate(45deg); }
.pregunta__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3em; }
.pregunta__respuesta { grid-column: 2; padding-bottom: 2.2em; color: var(--cuerpo); font-size: 1.375em; line-height: 1.4; letter-spacing: -.3px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .pregunta { interpolate-size: allow-keywords; }
    .pregunta::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--curva), content-visibility .4s allow-discrete; }
    .pregunta[open]::details-content { block-size: auto; }
  }
}

/* ─── 13. La llamada (maqueta), el pie y el botón que acompaña en el celular ──── */
.seccion--noche { background: var(--tinta); color: var(--sobre-tinta-cuerpo); }
.llamada { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 4em; }
.llamada__cuerpo { max-width: 24em; margin-top: 1.25em; font-size: 1.1875em; line-height: 1.45; }
.llamada__quien { display: flex; align-items: center; gap: .875em; margin-top: 2em; padding-block: 1.25em; border-block: 1px solid var(--linea-noche); }
.llamada__quien img { flex: none; width: 3em; height: 3em; border-radius: 50%; object-fit: cover; }
.llamada__quien span { display: flex; flex-direction: column; line-height: 1.3; }
.llamada__quien b { color: var(--blanco); font-weight: 500; }
.llamada__quien small { font-size: .875em; }
/* La segunda puerta: la tarjeta de la hora con David, de pago. */
.puerta { display: flex; flex-direction: column; gap: 1.25em; justify-self: end; width: 100%; max-width: 30em; padding: 2em; border-radius: var(--radio); background: var(--blanco); color: var(--tinta); }
.puerta__precio { font-size: 4.5em; font-weight: 500; line-height: .95; letter-spacing: -2.6px; }
.puerta__lista { display: flex; flex-direction: column; gap: .75em; padding-top: 1.25em; border-top: 1px solid var(--linea); }
.puerta__lista li { display: flex; align-items: flex-start; gap: .75em; font-size: 1.0625em; line-height: 1.4; }
.puerta__lista svg { flex: none; width: 1.25em; height: 1.25em; margin-top: .1em; padding: .2em; border-radius: 50%; background: var(--acento); color: var(--tinta); }
.puerta__nota { margin-top: -.25em; color: var(--apagado); text-align: center; font-size: .875em; }
.puerta__nota a { color: var(--tinta); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.pie { background: var(--blanco); color: var(--apagado); }
.pie__dentro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1em 2em; padding-block: 2.5em; font-size: .875em; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1.5em; }
.pie__enlaces a { text-decoration: underline; text-underline-offset: .2em; }
.flota { display: none; }

/* ─── 14. Entradas: cada bloque sube y aparece una sola vez al asomarse ──────── */
/* El estado oculto cuelga de .con-guion, que pone landing.js al arrancar: si el guion no carga
   (aunque el navegador tenga JavaScript), nada queda invisible. */
@media (prefers-reduced-motion: no-preference) {
  .con-guion [data-entra] { opacity: 0; transform: translateY(1.5em); transition: opacity .9s var(--curva), transform 1.1s var(--curva); }
  .con-guion [data-entra="destapa"] { opacity: 1; transform: none; clip-path: inset(100% 0 0); transition: clip-path 1.2s var(--curva); }
  .con-guion [data-entra="destapa"] img { transform: scale(1.12); transition: transform 1.6s var(--curva); }
  .con-guion [data-entra].entro { opacity: 1; transform: none; }
  /* El mapa: los pines caen uno tras otro al entrar, y las ciudades con más proyectos siguen latiendo. */
  .con-guion [data-entra] .mapa__pin, .con-guion [data-entra] .mapa__texto, .con-guion [data-entra] .mapa__halo { opacity: 0; }
  .con-guion [data-entra] .mapa__pin, .con-guion [data-entra] .mapa__halo { transform-box: fill-box; transform-origin: center; }
  .con-guion .entro .mapa__pin { animation: pin-cae .55s var(--curva) both; animation-delay: calc(.35s + var(--i, 0) * 70ms); }
  .con-guion [data-entra] .mapa__pin--forma { transform-origin: 50% 100%; }
  .con-guion .entro .mapa__pin--forma { animation: pin-clava .7s linear both; animation-delay: calc(.35s + var(--i, 0) * 80ms); }
  .con-guion .entro .mapa__texto { animation: texto-sale .5s ease both; animation-delay: calc(.6s + var(--i, 0) * 70ms); }
  .con-guion .entro .mapa__halo { animation: halo-late 2.8s ease-out infinite; animation-delay: calc(1.2s + var(--i, 0) * 180ms); }
  .con-guion [data-entra="destapa"].entro { clip-path: inset(0); }
  .con-guion [data-entra="destapa"].entro img { transform: none; }
  .con-guion .lamina__nota { opacity: 0; translate: 0 .75em; transition: opacity .6s ease .7s, translate .8s var(--curva) .7s; }
  .con-guion .entro .lamina__nota { opacity: 1; translate: none; }
  .con-guion .hitos__estado--hecho { scale: 0; transition: scale .7s var(--curva) .5s; }
  .con-guion .entro .hitos__estado--hecho { scale: 1; }
}

/* ─── 14b. Los casos se relevan en el mismo sitio (David, 11 nov 2026) ───────────
   Calcado de la referencia: la sección se queda fija mientras se baja; el texto de un caso sale,
   entra el del siguiente y su imagen tapa a la anterior de abajo hacia arriba. Al subir, lo mismo
   al revés. Es solo CSS (animación atada al scroll, sin JavaScript) y, como en la referencia, solo
   en escritorio: en celular, en un navegador que no la soporta o con «reducir movimiento», los
   casos van uno debajo del otro.
   Cada caso puede traer una segunda imagen del mismo proyecto (.trabajo__dentro) que tapa a la
   fachada. Los tiempos de cada caso (cuándo entra su texto, su imagen y su interior) y el alto del
   recorrido no están aquí: los escribe la página según cuántos casos hay (lp_relevo_css() en
   diagnostico-nuevo/index.php). Aquí va lo que no cambia. */
.trabajo__dentro { position: absolute; inset: 0; display: none; }
.trabajo__dentro img { width: 100%; height: 100%; object-fit: cover; }
/* En celular no hay relevo. La segunda imagen cambia entera, de una vez, cuando la foto llega a la
   parte alta de la pantalla, y vuelve a la fachada al regresar (landing.js pone la clase). Atada al
   scroll se quedaba a medias, mitad fachada y mitad interior (David, 11 nov 2026, 16:00). */
@media (width <= 991px) and (prefers-reduced-motion: no-preference) {
  .con-guion .trabajo__dentro { display: block; clip-path: inset(100% 0 0); transition: clip-path .9s var(--curva); }
  .con-guion .trabajo__dentro img { transform: scale(1.1); transition: transform 1.2s var(--curva); }
  .con-guion .trabajo__imagen--dentro .trabajo__dentro { clip-path: inset(0); }
  .con-guion .trabajo__imagen--dentro .trabajo__dentro img { transform: none; }
}
/* A partir del tercer caso, en celular quedan plegados: el tercero asoma difuminado y un botón los abre
   (landing.js pone data-plegado; sin guion se ven todos). Debajo, el enlace discreto al portafolio. */
.trabajo__mas { display: none; }
.trabajo__caso[tabindex]:focus { outline: none; }
.trabajo__todos { margin-top: 2.5em; text-align: center; color: var(--apagado); font-size: .875em; }
.trabajo__todos a { text-decoration: underline; text-underline-offset: .2em; }
.trabajo__todos a:hover { color: var(--tinta); }
@media (width <= 991px) {
  .trabajo__casos[data-plegado] .trabajo__caso:nth-child(n+4) { display: none; }
  .trabajo__casos[data-plegado] .trabajo__caso:nth-child(3) { pointer-events: none; -webkit-mask-image: linear-gradient(#000, transparent 92%); mask-image: linear-gradient(#000, transparent 92%); }
  .trabajo__casos[data-plegado] .trabajo__caso:nth-child(3) .trabajo__texto { display: none; }
  .trabajo__casos[data-plegado] .trabajo__caso:nth-child(3) .trabajo__imagen { aspect-ratio: auto; height: 11em; }
  .trabajo__pin:has([data-plegado]) + .trabajo__mas { position: relative; display: flex; justify-content: center; margin-top: -1.25em; }
  .trabajo__mas-boton { display: inline-flex; align-items: center; gap: .625em; min-height: 3em; padding: 0 1.375em; border: 1px solid var(--linea-fuerte); border-radius: var(--pildora); background: var(--blanco); color: var(--tinta); font: inherit; font-weight: 500; cursor: pointer; }
  .trabajo__todos { margin-top: 1.75em; }
}
@media (width >= 992px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .trabajo__pin--relevo { view-timeline-name: --trabajo; view-timeline-axis: block; }
    .trabajo__pin--relevo .trabajo__escena { position: sticky; top: 0; height: 100vh; overflow: clip; }
    .trabajo__pin--relevo .trabajo__casos { position: relative; display: block; height: 100%; margin-top: 0; }
    .trabajo__pin--relevo .trabajo__caso { position: absolute; inset: 0; padding-block: 5em; pointer-events: none; }
    .trabajo__pin--relevo .trabajo__texto { pointer-events: auto; }
    .trabajo__pin--relevo .trabajo__dentro { display: block; }
    .trabajo__pin--relevo .trabajo__imagen { justify-self: end; width: auto; height: min(76vh, 44em, 100vh - 11em); }
    /* Aquí manda el scroll: la entrada «destapa» de la sección 14 se apaga. */
    .con-guion .trabajo__pin--relevo .trabajo__imagen[data-entra] { clip-path: none; transition: none; }
    .con-guion .trabajo__pin--relevo .trabajo__imagen[data-entra] img { transform: none; transition: none; }

    .trabajo__pin--relevo .trabajo__avance { position: absolute; z-index: 4; left: 0; right: 0; bottom: 2.5em; display: flex; align-items: center; gap: 1em; color: var(--apagado); font-size: .75em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
    .trabajo__pin--relevo .trabajo__avance span { flex: none; }
    .trabajo__pin--relevo .trabajo__avance i { flex: 1; height: 1px; background: var(--linea-fuerte); transform-origin: 0 50%; }

    .trabajo__pin--relevo .trabajo__texto,
    .trabajo__pin--relevo .trabajo__caso:not([data-i="0"]) .trabajo__imagen,
    .trabajo__pin--relevo .trabajo__caso:not([data-i="0"]) .trabajo__imagen > img,
    .trabajo__pin--relevo .trabajo__dentro,
    .trabajo__pin--relevo .trabajo__dentro img,
    .trabajo__pin--relevo .trabajo__avance i { animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --trabajo; animation-range: contain; }
    .trabajo__pin--relevo .trabajo__avance i { animation-name: caso-avance; }

    /* Con el teclado: el caso que tiene el foco se muestra entero, esté donde esté el scroll. */
    .trabajo__pin--relevo .trabajo__caso:has(:focus-visible) { z-index: 5; }
    .trabajo__pin--relevo .trabajo__caso:has(:focus-visible) .trabajo__texto { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
    .trabajo__pin--relevo .trabajo__caso:has(:focus-visible) .trabajo__imagen { clip-path: inset(0) !important; }
    .trabajo__pin--relevo .trabajo__caso:has(:focus-visible) .trabajo__imagen img { transform: none !important; }
    .trabajo__pin--relevo .trabajo__casos:has(:focus-visible) .trabajo__caso:not(:has(:focus-visible)) .trabajo__texto { opacity: 0 !important; pointer-events: none !important; }
  }
}
@keyframes caso-avance { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ─── 15. Tableta ─────────────────────────────────────────────────────────────── */
@media (width <= 991px) {
  .seccion { padding-block: 4.5em; }
  .h2 { font-size: 2.75em; letter-spacing: -1.2px; }
  .h2--preguntas { font-size: 3em; letter-spacing: -1.4px; }
  .cabeza, .tarjeta-noche__cabeza { grid-template-columns: minmax(0, 1fr); gap: 1em; }
  .lp-hero__rejilla { grid-template-columns: minmax(0, 1fr); gap: 1.5em; padding-block: 3em 4em; }
  .lp-hero__texto { display: contents; }
  .lp-hero__aviso { order: 1; justify-self: start; }
  .lp-hero__titulo { order: 2; font-size: 3.5em; letter-spacing: -1.8px; }
  .lp-hero__form { order: 3; margin-top: .5em; }
  .lp-hero__bajada { order: 4; margin-top: 1em; }
  .lp-hero__video { order: 5; margin-top: .5em; padding-top: 0; }
  .nota-flecha { display: none; }
  .encaje { grid-template-columns: minmax(0, 1fr); }
  .encaje__si, .encaje__no { padding: 2.25em; }
  .tarjeta-noche__dentro { padding-block: 3.5em; }
  .distancia { grid-template-columns: minmax(0, 1fr); gap: 2em; }
  .distancia__texto, .distancia__mapa, .distancia__ciudades { grid-column: 1; grid-row: auto; }
  .ciudades { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25em; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); }
  .ciudades::-webkit-scrollbar { display: none; }
  .ciudad { scroll-snap-align: start; }
  .trabajo__casos { gap: 5em; margin-top: 3.5em; }
  .trabajo__caso { grid-template-columns: 1fr; gap: 2em; }
  .trabajo__imagen { order: -1; }
  .trabajo__nombre { font-size: 3.75em; letter-spacing: -1.9px; }
  .trabajo__texto .boton { display: none; }
  .piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suma__base { grid-column: 1 / -1; }
  .suma__mas { inset: auto auto -.25em 50%; translate: -50% 50%; }
  .pasos { grid-template-columns: minmax(0, 1fr); max-width: 34em; margin-inline: auto; }
  .paso__sigue { inset: auto auto -.25em 50%; translate: -50% 50%; rotate: 90deg; }
  .canal { grid-template-columns: minmax(0, 1fr); gap: 3em; }
  .carta { max-width: 34em; }
  .voces { grid-template-columns: minmax(0, 1fr); }
  .voces__principal { padding: 2.5em; }
  .voces__cita-grande { font-size: 1.625em; }
  .pregunta h3 { font-size: 1.875em; }
  .pregunta__panel { grid-template-columns: minmax(0, 1fr); }
  .pregunta__respuesta { grid-column: 1; max-width: 32em; }
  .llamada { grid-template-columns: minmax(0, 1fr); gap: 2.5em; }
  .puerta { justify-self: start; max-width: 34em; }
}

/* ─── 16. Celular ─────────────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .seccion { padding-block: 3.5em; }
  .h2 { font-size: 2.25em; letter-spacing: -1px; }
  .h2--preguntas { font-size: 2.5em; letter-spacing: -1.4px; }
  .accion { margin-top: 2.25em; }
  .accion .boton, .tarjeta-noche__cierre .boton, .encaje__ir .boton { display: flex; width: 100%; }
  .boton { padding-left: 1.375em; font-size: 1.0625em; }
  .lp-hero__aviso { min-height: 2.25em; padding-block: .375em; font-size: .8125em; line-height: 1.3; white-space: nowrap; }
  .lp-hero__titulo { font-size: 2.625em; letter-spacing: -1.2px; }
  .lp-hero__bajada { font-size: 1.125em; }
  .video__play { width: 3.75em; height: 3.75em; }
  .form { padding: 1.25em; }
  .puerta { padding: 1.5em; }
  .puerta__precio { font-size: 3.5em; letter-spacing: -1.8px; }
  .form__campos { grid-template-columns: minmax(0, 1fr); }
  .encaje { margin-top: 2em; }
  .encaje__si, .encaje__no { padding: 1.5em; }
  .encaje__linea { gap: .75em; font-size: 1.1875em; letter-spacing: -.2px; }
  .encaje__no .encaje__linea { font-size: 1em; }
  .encaje__guino { display: none; }
  .tarjeta-noche__dentro { padding-block: 3em; }
  .distancia__cifra { padding: 1.125em 1em; }
  .distancia__cifra dd { font-size: 2.25em; letter-spacing: -1.4px; }
  .trabajo__casos { gap: 4em; margin-top: 3em; }
  .trabajo__texto { gap: 1.25em; }
  .trabajo__nombre { font-size: 3em; letter-spacing: -1.8px; }
  .piezas { grid-template-columns: minmax(0, 1fr); max-width: 30em; margin-inline: auto; }
  .pieza__escena { padding: 1em; }
  .suma { grid-template-columns: minmax(0, 1fr); margin-top: 2em; }
  .suma__base { padding: 1.5em; }
  .suma__titulo { font-size: 1.5em; }
  .suma__escena { padding-top: 2.75em; }
  .pasos { margin-top: 2em; }
  .paso__escena { height: 15em; padding: 1em; }
  .paso__titulo { font-size: 1.375em; }
  .lamina__nota { left: -.5em; }
  .canal { margin-top: 2em; }
  .canal__cabeza { flex-wrap: wrap; padding: .75em .75em 1em; }
  .canal__abrir { margin-left: 0; }
  .canal__cifra { padding: 1.125em 1em; }
  .canal__cifra dd { font-size: 2.25em; letter-spacing: -1.4px; }
  .voces { margin-top: 2em; }
  .voces__principal { padding: 1.75em 1.5em; }
  .voces__cita-grande { margin: 1.25em 0 1.75em; font-size: 1.3125em; letter-spacing: -.3px; }
  .voces__tarjeta { padding: 1.5em; }
  .voces__cita { font-size: 1.0625em; }
  .voces__cuenta { flex-wrap: nowrap; padding: 1em 1.25em; }   /* caras y cuenta en una sola línea, como en la referencia */
  .voces__cuenta-texto { font-size: 1em; }
  .voces__cuenta-texto b { font-size: 1.375em; }
  .pregunta summary { gap: 1.25em; padding-block: 1.5em; }
  .pregunta h3 { font-size: 1.75em; letter-spacing: -.7px; }
  .pregunta__mas { width: 2.75em; height: 2.75em; }
  .pregunta__respuesta { padding-bottom: 1.75em; font-size: 1.25em; }
  .pie__dentro { padding-bottom: 6.5em; }
  /* El botón que acompaña: aparece cuando el formulario ya salió de la pantalla. */
  /* Mismas medidas que el de la referencia: de borde a borde, el texto a la izquierda y la cara dentro, a la
     derecha. Pegado abajo, la barra de Safari toma su color (David, 11 nov 2026, 04:49). */
  .flota { position: fixed; z-index: 20; left: .75em; right: .75em; bottom: .75em; display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 3.75em; padding: 0 .5em 0 1.5em; border-radius: var(--pildora); background: var(--acento); color: var(--tinta); font-size: 1.0625em; font-weight: 500; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blanco) 55%, transparent), 0 1em 2.5em -.5em color-mix(in srgb, var(--tinta) 55%, transparent); transition: transform .4s var(--curva), opacity .3s ease; }
  .flota img { flex: none; width: 2.75em; height: 2.75em; max-width: none; border: 2px solid var(--tinta); border-radius: 50%; object-fit: cover; }
  .flota.lejos { transform: translateY(160%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .4s var(--curva), opacity .3s ease, visibility 0s linear .4s; }
}
@media (width <= 479px) {
  .trabajo__nombre { font-size: 2.5em; letter-spacing: -1.1px; }
  .trabajo__cuerpo { font-size: 1.0625em; }
  .h2--preguntas { font-size: 2.125em; letter-spacing: -.9px; }
  .pregunta summary { gap: 1em; padding-block: 1.25em; }
  .pregunta h3 { font-size: 1.625em; letter-spacing: -.5px; }
  .pregunta__respuesta { font-size: 1.1875em; }
  .canal__cifras { gap: .375em; }
  .canal__cifra { padding: 1em .75em; }
  .canal__cifra dd { font-size: 1.625em; letter-spacing: -1px; }
  .canal__cifra dt { font-size: .8125em; }
  /* En celular los tres videos van en una fila que se desliza de lado: uno entero y el siguiente
     asomando. Apilados, tres videos verticales hacían el bloque más largo que todo lo demás. */
  .canal__videos { display: flex; overflow-x: auto; gap: .5em; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .canal__videos::-webkit-scrollbar { display: none; }
  .canal__video { flex: none; width: 62%; scroll-snap-align: start; }
  .carta { padding: 2.25em 1.5em 1.75em; rotate: .75deg; }
  .carta p { font-size: 1.5em; }
  .carta .carta__firma { font-size: 2.5em; }
}