/* ============================================================
   SALVO PAN & PIZZA — CSS V1
   Paleta: Navy + Coral + Hueso. Estética: Pizzilla sello postal.
   Tipografía: Bebas Neue (display) + Fraunces (titulares) + Manrope (body)
   ============================================================ */

/* ---- TOKENS ---- */
:root {
  --navy:        #1B2B4E;
  --navy-deep:   #0D1530;
  --navy-mid:    #243562;
  --hueso:       #EDE5C7;
  --hueso-deep:  #D9CFA8;
  --hueso-light: #F5F0E3;
  --coral:       #DC5A38;
  --coral-deep:  #8B2E1C;
  --coral-light: #E87055;
  --sol:         #F2A02D;
  --sol-deep:    #C47B0A;
  --linea:       #1A1A1A;
  --white:       #FFFFFF;

  /* Ease tokens */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Spacing */
  --section-py: clamp(4rem, 8vw, 8rem);
  --container:  1200px;
  --radius:     4px;
  --radius-lg:  8px;

  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1rem + 0.2vw, 18px);
  line-height: 1.6;
  color: var(--hueso);
  background-color: var(--navy-deep);
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--sol);
  outline-offset: 3px;
  border-radius: 2px;
}

ul, ol { list-style: none; }
address { font-style: normal; }

/* ---- SKIP LINK ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--coral);
  color: var(--hueso);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---- NOISE TEXTURE (global) ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ---- CONTAINER ---- */
.container {
  width: min(var(--container), 100% - 2rem);
  margin-inline: auto;
}

/* ---- TYPOGRAPHY SHARED ---- */
.section-label {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
  .section-label { font-size: 0.82rem; }
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: var(--coral);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--hueso);
  margin-bottom: 1.25rem;
}

.section-desc {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: rgba(237, 229, 199, 0.82);
  max-width: 65ch;
}

.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: left;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), transform 0.12s var(--ease-out), box-shadow 0.15s var(--ease-out);
  min-height: 44px;
  position: relative;
  will-change: transform;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }

.btn-primary {
  background: var(--coral);
  color: var(--hueso);
  border-color: var(--coral);
  box-shadow: 0 2px 8px rgba(220, 90, 56, 0.35), 0 8px 24px rgba(220, 90, 56, 0.15);
}
.btn-primary:hover {
  background: var(--coral-light);
  border-color: var(--coral-light);
  box-shadow: 0 4px 16px rgba(220, 90, 56, 0.5), 0 16px 40px rgba(220, 90, 56, 0.2);
}

.btn-outline {
  background: transparent;
  color: var(--hueso);
  border-color: rgba(237, 229, 199, 0.6);
}
.btn-outline:hover {
  background: rgba(237, 229, 199, 0.08);
  border-color: var(--hueso);
}

.btn-outline-coral {
  background: transparent;
  color: var(--coral);
  border-color: var(--coral);
}
.btn-outline-coral:hover {
  background: rgba(220, 90, 56, 0.08);
}

.btn-outline-sm {
  background: transparent;
  color: var(--hueso);
  border-color: rgba(237, 229, 199, 0.5);
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}
.btn-outline-sm:hover {
  background: rgba(237, 229, 199, 0.08);
  border-color: var(--hueso);
}

.btn-secondary {
  background: rgba(237, 229, 199, 0.08);
  color: var(--hueso);
  border-color: rgba(237, 229, 199, 0.3);
}
.btn-secondary:hover {
  background: rgba(237, 229, 199, 0.14);
  border-color: rgba(237, 229, 199, 0.6);
}

/* ============================================================
   NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s var(--ease-out);
}

.site-header.scrolled {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(13, 21, 48, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(237, 229, 199, 0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
}

.nav-logo-salvo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--hueso);
  line-height: 1;
}

.nav-logo-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(237, 229, 199, 0.7);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hueso);
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
  border-radius: 1px;
}

.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(237, 229, 199, 0.8);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-links a:hover { color: var(--hueso); background: rgba(237, 229, 199, 0.06); }

.nav-links .nav-cta {
  background: var(--coral);
  color: var(--hueso) !important;
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  font-weight: 700;
}
.nav-links .nav-cta:hover { background: var(--coral-light); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* textos al lado izquierdo (Jose 2026-06-23) */
  overflow: hidden;
  background: var(--hueso);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* mostrar mitad derecha — Pizzilla + sello Daily Planet */
}

/* El video lleva su propia motion interna (respiración Pizzilla + olas drift + sun pulse) —
   no le agregamos float-y CSS que doblaría el motion. La imagen estática (poster/fallback)
   sí tiene el float-y para que no se vea muerto si el video no carga. */
.hero-bg-video {
  display: block;
}

video.hero-bg-img {
  animation: none;
}

picture .hero-bg-img,
img.hero-bg-img:not(video.hero-bg-img *) {
  animation: hero-float-y 9s ease-in-out infinite;
  will-change: transform;
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Gradient navy DESDE LA IZQUIERDA — los textos del lado izq quedan legibles
     sobre fondo navy semi, mientras Pizzilla + sello respiran a la derecha */
  background:
    linear-gradient(
      to right,
      rgba(13, 21, 48, 0.92) 0%,
      rgba(13, 21, 48, 0.78) 28%,
      rgba(13, 21, 48, 0.35) 50%,
      rgba(13, 21, 48, 0) 68%
    ),
    linear-gradient(
      to bottom,
      rgba(13, 21, 48, 0) 60%,
      rgba(13, 21, 48, 0.55) 100%
    );
}

/* Olas japonesas decorativas — drift continuo loop */
.hero-olas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20 Q15 5 30 20 Q45 35 60 20 Q75 5 90 20 Q105 35 120 20' fill='none' stroke='rgba(237,229,199,0.04)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 120px 40px;
  background-repeat: repeat;
  opacity: 0.5;
  animation: hero-olas-drift 18s linear infinite;
  will-change: background-position;
}

@keyframes hero-olas-drift {
  from { background-position: 0 0; }
  to   { background-position: -120px 0; }  /* loop seamless: ancho del SVG */
}

