/* ===========================================================
   SIDIUNLaR · base compartida de todo el sitio
   Tokens + tipografía + botones + cabecera + pie + flotantes.
   La cargan la portada, las páginas internas y las vistas del sistema,
   así el sitio entero se ve como una sola pieza.
   =========================================================== */

/* Paleta oficial · Manual de Identidad SIDIUNLaR (Feb 2026): #057d2f #69ae1c #c0d235 */
:root{
  --green-900:#03501d;   /* verde profundo — fondos y títulos */
  --green-800:#045e23;
  --green-700:#046b28;
  --green-600:#057d2f;   /* oficial — verde institucional */
  --green-500:#057d2f;
  --green-400:#69ae1c;   /* oficial — verde lima */
  --lime:#c0d235;        /* oficial — lima claro */
  --neon:#c0d235;
  --gold:#c39a3f;
  --ink:#057d2f;
  --text:#243630;
  --muted:#5e7166;
  --surface:#ffffff;
  --bg:#e9f4ec;
  --beige:#e3f1e8;
  --soft:#eef7f1;
  --border:#d4e6da;
  --danger:#e5484d;
  --warn:#f0a020;
  --info:#2f80ed;
  --radius:20px;
  --shadow:0 14px 40px rgba(12,58,37,.10);
  --shadow-lg:0 28px 60px rgba(12,58,37,.16);
  --header-h:92px;
}

/* Tipografía: Geist (textos y títulos) y Geist Mono (etiquetas chicas en mayúscula),
   variables (un solo archivo con todos los grosores), auto-alojadas. */
