/**
 * @license
 * Mariscos El Paisa - Sistema de Estilos CSS3 Puro y Nativo
 * Fiel al Sistema de Diseño de Stitch (Mobile-First, Variables CSS, Grid, Flexbox, Keyframes)
 */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* Paleta de Colores Stitch - Costa & Mar */
  --color-superficie: #fbf9f6;
  --color-superficie-tenue: #dbdad7;
  --color-superficie-brillante: #fbf9f6;
  --color-superficie-baja: #f5f3f0;
  --color-superficie-media: #efeeeb;
  --color-superficie-alta: #eae8e5;
  --color-superficie-blanca: #ffffff;
  --color-superficie-variante: #e4e2df;

  --color-texto-principal: #1b1c1a;
  --color-texto-secundario: #424750;
  --color-texto-apagado: #727781;
  --color-texto-inverso: #f2f0ed;

  --color-primario: #003561;
  --color-sobre-primario: #ffffff;
  --color-primario-contenedor: #004c87;
  --color-sobre-primario-contenedor: #8bbdff;
  --color-primario-fijo: #d3e4ff;
  --color-sobre-primario-fijo: #001c38;

  --color-secundario: #994700;
  --color-sobre-secundario: #ffffff;
  --color-secundario-contenedor: #fb7800;
  --color-sobre-secundario-contenedor: #592600;
  --color-secundario-fijo: #ffdbc8;
  --color-sobre-secundario-fijo: #321200;

  --color-terciario: #003a48;
  --color-sobre-terciario: #ffffff;
  --color-terciario-contenedor: #005265;
  --color-sobre-terciario-contenedor: #49c9ee;
  --color-terciario-fijo: #b5ebff;
  --color-sobre-terciario-fijo: #001f28;

  --color-exito: #1b873f;
  --color-error: #ba1a1a;
  --color-borde: #c2c7d1;
  --color-borde-suave: rgba(0, 53, 97, 0.08);

  /* Tipografía */
  --fuente-titulos: 'Epilogue', Georgia, serif;
  --fuente-cuerpo: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Espaciados */
  --espacio-xs: 0.25rem;
  --espacio-sm: 0.5rem;
  --espacio-md: 1rem;
  --espacio-lg: 1.5rem;
  --espacio-xl: 2.5rem;
  --margen-pantalla: 1rem;
  --canal-rejilla: 1rem;

  /* Radios de borde */
  --radio-sm: 0.375rem;
  --radio-md: 0.5rem;
  --radio-lg: 0.75rem;
  --radio-xl: 1rem;
  --radio-2xl: 1.5rem;
  --radio-completo: 9999px;

  /* Sombras Táctiles Costeras */
  --sombra-reposo: 0 4px 14px -2px rgba(11, 37, 69, 0.06), 0 2px 6px -1px rgba(255, 122, 0, 0.04);
  --sombra-elevada: 0 12px 24px -4px rgba(11, 37, 69, 0.12), 0 4px 10px -2px rgba(255, 122, 0, 0.08);
  --sombra-flotante: 0 20px 32px -6px rgba(11, 37, 69, 0.18), 0 6px 14px -3px rgba(0, 76, 135, 0.08);
  --sombra-brillo-naranja: 0 8px 24px -4px rgba(251, 120, 0, 0.4);

  /* Transición estándar */
  --curva-suave: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duracion-transicion: 320ms;
}

@media (min-width: 768px) {
  :root {
    --margen-pantalla: 1.5rem;
    --canal-rejilla: 1.25rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --margen-pantalla: 2rem;
    --canal-rejilla: 1.5rem;
  }
}

/* Reset y Reglas Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--fuente-cuerpo);
  background-color: var(--color-superficie);
  color: var(--color-texto-principal);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(251, 120, 0, 0.45) var(--color-superficie-baja);
}

/* =========================================================================
   BARRA DE DESPLAZAMIENTO (SCROLLBAR) ELEGANTE Y ULTRA-DELGADA
   ========================================================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-superficie-baja);
}

::-webkit-scrollbar-thumb {
  background: rgba(251, 120, 0, 0.38);
  border-radius: var(--radio-completo);
  border: 1px solid var(--color-superficie-baja);
  transition: background-color 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secundario);
}

::-webkit-scrollbar-thumb:active {
  background: var(--color-secundario-contenedor);
}

/* Evitar que anclas y encabezados se corten detrás de la cabecera fija */
.vista-spa, section, [id], .seccion-titulo-principal {
  scroll-margin-top: 76px;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  background-color: var(--color-superficie);
  color: var(--color-texto-principal);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

::selection {
  background-color: var(--color-secundario-fijo);
  color: var(--color-sobre-secundario-fijo);
}

/* Tipografía de Utilidad */
.fuente-titulos {
  font-family: var(--fuente-titulos);
}

.fuente-cuerpo {
  font-family: var(--fuente-cuerpo);
}

.icono {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* Layout General */
.contenedor-principal {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margen-pantalla);
  padding-right: var(--margen-pantalla);
}

/* =========================================================================
   BARRA SUPERIOR (HEADER)
   ========================================================================= */
.cabecera-sitio {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  z-index: 50;
  background-color: rgba(251, 249, 246, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-borde-suave);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
  transition: height 0.25s ease, background-color 0.25s ease;
}

@media (min-width: 768px) {
  .cabecera-sitio {
    height: 76px;
  }
}

.cabecera-contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 0.75rem;
}

