/* ============================================================
   Reservapp · site.css
   Sistema compartido para las páginas ampliadas de cada sección.
   Mismo lenguaje visual que la landing (index.html), tema claro/oscuro,
   marca + endoso "By GrupoHEX".
   ============================================================ */

:root{
  --ink:#131417;
  --cream:#FFFFFF;
  --paper:#ffffff;
  --line:rgba(19,20,23,.10);
  --line-on-dark:rgba(255,255,255,.12);
  --muted:#74777D;
  --muted-on-dark:rgba(255,255,255,.55);
  --blue:#0057FF;
  --blue-dark:#0048D4;
  --blue-soft:#EAF1FF;
  --green:#2B8A57;
  --green-soft:#E8F6EE;
  --yellow:#9B731C;
  --yellow-soft:#FFF3D8;
  --red:#B84C4C;
  --red-soft:#FDEAEA;
  --display:"Manrope",sans-serif;
  --body:"DM Sans",sans-serif;
  --mono:"DM Sans",sans-serif;

  --page:#FFFFFF;
  --text:#131417;
  --text-muted:#74777D;
  --section-card:#ffffff;
  --hairline:rgba(19,20,23,.10);
  --hairline-strong:rgba(19,20,23,.22);
  --chip:#F8F7F4;
  --nav-bg:rgba(248,247,244,.86);
  --showcase:#131417;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0b1220;
    --text:#ececee;
    --text-muted:rgba(255,255,255,.56);
    --section-card:#17181c;
    --hairline:rgba(255,255,255,.11);
    --hairline-strong:rgba(255,255,255,.24);
    --chip:#202127;
    --nav-bg:rgba(11,18,32,.82);
    --showcase:#141d30;
  }
}
:root[data-theme="dark"]{
  --page:#0b1220;
  --text:#ececee;
  --text-muted:rgba(255,255,255,.56);
  --section-card:#17181c;
  --hairline:rgba(255,255,255,.11);
  --hairline-strong:rgba(255,255,255,.24);
  --chip:#202127;
  --nav-bg:rgba(11,18,32,.82);
  --showcase:#141d30;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:820px;}
::selection{background:var(--blue);color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:box-shadow .2s ease;
}
.nav .wrap{
  height:74px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  transition:height .2s ease;
}
.nav .wrap > .brand{ justify-self:start; }
.nav .wrap > .nav-cta{ justify-self:end; }
.nav.is-scrolled .wrap{height:64px;}
.nav.is-scrolled{box-shadow:0 8px 24px rgba(19,20,23,.06);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--blue);
  display:grid;place-items:center; color:#fff; font-family:var(--display);
  font-weight:800; font-size:15px; flex:none;
  box-shadow:0 6px 14px rgba(0,87,255,.28);
}
.brand-stack{display:flex; flex-direction:column; gap:2px; line-height:1;}
.brand-text{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.3px;}
.by-hex{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--display); font-weight:700; font-size:9.5px; letter-spacing:.2px;
  color:var(--text-muted);
}
.by-hex .hex-mini{width:13px; height:13px; flex:none;}
.nav-links{display:flex; gap:26px; font-size:13px; font-weight:700;}
.nav-links a{color:var(--text-muted); text-decoration:none; transition:color .15s;}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--text);}
.nav-links a[aria-current="page"]{color:var(--blue);}
.nav-cta{display:flex; align-items:center; gap:10px;}
@media (max-width:900px){ .nav-links{display:none;} }
@media (max-width:640px){
  .nav .wrap{flex-wrap:wrap; row-gap:10px;}
  .nav-cta{width:100%; justify-content:flex-end; flex-wrap:wrap;}
}
@media (max-width:400px){
  .nav-cta .btn{padding:9px 14px; font-size:12.5px;}
}

/* V8.16.232 -- Menu de navegacion movil/tablet para las paginas
   ampliadas (modulos, reserva publica). A <=900px los .nav-links de
   texto se ocultaban (regla de arriba) sin dejar ninguna forma de
   navegar a las otras paginas: se agrega un boton de menu (hamburguesa)
   que despliega los mismos enlaces, igual que ya existe en index.html. */
.mobile-nav-toggle,
.mobile-nav-menu{
  display:none;
}

