/* ===================================================================
   COMO EN CASA — enhancements.css  (v2.2 · Jul 2026)
   1) Corrección de traslapes (redondeos que cruzaban superficies)
   2) Animaciones minimalistas on-brand
   Se carga DESPUÉS de styles.css, por lo que sus reglas prevalecen.
=================================================================== */

/* ═══════════════════════════════════════════════════════════════
   1. CORRECCIÓN DE TRASLAPES Y PULCRITUD
═══════════════════════════════════════════════════════════════ */

/* 1.1 — Ancla de scroll: las secciones ya no quedan bajo el nav fijo */
section[id] { scroll-margin-top: 88px; }

/* 1.0 — Enlace de salto accesible (visible solo al enfocar con teclado) */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 3000;
  background: var(--v-dark); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--r-s) var(--r-s); font-weight: 600; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--v-bright); }

/* 1.2 — Tarjetas de planes: MISMA ALTURA para simetría visual.
   La rejilla base usaba align-items:start (cada tarjeta con su altura
   natural). Se iguala a stretch para que todas midan lo mismo, y los
   botones "Pedir este plan" queden alineados en una sola línea. */
.planes__grid { align-items: stretch; }
.plan-card { height: 100%; }

/* La tarjeta destacada resalta por color, anillo y sombra —NO por altura—,
   preservando la simetría. Se elimina el scale(1.04) y el desfase vertical. */
.plan-card--featured {
  transform: none;
  isolation: isolate;
  margin: 0;
}
.plan-card--featured:hover {
  transform: translateY(-6px);
}

/* 1.3 — Costura (hairline) en las ondas divisorias:
   el borde recto del SVG dejaba un pelo que cruzaba el redondeo de la
   sección siguiente. Se sella con vertical-align y micro-solape. */
.wave-divider { line-height: 0; }
.wave-divider svg { display: block; vertical-align: bottom; margin-bottom: -1px; }

/* 1.4 — Comilla decorativa del testimonio:
   el glifo de 6rem se salía por la esquina redondeada de la tarjeta.
   Se recorta al radio de la tarjeta. */
.testimonio { overflow: hidden; }

/* 1.5 — Foto del menú: se ancla al radio de la tarjeta para que el
   zoom en hover (ver animaciones) nunca cruce la esquina redondeada. */
.menu-card { overflow: hidden; }
.menu-card__foto { will-change: transform; }

/* 1.6 — Badge "Más popular": queda dentro del radio de la tarjeta */
.plan-card__badge { z-index: 2; }

/* 1.8 — Tarjeta flotante del hero: coherencia de redondeos anidados.
   Causa raíz corregida (token --sp-5 ausente dejaba la tarjeta SIN padding,
   por lo que los badges inferiores cruzaban la esquina redondeada).
   Estas reglas garantizan la holgura aunque cambie el diseño:
   regla de oro → radio interior = radio exterior − padding. */
.hero__card-float {
  padding: 1.25rem 1.35rem 1.5rem;   /* base sólida; el bottom despeja la curva */
}
.hero__card-foto {
  border-radius: calc(var(--r-xl) - 1.25rem);  /* ≈ 24px, alineado con el exterior */
}
/* La fila de badges no debe tocar la esquina inferior de la tarjeta */
.hero__card-float > div:last-child { margin-top: 0.15rem; }

/* 1.8b — Tarjeta del hero clicable (capta atención → acción hacia el menú) */
.hero__card-float { cursor: pointer; }
.hero__card-cta {
  display: block; margin-top: 0.7rem;
  color: var(--v-bright); font-weight: 600; font-size: 0.82rem;
  transition: transform .2s var(--ease-out, ease);
}
.hero__card-float:hover .hero__card-cta { transform: translateX(3px); }
.hero__card-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
/* Nota de cierre de pedidos (evita asumir pedidos el mismo día) */
.hero__card-note {
  margin-top: 0.7rem;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-pill);
  padding: 0.3em 0.7em;
  display: inline-block;
}

/* 1.7 — Barra de campaña + nav fijo: evita que el banner tape contenido */
.campaign-banner--visible ~ .nav,
.campaign-banner--visible + .nav { position: relative; }

/* 1.10 — Logo: tamaño legible y ajuste en móviles pequeños */
@media (max-width: 480px) {
  .nav__logo-img { height: 46px; }
  /* CTAs del hero a ancho completo → área táctil cómoda */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
}
/* Área táctil mínima (accesibilidad) en botones y enlaces del nav móvil */
.nav__drawer a, .wa-fab { min-height: 44px; }