/* Sol radiante */
.hero-sol {
  position: absolute;
  top: -10%;
  right: -5%;
  width: clamp(300px, 50vw, 600px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 8deg,
    rgba(242, 160, 45, 0.06) 8deg 16deg,
    transparent 16deg 24deg,
    rgba(242, 160, 45, 0.06) 24deg 32deg,
    transparent 32deg 40deg,
    rgba(242, 160, 45, 0.06) 40deg 48deg,
    transparent 48deg 56deg,
    rgba(242, 160, 45, 0.06) 56deg 64deg,
    transparent 64deg 72deg,
    rgba(242, 160, 45, 0.06) 72deg 80deg,
    transparent 80deg 88deg,
    rgba(242, 160, 45, 0.06) 88deg 96deg,
    transparent 96deg 104deg,
    rgba(242, 160, 45, 0.06) 104deg 112deg,
    transparent 112deg 120deg,
    rgba(242, 160, 45, 0.06) 120deg 128deg,
    transparent 128deg 136deg,
    rgba(242, 160, 45, 0.06) 136deg 144deg,
    transparent 144deg 152deg,
    rgba(242, 160, 45, 0.06) 152deg 160deg,
    transparent 160deg 168deg,
    rgba(242, 160, 45, 0.06) 168deg 176deg,
    transparent 176deg 184deg,
    rgba(242, 160, 45, 0.06) 184deg 192deg,
    transparent 192deg 200deg,
    rgba(242, 160, 45, 0.06) 200deg 208deg,
    transparent 208deg 216deg,
    rgba(242, 160, 45, 0.06) 216deg 224deg,
    transparent 224deg 232deg,
    rgba(242, 160, 45, 0.06) 232deg 240deg,
    transparent 240deg 248deg,
    rgba(242, 160, 45, 0.06) 248deg 256deg,
    transparent 256deg 264deg,
    rgba(242, 160, 45, 0.06) 264deg 272deg,
    transparent 272deg 280deg,
    rgba(242, 160, 45, 0.06) 280deg 288deg,
    transparent 288deg 296deg,
    rgba(242, 160, 45, 0.06) 296deg 304deg,
    transparent 304deg 312deg,
    rgba(242, 160, 45, 0.06) 312deg 320deg,
    transparent 320deg 328deg,
    rgba(242, 160, 45, 0.06) 328deg 336deg,
    transparent 336deg 344deg,
    rgba(242, 160, 45, 0.06) 344deg 352deg,
    transparent 352deg 360deg
  );
  border-radius: 50%;
  animation: hero-sol-spin 140s linear infinite;
  will-change: transform;
}

@keyframes hero-sol-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-content {
  position: relative;
  z-index: 3;
  width: min(540px, 100% - 2rem);
  margin-left: clamp(1rem, 6vw, 5rem);   /* desktop: pegado a la izquierda con respiración */
  margin-right: auto;
  text-align: left;                       /* alineado izquierda */
  padding: 2rem 0;
}

/* Mobile: cuando la imagen colapsa con object-position center, los textos
   se centran de nuevo para no chocar con Pizzilla. */
@media (max-width: 768px) {
  .hero-bg-img { object-position: center center; }
  .hero-content {
    width: min(600px, 100% - 2rem);
    margin-inline: auto;
    text-align: center;
    padding-inline: 1rem;
  }
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(13, 21, 48, 0.25) 0%,
      rgba(13, 21, 48, 0.45) 45%,
      rgba(13, 21, 48, 0.9) 100%
    );
  }
}

/* Respeta usuarios con reduced motion — frena todas las animaciones */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img,
  .hero-olas,
  .hero-sol {
    animation: none !important;
  }
}

/* Stamp frame decorativo en hero */
.hero-stamp-frame {
  width: min(360px, 90vw);
  aspect-ratio: 1;
  margin: 0 auto 2rem;
  border: 3px dashed rgba(237, 229, 199, 0.2);
  border-radius: 4px;
  position: relative;
  display: none; /* solo en desktop grande */
}

.hero-kicker {
  margin-bottom: 1.5rem;
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  background: rgba(13, 21, 48, 0.7);
  border: 1px solid rgba(237, 229, 199, 0.2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--hueso);
  backdrop-filter: blur(8px);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 2s ease infinite;
  flex-shrink: 0;
}

.status-badge.closed .status-dot { background: #f87171; animation: none; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

/* Wordmark CSS oculto visualmente — la ilustración Pizzilla ya trae su propio
   "SALVO PAN Y PIZZA" en el sello tipo Daily Planet a la derecha. Mantenemos
   el H1 accesible para SEO y screen readers via .visually-hidden pattern. */
.hero-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-title-salvo,
.hero-title-sub {
  display: inline;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 500;
  color: var(--hueso);
  text-shadow: 0 2px 12px rgba(13, 21, 48, 0.6);
  margin-bottom: 1.75rem;
  max-width: 42ch;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .hero-subtitle { margin-inline: auto; max-width: 55ch; }
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;  /* CTAs a la izquierda alineados con el resto */
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero-ctas { justify-content: center; }
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(237, 229, 199, 0.5));
  animation: scroll-line 2s ease infinite;
}

@keyframes scroll-line {
  0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1) translateY(10px); }
}

.hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: rgba(237, 229, 199, 0.4);
  text-transform: uppercase;
}

/* Spotlight cursor effect */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(242, 160, 45, 0.06) 0%, transparent 60%);
  pointer-events: none;
  transition: --mouse-x 0.1s, --mouse-y 0.1s;
}

/* ============================================================
   SECCIÓN 2: EL BARRIO
   ============================================================ */
.section-barrio {
  padding: var(--section-py) 0;
  background: var(--navy);
  position: relative;
  z-index: 1;
}

.section-barrio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20 Q15 5 30 20 Q45 35 60 20 Q75 5 90 20 Q105 35 120 20' fill='none' stroke='rgba(237,229,199,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 40px;
  pointer-events: none;
}

.barrio-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.barrio-card {
  background: rgba(237, 229, 199, 0.04);
  border: 1px solid rgba(237, 229, 199, 0.12);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.25),
    0 8px 32px rgba(0,0,0,0.15);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s;
}

.barrio-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.3),
    0 16px 48px rgba(0,0,0,0.2);
  border-color: rgba(237, 229, 199, 0.22);
}

.barrio-card--active {
  background: rgba(220, 90, 56, 0.08);
  border-color: rgba(220, 90, 56, 0.35);
  box-shadow:
    0 2px 8px rgba(220, 90, 56, 0.15),
    0 8px 32px rgba(220, 90, 56, 0.08);
}

.barrio-card-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  background: var(--coral);
  color: var(--hueso);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.75rem;
  border-radius: 100px;
}

.barrio-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.barrio-card-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--hueso);
  margin-bottom: 0.5rem;
}

.barrio-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(237, 229, 199, 0.75);
  margin-bottom: 1rem;
}

.barrio-card-link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.barrio-card-link:hover { color: var(--coral-light); }

.barrio-card-current {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(237, 229, 199, 0.5);
}

.barrio-cta-wrap { text-align: center; }

/* ============================================================
   SECCIÓN 3: EL CONCEPTO
   ============================================================ */
.section-concepto {
  background: var(--navy-deep);
  position: relative;
  z-index: 1;
}

.concepto-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

.concepto-image-wrap {
  position: relative;
  overflow: hidden;
}

.concepto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.concepto-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--navy-deep) 100%);
}

