/* ============================================================
   Marca v2 — componentes (botones, nav, menús, tarjetas, chips)
   Depende de tokens.css e iconos/iconos.css. Sin frameworks.
   ============================================================ */

/* ───────── Layout ───────── */
.wrap{max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}   /* contenido útil = --wrap (1200 px) */
.sec{padding:96px 0}                                  /* ritmo único: 96 px escritorio / 64 px móvil */
@media(max-width:820px){.sec{padding:64px 0}}
/* UNA plantilla de encabezado de sección: eyebrow mono + H2 + lead, siempre a la izquierda y apilados
   (el lead DEBAJO del H2, máx. 60 ch). Excepción: el CTA final, centrado, con su propio marcado. */
.sec-head{display:block;max-width:none;margin-bottom:48px;text-align:left}
.sec-head h2{margin:0}
.sec-head .lead{max-width:60ch;margin:16px 0 0}
@media(max-width:820px){.sec-head{margin-bottom:32px}}

/* Eyebrow editorial: número de sección + tema, en mono, sin mayúsculas ni tracking */
.eyebrow{font-family:var(--f-mono);font-size:var(--t-meta);font-weight:500;color:var(--marca-txt);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--marca);border-radius:1px}

/* ───────── Botones ─────────
   Un solo bloque .btn + variantes. Altura 44 (táctil), lg 52 (héroe), sm 36.
   Micro-interacción "sello": al pasar el puntero sube 1px y la sombra se abre;
   al pulsar baja 1px y la sombra se cierra (sensación de pulsador físico). */
.btn{--btn-h:44px;--btn-px:20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 var(--btn-px);
  font-family:var(--f-sans);font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  border-radius:var(--r-btn);border:1.5px solid transparent;position:relative;
  transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out),background-color var(--d-2) var(--ease-out),border-color var(--d-2) var(--ease-out),color var(--d-2) var(--ease-out)}
.btn .ic{width:18px;height:18px}
.btn-lg{--btn-h:52px;--btn-px:26px;font-size:16px}
.btn-sm{--btn-h:36px;--btn-px:14px;font-size:14px;border-radius:8px}
.btn:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Primario: naranja fuerte (AA 5,2:1 con texto blanco en los dos temas) */
.btn-primario{background:var(--marca-fuerte);color:#fff;box-shadow:var(--sombra-btn)}
.btn-primario:hover{background:var(--marca-fuerte);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 2px 4px rgba(26,24,22,.18),0 12px 24px -8px rgba(194,65,12,.55)}
.btn-primario:active{background:var(--marca-hover);transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 1px 1px rgba(26,24,22,.2)}
/* Secundario: hierro en contorno; en hover se rellena de papel usado */
.btn-secundario{background:var(--superficie);color:var(--tinta);border-color:var(--borde-fuerte);box-shadow:var(--sombra-1)}
.btn-secundario:hover{border-color:var(--tinta);background:var(--superficie-2);transform:translateY(-1px);box-shadow:var(--sombra-2)}
.btn-secundario:active{background:var(--superficie-2);box-shadow:none}
/* Hierro sólido (CTA sobre fondo naranja o fotos) */
.btn-hierro{background:var(--tinta);color:var(--fondo)}
.btn-hierro:hover{background:#000;transform:translateY(-1px);box-shadow:var(--sombra-2)}
html[data-theme="dark"] .btn-hierro:hover{background:#fff}
/* Fantasma: solo texto; el subrayado se dibuja de izquierda a derecha */
.btn-fantasma{background:transparent;color:var(--tinta);padding:0 6px;height:auto;border-radius:4px}
.btn-fantasma::after{content:'';position:absolute;left:6px;right:6px;bottom:-2px;height:2px;background:var(--marca);transform:scaleX(0);transform-origin:left;transition:transform var(--d-2) var(--ease-out)}
.btn-fantasma:hover::after,.btn-fantasma:focus-visible::after{transform:scaleX(1)}
.btn-fantasma:hover{color:var(--marca-txt)}
/* Icono: 44x44 redondo con borde */
.btn-icono{--btn-px:0;width:44px;border-radius:50%;background:var(--superficie);color:var(--tinta);border-color:var(--borde)}
.btn-icono:hover{border-color:var(--tinta);background:var(--superficie-2)}
.btn-icono .ic{width:20px;height:20px}
/* flecha que se desliza */
.btn .ic-arrow{transition:transform var(--d-2) var(--ease-out)}
.btn:hover .ic-arrow{transform:translateX(3px)}
/* Grupo de CTA */
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ctas-nota{font-size:var(--t-small);color:var(--tinta-3);display:flex;align-items:center;gap:8px;margin-top:14px}

/* ───────── Chips y estados ───────── */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:var(--r-chip);font-size:13px;font-weight:600;background:var(--superficie-2);color:var(--tinta-2);border:1px solid var(--borde)}
.chip .ic{width:14px;height:14px}
.chip-ok{background:var(--chip-al-dia);color:var(--al-dia-txt);border-color:transparent}
.chip-warn{background:var(--chip-por-vencer);color:var(--por-vencer-txt);border-color:transparent}
.chip-risk{background:var(--chip-vencido);color:var(--vencido-txt);border-color:transparent}
.chip-marca{background:var(--marca-suave);color:var(--marca-txt);border-color:transparent}
.punto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ───────── Tarjetas ───────── */
.card{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-card);padding:var(--sp-6);box-shadow:var(--sombra-1);transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out),border-color var(--d-2)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--borde-fuerte)}
.card-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--marca-suave);color:var(--marca-txt);margin-bottom:16px}
.card-ic .ic{width:22px;height:22px}
.card h3{margin-bottom:8px}
.card p{color:var(--tinta-2);font-size:15px}
.card-hierro{background:var(--superficie-inv);color:var(--tinta-inv);border-color:transparent}
.card-hierro h3,.card-hierro p{color:inherit}
.card-hierro p{opacity:.78}

