/* =========================================================================
   tuNFC · sistema «TOQUE» (11-nov-2026) — MARCO: fichas, cabecera, pie y avisos
   -------------------------------------------------------------------------
   Esta hoja se carga en TODAS las páginas, las nuevas (t3.css) y las de antes
   (tunfc.bundle.min.css). Por eso todo selector lleva el prefijo .t3- y no
   toca etiquetas sueltas: no puede romper una página vieja.

   Idea de diseño: la tienda es un mostrador y lo que hay encima son tarjetas.
   El color de acento NO es fijo: es el color de la tarjeta que el visitante
   está mirando (--t3-tarjeta). El verde es de la marca; el resto lo pone él.
   ========================================================================= */

:root {
  /* Color */
  --t3-papel:    #F3F5F1;   /* fondo: PVC mate, frío, ni blanco ni crema      */
  --t3-blanco:   #FFFFFF;
  --t3-tinta:    #0F1A15;   /* texto: 16.9:1 sobre papel                      */
  --t3-tinta-2:  #43524A;   /* texto secundario: 7.6:1                        */
  --t3-tinta-3:  #65736B;   /* texto tenue: 4.7:1 sobre papel                 */
  --t3-linea:    #D9E0D8;
  --t3-linea-2:  #C3CDC4;   /* borde de campos: 3:1 contra blanco con sombra  */
  --t3-verde:    #1DC174;   /* el verde del logo: identidad, nunca texto      */
  --t3-verde-tx: #0B7A4D;   /* verde para texto y botones: 5.4:1 con blanco   */
  --t3-verde-os: #085C3A;
  --t3-menta:    #DDF6E9;
  --t3-noche:    #0B1410;   /* secciones oscuras y pie                        */
  --t3-noche-2:  #15221C;
  --t3-sol:      #F5B301;   /* estrellas, igual que en la tarjeta impresa     */
  --t3-rojo:     #BF2A20;
  --t3-tarjeta:  #0E8A57;   /* color de la tarjeta elegida (lo mueve el JS)   */
  --t3-tarjeta-tx: #FFFFFF;

  /* Tipografía */
  --t3-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --t3-texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma: la esquina de una tarjeta real es el 3,7 % de su ancho */
  --t3-r-1: 8px;
  --t3-r-2: 12px;
  --t3-r-3: 20px;
  --t3-r-4: 28px;

  /* Sombras en capas, con el tono de la tinta (no gris neutro) */
  --t3-sombra-1: 0 1px 2px rgba(15,26,21,.06), 0 1px 1px rgba(15,26,21,.04);
  --t3-sombra-2: 0 2px 4px rgba(15,26,21,.05), 0 8px 20px -6px rgba(15,26,21,.12);
  --t3-sombra-3: 0 4px 8px rgba(15,26,21,.06), 0 24px 48px -16px rgba(15,26,21,.28);

  /* Movimiento */
  --t3-sale:   cubic-bezier(0.23, 1, 0.32, 1);     /* entra o responde          */
  --t3-mueve:  cubic-bezier(0.77, 0, 0.175, 1);    /* se desplaza en pantalla   */
  --t3-hoja:   cubic-bezier(0.32, 0.72, 0, 1);     /* hojas y cajones           */

  --t3-ancho: 1180px;
  --t3-margen: clamp(18px, 4.5vw, 40px);
  --t3-cab-alto: 64px;
}