.concepto-content {
  padding: clamp(3rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.concepto-triada {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.triada-item {
  padding-left: 1.5rem;
  border-left: 2px solid rgba(220, 90, 56, 0.4);
}

.triada-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: 0.06em;
  color: var(--coral);
  margin-bottom: 0.5rem;
}

.triada-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(237, 229, 199, 0.8);
  max-width: 55ch;
}

/* ============================================================
   SECCIÓN 4: MENÚ
   ============================================================ */
.section-menu {
  padding: var(--section-py) 0;
  background: var(--hueso);
  position: relative;
  z-index: 1;
}

.section-menu .section-label { color: var(--coral-deep); }
.section-menu .section-label::before { background: var(--coral-deep); }
.section-menu .section-title { color: var(--navy-deep); }
.section-menu .section-desc { color: rgba(27, 43, 78, 0.75); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.menu-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(27, 43, 78, 0.1),
    0 8px 24px rgba(27, 43, 78, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  border: 1px solid rgba(27, 43, 78, 0.06);
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px rgba(27, 43, 78, 0.15),
    0 16px 40px rgba(27, 43, 78, 0.12);
}

.menu-card-img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}

.menu-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.menu-card:hover .menu-card-img { transform: scale(1.04); }

.menu-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.menu-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.menu-card-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.2;
}

.menu-card-price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--coral-deep);
  flex-shrink: 0;
  white-space: nowrap;
}

.menu-card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(27, 43, 78, 0.7);
  margin-bottom: 1rem;
  flex: 1;
}

.menu-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem 0;
  min-height: 44px;
  transition: color 0.15s;
  margin-top: auto;
}
.menu-card-cta:hover { color: var(--coral); }

/* ============================================================
   PIZZA DEL MES — card destacada (full width, foto grande, badge stamp)
   ============================================================ */
.menu-card--special {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  margin-bottom: 2.5rem;
  border: 2px solid var(--coral);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--white);
  box-shadow: 0 8px 32px rgba(220, 90, 56, 0.15);
}

.menu-card-img-wrap--wide {
  aspect-ratio: auto;
  position: relative;
  min-height: 320px;
}

.menu-card-img-wrap--wide .menu-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.pizza-del-mes-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--coral);
  color: var(--hueso);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  padding: 0.5rem 1rem;
  transform: rotate(8deg);
  border: 2px dashed var(--hueso);
  border-radius: 2px;
  box-shadow: 0 3px 12px rgba(220, 90, 56, 0.35);
  z-index: 2;
  pointer-events: none;
}

.menu-card-body--special {
  padding: 2rem 1.75rem;
  gap: 1rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--hueso-light) 100%);
}

.pizza-del-mes-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.4rem;
}

.menu-card--special .menu-card-name {
  font-size: 1.85rem;
  line-height: 1.1;
}

.menu-card--special .menu-card-price {
  font-size: 1.8rem;
  color: var(--coral);
}

.menu-card-desc--special {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(27, 43, 78, 0.85);
}

.menu-card--special .menu-card-cta {
  align-self: flex-start;
  background: var(--coral);
  color: var(--hueso);
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

.menu-card--special .menu-card-cta:hover {
  background: var(--coral-deep);
  color: var(--hueso);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .menu-card--special { grid-template-columns: 1fr; }
  .menu-card-img-wrap--wide { min-height: 240px; }
  .menu-card-body--special { padding: 1.5rem 1.25rem; }
  .menu-card--special .menu-card-name { font-size: 1.5rem; }
  .pizza-del-mes-badge { top: 12px; right: 12px; font-size: 0.8rem; padding: 0.4rem 0.75rem; }
}

/* ============================================================
   HORARIOS OFICIALES — variante del placeholder previo
   ============================================================ */
.horarios-oficiales { padding: 0; }
.horario-row--closed dd { color: var(--coral-deep); font-style: italic; opacity: 0.85; }
.horario-row--short dd { color: var(--navy); }

/* Sub-sección solidos */
.menu-solidos {
  margin-bottom: 2.5rem;
}

.menu-solidos-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 1.25rem;
  padding-left: 0;
}

.solidos-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 700px;
}

.solido-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(27, 43, 78, 0.1),
    0 8px 24px rgba(27, 43, 78, 0.08);
  border: 1px solid rgba(27, 43, 78, 0.06);
}

.solido-img-wrap {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.solido-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solido-body {
  padding: 1.5rem 1.5rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.solido-item { padding: 0.75rem 0; }

.solido-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.solido-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.solido-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--coral-deep);
  flex-shrink: 0;
}

.solido-desc {
  font-size: 0.9rem;
  color: rgba(27, 43, 78, 0.7);
  line-height: 1.5;
}

.solido-divider {
  height: 1px;
  background: rgba(27, 43, 78, 0.08);
  margin: 0.25rem 0;
}

.menu-nota {
  font-size: 0.9rem;
  color: rgba(27, 43, 78, 0.65);
  line-height: 1.6;
}
.menu-nota a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.menu-nota a:hover { color: var(--coral); }

/* ============================================================
   SECCIÓN 5: SALVO
   ============================================================ */
.section-salvo {
  background: var(--navy-mid);
  position: relative;
  z-index: 1;
}

.salvo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 75vh;
}

.salvo-image-wrap {
  position: relative;
  overflow: hidden;
}

.salvo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.7) saturate(0.8);
}

.salvo-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 40%,
    var(--navy-mid) 100%
  );
}

/* Sello editorial rotado */
.salvo-sello {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  width: 100px;
  height: 100px;
  border: 2px dashed rgba(242, 160, 45, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotate-sello 20s linear infinite;
}

@keyframes rotate-sello {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sello-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  animation: counter-rotate 20s linear infinite;
}

@keyframes counter-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.sello-top, .sello-bot {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sol);
}

.sello-mid {
  font-size: 0.75rem;
  color: var(--sol);
  line-height: 1;
}

.salvo-content {
  padding: clamp(3rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.salvo-bio {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: rgba(237, 229, 199, 0.82);
  max-width: 55ch;
  margin-bottom: 1.5rem;
}

.salvo-cuento-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(237, 229, 199, 0.5);
  margin-top: 0.5rem;
}

/* ============================================================
   SECCIÓN 6: GALERÍA
   ============================================================ */
.section-galeria {
  padding: var(--section-py) 0;
  background: var(--navy-deep);
  position: relative;
  z-index: 1;
}

.galeria-mosaico {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 360px;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.galeria-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
}

.galeria-item--large {
  grid-row: 1;
  grid-column: 1;
}

.galeria-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.galeria-item:hover .galeria-img { transform: scale(1.05); }

.galeria-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(237, 229, 199, 0.6);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ============================================================
   SECCIÓN 7: CÓMO PEDIR
   ============================================================ */
.section-pedir {
  padding: var(--section-py) 0;
  background: var(--navy);
  position: relative;
  z-index: 1;
}

.section-pedir::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20 Q15 5 30 20 Q45 35 60 20 Q75 5 90 20 Q105 35 120 20' fill='none' stroke='rgba(237,229,199,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 40px;
  pointer-events: none;
}

.pedir-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.pedir-grid--two {
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  max-width: 980px;
  margin-inline: auto;
  margin-bottom: 2rem;
  align-items: stretch;
}

.pedir-card {
  background: rgba(237, 229, 199, 0.04);
  border: 1px solid rgba(237, 229, 199, 0.1);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.2),
    0 8px 24px rgba(0,0,0,0.1);
  transition: transform 0.25s var(--ease-out), border-color 0.25s;
}

