/* marca.css — sistema de diseño de g·slota (fuente única de tokens).
   Enlázalo en el <head> antes del <style> propio de cada página.
   El acento por defecto es el naranja de marca; en los productos del cliente
   se sobreescribe --accent con SU color. Ver docs/sistema-de-diseno.md */
/* EL ATRIBUTO hidden ES LEY, NO SUGERENCIA (auditoría de código 08/08). Su
   regla nativa (display:none sin !important) la pisa cualquier display de
   autor, así que .aud-cab{display:flex}, .estado-aud, .volver-espera y los
   botones de voz salían aunque llevaran hidden — pantalla de auditoría FALSA
   en el diagnóstico normal, píldoras vacías, botones muertos. Una línea lo ata
   en toda la casa; cada página engancha marca.css. */
[hidden] { display: none !important; }

:root {
  --paper:#fdfcfa; --surface:#ffffff;
  --ink:#1b1a16; --ink-mid:#6d6a61; --ink-dim:#97938a;
  --line:#e3ded4; --line-soft:#efece5;
  --accent:#d98324; --accent-deep:color-mix(in srgb, var(--accent), black 20%);
  --accent-soft:color-mix(in srgb, var(--accent), white 82%);
  --ok:#4e9a51; --alerta:#cf5a3c;
  --font: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --r-control:13px; --r-card:16px; --r-pill:999px;
  /* escala de elevación coherente (sombra cálida de marca) */
  --e-1:0 1px 2px rgba(60,40,15,.06), 0 2px 8px -4px rgba(90,60,20,.14);
  --e-2:0 6px 18px -14px rgba(120,80,20,.4);
  --e-3:0 24px 60px -44px rgba(120,80,20,.5);
  --e-4:0 44px 100px -55px rgba(120,70,20,.5);
  --sombra-card:var(--e-3);
  --sombra-suave:var(--e-2);
  /* movimiento (una sola curva de marca, suave y con carácter) */
  --ease:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.66,0,.24,1);
  --dur-1:.15s; --dur-2:.3s; --dur-3:.6s;
}

/* ===== base global: nitidez tipográfica y comportamiento fino ===== */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
html, body {
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-kerning:normal;
  font-feature-settings:"kern","liga","calt"; -webkit-tap-highlight-color:transparent;
}
body { text-wrap:pretty; }
h2, h3 { text-wrap:balance; } /* h1 excluido: la landing mide su alto por JS */
::selection { background:color-mix(in srgb, var(--accent), transparent 78%); color:var(--ink); }
:focus-visible { outline:2px solid color-mix(in srgb, var(--accent), transparent 25%); outline-offset:2px; border-radius:4px; }
:where(a) { color:var(--accent-deep); text-underline-offset:2px; text-decoration-thickness:1px; }
img, svg, video, canvas { max-width:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* ===== LOGO g·slota v2 (elección Gabriel 01/08): Sora extra-negra + gota líquida viva ===== */
/* La fuente vive en el propio servidor (web/assets/fonts) — sin depender de Google. */
@font-face { font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/assets/fonts/sora-latin.woff2') format('woff2'); }

/* Los !important son deliberados: el logo es EL elemento de marca y debe verse
   idéntico en todas las páginas, por encima de los estilos locales de cada una. */
.gs-wordmark, .wordmark { display:inline-flex; align-items:baseline; color:var(--ink);
  font-family:'Sora', var(--font) !important; font-weight:800 !important; letter-spacing:-.05em !important; }
.gs-wordmark .g, .wordmark .g { color:var(--accent); }
.gs-wordmark .pt, .wordmark .pt {
  width:.26em !important; height:.26em !important; border-radius:50%; align-self:baseline; flex:none;
  position:relative; top:-.14em !important; margin:0 .09em !important;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.98), transparent 32%),
    radial-gradient(circle at 52% 50%, #efa94e, var(--accent) 56%, #8f5510) !important;
  box-shadow:inset 0 -2px 4px rgba(80,45,5,.45), inset 0 1px 3px rgba(255,255,255,.55), 0 3px 8px -3px rgba(217,131,36,.7);
  animation:gotaViva 3.4s ease-in-out infinite; }
@keyframes gotaViva {
  0%,100% { border-radius:50%; transform:scale(1); }
  30% { border-radius:56% 44% 48% 52%/46% 56% 44% 54%; transform:scale(1.06) rotate(4deg); }
  65% { border-radius:45% 55% 57% 43%/54% 45% 55% 46%; transform:scale(.96) rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .gs-wordmark .pt, .wordmark .pt { animation:none; } }

/* la gota (símbolo de marca, versión estática para logos/encabezados) */
.gs-gota { position:relative; border-radius:50%; overflow:hidden; flex:none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,1), transparent 26%),
    radial-gradient(circle at 32% 26%, color-mix(in srgb,var(--accent),white 72%), transparent 46%),
    radial-gradient(circle at 74% 84%, color-mix(in srgb,var(--accent),black 55%), transparent 58%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb,var(--accent),white 10%), var(--accent) 52%, color-mix(in srgb,var(--accent),black 30%));
  box-shadow: inset 0 -3px 7px rgba(60,25,0,.4), inset 0 3px 6px color-mix(in srgb,var(--accent),white 60%); }

/* botón de marca */
.gs-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:650; font-size:15px; line-height:1; border:none; cursor:pointer;
  background:var(--accent); color:#fff; border-radius:var(--r-control); padding:13px 24px;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent),transparent 40%), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.gs-btn:hover { background:var(--accent-deep); transform:translateY(-1px);
  box-shadow:0 16px 30px -14px color-mix(in srgb,var(--accent),transparent 30%), inset 0 1px 0 rgba(255,255,255,.25); }
.gs-btn:active { transform:translateY(0) scale(.985); }
.gs-btn.dark { background:var(--ink); } .gs-btn.dark:hover { background:#000; }

/* campo de texto de marca */
.gs-field { width:100%; font-family:var(--font); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
  padding:12px 15px; outline:none; transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.gs-field::placeholder { color:var(--ink-dim); }
.gs-field:focus { border-color:color-mix(in srgb,var(--accent),transparent 40%);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 88%); }

/* tarjeta de marca */
.gs-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sombra-card); }