/* ---------- utilidades mínimas ---------- */
.t3-solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.t3-ico { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- franja de aviso ---------- */
.t3-aviso {
  background: var(--t3-noche); color: #E8F1EB;
  font: 500 .875rem/1.35 var(--t3-texto);
  text-align: center; padding: 9px var(--t3-margen);
}
.t3-aviso a { color: #7FE9B5; font-weight: 600; text-underline-offset: 3px; margin-left: .35em; white-space: nowrap; }
.t3-aviso a:hover { color: #fff; }

/* ---------- cabecera ---------- */
.t3-cab {
  position: sticky; top: 0; z-index: 700;
  background: color-mix(in srgb, var(--t3-papel) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
  view-transition-name: t3-cab;
}
.t3-cab[data-baja] { border-bottom-color: var(--t3-linea); }
.t3-cab__dentro {
  max-width: var(--t3-ancho); margin: 0 auto; padding: 0 var(--t3-margen);
  height: var(--t3-cab-alto); display: flex; align-items: center; gap: 28px;
}
.t3-logo {
  display: inline-flex; align-items: center; gap: 2px;
  font: 800 1.5rem/1 var(--t3-display); letter-spacing: -.035em;
  color: var(--t3-tinta); text-decoration: none;
}
.t3-logo b { color: var(--t3-verde-tx); font-weight: 800; }
.t3-logo svg { width: 22px; height: 22px; margin-left: 5px; color: var(--t3-verde); }
.t3-logo svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.t3-cab__nav { display: flex; gap: 4px; margin-right: auto; }
.t3-cab__nav a, .t3-cab__cuenta {
  font: 500 .9375rem/1 var(--t3-texto); color: var(--t3-tinta-2); text-decoration: none;
  padding: 10px 12px; border-radius: var(--t3-r-1);
  transition: color 150ms ease, background-color 150ms ease;
}
.t3-cab__nav a[aria-current="page"] { color: var(--t3-tinta); font-weight: 600; }
.t3-cab__acc { display: flex; align-items: center; gap: 6px; }
.t3-cab__carrito, .t3-cab__menu {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--t3-r-2); color: var(--t3-tinta); background: none; border: 0; cursor: pointer;
  font-size: 1.25rem; text-decoration: none;
  transition: background-color 150ms ease, transform 160ms var(--t3-sale);
}
.t3-cab__carrito:active, .t3-cab__menu:active { transform: scale(.94); }
.t3-cab .header__cart-badge {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--t3-verde-tx); color: #fff;
  font: 700 .6875rem/1 var(--t3-texto); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--t3-papel);
}
.t3-cab .header__cart-badge[data-salta] { animation: t3-salta 420ms var(--t3-sale); }
@keyframes t3-salta { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.t3-cab__menu { display: none; }
.t3-cab__menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 220ms var(--t3-sale), opacity 150ms ease; }
.t3-cab__menu span + span { margin-top: 5px; }
.t3-cab__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.t3-cab__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.t3-cab__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .t3-cab__nav a:hover, .t3-cab__cuenta:hover { color: var(--t3-tinta); background: rgba(15,26,21,.06); }
  .t3-cab__carrito:hover, .t3-cab__menu:hover { background: rgba(15,26,21,.06); }
}
.t3-cab a:focus-visible, .t3-cab button:focus-visible, .t3-pie a:focus-visible, .t3-menu a:focus-visible, .t3-aviso a:focus-visible {
  outline: 3px solid var(--t3-verde-tx); outline-offset: 2px;
}

/* menú del celular: una hoja que baja desde la cabecera */
.t3-menu {
  position: fixed; inset: 0; z-index: 690; background: var(--t3-papel);
  padding: calc(var(--t3-cab-alto) + 52px) var(--t3-margen) calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--t3-hoja), opacity 180ms ease, visibility 0s linear 260ms;
}
.t3-menu[data-abierto] { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.t3-menu a {
  font: 700 1.75rem/1.15 var(--t3-display); letter-spacing: -.02em; color: var(--t3-tinta);
  text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--t3-linea);
}
.t3-menu a small { display: block; font: 400 .9375rem/1.35 var(--t3-texto); letter-spacing: 0; color: var(--t3-tinta-3); margin-top: 3px; }
.t3-menu__pie { margin-top: auto; padding-top: 24px; font: 400 .9375rem/1.4 var(--t3-texto); color: var(--t3-tinta-3); }
.t3-menu__pie button { font: 600 1rem/1 var(--t3-texto); color: var(--t3-verde-tx); background: none; border: 0; padding: 12px 0; cursor: pointer; }