.pedir-card:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 229, 199, 0.2);
}

.pedir-card--featured {
  background: rgba(220, 90, 56, 0.08);
  border-color: rgba(220, 90, 56, 0.3);
  box-shadow:
    0 2px 8px rgba(220, 90, 56, 0.15),
    0 8px 32px rgba(220, 90, 56, 0.1);
}

.pedir-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(237, 229, 199, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
}

.pedir-card--featured .pedir-icon {
  background: rgba(220, 90, 56, 0.12);
}

/* ---- Card head shared (multi / delivery) ---- */
.pedir-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.pedir-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* WCAG AA: subido de 0.5 → 0.72 alpha para hitear 4.5:1 en texto <14px sobre navy-deep */
  color: rgba(237, 229, 199, 0.72);
}

.pedir-eyebrow--coral { color: var(--coral); }

.pedir-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hueso);
  line-height: 1.2;
}

.pedir-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(237, 229, 199, 0.78);
  max-width: 36ch;
  margin-inline: auto;
}

.pedir-detail {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(237, 229, 199, 0.55);
}

/* ---- Multi-channel card (Recoge tu pedido) ---- */
.pedir-card--multi {
  align-items: stretch;
  text-align: left;
  padding: 2rem 1.75rem 1.75rem;
}

.pedir-card--multi .pedir-card-head {
  align-items: flex-start;
  text-align: left;
}

.pedir-card--multi .pedir-desc {
  margin-inline: 0;
}

.pedir-channels {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 1px solid rgba(237, 229, 199, 0.1);
  padding-top: 1.25rem;
}

.pedir-channel {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 44px;
}

.pedir-channel-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(237, 229, 199, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sol);
}

.pedir-channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pedir-channel-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--hueso);
}

.pedir-channel-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--sol);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 2px 0;
  transition: color 0.15s;
}

.pedir-channel-link::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}

.pedir-channel-link:hover { color: var(--hueso); }

.pedir-channel-detail {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(237, 229, 199, 0.55);
  letter-spacing: 0.02em;
}

/* ---- Delivery card (featured) ---- */
.pedir-card--delivery {
  justify-content: space-between;
  padding: 2rem 1.75rem 1.75rem;
}

.pedir-delivery-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(237, 229, 199, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(237, 229, 199, 0.75);
  margin: 0.5rem 0;
  box-shadow: 0 0 0 1px rgba(237, 229, 199, 0.15);
}

.pedir-card--featured .pedir-delivery-icon {
  background: rgba(220, 90, 56, 0.12);
  color: var(--coral);
  box-shadow: 0 0 0 1px rgba(220, 90, 56, 0.18);
}

.pedir-delivery-nota {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(237, 229, 199, 0.5);
  margin-top: 0.6rem;
  max-width: 34ch;
}

.pedir-tel {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--sol);
  letter-spacing: 0.04em;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.pedir-tel:hover { color: var(--hueso); }

.pedir-nota {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(237, 229, 199, 0.55);
  line-height: 1.6;
  max-width: 55ch;
  margin-inline: auto;
}

/* ============================================================
   SECCIÓN 8: RESEÑAS
   ============================================================ */
.section-resenas {
  padding: var(--section-py) 0;
  background: var(--hueso-light);
  position: relative;
  z-index: 1;
}

.section-resenas .section-label { color: var(--navy-deep); }
.section-resenas .section-label::before { background: var(--navy-deep); }
.section-resenas .section-title { color: var(--navy-deep); }
.section-resenas .section-desc { color: rgba(27, 43, 78, 0.72); }

.resenas-indicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.indicio-card {
  background: var(--white);
  border: 1px solid rgba(27, 43, 78, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow:
    0 2px 6px rgba(27, 43, 78, 0.08),
    0 8px 24px rgba(27, 43, 78, 0.05);
  margin: 0;
}

.indicio-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--navy-deep);
  margin-bottom: 1rem;
}
.indicio-quote p::before { content: '"'; color: var(--coral); font-size: 1.4em; line-height: 0; vertical-align: -0.2em; margin-right: 0.1em; }
.indicio-quote p::after  { content: '"'; color: var(--coral); font-size: 1.4em; line-height: 0; vertical-align: -0.2em; margin-left: 0.1em; }

.indicio-source {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(27, 43, 78, 0.55);
  line-height: 1.5;
}

.resenas-cta-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.resenas-invitacion {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--navy-deep);
}

.section-resenas .btn-outline {
  color: var(--navy-deep);
  border-color: rgba(27, 43, 78, 0.35);
}
.section-resenas .btn-outline:hover {
  background: rgba(27, 43, 78, 0.06);
  border-color: var(--navy-deep);
}

/* ============================================================
   SECCIÓN 9: VISÍTANOS
   ============================================================ */
.section-visitanos {
  padding: var(--section-py) 0;
  background: var(--navy-deep);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.visitanos-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.visitanos-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.3) saturate(0.7);
}

.visitanos-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 48, 0.75);
}

.section-visitanos .container { position: relative; z-index: 1; }

.visitanos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.visitanos-col-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--sol);
  margin-bottom: 1.25rem;
}

.visitanos-address {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(237, 229, 199, 0.82);
  margin-bottom: 1.25rem;
}

.mapa-wrap {
  margin-top: 1.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid rgba(237, 229, 199, 0.15);
  /* Marco estilo postal editorial */
  outline: 1px solid rgba(237, 229, 199, 0.08);
  outline-offset: 4px;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.3),
    0 16px 40px rgba(0,0,0,0.2);
  filter: sepia(8%) saturate(0.9);
}

.horarios-placeholder {
  background: rgba(237, 229, 199, 0.05);
  border: 1px solid rgba(237, 229, 199, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  backdrop-filter: blur(8px);
}

.horario-pending-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--sol);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.horarios-lista { display: flex; flex-direction: column; gap: 0.5rem; }

.horario-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(237, 229, 199, 0.1);
  gap: 1rem;
}
.horario-row:last-child { border-bottom: none; }

.horario-row dt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(237, 229, 199, 0.82);
}

