/* =====================================================================
   TŌTEM · UI Kit v1
   Una sola fuente de verdad para tokens y componentes.
   Estilo: escenario negro, bloques de color planos, tipografía de gran
   formato y UN acento rojo. Todo recto: esquinas de 2 px, filetes finos,
   botones con celda de flecha separada por una línea.
   Lo usan index.html, tech.html y kit.html (la guía visual).
   ===================================================================== */

@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-ext-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  /* color: un escenario, un acento */
  --u-black:#000;
  --u-ink:#efedea;          /* hueso: texto y superficies claras */
  --u-grey:#a8a39a;         /* texto secundario sobre negro */
  --u-line:#2a2927;         /* filetes */
  --u-line-2:#77736b;       /* bordes de controles: 3:1 mínimo */
  --u-red:#d21f2b;          /* el acento: acción principal y Tech */
  --u-red-h:#e63a46;
  --u-mind:#f3f1ed;         /* Mind: blanco */
  --u-ice:#c7d6f2;          /* Creative: hielo */
  --u-err:#ff8a91;

  /* tipografía */
  --u-disp:"Montserrat","Onest",system-ui,sans-serif;   /* títulos de bloque */
  --u-body:"Onest",system-ui,sans-serif;               /* texto y titulares */

  /* forma: todo recto, esquinas de 2 px */
  --u-r-pill:2px;
  --u-r-field:2px;
  --u-r-card:2px;

  /* movimiento: curvas de salida fuertes */
  --u-ease:cubic-bezier(.38,.1,0,.99);        /* entradas grandes y de página */
  --u-ease-out:cubic-bezier(.16,1,.3,1);      /* respuesta de controles */
  --u-press:160ms;                            /* pulsar: inmediato */
  --u-hover:450ms;                            /* pasar el cursor */
  --u-wipe:650ms;                             /* relleno de botón */
}