.marca-enlace {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
  flex-shrink: 1;
}

.marca-logo {
  height: 34px;
  width: 34px;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .marca-logo {
    height: 42px;
    width: 42px;
  }
}

.marca-enlace:hover .marca-logo {
  transform: rotate(-3deg) scale(1.05);
}

.marca-textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.marca-nombre {
  font-family: var(--fuente-titulos);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-primario);
  line-height: 1.15;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .marca-nombre {
    font-size: 1.15rem;
  }
}

.marca-lema {
  font-family: var(--fuente-cuerpo);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-secundario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
  display: none;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .marca-lema {
    display: block;
  }
}

.navegacion-principal {
  display: none;
  align-items: center;
  gap: var(--espacio-xs);
}

@media (min-width: 980px) {
  .navegacion-principal {
    display: flex;
  }
}

.enlace-navegacion {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radio-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.enlace-navegacion:hover {
  color: var(--color-texto-principal);
  background-color: var(--color-superficie-media);
}

.enlace-navegacion.enlace-activo {
  background-color: var(--color-primario-contenedor);
  color: var(--color-sobre-primario);
  box-shadow: 0 2px 6px rgba(0, 76, 135, 0.2);
}

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cabecera-acciones {
    gap: var(--espacio-sm);
  }
}

.boton-telefono {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radio-completo);
  background-color: var(--color-superficie-media);
  color: var(--color-primario);
  font-size: 0.8rem;
  font-weight: 700;
  transition: background-color 0.2s ease;
}

@media (min-width: 1200px) {
  .boton-telefono {
    display: flex;
  }
}

.boton-telefono:hover {
  background-color: var(--color-superficie-alta);
}

.boton-carrito-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radio-completo);
  background-color: var(--color-secundario-contenedor);
  color: var(--color-sobre-primario);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: var(--sombra-brillo-naranja);
  transition: all 0.2s var(--curva-suave);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .boton-carrito-cabecera {
    width: auto;
    height: 40px;
    padding: 0 var(--espacio-md);
    border-radius: var(--radio-md);
  }
}

.texto-boton-carrito {
  display: none;
}

@media (min-width: 640px) {
  .texto-boton-carrito {
    display: inline;
  }
}

.boton-carrito-cabecera:hover {
  background-color: var(--color-secundario);
  transform: translateY(-1px);
}

.insignia-carrito {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radio-completo);
  font-size: 0.65rem;
  font-weight: 800;
  background-color: var(--color-primario);
  color: var(--color-sobre-primario);
  border: 2px solid var(--color-superficie);
}

@media (min-width: 640px) {
  .insignia-carrito {
    position: static;
    border: none;
  }
}

.boton-menu-movil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radio-completo);
  background-color: var(--color-superficie-media);
  border: 1px solid var(--color-borde-suave);
  color: var(--color-primario);
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.boton-menu-movil:active {
  transform: scale(0.94);
}

@media (min-width: 768px) {
  .boton-menu-movil {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 980px) {
  .boton-menu-movil {
    display: none;
  }
}

/* Menú Móvil Desplegable */
.menu-movil-desplegable {
  position: fixed;
  top: 62px;
  left: 0;
  right: 0;
  background-color: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: translateY(-120%);
  transition: transform 0.3s var(--curva-suave);
  z-index: 45;
}

@media (min-width: 768px) {
  .menu-movil-desplegable {
    top: 76px;
  }
}

.menu-movil-desplegable.menu-abierto {
  transform: translateY(0);
}

.enlace-menu-movil {
  padding: 0.85rem 1rem;
  border-radius: var(--radio-md);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-superficie-media);
  transition: all 0.2s ease;
}

.enlace-menu-movil:hover {
  background-color: var(--color-superficie-alta);
  color: var(--color-primario);
}

.enlace-menu-movil.enlace-activo {
  background-color: var(--color-primario-contenedor);
  color: var(--color-sobre-primario);
}

/* =========================================================================
   BARRA DE AVISO / CONTEXTO COSTEÑO
   ========================================================================= */
.barra-aviso {
  width: 100%;
  background-color: var(--color-secundario-fijo);
  color: var(--color-sobre-secundario-fijo);
  padding: 0.5rem var(--margen-pantalla);
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(153, 71, 0, 0.1);
}

.barra-aviso-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.aviso-texto-principal {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.aviso-meta {
  display: none;
  align-items: center;
  gap: var(--espacio-md);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .aviso-meta {
    display: flex;
  }
}

.pulso-verde {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-secundario);
  box-shadow: 0 0 0 rgba(153, 71, 0, 0.4);
  animation: pulsoAnimacion 1.8s infinite;
}

