/* ============================================================
   RAYUELA — DESIGN SYSTEM
   ------------------------------------------------------------
   ESTRATEGIA DE PRODUCTO
   El naming de la marca ("Rayuela") es el mejor activo creativo
   que tenían sin explotar: es el juego de la rayuela/hopscotch,
   con su tablero de casillas numeradas y su recorrido a saltos.
   Convertimos ese tablero en el sistema visual completo: la
   paleta sale literalmente del logo, la tipografía imita el
   trazo "rotulado a mano" de las letras del logo, y toda la
   coreografía de scroll está pensada como una partida de
   rayuela — el usuario "salta" de casilla en casilla (sección
   en sección) igual que el copy original de ellos ya decía
   ("salto a salto, hacia el paraíso de los sabores").
   Esto nos da un argumento de venta muy fuerte frente al
   cliente: no es una plantilla bonita, es identidad aplicada.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* ---- Paleta extraída del logo (editable para iterar con el cliente) ---- */
  --pink:        #F5C4B3;
  --pink-deep:   #EA9682;
  --sage:        #93AE94;
  --sage-deep:   #6E9C86;
  --mustard:     #EFC24C;
  --mustard-deep:#E0A82E;
  --pistachio:   #CBDA9E;
  --teal:        #6E9C86;
  --mint:        #D2ECE7;
  --cherry:      #E8465A;

  /* ---- Base cálida, evoca vainilla / papel de estraza de pueblo ---- */
  --cream:       #FBF3E6;
  --cream-2:     #F4E7D2;
  --cream-3:     #EFDCC0;
  --paper:       #FFFDF9;

  --dark:        #2B2018;
  --dark-soft:   #4A392C;
  --dark-muted:  #7A6A5A;

  --ink-on-dark: #FBF3E6;

  --radius-xl: 2.5rem;
  --radius-lg: 1.75rem;
  --radius-md: 1.1rem;
  --radius-sm: 0.6rem;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-elastic: cubic-bezier(.34,1.56,.64,1);

  --container: min(1240px, 92vw);
}

/* ============================== RESET ============================== */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-body);
  font-weight:500;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-0.01em; }
::selection{ background:var(--cherry); color:var(--cream); }

/* Respeta a quien prefiere menos movimiento: apagamos coreografía, no contenido */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================== GRANO / TEXTURA ==============================
   Ruido sutil vía SVG feTurbulence en un pseudo-elemento fijo a pantalla
   completa, con mix-blend-mode. Le quita planitud al color plano y da
   sensación "artesanal / papel" en vez de "plantilla digital fría". */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================== PRELOADER ==============================
   Animación de "salto" (rayuela) puramente en CSS: no depende de que el
   JS cargue a tiempo, así nunca se queda una pantalla negra bloqueando
   el sitio si algo va mal. animation-fill-mode:forwards la retira sola. */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  animation:preloader-out .6s ease .9s forwards;
}
.preloader__logo{
  width:min(240px, 55vw);
  filter:drop-shadow(0 14px 18px rgba(43,32,24,.22));
  animation:preloader-jump 1.1s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes preloader-jump{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-26px) rotate(3deg); }
}
@keyframes preloader-out{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ============================== MENÚ MÓVIL ============================== */
.mobile-menu{
  position:fixed; inset:0; z-index:990;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
  transform:translateY(-100%);
  transition:transform .5s var(--ease-out);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-size:1.6rem; }

/* ============================== CURSOR PERSONALIZADO ============================== */
.cursor-dot{
  position:fixed; top:0; left:0;
  width:10px; height:10px;
  background:var(--cherry);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .15s var(--ease-out), background .3s;
  mix-blend-mode:normal;
}
.cursor-ring{
  position:fixed; top:0; left:0;
  width:38px; height:38px;
  border:1.5px solid var(--dark);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease-out), opacity .3s, border-color .3s, width .3s, height .3s;
}
.cursor-ring.is-active{ transform:translate(-50%,-50%) scale(1.6); border-color:var(--cherry); }
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ============================== SCROLL PROGRESS ============================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:1001;
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--cherry), var(--mustard), var(--sage-deep));
  transform:scaleX(0);
}