.horario-row dd {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--hueso);
  font-variant-numeric: tabular-nums;
}

.horario-estimate dt { color: var(--hueso); }
.horario-estimate dd { color: var(--sol); }

.horario-nota {
  font-size: 0.82rem;
  color: rgba(237, 229, 199, 0.5);
  margin-top: 1rem;
  line-height: 1.5;
}

.contacto-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contacto-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: rgba(237, 229, 199, 0.82);
  padding: 0.5rem;
  border-radius: var(--radius);
  min-height: 44px;
  transition: color 0.15s, background 0.15s;
}
.contacto-item:hover {
  color: var(--hueso);
  background: rgba(237, 229, 199, 0.06);
}

.contacto-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  flex-shrink: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid rgba(237, 229, 199, 0.1);
  padding: 3rem 0 2rem;
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.footer-brand { text-align: left; }

.footer-wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.footer-salvo {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--hueso);
  line-height: 1;
}

.footer-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(237, 229, 199, 0.6);
}

.footer-tagline {
  font-size: 0.88rem;
  color: rgba(237, 229, 199, 0.55);
}
.footer-tagline a { color: rgba(237, 229, 199, 0.7); text-decoration: underline; text-underline-offset: 3px; }
.footer-tagline a:hover { color: var(--hueso); }

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer-nav a {
  font-size: 0.9rem;
  color: rgba(237, 229, 199, 0.65);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.footer-nav a:hover { color: var(--hueso); }

.footer-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer-meta p {
  font-size: 0.85rem;
  color: rgba(237, 229, 199, 0.55);
  line-height: 1.5;
}
.footer-meta a {
  color: rgba(237, 229, 199, 0.7);
  transition: color 0.15s;
}
.footer-meta a:hover { color: var(--hueso); }

.footer-credits {
  font-size: 0.8rem !important;
  color: rgba(237, 229, 199, 0.35) !important;
  margin-top: 0.5rem;
}
.footer-credits a { color: rgba(237, 229, 199, 0.45); }
.footer-credits a:hover { color: rgba(237, 229, 199, 0.7); }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(37, 211, 102, 0.4),
    0 8px 32px rgba(37, 211, 102, 0.2);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow:
    0 6px 20px rgba(37, 211, 102, 0.5),
    0 16px 48px rgba(37, 211, 102, 0.25);
}
.wa-float:focus-visible {
  outline: 2px solid var(--sol);
  outline-offset: 3px;
}

.wa-float-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.5);
  animation: wa-pulse 2.5s ease infinite;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(27, 43, 78, 0.9);
  border: 1px solid rgba(237, 229, 199, 0.2);
  color: var(--hueso);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15);
}
.scroll-top:hover { transform: translateY(-2px); }
.scroll-top:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }
.scroll-top[hidden] { display: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bg-img, .concepto-img, .salvo-img, .galeria-img, .menu-card-img { will-change: auto; }
}

/* ============================================================
   RESPONSIVE — TABLET (768px)
   ============================================================ */
@media (max-width: 1024px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }

  .barrio-cards { grid-template-columns: 1fr; }

  .concepto-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .concepto-image-wrap { height: 50vw; min-height: 280px; }
  .concepto-img-overlay {
    background: linear-gradient(to bottom, transparent 60%, var(--navy-deep) 100%);
  }
  .concepto-content { padding: 2.5rem 1.5rem; }

  .salvo-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .salvo-image-wrap { height: 50vw; min-height: 280px; }
  .salvo-img-overlay {
    background: linear-gradient(to bottom, transparent 50%, var(--navy-mid) 100%);
  }
  .salvo-content { padding: 2.5rem 1.5rem; }

  .galeria-mosaico {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .galeria-item--large { grid-column: 1 / -1; height: 300px; }
  .galeria-item:not(.galeria-item--large) { height: 200px; }

  .visitanos-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .visitanos-grid > :first-child { grid-column: 1 / -1; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-nav { grid-column: 1 / -1; flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .footer-meta { text-align: left; }

  .pedir-grid { grid-template-columns: 1fr 1fr; }
  .pedir-grid > :last-child { grid-column: 1 / -1; }
  .pedir-grid--two { grid-template-columns: 1fr; gap: 1.25rem; }
  .pedir-grid--two > :last-child { grid-column: auto; }

  .resenas-indicios { grid-template-columns: 1fr; }

  .solido-card { grid-template-columns: 1fr; }
  .solido-img-wrap { height: 200px; }
  .solido-body { padding: 1.25rem; }
}

@media (max-width: 768px) {
  /* Nav mobile */
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(13, 21, 48, 0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    border-bottom: 1px solid rgba(237, 229, 199, 0.1);
    gap: 0.25rem;
  }

  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 0.875rem 1rem;
    font-size: 1rem;
    min-height: 48px;
  }

  .nav-links .nav-cta {
    margin-left: 0;
    justify-content: center;
    margin-top: 0.5rem;
  }

  /* Menu grid */
  .menu-grid { grid-template-columns: 1fr 1fr; }

  /* Pedir */
  .pedir-grid { grid-template-columns: 1fr; }
  .pedir-grid > :last-child { grid-column: auto; }

  /* Visitanos */
  .visitanos-grid { grid-template-columns: 1fr; }
  .visitanos-grid > :first-child { grid-column: auto; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { text-align: center; }
  .footer-wordmark { justify-content: center; }
  .footer-meta { text-align: center; }

  /* Galeria */
  .galeria-mosaico { grid-template-columns: 1fr; height: auto; }
  .galeria-item--large { grid-column: auto; height: 260px; }
  .galeria-item:not(.galeria-item--large) { height: 200px; }
}

@media (max-width: 480px) {
  .menu-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .resenas-indicios { grid-template-columns: 1fr; }
}

/* ============================================================
   POLISH v=8 (2026-06-26): lightbox + hover-tilt + carrusel reseñas
   + solidos 2 cards + card-zoom-hint
   ============================================================ */

/* ---- Card zoom hint icon (esquina superior derecha de imagen clickeable) ---- */
.menu-card-img-wrap.lightbox-trigger,
.solido-img-wrap.lightbox-trigger {
  position: relative;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  background: transparent;
  width: 100%;
  display: block;
  overflow: hidden;
}

.card-zoom-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 21, 48, 0.7);
  color: var(--hueso);
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}

.lightbox-trigger:hover .card-zoom-hint,
.lightbox-trigger:focus-visible .card-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

/* En touch (mobile) el hint queda visible sutilmente para indicar interactividad */
@media (hover: none) {
  .card-zoom-hint {
    opacity: 0.55;
    transform: translateY(0);
  }
}

.lightbox-trigger:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

/* ---- Hover 3D tilt — perspective parent + transform inner ---- */
.hover-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}