@keyframes pulsoAnimacion {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(153, 71, 0, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(153, 71, 0, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(153, 71, 0, 0); }
}

/* =========================================================================
   CONTENEDOR DE VISTAS (SPA CROSSFADE ENGINE)
   ========================================================================= */
.area-contenido-principal {
  margin-top: 62px;
  flex: 1 0 auto;
  position: relative;
  min-height: calc(100vh - 62px);
}

@media (min-width: 768px) {
  .area-contenido-principal {
    margin-top: 76px;
    min-height: calc(100vh - 76px);
  }
}

.contenedor-vistas {
  position: relative;
  width: 100%;
}

.vista-spa {
  width: 100%;
  opacity: 1;
  transition: opacity var(--duracion-transicion) var(--curva-suave);
  will-change: opacity;
}

.vista-spa.vista-oculta {
  display: none;
}

.vista-spa.desvanecer-salida {
  opacity: 0;
  pointer-events: none;
}

.vista-spa.desvanecer-entrada {
  animation: animacionCrossfadeEntrada var(--duracion-transicion) var(--curva-suave) forwards;
}

@keyframes animacionCrossfadeEntrada {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   EFECTO: ELEMENTO COMPARTIDO (SHARED ELEMENT TRANSITION)
   ========================================================================= */
.elemento-compartido-clon {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 24px 48px -6px rgba(0, 0, 0, 0.35);
  border-radius: var(--radio-xl);
  overflow: hidden;
  transition: all 420ms cubic-bezier(0.25, 1, 0.3, 1);
  will-change: transform, width, height, top, left, border-radius;
}

.elemento-compartido-clon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oculto-por-transicion {
  opacity: 0 !important;
}

/* =========================================================================
   EFECTO: LUPA CON DESENFOQUE (MAGNIFICATION BLUR)
   ========================================================================= */
.zona-lupa {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: inherit;
  user-select: none;
}

/* Capa de desenfoque de fondo que se activa al hacer hover */
.lupa-capa-desenfoque {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 37, 69, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 15;
}

.zona-lupa.lupa-activa .lupa-capa-desenfoque {
  opacity: 1;
}

/* Lente de aumento circular matemática */
.lupa-lente {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 16px 36px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.35);
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65);
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: top, left, opacity, transform;
}

.zona-lupa.lupa-activa .lupa-lente {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.lupa-lente-imagen {
  position: absolute;
  max-width: none;
  pointer-events: none;
  will-change: transform;
}

/* Reflejo óptico en la lente */
.lupa-lente::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}

/* Indicador de ayuda para Lupa */
.etiqueta-lupa-ayuda {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: rgba(0, 53, 97, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radio-completo);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.2s ease;
}

.zona-lupa.lupa-activa .etiqueta-lupa-ayuda {
  opacity: 0;
}

/* =========================================================================
   ANIMACIONES DE ENTRADA (INTERSECTION OBSERVER)
   ========================================================================= */
.animar-al-entrar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--curva-suave), transform 0.5s var(--curva-suave);
  will-change: opacity, transform;
}

.animar-al-entrar.esta-visible {
  opacity: 1;
  transform: translateY(0);
}

.retraso-1 { transition-delay: 80ms; }
.retraso-2 { transition-delay: 160ms; }
.retraso-3 { transition-delay: 240ms; }
.retraso-4 { transition-delay: 320ms; }

/* =========================================================================
   VISTA: INICIO / PORTADA PRINCIPAL (Image 5.jpeg)
   ========================================================================= */
.seccion-hero {
  padding-top: var(--espacio-lg);
  padding-bottom: var(--espacio-xl);
  background: radial-gradient(circle at 80% 20%, rgba(255, 219, 200, 0.45) 0%, transparent 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-lg);
  align-items: center;
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--espacio-xl);
  }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secundario);
  margin-bottom: var(--espacio-xs);
}

.hero-titulo {
  font-family: var(--fuente-titulos);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-primario);
  margin-bottom: var(--espacio-md);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .hero-titulo {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .hero-titulo {
    font-size: 3.5rem;
    line-height: 1.1;
  }
}

.hero-descripcion {
  font-size: 1rem;
  color: var(--color-texto-secundario);
  line-height: 1.6;
  margin-bottom: var(--espacio-lg);
  max-width: 580px;
}

.hero-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-xl);
}

.boton-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--radio-md);
  background-color: var(--color-secundario-contenedor);
  color: var(--color-sobre-primario);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--sombra-brillo-naranja);
  transition: all 0.2s var(--curva-suave);
  text-decoration: none;
}

.boton-primario:hover {
  background-color: var(--color-secundario);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(251, 120, 0, 0.5);
}

.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--radio-md);
  background-color: var(--color-superficie-blanca);
  border: 1.5px solid var(--color-borde);
  color: var(--color-primario);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.boton-secundario:hover {
  background-color: var(--color-superficie-media);
  border-color: var(--color-primario);
}

.boton-icono-circular {
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  background-color: var(--color-superficie-media);
  color: var(--color-primario);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.boton-icono-circular:hover {
  background-color: var(--color-primario);
  color: #ffffff;
}

.hero-metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-md);
  padding-top: var(--espacio-md);
  border-top: 1px solid var(--color-borde-suave);
}

.metrica-item {
  display: flex;
  flex-direction: column;
}

.metrica-valor {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primario);
  line-height: 1.2;
}

.metrica-etiqueta {
  font-size: 0.72rem;
  color: var(--color-texto-apagado);
  margin-top: 2px;
}

/* Visual Hero (Molcajete Insignia) */
.hero-visual-envoltorio {
  position: relative;
  border-radius: var(--radio-2xl);
  overflow: hidden;
  box-shadow: var(--sombra-flotante);
  background-color: var(--color-superficie-media);
}