/* ============================== BLOBS FLUIDOS DE FONDO ==============================
   Manchas de color muy desenfocadas que respiran con una animación lenta.
   Sustituyen a un fondo plano o a una foto de stock: dan la sensación de
   "fondo fluido" pedida sin pesar nada (son solo gradientes + blur). */
.blob-field{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  animation:blob-float 18s ease-in-out infinite;
  will-change:transform;
}
@keyframes blob-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(3%,-4%) scale(1.08); }
  66%{ transform:translate(-3%,3%) scale(.95); }
}

/* ============================== LAYOUT UTILS ============================== */
.container{ width:var(--container); margin-inline:auto; position:relative; }
.section{ position:relative; padding-block:clamp(4rem,10vw,8rem); }
.section-inner{ position:relative; z-index:2; }
.overflow-clip{ overflow:clip; }

/* ============================== BOTONES ============================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  padding:.95em 1.7em;
  border-radius:100px;
  border:2px solid var(--dark);
  background:var(--dark);
  color:var(--cream);
  box-shadow:0 0 0 var(--dark);
  transition:transform .35s var(--ease-elastic), box-shadow .35s var(--ease-out), background .3s, color .3s;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--cherry);
  transform:translateY(101%);
  transition:transform .4s var(--ease-out);
  z-index:-1;
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 var(--dark);
  border-color:var(--dark);
}
.btn:active{ transform:translate(0,0); box-shadow:0 0 0 var(--dark); }

.btn--ghost{
  background:transparent;
  color:var(--dark);
}
.btn--ghost::before{ background:var(--mustard); }
.btn--ghost:hover{ color:var(--dark); }

.btn--sage::before{ background:var(--sage-deep); }
.btn--sage:hover{ color:var(--cream); }

.btn-icon{
  display:inline-flex;
  width:1.4em; height:1.4em;
  align-items:center; justify-content:center;
  transition:transform .4s var(--ease-elastic);
}
.btn:hover .btn-icon{ transform:translateX(4px) rotate(8deg); }

/* ============================== NAV ============================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0;
  transition:padding .4s var(--ease-out), background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav.is-scrolled{
  padding:.6rem 0;
  background:rgba(251,243,230,.82);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(43,32,24,.08);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
}
.nav__brand img{ height:34px; width:auto; transition:transform .5s var(--ease-elastic); }
.nav__brand:hover img{ transform:rotate(-8deg) scale(1.08); }

.nav__links{
  display:flex; align-items:center; gap:2.1rem;
}
.nav__links a{
  position:relative;
  font-weight:600;
  font-size:.95rem;
  padding:.3rem 0;
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--cherry);
  transition:right .35s var(--ease-out);
}
.nav__links a:hover::after{ right:0; }
.nav__links a.is-active::after{ right:0; background:var(--sage-deep); }

.nav__cta{ display:flex; align-items:center; gap:.9rem; }

.nav__burger{
  display:none;
  flex-direction:column; gap:5px;
  width:34px; height:34px;
  align-items:center; justify-content:center;
  border:1.5px solid var(--dark);
  border-radius:50%;
}
.nav__burger span{ width:14px; height:2px; background:var(--dark); border-radius:2px; }

/* ============================== HERO ============================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:8rem;
  padding-bottom:6rem;
  overflow:clip;
}
/* Vídeo de fondo del hero: cubre toda la sección, con un velo en los
   tonos crema de la marca por encima para que el titular siga
   legible sin recurrir a una capa negra genérica tipo stock. */
