/* ============================================================
   Brinddi · marca.css — BASE de la marca nueva "Coral sobre tinta"
   Fuente de verdad: rediseno/DESIGN.md + rediseno/color/final/tokens.json
   ------------------------------------------------------------
   CÓMO SE USA (leer antes de tocar una página)

   1. ORDEN DE CARGA en el <head> (ya está puesto en todas las páginas):
        Google Fonts Outfit → css/marca.css → [fuentes viejas] → css/site.css → <style> de la página
      La página puede pisar lo de acá: los componentes son una sola clase (.btn, .chip…)
      y la página se carga después, así que su regla con la misma clase (o más) gana.
      Los resets de elemento (*{padding:0}, a{color:inherit}) NO les ganan, a propósito:
      con especificidad cero un <a class="btn"> quedaba sin padding y con texto claro sobre coral.

   2. COLOR: usar SIEMPRE las variables de abajo, nunca hex sueltos.
        Semánticos (cambian con el modo): --fondo --superficie --tarjeta --texto
          --texto-2 --linea --linea-control --personaje --marca --acento
          --sobre-acento --foco --campo --campo-texto --borde-tarjeta
        Paleta fija: --tinta --tinta-profunda --coral --damasco --porcelana
          --blanco-tibio --ojo
        Equivalencias con rediseno/color/final/tokens.json (oscuro / claro):
          --bg → --fondo · --surface → --superficie · --ink → --texto · --muted → --texto-2
          --line → --linea · --brand → --personaje / --marca · --accent → --acento
          --accent-ink → --sobre-acento · --field → --campo · --field-ink → --campo-texto
          --icon-bg → --icono-fondo · --icon-fg → --icono-tinta · --qr-bg/--qr-ink → --qr-fondo/--qr-tinta
        Derivados (NO están en tokens.json, se agregaron por accesibilidad):
          --tarjeta       = superficie de noche; #FFFFFF de día (DESIGN.md §2 "tarjetas #FFFFFF")
          --linea-control = borde de campos y controles. --linea (#2E4775) da 1.6:1 contra el
                            fondo y un campo necesita ≥3:1 → #7C88A5 noche (4.24) / #79839A día (3.54)
          --borde-tarjeta = transparente de noche, --linea de día (DESIGN.md §5)
          --foco          = coral (anillo de foco, 4.45:1 sobre noche)
      Reglas que no se negocian (DESIGN.md §2 y §9):
        · Botón = fondo --acento (coral) + texto --sobre-acento (#0C1C39). Nunca texto blanco sobre coral.
        · El coral NO va como texto chico (< 24 px) ni sobre noche (4.45:1) ni sobre porcelana (3.15:1).
          Texto chico de acento → --texto o --texto-2. El coral sí va en títulos grandes, íconos,
          bordes, puntos y en todo lo que se toca.
        · Nada de oro (#E9B949), morado, rosa, salmón, degradado de Instagram, glow ni brillos dorados.
        · Vidrio (backdrop-filter) solo en el ícono y en el héroe de la portada.

   3. MODOS
        · Noche es el de siempre (:root). La web va de noche.
        · class="modo-dia"   → día (en <html> o en cualquier contenedor; los alias viejos de site.css
                               también se redeclaran en .modo-*, así que siguen al contenedor).
        · class="modo-auto"  → sigue el modo del celular (app del invitado).
        · class="modo-noche" → fuerza noche dentro de un contenedor de día (el muro va SIEMPRE de noche).
        · Las plantillas de los eventos de clientes (js/themes.js) NO usan esto: son su mundo.

   4. TIPOGRAFÍA (DESIGN.md §4): una sola familia, Outfit, y CINCO tamaños, ni uno más.
        --t-hero    40 → 72 px   titular principal
        --t-titulo  28 → 44 px   títulos de sección, precios, números grandes
        --t-sub     18 → 20 px   subtítulos, títulos de tarjeta, bajadas
        --t-cuerpo  17 px        cuerpo de la web (la app del invitado puede bajarlo a 16 px: --t-cuerpo:1rem)
        --t-chico   14 px        secundario, chips, etiquetas, pie (nunca menos de 13 px)
      Clases listas: .t-hero .t-titulo .t-sub .t-cuerpo .t-chico
      Pesos: titulares 600 · botones 600 · menús y chips 500 · cuerpo 400 · NUNCA 800-900.
      Titulares con tracking normal (0): con el negativo la tilde de "Sofía" choca con la f.
      Interlineado titular 1.08 (sirve también con mayúscula con tilde); cuerpo 1.55.
      Contadores y precios: .tnum (tabular-nums).

   5. COMPONENTES (una clase cada uno):
        .btn          píldora coral, texto #0C1C39, 600, nowrap.  Tamaño chico: .btn.btn-chico (14 px)
        .btn-sec      borde fino en el color del texto, fondo transparente
        .chip         píldora neutra; activa con .activo, [aria-pressed="true"],
                      [aria-selected="true"] o [aria-current]: coral con texto #0C1C39
        .card         superficie del modo, radio generoso; sin borde de noche, borde --linea de día
        .tnum         números tabulares
        Foco visible: anillo coral de 2 px en .btn .btn-sec .chip .brand y en los links de .card.
      OJO, COLISIONES: estas páginas YA tienen su propia .btn/.card/.chip en su <style>, y las
        propiedades que NO definen se heredan de acá (padding, line-height, borde…):
          .btn  → index.html (.phone .btn), onboarding.html, partners.html (.wl-screen .btn)
          .card → onboarding.html (OJO: hereda el padding), cartel.html, css/blog.css
          .chip → admin.html, crear.html, site.css (chips de tipos de evento)
        Al pasar cada página: o borrás su regla y usás la de acá, o la completás.

   6. LOGO: <img src="assets/marca/logo-horizontal-oscuro-sin-fondo.svg" alt="Brinddi">
        Sobre noche (tinta, superficie, fotos oscuras): los "-oscuro" (todo coral, puntos blancos).
        Sobre día (porcelana, blanco): los "-claro" (todo tinta, puntos coral).
        Horizontal (nav, pie): logo-horizontal-*. Apilado (pantallas centradas, muro, cartel):
        logo-apilado-*. Solo el personaje: personaje-coral.svg (noche) / personaje-tinta.svg (día).
        Los "-sin-fondo" de brinddi/assets/marca tienen el viewBox RECORTADO al dibujo: el alto
        del <img> es el alto real del logo (horizontal 5.4:1, apilado 1.59:1).
        Nunca escribir "Brinddi" con una tipografía en lugar del logo.
        Dentro de .brand el logo mide 28 px de alto en escritorio y 24 px en celular (--logo-alto).

   7. PERSONAJE, ESPERAS E INTERRUPTOR: viven en js/personaje.js (<b-personaje>, <b-espera>,
      label.b-switch con el personaje como perilla). El personaje se anima SIEMPRE como una
      sola pieza. Lee de acá: --personaje (color auto), --linea (riel apagado), --texto-2
      (perilla apagada), --acento (riel prendido), --icono-tinta (perilla prendida), --texto (foco).

   8. CONTRASTES MEDIDOS (WCAG, tokens.json):
        noche  texto/fondo 13.31 · texto-2/fondo 7.13 · texto-2/superficie 5.77
               coral/fondo 4.45 (solo grande) · damasco/fondo 8.47 · linea-control/fondo 4.24, /superficie 3.43
        día    texto/fondo 14.00 · texto-2/fondo 5.75 · texto-2/tarjeta 6.18 · coral/fondo 3.15 (solo grande)
               linea-control/fondo 3.54, /superficie 3.22
        botón  #0C1C39 sobre coral 5.00 · hover (coral + 10 % blanco) 5.56 · blanco sobre coral 3.38 (PROHIBIDO)
        interruptor  perilla apagada/riel 4.38 noche, 4.41 día · perilla tinta/riel coral 4.45
   ============================================================ */