.hero-imagen-principal {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--curva-suave);
}

.hero-tarjeta-flotante {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  padding: 0.85rem var(--espacio-md);
  border-radius: var(--radio-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--sombra-elevada);
}

.tarjeta-flotante-info {
  display: flex;
  flex-direction: column;
}

.tarjeta-flotante-sub {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--color-secundario);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tarjeta-flotante-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primario);
}

.tarjeta-flotante-precio {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-secundario);
}

.hero-etiqueta-leña {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radio-completo);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: var(--sombra-reposo);
}

/* =========================================================================
   SECCIÓN: ESPECIALIDADES DEL PAISA (Grid de 6 platillos)
   ========================================================================= */
.seccion-especialidades {
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
}

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--espacio-lg);
}

@media (min-width: 768px) {
  .encabezado-seccion {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.seccion-subtitulo-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secundario);
}

.seccion-titulo-principal {
  font-family: var(--fuente-titulos);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-primario);
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .seccion-titulo-principal {
    font-size: 2.25rem;
  }
}

.filtros-pildoras {
  display: flex;
  align-items: center;
  gap: var(--espacio-xs);
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.filtros-pildoras::-webkit-scrollbar {
  display: none;
}

.pildora-filtro {
  padding: 0.5rem 1rem;
  border-radius: var(--radio-completo);
  background-color: var(--color-superficie-media);
  color: var(--color-texto-principal);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.pildora-filtro:hover {
  background-color: var(--color-superficie-alta);
}

.pildora-filtro.pildora-activa {
  background-color: var(--color-primario);
  color: var(--color-sobre-primario);
  box-shadow: 0 2px 8px rgba(0, 53, 97, 0.25);
}

/* Grilla de Platillos */
.grilla-platillos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
}

@media (min-width: 640px) {
  .grilla-platillos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grilla-platillos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tarjeta-platillo {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-borde-suave);
  transition: transform 0.25s var(--curva-suave), box-shadow 0.25s var(--curva-suave);
}

.tarjeta-platillo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-elevada);
}

.tarjeta-platillo-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-superficie-media);
  overflow: hidden;
}

.tarjeta-platillo-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--curva-suave);
}

.tarjeta-platillo:hover .tarjeta-platillo-visual img {
  transform: scale(1.05);
}

.insignia-platillo {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: var(--radio-completo);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-primario);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.insignia-platillo.insignia-naranja {
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
}

.tarjeta-platillo-cuerpo {
  padding: var(--espacio-md);
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: space-between;
}

.platillo-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.platillo-nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primario);
  line-height: 1.25;
}

.platillo-precio {
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-secundario);
  white-space: nowrap;
}

.platillo-descripcion {
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  line-height: 1.45;
  margin-bottom: var(--espacio-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.platillo-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--espacio-xs);
  border-top: 1px solid var(--color-superficie-media);
}

.platillo-nota {
  font-size: 0.72rem;
  color: var(--color-texto-apagado);
}

.boton-agregar-rapido {
  width: 32px;
  height: 32px;
  border-radius: var(--radio-completo);
  background-color: var(--color-superficie-media);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.boton-agregar-rapido:hover {
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  transform: rotate(90deg);
}

/* Banner de Caldos */
.banner-caldos {
  margin-top: var(--espacio-lg);
  padding: var(--espacio-md) var(--espacio-lg);
  border-radius: var(--radio-xl);
  background-color: var(--color-secundario-fijo);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .banner-caldos {
    flex-direction: row;
    align-items: center;
  }
}

.banner-caldos-info {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
}

.icono-caldo-circulo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.banner-caldos-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-sobre-secundario-fijo);
}

.banner-caldos-sub {
  font-size: 0.8rem;
  color: var(--color-secundario);
}

/* =========================================================================
   SECCIÓN: AMBIENTE FESTIVO & HISTORIA
   ========================================================================= */
.seccion-ambiente {
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
  background-color: var(--color-superficie-baja);
}

.ambiente-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-lg);
  align-items: center;
}

@media (min-width: 980px) {
  .ambiente-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-xl);
  }
}

.ambiente-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-sm);
}

.ambiente-foto-card {
  position: relative;
  border-radius: var(--radio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  aspect-ratio: 4 / 5;
  background-color: var(--color-superficie-media);
}

.ambiente-foto-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ambiente-foto-card:hover img {
  transform: scale(1.04);
}

.ambiente-foto-etiqueta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(0, 53, 97, 0.9) 0%, transparent 100%);
  color: #ffffff;
  font-size: 0.75rem;
}

.ambiente-foto-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.85rem;
}

.ambiente-foto-sub {
  font-size: 0.65rem;
  opacity: 0.85;
}

.ambiente-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
}

.ambiente-destacados-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
}

.ambiente-destacado-item {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-sm);
}

.ambiente-icono-check {
  color: var(--color-secundario);
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ambiente-destacado-titulo {
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primario);
}

.ambiente-destacado-sub {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
}

/* =========================================================================
   SECCIÓN: DOS SUCURSALES EN METEPEC
   ========================================================================= */
.seccion-sucursales-resumen {
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
}

.grilla-dos-sucursales {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
}

@media (min-width: 768px) {
  .grilla-dos-sucursales {
    grid-template-columns: 1fr 1fr;
  }
}

