/* =================================================================
   CANELLE — HOJA DE ESTILOS COMPARTIDA
   PROTOTIPO prototype/brand-identity-beige-black: identidad reinterpretada
   a partir de la presentación de marca (negro + crema + beige + taupe,
   Inter Bold para títulos, naranja reservado a acento). El archivo base
   (rama main) usa Anton + naranja dominante — ver ese historial para
   contexto de las decisiones originales. Este bloque de tokens es lo
   único que cambia de identidad; la arquitectura (mismas clases, mismo
   HTML) se conserva intacta a propósito.
================================================================= */

/* -----------------------------------------------------------------
   1. TOKENS
----------------------------------------------------------------- */
:root {
  --color-bg:          #F4F0E8;
  --color-bg-alt:      #FFFFFF;
  --color-beige:       #DDD8D0;
  --color-orange:      #F15A22;
  --color-orange-dark: #C94A16;
  --color-dark:        #141210;
  --color-mid:         #7A7060;
  --color-taupe:       #9A8D85;
  --color-white:       #FFFFFF;
  --color-cream:       #EDE8DE;
  /* Marrón oscuro cálido para las "manchas" orgánicas de /menu/ — evoca
     café/chocolate, nunca negro puro (ver sección 24). */
  --color-coffee-dark: #2E2015;
  /* Fondo de estudio de las 6 fotos del grid de Servicios (Home) — el
     mismo tono exacto se usa en la sección para que foto y fondo se
     sientan continuos. Deliberadamente distinto de --color-bg. */
  --color-editorial-bg: #F1F0ED;

  --font-display:      'Inter', sans-serif;
  --font-body:         'Inter', sans-serif;

  --ease-premium:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --transition-base:   0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow:   0.9s cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-orange:     0 8px 30px rgba(241, 90, 34, 0.18);
  --shadow-soft:       0 4px 20px rgba(26, 26, 26, 0.08);

  --radius-card:       12px;
  --radius-btn:        6px;
  --max-width:         1200px;
  --max-width-narrow:  760px;

  --space-section:     clamp(64px, 9vw, 140px);
}

/* -----------------------------------------------------------------
   2. RESET / BASE
----------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-dark);
  line-height: 1.6;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.loaded {
  opacity: 1;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: var(--font-body);
  cursor: pointer;
}
::selection {
  background: var(--color-orange);
  color: var(--color-white);
}
:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}
/* .btn-gold ahora es negro/crema — el anillo naranja por defecto ya
   contrasta bien ahí. .pd-add es el único btn-gold que sigue siendo
   naranja (ver más abajo), así que solo ese necesita oscurecer el
   anillo para no perder contraste naranja-sobre-naranja. */
.pd-add:focus-visible {
  outline-color: var(--color-dark);
}

/* -----------------------------------------------------------------
   3. TIPOGRAFÍA
----------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid);
}
.eyebrow.on-dark {
  color: rgba(255, 255, 255, 0.65);
}
.eyebrow.accent {
  color: var(--color-orange-dark);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-dark);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.section-title.on-dark { color: var(--color-cream); }
.section-title.centered { text-align: center; }

.display-huge {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.eyebrow-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-mid);
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   4. LAYOUT
----------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.container-narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 40px;
}
.section {
  padding: var(--space-section) 40px;
}

/* -----------------------------------------------------------------
   5. BOTONES
----------------------------------------------------------------- */
/* Prototipo: CTA primario pasa de superficie naranja a negro/crema — el
   naranja se reserva para acentos puntuales (ver .pd-add más abajo, el
   único botón que conserva el naranja como CTA de conversión). */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-dark);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
}
.btn-gold:hover {
  background: #2b2723;
  transform: scale(1.03);
  box-shadow: var(--shadow-soft);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-dark);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--color-dark);
  cursor: pointer;
  transition: var(--transition-base);
}
.btn-outline:hover {
  border-color: var(--color-orange);
  color: var(--color-orange-dark);
  transform: scale(1.03);
}
.btn-outline.on-dark {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.4);
}
.btn-outline.on-dark:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.btn-text-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.3s ease, color 0.3s ease;
}
.btn-text-arrow:hover {
  gap: 13px;
  color: var(--color-orange-dark);
}
.btn-text-arrow svg { transition: transform 0.3s ease; }
.btn-text-arrow:hover svg { transform: translateX(3px); }

/* -----------------------------------------------------------------
   6. CLASES DE ANIMACIÓN (Scroll Reveal)
----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

.stagger-child:nth-child(1) { transition-delay: 0s; }
.stagger-child:nth-child(2) { transition-delay: 0.1s; }
.stagger-child:nth-child(3) { transition-delay: 0.2s; }
.stagger-child:nth-child(4) { transition-delay: 0.3s; }
.stagger-child:nth-child(5) { transition-delay: 0.4s; }
.stagger-child:nth-child(6) { transition-delay: 0.5s; }

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--color-orange);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
}

/* -----------------------------------------------------------------
   7. HEADER / NAVEGACIÓN
----------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 26px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.navbar.on-photo .navbar-links a,
.navbar.on-photo .logo-sub { color: var(--color-white); }
.navbar.on-photo .logo-main { color: var(--color-white); }
.navbar.on-photo .navbar-hamburger span { background: var(--color-white); }

.navbar.scrolled,
.navbar.solid {
  background: rgba(245, 240, 232, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.06);
  padding: 16px 40px;
}
.navbar.scrolled.on-photo .navbar-links a,
.navbar.solid.on-photo .navbar-links a,
.navbar.scrolled .navbar-links a,
.navbar.solid .navbar-links a { color: var(--color-dark); }
.navbar.scrolled .logo-main,
.navbar.solid .logo-main { color: var(--color-orange); }
.navbar.scrolled .logo-sub,
.navbar.solid .logo-sub { color: var(--color-dark); }
.navbar.scrolled .navbar-hamburger span,
.navbar.solid .navbar-hamburger span { background: var(--color-dark); }

.navbar-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.logo-main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--color-orange);
  line-height: 1;
}
.logo-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.navbar-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.navbar-links a {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  position: relative;
  transition: color 0.3s ease;
}
.navbar-links a[aria-current="page"] {
  color: var(--color-orange);
}
.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%; right: 50%;
  height: 1px;
  background: var(--color-orange);
  transition: left 0.3s var(--ease-premium), right 0.3s var(--ease-premium);
}
.navbar-links a:hover::after { left: 0; right: 0; }
.navbar-links .btn-gold { padding: 10px 22px; font-size: 0.8rem; }
.navbar-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navbar-cart::after { content: none; }
.navbar-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.navbar-cart-count[hidden] { display: none; }
.mobile-menu-cart {
  font-size: 1rem !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-menu-cart .navbar-cart-count { position: static; }

.navbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.navbar-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-dark);
  transition: var(--transition-base);
}
.navbar-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar-hamburger.open span:nth-child(2) { opacity: 0; }
.navbar-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  /* Origen del reveal espejado a la izquierda (antes calc(100% - 60px)):
     el hamburger que dispara esta animación ahora vive en esa esquina. */
  clip-path: circle(0% at 60px 40px);
  transition: clip-path 0.6s var(--ease-premium);
  pointer-events: none;
  overflow-y: auto;
  padding: 32px 20px;
}
.mobile-menu.open {
  clip-path: circle(150% at 60px 40px);
  pointer-events: all;
}
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--color-dark);
}
.mobile-menu a:hover { color: var(--color-orange); }

