/* ==========================================================================
   CAFETERÍA BREW - ATMÓSFERA, TEXTURAS Y PROFUNDIDAD
   --------------------------------------------------------------------------
   Capas de ambiente que rompen el fondo plano:
     1. Grano de película (film grain)
     2. Patrón de granos de café tejido en el fondo
     3. Auroras cálidas que derivan lentamente
     4. Ornamentos divisores entre secciones
     5. Estados base de las animaciones de scroll
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS DE ATMÓSFERA
   -------------------------------------------------------------------------- */
/* NO poner overflow-x (ni `hidden` ni `clip`) en <html>: ambos rompen el
   `position: sticky` del header, que deja de quedarse arriba al hacer scroll.
   El paneo lateral en móvil ya está resuelto en origen: la capa de grano
   ocupa exactamente la pantalla y se mueve por background-position. */

:root {
  --grain-opacity: 0.045;
  --pattern-opacity: 0.55;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 34px;
}

/* --------------------------------------------------------------------------
   1. GRANO DE PELÍCULA — mata la sensación "digital plana"
   Se pinta sobre el contenido (z 9000) pero debajo de modales/carrito (99990+).
   -------------------------------------------------------------------------- */
/* Ocupa exactamente la pantalla: el temblor se hace moviendo la textura
   (background-position), NO agrandando la capa. Con width:200% el elemento
   desbordaba el <html> y dejaba paneo horizontal en móvil. */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 700ms steps(1) infinite;
}

@keyframes grainShift {
  0%   { background-position:   0px   0px; }
  20%  { background-position: -13px   9px; }
  40%  { background-position:   8px -14px; }
  60%  { background-position:  -9px  -8px; }
  80%  { background-position:  14px   5px; }
  100% { background-position:   0px   0px; }
}

/* --------------------------------------------------------------------------
   2. PATRÓN DE GRANOS DE CAFÉ — textura tejida en el fondo
   -------------------------------------------------------------------------- */
.bean-pattern {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d49b4b' stroke-width='1.1' opacity='0.09'%3E%3Cg transform='translate(34 30) rotate(-38)'%3E%3Cellipse rx='8.5' ry='12.5'/%3E%3Cpath d='M0 -12.5 C 4 -6, -4 6, 0 12.5'/%3E%3C/g%3E%3Cg transform='translate(118 66) rotate(24)'%3E%3Cellipse rx='8.5' ry='12.5'/%3E%3Cpath d='M0 -12.5 C 4 -6, -4 6, 0 12.5'/%3E%3C/g%3E%3Cg transform='translate(66 116) rotate(66)'%3E%3Cellipse rx='8.5' ry='12.5'/%3E%3Cpath d='M0 -12.5 C 4 -6, -4 6, 0 12.5'/%3E%3C/g%3E%3Cg transform='translate(140 140) rotate(-14)'%3E%3Cellipse rx='8.5' ry='12.5'/%3E%3Cpath d='M0 -12.5 C 4 -6, -4 6, 0 12.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  /* Se desvanece hacia el centro para que no compita con el contenido */
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, transparent 8%, #000 78%);
  mask-image: radial-gradient(ellipse at 50% 40%, transparent 8%, #000 78%);
}

/* --------------------------------------------------------------------------
   3. AURORAS CÁLIDAS — luz de tostadora derivando muy lento
   -------------------------------------------------------------------------- */
.ambient-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.ambient-blob.blob-1 {
  top: -10%;
  left: -8%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(212, 155, 75, 0.13) 0%, transparent 68%);
  animation: blobDrift1 42s ease-in-out infinite;
}

.ambient-blob.blob-2 {
  top: 32%;
  right: -14%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgba(184, 123, 46, 0.11) 0%, transparent 66%);
  animation: blobDrift2 55s ease-in-out infinite;
}

.ambient-blob.blob-3 {
  bottom: -18%;
  left: 22%;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, rgba(143, 90, 29, 0.12) 0%, transparent 68%);
  animation: blobDrift3 48s ease-in-out infinite;
}

@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(8vw, 6vh) scale(1.12); }
  66%      { transform: translate(-4vw, 12vh) scale(0.94); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-9vw, -8vh) scale(1.08); }
  70%      { transform: translate(-3vw, 9vh) scale(0.92); }
}

@keyframes blobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10vw, -10vh) scale(1.15); }
}

