/* ============ VISTA DE LAS AMAPOLAS — sistema visual ============ */ @font-face{ /* En una primera visita sobre 4G, un `swap` tardío volvía a pintar el hero cerca de 3.5 s y convertía ese repintado en el LCP. `optional` conserva el primer pintado estable; la fuente de marca se usa cuando llega dentro del periodo corto del navegador y en visitas con caché. */ font-family:"Cormorant Garamond";font-style:normal;font-weight:400 600;font-display:optional; src:url("../assets/fonts/cormorant-garamond-normal-latin.woff2") format("woff2")} @font-face{ font-family:"Cormorant Garamond";font-style:italic;font-weight:400 500;font-display:optional; src:url("../assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2")} @font-face{ font-family:"Inter";font-style:normal;font-weight:300 600;font-display:optional; src:url("../assets/fonts/inter-normal-latin.woff2") format("woff2")} :root{ /* tokens del brochure impreso — BRIEF-CLAUDE-DESIGN.md §6 */ --papel:#F4EFE6; --papel-2:#E8DFCE; --arena:#D4C3A3; /* kickers sobre oscuro */ --tierra:#8A6D4E; --nogal:#5C4632; /* texto sobre papel */ --noche:#1E1912; /* inmersivo */ --amapola:#C9A24B; /* ÚNICO acento vivo: hover, dato, símbolo */ --oliva:#6B7052; --blanco-velo:rgba(255,255,255,.9); /* alias legados */ --tinta:#3a2f24; --tinta-suave:#7a6a56; --verde:#6B7052; --verde-osc:#5C4632; --oro:#b98d4f; --oro-claro:#D4C3A3; --blanco:#fffdf8; --sombra:0 24px 48px -24px rgba(30,25,18,.45); --radio:14px; --serif:"Cormorant Garamond","Iowan Old Style","Palatino","Georgia",serif; --sans:"Inter",-apple-system,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif; --curva:cubic-bezier(.22,.61,.36,1); } /* WhatsApp no existe en la interfaz hasta tener un número real en /config.js. */ html:not(.wa-configurado) [data-wa]{display:none!important} .nota-ilustrativa{max-width:760px;margin:24px auto 0;text-align:center; color:#745638;font-size:13px;line-height:1.55} *{margin:0;padding:0;box-sizing:border-box} html{overscroll-behavior:none} body{font-family:var(--sans);color:var(--tinta);background:var(--papel);overscroll-behavior:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} .oculto{display:none!important} /* ---------- NAV ---------- */ #nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between; min-height:72px;padding:12px clamp(18px,2.2vw,34px);color:#fff; background:linear-gradient(180deg,rgba(20,22,18,.48),rgba(20,22,18,.30)); border-bottom:1px solid rgba(244,239,230,.14); backdrop-filter:blur(18px) saturate(1.28); -webkit-backdrop-filter:blur(18px) saturate(1.28); box-shadow:0 8px 30px rgba(8,9,7,.10)} #nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(244,239,230,.34),transparent);opacity:.7} #nav.solido{background:linear-gradient(180deg,rgba(20,22,18,.60),rgba(20,22,18,.46)); border-bottom-color:rgba(244,239,230,.18);box-shadow:0 12px 36px rgba(8,9,7,.18)} .nav-brand{display:flex;gap:var(--s-3);align-items:center;cursor:pointer;padding:4px 8px;margin-left:-8px; border-radius:var(--r-sm);transition:background var(--t-fast),transform var(--t-fast)} .nav-brand:hover,.nav-brand:focus-visible{background:rgba(244,239,230,.08)} .nav-brand:active{transform:scale(.98)} .nav-logo{height:44px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.18))} @media (max-width:760px){.nav-logo{height:38px}} .nav-flor{font-size:22px;color:var(--oro-claro)} .nav-brand strong{font-family:var(--serif);font-size:15px;letter-spacing:.14em;display:block} .nav-brand small{font-size:10.5px;letter-spacing:.08em;opacity:.75;text-transform:uppercase} .nav-links{display:flex;gap:clamp(2px,.35vw,7px);align-items:center} /* `button` Y `a`: el nav pasó de botones a enlaces (d3d953b, cuando «Disponibilidad y precios» y «Agenda tu visita» se volvieron páginas propias) y este selector se quedó atrás. Los cinco enlaces sin clase quedaron SIN tamaño de fuente ni padding: heredaban el cuerpo, se salían de la barra y partían en dos líneas. */ .nav-links button,.nav-links > a,.nav-maqueta{ position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:9px clamp(9px,1vw,14px);font-size:clamp(12px,.92vw,13.5px);letter-spacing:.015em; color:rgba(244,239,230,.88);text-decoration:none;border:1px solid transparent; border-radius:var(--r-pill); transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast), transform var(--t-fast),box-shadow var(--t-fast)} .nav-links button:hover,.nav-links button:focus-visible, .nav-maqueta:hover,.nav-maqueta:focus-visible{ color:#fff;background:rgba(244,239,230,.11);border-color:rgba(244,239,230,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 20px rgba(0,0,0,.08); transform:translateY(-1px)} .nav-links button:active,.nav-maqueta:active, .nav-links .nav-confirmado{ color:var(--noche);background:rgba(244,239,230,.94);border-color:rgba(244,239,230,.86); box-shadow:0 0 0 4px rgba(201,162,75,.16),0 10px 24px rgba(0,0,0,.14); transform:translateY(0) scale(.97)} @keyframes nav-confirmado{ 0%{color:rgba(244,239,230,.88);background:transparent;box-shadow:none} 38%{color:var(--noche);background:rgba(244,239,230,.96); box-shadow:0 0 0 5px rgba(201,162,75,.18),0 10px 24px rgba(0,0,0,.14)} 100%{color:rgba(244,239,230,.88);background:transparent;box-shadow:none}} .nav-links .nav-confirmado{animation:nav-confirmado .72s var(--ease-entrada) both} .mp-controles a.btn-linea{text-decoration:none;color:var(--verde)} /* ---------- botones ---------- */ .btn-oro{background:linear-gradient(135deg,var(--oro),#a2793f);color:#fff!important;border-radius:var(--r-pill); padding:10px 20px;font-weight:600;letter-spacing:.03em;box-shadow:0 6px 18px rgba(150,110,50,.35);transition:transform .2s,box-shadow .2s} .btn-oro:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(150,110,50,.45)} .btn-linea{border:1.5px solid currentColor;border-radius:var(--r-pill);padding:10px 20px;font-weight:500;transition:background var(--t-fast)} .btn-linea:hover{background:rgba(0,0,0,.06)} .grande{padding:15px 30px;font-size:16px} /* ---------- EL VIAJE (plano continuo: escenario sticky + segmentos) ---------- */ #viaje{position:relative;background:var(--noche)} /* El escenario mide la pantalla VISIBLE, no la pantalla con las barras puestas. `svh` es la altura con las barras de Safari desplegadas y NO cambia nunca: en cuanto el iPhone las esconde al hacer scroll, la pantalla crece ~110px y el video se quedaba corto — una franja vacía al pie por la que se colaba el minimapa, que sí se mide contra el borde real. `dvh` sigue a la pantalla visible. `svh` queda primero como respaldo para navegadores sin dvh. */ .stage{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden} .seg{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity} .seg video,.cap-pano,.cap-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;touch-action:pan-y} .seg-papel{background:var(--papel)} .seg-hoja{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;will-change:transform} .seg-hoja.respiro{padding:0 24px} .cap-kenburns{position:absolute;inset:-8%;background-size:cover;background-position:center; animation:kb 20s linear alternate infinite;will-change:transform} @keyframes kb{from{transform:scale(1.06) translate(1.4%,-1%)}to{transform:scale(1.18) translate(-1.8%,1.4%)}} .cap-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(30,25,18,.42) 0%,transparent 26%,transparent 56%,rgba(30,25,18,.62) 100%)} .cap-velo.suave{background:linear-gradient(180deg,rgba(10,11,9,.30) 0%,transparent 24%,transparent 66%,rgba(10,11,9,.5) 100%)} .cap-luz{position:absolute;inset:0;background:#f7ecd8;opacity:0;pointer-events:none} .cap-texto{position:absolute;color:#fff;opacity:0;will-change:opacity,transform} .cap-texto.centro{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px} .cap-texto.abajo-izq{left:clamp(22px,6vw,84px);bottom:clamp(70px,12svh,130px);max-width:620px;padding-right:24px} .cap-texto.abajo-der{right:clamp(22px,6vw,84px);left:auto;bottom:clamp(70px,12svh,130px);max-width:620px;padding-left:24px} .cap-texto em{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--arena);font-style:normal;font-weight:400;display:block;margin-bottom:12px} .cap-texto h1{font-family:var(--serif);font-size:clamp(30px,4.6vw,54px);font-weight:500;line-height:1.16;margin:14px 0} .cap-texto h2{font-family:var(--serif);font-size:clamp(25px,3.6vw,42px);font-weight:500;line-height:1.18;margin-bottom:10px} .cap-texto h2.cierre{font-size:clamp(28px,4.4vw,50px)} .cap-texto p{font-size:clamp(14px,1.6vw,16px);line-height:1.6;font-weight:300;max-width:520px} .cap-kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#f0e9db;font-weight:400;white-space:nowrap} @media (max-width:760px){.cap-kicker{white-space:normal}} .cap-texto.centro.bajo{justify-content:flex-end;padding-bottom:11svh} .cap-scroll{margin-top:44px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.55;display:flex;flex-direction:column;align-items:center;gap:10px} .cap-scroll span{display:block;width:1px;height:34px;background:rgba(255,255,255,.55);animation:flota 2.6s ease-in-out infinite} @keyframes flota{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:.9}} .badge-360{position:absolute;top:86px;right:26px;background:rgba(185,141,79,.92);color:#fff;padding:9px 18px;border-radius:var(--r-pill); font-size:12.5px;font-weight:600;letter-spacing:.04em;animation:pulso 2.6s infinite;pointer-events:none} .badge-360.fija{top:auto;bottom:30px;right:auto;left:50%;transform:translateX(-50%)} .btn-explorar{margin-top:16px} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px} .btn-linea.blanco{color:#fff} /* respiros de papel (ref-07 / ref-08): la página respira como el brochure */ .respiro{background:var(--papel);text-align:center;padding:clamp(90px,16svh,150px) 24px;display:flex;flex-direction:column;align-items:center;gap:22px} .respiro-foto{width:min(340px,60vw);aspect-ratio:16/10;object-fit:cover;border-radius:4px;box-shadow:var(--e-card)} .respiro-kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--oro);font-weight:400} .respiro h2{font-family:var(--serif);font-size:clamp(30px,4.6vw,54px);font-weight:500;line-height:1.18;color:var(--verde-osc);max-width:820px} .respiro-specs{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave)} /* enlaces mudos dentro del recorrido (micro-interacción, no botón) */ .link-mudo{margin-top:18px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#fff; padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.45);opacity:.85;transition:opacity var(--t-fast),border-color var(--t-fast)} .link-mudo:hover{opacity:1;border-color:var(--amapola)} .link-mudo::after{content:" →"} /* botón outline hairline (nav + cierres) */ .btn-outline{border:1px solid rgba(255,255,255,.55);border-radius:var(--r-sm);padding:11px 26px;font-size:11px; letter-spacing:.26em;text-transform:uppercase;font-weight:400;color:#fff;transition:background var(--t-fast),border-color var(--t-fast)} .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff} /* overlay 360 de exploración libre */ #pano-overlay{position:fixed;inset:0;z-index:var(--z-pano);background:var(--noche)} #pano-overlay-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none} #pano-overlay-cerrar{position:absolute;top:22px;right:24px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill);padding:10px 20px;color:#fff;font-size:14px;backdrop-filter:blur(8px)} /* ---------- secciones ---------- */ .bloque{padding:110px clamp(20px,6vw,90px)} .bloque.claro{background:var(--blanco)} .encabezado{max-width:760px;margin:0 auto 54px;text-align:center} .encabezado em{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#7A5C2F;font-style:normal;font-weight:600} .encabezado h2{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);font-weight:600;color:var(--verde-osc);margin:12px 0 14px} .encabezado p{color:var(--tinta-suave);font-size:16.5px;line-height:1.6} /* ---------- masterplan ---------- */ .mp-marco{max-width:1200px;margin:0 auto} .mp-lienzo{position:relative;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);background:#dcd2bd} .mp-lienzo img{width:100%;transition:opacity .5s} #mp-pines{position:absolute;inset:0} .mp-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:var(--s-1);transition:transform .2s} .mp-pin:hover{transform:translate(-50%,-100%) scale(1.12)} .mp-pin:hover .punto{background:var(--amapola);border-color:var(--amapola)} .mp-pin .punto{width:32px;height:32px;border-radius:50%;background:rgba(30,25,18,.35);border:1px solid rgba(244,239,230,.85); color:#fff;display:grid;place-items:center;font-size:10.5px;letter-spacing:.12em;backdrop-filter:blur(4px); transition:background .3s var(--curva),border-color .3s var(--curva)} @keyframes pulso{0%,100%{box-shadow:0 0 0 6px rgba(185,141,79,.35),0 6px 14px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 12px rgba(185,141,79,.12),0 6px 14px rgba(0,0,0,.35)}} .mp-pin .mp-pin-label{background:rgba(30,25,18,.72);color:#f4efe6;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;backdrop-filter:blur(4px)} .mp-controles{display:flex;align-items:center;gap:18px;margin-top:18px;flex-wrap:wrap;justify-content:center} .mp-controles .btn-linea{color:var(--verde)} .mp-nota{font-size:12.5px;color:var(--tinta-suave)} .mp-tarjeta{position:fixed;z-index:var(--z-tarjeta);bottom:30px;left:50%;transform:translateX(-50%);width:min(480px,92vw); background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:26px 28px;animation:sube .35s ease both} .mp-tarjeta h3{font-family:var(--serif);font-size:23px;color:var(--verde-osc);margin-bottom:8px;padding-right:30px} .mp-tarjeta p{color:var(--tinta-suave);font-size:14.5px;line-height:1.55;margin-bottom:16px} .mp-cerrar{position:absolute;top:14px;right:16px;font-size:22px;color:var(--tinta-suave)} /* ---------- residencias ---------- */ .res-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;max-width:1200px;margin:0 auto 34px;align-items:start} .res-plano{background:#fff;border:1px solid rgba(92,70,50,.18);border-radius:var(--r-sm);overflow:hidden} .res-plano img{width:100%} .res-plano figcaption{padding:14px 18px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);border-top:1px solid rgba(92,70,50,.14)} .res-tabla{display:flex;flex-direction:column;margin-bottom:26px} .res-tabla>div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:13px 0;border-top:1px solid rgba(92,70,50,.16);align-items:baseline} .res-tabla>div:last-child{border-bottom:1px solid rgba(92,70,50,.16)} .res-tabla dt{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tierra)} .res-tabla dd{font-size:15.5px;line-height:1.5;color:var(--nogal)} .res-mini{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)} .res-mini img{border:1px solid rgba(92,70,50,.18);border-radius:var(--r-sm)} .res-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1200px;margin:0 auto} .res-fotos img{border-radius:var(--r-sm);aspect-ratio:3/4;object-fit:cover;transition:transform var(--t-slow) var(--curva)} .res-fotos img:hover{transform:scale(1.03)} /* ---------- amenidades ---------- */ .amen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;max-width:1240px;margin:0 auto} .amen-card{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/4.6;cursor:pointer} .amen-card.destacada{grid-column:span 2;aspect-ratio:16/8.2} .amen-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .amen-card:hover img{transform:scale(1.045)} .amen-card .velo{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(22,26,20,.85))} .amen-card .texto{position:absolute;left:20px;right:20px;bottom:18px;color:#fff} .amen-card h3{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:5px} .amen-card.destacada h3{font-size:32px} .amen-card p{font-size:13px;line-height:1.45;opacity:.88} .amen-kicker{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--arena);margin-bottom:6px} /* ---------- ficha ---------- */ .ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);max-width:1100px;margin:0 auto;align-items:center} .ficha-col h3{font-family:var(--serif);font-size:26px;color:var(--verde-osc);margin-bottom:10px} .ficha-col>p{color:var(--tinta-suave);margin-bottom:18px} .ficha-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px} .ficha-col li{padding-left:24px;position:relative;font-size:15px;line-height:1.5} .ficha-col li::before{content:"—";position:absolute;left:0;color:var(--oro)} .ficha-col img{border-radius:var(--r-sm)} .entorno{max-width:760px;margin:90px auto 0;text-align:center} .entorno-titulo{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);font-weight:500;color:var(--nogal);margin:12px 0 30px} .entorno-lista{list-style:none;text-align:left} .entorno-lista li{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:16px 0;border-top:1px solid rgba(92,70,50,.16);font-size:15.5px;color:var(--tinta-suave);align-items:baseline} .entorno-lista li:last-child{border-bottom:1px solid rgba(92,70,50,.16)} .entorno-lista span{font-family:var(--serif);font-size:19px;color:var(--nogal)} @media (max-width:700px){.entorno-lista li{grid-template-columns:1fr}} footer{text-align:center;margin-top:70px;font-size:12.5px;color:var(--tinta-suave)} /* con el tour 360 abierto, todo fondo del sistema se ve oscuro */ html.tour-abierto, html.tour-abierto body{background:var(--noche)} /* ---------- responsive ---------- */ @media (max-width:900px){ /* Mismo desfase que arriba: esta regla colapsaba el nav en el botón de menú por debajo de 900px, pero solo miraba `button`. Con los enlaces ya en `a` dejó de ocultarlos, así que los seis se amontonaban en la barra y partían en dos líneas. El hamburguesa (#nav-menu-btn) sigue siendo `button` y no debe ocultarse: por eso queda fuera del `:not()` por su id. */ .nav-links > button:not(.nav-cta):not(#nav-menu-btn), .nav-links > a:not(.nav-cta){display:none} .nav-links .nav-maqueta{display:none} .res-grid,.ficha-grid{grid-template-columns:1fr} .res-fotos{grid-template-columns:repeat(2,1fr)} .bloque{padding:80px 20px} .tour-flecha{width:48px;height:48px} .mp-pin .mp-pin-label{display:none} } /* ============ MAQUETA VIRTUAL (tour.html) ============ */ .tour-app{background:var(--noche);min-height:100svh} .tour-tab{padding:9px 14px;font-size:12.5px;letter-spacing:.06em;color:#f2ede2;border-radius:var(--r-sm);opacity:.7;transition:opacity var(--t-fast)} .tour-tab.activo{opacity:1;border-bottom:1px solid var(--arena);border-radius:0} .tour-vista{min-height:100svh;padding-top:64px} .tour-mp-lienzo{position:relative;height:calc(100svh - 64px);overflow:hidden} .tour-mp-lienzo>img{width:100%;height:100%;object-fit:cover} .tour-mp-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,25,18,.35),transparent 30%,transparent 60%,rgba(30,25,18,.7))} .tour-mp-titulo{position:absolute;left:clamp(22px,6vw,84px);bottom:clamp(40px,8svh,90px);color:#fff;max-width:560px} .tour-mp-titulo h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,52px);font-weight:500;margin:10px 0} .tour-mp-sub{font-size:15px;font-weight:300;opacity:.9} .tour-mp-sub.oscuro{color:var(--tinta-suave);opacity:1} #tour-zonas{position:absolute;inset:0} .tour-zona .punto{font-size:9px;letter-spacing:.1em} .tour-zona.pendiente{opacity:.45;cursor:default} /* apartamento (Motor C) */ #vista-apartamento,#vista-galeria{background:var(--papel);color:var(--tinta)} .apto-marco,.galeria-marco{max-width:1200px;margin:0 auto;padding:56px clamp(20px,5vw,60px) 90px} .apto-cabecera{text-align:center;margin-bottom:40px} .apto-cabecera h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,52px);font-weight:500;color:var(--nogal);margin:10px 0} .apto-plano{position:relative;border:1px solid rgba(92,70,50,.2);border-radius:var(--r-sm);overflow:hidden;background:#fff} .apto-plano>img{width:100%} .apto-hab{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px} .apto-punto{width:14px;height:14px;border-radius:50%;border:1px solid rgba(92,70,50,.5);background:rgba(244,239,230,.7);transition:all .3s var(--curva)} .apto-hab.activa .apto-punto{background:var(--amapola);border-color:var(--amapola);box-shadow:0 0 0 4px rgba(201,162,75,.25);animation:pulso-apto 2.4s infinite} @keyframes pulso-apto{0%,100%{box-shadow:0 0 0 4px rgba(201,162,75,.25)}50%{box-shadow:0 0 0 9px rgba(201,162,75,.08)}} .apto-hab:not(.activa){cursor:default} .apto-etiqueta{background:rgba(30,25,18,.78);color:#f4efe6;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; padding:4px 9px;border-radius:var(--r-sm);white-space:nowrap;display:flex;flex-direction:column;line-height:1.5} .apto-etiqueta small{font-size:8px;opacity:.7;letter-spacing:.1em} .apto-nota{margin-top:16px;font-size:12px;color:var(--tinta-suave);text-align:center} /* galería */ .galeria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .galeria-item{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/9;text-align:left} .galeria-miniatura{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--t-slow) var(--curva)} .galeria-item:hover .galeria-miniatura{transform:scale(1.05)} .galeria-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(30,25,18,.8))} .galeria-texto{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;display:flex;flex-direction:column;gap:3px} .galeria-texto em{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:var(--arena)} .galeria-texto strong{font-family:var(--serif);font-size:20px;font-weight:500} /* vista de nodo */ #vista-nodo{position:fixed;inset:0;z-index:var(--z-nodo);background:var(--noche)} #nodo-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none} .nodo-transicion{position:absolute;inset:0;background:var(--noche);opacity:0;pointer-events:none;transition:opacity .42s var(--curva)} .nodo-transicion.activa{opacity:1} .nodo-ui{position:absolute;inset:0;pointer-events:none} .nodo-cabecera{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:18px;padding:20px 24px; background:linear-gradient(180deg,rgba(30,25,18,.6),transparent)} #nodo-salir{pointer-events:auto} .nodo-titulo-caja{flex:1;color:#fff} .nodo-titulo-caja em{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--arena);font-style:normal;display:block;margin-bottom:6px} .nodo-titulo-caja h2{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);font-weight:500} .nodo-badge{position:static} #nodo-flechas{position:absolute;bottom:34px;left:0;right:0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;pointer-events:auto} .nodo-flecha{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;padding:12px 22px;background:rgba(30,25,18,.45);border:1px solid rgba(244,239,230,.35); border-radius:var(--r-sm);backdrop-filter:blur(8px);transition:background .3s var(--curva),border-color .3s var(--curva)} .nodo-flecha span{font-size:17px;line-height:1} .nodo-flecha:hover{background:rgba(201,162,75,.75);border-color:var(--amapola)} #nodo-minimapa{position:absolute;left:22px;bottom:22px;width:150px;border:1px solid rgba(212,195,163,.4);border-radius:3px; overflow:hidden;box-shadow:0 12px 32px -12px rgba(0,0,0,.5)} #nodo-minimapa img{width:100%;display:block;filter:sepia(.25) brightness(.92);opacity:.9} .minimapa-cono{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:none; background:conic-gradient(from -30deg,rgba(201,162,75,.4) 0deg,rgba(201,162,75,.4) 60deg,transparent 60deg);border-radius:50%} @media (max-width:760px){#nodo-minimapa{width:104px}.apto-etiqueta{display:none}.apto-hab.activa .apto-etiqueta{display:flex}} /* Mapa lateral del recorrido: muestra todos los lugares sobre la misma aérea que usa el explorador ampliado. Deja de ser un gesto oculto y se explica. */ #minimapa{position:fixed;right:22px;bottom:22px;top:auto;left:auto;z-index:var(--z-minimapa);width:236px; padding:10px;border:1px solid rgba(244,239,230,.34);border-radius:14px;overflow:hidden;opacity:0; color:#f4efe6;background:linear-gradient(160deg,rgba(24,20,15,.92),rgba(24,20,15,.74)); transition:opacity .4s var(--curva),transform .4s var(--curva);pointer-events:none; box-shadow:0 22px 54px -18px rgba(0,0,0,.72);backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15)} #minimapa.visible{opacity:.96;pointer-events:auto} #minimapa:hover{opacity:1;transform:translateY(-2px)} .minimapa-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 1px 8px} .minimapa-cab>span{min-width:0;display:flex;flex-direction:column;gap:2px} .minimapa-cab small{font-size:8px;line-height:1.2;letter-spacing:.19em;text-transform:uppercase;color:rgba(244,239,230,.58)} .minimapa-cab strong{max-width:116px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:500 14px/1.2 var(--serif);color:#fff} .minimapa-abrir{flex:0 0 auto;min-height:34px;padding:7px 9px;border:1px solid rgba(244,239,230,.24);border-radius:999px; color:#f4efe6;font-size:9px;letter-spacing:.09em;text-transform:uppercase;transition:background var(--t-fast),border-color var(--t-fast)} .minimapa-abrir:hover,.minimapa-abrir:focus-visible{background:rgba(244,239,230,.12);border-color:rgba(244,239,230,.58)} .minimapa-plano{position:relative;overflow:hidden;border-radius:8px;border:1px solid rgba(244,239,230,.24);isolation:isolate} .minimapa-plano::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 28px rgba(0,0,0,.36);pointer-events:none} #minimapa img{width:100%;height:auto;display:block;filter:saturate(.9) brightness(.82)} .minimapa-hitos{position:absolute;inset:0;z-index:2} .minimapa-hito{position:absolute;width:12px;height:12px;padding:0;transform:translate(-50%,-50%);border-radius:50%; display:grid;place-items:center;color:#fff} .minimapa-hito>span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.82);border:1px solid rgba(25,20,14,.68); box-shadow:0 1px 4px rgba(0,0,0,.55);transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast)} .minimapa-ayuda{margin:8px 2px 0;color:rgba(244,239,230,.7);font-size:10px;line-height:1.35} /* ============ Explorador del conjunto (los controles del minimapa lo expanden) ============ */ #explorador{position:fixed;inset:0;z-index:var(--z-explorador);opacity:0;pointer-events:none; transition:opacity var(--t-base) var(--curva);display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,40px)} #explorador.abierto{opacity:1;pointer-events:auto} .expl-fondo{position:absolute;inset:0;background:rgba(18,22,30,.72);backdrop-filter:blur(6px);cursor:pointer} .expl-marco{position:relative;width:min(1180px,92vw);max-height:88vh;overflow:auto; background:#14181f;border:1px solid rgba(212,195,163,.22);border-radius:16px; box-shadow:0 40px 120px -30px rgba(0,0,0,.7); display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(16px,2.4vw,34px); padding:clamp(20px,3vw,40px);transform:translateY(14px) scale(.985);transition:transform .45s var(--curva)} #explorador.abierto .expl-marco{transform:none} .expl-cerrar{position:absolute;top:12px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%; border:1px solid rgba(212,195,163,.3);background:rgba(0,0,0,.25);color:var(--arena);font-size:22px;line-height:1;cursor:pointer; transition:background .3s,transform .3s} .expl-cerrar:hover{background:rgba(201,162,75,.9);color:#fff;transform:rotate(90deg)} .expl-cab{grid-column:1/-1} .expl-kicker{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--amapola)} .expl-titulo{font-family:var(--serif);font-size:clamp(24px,3vw,34px);color:#f4efe6;font-weight:500;margin:6px 0 4px} .expl-hint{font-size:13px;color:rgba(212,195,163,.7)} .expl-mapa{position:relative;align-self:start;border-radius:10px;overflow:hidden;border:1px solid rgba(212,195,163,.16)} .expl-mapa img{width:100%;height:auto;display:block;filter:saturate(1.02)} .expl-zonas{position:absolute;inset:0} .expl-zona{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px; background:none;border:0;cursor:pointer;padding:4px;color:#fff} .expl-pin{width:14px;height:14px;border-radius:50%;background:var(--amapola);border:2px solid #fff; box-shadow:0 0 0 4px rgba(201,162,75,.28),0 2px 6px rgba(0,0,0,.5);transition:transform var(--t-fast) var(--curva)} .expl-nom{font-size:11px;letter-spacing:.04em;font-weight:600;white-space:nowrap; background:rgba(18,22,30,.78);padding:3px 8px;border-radius:20px;opacity:0;transform:translateX(-4px); transition:opacity var(--t-fast),transform var(--t-fast)} .expl-zona:hover .expl-nom,.expl-zona.activa .expl-nom{opacity:1;transform:none} .expl-zona:hover .expl-pin{transform:scale(1.25)} .expl-zona.activa .expl-pin{background:#fff;box-shadow:0 0 0 5px rgba(201,162,75,.55),0 2px 8px rgba(0,0,0,.5)} .expl-detalle{align-self:center;border-left:1px solid rgba(212,195,163,.16);padding-left:clamp(16px,2vw,28px)} .expl-det-video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block; margin-bottom:16px;background:#000;border:1px solid rgba(212,195,163,.16)} .expl-det-video[hidden]{display:none} .expl-det-kicker{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--amapola)} .expl-det-nom{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);color:#f4efe6;font-weight:500;margin:6px 0 12px} .expl-det-desc{font-size:15px;line-height:1.62;color:rgba(240,235,226,.82)} .expl-det-ir{margin-top:20px;background:none;border:0;color:var(--amapola);font-size:13px;letter-spacing:.04em; cursor:pointer;padding:0;border-bottom:1px solid rgba(201,162,75,.4);transition:opacity .3s} .expl-det-ir:hover{opacity:.7} @media (max-width:820px){ .expl-marco{grid-template-columns:1fr;max-height:90vh} .expl-detalle{border-left:0;border-top:1px solid rgba(212,195,163,.16);padding-left:0;padding-top:18px} .expl-nom{font-size:10px} } .mm-zona{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;display:grid;place-items:center; background:none;border:none;cursor:pointer} .mm-zona i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid rgba(30,25,18,.5); transition:transform var(--t-fast) var(--curva),background var(--t-fast)} .mm-zona:hover i{transform:scale(1.5);background:#fff} .mm-zona.activa i{background:var(--amapola);border-color:#fff} .mm-zona label{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(4px); background:rgba(30,25,18,.9);color:#fff;font-size:9px;letter-spacing:.08em;text-transform:uppercase; padding:3px 7px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s} .mm-zona:hover label{opacity:1} .minimapa-punto{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--amapola);z-index:4; border:2px solid #fff;transform:translate(-50%,-50%);transition:left .9s var(--curva),top .9s var(--curva); box-shadow:0 0 0 3px rgba(201,162,75,.4),0 2px 6px rgba(0,0,0,.45);pointer-events:none} .minimapa-punto::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(201,162,75,.6); animation:sonar 2.4s ease-out infinite} @keyframes sonar{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}} @media (max-width:820px){ body{font-size:18px} #minimapa{width:104px;padding:3px;border-radius:9px} .minimapa-cab,.minimapa-ayuda{display:none} .minimapa-plano{border-radius:6px} .minimapa-hito{width:8px;height:8px} .minimapa-hito>span{width:4px;height:4px} .minimapa-punto{width:9px;height:9px;border-width:1.5px} } /* indicador de capítulo 0X/09 */ #cap-indicador{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:var(--z-cap);color:var(--arena); font-size:10.5px;letter-spacing:.3em;writing-mode:vertical-rl;display:flex;align-items:center;gap:var(--s-3); opacity:0;transition:opacity .5s var(--curva);pointer-events:none} #cap-indicador::after{content:"";display:block;width:1px;height:52px;background:rgba(212,195,163,.45)} #cap-indicador.visible{opacity:1} @media (max-width:820px){#cap-indicador{display:none}} /* ========================================================================== v3 · AUDITORÍA 20-jul — legibilidad, confianza hilada, ejes KONFOR, conversión, autoplay y video real ========================================================================== */ :root{ --hair:rgba(92,70,50,.22); /* hairlines sobre papel */ --hair-clara:rgba(212,195,163,.4); /* hairlines sobre noche */ } [hidden]{display:none!important} /* ---------- OLA 1 · legibilidad: degradado local detrás de TODO texto ---------- */ .cap-texto{isolation:isolate} .cap-texto::before{content:"";position:absolute;inset:-26px -36px;z-index:-1;border-radius:22px; background:linear-gradient(100deg,rgba(24,19,13,.68) 0%,rgba(24,19,13,.42) 55%,rgba(24,19,13,0) 100%); filter:blur(14px)} .cap-texto.centro::before{inset:-38px -52px; background:radial-gradient(58% 58% at 50% 52%,rgba(24,19,13,.62),rgba(24,19,13,0) 78%)} /* Bandas que van sobre una toma que debe verse limpia: sin caja oscura detrás. La legibilidad la sostiene la sombra del glifo (§6, más abajo), que se refuerza aquí porque ya no hay degradado que ayude. Solo se aplica donde el fotograma lo permite, y se mide contra los cuadros reales del clip. */ .cap-texto.sin-velo::before{content:none} .cap-texto.sin-velo{text-shadow: 0 1px 2px rgba(12,9,6,.92), 0 2px 6px rgba(12,9,6,.85), 0 4px 22px rgba(12,9,6,.75)} .cap-texto p{font-size:clamp(15px,1.7vw,17.5px);font-weight:400;line-height:1.65} .cap-texto h2{line-height:1.2} /* ---------- OLA 2 · sellos de confianza (kit hilado al recorrido) ---------- */ .cap-sello{position:absolute;right:clamp(20px,4vw,54px);bottom:clamp(20px,4svh,40px); font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--arena); border:1px solid var(--hair-clara);border-radius:var(--r-sm);padding:10px 15px; background:rgba(30,25,18,.45);backdrop-filter:blur(6px)} @media (max-width:760px){.cap-sello{display:none}} /* ---------- espina de progreso por actos (reemplaza al viejo riel de ejes) ---------- */ #espina{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:var(--z-espina); height:min(44vh,380px);min-height:260px;display:flex;flex-direction:column; justify-content:space-between;opacity:0;transition:opacity .7s var(--curva);pointer-events:none} #espina.visible.lista{opacity:1;pointer-events:auto} .esp-linea{position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:rgba(212,195,163,.26)} .esp-relleno{position:absolute;inset:0;background:var(--arena);transform:scaleY(0);transform-origin:0 0} .esp-bolita{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--amapola); box-shadow:0 0 0 4px rgba(201,162,75,.22);transform:translateY(-4px);transition:top .08s linear} .esp-estacion{position:relative;display:flex;align-items:center;gap:10px;padding:10px 8px 10px 22px; text-align:left;min-height:44px} .esp-estacion em{font-family:var(--serif);font-style:normal;font-size:14px;width:20px; color:rgba(212,195,163,.45);transition:color var(--t-base),font-size var(--t-base)} .esp-estacion span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.55; color:rgba(212,195,163,.42);transition:color var(--t-base),max-width .45s var(--curva),opacity .45s; max-width:0;opacity:0;overflow:hidden;white-space:nowrap} #espina:hover .esp-estacion span{max-width:150px;opacity:1} /* la espina se retira a hairline + bolita mientras hay texto en pantalla (señal de viaje.js) */ body.hay-texto #espina .esp-estacion, body.hay-texto #espina .esp-cap{opacity:0;transition:opacity .5s var(--curva)} .esp-estacion.pasado em{color:var(--arena)} .esp-estacion.pasado span{color:rgba(212,195,163,.62)} .esp-estacion.actual em{color:var(--amapola);font-size:17px} .esp-estacion.actual span{color:#f4efe6} .esp-estacion:hover span{color:var(--amapola)} .esp-cap{position:absolute;left:22px;top:0;transform:translateY(14px);transition:top .08s linear; display:flex;flex-direction:column;gap:3px;pointer-events:none} .esp-cap-nombre{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--arena)} .esp-cap-ejes{font-size:9px;letter-spacing:.16em;text-transform:uppercase;line-height:1.6; color:rgba(212,195,163,.5);max-width:150px} /* mundo papel (fondo claro): la espina invierte su paleta */ #espina.sobre-papel .esp-linea{background:rgba(92,70,50,.25)} #espina.sobre-papel .esp-relleno{background:var(--tierra)} #espina.sobre-papel .esp-estacion em{color:rgba(92,70,50,.5)} #espina.sobre-papel .esp-estacion span{color:rgba(92,70,50,.45)} #espina.sobre-papel .esp-estacion.pasado em{color:var(--tierra)} #espina.sobre-papel .esp-estacion.pasado span{color:rgba(92,70,50,.68)} #espina.sobre-papel .esp-estacion.actual span{color:var(--nogal)} #espina.sobre-papel .esp-cap-nombre{color:var(--tierra)} #espina.sobre-papel .esp-cap-ejes{color:rgba(92,70,50,.55)} /* móvil: franja-brújula superior (acto + capítulo; el progreso lo da #progreso-viaje) */ @media (max-width:900px){ #espina{left:14px;right:14px;top:12px;transform:none;height:auto;min-height:0; flex-direction:row;align-items:center;gap:10px;z-index:var(--z-espina-movil)} .esp-linea{display:none} .esp-estacion{display:none;padding:0;min-height:0} .esp-estacion.actual{display:flex;gap:var(--s-2)} .esp-estacion.actual em{font-size:13px;width:auto} .esp-estacion.actual span{max-width:none;font-size:9px;color:#f4efe6} #espina.sobre-papel .esp-estacion.actual span{color:var(--nogal)} .esp-cap{position:static;transform:none;flex-direction:row;align-items:baseline} .esp-cap-ejes{display:none} } /* indicador de capítulo ahora es botón: salta al cierre */ #cap-indicador{background:none;border:none;cursor:pointer;font-family:inherit} #cap-indicador.visible{pointer-events:auto} #cap-indicador:hover{color:#f4efe6} /* ---------- botones de conversión ---------- */ .btn-solido{background:#A87F3E;color:#fff;border-radius:var(--r-sm);padding:15px 32px; font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; transition:transform var(--t-fast) var(--curva),box-shadow var(--t-fast);box-shadow:0 10px 26px rgba(201,162,75,.28)} .btn-solido:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(201,162,75,.38)} .btn-solido.ancho{width:100%} .nav-cta{border:1px solid rgba(255,255,255,.55)!important;border-radius:var(--r-sm)!important; letter-spacing:.22em!important;text-transform:uppercase;font-size:11px!important;padding:12px 22px!important} .nav-cta:hover{border-color:var(--amapola)!important;background:rgba(201,162,75,.14)!important} .nav-cta:active,.nav-cta.nav-confirmado{color:#fff!important;background:var(--amapola)!important; border-color:var(--amapola)!important} .cta-seccion{margin-top:48px;text-align:center} .mp-tarjeta .acciones{display:flex;gap:10px;flex-wrap:wrap} /* ---------- cierre final: la emoción desemboca en conversación ---------- */ #cierre{background:var(--noche);color:#f4efe6;text-align:center;padding:clamp(110px,18vh,190px) 24px} #cierre .cierre-kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--arena);margin-bottom:22px} #cierre h2{font-family:var(--serif);font-size:clamp(32px,4.8vw,56px);font-weight:500;line-height:1.16;max-width:900px;margin:0 auto 18px} #cierre .cierre-sub{color:var(--arena);font-size:17px;max-width:560px;margin:0 auto 40px;line-height:1.65} #cierre .hero-cta{margin-top:0} #cierre .link-mudo{display:inline-block;margin-top:36px} footer{background:var(--noche);color:rgba(212,195,163,.78);text-align:center;padding:44px 24px 120px;margin:0;font-size:12.5px} /* ---------- modal de video real (prueba de obra) ---------- */ #video-modal{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(30,25,18,.96);display:grid;place-items:center;padding:4vmin} #video-modal video{max-width:100%;max-height:80vh;border-radius:var(--r-sm)} #video-modal-cerrar{position:absolute;top:22px;right:24px;background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);padding:12px 22px;color:#fff; font-size:14px;backdrop-filter:blur(8px);min-height:44px} .video-modal-nota{position:absolute;bottom:3vmin;left:0;right:0;text-align:center;color:var(--arena); font-size:10.5px;letter-spacing:.26em;text-transform:uppercase} /* ---------- autoplay "ver en 60 segundos" ---------- */ body.autoplay::after{content:"Reproduciendo · cualquier gesto te devuelve el control"; position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:var(--z-espina); color:var(--arena);font-size:10px;letter-spacing:.26em;text-transform:uppercase; background:rgba(30,25,18,.55);border:1px solid var(--hair-clara);border-radius:var(--r-pill); padding:10px 20px;backdrop-filter:blur(6px)} /* ========================================================================== CAPA DE CONVERSIÓN — misma voz editorial, cero aspecto de popup ========================================================================== */ .lead-fondo{position:fixed;inset:0;z-index:var(--z-lead-fondo);background:rgba(30,25,18,.72);backdrop-filter:blur(6px); animation:aparece .3s var(--curva)} @keyframes aparece{from{opacity:0}to{opacity:1}} .lead-modal{position:fixed;z-index:var(--z-lead-modal);left:50%;top:50%;transform:translate(-50%,-50%); width:min(520px,92vw);max-height:88svh;overflow:auto;background:var(--papel); border:1px solid var(--hair);border-radius:var(--r-sm);box-shadow:var(--sombra); padding:clamp(28px,5vw,44px);animation:sube-modal .38s var(--curva) both;color:var(--nogal)} @keyframes sube-modal{from{opacity:0;transform:translate(-50%,calc(-50% + 18px))}to{opacity:1;transform:translate(-50%,-50%)}} .lead-cerrar{position:absolute;top:10px;right:14px;font-size:28px;color:var(--tierra);padding:8px;line-height:1} .lead-kicker{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--tierra);margin-bottom:12px} .lead-modal h3{font-family:var(--serif);font-size:clamp(24px,3vw,30px);font-weight:500;line-height:1.2;margin-bottom:8px} .lead-sub{font-size:14.5px;color:var(--tierra);margin-bottom:26px;line-height:1.55} .lead-paso label{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tierra);margin-bottom:12px} .lead-modal input{width:100%;background:var(--blanco);border:1px solid var(--hair);border-radius:var(--r-sm); padding:16px 18px;font-size:17px;font-family:inherit;color:var(--nogal);margin-bottom:18px;min-height:52px} .lead-modal input:focus{outline:none;border-color:var(--amapola)} .lead-modal input::placeholder{color:#b3a48c} #quiz-form input{margin-bottom:14px} .lead-error{color:#a4432a;font-size:13.5px;margin:-10px 0 14px} .lead-fila{display:flex;gap:10px;justify-content:space-between} .lead-fila .btn-solido{flex:1} .lead-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px} .lead-chips.vertical{flex-direction:column} .chip{border:1px solid var(--hair);border-radius:var(--r-sm);padding:15px 18px;font-size:14.5px;color:var(--nogal); text-align:left;transition:all var(--t-fast);min-height:52px} .chip:hover{border-color:var(--amapola);color:var(--amapola)} .chip.activo{border-color:var(--amapola);color:var(--amapola);background:rgba(201,162,75,.07)} .lead-gracias{font-family:var(--serif);font-size:24px;line-height:1.3;margin-bottom:10px} .lead-nota{margin-top:24px;font-size:12px;color:var(--tierra);letter-spacing:.02em;line-height:1.5} .lead-exito a{color:var(--amapola)} :focus-visible{outline:2px solid var(--amapola);outline-offset:3px;border-radius:var(--r-sm)} /* quiz */ .quiz-progreso{display:flex;gap:6px;margin-bottom:22px} .quiz-progreso span{height:1px;flex:1;background:var(--hair);transition:background .3s} .quiz-progreso span.activo{background:var(--amapola)} .quiz-res-linea{font-family:var(--serif);font-size:21px;line-height:1.45;margin-bottom:26px;font-style:italic} /* CTA pegajoso */ .cta-fijo{position:fixed;z-index:var(--z-cta);right:24px;bottom:24px;display:flex;align-items:center;gap:11px; background:var(--noche);color:#f4efe6;border:1px solid var(--hair-clara);border-radius:var(--r-pill); padding:16px 26px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;min-height:52px; box-shadow:var(--e-cta);transition:transform .3s var(--curva),opacity .3s} .cta-fijo:hover{transform:translateY(-2px)} .cta-fijo.reposo{opacity:0;pointer-events:none;transform:translateY(8px)} /* durante el recorrido el minimapa ocupa la esquina inferior-derecha → el CTA sube encima de él */ body.en-viaje #cta-fijo{bottom:140px} @media (max-width:760px){body.en-viaje #cta-fijo{bottom:92px}} .cta-punto{width:8px;height:8px;border-radius:50%;background:var(--amapola);animation:pulso-punto 2.6s infinite} @keyframes pulso-punto{0%,100%{box-shadow:0 0 0 4px rgba(201,162,75,.28)}50%{box-shadow:0 0 0 9px rgba(201,162,75,.08)}} /* toast */ .toast{position:fixed;z-index:var(--z-toast);left:50%;bottom:26px;transform:translateX(-50%); display:flex;align-items:center;gap:var(--s-4);background:var(--noche);color:#f4efe6; border:1px solid var(--hair-clara);border-radius:var(--r-sm);padding:14px 20px;font-size:14px; box-shadow:var(--e-cta);animation:sube .35s var(--curva) both} .toast .btn-linea{color:var(--arena);border-color:var(--hair-clara);padding:9px 16px;min-height:40px} .toast .btn-linea:hover{color:var(--amapola);border-color:var(--amapola)} .toast-no{font-size:22px;color:var(--arena);padding:4px 8px} @keyframes sube{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}} /* móvil: el CTA fijo pasa a barra inferior completa (pulgar) */ @media (max-width:900px){ .cta-fijo{left:12px;right:12px;bottom:12px;justify-content:center;border-radius:var(--r-sm);padding:18px} .toast{bottom:78px;width:calc(100vw - 24px);justify-content:space-between} footer{padding-bottom:110px} } /* (≤820px el CTA YA NO se esconde: pasa a barra inferior persistente. Ver "v8 · BARRA DE CONVERSIÓN MÓVIL" al final del archivo.) */ @media (max-width:480px){ .lead-fila{flex-direction:column-reverse} } /* movimiento reducido: sin pulsos ni Ken Burns; el scrub sigue acoplado al dedo */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .cap-kenburns{animation:none} } /* ========================================================================== v4 · VERSIÓN MÓVIL DE ALTO NIVEL Pulgar primero: barra CTA inferior, menú de hoja completa, modales como bottom-sheet, progreso del viaje, tipografía para todas las generaciones. ========================================================================== */ /* botón ☰ del nav (solo móvil) */ #nav-menu-btn{display:none;flex-direction:column;gap:5px;padding:12px;margin:-6px -8px -6px 0;min-width:44px;min-height:44px;align-items:center;justify-content:center} #nav-menu-btn span{display:block;width:22px;height:1.5px;background:#f2ede2;transition:transform .3s var(--curva),opacity .3s} #nav-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} #nav-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} #nav-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* menú móvil de hoja completa */ #menu-movil{position:fixed;inset:0;z-index:var(--z-menu);background:var(--noche);color:#f4efe6; display:flex;flex-direction:column;padding:18px 26px 40px;overflow:auto; animation:aparece .28s var(--curva)} .menu-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px} .menu-flor{font-size:22px;color:var(--arena)} #menu-cerrar{font-size:32px;color:var(--arena);padding:8px 12px;min-height:44px} .menu-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(212,195,163,.55);margin:22px 0 6px} .menu-secciones,.menu-atajos{display:flex;flex-direction:column} .menu-secciones button,.menu-secciones a,.menu-atajos button{ font-family:var(--serif);font-size:clamp(26px,7vw,34px);font-weight:500;color:#f4efe6;text-align:left; padding:14px 0;border-bottom:1px solid rgba(212,195,163,.14);text-decoration:none;min-height:56px} .menu-atajos button{font-size:clamp(19px,5vw,24px);color:var(--arena)} .menu-secciones button:active,.menu-atajos button:active{color:var(--amapola)} .menu-ctas{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:14px;align-items:center} .menu-ctas .btn-outline{width:100%;text-align:center} .menu-ctas .link-mudo{margin-top:6px} /* barra de progreso del viaje (hairline amapola) */ #progreso-viaje{position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--z-progreso);display:none; background:var(--amapola);transform:scaleX(0);transform-origin:0 50%} @media (max-width:900px){ #nav{min-height:64px;padding:9px 14px;background:rgba(20,22,18,.44); backdrop-filter:blur(16px) saturate(1.22);-webkit-backdrop-filter:blur(16px) saturate(1.22)} #nav.solido{background:rgba(20,22,18,.58)} /* La hairline de progreso ya cumple esta función; la espina no queda escondida e interactiva debajo del vidrio de navegación. */ #espina{display:none!important} #nav-menu-btn{display:flex} .nav-links .nav-cta{margin-right:4px} #progreso-viaje{display:block} /* tipografía y aire para ojos de todas las edades */ .cap-texto.abajo-izq{left:20px;right:20px;bottom:calc(96px + 4svh);max-width:none;padding-right:0} .cap-texto h1{font-size:clamp(32px,9vw,44px)} .cap-texto h2{font-size:clamp(28px,7.6vw,38px)} .cap-texto p{font-size:17px;line-height:1.6} .cap-texto em{font-size:10.5px} .cap-texto::before{inset:-22px -18px; background:linear-gradient(100deg,rgba(24,19,13,.74) 0%,rgba(24,19,13,.5) 62%,rgba(24,19,13,.12) 100%)} .cap-texto.centro::before{inset:-30px -22px} .cap-texto.centro.bajo{padding-bottom:16svh} .hero-cta .btn-solido,.hero-cta .btn-outline{width:100%;max-width:340px;text-align:center;padding:18px 24px} .badge-360{top:auto;bottom:calc(20px + 2svh);right:16px;padding:8px 14px;font-size:11px} .respiro h2{font-size:clamp(28px,8vw,40px)} /* modales de conversión como bottom-sheet (patrón móvil nativo) */ .lead-modal{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;max-height:92svh; border-radius:18px 18px 0 0;border:none;padding:30px 22px calc(28px + env(safe-area-inset-bottom)); animation:sube-sheet .34s var(--curva) both} @keyframes sube-sheet{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}} .lead-cerrar{top:14px;right:16px} .chip{padding:17px 18px;font-size:15.5px} .lead-modal input{font-size:17px;min-height:56px} /* masterplan: tarjeta sobre la barra CTA */ .mp-tarjeta{bottom:86px} /* secciones */ .cta-seccion .btn-solido{width:100%;max-width:380px;padding:18px} #cierre h2{font-size:clamp(30px,8.4vw,42px)} } /* táctil: objetivos generosos en toda la experiencia */ @media (pointer:coarse){ .btn-linea,.btn-outline,.btn-solido{min-height:52px} .mp-pin{padding:18px} .esp-estacion{padding-top:14px;padding-bottom:14px} } /* ---------- respiro: los ejes como elementos visibles ---------- */ .respiro-ejes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:720px} .respiro-ejes span{display:flex;align-items:center;gap:var(--s-2);font-size:10.5px;letter-spacing:.26em; text-transform:uppercase;color:var(--tierra);border:1px solid var(--hair);border-radius:var(--r-pill); padding:10px 16px;min-height:40px} .respiro-ejes span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amapola)} @media (max-width:900px){ .respiro-ejes{flex-direction:column;align-items:stretch;max-width:300px} .respiro-ejes span{justify-content:center;padding:13px 16px;font-size:11.5px} } /* ========================================================================== v5 · VENDER LA NECESIDAD (patrón Vitalia: el dolor primero, la respuesta después) ========================================================================== */ /* versos del dolor en el respiro "¿Te suena esto?" */ .respiro-versos{display:flex;flex-direction:column;max-width:640px;width:100%} .respiro-versos p{font-family:var(--serif);font-size:clamp(20px,2.8vw,27px);font-weight:500; line-height:1.4;color:var(--nogal);padding:18px 0;border-top:1px solid var(--hair);text-align:center} .respiro-versos p:last-of-type{border-bottom:1px solid var(--hair)} /* sección de perfiles: dolor → respuesta → conversación */ .perfiles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);max-width:1100px;margin:0 auto} .perfil{background:var(--papel);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:14px} .perfil-num{font-size:10.5px;letter-spacing:.3em;color:var(--tierra)} .perfil h3{font-family:var(--serif);font-size:clamp(24px,2.8vw,30px);font-weight:500;color:var(--nogal)} .perfil-dolor{font-size:15.5px;line-height:1.6;color:var(--tierra);font-style:italic} .perfil-respuesta{font-size:16px;line-height:1.6;color:var(--nogal); border-left:2px solid var(--amapola);padding-left:16px;flex:1} .link-mudo-oscuro{align-self:flex-start;margin-top:6px;font-size:11px;letter-spacing:.3em; text-transform:uppercase;color:var(--nogal);padding:10px 0 6px;min-height:44px; border-bottom:1px solid var(--hair);transition:color var(--t-fast),border-color var(--t-fast)} .link-mudo-oscuro:hover{color:var(--amapola);border-color:var(--amapola)} .link-mudo-oscuro::after{content:" →"} @media (max-width:820px){ .perfiles-grid{grid-template-columns:1fr} .perfil h3{font-size:26px} } /* ========================================================================== v6 · CORTES DE ACTO (brief actos §3B): el respiro como divisor con intención ========================================================================== */ /* regla superior hairline que ancla el ojo sobre el kicker */ .respiro::before{content:"";position:absolute;top:15%;left:50%;transform:translateX(-50%); width:42px;height:1px;background:var(--tierra);opacity:.4} /* numeral romano de acto como marca de agua (papel-2 sobre papel, z tras el texto) */ .marca-agua{position:absolute;inset:0;display:grid;place-items:center;z-index:0; font-family:var(--serif);font-size:clamp(120px,22vw,260px);line-height:1; color:var(--papel-2);opacity:.55;user-select:none;pointer-events:none} .seg-hoja.respiro>*:not(.marca-agua){position:relative;z-index:1} /* cue de continuidad al pie: hairline + chevron flotante (el recorrido sigue) */ .respiro-cue{position:absolute;bottom:8.5%;left:50%;transform:translateX(-50%); width:1px;height:34px;background:var(--tierra);opacity:.35} .respiro-cue span{position:absolute;left:-3.5px;bottom:0;width:8px;height:8px; border-right:1px solid var(--tierra);border-bottom:1px solid var(--tierra); transform:rotate(45deg);opacity:.7;animation:flota 2.6s ease-in-out infinite} @media (max-width:900px){ .respiro::before{top:12%} .marca-agua{font-size:clamp(110px,34vw,190px)} .respiro-cue{bottom:11%} } /* === Respiros oscuros (kill white) + logo real — José 24-jul === */ .respiro{background:linear-gradient(rgba(20,16,10,.74),rgba(20,16,10,.88)),url("../assets/elevados-web/aerea-masterplan-1600.webp") center/cover no-repeat} .respiro h2{color:#F7F2E9} .respiro-kicker{color:var(--arena)} .entorno .respiro-kicker{color:#7A5C2F} .respiro-specs{color:var(--arena)} .respiro-versos p{color:#F7F2E9;border-color:rgba(212,195,163,.28)} .respiro-ejes span{color:#EFE7D9} .marca-agua{color:rgba(244,239,230,.07)} .nav-flor{width:38px;height:38px;object-fit:contain;display:block} .menu-flor{width:34px;height:34px;object-fit:contain;display:block} /* ---------- LOOP 2 · integración home → capas ---------- */ a.amen-card{text-decoration:none;color:inherit} .amen-ir{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--arena);opacity:0;transform:translateY(6px);transition:opacity .3s var(--curva),transform .3s var(--curva)} .amen-card:hover .amen-ir,.amen-card:focus-visible .amen-ir{opacity:1;transform:none} .perfil-acciones{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:auto} .perfil-acciones a{text-decoration:none} /* ---------- LOOP 4 · masterplan con panel vivo (lenguaje explorador) ---------- */ .mp-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(20px,3.5vw,44px); max-width:1280px;margin:0 auto;align-items:start} @media (max-width:960px){.mp-grid{grid-template-columns:1fr}} .mp-panel{position:sticky;top:92px;background:var(--noche);border-radius:var(--r-sm);overflow:hidden; box-shadow:var(--sombra);color:#EFE7D9} @media (max-width:960px){.mp-panel{position:static}} .mpp-foto{aspect-ratio:16/10;overflow:hidden} .mpp-foto img{width:100%;height:100%;object-fit:cover;transition:opacity .3s var(--curva)} .mpp-txt{padding:26px 28px 30px} .mpp-txt em{display:block;font-style:normal;font-size:10px;letter-spacing:.26em;text-transform:uppercase; color:var(--arena);margin-bottom:10px} .mpp-txt h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,28px);color:#F7F2E9; line-height:1.2;margin-bottom:12px} .mpp-txt p{font-size:15px;line-height:1.6;color:#DCCFBB;margin-bottom:20px} .mpp-links{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px} .mpp-links a{text-decoration:none;color:var(--arena);border-bottom-color:rgba(212,195,163,.4)} .mpp-links a:hover{color:var(--amapola);border-bottom-color:var(--amapola)} .mp-pin.activo .punto{background:#A87F3E;border-color:#A87F3E} /* ---------- LOOP 5 · Un día en Vista (síntesis de servicios, snap) ---------- */ .dia-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,320px);gap:18px; overflow-x:auto;padding:6px 2px 22px;scroll-snap-type:x mandatory;scrollbar-width:thin; max-width:1280px;margin:0 auto} @media(min-width:1100px){.dia-strip{grid-auto-columns:1fr;overflow:visible}} .dia-card{position:relative;aspect-ratio:3/4.1;border-radius:var(--r-sm);overflow:hidden; scroll-snap-align:start;text-decoration:none;box-shadow:var(--sombra)} .dia-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform var(--t-slow) var(--curva)} .dia-card:hover img{transform:scale(1.05)} .dia-velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,10,.85),transparent 55%)} .dia-txt{position:absolute;left:18px;right:18px;bottom:16px;color:#F4EFE6} .dia-txt em{display:block;font-style:normal;font-family:var(--serif);font-size:26px; color:var(--arena);margin-bottom:6px} .dia-txt h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:4px} .dia-txt p{font-size:13px;line-height:1.45;color:#E5DCCB} .dia-card:hover .dia-txt em{color:var(--amapola)} /* ---------- LOOP 6 · exploradores embebidos en el home ---------- */ .amen-explorador{max-width:1280px;margin:64px auto 0} .amen-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:26px;flex-wrap:wrap} .amen-tab{border:1px solid var(--hair);border-radius:var(--r-pill);padding:13px 24px;font-size:11px; letter-spacing:.22em;text-transform:uppercase;color:var(--tierra);transition:all .3s var(--curva);min-height:44px} .amen-tab:hover{border-color:var(--amapola);color:var(--amapola)} .amen-tab.activo{border-color:var(--amapola);color:var(--amapola);background:rgba(201,162,75,.06)} /* explorador (mismo lenguaje que servicios/tratamientos) */ .explorador{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(20px,3.5vw,44px);align-items:start} @media (max-width:960px){.explorador{grid-template-columns:1fr}} .expl-mapa{background:#fffdf8;border:1px solid var(--hair);border-radius:var(--r-sm);padding:clamp(14px,2.5vw,26px)} .expl-mapa svg{width:100%;height:auto;display:block} .expl-zona{fill:rgba(201,162,75,.06);stroke:var(--tierra);stroke-width:1.2;cursor:pointer; transition:fill .3s var(--curva),stroke .3s var(--curva)} .expl-zona:hover,.expl-zona:focus-visible{fill:rgba(201,162,75,.16);stroke:var(--amapola);outline:none} .expl-zona.sel{fill:rgba(201,162,75,.24);stroke:var(--amapola);stroke-width:1.8} .expl-etq{font-family:var(--sans);font-size:11px;letter-spacing:.06em;fill:var(--nogal);pointer-events:none} .expl-nota{margin-top:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--tierra)} .expl-panel{position:sticky;top:92px;background:var(--noche);border-radius:var(--r-sm);overflow:hidden; color:#EFE7D9;box-shadow:var(--sombra)} @media (max-width:960px){.expl-panel{position:static}} .expl-foto{aspect-ratio:16/10;overflow:hidden} .expl-foto img{width:100%;height:100%;object-fit:cover;transition:opacity .3s var(--curva)} .expl-txt{padding:24px 26px 28px} .expl-txt em{display:block;font-style:normal;font-size:10px;letter-spacing:.26em;text-transform:uppercase; color:var(--arena);margin-bottom:8px} .expl-txt h4{font-family:var(--serif);font-weight:500;font-size:23px;color:#F7F2E9;margin-bottom:8px} .expl-txt p{font-size:15px;line-height:1.55;color:#DCCFBB;margin-bottom:16px} .expl-txt a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--arena); text-decoration:none;border-bottom:1px solid var(--arena);padding-bottom:3px} .expl-txt a:hover{color:var(--amapola);border-color:var(--amapola)} /* ========================================================================== v7 · SISTEMA — tokens (175-187) · accesibilidad (167,168,173) · movimiento (1-14, 55-67, 79) · reduced-motion (162) Bloque ADITIVO: no reescribe reglas anteriores, solo consolida y amplía. ========================================================================== */ /* -------------------------------------------------------------------------- BREAKPOINTS (175) — documentados. CSS no admite var() en @media, así que estos tokens son el CONTRATO: si cambias un número aquí, cámbialo también en las media queries del archivo (19 en total). --bp-xs 480px · una sola columna estricta (lead-fila) --bp-sm 700px · listas de entorno a una columna --bp-md 760px · móvil: minimapa compacto, sellos y etiquetas fuera --bp-lg 820px · perfiles y explorador overlay a una columna --bp-xl 900px · nav hamburguesa, barra CTA inferior, espina-brújula --bp-2xl 960px · exploradores/masterplan a una columna --bp-3xl 1100px · "un día en Vista" deja de ser carrusel -------------------------------------------------------------------------- */ :root{ /* ---------- BREAKPOINTS (solo referencia/tooling) ---------- */ --bp-xs:480px; --bp-sm:700px; --bp-md:760px; --bp-lg:820px; --bp-xl:900px; --bp-2xl:960px; --bp-3xl:1100px; /* ---------- COLOR · canónicos y alias (175-176) ---------- Canónicos: --papel --papel-2 --arena --tierra --nogal --noche --amapola --oliva --oro --tinta --blanco Los alias legados apuntan al canónico de valor IDÉNTICO (cero cambio visual). --oro (#b98d4f) y --tinta (#3a2f24) se mantienen como canónicos propios: colapsarlos contra --arena/--nogal bajaría el contraste. */ --verde:var(--oliva); /* legado: #6B7052 === --oliva */ --verde-osc:var(--nogal); /* legado: #5C4632 === --nogal */ --oro-claro:var(--arena); /* legado: #D4C3A3 === --arena */ /* ---------- TEXTO SECUNDARIO ACCESIBLE (167) ---------- --tierra (#8A6D4E ≈3.6:1) y el legado --tinta-suave (#7a6a56 ≈4.0:1) NO pasan AA en texto pequeño sobre --papel. --texto-sec da 6.3:1. --tierra se conserva intacto para trazos, bordes y ornamento. */ --texto-sec:#6B5238; --tinta-suave:var(--texto-sec); /* alias legado → ahora accesible */ /* ---------- FOCO (173) ---------- --amapola sobre --papel da 2.98:1 (falla el 3:1 de componentes); sobre --noche da 5.1:1. Por eso hay una variante oscura para superficies claras, aplicada más abajo. */ --foco:var(--amapola); --foco-oscuro:#A33F1B; /* 5.6:1 sobre --papel */ /* ---------- TIEMPO (177) ---------- */ --t-fast:.25s; /* micro-interacción: hover, chips, pines */ --t-base:.4s; /* ENTRADAS — cadencia global de aparición */ --t-slow:.6s; /* SALIDAS — cadencia global de desaparición */ /* ---------- EASING POR TIPO (183) ---------- */ --ease-entrada:cubic-bezier(.22,.61,.36,1); /* desacelera al llegar */ --ease-salida:cubic-bezier(.45,0,.85,.35); /* acelera al irse */ --ease-enfasis:cubic-bezier(.34,1.46,.5,1); /* rebote elástico */ --curva:var(--ease-entrada); /* alias histórico */ /* ---------- ESPACIADO (178) ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:64px; /* ---------- RADIO (180) ---------- */ --r-sm:2px; /* editorial: casi recto, el radio del brochure */ --r-md:14px; /* lienzos y tarjetas grandes */ --r-pill:99px; /* píldoras y botones redondos */ --radio:var(--r-md); /* alias histórico */ /* ---------- ELEVACIÓN POR NIVEL (179) ---------- */ --e-nav:0 4px 24px rgba(0,0,0,.25); --e-card:0 14px 40px rgba(43,38,32,.18); --e-modal:0 24px 48px -24px rgba(30,25,18,.45); --e-cta:0 14px 34px rgba(30,25,18,.4); --sombra:var(--e-modal); /* alias histórico */ /* ---------- Z-INDEX NOMBRADOS (181) ---------- Escala única. Todo número suelto del archivo ya apunta aquí. */ --z-nav:60; --z-minimapa:55; --z-cap:55; --z-espina:56; --z-espina-movil:57; /* la hairline de progreso vive DEBAJO del nav (60) y fuera de su caja: se dibuja pegada al borde inferior del nav, nunca encima de él. */ --z-progreso:var(--z-espina-movil); --z-explorador:70; --z-tarjeta:70; --z-nodo:110; --z-cta:110; --z-toast:115; --z-pano:120; --z-modal:125; --z-menu:135; --z-lead-fondo:140; --z-lead-modal:150; } /* ========================================================================== ACCESIBILIDAD ========================================================================== */ /* ---- 167 · texto pequeño (<18px) sobre papel → token accesible ---- */ .perfil-dolor, .perfil-num, .lead-sub, .lead-kicker, .lead-nota, .lead-paso label, .mp-nota, .res-tabla dt, .expl-nota, .amen-tab{color:var(--texto-sec)} /* OJO: .respiro-specs y .respiro-ejes viven sobre el respiro OSCURO (línea "Respiros oscuros — José 24-jul"): mantienen --arena y NO se tocan. */ /* el aspa de cerrar es glifo grande, pero gana igual con más contraste */ .lead-cerrar,.mp-cerrar{color:var(--texto-sec)} /* espina sobre papel: ejes y estaciones legibles */ #espina.sobre-papel .esp-cap-ejes{color:var(--texto-sec)} #espina.sobre-papel .esp-estacion span{color:rgba(107,82,56,.72)} /* espina sobre noche: los ejes subían justos de contraste */ .esp-cap-ejes{color:rgba(212,195,163,.78)} /* ---- 168 · área táctil ≥44px en el enlace mudo (antes 11px + 6px) ---- */ .link-mudo{ display:inline-block;min-height:44px; font-size:12.5px;letter-spacing:.28em;line-height:1.2; padding:16px 6px 13px;margin-top:var(--s-1); transition:opacity var(--t-fast) var(--ease-entrada), border-color var(--t-fast) var(--ease-entrada), color var(--t-fast) var(--ease-entrada)} #cierre .link-mudo{margin-top:20px} @media (pointer:coarse){.link-mudo{padding-left:var(--s-2);padding-right:var(--s-2)}} /* ---- 173 · foco visible con contraste en AMBOS mundos ---- */ :focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:var(--r-sm)} /* superficies claras (papel/blanco): el naranja no llega a 3:1 → se oscurece */ .bloque :focus-visible, .seg-papel :focus-visible, .lead-modal :focus-visible, .mp-tarjeta :focus-visible, .perfil :focus-visible, .apto-marco :focus-visible, .galeria-marco :focus-visible, .res-grid :focus-visible, .ficha-grid :focus-visible{outline-color:var(--foco-oscuro)} /* el explorador SVG marca el foco con relleno propio: se respeta */ .expl-mapa .expl-zona:focus-visible{outline:none} /* superficies oscuras dentro de bloques claros: vuelve el naranja (5.1:1) */ .mp-panel :focus-visible, .expl-panel :focus-visible, .amen-card:focus-visible, .dia-card:focus-visible{outline-color:var(--foco)} /* ========================================================================== MOVIMIENTO · cadencia global: ENTRA en --t-base (.4s), SALE en --t-slow (.6s) ========================================================================== */ /* ---- 55-67 · scroll-reveal utilitario (el JS solo añade/quita .visible) ---- CONTRATO con js/motion.js: · html.motion-on → solo con JS vivo se permite esconder .reveal (sin JS la página se ve entera: progressive enhancement) · .reveal / .reveal.visible → estado inicial / revelado · --d (delay) por elemento; [data-stagger]>* lo escribe el JS inline, o usa .reveal-1..8 / .reveal-stagger desde el HTML. POR QUÉ `translate` Y NO `transform`: hay elementos que YA usan transform para posicionarse (.mp-pin translate(-50%,-100%), .expl-zona, .mm-zona, .apto-hab) o para hover (.res-fotos img:hover scale). La propiedad independiente `translate` se compone ANTES que `transform`, así que el reveal no pisa ninguno. */ html.motion-on .reveal{opacity:0;translate:0 16px} html.motion-on .reveal.visible{opacity:1;translate:none} .reveal{ transition:opacity var(--t-base) var(--ease-entrada) var(--d,0s), translate var(--t-base) var(--ease-entrada) var(--d,0s), filter var(--t-base) var(--ease-entrada) var(--d,0s); will-change:opacity,translate} .reveal.visible{filter:none} /* salida: más lenta y con desenfoque, según la cadencia */ .reveal.saliendo{ opacity:0;translate:0 -10px;filter:blur(4px); transition:opacity var(--t-slow) var(--ease-salida), translate var(--t-slow) var(--ease-salida), filter var(--t-slow) var(--ease-salida)} /* pines y marcadores del mapa: solo opacidad, jamás desplazamiento */ html.motion-on .reveal[data-reveal="pin"], html.motion-on .mp-pin.reveal, html.motion-on .expl-zona.reveal, html.motion-on .mm-zona.reveal, html.motion-on .apto-hab.reveal{translate:none} .reveal-1{--d:.06s}.reveal-2{--d:.12s}.reveal-3{--d:.18s}.reveal-4{--d:.24s} .reveal-5{--d:.30s}.reveal-6{--d:.36s}.reveal-7{--d:.42s}.reveal-8{--d:.48s} /* stagger automático para hijos directos de un contenedor marcado */ .reveal-stagger>*:nth-child(1){--d:0s} .reveal-stagger>*:nth-child(2){--d:.06s} .reveal-stagger>*:nth-child(3){--d:.12s} .reveal-stagger>*:nth-child(4){--d:.18s} .reveal-stagger>*:nth-child(5){--d:.24s} .reveal-stagger>*:nth-child(6){--d:.30s} .reveal-stagger>*:nth-child(7){--d:.36s} .reveal-stagger>*:nth-child(8){--d:.42s} /* ---- 79 · blur-out ligero en la salida de textos sobre video ---- El scrub de viaje.js escribe opacity/transform inline; filter queda libre, así que el desenfoque se ata a la señal compartida body.hay-texto. */ .cap-texto{transition:filter var(--t-slow) var(--ease-salida)} body.en-viaje:not(.hay-texto) .cap-texto, .cap-texto.saliendo{filter:blur(4px)} body.hay-texto .cap-texto{filter:none;transition:filter var(--t-base) var(--ease-entrada)} /* ---- 1-14 · nav transparente → sólido con blur PROGRESIVO ---- */ #nav{ backdrop-filter:blur(18px) saturate(1.28); -webkit-backdrop-filter:blur(18px) saturate(1.28); transition:background var(--t-base) var(--ease-entrada), border-color var(--t-base) var(--ease-entrada), backdrop-filter var(--t-base) var(--ease-entrada), -webkit-backdrop-filter var(--t-base) var(--ease-entrada), box-shadow var(--t-base) var(--ease-entrada)} #nav.solido{ backdrop-filter:blur(24px) saturate(1.38); -webkit-backdrop-filter:blur(24px) saturate(1.38)} /* ---- halo cálido que "respira" detrás del CTA fijo ---- */ .cta-fijo::before{ content:"";position:absolute;inset:-14px;z-index:-1;border-radius:inherit; background:radial-gradient(60% 60% at 50% 50%, rgba(201,162,75,.45) 0%,rgba(201,162,75,.18) 45%,rgba(201,162,75,0) 72%); filter:blur(10px);pointer-events:none; animation:halo-respira 5.4s ease-in-out infinite} @keyframes halo-respira{ 0%,100%{transform:scale(.94);opacity:.42} 50% {transform:scale(1.06);opacity:.85}} .cta-fijo:hover::before{opacity:.95} /* ---- micro-interacción: el pin del explorador rebota al activarse ---- */ .expl-zona.activa .expl-pin{ transform:scale(1.12); animation:pin-rebote var(--t-slow) var(--ease-enfasis)} .expl-zona.activa:hover .expl-pin{transform:scale(1.3)} @keyframes pin-rebote{ 0% {transform:scale(.55)} 42% {transform:scale(1.42)} 70% {transform:scale(.96)} 100%{transform:scale(1.12)}} /* ---- utilidad de parallax (transform lo escribe el JS; aquí solo la promesa) ---- */ .parallax,[data-parallax]{will-change:transform} /* ========================================================================== 162 · MOVIMIENTO REDUCIDO — apaga TODO lo anterior (el bloque original ya neutraliza duraciones; aquí se desmontan además los estados finales, los bucles infinitos y los desenfoques) ========================================================================== */ @media (prefers-reduced-motion:reduce){ .cap-kenburns, .cta-fijo::before, .expl-zona.activa .expl-pin, .minimapa-punto::after, .cta-punto, .badge-360, .cap-scroll span, .respiro-cue span, .apto-hab.activa .apto-punto, .lead-fondo,.lead-modal,.toast,#menu-movil{animation:none!important} /* reveals: contenido siempre presente, sin desplazamiento ni desenfoque */ html.motion-on .reveal, .reveal,.reveal.visible,.reveal.saliendo{ opacity:1!important;translate:none!important;filter:none!important; transition:none!important} /* blur-out de textos sobre video */ .cap-texto,.cap-texto.saliendo, body.en-viaje:not(.hay-texto) .cap-texto{filter:none!important} /* halo del CTA: se queda quieto y tenue */ .cta-fijo::before{transform:none!important;opacity:.35!important} /* rebote del pin: estado final directo */ .expl-zona.activa .expl-pin, .expl-zona.activa:hover .expl-pin{transform:scale(1.12)!important} /* parallax y Ken Burns: sin desplazamiento */ .parallax,[data-parallax],.cap-kenburns{transform:none!important;will-change:auto} /* el nav mantiene su blur, pero sin transición */ #nav,#nav.solido{transition:none!important} } /* ========================================================================== v8 · AUDITORÍA EN NAVEGADOR REAL (26-jul) — 55-75 años, mayoría móvil Bloque ADITIVO y FINAL. No reescribe las olas anteriores: las corrige. 1 · carriles — #cta-fijo y #minimapa nunca comparten esquina 2 · barra inferior ÚNICA de conversión en móvil, con espacio reservado 3 · safe-area superior (viewport-fit=cover · Dynamic Island) 4 · tipografía ≥16px en todo lo que se lee o se pulsa 5 · medida editorial 45-75 caracteres por línea 6 · contraste AA del texto sobre video en cualquier fotograma 7 · objetivos táctiles ≥44px 8 · orden z — la hairline de progreso ya no pisa el nav ========================================================================== */ :root{ /* ---------- ALTURAS DE LOS ELEMENTOS FIJOS (contrato de carriles) ---------- Si cambias una, cambia también la regla que la mide. */ --nav-alto:72px; /* min-height del nav en escritorio */ --nav-alto-movil:64px; /* min-height del nav ≤900px */ --barra-cta-alto:60px; /* alto útil de la barra CTA móvil (sin safe-area) */ --minimapa-alto:116px; /* 184px de ancho · aérea 368×224 + borde */ --carril-inferior:calc(var(--barra-cta-alto) + env(safe-area-inset-bottom,0px)); /* ---------- MEDIDA EDITORIAL (45-75 caracteres por línea) ---------- Inter tiene el glifo «0» ancho (~0.63em), así que 1ch ≈ 1,26 caracteres reales: 56ch ≈ 70 CPL medidos, 46ch ≈ 58 CPL. Verificado en navegador. */ --medida:56ch; --medida-corta:46ch; /* ---------- ESCALA TIPOGRÁFICA (NIA/W3C: ≥16px para 55-75 años) ---------- --tx-* = texto que se LEE o se PULSA. Nunca baja de 16px. --et-* = etiqueta decorativa (kicker, numeral, pin). No es contenido. */ --tx-base:17px; /* párrafo estándar */ --tx-sm:16px; /* mínimo absoluto: notas, pies, micro-CTA */ --tx-lg:18px; /* párrafo destacado en móvil */ --et-base:13px; /* kicker / eyebrow */ --et-sm:12.5px; /* numerales de pin, sellos */ } /* ========================================================================== 3 · SAFE-AREA SUPERIOR — nada queda bajo la Dynamic Island ========================================================================== */ #nav{ padding-top:calc(12px + env(safe-area-inset-top,0px)); min-height:calc(var(--nav-alto) + env(safe-area-inset-top,0px))} #menu-movil{ padding-top:calc(18px + env(safe-area-inset-top,0px)); padding-bottom:calc(var(--s-7) + env(safe-area-inset-bottom,0px))} #pano-overlay-cerrar,#video-modal-cerrar{top:calc(22px + env(safe-area-inset-top,0px))} .badge-360{top:calc(86px + env(safe-area-inset-top,0px))} /* el foco y los saltos de ancla aterrizan en zona visible, nunca bajo el nav ni bajo la barra de conversión */ html{ scroll-padding-top:calc(var(--nav-alto) + env(safe-area-inset-top,0px) + var(--s-4)); scroll-padding-bottom:calc(var(--carril-inferior) + var(--s-4))} @media (max-width:900px){ #nav{ padding-top:calc(9px + env(safe-area-inset-top,0px)); min-height:calc(var(--nav-alto-movil) + env(safe-area-inset-top,0px))} html{scroll-padding-top:calc(var(--nav-alto-movil) + env(safe-area-inset-top,0px) + var(--s-4))} .badge-360{top:auto} } /* ========================================================================== 8 · LA HAIRLINE DE PROGRESO SE DIBUJA BAJO EL NAV, NO ENCIMA (--z-progreso ya apunta a --z-espina-movil, por debajo de --z-nav) ========================================================================== */ #progreso-viaje{ top:calc(var(--nav-alto-movil) + env(safe-area-inset-top,0px)); height:3px} /* ========================================================================== 1 · CARRILES · el CTA flotante y el minimapa jamás se solapan Fuera del recorrido el minimapa no existe (viaje.js solo le pone .visible dentro del viaje): sin caja, no hay solape posible con el CTA. Dentro del recorrido el CTA sube por encima de su carril. ========================================================================== */ #minimapa:not(.visible){display:none} body.en-viaje #cta-fijo{ bottom:calc(22px + var(--minimapa-alto) + var(--s-3))} /* ========================================================================== 2 · MÓVIL · barra inferior ÚNICA de conversión · ocupa el ancho completo, al alcance del pulgar · respeta env(safe-area-inset-bottom) · RESERVA espacio real en el documento (padding-bottom del body): jamás tapa contenido, formulario ni foco · el CTA del nav se retira: un solo elemento fijo de conversión ========================================================================== */ @media (max-width:900px){ body{padding-bottom:calc(var(--carril-inferior) + var(--s-2))} footer{padding-bottom:var(--s-7)} /* Un solo camino de conversión fijo: la barra. Los destinos del nav (hoy , antes