/* -----------------------------------------------------------------
   8. HERO (Home) — Iteración 2: video full-bleed, sin panel lateral
----------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-dark);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 62% en vez de 50%: el nuevo video (Artlist/Kling) tiene el cabello
     sobre la derecha del encuadre — un center-crop simétrico lo recortaba
     en viewports intermedios (~1024-1280px). Verificado con simulación de
     crop en varios breakpoints, ver videos/README.md. */
  object-position: 62% 38%;
}
/* Oscurece lo suficiente a la izquierda para leer el texto sin volver a
   crear el panel negro sólido que se quitó — a la derecha el video queda
   prácticamente sin filtro. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(15,13,11,0.66) 0%, rgba(15,13,11,0.4) 30%, rgba(15,13,11,0.1) 55%, rgba(15,13,11,0) 72%),
              linear-gradient(0deg, rgba(15,13,11,0.5) 0%, rgba(15,13,11,0) 26%);
}

.hero-text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  max-width: 620px;
  padding: 120px 40px 96px;
}
.hero-eyebrow {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.7s var(--ease-premium) 0ms forwards;
  color: rgba(255,255,255,0.7);
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  color: var(--color-white);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
  clip-path: inset(0 100% 0 0);
  animation: revealText 1.0s var(--ease-premium) 180ms forwards;
}
.hero-headline em {
  font-style: normal;
  color: var(--color-orange);
}
.hero-subtitle {
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.7s var(--ease-premium) 380ms forwards;
}
.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.7s var(--ease-premium) 560ms forwards;
}

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes revealText { to { clip-path: inset(0 0% 0 0); } }

/* -----------------------------------------------------------------
   9. BANNER DE PÁGINA INTERIOR (Servicios / Nosotros / Contacto)
----------------------------------------------------------------- */
.page-intro {
  padding: 150px 40px 64px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.page-intro-photo {
  position: relative;
  padding: 0;
  margin-top: 88px;
  height: 46vh;
  min-height: 320px;
  overflow: hidden;
}
.page-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-intro-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.35) 0%, rgba(26,26,26,0.08) 45%, rgba(26,26,26,0.55) 100%);
}
.page-intro-photo-caption {
  position: absolute;
  z-index: 2;
  left: 40px;
  bottom: 36px;
  color: var(--color-white);
}
.page-intro-photo-caption .section-title { color: var(--color-white); }

/* -----------------------------------------------------------------
   10. HOMEPAGE — SERVICIOS DESTACADOS (tipográfico, sin cards)
   (sección "manifiesto"/"tu lugar favorito" eliminada en este prototipo)
----------------------------------------------------------------- */
.servicios-destacados {
  padding: clamp(48px, 6vw, 90px) 40px var(--space-section);
  max-width: var(--max-width);
  margin: 0 auto;
}
.sd-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sd-cta { margin-top: 40px; text-align: center; }

/* -----------------------------------------------------------------
   11b. GRID EDITORIAL DE SERVICIOS — preview de Home únicamente
   (/servicios/ usa su propio catálogo editorial, ver sección 16).
   Referencia deliberada: grid "OUR SERVICES" de fabioscalia.com — 3x2,
   tiles 4:3 (no cuadrados: un cuadrado se siente "retrato gigante" a
   la misma anchura), gap mínimo, mosaico contenido con margen visible
   a los lados (NO full-bleed), foto monocromática + overlay sutil +
   nombre blanco fino centrado. Assets y contenido son 100% Canelle.
----------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.service-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-editorial-bg);
}
.service-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  /* Monocromo elegante en vez de a color: se acerca al lenguaje visual
     de la referencia sin tocar los archivos — 100% reversible.
     grayscale(0.2) deja más color de piel visible que 0.32, mismo
     tratamiento editorial. */
  filter: grayscale(0.2) contrast(1.08) brightness(1.04);
  transition: transform 0.55s var(--ease-premium), filter 0.4s ease;
}
/* object-position individual — el crop cuadrado original (1200x1200)
   pasa a mostrarse en un marco 4:3 (más ancho que alto), así que cada
   foto pierde franjas de arriba/abajo distintas; se ajusta por tile
   para que cabello + rostro queden dentro de cuadro. */
.service-tile-img--cut-style { object-position: center 18%; }
.service-tile-img--color { object-position: center 24%; }
.service-tile-img--bridal { object-position: center 14%; }
.service-tile-img--extensions { object-position: center 20%; }
.service-tile-img--scalp { object-position: center 26%; }
.service-tile-img--straightening { object-position: center 20%; }