/* El contenido real debe vivir por encima de las capas ambientales (z-index 0).
   OJO: aquí NO se toca .main-header ni .top-bar. Tienen su propio
   position/z-index (sticky 999 y 100) en components.css; al incluirlos en esta
   lista se los degradaba a `relative; z-index:1`, lo que dejaba el header sin
   ser sticky y hundía el menú móvil por debajo del hero (los toques en los
   enlaces los recibía .hero-section). */
.hero-section,
.section,
.stats-band,
.bottom-cta-section,
.main-footer {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. BARRA DE PROGRESO DE SCROLL
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #8f5a1d, #e5ac58 45%, #f3be7a 70%, #e5ac58);
  box-shadow: 0 0 12px rgba(229, 172, 88, 0.6);
  z-index: 100001;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. ORNAMENTO DIVISOR ENTRE SECCIONES
   -------------------------------------------------------------------------- */
.section-divider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 0;
  color: var(--gold-primary);
}

.section-divider::before,
.section-divider::after {
  content: '';
  height: 1px;
  width: min(240px, 22vw);
  background: linear-gradient(90deg, transparent, rgba(212, 155, 75, 0.45));
}

.section-divider::after {
  background: linear-gradient(90deg, rgba(212, 155, 75, 0.45), transparent);
}

.divider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(229, 172, 88, 0.35));
}

.divider-mark svg {
  display: block;
}

/* --------------------------------------------------------------------------
   6. HALOS CÁLIDOS POR SECCIÓN — cada sección respira distinto
   -------------------------------------------------------------------------- */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.historia-section::before {
  background: radial-gradient(ellipse 70% 55% at 18% 40%, rgba(212, 155, 75, 0.07), transparent 70%);
}

.why-section::before {
  background: radial-gradient(ellipse 60% 60% at 82% 30%, rgba(184, 123, 46, 0.08), transparent 70%);
}

.origen-section::before {
  background: radial-gradient(ellipse 65% 60% at 30% 70%, rgba(212, 155, 75, 0.06), transparent 70%);
}

.testimonials-section::before {
  background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(143, 90, 29, 0.09), transparent 72%);
}

.blog-section::before {
  background: radial-gradient(ellipse 60% 55% at 75% 65%, rgba(212, 155, 75, 0.06), transparent 70%);
}

/* --------------------------------------------------------------------------
   7. ESTADOS BASE DE REVELADO POR SCROLL
   Sin JS visible: si GSAP falla, el contenido queda visible igual.
   -------------------------------------------------------------------------- */
html.reveal-ready [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

html.reveal-ready [data-reveal='up']    { transform: translateY(var(--reveal-distance)); }
html.reveal-ready [data-reveal='down']  { transform: translateY(calc(var(--reveal-distance) * -1)); }
html.reveal-ready [data-reveal='left']  { transform: translateX(calc(var(--reveal-distance) * -1)); }
html.reveal-ready [data-reveal='right'] { transform: translateX(var(--reveal-distance)); }
html.reveal-ready [data-reveal='scale'] { transform: scale(0.94); }

/* --------------------------------------------------------------------------
   8. NUEVA SECCIÓN — EL RITUAL BREW (línea de proceso)
   -------------------------------------------------------------------------- */
.ritual-section {
  overflow: hidden;
}

.ritual-section::before {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212, 155, 75, 0.07), transparent 72%);
}

.ritual-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 18px;
}

/* Riel dorado que conecta los pasos; se "dibuja" al hacer scroll */
.ritual-rail {
  position: absolute;
  top: 42px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border) 12%, var(--gold-border) 88%, transparent);
  overflow: hidden;
}

.ritual-rail-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--gold-light) 18%, var(--gold-bright) 50%, var(--gold-light) 82%, transparent);
  box-shadow: 0 0 14px rgba(229, 172, 88, 0.55);
}

.ritual-step {
  position: relative;
  text-align: center;
  padding: 0 6px;
}

.ritual-step-orb {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  background:
    radial-gradient(circle at 50% 35%, rgba(229, 172, 88, 0.16), rgba(15, 13, 11, 0.95) 68%);
  border: 1px solid var(--gold-border);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.ritual-step:hover .ritual-step-orb {
  transform: translateY(-6px) scale(1.06);
  border-color: var(--gold-light);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.7),
    0 0 26px rgba(229, 172, 88, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Anillo giratorio punteado alrededor del orbe */
.ritual-step-orb::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 155, 75, 0.3);
  animation: spinSlow 26s linear infinite;
}

