/* ============================================================
   MIKY'S PASTA — HOJA DE ESTILOS PRINCIPAL
   
   Este archivo controla TODO el aspecto visual de la página.
   Está organizado por secciones con comentarios claros.
   
   ÍNDICE:
   1. COLORES (variables de la paleta)
   2. TIPOGRAFÍAS (fuentes del sitio)
   3. ESTILOS BASE (reset y body)
   4. ANIMACIONES (efectos de entrada y movimiento)
   5. ANIMACIÓN AL HACER SCROLL (tarjetas que aparecen al bajar)
   6. TEXTURA DE FONDO (patrón de ondas de pasta)
   7. HEADER (logo y nombre de marca)
   8. PROMO BANNER (banner rojo de promociones)
   9. SEPARADOR VISUAL (línea entre secciones)
   10. TARJETA DE SEDE (diseño de cada ubicación)
   11. BOTONES (WhatsApp y Cómo llegar)
   12. FOOTER (pie de página)
   ============================================================ */


/* ============================================================
   1. COLORES
   ─────────────────────────────────────────
   Cambia estos valores para modificar TODA la paleta del sitio.
   Usa formato hexadecimal (#xxxxxx).
   Para encontrar colores: https://htmlcolorcodes.com/es/
   ============================================================ */
:root {
  --red: #e30613;            /* Rojo principal de Miky's */
  --red-dark: #b8050f;       /* Rojo oscuro (para degradados) */
  --beige: #f5e1a5;          /* Beige principal del fondo */
  --beige-light: #faf3e0;    /* Beige claro */
  --beige-dark: #e8d494;     /* Beige oscuro (bordes y líneas) */
  --dark: #1a1a1a;           /* Negro para textos principales */
  --gray: #666666;           /* Gris para textos secundarios */
  --gray-light: #999999;     /* Gris claro para textos menores */
  --white: #ffffff;          /* Blanco */
  --whatsapp: #25D366;       /* Verde de WhatsApp — NO CAMBIAR */

  /* Color translúcido para las tarjetas de sede */
  --card-bg: rgba(245, 225, 165, 0.35);         /* ← Beige translúcido (35% opaco) */
  --card-border: rgba(245, 225, 165, 0.6);       /* ← Borde beige más visible */
  --card-body-bg: rgba(255, 255, 255, 0.25);     /* ← Cuerpo ligeramente más claro */
}


/* ============================================================
   2. TIPOGRAFÍAS
   ─────────────────────────────────────────
   --font-titles: para títulos grandes (League Gothic)
   --font-body: para todo el texto general (Montserrat)
   
   Si quieres cambiar una fuente:
   1. Ve a https://fonts.google.com
   2. Elige tu fuente nueva
   3. Actualiza el <link> en index.html
   4. Cambia el nombre aquí abajo
   ============================================================ */
:root {
  --font-titles: 'League Gothic', sans-serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;
}


/* ============================================================
   3. ESTILOS BASE
   ─────────────────────────────────────────
   Reset general y configuración del body.
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--beige);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Contenedor principal — limita el ancho en pantallas grandes */
.container {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 18px;
  position: relative;
  z-index: 1;
}


/* ============================================================
   4. ANIMACIONES
   ─────────────────────────────────────────
   Efectos de entrada cuando la página carga.
   
   slideUp: el elemento sube desde abajo con fade
   fadeIn: el elemento aparece gradualmente
   float: el logo flota suavemente arriba y abajo
   
   Para QUITAR una animación de un elemento:
     borra la línea "animation: ..." de su clase
   
   Para hacer más LENTA una animación:
     cambia el tiempo (ej: 0.6s → 1.2s)
   
   Para cambiar el RETRASO (delay):
     cambia el tercer valor (ej: 300ms → 500ms)
   ============================================================ */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}


/* ============================================================
   5. ANIMACIÓN AL HACER SCROLL (para móvil)
   ─────────────────────────────────────────
   Las tarjetas (promo + sedes) aparecen suavemente cuando
   el usuario baja en el teléfono.
   
   Estado inicial: invisibles, ligeramente abajo y pequeñas.
   Al entrar en pantalla: suben, crecen y aparecen.
   
   Para hacerlo MÁS dramático: sube translateY (30px → 50px)
   Para hacerlo MÁS sutil:    baja translateY (30px → 15px)
   Para cambiar la VELOCIDAD:  cambia transition (0.6s → 1s)
   Para QUITAR esta animación:
     1. Borra esta sección completa
     2. Borra scroll.js
     3. Borra la línea <script> en index.html
   ============================================================ */

/* Estado inicial: las tarjetas y el banner empiezan invisibles */
.sede-card,
.promo-banner {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: 
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;    /* Optimiza rendimiento en móvil */
}

