/* ============ VARIABLES ============ */
:root{
  --ink: #0f0d0b;
  --ink-soft: #4a4038;
  --ink-2: #1a1613;
  --cream: #f6f1e7;
  --cream-2: #efe7d8;
  --ivory: #faf7f0;
  --gold: #c9a463;
  --gold-light: #e9d3a3;
  --gold-deep: #9c7a3a;
  --terracotta: #b5651d;
  --flame: #ffb648;
  --white: #fffdf9;
  --platinum: #cdd3d6;
  --platinum-light: #e8ecee;
  --platinum-deep: #8b959a;
  --shadow: 0 24px 70px -24px rgba(15, 13, 11, 0.4);
  --shadow-gold: 0 10px 40px -12px rgba(201,164,99,.45);
  --radius: 22px;
  --ff-head: 'Playfair Display', serif;
  --ff-body: 'Jost', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --accent: var(--gold);
}

/* Paleta unificada premium: negro elegante, marfil y dorado en toda la web.
   Las secciones varían solo el tono de fondo (claro/oscuro), nunca el matiz. */
.hero{ --accent: var(--gold); }
.about{ --accent: var(--gold); background: var(--ink); overflow:hidden; position:relative; min-height:90vh; display:flex; align-items:center; padding: 5rem 0; }
.about > .container{ position:relative; z-index:2; }
/* Fondo de vídeo de la sección "Nosotros": el vídeo es el protagonista,
   se ve prácticamente a pantalla completa y casi a su brillo real — solo
   una viñeta muy leve para unificar tono, NUNCA una capa oscura general
   (esa legibilidad la da el degradado lateral de .about-text-scrim, que
   solo cubre la columna de texto y se disuelve del todo antes del centro). */
.about-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.about-bg-video{ width:100%; height:100%; object-fit:cover; display:block; }
.about-bg-overlay{ position:absolute; inset:0; background: rgba(6,5,4,.12); }
.collections{ --accent: var(--gold); background: var(--cream); position:relative; overflow:hidden; }
.collections > .container{ position:relative; z-index:1; }
.process{ --accent: var(--platinum); background: var(--ink-2); color: var(--cream); }
.process .section-title{ color: var(--ivory); }
.process .section-sub{ color: rgba(246,241,231,.6); }
.contact{
  --accent: var(--gold);
  overflow:hidden;
  background:
    radial-gradient(ellipse 640px 420px at 6% 12%, rgba(255,255,255,.4), transparent 62%),
    radial-gradient(ellipse 520px 640px at 100% 8%, rgba(239,231,216,.55), transparent 58%),
    radial-gradient(ellipse 760px 560px at 94% 92%, rgba(233,211,163,.16), transparent 60%),
    radial-gradient(ellipse 500px 500px at 2% 96%, rgba(246,241,231,.5), transparent 55%),
    linear-gradient(163deg, var(--ivory) 0%, var(--cream) 48%, var(--cream-2) 100%);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--ff-head); font-weight:600; margin:0; color: var(--ink); }
p{ margin:0; }
.container{ width:min(1180px, 92%); margin-inline:auto; }

::selection{ background: var(--gold-light); color: var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--cream); }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius:10px; }

/* ============ PROGRESS BAR ============ */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--flame));
  z-index: 1000; transition: width .1s linear;
}

/* ============ REVEAL ANIM ============ */
.reveal{
  opacity:0; transform: translateY(28px); filter: blur(0);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in-view{ opacity:1; transform: translateY(0); filter: blur(0); }

/* Cada sección revela sus elementos con una firma de movimiento distinta */
.about .reveal{ transform: translateY(22px); filter: blur(6px); }
.about .reveal.in-view{ transform: translateY(0); filter: blur(0); }

.collections .reveal, .process .reveal, .christmas .reveal{
  transform: translateY(18px) scale(.94);
}
.collections .reveal.in-view, .process .reveal.in-view, .christmas .reveal.in-view{
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .reveal, .about .reveal, .collections .reveal, .process .reveal, .christmas .reveal{
    transition-duration:.01s; filter:none; transform:none;
  }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .95rem 2rem; border-radius: 50px; font-family: var(--ff-body);
  font-weight:500; font-size: .95rem; cursor:pointer; border:1px solid transparent;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.55) 52%, transparent 70%);
  transform: translateX(-140%); transition: transform .75s var(--ease);
}
.btn:hover::before{ transform: translateX(140%); }
.btn-primary{
  background: linear-gradient(135deg, var(--ink), var(--gold-deep) 55%, var(--gold));
  color: var(--ivory); box-shadow: 0 10px 34px -10px rgba(156,122,58,.55);
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -12px rgba(156,122,58,.7), 0 0 0 1px rgba(233,211,163,.3);
}
.btn-ghost{ border-color: rgba(246,241,231,.55); color: var(--ivory); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.btn-ghost:hover{
  background: var(--ivory); color: var(--ink); border-color: var(--ivory); transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.4);
}
.btn-block{ width:100%; }
.btn-icon{
  border:none; background: var(--ink); color:var(--white); padding:.55rem 1.1rem;
  border-radius:50px; font-size:.85rem; cursor:pointer;
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-icon:hover{
  background: var(--gold-deep); transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(156,122,58,.6);
}

/* ============ HEADER ============ */
/* Fondo translúcido permanente (no solo al hacer scroll): el hero ahora
   tiene un mosaico de vídeo muy vivo y variado detrás, y el texto oscuro
   del menú necesita una placa de contraste constante para leerse bien pase
   lo que pase en el vídeo de fondo. */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.4rem 0; transition: all .4s var(--ease);
  background: rgba(250, 245, 235, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 6px 24px -18px rgba(0,0,0,.2);
}
.site-header.scrolled{
  padding: .7rem 0; background: rgba(250, 245, 235, .92);
  backdrop-filter: blur(16px); box-shadow: 0 6px 30px -12px rgba(0,0,0,.15);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:.5rem; font-family: var(--ff-head); font-size:1.35rem; font-weight:700; }
.logo-img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.logo-text em{ font-style: normal; color: var(--terracotta); }

.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.nav-link{
  position:relative; font-size:.95rem; font-weight:500; color: var(--ink-soft);
  padding: .3rem 0; transition: color .3s;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background: var(--terracotta); transition: width .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-cta{
  background: var(--ink); color: var(--white) !important; padding: .55rem 1.3rem; border-radius: 50px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--terracotta); }

.menu-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem;
}
.menu-toggle span{ width:26px; height:2px; background: var(--ink); transition: all .35s var(--ease); }
.menu-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  padding-top: 6rem; overflow:hidden;
  background: radial-gradient(ellipse at 70% 20%, #fff9ee 0%, var(--cream) 55%);
}
/* Fondo del hero: degradado oscuro cálido, sin símbolos. */
.hero-symbols{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2c2015 0%, #1c140d 45%, #100b07 100%);
}
/* Velo cálido descentrado, muy sutil, para que el negro no sea plano —
   ningún patrón ni textura, solo un degradado. */
.hero-symbols::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 50% at 72% 18%, rgba(255,150,60,.18), transparent 70%);
}

/* symbolDrift se mantiene: aunque ya no se usa aquí, "El Proceso" anima sus
   símbolos flotantes con este mismo keyframe (ver .process-symbol). */
@keyframes symbolDrift{
  0%{ transform: translate(0,0) rotate(var(--rot-a, -3deg)); }
  100%{ transform: translate(var(--drift-x,10px), var(--drift-y,-8px)) rotate(var(--rot-b, 3deg)); }
}

/* Rayos de sol con calidez de llama: un abanico de franjas (conic-gradient)
   en tonos ámbar/naranja, bien presentes (no ya un susurro), que gira
   despacio y desenfocado, como luz de vela entrando de refilón —
   mix-blend-mode:screen para que solo aclare, nunca oscurezca. */
.hero-rays{
  position:absolute; top:-40%; right:-25%; width:95%; height:180%; z-index:0;
  pointer-events:none; mix-blend-mode:screen; opacity:.95;
  background: conic-gradient(from 200deg at 50% 50%,
    transparent 0deg, rgba(255,150,50,.26) 5deg, transparent 15deg,
    transparent 40deg, rgba(255,170,70,.2) 48deg, transparent 58deg,
    transparent 94deg, rgba(255,140,40,.24) 102deg, transparent 112deg,
    transparent 148deg, rgba(255,170,70,.18) 156deg, transparent 166deg,
    transparent 360deg);
  filter: blur(14px);
  animation: heroRaysDrift 70s linear infinite;
}
@keyframes heroRaysDrift{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

/* Destellos tipo llama: chispas cálidas (naranja/ámbar, con halo) que
   parpadean con más frecuencia que un destello normal — evocan el brillo
   de una vela encendida, no una estrella fría. Reutilizan sparkFlash. */
.hero-spark{
  position:absolute; left:var(--x); top:var(--y); width:5px; height:5px; border-radius:50%;
  background: radial-gradient(circle, #fff4d6 0%, #ffb648 35%, rgba(255,110,40,.6) 62%, transparent 78%);
  box-shadow: 0 0 14px 3px rgba(255,140,60,.55);
  opacity:0; animation: sparkFlash var(--pdur, 4.5s) ease-in-out infinite; animation-delay: var(--pdelay, 0s);
}

/* Contenedores de los destellos/polvo dorado generados en js/script.js
   (buildHeroAmbient) — el polvo reutiliza .p-gold-mote de "Nuestro
   Universo" para que el hero se sienta coherente con el resto de la web. */
.hero-sparkles{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-motes{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* Tarjeta de legibilidad contenida tras el texto: una mezcla de alpha (no
   "brightness" multiplicativo, que aplanaba el vídeo a negro) + un desenfoque
   suave, difuminada con mask-image en vez de un corte recto — el fondo de la
   izquierda queda visible a través y alrededor de ella, no borrado. */
.hero-text-scrim{
  position:absolute; top:0; left:0; bottom:0; width:min(780px, 66%); z-index:1;
  background: linear-gradient(100deg, rgba(6,5,4,.86) 0%, rgba(6,5,4,.72) 45%, rgba(6,5,4,.36) 78%, transparent 100%);
  -webkit-backdrop-filter: blur(6px) saturate(.85);
  backdrop-filter: blur(6px) saturate(.85);
  mask-image: linear-gradient(90deg, #000 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 68%, transparent 100%);
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue, .hero-rays{ animation:none; }
  .hero-spark{ animation:none; opacity:0; }
}

/* Fila del hero: el texto de siempre a la izquierda + la foto del taller
   (antes en "Nosotros"), más grande, a la derecha, sobre el fondo cálido.
   En tablet/móvil se apila igual que about-grid: foto debajo del texto. */
.hero-row{ display:flex; align-items:center; gap:2rem; }
.hero-visual{ position:relative; z-index:2; flex:0 0 540px; max-width:540px; }
.hero-visual .about-frame{ box-shadow: 0 24px 70px -18px rgba(0,0,0,.6); }

@media (max-width:980px){
  .hero-row{ flex-direction:column; align-items:stretch; gap:2.5rem; }
  .hero-visual{ flex:none; max-width:640px; width:100%; margin:0 auto; order:2; }
  .hero-inner{ order:1; }
}

.hero-inner{ position:relative; z-index:2; max-width: 640px; }
.hero-inner .reveal{ transform: translateY(34px); filter: blur(8px); transition-duration: 1.1s; }
.hero-inner .reveal.in-view{ transform: translateY(0); filter: blur(0); }
.eyebrow{
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent);
  font-weight:600; margin-bottom: .9rem; display:flex; align-items:center; gap:.6rem;
  transition: color .3s; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.eyebrow.center{ justify-content:center; }
.eyebrow::before{
  content:''; display:inline-block; width:30px; height:7px; background: var(--accent);
  clip-path: polygon(0% 55%, 10% 15%, 22% 60%, 34% 5%, 48% 50%, 62% 20%, 76% 65%, 88% 10%, 100% 45%, 100% 100%, 0% 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: background .3s, transform .8s var(--ease) .1s;
}
.eyebrow.in-view::before{ transform: scaleX(1); }
/* En el hero el texto vive sobre un mosaico de vídeo muy vivo y cambiante
   (no un fondo fijo): el dorado medio y las sombras suaves que bastan en el
   resto de la web se lavan ahí, así que aquí se refuerzan aparte. */
.hero-inner .eyebrow{ color: var(--gold-light); text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.5); }
.hero-inner .eyebrow::before{ background: var(--gold-light); }
.hero-title{
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height:1.08; margin-bottom: 1.3rem; color: var(--ivory);
  text-shadow: 0 4px 28px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(0,0,0,.6);
}
.text-gradient{
  color: var(--gold-light);
  text-shadow: 0 4px 28px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.7);
}
.hero-sub{
  font-size: 1.1rem; color: rgba(250,247,240,.92); max-width: 480px; margin-bottom: 2.2rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.7);
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom: 3.5rem; }

.hero-stats{ display:flex; gap: 2.8rem; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family: var(--ff-head); font-size:2rem; font-weight:700; color: var(--ivory); text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.7); }
.stat-label{ font-size:.82rem; color: rgba(250,247,240,.88); text-shadow: 0 1px 10px rgba(0,0,0,.7); }

@keyframes floaty{ 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-8px);} }

