/* ============================================================
   CAPA DE MEJORA VISUAL — Recreo Picante
   ------------------------------------------------------------
   Este archivo es 100% ADITIVO. No sobreescribe ni reescribe
   ninguna regla de reset.css / variables.css / styles.css /
   animations.css — todo lo nuevo vive aquí, marcado por fase.

   PARA QUITAR TODA LA CAPA DE MEJORA (revertir por completo):
   1) Elimina la línea
        <link rel="stylesheet" href="css/premium-layer.css" />
      de index.html y carta.html
   -o- 2) Simplemente borra este archivo.
   En ningún caso hay que tocar los demás CSS ni el HTML/JS base.

   Para revertir SOLO una fase, busca el bloque
   "=== FASE N ===" correspondiente y bórralo — las fases están
   pensadas para no depender unas de otras salvo que se indique.
   ============================================================ */


/* ============================================================
   === FASE 1 — Tokens y fundación ===
   ------------------------------------------------------------
   Define variables NUEVAS (easings, sombras en capas, tamaños
   fluidos). Ninguna regla las usa todavía — por diseño, para que
   esta fase no produzca ningún cambio visual. Las consume la
   Fase 2 en adelante.
   ============================================================ */

:root {
  /* --- Easings con nombre ---
     Hoy las transiciones del sitio usan "ease" genérico
     (var(--transition-fast/base/slow) en variables.css).
     Estos son curvas con intención, para usar en las fases
     siguientes sin tocar las transiciones actuales. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* entradas rápidas que frenan suave */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);  /* hover/salidas suaves */
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1); /* transiciones simétricas (olas, flotado) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-interacciones con rebote sutil */

  /* --- Sombras en capas (ambiental + de contacto) ---
     Mapean 1:1 sobre --shadow-sm/md/lg de variables.css en peso
     visual aproximado, pero con 2 capas en vez de una sola.
     Nombradas "-layered" para no chocar con las existentes:
     nada se rompe si esta fase se revierte. */
  --shadow-sm-layered:
    0 1px 2px rgba(2, 8, 16, 0.35),
    0 3px 10px rgba(2, 8, 16, 0.18);
  --shadow-md-layered:
    0 2px 4px rgba(2, 8, 16, 0.32),
    0 12px 28px rgba(2, 8, 16, 0.24);
  --shadow-lg-layered:
    0 4px 8px rgba(2, 8, 16, 0.34),
    0 24px 54px rgba(2, 8, 16, 0.32);

  /* --- Tamaños de título fluidos ---
     Hoy solo .hero__title usa clamp(); el resto de títulos de
     sección usan --fs-2xl fijo (2.75rem siempre). Estos tokens
     son paralelos — no reemplazan --fs-2xl/xl/lg todavía, eso
     se decide y aplica en Fase 2. */
  --fs-fluid-2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --fs-fluid-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-fluid-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

  /* --- Duraciones nombradas por intención ---
     Complementan --transition-fast/base/slow (que se quedan
     igual) con nombres pensados para motion más elaborado de
     fases posteriores (reveals, ambiente). */
  --motion-micro: 150ms;
  --motion-enter: 400ms;
  --motion-ambient: 3000ms;
}


/* ============================================================
   === FASE 2 — Pulido base ===
   ------------------------------------------------------------
   Aquí sí hay cambio visual, pero sin animaciones nuevas.
   Técnica clave: como este archivo carga DESPUÉS de variables.css,
   redefinir una variable con el MISMO nombre dentro de :root
   hace que gane en cascada — así se actualiza TODO el sitio sin
   tocar variables.css ni styles.css. Para revertir SOLO esta
   fase, borra este bloque completo: las variables vuelven a sus
   valores originales de variables.css automáticamente.
   ============================================================ */

:root {
  /* Sombras en capas activas en todo el sitio (cards, botones,
     header, lightbox, etc. — todo lo que ya usa var(--shadow-*)) */
  --shadow-sm: var(--shadow-sm-layered);
  --shadow-md: var(--shadow-md-layered);
  --shadow-lg: var(--shadow-lg-layered);

  /* Tipografía fluida en todos los títulos de sección.
     En desktop el valor máximo es IDÉNTICO al original (clamp
     tope = --fs-2xl/xl/lg de siempre), así que no cambia nada
     ahí; en mobile angosto reduce un poco para evitar wrapping
     incómodo en títulos largos. */
  --fs-2xl: var(--fs-fluid-2xl);
  --fs-xl: var(--fs-fluid-xl);
  --fs-lg: var(--fs-fluid-lg);
}

