/* ==========================================================================
   base.css — variables, reset y utilidades compartidas por todo el sitio.
   Se carga siempre en primer lugar: el resto de hojas depende de estos tokens.
   ========================================================================== */

:root{
  /* --- Paleta ------------------------------------------------------------
     Los mismos valores viven en js/tailwind-config.js, que no puede leer
     variables CSS. Si cambias un color aquí, cámbialo también allí. */
  --color-night:        #0F172A;
  --color-night-800:    #1E293B;
  --color-night-700:    #334155;
  --color-cyan:         #0284C7;
  --color-cyan-dark:    #0369A1;
  --color-cyan-light:   #38BDF8;
  --color-cyan-soft:    #E0F2FE;
  --color-cyan-border:  #BAE6FD;
  --color-wa:           #22C55E;
  --color-wa-dark:      #16A34A;
  --color-canvas:       #F8FAFC;

  /* Trama y resplandor del hero, sobre fondo oscuro. */
  --color-grid-line:    rgba(255,255,255,.055);
  --color-glow-cyan:    rgba(2,132,199,.55);
  --color-glow-fade:    rgba(2,132,199,0);

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.18);
  --shadow-lift: 0 12px 32px -12px rgba(2,132,199,.35);

  /* --- Radios ------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-full: 9999px;

  /* --- Medidas ----------------------------------------------------------- */
  --grid-size:      44px;   /* paso de la trama técnica del hero */
  --ring-inset:     -6px;   /* holgura del anillo que late alrededor del punto */
  --tap-pad:        7px;    /* relleno que agranda el área táctil de los enlaces del pie */
  --safe-min:       1rem;   /* suelo mínimo antes del área segura de iOS */
  --safe-min-fab:   1.25rem;

  /* --- Movimiento -------------------------------------------------------- */
  --dur-fast:   .12s;
  --dur-base:   .2s;
  --dur-slow:   .3s;
  --dur-panel:  .35s;
  --ease-out:   ease;
  --ease-panel: cubic-bezier(.4,0,.2,1);

  /* --- Tipografía -------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, sans-serif;
}

/* --- Reset y tipografía global ------------------------------------------ */
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }

/* --- Foco visible --------------------------------------------------------
   Un único anillo para todos los controles: el teclado nunca se pierde. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--color-cyan-light); outline-offset:2px; border-radius:var(--radius-sm);
}

/* --- Utilidades ---------------------------------------------------------- */
.no-bar::-webkit-scrollbar{ display:none; }
.no-bar{ -ms-overflow-style:none; scrollbar-width:none; }

.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* En iPhone el indicador de inicio se come la franja inferior: el botón de
   enviar pedido quedaba debajo de la barra. */
.zona-segura{ padding-bottom:max(var(--safe-min), env(safe-area-inset-bottom)); }

/* --- Respuesta táctil de los botones ------------------------------------- */
.btn-tactil{ transition:background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn-tactil:active{ transform:scale(.97); }

@media (prefers-reduced-motion: reduce){
  .btn-tactil{ transition:none; }
  .btn-tactil:active{ transform:none; }
}