/* ═══════════════════════════════════════════════════════════════
   VILLAL · BASE
   ───────────────────────────────────────────────────────────────
   El sistema de diseño. Colores, tipografía, botones, tarjetas.

   Va PRIMERO en todas las páginas, antes de cualquier otro CSS.

   Todo color y todo tamaño sale de las variables de :root.
   Si cambias --marca aquí, cambia en toda la tienda de una vez.
   Nunca escribas un color suelto tipo #C81E3C en otro archivo.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600&display=swap');


/* ───────────────────────────────────────────────────────────────
   1. VARIABLES
   ─────────────────────────────────────────────────────────────── */
:root {

  /* ── Marca ── */
  --marca:          #C81E3C;   /* cereza — precios, botones, acentos */
  --marca-oscura:   #A01530;   /* al pasar el mouse */
  --marca-clara:    #FDECEF;   /* fondos suaves */
  --marca-sombra:   rgba(200, 30, 60, .16);

  /* ── Texto ── */
  --tinta:          #1A1216;   /* títulos y texto principal */
  --tinta-media:    #57484E;   /* texto secundario */
  --tinta-suave:    #9A8B91;   /* pistas y textos de apoyo */

  /* ── Fondos ── */
  --fondo:          #FFF8F7;   /* fondo de la página */
  --fondo-tarjeta:  #FFFFFF;   /* tarjetas y cajas */
  --fondo-suave:    #FBF0EE;   /* zonas destacadas */

  /* ── Bordes ── */
  --borde:          rgba(26, 18, 22, .09);
  --borde-fuerte:   rgba(26, 18, 22, .16);

  /* ── Colores con significado ── */
  --wa:             #16C15E;   /* verde WhatsApp */
  --wa-oscuro:      #0FA84F;
  --oro:            #E8A33D;   /* "últimas unidades" — urgencia sin pelear con el rojo */
  --oro-claro:      #FDF3E2;
  --ok:            #16A34A;
  --error:          #DC2626;
  --wa-fuerte:      #0A7F3F;   /* verde del botón Comprar con letra blanca (se lee bien) */

  /* ── Vitrina flotante (vista rápida del producto) ── */
  --vitrina-centro: #FFFFFF;   /* luz del centro, detrás del producto */
  --vitrina-medio:  #F8E6E3;
  --vitrina-orilla: #EBCBC6;   /* orillas, un rosado más fuerte */
  --vitrina-sombra: rgba(60, 20, 30, .45);   /* sombra que respira debajo */

  /* ── Tipografía ── */
  --fuente-titulo:  'Bricolage Grotesque', system-ui, sans-serif;
  --fuente-texto:   'Inter', system-ui, -apple-system, sans-serif;

  /* ── Tamaños de texto ── */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    21px;
  --t-xl:    27px;
  --t-2xl:   34px;
  --t-3xl:   44px;

  /* ── Espaciado ── */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;

  /* ── Esquinas ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* ── Sombras ── */
  --sombra-sm: 0 1px 3px rgba(26, 18, 22, .05);
  --sombra-md: 0 4px 16px rgba(26, 18, 22, .07);
  --sombra-lg: 0 12px 32px rgba(26, 18, 22, .11);

  /* ── Transiciones ── */
  --rapida: .18s ease;
  --normal: .28s cubic-bezier(.19, 1, .22, 1);

  /* ── Capas ── */
  --z-header:  1000;
  --z-flotante: 1100;
  --z-modal:   1200;
}


/* ───────────────────────────────────────────────────────────────
   2. RESET
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}


/* ───────────────────────────────────────────────────────────────
   3. TIPOGRAFÍA
   ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tinta);
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

/* La marca escrita: siempre con este tratamiento */
.marca-texto {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--marca);
}

.texto-secundario { color: var(--tinta-media); }
.texto-suave      { color: var(--tinta-suave); }

/* Etiqueta pequeña sobre un título */
.eyebrow {
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--marca);
}


