/* * styles.css — Community Concierge * NOTA DE MANTENIMIENTO (ver docs/auditoria-css.md): este archivo está * ESTRATIFICADO en capas históricas de override que se pisan entre sí. * El valor EFECTIVO de una propiedad puede definirse más abajo. Orden: * 1) Sistema base (tokens, hero, secciones, cards, modal, footer) * 2) BRUTALIST OVERRIDE 3) BRUTAL v2 4) MOTION * 5) POLISH PASS 6) Bloques de features (pilares, villas, asistente, router…) * 7) HOME V7 (sistema foto/sólido del home; va al final a propósito) * Antes de editar, busca TODAS las definiciones de un selector (pueden ser varias). */ /* ══════════ TOKENS ══════════ */ :root{ --navy:#0B1826; --navy-ui:#101D2B; /* superficie/tinta navy REAL (59 usos antes hardcodeados) */ --paper:#EDEAE0; /* marfil REAL de superficie (27 usos antes hardcodeados) */ --muted-navy:#8FA0AE; /* texto secundario sobre navy — 6.33:1 AA */ --muted-ivory:#5A6772; --photo-grade:grayscale(.5) contrast(1.02); /* apagada en retícula; color pleno en hover y ficha */ --deep:#060F1A; --ink:#0D1F30; --teal:#008F92; --teal-soft:#26B5B5; --gold:#C8A96E; --gold-dim:rgba(200,169,110,.35); --ivory:#F3EFE6; --sand:#E7E0D0; --paper-ink:#1B2A38; --light:#EAE4D6; --muted:#74858F; /* texto secundario sobre navy — 4.68:1 AA (antes #5C6D7A, 3.35:1) */ --muted-dark:#616E65; /* texto secundario sobre ivory — 4.66:1 AA (antes #6E7B72, 3.86:1) */ --disp:'Montserrat',sans-serif; --body:'Manrope',sans-serif; --r:1120px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--body); font-weight:300; background:var(--navy); color:var(--light); line-height:1.65; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .r{max-width:var(--r);margin:0 auto;padding:0 clamp(22px,5vw,64px)} /* ══════════ TYPE ══════════ */ .disp{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:.03em;text-transform:uppercase} .disp em{ font-style:normal;font-weight:600;display:inline-block; background:var(--gold);color:var(--deep); font-size:.28em;letter-spacing:.42em;text-indent:.42em; padding:.55em 1.1em .5em;vertical-align:middle; margin-top:.55em;line-height:1; } .disp-xl{font-size:clamp(44px,7.2vw,92px)} .disp-lg{font-size:clamp(30px,4.8vw,64px)} /* H2 de sección: escalón bajo el H1 (92) — antes 96, gritaba más que la portada */ .disp-md{font-size:clamp(20px,2.6vw,28px)} .eye{ display:inline-flex;align-items:center;gap:14px; font-size:11px;letter-spacing:.34em;text-transform:uppercase; color:var(--gold);font-weight:400; } .eye::before{content:"";width:34px;height:1px;background:var(--gold-dim)} .lead{font-size:clamp(15px,1.5vw,18px);color:var(--muted);max-width:560px;font-weight:600;letter-spacing:.07em;line-height:1.75} .on-ivory .lead{color:var(--muted-dark)} /* ══════════ ITINERARY RAIL (signature) ══════════ */ .rail{ position:fixed;left:26px;top:50%;transform:translateY(-50%); z-index:40;display:flex;flex-direction:column;align-items:center;gap:0; } .rail-line{width:1px;height:38px;background:var(--gold-dim)} .rail a{ width:7px;height:7px;border-radius:50%; border:1px solid var(--gold-dim);background:transparent; margin:5px 0;transition:all .35s ease;position:relative; } .rail a.on{background:var(--gold);border-color:var(--gold);transform:scale(1.25)} .rail a span{ position:absolute;left:18px;top:50%;transform:translateY(-50%); font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold); white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none; } .rail a:hover span,.rail a.on span{opacity:.9} @media(max-width:960px){.rail{display:none}} /* logo */ .hero-logo{height:clamp(46px,5.5vw,68px);width:auto;max-width:88vw;margin:0 0 34px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)) drop-shadow(0 12px 28px rgba(0,0,0,.45))} .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s} .hero-bg video.ok{opacity:.78} /* Encuadre vertical: conserva el mar turquesa (a la izquierda del cuadro) en móvil y tablet portrait. No altera el hero desktop aprobado. */ @media(max-aspect-ratio:1/1){.hero-bg video,.hero-bg img{object-position:28% center}} /* ══════════ FLOATING WHATSAPP ══════════ */ .wa-float{ position:fixed;right:22px;bottom:22px;z-index:60; display:flex;align-items:center;gap:12px; background:#25D366;color:#062A1B;border-radius:60px; padding:12px 22px 12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.35); font-size:13px;letter-spacing:.06em;font-weight:500; animation:waPulse 2.2s ease-in-out 3; } .wa-float svg{width:26px;height:26px;flex:none} .wa-float:hover{animation-play-state:paused;transform:scale(1.04)} /* @keyframes waPulse: definición única más abajo (capa MOTION, ~L836) */ @media(prefers-reduced-motion:reduce){.wa-float{animation:none}} /* ══════════ INTERLUDE full-bleed ══════════ */ .interlude{position:relative;min-height:72svh;display:flex;align-items:center;overflow:hidden;padding:clamp(80px,10vw,130px) 0} .il-bg{position:absolute;inset:0} .il-bg img{width:100%;height:100%;object-fit:cover} .il-veil{position:absolute;inset:0;background:rgba(6,15,26,.58)} .il-body{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 clamp(22px,5vw,54px);text-align:left} .il-eye{justify-content:flex-start;margin-bottom:22px} .il-eye::before{display:none} /* ══════════ REVIEWS ══════════ */ .rev-head{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;margin-bottom:44px} .rev-score{font-family:var(--disp);font-weight:800;font-size:clamp(56px,7vw,84px);color:var(--gold);line-height:1;letter-spacing:.02em} .rev-meta .stars{color:var(--gold);font-size:20px;letter-spacing:4px} .rev-meta p{font-size:13px;color:var(--muted);margin-top:4px} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)} .rev-card{border:1px solid rgba(200,169,110,.22);padding:34px 28px 30px;display:flex;flex-direction:column;gap:14px;position:relative} .rev-card::before{content:"\201C";position:absolute;top:6px;left:20px;font-family:var(--disp);font-weight:800;font-size:64px;color:var(--gold);opacity:.35;line-height:1} .rev-card .stars{color:var(--gold);font-size:14px;letter-spacing:3px} .rev-card p{color:var(--light);font-style:italic;font-family:var(--body);font-weight:400;font-size:15.5px;line-height:1.7} .rev-card b{font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-navy)} .rev-cta{margin-top:36px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-soft);display:inline-block} @media(max-width:880px){.rev-grid{grid-template-columns:1fr}} /* ══════════ INSTAGRAM ══════════ */ .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .ig-grid .ph{aspect-ratio:1/1} .ig-grid a{position:relative;display:block} .ig-grid a::after{ content:"";position:absolute;inset:0;background:rgba(11,24,38,0);transition:background .3s; } .ig-grid a:hover::after{background:rgba(11,24,38,.35)} @media(max-width:820px){.ig-grid{grid-template-columns:repeat(3,1fr)}} /* ══════════ BOOKING FORM ══════════ */ .form-wrap{max-width:680px;margin:52px auto 0;text-align:left} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-grid .full{grid-column:1/-1} .fld label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:7px} .fld input,.fld select,.fld textarea{ width:100%;background:rgba(234,228,214,.05);border:1px solid rgba(200,169,110,.3); color:var(--light);font-family:var(--body);font-size:16px;font-weight:300; padding:13px 15px;outline:none;transition:border-color .25s;border-radius:0; } .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold)} .fld select{appearance:none} .fld textarea{min-height:96px;resize:vertical} .form-send{margin-top:24px;text-align:center} @media(max-width:560px){.form-grid{grid-template-columns:1fr}} /* ══════════ PAYMENT ══════════ */ .pay-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .pay-chip{ border:1px solid rgba(27,42,56,.25);padding:12px 22px;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--paper-ink);transition:all .25s; } .pay-chip:hover{border-color:var(--teal);color:var(--teal)} .socials{display:flex;gap:16px;justify-content:center;margin-top:34px} .socials a{ width:46px;height:46px;border-radius:50%; border:1px solid rgba(200,169,110,.45); display:flex;align-items:center;justify-content:center; color:var(--gold);transition:all .3s; } .on-ivory .socials a{border-color:rgba(0,143,146,.45);color:var(--teal)} .socials a svg{width:19px;height:19px;fill:currentColor} .socials a:hover{background:var(--gold);color:var(--deep);border-color:var(--gold)} .on-ivory .socials a:hover{background:var(--teal);color:#fff;border-color:var(--teal)} /* ══════════ ON THE WATER ══════════ */ .water-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,340px);gap:22px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory} .water-scroll::-webkit-scrollbar{height:4px} .water-scroll::-webkit-scrollbar-thumb{background:var(--gold-dim)} .water-scroll .card{scroll-snap-align:start} /* ══════════ VILLAS ══════════ */ .villa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)} .villa{ position:relative;aspect-ratio:4/3;overflow:hidden; background:linear-gradient(160deg,#12283C 0%,#0B1826 70%); border:1px solid rgba(200,169,110,.25); display:flex;flex-direction:column;justify-content:flex-end; padding:26px;transition:border-color .3s; } .villa:hover{border-color:var(--gold)} .villa::before{ content:"";position:absolute;top:22px;left:22px;right:22px;bottom:22px; border:1px solid rgba(200,169,110,.14);pointer-events:none; } .villa b{font-family:var(--disp);font-weight:800;font-size:clamp(15px,1.5vw,19px);letter-spacing:.14em;text-transform:uppercase;color:#fff;line-height:1.3} .villa span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:8px} .villa .soon{position:absolute;top:20px;right:20px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border:1px solid rgba(143,160,174,.35);padding:5px 10px} @media(max-width:880px){.villa-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.villa-grid{grid-template-columns:1fr}} /* ══════════ HEADER ══════════ */ .lang-float{position:fixed;top:18px;right:18px;z-index:50;display:flex;gap:8px} .lang-float button,.lang-float a,.lang-float span.on{ text-decoration:none; display:flex;align-items:center;gap:7px; font-family:var(--body);font-size:11px;letter-spacing:.14em;font-weight:500; background:transparent; color:#C9D2D9;border:1px solid rgba(234,228,214,.22); padding:8px 13px;cursor:pointer;transition:all .25s;border-radius:60px; ;min-height:44px;min-width:52px} .lang-float .flag{font-size:15px;line-height:1} .lang-float button.on,.lang-float span.on{border-color:var(--gold);color:var(--gold)} .btn{ display:inline-block;font-size:12px;letter-spacing:.26em;text-transform:uppercase; padding:15px 34px;border:1px solid var(--gold);color:var(--gold); transition:all .3s ease;cursor:pointer;background:transparent;font-family:var(--body); } .btn:hover{background:var(--gold);color:var(--deep)} .btn-solid{background:var(--gold);color:var(--deep)} .btn-solid:hover{background:transparent;color:var(--gold)} .btn-sm{padding:9px 20px;font-size:11px} /* ══════════ HERO ══════════ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .hero-bg{position:absolute;inset:0;background:var(--deep)} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.62;animation:kb 26s ease-out forwards} @keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}} .hero-veil{position:absolute;inset:0} /* color: capa final */ .hero-body{position:relative;z-index:2;width:100%;max-width:820px;margin:0;padding:100px clamp(22px,5vw,64px) 60px;text-align:left} .hero-rule{width:44px;height:2px;background:#fff;margin:26px 0 30px;box-shadow:0 2px 6px rgba(0,0,0,.5)} .hero-eye{margin-bottom:26px;justify-content:center} .hero-eye::before{display:none} .hero-title{ font-weight:800;letter-spacing:-.015em;line-height:.95;text-transform:uppercase; margin-bottom:20px;color:#fff; text-shadow:0 1px 0 rgba(255,255,255,.14), 0 3px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45); } .hero-title em{box-shadow:0 4px 10px rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.35);text-shadow:none} .hero-tag{font-size:clamp(15px,1.7vw,18px);color:rgba(234,228,214,.95);max-width:460px;margin:0 0 34px;font-weight:300;text-shadow:0 2px 5px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.4)} .hero-foot{display:flex;flex-direction:column;align-items:flex-start;gap:22px} .hero-foot .btn{box-shadow:0 6px 18px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.4)} /* Hero · accesos secundarios (excepción acotada al Hero, aprobada) */ .hero-loc{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#C9D2D9} /* ══════════ CHAPTERS ══════════ */ section{padding:clamp(84px,11vw,150px) 0} .chap-hd{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(44px,6vw,72px)} .on-ivory{background:var(--ivory);color:var(--paper-ink)} .on-ivory .disp{color:var(--paper-ink)} .on-ivory .eye{color:#00666C} .on-ivory .eye::before{background:rgba(0,143,146,.4)} .on-ivory .chap-no{color:var(--teal)} /* reveal */ .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .hero-bg img{animation:none} } /* ══════════ ABOUT ══════════ */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center} .about-photo{position:relative} .about-photo .ph{aspect-ratio:4/5} .about-photo::after{ content:"";position:absolute;inset:18px -18px -18px 18px; border:1px solid var(--gold-dim);z-index:-1; } .about-copy p{margin-bottom:18px;font-size:17px;color:#3A4A56} .about-copy strong,#why strong{color:#00666C;font-weight:700} .about-stats{display:flex;gap:clamp(20px,3vw,44px);margin:26px 0 6px;flex-wrap:wrap} .about-stats b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3vw,36px);color:var(--teal);letter-spacing:.02em} .about-stats span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);font-weight:600} .about-sign{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--teal);margin-top:14px} @media(max-width:820px){.about-grid{grid-template-columns:1fr}} /* image frame w/ graceful fallback */ .ph{position:relative;overflow:hidden;background:linear-gradient(150deg,#12283C,#0B1826 65%)} .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)} .ph:hover img{transform:scale(1.045)} /* ══════════ WHY ══════════ */ .why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(200,169,110,.16);border:1px solid rgba(200,169,110,.16)} .why-cell{background:var(--navy);padding:34px 26px} .why-cell h3{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin-bottom:10px;line-height:1.4} .why-cell p{font-size:14px;color:var(--muted)} .why-cell .g{display:block;font-family:var(--disp);font-style:italic;color:var(--gold);font-size:15px;margin-bottom:16px} @media(max-width:1020px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.why-grid{grid-template-columns:1fr}} /* ══════════ EXPERIENCE CARDS ══════════ */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)} .card{display:flex;flex-direction:column;background:transparent} .card .ph{aspect-ratio:4/5;margin-bottom:20px} .card-cat{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:700} .card h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--light);margin-bottom:8px;line-height:1.35} .card p{font-size:14.5px;color:var(--muted);margin-bottom:14px;letter-spacing:.03em;line-height:1.7} .card .more{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-soft);display:inline-flex;gap:10px;align-items:center;font-weight:700} .card .more::after{content:"→";transition:transform .3s} .card:hover .more::after{transform:translateX(6px)} @media(max-width:920px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:580px){.cards{grid-template-columns:1fr}} .subsec{margin-bottom:clamp(44px,6vw,72px)} .subsec-hd{ font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase; color:var(--gold);border-bottom:1px solid rgba(200,169,110,.25);padding-bottom:12px;margin-bottom:26px; } .subsec-note{font-size:13px;font-style:italic;color:var(--muted);margin:-14px 0 22px} /* selection (ivory) variant */ .on-ivory .card h3{color:var(--paper-ink)} .on-ivory .card p{color:var(--muted-dark)} .on-ivory .card-cat{color:#00666C} .on-ivory .card .more{color:#00666C} .mini-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .mini{display:flex;flex-direction:column} .mini .ph{aspect-ratio:1/1;margin-bottom:12px;display:block} .mini-pend{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#DDD5C2,#EFEADF 65%)} .mini-pend i{font-style:italic;font-size:12px;color:var(--muted-dark)} .mini b{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-ink)} .mini span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);margin-top:3px} .mini:hover b{color:var(--teal)} @media(max-width:980px){.mini-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.mini-grid{grid-template-columns:repeat(2,1fr)}} .card-price{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gold);margin:-6px 0 12px} .on-ivory .card-price{color:var(--teal)} .note{font-size:13px;color:var(--muted-dark);border-left:2px solid var(--teal);padding-left:16px;max-width:520px;margin-top:44px} /* ══════════ TRANSPORT ══════════ */ .tr-hero{position:relative;margin-bottom:clamp(40px,5vw,64px)} .tr-hero .ph{aspect-ratio:21/9} .tr-hero .ph img{object-position:center 30%} .tr-hero-cap{ position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px); background:rgba(6,15,26,.82);backdrop-filter:blur(8px); padding:18px 26px;border-left:2px solid var(--gold); } .tr-hero-cap b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#fff} .tr-hero-cap span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .tr-grid{display:block;max-width:820px} .tr-copy p{color:var(--muted-ivory);margin-bottom:16px;font-size:16px} .combos{list-style:none;margin:22px 0 26px} .combos li{ padding:13px 0;border-bottom:1px solid rgba(200,169,110,.18); font-family:var(--body);font-weight:500;font-size:15.5px;letter-spacing:.02em;color:var(--light); display:flex;align-items:baseline;gap:14px; } .combos li::before{content:"·";color:var(--gold);font-size:24px} .tr-notes{list-style:none;margin-top:24px;border-top:1px solid rgba(200,169,110,.18);padding-top:8px} .tr-notes li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:13.5px;color:var(--light);letter-spacing:.02em} .tr-notes .ic{margin-top:1px} .tr-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tr-thumbs .ph{aspect-ratio:1/1} .tr-thumbs .ph.tall{grid-column:span 2;aspect-ratio:16/10} @media(max-width:880px){.tr-grid{grid-template-columns:1fr}} /* ══════════ TAILORED BAND ══════════ */ .tailored{ background:linear-gradient(140deg,#12283C 0%,var(--navy) 55%); border-top:1px solid rgba(200,169,110,.22); border-bottom:1px solid rgba(200,169,110,.22); text-align:center; } .tailored .lead{margin:20px auto 40px} /* ══════════ BOOKING ══════════ */ .bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)} .bk-col h3{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-ink);margin-bottom:14px} .bk-col ul{list-style:none} .bk-col li,.bk-col p{font-size:14.5px;color:#4A5A66;padding:7px 0;border-bottom:1px solid rgba(27,42,56,.1)} .bk-col li:last-child{border-bottom:0} @media(max-width:820px){.bk-grid{grid-template-columns:1fr}} /* ══════════ CONTACT ══════════ */ .contact{background:var(--deep);text-align:center} .close-logo{height:clamp(44px,5vw,64px);width:auto;max-width:86vw;margin:0 auto 40px;display:block} .people{display:flex;justify-content:center;gap:clamp(24px,5vw,70px);margin:52px 0;flex-wrap:wrap} .person{display:flex;flex-direction:column;gap:6px;padding:10px 6px;border-bottom:1px solid transparent;transition:border-color .3s} .person:hover{border-color:var(--gold)} .person b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#fff} .person span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-navy)} /* ══════════ ICON SET + MODAL EXPERIENCIA ══════════ */ .ic{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none} .xmodal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px} .xmodal.open{display:flex} .xmodal-veil{position:absolute;inset:0;backdrop-filter:blur(6px)} /* color: capa final */ .xmodal-box{ position:relative;z-index:2;background:var(--navy);border:1px solid rgba(200,169,110,.3); max-width:980px;width:100%;max-height:90svh;overflow:auto; display:grid;grid-template-columns:1fr 1.1fr; } .xm-photo{position:relative;min-height:320px} .xm-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:1px solid var(--gold);background:rgba(6,15,26,.82);color:#fff;font-size:20px;cursor:pointer;transition:all .25s} .xm-nav:hover{border-color:var(--gold);color:var(--gold)} .xm-prev{left:12px}.xm-next{right:12px} .xm-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:4} .xm-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .25s} .xm-dots i.on{background:var(--gold)} .xm-count{position:absolute;top:14px;left:14px;z-index:4;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#fff;background:rgba(6,15,26,.72);border:1px solid rgba(200,169,110,.45);padding:5px 10px} .xm-photo .ph{position:absolute;inset:0} .xm-photo .ph img{height:100%} .xm-info{padding:clamp(28px,4vw,48px)} .xm-cat{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px} .xm-title{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.4vw,26px);letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.25;margin-bottom:8px} .xm-desc{font-size:14.5px;color:var(--muted-navy);margin-bottom:22px} .xm-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:24px} .xm-fact{display:flex;gap:12px;align-items:flex-start} .xm-fact div b{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:3px;font-weight:600} .xm-fact div span{font-size:13.5px;color:var(--light)} .xm-block{margin-bottom:20px} .xm-block>b{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:600} .xm-block ul{list-style:none} .xm-block li{display:flex;gap:10px;font-size:13.5px;color:var(--light);padding:4px 0;align-items:flex-start} .xm-block li .ic{width:15px;height:15px;margin-top:2px} .xm-block li.no{color:var(--muted)} .xm-block li.no .ic{stroke:var(--muted)} .xm-scope{font-size:11.5px;color:var(--muted);letter-spacing:.04em;border-left:2px solid var(--gold);padding-left:12px;margin-top:4px} .xm-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px} .xm-price b{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600} .xm-price span{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--gold)} .xm-close{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border:1px solid rgba(234,228,214,.35);background:rgba(6,15,26,.6);color:var(--light);font-size:18px;cursor:pointer;transition:all .25s} .xm-close:hover{border-color:var(--gold);color:var(--gold)} @media(max-width:760px){.xmodal-box{grid-template-columns:1fr}.xm-photo{min-height:220px}.xm-facts{grid-template-columns:1fr}} .imodal-box{grid-template-columns:1fr;max-width:560px} .im-info{padding:clamp(24px,4vw,42px)} .im-lead{font-size:14px;color:var(--muted);margin:-2px 0 20px} .im-grid{gap:14px 16px} #imodal .ig{display:none} /* Discovery System V1: condiciones dinámicas + piezas nuevas (misma identidad) */ #imodal .ig.ds-off{display:none!important} .im-ages{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .im-ages input{width:74px;padding:10px 8px;text-align:center} .im-gearnote span{display:block;font-size:12.5px;color:#5C6D7A;line-height:1.55;padding:10px 14px;background:rgba(0,102,108,.06);border-left:2px solid #00666C} .im-comm{font-size:11px;color:#8A94A0;line-height:1.5;margin:6px 0 0} #imodal.ctx-villa .ig[data-ctx~="villa"],#imodal.ctx-tour .ig[data-ctx~="tour"],#imodal.ctx-service .ig[data-ctx~="service"],#imodal.ctx-transfer .ig[data-ctx~="transfer"],#imodal.ctx-mar .ig[data-ctx~="mar"],#imodal.ctx-general .ig[data-ctx~="general"],#imodal.ctx-viaje .ig[data-ctx~="viaje"],#imodal.ctx-menu .ig[data-ctx~="menu"],#imodal.ctx-seg .ig[data-ctx~="seg"]{display:block} /* ═══ intake · flujo COMENCEMOS: pasos de intención y segmento ═══ Dos pasos previos dentro del MISMO #imodal (ctx-menu / ctx-seg), sobre el mecanismo .ig existente. En estos pasos se ocultan los campos comunes. El badge circular turquesa #00A098 (color del kit 2022) es la excepción aprobada al radius 0 — ver lenguaje círculo-recto. */ #imodal.ctx-menu .fld:not(.ig),#imodal.ctx-seg .fld:not(.ig), #imodal.ctx-menu .consent,#imodal.ctx-seg .consent, #imodal.ctx-menu #i-send,#imodal.ctx-seg #i-send, #imodal.ctx-menu #i-note,#imodal.ctx-seg #i-note{display:none} .im-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--navy-ui);border:1px solid rgba(200,169,110,.22);padding:13px 16px;margin:0 0 10px;cursor:pointer;font-family:var(--body);transition:border-color .25s} .im-opt:hover,.im-opt:focus-visible{border-color:#00A098} .im-badge{flex:none;width:46px;height:46px;border-radius:50%!important;/* excepción aprobada al radius 0 global (lenguaje círculo-recto) */background:#00A098;display:flex;align-items:center;justify-content:center} .im-badge svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .im-opt b{display:block;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory)} .im-opt .im-sub{display:block;font-size:12.5px;color:var(--muted-navy);margin-top:2px} .im-opt .im-go{margin-left:auto;color:#00A098;font-weight:800;font-family:var(--body)} .im-back{position:absolute;top:14px;right:62px;z-index:3;width:40px;height:40px;border:1px solid rgba(234,228,214,.35);background:rgba(6,15,26,.6);color:var(--light);font-size:16px;cursor:pointer;transition:all .25s;display:none} .im-back:hover{color:var(--gold);border-color:var(--gold)} #imodal.im-nav .im-back{display:block} .im-lbl{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;font-family:var(--mono)} .imchips{display:flex;flex-wrap:wrap;gap:9px} .imchips label{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:rgba(234,228,214,.05);cursor:pointer;font-size:12.5px;color:var(--light);transition:background .2s;text-transform:none;letter-spacing:normal} .imchips label:hover{background:rgba(200,169,110,.14)} .imchips input{width:15px;height:15px;accent-color:var(--gold);flex:none} .imflex{display:inline-flex;align-items:center;gap:9px;cursor:pointer} .imflex input{width:15px;height:15px;accent-color:var(--gold)} .imflex span{font-size:12.5px;color:var(--muted);letter-spacing:.02em} #i-send{margin-top:18px;width:100%} @media(max-width:560px){.imodal-box{max-width:100%}} /* ══════════ FOOTER ══════════ */ footer{background:var(--deep);border-top:1px solid rgba(200,169,110,.16);padding:44px 0} .ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)} .ft b{color:var(--light);font-weight:400} /* ═══════════════ BRUTALIST OVERRIDE — menos es más ═══════════════ */ :root{--mono:'Manrope',sans-serif /* voz de etiqueta: Manrope + tracking (antes fuente de sistema, renderizaba distinto por SO y violaba el manual) */} *{border-radius:0!important;box-shadow:none!important;text-shadow:none!important} .rail{display:none!important} /* cero marcos */ .about-photo::after,.villa::before{content:none!important} .rev-card,.villa,.why-grid,.why-cell,.xmodal-box,.fld input,.fld select,.fld textarea,.combos li,.tr-notes,.subsec-hd,.pay-chip,.socials a,.lang-float button,.bk-col li,.bk-col p{border:none!important} .why-grid{background:transparent;gap:40px 28px} .why-cell{background:transparent;padding:0} .rev-card{background:rgba(255,255,255,.03);padding:36px 30px} .villa{background:var(--deep)} /* tipografía: masiva y plana; etiquetas en mono */ .disp{letter-spacing:-.015em;line-height:.98} .disp em{letter-spacing:.28em;text-indent:.28em;font-family:var(--mono);font-weight:400;font-size:.22em;padding:.7em 1.2em .6em} .eye,.card-cat,.card-price,.more,.btn,.chap-no,.subsec-hd,.fld label,.hb-eyebrow,.about-stats span,.rev-cta,.xm-cat,.xm-block>b,.xm-fact div b,.hero-loc,.wa-float span,.mini b,.mini span,.person span,.tr-hero-cap span{font-family:var(--mono)!important;font-weight:400!important;letter-spacing:.12em!important} .eye::before{display:none} .subsec-hd{font-size:clamp(22px,3vw,34px)!important;letter-spacing:-.01em!important;text-transform:uppercase;color:var(--light)!important;font-family:var(--disp)!important;font-weight:800!important;padding-bottom:0;margin-bottom:30px} .on-ivory .subsec-hd{color:var(--paper-ink)!important} /* botones: bloque sólido, sin borde */ .btn{border:none;background:var(--gold);color:var(--deep);padding:18px 38px} .btn:hover{background:var(--teal);color:#fff} .btn-solid{background:var(--gold)} .pay-chip{background:rgba(27,42,56,.06)} .socials a{background:rgba(200,169,110,.12)} .on-ivory .socials a{background:rgba(0,143,146,.1)} /* grillas duras: fotos borde a borde */ .cards{column-gap:6px;row-gap:56px} .mini-grid{gap:6px 6px} .mini b{margin-top:10px} .card .ph{margin-bottom:16px} .ph:hover img{transform:none} .card:hover .more::after{transform:none} .more{text-decoration:underline;text-underline-offset:4px} /* hero plano: logo enorme, overlay sólido */ .hero-logo{height:clamp(52px,7vw,84px);filter:none;margin-bottom:30px} .hero-veil{background:rgba(6,15,26,.55)} .hero-rule{width:64px;height:6px;background:var(--gold);margin:24px 0} .hero-title{font-size:clamp(24px,3.4vw,44px)} .hero-bg video.ok{opacity:.85} .wa-float{animation:none;background:var(--gold)} .about-stats b{font-size:clamp(40px,5vw,64px)} .interlude .il-veil{background:rgba(6,15,26,.62)} /* ═══════ BRUTAL v2 — fondo crudo, tipo gigante, tiles silábicos ═══════ */ body{background:var(--paper);color:var(--navy-ui)} #about,#onereq,#why,#experiences,#water,#selection,#villas,#reviews,#booking,#instagram{background:var(--paper)} #onereq .disp,#why .disp,#experiences .disp,#water .disp,#villas .disp,#reviews .rev-meta p{color:var(--navy-ui)} /* Landing Entry System — ritmo integrado (regla Fede 18-ago): aire contra la barra, bloque editorial compacto con distancias iguales (ceja→título→chip→intro→preview) */ #experiences,#villas,#onwater,#atvilla,#transport,#selection,#tripdesign{padding-top:clamp(72px,9vw,116px)} #experiences .chap-hd,#villas .chap-hd,#onwater .chap-hd,#atvilla .chap-hd,#transport .chap-hd,#selection .chap-hd,#tripdesign .chap-hd{gap:12px;margin-bottom:clamp(34px,4.5vw,54px)} #experiences .disp em,#villas .disp em,#onwater .disp em,#atvilla .disp em,#transport .disp em,#selection .disp em,#tripdesign .disp em{margin-top:.35em} #why .eye,#experiences .eye,#water .eye,#onwater .eye,#villas .eye,#atvilla .eye{color:#00666C} #transport .eye{color:#00666C} #why .lead,#experiences .lead,#water .lead,#villas .lead,#selection .lead{color:var(--muted-ivory)} .subsec{counter-increment:cat} .subsec-hd{font-size:clamp(24px,3.4vw,38px)!important;color:var(--navy-ui)!important;margin-bottom:30px} .subsec-hd::before{content:counter(cat,decimal-leading-zero)" / ";font-family:var(--mono);font-size:.35em;vertical-align:.8em;color:var(--teal);letter-spacing:.1em} #experiences{counter-reset:cat} .subsec-note{color:#5A6772} .card h3{color:var(--navy-ui)} .card p{color:#5A6772} .card-cat{color:var(--teal)} .card-price{color:var(--navy-ui);font-weight:600} .more{color:var(--navy-ui)} .why-cell h3{color:var(--navy-ui)}.why-cell p{color:#5A6772}.why-cell .g{color:var(--teal)} .water-scroll::-webkit-scrollbar-thumb{background:var(--navy-ui)} .rev-card{background:var(--navy-ui)} .rev-score{color:var(--navy-ui)} .rev-meta .stars{color:#00666C} .rev-cta{color:#00666C} .villa{background:var(--navy-ui)} .villa .soon{color:#8FA0AE} .ph{background:#DDD8CA} .lang-float button,.lang-float a,.lang-float span.on{background:transparent;border:none} .contact,footer,.tailored{background:var(--navy-ui)} .tr-notes li,.combos li{color:var(--paper)} /* Cleanup V1: Transfers vive en marfil — el texto claro heredado del navy se vuelve tinta */ #transport .tr-copy p,#transport .tr-notes li{color:var(--muted-dark)} .wa-float{background:var(--navy-ui);color:var(--paper)} /* tiles silábicos */ .fill-tile{display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-height:280px;padding:22px;user-select:none} .fill-tile span{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.4vw,50px);line-height:.94;letter-spacing:-.01em;display:block} .ft-gold{background:var(--gold);color:var(--navy-ui)} .ft-teal{background:var(--teal);color:var(--paper)} .ft-stroke{background:var(--navy-ui)} .ft-stroke span{color:transparent;-webkit-text-stroke:1.5px var(--gold)} .fill-mini{display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-height:120px;padding:14px} .fill-mini span{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.6vw,24px);line-height:.95;display:block} /* ═══════ MOTION (skill: animate + impeccable) ═══════ */ :root{--xo:cubic-bezier(.16,1,.3,1);--xq:cubic-bezier(.23,1,.32,1)} /* barra de progreso de scroll */ .scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent} .scrollbar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)} /* coreografía de entrada del hero */ @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .hero-logo{animation:rise .7s var(--xo) both} .hero-rule{animation:rise .6s var(--xo) .22s both} .hero-tag{animation:rise .6s var(--xo) .3s both} .hero-foot{animation:rise .6s var(--xo) .38s both} /* reveals con stagger por tarjeta (expo, no uniforme) */ .rv{transition:opacity .7s var(--xo),transform .7s var(--xo)} .cards .rv:nth-child(3n+2),.cards article:nth-child(3n+2){transition-delay:.07s} .cards .rv:nth-child(3n),.cards article:nth-child(3n){transition-delay:.14s} .subsec .subsec-hd{opacity:0;transform:translateY(30px);transition:opacity .7s var(--xo),transform .7s var(--xo)} .subsec.in .subsec-hd{opacity:1;transform:none} .subsec .cards article{opacity:0;transform:translateY(24px);transition:opacity .65s var(--xo),transform .65s var(--xo)} .subsec.in .cards article{opacity:1;transform:none} .subsec.in .cards article:nth-child(2){transition-delay:.08s} .subsec.in .cards article:nth-child(3){transition-delay:.16s} .subsec.in .cards article:nth-child(4){transition-delay:.24s} /* tiles silábicos: sílabas en cascada + snap de color al hover */ .fill-tile{overflow:hidden} .fill-tile span{transform:translateY(115%);transition:transform .6s var(--xo)} .subsec.in .fill-tile span:nth-child(1){transform:none;transition-delay:.25s} .subsec.in .fill-tile span:nth-child(2){transform:none;transition-delay:.33s} .subsec.in .fill-tile span:nth-child(3){transform:none;transition-delay:.41s} .subsec.in .fill-tile span:nth-child(4){transform:none;transition-delay:.49s} .ft-gold:hover{background:var(--navy-ui)}.ft-gold:hover span{color:var(--gold)} .ft-teal:hover{background:var(--navy-ui)}.ft-teal:hover span{color:var(--teal)} .ft-stroke:hover{background:var(--gold)}.ft-stroke:hover span{-webkit-text-stroke:1.5px var(--navy-ui)} .ft-gold,.ft-teal,.ft-stroke,.fill-tile span{transition-property:background,color,transform,-webkit-text-stroke;transition-duration:.001s,.001s,.6s,.001s} /* fotos: llegan desaturadas, color al hover (snap suave) */ .card .ph img,.mini .ph img{filter:var(--photo-grade);transition:filter .35s ease} .card:hover .ph img,.mini:hover .ph img{filter:none} /* botón press (skill) */ .btn:active,.wa-float:active,.pay-chip:active{transform:scale(.97)} .btn,.wa-float,.pay-chip{transition:background .15s ease,color .15s ease,transform .1s ease-out} /* marquesina brutalista */ @media(prefers-reduced-motion:reduce){ .hero-logo,.hero-title,.hero-rule,.hero-tag,.hero-foot{animation:none} .subsec .subsec-hd,.subsec .cards article,.fill-tile span{opacity:1;transform:none;transition:none} .scrollbar{display:none} } /* ═══════ POLISH PASS — contraste y responsive (audit impeccable) ═══════ */ /* BUG: la sección transporte es navy — las tarjetas heredaban texto oscuro ilegible */ /* BUG: eyebrow dorado sobre fondo hueso no pasa contraste */ #reviews .eye{color:#00666C} #about .eye{color:#00666C} /* contraste de leads sobre hueso (4.5:1) */ #why .lead,#experiences .lead,#water .lead,#villas .lead{color:#44525E} .card p{color:#4E5C68} .why-cell p{color:#4E5C68} .subsec-note{color:#5A6772} /* modal sobre fondo claro: velo más denso para foco */ .xmodal-veil{background:rgba(16,29,43,.9)} /* mobile: marquesina más compacta, tiles y stats proporcionales */ @media(max-width:640px){ .fill-tile{min-height:200px} .fill-tile span{font-size:clamp(24px,7vw,34px)} .about-stats{gap:24px} .about-stats b{font-size:32px} .subsec-hd{font-size:clamp(23px,6.5vw,32px)!important} .hero-logo{height:clamp(48px,14vw,72px)} .water-scroll{grid-auto-columns:minmax(240px,280px)} .hb-bar{min-height:0} } /* texto largo: menos huérfanas */ .lead,.card p,.xm-desc{text-wrap:pretty} h1,h2,h3{text-wrap:balance} /* ═══════ ARQUITECTURA 4 PILARES ═══════ */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy-ui)} .pillars a{padding:clamp(28px,4vw,52px) clamp(18px,2.5vw,34px);display:flex;flex-direction:column;gap:10px;transition:background .001s} .pillars a:hover{background:var(--gold)} .pillars a:hover b,.pillars a:hover span{color:var(--navy-ui)} .pillars b{font-family:var(--disp);font-weight:800;font-size:clamp(16px,1.8vw,24px);letter-spacing:.02em;text-transform:uppercase;color:var(--paper);line-height:1.1} .pillars span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} @media(max-width:760px){.pillars{grid-template-columns:repeat(2,1fr)}} .pillar-band{padding:clamp(48px,7vw,90px) 0 0;background:var(--paper)} .pillar-band.dark{background:var(--navy-ui)} .pillar-band .r{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap} .pillar-no{font-family:var(--disp);font-weight:800;font-size:clamp(52px,9vw,120px);line-height:.9;color:transparent;-webkit-text-stroke:2px var(--teal)} .pillar-band.dark .pillar-no{-webkit-text-stroke:2px var(--gold)} .pillar-ti{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5.5vw,68px);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy-ui);line-height:.95} .pillar-band.dark .pillar-ti{color:var(--paper)} /* AT THE VILLA */ #atvilla{background:var(--paper)} .avs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .avs{background:var(--navy-ui);aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;transition:background .001s} .avs:hover{background:var(--teal)} .avs svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;margin-bottom:auto} .avs:hover svg{stroke:var(--paper)} .avs b{font-family:var(--disp);font-weight:800;font-size:clamp(15px,1.6vw,20px);text-transform:uppercase;letter-spacing:.03em;color:var(--paper);line-height:1.15} .avs span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:8px} .avs:hover span{color:var(--paper)} @media(max-width:880px){.avs-grid{grid-template-columns:repeat(2,1fr)}} /* ═══════ FICHAS DE VILLA (broker) ═══════ */ .vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;row-gap:56px} @media(max-width:820px){.vgrid{grid-template-columns:1fr}} .vcard{display:flex;flex-direction:column} .vcard .ph{aspect-ratio:16/10;margin-bottom:18px;background:#0A1420} .vcard .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-grade);transition:filter .35s ease} .vcard:hover .ph img{filter:none} .vspecs{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:10px} .vcard h3{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.6vw,32px);text-transform:uppercase;letter-spacing:-.01em;color:var(--navy-ui);margin-bottom:10px} .vcard p{font-size:14.5px;color:#4E5C68;letter-spacing:.03em;line-height:1.7;margin-bottom:12px;max-width:52ch} .vprice{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--navy-ui);font-weight:600;margin-bottom:12px;display:block} .vnote{font-size:12.5px;font-style:italic;color:#5A6772;margin-top:-4px;margin-bottom:12px} .vpend{display:flex;align-items:center;justify-content:center} .vpend i{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-style:normal} /* ═══════ FICHA BROKER v2 ═══════ */ .vhead{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .vref{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;background:var(--navy-ui);color:var(--gold);padding:5px 10px} .vzone{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;background:var(--teal);color:var(--paper);padding:5px 10px;text-transform:uppercase} .vset{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;background:var(--gold);color:var(--navy-ui);padding:5px 10px;text-transform:uppercase} .vico{display:flex;flex-wrap:wrap;gap:18px 26px;padding:14px 0;border-top:none;margin:6px 0 10px} .vico div{display:flex;align-items:center;gap:9px} .vico svg{width:20px;height:20px;stroke:var(--navy-ui);fill:none;stroke-width:1.6;stroke-linecap:square} .vico b{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--navy-ui)} .vico span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5A6772;display:block;line-height:1.3} .vchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .vchips i{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-ui);background:rgba(16,29,43,.07);padding:7px 11px} .vchips svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:square} .vdist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .vdist i{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:var(--navy-ui);padding:7px 11px} .vdist svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:square} .vstaff{font-size:13px;color:#4E5C68;letter-spacing:.03em;margin-bottom:12px} .vstaff b{color:var(--navy-ui);font-weight:700} .vseasons{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px} .vseasons i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;padding:6px 10px;background:var(--navy-ui);color:var(--paper)} .vseasons i.hot{background:var(--gold);color:var(--navy-ui)} .vmin{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#5A6772;margin-bottom:12px;display:block} /* ═══════ ASISTENTE CONCIERGE (robot filtro fase 1) ═══════ */ .cca-btn{position:fixed;right:22px;bottom:96px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--gold);color:var(--navy-ui);border:none;padding:14px 18px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600} .cca-btn:hover{background:var(--navy-ui);color:var(--gold)} .cca-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8} .cca{position:fixed;right:22px;bottom:96px;z-index:70;width:min(360px,calc(100vw - 44px));background:var(--navy-ui);display:none;flex-direction:column;max-height:min(560px,80vh)} .cca.open{display:flex} .cca-hd{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--gold)} .cca-hd b{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-ui)} .cca-hd button{background:none;border:none;font-size:18px;color:var(--navy-ui);cursor:pointer;line-height:1} .cca-bd{padding:20px 18px;overflow-y:auto} .cca-q{font-family:var(--body);font-size:14px;color:var(--paper);margin-bottom:14px;line-height:1.6} .cca-ops{display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .cca-ops button{text-align:left;background:rgba(237,234,224,.06);border:none;color:var(--paper);padding:16px 16px;cursor:pointer;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;transition:background .001s} .cca-ops button:hover{background:var(--teal);color:#fff} .cca input[type=text],.cca input[type=email],.cca input[type=tel]{width:100%;background:rgba(237,234,224,.08);border:none;color:var(--paper);padding:12px 14px;font-family:var(--body);font-size:16px;margin-bottom:10px} .cca input[type=text]:focus,.cca input[type=email]:focus,.cca input[type=tel]:focus{outline:2px solid var(--gold)} .cca-go{width:100%;background:var(--gold);color:var(--deep);border:none;padding:14px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-top:4px} .cca-back{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;margin-top:10px;padding:4px 0} .cca-sum{background:rgba(237,234,224,.06);padding:14px;margin-bottom:12px;font-size:13px;color:var(--paper);line-height:1.7} .cca-sum b{color:var(--gold)} .cca-faq{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px} .cca-faq button{background:none;border:1px solid rgba(200,169,110,.4);color:var(--gold);padding:7px 10px;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase} .cca-faq button:hover{background:var(--gold);color:var(--navy-ui)} .cca-ans{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:10px;border-left:2px solid var(--teal);padding-left:10px;display:none} /* ═══════ FORM PRO: validación + consentimiento ═══════ */ .fld input.err,.fld select.err{outline:2px solid #C4453A} .f-msg{font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin-top:10px;display:none} .f-msg.err{display:block;color:#E88579} .f-msg.ok{display:block;color:#5BC98F} .consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px} .consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--gold)} .consent label{font-size:12px;color:var(--muted);line-height:1.6;letter-spacing:.02em} .consent a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0} /* ═══════ TOP + SKIP ═══════ */ .top-btn{position:fixed;left:22px;bottom:22px;z-index:60;width:44px;height:44px;background:var(--navy-ui);color:var(--gold);border:none;font-family:var(--mono);font-size:15px;cursor:pointer;display:none;align-items:center;justify-content:center} .top-btn.show{display:flex} .top-btn:hover{background:var(--gold);color:var(--navy-ui)} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--navy-ui);padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.12em} .skip:focus{left:0} @media(max-width:640px){.cca-btn{right:16px;bottom:88px;padding:12px 14px}.cca{right:12px;bottom:88px}} /* ═══ hero: entrada por líneas enmascaradas ═══ */ .hero-title em{opacity:0;animation:rise .7s var(--xo) .55s forwards} @media(prefers-reduced-motion:reduce){.hero-title .hl i{transform:none;animation:none}.hero-title em{opacity:1;animation:none}} /* ═══════ ROUTER: home + 4 páginas ═══════ */ [data-pg]{display:none} /* 5 puertas: Experiencias absorbe The Selection; En tu villa absorbe At the Villa */ body.v-exp [data-pg="exp"],body.v-sel [data-pg="sel"],body.v-tr [data-pg="tr"],body.v-st [data-pg="st"],body.v-av [data-pg="av"],body.v-yt [data-pg="yt"],body.v-viaje [data-pg="viaje"]{display:block} body.v-exp [data-hm],body.v-sel [data-hm],body.v-tr [data-hm],body.v-st [data-hm],body.v-av [data-hm],body.v-yt [data-hm],body.v-viaje [data-hm]{display:none} .back-home{position:fixed;top:18px;left:18px;z-index:60;display:none;background:var(--navy-ui);color:var(--gold);border:none;padding:12px 18px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600} .back-home:hover{background:var(--gold);color:var(--navy-ui)} body.v-exp .back-home,body.v-sel .back-home,body.v-tr .back-home,body.v-st .back-home,body.v-av .back-home,body.v-yt .back-home,body.v-viaje .back-home{display:block} /* ═══ hero: bloque tipográfico en planos ═══ */ /* ═══ PORTADAS: texto fuera de la foto ═══ */ .portadas{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:var(--paper);padding:6px} @media(max-width:760px){.portadas{grid-template-columns:1fr}} .portada{display:block;background:var(--navy-ui);overflow:hidden} .portada img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:var(--photo-grade);transition:filter .35s ease,transform .6s var(--xo)} .portada:hover img{filter:none;transform:scale(1.03)} .portada .no{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--gold);padding:22px 24px 0} .portada h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,42px);text-transform:uppercase;letter-spacing:-.01em;color:#fff;line-height:.95;margin:8px 0;padding:0 24px} .portada p{font-size:13.5px;color:rgba(237,234,224,.85);max-width:46ch;letter-spacing:.03em;margin-bottom:14px;padding:0 24px} .portada.wide{grid-column:1/-1} .portada.wide img{aspect-ratio:21/9} .portada .go{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;padding:0 24px 24px} .portada:hover .go{color:#fff} /* ═══ AT THE VILLA: foto + etiqueta debajo ═══ */ .avs-grid{grid-template-columns:repeat(5,1fr)!important;row-gap:32px!important} @media(max-width:880px){.avs-grid{grid-template-columns:repeat(2,1fr)!important}} .avs{background:transparent!important;aspect-ratio:auto!important;padding:0!important;display:flex;flex-direction:column;justify-content:flex-start!important} .avs .ph{aspect-ratio:1/1;display:block;margin-bottom:12px;background:var(--navy-ui)} .avs .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-grade);transition:filter .35s ease} .avs:hover .ph img{filter:none} .avs.noph .ph{display:flex;align-items:center;justify-content:center} .avs .ph svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:square} .avs>svg{display:none} .avs b{color:var(--navy-ui)!important;font-size:clamp(13px,1.3vw,17px)!important} .avs>span:last-child{color:#5A6772!important} .avs:hover b{color:var(--teal)!important} /* ═══════ ACORDEONES: políticas e info institucional ═══════ */ .bk-grid{display:block!important;max-width:none;margin:0} /* alineado con el encabezado y mismo ancho que "Cómo trabajamos" */ .acc{background:rgba(16,29,43,.06);margin-bottom:6px} .acc-hd{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;background:none;border:none;cursor:pointer;padding:18px 22px;text-align:left} .acc-hd{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--navy-ui)!important;font-weight:600!important;line-height:1.5!important} .acc-h3{margin:0;font:inherit;letter-spacing:inherit;text-transform:none;display:block} .acc-hd .pm{font-family:var(--mono);font-size:18px;color:var(--teal);line-height:1;transition:transform .3s var(--xo)} .acc.open .acc-hd .pm{transform:rotate(45deg)} .acc-bd{display:none;padding:0 22px 20px} .acc.open .acc-bd{display:block} .acc:hover .acc-hd{color:var(--teal)} #legal .acc{background:rgba(237,234,224,.05)} #legal .acc-hd{color:var(--gold)} #legal .acc-hd .pm{color:var(--gold)} /* ═══ hero: sílabas sólidas en planos ═══ */ .hero-title{color:#fff;text-transform:none;line-height:1.02;text-align:left;letter-spacing:-.01em} .hero-title .syl.sb i{color:var(--gold)} .hero-title .syl{display:block;position:relative} .hero-title .syl i{display:block;font-style:normal;color:#fff;opacity:0} @keyframes fromL{from{opacity:0;transform:translateX(-42vw)}to{opacity:1;transform:none}} @keyframes fromR{from{opacity:0;transform:translateX(42vw)}to{opacity:1;transform:none}} .hero-title .sa i{animation:fromL .85s var(--xo) .12s forwards} .hero-title .sb i{animation:fromR .85s var(--xo) .26s forwards} @media(prefers-reduced-motion:reduce){.hero-title .syl i{opacity:1;animation:none!important;transform:none}} /* ═══ minimal: reveals solo fade, marquesinas lentas ═══ */ .rv{transform:none!important} /* ═══ wa flotante: dorado, con pulso vivo ═══ */ .wa-float{background:var(--gold)!important;box-shadow:0 0 0 0 rgba(200,169,110,.55);color:#060F1A} .wa-float svg{stroke:var(--navy-ui)!important;fill:var(--navy-ui)!important} @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(200,169,110,.55)}70%{box-shadow:0 0 0 16px rgba(200,169,110,0)}100%{box-shadow:0 0 0 0 rgba(200,169,110,0)}} .wa-float{animation:waPulse 2.2s ease-out 3} @media(prefers-reduced-motion:reduce){.wa-float{animation:none}} /* ═══ modal: fotos completas sin recorte ═══ */ .xm-photo{background:#0B1826;min-height:380px} .xm-photo .ph img{object-fit:cover;object-position:center} @media(max-width:760px){.xm-photo{min-height:260px}} /* ═══ modal: collage de 3 ═══ */ .xm-collage{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px} .xm-collage img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer} .xm-collage .c1{grid-column:1/-1;aspect-ratio:21/9} .xm-collage .c2,.xm-collage .c3{aspect-ratio:4/5} .xm-collage .lone{grid-column:1/-1;aspect-ratio:16/10} /* ═══════ MENÚ SUPERIOR ═══════ */ .topnav{position:fixed;top:0;left:0;right:0;z-index:65;display:flex;gap:clamp(14px,2.4vw,34px);align-items:center;padding:14px clamp(16px,3vw,34px);background:rgba(11,24,38,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-x:auto;scrollbar-width:none} .topnav::-webkit-scrollbar{display:none} .topnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);white-space:nowrap;font-weight:600} .topnav a:hover{color:var(--gold)} .topnav .nav-logo img{height:38px;width:auto;display:block;opacity:.95} /* isotipo vertical */ .topnav .nav-logo{flex:none;margin-right:clamp(6px,1.5vw,18px)} .back-home{top:64px!important} .topnav .lang-float{position:static!important;top:auto!important;right:auto!important;margin-left:auto;display:flex;gap:6px;flex:none} .nav-links{display:contents} .nav-burger{display:none;width:44px;height:44px;flex:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:0} .nav-burger span{display:block;width:22px;height:2px;background:var(--gold);transition:transform .3s ease,opacity .3s ease} @media(max-width:980px){ .topnav{overflow:visible} .nav-burger{display:flex} .nav-links{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 52px);height:calc(100dvh - 52px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4.5vh,34px);background:rgba(6,15,26,.99);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .25s ease} .topnav.open .nav-links{opacity:1;pointer-events:auto} .nav-links a{font-size:15px;letter-spacing:.3em;padding:6px 10px} .nav-links .lang-float{margin-left:0} .topnav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .topnav.open .nav-burger span:nth-child(2){opacity:0} .topnav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(prefers-reduced-motion:reduce){.nav-links,.nav-burger span{transition:none}} /* ═══ trip design — bandas de servicio ═══ */ /* Tres formas de trabajo, no tres precios. Cada banda es una unidad: izquierda = qué trabajo es; derecha = precio de entrada + política del fee, que nunca se separan (nadie ve el número sin su condición). */ .td-bands{max-width:860px;border-top:1px solid rgba(16,29,43,.12)} .td-band{display:flex;align-items:flex-start;gap:24px;padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid rgba(16,29,43,.12)} .td-band-l{flex:1 1 auto;min-width:0} .td-band-r{flex:0 0 auto;text-align:right;width:min(42%,340px)} .td-band b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(16px,1.8vw,21px);letter-spacing:.01em;text-transform:uppercase;color:var(--navy-ui);line-height:1.25;margin-bottom:6px} .td-band span{display:block;font-size:14.5px;color:#4E5C68;line-height:1.6;letter-spacing:.02em;max-width:46ch} .td-band em{display:block;font-style:normal;font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.9vw,22px);letter-spacing:.02em;color:var(--navy-ui);line-height:1.2;white-space:nowrap} .td-band i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);line-height:1.7;margin-top:7px;text-wrap:balance} .td-call{display:flex;align-items:flex-start;gap:10px;max-width:60ch;margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--teal)} .td-call svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--teal)} .td-assure{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#00666C;margin-top:10px} .td-proof{font-size:15px;font-style:italic;color:#3A4A56;max-width:56ch;margin:6px 0 22px;line-height:1.65} .td-proof i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#00666C;margin-left:8px} .v-note-season{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#00666C;margin-top:6px} @media(max-width:720px){ .td-band{flex-direction:column;gap:12px} .td-band-r{text-align:left;width:auto} } .td-credit{margin-top:clamp(24px,3vw,32px);font-size:14.5px;line-height:1.75;color:#4E5C68;max-width:68ch} .td-credit strong{color:var(--gold)} /* ═══════ CONTACTO ALIGERADO ═══════ */ /* #contact se divide en dos zonas: una franja azul con la entrada humana ("We're one message away" + Laura/Federico/Email) y una banda de arena a sangre con el formulario, que enlaza en continuidad con #booking. Mismos campos, textos, orden, validaciones y lógica: solo cambia el fondo. NOTA: el sangrado usa margen negativo — la capa BRUTALIST OVERRIDE anula box-shadow con !important, así que la técnica habitual no es viable aquí. */ .contact{padding-bottom:0} /* Título del contacto visible sobre el fondo navy: mensaje positivo completo "We're one message away" (antes solo se veía la palabra "away" como chip dorado). */ .contact h2{color:var(--ivory)!important} .contact .people{margin:52px 0 clamp(52px,6vw,76px)} .contact .form-wrap{ background:var(--paper); max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-top:0; padding:clamp(44px,5vw,68px) max(22px,calc(50vw - 340px)) clamp(52px,6vw,76px); } /* tinta del formulario invertida para fondo claro */ .contact .form-wrap > p{color:#3A4A56} #f-send{margin-top:clamp(40px,5vw,60px)} /* aire entre consentimiento y CTA */ .contact .fld label{color:#00666C} .contact .fld input,.contact .fld select,.contact .fld textarea{ background:rgba(16,29,43,.06);color:var(--navy-ui) } .contact .fld input::placeholder,.contact .fld textarea::placeholder{color:#8A94A0} .contact .consent label{color:#5A6772} .contact .consent a{color:#00666C} .contact .f-msg.err{color:#B33A2B} .contact .f-msg.ok{color:#1F7A4C} /* ═══════ CRITERIO EDITORIAL — "Antes de recomendarte nada" ═══════ */ /* Pieza de criterio entre capítulos del catálogo. Reutiliza tokens y el lenguaje de .why-cell (marcador mono + título display + texto). No es una ficha comprable: sin foto, sin precio, sin CTA por criterio. El grid 2×2 se declara aquí porque ningún contenedor existente sirve: .why-grid es de 5 columnas y .tr-notes/.xm-facts fijan color para fondo oscuro. */ .pz{max-width:820px} .pz .eye{margin-bottom:14px} .pz-intro{max-width:62ch;margin-bottom:clamp(22px,3vw,32px)} .pz-cta{margin-top:6px} @media(max-width:640px){.pz-grid{grid-template-columns:1fr}} /* ═══════ HERO — eje único y titular de dos frases ═══════ */ /* Dirección de arte: el bloque del H1 se centra. Con text-align:left la tinta se desviaba hasta 166px del eje mientras eyebrow, regla, subheadline, firma y CTA caían en 0 — el hero tenía dos ejes compitiendo. Cada .syl es una entrada de la animación de dos tiempos (sa/sb). El H1 sale del hero-body (820px) y usa el ancho del hero para respirar. Antes se forzaba white-space:nowrap y un tope de fuente calibrado a una frase concreta; cuando el copy cambiaba a una línea más larga, se salía del encuadre y se recortaba. Ahora la frase envuelve de forma controlada (text-wrap:balance) si no cabe: el copy gobierna el diseño y nunca se mutila, en cualquier idioma o ancho. */ .hero-title{text-align:left;white-space:normal} /* flujo COMENCEMOS: bloque editorial a la izquierda */ .hero-title .syl i{white-space:normal;text-wrap:balance} .hero-body .hero-title{width:auto;max-width:none} /* !important necesario: .disp-lg lo lleva en la capa MOTION (~L527) y ganaría. Tope 93px = tamaño máximo de golpe; por debajo escala con el viewport. */ .hero-title{font-size:min(93px,9.2vw)!important} /* B4: el H1 nuevo tiene una linea mas larga que el anterior; en pantallas angostas se reduce para conservar aire lateral y no tocar los bordes */ @media(max-width:520px){.hero-title{font-size:7.6vw!important}} /* firma de Laura & Fede — una sola vez en el hero */ .hero-sign{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,228,214,.85);margin:-22px 0 34px;text-shadow:0 2px 5px rgba(0,0,0,.55);animation:rise .6s var(--xo) .34s both} @media(prefers-reduced-motion:reduce){.hero-sign{animation:none}} #calc{background:var(--paper)} #calc .disp{color:var(--navy-ui)} @media(max-width:560px){} /* B8: el h3 envuelve al button (HTML5 prohibe h3 dentro de button). El wrapper no aporta caja propia: el acordeon conserva su layout. */ .acc-h3{margin:0;font:inherit;letter-spacing:inherit;text-transform:none;display:block} /* B8: agrupacion del FAQ en tres bloques + legal */ .acc-group{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#00666C;margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(200,169,110,.28)} /* ^ WCAG: el dorado #C8A96E sobre marfil daba 1.86:1; #00666C (token ya usado por .on-ivory .eye para etiquetas sobre marfil) da 5.60:1 — cumple 4.5:1. */ .acc-group:first-child{margin-top:0} .acc-legal{color:#8FA0AE;border-bottom-color:rgba(143,160,174,.25);margin-top:44px} /* B8: FAQ agrupado en tres bloques tematicos */ .acc-group{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#00666C;margin:38px 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(200,169,110,.28)} .acc-group:first-child{margin-top:0} /* ══════════ NUEVA HOME — narrativa de ingreso + via express ══════════ */ .hero-express{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,228,214,.8);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s,color .25s;text-shadow:0 2px 5px rgba(0,0,0,.55)} .hero-express:hover{color:var(--gold);border-color:var(--gold-dim)} .pillars-band{background:var(--navy);color:var(--light);padding:clamp(58px,9vw,120px) 0;text-align:left} .pillars-lead{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;line-height:1.06;font-size:clamp(26px,4.4vw,52px);color:var(--light);max-width:18ch;margin:0 0 clamp(26px,4vw,46px)} .pillars-lead em{font-style:normal;color:var(--gold)} .pillars{display:flex;width:fit-content;justify-content:flex-start;flex-wrap:wrap;gap:clamp(20px,3.4vw,50px);font-family:var(--mono);font-size:clamp(12px,1.4vw,15px);letter-spacing:.28em;text-transform:uppercase;color:var(--light)} .pillars span{position:relative} .pillars span+span::before{content:"·";position:absolute;left:calc(-1 * clamp(11px,1.7vw,25px));color:var(--gold)} .express-hd{text-align:center;max-width:640px;margin:0 auto clamp(26px,4vw,42px)} .express-hd p{font-size:clamp(15px,1.6vw,18px);color:var(--muted-dark,#5a6b78);font-weight:300;margin-top:12px} /* Intro breve bajo cada subseccion (sentir de coleccion) */ .subsec-intro{font-size:clamp(14px,1.5vw,16px);font-weight:300;line-height:1.6;max-width:56ch;margin:-6px 0 26px;color:#5B6A76} /* Accesibilidad: indicador de foco visible para teclado */ :focus-visible{outline:2px solid var(--teal);outline-offset:2px} /* enlaces SEO de pie */ .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;max-width:640px} .foot-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,224,.5);transition:color .25s} .foot-links a:hover{color:var(--gold)} /* fee de diseño: aparece al final del intake de viaje cuando hay datos básicos */ #i-fee{display:none;flex-direction:column;gap:4px;background:rgba(200,169,110,.07);border:1px solid rgba(200,169,110,.45);padding:16px 18px} #imodal.ctx-viaje #i-fee.show{display:flex} #i-fee b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} #i-fee em{font-family:var(--disp);font-style:normal;font-weight:800;font-size:24px;color:var(--gold);line-height:1.2} #i-fee span{font-size:12px;color:var(--muted);letter-spacing:.02em;line-height:1.55} .td-band-r .td-quote{white-space:nowrap} /* referencia de producto: discreta, junto al precio de la ficha */ #xm-sku{margin-left:12px;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.75} .lp-ref{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-navy);opacity:.8;margin:0 0 18px} /* WCAG AA (cierre Fase 1): tokens oscuros existentes sobre marfil. #00666C = mismo valor que .on-ivory .eye; #4E5C68 = .td-band span. */ #express .eye{color:#00666C} #express .lead{color:#4E5C68} /* ═══ Fase 3 UX (comité 27-jul): correcciones objetivas ═══ */ /* guard: la caja del
de #why extendía el documento a 401px en 375px */ html,body{overflow-x:clip} /* el chip fijo "← Home" tapaba el título de las vistas en móvil */ @media(max-width:980px){[data-pg] .chap-hd:first-child{padding-top:46px}} /* ficha en móvil: precio + CTA siempre a la vista (antes: a 2 pantallas) */ @media(max-width:760px){ .xm-cta{position:sticky;bottom:-1px;background:var(--navy);padding:12px 0 10px;margin-top:16px;box-shadow:0 -14px 22px rgba(6,15,26,.6)} } /* tap targets ≥24px sin cambiar el diseño (WCAG 2.2) */ .foot-links a{display:inline-block;padding:6px 0} .rev-cta{padding:8px 0} .hero-express{display:inline-block;padding:10px 0} .consent input,.imflex input{width:18px;height:18px} #xm-dots i{padding:8px 4px;background-clip:content-box;cursor:pointer} /* flotante de WhatsApp compacto en móvil: no tapa los CTAs primarios */ @media(max-width:640px){ .wa-float span{display:none} .wa-float{padding:13px;border-radius:50%!important} } /* prueba social discreta junto a los CTAs de decisión (aprobada 27-jul) */ .proof-mini{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#00666C;margin:10px 0 0} .proof-mini a{color:#00666C;text-decoration:underline;text-underline-offset:3px} .proof-mini b{color:#00666C;font-weight:400} /* ═══ Tarjeta de villa — CANON CLARO (orden de Fede 19-ago): misma arquitectura que la tarjeta de Experiencias (transparente sobre el suelo, sin bloque navy). El detalle sigue bajando a la ficha (#xm-vx). ═══ */ .vcard{background:transparent} .vcard .ph{aspect-ratio:4/3;margin-bottom:18px} .vcard .vhead{margin:0 0 10px} .vcard .vzone,.vcard .vset{background:none;padding:0;color:#00666C;font-size:10px;letter-spacing:.2em} .vcard .vzone::after{content:" · "} .vcard h3{color:var(--paper-ink,#0D1F30);font-size:21px;letter-spacing:.04em;margin-bottom:10px} .vcard .vdatos{font-size:13.5px;color:var(--muted-dark,#4E5C68);letter-spacing:.02em;margin-bottom:12px} .vd-it{display:block;width:100%;box-sizing:border-box;position:relative;padding-left:15px;margin:2px 0} .vd-it::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:#00666C} .vcard .vinc{font-size:12.5px;color:var(--muted-dark,#4E5C68);line-height:1.6;margin-bottom:18px} .vcard .vinc b{color:var(--paper-ink,#0D1F30);font-weight:600} .vcard .vfila{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px solid rgba(11,24,38,.18);padding-top:16px;margin-bottom:26px;flex-wrap:wrap} .vcard .vfila .vprice{color:var(--gold);font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:.03em;margin:0} .vcard .vfila .more{margin:0;color:#00666C} /* el detalle completo vive en la ficha, a un clic */ .vcard>p:not([class]),.vcard .vico,.vcard .vchips,.vcard .vdist,.vcard .vstaff,.vcard .vseasons,.vcard .vmin,.vcard .vnote{display:none} .vgrid{gap:28px;row-gap:44px} /* la ficha recibe los bloques de detalle clonados (contexto navy) */ #xm-vx{margin:2px 0 16px} #xm-vx .vico{display:flex;border:none;padding:12px 0 4px} #xm-vx .vico b{color:#fff} #xm-vx .vico span{color:var(--muted-navy)} #xm-vx .vico svg{stroke:var(--gold)} #xm-vx .vchips,#xm-vx .vdist{display:flex} #xm-vx .vchips i,#xm-vx .vdist i{background:rgba(237,234,224,.08);color:var(--paper)} #xm-vx .vstaff{display:block;color:#AEBAC4} #xm-vx .vstaff b{color:#C7CFD6} #xm-vx .vseasons{display:flex} #xm-vx .vmin{display:block;color:var(--muted-navy)} #xm-vx .vnote{display:block;color:#AEBAC4;font-style:italic} /* ── Landing hero (páginas tipo categoría/producto): legibilidad del eyebrow y del subtítulo sobre la foto + ritmo vertical. Solo afecta al hero de las landings con .eye/.lp-hsub; las experiencias usan .lp-eye/.lp-loc. ── */ /* Velo/scrim reforzado detrás del texto: garantiza legibilidad tanto sobre fotos oscuras como claras (p. ej. cristalería a plena luz). */ .lp-hero::after{background:linear-gradient(to bottom,rgba(11,24,38,0) 12%,rgba(11,24,38,.42) 52%,rgba(11,24,38,.84) 100%)!important} .lp-hero .eye{color:var(--gold)!important;font-weight:700!important;text-shadow:0 2px 14px rgba(0,0,0,.75)} .lp-hin .lp-title{margin-top:clamp(8px,1.1vw,12px);text-shadow:0 2px 22px rgba(0,0,0,.6)} .lp-hsub{font-family:var(--body);font-weight:700;font-size:clamp(15px,2vw,20px);line-height:1.4;color:#F3EFE6;margin:15px 0 0;max-width:46ch;text-shadow:0 2px 14px rgba(0,0,0,.75)} .lp-hero .lp-hflex{margin-top:clamp(24px,3.4vw,36px)} /* Cleanup V1 · sistema de botones: .lp-btn adopta la anatomía del primario (.btn), conservando color de función y hover; #f-send/#i-send igualan altura (line-height). */ .lp-btn{font-family:var(--body)!important;font-weight:400!important;letter-spacing:.12em!important;font-size:12px!important;line-height:1.65!important;padding:18px 38px!important;border:none!important;transition:background .15s,color .15s,transform .1s ease-out!important} button.btn{line-height:1.65} /* Release V1 · continuidad de producto en el Discovery */ .im-consulting{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:2px 0 8px} .im-consulting b{color:#fff;font-weight:600;letter-spacing:.08em} #i-channel label{cursor:pointer} /* Quick Wins · contacto con número visible + canal en error */ .person-tel{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#C7CFD6;margin-top:4px} #i-channel.err{outline:1px solid #B4552D;outline-offset:4px} /* ═══ Ajustes de Fede (19-ago · ronda 2) ═══════════════════════════════ 1) Párrafos de entrada de las vistas a ancho completo (hasta la 3ª foto) 2) Bullets de datos de villa con iconos de la familia aprobada 3) Precio + CTA de la tarjeta de villa como composición brutalista: dos bloques rellenos y pegados (navy + oro), radius 0 ═══ */ [data-pg] .lead,[data-pg] .subsec-intro{max-width:none} .vd-it.ic{padding-left:27px} .vd-it.ic::before{content:none} .vd-it.ic svg{position:absolute;left:0;top:.18em;width:17px;height:17px;stroke:#00666C;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter} .vcard .vfila{display:flex;align-items:stretch;gap:0;border-top:0;padding-top:0;margin-bottom:26px;flex-wrap:wrap} .vcard .vfila .vprice{flex:1 1 auto;display:flex;align-items:center;background:var(--navy-ui);color:var(--gold);padding:13px 16px;margin:0;font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.03em} .vcard .vfila .more{flex:1 1 auto;display:inline-flex;align-items:center;background:var(--gold);color:var(--navy-ui);padding:13px 16px;margin:0;font-weight:700;text-decoration:none} .vcard .vfila .more::after{color:var(--navy-ui)} /* ═══ ESCALA DE ESPACIADO ÚNICA (Fede 19-ago · ronda 6) ══════════════════ Regla de distancias del sitio — aire lógico, sin vacíos que desintegran: S1 12px dentro del bloque de entrada (regla congelada, intacta) S2 ~22px título de subsección → su contenido S3 clamp(36px,4.5vw,52px) entre bloques hermanos S4 clamp(72px,9vw,116px) entrada de sección (regla congelada, intacta) */ .subsec{margin-bottom:clamp(36px,4.5vw,52px)!important} .subsec-hd{margin-bottom:22px!important} .subsec-intro{margin:-4px 0 20px!important} .chap-hd{margin-bottom:clamp(28px,3.5vw,44px)!important} .cards{row-gap:clamp(32px,4vw,44px)!important} .vgrid{row-gap:clamp(32px,4vw,44px)!important} /* interiores: fichas, hubs y categorías (gana sobre sus estilos embebidos) */ .lp-wrap{padding-top:clamp(34px,4.5vw,56px)!important;padding-bottom:clamp(40px,5vw,64px)!important} .lp-blk{margin-bottom:clamp(32px,4vw,48px)!important} .lp-h-eye{margin-bottom:14px!important} .lp-items{margin-bottom:clamp(32px,4vw,48px)!important} .lp-gal-wrap,.lp-gal{margin-bottom:clamp(32px,4vw,48px)} .lp-facts{margin-bottom:clamp(32px,4vw,48px)!important} .lp-cta{margin-top:clamp(32px,4vw,48px)} /* ═══ DIRECCIÓN DE ARTE FOTOGRÁFICA (auditoría 19-ago · fase 1) ═══════════ Reglas de recorte para que ninguna foto pierda a su sujeto: 1) Hero vertical → tratamiento "port" (mismo patrón aprobado del motor): fondo desenfocado de sí misma + foto contenida sin recorte. 2) .lp-gal img.v → foto vertical en celda horizontal: el encuadre se ancla al tercio superior (donde están los rostros), no al centro. 3) .lp-gal.allv → galería solo-verticales: celdas 4/5 en dos columnas (nunca una vertical forzada al marco panorámico 2.15:1). 4) .pos-l / .pos-r → art direction puntual por tarjeta (sujeto lateral). */ .lp-hero.port>.lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;filter:blur(32px) brightness(.72) grayscale(.12);transform:scale(1.18)} .lp-hero.port>.lp-hero-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;filter:none} .lp-gal img.v{object-position:50% 30%} .lp-gal.allv{grid-template-columns:repeat(2,1fr)} .lp-gal.allv figure:first-child{grid-column:auto} .lp-gal.allv figure:first-child img,.lp-gal.allv img{aspect-ratio:4/5} .card .ph img.pos-l,.lp-item .ph img.pos-l{object-position:left center} .card .ph img.pos-r,.lp-item .ph img.pos-r{object-position:right center} /* consumo a bordo: cada opcion con su cantidad */ .amen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px;margin-top:10px} .amen-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(200,169,110,.18);padding:9px 12px} .amen-row span{font-size:13px;color:#EDE7DB} .amen-row input{width:58px;flex:none;text-align:center;padding:6px 4px} .im-hint{display:block;font-size:12px;color:#8FA0AE;margin-top:6px;line-height:1.5} .amen-n{display:flex;flex-direction:column;gap:2px;min-width:0} .amen-n b{font-weight:500;font-size:13px;color:#EDE7DB} .amen-n i{font-style:normal;font-size:11px;color:var(--gold);letter-spacing:.04em} /* Quienes somos: frase de respaldo */ .about-copy p.about-claim{background:var(--navy);color:#fff!important;font-family:var(--disp);font-weight:700;font-size:clamp(15px,1.75vw,19px);line-height:1.42;padding:20px 24px;border-left:3px solid var(--gold);margin:24px 0 18px;max-width:46ch} .about-who{display:block;font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-ivory);margin:10px 0 20px} .about-punch{color:var(--ink);font-weight:600;font-size:clamp(16px,1.7vw,18px)} /* interludio: la linea del fee */ .il-fee{margin-top:14px;font-size:13px;letter-spacing:.02em;color:rgba(234,228,214,.72);max-width:44ch} /* ══════════ 7) HOME V7 ══════════ Sistema del home publicado el 02-sep-2026: la foto abre el capítulo, el bloque sólido (navy o arena) carga el contenido. Va al final para ganar la cascada a las capas anteriores; los !important son deliberados donde una capa vieja fija color o tamaño con !important. */ #about,#express,#reviews{padding-block:clamp(60px,7.5vw,104px)}.contact{padding-block:clamp(52px,6.5vw,84px) clamp(40px,5vw,64px)}.ph-band{min-height:min(84vh,760px);padding:0!important}.ph-band .il-bg{position:absolute;inset:0}.ph-band .il-bg img{width:100%;height:100%;object-fit:cover;display:block}.chap-open{margin:0 0 clamp(66px,9vw,130px)}.cc-state,.steps-navy,#reviews.navy-sec,.contact{background:var(--navy)!important}.cc-state{padding:clamp(60px,7.5vw,100px) 0}.cc-state .eye{color:var(--gold)}.cc-state h2{color:#fff;margin-top:10px}.cc-state .lead{color:#B9C4CC;max-width:52ch;margin-top:18px}.nums-band{display:flex;align-items:flex-end;min-height:100svh;padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px)}.interlude.nums-band .il-veil{background:linear-gradient(180deg,rgba(6,15,26,0) 0%,rgba(6,15,26,.05) 40%,rgba(6,15,26,.62) 68%,rgba(6,15,26,.92) 100%)!important}.nums-band .about-stats b,.nums-band .about-stats span{text-shadow:0 2px 8px rgba(0,0,0,.75),0 8px 26px rgba(0,0,0,.5)}.nums-band .about-stats span{font-size:12px;letter-spacing:.2em;color:#EDE7DB}.nums-band .about-stats{justify-content:space-between;width:100%;gap:clamp(20px,3vw,44px)}.nums-band .about-stats b{color:var(--gold);font-size:clamp(44px,7vw,96px)}.nums-band .about-stats span{color:rgba(237,231,219,.8)}.nums-band .il-body{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(22px,5vw,60px)}.opener-band{display:flex;align-items:flex-end;min-height:100svh;padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px)}.opener-band .il-bg{position:absolute;inset:0}.opener-band .il-bg img{width:100%;height:100%;object-fit:cover;display:block;object-position:center 30%}.interlude.opener-band .il-veil{background:linear-gradient(180deg,rgba(6,15,26,0) 0%,rgba(6,15,26,0) 52%,rgba(6,15,26,.82) 100%)!important}.opener-band .il-body{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(22px,5vw,60px);text-align:left}.opener-band .eye{color:var(--gold)}.opener-band .ph-title{color:#fff;font-size:clamp(34px,5vw,66px);line-height:.98;margin-top:8px}.opener-band .rev-score{color:#fff}.steps-navy{padding:clamp(48px,6vw,80px) 0}.steps-navy .why-grid{background:transparent;border:0;gap:clamp(26px,3vw,42px) clamp(22px,2.6vw,36px);grid-template-columns:repeat(5,1fr)}.steps-navy .why-cell{background:transparent;padding:0}.steps-navy .wn{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(38px,4.6vw,64px);line-height:1;color:var(--gold);margin-bottom:10px}.steps-navy .why-cell h3{color:#fff;font-size:clamp(12.5px,1.25vw,15.5px);white-space:nowrap;letter-spacing:.08em}.steps-navy .why-cell p{color:rgba(237,231,219,.82)}@media(max-width:1020px){.steps-navy .why-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.steps-navy .why-grid{grid-template-columns:1fr}}#reviews.navy-sec{padding-block:clamp(48px,6vw,80px)!important}#reviews.navy-sec .rev-card{background:transparent!important;padding:0}#reviews.navy-sec .rev-card p{color:#EDE7DB}#reviews.navy-sec .rev-card{display:flex;flex-direction:column}#reviews.navy-sec .rev-card b{color:var(--gold);margin-top:auto;padding-top:16px}#reviews.navy-sec .rev-grid{align-items:stretch}#reviews.navy-sec .rev-cta{margin-top:clamp(28px,3.4vw,44px);display:inline-block}#reviews.navy-sec .rev-cta{color:var(--gold)}.why-band{display:flex;align-items:flex-end;min-height:100svh;padding:clamp(52px,6.5vw,88px) 0 clamp(56px,7vw,96px)}.why-band .il-bg{position:absolute;inset:0}.why-band .il-bg img{width:100%;height:100%;object-fit:cover;display:block;object-position:center 22%}.interlude.why-band .il-veil{background:linear-gradient(180deg,rgba(6,15,26,0) 0%,rgba(6,15,26,0) 52%,rgba(6,15,26,.82) 100%)!important}.why-band .il-body{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(22px,5vw,60px);text-align:left}#why.why-band .eye{color:var(--gold)!important}#why.why-band .disp{color:#fff!important;font-size:clamp(34px,5vw,66px);line-height:.98;margin-top:8px}.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1!important}.hero{align-items:flex-end!important}.hero-body{text-align:center;display:flex;flex-direction:column;align-items:center;margin:0 auto;padding-bottom:clamp(44px,6vw,80px)}.hero-logo{margin-left:auto;margin-right:auto}.hero-title{text-align:center}.hero-tag{color:#F5F0E4;text-shadow:0 2px 18px rgba(6,15,26,.9),0 1px 4px rgba(6,15,26,.8);margin-left:auto;margin-right:auto}.hero .hero-foot{justify-content:center}@media(max-width:680px){.hero-title{font-size:clamp(26px,8.6vw,40px)!important;letter-spacing:0}.hero-body{width:100%;padding-left:16px;padding-right:16px;box-sizing:border-box}.hero-tag{max-width:94vw;font-size:15px}.hero-logo{max-width:70vw;height:auto}.opener-band .ph-title,.why-band h2{font-size:clamp(24px,7.4vw,34px)!important}.nums-band .about-stats{gap:22px 30px;flex-wrap:wrap}.nums-band .about-stats b{font-size:38px}.band-chip{font-size:10px;letter-spacing:.22em}}.why-band .il-body,.opener-band .il-body,.nums-band .il-body{text-align:center}.why-band .ph-title,.opener-band .ph-title,.why-band h2{margin-left:auto;margin-right:auto}.band-chip{margin-left:auto;margin-right:auto}.nums-band .about-stats{justify-content:center;gap:clamp(34px,6vw,90px)}.cc-state .r{text-align:center}.cc-state .lead{margin:18px auto 0}.hero .hero-veil{background:linear-gradient(180deg,rgba(6,15,26,.08) 0%,rgba(6,15,26,.22) 30%,rgba(6,15,26,.55) 58%,rgba(6,15,26,.9) 100%)!important}.hero-title,.hero-title em{text-shadow:0 2px 10px rgba(0,0,0,.65),0 10px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.9)!important}.hero-title em{box-shadow:none!important;background:none!important;color:var(--gold)!important}.hero-logo-h{max-width:min(440px,70vw);height:auto;margin-bottom:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.85)) drop-shadow(0 8px 24px rgba(0,0,0,.55))}.band-chip{display:inline-block;background:var(--gold);color:var(--deep);font-family:var(--disp);font-weight:600;font-size:clamp(11px,1.1vw,13px);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;padding:.75em 1.2em .65em;margin-top:18px;line-height:1}.band-lead{color:#EDE7DB;font-size:clamp(15px,1.7vw,19px);font-weight:300;max-width:46ch;line-height:1.65;margin-top:14px}.why-band{align-items:flex-end}.why-band .why-grid{margin-top:clamp(26px,3.2vw,40px);background:transparent;border:0;gap:clamp(26px,3vw,42px) clamp(22px,2.6vw,36px);grid-template-columns:repeat(5,1fr)}.why-band .why-cell{background:transparent;padding:18px 0 0;border-top:2px solid var(--gold)!important}.why-band .why-cell h3{color:#fff}.why-band .why-cell p{color:rgba(237,231,219,.82)}@media(max-width:1020px){.why-band .why-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.why-band .why-grid{grid-template-columns:1fr}}.chap-open .disp-md{font-size:clamp(24px,3vw,42px);line-height:1.16;letter-spacing:-.012em;text-transform:none;max-width:23ch}.chap-open .co-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);margin-top:clamp(30px,3.6vw,52px);max-width:74ch}.chap-open .co-cols .lead{margin:0;max-width:none}.chap-open .about-stats{margin:clamp(38px,4.6vw,64px) 0 0;gap:clamp(26px,4vw,60px)}.chap-open .about-stats span{display:block;margin-top:6px;max-width:14ch}@media(max-width:760px){.chap-open .co-cols{grid-template-columns:1fr;gap:20px}}.chap-next{display:inline-block;width:fit-content;margin-top:clamp(26px,3.4vw,44px);font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(0,160,152,.35);padding-bottom:6px;transition:border-color .3s}.chap-next:hover{border-color:var(--teal)}.interlude .chap-next,.contact .chap-next{color:var(--gold);border-bottom-color:rgba(200,169,110,.4)}.start-list{display:flex;flex-direction:column;margin-top:clamp(40px,5vw,72px);max-width:56ch}.start-list a{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;line-height:1.1;font-size:clamp(24px,3.4vw,46px);color:var(--navy-ui);text-decoration:none;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid rgba(27,42,56,.12);transition:color .3s,padding-left .3s}.start-list a:hover{color:var(--teal);padding-left:14px}#why .why-grid{gap:clamp(34px,4vw,54px) clamp(26px,3vw,40px)}.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:30px 0 6px}.ct-line{font-family:var(--disp);font-weight:700;font-size:clamp(15px,1.7vw,21px);color:var(--light);letter-spacing:.01em;margin-top:10px}