.hero__video-wrap{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__video-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(251,243,230,.22) 0%, rgba(251,243,230,.38) 55%, rgba(251,243,230,.6) 100%);
}
.hero__content{
  position:relative; z-index:2;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:1.6rem;
}
.hero__title{
  font-size:clamp(2.4rem, 6.6vw, 5.6rem);
  display:flex; flex-direction:column; gap:.05em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{
  display:inline-block;
  transform:translateY(115%) rotate(4deg);
  transition:transform 1.1s var(--ease-elastic);
}
/* JS añade .is-loaded ~cuando el preloader termina de desvanecerse:
   cada línea "salta" a su sitio con un pequeño desfase, como si
   fuera avanzando casilla a casilla dentro del propio titular. */
.hero__title.is-loaded .line:nth-child(1) span{ transition-delay:.05s; }
.hero__title.is-loaded .line:nth-child(2) span{ transition-delay:.2s; }
.hero__title.is-loaded .line span{ transform:translateY(0) rotate(0deg); }
.hero__title .accent{ color:var(--cherry); font-style:italic; }

.hero__sub{
  max-width:36rem;
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  font-weight:700;
  color:var(--dark);
}
.hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }

.hero__scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-display);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dark-soft);
  z-index:3;
}
.hero__scroll-cue .track{
  width:2px; height:46px;
  background:rgba(43,32,24,.18);
  position:relative;
  overflow:hidden;
  border-radius:2px;
}
.hero__scroll-cue .track::after{
  content:"";
  position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--cherry);
  animation:cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop{
  0%{ top:-40%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* Elementos flotantes (helados/formas): dos capas para que el parallax
   (JS, en .floaty) y la flotación (CSS, en el SVG hijo) no se peleen por
   la propiedad transform — una animación CSS siempre gana sobre un
   estilo inline, así que si ambas vivieran en el mismo nodo el parallax
   quedaría anulado en cuanto arrancara la animación. */
.floaty{
  position:absolute;
  z-index:1;
  will-change:transform;
}
.floaty svg{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 18px 26px rgba(43,32,24,.16));
  animation:floaty-bob 6s ease-in-out infinite;
}
@keyframes floaty-bob{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-16px) rotate(calc(var(--rot,0deg) + 4deg)); }
}

/* ============================== MARQUEE ============================== */
.marquee{
  position:relative;
  border-top:2px solid var(--dark);
  border-bottom:2px solid var(--dark);
  background:var(--dark);
  color:var(--cream);
  padding:1.1rem 0;
  overflow:hidden;
  transform:rotate(-1.2deg) scale(1.02);
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee-scroll 28s linear infinite;
  gap:0;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.4vw,1.7rem);
  padding-inline:1.4rem;
  white-space:nowrap;
}
.marquee__item .sep{ color:var(--mustard); }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================== REVEAL ON SCROLL ============================== */
[data-reveal]{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(20px) scale(.92); }
[data-reveal="scale"].is-visible{ transform:translateY(0) scale(1); }
[data-reveal="left"]{ transform:translateX(-56px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(56px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }

/* stagger helper: cada hijo directo se retrasa un poco más */
[data-reveal-group] > *{
  transition-delay:calc(var(--i,0) * 90ms);
}

/* ============================== SECCIÓN: HISTORIA / CASILLA 1 ============================== */
.hopscotch-index{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display);
  color:var(--dark-soft);
  margin-bottom:1.2rem;
}
.hopscotch-index .num{
  width:2.4rem; height:2.4rem;
  border:2px solid var(--dark);
  border-radius:.6rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  background:var(--paper);
  transform:rotate(-6deg);
}

.story{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.story__visual{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius-xl);
  background:var(--pistachio);
  border:2px solid var(--dark);
  box-shadow:10px 10px 0 var(--dark);
  overflow:hidden;
}
.story__visual img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.story h2{ font-size:clamp(2.1rem,4vw,3.4rem); margin-bottom:1.1rem; }
.story p{ color:var(--dark-soft); font-size:1.05rem; max-width:34rem; }
.story p + p{ margin-top:1rem; }

.story__stats{
  display:flex; gap:1.6rem; margin-top:2.2rem; flex-wrap:wrap;
}
.stat{ }
.stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem,3.4vw,2.8rem);
  color:var(--pink-deep);
}
.stat span{ font-size:.82rem; color:var(--dark-muted); text-transform:uppercase; letter-spacing:.06em; }