.hover-tilt:hover {
  box-shadow:
    0 10px 30px rgba(27, 43, 78, 0.18),
    0 24px 60px rgba(27, 43, 78, 0.16);
}

.hover-tilt .menu-card-img,
.hover-tilt .solido-img {
  transition: transform 0.5s var(--ease-out);
}

.hover-tilt:hover .menu-card-img,
.hover-tilt:hover .solido-img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .hover-tilt { transition: none !important; }
  .hover-tilt:hover { transform: none !important; }
  .hover-tilt .menu-card-img,
  .hover-tilt .solido-img { transition: none !important; }
}

/* ---- Solidos 2 cards independientes (rebanada + bollo preñado) ---- */
.solidos-grid--two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 640px) {
  .solidos-grid--two { grid-template-columns: 1fr; }
}

.solidos-grid--two .solido-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(27, 43, 78, 0.1),
    0 8px 24px rgba(27, 43, 78, 0.08);
  border: 1px solid rgba(27, 43, 78, 0.06);
  display: flex;
  flex-direction: column;
}

.solidos-grid--two .solido-img-wrap {
  aspect-ratio: 4/3;
  flex-shrink: 0;
}

.solidos-grid--two .solido-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solidos-grid--two .solido-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.solidos-grid--two .solido-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.solidos-grid--two .solido-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.2;
  margin: 0;
}

.solidos-grid--two .solido-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--coral-deep);
  flex-shrink: 0;
}

.solidos-grid--two .solido-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(27, 43, 78, 0.75);
  margin: 0;
}

/* ---- Marquee continuo reseñas (v10: 2026-06-28) ---- */
.resenas-marquee {
  position: relative;
  overflow: hidden;
  margin-top: 2.5rem;
  padding: 0.5rem 0 1rem;
  /* Fade gradients en ambos extremos para que las cards entren/salgan sutil */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.resenas-marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: resenas-marquee-scroll 80s linear infinite;
  will-change: transform;
}

/* Cada card mantiene ancho propio para que se vea bien la cadena */
.resenas-marquee-track .indicio-card {
  flex: 0 0 320px;
  min-width: 0;
  max-width: 320px;
  /* fondo, color, padding, border heredan de .indicio-card original (white + navy text) */
}

@media (max-width: 480px) {
  .resenas-marquee-track .indicio-card { flex: 0 0 282px; max-width: 282px; }
}

@media (min-width: 768px) {
  .resenas-marquee-track .indicio-card { flex: 0 0 360px; max-width: 360px; }
}

/* Pause on hover/focus/tap dentro de la marquee — se queda quieto para leer */
.resenas-marquee:hover .resenas-marquee-track,
.resenas-marquee:focus-within .resenas-marquee-track,
.resenas-marquee.is-paused .resenas-marquee-track {
  animation-play-state: paused;
}

/* Respeto a usuarios que reducen movimiento — animación off pero contenido visible */
@media (prefers-reduced-motion: reduce) {
  .resenas-marquee-track {
    animation: none;
    transform: translateX(0);
  }
  .resenas-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .resenas-marquee-track .indicio-card { scroll-snap-align: start; }
}

@keyframes resenas-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* -50% porque duplicamos el set: cuando avanza la mitad, el set 2 ocupa el viewport exactamente igual que el set 1 al inicio → loop seamless */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---- LIGHTBOX modal ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 21, 48, 0.92);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  padding: 2rem;
}

.lightbox[aria-hidden="false"] {
  opacity: 1;
}

.lightbox[hidden] { display: none !important; }

.lightbox-figure {
  max-width: min(1400px, 92vw);
  max-height: 88vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease-out);
}

.lightbox[aria-hidden="false"] .lightbox-figure {
  transform: scale(1);
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: rgba(237, 229, 199, 0.85);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(237, 229, 199, 0.12);
  border: 1px solid rgba(237, 229, 199, 0.25);
  color: var(--hueso);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--coral);
  border-color: var(--coral);
  transform: rotate(90deg);
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

/* Cuando lightbox abierto, body no scroll */
body.lightbox-open {
  overflow: hidden;
}

/* ============================================================
   PRINT STYLESHEET — carta italiana al imprimir (delight v12)
   Quita decorativos, deja menú + dirección + WhatsApp.
   ============================================================ */
@media print {
  /* Reset cromático: blanco + negro + acento coral solo en headlines */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  html, body {
    background: #fff !important;
    color: #1B2B4E !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  body::before,
  body::after,
  .noise-texture,
  .hero-scroll-hint,
  .site-header,
  .nav-toggle,
  .nav-links,
  .hero-spotlight,
  .hero-bg,
  .hero-video,
  .hero-image,
  .barrio-cta-wrap,
  .section-barrio,
  .section-concepto,
  .section-salvo,
  .section-pedir,
  .section-resenas,
  .galeria-mosaico,
  .lightbox,
  .scroll-top,
  .wa-float,
  .magnetic-btn,
  .btn,
  .skip-link,
  .footer-nav,
  .footer-meta,
  picture source,
  picture img,
  video,
  iframe,
  svg.hero-waves,
  .sello-postal,
  script,
  .menu-card-img-wrap,
  .menu-card-zoom-hint,
  .menu-card-special-stamp,
  .pizza-del-mes-stamp,
  .indicio-card,
  .resenas-marquee {
    display: none !important;
  }

  /* Mostrar solo: hero título + menú + visítanos */
  .hero {
    min-height: auto !important;
    padding: 0 0 1cm 0 !important;
    page-break-after: avoid;
  }

  .hero-title-salvo {
    font-family: 'Bebas Neue', 'Arial Narrow', sans-serif !important;
    font-size: 36pt !important;
    letter-spacing: 0.04em;
    color: #DC5A38 !important;
  }
  .hero-title-sub {
    font-style: italic;
    font-size: 14pt !important;
    font-weight: 400;
    color: #1B2B4E !important;
  }

  .section-menu {
    padding: 0 !important;
    page-break-inside: avoid;
  }
  .section-menu .section-label {
    font-size: 9pt !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #888 !important;
  }
  .section-menu .section-title {
    font-size: 20pt !important;
    margin-bottom: 0.4cm;
  }

  .menu-grid,
  .pizza-del-mes,
  .menu-card,
  .solidos-grid,
  .solido-card {
    display: block !important;
    border: none !important;
    padding: 0.2cm 0 !important;
    margin: 0 !important;
  }

  .menu-card-title,
  .solido-name {
    font-weight: 700;
    font-size: 13pt;
    color: #1B2B4E !important;
    margin-top: 0.3cm;
  }

  .menu-card-desc,
  .solido-desc {
    font-size: 10pt;
    color: #333 !important;
    margin: 0.05cm 0 0.3cm;
  }

  .menu-card-price,
  .solido-price {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 14pt;
    color: #DC5A38 !important;
    letter-spacing: 0.04em;
  }

  .menu-card-meta,
  .menu-card-cta { display: none !important; }

  /* Footer simple con dirección + WhatsApp para imprimir */
  .site-footer {
    margin-top: 1cm;
    padding-top: 0.5cm;
    border-top: 1pt solid #ccc !important;
    page-break-before: avoid;
  }
  .footer-brand,
  .footer-contact { display: block !important; }
  .footer-wordmark { font-family: 'Bebas Neue', sans-serif !important; font-size: 18pt !important; color: #DC5A38 !important; }

  /* URLs visibles en links externos */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #888 !important;
    font-style: italic;
  }
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after { content: ""; }

  /* Márgenes italianos */
  @page {
    margin: 1.5cm;
  }
}

/* ============================================================================
   Horarios: dos modalidades (tienda + domicilio)
   ============================================================================ */
.horarios-modo {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--sol);
  text-transform: uppercase;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 177, 56, 0.25);
  font-weight: 600;
}
.horarios-modo:first-of-type { margin-top: 0; }
.horarios-oficiales .horarios-lista + .horarios-modo { margin-top: 24px; }

