/* ============================================================================
   VIDARQ Estudio — hoja de estilos del sitio público.

   Un solo archivo, seccionado. Mobile-first: 390 px es donde se diseña; el
   escritorio se deduce en las @media del final. Tokens del Manual v3.1 (§8 de
   CLAUDE.md). Terracota ≤ 10% de cualquier composición.

   Índice:  1 tokens · 2 base · 3 tipografía · 4 botones y chips · 5 barra y menú
            6 píldora · 7 heros · 8 secciones y bloques · 9 carruseles y tarjetas
            10 etapas / FAQs (details) · 11 mapa · 12 formulario · 13 footer
            14 animaciones · 15 escritorio
   ============================================================================ */

/* ─── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --terracota: #DE531F; --terracota-d: #B84212; --terracota-t: #F2C9B3;
  --salvia: #7E8468; --salvia-d: #5C6149; --salvia-t: #C3C7B4;
  --negro: #23211A; --blanco: #FBFAF6; --crema: #E8DFCC; --crema-f: #F4F0E7;
  --arena: #C9BCA6; --madera: #9A7E55; --sec: #6B6656; --linea: #E3DCCF;
  --ok: #4CA96A;
  --b70: rgba(251,250,246,.72); --b55: rgba(251,250,246,.55); --b16: rgba(251,250,246,.16); --b10: rgba(251,250,246,.10);
  --serif: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --r-xl: 28px; --r-l: 24px; --r-m: 18px; --r-s: 14px;
  --gutter: 22px; --barra-h: 78px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ─── 2. Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--blanco); color: var(--negro);
  font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip, no hidden: hidden rompe position: sticky (gotcha B.2) */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 4px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }   /* gana a .btn { display:inline-flex } */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.pila { display: flex; flex-direction: column; gap: 18px; }
.pila--s { gap: 10px; } .pila--m { gap: 14px; } .pila--l { gap: 22px; }
.fila { display: flex; align-items: center; gap: 12px; }
.fila--entre { justify-content: space-between; }
.fila--envolver { flex-wrap: wrap; row-gap: 8px; }
/* En móvil las dos columnas se apilan: el gap es el aire entre bloques (David, 14 sept: «falta aire» en varias partes). */
.dos-col { display: flex; flex-direction: column; gap: 30px; }
.regla { width: 38px; height: 3px; background: var(--terracota); border-radius: 2px; }
.regla--corta { width: 22px; height: 2px; }
.regla--salvia { background: var(--salvia); } .regla--madera { background: var(--madera); } .regla--arena { background: var(--arena); }