/* ---------- superficie del navegador ---------- */
::selection{background:var(--u-red);color:#fff}
html{scrollbar-color:#3a3835 #000;scrollbar-width:thin}
:focus-visible{outline:2px solid var(--ring,var(--u-ink));outline-offset:4px}

/* ---------- botón ---------- */
.u-btn,.btn{
  --bg:var(--u-ink);--fg:#000;--bd:var(--u-ink);--w:#000;--wt:var(--u-ink);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-height:3.25rem;padding:0 1.4rem;
  border:1px solid var(--bd);border-radius:var(--u-r-pill);
  background:var(--bg);color:var(--fg);
  font:500 .8125rem/1 var(--u-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color var(--u-hover) var(--u-ease-out),transform var(--u-press) var(--u-ease-out);
}
.u-btn::before,.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--w);
  transform:translateY(101%);transition:transform var(--u-wipe) var(--u-ease-out);
}
.u-btn:has(>.arr),.btn:has(>.arr){padding:0 0 0 1.4rem}
.u-btn>span:first-child,.btn>span:first-child{display:inline-flex;align-items:center}
.u-btn>.arr,.btn>.arr{margin-left:1.4rem}
.u-btn>.arr,.btn>.arr{align-self:stretch;display:inline-grid;place-items:center;width:3.25rem;flex:none;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden}
.u-btn .ic,.btn .ic{flex:none;transition:transform var(--u-wipe) var(--u-ease-out)}
@media (hover:hover) and (pointer:fine){
  .u-btn:hover,.btn:hover{color:var(--wt)}
  .u-btn:hover::before,.btn:hover::before{transform:none}
  .u-btn:hover .ic,.btn:hover .ic{transform:translateX(.2rem)}
}
.u-btn:active,.btn:active{transform:scale(.97)}
.u-btn[disabled],.u-btn[aria-disabled="true"],.btn[disabled]{opacity:.4;pointer-events:none}
/* estado forzado, solo para la guía visual */
.u-btn.is-hover{color:var(--wt)}.u-btn.is-hover::before{transform:none}

/* variantes: cada una se rellena con su inverso */
.u-light,.btn-p{--bg:var(--u-ink);--bd:var(--u-ink);--fg:#000;--w:#000;--wt:var(--u-ink)}
.u-red,.btn-r{--bg:var(--u-red);--bd:var(--u-red);--fg:#fff;--w:var(--u-ink);--wt:#000}
.u-ink,.btn-red{--bg:#000;--bd:#000;--fg:var(--u-ink);--w:var(--u-ink);--wt:#000}
.u-line{--bg:transparent;--bd:rgba(239,237,234,.5);--fg:var(--u-ink);--w:var(--u-ink);--wt:#000}
.u-ghost,.btn-g{--bg:rgba(255,255,255,.1);--bd:transparent;--fg:var(--u-ink);--w:var(--u-ink);--wt:#000}
.u-onlight.u-line{--bd:#000;--fg:#000;--w:#000;--wt:var(--u-ink)}
.btn-red{--bd:#0a0a0a;--bg:#0a0a0a;--fg:#fff;--w:var(--u-red);--wt:#fff}   /* Tech: botón oscuro sobre secciones claras */

/* tamaños: nunca por debajo de 44 px */
.u-sm{min-height:2.75rem;padding:0 1.1rem;font-size:.8125rem}.u-sm:has(>.arr){padding:0 0 0 1.1rem}.u-sm>.arr{width:2.75rem;margin-left:1.1rem}
.u-lg{min-height:3.5rem;padding:0 1.7rem;font-size:.875rem}.u-lg:has(>.arr){padding:0 0 0 1.7rem}.u-lg>.arr{width:3.5rem;margin-left:1.7rem}

/* ---------- etiqueta de estado ---------- */
.u-pill,.pill{display:inline-flex;align-items:center;gap:.45rem;height:1.75rem;padding:0 .75rem;border-radius:var(--u-r-pill);border:1px solid currentColor;font:500 .8125rem/1 var(--u-body);white-space:nowrap}
.u-pill::before,.pill::before{content:"";width:.38rem;height:.38rem;border-radius:0;background:currentColor}
.u-pill.is-solid{background:#fff;color:#000;border-color:#fff}

/* ---------- enlace de texto ---------- */
.u-link{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;text-decoration-color:transparent;transition:text-decoration-color var(--u-wipe) var(--u-ease-out)}
@media (hover:hover) and (pointer:fine){.u-link:hover{text-decoration-color:currentColor}}
.u-link:focus-visible{text-decoration-color:currentColor}

/* ---------- campos ---------- */
.u-field{display:grid;gap:.5rem}
.u-label{font:500 .82rem/1.2 var(--u-body);letter-spacing:-.01em;color:var(--u-grey)}
.u-input,.u-select,.u-textarea{
  width:100%;min-height:3.25rem;padding:.85rem 1.1rem;
  border:1px solid var(--u-line-2);border-radius:var(--u-r-field);
  background:#0d0d0d;color:var(--u-ink);
  font:500 1rem/1.3 var(--u-body);letter-spacing:-.01em;       /* 16 px: iOS no hace zoom */
  transition:border-color .3s var(--u-ease-out),box-shadow .3s var(--u-ease-out);
  -webkit-appearance:none;appearance:none;
}
.u-textarea{min-height:7.5rem;resize:vertical}
.u-input::placeholder,.u-textarea::placeholder{color:#8d887f;opacity:1}
@media (hover:hover) and (pointer:fine){.u-input:hover,.u-select:hover,.u-textarea:hover{border-color:#6a665f}}
.u-input:focus-visible,.u-select:focus-visible,.u-textarea:focus-visible{outline:2px solid var(--u-ink);outline-offset:2px;border-color:var(--u-ink)}
.u-input[aria-invalid="true"],.u-textarea[aria-invalid="true"]{border-color:var(--u-err)}
.u-input[aria-invalid="true"]:focus-visible{outline-color:var(--u-err)}
.u-hint{font:400 .82rem/1.35 var(--u-body);color:var(--u-grey)}
.u-hint.is-err{color:var(--u-err)}
.u-input:disabled{opacity:.45}

/* opciones (placa A / B, Google / Instagram…): chips que se rellenan al elegir */
.u-choice{position:relative;display:inline-flex}
.u-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.u-choice span{display:inline-flex;align-items:center;min-height:3rem;padding:0 1.25rem;border:1px solid var(--u-line-2);border-radius:var(--u-r-pill);font:500 .92rem/1 var(--u-body);letter-spacing:-.005em;transition:background-color var(--u-hover) var(--u-ease-out),color var(--u-hover) var(--u-ease-out),border-color var(--u-hover) var(--u-ease-out),transform var(--u-press) var(--u-ease-out)}
@media (hover:hover) and (pointer:fine){.u-choice:hover span{border-color:var(--u-ink)}}
.u-choice input:checked + span{background:var(--u-ink);color:#000;border-color:var(--u-ink)}
.u-choice input:focus-visible + span{outline:2px solid var(--u-ink);outline-offset:4px}
.u-choice:active span{transform:scale(.97)}

/* ---------- tarjeta ---------- */
.u-card{background:#0f0f0f;border:1px solid var(--u-line);border-radius:var(--u-r-card);padding:1.4rem}

/* ---------- puente con Tech (mismos botones con las clases de Tech) ---------- */
.cartbtn{border-radius:2px}
.fcart{border-radius:2px}

@media (prefers-reduced-motion:reduce){
  .u-btn::before,.btn::before{transition-duration:.01ms}
  .u-btn .ic,.btn .ic{transition:none}
  .u-btn:hover .ic,.btn:hover .ic{transform:none}
}