.service-tile::after {
  /* Overlay oscuro muy sutil — solo para legibilidad del texto, la
     foto sigue siendo la protagonista en estado normal. */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.22);
  transition: background 0.5s ease;
}
.service-tile:hover .service-tile-img {
  transform: scale(1.05);
}
.service-tile:hover::after {
  background: rgba(10, 9, 8, 0.34);
}
.service-tile-name {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* -----------------------------------------------------------------
   13. HOMEPAGE — TRABAJO (díptico editorial)
----------------------------------------------------------------- */
/* Iteración 2: banda beige de ancho completo (truco box-shadow +
   clip-path, sin tocar el HTML) — refuerza la presencia del beige en
   Home, no solo en Nosotros, como pide la dirección de marca. */
.trabajo {
  position: relative;
  padding: var(--space-section) 40px;
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-beige);
  box-shadow: 0 0 0 100vmax var(--color-beige);
  clip-path: inset(0 -100vmax);
}
.trabajo-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.trabajo-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}
.trabajo-diptych .tp-item:nth-child(2) { margin-top: 40px; }
.tp-item {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4/5;
}
.tp-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-premium);
}
.tp-item:hover img { transform: scale(1.045); }
.tp-caption {
  position: absolute;
  left: 18px; bottom: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  z-index: 1;
}
.tp-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.trabajo-cta { margin-top: 40px; text-align: center; }

/* -----------------------------------------------------------------
   14. HOMEPAGE — RESEÑAS EDITORIAL
----------------------------------------------------------------- */
.resenas-editorial {
  padding: var(--space-section) 40px;
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  text-align: center;
}
.re-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  text-transform: lowercase;
  color: var(--color-dark);
}
.re-quote::before { content: '\201C'; color: var(--color-orange); }
.re-quote::after { content: '\201D'; color: var(--color-orange); }
.re-author {
  margin-top: 20px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--color-mid);
}
.re-divider {
  width: 40px;
  height: 1px;
  background: rgba(241,90,34,0.35);
  margin: 56px auto;
}

/* -----------------------------------------------------------------
   15. HOMEPAGE — CTA FINAL
----------------------------------------------------------------- */
.cta-final {
  padding: var(--space-section) 40px;
  background: var(--color-dark);
  text-align: center;
}
.cta-final .eyebrow { color: rgba(255,255,255,0.5); }
.cta-final .section-title { margin-top: 14px; }
.cta-final-buttons {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-final-contact {
  margin-top: 28px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
}
.cta-final-contact a { color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.25); }
.cta-final-contact a:hover { color: var(--color-orange); border-color: var(--color-orange); }

/* -----------------------------------------------------------------
   15c. SERVICIOS — grid editorial de Home (contenedor + banda CTA compacta)
----------------------------------------------------------------- */
.services-grid-wrap {
  /* Sin margin negativo: el mosaico queda inset dentro del padding de
     40px de .servicios-destacados, con margen visible a los lados —
     como en la referencia, en vez de ir a bordes del contenedor. */
}
.servicios-cta-band {
  background: var(--color-cream);
}
.servicios-cta-band-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.servicios-cta-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-dark);
}
.servicios-cta-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.88rem;
  color: var(--color-mid);
  margin-top: 2px;
}
.servicios-cta-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.servicios-cta-actions .btn-gold { padding: 12px 26px; font-size: 0.85rem; }
.servicios-cta-whatsapp {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.servicios-cta-whatsapp:hover { color: var(--color-orange-dark); border-color: var(--color-orange-dark); }

/* -----------------------------------------------------------------
   16. SERVICIOS — página completa (catálogo editorial, Fase 8 — spec
   visual autoritativo: render de referencia, ver ASSETS_REQUIRED.md).
   Home conserva su propio grid editorial de categorías (ver 11b, .services-grid).
   Esta sección es exclusiva de /servicios/: hero fotográfico horizontal
   + filas editoriales info/foto (siempre foto a la derecha), sin cards,
   sin botón por fila — la conversión vive en el CTA final. Fase 10:
   precios reales agregados por fila (ver .catalog-row-price), sin
   convertir la fila en tabla de precios — el nombre sigue siendo el
   elemento con más peso visual.
----------------------------------------------------------------- */
.servicios-hero {
  position: relative;
  margin-top: 88px;
  height: clamp(320px, 30vw, 400px);
  overflow: hidden;
}
.servicios-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.servicios-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,20,15,0.3) 0%, rgba(30,20,15,0.32) 55%, rgba(30,20,15,0.48) 100%);
}
.servicios-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
}
.servicios-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-white);
}
.servicios-hero-sub {
  max-width: 560px;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}

.catalog { padding-bottom: var(--space-section); }
.catalog-section {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 40px;
  scroll-margin-top: 88px;
}
.catalog-section + .catalog-section {
  border-top: 1px solid rgba(26,26,26,0.08);
}
.catalog-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 56px;
  align-items: start;
}
/* Categorías sin foto real dedicada (ver ASSETS_REQUIRED.md): una sola
   columna de ancho de lectura en vez de forzar un placeholder vacío. */
.catalog-grid--solo { grid-template-columns: minmax(0, 720px); }

.catalog-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.catalog-index {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-orange);
}
.catalog-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}
.catalog-underline {
  display: block;
  width: 28px;
  height: 2px;
  margin: 10px 0 20px;
  background: var(--color-orange);
}
.catalog-list {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 100px;
}
.catalog-row {
  display: grid;
  grid-template-columns: minmax(100px, 150px) 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid rgba(158,142,128,0.28);
  transition: background 0.3s ease;
  scroll-margin-top: 100px;
}
.catalog-list .catalog-row:last-child { border-bottom: 1px solid rgba(158,142,128,0.28); }
.catalog-row:hover { background: rgba(241,90,34,0.035); }
.catalog-row-name {
  grid-column: 1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark);
}
.catalog-row-desc {
  grid-column: 2;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.55;
}
/* Precio: legible pero subordinado al nombre del servicio (que sigue
   siendo el elemento de mayor peso — ver catalog-row-name). Columna
   explícita (grid-column: 3) para que una fila sin descripción no
   desplace el precio a la columna del medio. */
.catalog-row-price {
  grid-column: 3;
  justify-self: end;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-orange-dark);
  white-space: nowrap;
}
/* Sin precio confirmado (ej. "Consultar") — mismo tono que la
   descripción, nunca un precio inventado ni un $0. */
