/* Each section has its own screen, with a composition sized to the available stage. */
:root{--nav-height:48px;--stage-height:calc(100svh - var(--nav-height) - var(--dock-height,0px));--section-gutter:clamp(18px,2vw,48px);--section-space:clamp(20px,3svh,48px)}
html{scroll-padding-top:var(--nav-height);scroll-padding-bottom:var(--dock-height);scroll-snap-type:y mandatory}
.nav{height:var(--nav-height);padding-inline:var(--section-gutter);gap:24px;background:#0d100fe8;border-bottom:1px solid #ffffff12}
.nav .brand{font-size:20px;letter-spacing:-.8px;flex-shrink:0}
.nav .brand-symbol{font-size:24px;margin-right:7px}
.nav .header-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;flex-shrink:0}
.nav .brand-tagline{margin:0;font-size:10px;font-weight:400;line-height:1.1;letter-spacing:0;color:#b8c1b8;white-space:nowrap}
.nav>nav{gap:26px;font-size:11px;letter-spacing:.01em}
.nav nav a{min-height:44px;color:#b8c1b8;font-weight:400}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--lime)}
.nav-purchase{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:34px;padding:5px 13px;border:1px solid #9aaf7159;border-radius:99px;font-size:11px;color:#e8efdc;white-space:nowrap}
.nav-purchase span{color:var(--lime);font-size:16px}.nav-purchase:hover{border-color:var(--lime)}
/* «Portal clientes» is the sign-in entry for the owner and the client companies. The menu takes the
   free space on both of its sides, so the two pills stay together on the right instead of being spread
   apart by space-between; the negative margin turns the header gap into 10px between them. */
.nav>nav{margin-inline:auto}
.nav-purchase,.nav-portal{min-height:36px}
.nav-purchase span{line-height:1}
/* Neutral outline with a person icon: it reads as an account entry and leaves the lime accent to buying. */
.nav-portal{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;margin-left:-14px;padding:5px 14px 5px 11px;border:1px solid #ffffff2e;border-radius:99px;background:#ffffff08;font-size:11px;color:#cfd6c6;white-space:nowrap;transition:color .2s,border-color .2s}
.nav-portal svg{width:15px;height:15px;flex-shrink:0}
.nav-portal:hover{color:var(--lime);border-color:#deff0099}
main>section{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin:0;min-height:var(--stage-height)}
main>section.section-wrap{width:100%;max-width:none;margin:0;padding:var(--section-space) max(var(--section-gutter),env(safe-area-inset-right)) var(--section-space) max(var(--section-gutter),env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center}
main>section.section-wrap>.section-meta{flex-shrink:0}
main>section.section-wrap>.section-meta{font-size:clamp(11px,.85vw,14px);padding-bottom:10px;margin-bottom:22px}
#inicio{min-height:calc(100svh - var(--nav-height) - var(--dock-height))}
#manifiesto h2{font-size:clamp(40px,4.7vw,72px)}
#manifiesto .manifesto-grid{gap:7%;align-items:center}
#manifiesto .large-copy{font-size:clamp(20px,1.8vw,26px);margin-bottom:18px}
#manifiesto .accent-copy{font-size:27px;margin-top:20px}
#manifiesto .small-rule{margin-block:20px 16px}
#valor .time-grid{width:100%;max-width:none;gap:clamp(24px,4vw,96px)}
#valor .time-output{padding-left:clamp(24px,4vw,80px)}
#valor .time-output>p{font-size:clamp(16px,1.1vw,22px)}
#valor .range-row input{height:44px}
#como-lo-hacemos .how-grid{gap:clamp(18px,2vw,48px);margin-top:clamp(24px,2.5vw,44px)}
#como-lo-hacemos .step-number{margin-bottom:14px;padding-top:14px}
#como-lo-hacemos .how-grid h3{font-size:clamp(22px,1.5vw,30px);margin-bottom:12px}
#como-lo-hacemos .how-grid p{font-size:clamp(15px,1.05vw,20px);line-height:1.5}
#como-lo-hacemos .how-action{margin-top:24px}
#preguntas{display:grid;align-content:center;justify-content:normal;gap:clamp(24px,4vw,96px)}
#preguntas h2{font-size:clamp(38px,4.6vw,68px)}
#preguntas .faqs summary{min-height:44px;font-size:clamp(16px,1.05vw,21px)}
#preguntas .faqs details{padding-block:16px}
#preguntas .faqs details p{font-size:clamp(14px,1vw,19px);line-height:1.55;max-width:70ch}
.purchase-section{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;background:radial-gradient(ellipse at 50% 55%,#202815 0%,#101111 65%);padding:0 4%;text-align:center}
.purchase-content{width:min(100%,800px);margin:auto;display:flex;flex-direction:column;align-items:center;padding:38px 0 28px}
.purchase-content .eyebrow{font-size:10px;letter-spacing:.12em;color:#a3b38e;justify-content:center;margin-bottom:22px}
.purchase-section h2{font-size:clamp(50px,6vw,88px);line-height:.98;letter-spacing:-.055em}
.purchase-intro{margin:22px auto 0;font-size:16px;color:#c8d0c0;line-height:1.5}
.purchase-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%;margin-top:27px}
.purchase-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;min-height:55px;border:1px solid #6e82584d;border-radius:5px;background:#141a11;color:#eaf2df;font-size:13px;text-align:left;transition:border-color .2s,background .2s}
.purchase-choice>span:last-child{color:var(--lime);font-size:19px}
.purchase-choice:hover{border-color:var(--lime);background:#212a15}
.purchase-note{max-width:520px;font-size:11px;line-height:1.6;margin:20px auto 0;color:#9ba591}
.purchase-section .footer{padding:15px 0;background:transparent;border-color:#ffffff18;min-height:58px;text-align:left;font-size:10px}
.purchase-section .footer-logo{font-size:16px}
.purchase-section .footer>div,.purchase-section .footer button,.purchase-section .footer>div>span{font-size:10px}
@media(min-width:901px) and (max-height:760px){
 main>section.section-wrap{padding-top:22px;padding-bottom:22px}
 #manifiesto .section-meta{margin-bottom:20px}
 #manifiesto .manifesto-right>p:not(.large-copy){font-size:14px;line-height:1.55}
 #manifiesto .manifesto-right .accent-copy{font-size:26px}
 #valor h2{font-size:clamp(37px,4.1vw,54px);margin-bottom:25px}
 .purchase-content{padding-top:25px;padding-bottom:20px}.purchase-content .eyebrow{margin-bottom:16px}
 .purchase-section h2{font-size:clamp(48px,5.5vw,72px)}.purchase-intro{margin-top:18px;font-size:14px}
 .purchase-choices{margin-top:22px}.purchase-note{margin-top:15px}
}
@media(max-width:900px){
 :root{--nav-height:48px}
 html{scroll-snap-type:none}
 main>section{scroll-snap-stop:normal}
 .nav{padding-inline:max(18px,env(safe-area-inset-left));gap:12px}
 .nav .brand{font-size:19px}.nav .brand-symbol{font-size:22px}
 .nav .header-brand{max-width:calc(100% - 98px)}
 .nav .brand-tagline span{display:block}
 .nav>.nav-purchase,.nav>.nav-portal{display:none}
 .mobile-menu summary{min-height:44px;padding:5px 11px;font-size:11px;border-color:#ffffff26}
 .mobile-menu nav{top:calc(var(--nav-height) - 1px)}
 /* Phones reach the portal from the menu; it is framed apart because it leaves the page for the private sign-in.
    The dock keeps four columns: a fifth leaves 57px per label at 320px and «Experiencias» needs 65px. */
 .mobile-menu nav .menu-portal{gap:10px;margin-top:6px;padding-block:9px;border:1px solid #ffffff26;color:#dfe5d6}
 .mobile-menu nav .menu-portal svg{width:18px;height:18px;flex-shrink:0}
 .mobile-dock>.dock-purchase{background:var(--lime);color:#101111;font-weight:700;margin-left:5px}
 .mobile-dock>.dock-purchase[aria-current]{background:#edff7b;color:#101111}
 main>section.section-wrap{padding-top:25px;padding-bottom:28px;justify-content:center}
 #manifiesto .manifesto-grid{gap:28px}#manifiesto h2{font-size:clamp(36px,8vw,56px)}
 #preguntas{display:grid;align-content:center;gap:28px}
 .purchase-section{padding-inline:max(22px,env(safe-area-inset-left))}
 .purchase-content{padding-top:30px;padding-bottom:25px}
 .purchase-content .eyebrow{margin-bottom:18px}.purchase-section h2{font-size:clamp(43px,11vw,68px)}
 .purchase-intro{font-size:14px;margin-top:20px}.purchase-choices{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px}
 .purchase-choice{font-size:12px;min-height:52px;padding:12px;gap:7px}
 .purchase-note{font-size:10px;margin-top:18px}
 .purchase-section .footer{flex-direction:row;flex-wrap:wrap;gap:10px;padding:15px 0;align-items:center}
 .purchase-section .footer>div{gap:14px;flex-wrap:wrap}.purchase-section .footer-logo{font-size:15px}
}
@media(max-width:600px) and (max-height:620px){
 .purchase-content{padding-top:20px;padding-bottom:18px}.purchase-section h2{font-size:42px}
 .purchase-content .eyebrow{margin-bottom:12px}.purchase-intro{font-size:12px;margin-top:15px}
 .purchase-choices{margin-top:17px;gap:7px}.purchase-choice{min-height:44px;padding:8px 10px;font-size:11px}
 .purchase-note{margin-top:14px}.purchase-section .footer{padding-block:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(pointer:coarse){html{scroll-snap-type:none}main>section{scroll-snap-stop:normal}}
.site-footer{scroll-snap-align:end;padding:15px var(--section-gutter);min-height:74px;background:#101111;border-color:#ffffff18;font-size:10px}
.site-footer .footer-logo{font-size:16px}
.site-footer>div,.site-footer>div>span{font-size:10px}
.site-footer button{min-height:44px;font-size:10px}
@media(max-width:900px){
 .site-footer{padding:12px max(18px,env(safe-area-inset-left));flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center}
 .site-footer>div{gap:14px;flex-wrap:wrap}
 .site-footer .footer-logo{font-size:15px}
}
@media(max-width:760px){
 #valor .time-grid{gap:24px}
 #valor .time-output{padding-left:0}
 #como-lo-hacemos .how-grid{gap:22px}
}
@media(min-width:761px){
 main>section.section-wrap>.section-meta{font-size:clamp(11px,1.35svh,24px);margin-bottom:clamp(14px,2svh,36px)}
 #valor .time-grid{min-height:calc(var(--stage-height)*.70);align-items:center}
 #valor h2{font-size:clamp(40px,min(6vw,7svh),132px);line-height:1.06;margin-bottom:clamp(22px,3svh,56px)}
 #valor label,#valor .range-labels,#valor .range-row output{font-size:clamp(13px,1.65svh,30px)}
 #valor .range-row{margin-top:clamp(16px,2svh,36px)}
 #valor .range-row input{height:clamp(44px,4svh,72px)}
 #valor .time-value>span:first-child{font-size:clamp(100px,min(15vw,20svh),360px)}
 #valor .time-unit{font-size:clamp(16px,2svh,36px)}
 #valor .time-output>p{font-size:clamp(16px,2svh,36px);line-height:1.5;margin-block:clamp(18px,2.5svh,46px)}
 #valor .time-output .calculation-note{font-size:clamp(12px,1.4svh,25px);max-width:38ch}
 #valor .button,#como-lo-hacemos .button{font-size:clamp(14px,1.6svh,28px);min-height:clamp(48px,5svh,90px);padding:clamp(14px,1.8svh,32px) clamp(18px,2vw,48px)}
 #como-lo-hacemos>h2{font-size:clamp(38px,min(5vw,5.7svh),104px)}
 #como-lo-hacemos .how-grid{min-height:calc(var(--stage-height)*.45);margin-top:clamp(24px,4svh,74px);align-items:stretch}
 #como-lo-hacemos .how-grid article{padding:clamp(20px,min(2vw,3svh),52px);display:flex;flex-direction:column;justify-content:center}
 #como-lo-hacemos .step-number{font-size:clamp(12px,1.5svh,28px);margin-bottom:clamp(16px,3svh,54px)}
 #como-lo-hacemos .how-grid h3{font-size:clamp(24px,min(2.4vw,3svh),54px);margin-bottom:clamp(14px,2svh,36px)}
 #como-lo-hacemos .how-grid p{font-size:clamp(15px,min(1.4vw,2svh),36px);line-height:1.5}
 #como-lo-hacemos .how-action{margin-top:clamp(24px,3svh,54px)}
 #como-lo-hacemos .how-action .text-link{font-size:clamp(13px,1.5svh,27px)}
 #preguntas h2{font-size:clamp(44px,min(5vw,6svh),112px)}
 #preguntas .faq-intro{align-self:center}
 #preguntas .faq-intro .eyebrow{font-size:clamp(12px,1.5svh,27px)}
 #preguntas .faqs{min-height:calc(var(--stage-height)*.70);display:flex;flex-direction:column;justify-content:center}
 #preguntas .faqs details{flex:1;padding-block:clamp(14px,2svh,38px)}
 #preguntas .faqs summary{min-height:calc(var(--stage-height)*.09);font-size:clamp(16px,min(1.6vw,2.1svh),38px)}
 #preguntas .faqs summary span{font-size:clamp(23px,3svh,54px)}
 #preguntas .faqs details p{font-size:clamp(14px,min(1.2vw,1.7svh),30px);line-height:1.55}
}