/* ─── 3. Tipografía ──────────────────────────────────────────────────────── */
h1, h2, .display { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em, .display em { font-style: italic; }
h1 { font-size: clamp(40px, 11.5vw, 50px); }
h2 { font-size: clamp(32px, 8.6vw, 36px); }
h3 { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -.005em; }
.display { font-size: 28px; line-height: 1.2; }      /* serif ≥ 28 px: el mínimo del Manual */
.eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--salvia); font-weight: 500; }
.eyebrow--punto { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow--punto::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.eyebrow--terracota { color: var(--terracota); }
.eyebrow--sec { color: var(--sec); }
.texto-sec { color: var(--sec); }
.texto-claro { color: var(--b70); }
.texto-suave { color: var(--b55); }
.chico { font-size: 13.5px; } .mini { font-size: 12px; } .nota { font-size: 12px; color: var(--sec); font-style: italic; }
.parrafos p + p { margin-top: .8em; }
.rodeado { display: inline-block; position: relative; padding: 0 8px; }
.rodeado::before { content: ""; position: absolute; inset: -3px 0; border: 1.5px solid rgba(222,83,31,.9); border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%; }
.rodeado em { position: relative; }

/* ─── 4. Botones y chips ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 8px 0 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(35,33,26,.14); }
.btn:active { transform: translateY(0); transition-duration: .12s; }
.btn__circulo { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn--claro { background: var(--blanco); color: var(--negro); }
.btn--claro .btn__circulo { background: var(--terracota); color: var(--blanco); }
.btn--oscuro { background: var(--negro); color: var(--blanco); }
.btn--oscuro .btn__circulo { background: var(--terracota); color: var(--blanco); }
.btn--terracota { background: var(--terracota); color: var(--blanco); min-height: 54px; font-size: 15px; }
.btn--terracota:hover { background: var(--terracota-d); }
.btn--terracota .btn__circulo { background: var(--blanco); color: var(--terracota); width: 36px; height: 36px; }
.btn--borde { border: 1px solid var(--linea); color: var(--negro); font-weight: 500; }
/* Circulo translucido, no negro: sobre un boton secundario el circulo negro pesaba
   igual que el CTA principal y la pagina parecia ofrecer dos caminos del mismo rango.
   [David, 16 sept 2026] */
.btn--borde .btn__circulo { background: transparent; border: 1px solid var(--linea); color: var(--negro); }
.btn__circulo--izq svg { transform: rotate(180deg); }
.btn--borde-claro { border: 1px solid rgba(251,250,246,.30); color: var(--blanco); font-weight: 500; padding-right: 20px; }
.btn--bloque { display: flex; width: 100%; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; font-weight: 500; }
.enlace-flecha:hover { color: var(--terracota); }
.enlace-fino { font-size: 12.5px; color: var(--sec); text-decoration: underline; text-decoration-color: var(--arena); text-underline-offset: 4px; }
.enlace-fino:hover { color: var(--negro); text-decoration-color: var(--negro); }

.chip { display: inline-flex; align-items: center; font-size: 12px; padding: 7px 13px; line-height: 1.2; border-radius: 999px; border: 1px solid var(--linea); color: var(--sec); white-space: nowrap; }
.chip--claro { border-color: rgba(251,250,246,.22); color: rgba(251,250,246,.82); }
.chip--tag { font-size: 12.5px; padding: 7px 13px; background: var(--blanco); color: var(--negro); }
.etiqueta-foto { position: absolute; top: 12px; left: 12px; background: rgba(35,33,26,.50); border: 1px solid rgba(251,250,246,.20); color: var(--blanco); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
@supports (backdrop-filter: blur(10px)) { .etiqueta-foto { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.distintivo { background: var(--terracota); color: var(--blanco); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.agenda { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; background: var(--b10); border: 1px solid rgba(251,250,246,.18); color: var(--blanco); }
.agenda::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ok); animation: latido 3s ease-out infinite; }
.agenda--doble { padding: 3px; gap: 2px; background: rgba(251,250,246,.12); border-color: rgba(251,250,246,.18); }
.agenda--doble::before { display: none; }
.agenda__on { display: inline-flex; align-items: center; gap: 6px; background: var(--blanco); color: var(--negro); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; }
.agenda__on::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ok); animation: latido 3s ease-out infinite; }
.agenda__off { color: rgba(251,250,246,.78); font-size: 11.5px; font-weight: 500; padding: 5px 11px; }
@supports (backdrop-filter: blur(10px)) { .agenda--doble { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }

/* ─── 5. Barra y menú ────────────────────────────────────────────────────── */
.barra {
  z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; min-height: var(--barra-h);
  border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, box-shadow .35s;
}
.barra--clara { position: sticky; top: 0; background: var(--blanco); border-bottom-color: var(--linea); color: var(--negro); }
.barra--sobre-foto { position: fixed; top: 0; left: 0; right: 0; color: var(--blanco); background: rgba(35,33,26,0); }
.barra--condensada.barra--sobre-foto { background: rgba(35,33,26,.72); border-bottom-color: rgba(251,250,246,.12); }
.barra--condensada.barra--clara { background: rgba(251,250,246,.86); box-shadow: 0 1px 0 var(--linea); }
@supports (backdrop-filter: blur(14px)) {
  .barra--condensada { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  /* [TRAMPA] backdrop-filter convierte a la barra en bloque contenedor de sus hijos
     position:fixed. Con la barra condensada —es decir, en cuanto habías bajado 40 px—
     el panel del menú resolvía su inset:0 contra la barra y quedaba de 134 px de alto
     en vez de los 844 de la pantalla: el menú "no abría". Solo funcionaba arriba del
     todo, donde no hay desenfoque. Se apaga el desenfoque mientras el menú está
     abierto; da igual, el panel tapa la pantalla entera.
     Dos selectores a propósito: body.menu-abierto lo pone sitio.js, y :has() cubre
     el caso sin JavaScript. */
  body.menu-abierto .barra--condensada,
  .barra--condensada:has(.menu[open]) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.barra__logo { display: inline-flex; align-items: center; gap: 12px; color: inherit; position: relative; z-index: 72; }
.barra__volver { width: 40px; height: 40px; border-radius: 999px; background: rgba(251,250,246,.14); border: 1px solid rgba(251,250,246,.20); display: inline-flex; align-items: center; justify-content: center; }
.barra--clara .barra__volver { background: var(--crema-f); border-color: var(--linea); }

.menu { position: static; }
.menu__boton { position: relative; z-index: 72; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: flex-end; color: inherit; }
.menu__lineas { width: 28px; height: 19px; position: relative; display: block; }
.menu__lineas i { position: absolute; left: 0; right: 0; height: 2.6px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .25s, top .35s var(--ease); }
.menu__lineas i:nth-child(1) { top: 0; } .menu__lineas i:nth-child(2) { top: 8.2px; } .menu__lineas i:nth-child(3) { top: 16.4px; }
.menu[open] .menu__boton { color: var(--blanco); }
.menu[open] .menu__lineas i:nth-child(1) { top: 8.2px; transform: rotate(45deg); }
.menu[open] .menu__lineas i:nth-child(2) { opacity: 0; }
.menu[open] .menu__lineas i:nth-child(3) { top: 8.2px; transform: rotate(-45deg); }
.menu__panel {
  position: fixed; inset: 0; z-index: 60; background: var(--negro); color: var(--blanco);
  padding: calc(var(--barra-h) + 24px) 24px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  overflow-y: auto; animation: aparecer .35s var(--ease) both;
}
.menu__lista { display: flex; flex-direction: column; gap: 2px; }
.menu__lista a { display: block; padding: 12px 0; font-family: var(--serif); font-size: 34px; line-height: 1.1; letter-spacing: -.02em; border-bottom: 1px solid rgba(251,250,246,.10); }
.menu__lista a:hover, .menu__lista a[aria-current="page"] { color: var(--b70); }
.menu__lista a[aria-current="page"]::after { content: " ·"; color: var(--terracota); }
/* Acordeón de Servicios dentro del menú. El nivel hijo se distingue por tamaño,
   sangría y una guía vertical: NN/g pide que la jerarquía se vea, no se adivine. */
.menu__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(251,250,246,.10); }
.menu__fila a { border-bottom: 0; flex-grow: 1; }
.menu__abrir { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--b55); flex-shrink: 0; transition: color .3s, transform .35s var(--ease); }
.menu__abrir[aria-expanded="true"] { transform: rotate(180deg); color: var(--terracota); }
.menu__sub { display: flex; flex-direction: column; margin: 4px 0 6px; padding-left: 16px; border-left: 1px solid rgba(251,250,246,.16); }
.menu__sub a { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0; padding: 9px 0; border-bottom: 0; color: var(--b70); }
.menu__sub a:hover, .menu__sub a[aria-current="page"] { color: var(--blanco); }
.menu__lista .menu__padre > .menu__fila a[aria-current="page"]::after { content: " ·"; color: var(--terracota); }

.menu__acciones { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.menu__secundario { color: var(--b70); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(251,250,246,.3); text-underline-offset: 4px; }
.menu__contacto { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--b55); }
body.menu-abierto { overflow: hidden; }
.menu[open] ~ * { pointer-events: none; }

/* ─── 6. Píldora flotante ────────────────────────────────────────────────── */
.pildora {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 11px; padding: 7px 8px 7px 7px; border-radius: 999px;
  background: rgba(35,33,26,.92); color: var(--blanco); border: 1px solid var(--b16);
  box-shadow: 0 10px 30px rgba(35,33,26,.28); overflow: hidden; white-space: nowrap;
  max-width: calc(100vw - 32px); box-sizing: border-box;
  transition: transform .5s var(--ease), opacity .4s;
}
.pildora__foto, .pildora .btn__circulo { flex-shrink: 0; }
@supports (backdrop-filter: blur(16px)) { .pildora { background: rgba(35,33,26,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } }
.pildora--oculta { transform: translate(-50%, 120%); opacity: 0; pointer-events: none; }
.pildora__foto { width: 38px; height: 38px; border-radius: 999px; object-fit: cover; }
.pildora__texto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.pildora__texto b, .pildora__texto small { display: block; overflow: hidden; text-overflow: ellipsis; }
.pildora__texto b { font-size: 13.5px; font-weight: 600; }
.pildora__texto small { font-size: 11.5px; color: rgba(251,250,246,.62); }
.pildora .btn__circulo { background: var(--terracota); color: var(--blanco); }
.pildora::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; background: linear-gradient(100deg, rgba(251,250,246,0) 0%, rgba(251,250,246,.16) 50%, rgba(251,250,246,0) 100%); animation: barrido 6s ease-in-out infinite; pointer-events: none; }
.pildora:hover { transform: translate(-50%, -3px); }

/* ─── 7. Heros ───────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--negro); color: var(--blanco); display: flex; align-items: flex-end; }
.hero--medio { min-height: 560px; }
.hero--proyecto { min-height: 470px; }
/* En escritorio el hero medía 470 px de alto a todo lo ancho: una caja de 3:1 en la que
   una portada 3:2 —que es como vienen todas las reales— perdía la mitad de su altura y
   se veía ampliadísima. Subiéndolo a dos tercios de la pantalla, la caja se acerca a la
   proporción de la foto y el recorte baja del 51 % al 33 %. [David, 15 sept 2026] */
@media (min-width: 1000px) {
  .hero--proyecto { min-height: max(520px, 66vh); }
}
.hero__img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.hero__velo { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(35,33,26,.62) 0%, rgba(35,33,26,.30) 26%, rgba(35,33,26,.80) 72%, rgba(35,33,26,.96) 100%); }
.hero--proyecto .hero__velo { background: linear-gradient(to bottom, rgba(35,33,26,.70) 0%, rgba(35,33,26,.12) 26%, rgba(35,33,26,.20) 46%, rgba(35,33,26,.92) 100%); }
/* El contenido ya no ocupa todo el ancho: se alinea al contenedor como el resto de
   la página (David, 15 sept 2026). En escritorio se parte en dos columnas y el video
   ocupa la derecha; en móvil es una sola columna y el video baja bajo el hero. */
.hero__contenido { position: relative; width: 100%; padding: 0 var(--gutter) 104px; }
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero__texto > * { max-width: 100%; }
.hero--medio .hero__contenido, .hero--proyecto .hero__contenido { padding-bottom: 30px; }
.hero__sub { font-size: 15.5px; color: rgba(251,250,246,.78); max-width: 34ch; }
.hero__botones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.hero__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--b70); }
.hero__meta i { width: 3px; height: 3px; border-radius: 999px; background: rgba(251,250,246,.45); }