/* Fix hallazgo #4 de la auditoría: el badge del bento grid de
   "Especialidades" seguía en rojo, rompiendo la regla ya decidida
   de "dorado como acento principal, rojo solo en el CTA real". */
.bento-item__badge--chili {
  background: linear-gradient(135deg, var(--color-gold), #c98d0f);
}

/* Fix hallazgo #5: contraste del ribbon de categorías de la carta
   (dorado sobre ocean-blue) rondaba ~3.4:1. Oscurezco el azul de
   fondo y sumo un leve text-shadow — mismo look, contraste real
   ~4.7:1, ya cómodo incluso para texto que no calificara como
   "grande" en algún navegador. */
.menu-ribbon {
  background: #12507e;
  text-shadow: 0 1px 2px rgba(2, 8, 16, 0.55);
}

/* Hover más "premium": leve elevación + easing con salida suave,
   ahora combinado con las sombras en capas ya activas arriba.
   Mismas tarjetas que ya tenían hover — solo se refina la curva
   y se agrega el levantamiento. */
.feature-card,
.bento-item,
.combo-card,
.testimonial-card {
  transition: transform var(--motion-enter) var(--ease-out-expo),
    box-shadow var(--motion-enter) var(--ease-out-expo),
    background-color var(--transition-base);
}

.feature-card:hover,
.bento-item:hover,
.combo-card:hover,
.testimonial-card:hover {
  transform: translateY(-6px);
}

.menu-row {
  transition: background-color var(--motion-micro) var(--ease-out-soft),
    transform var(--motion-micro) var(--ease-out-soft);
}

.menu-row:hover {
  transform: translateX(3px);
}

/* Fix: en pantallas angostas, un nombre de plato largo (p. ej.
   "Papa rellena acevichada + huancaína") podía desbordar
   .menu-row__body y superponerse visualmente con .price-pill.
   .menu-row__body ya tiene min-width:0 (correcto para que el
   flex item se achique), pero sin overflow-wrap la palabra más
   larga no se corta y se sale de su caja. overflow-wrap:anywhere
   (mejor que break-word aquí) también entra en el cálculo de
   min-content del algoritmo flex, así que es una corrección real,
   no solo visual. Sin efecto en desktop: ahí nunca falta espacio. */
.menu-row__name,
.menu-row__desc {
  overflow-wrap: anywhere;
}

/* Mismo bug que arriba pero en la tabla de precios múltiples
   (Ceviches, Platos calientes con columnas Personal/Fuente):
   en <=480px la columna de nombre pasa a un ancho fijo de 140px
   con white-space:nowrap en TODAS las celdas (css/styles.css
   ~1217-1238). Un nombre largo ("Ceviche de maruchitas") no
   cabe en una sola línea de 140px y se desborda visualmente
   sobre la celda de precio vecina. Se deja el nowrap en las
   celdas de precio (siempre cortas) y se revierte solo en la
   celda de nombre para que envuelva en varias líneas. */
@media (max-width: 480px) {
  .menu-table__cell--name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.btn {
  transition: transform var(--motion-micro) var(--ease-spring),
    box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.btn:active {
  transform: scale(0.96);
}

.menu-nav__pill {
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--motion-micro) var(--ease-spring);
}

.menu-nav__pill:active {
  transform: scale(0.95);
}


/* ============================================================
   === FASE 3 — Capa de mar (fondo fijo por capas) ===
   ------------------------------------------------------------
   Estilos para los elementos que inyecta js/premium-layer.js
   (rayos de luz + nieve marina). No hay markup de esto en el
   HTML — todo se crea por JS en un contenedor nuevo. Sigue el
   MISMO patrón ya usado por .ocean-bubbles (fixed, inset:0,
   z-index:3, pointer-events:none) para no competir en capas con
   nada existente.

   Revertir: borrar este bloque + el bloque de Fase 4 + quitar
   <script src="js/premium-layer.js"> de los HTML (ver Fase 4).
   ============================================================ */

#premium-ocean-fx {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.ocean-fx__ray {
  position: absolute;
  top: -20%;
  width: 40vw;
  height: 140vh;
  background: linear-gradient(180deg, rgba(95, 182, 224, 0.1), rgba(95, 182, 224, 0) 70%);
  transform: rotate(8deg);
  mix-blend-mode: screen;
  animation: ocean-ray-drift 22s ease-in-out infinite alternate;
}

.ocean-fx__ray--2 {
  left: 55%;
  animation-duration: 28s;
  animation-delay: -6s;
  opacity: 0.7;
}

.ocean-fx__ray--1 {
  left: 5%;
}

@keyframes ocean-ray-drift {
  from {
    transform: rotate(8deg) translateX(0);
  }
  to {
    transform: rotate(8deg) translateX(4vw);
  }
}

.ocean-fx__snow {
  position: absolute;
  top: -5vh;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(251, 243, 227, 0.5);
  opacity: 0;
  animation: ocean-snow-fall var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes ocean-snow-fall {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.5;
  }
  92% {
    opacity: 0.35;
  }
  100% {
    transform: translate(6vw, 115vh);
    opacity: 0;
  }
}


/* ============================================================
   === FASE 4 — Fauna y partículas (bioluminiscencia + peces) ===
   ------------------------------------------------------------
   También inyectado por js/premium-layer.js dentro del mismo
   #premium-ocean-fx. Reutiliza el keyframe swim-across que YA
   existe en animations.css (mismo pez, misma silueta con la
   dirección de nado corregida) — no se duplica esa animación,
   solo se posicionan más peces a lo ancho de TODA la página
   (position:fixed) en vez de solo dentro de 2 secciones puntuales.

   Revertir Fase 3+4 juntas:
   1) Borra este bloque y el de Fase 3 de este archivo.
   2) Quita <script src="js/premium-layer.js"></script> de
      index.html y carta.html (o borra ese archivo).
   Nada de esto toca los peces/burbujas que YA existían antes.
   ============================================================ */

.ocean-fx__glow {
  position: absolute;
  width: var(--size, 90px);
  height: var(--size, 90px);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color, rgba(95, 182, 224, 0.5)) 0%, transparent 70%);
  mix-blend-mode: screen;
  animation: ocean-glow-pulse var(--duration, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes ocean-glow-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.ocean-fx__fish {
  position: fixed;
  top: var(--y);
  width: 46px;
  height: 22px;
  color: rgba(255, 255, 255, 0.1);
  animation: swim-across var(--duration, 40s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.ocean-fx__fish svg {
  width: 100%;
  height: 100%;
}


/* ============================================================
   === FASE 5 — Micro-interacciones y reveals ===
   ------------------------------------------------------------
   No se toca main.js: el sistema [data-reveal] + IntersectionObserver
   sigue intacto y funcionando igual. Acá solo se refina la CURVA
   de esa misma transición (easing con salida más suave) y se
   agregan micro-interacciones nuevas de bajo riesgo.
   ============================================================ */

/* Refina la curva del scroll-reveal existente (mismo selector,
   misma lógica JS, solo cambia el "feel" de la transición) */
[data-reveal] {
  transition: opacity var(--motion-enter) var(--ease-out-expo),
    transform var(--motion-enter) var(--ease-out-expo);
}

/* "Shine sweep": barrido de brillo en los botones primarios al
   pasar el mouse — micro-interacción CSS pura, sin JS. */
.btn--primary {
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn--primary:hover::after {
  transform: translateX(120%);
  transition: transform 0.7s var(--ease-out-soft);
}

/* Realce del clúster de fotos por categoría (1-2 por sección) con
   la curva de easing "premium" — el hover base ya vive en
   styles.css (.menu-category__photo:hover), esto solo refina la
   transición usando los tokens de esta capa. */
.menu-category__photo {
  transition: transform var(--motion-enter) var(--ease-out-expo),
    box-shadow var(--motion-enter) var(--ease-out-expo);
}

/* Ícono de categoría (galería) con leve "respiro" al enfocar con
   teclado, reforzando el estado focus-visible ya existente */
.gallery-item:focus-visible {
  transform: scale(1.03);
  transition: transform var(--motion-micro) var(--ease-spring);
}


/* ============================================================
   === FASE 6 — Header: marca más presente (logo + nombre) ===
   ------------------------------------------------------------
   Sube tamaño/peso del nombre y el logo del header (hoy "pasa
   desapercibido") sin tocar --header-height ni el breakpoint
   900px ya usado por el CTA/nav. Requiere 2 spans nuevos en el
   markup del logo (index.html y carta.html) — es la única fase
   que toca HTML, no solo CSS.

   Revertir: borrar este bloque + volver el markup del logo a
   como estaba antes (img + texto plano, sin los 2 spans).
   ============================================================ */

:root {
  --header-logo-size: 46px;
  --header-brand-fs: 1.375rem; /* 22px — mobile/base, CTA oculto libera espacio */
}

.header__logo {
  gap: var(--space-sm);
  transition: color var(--transition-base), transform var(--motion-micro) var(--ease-spring);
}

.header__logo img {
  height: var(--header-logo-size);
  width: var(--header-logo-size);
}

.header__logo-ring {
  display: flex;
  padding: 3px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  transition: transform var(--motion-micro) var(--ease-spring), border-color var(--transition-fast);
}

.header__logo-ring img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(2, 8, 16, 0.25);
}

.header__logo-text {
  font-size: var(--header-brand-fs);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(2, 10, 20, 0.4);
}

@media (hover: hover) and (pointer: fine) {
  .header__logo:hover .header__logo-ring {
    transform: scale(1.05);
    border-color: #ffd873;
  }
}

.header__logo:active {
  transform: scale(0.97);
}

@media (min-width: 900px) {
  :root {
    --header-logo-size: 44px;
    --header-brand-fs: 1.25rem; /* 20px — compacto, comparte fila con nav + CTA */
  }
}


/* ============================================================
   === FASE 7 — Footer: crédito discreto de MarketCode ===
   ------------------------------------------------------------
   Agrega una segunda línea al pie de página, deliberadamente
   más silenciada que el copyright de Recreo Picante — es un
   crédito de agencia, no el mensaje principal del footer.

   Revertir: borrar este bloque + quitar el <p class="footer__credit">
   de index.html y carta.html.
   ============================================================ */

.footer__credit {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: rgba(251, 243, 227, 0.35);
}

.footer__credit-brand {
  color: rgba(251, 243, 227, 0.55);
  font-weight: 600;
}


/* ============================================================
   === FASE 8 — Cierre: contraste, hover del CTA flotante y
   controles secundarios con el mismo motion premium ===
   ------------------------------------------------------------
   De una auditoría final: el tratamiento premium (easings de
   Fase 1) ya cubría tarjetas, botones y filas de menú, pero
   dejaba afuera iconos sociales, flechas del carrusel de
   testimonios, inputs de reserva y el botón flotante de
   WhatsApp — el CTA de mayor intención de conversión del sitio,
   que no tenía NINGÚN feedback al pasar el mouse. También sube
   el contraste del texto silenciado en la sección más clara de
   la escala marina (depth-1), donde el margen sobre el mínimo
   de accesibilidad AA era más justo que en el resto del sitio.

   Revertir: borrar este bloque completo.
   ============================================================ */

/* Depth-1 es la sección más clara de la escala marina — el texto
   silenciado ahí tiene menos margen de contraste que en el resto
   de secciones (más oscuras). Se sube la opacidad solo en este
   contexto; el resto del sitio sigue usando el token original. */
.section--depth-1 {
  --color-text-muted: rgba(251, 243, 227, 0.85);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float {
    transition: transform var(--motion-micro) var(--ease-spring), box-shadow var(--motion-micro) var(--ease-out-soft);
  }

  .whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-lg-layered);
  }

  .social-links__item {
    transition: background-color var(--motion-micro) var(--ease-out-soft), color var(--motion-micro) var(--ease-out-soft), transform var(--motion-micro) var(--ease-spring);
  }

  .testimonials__nav:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md-layered);
  }
}