@media (max-width:900px){

  .nav .wrap{
    position:relative;
  }

  .mobile-nav-toggle{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-content:center;
    gap:4px;

    padding:0;
    border:1px solid var(--hairline);
    border-radius:12px;

    background:var(--section-card);
    color:var(--text);

    cursor:pointer;
  }

  .mobile-nav-toggle span{
    width:17px;
    height:1.5px;
    display:block;

    background:currentColor;
    border-radius:999px;

    transition:transform .2s ease, opacity .2s ease;
  }

  .mobile-nav-toggle.is-open span:nth-child(1){
    transform:translateY(5.5px) rotate(45deg);
  }

  .mobile-nav-toggle.is-open span:nth-child(2){
    opacity:0;
  }

  .mobile-nav-toggle.is-open span:nth-child(3){
    transform:translateY(-5.5px) rotate(-45deg);
  }

  .nav-cta .btn{
    display:none;
  }

  .mobile-nav-menu{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:1001;

    display:block;
    padding:0 20px;

    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    pointer-events:none;

    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .mobile-nav-menu.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .mobile-nav-inner{
    max-width:520px;
    margin:10px auto 0;

    display:grid;
    padding:10px;

    border:1px solid var(--hairline);
    border-radius:16px;

    background:var(--section-card);
    box-shadow:0 18px 50px rgba(0,0,0,.22);
  }

  .mobile-nav-inner a{
    display:flex;
    align-items:center;

    min-height:48px;
    padding:0 14px;

    border-radius:10px;

    color:var(--text);
    text-decoration:none;

    font-size:14px;
    font-weight:700;
  }

  .mobile-nav-inner a:hover,
  .mobile-nav-inner a:focus-visible{
    background:var(--blue-soft);
    color:var(--blue);
  }

  .mobile-menu-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;

    margin-top:8px;
    padding-top:10px;
    border-top:1px solid var(--hairline);
  }

  .mobile-menu-actions a{
    justify-content:center;
    min-height:48px;
    text-align:center;
  }

  .mobile-menu-login{
    border:1px solid var(--hairline);
  }

  .mobile-menu-create{
    background:var(--blue) !important;
    color:#fff !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-nav-toggle span,
  .mobile-nav-menu{
    transition:none;
  }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:11px; font-weight:700; font-size:13.5px; cursor:pointer;
  padding:12px 20px; text-decoration:none; border:1px solid transparent;
  font-family:var(--body); transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{position:relative; overflow:hidden; background:var(--blue); color:#fff; box-shadow:0 10px 22px rgba(0,87,255,.22); transition:background .15s ease, box-shadow .18s ease, transform .15s ease;}
.btn-primary::before{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); transition:left .55s ease;}
.btn-primary:hover{background:var(--blue-dark); box-shadow:0 14px 30px rgba(0,87,255,.32); transform:translateY(-1px);}
.btn-primary:hover::before{left:120%;}
@media (prefers-reduced-motion:reduce){.btn-primary::before{transition:none;}}
.btn-ghost-dark{background:transparent; color:#fff; border-color:var(--line-on-dark);}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.06);}
.btn-ghost-light{background:var(--section-card); color:var(--text); border-color:var(--hairline);}
.btn-ghost-light:hover{border-color:var(--hairline-strong);}
a:focus-visible, .btn:focus-visible, button:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:8px;
}

.theme-toggle{
  width:40px; height:40px; flex:none; display:grid; place-items:center; padding:0;
  border-radius:11px; border:1px solid var(--hairline); background:var(--section-card);
  color:var(--text); cursor:pointer; transition:border-color .15s, background .15s;
}
.theme-toggle:hover{border-color:var(--hairline-strong);}
.theme-toggle svg{width:18px; height:18px;}
.theme-toggle .ic-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none;}
}