.scroll-cue{
  position:absolute; left:50%; bottom: 2rem; transform: translateX(-50%);
  width:24px; height:24px; color: var(--ivory);
  animation: floaty 2.6s ease-in-out infinite;
}
.scroll-arrow{ width:100%; height:100%; }

/* ============ SECTION GENERIC ============ */
section{ padding: 7rem 0; position:relative; }
.section-title{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 1rem; }
.section-title.center{ text-align:center; }
.section-sub{ color: var(--ink-soft); max-width:520px; margin: 0 auto 2.8rem; }
.section-sub.center{ text-align:center; }

/* ============ ABOUT / NOSOTROS ============ */
/* Rediseño "vídeo protagonista", estilo marca de lujo artesanal (Apple/
   Aesop/Rolex): nada de caja oscura tapando el vídeo. Dos columnas en
   escritorio — el texto ocupa ~34% a la izquierda, el resto queda libre
   para que el vídeo se vea casi entero — y la legibilidad la da solo un
   degradado lateral que se disuelve antes de llegar al centro
   (.about-text-scrim), nunca un panel sólido ni backdrop-filter. */
.about-grid{
  display:flex; align-items:center;
  padding-left: clamp(1.5rem, 5vw, 4.5rem);
}
.about-text-scrim{
  position:absolute; top:0; left:0; bottom:0; z-index:1;
  width:min(820px, 60%);
  background: linear-gradient(90deg,
    rgba(6,5,4,.7) 0%, rgba(6,5,4,.48) 30%, rgba(6,5,4,.2) 52%, transparent 72%);
  pointer-events:none;
}
.about-content{
  position:relative; z-index:2;
  width:34%; min-width:340px; max-width:560px; text-align:left; margin:0;
}
.about-content .eyebrow{
  color: var(--gold-light); text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 0 18px rgba(0,0,0,.6);
}
.about-content .eyebrow::before{ background: var(--gold-light); }
.about-content .section-title{
  font-size: clamp(3.2rem, 3vw + 2rem, 4.5rem); line-height:1.08; font-weight:700;
  margin: 1.5rem 0 1.9rem; color: var(--ivory);
  text-shadow: 0 4px 32px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.75);
  transition-delay: .12s;
}
.about-content p{
  font-size:1.375rem; line-height:1.75; font-weight:300; margin-bottom:1.5rem;
  color: rgba(255,253,249,.86); text-shadow: 0 2px 16px rgba(0,0,0,.6);
  transition-delay: .22s;
}
.about-content p strong{ color: var(--gold-light); font-weight:600; }
.about-content p + p{ transition-delay: .3s; }
.about-content .feature-list{ margin-top:2.6rem; gap:1.15rem; transition-delay: .4s; }
.about-content .feature-list li{ color: var(--ivory); font-size:1.05rem; text-shadow: 0 1px 8px rgba(0,0,0,.55); }

@media (max-width: 980px){
  .about{ min-height:auto; padding: 6.5rem 0 5rem; align-items:flex-end; }
  .about-grid{ display:block; padding-left:0; }
  .about-text-scrim{
    top:auto; left:0; right:0; bottom:0; width:100%; height:75%;
    background: linear-gradient(0deg,
      rgba(6,5,4,.75) 0%, rgba(6,5,4,.5) 45%, transparent 95%);
  }
  .about-content{ width:100%; min-width:0; max-width:min(480px, 80%); margin-inline:auto; text-align:center; }
  .about-content .eyebrow{ justify-content:center; }
  .about-content .section-title{ font-size: clamp(2.2rem, 7vw, 2.9rem); }
  .about-content .feature-list{ align-items:center; }
  .about-content .feature-list li{ justify-content:center; }
}
.about-visual{ position:relative; }
.about-glow{
  position:absolute; inset:-6%; z-index:0; border-radius:50%;
  background: radial-gradient(circle, rgba(201,164,99,.28), transparent 70%);
  filter: blur(30px);
}
.about-frame{
  position:relative; z-index:1; border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow);
}
.about-photo{
  width:100%; height:auto; aspect-ratio: 1200 / 720; object-fit:cover; object-position: center 40%; display:block;
}
.about-glass{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1.2rem; z-index:2;
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.2rem; border-radius:14px;
  background: rgba(28,23,18,.28);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 30px -10px rgba(0,0,0,.4);
  color:#fff;
}
.about-glass-icon{ font-size:1.5rem; flex-shrink:0; }
.about-glass strong{ display:block; font-family:var(--ff-head); font-size:1rem; font-weight:600; margin-bottom:.15rem; }
.about-glass span{ font-size:.78rem; opacity:.85; line-height:1.3; }
.feature-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.8rem; }
.feature-list li{ display:flex; align-items:center; gap:.7rem; font-weight:500; }
.feature-icon{ font-size:1.2rem; }

/* ============ FONDO "PAPEL ARTESANAL" ============ */
.paper-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background: var(--cream); }

/* Material base: SVG feTurbulence -> escala de grises -> remapeo a tono marfil/crema/beige cálido.
   El propio ruido ES el color (no un overlay traslúcido), por eso la variación de tono se ve
   incluso en una captura estática. Rango aprox: R 230-255, G 209-250, B 178-240 (~10-24%). */
.paper-texture{
  position:absolute; inset:-2%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='pt' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='17' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 0 1' result='g'/%3E%3CfeComponentTransfer in='g' result='gc'%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer in='gc' result='tone'%3E%3CfeFuncR type='linear' slope='0.10' intercept='0.90'/%3E%3CfeFuncG type='linear' slope='0.16' intercept='0.82'/%3E%3CfeFuncB type='linear' slope='0.24' intercept='0.70'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23f7f2e8' filter='url(%23pt)'/%3E%3C/svg%3E");
  background-size: 900px 900px;
  background-repeat: repeat;
}

/* Fibra fina superpuesta: mismo principio (feTurbulence en escala de grises), a mayor
   frecuencia y en multiply, para el detalle de grano/fibra sobre el tono base. */