/* ───────── Nav de escritorio ─────────
   Barra fija de 64px; enlaces con indicador deslizante (una sola píldora que se mueve
   por JS al activo y al hover); CTA primario + login fantasma; toggle de tema. */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;height:64px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--fondo) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--d-3),box-shadow var(--d-3)}
/* Test manual 2026-10-13: "el menú de arriba se siente muy frío" — antes el
   borde/sombra al hacer scroll usaban --borde (gris neutro, sin rastro de
   marca); con --marca-borde (mismo naranja suave que ya usan los chips) el
   nav deja de sentirse una barra SaaS genérica en cuanto se desliza. */
.nav.scrolled{border-bottom-color:var(--marca-borde);box-shadow:var(--sombra-1)}
.nav-in{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:24px}
.nav-logo{display:flex;align-items:center;height:32px;text-decoration:none;color:var(--tinta)}
.nav-logo svg,.nav-logo img{height:32px;width:auto;display:block}
.nav-links{position:relative;display:flex;align-items:center;gap:4px;list-style:none;margin:0 auto}
.nav-links>li>a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--tinta-2);text-decoration:none;transition:color var(--d-2)}
.nav-links>li>a:hover,.nav-links>li>a[aria-current="true"],.nav-links>li>a.activo{color:var(--tinta)}
.nav-links>li>a[aria-current="true"],.nav-links>li>a.activo{font-weight:600}
.nav-links>li>a .ic{width:14px;height:14px}
/* indicador: píldora que se desliza (JS pone --x/--w medidos del enlace activo o del hover).
   Antes era --superficie-2/--borde (gris neutro) — "frío" para una marca que
   se define por su naranja. --marca-suave/--marca-borde son el mismo par que
   ya usan los chips del héroe, no un color nuevo. */
.nav-ind{position:absolute;z-index:0;top:0;left:0;height:36px;width:var(--w,0px);transform:translateX(var(--x,0px));background:var(--marca-suave);border:1px solid var(--marca-borde);border-radius:999px;
  transition:transform var(--d-3) var(--ease-out),width var(--d-3) var(--ease-out),opacity var(--d-2);opacity:var(--o,0)}
.nav-r{display:flex;align-items:center;gap:10px}
@media(max-width:920px){.nav-links,.nav-r .btn-fantasma{display:none}.nav-r .btn-primario{--btn-h:40px;--btn-px:16px;font-size:14px}}