.hero-claro { padding: 56px var(--gutter) 44px; display: flex; flex-direction: column; gap: 16px; }
.hero-claro--crema { background: var(--crema-f); }
.hero-claro p { color: var(--sec); max-width: 52ch; }

/* ─── 8. Secciones y bloques ─────────────────────────────────────────────── */
.seccion { padding-block: 50px; }
.seccion--sin-arriba { padding-top: 0; }
.seccion--oscura { background: var(--negro); color: var(--blanco); }
.seccion--crema { background: var(--crema-f); }
.seccion--redondeada { border-radius: var(--r-xl) var(--r-xl) 0 0; }
/* Se trepa sobre el hero (o sobre el video) para que la esquina redondeada se note. */
.seccion--tras-hero { background: var(--blanco); position: relative; margin-top: -28px; }
.seccion--tras-video { margin-top: -24px; }
.seccion__cabecera { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.seccion__cabecera p { color: var(--sec); font-size: 14.5px; }
.seccion--oscura .seccion__cabecera p { color: var(--b70); }
.seccion--oscura .texto-sec { color: var(--b70); }
.seccion--oscura .eyebrow { color: var(--salvia); }

.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 22px; }
.tarjeta--crema { background: var(--crema-f); border-color: transparent; }
.tarjeta--oscura { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.tarjeta--oscura .texto-sec { color: var(--b70); }
.tarjeta--num { position: relative; overflow: hidden; }
.tarjeta--num .num-fantasma { position: absolute; top: 6px; right: 16px; font-family: var(--serif); font-size: 108px; line-height: 1; color: rgba(35,33,26,.07); pointer-events: none; transition: color .45s; }
.tarjeta--oscura .num-fantasma { color: rgba(251,250,246,.09); }
.tarjeta--num > .tarjeta__cuerpo { position: relative; display: flex; flex-direction: column; gap: 11px; }
.tarjeta__img { width: 100%; height: 150px; object-fit: cover; border-radius: 16px; }

/* Servicio y paso: se oscurecen al tocar (touch) o al pasar el cursor. */
.serv { transition: background .45s var(--ease), border-color .45s, color .45s, transform .45s var(--ease); }
.serv:hover, .serv.activa { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.serv:hover .texto-sec, .serv.activa .texto-sec, .serv:hover .chip, .serv.activa .chip { color: var(--b70); border-color: rgba(251,250,246,.22); }
.serv:hover .num-fantasma, .serv.activa .num-fantasma { color: rgba(251,250,246,.10); }
.serv:hover .eyebrow, .serv.activa .eyebrow { color: var(--salvia-t); }
.serv:hover .btn__circulo--borde, .serv.activa .btn__circulo--borde { border-color: rgba(251,250,246,.4); color: var(--blanco); }
.serv:hover .titulo-dos-tonos span, .serv.activa .titulo-dos-tonos span { color: rgba(251,250,246,.55); }
.btn__circulo--borde { border: 1px solid var(--arena); color: var(--negro); transition: border-color .45s, color .45s; }
.titulo-dos-tonos { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.08; letter-spacing: -.015em; }
.titulo-dos-tonos span { color: var(--madera); transition: color .45s; }
.tarjeta--oscura .titulo-dos-tonos span { color: rgba(251,250,246,.50); }

/* Bloque David (Inicio) */
.david { display: flex; gap: 16px; align-items: center; }
.david__foto { width: 92px; height: 92px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.david__nombre { display: flex; flex-direction: column; gap: 3px; }
.handle { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--sec); font-weight: 500; }
.handle svg { color: var(--salvia); }
.cifras { display: flex; flex-wrap: wrap; gap: 10px; }
.cifra { flex: 1 1 96px; }   /* tres cifras entran en una fila; si no caben, envuelven */
.cifra { flex: 1; background: var(--crema-f); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.cifra b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cifra small { font-size: 11.5px; color: var(--sec); }
.cifra--vidrio { background: rgba(251,250,246,.14); border: 1px solid rgba(251,250,246,.20); color: var(--blanco); padding: 12px 14px; border-radius: 14px; }
.cifra--vidrio b { font-size: 28px; } .cifra--vidrio small { color: rgba(251,250,246,.75); font-size: 11px; }
@supports (backdrop-filter: blur(12px)) { .cifra--vidrio { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }

/* Video bajo el hero */
.video-marco { background: var(--negro); padding: 0 16px 46px; }
.video--hero { display: none; }   /* solo aparece en escritorio (§15) */
.video { position: relative; border-radius: 26px; overflow: hidden; background: #2E2B22; margin-top: -26px; aspect-ratio: 358 / 420; }
.video__poster, .video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.video__velo { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(35,33,26,.10) 40%, rgba(35,33,26,.85) 100%); pointer-events: none; }
.video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 999px; background: rgba(251,250,246,.16); border: 1px solid rgba(251,250,246,.34); display: flex; align-items: center; justify-content: center; color: var(--blanco); transition: transform .4s var(--ease), background .3s; }
.video__play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(251,250,246,.26); }
@supports (backdrop-filter: blur(14px)) { .video__play { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
.video__pie { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: var(--blanco); pointer-events: none; }
.video__pie .eyebrow { color: rgba(251,250,246,.62); font-size: 10.5px; letter-spacing: .18em; }
.video__titulo { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.video--reproduciendo .video__play, .video--reproduciendo .video__velo, .video--reproduciendo .video__pie, .video--reproduciendo .video__poster { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* Imagen con texto encima (El hogar completo) */
.postal { position: relative; border-radius: 26px; overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; background: var(--negro); color: var(--blanco); }
.postal img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
/* El retrato: cuadrado y sin el 12% de zoom del postal normal. Con el recorte 4:5
   dentro de una caja casi cuadrada, el «cover» le cortaba la cara a David. */
.postal--retrato { aspect-ratio: 1 / 1; min-height: 0; }
.postal--retrato img { inset: 0; height: 100%; }
.postal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(35,33,26,0) 34%, rgba(35,33,26,.90) 100%); }
.postal__texto { position: relative; z-index: 1; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.postal__texto p { font-size: 14.5px; color: rgba(251,250,246,.80); }

/* Cita destacada */
.cita { font-family: var(--serif); font-size: 28px; line-height: 1.18; letter-spacing: -.01em; }
.cita em { font-style: italic; }
.cita--borde { background: var(--crema-f); border-left: 3px solid var(--salvia); padding: 16px 18px; border-radius: 0 14px 14px 0; }
.seccion--oscura .cita--borde { background: var(--b10); border-left-color: var(--salvia); }

/* Lista de chequeo (Con claridad) */
.claridad { display: flex; flex-direction: column; gap: 13px; }
.claridad li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.claridad svg { flex-shrink: 0; margin-top: 4px; color: var(--salvia); }

/* Bloque de aviso lateral (Desde 3 ambientes) */
.aviso { background: var(--crema-f); border-left: 3px solid var(--salvia); border-radius: 0 18px 18px 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.aviso p { font-size: 13.5px; color: var(--sec); }

/* Bifurcación (¿Solo interiores?) */
.bifurca { display: flex; align-items: center; gap: 14px; background: var(--negro); color: var(--blanco); border-radius: 22px; padding: 16px 18px; transition: transform .4s var(--ease); }
.bifurca:hover { transform: translateY(-2px); }
.bifurca img { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.bifurca__texto { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.bifurca__texto b { font-size: 14px; font-weight: 500; line-height: 1.35; }
.bifurca .btn__circulo { background: var(--blanco); color: var(--negro); width: 36px; height: 36px; }

/* Rutas (¿Qué podemos conseguir?) */
.rutas { display: flex; flex-direction: column; gap: 8px; }
.ruta { display: flex; align-items: center; gap: 14px; border-radius: 18px; padding: 16px 18px; min-height: 56px; border: 1px solid var(--linea); background: var(--blanco); font-size: 15px; font-weight: 500; transition: transform .35s var(--ease), background .35s, color .35s; }
.ruta:hover { transform: translateX(4px); }
.ruta--oscura { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.ruta__num { font-size: 12px; font-weight: 600; color: var(--terracota); width: 20px; flex-shrink: 0; }
.ruta span:nth-child(2) { flex-grow: 1; }

/* Franja de logos */
.cinta-marco { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.cinta { display: flex; gap: 34px; width: max-content; padding: 0 18px; animation: cinta 26s linear infinite; }
.cinta:hover { animation-play-state: paused; }

/* Los logos van SUELTOS sobre el fondo de la sección: sin recuadro blanco, sin borde.
   Con la caja se veían pequeños y como estampillas pegadas (David, 15 sept 2026).

   [RESTRICCIÓN] mix-blend-mode: multiply es lo que hace desaparecer el fondo blanco de
   los logos que llegan sin transparencia (el de Grupo Hydra es uno de ellos: RGB sin
   alfa). Funciona SOLO sobre fondos claros; si algún día van sobre una sección oscura,
   hay que quitar el multiply y pedir los logos en PNG con alfa. El grayscale se queda:
   es lo que impide que cada aliado nuevo rompa la paleta.

   [TRAMPA] El logo lleva medidas propias y la imagen las rellena con object-fit. Sin
   ellas la imagen se medía sola: 0x0 hasta cargar, y con loading="lazy" una caja de
   0x0 nunca entra en pantalla, así que no cargaba nunca. Círculo cerrado, franja vacía.
   Con alto fijo el espacio queda reservado y además no salta nada al cargar. */
.logo { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 54px; }
.logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05) opacity(.55); mix-blend-mode: multiply; transition: filter .45s var(--ease); }
.logo:hover img { filter: grayscale(1) contrast(1.05) opacity(.9); }
.logo--grande { width: 100%; height: 88px; }
/* Colaboraciones de David: franja propia, logos grandes (David, 15 sept 2026). */
.cinta--grande { gap: 48px; }
.logo--colab { width: 190px; height: 76px; }
.rejilla-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; align-items: center; }

/* Insumo que falta, rotulado (partials/placeholder.php).
   Tiene que verse como hueco y no como contenido: es lo que impide que alguien
   lo rellene con un render y se olvide. Borde punteado, sin foto, con su ID. */
.placeholder {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px;
  padding: 20px; border: 1.5px dashed var(--arena); border-radius: 22px;
  background: var(--crema-f); color: var(--sec);
}
.placeholder__id { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--terracota); border: 1px solid rgba(222,83,31,.35); border-radius: 999px; padding: 4px 10px; }
.placeholder__que { font-size: 13.5px; max-width: 46ch; }
.placeholder__nota { font-size: 11.5px; font-style: italic; color: var(--madera); }
.seccion--crema .placeholder { background: var(--blanco); }

/* Foto real con su pie (partials/foto.php). El pie no es decorativo: lo exigen
   las reglas 1 y 7 de CLAUDE.md. */
.foto { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foto figcaption { font-size: 12px; color: var(--sec); }
.seccion--oscura .foto figcaption { color: var(--b55); }

/* Clip corto que se comporta como GIF (partials/clip.php) */
.clip__marco { position: relative; border-radius: 18px; overflow: hidden; line-height: 0; }
.clip__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 999px; background: rgba(35,33,26,.72); border: 1px solid rgba(251,250,246,.3); color: var(--blanco); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease), background .3s; }
.clip__play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(35,33,26,.86); }
@supports (backdrop-filter: blur(10px)) { .clip__play { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }

/* Principios del criterio de diseño (Inicio los insinúa, Método los explica) */
.principios { display: flex; flex-direction: column; gap: 18px; }
.principio { display: flex; flex-direction: column; gap: 5px; padding-left: 15px; border-left: 2px solid var(--salvia-t); }
.principio h3 { font-size: 17px; }
.principio p { font-size: 14px; color: var(--sec); }
.principios--numerados .principio { padding-left: 0; border-left: 0; }
.principio__num { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--terracota); }

/* Las tres pruebas del bloque Método en Inicio */
.prueba { display: flex; flex-direction: column; gap: 10px; }
.prueba h3 { font-size: 17px; }

/* En móvil las rejillas se apilan con aire; a partir de 1000 px son parrilla (§15). */
.rejilla-3, .rejilla-4 { display: flex; flex-direction: column; gap: 18px; }

/* Cierre oscuro (CTA) */
.cta { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--negro); color: var(--blanco); padding: 42px 22px; display: flex; flex-direction: column; gap: 15px; }
.cta::before { content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border-radius: 999px; background: radial-gradient(circle, rgba(222,83,31,.30) 0%, rgba(222,83,31,0) 70%); }
.cta > * { position: relative; }
.cta h2 { font-size: clamp(34px, 9.5vw, 38px); }
.cta p { color: rgba(251,250,246,.75); }
.cta .agenda { align-self: flex-start; }
.cta__nota { font-size: 12.5px; color: var(--b55); }
.cta__puente { font-size: 13px; color: var(--b55); }
.cta__puente a { color: var(--b70); text-decoration: underline; text-decoration-color: rgba(251,250,246,.3); text-underline-offset: 4px; }

/* ─── 9. Carruseles y tarjetas ───────────────────────────────────────────── */
.carrusel { display: flex; gap: 12px; padding: 0 var(--gutter); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: 0 0 274px; scroll-snap-align: start; }
.carrusel--ancho > * { flex-basis: 286px; }
.carrusel--fichas > * { flex-basis: 168px; }
.carrusel::after { content: ""; flex: 0 0 calc(var(--gutter) - 12px); }
/* Alineado al contenedor en cualquier ancho (en móvil no cambia nada: la pantalla
   es más angosta que 1180). Lo llevan los carruseles que NO deben escaparse. */
.carrusel--contenido { max-width: 1180px; margin-inline: auto; }
.carrusel-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.puntos { display: flex; gap: 6px; }
.puntos i { width: 10px; height: 3px; border-radius: 999px; background: var(--arena); transition: width .35s var(--ease), background .35s; }
.puntos i.activo { width: 24px; background: var(--terracota); }
.seccion--oscura .puntos i { background: rgba(251,250,246,.30); }
.seccion--oscura .puntos i.activo { background: var(--terracota); }
.flechas { display: flex; gap: 7px; }
.flechas button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(251,250,246,.24); display: inline-flex; align-items: center; justify-content: center; color: rgba(251,250,246,.6); transition: background .3s, color .3s; }
.flechas button:hover, .flechas button:last-child { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.flechas button:disabled { opacity: .35; pointer-events: none; }
.flechas--claras button, .flechas--claras button:last-child { border-color: var(--linea); background: none; color: var(--sec); }
.flechas--claras button:hover { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.flechas { display: none; }        /* en táctil se desliza con el dedo; aparecen en escritorio (§15) */

.card-proy { display: flex; flex-direction: column; gap: 12px; color: inherit; }
.card-proy__marco { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 274 / 330; background: var(--crema-f); }
.card-proy__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card-proy:hover .card-proy__marco img { transform: scale(1.04); }
.card-proy__pie { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-proy__pie h3 { font-size: 21px; }
.card-proy__pie small { font-size: 12px; color: var(--sec); white-space: nowrap; }
.seccion--oscura .card-proy__pie small { color: var(--b55); }
.card-proy--sin-foto .card-proy__marco { display: flex; align-items: flex-end; padding: 18px; background: var(--crema); }
.card-proy--sin-foto .card-proy__marco span { font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--madera); }

.card-avance { background: var(--crema-f); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-avance img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.card-avance .eyebrow { font-size: 11px; letter-spacing: .12em; font-weight: 600; }
.card-avance h3 { font-size: 20px; }
.card-avance small { font-size: 12px; color: var(--sec); }
.card-avance p { font-size: 13.5px; color: var(--sec); }

.testimonio { background: var(--blanco); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.testimonio svg { color: var(--arena); }
.testimonio blockquote { margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.18; letter-spacing: -.01em; }
.testimonio__autor { display: flex; align-items: center; gap: 11px; padding-top: 12px; border-top: 1px solid var(--linea); }
.testimonio__autor img, .testimonio__inicial { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.testimonio__inicial { background: var(--crema); color: var(--madera); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 20px; }
.testimonio__autor b { font-size: 13.5px; font-weight: 600; display: block; }
.testimonio__autor small { font-size: 12px; color: var(--sec); display: block; }
.carrusel > .testimonio { flex-basis: 300px; }

.ficha { display: flex; flex-direction: column; gap: 9px; }
.ficha__marco { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 168 / 218; background: var(--crema-f); }
.ficha__marco img { width: 100%; height: 100%; object-fit: cover; }
.ficha__marco .etiqueta-foto { top: 10px; left: 10px; font-size: 9.5px; padding: 5px 10px; }
.ficha h3 { font-size: 18px; }
.ficha small { font-size: 11.5px; color: var(--sec); display: block; }
.ficha--sin-foto .ficha__marco { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 40px; color: var(--madera); background: var(--crema); }

.entregable { background: var(--b10); border: 1px solid rgba(251,250,246,.12); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--blanco); }
.entregable img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.entregable h3 { font-size: 19px; }
.entregable p { font-size: 13.5px; color: rgba(251,250,246,.72); }
.entregable__marco { position: relative; }
.entregable__insignia { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(35,33,26,.55); border: 1px solid rgba(251,250,246,.30); color: var(--blanco); font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 8px 14px; border-radius: 999px; }
.tabla-falsa { width: 100%; height: 150px; border-radius: 14px; background: var(--blanco); padding: 12px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; color: var(--sec); }
.tabla-falsa i { display: flex; gap: 5px; }
.tabla-falsa i span { height: 13px; border-radius: 3px; background: var(--crema-f); flex: 1; }
.tabla-falsa i span:first-child { flex: 2; }
.tabla-falsa i:first-child span { height: 15px; background: var(--crema); }
.tabla-falsa i span.acento { background: var(--terracota); opacity: .22; }
.tabla-falsa small { font-size: 9.5px; margin-top: 2px; }

/* Ficha de proyecto: datos, plantas y fotos */
/* [TRAMPA] `padding-block`, no `padding: 18px 0`. La banda lleva además la clase
   .contenedor, y el atajo pisaba su margen lateral: los datos salían pegados al borde
   de la pantalla en todas las fichas. Venía así desde el principio. */
.datos-proyecto { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; padding-block: 18px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.datos-proyecto div { display: flex; flex-direction: column; gap: 4px; }
.datos-proyecto b { font-weight: 500; font-size: 15px; }
/* [TRAMPA] Servicios NO puede ocupar la fila entera en escritorio. `auto-fit` colapsa
   las columnas vacías, pero una celda que abarca `1 / -1` las mantiene todas vivas: con
   sitio para ocho columnas y solo cuatro datos, los cuatro se apretaban a la izquierda y
   la banda se veía escorada. En celular la rejilla solo tiene dos columnas, así que ahí
   ocupar la fila entera no sobra nada y evita que el texto se parta en una columna. */
@media (max-width: 999px) { .datos-proyecto__ancho { grid-column: 1 / -1; } }
.carrusel--planos { --alto-plano: 66vw; align-items: flex-start; }
.carrusel--planos > * { flex: 0 0 auto; }
.plano { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
/* Igual que la galería: manda la ALTURA y el ancho lo pone cada plano. El marco fijo
   —primero 4/5, luego A3— dejaba huecos enormes en cuanto la lámina no tenía justo esa
   proporción, y las que hay cargadas van de 0.45 a 0.87. Así la tarjeta abraza el dibujo.
   El alto es una medida CONCRETA a propósito: ver la trampa en .carrusel--fotos img. */
.plano img { height: var(--alto-plano); width: auto; max-width: none; object-fit: contain;
  border-radius: 8px; background: var(--blanco); }
.plano figcaption { font-size: 12px; color: var(--sec); }
/* La galería NO recorta [HECHO — David, 15 sept 2026]. Antes el marco era fijo —4/3 en
   celular, 3/2 en escritorio— con object-fit: cover: a un render 3:2 le comía el 11 % de
   los costados y a uno cuadrado el 25 % de arriba y abajo. Ahora manda la ALTURA y el
   ancho lo pone cada imagen, como una tira de película: entra entera, sin recorte y sin
   bandas. 57vw de alto deja un 3:2 en 86vw de ancho, exactamente lo que medía antes.
   Necesita las medidas reales en el HTML (img_attrs con conMedidas). */
.carrusel--fotos { --alto-foto: 57vw; align-items: center; }
.carrusel--fotos > * { flex: 0 0 auto; }
/* [TRAMPA] El alto tiene que ser una medida CONCRETA, no `auto`. Con `width:auto;
   height:auto` y solo cotas máximas, una imagen que todavía no ha cargado mide 0×0: el
   CSS del autor pisa las medidas del HTML y el navegador se queda sin proporción. Y como
   son `loading="lazy"`, al medir cero nunca entran en pantalla, así que nunca cargan y se
   quedan en cero para siempre. Es el mismo punto muerto que tuvimos con los logos de
   aliados. Con el alto fijo, el ancho sale de la proporción del HTML antes de cargar. */
.carrusel--fotos img { height: var(--alto-foto); width: auto; max-width: none;
  object-fit: contain; border-radius: 16px; background: var(--crema-f); }

/* ─── 10. Etapas y FAQs (details/summary: funcionan sin JavaScript) ──────── */
.etapas { display: flex; flex-direction: column; gap: 9px; }
.etapa { background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; overflow: hidden; transition: background .35s, border-color .35s; }
.etapa[open] { background: var(--crema-f); border-color: transparent; }
.etapa summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; min-height: 56px; }
.etapa__num { font-size: 12px; font-weight: 600; color: var(--terracota); width: 20px; flex-shrink: 0; }
.etapa__titulo { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; }
.etapa__titulo small { font-size: 12px; color: var(--sec); }
.etapa__flecha { flex-shrink: 0; color: var(--negro); transition: transform .35s var(--ease), color .35s; }
.etapa[open] .etapa__flecha { transform: rotate(180deg); color: var(--terracota); }
.etapa__cuerpo { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.etapa__cuerpo p { font-size: 14px; color: var(--sec); }
.etapa__cuerpo img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.entrega { display: flex; flex-direction: column; gap: 6px; background: var(--blanco); border-radius: 14px; padding: 14px 16px; }
.entrega .eyebrow { font-size: 10.5px; letter-spacing: .14em; font-weight: 600; }
.entrega span { font-size: 13.5px; }
.paralelo { display: flex; gap: 8px; }
.paralelo span { flex: 1; background: var(--blanco); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.paralelo b { font-size: 12.5px; font-weight: 500; } .paralelo small { font-size: 11.5px; color: var(--sec); }

/* Lista compacta de etapas (teaser de Inicio) */
.etapas-lista { display: flex; flex-direction: column; gap: 3px; }
.etapas-lista li { display: flex; align-items: center; gap: 12px; background: var(--blanco); border-radius: 13px; padding: 13px 15px; font-size: 14px; font-weight: 500; }
.etapas-lista li span:nth-child(2) { flex-grow: 1; }
.etapas-lista small { font-size: 12px; color: var(--sec); font-weight: 400; }

.faqs { display: flex; flex-direction: column; gap: 8px; }
.faq { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; transition: background .35s, border-color .35s; }
.faq[open] { background: var(--crema-f); border-color: transparent; }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 56px; }
.faq summary h3 { font-size: 18px; }
.faq summary svg { flex-shrink: 0; margin-top: 4px; color: var(--negro); transition: transform .35s var(--ease), color .35s; }
.faq[open] summary svg { transform: rotate(180deg); color: var(--terracota); }
.faq__r { padding: 0 18px 18px; font-size: 14px; color: var(--sec); max-width: 88ch; }
.faq__ir { margin-top: 10px; color: var(--negro); }

/* ─── 11. Mapa ───────────────────────────────────────────────────────────── */
.mapa { position: relative; border-radius: 22px; padding: 14px; margin-bottom: 8px; }
.mapa--oscuro { background: var(--b10); border: 1px solid rgba(251,250,246,.12); }
.mapa--claro { background: var(--blanco); border: 1px solid var(--linea); }
.mapa svg { width: 100%; height: auto; display: block; }
.mapa__pin { fill: var(--terracota); stroke: var(--blanco); stroke-width: 6; opacity: .92; }
.mapa--oscuro .mapa__pin { stroke: var(--negro); }
.mapa__pin--pais { fill: var(--madera); }
.mapa__halo { fill: var(--terracota); opacity: .18; }
.mapa__equipo { fill: var(--salvia); stroke: var(--blanco); stroke-width: 7; }
.mapa__texto { font-family: var(--sans); font-size: 46px; font-weight: 500; fill: var(--negro); paint-order: stroke; stroke: var(--blanco); stroke-width: 10; stroke-linejoin: round; }
.mapa--oscuro .mapa__texto { fill: var(--blanco); stroke: var(--negro); }
.mapa__texto--pin { font-size: 40px; font-weight: 600; }
.mapa__leyenda { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* Las ciudades del mapa, en píldoras, con el número de proyectos de cada una.
   El dato ya vive en el panel: la lista de ubicaciones admite «Lima (28)».

   En MÓVIL van en una sola fila que se desliza y se derrama por el borde, como los
   carruseles. Envueltas serían ~8 filas de texto justo encima de un mapa que dice
   lo mismo; y en móvil no hay hueco que llenar, porque las columnas se apilan.
   En ESCRITORIO envuelven: ahí sí hay 400 px muertos al lado del mapa.

   [RESTRICCIÓN] Los colores son los de fondo oscuro (--b16 / --b70). Solo se usa en
   la sección «La escala», que es oscura. Sobre fondo claro habría que cambiarlos. */
.ciudades { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.ciudades::-webkit-scrollbar { display: none; }
.ciudad { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--b16); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--b70); white-space: nowrap; }
.ciudad b { font-weight: 600; font-size: 11.5px; color: var(--terracota); font-variant-numeric: tabular-nums; }

/* ─── 12. Formulario (Evaluar mi proyecto) ───────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 22px; }
.form__progreso { height: 3px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.form__progreso i { display: block; height: 100%; width: 0; background: var(--terracota); transition: width .5s var(--ease); }
.form__paso { display: flex; flex-direction: column; gap: 16px; }
.form__paso[hidden] { display: none; }
.form__paso { animation: pasoEntra .28s var(--ease) both; }
@keyframes pasoEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.form__paso h2 { font-size: clamp(30px, 8vw, 34px); }
.form__ayuda { font-size: 13.5px; color: var(--sec); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 500; }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo input[type=number], .campo select, .campo textarea {
  font: inherit; color: inherit; background: var(--blanco); border: 1px solid var(--arena); border-radius: 12px; padding: 12px 14px; min-height: 50px; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--terracota); outline-offset: 2px; border-color: transparent; }
.campo textarea { resize: vertical; min-height: 96px; }
.telefono { display: flex; gap: 8px; }
.telefono select { flex: 0 0 38%; width: 38%; padding-inline: 10px; }
.telefono input { flex: 1 1 auto; min-width: 0; }
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 16px; cursor: pointer; font-size: 15px; font-weight: 500; background: var(--blanco); transition: background .25s, border-color .25s; }
.opcion:hover { border-color: var(--arena); }
.opcion input { accent-color: var(--terracota); width: 18px; height: 18px; flex-shrink: 0; }
.opcion:has(input:checked) { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.form__acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.form-compacto [data-fuera-form] { display: none; }
/* Suelo para la seccion del formulario: al resumirse la cabecera, lo de abajo subia
   y asomaba por el hueco de las pantallas cortas —«quien decide» mide 640 px y
   dejaba 170 de aire en un movil de 812—. Con esto la seccion llega al borde de la
   pantalla y el pie queda siempre por debajo. Los 132 px son la barra pegada (79)
   mas la cabecera resumida (53) del movil; en escritorio la cabecera es mas alta,
   asi que el suelo sobra y el pie cae aun mas abajo. En `lvh`, no `dvh`: mide la
   ventana con la barra del navegador oculta, que es cuando mas se ve. */
.form-compacto [data-seccion-form] { min-height: calc(100vh - 132px); min-height: calc(100lvh - 132px); }

/* ─── El formulario en movil: la cabecera se resume al engancharse ──────────
   En cuanto el cliente toca un campo (que es cuando sube el teclado) o avanza
   de pantalla, el hero de 266 px se resume a una linea. Sin esto, al abrir el
   teclado el navegador desplaza la pagina para dejar el campo a la vista, la
   cabecera se va arriba y el cliente tiene que volver a subir despues de
   escribir. Medido contra la referencia de David (bigseo.com/reserva-consultoria,
   un Typeform): alli el teclado calza con el formulario porque no hay cabecera
   que empujar. El H1 no desaparece —sigue en el HTML y a la vista, solo se
   resume—, asi que el SEO no se toca (§9 de CLAUDE.md). */
@media (max-width: 699px) {
  .hero-claro[data-hero-form] { transition: padding .42s var(--ease), gap .42s var(--ease); }
  .hero-claro[data-hero-form] h1 { transition: font-size .42s var(--ease); }
  .hero-claro[data-hero-form] .regla,
  .hero-claro[data-hero-form] .eyebrow,
  .hero-claro[data-hero-form] p { max-height: 120px; overflow: hidden; transition: max-height .42s var(--ease), opacity .24s; }
  .form-compacto .hero-claro[data-hero-form] { padding-block: 18px 14px; gap: 0; }
  .form-compacto .hero-claro[data-hero-form] h1 { font-size: 21px; }
  .form-compacto .hero-claro[data-hero-form] .regla,
  .form-compacto .hero-claro[data-hero-form] .eyebrow,
  .form-compacto .hero-claro[data-hero-form] p { max-height: 0; opacity: 0; }
  /* El primario ocupa el ancho libre. Medido: 142 px de 331 dejaban el boton
     pegado al borde derecho y un hueco a la izquierda. En escritorio no: alli
     un boton estirado se lee como franja y rompe el idioma del resto. */
  .form__acciones [data-siguiente], .form__acciones [data-enviar] { flex: 1; }

}
.form__atras { padding: 0 22px 0 8px; color: var(--sec); }
.form__atras:hover { color: var(--negro); }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--sec); }
.consentimiento > span { flex: 1; line-height: 1.5; }
.consentimiento input { margin-top: 3px; accent-color: var(--terracota); }
.consentimiento a { text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form__error { background: #FBEDE7; border: 1px solid var(--terracota-t); color: #7A2E12; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.despues { display: flex; flex-direction: column; gap: 10px; counter-reset: paso; }
.despues li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--sec); }
.despues li::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); font-size: 12px; font-weight: 600; color: var(--terracota); margin-top: 3px; width: 20px; flex-shrink: 0; }

/* ─── 13. Footer ─────────────────────────────────────────────────────────── */
.pie { background: var(--negro); color: var(--blanco); padding: 44px 0 110px; border-radius: var(--r-xl) var(--r-xl) 0 0; display: flex; flex-direction: column; gap: 32px; }
.pie__rejilla { display: flex; flex-direction: column; gap: 30px; }
.pie__marca { align-self: flex-start; color: var(--blanco); }
.pie__col ul { display: flex; flex-direction: column; gap: 2px; }
.pie__titulo { margin: 0 0 10px; font-family: var(--sans); font-weight: 400; font-size: 13.5px; letter-spacing: .04em; color: var(--b55); }
.pie__col a { display: inline-block; padding: 7px 0; font-size: 14.5px; color: rgba(251,250,246,.82); transition: color .3s; }
.pie__col a:hover { color: var(--terracota); }
.pie__hijo a { padding-left: 14px; font-size: 13.5px; color: rgba(251,250,246,.62); position: relative; }
.pie__hijo a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 1px; background: rgba(251,250,246,.28); }
.pie__base { padding-top: 22px; border-top: 1px solid rgba(251,250,246,.14); display: flex; flex-direction: column; gap: 18px; }
.pie__datos { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: rgba(251,250,246,.45); }
.pie__datos a { color: var(--b55); }
.pie__datos a:hover { color: var(--blanco); }
.pie__redes { display: flex; gap: 10px; }
.pie__redes a { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--b16); display: inline-flex; align-items: center; justify-content: center; color: var(--b70); transition: background .3s, color .3s, border-color .3s; }
.pie__redes a:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

.sustento { border-top: 1px solid var(--linea); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--sec); }
.sustento b { font-weight: 500; color: var(--negro); }

/* Páginas de texto (legales). El ancho de lectura se limita, pero el bloque arranca
   en el margen izquierdo como el resto del sitio: centrado quedaba desalineado con
   el título de su propia página (David, 15 sept 2026). */
.prosa { max-width: 68ch; font-size: 15.5px; color: var(--negro); }
.prosa h2 { font-size: 30px; margin: 36px 0 12px; }
.prosa h3 { margin: 28px 0 8px; font-size: 18px; }
.prosa p { margin: 0 0 14px; color: var(--sec); }
.prosa ul { list-style: disc; padding-left: 20px; margin: 0 0 14px; color: var(--sec); }

/* ─── 14. Animaciones ────────────────────────────────────────────────────── */
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(76,169,106,.55); } 50% { box-shadow: 0 0 0 5px rgba(76,169,106,0); } }
@keyframes barrido { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(220%); } }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes deriva { from { transform: translateY(-4%); } to { transform: translateY(4%); } }

