/* ==========================================================================
   GORDITO DE LA SUERTE — Importaciones
   base.css · tokens, tipografía, componentes y navegación compartida
   ========================================================================== */

/* ---------- Tipografías autoalojadas ---------- */
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  /* superficie */
  --paper:#FFFFFF;
  --paper-2:#F4F6FA;
  --paper-3:#ECEFF5;

  /* tinta */
  --ink:#0B1220;
  --ink-2:#45516A;
  --ink-3:#7C879B;
  --line:#E1E6EF;
  --line-2:#EEF1F6;

  /* acción — rojo "suerte" */
  --red:#C1121F;
  --red-deep:#96101A;
  --red-soft:#FDF2F3;

  /* detalle dorado, uso muy medido */
  --gold:#B08829;
  --gold-soft:#FBF6E9;

  /* tinte por servicio */
  --air:#1D5FA8;
  --air-soft:#EEF4FC;
  --sea:#0E6F7E;
  --sea-soft:#E9F5F6;

  /* tipografía */
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --numeral:Arial,Helvetica,"Liberation Sans",sans-serif;

  /* medidas */
  --topbar-h:58px;
  --botnav-h:64px;
  --gutter:20px;
  --radius:14px;
  --radius-lg:20px;

  /* sombras */
  --shadow-sm:0 1px 2px rgba(11,18,32,.05),0 2px 8px rgba(11,18,32,.04);
  --shadow-md:0 2px 6px rgba(11,18,32,.06),0 12px 28px rgba(11,18,32,.07);
  --shadow-lg:0 8px 20px rgba(11,18,32,.08),0 24px 56px rgba(11,18,32,.10);

  /* viewport real, fijado por JS — nunca mezclar vh con dvh */
  --vh:8px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input,select,textarea{font:inherit;color:inherit;}

/* Todos los dígitos en Arial: evita numerales inconsistentes entre dispositivos */
.num{font-family:var(--numeral);font-feature-settings:"tnum" 1;letter-spacing:-.01em;}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.1;letter-spacing:-.02em;}
h1{font-weight:800;font-size:clamp(1.85rem,7.2vw,3.4rem);}
h2{font-weight:800;font-size:clamp(1.55rem,5.6vw,2.6rem);}
h3{font-weight:700;font-size:clamp(1.05rem,3.4vw,1.35rem);letter-spacing:-.01em;}
h4{font-weight:600;font-size:1rem;letter-spacing:-.005em;}
p{margin:0;}

.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:9px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;flex:none;}
.eyebrow.is-air{color:var(--air);}
.eyebrow.is-sea{color:var(--sea);}

.lede{font-size:1.03rem;line-height:1.62;color:var(--ink-2);}
.fine{font-size:.8rem;line-height:1.5;color:var(--ink-3);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 22px;width:100%;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  border-radius:12px;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px);}
.btn svg{flex:none;}

.btn-primary{background:var(--red);color:#fff;box-shadow:0 2px 4px rgba(193,18,31,.18),0 10px 24px rgba(193,18,31,.22);}
.btn-primary:hover{background:var(--red-deep);}

.btn-ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:var(--ink-3);}