.tarjeta-sucursal-resumen {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-xl);
  padding: var(--espacio-lg);
  border: 1px solid var(--color-borde-suave);
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sucursal-cabecera-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espacio-sm);
}

.sucursal-badge-tipo {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radio-md);
  background-color: var(--color-primario-fijo);
  color: var(--color-sobre-primario-fijo);
}

.sucursal-estado-abierto {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-secundario);
}

.sucursal-nombre-card {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: 0.35rem;
}

.sucursal-direccion-card {
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  margin-bottom: var(--espacio-md);
}

.mapa-miniatura-contenedor {
  width: 100%;
  height: 140px;
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-media);
  margin-bottom: var(--espacio-md);
  position: relative;
  overflow: hidden;
}

.mapa-svg-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sucursal-detalles-lista {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  margin-bottom: var(--espacio-md);
}

.sucursal-detalle-fila {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--color-superficie-media);
}

.sucursal-acciones-botones {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}

/* =========================================================================
   SECCIÓN: TESTIMONIOS (Image 5.jpeg)
   ========================================================================= */
.seccion-testimonios {
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
  background-color: var(--color-superficie-baja);
}

.grilla-testimonios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
}

@media (min-width: 768px) {
  .grilla-testimonios {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tarjeta-testimonio {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-xl);
  padding: var(--espacio-lg);
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonio-texto {
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: var(--espacio-md);
}

.testimonio-autor {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}

.testimonio-avatar-inicial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-primario-fijo);
  color: var(--color-primario);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.testimonio-autor-info {
  display: flex;
  flex-direction: column;
}

.testimonio-nombre {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primario);
}

.testimonio-sucursal-label {
  font-size: 0.7rem;
  color: var(--color-texto-apagado);
}

/* =========================================================================
   SECCIÓN: FORMULARIO DE RESERVA / WHATSAPP
   ========================================================================= */
.seccion-reserva {
  padding-top: var(--espacio-xl);
  padding-bottom: var(--espacio-xl);
  background-color: var(--color-primario);
  color: #ffffff;
}

.reserva-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-xl);
  align-items: center;
}

@media (min-width: 980px) {
  .reserva-grid {
    grid-template-columns: 1fr 1.1fr;
  }
}

.reserva-info-titulo {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--espacio-md);
  color: #ffffff;
}

.reserva-tarjeta-cumple {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: var(--espacio-md);
  border-radius: var(--radio-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--espacio-md);
}

.reserva-formulario-card {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-2xl);
  padding: var(--espacio-lg);
  color: var(--color-texto-principal);
  box-shadow: var(--sombra-flotante);
}

.formulario-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: var(--espacio-md);
}

.fila-formulario-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-sm);
}

@media (min-width: 640px) {
  .fila-formulario-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.fila-formulario-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-sm);
}

@media (min-width: 640px) {
  .fila-formulario-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.campo-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo-etiqueta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-texto-secundario);
}

.campo-input, .campo-select, .campo-textarea {
  width: 100%;
  height: 42px;
  padding: 0 var(--espacio-md);
  border-radius: var(--radio-md);
  border: 1px solid var(--color-borde);
  background-color: var(--color-superficie-blanca);
  color: var(--color-texto-principal);
  font-size: 0.85rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-textarea {
  height: 70px;
  padding: 0.5rem var(--espacio-md);
  resize: none;
}

.campo-input:focus, .campo-select:focus, .campo-textarea:focus {
  outline: none;
  border-color: var(--color-secundario-contenedor);
  box-shadow: 0 0 0 3px rgba(251, 120, 0, 0.2);
}

.boton-whatsapp-confirmar {
  width: 100%;
  height: 48px;
  border-radius: var(--radio-md);
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--sombra-brillo-naranja);
  transition: all 0.2s ease;
  margin-top: var(--espacio-sm);
}

.boton-whatsapp-confirmar:hover {
  background-color: var(--color-secundario);
  transform: translateY(-1px);
}

/* =========================================================================
   VISTA: MENÚ & CARTA COMPLETA (Image 11.png)
   ========================================================================= */
.seccion-menu-hub {
  background-color: var(--color-superficie-baja);
  padding-top: var(--espacio-lg);
  padding-bottom: var(--espacio-md);
  border-bottom: 1px solid var(--color-borde-suave);
}

.menu-buscador-envoltorio {
  position: relative;
  width: 100%;
  max-width: 580px;
}

.menu-buscador-icono {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-texto-apagado);
}

.menu-buscador-input {
  width: 100%;
  height: 46px;
  padding-left: 44px;
  padding-right: var(--espacio-md);
  border-radius: var(--radio-lg);
  border: 1px solid var(--color-borde);
  background-color: var(--color-superficie-blanca);
  box-shadow: var(--sombra-reposo);
  font-size: 0.9rem;
}

.menu-buscador-input:focus {
  outline: none;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(153, 71, 0, 0.15);
}

/* Bento Showcase de Estrellas de la Palapa */
.seccion-estrellas-palapa {
  padding-top: var(--espacio-lg);
  padding-bottom: var(--espacio-lg);
}

.bento-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
}

@media (min-width: 1024px) {
  .bento-showcase-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}

.bento-card-gran-molcajete {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-2xl);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--color-borde-suave);
}

