/* =========================================================== Visionary Deluxe — «Niebla y madera» Un sitio que respira: aire, silencio, imagen grande, texto mínimo. Cero oro, cero flor de lis, cero cifras. (Ver specs/visionary-deluxe.spec.md) =========================================================== */ /* Display: EB Garamond variable 400..800 (+ itálica estática, que carga las frases de la marca). Texto: Jost variable. Autohospedadas: ninguna llamada a fonts.googleapis.com. Cobertura de Á É Í Ó Ú Ñ ü ¿ ¡ verificada. */ @font-face{font-family:'EB Garamond';src:url('fonts/ebgaramond-var.woff2?v=20260915') format('woff2');font-weight:400 800;font-style:normal;font-display:swap} @font-face{font-family:'EB Garamond';src:url('fonts/ebgaramond-var-italic.woff2?v=20260915') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Jost';src:url('fonts/jost-var.woff2?v=20260915') format('woff2');font-weight:300 600;font-style:normal;font-display:swap} :root{ --niebla:#F4F6F3; --niebla-2:#E9EDE7; --tinta:#1E241F; --tinta-2:#4B554A; --verde:#2B3B31; --musgo:#7C8B76; --madera:#9A6F45; --blanco:#FBFCFA; --disp:'EB Garamond',Georgia,'Times New Roman',serif; --text:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif; --maxw:1120px; --pad:clamp(20px,5vw,56px); --navh:58px; --proph:0px; --ease:cubic-bezier(.2,.7,.3,1); /* Altura de la barra de propuesta reservada en el body */ --prop-bot:66px; --prop-top:0px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--niebla); color:var(--tinta); font-family:var(--text); font-weight:300; font-size:clamp(16.5px,1.02vw,18.5px); line-height:1.74; letter-spacing:.006em; overflow-x:hidden; padding-bottom:calc(var(--prop-bot) + env(safe-area-inset-bottom,0px)); } html.prop-off body{padding-bottom:0} img{max-width:100%;height:auto;display:block} a{color:inherit;text-underline-offset:.22em} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;line-height:1.08;letter-spacing:-.012em} em{font-style:italic} strong{font-weight:500} :focus-visible{outline:2px solid var(--madera);outline-offset:3px;border-radius:2px} .wrap{width:min(var(--maxw),100% - var(--pad)*2);margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;background:var(--verde);color:var(--blanco);padding:10px 16px;z-index:300} .skip:focus{left:8px;top:8px} #dilema,#sentir,#caminos,#faq,#cierre,#top{scroll-margin-top:calc(var(--navh) + 16px)} /* ---------- Botones y enlaces ---------- */ .btn{ display:inline-block;font-family:var(--text);font-weight:400;font-size:.95rem; letter-spacing:.07em;text-transform:uppercase;text-decoration:none; padding:.95em 1.7em;border:1px solid var(--verde);background:var(--verde);color:var(--blanco); border-radius:1px;transition:background .22s var(--ease),color .22s var(--ease),transform .12s var(--ease); } .btn:hover{background:transparent;color:var(--verde)} .btn:active{transform:scale(.985)} .btn-lg{padding:1.05em 2.2em;font-size:1rem} .lnk{ font-family:var(--text);font-weight:400;font-size:.95rem;letter-spacing:.06em; text-decoration:none;border-bottom:1px solid rgba(154,111,69,.45);padding-bottom:.18em; color:var(--madera);transition:border-color .22s var(--ease),color .22s var(--ease); } .lnk:hover{color:var(--tinta);border-color:var(--tinta)} .eyebrow{ font-family:var(--text);font-weight:400;font-size:.76rem;letter-spacing:.24em; text-transform:uppercase;color:var(--musgo);margin:0 0 1.6em; } /* ---------- REVEAL ROBUSTO ---------- El estado oculto SOLO existe si el JS pudo encender .is-anim en . Sin JS, sin IntersectionObserver o con reduced-motion: todo visible. */ html.is-anim [data-r]{ opacity:0;transform:translate3d(0,18px,0); transition:opacity .66s var(--ease),transform .66s var(--ease); } html.is-anim [data-r].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.is-anim [data-r]{opacity:1;transform:none;transition:none} } /* =========================================================== CAPA DE PROPUESTA — sistema neutro de Panoramic, a propósito fuera del lenguaje visual del sitio. =========================================================== */ .propbar{ position:fixed;left:0;right:0;bottom:0;z-index:150; display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:10px calc(14px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px)); background:#14161A;color:#D6D9DE; font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12.5px;line-height:1.45;font-weight:400; border-top:1px solid #2A2E36; } html.prop-off .propbar{display:none} .propbar-t{margin:0;flex:1 1 210px;min-width:0} .propbar-t strong{color:#fff;font-weight:600} .propbar-b{ flex:0 0 auto;font:inherit;color:#14161A;background:#E8EAEE;border:0;border-radius:2px; padding:7px 12px;cursor:pointer;white-space:nowrap; } .propbar-b:hover{background:#fff} .propbar-x{ flex:0 0 auto;font:inherit;font-size:20px;line-height:1;color:#8A9098;background:transparent;border:0; cursor:pointer;padding:2px 6px; } .propbar-x:hover{color:#fff} .propreopen{ position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:150; font-family:system-ui,sans-serif;font-size:11.5px;color:#D6D9DE;background:#14161A;border:1px solid #2A2E36; border-radius:2px;padding:6px 10px;cursor:pointer; } .propreopen[hidden]{display:none} @media (min-width:900px){ :root{--prop-top:38px} body{padding-bottom:0;padding-top:var(--prop-top)} html.prop-off body{padding-top:0} .propbar{top:0;bottom:auto;border-top:0;border-bottom:1px solid #2A2E36;flex-wrap:nowrap;padding:8px 20px;min-height:var(--prop-top)} .propreopen{top:8px;right:14px;bottom:auto} } /* A PRUEBA DE FALLOS: oculto por defecto; solo visible cuando NO está [hidden] */ .prop-modal{display:none;position:fixed;inset:0;z-index:200;place-items:center;padding:18px} .prop-modal:not([hidden]){display:grid} .prop-back{position:absolute;inset:0;background:rgba(12,14,17,.74)} .prop-card{ position:relative;width:min(560px,100%);max-height:86vh;overflow:auto; background:#14161A;color:#C9CDD4;border:1px solid #2A2E36;border-radius:3px; padding:clamp(22px,4vw,34px); font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14.5px;line-height:1.65;font-weight:400; } .prop-x{position:absolute;top:8px;right:10px;font-size:24px;line-height:1;color:#8A9098;background:transparent;border:0;cursor:pointer;padding:4px 8px} .prop-x:hover{color:#fff} .prop-kicker{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7D848E} .prop-title{margin:0 0 14px;font-family:inherit;font-size:20px;line-height:1.25;font-weight:600;color:#fff;letter-spacing:0} .prop-card ul{margin:0 0 16px;padding-left:18px} .prop-card li{margin:0 0 7px} .prop-cta a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid #4A5059} .prop-cta a:hover{border-color:#fff} /* =========================================================== NAV =========================================================== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100;height:var(--navh); display:flex;align-items:center; transition:background .3s var(--ease),border-color .3s var(--ease); border-bottom:1px solid transparent; } @media (min-width:900px){ .nav{top:var(--prop-top)} html.prop-off .nav{top:0} } /* Sobre el hero la nav no tiene caja, pero sí un velo propio: el texto blanco mantiene contraste aunque debajo pase la parte más clara de la foto. */ .nav:not(.scrolled){ background:linear-gradient(to bottom,rgba(20,28,22,.52) 0%,rgba(20,28,22,.22) 58%,rgba(20,28,22,0) 100%); } .nav.scrolled{background:var(--niebla);border-bottom-color:rgba(124,139,118,.3)} .nav-in{width:min(var(--maxw),100% - var(--pad)*2);margin-inline:auto;display:flex;align-items:center;gap:18px} .mark{ font-family:var(--disp);font-size:1.12rem;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;color:var(--blanco);white-space:nowrap;transition:color .3s var(--ease); } .mark span{font-style:italic;letter-spacing:.06em;text-transform:none;font-size:1.22rem} /* Sobre el hero el wordmark lo lleva el propio hero: la nav no lo repite ni se le monta encima al hacer scroll. Aparece cuando el hero ya quedó atrás. */ .mark{opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s,color .3s var(--ease)} .nav.scrolled .mark{opacity:1;visibility:visible;color:var(--tinta)} .nav-links{display:none;margin-left:auto;gap:26px} @media (min-width:860px){.nav-links{display:flex}} .nav-links a{ font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;text-decoration:none; color:rgba(251,252,250,.88);transition:color .3s var(--ease),opacity .2s var(--ease); } .nav.scrolled .nav-links a{color:var(--tinta-2)} .nav-links a:hover{color:var(--madera)} .nav-cta{ margin-left:auto;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--blanco);border-bottom:1px solid rgba(251,252,250,.5);padding-bottom:.2em; transition:color .3s var(--ease),border-color .3s var(--ease); } @media (min-width:860px){.nav-cta{margin-left:26px}} .nav.scrolled .nav-cta{color:var(--verde);border-color:var(--madera)} .nav-cta:hover{color:var(--madera);border-color:var(--madera)} /* =========================================================== 1 · HERO — «La niebla que se levanta» El estado POR DEFECTO es DESPEJADO: sin JS y con reduced-motion la capa de niebla es invisible (opacity 0) y nunca tapa nada. =========================================================== */ .hero{ position:relative;isolation:isolate; min-height:100svh;min-height:100vh; display:flex;align-items:flex-end; padding:calc(var(--navh) + 24px) 0 clamp(52px,10vh,104px); overflow:hidden;background:var(--verde); } .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 58%} /* En vertical el recorte se baja: manda la casa y la ladera, no el cielo. */ /* Con el recorte vertical (0.75) en una caja mas alta, cover escala por altura y desborda en horizontal: manda la X, no la Y. Centrado. */ @media (max-width:700px){.hero-img{object-position:50% 50%}} @media (prefers-reduced-motion:no-preference){ /* Ken Burns one-shot: entra levemente ampliada y se asienta. Nunca en bucle. */ .hero-img{animation:kb 20s cubic-bezier(.16,.6,.24,1) forwards} @keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}} } .hero-veil{ position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(to bottom,rgba(20,28,22,.40) 0%,rgba(20,28,22,.12) 14%,rgba(20,28,22,0) 28%), linear-gradient(to top,rgba(20,28,22,.86) 0%,rgba(20,28,22,.62) 30%,rgba(20,28,22,.22) 58%,rgba(20,28,22,0) 84%); } /* --- la niebla --- */ .hero-fog{position:absolute;inset:-6% -6% -12%;z-index:-1;pointer-events:none;opacity:0;will-change:transform} .hero-fog.live{opacity:1;animation:fogSettle 1500ms cubic-bezier(.16,.7,.22,1) both} @keyframes fogSettle{from{transform:translate3d(0,3.5vh,0)}to{transform:translate3d(0,0,0)}} .hero-fog[hidden]{display:none} .fog-l{position:absolute;inset:0;display:block;will-change:transform,opacity} /* La niebla se queda ARRIBA, sobre el valle, y se adelgaza en el tercio inferior: ahí vive el texto, que nunca puede perder contraste. */ .fog-1{ background:linear-gradient(to top, rgba(238,242,238,0) 0%,rgba(238,242,238,.18) 16%,rgba(238,242,238,.72) 38%, rgba(238,242,238,.96) 62%,rgba(238,242,238,.99) 100%); opacity:var(--f,0); transform:translate3d(0,calc((1 - var(--f,0)) * -7vh),0); } .fog-2{ background: radial-gradient(58% 34% at 24% 46%,rgba(247,249,246,.94) 0%,rgba(247,249,246,0) 74%), radial-gradient(50% 30% at 80% 34%,rgba(240,244,240,.88) 0%,rgba(240,244,240,0) 72%); opacity:calc(var(--f,0) * var(--f,0)); transform:translate3d(0,calc((1 - var(--f,0)) * -16vh),0); } .fog-3{ background: radial-gradient(72% 40% at 50% 14%,rgba(250,251,249,.94) 0%,rgba(250,251,249,0) 76%); opacity:calc(var(--f,0) * var(--f,0) * var(--f,0)); transform:translate3d(0,calc((1 - var(--f,0)) * -26vh),0); } /* En escritorio el body baja por la barra de propuesta: el hero descuenta ese alto para seguir siendo exactamente una pantalla. */ @media (min-width:900px){ .hero{min-height:calc(100svh - var(--prop-top));min-height:calc(100vh - var(--prop-top))} html.prop-off .hero{min-height:100svh;min-height:100vh} } /* En móvil la barra de propuesta se posa sobre el borde inferior del hero: se le devuelve ese alto para que el CTA nunca quede debajo. */ @media (max-width:899px){ .hero{padding-bottom:calc(clamp(52px,10vh,104px) + var(--prop-bot))} /* En movil los momentos tambien se derraman al borde: la promesa del sitio es imagen grande y atmosfera, y con canaleta a los lados quedaba convencional. */ /* Especificidad (0,3,0) para ganarle a `.momento figure{margin:0}` sea cual sea el orden del archivo, y margenes negativos del ancho de la canaleta en vez de 100vw (100vw incluye la barra de scroll y metia 13-14px de paneo lateral en tablet). */ .sentir .momento figure{margin-inline:calc(-1 * var(--pad));width:auto;max-width:none;transform:none} .sentir .momento img{border-radius:0} html.prop-off .hero{padding-bottom:clamp(52px,10vh,104px)} } .hero-body{position:relative;z-index:1;width:100%;color:var(--blanco)} .hero-mark{ font-family:var(--disp);font-size:clamp(.92rem,1.5vw,1.08rem);letter-spacing:.32em; text-transform:uppercase;color:rgba(251,252,250,.9);margin:0 0 clamp(16px,3vh,28px); } .hero h1{ font-size:clamp(2.5rem,7.2vw,5.1rem);line-height:1.04;letter-spacing:-.018em; font-weight:400;color:var(--blanco);margin:0 0 clamp(18px,3vh,30px); text-wrap:balance; } .hero-lede{ max-width:33ch;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.72; color:rgba(251,252,250,.92);margin:0 0 clamp(26px,4.5vh,40px); } .hero-lede strong{font-weight:500;color:#fff} .hero-act{display:flex;align-items:center;gap:clamp(18px,3vw,30px);flex-wrap:wrap;margin:0} .hero-act .btn{border-color:var(--blanco);background:var(--blanco);color:var(--verde)} .hero-act .btn:hover{background:transparent;color:var(--blanco)} .hero-act .lnk{color:rgba(251,252,250,.92);border-color:rgba(251,252,250,.5)} .hero-act .lnk:hover{color:#fff;border-color:#fff} .hero-hint{ position:absolute;left:50%;bottom:18px;width:1px;height:clamp(28px,5vh,46px); background:linear-gradient(to bottom,rgba(251,252,250,0),rgba(251,252,250,.75)); transform:translateX(-50%); } @media (prefers-reduced-motion:no-preference){ .hero-hint{animation:hint 3.4s ease-in-out 1.6s 3 both;transform-origin:50% 100%} @keyframes hint{0%,100%{opacity:.35;transform:translateX(-50%) scaleY(.7)}50%{opacity:.9;transform:translateX(-50%) scaleY(1)}} } @media (max-width:640px){.hero-hint{display:none}} /* =========================================================== RITMO DE SECCIONES — separa el aire, no las líneas =========================================================== */ .dilema,.sentir,.caminos,.faq,.cierre{ width:min(var(--maxw),100% - var(--pad)*2);margin-inline:auto; padding-block:clamp(78px,12vh,136px); } .sentir h2,.caminos h2,.faq h2{ font-size:clamp(2rem,4.4vw,3.2rem);margin:0 0 clamp(36px,6vh,64px);letter-spacing:-.015em; } /* =========================================================== 2 · EL FALSO DILEMA Estado POR DEFECTO (sin JS / reduced-motion): --t = 1, es decir columnas YA UNIDAS, filete invisible y la frase visible. El JS baja --t a 0 y lo devuelve a 1 ligado al scroll. =========================================================== */ .dilema{--t:1;text-align:center;max-width:960px} .dil-intro{ font-family:var(--disp);font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.42; color:var(--tinta-2);max-width:26ch;margin:0 auto clamp(46px,8vh,84px); } .dil-stage{ display:grid;grid-template-columns:1fr auto 1fr;align-items:start; gap:clamp(14px,2.4vw,34px);margin:0 auto clamp(34px,6vh,58px); width:min(680px,100%); } .dil-col{min-width:0;will-change:transform} .dil-a{transform:translate3d(calc((1 - var(--t)) * -7vw),0,0)} .dil-b{transform:translate3d(calc((1 - var(--t)) * 7vw),0,0)} .dil-col h3{ font-size:clamp(1.5rem,3.4vw,2.35rem);color:var(--verde);margin:0 0 .5em;letter-spacing:-.01em; } .dil-col p{font-size:.98rem;line-height:1.66;color:var(--tinta-2);max-width:24ch;margin:0 auto} .dil-rule{ display:block;width:1px;align-self:stretch;min-height:88px; background:linear-gradient(to bottom,rgba(124,139,118,0),rgba(124,139,118,.8),rgba(124,139,118,0)); opacity:calc(1 - var(--t)); } .dil-frase{ font-family:var(--disp);font-size:clamp(1.75rem,4.6vw,3.35rem);line-height:1.18; color:var(--tinta);max-width:20ch;margin:0 auto .5em;letter-spacing:-.016em; opacity:var(--t);transform:translate3d(0,calc((1 - var(--t)) * 14px),0); } .dil-sub{ font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--musgo); opacity:var(--t);margin:0; } @media (max-width:640px){ .dil-stage{grid-template-columns:1fr;gap:26px;justify-items:center} .dil-rule{width:min(180px,60%);height:1px;min-height:0;align-self:center; background:linear-gradient(to right,rgba(124,139,118,0),rgba(124,139,118,.8),rgba(124,139,118,0))} .dil-a{transform:translate3d(calc((1 - var(--t)) * -12vw),0,0)} .dil-b{transform:translate3d(calc((1 - var(--t)) * 12vw),0,0)} } /* =========================================================== 3 · LO QUE SE SIENTE — tres momentos, imagen grande, texto mínimo =========================================================== */ .momento{margin:0 0 clamp(72px,13vh,140px)} .momento:last-child{margin-bottom:0} .momento figure{margin:0} .momento img{width:100%;border-radius:2px} .mom-txt{padding-top:clamp(18px,3vh,30px)} .mom-n{ font-family:var(--disp);font-style:italic;font-size:clamp(1.15rem,2vw,1.45rem); color:var(--madera);margin:0 0 .35em; } .mom-p{ font-family:var(--disp);font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.34; color:var(--tinta);max-width:22ch;margin:0;letter-spacing:-.01em; } @media (min-width:900px){ .momento{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,1fr);align-items:center; column-gap:clamp(34px,5vw,70px)} .mom-txt{padding-top:0} .m-2{grid-template-columns:minmax(0,1fr) minmax(0,1.58fr)} .m-2 figure{order:2} .m-2 .mom-txt{order:1} /* Desfase vertical: ninguna fila se alinea con la anterior */ .m-1{margin-inline-end:clamp(0px,6vw,90px)} .m-2{margin-inline-start:clamp(0px,6vw,90px)} .m-3{margin-inline-end:clamp(0px,3vw,48px)} } /* Imagen grande de verdad: cada momento se derrama hasta el borde de la página por el lado que le toca. (body tiene overflow-x:hidden.) */ @media (min-width:1100px){ /* distancia del borde de la columna de texto al borde de la ventana */ .sentir{--bleed:calc((100vw - min(var(--maxw),100vw - var(--pad) * 2)) / 2)} .m-1 figure,.m-3 figure{margin-left:calc(-1 * var(--bleed))} .m-2 figure{margin-right:calc(-1 * var(--bleed))} .m-1 img,.m-3 img{border-radius:0 2px 2px 0} .m-2 img{border-radius:2px 0 0 2px} } /* =========================================================== 4 · RENTA O COMPRA — split editorial con rótulo colgante =========================================================== */ .caminos{max-width:960px} .cam{ display:grid;grid-template-columns:1fr;gap:6px; padding:clamp(26px,4vh,40px) 0;border-top:1px solid rgba(124,139,118,.34); } .cam:first-of-type{border-top:0;padding-top:0} .cam-n{ font-family:var(--disp);font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--verde);margin:0; letter-spacing:-.01em; } .cam-b p{max-width:52ch;color:var(--tinta-2)} .cam-b p:last-child{margin-bottom:0;padding-top:.5em} .cam-note{ margin:clamp(30px,5vh,48px) 0 0;font-size:.92rem;color:var(--musgo);max-width:46ch; } @media (min-width:820px){ .cam{grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:clamp(26px,5vw,64px);align-items:start} } /* =========================================================== 5 · PREGUNTAS + CIERRE =========================================================== */ .faq{max-width:900px} .qa{padding:clamp(22px,3.5vh,34px) 0;border-top:1px solid rgba(124,139,118,.3)} .qa:first-of-type{border-top:0;padding-top:0} .qa h3{font-size:clamp(1.18rem,2.2vw,1.55rem);color:var(--verde);margin:0 0 .5em;line-height:1.24} .qa p{max-width:58ch;color:var(--tinta-2);margin:0} @media (min-width:820px){ .qa{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(26px,5vw,58px);align-items:start} .qa h3{margin-bottom:0} } .cierre{text-align:center;max-width:860px;padding-bottom:clamp(84px,13vh,148px)} .cierre h2{ font-size:clamp(1.9rem,5vw,3.5rem);line-height:1.2;letter-spacing:-.016em; color:var(--tinta);margin:0 auto clamp(34px,6vh,56px);max-width:19ch; } .cierre-act{margin:0 0 1.2em} .cierre-sub{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--musgo);margin:0} /* =========================================================== FOOTER =========================================================== */ .foot{background:var(--verde);color:rgba(240,244,239,.78);padding-block:clamp(52px,9vh,88px)} .foot-in{width:min(var(--maxw),100% - var(--pad)*2);margin-inline:auto;max-width:720px} .foot-mark{ font-family:var(--disp);font-size:1.25rem;letter-spacing:.2em;text-transform:uppercase; color:var(--blanco);margin:0 0 .9em; } .foot-l{font-size:.95rem;margin:0 0 .7em} .foot-l a{color:var(--blanco);text-decoration:none;border-bottom:1px solid rgba(251,252,250,.32)} .foot-l a:hover{border-color:var(--blanco)} .foot-note{font-size:.8rem;line-height:1.66;color:rgba(240,244,239,.56);margin:1.8em 0 0;max-width:56ch} .foot-pan{font-size:.88rem;margin:1.6em 0 0;color:rgba(240,244,239,.68)} .foot-pan a{color:var(--blanco);text-decoration:none;border-bottom:1px solid rgba(154,111,69,.75)} .foot-pan a:hover{border-color:var(--blanco)} /* =========================================================== MODAL QR DE WHATSAPP A PRUEBA DE FALLOS: display:none por defecto; visible solo sin [hidden]. =========================================================== */ .wa-modal{display:none;position:fixed;inset:0;z-index:220;place-items:center;padding:18px} .wa-modal:not([hidden]){display:grid} .wa-back{position:absolute;inset:0;background:rgba(30,36,31,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .wa-card{ position:relative;width:min(380px,100%);text-align:center; background:var(--blanco);color:var(--tinta);border-radius:2px; border-bottom:3px solid var(--madera); padding:clamp(26px,5vw,36px) clamp(20px,4vw,30px) clamp(24px,4vw,30px); box-shadow:0 24px 60px rgba(30,36,31,.28); } .wa-x{position:absolute;top:4px;right:8px;font-size:26px;line-height:1;color:var(--musgo);background:transparent;border:0;cursor:pointer;padding:4px 8px} .wa-x:hover{color:var(--tinta)} .wa-title{font-family:var(--disp);font-size:1.3rem;line-height:1.3;margin:0 0 1em;color:var(--verde)} .wa-qr{display:flex;justify-content:center;min-height:150px;align-items:center;margin:0 0 1em} .wa-qr img{width:min(190px,60vw);height:auto;image-rendering:pixelated} .wa-num{font-size:1rem;letter-spacing:.06em;margin:0 0 .5em;color:var(--tinta)} .wa-num[hidden]{display:none} .wa-help{font-size:.85rem;line-height:1.6;color:var(--tinta-2);margin:0 0 1.4em} .wa-open{width:100%} @media print{.nav,.propbar,.propreopen,.wa-modal,.prop-modal,.hero-fog{display:none!important}}