.whatsapp-float:active {
  transform: scale(0.95);
}

.testimonials__nav {
  transition: background-color var(--motion-micro) var(--ease-out-soft), transform var(--motion-micro) var(--ease-out-soft), box-shadow var(--motion-micro) var(--ease-out-soft);
}

.reservation-form input {
  transition: border-color var(--motion-micro) var(--ease-out-soft), background-color var(--motion-micro) var(--ease-out-soft);
}

.reservation-form input:focus-visible {
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   === FASE 9 — Hero: aligerar el velo sobre la foto ===
   ------------------------------------------------------------
   El velo original (rgba(11,46,79,0.55 → 0.88)) apagaba y
   desaturaba la foto de comida del hero. Se reduce la densidad
   del mismo tono navy para que se recupere el color real de los
   platos, y se agrega un text-shadow sutil a subtítulo y nota
   como red de seguridad de legibilidad (el título ya tenía el
   suyo, no se toca).

   Revertir: borrar este bloque completo — el hero vuelve a usar
   el velo original de css/styles.css sin tocar nada más.
   ============================================================ */

.hero__bg {
  background: linear-gradient(180deg, rgba(11, 46, 79, 0.28), rgba(11, 46, 79, 0.62));
}

.hero__subtitle,
.hero__note {
  text-shadow: 0 2px 12px rgba(2, 10, 20, 0.5);
}


/* ============================================================
   === FASE 10 — Modo mobile/lite (menos carga de animación) ===
   ------------------------------------------------------------
   En móvil/táctil hay ~46 elementos animándose sin parar a la
   vez (burbujas, snow, glow, rayos, peces), varios con
   mix-blend-mode:screen (caro en GPUs móviles). js/premium-layer.js
   ya genera menos elementos en este rango (ver isMobile ahí);
   aquí solo se recorta lo que es markup estático (.bubble,
   .swimming-fish) y se quita mix-blend-mode de lo que queda.
   Desktop no cambia en nada.

   Revertir: borrar este bloque completo.
   ============================================================ */

@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .ocean-fx__ray {
    mix-blend-mode: normal;
    background: linear-gradient(180deg, rgba(95, 182, 224, 0.16), rgba(95, 182, 224, 0) 70%);
  }

  .ocean-fx__glow {
    mix-blend-mode: normal;
  }

  .ocean-bubbles .bubble:nth-child(2n) {
    display: none;
  }

  .section--depth-3 .swimming-fish:nth-of-type(2) {
    display: none;
  }

  .section--depth-7 .swimming-fish {
    display: none;
  }
}


