/* base.css — tokens, utilities, toast, icons, animations (shared) */
/* ════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════ */
:root{
  --ink:#0b1f23;
  --deep:#04283a;
  --ocean:#0a5c7a;
  --sea:#1a8fa8;
  --teal:#00c4d4;
  --teal-light:#4dd8e3;
  --foam:#e4f7f9;
  --sand:#fdf6ee;
  --coral:#e05c38;
  --amber:#d4a030;
  --moss:#2e6b50;
  --white:#ffffff;
  --gray-1:#f3f8f9;
  --gray-2:#dde9eb;
  --gray-3:#9fbcc1;
  --gray-4:#5e8089;
  --gray-5:#304a50;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:28px;
  --shadow-sm:0 2px 16px rgba(4,40,58,.07);
  --shadow-md:0 8px 36px rgba(4,40,58,.12);
  --shadow-lg:0 24px 64px rgba(4,40,58,.18);
  --ff-display:'Cormorant Garamond',serif;
  --ff-body:'Outfit',sans-serif;
  --nav-h:76px;
  --transition:all .3s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--ff-body);color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:var(--ff-body);cursor:pointer}
ul{list-style:none}
.page{display:none;min-height:100vh}
.page.active{display:block}


/* ════ LOADING SCREEN ════ */
#app-loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s ease;
}
#app-loader.hidden{opacity:0;pointer-events:none}
.loader-logo{font-family:var(--ff-display);font-size:2.2rem;font-weight:700;color:#fff;margin-bottom:1.5rem;letter-spacing:.5px}
.loader-logo span{color:var(--teal)}
.loader-bar{width:200px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.loader-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--sea));border-radius:3px;animation:loadfill 1.4s ease forwards}
@keyframes loadfill{from{width:0}to{width:100%}}


/* ════ UTILITIES ════ */
.container{max-width:1200px;margin:0 auto;padding:0 5%}
.pt-nav{padding-top:var(--nav-h)}
.sec{padding:6rem 0}
.sec-sm{padding:4rem 0}
.sec-label{display:inline-flex;align-items:center;gap:.5rem;color:var(--coral);font-size:.75rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:1rem}
.sec-label::before{content:'';display:block;width:22px;height:2px;background:currentColor;border-radius:2px}
.sec-title{font-family:var(--ff-display);font-size:clamp(2rem,4.5vw,3.1rem);font-weight:700;color:var(--ink);line-height:1.08;margin-bottom:1rem}
.sec-sub{color:var(--gray-4);font-size:1.05rem;line-height:1.8;max-width:560px}
.text-center{text-align:center}
.text-center .sec-sub{margin:0 auto}
.text-center .sec-label{margin-left:auto;margin-right:auto}
.tag{display:inline-block;background:var(--foam);color:var(--sea);font-size:.73rem;font-weight:700;padding:.3rem .85rem;border-radius:50px;letter-spacing:.5px}
.tag-coral{background:#fdf0ec;color:var(--coral)}
.tag-amber{background:#fdf4e3;color:var(--amber)}
.tag-moss{background:#eaf3ef;color:var(--moss)}
.divider{width:56px;height:3px;background:linear-gradient(90deg,var(--sea),var(--teal));border-radius:2px;margin:1.5rem 0}
.divider-center{margin:1.5rem auto}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.9rem;border-radius:50px;font-size:.92rem;font-weight:600;border:none;transition:var(--transition);cursor:pointer}
.btn-primary{background:var(--sea);color:#fff;box-shadow:0 4px 16px rgba(26,143,168,.28)}
.btn-primary:hover{background:var(--ocean);transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,143,168,.42)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 4px 16px rgba(224,92,56,.28)}
.btn-coral:hover{background:#cb4f2a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(224,92,56,.42)}
.btn-outline{background:transparent;color:var(--sea);border:2px solid var(--sea)}
.btn-outline:hover{background:var(--sea);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}


/* ════ TOAST ════ */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(200%);background:var(--ink);color:#fff;padding:.9rem 2.2rem;border-radius:50px;font-size:.9rem;font-weight:500;z-index:9999;transition:transform .4s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast.show{transform:translateX(-50%) translateY(0)}


/* ════ CLEAN INLINE SVG ICONS ════ */
.ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
.ico svg{width:1em;height:1em;display:block}
.ico-lg{font-size:1.5rem}
.ico-xl{font-size:2rem}


/* ════ MODERN MODERATE ANIMATIONS ════ */
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.reveal{opacity:0}
.reveal.in{animation:revealUp .7s cubic-bezier(.22,1,.36,1) both}
.reveal-scale.in{animation:revealScale .6s cubic-bezier(.22,1,.36,1) both}
.reveal[data-d="1"].in{animation-delay:.08s}
.reveal[data-d="2"].in{animation-delay:.16s}
.reveal[data-d="3"].in{animation-delay:.24s}
.reveal[data-d="4"].in{animation-delay:.32s}
.reveal[data-d="5"].in{animation-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in,.reveal-scale.in{animation:none!important;opacity:1!important;transform:none!important}
}



/* ══════════════════════════════════════════════════════════
   PROTECCIÓN ANTI-DESBORDE (móvil)
   Evita el scroll horizontal que rompe la vista en teléfonos.
   ══════════════════════════════════════════════════════════ */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video,svg,iframe,table{max-width:100%}