/* ---------- Paleta fija (no cambia con el modo) ---------- */
:root{
  --tinta:#132647;
  --tinta-profunda:#0C1C39;
  --coral:#F4553A;
  --damasco:#FFB088;
  --porcelana:#FBF6F0;
  --blanco-tibio:#F7F0E8;
  --ojo:#FFFFFF;

  /* tipografía */
  --fuente:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-hero:clamp(2.5rem,1.6rem + 4.2vw,4.5rem);
  --t-titulo:clamp(1.75rem,1.3rem + 2vw,2.75rem);
  --t-sub:clamp(1.125rem,1rem + .5vw,1.25rem);
  --t-cuerpo:1.0625rem;
  --t-chico:.875rem;
  --peso-titulo:600;
  --peso-boton:600;
  --peso-menu:500;
  --peso-cuerpo:400;
  --interlineado-titulo:1.08;
  --interlineado-cuerpo:1.55;
  --tracking-chico:.012em;

  /* forma y movimiento */
  --radio:20px;
  --radio-chico:12px;
  --pildora:999px;
  --sombra-flota:0 18px 44px -20px rgba(12,28,57,.6);
  --curva:cubic-bezier(.2,.7,.2,1);
  --logo-alto:28px;
}
@media (max-width:759px){
  :root{--logo-alto:24px}
}