/* ---------- SUB-HERO (cabecera de cada página) ---------- */
.subhero{
  background:
    radial-gradient(1100px 520px at 82% -20%, rgba(0,87,255,.22), transparent 60%),
    var(--showcase);
  color:#fff; position:relative; overflow:hidden;
  padding:64px 0 72px;
}
.crumbs{
  font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.5); display:flex; gap:8px; align-items:center; margin-bottom:22px;
}
.crumbs a{color:rgba(255,255,255,.7); text-decoration:none;}
.crumbs a:hover{color:#fff;}
.crumbs span{opacity:.4;}
.subhero .kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:1.6px; font-weight:500;
  color:#8DB3FF; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px;
}
.subhero .kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:#8DB3FF; box-shadow:0 0 0 4px rgba(141,179,255,.18);}
.subhero h1{
  font-size:clamp(32px,4.4vw,50px); line-height:1.05; letter-spacing:-1.4px; font-weight:800;
  margin:18px 0 18px; max-width:16ch;
}
.subhero h1 em{font-style:normal; color:#8DB3FF;}
.subhero .lede{font-size:16.5px; line-height:1.65; color:rgba(255,255,255,.7); max-width:52ch;}
.subhero-actions{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}

/* barra de stats bajo el sub-hero */
.stat-strip{
  border-top:1px solid var(--line-on-dark); margin-top:40px; padding-top:26px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
@media (max-width:760px){ .stat-strip{grid-template-columns:1fr 1fr;} }
.stat-strip .s b{
  display:block; font-family:var(--display); font-weight:800; font-size:26px; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}
.stat-strip .s span{display:block; font-size:11.5px; color:var(--muted-on-dark); margin-top:4px;}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; font-weight:500;
  color:var(--blue); text-transform:uppercase;
}
.section-head h2{font-size:clamp(26px,3.2vw,36px); letter-spacing:-1px; line-height:1.12; margin-top:14px;}
.section-head p{margin-top:16px; font-size:15.5px; line-height:1.65; color:var(--text-muted); max-width:560px;}
.section-alt{background:var(--section-card); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}

/* ---------- REVEAL ---------- */
.reveal{transition:opacity .6s ease, transform .6s ease;}
html.js-reveal-ready .reveal{opacity:0; transform:translateY(16px);}
.reveal.in{opacity:1 !important; transform:none !important;}
.reveal[data-i]{transition-delay:calc(var(--i,0) * .07s);}
/* Si el JS nunca confirma soporte (bloqueado, crawler sin JS, error previo
   en la página), el contenido nace visible en vez de nacer oculto. */
html:not(.js-reveal-ready) .reveal{opacity:1 !important; transform:none !important;}

/* ---------- CARD GRID ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }
.card-grid.cols-2{grid-template-columns:1fr 1fr;}
@media (max-width:720px){ .card-grid.cols-2{grid-template-columns:1fr;} }

.info-card{
  background:var(--section-card); border:1px solid var(--hairline); border-radius:18px; padding:24px;
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.info-card:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(19,20,23,.09); border-color:var(--hairline-strong);}
.info-card .ic{
  width:42px; height:42px; border-radius:12px; background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center; margin-bottom:16px; transition:transform .18s ease;
}
.info-card:hover .ic{transform:scale(1.08) rotate(-4deg);}
.info-card .ic svg{width:20px; height:20px;}
.info-card h3{font-size:15px; letter-spacing:-.2px; margin-bottom:8px;}
.info-card p{font-size:12.5px; color:var(--text-muted); line-height:1.6;}
.info-card .tag{
  display:inline-block; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.4px;
  text-transform:uppercase; color:var(--blue); background:var(--blue-soft); padding:4px 9px; border-radius:100px;
}
.info-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent, var(--blue));}

/* ---------- FEATURE ROW (copy + visual alterno) ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.feature > *{min-width:0;}
.feature + .feature{margin-top:72px;}
@media (max-width:900px){ .feature{grid-template-columns:1fr; gap:32px;} }
.feature.flip .feat-visual{order:-1;}
@media (max-width:900px){ .feature.flip .feat-visual{order:0;} }
.feature h3{font-size:clamp(21px,2.6vw,28px); line-height:1.15; letter-spacing:-.5px; margin-bottom:14px;}
.feature .lede{font-size:15px; color:var(--text-muted); line-height:1.65; margin-bottom:20px;}
.feat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.feat-list li{display:flex; flex-wrap:wrap; gap:11px; font-size:13.5px; line-height:1.5;}
.feat-list li::before{
  content:"✓"; flex:none; width:18px; height:18px; border-radius:6px; background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center; font-size:10px; font-weight:800; margin-top:1px;
}
.feat-visual{display:flex; justify-content:center;}

/* tarjeta demo genérica */
.demo-card{
  position:relative; background:var(--section-card); border:1px solid var(--hairline); border-radius:16px;
  padding:22px; overflow:hidden; width:100%; max-width:380px;
  box-shadow:0 1px 2px rgba(19,20,23,.04), 0 22px 44px -22px rgba(19,20,23,.18);
}
.demo-card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent, var(--blue));}
.demo-card .dc-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.demo-card .dc-name{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.2px;}
.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin-top:16px;}
.demo-grid .k{font-family:var(--mono); font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted);}
.demo-grid .v{font-size:12.5px; font-weight:600; margin-top:3px;}
.demo-foot{margin-top:18px; padding-top:15px; border-top:1px solid var(--hairline); display:flex; gap:8px; flex-wrap:wrap;}
.demo-foot .btn{flex:1; min-width:120px; padding:9px 12px; font-size:12px;}