.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--shadow-md);}
.btn-dark:hover{background:#16203a;}

.btn-air{background:var(--air);color:#fff;box-shadow:0 2px 4px rgba(29,95,168,.18),0 10px 24px rgba(29,95,168,.20);}
.btn-sea{background:var(--sea);color:#fff;box-shadow:0 2px 4px rgba(14,111,126,.18),0 10px 24px rgba(14,111,126,.20);}

.btn-row{display:grid;gap:10px;width:100%;}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

/* ---------- Chips / etiquetas ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;
  font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;
}
.tag-red{background:var(--red-soft);color:var(--red);}
.tag-air{background:var(--air-soft);color:var(--air);}
.tag-sea{background:var(--sea-soft);color:var(--sea);}
.tag-gold{background:var(--gold-soft);color:var(--gold);}

/* ---------- Barra superior ---------- */
.topbar{
  /* por encima del menu: la marca y el boton de cerrar deben seguir accesibles */
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.brand-mark{width:34px;height:34px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1;min-width:0;}
.brand-name{font-family:var(--display);font-weight:800;font-size:.92rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;}
.brand-sub{font-family:var(--display);font-weight:600;font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap;}

.topbar-actions{display:flex;align-items:center;gap:6px;flex:none;}
.icon-btn{
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background-color .16s ease;
}
.icon-btn:hover{background:var(--paper-2);}
.icon-btn.is-wa{color:var(--red);}

/* hamburguesa */
.burger{width:20px;height:14px;position:relative;}
.burger span{position:absolute;left:0;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s ease;}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:6px;}
.burger span:nth-child(3){top:12px;}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Menú overlay ---------- */
.menu{
  position:fixed;inset:0;z-index:90;
  background:var(--paper);
  display:flex;flex-direction:column;
  padding:calc(var(--topbar-h) + 14px) var(--gutter) 24px;
  opacity:0;visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.menu-open .menu{opacity:1;visibility:visible;transform:translateY(0);}

.menu-list{list-style:none;margin:0;padding:0;flex:1;}
.menu-list li{border-bottom:1px solid var(--line-2);opacity:0;transform:translateY(12px);}
body.menu-open .menu-list li{animation:menuIn .42s cubic-bezier(.22,1,.36,1) forwards;}
body.menu-open .menu-list li:nth-child(1){animation-delay:.06s;}
body.menu-open .menu-list li:nth-child(2){animation-delay:.11s;}
body.menu-open .menu-list li:nth-child(3){animation-delay:.16s;}
body.menu-open .menu-list li:nth-child(4){animation-delay:.21s;}
body.menu-open .menu-list li:nth-child(5){animation-delay:.26s;}
@keyframes menuIn{to{opacity:1;transform:translateY(0);}}

.menu-link{
  display:flex;align-items:center;gap:14px;
  padding:17px 2px;
  font-family:var(--display);font-weight:700;
  font-size:1.32rem;letter-spacing:-.02em;color:var(--ink);
}
.menu-link .idx{
  font-family:var(--numeral);font-size:.66rem;font-weight:400;
  color:var(--ink-3);width:20px;flex:none;letter-spacing:.04em;
}
.menu-link .ico{width:22px;height:22px;flex:none;color:var(--ink-3);margin-left:auto;}
.menu-link:hover{color:var(--red);}
.menu-link:hover .ico{color:var(--red);}
.menu-link.is-active{color:var(--red);}

.menu-foot{padding-top:22px;display:grid;gap:14px;}
.menu-social{display:flex;gap:10px;}
.menu-social a{
  display:flex;align-items:center;gap:8px;
  padding:11px 15px;border:1px solid var(--line);border-radius:11px;
  font-weight:600;font-size:.86rem;color:var(--ink-2);
}
.menu-social a:hover{border-color:var(--ink-3);color:var(--ink);}

/* Marca de agua KC Solutions — versión CLICKEABLE (solo dentro del menú) */
.kc-menu{
  display:flex;align-items:center;gap:9px;
  padding:13px 15px;
  background:var(--paper-2);border-radius:11px;
  font-size:.8rem;color:var(--ink-3);
}
.kc-menu strong{color:var(--ink-2);font-weight:600;}
.kc-menu svg{color:#25D366;flex:none;}
.kc-menu:hover{background:var(--paper-3);}

/* Marca de agua KC Solutions — versión NO CLICKEABLE (pie de página) */
.kc-static{
  font-size:.74rem;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;gap:7px;
  pointer-events:none;              /* evita toques accidentales del visitante */
  user-select:none;
  flex-wrap:wrap;text-align:center;
}
.kc-static svg{color:#25D366;flex:none;opacity:.85;}

/* ---------- Barra inferior fija ---------- */
.botnav{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  height:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line-2);
}
.botnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--display);font-weight:600;font-size:.63rem;letter-spacing:.03em;
  color:var(--ink-3);position:relative;
  transition:color .16s ease;
}
.botnav a svg{width:21px;height:21px;}
.botnav a:hover{color:var(--ink-2);}
.botnav a.is-active{color:var(--red);}
.botnav a.is-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;background:var(--red);border-radius:0 0 3px 3px;
}
.botnav a.is-cta{color:var(--red);}
.botnav a.is-cta .pill{
  position:absolute;inset:7px 10px;border-radius:11px;background:var(--red-soft);z-index:-1;
}

/* ---------- Revelados al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.07s;}
.reveal[data-d="2"]{transition-delay:.14s;}
.reveal[data-d="3"]{transition-delay:.21s;}
.reveal[data-d="4"]{transition-delay:.28s;}
.reveal[data-d="5"]{transition-delay:.35s;}

/* ---------- Marcador de imagen pendiente ---------- */
/* Sustituir por <img> real. Ver README. */
.imgslot{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,var(--paper-2) 0%,var(--paper-3) 100%);
  border:1px dashed #CBD3E0;
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);
}
.imgslot .imgslot-label{
  font-family:var(--display);font-weight:600;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.82);
  position:absolute;bottom:9px;left:9px;
}
.imgslot svg{opacity:.5;}