/* ---------- Semánticos: NOCHE (por defecto) ---------- */
:root,
.modo-noche{
  --fondo:#132647;
  --superficie:#1E355E;
  --tarjeta:#1E355E;
  --texto:#F7F0E8;
  --texto-2:#A9B3C7;
  --linea:#2E4775;
  --linea-control:#7C88A5;
  --borde-tarjeta:transparent;
  --personaje:#F4553A;
  --marca:#F4553A;
  --acento:#F4553A;
  --sobre-acento:#0C1C39;
  --foco:#F4553A;
  --campo:#1E355E;
  --campo-texto:#F7F0E8;
  --qr-fondo:#FFFFFF;
  --qr-tinta:#0C1C39;
  --icono-fondo:#F4553A;
  --icono-tinta:#132647;
}
.modo-noche{color-scheme:dark}

/* ---------- Semánticos: DÍA ---------- */
.modo-dia{
  --fondo:#FBF6F0;
  --superficie:#F3EBE2;
  --tarjeta:#FFFFFF;
  --texto:#132647;
  --texto-2:#586178;
  --linea:#E3D8CC;
  --linea-control:#79839A;
  --borde-tarjeta:#E3D8CC;
  --personaje:#132647;
  --marca:#132647;
  --acento:#F4553A;
  --sobre-acento:#0C1C39;
  --foco:#F4553A;
  --campo:#FFFFFF;
  --campo-texto:#132647;
  --qr-fondo:#FFFFFF;
  --qr-tinta:#0C1C39;
  --icono-fondo:#F4553A;
  --icono-tinta:#132647;
  color-scheme:light;
}

/* ---------- AUTO: sigue el modo del celular (app del invitado) ---------- */
.modo-auto{color-scheme:dark}
@media (prefers-color-scheme:light){
  .modo-auto{
    --fondo:#FBF6F0;
    --superficie:#F3EBE2;
    --tarjeta:#FFFFFF;
    --texto:#132647;
    --texto-2:#586178;
    --linea:#E3D8CC;
    --linea-control:#79839A;
    --borde-tarjeta:#E3D8CC;
    --personaje:#132647;
    --marca:#132647;
    --acento:#F4553A;
    --sobre-acento:#0C1C39;
    --foco:#F4553A;
    --campo:#FFFFFF;
    --campo-texto:#132647;
    --qr-fondo:#FFFFFF;
    --qr-tinta:#0C1C39;
    --icono-fondo:#F4553A;
    --icono-tinta:#132647;
    color-scheme:light;
  }
}
/* Un .modo-noche adentro de .modo-dia o .modo-auto queda de noche: declara sus propias
   variables y eso le gana a lo heredado. No poner .modo-noche y .modo-auto en el MISMO elemento. */

/* SIN alias en inglés (--line, --muted, --ink, --accent, --brand…) a propósito:
   marca.css también carga en subir.html y evento.html, que usan var(--line)/var(--muted)
   SIN definirlas (mundo del cliente), e index.html/onboarding.html/css/blog.css las
   definen con valores propios. js/personaje.js lee los nombres en español de acá. */