/* ───────────────────────────────────────────────────────────────
   4. CONTENEDOR
   ─────────────────────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--e-5);
}

.seccion { padding-block: var(--e-7); }


/* ───────────────────────────────────────────────────────────────
   5. BOTONES
   ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 13px 22px;
  font-family: var(--fuente-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--rapida), border-color var(--rapida),
              transform var(--rapida), box-shadow var(--rapida);
  white-space: nowrap;
  transform: translateY(0);
}

.btn:active { transform: translateY(3px); }

.btn svg { flex-shrink: 0; }

/* Principal — la acción más importante de la pantalla.
   Sombra sólida abajo = efecto de botón físico que se presiona. */
.btn-principal {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 4px 0 var(--marca-oscura), 0 10px 20px -6px var(--marca-sombra);
}
.btn-principal:hover {
  background: var(--marca);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--marca-oscura), 0 14px 26px -6px var(--marca-sombra);
}
.btn-principal:active {
  box-shadow: 0 1px 0 var(--marca-oscura), 0 4px 10px -4px var(--marca-sombra);
}

/* Secundario — acciones de apoyo */
.btn-secundario {
  background: var(--fondo-tarjeta);
  color: var(--tinta);
  border-color: var(--borde-fuerte);
  box-shadow: 0 3px 0 var(--borde-fuerte);
}
.btn-secundario:hover {
  border-color: var(--marca);
  color: var(--marca);
  transform: translateY(-1px);
}
.btn-secundario:active { box-shadow: 0 1px 0 var(--borde-fuerte); }

/* WhatsApp — verde porque la gente ya lo reconoce */
.btn-wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 4px 0 var(--wa-oscuro), 0 10px 20px -6px rgba(22, 193, 94, .28);
}
.btn-wa:hover {
  background: var(--wa);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--wa-oscuro), 0 14px 26px -6px rgba(22, 193, 94, .3);
}
.btn-wa:active {
  box-shadow: 0 1px 0 var(--wa-oscuro), 0 4px 10px -4px rgba(22, 193, 94, .28);
}

/* Fantasma — para acciones menores. Se queda plano a propósito:
   no todo necesita volumen, esto es lo "tranquilo" del diseño. */
.btn-fantasma {
  background: transparent;
  color: var(--tinta-media);
}
.btn-fantasma:hover {
  background: var(--fondo-suave);
  color: var(--tinta);
}

.btn-bloque { width: 100%; }

.btn-sm { padding: 9px 15px; font-size: var(--t-xs); }
.btn-lg { padding: 16px 30px; font-size: var(--t-base); }

.btn:disabled,
.btn[disabled] {
  background: #E8E2E3;
  color: var(--tinta-suave);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


/* ───────────────────────────────────────────────────────────────
   6. TARJETAS
   ─────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tarjeta-elevada {
  box-shadow: var(--sombra-md);
  border-color: transparent;
}

/* Tarjeta que reacciona al mouse — para productos.
   Se levanta y se inclina levemente en 3D, como si la tomaras con la mano. */
.tarjeta-hover {
  transition: transform var(--normal), box-shadow var(--normal);
  transform: translateY(0) rotateX(0) rotateY(0);
}
.tarjeta-hover:hover {
  transform: translateY(-8px) rotateX(3deg) rotateY(-4deg) scale(1.015);
  box-shadow: 0 26px 44px -16px rgba(26,18,22,.30), 0 10px 18px -8px rgba(26,18,22,.14);
}


/* ───────────────────────────────────────────────────────────────
   7. ETIQUETAS Y AVISOS
   ─────────────────────────────────────────────────────────────── */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--r-full);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(26,18,22,.14), 0 4px 10px -3px rgba(26,18,22,.16);
}

/* Urgencia: dorado, para que no compita con el rojo de los precios */
.etiqueta-ultimas {
  background: var(--oro);
  color: #3D2A08;
}

.etiqueta-disponible {
  background: var(--marca-clara);
  color: var(--marca-oscura);
}

.etiqueta-agotado {
  background: var(--tinta);
  color: var(--oro);
}

.etiqueta-descuento {
  background: var(--marca);
  color: #fff;
}

.etiqueta-nuevo {
  background: var(--wa);
  color: #fff;
}


/* ───────────────────────────────────────────────────────────────
   8. PRECIOS
   ─────────────────────────────────────────────────────────────── */
.precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--marca);
  letter-spacing: -.01em;
}

.precio-antes {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: line-through;
  margin-left: 7px;
}

.precio-grande { font-size: var(--t-2xl); }


/* ───────────────────────────────────────────────────────────────
   9. FORMULARIOS
   ─────────────────────────────────────────────────────────────── */
.campo { margin-bottom: var(--e-4); }

.campo label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 6px;
}

.campo label small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-suave);
  margin-left: 5px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 15px;
  font-size: var(--t-base);
  background: var(--fondo-tarjeta);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--rapida), box-shadow var(--rapida);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--tinta-suave);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-sombra);
}

.campo-ayuda {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-top: 5px;
}

.campo-error {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--error);
  margin-top: 6px;
}

.campo input.invalido,
.campo select.invalido {
  border-color: var(--error);
}


/* ───────────────────────────────────────────────────────────────
   10. AVISOS
   ─────────────────────────────────────────────────────────────── */
.aviso {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.5;
  border: 1px solid transparent;
}

.aviso-info    { background: var(--marca-clara); color: var(--marca-oscura); border-color: var(--marca-sombra); }
.aviso-atencion{ background: var(--oro-claro);   color: #7A4E06;             border-color: rgba(232,163,61,.32); }
.aviso-ok      { background: #E7F7ED;            color: #106634;             border-color: rgba(22,166,74,.24); }


/* ───────────────────────────────────────────────────────────────
   11. ESQUELETO DE CARGA
   Se muestra mientras llegan los productos de Firebase.
   Evita que la página "salte" cuando aparecen.
   ─────────────────────────────────────────────────────────────── */
.esqueleto {
  background: linear-gradient(90deg, #F3EBEA 25%, #FBF4F3 50%, #F3EBEA 75%);
  background-size: 200% 100%;
  animation: esqueleto-brillo 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

@keyframes esqueleto-brillo {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ───────────────────────────────────────────────────────────────
   12. ANIMACIÓN DE ENTRADA
   Se le agrega la clase .visible con JavaScript al hacer scroll.
   ─────────────────────────────────────────────────────────────── */
.aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.19, 1, .22, 1);
}

.aparece.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ───────────────────────────────────────────────────────────────
   13. UTILIDADES
   ─────────────────────────────────────────────────────────────── */
.centrado    { text-align: center; }
.oculto      { display: none !important; }

.flex        { display: flex; }
.flex-centro { display: flex; align-items: center; }
.flex-entre  { display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }

.gap-1 { gap: var(--e-1); }
.gap-2 { gap: var(--e-2); }
.gap-3 { gap: var(--e-3); }
.gap-4 { gap: var(--e-4); }

.mt-2 { margin-top: var(--e-2); }
.mt-4 { margin-top: var(--e-4); }
.mt-6 { margin-top: var(--e-6); }
.mb-2 { margin-bottom: var(--e-2); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-6 { margin-bottom: var(--e-6); }

/* Visible solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ───────────────────────────────────────────────────────────────
   14. ACCESIBILIDAD
   ─────────────────────────────────────────────────────────────── */

/* Marco visible al navegar con teclado */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respeta a quien pidió menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Barra de scroll discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo-suave); }
::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--tinta-suave); }

/* Color al seleccionar texto */
::selection {
  background: var(--marca);
  color: #fff;
}


/* ───────────────────────────────────────────────────────────────
   15. CELULAR
   El 90% de tus clientes compran desde aquí.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --t-3xl: 32px;
    --t-2xl: 26px;
    --t-xl:  22px;
    --e-7:   36px;
    --e-8:   44px;
  }

  .contenedor { padding-inline: var(--e-4); }
  .seccion    { padding-block: var(--e-6); }

  /* Botones más altos: el dedo necesita al menos 44px */
  .btn { padding: 14px 20px; min-height: 46px; }

  /* Sin efecto de levantar en táctil, no aporta */
  .tarjeta-hover:hover { transform: none; }
}

@media (max-width: 400px) {
  :root { --t-3xl: 28px; --t-2xl: 23px; }
  .contenedor { padding-inline: var(--e-3); }
}