@media (max-width: 860px) {
  .t3-cab__nav, .t3-cab__cuenta { display: none; }
  .t3-cab__dentro { gap: 12px; }
  .t3-cab__acc { margin-left: auto; }
  .t3-cab__menu { display: grid; }
  .t3-logo { font-size: 1.375rem; }
}

/* ---------- pie ---------- */
.t3-pie { background: var(--t3-noche); color: #C4D0C8; font: 400 .9375rem/1.55 var(--t3-texto); }
.t3-pie__dentro {
  max-width: var(--t3-ancho); margin: 0 auto; padding: 64px var(--t3-margen) 36px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px 32px;
}
.t3-pie .t3-logo { color: #fff; font-size: 1.75rem; }
.t3-pie .t3-logo b { color: var(--t3-verde); }
.t3-pie__lema { margin: 14px 0 20px; max-width: 30ch; color: #9FB0A6; }
.t3-pie__redes { display: flex; gap: 8px; }
.t3-pie__redes a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--t3-r-2);
  background: var(--t3-noche-2); color: #E8F1EB; font-size: 1.125rem;
  transition: background-color 150ms ease, transform 160ms var(--t3-sale);
}
.t3-pie__redes a:active { transform: scale(.94); }
.t3-pie__titulo { font: 600 .9375rem/1.2 var(--t3-texto); color: #fff; margin: 0 0 14px; letter-spacing: 0; }
.t3-pie__col a { display: block; color: #C4D0C8; text-decoration: none; padding: 5px 0; }
.t3-pie__ayuda p:not(.t3-pie__titulo) { margin: 0 0 16px; color: #9FB0A6; }
.t3-pie__ayuda button {
  font: 600 .9375rem/1 var(--t3-texto); color: var(--t3-noche); background: var(--t3-verde);
  border: 0; border-radius: var(--t3-r-2); padding: 14px 18px; cursor: pointer;
  transition: transform 160ms var(--t3-sale), background-color 150ms ease;
}
.t3-pie__ayuda button:active { transform: scale(.97); }
.t3-pie__base {
  max-width: var(--t3-ancho); margin: 0 auto; padding: 20px var(--t3-margen) calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--t3-noche-2); display: flex; flex-wrap: wrap; gap: 8px 28px;
  justify-content: space-between; font-size: .8125rem; color: #8B9C92;
}
.t3-pie__base a { color: #C4D0C8; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .t3-pie__col a:hover, .t3-pie__base a:hover { color: #fff; }
  .t3-pie__redes a:hover { background: #20332A; }
  .t3-pie__ayuda button:hover { background: #3CE194; }
}
@media (max-width: 860px) {
  .t3-pie__dentro { grid-template-columns: 1fr 1fr; padding-top: 48px; }
  .t3-pie__marca, .t3-pie__ayuda { grid-column: 1 / -1; }
}

/* ---------- aviso emergente (toast) ---------- */
.t3-avisos {
  position: fixed; z-index: 2147483001; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: calc(100vw - 28px); pointer-events: none;
}
.t3-toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  background: var(--t3-noche); color: #fff; border-radius: 14px; padding: 13px 18px 13px 14px;
  font: 500 .9375rem/1.35 var(--t3-texto); box-shadow: var(--t3-sombra-3);
  transition: transform 320ms var(--t3-sale), opacity 220ms ease;
}
.t3-toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--t3-verde); flex: none; }
.t3-toast[data-tipo="error"]::before { background: #FF7A70; }
.t3-toast[data-estado="entra"], .t3-toast[data-estado="sale"] { transform: translateY(14px) scale(.97); opacity: 0; }
.t3-toast[data-estado="sale"] { transition-duration: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .t3-menu, .t3-toast, .t3-cab__menu span { transition-duration: 1ms !important; }
  .t3-cab .header__cart-badge[data-salta] { animation: none; }
}

/* ---------- puente con las páginas de antes ----------
   Las que aún cargan el bundle heredan la tipografía nueva para que la tienda
   se lea como una sola. No se cambia ninguna de sus reglas. */
:root {
  --font-display: var(--t3-display);
  --font-body: var(--t3-texto);
}