.bento-molcajete-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-superficie-media);
}

.bento-molcajete-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-molcajete-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 53, 97, 0.9) 0%, rgba(0, 53, 97, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--espacio-lg);
  color: #ffffff;
}

.bento-molcajete-pie {
  padding: var(--espacio-md);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  background-color: var(--color-superficie-blanca);
}

@media (min-width: 640px) {
  .bento-molcajete-pie {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.bento-columna-secundaria {
  display: flex;
  flex-direction: column;
  gap: var(--canal-rejilla);
}

.bento-paella-card {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-2xl);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-borde-suave);
}

.bento-paella-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  background-color: var(--color-superficie-media);
}

.bento-paella-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-piña-card {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-2xl);
  padding: var(--espacio-md);
  box-shadow: var(--sombra-reposo);
  display: flex;
  gap: var(--espacio-md);
  align-items: center;
  border: 1px solid var(--color-borde-suave);
}

.piña-miniatura-envoltorio {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: var(--radio-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.piña-miniatura-envoltorio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   DOCK FLOTANTE DE PEDIDO / CHECKOUT (Shared across menu and pages)
   ========================================================================= */
.dock-orden-flotante {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 40;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(251, 249, 246, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radio-2xl);
  padding: 0.75rem var(--espacio-md);
  box-shadow: var(--sombra-flotante);
  border-top: 2px solid var(--color-secundario-contenedor);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-md);
  transition: transform 0.25s var(--curva-suave);
}

.dock-orden-flotante.ocultar-dock {
  transform: translateY(150%);
  pointer-events: none;
}

.dock-orden-info {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
}

.dock-icono-bolsa {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-lg);
  background-color: var(--color-secundario-fijo);
  color: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dock-insignia-conteo {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dock-textos {
  display: flex;
  flex-direction: column;
}

.dock-subtexto {
  font-size: 0.68rem;
  color: var(--color-texto-apagado);
}

.dock-precio-total {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-secundario);
}

.dock-boton-ordenar {
  height: 42px;
  padding: 0 1.25rem;
  border-radius: var(--radio-lg);
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: var(--sombra-brillo-naranja);
  transition: all 0.2s ease;
}

.dock-boton-ordenar:hover {
  background-color: var(--color-secundario);
}

/* =========================================================================
   VISTA: PEDIDOS A DOMICILIO Y PAGOS / CHECKOUT (Image 7.png)
   ========================================================================= */
.seccion-checkout {
  padding-top: var(--espacio-md);
  padding-bottom: 9rem; /* Margen amplio para que la barra fija inferior jamás tape contenido */
}

@media (min-width: 1024px) {
  .seccion-checkout {
    padding-top: var(--espacio-lg);
    padding-bottom: var(--espacio-xl);
  }
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .checkout-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--espacio-xl);
  }
}

/* Indicador de pasos estilo App Móvil */
.checkout-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background-color: var(--color-superficie-blanca);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-xl);
  padding: 0.75rem var(--espacio-md);
  margin-bottom: var(--espacio-md);
  box-shadow: var(--sombra-reposo);
}

.checkout-paso-item {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-texto-apagado);
}

.checkout-paso-item.paso-activo {
  color: var(--color-primario);
}

.checkout-paso-item.paso-completado {
  color: var(--color-secundario);
}

.checkout-paso-circulo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-superficie-media);
  color: var(--color-texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.checkout-paso-item.paso-activo .checkout-paso-circulo {
  background-color: var(--color-primario);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 53, 97, 0.15);
}

.checkout-paso-item.paso-completado .checkout-paso-circulo {
  background-color: var(--color-secundario);
  color: #ffffff;
}

.checkout-paso-linea {
  flex: 1;
  height: 2px;
  background-color: var(--color-borde-suave);
  margin: 0 8px;
}

.checkout-paso-linea.linea-activa {
  background-color: var(--color-primario);
}

/* Banner de Resumen Rápido Móvil Desplegable */
.checkout-resumen-movil-rapido {
  display: block;
  background-color: var(--color-superficie-blanca);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  margin-bottom: var(--espacio-md);
  box-shadow: var(--sombra-reposo);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .checkout-resumen-movil-rapido {
    display: none;
  }
}

.resumen-movil-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--espacio-md);
  cursor: pointer;
  background-color: var(--color-superficie-baja);
  transition: background-color 0.2s ease;
}

.resumen-movil-cabecera:hover {
  background-color: var(--color-superficie-media);
}

.resumen-movil-desplegable {
  display: none;
  padding: var(--espacio-md);
  border-top: 1px solid var(--color-borde-suave);
  flex-direction: column;
  gap: var(--espacio-sm);
  background-color: #ffffff;
}

.resumen-movil-desplegable.abierto {
  display: flex;
}

.tarjeta-paso-checkout {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-xl);
  padding: var(--espacio-md);
  box-shadow: var(--sombra-reposo);
  border: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  margin-bottom: var(--espacio-md);
}

@media (min-width: 640px) {
  .tarjeta-paso-checkout {
    padding: var(--espacio-lg);
    margin-bottom: var(--espacio-lg);
  }
}

.paso-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-xs);
}

.paso-titulo-grupo {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  min-width: 0;
}

.paso-numero-circulo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primario);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.paso-titulo-texto {
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primario);
  line-height: 1.2;
}