/* Reveal y parallax al scrollear, sin JavaScript donde el navegador lo soporta.
   Donde no (Safari viejo, Firefox), sitio.js aplica el equivalente con IntersectionObserver
   sobre .js-revela; y si tampoco hay JS, el contenido simplemente se ve, quieto y completo. */
@supports (animation-timeline: view()) {
  .surge { animation: surgir linear both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
  .hero__img.parallax, .postal img.parallax { animation: deriva linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
.js-revela { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-revela.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Solo lo intrusivo (Manual + gotcha A.2): bucles y parallax. Hovers, reveals y contadores se quedan. */
  .pildora::after, .cinta, .agenda::before, .agenda__on::before { animation: none; }
  .hero__img.parallax, .postal img.parallax { animation: none; }
}

/* ─── 15. Escritorio ─────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --gutter: 40px; }
  h1 { font-size: clamp(50px, 6.2vw, 72px); }
  h2 { font-size: clamp(36px, 4.2vw, 50px); }
  /* La alineación del hero la resuelve el padding de §15; aquí solo el aire de abajo. */
  .hero__contenido { padding-bottom: 120px; }
  .hero__texto { max-width: 820px; }
  .hero__sub { font-size: 17px; max-width: 46ch; }
  .hero-claro { padding: 96px var(--gutter) 64px; }
  .hero-claro p { font-size: 17px; }
  .seccion { padding-block: 72px; }
  .video-marco { padding: 0 var(--gutter) 64px; }
  .video { aspect-ratio: 16 / 9; max-width: 1100px; margin-inline: auto; margin-top: -40px; }
  .video__titulo { font-size: 34px; }
  .cifras { max-width: 420px; }
  .rejilla-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paralelo { max-width: 520px; }
  .postal { min-height: 520px; }
  .postal__texto { padding: 36px; max-width: 640px; }
  .cta { padding: 64px 56px; }
  .cta h2 { font-size: clamp(40px, 4.4vw, 54px); }
  .cta .btn { align-self: flex-start; }
  .pie { padding-bottom: 120px; }
  .pie__rejilla { flex-direction: row; gap: 80px; }
  .pie__marca { margin-right: auto; }
  .pie__base { flex-direction: row; align-items: center; justify-content: space-between; }
  .form { max-width: 620px; }
  /* [TRAMPA] Antes decía `.menu__lista a`, y el submenú va DENTRO de .menu__lista, así
     que los 46 px le caían también: los cuatro servicios se veían más grandes que las
     secciones que cuelgan de ellos. Misma especificidad que `.menu__sub a` y más abajo
     en el archivo, así que ganaba esta. Ahora solo alcanza al primer nivel. */
  .menu__lista > li > a, .menu__lista > li > .menu__fila > a { font-size: 46px; }
  .menu__sub a { font-size: 17px; }
  .menu__sub { padding-left: 20px; }
  .menu__panel { padding-inline: var(--gutter); }
  .prosa { font-size: 16.5px; }
}

@media (min-width: 1000px) {
  .barra { padding: 18px var(--gutter); }
  .dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .dos-col > * { min-width: 0; }
  .dos-col--ancha-izq { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pegajoso { position: sticky; top: calc(var(--barra-h) + 24px); }
  .rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  /* ─── Los heros se alinean como el resto ─────────────────────────────────
     El título de cada página arrancaba en 40 px mientras todo lo de abajo
     arrancaba en 163 px: el H1 colgaba a la izquierda de su propia página.
     Se alinea con padding, NO con max-width, para que la franja de color del
     hero siga yendo de borde a borde. El porcentaje se mide contra el padre,
     que ocupa el ancho completo. */
  .hero-claro, .hero__contenido { padding-inline: max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter))); }

  /* ─── Márgenes limpios: TODO se alinea al contenedor ──────────────────────
     El bug que veía David («algunos bloques se van a la izquierda»): al pasar a
     parrilla, el carrusel perdía el padding y quedaba a sangre completa —1425 px
     pegados al borde— mientras el titular de encima seguía a 1180 px centrado.
     La única excepción deliberada es .carrusel--fuga (el portafolio). */
  .carrusel:not(.carrusel--fuga) { max-width: 1180px; margin-inline: auto; }
  .flechas { display: flex; }
  .carrusel--rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; overflow: visible; padding: 0; }
  .carrusel--rejilla:not(.carrusel--fuga) { padding-inline: var(--gutter); }

  /* El carrusel que SÍ se escapa. Alinea su primera tarjeta con el contenedor y se
     derrama por la derecha: es la señal de «hay más, desliza» sin romper el margen
     izquierdo. Se mide contra el ancho del padre (100%), no contra 100vw, porque vw
     incluye la barra de scroll y desalinearía 15 px. */
  /* [TRAMPA] El scroll-padding TIENE que valer lo mismo que el padding. Si no, el
     scroll-snap arranca el carrusel ya desplazado (se comió 123 px de entrada) y la
     primera tarjeta aparecía pegada al borde en vez de alineada con el titular.
     El porcentaje se resuelve contra el mismo ancho en ambas propiedades porque este
     carrusel ocupa todo el ancho de su sección — que es justamente lo que significa «fuga». */
  .carrusel--fuga { --fuga-izq: max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter))); padding-left: var(--fuga-izq); padding-right: 0; scroll-padding-left: var(--fuga-izq); }
  .carrusel--fuga > * { flex-basis: 330px; }
  .carrusel--rejilla > * { flex: none; }
  .carrusel--rejilla::after { display: none; }
  .carrusel--rejilla ~ .carrusel-pie .puntos, .carrusel--rejilla ~ .carrusel-pie .flechas { display: none; }
  .carrusel--rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carrusel--rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carrusel--rejilla > .testimonio { flex-basis: auto; }
  .carrusel--planos { --alto-plano: 380px; }
  .plano img { max-width: 1100px; }
  /* 360 px de alto = 540 de ancho en un 3:2, los mismos dos por pantalla que antes. */
  .carrusel--fotos { --alto-foto: 360px; }
  .carrusel--fotos img { max-width: 1100px; }   /* tope solo para un panorámico extremo */
  .servicios-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .servicios-rejilla > :first-child { grid-column: 1 / -1; }
  .servicios-rejilla > :first-child .tarjeta__img { height: 260px; }
  .pasos-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  /* Las FAQs ocupan el contenedor entero. Con 760 px quedaban colgando a la
     izquierda con 340 px vacíos al lado (David, 15 sept 2026). Lo que conserva
     ancho de lectura es la RESPUESTA, no la caja. */
  .etapas { max-width: 760px; }
  .mapa { max-width: 560px; }
  .ciudades { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .david { gap: 24px; }
  .david__foto { width: 120px; height: 120px; }
  .ficha__marco { aspect-ratio: 4 / 5; }

  /* ─── Hero a dos columnas ────────────────────────────────────────────────
     El texto ocupa la izquierda y el hueco de la derecha lo llena el video de
     David (David, 15 sept 2026). Mientras el video no exista, la columna queda
     abierta y se ve la foto: no hay recuadro vacío ni marcador de posición. */
  /* Se parte en dos SOLO si hay video. Sin él, partir la caja estrecharía el titular
     a cambio de nada: el hero se queda a una columna, alineado al contenedor. */
  .hero--con-video .hero__contenido { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: end; }
  .hero--con-video .hero__texto { max-width: 660px; }
  /* Con el video al lado, el titular baja un punto para no partirse en tres líneas
     y dejar «fin.» solo. Sin video conserva su tamaño completo. */
  .hero--con-video h1 { font-size: clamp(44px, 4.3vw, 60px); }
  .hero--con-video .video--hero { display: block; justify-self: end; align-self: end; width: 100%; max-width: 400px; aspect-ratio: 4 / 5; margin: 0 0 6px; border-radius: 22px; }
  .video-marco--movil { display: none; }
  .seccion--tras-video { margin-top: -28px; }   /* sin el bloque de video debajo, vuelve al aire del hero */

  /* Carrusel del equipo: fichas a escala de retrato, no de póster. */
  .carrusel--fichas > * { flex-basis: 216px; }
}