/* ============================== GALERÍA DE PRODUCTOS (SHOWCASE) ============================== */
.showcase__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  margin-bottom:3rem;
}
.showcase__head h2{ font-size:clamp(2.2rem,4.4vw,3.6rem); max-width:26rem; }

.showcase-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:14rem;
  gap:1.1rem;
}
.showcase-card{
  position:relative;
  border-radius:var(--radius-lg);
  border:2px solid var(--dark);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.3rem;
  cursor:pointer;
  transition:transform .5s var(--ease-elastic), box-shadow .5s var(--ease-out);
}
.showcase-card:hover{ transform:translateY(-8px) rotate(-.6deg); box-shadow:8px 10px 0 var(--dark); }
.showcase-card:nth-child(1){ grid-column:span 3; grid-row:span 2; }
.showcase-card:nth-child(2){ grid-column:span 3; grid-row:span 1; }
.showcase-card:nth-child(3){ grid-column:span 3; grid-row:span 1; }
.showcase-card:nth-child(4){ grid-column:span 2; grid-row:span 2; }
.showcase-card:nth-child(5){ grid-column:span 2; grid-row:span 2; }
.showcase-card:nth-child(6){ grid-column:span 2; grid-row:span 2; }

.showcase-card__bg{
  position:absolute; inset:0; z-index:0;
}
.showcase-card__bg::after{
  /* Degradado sutil para que la etiqueta superior siga legible sobre
     cualquier fotografía real, sin tapar el producto. pointer-events:none
     para que el click llegue a la <img> de debajo y abra el lightbox. */
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(43,32,24,.38) 0%, transparent 30%, transparent 65%, rgba(43,32,24,.15) 100%);
}
.showcase-card__bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.showcase-card:hover .showcase-card__bg img{ transform:scale(1.08) rotate(-2deg); }

.showcase-card__label{
  position:relative; z-index:2;
  background:var(--paper);
  border:1.5px solid var(--dark);
  border-radius:100px;
  padding:.4em 1em;
  font-family:var(--font-display);
  font-size:.85rem;
  align-self:flex-start;
  box-shadow:3px 3px 0 var(--dark);
}
.showcase-card__tag{
  position:absolute; top:1rem; right:1rem; z-index:2;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cream);
}

/* ============================== GALERÍA · MOMENTOS RAYUELA ============================== */
.gallery-strip-section{ padding-block:0 clamp(2rem,5vw,3rem); }
.gallery-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.1rem;
}
.gallery-strip__item{
  /* Este elemento lleva la animación de entrada por scroll (data-reveal,
     fade + translateY). La inclinación y el hover viven en la <img>
     hija para no pelear por la misma propiedad transform — el mismo
     motivo por el que separamos el parallax de la flotación en .floaty. */
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius-lg);
  border:2px solid var(--dark);
  overflow:hidden;
}
.gallery-strip__item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--ease-elastic), box-shadow .5s var(--ease-out);
}
.gallery-strip__item:nth-child(odd) img{ transform:rotate(-1.4deg) scale(1.03); }
.gallery-strip__item:nth-child(even) img{ transform:rotate(1.2deg) scale(1.03); }
.gallery-strip__item:hover img{ transform:translateY(-6px) rotate(0deg) scale(1.06); }

/* ============================== MISIÓN / SPLIT CTA ============================== */
.mission{
  border-radius:var(--radius-xl);
  border:2px solid var(--dark);
  background:var(--dark);
  color:var(--cream);
  padding:clamp(2.4rem,6vw,5rem);
  position:relative;
  overflow:hidden;
}
.mission::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(251,243,230,.14) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  opacity:.5;
}
.mission__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center;
}
.mission h2{
  font-size:clamp(2rem,4vw,3.2rem);
  color:var(--mustard);
}
.mission p{ color:rgba(251,243,230,.82); margin-top:1.1rem; max-width:32rem; }