.catalog-row-price--muted {
  font-weight: 500;
  font-style: italic;
  color: var(--color-mid);
}

.catalog-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.catalog-photo img { width: 100%; height: 100%; object-fit: cover; }
.catalog-photo-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.catalog-photo-stack .catalog-photo { aspect-ratio: 3 / 2; }

/* -----------------------------------------------------------------
   17. NOSOTROS — página completa
----------------------------------------------------------------- */
.about-full {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 40px var(--space-section);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-full p {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.8;
}
.about-stats-full {
  padding: 64px 40px;
  background: var(--color-beige);
}
.about-stats-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stat-item { display: flex; flex-direction: column; gap: 6px; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-dark);
  line-height: 1;
}
.stat-label { font-size: 0.78rem; color: var(--color-mid); letter-spacing: 0.05em; }

.proceso {
  padding: var(--space-section) 40px;
  background: var(--color-dark);
}
.proceso-inner { max-width: var(--max-width); margin: 0 auto; }
.proceso-header { text-align: center; margin-bottom: 64px; }
.proceso-header .section-title { margin-top: 12px; }
.proceso-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.proceso-step { display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: center; }
.proceso-step-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--color-cream);
  line-height: 1;
}
.proceso-step-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}
.proceso-step-desc {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 26ch;
}

.reviews-full {
  padding: var(--space-section) 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.reviews-full-header { text-align: center; margin-bottom: 56px; }
.reviews-full-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
}
.review-full-item { border-top: 1px solid rgba(26,26,26,0.1); padding-top: 22px; }
.review-full-quote {
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.75;
}
.review-full-author {
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-dark);
}

/* -----------------------------------------------------------------
   18. CONTACTO — página completa
----------------------------------------------------------------- */
.contact-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px var(--space-section);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 26px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item-icon {
  width: 42px; height: 42px;
  background: rgba(241, 90, 34, 0.08);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--color-orange);
}
.contact-item-text { display: flex; flex-direction: column; gap: 2px; }
.contact-item-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--color-orange-dark);
}
.contact-item-value { font-size: 0.92rem; color: var(--color-mid); font-weight: 300; }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: var(--color-white);
  font-weight: 500; font-size: 0.9rem;
  padding: 14px 28px; border-radius: var(--radius-btn); border: none;
  cursor: pointer; transition: var(--transition-base);
}
.btn-whatsapp:hover { background: #1ebe59; transform: scale(1.03); }

.schedule-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 8px;
  box-shadow: var(--shadow-soft);
}
.schedule-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(26,26,26,0.06);
  transition: background 0.2s ease;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row.today { background: rgba(241, 90, 34, 0.06); }
.schedule-day { font-weight: 500; font-size: 0.86rem; }
.schedule-time { font-size: 0.84rem; color: var(--color-mid); }
.schedule-row.today .schedule-day,
.schedule-row.today .schedule-time { color: var(--color-orange-dark); font-weight: 700; }
.schedule-row.closed .schedule-time { color: var(--color-taupe); }
.schedule-note {
  font-size: 0.86rem; font-weight: 300; color: var(--color-mid);
  margin-top: 20px; font-style: italic;
}

/* Formulario de contacto */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label {
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--color-mid); text-transform: uppercase;
}
.form-input, .form-textarea, .form-select {
  background: var(--color-white);
  border: 1px solid var(--color-cream);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-dark);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
  width: 100%;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(241, 90, 34, 0.1);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7060' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-status {
  font-size: 0.85rem; padding: 12px 16px; border-radius: 10px; display: none;
}
.form-status.success {
  display: block; background: rgba(37, 211, 102, 0.1); color: #1a8a40;
  border: 1px solid rgba(37, 211, 102, 0.2);
}
.form-status.error {
  display: block; background: rgba(220, 60, 60, 0.08); color: #a03030;
  border: 1px solid rgba(220, 60, 60, 0.15);
}
.form-status.fallback {
  display: block; background: rgba(241,90,34,0.06); color: var(--color-orange-dark);
  border: 1px solid rgba(241,90,34,0.18);
}
.form-input.valid, .form-textarea.valid, .form-select.valid { border-color: #4CAF50; }
.form-input.invalid, .form-textarea.invalid, .form-select.invalid {
  border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}
.checkbox-group { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-orange); cursor: pointer; }
.checkbox-group label { font-size: 0.88rem; color: var(--color-mid); cursor: pointer; }

/* -----------------------------------------------------------------
   18b. PRODUCTOS — Home (sección compacta) + página completa /productos/
   (Fase 9). Principio visual: foto de producto protagonista, mucho aire,
   nombre y precio debajo, cero cards pesadas (sin sombra/radius grande/
   borde grueso) — adaptado, no copiado, de referencias de e-commerce
   editorial premium. Hoy no existe catálogo real (ver PRODUCTS_REQUIRED.md)
   así que .product-grid / .product-card-link se documentan aquí listos
   para usarse, pero lo que se renderiza en vivo es un estado vacío
   honesto — nunca productos inventados.
----------------------------------------------------------------- */
.productos-destacados {
  padding: clamp(56px, 8vw, 104px) 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.pd-header { text-align: center; margin-bottom: 36px; }
.pd-header .section-title { margin-top: 10px; }
.pd-header-sub {
  margin-top: 10px;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--color-mid);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.product-card-link { display: block; }
.product-card { display: block; }
.product-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.product-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  filter: drop-shadow(0 18px 14px rgba(26,26,26,0.10));
  transition: transform 0.6s var(--ease-premium);
}
.product-card-link:hover .product-photo-wrap img { transform: scale(1.02); }
.product-info { margin-top: 16px; }
.product-brandline {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
  margin-bottom: 4px;
}
.product-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-dark);
}
.product-meta {
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--color-mid);
}
.product-price {
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-dark);
}
.product-view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-mid);
  transition: color 0.25s ease, gap 0.25s ease;
}
.product-card-link:hover .product-view-link { color: var(--color-orange-dark); gap: 9px; }