@media (min-width: 640px) {
  .paso-titulo-texto {
    font-size: 1.15rem;
  }
}

.paso-insignia {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radio-md);
  background-color: var(--color-secundario-fijo);
  color: var(--color-sobre-secundario-fijo);
  white-space: nowrap;
}

.modalidad-entrega-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background-color: var(--color-superficie-baja);
  padding: 4px;
  border-radius: var(--radio-lg);
}

@media (min-width: 640px) {
  .modalidad-entrega-tabs {
    gap: 6px;
    padding: 6px;
  }
}

.boton-tab-modalidad {
  padding: 0.6rem 0.35rem;
  border-radius: var(--radio-md);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-texto-secundario);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s ease;
  text-align: center;
}

@media (min-width: 480px) {
  .boton-tab-modalidad {
    flex-direction: row;
    padding: 0.65rem 0.5rem;
    font-size: 0.82rem;
    gap: 6px;
  }
}

.boton-tab-modalidad.modalidad-activa {
  background-color: var(--color-primario);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 53, 97, 0.25);
}

.alerta-tiempo-entrega {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  padding: 0.65rem var(--espacio-md);
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-baja);
  border: 1px solid var(--color-borde-suave);
}

.icono-tiempo-circulo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(251, 120, 0, 0.12);
  color: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chips de sugerencias para inputs (dirección, notas, efectivo) */
.chips-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.chip-sugerencia {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radio-completo);
  background-color: var(--color-superficie-media);
  border: 1px solid var(--color-borde-suave);
  color: var(--color-texto-secundario);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chip-sugerencia:hover, .chip-sugerencia:active {
  background-color: var(--color-secundario-fijo);
  color: var(--color-sobre-secundario-fijo);
  border-color: var(--color-secundario);
  transform: translateY(-1px);
}

.metodo-pago-opcion {
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-baja);
  padding: var(--espacio-sm) var(--espacio-md);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border: 1.5px solid transparent;
}

@media (min-width: 640px) {
  .metodo-pago-opcion {
    padding: var(--espacio-md);
  }
}

.metodo-pago-opcion:hover {
  background-color: var(--color-superficie-media);
}

.metodo-pago-opcion.opcion-seleccionada {
  border-color: var(--color-secundario-contenedor);
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(251, 120, 0, 0.08);
}

.propinas-grupo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.boton-propina {
  padding: 0.55rem 0.2rem;
  border-radius: var(--radio-md);
  background-color: var(--color-superficie-blanca);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 700;
  transition: all 0.2s ease;
  text-align: center;
}

.boton-propina.propina-activa {
  background-color: var(--color-primario);
  color: #ffffff;
  border-color: var(--color-primario);
  box-shadow: 0 2px 6px rgba(0, 53, 97, 0.2);
}

/* Columna Resumen de Orden */
.resumen-orden-sticky {
  position: relative; /* En celular fluye naturalmente sin cortarse bajo la cabecera */
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-xl);
  padding: var(--espacio-md);
  box-shadow: var(--sombra-reposo);
  border: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
}

@media (min-width: 1024px) {
  .resumen-orden-sticky {
    position: sticky;
    top: 96px;
    padding: var(--espacio-lg);
  }
}

.item-carrito-fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  padding: var(--espacio-xs) 0;
}

.item-carrito-thumb {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: var(--radio-lg);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-superficie-media);
}

.item-carrito-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-carrito-datos {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-carrito-nombre {
  font-family: var(--fuente-titulos);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-carrito-controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.contador-cantidad {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-superficie-media);
  border-radius: var(--radio-completo);
  padding: 2px 8px;
}

.btn-contador {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease;
}

.btn-contador:active {
  transform: scale(0.9);
}

.desglose-fila {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
}

.desglose-fila.total-destacado {
  padding-top: var(--espacio-xs);
  border-top: 1px solid var(--color-superficie-media);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primario);
}

.boton-confirmar-pedido {
  width: 100%;
  height: 52px;
  border-radius: var(--radio-lg);
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow: var(--sombra-brillo-naranja);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.boton-confirmar-pedido:hover {
  background-color: var(--color-secundario);
  transform: translateY(-2px);
}

/* =========================================================================
   BARRA FLOTANTE FIJA INFERIOR PARA CHECKOUT EN CELULAR
   ========================================================================= */
.barra-checkout-flotante-movil {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 48;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-borde-suave);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
  padding: 0.75rem var(--margen-pantalla);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
}

@media (min-width: 1024px) {
  .barra-checkout-flotante-movil {
    display: none;
  }
}

.checkout-movil-total-info {
  display: flex;
  flex-direction: column;
}

.checkout-movil-etiqueta {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-texto-apagado);
  text-transform: uppercase;
}

.checkout-movil-precio {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-secundario);
  line-height: 1.1;
}

