/* ---- fonts ----
   Declared here instead of through a Google Fonts stylesheet: that stylesheet was one more server to wait for
   before anything could paint, and inner pages loaded a second one whose fonts nothing used. These are the
   same files Google serves, upright only (no italic was ever set, yet 100 KB of it downloaded on the home).
   Each page <head> preloads the ones its first screen needs. If Google ever retires a URL the text falls back
   to the system face named in --display / --body / --mono; refresh the URLs from fonts.googleapis.com/css2. */
@font-face{font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100% 125%; font-display:swap; src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100% 125%; font-display:swap; src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter Tight'; font-style:normal; font-weight:400 600; font-display:swap; src:url(https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter Tight'; font-style:normal; font-weight:400 600; font-display:swap; src:url(https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Duckframe — shared chrome for the inner pages (intake, social, templates, legal, gracias).
   Loaded AFTER style.css: brings the new home's typography, nav, menu, buttons, footer and the
   curtain page transition to the pages that keep their own layout and script.js behaviour. */
:root{
  --display:'Archivo', 'Arial Black', Impact, sans-serif;
  --body:'Inter Tight', 'Inter', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
body{font-family:var(--body);}

/* ---- type: the home's voice ---- */
h1, h2, h3, .plan-name, .logo, .mobile-menu ul a, .film-line, .manifesto, .cta-section h2, .foot-giant{font-family:var(--display); font-weight:900; font-stretch:125%; letter-spacing:-0.04em;}
h1, .section h2, .cta-section h2, .intake-head h1, .social-hero h1, .legal h1{text-transform:uppercase; line-height:0.94;}
h3, .plan-name{font-stretch:115%; letter-spacing:-0.03em;}
.logo{font-size:17px; font-stretch:110%; letter-spacing:-0.03em; text-transform:none; min-height:44px; display:inline-flex; align-items:center;}

/* ---- nav: transparent over the page with a dark gradient backdrop, like the home ---- */
nav#siteNav{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0;}
nav#siteNav::before{content:''; position:absolute; inset:-1px 0 -40px; background:linear-gradient(180deg, rgba(0,8,20,0.9), rgba(0,8,20,0.55) 55%, transparent); pointer-events:none; z-index:-1;}
nav#siteNav.scrolled{background:rgba(0,8,20,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:0; box-shadow:0 10px 30px -18px rgba(0,0,0,0.8);}
nav#siteNav .wrap{height:76px;}
nav ul a{opacity:1; color:var(--ink-dim);}
nav ul a:hover, nav ul a[aria-current="page"]{color:var(--ink);}
.nav-cta, .menu-cta, .btn-primary, .plan-btn, .btn-next, .submit-row .btn-primary{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; background:linear-gradient(135deg, var(--gold), var(--gold2)); color:var(--navy0); border-radius:100px; box-shadow:0 10px 34px -10px rgba(255,195,0,0.55); position:relative; overflow:hidden;}
.nav-cta::after, .btn-primary::after, .plan-btn::after, .btn-next::after{content:''; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent); transform:skewX(-20deg); transition:left .7s var(--ease);}
.nav-cta:hover::after, .btn-primary:hover::after, .plan-btn:hover::after, .btn-next:hover::after{left:140%;}
.btn-secondary, .btn-back, .back-link{font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;}
.lang-toggle{min-height:44px; min-width:44px; border-color:rgba(245,247,250,0.18);}

/* ---- mobile menu: the home's big-type overlay ---- */
.mobile-menu{background:var(--navy0); backdrop-filter:none; -webkit-backdrop-filter:none; padding:110px 24px 40px;}
.mobile-menu ul a{font-size:clamp(30px, 9.5vw, 56px); text-transform:uppercase; padding:10px 0; border-bottom:0;}
.mobile-menu ul a::after{content:''; width:22px; height:1px; background:var(--gold); opacity:0; transform:scaleX(0.5); transform-origin:100% 50%; transition:transform .4s var(--ease), opacity .3s;}
.mobile-menu ul a:hover::after, .mobile-menu ul a[aria-current="page"]::after{opacity:1; transform:none;}
.menu-cta{margin-top:26px;}
.menu-wa{display:block; text-align:center; margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--dim, var(--ink-dim)); min-height:44px; line-height:44px;}
.menu-foot{letter-spacing:0.12em;}

/* ---- footer ---- */
footer{padding:26px 0 calc(28px + env(safe-area-inset-bottom)); border-top:1px solid rgba(245,247,250,0.1);}
/* phones: the back-to-top button is fixed in the bottom-left corner; without this band it sat on the last
   line of the footer (the WhatsApp number) once the page was scrolled to its end */
@media (max-width:760px){ footer{padding-bottom:calc(70px + env(safe-area-inset-bottom));} footer .foot-legal{line-height:2.1;} footer .foot-legal a{padding:8px 0;} }
/* a text link that stands alone under a row of buttons is something to tap: it gets a full-height row */
.cta-web a{display:inline-flex; align-items:center; min-height:44px;}
footer p, .foot-links a{font-size:12px; letter-spacing:0.06em; text-transform:uppercase;}
.foot-giant{display:none;}

/* ---- page transition: the curtain ----
   ARRIVING is CSS alone: two navy panels that are on screen from the very first paint and open by themselves.
   chrome.js used to build the curtain and open it on window.load, so a phone visitor watched the page appear,
   the curtain shut over it once the scripts arrived, and open again only when every image had loaded (2.8 s
   to content on 4G, 5.6 s on a slow connection). Now it never covers something already shown, it does not
   wait for a script or an image, and it runs on the compositor while the page's scripts start up.
   LEAVING is still chrome.js: #wipe closes over the page, then the browser goes. */
html.js::before, html.js::after{content:''; position:fixed; left:0; right:0; z-index:9000; height:50.5%; background:var(--navy0, #000814); pointer-events:none; animation:wipeOpen .8s cubic-bezier(.87,0,.13,1) .06s both;}
html.js::before{top:0; transform-origin:50% 0;}
html.js::after{bottom:0; transform-origin:50% 100%;}
@keyframes wipeOpen{from{transform:scaleY(1);} to{transform:scaleY(0);}}
html.motion-off::before, html.motion-off::after{content:none;}
#wipe{position:fixed; inset:0; z-index:9000; pointer-events:none; visibility:hidden;}
#wipe .panel{position:absolute; left:0; right:0; height:50.5%; background:var(--navy0); transform:scaleY(0);}
#wipe .panel.top{top:0; transform-origin:50% 0;} #wipe .panel.bottom{bottom:0; transform-origin:50% 100%;}
#wipe .wm{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; opacity:0;}
html.leaving #wipe{visibility:visible; pointer-events:auto;}
html.motion-off #wipe{display:none;}

/* ---- intake specifics ---- */
.btn-next, .btn-back{min-height:48px; padding:0 24px; border-radius:100px;}
.btn-back{border:1px solid rgba(245,247,250,0.28); color:var(--ink); background:transparent;}
@media (max-width:760px){ .intake-wrap .intake-head::before{inset:-28px -16px;} }

/* ---- gallery ---- */
.tpl-cover{position:relative; overflow:hidden; will-change:transform;}
.tpl-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:0 0; opacity:0; transition:opacity .5s ease; pointer-events:none; z-index:1;}
.tpl-card.playing .tpl-video{opacity:1;}
.tpl-card.playing .tpl-cover img{opacity:0.001;}
.tpl-cover .tpl-badge, .tpl-cover .tpl-peek{z-index:2;}
.page-head h1 .w{display:inline-block; white-space:nowrap;} .page-head h1 .char{display:inline-block; will-change:transform;}
.page-head h1 .w{overflow:hidden; padding-bottom:0.08em; margin-bottom:-0.08em;}
html.flip .tpl-card{animation:none !important;}

/* ---- gallery wall: every design drifting behind the heading ---- */
.page-head{position:relative; overflow:hidden; isolation:isolate;}
.tpl-wall{position:absolute; left:0; right:0; top:0; height:min(100%, 780px); z-index:-1; pointer-events:none; display:grid; align-content:center; gap:14px; opacity:0.38; transform:rotate(-4deg) scale(1.15);}
.wall-row{display:flex; gap:14px; width:max-content; animation:wallL 70s linear infinite;}
.wall-row.rev{animation:wallR 84s linear infinite;}
.tpl-wall.off .wall-row{animation-play-state:paused;} /* gallery.js: off screen */
.wall-row img{width:clamp(180px, 20vw, 300px); aspect-ratio:16/10; object-fit:cover; object-position:0 0; border-radius:10px; border:1px solid rgba(255,195,0,0.12); filter:saturate(0.7);}
.wall-veil{position:absolute; inset:0; background:radial-gradient(70% 60% at 30% 50%, rgba(0,8,20,0.92), rgba(0,8,20,0.7) 55%, rgba(0,8,20,0.35) 100%), linear-gradient(180deg, rgba(0,8,20,0.9), transparent 30%, transparent 70%, var(--navy0));}
@keyframes wallL{to{transform:translateX(-50%);}} @keyframes wallR{from{transform:translateX(-50%);} to{transform:translateX(0);}}
html.motion-off .wall-row{animation:none;}
@media (max-width:760px){ .tpl-wall{opacity:0.28; transform:rotate(-6deg) scale(1.4);} .wall-row img{width:150px;} }
/* preview button on concept cards */
.tpl-btn--preview{background:transparent; border:1px solid rgba(255,195,0,0.5); color:var(--gold); font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase; border-radius:100px; padding:11px 18px; cursor:pointer; transition:background-color .3s, color .3s;}
.tpl-btn--preview:hover{background:var(--gold); color:var(--navy0);}
/* the modal */
.tpl-modal{position:fixed; inset:0; z-index:8000; display:grid; place-items:center; padding:24px;}
.tpl-modal[hidden]{display:none;}
.tpl-modal-back{position:absolute; inset:0; background:rgba(0,8,20,0.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.tpl-modal-card{position:relative; width:min(1280px, 100%); height:min(88vh, 900px); display:grid; grid-template-rows:auto 1fr auto; border-radius:22px; overflow:hidden; background:var(--navy0); border:1px solid rgba(255,195,0,0.3); box-shadow:0 60px 140px -40px rgba(0,0,0,0.9);}
.tpl-modal-head{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid rgba(245,247,250,0.1);}
.tpl-modal-name{font-family:var(--display); font-weight:900; font-stretch:115%; font-size:18px; letter-spacing:-0.02em;}
.tpl-modal-ind{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold2); margin-top:2px;}
.tpl-modal-tools{display:flex; align-items:center; gap:12px;}
.tpl-modal-seg{display:inline-flex; gap:4px; padding:4px; border-radius:100px; border:1px solid rgba(245,247,250,0.14);}
.tpl-modal-seg button{min-height:36px; padding:0 14px; border-radius:100px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim); background:transparent; border:0; cursor:pointer;}
.tpl-modal-seg button.on{background:var(--gold); color:var(--navy0); font-weight:700;}
.tpl-modal-close{position:relative; width:44px; height:44px; border-radius:50%; border:1px solid rgba(245,247,250,0.2); background:transparent; cursor:pointer;}
.tpl-modal-close span{position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:var(--ink);}
.tpl-modal-close span:first-child{transform:translate(-50%,-50%) rotate(45deg);} .tpl-modal-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
.tpl-modal-stage{position:relative; background:#050d1a; display:grid; place-items:center; overflow:hidden;}
.tpl-modal-frame{width:100%; height:100%; transition:width .5s cubic-bezier(.19,1,.22,1), border-radius .5s;}
.tpl-modal-frame iframe{width:100%; height:100%; border:0; background:#fff; display:block;}
.tpl-modal.mobile .tpl-modal-frame{width:400px; height:calc(100% - 28px); border-radius:34px; border:10px solid #0b1424; box-shadow:0 30px 80px -30px rgba(0,0,0,0.9); overflow:hidden;}
.tpl-modal-foot{display:flex; justify-content:flex-end; gap:12px; padding:12px 18px; border-top:1px solid rgba(245,247,250,0.1); flex-wrap:wrap;}
body.modal-open{overflow:hidden;}
@media (max-width:760px){
  .tpl-modal{padding:0;}
  .tpl-modal-card{width:100%; height:100%; border-radius:0; border:0;}
  .tpl-modal-seg{display:none;}
  .tpl-modal.mobile .tpl-modal-frame{width:100%; height:100%; border:0; border-radius:0;}
  .tpl-modal-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom));} .tpl-modal-foot .tpl-btn{flex:1; text-align:center;}
}

/* phones: no blur behind the scrolled nav (iOS re-blurs it on every scroll frame; at .94 it looks the same).
   style.css turns it off for touch too, but nav#siteNav.scrolled above outranks that rule. */
@media (hover:none) and (pointer:coarse){ nav#siteNav.scrolled{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(0,8,20,0.94);} }

/* phones, real font widths (2026-10-12): the 125%-wide display caps overran these boxes on a real
   iPhone ("ENCONTRASTE" cut at the screen edge at 375–393 px; "CONDICIONES", "DIRECCIÓN." and
   "DESCUBRIMIENTO" at 320). WebKit on Windows draws the width axis thin, so site-check passed them:
   measure display type with pw/true-width.mjs (Chrome). Sizes come from the longest word's
   px-per-font-px (encontraste 9.77, Condiciones 8.93). `section.` outranks .social-cta h2. */
@media (max-width:430px){ section.cta-section h2{font-size:min(38px, calc((100vw - 48px) / 9.9));} }
@media (max-width:360px){
  section.page-head h1{font-size:calc((100vw - 48px) / 9.1);}
  .process-card h3{overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto;}
}