/* Placeholder editorial mientras no hay fotografía real — reemplaza
   la <img> dentro de .product-photo-wrap sin tocar su geometría (4:5),
   así que cuando llegue photo_url real solo se intercambia el
   contenido interno, nunca la tarjeta. */
.product-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
}
.product-placeholder-inner {
  text-align: center;
  padding: 24px;
}
.product-placeholder-brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--color-taupe);
}
.product-placeholder-line {
  display: block;
  margin-top: 8px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mid);
}
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: 2px;
  width: fit-content;
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}
.product-card-link:hover .product-cta { color: var(--color-orange-dark); border-color: var(--color-orange-dark); gap: 9px; }

.pd-empty {
  max-width: 50ch;
  margin: 8px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pd-empty-text {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.75;
}
.pd-cta { margin-top: 40px; text-align: center; }

/* /productos/ — catálogo completo */
.productos-catalog {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px var(--space-section);
}
.productos-empty-full {
  max-width: 52ch;
  margin: 0 auto;
  padding: 56px 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.productos-empty-full p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.8;
}
.productos-empty-buttons {
  margin-top: 4px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* -----------------------------------------------------------------
   19. DRAWER DE RESERVAS (compartido en todas las páginas)
----------------------------------------------------------------- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 18, 8, 0.5);
  z-index: 1100; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px;
  background: var(--color-bg);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-premium);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 32px 40px 24px;
  border-bottom: 1px solid rgba(26,26,26,0.08);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--color-bg); z-index: 1;
}
.drawer-title { font-family: var(--font-body); font-size: 1.4rem; font-weight: 700; }
.drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(26,26,26,0.06); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-mid); transition: var(--transition-base);
}
.drawer-close:hover { background: rgba(241, 90, 34, 0.15); color: var(--color-dark); }
.drawer-body { padding: 32px 40px 40px; flex: 1; }
.drawer-form { display: flex; flex-direction: column; gap: 18px; }
.drawer-submit { width: 100%; padding: 16px; justify-content: center; font-size: 0.95rem; margin-top: 8px; }
.drawer-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.drawer-success {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 20px; padding: 60px 40px; flex: 1;
}
.drawer-success.visible { display: flex; }
.success-check {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(241, 90, 34, 0.1); border: 1px solid rgba(241, 90, 34, 0.3);
  display: flex; align-items: center; justify-content: center;
  animation: pulse 1s var(--ease-premium);
}
@keyframes pulse {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.drawer-success h3 { font-family: var(--font-body); font-size: 1.6rem; font-weight: 700; }
.drawer-success p { font-size: 0.9rem; color: var(--color-mid); max-width: 320px; line-height: 1.7; }

/* Botones flotantes */
.fab-whatsapp {
  position: fixed; bottom: 28px; left: 24px;
  width: 50px; height: 50px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 900; transition: transform 0.3s var(--ease-premium), box-shadow 0.3s ease;
}
.fab-whatsapp:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); }
.fab-backtop {
  position: fixed; bottom: 28px; right: 24px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-dark);
  display: flex; align-items: center; justify-content: center;
  z-index: 900; cursor: pointer; border: none;
  transition: transform 0.3s var(--ease-premium), opacity 0.3s ease;
  opacity: 0; pointer-events: none;
}
.fab-backtop.visible { opacity: 1; pointer-events: all; }
.fab-backtop:hover { transform: scale(1.1) translateY(-2px); background: var(--color-orange); }

/* -----------------------------------------------------------------
   20. FOOTER
----------------------------------------------------------------- */
.footer { background: var(--color-dark); padding: 72px 40px 0; }
.footer-grid {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 56px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--color-cream); }
.footer-tagline { font-size: 0.85rem; color: rgba(255,255,255,0.45); font-weight: 300; line-height: 1.6; }
.footer-hours { font-size: 0.8rem; color: rgba(255,255,255,0.4); font-weight: 300; }
.footer-hours a { color: rgba(255,255,255,0.65); border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer-hours a:hover { color: var(--color-orange); }
.footer-socials { display: flex; gap: 12px; margin-top: 4px; }
.footer-social-link {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); transition: var(--transition-base);
}
.footer-social-link:hover { background: rgba(241, 90, 34, 0.18); color: var(--color-orange); }
.footer-col h4 {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a { font-size: 0.88rem; color: rgba(255,255,255,0.55); font-weight: 300; transition: color 0.3s ease; }
.footer-col ul li a:hover { color: var(--color-orange); }
.newsletter-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.newsletter-input {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-btn); padding: 12px 20px;
  font-family: var(--font-body); font-size: 0.88rem; color: var(--color-white);
  outline: none; width: 100%; transition: border-color 0.3s ease;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.3); }
.newsletter-input:focus { border-color: rgba(241, 90, 34, 0.5); }
.newsletter-btn { padding: 12px 24px; font-size: 0.82rem; text-align: center; justify-content: center; }
.newsletter-status { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 2px; min-height: 1em; }
.footer-bottom {
  max-width: var(--max-width); margin: 0 auto; padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.3); font-weight: 300; }
.footer-bottom a { color: rgba(255,255,255,0.3); transition: color 0.3s ease; }
.footer-bottom a:hover { color: var(--color-orange); }

/* -----------------------------------------------------------------
   20b. DETALLE DE PRODUCTO Y CHECKOUT (catálogo demo)
   Reutiliza .form-group/.form-input/.form-label/.form-status y
   .btn-gold/.btn-outline ya existentes — nada de estilos SaaS nuevos.
----------------------------------------------------------------- */
.pd-back-wrap { max-width: var(--max-width); margin: 0 auto; padding: 150px 40px 0; }
.pd-back {
  font-size: 0.82rem; color: var(--color-mid);
  transition: color 0.25s ease;
}
.pd-back:hover { color: var(--color-orange-dark); }