/* 1.9 — Legibilidad del nav sobre el hero:
   en el estado superior (nav--light) el fondo era transparente, por lo que
   los enlaces de la derecha ("Reseñas", "Cobertura") caían sobre la foto y
   se perdían. Se añade un velo crema degradado + desenfoque sutil que
   garantiza contraste sin romper el estilo flotante. */
.nav--light {
  background: linear-gradient(to bottom,
              rgba(247,244,236,0.94) 0%,
              rgba(247,244,236,0.80) 55%,
              rgba(247,244,236,0) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Refuerzo de contraste del texto del nav en el tope */
.nav--light .nav__links a { color: var(--v-dark); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   2. ANIMACIONES MINIMALISTAS ON-BRAND
   Sutiles, rápidas y coherentes con la marca (verdes, sin estridencia)
═══════════════════════════════════════════════════════════════ */

/* 2.1 — Micro-elevación uniforme en botones */
.btn-green, .btn-vivid, .btn-wa, .btn-outline-dark, .plan-card__cta, .menu-card__cta {
  transition: transform .18s var(--ease-out, ease), box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn-green:hover, .btn-vivid:hover, .btn-wa:hover, .btn-outline-dark:hover {
  transform: translateY(-2px);
}
.btn-green:active, .btn-vivid:active, .btn-wa:active, .btn-outline-dark:active {
  transform: translateY(0);
}

/* 2.2 — Subrayado animado en los enlaces de navegación */
.nav__links a { position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--v-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s var(--ease-out, ease);
}
.nav__links a:hover::after,
.nav__links a.active::after { transform: scaleX(1); transform-origin: left; }

/* 2.2b — HERO: integración entre el lado crema y la foto + animación.
   Mantiene el estilo (verdes, formas redondeadas) y aporta profundidad. */
.hero { background: var(--cream); }           /* las esquinas redondeadas revelan crema */

@media (min-width: 901px) {
  /* Sin panel ni borde: la foto se funde con la crema (transición limpia) */
  .hero__right { border-radius: 0; box-shadow: none; }
  /* Difuminado crema ancho sobre el costado izquierdo de la foto:
     el lado crema fluye hacia la imagen sin línea divisoria. */
  .hero__right::before {
    content: ''; position: absolute; z-index: 1; pointer-events: none;
    top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(to right,
                var(--cream) 0%,
                rgba(247,244,236,0.82) 22%,
                rgba(247,244,236,0.40) 52%,
                rgba(247,244,236,0) 100%);
  }
}
@media (max-width: 900px) {
  /* En móvil la foto va arriba: esquinas inferiores redondeadas hacia el texto */
  .hero__right { border-radius: 0 0 var(--r-l) var(--r-l); }
}

/* Animación Ken Burns: zoom lento y continuo, sin saltos */
@keyframes cecKenBurns {
  0%   { transform: scale(1.01); }
  100% { transform: scale(1.09); }
}
.hero__right-photo {
  transform-origin: 60% 65%;
  animation: cecKenBurns 20s ease-in-out infinite alternate;
}

/* 2.3 — Flotación muy sutil de la tarjeta del hero */
@keyframes cecFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}
.hero__card-float { animation: cecFloat 6s ease-in-out infinite; }

/* 2.4 — Zoom suave de la foto del menú al pasar el cursor */
.menu-card__foto { transition: transform .5s var(--ease-out, ease); }
.menu-card:hover .menu-card__foto { transform: scale(1.04); }

/* 2.5 — Pulso discreto del botón flotante de WhatsApp */
@keyframes cecPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.wa-fab { animation: cecPulse 2.8s ease-out infinite; }
.wa-fab:hover { animation-play-state: paused; }

/* 2.6 — Aparición suave (fade-up) reutilizable para contenido inyectado */
@keyframes cecFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cec-fade-up { animation: cecFadeUp .5s var(--ease-out, ease) both; }

/* 2.7 — Números del hero: transición al contar (ver animations.js) */
.hero__stat-num { transition: color .3s ease; }

/* 2.8 — Realce del icono de confianza (ya existe hover; suavizamos) */
.trust__icon { transition: transform .3s var(--ease-spring, ease); }

/* Honeypot anti-bots: oculto para personas, visible para robots */
.lead-form__hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* Tarjeta de día festivo / próximamente (sin servicio) */
.menu-card--festivo { opacity: 0.96; }
.menu-card__foto--festivo {
  aspect-ratio: 16/10;
  background: repeating-linear-gradient(45deg, var(--cream-dark) 0 14px, var(--cream) 14px 28px);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.menu-card__foto--festivo .menu-card__emoji-bg {
  font-size: 2.6rem; opacity: 0.5; position: static;
}
.menu-card__body--centro { text-align: center; justify-content: center; }
.menu-card__festivo-titulo {
  font-weight: 700; color: var(--v-dark); font-size: var(--t-md, 1.05rem);
  margin: 0.4rem 0 0.4rem;
}
.menu-card__festivo-nota {
  font-size: var(--t-sm, 0.9rem); color: var(--ink-muted); line-height: 1.5; margin: 0;
}

/* Legibilidad del nombre del plato sobre la foto:
   degradado inferior más oscuro y sombra de texto más marcada. */
.menu-card__foto-overlay {
  background: linear-gradient(to top,
              rgba(0,22,9,0.92) 0%,
              rgba(0,22,9,0.55) 38%,
              rgba(0,22,9,0.12) 62%,
              transparent 78%);
}
.menu-card__nombre-overlay {
  font-family: var(--f-body);          /* letra legible en vez de la cursiva */
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: 0.004em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.96), 0 2px 16px rgba(0,0,0,0.7);
}
@media (max-width: 760px) { .menu-card__nombre-overlay { font-size: 1.05rem; } }

/* 6. Preview del menú en el inicio: 3 tarjetas centradas y simétricas */
#menu-grid-home {
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   5. SHOWCASE EN VIDEO (bucle silenciado, carga diferida)
═══════════════════════════════════════════════════════════════ */
.showcase { background: var(--cream); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.showcase__inner {
  max-width: 1040px; margin: 0 auto; padding: 0 var(--sp-6);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.showcase__text .section-title { margin: .4rem 0 1rem; }
.showcase__text p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1.6rem; max-width: 42ch; }
.showcase__media {
  position: relative; justify-self: center;
  width: min(300px, 78vw);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-l);
  border: 6px solid var(--white);
  background: var(--v-dark);
  aspect-ratio: 9 / 16;
}
.showcase__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase__badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: rgba(0,40,20,0.72); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .35em .8em; border-radius: var(--r-pill); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: .4em;
}
@media (max-width: 760px) {
  .showcase__inner { grid-template-columns: 1fr; text-align: center; }
  .showcase__text p { margin-inline: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   4. GALERÍA DE FOTOS REALES
═══════════════════════════════════════════════════════════════ */
.galeria { background: var(--white); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.galeria__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 4×2 = cuadrícula simétrica */
  gap: 0.9rem;
  margin-top: var(--sp-8);
}
.galeria__item {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-card);
  position: relative;
  aspect-ratio: 1 / 1;                      /* cuadrado → simetría perfecta */
}
.galeria__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .5s ease, transform .6s var(--ease-out, ease);
}
.galeria__item:hover img { transform: scale(1.06); }

@media (max-width: 760px) {
  .galeria__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   7. PROMOCIÓN: banner superior + ventana emergente
═══════════════════════════════════════════════════════════════ */
/* El nav fijo baja lo que mida el banner de promo (0 si no hay) */
.nav { top: var(--promo-h, 0px); }

.promo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 130;
  background: linear-gradient(90deg, var(--v-dark), var(--v-mid));
  color: #fff; box-shadow: 0 2px 10px rgba(0,56,27,0.18);
}
.promo-banner__in {
  max-width: 1200px; margin: 0 auto; padding: 0.5rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  flex-wrap: wrap; font-size: 0.9rem;
}
.promo-banner__msg { text-align: center; }
.promo-banner__msg strong { color: var(--v-bright); }
.promo-banner__cta { flex: 0 0 auto; }
.promo-banner__x {
  background: none; border: none; color: rgba(255,255,255,0.85);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.3rem;
}
.promo-banner__x:hover { color: #fff; }
@media (max-width: 600px) {
  .promo-banner__msg { font-size: 0.8rem; flex: 1 1 100%; }
  .promo-banner__in { padding: 0.5rem 0.75rem; gap: 0.5rem; }
}

.promo-modal {
  position: fixed; inset: 0; z-index: 2100; display: flex;
  align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(0,28,13,0.62); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.25s ease;
}
.promo-modal--open { opacity: 1; }
.promo-modal__card {
  background: #fff; border-radius: var(--r-l); max-width: 420px; width: 100%;
  padding: 2rem 1.6rem 1.9rem; text-align: center; position: relative;
  box-shadow: var(--sh-xl); transform: translateY(10px); transition: transform 0.25s ease;
}
.promo-modal--open .promo-modal__card { transform: translateY(0); }
.promo-modal__x {
  position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: none;
  font-size: 1.5rem; line-height: 1; color: var(--ink-muted); cursor: pointer;
}
.promo-modal__emoji { font-size: 3rem; margin-bottom: 0.3rem; }
.promo-modal__titulo {
  font-family: 'Hello Honey', serif; font-weight: 400; font-size: 1.8rem;
  color: var(--v-dark); margin: 0 0 0.5rem;
}
.promo-modal__msg { color: var(--ink-soft); line-height: 1.6; margin: 0 auto 1.4rem; max-width: 32ch; }
@media (prefers-reduced-motion: reduce) {
  .promo-modal, .promo-modal__card { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   3. ACCESIBILIDAD: respeta a quien prefiere menos movimiento
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__card-float,
  .hero__right-photo,
  .wa-fab { animation: none !important; }
  .galeria__item:hover img { transform: none !important; }
  .btn-green, .btn-vivid, .btn-wa, .btn-outline-dark,
  .menu-card:hover .menu-card__foto,
  .plan-card--featured:hover { transform: none !important; }
  .nav__links a::after { transition: none; }
  .cec-fade-up { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   CORRECCIONES DE AUDITORÍA — julio 2026
   (contraste, táctil móvil, breakpoint 320-340px, tabla comparativa)
═══════════════════════════════════════════════════════════════ */

/* RES-08 · Contraste del eyebrow sobre fondos claros (WCAG AA).
   En secciones oscuras se conserva el verde brillante de marca. */
.section-eyebrow { color: #5d8f17; }
.testimonios .section-eyebrow,
.page-hero .section-eyebrow,
.showcase .section-eyebrow,
.lead-capture .section-eyebrow { color: var(--v-bright); }

/* RES-05 · Inputs: mínimo 16px para evitar el auto-zoom de iOS
   y 44px de alto táctil. Aplica a todos los formularios. */
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form input[type="text"] {
  font-size: 16px;
  min-height: 44px;
}

/* RES-11 · Tabla comparativa: scroll horizontal fluido en móvil
   (el contenedor ya tiene overflow-x:auto; esto evita el aplastado). */
.comparacion__table { min-width: 640px; }
.comparacion__wrap { -webkit-overflow-scrolling: touch; }

/* RES-09 · Galería en tablet: 3 columnas intermedias entre 4 y 2 */
@media (max-width: 900px) and (min-width: 601px) {
  .galeria__grid { grid-template-columns: repeat(3, 1fr); }
}

/* RES-07 · CLS: el contenedor .showcase__media ya reserva el espacio con
   aspect-ratio 9/16 (video vertical); el video llena el contenedor. */

/* RES-03 · Cobertura móvil pequeño (320–340px): iPhone SE y gama de entrada */
@media (max-width: 340px) {
  html { font-size: 14px; }
  .nav__logo-img { height: 40px; width: auto; }
  .nav__bar { padding-inline: 0.75rem; gap: 0.4rem; }
  .hero__left { padding-inline: 1rem; }
  .hero__stats { gap: 0.75rem; }
  .trust__item { padding: 0.6rem; }
  .btn--lg { padding: 0.8em 1.4em; font-size: 0.95rem; }
  .plan-card { padding: 1.25rem 1rem; }
}

/* ──────────────────────────────────────────────────────────────
   Menú móvil (hamburguesa): abrir al PRIMER toque.
   - touch-action: manipulation → elimina el retardo de ~300 ms del táctil
     (ese retardo es el que habilita el "ghost click" que reabría/cerraba
     el menú). Con esto el toque activa de inmediato.
   - pointer-events:none en el ícono → el BOTÓN es siempre el objetivo del
     toque, aunque el SVG interior se reemplace al abrir. Así, cambiar el
     ícono nunca deja el toque "huérfano".
   Corrige el bug de tener que tocar varias veces para abrir el menú.
   ────────────────────────────────────────────────────────────── */
.nav__toggle {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle svg,
.nav__toggle svg * {
  pointer-events: none;
}