.mission__board{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
  max-width:16rem; margin-inline:auto;
}
.mission__board .cell{
  aspect-ratio:1; border:2px solid rgba(251,243,230,.5); border-radius:.8rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.2rem;
  transition:transform .4s var(--ease-elastic), background .4s;
}
.mission__board .cell:hover{ background:var(--cherry); transform:scale(1.08) rotate(-4deg); border-color:var(--cherry); }
.mission__board .cell.filled{ background:var(--mustard); color:var(--dark); border-color:var(--mustard); }

/* ============================== TESTIMONIOS / TICKER SOCIAL ============================== */
.social-proof{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.review-card{
  border:2px solid var(--dark);
  border-radius:var(--radius-lg);
  background:var(--paper);
  padding:1.8rem;
  position:relative;
  transition:transform .4s var(--ease-elastic);
}
.review-card:nth-child(2){ transform:translateY(1.4rem); }
.review-card:hover{ transform:translateY(-6px) rotate(1deg); }
.review-card .stars{ color:var(--mustard-deep); font-size:1rem; letter-spacing:.15em; margin-bottom:.8rem; }
.review-card p{ color:var(--dark-soft); font-size:.98rem; }
.review-card footer{ margin-top:1.1rem; font-family:var(--font-display); font-size:.9rem; color:var(--dark); }

/* ============================== UBICACIÓN ============================== */
.visit{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.visit__map{
  aspect-ratio:4/3.2;
  border-radius:var(--radius-xl);
  border:2px solid var(--dark);
  background:
    linear-gradient(155deg, var(--mint), var(--pistachio));
  position:relative; overflow:hidden;
  box-shadow:10px 10px 0 var(--dark);
}
.visit__pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  animation:pin-drop 2.4s var(--ease-elastic) infinite;
}
@keyframes pin-drop{
  0%,100%{ transform:translate(-50%,-100%); }
  50%{ transform:translate(-50%,-108%); }
}
.visit__details dl{ display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem; margin-top:1.6rem; }
.visit__details dt{ font-family:var(--font-display); color:var(--pink-deep); }
.visit__details dd{ color:var(--dark-soft); }

/* ============================== FOOTER / CTA FINAL ============================== */
.final-cta{
  text-align:center;
  padding-block:clamp(5rem,12vw,9rem);
}
.final-cta h2{
  font-size:clamp(2.6rem,8vw,6rem);
}
.final-cta h2 .accent{ color:var(--cherry); font-style:italic; }

footer.site-footer{
  border-top:2px solid var(--dark);
  padding-block:3rem 2rem;
}
.footer__top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  margin-bottom:2.4rem;
}
.footer__brand img{ height:40px; }
.footer__cols{ display:flex; gap:3.4rem; flex-wrap:wrap; }
.footer__col h4{ font-family:var(--font-display); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--dark-muted); margin-bottom:.8rem; }
.footer__col a, .footer__col span{ display:block; font-size:.95rem; margin-bottom:.5rem; color:var(--dark-soft); }
.footer__col a:hover{ color:var(--cherry); }
.footer__social{ display:flex; gap:.8rem; }
.footer__social a{
  width:2.6rem; height:2.6rem; border:1.5px solid var(--dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s var(--ease-elastic);
}
.footer__social a:hover{ background:var(--mustard); transform:translateY(-3px) rotate(-8deg); }

.footer__qr{
  display:flex; align-items:center; gap:.7rem;
  margin-top:1.1rem;
}
.footer__qr img{
  width:3.6rem; height:3.6rem;
  border:2px solid var(--dark);
  border-radius:.6rem;
  background:var(--paper);
  padding:.2rem;
  transform:rotate(-3deg);
}
.footer__qr span{ font-size:.8rem; color:var(--dark-soft); }
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.82rem; color:var(--dark-muted);
  padding-top:1.6rem; border-top:1px solid rgba(43,32,24,.14);
}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1024px){
  .story{ grid-template-columns:1fr; }
  .story__visual{ max-width:22rem; margin-inline:auto; }
  .showcase-grid{ grid-template-columns:repeat(4,1fr); }
  .showcase-card:nth-child(1){ grid-column:span 4; grid-row:span 2; }
  .showcase-card:nth-child(2){ grid-column:span 2; }
  .showcase-card:nth-child(3){ grid-column:span 2; }
  .showcase-card:nth-child(4){ grid-column:span 4; grid-row:span 1; height:11rem; }
  .showcase-card:nth-child(5){ grid-column:span 2; }
  .showcase-card:nth-child(6){ grid-column:span 2; }
  .mission__grid{ grid-template-columns:1fr; text-align:center; }
  .mission__board{ margin-inline:auto; }
  .social-proof{ grid-template-columns:1fr; }
  .review-card:nth-child(2){ transform:none; }
  .visit{ grid-template-columns:1fr; }
  .gallery-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}
