/* ==========================================================================
   Panco Elevate Content — base.css
   Tokens de la dirección de arte "Apertura en órbita", fuentes, reset y
   componentes compartidos (botones, cejas, tarjetas, elementos de marca).
   Los valores salen de la identidad de Panco y de la ficha aprobada. Ver LEEME.
   ========================================================================== */

/* ---------- Fuentes (variables, subconjunto latino, servidas desde /fonts) ---------- */
@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Color: identidad (paleta oficial de Panco) */
  --bg:#0A0A0C;              /* fondo principal */
  --surface:#111116;         /* fondos de secciones y tarjetas */
  --surface-2:#17171F;       /* tarjeta al pasar el mouse: el surface un paso más claro (derivado) */
  --line:#23232C;            /* bordes y separadores (derivado) */
  --ink:#FFFFFF;             /* texto principal */
  --muted:#A1A1AA;           /* texto secundario */
  --brand:#0066FF;           /* acento principal: botón, anillo azul, núcleo */
  --brand-on-dark:#4D90FF;   /* azul para texto pequeño sobre oscuro (derivado, pasa AA) */
  --brand-press:#0057D9;     /* azul presionado */
  --brand-soft:rgba(0,102,255,.14);
  --accent:#7B2CBF;          /* acento secundario: anillo morado, halos, solo formas */
  --accent-on-dark:#A66BEB;  /* morado para texto sobre oscuro (derivado, pasa AA) */
  --energy:#10E880;          /* acento energía: anillo verde, cometa, etiquetas */
  --cta:var(--brand);
  --cta-ink:#FFFFFF;
  --error:#FF5C5C;

  /* Tipografía */
  --font-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Forma: hexágono de cortes rectos + triángulo de puntas suaves */
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:8px;

  /* Movimiento: enérgico, preciso, cósmico */
  --ease:cubic-bezier(.16,1,.3,1);        /* expo.out */
  --ease-io:cubic-bezier(.76,0,.24,1);    /* power3.inOut */
  --ease-pop:cubic-bezier(.34,1.5,.64,1); /* back.out(1.6) */
  --dur:1s;
  --dist:56px;
  --t-hover:.45s;

  /* Espacio y ritmo */
  --gutter:clamp(20px,5vw,64px);
  --maxw:1200px;
  --section-y:clamp(72px,10vw,140px);
  --nav-h:68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color:var(--ink)}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.6;background:var(--bg);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--energy);outline-offset:3px;border-radius:4px}

/* Lenis 1.3.11 */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Tipografía ---------- */
.display,.h1,.h2,.h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.02}
.h1{font-size:clamp(2.5rem,4vw + 1.6rem,4.75rem)}
.h2{font-size:clamp(2rem,2.2vw + 1.3rem,3.25rem);line-height:1.05}
.h3{font-size:clamp(1.2rem,.6vw + 1rem,1.5rem);line-height:1.2;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,.4vw + .95rem,1.25rem);line-height:1.6;color:var(--muted)}
.muted{color:var(--muted)}

/* Ceja: viene de la línea "— ELEVATE CONTENT —" del logo */
.ceja{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-on-dark)}
.ceja::before{content:"";width:28px;height:1.5px;background:currentColor;flex:none}
.ceja--centro::after{content:"";width:28px;height:1.5px;background:currentColor;flex:none}
.ceja .nucleo{width:9px;height:10px;flex:none;color:var(--brand)}
.ceja--verde{color:var(--energy)}
.ceja--hero{align-items:flex-start;font-size:.74rem;letter-spacing:.16em;line-height:1.5}
.ceja--hero::before{display:none}
.ceja--hero .nucleo{margin-top:.3em}

/* ---------- Botones ---------- */
/* El hover usa translate/scale sueltos (no transform): así no pelea con el botón magnético de GSAP */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-md);font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.005em;line-height:1;white-space:nowrap;
  transition:translate var(--t-hover) var(--ease),scale .15s var(--ease),box-shadow var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.btn--cta{background:var(--cta);color:var(--cta-ink);box-shadow:0 0 0 0 rgba(0,102,255,0)}
.btn--cta .btn__ico{color:#fff}
.btn--cta:hover{translate:0 -2px;box-shadow:0 14px 34px -12px rgba(0,102,255,.75),0 0 0 1px rgba(77,144,255,.35) inset}
.btn--cta:active{scale:.97;background:var(--brand-press)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1.5px var(--line) inset}
.btn--ghost:hover{box-shadow:0 0 0 1.5px var(--brand-on-dark) inset;translate:0 -2px}
.btn--ghost:active{scale:.97}
.btn__ico{width:12px;height:14px;flex:none;transition:translate var(--t-hover) var(--ease)}
.btn:hover .btn__ico{translate:3px 0}
.btn--wa{background:#10E880;color:#0A0A0C}
.btn--wa:hover{translate:0 -2px;box-shadow:0 14px 34px -12px rgba(16,232,128,.6)}
.btn--wa:active{scale:.97}
.btn--block{width:100%}

/* ---------- Tarjeta ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;isolation:isolate;overflow:hidden;
  transition:background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.card::after{content:"";position:absolute;inset:auto -40% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--brand-soft),transparent 70%);opacity:0;transition:opacity var(--t-hover) var(--ease);z-index:-1}
.card:hover{background:var(--surface-2);border-color:#2E2E3A;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.card:hover::after{opacity:1}
.card__ico{margin-bottom:22px}
.card .h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.98rem}

/* ---------- Elementos de marca ---------- */
/* Núcleo: el triángulo de reproducción del logo */
.nucleo{display:inline-block;width:1em;height:1em;color:var(--brand)}

/* Apertura: las seis aspas del isotipo como marco de un ícono */
.apertura{position:relative;width:60px;height:60px;color:var(--ink)}
.apertura svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.apertura .aspa{fill:#2A2A35;transition:transform .7s var(--ease),fill var(--t-hover) var(--ease);transform-box:view-box;transform-origin:50% 50%}
.apertura__ico{position:absolute;inset:0;display:grid;place-items:center;color:var(--brand-on-dark)}
.apertura__ico svg{position:static;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.card:hover .apertura .aspa,.apertura:hover .aspa,.apertura.is-open .aspa{fill:var(--brand)}
.card:hover .apertura .aspa:nth-child(odd),.apertura:hover .aspa:nth-child(odd),.apertura.is-open .aspa:nth-child(odd){transform:rotate(14deg) scale(1.08)}
.card:hover .apertura .aspa:nth-child(even),.apertura:hover .aspa:nth-child(even),.apertura.is-open .aspa:nth-child(even){transform:rotate(-14deg) scale(1.08)}

/* Órbita: anillo inclinado, halo de un elemento */
.orbita{fill:none;stroke-linecap:round}

/* Estrellas: ver sitio.css */

/* ---------- Utilidades ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.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}
.marcador{background:#FFE55C;color:#1A1A1A;padding:0 .3em;border-radius:3px;font-weight:600}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}