.pd-detalle {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 40px var(--space-section);
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 72px;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}
.pd-detalle.visible { opacity: 1; transform: translateY(0); }
.pd-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 650px;
  overflow: hidden;
  border-radius: var(--radius-card);
  min-width: 0;
}
.pd-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 24px;
  filter: drop-shadow(0 22px 18px rgba(26,26,26,0.10));
}
.pd-photo-wrap.product-photo-placeholder { background: var(--color-bg-alt); }
.pd-info { min-width: 0; }
.pd-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  color: var(--color-dark);
  margin-top: 8px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.pd-line {
  margin-top: 8px;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--color-mid);
}
.pd-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-dark);
  margin-top: 22px;
}
.pd-actions { margin-top: 8px; }
.pd-qty-label {
  margin-top: 24px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-taupe);
}
.pd-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  border: 1px solid var(--color-cream);
  border-radius: 999px;
  overflow: hidden;
}
.pd-qty-btn {
  width: 40px; height: 40px;
  background: var(--color-bg-alt);
  border: none;
  font-size: 1.1rem;
  color: var(--color-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pd-qty-btn:hover { background: var(--color-orange); color: var(--color-white); }
.pd-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  font-weight: 600;
  font-size: 0.95rem;
}
/* Único CTA que conserva el naranja como acento de conversión (ver
   nota junto a .btn-gold) — "Agregar al pedido" es la acción de venta. */
.pd-add {
  margin-top: 18px;
  padding: 15px 40px;
  background: var(--color-orange);
  color: var(--color-white);
}
.pd-add:hover { background: var(--color-orange-dark); box-shadow: var(--shadow-orange); }
.pd-added-msg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--color-mid);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}
.pd-added-msg.visible { opacity: 1; transform: translateY(0); }
.pd-added-check { color: var(--color-orange-dark); font-weight: 600; }
.pd-added-msg a { color: var(--color-orange-dark); text-decoration: underline; }
.pd-noprice {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-mid);
  margin-top: 20px;
}
.pd-whatsapp-link {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-orange-dark);
  border-bottom: 1px solid var(--color-orange);
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}
.pd-whatsapp-link:hover { opacity: 0.75; }

.pd-delivery {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-cream);
}
.pd-delivery-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-taupe);
  margin-bottom: 12px;
}
.pd-delivery-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--color-dark);
  padding: 7px 0;
}
.pd-delivery-item + .pd-delivery-item { border-top: 1px solid rgba(237,232,222,0.6); }
.pd-delivery-note { color: var(--color-mid); font-weight: 300; }
.pd-delivery-footnote {
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--color-mid);
}
.pd-notfound {
  max-width: 52ch;
  margin: 0 auto;
  padding: 160px 40px var(--space-section);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Checkout */
.checkout {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 16px 40px var(--space-section);
}
.checkout-steps-indicator {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-bottom: 44px;
}
.checkout-steps-indicator[hidden] { display: none; }
.checkout-step-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-taupe);
}
.checkout-step-label.active { color: var(--color-orange-dark); }
.checkout-step-label.done { color: var(--color-mid); }
.checkout-step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.checkout-empty {
  text-align: center;
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--color-mid);
}

.cart-lines { display: flex; flex-direction: column; gap: 20px; }
.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-cream);
}
.cart-line-photo {
  width: 64px; height: 80px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.cart-line-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-line-photo.product-photo-placeholder { background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; }
.cart-line-name { font-size: 0.88rem; font-weight: 600; color: var(--color-dark); margin-top: 2px; }
.cart-line-qty { display: inline-flex; align-items: center; border: 1px solid var(--color-cream); border-radius: 999px; overflow: hidden; }
.cart-line-qty .pd-qty-btn { width: 30px; height: 30px; font-size: 0.95rem; }
.cart-line-qty .pd-qty-value { min-width: 30px; font-size: 0.85rem; }
.cart-line-total { font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.cart-line-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: none;
  color: var(--color-mid);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.cart-line-remove:hover { color: #a03030; background: rgba(220,60,60,0.08); }

.checkout-subtotal {
  display: flex; justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.checkout-nav {
  display: flex;
  gap: 14px;
  margin-top: 32px;
}
.checkout-nav .checkout-continue { margin-left: auto; }

.fulfillment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.fulfillment-card {
  text-align: left;
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-cream);
  border-radius: var(--radius-card);
  padding: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.fulfillment-card:hover { border-color: var(--color-taupe); transform: translateY(-2px); }
.fulfillment-card.active { border-color: var(--color-orange); background: rgba(241,90,34,0.05); }
.fulfillment-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-dark); }
.fulfillment-card-desc { font-size: 0.85rem; color: var(--color-mid); font-weight: 300; line-height: 1.5; }

.checkout-form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-address-note {
  font-size: 0.9rem;
  color: var(--color-dark);
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 14px 16px;
}
.checkout-note {
  font-size: 0.8rem;
  color: var(--color-mid);
  background: rgba(241,90,34,0.06);
  border: 1px solid rgba(241,90,34,0.15);
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.5;
}

.checkout-summary-line, .checkout-summary-row {
  display: flex; justify-content: space-between;
  font-size: 0.88rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-cream);
}
.checkout-summary-row.total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  border-bottom: none;
  padding-top: 16px;
}
.checkout-summary-delivery {
  margin-top: 24px;
  padding: 18px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-card);
  font-size: 0.85rem;
  color: var(--color-mid);
  display: flex; flex-direction: column; gap: 6px;
}
.checkout-summary-delivery strong { color: var(--color-dark); font-size: 0.9rem; }
.checkout-confirm { margin-top: 28px; width: 100%; justify-content: center; }