/* Cuando el elemento se hace visible (scroll.js agrega esta clase) */
.sede-card.visible,
.promo-banner.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Retraso escalonado: cada elemento entra un poco después del anterior */
.promo-banner {
  transition-delay: 0ms;             /* La promo entra primero */
}

.sede-card:nth-child(1) {
  transition-delay: 120ms;           /* Primera sede espera 120ms */
}

.sede-card:nth-child(2) {
  transition-delay: 240ms;           /* Segunda sede espera 240ms */
}


/* ============================================================
   6. TEXTURA DE FONDO (Líneas onduladas de pasta)
   ─────────────────────────────────────────
   Patrón de ondas que aparece detrás de todo el contenido.
   
   Para hacerlo MÁS visible: sube el opacity (0.06 → 0.12)
   Para hacerlo MÁS sutil:   baja el opacity (0.06 → 0.03)
   Para QUITARLO:             pon opacity: 0; o borra la clase
   Para cambiar el TAMAÑO:    cambia background-size (120px → 80px más denso, 200px más espaciado)
   Para cambiar el COLOR:     cambia stroke='%23e30613' por otro hex (sin #, con %23)
   ============================================================ */
.pasta-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;          /* No bloquea clics */
  z-index: 0;                    /* Queda detrás de todo */
  opacity: 0.06;                 /* ← AJUSTA AQUÍ la visibilidad */
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23e30613' stroke-width='1.5'%3E%3Cpath d='M0 20 Q30 10 60 20 Q90 30 120 20'/%3E%3Cpath d='M0 40 Q30 30 60 40 Q90 50 120 40'/%3E%3Cpath d='M0 60 Q30 50 60 60 Q90 70 120 60'/%3E%3Cpath d='M0 80 Q30 70 60 80 Q90 90 120 80'/%3E%3Cpath d='M0 100 Q30 90 60 100 Q90 110 120 100'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;  /* ← AJUSTA AQUÍ el tamaño del patrón */
}


/* ============================================================
   7. HEADER (Logo y nombre de marca)
   ─────────────────────────────────────────
   La parte superior con el logo, nombre y tagline.
   ============================================================ */
.header {
  text-align: center;
  padding-top: 40px;             /* Espacio arriba del logo */
  padding-bottom: 8px;
  animation: fadeIn 0.7s ease both;
}

/* Contenedor del logo */
.logo-wrap {
  width: 100px;                  /* ← Tamaño del logo */
  height: 100px;
  margin: 0 auto 14px;
  animation: float 4s ease-in-out infinite;  /* Efecto flotante */
}

.logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "MIKY'S" — título grande */

.brand-name {
  font-family: var(--font-titles);
  font-size: 42px;               /* ← Tamaño del nombre */
  color: var(--red);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}

/* "PASTA ARTESANAL" — subtítulo */
.brand-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: 0.6;
}

/* "Recién preparada en Bucaramanga" */
.brand-tagline {
  font-size: 13px;
  color: var(--gray);
  font-weight: 500;
  margin-top: 10px;
}


/* ============================================================
   8. PROMO BANNER (Banner rojo de promociones)
   ─────────────────────────────────────────
   Estos estilos aplican a TODAS las promos.
   No necesitas tocar nada aquí al agregar una promo nueva,
   solo editas el HTML.
   ============================================================ */

/* Contenedor principal del banner */
.promo-banner {
  display: block;
  background: var(--red);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 24px;
  margin-bottom: 12px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(227, 6, 19, 0.25);
  position: relative;
  overflow: hidden;
  /* transition ya está definido en la sección 5 (scroll) */
}

/* Efecto al presionar */
.promo-banner:active {
  transform: scale(0.98) !important;
}

/* Círculo decorativo superior derecho */
.promo-banner::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}

/* Círculo decorativo inferior */
.promo-banner::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

/* Layout interno del banner (texto + ícono WhatsApp) */
.promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  z-index: 1;
}

/* Etiqueta pequeña (ej: "🔥 Promo de la semana") */
.promo-label {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Nombre del producto y precio (ej: "Bowl Pesto — $16.000") */
.promo-title {
  font-family: var(--font-titles);
  font-size: 24px;
  color: var(--white);
  letter-spacing: 0.5px;
}

/* Detalle (ej: "Sede Plaza Mayor · 9 al 13 de Marzo") */
.promo-detail {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 3px;
  font-weight: 500;
}

/* Ícono de WhatsApp dentro del banner */
.promo-wa-icon {
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

/* SVG de WhatsApp reutilizable */
.wa-svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}


/* ============================================================
   9. SEPARADOR VISUAL ("Nuestras Sedes")
   ─────────────────────────────────────────
   Línea decorativa que divide la promo de las sedes.
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 20px;
  animation: fadeIn 0.8s ease 250ms both;
}

/* Líneas a los lados */
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--beige-dark), transparent);
}