/* Selection: coral/sodio Pizzilla, no azul default browser */
::selection { background: rgba(231, 111, 81, 0.85); color: #1a1a1a; }
::-moz-selection { background: rgba(231, 111, 81, 0.85); color: #1a1a1a; }

/* ============================================================
   v=16 — RONDA 2026-07-16 (11 cambios cliente)
   ============================================================ */

/* ---- LOGO OFICIAL EN NAV ---- */
.nav-logo-img {
  height: 38px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  /* Filtro para que el logo rojo se vea bien sobre el fondo navy oscuro del nav */
  filter: brightness(1.05);
}

/* ---- LOGO OFICIAL EN FOOTER ---- */
.footer-logo-img {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  margin-bottom: 0.5rem;
}

/* ---- SECCIÓN PAN DEL HORNO ---- */
.section-pan {
  padding: var(--section-py) 0;
  background: var(--navy);
  position: relative;
  z-index: 1;
}

.section-pan::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 20 Q15 5 30 20 Q45 35 60 20 Q75 5 90 20 Q105 35 120 20' fill='none' stroke='rgba(237,229,199,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 40px;
  pointer-events: none;
}

.pan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  max-width: 700px;
}

.pan-card {
  background: rgba(237, 229, 199, 0.04);
  border: 1px solid rgba(237, 229, 199, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.25),
    0 8px 32px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease-out), border-color 0.25s;
}

.pan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(237, 229, 199, 0.22);
}

.pan-card-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.pan-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

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

.pan-card-pending-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 229, 199, 0.75);
  background: rgba(13, 21, 48, 0.75);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

.pan-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.pan-card-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: 0.06em;
  color: var(--hueso);
  line-height: 1.1;
}

.pan-card-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(237, 229, 199, 0.72);
}

.pan-nota {
  font-size: 0.9rem;
  color: rgba(237, 229, 199, 0.55);
  line-height: 1.6;
  margin-top: 0.5rem;
}

.pan-nota a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pan-nota a:hover { color: var(--coral-light); }

@media (max-width: 480px) {
  .pan-grid { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================================
   PIZZA POSTER GRID — layout retro póster diner americano
   Referencia: page2-img1-1080x1350.png (verde oscuro + tipografía
   condensada bold + precios cartel). Bebas Neue ya cargada.
   ============================================================ */

/* Token de color verde oscuro retro (alineado con paleta navy del sitio) */
:root {
  --pizza-poster-green: #0f3d2e;
  --pizza-poster-green-mid: #1a5240;
  --pizza-poster-green-light: #2a6952;
}

.pizza-poster-grid {
  display: grid;
  /* Grid "doblado" a 6 columnas (cada card ocupa 2) para poder centrar
     filas incompletas con tracks enteros, sin estirar el ancho real de
     las cards. El ancho visual sigue siendo el de un grid de 3. */
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

/* Última fila con 1 sola card sobrante (total de cards ≡ 1 mod 3:
   4, 7, 10...). Se centra en las columnas 3-4 de 6, dejando 2 columnas
   vacías simétricas a cada lado. Sin este hack la card cae pegada a
   la izquierda. */
.pizza-poster-card:last-child:nth-child(3n + 1) {
  grid-column: 3 / span 2;
}

/* Última fila con 2 cards sobrantes (total ≡ 2 mod 3: 5, 8, 11...).
   Se centran como par en las columnas 2-5, dejando 1 columna vacía
   simétrica a cada lado. La primera regla toma la penúltima card,
   la segunda toma la última — juntas arman el par centrado. */
.pizza-poster-card:nth-last-child(2):nth-child(3n + 1) {
  grid-column: 2 / span 2;
}
.pizza-poster-card:last-child:nth-child(3n + 2) {
  grid-column: 4 / span 2;
}

.pizza-poster-card {
  grid-column: span 2;
  background: var(--pizza-poster-green);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.35),
    0 16px 48px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  position: relative;
}

.pizza-poster-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.45),
    0 24px 64px rgba(0,0,0,0.28);
}

/* Foto de pizza — ocupa los 2/3 superiores de la card */
.pizza-poster-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: transparent;
  width: 100%;
  display: block;
  cursor: zoom-in;
}

.pizza-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.pizza-poster-card:hover .pizza-poster-img { transform: scale(1.06); }

/* Banda inferior verde con toda la info tipográfica */
.pizza-poster-band {
  background: var(--pizza-poster-green);
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 2px solid var(--pizza-poster-green-light);
  flex: 1;
}

/* Nombre de la pizza — tipografía condensada display bold, estilo cartel */
.pizza-poster-name {
  font-family: var(--font-display); /* Bebas Neue — ya cargada */
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1;
  text-transform: uppercase;
}

/* Fila de precios con dos columnas: REBANADA | ENTERA */
.pizza-poster-pricing {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.25rem 0;
}

.pizza-poster-price-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.pizza-poster-price-col:last-child { align-items: flex-end; }

.pizza-poster-divider {
  width: 1px;
  background: rgba(255,255,255,0.18);
  margin: 0 0.65rem;
  flex-shrink: 0;
}

.pizza-poster-size-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1.2;
  white-space: nowrap;
}

/* Precio estilo cartel: "$" pequeño superíndice + número grande */
.pizza-poster-price {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.05em;
  line-height: 1;
  color: var(--white);
}

.pizza-poster-currency {
  font-family: var(--font-body);
  font-size: 0.65em;
  font-weight: 700;
  margin-top: 0.1em;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
}

.pizza-poster-amount {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Descripción breve en banda verde */
.pizza-poster-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  margin-top: 0.15rem;
}