.checkout-confirmed {
  text-align: center;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.checkout-confirmed .success-check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(241,90,34,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.checkout-confirmed p { color: var(--color-mid); max-width: 42ch; }
.checkout-confirmed-actions { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* -----------------------------------------------------------------
   21. MOTION — prefers-reduced-motion
----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-headline { clip-path: inset(0 0% 0 0) !important; }
  /* El video del hero se pausa vía JS (ver initHeroVideo en main.js) —
     aquí solo se asegura que el poster/frame quede completamente visible. */
}

/* -----------------------------------------------------------------
   22. RESPONSIVE — TABLET (1024px)
----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .proceso-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .reviews-full-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-page { grid-template-columns: 1fr; gap: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { gap: 40px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

/* -----------------------------------------------------------------
   23. RESPONSIVE — MOBILE (768px)
----------------------------------------------------------------- */
@media (max-width: 768px) {
  .navbar { padding: 18px 20px; }
  .navbar.scrolled, .navbar.solid { padding: 14px 20px; }
  .navbar-links { display: none; }
  .navbar-hamburger { display: flex; }

  .section, .servicios-destacados, .trabajo, .resenas-editorial, .cta-final,
  .catalog-section, .about-full, .reviews-full, .contact-page,
  .productos-destacados, .productos-catalog {
    padding-left: 20px; padding-right: 20px;
  }

  .hero { height: 100svh; min-height: 560px; }
  .hero-video { object-position: 50% 30%; }
  /* En mobile el texto ocupa más alto proporcional del viewport que en
     desktop — se refuerza el degradado inferior para que siga siendo
     legible sin volver a un panel sólido. */
  .hero-overlay {
    background: linear-gradient(0deg, rgba(15,13,11,0.75) 0%, rgba(15,13,11,0.5) 32%, rgba(15,13,11,0.12) 55%, rgba(15,13,11,0) 72%);
  }
  /* padding-bottom generosa a propósito: el FAB de WhatsApp es fixed
     bottom-left y colisionaba visualmente con "Reservar cita" en varios
     tamaños de mobile — este espacio reserva su zona. */
  .hero-text { padding: 100px 20px 108px; max-width: none; }

  .page-intro { padding: 120px 20px 48px; }
  .page-intro-photo { height: 34vh; margin-top: 68px; }
  .page-intro-photo-caption { left: 20px; bottom: 24px; }

  .trabajo-diptych { grid-template-columns: 1fr; gap: 16px; }
  .trabajo-diptych .tp-item:nth-child(2) { margin-top: 0; }

  .proceso-steps { grid-template-columns: 1fr; gap: 28px; }
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); }

  .footer { padding: 56px 20px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  /* padding-bottom reserva la zona del FAB de WhatsApp (fixed, bottom-left) —
     sin esto, el copyright queda parcialmente tapado al llegar al final real
     de la página en mobile (confirmado en 320/375/390/430px). */
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; padding-bottom: 100px; }

  .drawer { width: 100%; }

  .servicios-hero { height: clamp(280px, 70vw, 360px); margin-top: 68px; }
  .servicios-hero-content { gap: 10px; }
  .servicios-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .servicios-hero-sub { font-size: 0.82rem; max-width: 320px; }

  .catalog-section { padding: 36px 20px; }
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .catalog-photo { aspect-ratio: 3 / 2; }
  .catalog-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .catalog-row-name,
  .catalog-row-desc,
  .catalog-row-price {
    grid-column: 1;
  }
  .catalog-row-price {
    justify-self: start;
    margin-top: 2px;
  }

  .servicios-cta-band-inner { padding: 24px 20px; gap: 16px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .productos-empty-full { padding: 36px 0 12px; }

  .pd-back-wrap { padding: 96px 20px 0; }
  .pd-detalle { grid-template-columns: 1fr; gap: 24px; padding: 20px 20px var(--space-section); align-items: normal; }
  .pd-photo-wrap { max-width: 340px; max-height: none; margin: 0 auto; }
  .pd-price { margin-top: 16px; }
  .pd-add { width: 100%; justify-content: center; }
  .pd-delivery { margin-top: 24px; padding-top: 18px; }

  .checkout { padding: 16px 20px var(--space-section); }
  .checkout-steps-indicator { gap: 16px; }
  .cart-line {
    grid-template-columns: 52px 1fr auto;
    grid-template-areas: "photo info total" "photo qty remove";
    column-gap: 14px;
    row-gap: 8px;
  }
  .cart-line-photo { grid-area: photo; width: 52px; height: 65px; }
  .cart-line-info { grid-area: info; }
  .cart-line-total { grid-area: total; }
  .cart-line-qty { grid-area: qty; }
  .cart-line-remove { grid-area: remove; justify-self: end; }
  .fulfillment-options { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .checkout-nav { flex-direction: column-reverse; }
  .checkout-nav .checkout-continue { margin-left: 0; width: 100%; justify-content: center; }
  .checkout-nav .btn-outline { width: 100%; justify-content: center; }

  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .service-tile-name { font-size: 0.82rem; letter-spacing: 0.13em; padding: 8px; }
}

/* -----------------------------------------------------------------
   23b. RESPONSIVE — MOBILE ANGOSTO (480px): el grid de Servicios pasa
   a 1 columna — a 2 columnas los nombres largos (HAIR & SCALP
   TREATMENTS / STRAIGHTENING & PERMS) forzarían texto demasiado
   pequeño para mantenerse legibles.
----------------------------------------------------------------- */
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; gap: 6px; }
  .service-tile { aspect-ratio: 3 / 2; }
  .service-tile-name { font-size: 1rem; letter-spacing: 0.14em; }
}

/* Pantallas mobile muy bajas (p.ej. 320x568): el hero necesita más margen
   inferior para que los botones no queden debajo del FAB de WhatsApp, y
   la foto cede un poco de alto para que todo el bloque de texto quepa. */
@media (max-width: 768px) and (max-height: 700px) {
  .hero-text { padding-bottom: 108px; gap: 12px; }
  /* En pantallas muy bajas, el botón secundario apilado quedaría bajo el
     FAB de WhatsApp. El CTA principal ya es suficiente en este tamaño. */
  .hero-buttons .btn-outline { display: none; }
}

/* -----------------------------------------------------------------
   24. MENÚ CAFETERÍA (Fase 12 — rediseño con lenguaje del menú físico)
   preview en Home + página completa /menu/. Reutiliza tokens y
   componentes existentes (.eyebrow, .section-title, .btn-text-arrow,
   .catalog-section/.catalog-index/.catalog-underline de la sección 16)
   en vez de crear un sistema visual paralelo. Componentes nuevos:
   .menu-blob (mancha orgánica, CSS puro — sin SVG/raster) + .menu-capsule
   (cápsula de nombre) + .menu-item (foto+mancha/cápsula, alterna con
   .menu-item--reverse), inspirados en el PDF físico del menú pero
   resueltos con las herramientas del sitio (sin recrear el PDF
   literalmente). Bloque autocontenido al final del archivo (con su
   propio breakpoint mobile al final de esta misma sección) para no
   alterar el orden de cascada de los breakpoints de las secciones 21-23.
----------------------------------------------------------------- */