.ritual-step:nth-child(even) .ritual-step-orb::after {
  animation-direction: reverse;
}

.ritual-step-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #160e06;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(212, 155, 75, 0.45);
}

.ritual-step-title {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--text-pure);
  margin-bottom: 8px;
}

.ritual-step-desc {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   9. NUEVA SECCIÓN — BANDA DE CIFRAS
   -------------------------------------------------------------------------- */
.stats-band {
  position: relative;
  z-index: 1;
  padding: 10px 0 74px 0;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background:
    linear-gradient(135deg, rgba(24, 20, 17, 0.92) 0%, rgba(11, 10, 9, 0.92) 100%);
  border: 1px solid rgba(229, 172, 88, 0.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.stat-cell {
  position: relative;
  padding: 34px 20px;
  text-align: center;
  transition: background var(--transition-smooth);
}

.stat-cell + .stat-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 155, 75, 0.28), transparent);
}

.stat-cell:hover {
  background: rgba(229, 172, 88, 0.05);
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   9.5 PREGUNTAS FRECUENTES (acordeón)
   -------------------------------------------------------------------------- */
.faq-section::before {
  background: radial-gradient(ellipse 65% 55% at 25% 45%, rgba(184, 123, 46, 0.07), transparent 70%);
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: rgba(20, 18, 16, 0.66);
  border: 1px solid rgba(229, 172, 88, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-smooth), background var(--transition-smooth);
}

.faq-item:hover {
  border-color: var(--gold-border);
  background: rgba(28, 24, 20, 0.8);
}

.faq-item.is-open {
  border-color: rgba(229, 172, 88, 0.34);
  background: rgba(28, 24, 20, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.faq-item.is-open .faq-q,
.faq-q:hover {
  color: var(--gold-light);
}

.faq-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  border: 1px solid var(--gold-border);
  background: rgba(229, 172, 88, 0.06);
  transition: transform var(--transition-smooth), background var(--transition-smooth);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(90deg);
  background: var(--gold-light);
  color: var(--bg-darkest);
}

/* Altura animable sin JS de medición: 0fr -> 1fr */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out-expo);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > div {
  overflow: hidden;
}

.faq-a p {
  margin: 0 24px 22px 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(229, 172, 88, 0.1);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   9.7 FOOTER CON PROFUNDIDAD
   Era la zona más plana del sitio: un bloque negro liso.
   -------------------------------------------------------------------------- */
.main-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 100% at 50% 0%, rgba(212, 155, 75, 0.09), transparent 62%),
    #060505;
}

/* Filo dorado superior que se difumina hacia los lados */
.main-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 172, 88, 0.55) 30%, rgba(243, 190, 122, 0.75) 50%, rgba(229, 172, 88, 0.55) 70%, transparent);
}

/* Grano de café gigante en marca de agua, sangrando por la esquina */
.main-footer::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 340px;
  height: 340px;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23e5ac58' stroke-width='2.4'%3E%3Cellipse cx='50' cy='50' rx='27' ry='40' transform='rotate(-30 50 50)'/%3E%3Cpath d='M28 72 C40 58 33 40 42 28 C49 18 57 14 66 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}

/* Los enlaces se deslizan y encienden un guion dorado al pasar el cursor */
.footer-links a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: padding-left var(--transition-smooth), color var(--transition-smooth);
}

.footer-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-light);
  transition: width var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--gold-light);
  padding-left: 16px;
}

.footer-links a:hover::before {
  width: 10px;
}

/* Los datos de contacto reaccionan igual que los enlaces */
.footer-contact-list a:hover {
  color: var(--gold-light);
}

.footer-contact-list .contact-icon {
  color: var(--gold-light);
}

.footer-bottom {
  border-top: 1px solid rgba(229, 172, 88, 0.1);
  padding-top: 24px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Solo existe dentro del menú desplegable móvil */
.nav-menu-cta {
  display: none;
}

/* --------------------------------------------------------------------------
   10. ICONOS SVG INLINE (reemplazo de emojis)
   -------------------------------------------------------------------------- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
  line-height: 0;
  flex-shrink: 0;
}

.icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.icon-gold { color: var(--gold-light); }
.icon-lg   { font-size: 1.25rem; }

/* Tabs del menú: el icono se enciende cuando la pestaña está activa */
.tab-btn .icon { color: var(--text-muted); transition: color var(--transition-fast); }
.tab-btn.active .icon,
.tab-btn:hover .icon { color: currentColor; }

/* --------------------------------------------------------------------------
   11. REFINAMIENTOS DE PROFUNDIDAD EN TARJETAS EXISTENTES
   -------------------------------------------------------------------------- */
/* Barrido de luz que cruza la tarjeta al pasar el cursor */
.why-item,
.blog-card,
.testimonial-card {
  position: relative;
  overflow: hidden;
}

.why-item::after,
.blog-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.055) 45%,
    rgba(229, 172, 88, 0.07) 55%,
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease-out-expo);
}