/* ---------- PILLS ---------- */
.pill{font:700 10.5px/1 var(--body); padding:6px 11px; border-radius:100px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;}
.pill.ok{background:var(--green-soft); color:var(--green);}
.pill.wait{background:var(--yellow-soft); color:var(--yellow);}
.pill.off{background:var(--red-soft); color:var(--red); text-decoration:line-through;}
.pill.live{background:var(--blue-soft); color:var(--blue);}
.pill.live::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; animation:pulseDot 1.6s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.6);}}

/* ---------- NUMBERED STEPS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step;}
@media (max-width:860px){ .steps{grid-template-columns:1fr;} }
.step{
  background:var(--section-card); border:1px solid var(--hairline); border-radius:20px; padding:28px 26px;
  position:relative;
}
.step .n{
  font-family:var(--display); font-size:13px; font-weight:800; color:var(--blue);
  width:34px; height:34px; border-radius:10px; background:var(--blue-soft);
  display:grid; place-items:center; margin-bottom:16px;
}
.step h3{font-size:16px; letter-spacing:-.3px; margin-bottom:8px;}
.step p{font-size:12.5px; color:var(--text-muted); line-height:1.6;}
.step .meta{
  margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-muted); display:flex; align-items:center; gap:7px;
}
.step .meta::before{content:"✓"; width:15px; height:15px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center; font-size:9px; flex:none;}

/* ---------- KPI / CONTADORES ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:820px){ .kpi-grid{grid-template-columns:1fr 1fr;} }
.kpi{background:var(--section-card); border:1px solid var(--hairline); border-radius:16px; padding:22px;}
.kpi b{display:block; font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:-.6px; font-variant-numeric:tabular-nums;}
.kpi span{display:block; font-size:11.5px; color:var(--text-muted); margin-top:5px;}
.kpi em{font-style:normal; font-size:10.5px; font-weight:700; color:var(--green);}

/* mini gráfico de barras que sube al revelarse */
.spark{display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:8px;}
.spark i{
  flex:1; background:var(--blue-soft); border-radius:6px 6px 3px 3px; position:relative;
  height:0; transition:height .7s cubic-bezier(.2,.7,.3,1);
}
.spark i.hi{background:var(--blue);}
.spark.in i{height:var(--h,40%);}
.spark i span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:9px; font-weight:700; color:var(--text-muted);}

/* ---------- COMPARACIÓN ---------- */
.compare{border:1px solid var(--hairline); border-radius:16px; overflow:hidden;}
.compare-row{display:grid; grid-template-columns:1fr 1fr;}
.compare-row + .compare-row{border-top:1px solid var(--hairline);}
.compare-row > div{padding:16px 20px; font-size:13px; line-height:1.5;}
.compare-row .old{color:var(--text-muted); border-right:1px solid var(--hairline);}
.compare-row .new{color:var(--text); font-weight:600; background:color-mix(in srgb, var(--blue) 5%, var(--section-card));}
.compare-row.head > div{font-family:var(--mono); font-size:10px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; color:var(--text-muted); background:var(--chip);}
.compare-row.head .new{color:var(--blue);}
.compare-row .old::before{content:"✕ "; color:var(--red); font-weight:700;}
.compare-row .new::before{content:"✓ "; color:var(--green); font-weight:700;}
.compare-row.head .old::before, .compare-row.head .new::before{content:none;}
@media (max-width:640px){
  .compare-row{grid-template-columns:1fr;}
  .compare-row .old{border-right:0; border-bottom:1px solid var(--hairline);}
  .compare-row.head{display:none;}
}

/* ---------- ACCORDION / FAQ ---------- */
.accordion{max-width:800px;}
.accordion.wide{max-width:none;}
.acc-item{border-bottom:1px solid var(--hairline);}
.acc-item summary{
  list-style:none; cursor:pointer; padding:20px 2px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; font-weight:700; font-size:14.5px; letter-spacing:-.1px;
}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary .ic{
  flex:none; width:24px; height:24px; border-radius:50%; background:var(--chip); border:1px solid var(--hairline);
  display:grid; place-items:center; font-size:14px; color:var(--blue); transition:transform .2s ease;
}
.acc-item[open] summary .ic{transform:rotate(45deg);}
.acc-item .body{padding:0 2px 22px; font-size:13.5px; line-height:1.7; color:var(--text-muted); max-width:680px;}
.acc-item .body p + p{margin-top:12px;}