/* --- Preview compacto en Home (también reutilizado por el Hero de
   /menu/ — ver más abajo, mismo patrón de grid texto/foto) --- */
.cafeteria-preview {
  padding: var(--space-section) 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.cafeteria-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cafeteria-preview-copy .section-title { margin: 10px 0 14px; }
.cafeteria-preview-sub {
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: 22px;
}
.cafeteria-preview-photo {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-editorial-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.cafeteria-preview-photo img {
  max-width: 62%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Hero /menu/: mismo patrón de grid que .cafeteria-preview (texto +
   foto), sin hero full-bleed. Solo agrega el margin-top para despejar
   el navbar fijo. --- */
.menu-hero {
  margin-top: 88px;
  padding: 48px 40px 8px;
}
.menu-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 10px 0 14px;
}

/* --- Mancha orgánica: 100% CSS (border-radius asimétrico + rotación),
   sin SVG ni raster. Tres variantes para que no se repita la misma
   silueta; nunca un óvalo/círculo perfecto. Color café oscuro cálido
   (--color-coffee-dark), no negro puro. */
.menu-blob {
  position: absolute;
  inset: 4%;
  background: var(--color-coffee-dark);
  z-index: 0;
}
.menu-blob--a { border-radius: 63% 37% 33% 67% / 53% 42% 58% 47%; transform: rotate(-8deg) scale(1.04); }
.menu-blob--b { border-radius: 40% 60% 65% 35% / 48% 62% 38% 52%; transform: rotate(7deg) scale(1.08); }
.menu-blob--c { border-radius: 55% 45% 38% 62% / 60% 33% 67% 40%; transform: rotate(-3deg) scale(1.02); }

/* --- Cápsula de nombre: lenguaje directo del menú físico (píldora,
   borde fino, sombra inferior sutil tipo sticker) adaptado a los
   colores/tipografía de Canelle. --- */
.menu-capsule {
  display: inline-block;
  background: var(--color-bg);
  border: 1.5px solid var(--color-dark);
  border-radius: 999px;
  padding: 9px 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-dark);
  box-shadow: 0 3px 0 rgba(20,17,16,0.16), 0 6px 14px rgba(20,17,16,0.08);
}

/* --- Ítem editorial: foto+mancha de un lado, cápsula+descripción del
   otro. Alterna vía .menu-item--reverse. --- */
.menu-item {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0;
}
.menu-item + .menu-item { border-top: 1px solid rgba(158,142,128,0.28); }
.menu-item--reverse { grid-template-columns: 7fr 5fr; }
.menu-item--reverse .menu-item-media { order: 2; }
.menu-item--reverse .menu-item-copy { order: 1; }
.menu-item-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  transition: transform 0.5s var(--ease-premium);
}
.menu-item:hover .menu-item-media { transform: translateY(-4px); }
.menu-item-media img {
  position: relative;
  z-index: 1;
  max-width: 62%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(20,17,16,0.16));
}
.menu-item-copy { text-align: left; }
.menu-item-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.menu-item-desc {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-mid);
  line-height: 1.6;
  max-width: 46ch;
}
.menu-item-price {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-orange-dark);
}
.menu-item-price:empty { display: none; }

/* --- Best Seller: micro-label editorial con estrella pequeña, acento
   naranja — nunca la estrella amarilla grande del PDF original. --- */
.menu-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
  background: rgba(241,90,34,0.08);
  border: 1px solid rgba(241,90,34,0.2);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
}
.menu-badge svg { flex-shrink: 0; }

/* --- 03 Bebidas Destacadas: grid compacto de 2 columnas, versión más
   pequeña del mismo componente foto+mancha+cápsula. --- */
.menu-featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 40px;
}
.menu-featured-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 12px;
  gap: 14px;
}
.menu-featured-media {
  position: relative;
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-featured-media img {
  position: relative;
  z-index: 1;
  max-width: 66%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(20,17,16,0.16));
}
.menu-featured-item .menu-capsule { font-size: 0.8rem; padding: 7px 18px; }
.menu-featured-item .menu-item-desc { max-width: 32ch; margin-top: 8px; font-size: 0.85rem; }
.menu-featured-item .menu-item-price { margin-top: 8px; }
.menu-featured-item .menu-badge { margin-top: 2px; }

/* --- 04 Más Bebidas: lista limpia sin foto, 3 columnas en desktop. --- */
.menu-drink-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
}
.menu-drink-row {
  padding: 11px 0;
  border-top: 1px solid rgba(158,142,128,0.28);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-dark);
}
.menu-drink-note {
  margin-top: 28px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-left: 3px solid var(--color-orange);
  background: rgba(241,90,34,0.05);
  padding: 12px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  color: var(--color-dark);
  max-width: fit-content;
}
.menu-drink-note-plus { color: var(--color-orange-dark); font-weight: 700; }

@media (max-width: 768px) {
  .cafeteria-preview { padding: 48px 20px; }
  .cafeteria-preview-grid { grid-template-columns: 1fr; gap: 28px; }
  .cafeteria-preview-photo { order: -1; aspect-ratio: 3 / 2; }

  .menu-hero { margin-top: 68px; padding: 40px 20px 4px; }

  .menu-item,
  .menu-item--reverse {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 0;
    text-align: center;
  }
  .menu-item--reverse .menu-item-media,
  .menu-item--reverse .menu-item-copy { order: initial; }
  .menu-item-media { aspect-ratio: 3 / 2; }
  .menu-item-copy { text-align: center; }
  .menu-item-name-row { justify-content: center; }
  .menu-item-desc { max-width: none; margin-left: auto; margin-right: auto; }

  .menu-featured-grid { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .menu-featured-item { padding: 18px 4px; }

  .menu-drink-list { grid-template-columns: 1fr 1fr; }
  .menu-drink-note { max-width: none; }
}

@media (max-width: 480px) {
  .menu-featured-grid { grid-template-columns: 1fr; }
  .menu-drink-list { grid-template-columns: 1fr; }
}