@media (max-width:640px){
  .showcase-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:11rem; }
  .showcase-card:nth-child(1){ grid-column:span 2; }
  .showcase-card:nth-child(2){ grid-column:span 2; grid-row:span 1;}
  .showcase-card:nth-child(3){ grid-column:span 2; }
  .showcase-card:nth-child(4){ grid-column:span 1; grid-row:span 1; height:auto; }
  .showcase-card:nth-child(5){ grid-column:span 1; }
  .showcase-card:nth-child(6){ grid-column:span 2; }
  .footer__top{ flex-direction:column; }
}

/* ============================== LIGHTBOX (compartido) ==============================
   Visor a pantalla completa para la galería de la home y el carrusel
   de la carta. Fijo en el DOM, oculto por opacidad+visibility (no
   display:none) para poder animar la entrada/salida. */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(20,15,10,.92);
  display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .35s var(--ease-out), visibility 0s linear 0s;
}
.lightbox__img{
  max-width:min(90vw, 900px); max-height:88vh;
  border-radius:var(--radius-md);
  border:2px solid var(--cream);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:scale(.92);
  transition:transform .35s var(--ease-elastic);
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:1.5rem; right:1.5rem;
  width:2.8rem; height:2.8rem;
  border:1.5px solid var(--cream); border-radius:50%;
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s var(--ease-elastic);
}
.lightbox__close:hover{ background:var(--cherry); border-color:var(--cherry); transform:rotate(90deg); }
.lightbox__close svg{ width:1.2rem; height:1.2rem; }

img.js-lightbox{ cursor:zoom-in; }

/* ============================== CARRUSEL DE FOTOS (carta.html) ==============================
   Tira de fotografía real en bucle continuo: se anima sola (despacio)
   y se puede arrastrar con el dedo o el ratón para pararla donde
   interese — igual que hojear un carrete de fotos físico. Un click
   sin arrastre abre la foto en el lightbox. */
.photo-carousel-section{ padding-block:1rem 2rem; }
.photo-carousel{
  overflow:hidden;
  cursor:grab;
  -webkit-user-select:none; user-select:none;
  touch-action:pan-y;
}
.photo-carousel.is-dragging{ cursor:grabbing; }
.photo-carousel__track{
  display:flex;
  gap:1.1rem;
  width:max-content;
  will-change:transform;
}
.photo-carousel__item{
  position:relative;
  flex:none;
  width:15rem;
  aspect-ratio:3/4;
  border-radius:var(--radius-lg);
  border:2px solid var(--dark);
  overflow:hidden;
  background:var(--cream-2);
}
.photo-carousel__item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none; /* el drag lo gestiona el track, no cada imagen */
}
.photo-carousel__label{
  position:absolute; left:.8rem; bottom:.8rem; z-index:2;
  background:var(--paper);
  border:1.5px solid var(--dark);
  border-radius:100px;
  padding:.3em .8em;
  font-family:var(--font-display);
  font-size:.78rem;
  box-shadow:2px 2px 0 var(--dark);
}
@media (max-width:640px){
  .photo-carousel__item{ width:11rem; }
}