.checkout-movil-enlace-desglose {
  font-size: 0.7rem;
  color: var(--color-primario);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.boton-confirmar-movil-cta {
  flex: 1;
  max-width: 220px;
  height: 46px;
  border-radius: var(--radio-lg);
  background-color: var(--color-secundario-contenedor);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--sombra-brillo-naranja);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.boton-confirmar-movil-cta:active {
  transform: scale(0.97);
}

/* =========================================================================
   VISTA: SUCURSALES & MAPAS (Image 9.jpeg)
   ========================================================================= */
.seccion-sucursales-detalle {
  padding-top: var(--espacio-lg);
  padding-bottom: var(--espacio-xl);
}

.tabs-sucursales-selector {
  display: flex;
  max-width: 480px;
  background-color: var(--color-superficie-media);
  padding: 6px;
  border-radius: var(--radio-xl);
  margin-top: var(--espacio-md);
  margin-bottom: var(--espacio-lg);
}

.tab-sucursal-btn {
  flex: 1;
  padding: 0.75rem var(--espacio-md);
  border-radius: var(--radio-lg);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-xs);
  transition: all 0.2s ease;
}

.tab-sucursal-btn.tab-activo {
  background-color: var(--color-primario);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 53, 97, 0.25);
}

.sucursales-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
}

@media (min-width: 1024px) {
  .sucursales-panel-grid {
    grid-template-columns: 1.25fr 1fr;
  }
}

.contenedor-mapa-interactivo {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-2xl);
  overflow: hidden;
  box-shadow: var(--sombra-reposo);
  border: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
}

.mapa-visor {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #e5ecef;
  overflow: hidden;
}

.mapa-visor svg {
  width: 100%;
  height: 100%;
}

.mapa-tiempos-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--color-superficie-baja);
  padding: 0.85rem var(--espacio-md);
  text-align: center;
  border-top: 1px solid var(--color-borde-suave);
}

.mapa-tiempo-col {
  display: flex;
  flex-direction: column;
}

.tiempo-col-sub {
  font-size: 0.7rem;
  color: var(--color-texto-apagado);
}

.tiempo-col-val {
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primario);
}

/* Acordeón de Preguntas Frecuentes */
.acordeon-item {
  background-color: var(--color-superficie-blanca);
  border-radius: var(--radio-xl);
  border: 1px solid var(--color-borde-suave);
  margin-bottom: var(--espacio-sm);
  overflow: hidden;
}

.acordeon-disparador {
  width: 100%;
  padding: var(--espacio-md) var(--espacio-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primario);
  text-align: left;
}

.acordeon-contenido {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--espacio-lg);
  transition: max-height 0.3s var(--curva-suave), padding 0.3s var(--curva-suave);
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
}

.acordeon-item.item-abierto .acordeon-contenido {
  max-height: 200px;
  padding-bottom: var(--espacio-md);
}

.acordeon-item.item-abierto .acordeon-icono {
  transform: rotate(180deg);
}

.acordeon-icono {
  transition: transform 0.25s ease;
}

/* =========================================================================
   PIE DE PÁGINA (FOOTER)
   ========================================================================= */
.pie-sitio {
  width: 100%;
  background-color: var(--color-superficie-baja);
  color: var(--color-texto-principal);
  padding-top: var(--espacio-xl);
  padding-bottom: 7.5rem; /* Espacio de resguardo para que dock y barra flotante no corten el pie */
  border-top: 1px solid var(--color-borde-suave);
  margin-top: auto;
}

@media (min-width: 1024px) {
  .pie-sitio {
    padding-bottom: var(--espacio-xl);
  }
}

.grilla-pie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal-rejilla);
  margin-bottom: var(--espacio-xl);
}

@media (min-width: 640px) {
  .grilla-pie {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grilla-pie {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.pie-columna-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: var(--espacio-md);
}

.pie-texto-resumen {
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
  margin-top: var(--espacio-xs);
}

.pie-redes-enlaces {
  display: flex;
  align-items: center;
  gap: var(--espacio-xs);
  margin-top: var(--espacio-md);
}

.pie-boton-social {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-superficie-media);
  color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pie-boton-social:hover {
  background-color: var(--color-primario);
  color: #ffffff;
}

.pie-tarjeta-sucursal {
  background-color: var(--color-superficie-media);
  border-radius: var(--radio-lg);
  padding: 0.75rem var(--espacio-sm);
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
}

.pie-horarios-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
}

.pie-horario-fila {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie-media);
}

.pie-tarjeta-musica {
  background-color: var(--color-secundario-fijo);
  color: var(--color-sobre-secundario-fijo);
  border-radius: var(--radio-lg);
  padding: 0.75rem var(--espacio-sm);
  font-size: 0.78rem;
  line-height: 1.4;
}

.pie-tarjeta-paella {
  background-color: var(--color-terciario-fijo);
  color: var(--color-sobre-terciario-fijo);
  border-radius: var(--radio-lg);
  padding: 0.75rem var(--espacio-sm);
  font-size: 0.78rem;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.pie-barra-inferior {
  padding-top: var(--espacio-md);
  border-top: 1px solid var(--color-borde-suave);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  font-size: 0.75rem;
  color: var(--color-texto-apagado);
}

@media (min-width: 768px) {
  .pie-barra-inferior {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================================
   NOTIFICACIÓN TOAST ELEGANTE
   ========================================================================= */
.toast-notificacion {
  position: fixed;
  top: 96px;
  right: 1.5rem;
  z-index: 100;
  background-color: var(--color-primario);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-elevada);
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateX(120%);
  transition: transform 0.3s var(--curva-suave);
}

.toast-notificacion.toast-visible {
  transform: translateX(0);
}