/* ---------- TABS (radio, sin JS) ---------- */
.tabs{background:var(--showcase); border:1px solid var(--hairline); border-radius:24px; overflow:hidden;}
.tab-input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
.tab-bar{display:flex; gap:6px; padding:16px; overflow-x:auto; border-bottom:1px solid var(--line-on-dark); background:#131417;}
.tab-label{
  flex:none; white-space:nowrap; padding:10px 16px; border-radius:11px; cursor:pointer;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.55); transition:background .15s, color .15s;
}
.tab-label:hover{color:#fff;}
.tab-panels{background:var(--cream); color:var(--ink); padding:34px;}
.tab-panel{display:none;}
.tabs:has(#tab1:checked) .tab-panel[data-tab="1"],
.tabs:has(#tab2:checked) .tab-panel[data-tab="2"],
.tabs:has(#tab3:checked) .tab-panel[data-tab="3"],
.tabs:has(#tab4:checked) .tab-panel[data-tab="4"],
.tabs:has(#tab5:checked) .tab-panel[data-tab="5"],
.tabs:has(#tab6:checked) .tab-panel[data-tab="6"]{display:block; animation:tabPanelIn .4s cubic-bezier(.16,1,.3,1) both;}
@keyframes tabPanelIn{
  0%{opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:none;}
}
.tab-panel-body{display:flex; gap:32px; align-items:flex-start;}
.tab-panel-text{flex:1; min-width:0;}
.tabs:has(#tab1:checked) .tab-label[for="tab1"],
.tabs:has(#tab2:checked) .tab-label[for="tab2"],
.tabs:has(#tab3:checked) .tab-label[for="tab3"],
.tabs:has(#tab4:checked) .tab-label[for="tab4"],
.tabs:has(#tab5:checked) .tab-label[for="tab5"],
.tabs:has(#tab6:checked) .tab-label[for="tab6"]{background:rgba(0,87,255,.16); color:#8DB3FF;}
.tab-input:focus-visible + .tab-label{outline:2px solid var(--blue); outline-offset:2px;}
.tab-panel h3{font-size:18px; letter-spacing:-.4px; margin-bottom:8px;}
.tab-panel .eyebrow{color:var(--blue);}
.tab-panel p{font-size:13px; color:var(--muted); line-height:1.65; margin:10px 0 0; max-width:60ch;}
.tab-panel ul{margin:14px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px;}
.tab-panel li{display:flex; gap:10px; font-size:12.5px; line-height:1.5; color:var(--ink);}
.tab-panel li::before{content:"✓"; flex:none; width:17px; height:17px; border-radius:5px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; font-size:9px; font-weight:800; margin-top:1px;}

/* ---------- TAB MOCK (vista previa del panel real) ---------- */
.tab-mock{
  flex:0 0 300px; background:#fff; border:1px solid var(--hairline); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 30px rgba(19,20,23,.07);
}
.tab-mock-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--hairline); background:#FAFAFB;}
.tab-mock-dot{width:8px; height:8px; border-radius:50%; background:#0057FF; flex:none;}
.tab-mock-head strong{font-size:11.5px; font-weight:800; letter-spacing:-.2px; color:#131417;}
.tab-mock-head span{font-size:9.5px; color:#8b8f96; margin-left:auto; white-space:nowrap;}
.tab-mock-body{padding:14px; display:flex; flex-direction:column; gap:8px;}
.tab-mock-row{display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:10px; background:#F7F8FA; font-size:11px;}
.tab-mock-time{flex:none; font-weight:800; color:#131417; font-size:11px;}
.tab-mock-name{flex:1; min-width:0; color:#4b4f57; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tab-mock-chip{flex:none; font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:20px; letter-spacing:.2px;}
.tab-mock-chip.is-confirmed{background:#E8F6EE; color:#2B8A57;}
.tab-mock-chip.is-pending{background:#FFF3D8; color:#9B731C;}
.tab-mock-chip.is-neutral{background:#EAF1FF; color:#0057FF;}
.tab-mock-chip.is-up{background:#E8F6EE; color:#2B8A57;}
.tab-mock-foot{font-size:10px; color:#8b8f96; padding:2px 2px 0; font-weight:700;}
.tab-mock-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:2px;}
.tab-mock-stat{background:#F7F8FA; border-radius:10px; padding:10px 6px; text-align:center;}
.tab-mock-stat strong{display:block; font-size:16px; font-weight:800; color:#131417; letter-spacing:-.3px;}
.tab-mock-stat span{display:block; font-size:9px; color:#8b8f96; margin-top:2px;}
.tab-mock-bar-row{display:flex; align-items:center; justify-content:space-between; font-size:11px; padding:0 2px;}
.tab-mock-bar{height:6px; border-radius:6px; background:#EEF0F3; overflow:hidden; margin:2px 0 4px;}
.tab-mock-bar span{display:block; height:100%; background:linear-gradient(90deg,#0057FF,#5B8DEF); border-radius:6px; animation:tabMockBar .8s .1s ease both;}
@keyframes tabMockBar{0%{width:0!important;}}
@media (max-width:900px){
  .tab-panel-body{flex-direction:column;}
  .tab-mock{flex:none; width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .tab-mock-bar span{animation:none;}
}

/* ---------- CTA PANEL ---------- */
.cta{
  background:var(--showcase); border:1px solid var(--hairline); color:#fff; border-radius:26px;
  padding:56px; position:relative; overflow:hidden;
}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 300px at 85% 0%, rgba(0,87,255,.28), transparent 65%);}
.cta-inner{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta h2{font-size:clamp(24px,3.2vw,34px); letter-spacing:-1px; max-width:520px; color:#fff;}
.cta p{margin-top:14px; color:rgba(255,255,255,.62); font-size:14.5px; max-width:440px;}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;}

/* enlace "volver / ver también" */
.more-links{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.more-links a{
  font-size:12.5px; font-weight:700; text-decoration:none; color:var(--text-muted);
  border:1px solid var(--hairline); border-radius:100px; padding:8px 14px; transition:border-color .15s, color .15s;
}
.more-links a:hover{color:var(--text); border-color:var(--hairline-strong);}

/* ---------- FOOTER ---------- */
.site-footer{padding:64px 0 28px; border-top:1px solid var(--hairline);}
.ft-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px 32px;}
.ft-brand{max-width:320px;}
.ft-brand .brand{display:inline-flex; align-items:center; gap:10px;}
.ft-tagline{margin-top:16px; font-size:13px; line-height:1.65; color:var(--text-muted);}
.ft-social{display:flex; gap:10px; margin-top:18px;}
.ft-social a{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--hairline);
  display:grid; place-items:center; color:var(--text-muted);
  transition:color .15s, border-color .15s;
}
.ft-social a:hover{color:var(--blue); border-color:var(--blue);}
.ft-social svg{width:16px; height:16px;}
.ft-col{display:flex; flex-direction:column; gap:12px;}
.ft-col h3{
  font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text); font-weight:800; margin-bottom:2px;
}
.ft-col a{font-size:13px; color:var(--text-muted); text-decoration:none; transition:color .15s;}
.ft-col a:hover{color:var(--text);}
.ft-base{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--hairline);
  font-size:12px; color:var(--text-muted);
}
@media (max-width:860px){
  .ft-grid{grid-template-columns:1fr 1fr;}
  .ft-brand{grid-column:1 / -1;}
}
@media (max-width:520px){ .ft-grid{grid-template-columns:1fr;} }

/* ---------- WHATSAPP FAB ---------- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:13px 17px; border-radius:100px;
  font-family:var(--body); font-size:13.5px; font-weight:700;
  box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(37,211,102,.5);}
.wa-fab svg{width:22px; height:22px; fill:currentColor; flex:none;}
@media (max-width:520px){
  .wa-fab span{display:none;}
  .wa-fab{padding:15px; right:16px; bottom:120px;}
}
@media (prefers-reduced-motion:reduce){ .wa-fab{transition:none;} }

/* ---------- marquee compartido ---------- */
.marquee-section{padding:30px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--section-card);}
.marquee-label{text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:1.6px; color:var(--text-muted); text-transform:uppercase; margin-bottom:16px;}
.marquee-wrap{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee{display:flex; gap:12px; width:max-content; animation:marqueeScroll 34s linear infinite;}
.marquee-wrap:hover .marquee{animation-play-state:paused;}
.marquee span{flex:none; display:inline-flex; align-items:center; gap:8px; background:var(--chip); border:1px solid var(--hairline); padding:9px 16px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--text);}
.marquee span i{width:6px; height:6px; border-radius:50%; background:var(--blue); display:block;}
@keyframes marqueeScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee{animation:none;} }

@media (max-width:640px){
  .wrap{padding:0 20px;}
  section{padding:64px 0;}
  .cta{padding:36px 28px;}
}