/* ---------- Acordeón ---------- */
.acc{border-bottom:1px solid var(--line-2);}
.acc-head{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:16px 2px;text-align:left;
  font-family:var(--display);font-weight:700;font-size:.97rem;color:var(--ink);
  letter-spacing:-.01em;line-height:1.35;
}
.acc-head .plus{
  margin-left:auto;flex:none;width:22px;height:22px;position:relative;
  border-radius:50%;background:var(--paper-2);
  transition:background-color .2s ease;
}
.acc-head .plus::before,.acc-head .plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-2);border-radius:2px;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.acc-head .plus::before{width:9px;height:1.6px;transform:translate(-50%,-50%);}
.acc-head .plus::after{width:1.6px;height:9px;transform:translate(-50%,-50%);}
.acc.open .acc-head{color:var(--red);}
.acc.open .plus{background:var(--red-soft);}
.acc.open .plus::before,.acc.open .plus::after{background:var(--red);}
.acc.open .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.acc-body{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1);}
.acc-body p{padding:0 2px 16px;font-size:.92rem;line-height:1.6;color:var(--ink-2);}
.acc-body ul{margin:0;padding:0 2px 16px 20px;font-size:.92rem;line-height:1.75;color:var(--ink-2);}

/* ---------- Accesibilidad ---------- */
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.skip-link{
  position:absolute;top:8px;left:8px;z-index:200;
  padding:10px 16px;background:var(--ink);color:#fff;border-radius:9px;
  font-weight:600;font-size:.85rem;
  transform:translateY(-160%);transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .reveal{opacity:1;transform:none;}
}

/* ---------- Escritorio ---------- */
@media (min-width:768px){
  :root{--gutter:56px;--topbar-h:68px;}
  body{font-size:17px;}
  .btn{width:auto;min-width:210px;}
  .btn-row{display:flex;flex-wrap:wrap;gap:12px;}
  .menu{padding-left:8vw;padding-right:8vw;}
  .menu-link{font-size:1.7rem;padding:20px 2px;}

  /* En escritorio la barra inferior se convierte en una pastilla flotante:
     se conserva la navegación pedida sin que parezca una app estirada. */
  .botnav{
    left:50%;right:auto;bottom:20px;transform:translateX(-50%);
    display:flex;width:auto;height:auto;gap:3px;padding:6px;
    border:1px solid var(--line);border-top:1px solid var(--line);
    border-radius:100px;box-shadow:var(--shadow-lg);
    background:rgba(255,255,255,.92);
  }
  .botnav a{
    flex-direction:row;gap:9px;padding:10px 18px;border-radius:100px;
    font-size:.82rem;letter-spacing:0;
  }
  .botnav a svg{width:18px;height:18px;}
  .botnav a.is-active::before{display:none;}
  .botnav a.is-active{background:var(--red-soft);}
  .botnav a.is-cta .pill{inset:0;border-radius:100px;}
  .botnav a:hover:not(.is-active){background:var(--paper-2);}
}

@media (min-width:1280px){
  :root{--gutter:80px;}
  .menu{padding-left:12vw;padding-right:12vw;}
}
@media (min-width:1600px){
  :root{--gutter:104px;}
}

/* ---------- Aviso flotante (solo mientras falte configurar el WhatsApp) ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--botnav-h) + 16px);
  transform:translateX(-50%) translateY(14px);
  z-index:300;max-width:calc(100vw - 32px);
  padding:12px 17px;border-radius:11px;
  background:var(--ink);color:#fff;
  font-size:.83rem;font-weight:500;line-height:1.4;text-align:center;
  box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (min-width:768px){.toast{bottom:26px;}}

/* ---------- Página con motor de diapositivas ---------- */
html.deck-html,body.deck-body{
  height:100%;overflow:hidden;
  overscroll-behavior:none;
  position:fixed;width:100%;
}
body.deck-body .slide-scroll{touch-action:pan-y;}