.why-item:hover::after,
.blog-card:hover::after,
.testimonial-card:hover::after {
  left: 130%;
}

/* Marca de agua de grano detrás de cada tarjeta "¿Por qué BREW?" */
.why-item .why-icon {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE DE LAS CAPAS NUEVAS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ritual-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .ritual-rail { display: none; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(3)::before,
  .stat-cell:nth-child(3) { border-top: 1px solid rgba(212, 155, 75, 0.14); }
  .stat-cell:nth-child(4) { border-top: 1px solid rgba(212, 155, 75, 0.14); }
  .stat-cell:nth-child(3)::before { display: none; }
}

@media (max-width: 640px) {
  .ritual-track { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 2rem; }
  .ambient-blob { filter: blur(60px); }

  /* En pantallas chicas las 3 sedes quedan muy juntas y los badges de
     distancia se pisan entre sí; el resumen de texto ya da los kilómetros. */
  #visitMap .distance-badge.leaflet-tooltip { display: none; }
}

@media (max-width: 420px) {
  .ritual-track { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .stat-cell + .stat-cell::before { display: none; }
  .stat-cell + .stat-cell { border-top: 1px solid rgba(212, 155, 75, 0.14); }
}

/* --------------------------------------------------------------------------
   13. CHECKOUT POR WHATSAPP (modal de datos de entrega)
   -------------------------------------------------------------------------- */
#checkoutAddressWrap.is-hidden {
  display: none;
}

.checkout-summary-row {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 10px 0 16px 0;
}

#checkoutSummary {
  color: var(--gold-light);
  font-weight: 700;
}

/* "ENVIAR POR WHATSAPP" con ícono se desbordaba por unos px en modales angostos */
.checkout-submit-btn {
  gap: 6px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 380px) {
  .checkout-submit-btn {
    font-size: 0.86rem;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Borde rojo en un campo que falló la validación al enviar */
.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3) !important;
}

/* Vista que reemplaza el formulario tras abrir WhatsApp */
.checkout-sent-view {
  text-align: center;
  padding: 20px 10px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.checkout-sent-view .icon {
  color: #25d366;
  font-size: 2.6rem;
  margin-bottom: 4px;
}

.checkout-sent-view h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-pure);
}

.checkout-sent-view p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  max-width: 320px;
}

.checkout-sent-view button {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   14. BOTÓN FLOTANTE DE WHATSAPP (contacto general, independiente del carrito)
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 96px; /* deja espacio bajo la insignia "Powered by Netlify" */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500; /* sobre el contenido y las capas de atmósfera, debajo de drawers/modales (99990+) */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(229, 172, 88, 0.35), 0 0 20px rgba(229, 172, 88, 0.25);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.whatsapp-float .icon {
  font-size: 1.7rem;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-light), 0 0 26px rgba(229, 172, 88, 0.4);
}

.whatsapp-float-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #25d366;
  animation: whatsappRipple 2.4s infinite ease-out;
  pointer-events: none;
}

/* No reutiliza radarRipple: esa animación incluye translate(-50%,-50%) porque
   fue pensada para un elemento posicionado con top/left:50% (los pines del
   mapa). Aquí el aro ya llena el botón entero (inset:0), así que ese mismo
   translate lo desplazaba ~28px hacia arriba-izquierda — quedaba descentrado
   del ícono. Con inset:0 basta con escalar: el origen de transformación por
   defecto ya es el centro del propio elemento. */
@keyframes whatsappRipple {
  0% { transform: scale(0.75); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 480px) {
  .whatsapp-float {
    right: 16px;
    bottom: 84px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-float .icon {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   15. ACCESIBILIDAD — respeta "reducir movimiento"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .grain-overlay,
  .ambient-blob,
  .ritual-step-orb::after,
  .whatsapp-float-pulse {
    animation: none !important;
  }

  html.reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}