/* Texto del separador */
.divider-text {
  font-family: var(--font-titles);
  font-size: 16px;
  color: var(--red);
  letter-spacing: 3px;
  text-transform: uppercase;
}


/* ============================================================
   10. TARJETA DE SEDE (Diseño de cada ubicación)
   ─────────────────────────────────────────
   Cada sede tiene: encabezado rojo + cuerpo translúcido.
   
   El fondo es un beige translúcido con efecto glass/cristal
   que se diferencia del fondo general pero deja ver la textura.
   
   Para hacerlo MÁS opaco:  sube el primer número en --card-bg (0.35 → 0.55)
   Para hacerlo MÁS transparente: bájalo (0.35 → 0.2)
   Para quitar el efecto glass: borra las líneas de backdrop-filter
   ============================================================ */

/* Contenedor de la tarjeta — FONDO TRANSLÚCIDO */
.sede-card {
  background: var(--card-bg);                   /* ← Beige translúcido */
  backdrop-filter: blur(16px);                  /* ← Efecto glass (desenfoca lo que hay detrás) */
  -webkit-backdrop-filter: blur(16px);          /* ← Mismo efecto para iPhone/Safari */
  border: 1px solid var(--card-border);         /* ← Borde beige sutil */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.06),            /* Sombra suave exterior */
    inset 0 1px 0 rgba(255, 255, 255, 0.3);    /* Brillo sutil arriba (efecto vidrio) */
  margin-bottom: 18px;
  /* opacity y transform ya están en sección 5 (scroll) */
}

/* Encabezado rojo — estilo normal */
.sede-header {
  background: var(--red);
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}

/* Encabezado rojo — variante OSCURA (para segunda sede) */
.sede-header-dark {
  background: linear-gradient(135deg, var(--red-dark), var(--red));
}

/* Círculo decorativo en el encabezado */
.sede-header::before {
  content: '';
  position: absolute;
  top: -25px;
  right: -25px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}

/* Layout del encabezado (nombre + ícono) */
.sede-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Nombre de la sede (ej: "PLAZA MAYOR") */
.sede-name {
  font-family: var(--font-titles);
  font-size: 28px;                /* ← Tamaño del nombre de sede */
  color: var(--white);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Subtítulo (ej: "Entrada 9, Local 105") */
.sede-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  margin-top: 2px;
}

/* Badge "Nueva" (si lo necesitas) */
.sede-badge {
  background: #FFD700;
  color: var(--dark);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Caja del ícono de mapa */
.sede-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

/* Cuerpo de la tarjeta — FONDO TRANSLÚCIDO CLARO */
.sede-body {
  padding: 20px 22px;
  background: var(--card-body-bg);              /* ← Blanco translúcido suave */
}

/* Dirección principal */
.sede-address {
  font-size: 14px;
  color: var(--dark);
  font-weight: 600;
  margin-bottom: 2px;
}

/* Referencia (ej: "Frente al Caballo de Bolívar") */
.sede-reference {
  font-size: 12px;
  color: var(--gray-light);
  margin-bottom: 16px;
}

/* Filas de información (horario, teléfono, domicilio) */
.info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--gray);
}

/* Ícono de cada fila */
.info-icon {
  color: var(--red);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Texto de cada fila */
.info-text {
  font-size: 13px;
  font-weight: 500;
}

/* Texto secundario dentro de la fila (ej: "(+$1.500 embalaje)") */
.info-text span {
  color: var(--gray-light);
}


/* ============================================================
   11. BOTONES (WhatsApp y Cómo llegar)
   ─────────────────────────────────────────
   Grid de 2 columnas con los botones de acción.
   ============================================================ */

/* Contenedor de los dos botones */
.sede-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

/* Estilo base de ambos botones */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  transition: transform 0.12s;
  cursor: pointer;
  border: none;
}

/* Efecto al presionar */
.btn:active {
  transform: scale(0.97);
}

/* Botón verde de WhatsApp */
.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--white);
  box-shadow: 0 3px 14px rgba(37, 211, 102, 0.3);
}

/* Botón rojo de Google Maps */
.btn-maps {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 3px 14px rgba(227, 6, 19, 0.2);
}


/* ============================================================
   12. FOOTER
   ─────────────────────────────────────────
   Pie de página con link a Instagram.
   ============================================================ */
.footer {
  text-align: center;
  padding: 16px 0 36px;
  animation: fadeIn 1s ease 600ms both;
}

/* Línea decorativa */
.footer-line {
  width: 40px;
  height: 2px;
  background: var(--beige-dark);
  margin: 0 auto 14px;
  border-radius: 2px;
}

/* Link de Instagram */
.footer a {
  color: var(--red);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

/* Texto inferior */
.footer p {
  color: var(--gray-light);
  font-size: 11px;
  margin-top: 6px;
}