/* ═══════════════════ VISOR A PANTALLA COMPLETA ═══════════════════
   Lo monta sitio.js al tocar un plano o una foto. Sin JS no existe y no estorba:
   las imágenes siguen en su carrusel. */
.ampliable { cursor: zoom-in; }
.ampliable:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
body.visor-abierto { overflow: hidden; }

.visor { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; background: var(--negro); color: var(--blanco); overflow: hidden; }
.visor::backdrop { background: rgba(35, 33, 26, .94); }
/* [TRAMPA] `grid-template` con minmax(0,1fr), no un grid implícito. Con filas automáticas
   la celda se mide por su contenido, así que el `max-height: 100%` de la imagen se vuelve
   circular y el navegador lo ignora: una foto más alta que el lienzo se salía por abajo,
   encima del pie y de la tira. Solo se notaba en escritorio, porque en celular la imagen
   la limita el ancho. Con la fila declarada, la celda mide lo que el lienzo y la cota manda. */
.visor__lienzo { position: absolute; inset: 58px 0 66px; display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  overflow: hidden; touch-action: none; }
.visor__img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.visor__lienzo--cerca { cursor: grab; }

/* Fondo OSCURO, no claro: estos botones caen encima del plano, que es blanco. Con el
   translúcido claro desaparecían por completo sobre la lámina. */