/* CTA inline */
.pizza-poster-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--coral-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
  padding: 0.3rem 0;
  transition: color 0.15s;
  margin-top: auto;
}
.pizza-poster-cta:hover { color: var(--sol); }
.pizza-poster-cta:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 2px; }

/* Responsive: 2 columnas en tablet, 1 columna en mobile.
   Igual que en desktop, tablet usa un grid "doblado" (4 columnas,
   cada card ocupa 2) para poder centrar filas incompletas con
   tracks enteros. */
@media (max-width: 1024px) {
  .pizza-poster-grid { grid-template-columns: repeat(4, 1fr); }
  .pizza-poster-card { grid-column: span 2; }

  /* Neutraliza los overrides de centrado pensados para el grid de
     6 columnas de desktop — en tablet el patrón de sobrante es otro
     (2 por fila, no 3). */
  .pizza-poster-card:last-child:nth-child(3n + 1),
  .pizza-poster-card:nth-last-child(2):nth-child(3n + 1),
  .pizza-poster-card:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }

  /* 1 sola card sobrante en la última fila (total impar: 3, 5, 7...).
     Se centra en las columnas 2-3 de 4, dejando 1 columna vacía
     simétrica a cada lado. Con 4 cards no sobra ninguna — caben
     perfectas en 2 filas de 2 — así que esta regla no aplica. */
  .pizza-poster-card:last-child:nth-child(2n + 1) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 600px) {
  .pizza-poster-grid { grid-template-columns: 1fr; }

  /* Neutraliza el grid "doblado" de desktop/tablet — en 1 columna
     cada card vuelve a ocupar su única columna, tal cual estaba
     antes de este cambio. */
  .pizza-poster-card,
  .pizza-poster-card:last-child:nth-child(3n + 1),
  .pizza-poster-card:nth-last-child(2):nth-child(3n + 1),
  .pizza-poster-card:last-child:nth-child(3n + 2),
  .pizza-poster-card:last-child:nth-child(2n + 1) {
    grid-column: auto;
  }

  .pizza-poster-img-wrap { aspect-ratio: 4 / 3; }
  .pizza-poster-name { font-size: clamp(2rem, 8vw, 2.8rem); }
  .pizza-poster-amount { font-size: clamp(1.6rem, 5vw, 2rem); }
}

/* ============================================================
   CAMBIO 9 — Fix Godzilla mobile: hero-bg-img object-position
   En viewport mobile el personaje Pizzilla (Godzilla con pizza)
   quedaba cortado a la izquierda. Movemos el focal point
   ligeramente hacia la derecha para que la rebanada no se corte.
   ============================================================ */
@media (max-width: 768px) {
  .hero-bg-img {
    object-position: 60% center;
  }
}

/* ============================================================
   GSAP stagger hooks para nuevas secciones (v16)
   Los selectores necesarios para que initAnimations() los capture
   ya están cubiertos por los patrones 1 y 2 existentes:
   - .section-header -> Patrón 1
   - .pan-card -> Patrón 2 (selector [class*="card"])
   - .pizza-poster-card -> Patrón 2 (selector [class*="card"])
   No se requiere JS adicional.
   ============================================================ */

/* Print: asegurar que secciones nuevas también queden visibles al imprimir */
@media print {
  .section-pan,
  .pizza-poster-grid,
  .pan-grid { display: block !important; }

  .pizza-poster-card,
  .pan-card {
    background: transparent !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-bottom: 0.5cm;
  }

  .pizza-poster-band { background: transparent !important; }
  .pizza-poster-name { color: #1B2B4E !important; }
  .pizza-poster-amount { color: #DC5A38 !important; }
  .pizza-poster-size-label,
  .pizza-poster-desc,
  .pizza-poster-currency { color: #444 !important; }

  .pan-card-name { color: #1B2B4E !important; }
  .pan-card-pending-badge,
  .pizza-poster-cta,
  .pan-nota { display: none !important; }
}

/* ============================================================
   SECCIÓN EDITORIAL — El Proceso (SEO/AEO)
   Misma paleta y estética Pizzilla del sitio.
   Fondo: --hueso-light (alternando con --navy-deep de oficio)
   ============================================================ */

.section-editorial {
  background-color: var(--hueso-light);
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}

/* Textura grain sobre fondo hueso */
.section-editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

.section-editorial .container {
  position: relative;
  z-index: 1;
}

/* Header de la sección editorial usa colores invertidos (texto navy sobre hueso) */
.section-editorial .section-label {
  color: var(--coral);
  border-color: rgba(220, 90, 56, 0.35);
  background: rgba(220, 90, 56, 0.08);
}

.section-editorial .section-title {
  color: var(--navy-deep);
}

.section-editorial .section-desc {
  color: var(--navy-mid);
}

/* Grid de 3 artículos — columna única en móvil, 3 col en desktop */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  .editorial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* Tarjeta editorial — glassmorphism sobre hueso */
.editorial-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 43, 78, 0.12);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 2.25rem;
  box-shadow:
    0 2px 8px rgba(27, 43, 78, 0.08),
    0 8px 32px rgba(27, 43, 78, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.editorial-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 16px rgba(27, 43, 78, 0.12),
    0 16px 48px rgba(27, 43, 78, 0.10);
}

/* Icono decorativo */
.editorial-card-icon {
  color: var(--coral);
  flex-shrink: 0;
}

.editorial-card-icon svg {
  display: block;
}

/* Título del artículo */
.editorial-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  letter-spacing: 0.02em;
  color: var(--navy-deep);
  line-height: 1.2;
}

/* Cuerpo del artículo editorial */
.editorial-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.editorial-card-body p {
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 1vw, 0.95rem);
  line-height: 1.7;
  color: #2a3a5c;
}

/* Print: mostrar el contenido editorial completo */
@media print {
  .section-editorial { background: white !important; }
  .editorial-card {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  .editorial-card-title { color: #0D1530 !important; }
  .editorial-card-body p { color: #333 !important; }
}

/* Placeholder tipográfico para pizza del mes sin foto aún (mientras el fotógrafo captura) */
/* HUÉRFANO desde la sesión de fotos (31/07/2026): la Pizza D'Eli ya usa foto real en el markup,
   este bloque quedó sin uso. No se borra por si se necesita un placeholder similar a futuro. */
.pizza-del-mes-placeholder {
  background: linear-gradient(135deg, #2a1810 0%, #3d251a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: 320px;
}
.pizza-placeholder-inner {
  text-align: center;
  color: #f5ede0;
  max-width: 90%;
}
.pizza-placeholder-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 237, 224, 0.6);
  margin-bottom: 14px;
}
.pizza-placeholder-name {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: #f5ede0;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.pizza-placeholder-note {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(245, 237, 224, 0.6);
}
@media (max-width: 720px) {
  .pizza-del-mes-placeholder { min-height: 240px; }
}