/* ---------- Escala tipográfica (clases opcionales) ---------- */
.t-hero,.t-titulo,.t-sub{
  font-family:var(--fuente);font-weight:var(--peso-titulo);letter-spacing:0;line-height:var(--interlineado-titulo);
}
.t-hero{font-size:var(--t-hero)}
.t-titulo{font-size:var(--t-titulo)}
.t-sub{font-size:var(--t-sub);line-height:1.3}
.t-cuerpo{font-size:var(--t-cuerpo);line-height:var(--interlineado-cuerpo);font-weight:var(--peso-cuerpo)}
.t-chico{font-size:var(--t-chico);letter-spacing:var(--tracking-chico);line-height:1.45}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Botón principal ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--fuente);font-weight:var(--peso-boton);font-size:var(--t-cuerpo);line-height:1.2;letter-spacing:0;
  white-space:nowrap;text-decoration:none;
  padding:.8em 1.6em;border:0;border-radius:var(--pildora);
  background:var(--acento);color:var(--sobre-acento);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--curva),background-color .16s ease;
}
@media (hover:hover){
  .btn:hover{background:color-mix(in srgb,var(--acento) 90%,#FFFFFF);transform:translateY(-1px)}
}
.btn:active{transform:translateY(1px)}
.btn.btn-chico{font-size:var(--t-chico);letter-spacing:var(--tracking-chico);padding:.7em 1.2em}

/* ---------- Botón secundario ---------- */
.btn-sec{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--fuente);font-weight:var(--peso-boton);font-size:var(--t-cuerpo);line-height:1.2;letter-spacing:0;
  white-space:nowrap;text-decoration:none;
  padding:.8em 1.6em;border:1px solid var(--texto);border-radius:var(--pildora);
  background:transparent;color:var(--texto);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease;
}
@media (hover:hover){
  .btn-sec:hover{background:color-mix(in srgb,var(--texto) 8%,transparent)}
}
.btn-sec.btn-chico{font-size:var(--t-chico);letter-spacing:var(--tracking-chico);padding:.7em 1.2em}
/* deshabilitado: neutro (coral con transparencia da salmón, prohibido). texto-2 sobre linea ≈ 4.4:1 */
.btn:disabled,.btn[aria-disabled="true"]{background:var(--linea);color:var(--texto-2);cursor:not-allowed;transform:none}
.btn-sec:disabled,.btn-sec[aria-disabled="true"]{border-color:var(--linea);color:var(--texto-2);background:transparent;cursor:not-allowed}

/* ---------- Chip (momentos del evento, filtros) ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--fuente);font-weight:var(--peso-menu);font-size:var(--t-chico);line-height:1.2;
  letter-spacing:var(--tracking-chico);white-space:nowrap;
  padding:.65em 1.1em;border-radius:var(--pildora);
  background:var(--superficie);color:var(--texto);border:1px solid var(--linea);
}
button.chip,a.chip,label.chip{cursor:pointer}
.chip.activo,.chip[aria-pressed="true"],.chip[aria-selected="true"],.chip[aria-current]{
  background:var(--acento);color:var(--sobre-acento);border-color:var(--acento);
}

/* ---------- Tarjeta ---------- */
.card{
  background:var(--tarjeta);color:var(--texto);
  border:1px solid var(--borde-tarjeta);border-radius:var(--radio);
  padding:clamp(20px,3vw,28px);
}

/* ---------- Logo dentro de .brand ---------- */
.brand > img{display:block;height:var(--logo-alto);width:auto;max-width:none}

/* ---------- Foco visible ---------- */
.btn:focus-visible,.btn-sec:focus-visible,.chip:focus-visible,.brand:focus-visible,.card a:focus-visible{
  outline:2px solid var(--foco);outline-offset:3px;
}

/* ---------- Autocompletado ----------
   Chrome pinta su propio fondo (celeste o gris) adentro del campo cuando completa un correo: queda
   una caja que no respeta el redondeo ni el color del campo, oscuro o claro. La transición eterna
   deja el fondo y la letra que el campo ya tenía. Un campo con su propio arreglo (blog.css) gana. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{transition:background-color 600000s 0s,color 600000s 0s}

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn-sec,.chip,.card{transition:none}
  .btn:hover,.btn:active{transform:none}
}