.paper-grain{
  position:absolute; inset:-2%;
  opacity:.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='31' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23808080' filter='url(%23pg)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* Iluminación cálida y amplia, como una ventana sobre la mesa de trabajo.
   Es la ÚNICA capa que se mueve: la textura permanece fija. */
.paper-light{
  position:absolute; inset:-20%;
  background: radial-gradient(58% 48% at 24% 16%, rgba(255,252,245,.85) 0%, rgba(255,252,245,0) 62%);
  animation: paperBreathe 27s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes paperBreathe{
  0%, 100%{ opacity:.7; transform: translate3d(0,0,0) scale(1); }
  50%{ opacity:1; transform: translate3d(-1.4%,1.1%,0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .paper-light{ animation:none; }
}

/* ---- Identidad visual por categoría: 4 "escenas" de fondo apiladas dentro
   de .paper-bg, todas presentes a la vez, cambiando solo su opacidad. El
   cambio de filtro alterna data-scene en .paper-bg y el crossfade lo hace
   la transition de .paper-scene — nunca se añade/quita nada del layout. ---- */
.paper-scene{
  position:absolute; inset:0; opacity:0;
  transition: opacity .55s var(--ease);
}
.paper-bg[data-scene="all"] .scene-all{ opacity:1; }

/* Cielo estrellado de la pestaña "Todas": mismo tono casi negro y el mismo
   truco de campo estelar (un único box-shadow con cientos de estrellas,
   ver buildCollAllStars en script.js) que "Nuestro Universo" — así la
   cabecera del catálogo y la esfera de más abajo comparten un único fondo,
   sin costura visible entre ambas. */
.scene-all{
  background: radial-gradient(120% 90% at 50% 0%, #1c140d 0%, #100b07 45%, #0a0705 100%);
}
.scene-all-glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(55% 45% at 72% 12%, rgba(255,183,90,.12), transparent 70%);
}
.paper-bg[data-scene="pascua"] .scene-pascua{ opacity:1; }
.paper-bg[data-scene="bautizo"] .scene-bautizo{ opacity:1; }
.paper-bg[data-scene="boda"] .scene-boda{ opacity:1; }
.paper-bg[data-scene="navidad"] .scene-navidad{ opacity:1; }
.paper-bg[data-scene="toallas"] .scene-toallas{ opacity:1; }
.paper-bg[data-scene="toallas-vela"] .scene-toallas-vela{ opacity:1; }

.scene-texture{ position:absolute; inset:-2%; background-size: 900px 900px; background-repeat: repeat; }

/* Cirios Pascuales: pergamino algo más cálido/rico que el marfil neutro,
   tono más dorado (mismo ruido, remapeo de color distinto). */
.texture-pascua{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='ptp' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='41' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 0 1' result='g'/%3E%3CfeComponentTransfer in='g' result='gc'%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer in='gc' result='tone'%3E%3CfeFuncR type='linear' slope='0.08' intercept='0.91'/%3E%3CfeFuncG type='linear' slope='0.13' intercept='0.85'/%3E%3CfeFuncB type='linear' slope='0.21' intercept='0.66'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23f7f2e8' filter='url(%23ptp)'/%3E%3C/svg%3E");
}
/* Fotografía del taller (cirios pascuales reales pintándose): fondo puro,
   nunca protagonista — cover/center, opacidad baja y un velo crema encima
   para que quede siempre por detrás de tarjetas y texto. */
.scene-photo{
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.46;
  transition: background .6s ease, opacity .6s ease;
}
.photo-pascua{ background-image: url("../images/pascua/pascua-taller-bg.jpeg"); }
.photo-pascua video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-bautizo{ background-image: url("../images/fondos/bautizo-fondo.jpeg"); }
.photo-bautizo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-boda{ background-image: url("../images/fondos/boda-fondo.jpeg"); }
.photo-boda video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-navidad{ background-image: url("../images/fondos/navidad-fondo.jpeg"); }
.photo-navidad video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-toallas{ background-image: url("../images/fondos/toallas-fondo.jpeg"); }
.photo-toallas video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-toallas-vela{ background-image: url("../images/fondos/toallas-vela-fondo.jpeg"); }
.photo-toallas-vela video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scene-photo::after{
  content:''; position:absolute; inset:0;
  background: rgba(247,242,232,.18);
}

/* Filigrana muy sutil: cruces inscritas en círculos, motivo clásico de orfebrería
   religiosa, trazo fino dorado apagado, casi invisible salvo mirando de cerca. */
.scene-filigree{
  position:absolute; inset:0; opacity:.09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%239c7a3a' stroke-width='1'%3E%3Cpath d='M70 20 L70 50 M55 35 L85 35'/%3E%3Ccircle cx='70' cy='35' r='16'/%3E%3Cpath d='M20 100 L20 130 M5 115 L35 115'/%3E%3Ccircle cx='20' cy='115' r='14'/%3E%3Cpath d='M120 95 L120 125 M105 110 L135 110'/%3E%3Ccircle cx='120' cy='110' r='14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Velas de Bautizo: base mucho más blanca/pálida, casi sin sesgo cálido,
   con un levísimo toque celeste. */
.texture-bautizo{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='ptb' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='53' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 0 1' result='g'/%3E%3CfeComponentTransfer in='g' result='gc'%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer in='gc' result='tone'%3E%3CfeFuncR type='linear' slope='0.06' intercept='0.95'/%3E%3CfeFuncG type='linear' slope='0.07' intercept='0.955'/%3E%3CfeFuncB type='linear' slope='0.08' intercept='0.965'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23f7f2e8' filter='url(%23ptb)'/%3E%3C/svg%3E");
}
/* Bokeh muy suave tipo acuarela difuminada: manchas circulares blancas/celestes,
   sin bordes duros, pensadas para no competir nunca con las tarjetas. */
.scene-bokeh{
  position:absolute; inset:-10%;
  background:
    radial-gradient(180px 180px at 15% 20%, rgba(214,231,245,.5) 0%, transparent 70%),
    radial-gradient(240px 240px at 84% 14%, rgba(255,255,255,.55) 0%, transparent 72%),
    radial-gradient(200px 200px at 76% 82%, rgba(214,231,245,.45) 0%, transparent 70%),
    radial-gradient(160px 160px at 22% 80%, rgba(255,255,255,.5) 0%, transparent 68%),
    radial-gradient(140px 140px at 50% 46%, rgba(224,238,248,.35) 0%, transparent 70%);
  filter: blur(8px);
}

/* Mesa & Bodas: lino beige, ligeramente más neutro/gris que el marfil dorado
   de pascua, con manchas orgánicas de verde eucalipto y rosa empolvado muy
   desenfocadas en las esquinas — sugieren flores sin llegar a ser figurativas. */
.texture-boda{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='ptw' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='67' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 0 1' result='g'/%3E%3CfeComponentTransfer in='g' result='gc'%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer in='gc' result='tone'%3E%3CfeFuncR type='linear' slope='0.11' intercept='0.87'/%3E%3CfeFuncG type='linear' slope='0.14' intercept='0.82'/%3E%3CfeFuncB type='linear' slope='0.19' intercept='0.71'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23f7f2e8' filter='url(%23ptw)'/%3E%3C/svg%3E");
}
.scene-bloom{
  position:absolute; inset:-15%;
  background:
    radial-gradient(38% 32% at 88% 10%, rgba(150,168,132,.16) 0%, transparent 72%),
    radial-gradient(34% 30% at 6% 92%, rgba(214,158,150,.14) 0%, transparent 74%),
    radial-gradient(22% 20% at 14% 10%, rgba(150,168,132,.10) 0%, transparent 75%);
  filter: blur(20px);
}
/* Destellos dorados discretos: puntos diminutos, nunca más de una docena,
   con un parpadeo lentísimo compartido. */
.scene-sparkle{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(233,211,163,.85) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 68% 18%, rgba(233,211,163,.75) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 62%, rgba(233,211,163,.8) 0%, transparent 100%),
    radial-gradient(1.4px 1.4px at 35% 75%, rgba(233,211,163,.65) 0%, transparent 100%),
    radial-gradient(1.8px 1.8px at 55% 40%, rgba(233,211,163,.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 60%, rgba(233,211,163,.6) 0%, transparent 100%),
    radial-gradient(1.7px 1.7px at 90% 85%, rgba(233,211,163,.65) 0%, transparent 100%);
  animation: sparkleTwinkle 16s ease-in-out infinite;
}
@keyframes sparkleTwinkle{
  0%, 100%{ opacity:.65; }
  50%{ opacity:1; }
}

.scene-light{ position:absolute; inset:-20%; animation: paperBreathe 27s ease-in-out infinite; will-change: transform, opacity; }
.light-pascua{ background: radial-gradient(58% 48% at 24% 16%, rgba(255,247,225,.9) 0%, rgba(255,247,225,0) 62%); }
.light-bautizo{ background: radial-gradient(60% 50% at 76% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 64%); }
.light-boda{ background: radial-gradient(58% 48% at 24% 80%, rgba(255,250,240,.82) 0%, rgba(255,250,240,0) 62%); }
.light-navidad{ background: radial-gradient(58% 48% at 50% 12%, rgba(255,238,208,.88) 0%, rgba(255,238,208,0) 62%); }
.light-toallas{ background: radial-gradient(58% 48% at 30% 20%, rgba(255,248,250,.9) 0%, rgba(255,248,250,0) 62%); }
.light-toallas-vela{ background: radial-gradient(58% 48% at 70% 22%, rgba(255,241,218,.88) 0%, rgba(255,241,218,0) 62%); }

@media (prefers-reduced-motion: reduce){
  .paper-scene{ transition:none; }
  .scene-light{ animation:none; }
  .scene-sparkle{ animation:none; opacity:.7; }
}

/* ============ COLLECTIONS / FILTERS ============ */
.filters{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-bottom: 3rem; }
.filter-btn{
  padding: .6rem 1.4rem; border-radius:50px; border:1px solid rgba(28,23,18,.15);
  background: var(--white); font-family: var(--ff-body); font-size:.9rem; cursor:pointer;
  transition: all .3s var(--ease);
}
.filter-btn:hover{ border-color: var(--accent); color: var(--accent); }
.filter-btn.active{ background: var(--accent); color:var(--white); border-color: var(--accent); }

/* Cuando la pestaña activa es "Todas" (cielo estrellado, ver .scene-all), la
   cabecera del catálogo pasa de tonos oscuros pensados para el papel claro
   a dorado/blanco cálido, y los botones de filtro llevan fondo sólido
   bronce en vez de píldora blanca — para que todo se lea bien sobre el
   fondo casi negro. El resto de pestañas (papel claro) no cambian.
   .is-all-scene la pone/quita js/script.js (applyCollectionFilter) — más
   fiable aquí que :has(), que no siempre invalida bien en cada motor. */
.collections.is-all-scene .section-title{
  color: var(--ivory); text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.collections.is-all-scene .section-sub{
  color: var(--gold-light);
}
.collections.is-all-scene .filter-btn{
  background: var(--gold-deep); border-color: rgba(255,255,255,.18); color: var(--gold-light);
}
.collections.is-all-scene .filter-btn:hover{
  border-color: var(--gold-light); color: var(--ivory);
}
.collections.is-all-scene .filter-btn.active{
  background: var(--gold); color: var(--ink); border-color: var(--gold);
}

/* Cada colección: título centrado + (si tiene niveles) uno o varios bloques
   "tier" con su propia galería de arrastre y tarjeta de precio; si no tiene
   niveles, un único encabezado título+precio y una sola galería. */
.collections-list{ display:flex; flex-direction:column; gap:4.5rem; }
.coll-block.hide{ display:none; }

/* Universo vive ahora dentro de Colecciones, como contenido de la pestaña
   "Todas" (mismo mecanismo .hide que los .coll-block, ver COLLECTION
   FILTERS en js/script.js). Se quita solo el padding superior para no
   duplicar el que ya aporta la cabecera de Colecciones justo encima; el
   resto de su diseño (fondo, esfera, sliders) queda intacto. */
#esfera.hide{ display:none; }
#colecciones #esfera{ padding-top:0; }

/* En vista "Todas", cada colección lleva su propio tinte muy sutil (un lavado
   de color, no un bloque plano) para que al bajar y llegar a Cirios, Bautizo...
   se note un cambio de ambiente — misma identidad de color ya usada en el
   acento de cada categoría, aquí solo como fondo casi imperceptible. Se
   apoya en el fade-in que .reveal ya aplica a .coll-block, así el tinte
   aparece con la misma transición suave al entrar en pantalla. */
.coll-block{
  border-radius: 36px; padding: 2.2rem 1.4rem 2.6rem; transition: background .6s ease;
}
.coll-block[data-cat="cirios"]{ background: radial-gradient(130% 100% at 50% 0%, rgba(120,145,102,.62) 0%, rgba(120,145,102,.32) 60%, rgba(120,145,102,.14) 100%); }
.coll-block[data-cat="bautizo"]{ background: radial-gradient(130% 100% at 50% 0%, rgba(88,131,163,.62) 0%, rgba(88,131,163,.32) 60%, rgba(88,131,163,.14) 100%); }
.coll-block[data-cat="mesa"]{ background: radial-gradient(130% 100% at 50% 0%, rgba(201,164,86,.66) 0%, rgba(201,164,86,.36) 60%, rgba(201,164,86,.16) 100%); }
.coll-block[data-cat="navidad"]{ background: radial-gradient(130% 100% at 50% 0%, rgba(56,97,60,.62) 0%, rgba(56,97,60,.32) 60%, rgba(56,97,60,.14) 100%); }
.coll-block[data-cat="toallas"]{ background: radial-gradient(130% 100% at 50% 0%, rgba(172,120,152,.6) 0%, rgba(172,120,152,.3) 60%, rgba(172,120,152,.13) 100%); }
.coll-block[data-cat="toallas-vela"]{ background: radial-gradient(130% 100% at 50% 0%, rgba(201,136,68,.62) 0%, rgba(201,136,68,.32) 60%, rgba(201,136,68,.14) 100%); }

@media (max-width: 760px){
  .coll-block{ padding: 1.6rem 1rem 2rem; border-radius:26px; }
}

/* Título de colección: la pieza con más jerarquía de toda la sección —
   dorado profundo, grande, en negrita, sobre una "placa" translúcida con
   desenfoque para garantizar lectura perfecta pase lo que pase detrás
   (foto de portada, textura, luz...). Nunca depende de que el fondo
   colabore por casualidad. */
.coll-title{
  display:block; width:fit-content;
  font-family: var(--ff-head); font-weight:700; font-size:2.1rem; letter-spacing:.01em;
  text-align:center; color: var(--gold-deep);
  text-shadow: 0 1px 2px rgba(255,255,255,.6);
  background: rgba(255,252,245,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding:.55rem 1.9rem; border-radius:50px;
  margin: 0 auto 1.8rem;
  box-shadow: 0 8px 24px -16px rgba(28,23,18,.3);
}
.coll-title::after{
  content:''; display:block; width:56px; height:2px; margin:.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.coll-note{ text-align:center; color:var(--ink-soft); font-size:.9rem; margin: -1rem 0 2rem; }

/* Colección sin niveles (Navidad, Toallas...): título y precio en una
   misma placa, separados del resto por un filete inferior — sin
   tarjetas ni cajas, tipografía como único recurso de jerarquía. */
.coll-block-head{
  display:flex; align-items:baseline; justify-content:center; gap:1.2rem; flex-wrap:wrap;
  width:fit-content; margin: 0 auto 2rem; padding:.55rem 1.9rem 1rem;
  border-bottom: 1px solid rgba(28,23,18,.12);
  background: rgba(255,252,245,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 26px 26px 6px 6px;
  box-shadow: 0 8px 24px -16px rgba(28,23,18,.3);
}
.coll-block-head .coll-title{
  margin-bottom:0; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
}
.coll-block-head .coll-title::after{ display:none; }
.coll-standalone-price{ font-family: var(--ff-head); font-size:1.7rem; font-weight:700; color: var(--gold-deep); }

/* Cada modalidad (Básicas/Elaboradas/Al detalle/Lazos y bordados...) es un
   bloque tipográfico, nunca una tarjeta: nombre destacado en dorado a la
   izquierda, precio destacado a la derecha, tamaño/nota debajo si aplica.
   Vive sobre su propia "placa" translúcida (igual que .coll-title) para
   garantizar contraste perfecto sea cual sea el fondo de la colección. */
.coll-tier{ margin-bottom: 3rem; }
.coll-tier:last-child{ margin-bottom:0; }
.coll-tier-info{
  margin: 0 3.5rem 1.1rem; padding:.85rem 1.5rem .95rem;
  background: rgba(255,252,245,.72); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border-radius: 18px;
  box-shadow: 0 8px 22px -16px rgba(28,23,18,.35);
}
.coll-tier-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.coll-tier-name{
  font-family: var(--ff-head); font-size:1.5rem; font-weight:700; color: var(--gold-deep);
  letter-spacing:.015em;
}
.coll-tier-price{ font-family: var(--ff-head); font-size:1.5rem; font-weight:800; color: var(--ink); white-space:nowrap; }
.coll-tier-size{ display:block; font-size:.85rem; font-weight:600; color: var(--ink); margin-top:.35rem; }
.coll-tier-note{ display:block; font-size:.78rem; font-weight:500; color: var(--ink-soft); font-style:italic; margin-top:.15rem; }

.coll-tier-prices{ display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; }
.coll-price-line{ display:flex; align-items:baseline; gap:.7rem; font-size:.85rem; font-weight:500; color: var(--ink-soft); }
.coll-price-line strong{
  font-family: var(--ff-head); font-size:1.1rem; font-weight:800; color: var(--ink);
  min-width:3.4rem; text-align:right;
}

/* Slider de una sola imagen: tamaño compacto (como .cosmic-gallery-item),
   ligeramente ampliado respecto al original para que el producto se
   aprecie mejor, sin llegar a dominar la composición. Una foto visible,
   flechas a los lados + arrastre/swipe para pasar a la siguiente. */
.coll-slider{ position:relative; display:flex; align-items:center; justify-content:center; gap:1rem; }

/* Marco de la diapositiva: geometría orgánica (radio ligeramente asimétrico,
   nunca un rectángulo seco), sombra en varias capas para dar volumen real
   (contacto + ambiente + proyección lejana) y un barrido de luz tipo cristal
   en la esquina superior — como si reflejara la pantalla. Todo vive en
   .coll-slider-viewport / .coll-slide, nunca toca la esfera 3D. */
.coll-slider-viewport{
  position:relative; flex:0 0 auto; width:230px; overflow:hidden;
  border-radius: 20px 26px 22px 28px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 1px 2px rgba(28,23,18,.08),
    0 10px 20px -10px rgba(28,23,18,.28),
    0 26px 46px -22px rgba(28,23,18,.32),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-radius .6s var(--ease);
  will-change: transform;
}
.coll-slider-viewport::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 72%, rgba(255,255,255,.1) 100%);
  mix-blend-mode: overlay; opacity:.9;
  transition: opacity .5s var(--ease);
}
.coll-slider-viewport:hover{
  transform: perspective(900px) rotateX(2.2deg) rotateY(-3.2deg) translateY(-5px) scale(1.02);
  border-radius: 26px 20px 28px 22px;
  box-shadow:
    0 2px 4px rgba(28,23,18,.1),
    0 18px 30px -12px rgba(28,23,18,.32),
    0 36px 60px -20px rgba(28,23,18,.38),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.coll-slider-viewport:hover::before{ opacity:1; }

.coll-slider-track{ display:flex; touch-action: pan-y; will-change: transform; }
.coll-slider-track.is-animating{ transition: transform .5s var(--ease); }
.coll-slide{ position:relative; flex:0 0 100%; aspect-ratio:3/4; }
.coll-slide img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }

@media (prefers-reduced-motion: reduce){
  .coll-slider-viewport{ transition:none; }
  .coll-slider-viewport:hover{ transform:none; }
}
.coll-slider-count{
  position:absolute; bottom:.6rem; right:.6rem; z-index:3;
  background: rgba(15,13,11,.55); color:#fff; font-size:.68rem; letter-spacing:.03em;
  padding:.22rem .55rem; border-radius:50px; backdrop-filter: blur(4px);
  pointer-events:none;
}
.coll-slider .gallery-arrow{
  flex:0 0 auto; position:static;
  background: var(--white); border-color: rgba(28,23,18,.15); color: var(--ink);
  width:38px; height:38px;
}
.coll-slider .gallery-arrow:hover{
  background: var(--cream-2); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 18px -4px rgba(201,164,99,.5);
}

@media (max-width: 760px){
  .coll-tier-info{ margin-left:2.6rem; margin-right:2.6rem; }
  .coll-title{ font-size:1.5rem; padding:.45rem 1.3rem; }
  .coll-block-head{ padding:.45rem 1.3rem .8rem; }
  .coll-tier-name{ font-size:1.2rem; }
  .coll-tier-price{ font-size:1.2rem; }
  .coll-slider-viewport{ width:185px; }
  .coll-slider .gallery-arrow{ width:32px; height:32px; }
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:2000; background: rgba(20,15,10,.92);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition: opacity .35s var(--ease); backdrop-filter: blur(6px);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-content{ width:min(560px, 82vw); max-height:82vh; animation: popIn .4s var(--ease); overflow:hidden; }
.lightbox-content img{
  width:100%; height:100%; max-height:82vh; object-fit:contain; border-radius: 12px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
  cursor: zoom-in; transition: transform .45s var(--ease);
}
.lightbox-content img.is-zoomed{ cursor: zoom-out; transform: scale(2.1); }
@keyframes popIn{ from{ opacity:0; transform: scale(.85);} to{ opacity:1; transform: scale(1);} }
.lightbox-close{
  position:absolute; top:2rem; right:2rem; font-size:2.2rem; background:none; border:none;
  color: var(--white); cursor:pointer; line-height:1; opacity:.8; transition:opacity .3s;
}
.lightbox-close:hover{ opacity:1; }
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(233,211,163,.3);
  color: var(--gold-light); width:48px; height:48px; border-radius:50%;
  cursor:pointer; transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.lightbox-nav svg{ width:20px; height:20px; }
.lightbox-nav:hover{
  background: rgba(233,211,163,.1); border-color: rgba(233,211,163,.6);
  box-shadow: 0 0 22px 4px rgba(255,183,72,.5);
}
.lightbox-nav.prev{ left: 2rem; }
.lightbox-nav.next{ right: 2rem; }

/* ============ TOALLAS BORDADAS ============ */
.towels{
  position:relative; overflow:hidden; min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  padding: 6rem 0;
}

/* Lino/algodón cálido: tejido geométrico muy sutil (cruce de hilos finos),
   tonos marfil/crema, y una luz ambiental que respira muy despacio para dar
   profundidad — sin nada que llame la atención por sí mismo. Sin ruido
   digital: son líneas reales, así que el resultado se ve siempre, en
   cualquier navegador, sin depender de filtros SVG pesados. */
.towels-fabric{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-color: #f7f2e6;
  background-image:
    radial-gradient(55% 45% at 18% 12%, rgba(255,253,247,.7) 0%, transparent 70%),
    radial-gradient(50% 42% at 86% 84%, rgba(230,215,186,.35) 0%, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0H16M0 8H16' stroke='%23c9b892' stroke-width='0.6' opacity='0.26'/%3E%3Cpath d='M0 0V16M8 0V16' stroke='%23c9b892' stroke-width='0.6' opacity='0.16'/%3E%3C/svg%3E");
  background-size: auto, auto, 16px 16px;
}
/* Lavado de luz cálido que se desplaza y respira muy lentamente — la única
   señal de "vida" del fondo, casi imperceptible salvo mirando un rato. */
.towels-light{
  position:absolute; inset:-15%;
  background: radial-gradient(42% 38% at 30% 35%, rgba(255,251,240,.55) 0%, transparent 70%);
  animation: towelsLight 42s ease-in-out infinite;
}
@keyframes towelsLight{
  0%, 100%{ opacity:.6; transform: translate(0,0) scale(1); }
  50%{ opacity:1; transform: translate(4%,-3%) scale(1.08); }
}

.embroidery-field{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }

/* El nombre se revela con un barrido (clip-path) — limpio, continuo y muy
   suave, como si el hilo fuera cosiendo la palabra de izquierda a derecha.
   Sin aguja ni hilo dibujado: el propio trazo del bordado es el protagonista. */
.stitch-text{
  position:absolute; left:0; top:0; margin:0; white-space:nowrap; pointer-events:none;
  font-family:'Dancing Script', cursive; font-weight:700; line-height:1;
  letter-spacing:.01em;
  clip-path: inset(0 100% 0 0);
  text-shadow: 0 1px 0 rgba(255,253,247,.6), 0 -1px 1.5px rgba(60,45,20,.14);
  will-change: clip-path, opacity, transform;
}

/* Velo protector: aclara el centro con el propio tono de la tela (no un
   filtro pesado) para que ningún nombre compita nunca con el título, el
   texto o el botón, aunque su posición caiga cerca. */
.towels-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(56% 48% at 50% 50%, rgba(247,242,230,.96) 0%, rgba(247,242,230,.6) 46%, transparent 72%);
}

.towels-content{ position:relative; z-index:3; text-align:center; max-width:640px; }
.towels-content .section-sub{ margin-left:auto; margin-right:auto; max-width:460px; }
.towels-content .btn{ margin-top:.6rem; }

@media (prefers-reduced-motion: reduce){
  .embroidery-field, .towels-light{ display:none; }
}

@media (max-width: 760px){
  /* Sin altura extra, el contenido llenaría casi toda la sección y no
     dejaría sitio para que los nombres se repartan sin cruzar el texto. */
  .towels{ min-height:135vh; padding: 5.5rem 0; }
}

/* ============ NAVIDAD ============ */
.nav-link-xmas{ color: #c9a875; }

.christmas{
  --xmas-gold: #d9b783;
  --xmas-gold-bright: #f2ddb2;
  --xmas-wine: #8c3a46;
  --xmas-ivory: #ede3d3;
  position:relative; overflow:hidden; padding: 9rem 0;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(217,183,131,.12), transparent 60%),
    linear-gradient(160deg, #0b1f18 0%, #071410 60%, #050e0b 100%);
  color: var(--xmas-ivory);
}
/* Ambiente: varios focos cálidos difusos simulan que la sala solo la iluminan las velas,
   más una viñeta que oscurece los bordes para dar profundidad de sala real. */
.xmas-ambient{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 38% at 18% 30%, rgba(255,183,72,.10), transparent 65%),
    radial-gradient(ellipse 40% 34% at 50% 55%, rgba(255,183,72,.09), transparent 65%),
    radial-gradient(ellipse 44% 36% at 82% 32%, rgba(255,183,72,.10), transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(5,14,11,.55) 100%);
  animation: xmasAmbientBreathe 12s ease-in-out infinite;
}
@keyframes xmasAmbientBreathe{
  0%,100%{ opacity:1; }
  50%{ opacity:.82; }
}

/* Efecto de "quemado": una línea de brasa recorre el borde superior una vez,
   como si la mecha prendiera y revelara la sección. */
.xmas-ember-line{
  position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background: linear-gradient(90deg, transparent, var(--xmas-gold-bright), transparent);
  transform: scaleX(0); transform-origin: left center; opacity:0;
}
.christmas.in-view .xmas-ember-line{
  animation: emberSweep 2.2s var(--ease) forwards;
}
@keyframes emberSweep{
  0%{ transform: scaleX(0); opacity:1; box-shadow: 0 0 0 rgba(255,183,72,0); }
  55%{ opacity:1; box-shadow: 0 0 18px 3px rgba(255,183,72,.7); }
  100%{ transform: scaleX(1); opacity:.4; box-shadow: 0 0 8px 1px rgba(255,183,72,.3); }
}

/* Polvo de oro: partículas cálidas de distintos tamaños, velocidades y profundidades,
   con destellos aleatorios — evocan el pan de oro flotando en el taller, no nieve. */
.golddust{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.golddust span{
  position:absolute; top:100%; border-radius:50%;
  background: radial-gradient(circle, rgba(255,214,150,.95), rgba(217,183,131,.15) 70%, transparent);
  animation: goldDrift linear infinite;
}
.golddust span:nth-child(4n){ animation-name: goldDriftSparkle; }
@keyframes goldDrift{
  0%{ transform: translate(0,0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.8; }
  100%{ transform: translate(var(--dx, 40px), -118vh); opacity:0; }
}
@keyframes goldDriftSparkle{
  0%{ transform: translate(0,0) scale(1); opacity:0; }
  8%{ opacity:.9; }
  45%{ opacity:.25; }
  55%{ opacity:1; }
  90%{ opacity:.6; }
  100%{ transform: translate(var(--dx, 40px), -118vh) scale(1.3); opacity:0; }
}
.golddust span:nth-child(1){ left:4%; width:2px; height:2px; --dx:24px; animation-duration:17s; animation-delay:0s; }
.golddust span:nth-child(2){ left:12%; width:3px; height:3px; --dx:-30px; animation-duration:22s; animation-delay:2s; }
.golddust span:nth-child(3){ left:20%; width:1.5px; height:1.5px; --dx:18px; animation-duration:14s; animation-delay:5s; }
.golddust span:nth-child(4){ left:28%; width:2.5px; height:2.5px; --dx:-22px; animation-duration:19s; animation-delay:1s; }
.golddust span:nth-child(5){ left:36%; width:2px; height:2px; --dx:30px; animation-duration:16s; animation-delay:7s; }
.golddust span:nth-child(6){ left:44%; width:3.5px; height:3.5px; --dx:-16px; animation-duration:24s; animation-delay:3s; }
.golddust span:nth-child(7){ left:52%; width:1.5px; height:1.5px; --dx:20px; animation-duration:13s; animation-delay:6s; }
.golddust span:nth-child(8){ left:60%; width:2.5px; height:2.5px; --dx:-28px; animation-duration:20s; animation-delay:0s; }
.golddust span:nth-child(9){ left:68%; width:2px; height:2px; --dx:16px; animation-duration:18s; animation-delay:8s; }
.golddust span:nth-child(10){ left:76%; width:3px; height:3px; --dx:-20px; animation-duration:21s; animation-delay:4s; }
.golddust span:nth-child(11){ left:84%; width:1.5px; height:1.5px; --dx:24px; animation-duration:15s; animation-delay:2.5s; }
.golddust span:nth-child(12){ left:92%; width:2.5px; height:2.5px; --dx:-18px; animation-duration:23s; animation-delay:9s; }
.golddust span:nth-child(13){ left:8%; width:2px; height:2px; --dx:26px; animation-duration:19s; animation-delay:11s; }
.golddust span:nth-child(14){ left:33%; width:3px; height:3px; --dx:-24px; animation-duration:17s; animation-delay:6.5s; }
.golddust span:nth-child(15){ left:57%; width:1.5px; height:1.5px; --dx:20px; animation-duration:25s; animation-delay:10s; }
.golddust span:nth-child(16){ left:71%; width:2.5px; height:2.5px; --dx:-16px; animation-duration:14s; animation-delay:3.5s; }
.golddust span:nth-child(17){ left:88%; width:2px; height:2px; --dx:22px; animation-duration:20s; animation-delay:12.5s; }
.golddust span:nth-child(18){ left:16%; width:3.5px; height:3.5px; --dx:-30px; animation-duration:22s; animation-delay:8.5s; }

/* Nieve muy sutil: copos pequeños, lentos y elegantes, como capa ambiental
   adicional al polvo de oro (no lo sustituye). */
.xmas-snow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.xmas-snow span{
  position:absolute; top:-4%; border-radius:50%;
  background: rgba(237,231,219,.55); animation: xmasSnowFall linear infinite;
}
@keyframes xmasSnowFall{
  0%{ transform: translate(0,0); opacity:0; }
  8%{ opacity:.6; }
  92%{ opacity:.5; }
  100%{ transform: translate(var(--sx, 20px), 118vh); opacity:0; }
}
.xmas-snow span:nth-child(1){ left:6%; width:3px; height:3px; --sx:24px; animation-duration:24s; animation-delay:0s; }
.xmas-snow span:nth-child(2){ left:18%; width:2px; height:2px; --sx:-18px; animation-duration:29s; animation-delay:3s; }
.xmas-snow span:nth-child(3){ left:29%; width:2.5px; height:2.5px; --sx:20px; animation-duration:21s; animation-delay:7s; }
.xmas-snow span:nth-child(4){ left:41%; width:2px; height:2px; --sx:-22px; animation-duration:27s; animation-delay:1.5s; }
.xmas-snow span:nth-child(5){ left:53%; width:3px; height:3px; --sx:18px; animation-duration:23s; animation-delay:9s; }
.xmas-snow span:nth-child(6){ left:64%; width:2px; height:2px; --sx:-24px; animation-duration:26s; animation-delay:4.5s; }
.xmas-snow span:nth-child(7){ left:75%; width:2.5px; height:2.5px; --sx:16px; animation-duration:22s; animation-delay:11s; }
.xmas-snow span:nth-child(8){ left:85%; width:2px; height:2px; --sx:-20px; animation-duration:28s; animation-delay:6s; }
.xmas-snow span:nth-child(9){ left:93%; width:3px; height:3px; --sx:22px; animation-duration:25s; animation-delay:2.5s; }
.xmas-snow span:nth-child(10){ left:37%; width:2px; height:2px; --sx:-16px; animation-duration:30s; animation-delay:13s; }

/* Regalos dorados flotando: solo contorno (sin relleno), en tres capas de
   profundidad, plano de fondo — nunca sobre el contenido. El mismo dorado
   cálido que el polvo de oro (#ffd696) para compartir paleta. */
.xmas-gifts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.xmas-gift{
  position:absolute; top:-16%; left:var(--x); width:var(--size); height:var(--size);
  color: #ffd696;
  animation: xmasGiftFloat var(--dur, 34s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.xmas-gift svg{
  width:100%; height:100%; display:block;
  animation: xmasGiftSpin var(--rot-dur, 10s) ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,214,150,.4));
}
.xmas-gift--far{ --op:.24; filter: blur(1.4px); }
.xmas-gift--mid{ --op:.4; filter: blur(.4px); }
.xmas-gift--near{ --op:.56; }
.xmas-gift--xl{ --op:.5; }

@keyframes xmasGiftFloat{
  0%{ transform: translate(0,0); opacity:0; }
  6%{ opacity: var(--op, .5); }
  18%{ transform: translate(var(--sway, 30px), 15vh); }
  34%{ transform: translate(calc(var(--sway, 30px) * -0.55), 32vh); }
  50%{ transform: translate(calc(var(--sway, 30px) * 0.8), 50vh); }
  66%{ transform: translate(calc(var(--sway, 30px) * -0.65), 68vh); }
  82%{ transform: translate(var(--sway, 30px), 86vh); opacity: var(--op, .5); }
  94%{ opacity: var(--op, .5); }
  100%{ transform: translate(0, 116vh); opacity:0; }
}
@keyframes xmasGiftSpin{
  0%{ transform: rotate(0deg) scaleX(1); }
  50%{ transform: rotate(180deg) scaleX(.9); }
  100%{ transform: rotate(360deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce){
  .golddust span, .xmas-ambient, .xmas-snow span, .xmas-gift, .xmas-gift svg{ animation:none; opacity:.3; }
  .xmas-ember-line{ animation:none; opacity:.5; transform:scaleX(1); }
}

.xmas-container{ position:relative; z-index:2; }
.xmas-intro{ max-width:640px; margin:0 auto; text-align:center; }
.xmas-eyebrow{
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color: var(--xmas-gold);
  font-weight:500; margin-bottom:1.4rem;
}
.xmas-headline{
  font-family: var(--ff-head); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:600;
  line-height:1.18; color:#fff; text-wrap:balance;
}
.xmas-headline em{
  font-style:italic; font-weight:500;
  background: linear-gradient(120deg, var(--xmas-gold), var(--xmas-gold-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.xmas-sub{ margin-top:1.3rem; color: rgba(237,227,211,.65); font-size:1.05rem; }

/* Trazo "ascua" bajo el titular: al pasar el cursor, una línea dorada se enciende
   de izquierda a derecha, como si prendiera una mecha, y deja un resplandor sutil. */
.xmas-headline{ position:relative; display:inline-block; }
.xmas-headline::after{
  content:''; position:absolute; left:0; bottom:-.3rem; width:100%; height:2px;
  background: linear-gradient(90deg, var(--xmas-gold-bright), var(--xmas-gold), transparent);
  transform: scaleX(0); transform-origin:left center;
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.xmas-headline:hover::after{ transform: scaleX(1); box-shadow: 0 0 14px 2px rgba(255,183,72,.5); }

.xmas-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
  margin-top: 4rem;
}
.xmas-card{
  position:relative; padding: 2.4rem 1.8rem 2rem; text-align:center; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  border:1px solid rgba(217,183,131,.18);
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.xmas-card:hover{
  transform: translateY(-9px);
  border-color: rgba(217,183,131,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.5), 0 0 34px -8px rgba(217,183,131,.4);
}
.xmas-medallion{
  position:relative; width:112px; height:112px; margin:0 auto 1.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, rgba(217,183,131,.16) 0%, rgba(217,183,131,0) 72%);
}
.xmas-medallion::before{
  content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(217,183,131,.3);
}
.xmas-medallion svg{ width:64px; height:auto; position:relative; z-index:1; }

/* Halo cálido que ilumina la tarjeta: nace apagado y se enciende en cascada
   cuando la sección entra en pantalla (clase .lit añadida desde JS). */
.xmas-card-glow{
  position:absolute; top:8%; left:50%; width:150px; height:150px; border-radius:50%;
  transform: translateX(-50%) scale(.6); opacity:0;
  background: radial-gradient(circle, rgba(255,183,72,.5), transparent 68%);
  filter: blur(14px); pointer-events:none;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.xmas-card.lit .xmas-card-glow{
  opacity:1; transform: translateX(-50%) scale(1);
  animation: xmasGlowPulse 3.4s ease-in-out infinite;
}
.xmas-card:hover .xmas-card-glow{ opacity:1; filter: blur(16px); }
.xmas-card:hover.lit .xmas-card-glow{ animation-duration: 1.8s; }
@keyframes xmasGlowPulse{
  0%,100%{ opacity:.75; transform: translateX(-50%) scale(1); }
  50%{ opacity:1; transform: translateX(-50%) scale(1.12); }
}

.xmas-flame-path{ opacity:0; transform-origin: 60px 10px; }
.xmas-flame-halo{ opacity:0; transform-origin: 60px 9px; }
.xmas-card.lit .xmas-flame-path{
  opacity:1; animation: xmasCardFlicker 1.9s ease-in-out infinite;
}
.xmas-card.lit .xmas-flame-halo{
  opacity:.28; animation: xmasCardHalo 1.9s ease-in-out infinite;
}
@keyframes xmasCardFlicker{
  0%,100%{ transform: scale(1) rotate(0deg); }
  35%{ transform: scale(.92,1.1) rotate(-3deg); }
  65%{ transform: scale(1.06,.94) rotate(3deg); }
}
@keyframes xmasCardHalo{
  0%,100%{ opacity:.22; }
  50%{ opacity:.4; }
}

.xmas-card h3{
  font-family: var(--ff-head); font-size:1.15rem; font-weight:600; color:#fff; margin-bottom:.6rem;
  position:relative; display:inline-block;
}
.xmas-card h3::after{
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background: linear-gradient(90deg, var(--xmas-gold-bright), transparent);
  transform: scaleX(0); transform-origin:left center; transition: transform .6s var(--ease);
}
.xmas-card:hover h3::after{ transform: scaleX(1); }
.xmas-card p{ color: rgba(237,227,211,.6); font-size:.9rem; line-height:1.6; }
.xmas-divider{
  display:block; width:32px; height:1px; margin:1.2rem auto; background: rgba(217,183,131,.4);
}
.xmas-price{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--xmas-gold); font-weight:500;
}

.xmas-cta{ text-align:center; margin-top: 3.5rem; }
@media (prefers-reduced-motion: reduce){
  .xmas-card-glow, .xmas-flame-path, .xmas-flame-halo, .xmas-scroll-cue{ animation:none; }
}

.xmas-scroll-cue{
  display:flex; justify-content:center; align-items:center; margin-top: 3.2rem; width:28px; height:28px;
  margin-inline:auto; position:relative; color: var(--xmas-gold, #d9b783);
  animation: floaty 2.6s ease-in-out infinite;
}
.xmas-scroll-arrow{ width:100%; height:100%; }
.btn-xmas-outline{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 1rem 2.4rem; border-radius:50px; border:1px solid rgba(217,183,131,.55);
  color: var(--xmas-gold-bright); font-family: var(--ff-body); font-size:.95rem; letter-spacing:.03em;
  transition: all .4s var(--ease);
}
.btn-xmas-outline::before{
  content:''; position:absolute; inset:0; border-radius:50px;
  background: linear-gradient(100deg, transparent 20%, rgba(255,214,150,.4) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-xmas-outline:hover::before{ transform: translateX(120%); }
.btn-xmas-outline:hover{
  background: rgba(217,183,131,.12); border-color: var(--xmas-gold);
  box-shadow: 0 0 30px -6px rgba(217,183,131,.35);
}

@media (max-width: 980px){
  .xmas-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .xmas-grid{ grid-template-columns: 1fr; }
  .christmas{ padding: 5.5rem 0; }
}

/* ============ PROCESS: recorrido inmersivo por el taller ============ */
.process{ position:relative; overflow:hidden; }
.process .section-sub{ color: rgba(246,241,231,.62); }

/* ===== FONDO "TALLER VIVO" =====
   Todo vive dentro de .process-atelier-bg y se modula con la variable
   --pp (0 a 1: progreso a través de las 8 etapas, la actualiza el mismo
   bucle de scroll que ya rellena el sendero — ver script.js). Cada capa
   solo anima transform/opacity; los umbrales de fase se resuelven con
   calc()/clamp()/min() puro CSS, así que no hace falta ninguna clase ni
   salto brusco: todo es una rampa continua y muy suave. */
.process-atelier-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }

/* Lienzo de color: cuatro resplandores que se desplazan, giran y cambian de
   tono en un ciclo de 34s. El hue-rotate recorre un rango amplio (±48°) y
   saturate() lo intensifica para que el viraje de oro a cobre, ámbar y vino
   se note con claridad, siempre dentro de la misma familia cálida (nunca
   verdes ni azules). mix-blend-mode:screen las deja actuar como luz sobre
   el negro de fondo, coherente con el resto de la ambientación de velas. */
.process-color-wash{
  position:absolute; inset:-15%;
  background:
    radial-gradient(closest-side, rgba(201,164,99,.8), transparent 70%) 22% 28% / 58% 58% no-repeat,
    radial-gradient(closest-side, rgba(181,101,29,.7), transparent 70%) 80% 66% / 62% 62% no-repeat,
    radial-gradient(closest-side, rgba(255,182,72,.65), transparent 70%) 46% 88% / 52% 52% no-repeat,
    radial-gradient(closest-side, rgba(205,211,214,.35), transparent 70%) 78% 12% / 46% 46% no-repeat;
  filter: blur(55px) saturate(1.4);
  mix-blend-mode: screen;
  opacity:.85;
  animation: processColorWash 34s ease-in-out infinite;
}
@keyframes processColorWash{
  0%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); filter: blur(55px) saturate(1.4) hue-rotate(0deg); }
  25%{ transform: translate3d(-5%, 4%, 0) rotate(7deg) scale(1.08); filter: blur(62px) saturate(1.5) hue-rotate(30deg); }
  50%{ transform: translate3d(4%, -5%, 0) rotate(-6deg) scale(1.12); filter: blur(58px) saturate(1.55) hue-rotate(48deg); }
  75%{ transform: translate3d(-3%, -3%, 0) rotate(4deg) scale(1.05); filter: blur(60px) saturate(1.45) hue-rotate(-24deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); filter: blur(55px) saturate(1.4) hue-rotate(0deg); }
}

/* Textura casi imperceptible tipo papel/lienzo, prácticamente estática. */
.process-grain{
  position:absolute; inset:-10%; opacity:.035; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Motas de polvo iluminadas, tres profundidades (blur + tamaño + opacidad
   distintos) para dar volumen; reutilizan el mismo recorrido vertical.
   ~28 unidades generadas en script.js repartidas por toda la sección. */
.process-dust{ position:absolute; inset:0; }
.p-dust{
  position:absolute; bottom:-4%; left:var(--x); border-radius:50%;
  background: rgba(228,232,234,.85);
  animation: processDust linear infinite;
  animation-duration: var(--dur, 30s); animation-delay: var(--delay, 0s);
}
.p-dust--far{ width:2px; height:2px; filter:blur(1px); --peak:.34; }
.p-dust--mid{ width:2.6px; height:2.6px; filter:blur(.4px); --peak:.52; }
.p-dust--near{ width:3.2px; height:3.2px; --peak:.72; }
@keyframes processDust{
  0%{ transform: translate(0,0); opacity:0; }
  10%{ opacity: var(--peak, .5); }
  90%{ opacity: calc(var(--peak, .5) * .6); }
  100%{ transform: translate(22px,-108vh); opacity:0; }
}

/* Cera pulida: un calor muy tenue que se insinúa a partir de "Preparación". */
.process-wax{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 62%, rgba(232,201,140,.16) 0%, rgba(232,201,140,.06) 45%, transparent 72%);
  opacity: clamp(0, calc((var(--pp, 0) - 0.34) * 4), 1);
}

/* Pinceladas/acuarela muy difuminadas: un "bulto" de presencia centrado en
   la etapa de Pintura (sube y vuelve a bajar, no se queda encendido). */
.process-watercolor{
  position:absolute; inset:0;
  opacity: calc(min(clamp(0, calc((var(--pp, 0) - 0.4) * 6), 1), clamp(0, calc((0.76 - var(--pp, 0)) * 6), 1)) * .8);
}
.p-water{
  position:absolute; left:var(--x); top:var(--y); width:16vw; height:16vw; max-width:220px; max-height:220px;
  border-radius:50%; filter: blur(20px);
}
.p-water:nth-child(1){ background: radial-gradient(circle, rgba(196,150,150,.4), transparent 70%); }
.p-water:nth-child(2){ background: radial-gradient(circle, rgba(170,160,190,.36), transparent 70%); }
.p-water:nth-child(3){ background: radial-gradient(circle, rgba(210,175,130,.38), transparent 70%); }
.p-water:nth-child(4){ background: radial-gradient(circle, rgba(200,140,120,.34), transparent 70%); }
.p-water:nth-child(5){ background: radial-gradient(circle, rgba(180,170,150,.32), transparent 70%); }

/* Bocetos a lápiz: aparecen y se apagan muy despacio, cada uno con su propio
   ciclo asíncrono. La pareja de wrappers rise/calm hace que, en conjunto,
   ganen presencia según se avanza por las etapas y se calmen (sin
   desaparecer del todo) al llegar a Secado/Acabado. ~26 unidades y 9
   motivos distintos generados en script.js, repartidos por toda la sección. */
.process-sketches-rise{ position:absolute; inset:0; opacity: clamp(0.6, calc(0.6 + var(--pp, 0) * 0.4), 1); }
.process-sketches-calm{ position:absolute; inset:0; opacity: clamp(0.45, calc(1 - (var(--pp, 0) - 0.72) * 4), 1); }
.process-sketches{ position:absolute; inset:0; }
.process-sketch-wrap{ position:absolute; left:var(--x); top:var(--y); width:var(--ssize, 12vw); max-width:170px; color: rgba(236,239,241,.95); }
.process-sketch{
  width:100%; height:auto; display:block; opacity:0; transform-origin:center;
  animation-name: sketchFade; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes sketchFade{
  0%{ opacity:0; transform:scale(.92); }
  14%{ opacity:.4; transform:scale(.97); }
  32%{ opacity:.62; transform:scale(1); }
  58%{ opacity:.5; }
  78%{ opacity:.22; transform:scale(1.01); }
  100%{ opacity:0; transform:scale(.94); }
}

/* Símbolos flotantes del taller: mismo icono/mismo <symbol> que el hero
   (sym-cross, sym-dove...), a modo de acento — nunca compiten con los
   bocetos ni con los 8 iconos propios de cada fase. Reutiliza symbolDrift
   (definido junto a .hero-symbol-float) para el balanceo, y añade
   symbolAppear: cada símbolo "aparece" con más presencia y vuelve a
   atenuarse en su propio ciclo (--appear-dur/--appear-delay, distintos
   para cada uno), así se notan entrar y salir en vez de flotar siempre
   igual de tenues. */
.process-symbols{ position:absolute; inset:0; }
.process-symbol{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--psize, 60px); height:var(--psize, 60px);
  color: var(--gold-light);
  opacity: var(--op-lo, .2);
  animation:
    symbolDrift var(--float-dur, 22s) ease-in-out infinite alternate,
    symbolAppear var(--appear-dur, 9s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s), var(--appear-delay, 0s);
}
@keyframes symbolAppear{
  0%, 100%{ opacity: var(--op-lo, .2); }
  50%{ opacity: var(--op-hi, .7); }
}
.process-symbol svg{ width:100%; height:100%; display:block; overflow:visible; }
.process-symbol--back{ --op-lo:.22; --op-hi:.55; filter: blur(2px); color: var(--gold-deep); }
.process-symbol--mid{ --op-lo:.3; --op-hi:.7; color: var(--gold); }
.process-symbol--front{ --op-lo:.4; --op-hi:.88; color: var(--gold-light); filter: drop-shadow(0 0 7px rgba(255,214,150,.35)); }

/* Destellos elegantes: un brillo cálido que aparece 1-2s y se apaga; con
   ~14 repartidos y ciclos largos/desfasados, nunca se ven muchos a la vez. */
.process-sparkles{ position:absolute; inset:0; }
.p-spark{
  position:absolute; left:var(--x); top:var(--y); width:3.5px; height:3.5px; border-radius:50%;
  background: radial-gradient(circle, #fff6e6 0%, rgba(232,201,140,.7) 55%, transparent 75%);
  opacity:0; animation: sparkFlash var(--pdur, 7s) ease-in-out infinite; animation-delay: var(--pdelay, 0s);
}
@keyframes sparkFlash{
  0%, 78%{ opacity:0; transform:scale(.6); }
  84%{ opacity:1; transform:scale(1.4); }
  90%{ opacity:.55; transform:scale(1); }
  96%, 100%{ opacity:0; transform:scale(.7); }
}

/* Pan de oro: los mismos destellos, más cálidos, que solo cobran vida a
   partir de "Detalles finales" y se mantienen en las etapas siguientes. */
.process-gold-leaf{
  position:absolute; inset:0;
  opacity: clamp(0, calc((var(--pp, 0) - 0.55) * 4.5), 1);
}
.p-gold{
  position:absolute; left:var(--x); top:var(--y); width:4.5px; height:4.5px; border-radius:50%;
  background: radial-gradient(circle, #fff1cf 0%, #e8c98c 45%, rgba(232,201,140,.25) 70%, transparent);
  box-shadow: 0 0 9px 1.5px rgba(232,201,140,.6);
  opacity:0; animation: sparkFlash var(--pdur, 6s) ease-in-out infinite; animation-delay: var(--pdelay, 0s);
}

/* Acabado: un destello recorre el fondo, gobernado directamente por el
   scroll dentro del último tramo (0.85-1 de --pp), como una pieza terminada
   que recibe un último brillo antes de quedar en reposo. */
.process-finish-sweep{ position:absolute; inset:0; }
.process-finish-sweep::before{
  content:''; position:absolute; top:0; bottom:0; width:38%;
  background: linear-gradient(90deg, transparent, rgba(232,236,238,.1), rgba(232,201,140,.14), transparent);
  transform: translateX(calc((var(--pp, 0) - 0.85) * 320% - 38%));
  opacity: clamp(0, calc((var(--pp, 0) - 0.85) * 9), 1);
}

@media (prefers-reduced-motion: reduce){
  .p-dust, .process-sketch{ animation:none; opacity:.18; }
  .p-spark, .p-gold{ animation:none; opacity:0; }
  .process-color-wash, .process-symbol{ animation:none; }
}

.process-path{
  position:relative; z-index:1; max-width: 900px; margin: 4.5rem auto 0; padding: 0 1.5rem;
}
.process-path-line{
  position:absolute; left: 39px; top:6px; bottom:6px; width:2px;
  background: rgba(205,211,214,.14); z-index:0;
}
.process-path-fill{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(180deg, var(--platinum-light), var(--platinum), rgba(141,149,154,.2));
  transform: scaleY(0); transform-origin: top center;
  box-shadow: 0 0 10px 1px rgba(205,211,214,.3);
}

.process-phase{
  position:relative; display:flex; gap: 1.8rem; align-items:flex-start;
  padding: 1.6rem 0 2.6rem 0;
}
.process-phase-node{
  position:absolute; left: 34px; top: 2.4rem; width:12px; height:12px; border-radius:50%;
  background: var(--ink); border: 2px solid rgba(205,211,214,.4); z-index:1;
  transition: border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease);
}
.process-phase.in-path .process-phase-node{
  border-color: var(--platinum-light); background: var(--platinum);
  box-shadow: 0 0 12px 2px rgba(205,211,214,.5);
}

.process-phase-media{
  position:relative; flex: 0 0 auto; width:80px; height:80px; margin-left: 0;
  display:flex; align-items:center; justify-content:center; z-index:2;
  animation: processMediaFloat 7s ease-in-out infinite;
}
.process-phase:nth-child(even) .process-phase-media{ animation-delay: -3.5s; }
@keyframes processMediaFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
.process-phase-glow{
  position:absolute; inset:-14px; border-radius:50%;
  background: radial-gradient(circle, rgba(205,211,214,.22), transparent 70%);
  filter: blur(6px); opacity:.6; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.process-icon{
  position:relative; width:44px; height:44px; color: var(--platinum-light);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.process-phase:hover .process-icon{ transform: scale(1.12) rotate(-3deg); color: #fff; }
.process-phase:hover .process-phase-glow{ opacity:1; transform: scale(1.15); }

.process-phase-body{ padding-top: .3rem; }
.process-phase-num{
  display:block; font-family: var(--ff-head); font-size:.85rem; letter-spacing:.12em;
  color: rgba(205,211,214,.55); margin-bottom:.3rem;
}
.process-phase-body h3{
  position:relative; display:inline-block; font-size:1.25rem; margin-bottom:.6rem; color: var(--ivory);
}
.process-brush{
  position:absolute; left:0; bottom:-6px; width:100%; height:6px;
  background: var(--platinum);
  clip-path: polygon(0% 55%, 10% 15%, 22% 60%, 34% 5%, 48% 50%, 62% 20%, 76% 65%, 88% 10%, 100% 45%, 100% 100%, 0% 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--ease) .1s;
}
.process-phase.in-path .process-brush{ transform: scaleX(1); }
.process-phase-body p{ color: rgba(246,241,231,.65); font-size:.95rem; line-height:1.65; max-width:440px; }

@media (prefers-reduced-motion: reduce){
  .process-phase-media{ animation:none; }
  .process-path-fill{ transition:none; }
}

@media (max-width: 640px){
  .process-path-line{ left: 24px; }
  .process-phase-node{ left: 19px; }
  .process-phase{ gap:1.1rem; }
  .process-phase-media{ width:60px; height:60px; }
  .process-icon{ width:34px; height:34px; }
}

/* ============ ESFERA 3D DE OBRAS ============ */
.sphere-section{ position:relative; background: #000; overflow:hidden; }
.sphere-section .container, .sphere-section .sphere-stage{ position:relative; z-index:1; }
.sphere-section .section-sub{ color: rgba(246,241,231,.6); }

/* Fondo: negro profundo con pequeñas estrellas que destellan de forma independiente.
   Deliberadamente ligero (pocos elementos, solo opacity/transform) para no afectar
   al rendimiento — la esfera sigue siendo la protagonista. */
.cosmos{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* ---- Ambientación cinematográfica añadida: todo vive dentro de #cosmos,
   que ya estaba y ya es z-index:0, detrás de .sphere-stage (z-index:1). No
   se toca ni un solo selector de la esfera/canvas/controles. ---- */

/* Nebulosas: azul profundo, violeta oscuro, cian y un toque mínimo de
   magenta. Muy difuminadas, opacidad baja, nunca compiten con las fotos ni
   parecen humo — solo dan profundidad. */
.cosmos-nebula{ position:absolute; inset:-15%; }
.cosmos-nebula span{ position:absolute; border-radius:50%; }
.cosmos-nebula .neb-a{
  width:52%; height:46%; left:-8%; top:2%;
  background: radial-gradient(circle, rgba(36,52,122,.13) 0%, transparent 70%);
  animation: nebulaDrift 72s ease-in-out infinite;
}
.cosmos-nebula .neb-b{
  width:48%; height:42%; right:-10%; top:16%;
  background: radial-gradient(circle, rgba(68,38,108,.12) 0%, transparent 72%);
  animation: nebulaDrift 86s ease-in-out infinite -28s;
}
.cosmos-nebula .neb-c{
  width:44%; height:38%; left:8%; bottom:-12%;
  background: radial-gradient(circle, rgba(28,92,112,.10) 0%, transparent 74%);
  animation: nebulaDrift 98s ease-in-out infinite -50s;
}
.cosmos-nebula .neb-d{
  width:26%; height:22%; right:10%; bottom:-4%;
  background: radial-gradient(circle, rgba(94,38,88,.07) 0%, transparent 75%);
  animation: nebulaDrift 78s ease-in-out infinite -16s;
}
@keyframes nebulaDrift{
  0%, 100%{ opacity:.65; transform: translate(0,0) scale(1); }
  50%{ opacity:1; transform: translate(2%,-1.5%) scale(1.05); }
}

/* Campo estelar lejano/medio: generado por JS en un único box-shadow por
   capa (cientos de puntos, coste de una sola capa de pintura). Distintas
   velocidades = sensación de profundidad, sin nada de coste extra. */
.cosmos-far{ position:absolute; top:0; left:0; width:1px; height:1px; border-radius:50%; animation: cosmosFarDrift 170s linear infinite; }
.cosmos-mid{ position:absolute; top:0; left:0; width:1px; height:1px; border-radius:50%; animation: cosmosMidDrift 100s linear infinite; }
@keyframes cosmosFarDrift{ 0%{ transform: translate(0,0); } 100%{ transform: translate(-18px,12px); } }
@keyframes cosmosMidDrift{ 0%{ transform: translate(0,0); } 100%{ transform: translate(-30px,20px); } }

/* Estrellas doradas: la misma técnica del campo estelar blanco (un único
   box-shadow para toda la capa), pero muy pocas y tenues — un acento cálido
   sutil sobre el cielo blanco, nunca una segunda capa que compita con ella. */
.cosmos-gold-far{ position:absolute; top:0; left:0; width:1.6px; height:1.6px; border-radius:50%; animation: cosmosFarDrift 170s linear infinite; }

/* Polvo cósmico: partículas diminutas, movimiento extremadamente lento,
   algunas casi invisibles, distintas profundidades vía tamaño/opacidad. */
.p-mote{
  position:absolute; border-radius:50%; background:#d8dde6;
  animation: moteDrift var(--mdur, 70s) linear infinite;
  animation-delay: var(--mdelay, 0s);
}
/* Polvo dorado: mismo movimiento que el polvo blanco de arriba, con un tono
   cálido y un halo muy suave — elegante, nunca brillante ni saturado. */
.p-gold-mote{
  position:absolute; border-radius:50%; background: var(--gold-light);
  box-shadow: 0 0 4px rgba(255,204,120,.55);
  animation: moteDrift var(--mdur, 70s) linear infinite;
  animation-delay: var(--mdelay, 0s);
}
@keyframes moteDrift{
  0%{ transform: translate(0,0); opacity:0; }
  12%{ opacity: var(--mop, .3); }
  88%{ opacity: var(--mop, .3); }
  100%{ transform: translate(var(--mdx,8px), var(--mdy,-46px)); opacity:0; }
}

/* Estrellas fugaces: muy ocasionales, rápidas, cola fina, en distintas
   direcciones — confinadas por JS a franjas seguras que nunca cruzan la
   esfera (ver buildCosmosAmbience). */
.p-shootingstar{
  position:absolute; top:0; left:0; width:120px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9));
  opacity:0; transform-origin:left center;
  animation: shootingStreak var(--shdur, 14s) ease-in infinite;
  animation-delay: var(--shdelay, 0s);
}
@keyframes shootingStreak{
  0%, 96%{ opacity:0; }
  0.001%{ transform: translate(var(--shx,0), var(--shy,0)) rotate(var(--sha,20deg)) scaleX(0); }
  97%{ opacity:.95; transform: translate(var(--shx,0), var(--shy,0)) rotate(var(--sha,20deg)) scaleX(1); }
  99.2%{ opacity:0; transform: translate(calc(var(--shx,0) + var(--shex,140px)), calc(var(--shy,0) + var(--shey,60px))) rotate(var(--sha,20deg)) scaleX(1); }
  100%{ opacity:0; }
}

/* Meteoritos lejanos: muy pequeños, muy pocos, estela ligera, diagonal, como
   entrando en la atmósfera — más discretos y lentos que las fugaces. */
.p-farmeteor{
  position:absolute; top:0; left:0; width:60px; height:1px; border-radius:2px;
  background: linear-gradient(90deg, transparent, rgba(255,224,180,.55));
  opacity:0; transform-origin:left center;
  animation: farMeteorStreak var(--fmdur, 22s) ease-in infinite;
  animation-delay: var(--fmdelay, 0s);
}
@keyframes farMeteorStreak{
  0%, 92%{ opacity:0; }
  0.001%{ transform: translate(var(--fmx,0), var(--fmy,0)) rotate(var(--fma,32deg)) scaleX(0); }
  94%{ opacity:.55; transform: translate(var(--fmx,0), var(--fmy,0)) rotate(var(--fma,32deg)) scaleX(1); }
  99%{ opacity:0; transform: translate(calc(var(--fmx,0) + var(--fmex,90px)), calc(var(--fmy,0) + var(--fmey,50px))) rotate(var(--fma,32deg)) scaleX(1); }
  100%{ opacity:0; }
}

/* Constelaciones: varias figuras discretas y fijas, líneas casi invisibles.
   Solo recompensan a quien se detiene a mirar la escena unos segundos. */
.cosmos-constellations{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cosmos-constellations line{ stroke: rgba(233,211,163,.16); stroke-width:1; }
.cosmos-constellations circle{ fill: rgba(255,246,223,.5); }

/* Rayos de sol: haces de luz cálida que convergen hacia la esfera desde una
   esquina, como si viniera de una estrella lejana. JS calcula el ángulo real
   hacia el centro del stage (solo lectura). Desenfoque ligero, pocos
   elementos, mezcla "screen" para que sumen luz sin tapar nada. */
.cosmos-rays{ position:absolute; inset:0; overflow:visible; }
.p-ray{
  position:absolute; left:0; top:0; transform-origin:0 50%;
  background: linear-gradient(90deg, rgba(255,232,185,.09) 0%, rgba(255,224,170,.03) 45%, transparent 85%);
  filter: blur(18px);
  mix-blend-mode: soft-light;
  animation: rayPulse var(--rdur, 26s) ease-in-out infinite;
  animation-delay: var(--rdelay, 0s);
}
@keyframes rayPulse{
  0%, 100%{ opacity:.22; }
  50%{ opacity:.45; }
}

/* Viñeta central: mantiene el área justo detrás de la esfera oscura y
   tranquila para que nada del fondo "invada" su silueta — la riqueza se
   concentra hacia los bordes de la sección. Puramente decorativa, por
   detrás de todo, no interfiere con nada. */
.cosmos-vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 44%, rgba(3,3,2,.5) 0%, rgba(3,3,2,.22) 32%, rgba(3,3,2,0) 56%);
}

@media (prefers-reduced-motion: reduce){
  .cosmos-nebula span, .cosmos-far, .cosmos-mid, .cosmos-gold-far, .p-mote, .p-gold-mote, .p-shootingstar, .p-farmeteor, .p-ray{ animation:none; }
  .p-shootingstar, .p-farmeteor{ opacity:0; }
  .p-ray{ opacity:.3; }
}

.cosmos-star{
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  border-radius:50%; background: #fff;
  box-shadow: 0 0 3px 1px rgba(255,255,255,.5);
  animation: cosmosTwinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes cosmosTwinkle{
  0%,100%{ opacity:.25; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.6); }
}

/* Un puñado de estrellas que cruzan lentamente de un lado a otro — dan sensación
   de velocidad/viaje sin el coste de animar fondos completos por tiles. */
.cosmos-drift{
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  border-radius:50%; background:#fff; box-shadow: 0 0 3px 1px rgba(255,255,255,.4);
  animation: cosmosDrift var(--dur, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes cosmosDrift{
  0%{ transform: translate(0,0); opacity:0; }
  6%{ opacity:.9; }
  94%{ opacity:.9; }
  100%{ transform: translate(var(--dx,110vw), var(--dy,0)); opacity:0; }
}

/* Meteoritos: cruces muy ocasionales y sutiles */
.cosmos-meteor{
  position:absolute; top:14%; left:-12%; width:110px; height:1.2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85));
  transform: rotate(18deg); opacity:0;
  animation: meteorStreak 26s ease-in infinite;
}
.cosmos-meteor.m2{ top:62%; animation-delay: 13s; animation-duration: 34s; }
@keyframes meteorStreak{
  0%{ opacity:0; transform: translate(0,0) rotate(18deg); }
  2%{ opacity:.8; }
  9%{ opacity:0; transform: translate(60vw, 20vw) rotate(18deg); }
  100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .cosmos-star{ animation:none; opacity:.6; }
  .cosmos-drift, .cosmos-meteor{ animation:none; opacity:0; }
}

.sphere-stage{
  position:relative; width:min(1080px, 94%); aspect-ratio: 1 / 1; margin: 3rem auto 0;
  cursor: grab;
}
.sphere-stage:active{ cursor: grabbing; }
.sphere-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sphere-hint{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:50px;
  background: rgba(255,255,255,.06); border:1px solid rgba(233,211,163,.2);
  color: rgba(246,241,231,.7); font-size:.8rem; letter-spacing:.03em;
  pointer-events:none; transition: opacity .6s var(--ease);
}
.sphere-hint svg{ width:16px; height:16px; }
.sphere-hint.hide{ opacity:0; }
.sphere-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: rgba(246,241,231,.5); font-size:.9rem; letter-spacing:.05em; text-transform:uppercase;
  transition: opacity .5s var(--ease);
}
.sphere-loading.hide{ opacity:0; pointer-events:none; }

.gallery-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05); border:1px solid rgba(233,211,163,.28);
  color: var(--ivory); cursor:pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease), transform .3s var(--ease);
}
.gallery-arrow svg{ width:20px; height:20px; }
.gallery-arrow:hover{
  background: rgba(233,211,163,.1); border-color: rgba(233,211,163,.6);
  box-shadow: 0 0 22px 4px rgba(255,183,72,.5);
  color: var(--gold-light);
}
.gallery-arrow.prev{ left:0; }
.gallery-arrow.next{ right:0; }
.gallery-arrow:active{ transform: translateY(-50%) scale(.92); }

@media (max-width: 760px){
  .gallery-arrow{ width:36px; height:36px; }
  .gallery-arrow svg{ width:16px; height:16px; }
}

.sphere-viewer{
  position:fixed; inset:0; z-index:2100; background: rgba(8,7,6,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .5s var(--ease); backdrop-filter: blur(10px);
}
.sphere-viewer.open{ opacity:1; visibility:visible; }
.sphere-viewer img, .sphere-viewer video{
  max-width:min(900px, 86vw); max-height:82vh; border-radius:14px;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.7);
  transform: scale(.92); transition: transform .55s var(--ease);
}
.sphere-viewer.open img, .sphere-viewer.open video{ transform: scale(1); }
.sphere-viewer video{ display:none; background:#000; }
.sphere-viewer.is-video img{ display:none; }
.sphere-viewer.is-video video{ display:block; }
.sphere-viewer-close{
  position:absolute; top:2rem; right:2rem; font-size:2.2rem; background:none; border:none;
  color: var(--ivory); cursor:pointer; opacity:.8; transition:opacity .3s, transform .3s;
}
.sphere-viewer-close:hover{ opacity:1; transform: rotate(90deg); }

@media (max-width: 760px){
  .sphere-stage{ width: 94%; }
}


/* ============ CONTACT ============ */

/* Textura de papel artesanal: grano/fibra (::before) + ilustraciones a mano en los márgenes,
   manchas de acuarela y una mota de luz (::after). z-index negativo para quedar siempre
   detrás del contenido en flujo normal (form/texto), sin tocar el layout. */
.contact::before{
  content:"";
  position:absolute; inset:-3%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22300%22 height%3D%22300%22%3E %3Cfilter id%3D%22n%22%3E%3CfeTurbulence type%3D%22fractalNoise%22 baseFrequency%3D%220.85%22 numOctaves%3D%222%22 stitchTiles%3D%22stitch%22 result%3D%22t%22%2F%3E%3CfeColorMatrix in%3D%22t%22 type%3D%22matrix%22 values%3D%220 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.24 0 0 0 0.9 0%22%2F%3E%3C%2Ffilter%3E %3Crect width%3D%22100%25%22 height%3D%22100%25%22 filter%3D%22url(%23n)%22%2F%3E %3C%2Fsvg%3E");
  background-size: 320px 320px;
  opacity:.05;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:-1;
  animation: paper-grain-breathe 17s ease-in-out infinite;
}

.contact::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:-1;
  mix-blend-mode:multiply;
  opacity:.08;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    3% 14%,
    3% 82%,
    97% 10%,
    97% 84%,
    16% 42%,
    86% 58%,
    7% 60%,
    91% 32%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 92 110%22%3E %3Cg fill%3D%22none%22 stroke%3D%22%239c7a3a%22 stroke-width%3D%221.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Cpath d%3D%22M22%2C70 C21%2C55 21%2C35 22%2C20%22%2F%3E %3Cpath d%3D%22M34%2C70 C35%2C55 35%2C35 34%2C20%22%2F%3E %3Cpath d%3D%22M22%2C20 C23%2C15 33%2C15 34%2C20%22%2F%3E %3Cpath d%3D%22M28%2C15 C27%2C11 24%2C9 25%2C5 C26%2C2 30%2C2 31%2C5 C32%2C9 29%2C11 28%2C15%22%2F%3E %3Cpath d%3D%22M28%2C15 L28%2C12%22%2F%3E %3Cpath d%3D%22M50%2C95 L78%2C35%22%2F%3E %3Cpath d%3D%22M78%2C35 L88%2C15%22%2F%3E %3Cpath d%3D%22M74%2C42 L84%2C26%22%2F%3E %3Cpath d%3D%22M70%2C48 L80%2C34%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 96%22%3E %3Cg fill%3D%22none%22 stroke%3D%22%239c7a3a%22 stroke-width%3D%221.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Cpath d%3D%22M20%2C8 L20%2C55%22%2F%3E %3Cellipse cx%3D%2220%22 cy%3D%2213%22 rx%3D%222.2%22 ry%3D%223.4%22%2F%3E %3Cpath d%3D%22M20%2C16 C34%2C22 10%2C32 26%2C40 C40%2C47 14%2C54 24%2C60%22%2F%3E %3Cellipse cx%3D%2268%22 cy%3D%2255%22 rx%3D%2217%22 ry%3D%225.5%22%2F%3E %3Cellipse cx%3D%2268%22 cy%3D%2285%22 rx%3D%2217%22 ry%3D%225.5%22%2F%3E %3Cpath d%3D%22M51%2C55 L51%2C85%22%2F%3E %3Cpath d%3D%22M85%2C55 L85%2C85%22%2F%3E %3Cpath d%3D%22M53%2C66 C60%2C63 76%2C63 83%2C66%22%2F%3E %3Cpath d%3D%22M52%2C76 C60%2C73 76%2C73 84%2C76%22%2F%3E %3Cpath d%3D%22M83%2C83 C90%2C87 93%2C92 88%2C94%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 96 116%22%3E %3Cg fill%3D%22none%22 stroke%3D%22%239c7a3a%22 stroke-width%3D%221.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Cpath d%3D%22M14%2C110 C22%2C90 18%2C68 40%2C45 C48%2C37 52%2C30 58%2C18%22%2F%3E %3Cpath d%3D%22M22%2C95 C27%2C90 34%2C91 29%2C99 C25%2C103 19%2C101 22%2C95%22%2F%3E %3Cpath d%3D%22M26%2C78 C32%2C74 38%2C76 32%2C83 C28%2C87 22%2C84 26%2C78%22%2F%3E %3Cpath d%3D%22M36%2C60 C42%2C56 48%2C58 42%2C65 C38%2C69 32%2C66 36%2C60%22%2F%3E %3Cpath d%3D%22M46%2C42 C52%2C38 58%2C40 52%2C47 C48%2C51 42%2C48 46%2C42%22%2F%3E %3Ccircle cx%3D%2257%22 cy%3D%2215%22 r%3D%223%22%2F%3E %3Ccircle cx%3D%2263%22 cy%3D%2220%22 r%3D%222.6%22%2F%3E %3Ccircle cx%3D%2275%22 cy%3D%2228%22 r%3D%222.2%22 fill%3D%22%239c7a3a%22 stroke%3D%22none%22%2F%3E %3Cg transform%3D%22rotate(0 75 28)%22%3E%3Cpath d%3D%22M75%2C28 C73%2C22 76%2C16 78%2C22 C80%2C26 77%2C29 75%2C28%22%2F%3E%3C%2Fg%3E %3Cg transform%3D%22rotate(72 75 28)%22%3E%3Cpath d%3D%22M75%2C28 C73%2C22 76%2C16 78%2C22 C80%2C26 77%2C29 75%2C28%22%2F%3E%3C%2Fg%3E %3Cg transform%3D%22rotate(144 75 28)%22%3E%3Cpath d%3D%22M75%2C28 C73%2C22 76%2C16 78%2C22 C80%2C26 77%2C29 75%2C28%22%2F%3E%3C%2Fg%3E %3Cg transform%3D%22rotate(216 75 28)%22%3E%3Cpath d%3D%22M75%2C28 C73%2C22 76%2C16 78%2C22 C80%2C26 77%2C29 75%2C28%22%2F%3E%3C%2Fg%3E %3Cg transform%3D%22rotate(288 75 28)%22%3E%3Cpath d%3D%22M75%2C28 C73%2C22 76%2C16 78%2C22 C80%2C26 77%2C29 75%2C28%22%2F%3E%3C%2Fg%3E %3Cpath d%3D%22M75%2C31 C74%2C45 76%2C58 74%2C72%22%2F%3E %3Cpath d%3D%22M74%2C55 C80%2C52 85%2C55 79%2C60 C76%2C63 71%2C60 74%2C55%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 104 90%22%3E %3Cg fill%3D%22none%22 stroke%3D%22%239c7a3a%22 stroke-width%3D%221.6%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E %3Cpath d%3D%22M8%2C45 C6%2C28 20%2C14 38%2C16 C54%2C18 60%2C30 54%2C42 C50%2C50 42%2C46 36%2C50 C33%2C52 33%2C58 26%2C57 C16%2C55 10%2C58 8%2C45 Z%22%2F%3E %3Cellipse cx%3D%2236%22 cy%3D%2226%22 rx%3D%225.5%22 ry%3D%224%22%2F%3E %3Ccircle cx%3D%2218%22 cy%3D%2234%22 r%3D%223.4%22 fill%3D%22%23c9a463%22 stroke%3D%22none%22%2F%3E %3Ccircle cx%3D%2230%22 cy%3D%2221%22 r%3D%223%22 fill%3D%22%239c7a3a%22 stroke%3D%22none%22%2F%3E %3Ccircle cx%3D%2243%22 cy%3D%2231%22 r%3D%223.2%22 fill%3D%22%23b5651d%22 stroke%3D%22none%22%2F%3E %3Ccircle cx%3D%2222%22 cy%3D%2247%22 r%3D%223%22 fill%3D%22%23e9d3a3%22 stroke%3D%22none%22%2F%3E %3Cpath d%3D%22M55%2C60 C65%2C55 82%2C52 96%2C58 C90%2C61 68%2C64 55%2C66 Z%22 fill%3D%22%239c7a3a%22 stroke%3D%22none%22%2F%3E %3Cpath d%3D%22M60%2C75 C72%2C71 85%2C73 94%2C80 C86%2C82 70%2C83 60%2C80 Z%22 fill%3D%22%239c7a3a%22 stroke%3D%22none%22%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E"),
    radial-gradient(circle, rgba(201,164,99,.55) 0%, rgba(201,164,99,0) 70%),
    radial-gradient(circle, rgba(181,101,29,.4) 0%, rgba(181,101,29,0) 72%),
    radial-gradient(circle, rgba(233,211,163,.6) 0%, rgba(233,211,163,0) 70%),
    radial-gradient(circle, rgba(255,253,249,.95) 0%, rgba(255,253,249,0) 75%);
  animation: paper-life 26s ease-in-out infinite;
}

@keyframes paper-grain-breathe{
  0%,100%{ opacity:.045; transform:scale(1); }
  50%{ opacity:.065; transform:scale(1.015); }
}

@keyframes paper-life{
  0%{
    opacity:.07;
    filter:brightness(1);
    background-size: 92px 110px, 100px 96px, 96px 116px, 104px 90px, 150px 150px, 140px 140px, 50px 50px, 10px 10px;
  }
  35%{
    opacity:.095;
    filter:brightness(1.02);
    background-size: 92px 110px, 100px 96px, 96px 116px, 104px 90px, 190px 190px, 120px 120px, 90px 90px, 16px 16px;
  }
  70%{
    opacity:.075;
    filter:brightness(1.03);
    background-size: 92px 110px, 100px 96px, 96px 116px, 104px 90px, 140px 140px, 180px 180px, 60px 60px, 8px 8px;
  }
  100%{
    opacity:.07;
    filter:brightness(1);
    background-size: 92px 110px, 100px 96px, 96px 116px, 104px 90px, 150px 150px, 140px 140px, 50px 50px, 10px 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .contact::before, .contact::after{ animation:none; }
}

.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:4rem; align-items:start; }
.contact-info p{ color: var(--ink-soft); margin: 1rem 0 1.6rem; }
.contact-list{ display:flex; flex-direction:column; gap:.9rem; font-weight:500; }
.contact-list a:hover{ color: var(--accent); }
.contact-ig a{ display:inline-flex; align-items:center; gap:.6rem; }
.ig-icon{ display:inline-flex; width:20px; height:20px; flex-shrink:0; transition: transform .35s var(--ease); }
.ig-icon svg{ width:100%; height:100%; }
.contact-ig a:hover .ig-icon, .footer-ig:hover .ig-icon{ transform: scale(1.12) rotate(-6deg); }

.contact-form{ background: var(--white); padding: 2.4rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.field{ position:relative; margin-bottom: 1.3rem; }
.field input, .field select, .field textarea{
  width:100%; padding: 1rem .9rem .6rem; border-radius:12px; border:1px solid rgba(28,23,18,.18);
  background: var(--white); font-family: var(--ff-body); font-size:1rem; color: var(--ink);
  outline:none; transition: border-color .3s; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); }
.field label{
  position:absolute; left:.95rem; top:1rem; color: var(--ink-soft); font-size:1rem;
  pointer-events:none; transition: all .2s var(--ease); background: var(--white); padding: 0 .3rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field select:valid + label{
  top:-.55rem; left:.7rem; font-size:.75rem; color: var(--accent);
}
.field select{ appearance:none; color: var(--ink-soft); }
.field select:valid{ color: var(--ink); }
.field-error{ display:none; color:#c0392b; font-size:.78rem; margin-top:.3rem; padding-left:.3rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#c0392b; }
.field.invalid .field-error{ display:block; }

.form-success{
  display:none; margin-top:1rem; text-align:center; color:#2e6b3e; font-weight:500;
  background:#e5f3e8; padding:.9rem; border-radius:12px;
}
.form-success.show{ display:block; animation: popIn .4s var(--ease); }

/* ============ FOOTER ============ */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.8); padding: 3.5rem 0 2rem; }
.site-footer .logo{ color: var(--white); }
.site-footer .logo-text em{ color: var(--gold-light); }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; }
.footer-tag{ color: rgba(255,255,255,.6); }
.footer-nav{ display:flex; gap:1.8rem; flex-wrap:wrap; justify-content:center; }
.footer-nav a{ color: rgba(255,255,255,.75); transition: color .3s; }
.footer-ig{ display:inline-flex !important; align-items:center; gap:.5rem; }
.footer-nav a:hover{ color: var(--gold-light); }
.footer-copy{ font-size:.82rem; color: rgba(255,255,255,.45); margin-top:1rem; }

/* ============ BACK TO TOP ============ */
.back-to-top{
  position:fixed; bottom: 6.2rem; right: 2rem; width:48px; height:48px; border-radius:50%;
  background: var(--ink); color:var(--white); border:none; font-size:1.3rem; cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .35s var(--ease); z-index:400;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--terracotta); }

/* ============ WHATSAPP FLOTANTE ============ */
.whatsapp-float{
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
  z-index: 1000;
  transition: transform .3s ease;
}
.whatsapp-float svg{ width: 30px; height: 30px; fill: #fff; }
.whatsapp-float:hover{ transform: scale(1.1); }

@media (max-width: 760px){
  .whatsapp-float{ width:50px; height:50px; bottom:1.2rem; right:1.2rem; }
  .whatsapp-float svg{ width:26px; height:26px; }
  .back-to-top{ bottom: 5.2rem; right: 1.2rem; }
}

/* ============ HALO DE CURSOR: luz cálida y sutil (solo desktop, pointer:fine) ============
   El cursor del sistema se mantiene siempre (flecha nativa, cursor:pointer
   nativo en enlaces/botones); esto es solo un halo de luz que seduce al
   ratón con una interpolación suave (ver script.js), sin sustituir ni
   ocultar el puntero real. */
.cursor-halo{
  position:fixed; top:0; left:0; width:180px; height:180px; border-radius:50%;
  pointer-events:none; z-index:9998; opacity:0;
  background: radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,.07) 45%, transparent 72%);
  transform: translate3d(-50%,-50%,0);
  transition: opacity .4s var(--ease), width .5s var(--ease), height .5s var(--ease);
  will-change: transform;
}
.cursor-halo.is-visible{ opacity:1; }
.cursor-halo.is-hover{ width:210px; height:210px; opacity:.85; }
@media (prefers-reduced-motion: reduce){
  .cursor-halo{ transition: opacity .4s var(--ease); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(320px,80%);
    background: var(--white); flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 2rem 2.5rem; gap:1.6rem; transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.15);
  }
  .main-nav.open{ transform: translateX(0); }
  .menu-toggle{ display:flex; }
  .hero-stats{ gap:1.6rem; flex-wrap:wrap; }
  .form-row{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  /* En móvil la tarjeta de texto pasa de ser una franja izquierda a una franja
     superior de ancho completo, difuminada hacia abajo en vez de hacia la derecha. */
  .hero-text-scrim{
    left:0; right:0; width:auto; bottom:auto; height:66%;
    background: linear-gradient(180deg, rgba(8,7,6,.7) 0%, rgba(8,7,6,.5) 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  section{ padding: 4.5rem 0; }
}