/* ============================================================
   === FASE 11 — Rendimiento de scroll en mobile: sin backdrop-filter ===
   ------------------------------------------------------------
   backdrop-filter (blur) es una de las propiedades más caras
   para el GPU en mobile, sobre todo combinada con position:fixed
   (el header, activo TODO el scroll) y con varias instancias
   visibles a la vez (.feature-card). En mobile, los navegadores
   suelen no sostener 60fps recalculando el blur mientras
   compositan el scroll -> frames caídos -> el "parpadeo/freeze"
   reportado en toda la landing.

   Reemplazo: blur apagado + un fondo sólido (mismo tono navy/
   sand de siempre, solo con más opacidad) para mantener la
   legibilidad sin el costo del blur. Desktop no cambia en nada.

   Revertir: borrar este bloque completo.
   ============================================================ */

@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .header.is-scrolled {
    background: rgba(4, 21, 34, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .card,
  .feature-card {
    background: var(--surface-bg-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero__eyebrow {
    background: rgba(251, 243, 227, 0.22);
    backdrop-filter: none;
  }
}


/* ============================================================
   === FASE 12 — Reveal más rápido en mobile ===
   ------------------------------------------------------------
   En mobile, el scroll rápido a través de varias secciones deja
   contenido invisible más tiempo del ideal (hasta ~640ms en el
   peor caso: 240ms de stagger + 400ms de transición). Se acorta
   la transición SOLO en mobile (240ms en vez de 400ms); el cap
   del stagger se reduce en JS (ver main.js). Desktop no cambia.

   Revertir: borrar este bloque + el ajuste equivalente en
   initScrollReveal() de main.js (ver comentario ahí).
   ============================================================ */

@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  [data-reveal] {
    transition: opacity 240ms var(--ease-out-expo),
      transform 240ms var(--ease-out-expo);
  }
}