.visor__btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid rgba(251, 250, 246, .22); border-radius: 999px;
  background: rgba(35, 33, 26, .62); color: var(--blanco); backdrop-filter: blur(6px);
  cursor: pointer; transition: background .2s var(--ease); }
.visor__btn:hover { background: rgba(35, 33, 26, .85); }
.visor__btn:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.visor__cerrar { top: 8px; right: 12px; }
.visor__nav { top: 50%; transform: translateY(-50%); }
.visor__nav--prev { left: 10px; }
.visor__nav--sig { right: 10px; }
.visor--cerca .visor__nav { opacity: 0; pointer-events: none; }

.visor__pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 14px;
  align-items: center; justify-content: space-between; padding: 16px 20px 22px;
  font-size: 13px; color: rgba(251, 250, 246, .78); }
.visor__cuenta { flex: none; font-variant-numeric: tabular-nums; }

/* La tira de miniaturas ocupa el hueco que deja una foto cuadrada en un celular.
   Solo aparece con dos o más imágenes; con una, el diálogo se queda como estaba. */
.visor__tiras { position: absolute; left: 0; right: 0; bottom: 0; display: none;
  gap: 7px; padding: 6px 16px 16px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.visor__tiras::-webkit-scrollbar { display: none; }
.visor--tiras .visor__tiras { display: flex; }
.visor--tiras .visor__lienzo { inset: 58px 0 138px; }
.visor--tiras .visor__pie { bottom: 76px; padding-bottom: 6px; }

.visor__tira { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 9px;
  background: none; cursor: pointer; line-height: 0; opacity: .5;
  transition: opacity .2s var(--ease), border-color .2s var(--ease); }
.visor__tira img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; }
.visor__tira:hover { opacity: .85; }
.visor__tira.activa { opacity: 1; border-color: var(--terracota); }
.visor__tira:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

@media (min-width: 1000px) {
  .visor__lienzo { inset: 64px 78px 72px; }
  .visor--tiras .visor__lienzo { inset: 64px 78px 146px; }
  .visor__cerrar { top: 14px; right: 20px; }
  .visor__pie { padding-inline: 78px; }
  .visor--tiras .visor__pie { bottom: 84px; }
  /* «safe center»: centra, pero si hay más miniaturas de las que caben vuelve a
     alinear al inicio. Con «center» a secas, las primeras quedan fuera y no hay
     forma de llegar a ellas con el scroll. Si el navegador no lo entiende, ignora
     la línea entera y se alinean al inicio, que es justo el respaldo que queremos. */
  .visor__tiras { padding-inline: 78px; justify-content: safe center; }
  .visor__tira img { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .visor__tira { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visor__btn { transition: none; }
}

/* Segunda pregunta dentro de una misma pantalla del formulario: separada por una linea
   fina para que se lea como otra pregunta y no como continuacion de la anterior. */