@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-var.woff2') format('woff2-variations'),url('/assets/fonts/Geist-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-var.woff2') format('woff2-variations'),url('/assets/fonts/GeistMono-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
h1,h2,h3,h4,h5{font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;line-height:1.14;letter-spacing:-.02em}
/* todos los títulos del sitio en mayúscula (el área del afiliado y el panel lo desactivan en app.css) */
h1,h2,h3,h4,h5{text-transform:uppercase;letter-spacing:0}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
svg.i{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i2{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* etiquetas chicas en mayúscula ("kickers", rótulos): Geist Mono */
.kick,.hs-kick,.lw-title,.section-title,.cred-tag,.td-n,.hg-n,.tb-label{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* saltar al contenido (teclado y lectores de pantalla) */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:var(--green-800);font-weight:700;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ====== BOTONES ====== */
.btn{text-transform:uppercase;letter-spacing:.04em;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:14px;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;border:none;transition:.25s;font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;text-align:center;white-space:nowrap}
.btn svg.i{width:18px;height:18px}
.btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.btn:hover::after{left:150%}
/* verde: texto SIEMPRE blanco; al pasar el mouse se oscurece (nunca se aclara) */
.btn-grn{background:var(--green-600);color:#fff;box-shadow:0 8px 24px rgba(5,125,47,.32)}
.btn-grn:hover{background:var(--green-800);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(5,125,47,.38)}
.btn-dark{background:var(--green-900);color:#fff}
.btn-dark:hover{background:#02330f;transform:translateY(-2px)}
.btn-line{background:#fff;color:var(--green-700);border:1.5px solid var(--border)}
.btn-line:hover{border-color:var(--green-500);color:var(--green-600);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border)}
.btn-ghost:hover{color:var(--green-600);border-color:var(--green-500)}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.22)}
.btn-xs{padding:11px 20px;font-size:14.5px;border-radius:11px;font-weight:700}
.btn-xs svg.i2{width:17px;height:17px;stroke-width:2}
.btn-block{width:100%}

/* ====== APARICIÓN AL DESPLAZAR ====== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-r{opacity:0;transform:translateX(40px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-zoom{opacity:0;transform:scale(.94);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in,.reveal-l.in,.reveal-r.in,.reveal-zoom.in{opacity:1;transform:none}
/* sin JavaScript no hay quien las muestre: se ven desde el principio */
@media (scripting: none){.reveal,.reveal-l,.reveal-r,.reveal-zoom{opacity:1;transform:none}}

/* --- entrada escalonada ---
   En un contenedor con la clase .esc, los hijos entran uno detrás del otro
   cuando el contenedor llega a la pantalla. Sirve para las grillas (los
   pasos, las novedades, las fotos de la comisión): entrar todos de golpe se
   nota menos y queda más plano. El escalón se corta a los 10 para que una
   lista larga no termine entrando con medio segundo de atraso. */
.esc > *{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
.esc.in > *{opacity:1;transform:none}
.esc.in > *:nth-child(2){transition-delay:.07s}
.esc.in > *:nth-child(3){transition-delay:.14s}
.esc.in > *:nth-child(4){transition-delay:.21s}
.esc.in > *:nth-child(5){transition-delay:.28s}
.esc.in > *:nth-child(6){transition-delay:.35s}
.esc.in > *:nth-child(7){transition-delay:.42s}
.esc.in > *:nth-child(8){transition-delay:.49s}
.esc.in > *:nth-child(9){transition-delay:.56s}
.esc.in > *:nth-child(n+10){transition-delay:.63s}
@media (scripting: none){.esc > *{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.esc > *{opacity:1;transform:none;transition:none}}


/* ====== BARRA DE CONTACTO Y REDES ====== */
.topbar{background:var(--green-700);color:#cfe3d7;font-size:13px;border-bottom:1px solid rgba(255,255,255,.07)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px;max-width:1360px}
.tb-left{display:flex;align-items:center;gap:22px}
.tb-left a{color:#dbeae1;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.tb-left a:hover{color:#fff}
.tb-left svg{width:15px!important;height:15px!important;color:var(--lime)}
.tb-right{display:flex;align-items:center;gap:13px}
.tb-label{font-weight:600;letter-spacing:.3px}
.tb-social{display:flex;gap:8px}
.tb-social a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;transition:transform .2s,box-shadow .2s}
.tb-social a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tb-social svg{width:15px!important;height:15px!important}
/* en el celular la barra de contacto no se muestra: el telefono y el correo
   estan en el pie, y las redes tambien, asi que solo ocupaba lugar arriba */
@media(max-width:760px){.topbar{display:none}}

/* ====== OCTUBRE ROSA ======
   El lazo de la campaña contra el cáncer de mama, al lado del botón Afiliate.
   Lo pone site.js solo durante octubre y desaparece solo el 1 de noviembre.
   Va dentro de la cabecera, no flotando: así no tapa nada ni se mueve de lugar
   cuando la cabecera se achica al bajar. */
.lazo-rosa{display:grid;place-items:center;flex:none;width:40px;height:40px;
  color:#ff6fae;transition:transform .25s,color .25s}
.lazo-rosa:hover{transform:translateY(-2px) scale(1.08);color:#ff93c4}
.lazo-rosa svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(6,24,15,.35))}
@media(prefers-reduced-motion:no-preference){
  .lazo-rosa svg{animation:lazoLate 4s ease-in-out infinite}
}
@keyframes lazoLate{0%,90%,100%{transform:scale(1)}94%{transform:scale(1.18)}}
@media(max-width:560px){.lazo-rosa{width:34px;height:34px}.lazo-rosa svg{width:29px;height:29px;stroke-width:3.2}}
/* El lazo suma 44px a una cabecera que ya venía justa: sin esto se salía del
   borde derecho en cualquier pantalla de 1366 para arriba. Se le gana ese
   lugar al espaciado del menú, que es de donde menos se nota. Solo aplica
   mientras el lazo está puesto (la clase la pone site.js en octubre). */
@media(min-width:1281px){
  .site-header.con-lazo .menu a{padding-left:8px;padding-right:8px}
  .site-header.con-lazo .menu a::after{left:8px;right:8px}
  .site-header.con-lazo .nav-right{gap:14px}
}

/* ====== REDES: los colores originales de cada aplicación, con el símbolo en blanco ====== */
.tb-social a,.mnav-redes a{color:#fff!important}
.tb-social a[href*="facebook.com"],.mnav-redes a[href*="facebook.com"]{background:#1877F2}
.tb-social a[href*="instagram.com"],.mnav-redes a[href*="instagram.com"]{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.tb-social a[href*="x.com"],.mnav-redes a[href*="x.com"]{background:#000}
.tb-social a[href*="wa.me"],.mnav-redes a[href*="wa.me"]{background:#25D366}

/* ====== CABECERA ====== */
.site-header{position:sticky;top:0;z-index:200;background:linear-gradient(100deg,var(--green-600) 0%,var(--green-700) 62%,var(--green-800) 100%);overflow:hidden;transition:box-shadow .3s ease}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--green-400),var(--lime),var(--green-400),transparent);opacity:.85}
.site-header.open{overflow:visible}
.site-header.scrolled{box-shadow:0 10px 30px rgba(6,24,15,.3)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h);max-width:1360px;position:relative;z-index:2;transition:min-height .3s ease}
.site-header.scrolled .wrap{min-height:74px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-logo{height:56px;width:auto;display:block;transition:height .3s ease,transform .3s ease}
.brand:hover .brand-logo{transform:scale(1.03)}
.site-header.scrolled .brand-logo{height:46px}
.nav-right{display:flex;align-items:center;gap:20px}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu li{display:flex}
.menu a{position:relative;display:block;white-space:nowrap;line-height:1.3;color:#e9f8f0;font-weight:600;font-size:14px;padding:10px 12px;border-radius:8px;transition:.2s;letter-spacing:.06em;text-transform:uppercase}
.menu a:hover{background:rgba(192,210,53,.14);color:#fff}
.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;border-radius:2px}
.menu a:hover::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:#fff}
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu .m-only{display:none}
.nav-cta{display:flex;gap:11px;align-items:center}
.btn-login{background:rgba(255,255,255,.08);color:#fff;border:1.6px solid rgba(255,255,255,.5)}
.btn-login:hover{background:#fff;color:var(--green-800);border-color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn-gold{background:var(--lime);color:#1d2a06;font-weight:800;box-shadow:0 6px 18px rgba(192,210,53,.4)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 28px rgba(192,210,53,.6)}
.burger{display:none;background:none;border:none;font-size:25px;color:#fff;cursor:pointer;position:relative;z-index:2;padding:6px 10px;border-radius:10px}
.burger:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* por debajo de 1320px el menú ya no entra en una línea: pasa al botón ☰ */
@media(max-width:1320px){
  .menu{display:none}
  .burger{display:block}
}
@media(max-width:900px){.brand-logo{height:44px}.site-header .wrap{min-height:72px}}
@media(max-width:480px){
  .nav-cta{gap:6px}
  .nav-cta .btn-xs{padding:11px 14px;font-size:13px;min-height:42px}
  .burger{min-width:44px;min-height:44px}
  .nav-cta .btn-xs .i2{display:none}
  .nav-cta .btn-login{display:none}/* "Ingresar" queda dentro del menú ☰ */
  .menu .m-only{display:block}
  .site-header .brand-logo{height:40px}
  .site-header .wrap{padding-left:16px;padding-right:16px;gap:12px}
}

/* ====== PIE ====== */
.site-footer{background:linear-gradient(180deg,var(--green-700),var(--green-900));color:#d8e9de;padding:70px 0 28px}
.site-footer .wrap{max-width:1360px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:46px}
.foot-brand p{font-size:14px;margin-top:16px;max-width:320px;line-height:1.7}
.site-footer h5{color:#fff;font-size:15px;margin-bottom:18px;font-weight:600}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:11px;font-size:14px}
.site-footer li a{display:inline-block;color:#d8e9de;transition:transform .25s ease,color .25s ease}
.site-footer li a:hover{transform:translateX(5px);color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#c9dfd3}
.foot-bottom a{color:#fff;text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:3px}
@media(max-width:980px){.foot{grid-template-columns:1fr 1fr}}
/* en el celular el pie se compacta: enlaces en dos columnas, con área de toque cómoda */
@media(max-width:560px){
  .site-footer{padding:44px 0 24px}
  .foot{grid-template-columns:1fr 1fr;gap:26px 18px;margin-bottom:30px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{display:none}
  .site-footer h5{margin-bottom:6px}
  .site-footer li{margin-bottom:0}
  .site-footer li a{display:block;padding:9px 0}
  .foot-bottom{padding-top:18px}
}

/* ====== FLOTANTES Y PROGRESO DE LECTURA ====== */
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green-400),var(--lime));z-index:400;box-shadow:0 0 10px rgba(5,125,47,.6)}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:300;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.45);transition:.25s;animation:waPulse 2.6s infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.7}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.to-top{position:fixed;right:27px;bottom:94px;z-index:300;width:48px;height:48px;border-radius:50%;background:var(--green-700);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;border:none;opacity:0;transform:translateY(18px);pointer-events:none;transition:.3s}
.to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--green-600);transform:translateY(-3px)}
@media(max-width:560px){
  .wa-float{width:52px;height:52px;right:16px;bottom:16px}
  .to-top{right:20px;bottom:80px;width:44px;height:44px}
  .site-footer{padding-bottom:96px}/* que los flotantes no tapen el pie */
}
/* en páginas con formulario el botón de WhatsApp tapaba campos: ahí no se muestra */
@media(max-width:760px){
  body:has(form .field) .wa-float{display:none}
  body:has(form .field) .to-top{bottom:20px}
}

/* ====== CAMPOS EN EL CELULAR ======
   Con letra menor a 16px, Safari de iPhone agranda la pantalla al tocar
   un campo y la deja desencuadrada. Vale para todo el sitio y el sistema. */
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  select,textarea{font-size:16px!important}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* ====== CELULAR: MENÚ A PANTALLA COMPLETA ====== */
/* el ☰ son tres rayitas que se convierten en ✕ */
.burger{font-size:0;width:44px;height:44px;padding:0}
.burger .bl{position:absolute;left:11px;right:11px;height:2.5px;border-radius:2px;background:#fff;transition:top .3s ease,transform .3s ease,opacity .2s ease}
.burger .bl:nth-child(1){top:14px}.burger .bl:nth-child(2){top:21px}.burger .bl:nth-child(3){top:28px}
.menu-abierto .burger .bl:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-abierto .burger .bl:nth-child(2){opacity:0}
.menu-abierto .burger .bl:nth-child(3){top:21px;transform:rotate(-45deg)}
/* el panel se abre en círculo desde el botón y las secciones entran de a una */
.mnav{position:fixed;inset:0;z-index:190;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;
  background:radial-gradient(120% 70% at 100% 0%,#0a8a37 0%,#045e23 45%,#022e11 100%);
  padding:96px 24px calc(28px + env(safe-area-inset-bottom));
  clip-path:circle(0 at calc(100% - 44px) 38px);transition:clip-path .5s cubic-bezier(.7,0,.25,1),visibility 0s linear .5s}
.menu-abierto .mnav{visibility:visible;clip-path:circle(160% at calc(100% - 44px) 38px);transition:clip-path .6s cubic-bezier(.7,0,.25,1),visibility 0s}
.menu-abierto body{overflow:hidden}
.mnav-in{min-height:100%;display:flex;flex-direction:column;gap:28px;max-width:560px;margin:0 auto}
.mnav-lista{list-style:none}
.mnav-lista li{opacity:0;transform:translateY(26px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.menu-abierto .mnav-lista li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .05s)}
/* El menú va con la primera letra en mayúscula y el resto en minúscula, con
   un grosor liviano y algo más chico: todo en mayúscula y en negrita ocupaba
   la pantalla entera y pesaba demasiado para lo que es, una lista de siete
   enlaces. El texto ya viene así escrito en la cabecera, así que alcanza con
   no transformarlo. */
.mnav-lista a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:clamp(19px,5.1vw,24px);font-weight:500;line-height:1.15;text-transform:none;letter-spacing:-.015em}
.mnav-lista .t{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1),color .25s}
.mnav-lista a:hover .t,.mnav-lista a:active .t{transform:translateX(7px);color:var(--lime)}
.mnav-lista .n{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;font-weight:400;color:rgba(192,210,53,.55);letter-spacing:.12em}
.mnav-lista a[aria-current="page"] .t{color:var(--lime);font-weight:600}
.mnav-lista a[aria-current="page"] .n{color:var(--lime)}
.mnav-pie{margin-top:auto;display:grid;gap:18px;opacity:0;transform:translateY(20px);transition:opacity .35s ease,transform .45s ease}
.menu-abierto .mnav-pie{opacity:1;transform:none;transition-delay:.55s}
.mnav-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mnav-cta .btn{padding:14px 12px;font-size:14px}
.mnav-redes{display:flex;justify-content:center;gap:6px}
.mnav-redes a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mnav-redes svg{width:19px;height:19px}
@media(min-width:1321px){.mnav{display:none}}

/* ====== CELULAR: BARRA FIJA ABAJO Y CABECERA QUE SE ESCONDE ====== */
.bbar{display:none}
@media(max-width:760px){
  .con-bbar body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .bbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:180;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(3,58,22,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(192,210,53,.25);box-shadow:0 -10px 30px rgba(0,0,0,.2);transition:transform .3s ease}
  .bbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:14px;color:#cfe3d7;
    font-size:11px;font-weight:600;letter-spacing:.02em;transition:background .2s,transform .15s}
  .bbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .bbar a[aria-current="page"]{color:var(--lime)}
  .bbar a.bb-cta{background:var(--lime);color:#1d2a06;font-weight:800;margin:2px 4px;box-shadow:0 6px 16px rgba(192,210,53,.35)}
  .bbar a.bb-cta svg{stroke-width:2.6}
  .bbar a.bb-wa svg{width:21px;height:21px}
  .menu-abierto .bbar{transform:translateY(110%)}
  /* los flotantes de siempre ya están en la barra */
  .wa-float,.to-top{display:none!important}
  .site-footer{padding-bottom:28px}
  /* la cabecera se esconde al bajar y vuelve al subir un poco */
  .site-header{transition:transform .32s ease,box-shadow .3s ease}
  .site-header.hdr-oculto{transform:translateY(-100%)}
  /* detalles: textos en un renglón */
  .tb-label{white-space:nowrap;font-size:11px;letter-spacing:.02em}
}
/* toque con respuesta: en pantallas táctiles, lo que se toca se achica apenas */
@media(hover:none){
  .btn:active,.cat:active,.paso:active,.fb-card a:active,.auth:active,.bbar a:active,.mnav-lista a:active,.td-item:active,.norm-item:active{transform:scale(.96)}
  .btn,.cat,.paso,.auth,.norm-item{transition:transform .15s ease,box-shadow .25s,background .25s,color .25s,border-color .25s}
  /* los enlaces que van dentro de un parrafo quedan de 17px de alto: muy
     poco para el dedo. El relleno vertical en un enlace de linea agranda la
     zona para tocar sin mover el texto de lugar. */
  .foot-bottom span a,.ci-row span a{padding-block:12px}
}
@media(prefers-reduced-motion:reduce){.mnav{clip-path:none!important}.mnav-lista li,.mnav-pie{opacity:1!important;transform:none!important}}

/* ====== ASISTENTE DE AYUDA (assets/asistente.js) ======
   Burbuja abajo a la izquierda (el WhatsApp y "volver arriba" van a la
   derecha) y un panel con preguntas frecuentes. En el celular el panel
   sube desde abajo como una hoja y tapa la barra fija. */
.as-btn{position:fixed;left:22px;bottom:22px;z-index:181;width:56px;height:56px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(140deg,var(--green-600),var(--green-800));color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(4,107,40,.38);transition:transform .25s,box-shadow .25s}
.as-btn:hover{transform:scale(1.07);box-shadow:0 16px 36px rgba(4,107,40,.45)}
.as-btn .as-i{grid-area:1/1;width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s,transform .3s}
.as-btn .as-i-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.as-btn.abierto .as-i-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.as-btn.abierto .as-i-x{opacity:1;transform:none}
/* aviso discreto que aparece una sola vez por visita */
.as-aviso{position:fixed;left:88px;bottom:36px;z-index:181;background:#fff;color:var(--text);border:1px solid var(--border);
  border-radius:14px;padding:9px 14px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);cursor:pointer;
  opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s;pointer-events:none}
.as-aviso.on{opacity:1;transform:none;pointer-events:auto}
.as-aviso::before{content:"";position:absolute;left:-6px;top:50%;margin-top:-6px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg);border-radius:0 0 0 3px}
/* fondo oscuro: solo en el celular, donde el panel ocupa casi toda la pantalla */
.as-fondo{position:fixed;inset:0;z-index:182;background:rgba(3,40,20,.45);opacity:0;pointer-events:none;transition:opacity .3s;display:none}
.as-panel{position:fixed;left:22px;bottom:92px;z-index:185;width:372px;max-width:calc(100vw - 44px);
  max-height:min(620px,calc(100vh - 150px));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(16px) scale(.98);transform-origin:0 100%;transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.as-panel.on{opacity:1;transform:none}
.as-panel[hidden]{display:none}/* el atributo hidden pierde contra display:flex */
.as-top{display:flex;align-items:center;gap:11px;padding:13px 14px;background:linear-gradient(120deg,var(--green-700),var(--green-900));color:#fff}
.as-ava{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.as-ava img{width:26px;height:26px;object-fit:contain}
.as-tit{flex:1;min-width:0}
.as-tit b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.as-tit span{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.as-x{width:36px;height:36px;border:none;background:rgba(255,255,255,.12);border-radius:50%;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.as-x:hover{background:rgba(255,255,255,.26)}
.as-x .as-i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.as-msgs{flex:1 1 auto;min-height:74px;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;display:flex;flex-direction:column;gap:9px;background:var(--soft)}
.as-m{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.55;animation:asEntra .3s ease both}
.as-m.bot{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:6px;color:var(--text)}
.as-m.yo{align-self:flex-end;background:var(--green-600);color:#fff;border-bottom-right-radius:6px;font-weight:600}
.as-m b{font-weight:800;color:var(--green-800)}
@keyframes asEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* los tres puntitos de "está escribiendo" */
.as-esc{display:flex;gap:5px;align-items:center;padding:14px}
.as-p{width:7px;height:7px;border-radius:50%;background:var(--green-400);animation:asPunto 1.1s infinite}
.as-p:nth-child(2){animation-delay:.15s}.as-p:nth-child(3){animation-delay:.3s}
@keyframes asPunto{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.as-ops{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 10px;background:#fff;border-top:1px solid var(--border)}
.as-op{border:1.5px solid var(--border);background:#fff;color:var(--green-700);font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 14px;border-radius:999px;cursor:pointer;text-align:left;transition:background .2s,border-color .2s,transform .15s}
.as-op:hover{background:var(--soft);border-color:var(--green-400)}
.as-op-ir{display:inline-flex;align-items:center;gap:7px;background:var(--green-600);border-color:var(--green-600);color:#fff}
.as-op-ir:hover{background:var(--green-700);border-color:var(--green-700)}
.as-op-ir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.as-op-volver{border-style:dashed;color:var(--muted);font-weight:500}
.as-pie{background:#fff;padding:0 16px 12px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.as-pie a{color:var(--green-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* mientras el menú ☰ está abierto, el asistente no molesta */
.menu-abierto .as-btn,.menu-abierto .as-panel,.menu-abierto .as-fondo,.menu-abierto .as-aviso{display:none}
@media(max-width:760px){
  .as-btn{left:14px;bottom:calc(78px + env(safe-area-inset-bottom));width:50px;height:50px}
  .as-btn .as-i{width:24px;height:24px}
  .as-aviso{left:74px;bottom:calc(90px + env(safe-area-inset-bottom));font-size:13px}
  .as-fondo{display:block}
  .as-fondo.on{opacity:1;pointer-events:auto}
  .as-panel{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:22px 22px 0 0;transform-origin:50% 100%;
    max-height:86vh;max-height:86dvh;padding-bottom:env(safe-area-inset-bottom)}
  .as-abierto body{overflow:hidden}
  .as-abierto .as-btn{display:none}
  /* en las páginas con formulario la burbuja taparía los campos */
  body:has(form .field) .as-btn{display:none}
}
@media print{.as-btn,.as-panel,.as-fondo,.as-aviso{display:none!important}}