/* Megamenú (ArcGestor): panel de 2 columnas bajo "Productos"; abre con hover o click/Enter (aria-expanded) */
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);width:min(720px,calc(100vw - 32px));
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-lg);box-shadow:var(--sombra-3);padding:14px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:6px;opacity:0;visibility:hidden;transition:opacity var(--d-2) var(--ease-out),transform var(--d-3) var(--ease-out),visibility var(--d-2)}
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega[data-open="true"] .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega::before{content:'';position:absolute;left:0;right:0;top:-12px;height:14px}
.mega-item{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--tinta);transition:background var(--d-1)}
.mega-item:hover{background:var(--superficie-2)}
.mega-item .mi-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--superficie-2);color:var(--tinta)}
.mega-item .mi-ic .ic{width:20px;height:20px}
.mega-item .mi-n{font-weight:700;font-size:15px;letter-spacing:-.01em}
.mega-item .mi-d{font-size:13px;color:var(--tinta-3)}
.mega-item.disponible{grid-column:1/-1;grid-template-columns:72px 1fr auto;background:var(--superficie-inv);color:var(--tinta-inv);padding:12px 14px}
.mega-item.disponible .mi-ic{width:72px;height:72px;border-radius:12px;background:var(--marca);color:#fff}
.mega-item.disponible .mi-ic .ic{width:32px;height:32px;--ic-acc:#fff}
.mega-item.disponible .mi-d{color:inherit;opacity:.75}
.mega-item.disponible:hover{background:#000}
html[data-theme="dark"] .mega-item.disponible:hover{background:#fff}
.mega-item.pronto{opacity:.75}
.mega-item.pronto .mi-ic{color:var(--tinta-3)}
.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:10px 12px 4px;border-top:1px solid var(--borde);margin-top:4px;font-size:13px;color:var(--tinta-3)}

/* ───────── Menú móvil a pantalla completa ─────────
   Se abre con clip-path circular desde la hamburguesa (420 ms); los enlaces entran en
   cascada (60 ms); el CTA queda fijo abajo con safe-area. Con reduced-motion: fundido. */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--borde);background:var(--superficie);cursor:pointer;place-items:center;position:relative;z-index:402}
.burger span{position:absolute;left:12px;width:20px;height:2px;background:var(--tinta);border-radius:2px;transition:transform var(--d-3) var(--ease-out),opacity var(--d-2),top var(--d-3) var(--ease-out)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:920px){.burger{display:grid}}
.mmenu[hidden]{display:none}
.mmenu{position:fixed;inset:0;z-index:401;background:var(--fondo);display:flex;flex-direction:column;padding:88px var(--gutter) max(20px,env(safe-area-inset-bottom));
  clip-path:circle(0 at calc(100% - 38px) 32px);visibility:hidden;transition:clip-path var(--d-3) var(--ease-in-out),visibility 0s linear var(--d-3)}
.mmenu[data-open="true"]{clip-path:circle(150% at calc(100% - 38px) 32px);visibility:visible;transition:clip-path 520ms var(--ease-in-out),visibility 0s}
.mmenu ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.mmenu>ul>li>a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;font-size:clamp(24px,6vw,30px);font-weight:700;letter-spacing:-.02em;font-variation-settings:'wdth' 108;color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--borde)}
.mmenu>ul>li>a .ic{width:22px;height:22px;color:var(--tinta-3)}
.mmenu li{opacity:0;transform:translateY(14px);transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out)}
.mmenu[data-open="true"] li{opacity:1;transform:none}
.mmenu[data-open="true"] li:nth-child(1){transition-delay:120ms}.mmenu[data-open="true"] li:nth-child(2){transition-delay:180ms}.mmenu[data-open="true"] li:nth-child(3){transition-delay:240ms}.mmenu[data-open="true"] li:nth-child(4){transition-delay:300ms}.mmenu[data-open="true"] li:nth-child(5){transition-delay:360ms}.mmenu[data-open="true"] li:nth-child(6){transition-delay:420ms}
.mmenu-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:20px}
.mmenu-foot .btn{width:100%}
.mmenu-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--tinta-3);padding-top:8px}
/* Sub-bloque "Productos" del menú móvil de ArcGestor */
.mmenu-prod{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0 4px}
.mmenu-prod a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--superficie);border:1px solid var(--borde);font-size:14px;font-weight:600;color:var(--tinta);text-decoration:none}
.mmenu-prod a.disponible{grid-column:1/-1;background:var(--superficie-inv);color:var(--tinta-inv);border-color:transparent}
.mmenu-prod .ic{width:18px;height:18px}

/* ───────── Reveal al hacer scroll (IntersectionObserver, una vez) ───────── */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
html.js .stagger>*{opacity:0;transform:translateY(16px);transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out)}
html.js .stagger.in>*{opacity:1;transform:none}
html.js .stagger.in>*:nth-child(2){transition-delay:60ms}html.js .stagger.in>*:nth-child(3){transition-delay:120ms}html.js .stagger.in>*:nth-child(4){transition-delay:180ms}html.js .stagger.in>*:nth-child(5){transition-delay:240ms}html.js .stagger.in>*:nth-child(6){transition-delay:300ms}

/* ───────── Movimiento reducido ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .reveal,html.js .stagger>*{opacity:1;transform:none}
  .mmenu{clip-path:none;opacity:0;transition:opacity var(--d-2)}.mmenu[data-open="true"]{opacity:1}
}