/* ---------------------------------------------------------------
   Estilo de Chambo — lo usan index.html y tienda.html.
   Un solo sitio donde tocar los colores, las fuentes y el diseño.
--------------------------------------------------------------- */

:root{
  --negro:#0C0B09;
  --negro-2:#16130F;
  --oro:#E9D544;
  --oro-hondo:#C9A227;
  --crema:#F7F2E7;
  --crema-2:#EFE7D6;
  --terracota:#C0522E;
  --turquesa:#1E7F82;
  --tinta:#1E1A16;
  --tinta-suave:#6B6259;
  --linea:#DED4C0;

  /* Las fuentes latinas no traen chino, japonés ni coreano:
     detrás van las del sistema para que no salgan cuadraditos. */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",
            "Hiragino Mincho ProN","Yu Mincho","Songti SC","SimSun","Batang",serif;
  --texto:"Jost",system-ui,-apple-system,"Segoe UI",
          "Hiragino Sans","Yu Gothic UI","Meiryo","Malgun Gothic",
          "Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Roboto,sans-serif;

  --marco:clamp(1.25rem,5vw,4rem);
  --ancho:78rem;
  --suave:cubic-bezier(.3,0,.1,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ---------- Preload (pantalla de entrada) ----------
   Sale antes que nada, con el logo sobre el negro y oro de la marca.
   Va en el HTML (no lo mete el JS) para que aparezca en el primer pintado.
   - Sin JS no se muestra (si no, se quedaría tapando la web para siempre).
   - Solo la primera vez de la sesión: en los clics internos no reaparece.
   - Dura un mínimo de 2,2 s (lo pone sitio.js) y se cierra al cargar.
   - Red de seguridad: una animación de CSS lo cierra a los 5 s aunque
     el JS falle, para no atrapar nunca al visitante. */
.preload{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at 50% 42%, var(--negro-2), var(--negro) 72%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  animation:preloadFin .7s var(--suave) 5s forwards;   /* solo si el JS falla */
}
.no-js .preload,
.sin-preload .preload{display:none}
.preload[data-listo="true"]{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--suave),visibility .6s;
}
.preload__logo{
  width:min(64vw,320px);height:auto;object-fit:contain;
  clip-path:inset(22% 11% 17% 11%);          /* recorta el aire transparente del PNG */
  filter:drop-shadow(0 0 24px rgba(233,213,68,.30));
  animation:preloadLatido 2.6s ease-in-out infinite;
}
.preload__barra{
  position:relative;width:min(46vw,170px);height:2px;
  background:rgba(233,213,68,.16);overflow:hidden;
}
.preload__barra::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:var(--oro);
  animation:preloadBarra 1.5s var(--suave) infinite;
}
@keyframes preloadLatido{0%,100%{opacity:.82;transform:scale(.99)}50%{opacity:1;transform:scale(1.01)}}
@keyframes preloadBarra{0%{left:-40%}100%{left:100%}}
@keyframes preloadFin{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){
  .preload__logo,.preload__barra::after{animation:none}
  .preload{animation:preloadFin .3s linear 1s forwards}
}
body{
  font-family:var(--texto);font-weight:300;
  color:var(--tinta);background:var(--crema);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.1}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--marco)}

.eyebrow{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:400;color:var(--oro-hondo);
}

/* ---------- Ajustes para chino, japonés y coreano ----------
   El espaciado ancho y la cursiva falsa destrozan estas escrituras. */
.cjk .eyebrow,
.cjk .nav a,
.cjk .btn,
.cjk .link,
.cjk .aviso,
.cjk .producto__etiqueta,
.cjk .producto__pieza,
.cjk .categoria__nombre small,
.cjk .dato__clave,
.cjk .pie h4,
.cjk .ficha__tag,
.cjk .ficha__anadir,
.cjk .filtro,
.cjk .panel__titulo{letter-spacing:.06em}
.cjk .hero h1 em,
.cjk .nosotras__cita{font-style:normal}
.cjk .menu a{font-family:var(--texto);font-size:1.9rem}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.2rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:color .35s var(--suave),border-color .35s var(--suave);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--negro);
  transition:transform .35s var(--suave);
}
.btn--oro{background:var(--oro);color:var(--negro);z-index:0}
.btn--oro::after{transform:translateY(101%)}
.btn--oro:hover{color:var(--oro)}
.btn--oro:hover::after{transform:translateY(0)}
.btn--linea{border-color:currentColor}
.btn--linea:hover{background:var(--negro);color:var(--crema);border-color:var(--negro)}
.btn--ancho{width:100%}

/* ---------- Enlace subrayado ---------- */
.link{
  display:inline-block;font-size:.8rem;letter-spacing:.08em;
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:opacity .3s var(--suave);
}
.link:hover{opacity:.6}

/* ---------- Aviso superior + idiomas ---------- */
.aviso{
  background:var(--negro);color:var(--crema);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem 1rem;position:relative;z-index:60;
}
.aviso b{color:var(--oro);font-weight:400}
.aviso__fila{
  max-width:var(--ancho);margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  gap:.5rem 1.25rem;flex-wrap:wrap;
}
.aviso__texto{text-align:center}

.idiomas{display:flex;align-items:center;gap:.3rem}
/* Nada de atenuar mucho las inactivas: al 50% las banderas blancas
   (Japón, Corea) se ven grises. La activa se marca con el aro dorado. */
.bandera{
  width:30px;height:24px;padding:0;
  display:grid;place-items:center;border-radius:2px;
  opacity:.85;transition:opacity .25s var(--suave),transform .25s var(--suave);
}
.bandera svg{
  width:21px;height:14px;display:block;border-radius:1px;
  box-shadow:0 0 0 1px rgba(247,242,231,.28);
}
.bandera:hover{opacity:1;transform:translateY(-1px)}
.bandera--activa{opacity:1}
.bandera--activa svg{box-shadow:0 0 0 1px var(--oro),0 0 0 3px rgba(233,213,68,.28)}

@media (min-width:64rem){
  .aviso__fila{justify-content:space-between}
  .aviso__texto{text-align:left}
}

/* ---------- Cabecera ---------- */
/* `top` lo fija el JS justo debajo del aviso y lo sube al hacer scroll.
   Si no, la cabecera se monta sobre el aviso cuando este ocupa dos líneas. */
.cabecera{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s var(--suave),box-shadow .4s var(--suave);
}
.cabecera--fija{background:var(--negro);box-shadow:0 1px 0 rgba(233,213,68,.16)}
.cabecera--solida{background:var(--negro)}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:76px;
  max-width:var(--ancho);margin-inline:auto;padding-inline:var(--marco);
}
.cabecera__logo{display:flex;align-items:center;height:52px;flex-shrink:0}
.cabecera__logo img{
  height:130px;width:auto;object-fit:contain;
  /* el PNG trae mucho aire transparente alrededor: lo recortamos ópticamente */
  clip-path:inset(26% 14% 20% 14%);
  margin:-34px -22px;
  /* dorado sobre vídeo claro se pierde; la sombra lo despega de cualquier fotograma */
  filter:drop-shadow(0 1px 5px rgba(12,11,9,.95)) drop-shadow(0 0 14px rgba(12,11,9,.6));
}
.cabecera--fija .cabecera__logo img,
.cabecera--solida .cabecera__logo img{filter:none}

.nav{display:none;gap:2rem}
.nav a{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--crema);position:relative;padding:.4rem 0;
  text-shadow:0 1px 8px rgba(12,11,9,.75);
}
.cabecera--fija .nav a,
.cabecera--solida .nav a{text-shadow:none}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--oro);transition:width .35s var(--suave);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after{width:100%}

.cabecera__acciones{
  display:flex;align-items:center;gap:.35rem;color:var(--crema);
  filter:drop-shadow(0 1px 5px rgba(12,11,9,.8));
}
.cabecera--fija .cabecera__acciones,
.cabecera--solida .cabecera__acciones{filter:none}
.icono{
  width:40px;height:40px;display:grid;place-items:center;position:relative;
  transition:color .3s var(--suave);
}
.icono:hover{color:var(--oro)}
.icono svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}
.hamburguesa{display:grid}

/* Contador de la cesta y de la lista de deseos */
.contador{
  position:absolute;top:3px;right:2px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--oro);color:var(--negro);
  border-radius:9px;
  font-size:.6rem;line-height:16px;text-align:center;font-weight:500;
  letter-spacing:0;
  transform:scale(0);transition:transform .3s var(--suave);
}
.contador[data-hay="true"]{transform:scale(1)}

@media (min-width:64rem){
  .nav{display:flex}
  .hamburguesa{display:none}
  .cabecera__fila{height:92px}
}

/* ---------- Menú móvil ---------- */
.menu{
  position:fixed;inset:0;z-index:55;background:var(--negro);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--marco);
  transform:translateX(100%);transition:transform .5s var(--suave);
}
.menu[data-abierto="true"]{transform:translateX(0)}
.menu a{
  font-family:var(--display);font-size:2.4rem;color:var(--crema);
  padding:.5rem 0;border-bottom:1px solid rgba(247,242,231,.1);
}
.menu a:hover{color:var(--oro)}
.menu__cerrar{position:absolute;top:1.5rem;right:var(--marco);color:var(--crema)}

/* ---------- Hero (portada) ---------- */
.hero{position:relative;height:94svh;min-height:34rem;overflow:hidden;background:var(--negro)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El vídeo cambia de escena y de brillo: el velo tiene que sostener
   el texto en el fotograma más claro, no solo en el más oscuro. */
.hero__velo{
  position:absolute;inset:0;
  background:
    radial-gradient(95% 85% at 6% 92%,rgba(12,11,9,.92) 0%,rgba(12,11,9,.6) 38%,transparent 78%),
    linear-gradient(to top,rgba(12,11,9,.8) 0%,rgba(12,11,9,.1) 50%,rgba(12,11,9,.45) 100%);
}
.hero__cuerpo{
  position:relative;height:100%;
  max-width:var(--ancho);margin-inline:auto;padding:0 var(--marco) clamp(3rem,8vw,5.5rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--crema);
}
.hero .eyebrow{color:var(--oro)}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);margin:.6rem 0 1rem;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--oro)}
.hero p{max-width:42ch;font-size:1.02rem;color:rgba(247,242,231,.82);margin-bottom:2rem}
.hero__botones{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__sonido{
  position:absolute;right:var(--marco);bottom:clamp(3rem,8vw,5.5rem);
  width:46px;height:46px;border:1px solid rgba(247,242,231,.35);border-radius:50%;
  display:grid;place-items:center;color:var(--crema);
  transition:border-color .3s var(--suave),color .3s var(--suave);
}
.hero__sonido:hover{border-color:var(--oro);color:var(--oro)}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(4rem,10vw,7.5rem)}
.seccion__titulo{font-size:clamp(2rem,4.5vw,3.1rem);margin:.5rem 0 1rem}
.seccion__intro{max-width:52ch;color:var(--tinta-suave);margin-bottom:3rem}
.seccion--oscura{background:var(--negro);color:var(--crema)}
.seccion--oscura .seccion__intro{color:rgba(247,242,231,.7)}
.seccion--oscura .eyebrow{color:var(--oro)}

/* ---------- Categorías ---------- */
.categorias{display:grid;gap:1px;background:var(--linea);grid-template-columns:repeat(2,1fr)}
@media (min-width:48rem){.categorias{grid-template-columns:repeat(3,1fr)}}
.categoria{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--crema-2);
  display:flex;align-items:flex-end;padding:1.5rem;
}
.categoria img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--suave),filter .6s var(--suave);
}
/* Las fotos claras (fulares, láminas) se comían el subtítulo dorado:
   el degradado tiene que morder fuerte abajo, donde va el texto. */
.categoria::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(12,11,9,.92) 0%,
    rgba(12,11,9,.6) 26%,
    rgba(12,11,9,.05) 68%);
}
.categoria:hover img{transform:scale(1.06)}
.categoria__nombre{
  position:relative;z-index:1;color:var(--crema);
  font-family:var(--display);font-size:1.6rem;
}
.categoria__nombre small{
  display:block;font-family:var(--texto);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);margin-top:.2rem;
}

/* ---------- Productos destacados (portada) ---------- */
.productos{display:grid;gap:2rem 1.2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:64rem){.productos{grid-template-columns:repeat(4,1fr)}}
.producto__marco{
  position:relative;aspect-ratio:1;overflow:hidden;background:var(--crema-2);
  margin-bottom:1rem;
}
.producto__marco img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--suave)}
.producto:hover .producto__marco img{transform:scale(1.05)}
.producto__etiqueta{
  position:absolute;top:.8rem;left:.8rem;z-index:1;
  background:var(--oro);color:var(--negro);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .6rem;
}
.producto__pieza{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  background:var(--negro);color:var(--crema);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:.9rem;
  transform:translateY(100%);transition:transform .4s var(--suave);
}
.producto:hover .producto__pieza,.producto:focus-within .producto__pieza{transform:translateY(0)}
.producto__enlace{display:block;color:inherit;text-decoration:none}
.producto h3{font-family:var(--texto);font-size:.95rem;font-weight:400;margin-bottom:.25rem}
.producto__desc{font-size:.8rem;color:var(--tinta-suave);margin-bottom:.4rem}
.producto__precio{font-size:.95rem}

/* Acciones bajo cada producto destacado: añadir a la cesta + corazón */
.producto__acciones{display:flex;gap:.5rem;margin-top:.8rem}
.producto__anadir{
  flex:1 1 auto;cursor:pointer;border:1px solid var(--oro);
  background:var(--oro);color:var(--negro);
  font-family:var(--texto);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.7rem .6rem;
  transition:background .25s var(--suave),color .25s var(--suave);
}
.producto__anadir:hover{background:transparent;color:var(--tinta,#1a1712)}
.producto__anadir.is-ok{background:#3c7a4e;border-color:#3c7a4e;color:#fff}
.producto__deseo{
  flex:0 0 auto;width:2.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(0,0,0,.18);
  color:var(--tinta-suave);
  transition:color .2s var(--suave),border-color .2s var(--suave);
}
.producto__deseo svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
.producto__deseo:hover{color:#c0392b;border-color:#c0392b}
.producto__deseo[aria-pressed="true"]{color:#c0392b;border-color:#c0392b}
.producto__deseo[aria-pressed="true"] svg{fill:#c0392b;stroke:#c0392b}

/* ---------- Bloque alterno ---------- */
.alterno{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:64rem){
  .alterno{grid-template-columns:1fr 1fr}
  .alterno--invertido .alterno__media{order:2}
}
.alterno__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.alterno__media img{width:100%;height:100%;object-fit:cover}
.alterno__texto p{color:var(--tinta-suave);margin-bottom:1.5rem}
.seccion--oscura .alterno__texto p{color:rgba(247,242,231,.72)}

/* ---------- Percusión ---------- */
.percusion{position:relative;overflow:hidden}
.percusion__lista{list-style:none;margin:2rem 0;display:grid;gap:.9rem}
.percusion__lista li{
  display:flex;gap:.9rem;align-items:baseline;
  font-size:.92rem;color:rgba(247,242,231,.8);
}
.percusion__lista li::before{content:"";width:6px;height:6px;background:var(--oro);flex-shrink:0}

/* ---------- Nosotras ---------- */
.nosotras__cita{
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);
  font-style:italic;line-height:1.35;margin-bottom:1.5rem;
}

/* ---------- Visítanos ---------- */
.visita{display:grid;gap:3rem}
@media (min-width:64rem){.visita{grid-template-columns:1fr 1fr}}
.datos{display:grid;gap:1.6rem}
.dato__clave{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-hondo);margin-bottom:.3rem;
}
.dato__valor{font-size:1.05rem}
.dato__valor small{display:block;font-size:.85rem;color:var(--tinta-suave)}
.visita__foto{aspect-ratio:3/4;overflow:hidden}
.visita__foto img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   TIENDA
   ========================================================= */

/* La cabecera de la tienda es negra fija: aquí no hay vídeo debajo. */
.tienda__cabeza{
  padding-top:clamp(7rem,14vw,10rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
.tienda__cabeza h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.5rem 0 .8rem}
.tienda__cabeza p{max-width:52ch;color:var(--tinta-suave)}

/* Filtros por categoría */
.filtros{
  display:flex;gap:.5rem;flex-wrap:wrap;
  padding-bottom:clamp(2rem,4vw,3rem);
}
.filtro{
  padding:.55rem 1.1rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--linea);border-radius:999px;
  color:var(--tinta-suave);
  transition:all .3s var(--suave);
}
.filtro:hover{border-color:var(--tinta);color:var(--tinta)}
.filtro[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:var(--oro)}

.cuenta{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:2rem;
}

/* Rejilla de fichas */
.rejilla{
  display:grid;gap:2.6rem 1.2rem;
  grid-template-columns:repeat(2,1fr);
  padding-bottom:clamp(4rem,8vw,7rem);
}
@media (min-width:48rem){.rejilla{grid-template-columns:repeat(3,1fr)}}
@media (min-width:64rem){.rejilla{grid-template-columns:repeat(4,1fr);gap:3rem 1.4rem}}

.rejilla__vacio{
  grid-column:1/-1;padding:4rem 0;text-align:center;color:var(--tinta-suave);
}

/* ---------- Bloques de contenido dentro de la rejilla ----------
   Como en las tiendas grandes: cada cierto número de piezas, la rejilla
   se abre y entra una foto de ambiente o una promoción. */

/* 1) Bloque de una celda: foto + etiqueta abajo + titular debajo */
.bloque-celda{display:flex;flex-direction:column}
.bloque-celda__foto{
  position:relative;aspect-ratio:1/1.1;overflow:hidden;margin-bottom:.9rem;
}
.bloque-celda__foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--suave);
}
.bloque-celda:hover .bloque-celda__foto img{transform:scale(1.04)}
.bloque-celda__tag{
  position:absolute;left:0;bottom:0;z-index:1;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--negro);color:var(--crema);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem 1rem;
}
.bloque-celda__tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.bloque-celda h3{
  font-family:var(--display);font-size:1.35rem;line-height:1.25;font-weight:300;
}

/* 2) Bloque a todo lo ancho: foto a un lado, texto al otro */
.bloque-ancho{
  grid-column:1/-1;
  display:grid;gap:0;
  background:var(--crema-2);
  margin:1.5rem 0 2.5rem;
}
@media (min-width:48rem){.bloque-ancho{grid-template-columns:1fr 1fr}}
.bloque-ancho__foto{aspect-ratio:4/3;overflow:hidden}
.bloque-ancho__foto img{width:100%;height:100%;object-fit:cover}
.bloque-ancho__texto{
  padding:clamp(2rem,5vw,3.5rem);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.bloque-ancho__marca{
  display:inline-block;background:var(--oro);color:var(--negro);
  font-size:.68rem;letter-spacing:.1em;
  padding:.25rem .55rem;margin-bottom:1rem;
}
.bloque-ancho h3{
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.15;margin-bottom:1rem;
}
.bloque-ancho p{
  font-size:.9rem;color:var(--tinta-suave);
  max-width:44ch;margin-bottom:1.5rem;
}

/* Ficha de producto */
.ficha{display:flex;flex-direction:column}
.ficha__marco{
  position:relative;aspect-ratio:1/1.1;overflow:hidden;
  background:var(--crema-2);margin-bottom:.9rem;
}
.ficha__marco img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--suave);
}

/* Segunda foto: aparece al pasar el ratón, encima de la primera.
   Es una foto, no un vídeo. Solo la tienen los productos con img2. */
.ficha__b{
  position:absolute;inset:0;z-index:1;
  opacity:0;transition:opacity .5s var(--suave);
}
.ficha:hover .ficha__b,
.ficha:focus-within .ficha__b{opacity:1}

/* En pantalla táctil no hay "pasar por encima": se turnan solas para
   que también se vea la segunda foto. */
@media (hover:none){
  .ficha__b{animation:turno 7s var(--suave) infinite}
  @keyframes turno{
    0%,42%{opacity:0}
    50%,92%{opacity:1}
    100%{opacity:0}
  }
}

.ficha:hover .ficha__marco img{transform:scale(1.04)}

/* El corazón va sobre la foto del producto, que puede ser de cualquier
   color: sin un fondo claro fijo desaparece en las fotos oscuras. */
.ficha__corazon{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;
  background:rgba(247,242,231,.82);
  box-shadow:0 1px 6px rgba(12,11,9,.14);
  transition:background .25s var(--suave);
}
.ficha__corazon:hover{background:var(--crema)}
.ficha__corazon svg{
  width:19px;height:19px;
  fill:none;stroke:var(--tinta);stroke-width:1.3;
  transition:fill .25s var(--suave),stroke .25s var(--suave),transform .25s var(--suave);
}
.ficha__corazon[aria-pressed="true"] svg{fill:var(--terracota);stroke:var(--terracota)}
.ficha__corazon:active svg{transform:scale(.82)}

.ficha__tag{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-hondo);margin-bottom:.4rem;min-height:1em;
}
.ficha h3{
  font-family:var(--texto);font-size:.9rem;font-weight:400;
  line-height:1.4;margin-bottom:.2rem;
}
.ficha__colores{font-size:.78rem;color:var(--tinta-suave);margin-bottom:.2rem}
.ficha__precio{font-size:.9rem;margin:.35rem 0 .7rem}
.ficha__anadir{
  align-self:flex-start;
  font-size:.76rem;letter-spacing:.06em;
  border-bottom:1px solid var(--tinta);padding-bottom:2px;
  transition:opacity .3s var(--suave),color .3s var(--suave);
}
.ficha__anadir:hover{opacity:.55}
.ficha__anadir[data-hecho="true"]{color:var(--turquesa);border-color:var(--turquesa)}

/* =========================================================
   VALORACIONES
   ========================================================= */

/* Aviso de que las reseñas son de ejemplo. Desaparece solo al poner
   demo:false en resenas.js. Tiene que cantar: publicar reseñas
   inventadas es ilegal y la multa le cae al negocio. */
.aviso-demo{
  background:var(--negro);color:var(--crema);
  border-left:3px solid var(--oro);
  padding:1.1rem 1.3rem;margin-bottom:2.5rem;
  font-size:.85rem;line-height:1.6;max-width:60ch;
}
.aviso-demo b{color:var(--oro);font-weight:400}
.aviso-demo[hidden]{display:none}

/* Resumen: nota media grande + estrellas + total */
.resumen{
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);
  flex-wrap:wrap;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.resumen__nota{
  font-family:var(--display);font-size:clamp(3.5rem,8vw,5rem);
  line-height:1;font-weight:300;
}
.resumen__nota small{font-size:.3em;color:var(--tinta-suave);margin-left:.2em}
.resumen__lado{display:flex;flex-direction:column;gap:.4rem}
.resumen__total{font-size:.85rem;color:var(--tinta-suave)}

/* Sello de Google: la G de sus cuatro colores y la palabra al lado.
   Es lo que dice de dónde salen las reseñas, así que se ve. */
.sello-google{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--crema-2);border:1px solid var(--linea);
  border-radius:999px;padding:.45rem .9rem .45rem .6rem;
  align-self:flex-start;
}
.sello-google svg{width:20px;height:20px;flex-shrink:0}
.sello-google span{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-suave);
}
.cjk .sello-google span{letter-spacing:.05em}
.resumen__google{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;letter-spacing:.06em;
  border-bottom:1px solid currentColor;padding-bottom:2px;
  align-self:flex-start;margin-top:.3rem;
  transition:opacity .3s var(--suave);
}
.resumen__google:hover{opacity:.6}
.resumen__google svg{width:15px;height:15px}

/* Estrellas */
.estrellas{display:inline-flex;gap:2px}
.estrellas svg{width:17px;height:17px}
.estrellas .llena{fill:var(--oro-hondo)}
.estrellas .vacia{fill:var(--linea)}

/* Carrusel: pasa solo de lado a lado con una animación de CSS.
   A propósito NO usa JavaScript para moverse: una animación CSS va
   siempre (también en el previsualizador y sin rueda de ratón),
   mientras que el truco con JavaScript se queda congelado donde el
   navegador no está "pintando". */
.carrusel{
  position:relative;
  overflow:hidden;               /* la ventana: recorta lo que sale */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.carrusel__cinta{
  display:flex;gap:1.2rem;width:max-content;
  padding-bottom:.5rem;
  /* La distancia y el tiempo los pone el JS al saber cuántas reseñas
     hay: --paso es lo que ocupa una tanda, y va a ritmo constante. */
  animation:desfilar var(--tiempo,60s) linear infinite;
}
@keyframes desfilar{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--paso,50%)))}
}
/* Se para al pasar el ratón (para leer), al enfocar con teclado
   y cuando la persona le da al botón de parar. */
.carrusel:hover .carrusel__cinta,
.carrusel:focus-within .carrusel__cinta,
.carrusel[data-parado="true"] .carrusel__cinta{animation-play-state:paused}

/* Si alguien pide menos animaciones en su sistema, no se mueve solo:
   hay quien se marea. Se queda quieto y se lee con el dedo. */
@media (prefers-reduced-motion:reduce){
  .carrusel{overflow-x:auto;scrollbar-width:none}
  .carrusel::-webkit-scrollbar{display:none}
  .carrusel__cinta{animation:none}
}

/* Botón de parar. Hace falta de verdad: en el móvil no hay "pasar el
   ratón por encima", así que sin botón no habría forma de detenerlo. */
.carrusel__parar{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1rem;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-suave);
  transition:color .3s var(--suave);
}
.carrusel__parar:hover{color:var(--tinta)}
.carrusel__parar svg{width:13px;height:13px;fill:currentColor}
.cjk .carrusel__parar{letter-spacing:.05em}

/* Tarjeta de reseña */
.resena{
  flex:0 0 clamp(17rem,78vw,21rem);
  background:var(--crema-2);
  padding:1.8rem;
  display:flex;flex-direction:column;gap:.9rem;
  position:relative;
}
.resena__marca{
  position:absolute;top:1.6rem;right:1.6rem;
  width:22px;height:22px;
}
/* Foto de quien la escribió, cuando viene de la API de Google.
   Google pide que se atribuya a su autor: por eso nombre, foto y enlace. */
.resena__foto{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  object-fit:cover;background:var(--linea);
}
.resena__autor a{border-bottom:1px solid transparent;transition:border-color .25s var(--suave)}
.resena__autor a:hover{border-color:currentColor}
.resena__texto{
  font-size:.92rem;line-height:1.7;flex:1;
  /* Las reseñas largas se cortan aquí; se leen enteras en Google. */
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
  overflow:hidden;
}
.resena__pie{
  display:flex;align-items:center;gap:.8rem;
  border-top:1px solid var(--linea);padding-top:1rem;
}
.resena__inicial{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--negro);color:var(--oro);
  display:grid;place-items:center;
  font-size:.85rem;
}
.resena__quien{display:flex;flex-direction:column;min-width:0}
.resena__autor{font-size:.85rem}
.resena__fecha{font-size:.75rem;color:var(--tinta-suave)}
.resena__ejemplo{
  align-self:flex-start;
  background:var(--terracota);color:var(--crema);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.25rem .5rem;
}
/* De dónde sale la reseña, al pie de cada tarjeta */
.resena__fuente{
  display:flex;align-items:center;gap:.45rem;
  font-size:.7rem;color:var(--tinta-suave);
}
.resena__fuente svg{width:14px;height:14px;flex-shrink:0}

/* ---------- Clientes contentos (página de Valoraciones) ---------- */
.clientes{padding-top:clamp(3rem,7vw,5.5rem)}
.clientes__intro{max-width:52ch;color:var(--tinta-suave);margin:.5rem 0 2.5rem}
.clientes__grid{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:48rem){.clientes__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:64rem){.clientes__grid{grid-template-columns:repeat(5,1fr)}}
.cliente{display:flex;flex-direction:column}
.cliente__foto{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--crema-2);margin-bottom:.9rem;
}
.cliente__foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--suave);
}
.cliente:hover .cliente__foto img{transform:scale(1.05)}
/* marca de Instagram en la esquina, discreta */
.cliente__ig{
  position:absolute;top:.5rem;right:.5rem;
  width:26px;height:26px;border-radius:50%;
  background:rgba(247,242,231,.85);
  display:grid;place-items:center;
  opacity:0;transition:opacity .3s var(--suave);
}
.cliente:hover .cliente__ig{opacity:1}
.cliente__ig svg{width:15px;height:15px;fill:none;stroke:var(--tinta);stroke-width:1.6}
/* La cita real de la clienta, si la hay */
.cliente__cita{
  font-family:var(--display);font-style:italic;
  font-size:1.05rem;line-height:1.4;margin-bottom:.5rem;
}
.cjk .cliente__cita{font-style:normal}
/* Nombre de la clienta + su bandera */
.cliente__nombre{
  display:flex;align-items:center;gap:.45rem;
  font-size:.92rem;color:var(--tinta);margin-bottom:.15rem;
}
.cliente__bandera{
  width:20px;height:13px;flex-shrink:0;border-radius:1px;
  box-shadow:0 0 0 1px var(--linea);
}
.cliente__desc{font-size:.82rem;color:var(--tinta-suave);line-height:1.5}

/* =========================================================
   VISÍTANOS (página propia)
   ========================================================= */

.visitar{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}

/* El mapa: un enlace grande. El mapa de Google va dentro sin capturar
   los clics (pointer-events:none), así que al pinchar en cualquier
   sitio se abre Google Maps, que es lo que se pide. */
.mapa{
  position:relative;display:block;
  aspect-ratio:16/10;overflow:hidden;
  background:var(--crema-2);
  border:1px solid var(--linea);
}
@media (min-width:64rem){.mapa{aspect-ratio:2/1}}
/* El mapa de Google, encima del respaldo. Es interactivo: se puede mover
   y hacer zoom. El botón de la esquina abre Google Maps a pantalla completa. */
.mapa__frame{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;border:0;
}
/* Detrás del mapa de Google queda este marcador, por si el mapa aún no
   ha cargado o no hay conexión. NO es una foto: es un fondo tipo plano
   con un alfiler, para que se entienda que ahí va el mapa (y no parezca
   que hemos puesto una foto cualquiera en su lugar). */
.mapa__fallback{
  position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(107,98,89,.09) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(107,98,89,.09) 39px 40px),
    var(--crema-2);
}
.mapa__fallback::after{
  content:"";width:38px;height:38px;
  background:var(--terracota);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z'/><circle cx='12' cy='10' r='3' fill='white'/></svg>");
          mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z'/><circle cx='12' cy='10' r='3' fill='white'/></svg>");
  filter:drop-shadow(0 3px 6px rgba(12,11,9,.25));
}
.mapa__cta{
  position:absolute;right:1rem;bottom:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--negro);color:var(--crema);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.7rem 1.1rem;
  box-shadow:0 4px 18px rgba(12,11,9,.28);
}
.mapa__cta svg{width:15px;height:15px}
.cjk .mapa__cta{letter-spacing:.05em}
.mapa:hover .mapa__cta{background:var(--oro);color:var(--negro)}

/* Bloque de contacto: dirección, teléfono, correo, redes */
.contacto{display:grid;gap:1.6rem}
@media (min-width:48rem){.contacto{grid-template-columns:repeat(3,1fr)}}
.contacto__dato .dato__clave{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-hondo);margin-bottom:.4rem;
}
.contacto__dato .dato__valor{font-size:1.05rem;line-height:1.5}
.contacto__dato .dato__valor small{display:block;font-size:.85rem;color:var(--tinta-suave)}
.contacto__falta{color:var(--tinta-suave);font-style:italic;font-size:.95rem}
.cjk .contacto__falta{font-style:normal}

/* Cómo llegar caminando: pasos numerados */
.pasos{list-style:none;counter-reset:paso;display:grid;gap:1.3rem;margin-top:.5rem}
.pasos li{
  counter-increment:paso;position:relative;
  padding-left:3.2rem;min-height:2.2rem;
  display:flex;align-items:center;
  font-size:.95rem;color:var(--tinta);
}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--negro);color:var(--oro);
  display:grid;place-items:center;
  font-family:var(--display);font-size:1.1rem;
}
.consejo{
  margin-top:1.8rem;padding:1.1rem 1.3rem;
  background:var(--crema-2);border-left:3px solid var(--oro);
  font-size:.9rem;line-height:1.6;
}
.consejo b{color:var(--oro-hondo);font-weight:400}

/* Qué ver cerca: tarjetas que abren cada sitio en Google Maps */
.puntos{display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea);grid-template-columns:1fr}
@media (min-width:48rem){.puntos{grid-template-columns:repeat(2,1fr)}}
/* Tarjeta que se da la vuelta al pasar el ratón: delante el texto,
   detrás la foto del sitio. Es un giro 3D de CSS. */
.punto{
  display:block;position:relative;
  min-height:clamp(185px,24vw,215px);
  background:var(--crema);
  perspective:1100px;                /* da profundidad al giro */
}
.punto__flip{
  position:absolute;inset:0;
  transition:transform .6s var(--suave);
  transform-style:preserve-3d;
}
.punto:hover .punto__flip,
.punto:focus-visible .punto__flip{transform:rotateY(180deg)}

.punto__cara{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;
}
/* Cara de delante: el texto, como antes */
.punto__frente{
  gap:.4rem;justify-content:center;
  padding:1.4rem 1.5rem;
}
.punto__fila{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.punto__nombre{font-family:var(--display);font-size:1.3rem;line-height:1.2}
.punto__min{
  flex-shrink:0;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--oro-hondo);white-space:nowrap;
}
.punto__desc{font-size:.9rem;color:var(--tinta-suave);line-height:1.5;margin-top:.3rem}
.punto__ir{
  margin-top:.6rem;font-size:.72rem;letter-spacing:.06em;
  color:var(--tinta-suave);display:inline-flex;align-items:center;gap:.4rem;
}
.punto__ir svg{width:13px;height:13px}
.punto:hover .punto__ir{color:var(--tinta)}

/* Cara de detrás: la foto del sitio, ya girada 180° */
.punto__dorso{
  transform:rotateY(180deg);
  justify-content:flex-end;
  background-size:cover;background-position:center;
  color:var(--crema);padding:1.2rem 1.3rem;
}
.punto__dorso::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(12,11,9,.85),rgba(12,11,9,.15) 55%,rgba(12,11,9,.35));
}
.punto__dorso-nombre{
  position:relative;z-index:1;
  font-family:var(--display);font-size:1.35rem;line-height:1.2;
}
.punto__credito{
  position:relative;z-index:1;margin-top:.4rem;
  font-size:.6rem;letter-spacing:.02em;color:rgba(247,242,231,.62);
}

/* Sin ratón (móvil/táctil) no hay giro: se ve la foto pequeña arriba
   para que también en el móvil se vea el sitio. */
@media (hover:none){
  .punto{min-height:0}
  .punto__flip{position:static;transform:none!important}
  .punto__cara{position:static;backface-visibility:visible}
  .punto__dorso{
    transform:none;order:-1;aspect-ratio:16/9;
    justify-content:flex-end;
  }
  .punto__frente{padding-top:1rem}
}
/* Quien pide menos animación: sin giro 3D, la foto aparece atenuando. */
@media (prefers-reduced-motion:reduce){
  .punto__flip{transition:none}
  .punto:hover .punto__flip{transform:none}
  .punto__dorso{
    backface-visibility:visible;transform:none;
    opacity:0;transition:opacity .3s var(--suave);
  }
  .punto:hover .punto__dorso,.punto:focus-visible .punto__dorso{opacity:1}
}

/* Horario y preguntas frecuentes, una al lado de la otra.
   El horario es estrecho (22rem) y las preguntas ocupan el resto; en
   móvil se apilan, con el horario primero. */
.horario-faq{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (min-width:64rem){.horario-faq{grid-template-columns:22rem 1fr}}

/* Horario: lista de días, hoy resaltado */
.horario{max-width:32rem}
.horas{list-style:none;display:grid;gap:0}
.horas li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem .2rem;border-bottom:1px solid var(--linea);
  font-size:.95rem;
}
.horas li:last-child{border-bottom:0}
.horas__dia{color:var(--tinta)}
.horas__h{color:var(--tinta-suave)}
.horas li[data-hoy="true"]{font-weight:500}
.horas li[data-hoy="true"] .horas__dia{color:var(--tinta)}
.horas li[data-hoy="true"]::before{
  content:"";position:absolute;left:calc(var(--marco) - .8rem);
  width:3px;height:1.1em;background:var(--oro);
}
.horas li{position:relative}
.horas__hoy{
  display:inline-block;margin-left:.6rem;
  background:var(--oro);color:var(--negro);
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.1rem .4rem;vertical-align:middle;
}
.horas__cerrado{color:var(--tinta-suave);font-style:italic}
.cjk .horas__cerrado{font-style:normal}

/* Aviso de horario provisional (mismo estilo que el de reseñas) */
.aviso-provisional{
  background:var(--negro);color:var(--crema);
  border-left:3px solid var(--oro);
  padding:1.1rem 1.3rem;margin-bottom:1.8rem;
  font-size:.9rem;line-height:1.6;max-width:40rem;
}
.aviso-provisional b{color:var(--oro);font-weight:400}
.aviso-provisional[hidden]{display:none}

/* Preguntas frecuentes: acordeón nativo, sin JavaScript */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-size:1.05rem;color:var(--tinta);
  transition:color .25s var(--suave);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oro-hondo)}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.5rem;
  width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--suave);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__r{
  padding:0 2.5rem 1.5rem 0;
  font-size:.95rem;line-height:1.7;color:var(--tinta-suave);
}

/* ---------- Síguenos en Instagram ----------
   No es un feed en vivo (Instagram ya no lo permite sin token): es una
   galería de fotos propias que enlaza al perfil. */
.insta{text-align:center}
.insta__usuario{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:1.05rem;color:var(--tinta);margin-bottom:2rem;
}
.insta__usuario svg{width:20px;height:20px}

.insta__grid{
  display:grid;gap:.5rem;
  grid-template-columns:repeat(2,1fr);
  margin-bottom:2.5rem;
}
@media (min-width:48rem){.insta__grid{grid-template-columns:repeat(3,1fr)}}
.insta__foto{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  background:var(--crema-2);
}
.insta__foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--suave),opacity .3s var(--suave);
}
.insta__foto::after{
  content:"";position:absolute;inset:0;
  background:rgba(12,11,9,.28);opacity:0;
  transition:opacity .3s var(--suave);
  /* el icono de Instagram, centrado, al pasar el ratón */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'><rect x='2' y='2' width='20' height='20' rx='5'/><circle cx='12' cy='12' r='4'/><circle cx='17.5' cy='6.5' r='1.2' fill='white' stroke='none'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:34px;
}
.insta__foto:hover img{transform:scale(1.06)}
.insta__foto:hover::after{opacity:1}

/* Botón con el degradado de Instagram */
.insta__boton{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 2rem;color:#fff;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(95deg,#F58529,#DD2A7B 55%,#8134AF 100%);
  transition:opacity .3s var(--suave),transform .3s var(--suave);
}
.insta__boton:hover{opacity:.92;transform:translateY(-1px)}
.insta__boton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.cjk .insta__usuario,.cjk .insta__boton{letter-spacing:.05em}

/* ---------- Páginas legales ---------- */
.legal{
  max-width:52rem;margin-inline:auto;
  padding-top:clamp(7rem,14vw,10rem);
  padding-bottom:clamp(4rem,8vw,7rem);
}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.5rem}
.legal__fecha{font-size:.8rem;color:var(--tinta-suave);margin-bottom:2.5rem}
.legal h2{
  font-family:var(--display);font-size:clamp(1.35rem,3vw,1.8rem);
  margin:2.4rem 0 .8rem;
}
.legal h3{
  font-family:var(--texto);font-weight:500;font-size:1rem;
  margin:1.4rem 0 .4rem;
}
.legal p,.legal li{color:var(--tinta);font-size:.95rem;line-height:1.75}
.legal p{margin-bottom:1rem}
.legal ul,.legal ol{margin:0 0 1rem 1.2rem;display:grid;gap:.4rem}
.legal a{color:var(--oro-hondo);border-bottom:1px solid currentColor}
.legal a:hover{opacity:.7}
.legal strong{font-weight:500}
.legal__caja{
  background:var(--crema-2);border-left:3px solid var(--oro-hondo);
  padding:1.1rem 1.3rem;margin:0 0 1rem;font-size:.9rem;line-height:1.65;
}
/* Aviso de datos por completar. Sale mientras queden [CORCHETES] sin rellenar. */
.legal__pendiente{
  background:var(--negro);color:var(--crema);
  border-left:3px solid var(--oro);
  padding:1.2rem 1.4rem;margin-bottom:2.5rem;
  font-size:.9rem;line-height:1.7;
}
.legal__pendiente b{color:var(--oro);font-weight:400}
.legal__pendiente code{
  background:rgba(233,213,68,.14);padding:.05rem .35rem;border-radius:3px;
  font-size:.92em;
}

/* ---------- Botón flotante de WhatsApp ----------
   Fijo en la esquina inferior derecha, en todas las páginas. Lo inyecta
   sitio.js. z-index por debajo del menú y de los paneles de la cesta,
   para que esos lo tapen cuando se abren. */
.whatsapp-flotante{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:45;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(12,11,9,.28);
  transition:transform .25s var(--suave),box-shadow .25s var(--suave);
}
.whatsapp-flotante svg{width:32px;height:32px;fill:currentColor}
.whatsapp-flotante:hover{transform:scale(1.07);box-shadow:0 8px 26px rgba(37,211,102,.5)}
.whatsapp-flotante:active{transform:scale(.96)}
/* Un latido suave la primera vez, para que se note. Se calma al pasar el ratón. */
.whatsapp-flotante::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:waLatido 2.4s ease-out 3;
}
.whatsapp-flotante:hover::before{animation:none}
@keyframes waLatido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.whatsapp-flotante::before{animation:none}}
@media (min-width:64rem){.whatsapp-flotante{right:1.75rem;bottom:1.75rem;width:60px;height:60px}}
.no-js .whatsapp-flotante{display:none}

/* =========================================================
   PERCUSIÓN (página de clases y reservas)
   ========================================================= */

/* Hero oscuro con la foto de una clase de fondo */
.perc-hero{
  position:relative;overflow:hidden;background:var(--negro);
  color:var(--crema);
  padding:clamp(7rem,15vw,11rem) 0 clamp(4rem,9vw,7rem);
}
.perc-hero__fondo{
  position:absolute;inset:0;z-index:0;
  background:url("assets/flamenco.jpg") center/cover;
  opacity:.78;
  animation:percZoom 18s ease-in-out infinite alternate;
}
@keyframes percZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.perc-hero__velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(12,11,9,.6),rgba(12,11,9,.12) 60%,rgba(12,11,9,.32));
}
.perc-hero__cuerpo{position:relative;z-index:2;max-width:42rem}
.perc-hero .eyebrow{color:var(--oro)}
.perc-hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.08;
  margin:.6rem 0 1.4rem;
}
.perc-hero h1 em{font-style:italic;color:var(--oro)}
.cjk .perc-hero h1 em{font-style:normal}
.perc-hero__intro{
  font-size:clamp(1rem,2.2vw,1.18rem);line-height:1.7;
  color:rgba(247,242,231,.82);max-width:40ch;margin-bottom:2.2rem;
}

/* Botón de reserva + compás, en una fila */
.perc-hero__cta{
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,2.5rem);
  flex-wrap:wrap;
}
/* Compás animado: barras que laten como un ritmo de cajón */
.compas{display:flex;align-items:flex-end;gap:.4rem;height:44px}
.compas span{
  width:5px;background:var(--oro);border-radius:2px;
  animation:compasLatido 1.1s ease-in-out infinite;
  transform-origin:bottom;
}
.compas span:nth-child(1){height:40%;animation-delay:0s}
.compas span:nth-child(2){height:75%;animation-delay:.12s}
.compas span:nth-child(3){height:55%;animation-delay:.24s}
.compas span:nth-child(4){height:95%;animation-delay:.36s}
.compas span:nth-child(5){height:60%;animation-delay:.48s}
.compas span:nth-child(6){height:80%;animation-delay:.6s}
.compas span:nth-child(7){height:45%;animation-delay:.72s}
@keyframes compasLatido{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .compas span{animation:none}
  .perc-hero__fondo{animation:none}
}

/* Tarjetas de "cómo son las clases" */
.clases{
  display:grid;gap:1.4rem;grid-template-columns:1fr;
}
@media (min-width:48rem){.clases{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.clases{grid-template-columns:repeat(4,1fr)}}
.clase-tarjeta{
  background:var(--crema-2);padding:1.8rem 1.5rem;
  border-top:2px solid var(--oro);
  display:flex;flex-direction:column;gap:.8rem;
  transition:transform .4s var(--suave),box-shadow .4s var(--suave);
}
.clase-tarjeta:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(12,11,9,.1)}
.clase-tarjeta__n{
  font-family:var(--display);font-size:2rem;color:var(--oro-hondo);line-height:1;
}
.clase-tarjeta__t{font-size:.95rem;line-height:1.5}

/* Vídeo de fondo a todo lo ancho, como el hero de la portada.
   El vídeo cubre toda la sección; el texto va encima, sobre un velo. */
.reel-fondo{
  position:relative;overflow:hidden;background:var(--negro);color:var(--crema);
  min-height:min(88svh,760px);
  display:flex;align-items:flex-end;
  padding-block:clamp(4rem,10vw,7rem);
}
.reel-fondo__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.reel-fondo__velo{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(80% 70% at 50% 45%,transparent 40%,rgba(12,11,9,.55) 100%),
    linear-gradient(to top,rgba(12,11,9,.85) 0%,rgba(12,11,9,.2) 45%,rgba(12,11,9,.5) 100%);
}
.reel-fondo__cuerpo{position:relative;z-index:2;width:100%}
.reel-fondo .eyebrow{color:var(--oro)}
.reel-fondo h2{
  font-size:clamp(2rem,5vw,3.4rem);margin:.5rem 0 1.2rem;max-width:18ch;
}
/* Botón de reproducir sobre el vídeo (grande, centrado abajo del texto).
   Solo hace falta si el vídeo aún no autoarranca o para ver el reel. */
.reel-fondo__acciones{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.reel-fondo__play{
  width:64px;height:64px;flex-shrink:0;
  border:1px solid rgba(247,242,231,.4);border-radius:50%;
  display:grid;place-items:center;color:var(--crema);
  transition:border-color .3s var(--suave),color .3s var(--suave),transform .3s var(--suave);
  animation:reelPulso 2.6s ease-in-out infinite;
}
.reel-fondo__play:hover{border-color:var(--oro);color:var(--oro);transform:scale(1.06)}
.reel-fondo__play svg{width:24px;height:24px;fill:currentColor}
@keyframes reelPulso{0%,100%{box-shadow:0 0 0 0 rgba(233,213,68,.0)}50%{box-shadow:0 0 0 8px rgba(233,213,68,.10)}}
@media (prefers-reduced-motion:reduce){.reel-fondo__play{animation:none}}
.reel-fondo__enlace{
  font-size:.78rem;letter-spacing:.06em;color:rgba(247,242,231,.75);
  border-bottom:1px solid rgba(247,242,231,.3);padding-bottom:2px;
  transition:color .3s var(--suave),border-color .3s var(--suave);
}
.reel-fondo__enlace:hover{color:var(--oro);border-color:var(--oro)}
/* Aviso, solo en modo demostración, de que falta poner el vídeo */
.reel-fondo__falta{
  margin-top:1.4rem;font-size:.8rem;color:rgba(247,242,231,.6);
  max-width:44ch;line-height:1.6;
}
.reel-fondo__falta[hidden]{display:none}

/* ---------- Formulario de reserva ---------- */
.reserva{max-width:44rem}
.reserva__intro{color:var(--tinta-suave);margin-bottom:2.2rem;max-width:52ch}
.reserva form{display:grid;gap:1.6rem}
@media (min-width:48rem){
  .reserva form{grid-template-columns:1fr 1fr}
  .campo--ancho{grid-column:1/-1}
}
.campo{position:relative;display:flex;flex-direction:column}
.campo label{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-hondo);margin-bottom:.5rem;
}
.campo label small{
  color:var(--tinta-suave);text-transform:none;letter-spacing:0;
  font-size:.8em;margin-left:.3rem;
}
.cjk .campo label{letter-spacing:.05em}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto);font-size:1rem;color:var(--tinta);
  background:transparent;border:0;border-bottom:1px solid var(--linea);
  padding:.6rem 0;width:100%;
  transition:border-color .3s var(--suave);
}
.campo textarea{resize:vertical;min-height:3rem}
.campo select{cursor:pointer}
/* La línea de abajo se pinta de oro al enfocar, deslizándose */
.campo::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--oro);transition:width .35s var(--suave);
}
.campo:focus-within::after{width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:transparent}

.reserva__pie{grid-column:1/-1;display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}
.reserva__botones{display:flex;flex-wrap:wrap;gap:.9rem}
.reserva__enviar,.reserva__wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.1rem 2.2rem;color:#fff;border:0;cursor:pointer;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:opacity .3s var(--suave),transform .3s var(--suave);
}
.reserva__enviar{background:var(--negro)}
.reserva__wa{background:linear-gradient(95deg,#2AA81A,#1EBEA5)}   /* verde WhatsApp */
.reserva__enviar:hover,.reserva__wa:hover{opacity:.93;transform:translateY(-2px)}
.reserva__enviar svg{width:20px;height:20px}
.reserva__wa svg{width:21px;height:21px;fill:currentColor}
.cjk .reserva__enviar,.cjk .reserva__wa{letter-spacing:.05em}
.reserva__nota{font-size:.82rem;color:var(--tinta-suave);line-height:1.6;max-width:52ch}
.reserva__faltan{
  color:var(--terracota);font-size:.85rem;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s var(--suave),transform .3s var(--suave);
}
.reserva__faltan[data-ver="true"]{opacity:1;transform:none}

/* =========================================================
   CESTA Y LISTA DE DESEOS (paneles laterales)
   ========================================================= */

.velo{
  position:fixed;inset:0;z-index:70;
  background:rgba(12,11,9,.55);
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--suave);
}
.velo[data-visible="true"]{opacity:1;pointer-events:auto}

.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:75;
  width:min(27rem,100%);
  background:var(--crema);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s var(--suave);
  box-shadow:-8px 0 40px rgba(12,11,9,.18);
}
.panel[data-abierto="true"]{transform:none}

.panel__cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.4rem var(--marco);
  border-bottom:1px solid var(--linea);
  flex-shrink:0;
}
.panel__titulo{
  font-family:var(--texto);font-weight:400;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
}
.panel__x{width:40px;height:40px;display:grid;place-items:center;margin-right:-8px}
.panel__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.panel__x:hover{color:var(--terracota)}

.panel__cuerpo{flex:1;overflow-y:auto;padding:0 var(--marco)}
.panel__pie{
  border-top:1px solid var(--linea);
  padding:1.4rem var(--marco);
  flex-shrink:0;
}

.panel__vacio{
  padding:4rem 0;text-align:center;
}
.panel__vacio h3{
  font-family:var(--display);font-size:1.6rem;margin-bottom:.5rem;
}
.panel__vacio p{font-size:.88rem;color:var(--tinta-suave);margin-bottom:1.8rem}

/* Línea de producto dentro del panel */
.linea{
  display:grid;grid-template-columns:76px 1fr;gap:1rem;
  padding:1.4rem 0;border-bottom:1px solid var(--linea);
}
.linea:last-child{border-bottom:0}
.linea__foto{aspect-ratio:1/1.1;overflow:hidden;background:var(--crema-2)}
.linea__foto img{width:100%;height:100%;object-fit:cover}
.linea__cuerpo{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.linea__nombre{font-size:.85rem;line-height:1.4}
.linea__precio{font-size:.85rem}
.linea__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem}

.cantidad{display:flex;align-items:center;border:1px solid var(--linea)}
.cantidad button{
  width:30px;height:30px;display:grid;place-items:center;
  font-size:1rem;line-height:1;color:var(--tinta-suave);
  transition:color .2s var(--suave),background .2s var(--suave);
}
.cantidad button:hover{background:var(--crema-2);color:var(--tinta)}
.cantidad span{min-width:28px;text-align:center;font-size:.8rem}

.quitar{
  font-size:.72rem;color:var(--tinta-suave);
  border-bottom:1px solid var(--linea);padding-bottom:1px;
  transition:color .25s var(--suave),border-color .25s var(--suave);
}
.quitar:hover{color:var(--terracota);border-color:var(--terracota)}

.total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:.4rem;
}
.total__clave{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.total__valor{font-size:1.25rem;font-family:var(--display)}
.envio{font-size:.72rem;color:var(--tinta-suave);margin-bottom:1.1rem}
/* Línea de "pago con tarjeta o efectivo", bajo el botón de tramitar */
.pago-metodos{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin-top:.7rem;
  font-size:.72rem;letter-spacing:.04em;color:var(--tinta-suave);
}
.pago-metodos svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}

/* Nota de que la tienda es una demostración y no cobra */
.nota-demo{
  background:var(--negro);color:var(--crema);
  font-size:.78rem;line-height:1.55;
  padding:1rem 1.1rem;margin-top:1rem;
  border-left:3px solid var(--oro);
}
.nota-demo[hidden]{display:none}

/* ---------- Aparición al hacer scroll ---------- */
.revela{opacity:0;transform:translateY(24px);transition:opacity .8s var(--suave),transform .8s var(--suave)}
.revela.visible{opacity:1;transform:none}
/* Sin JS, todo visible: nunca una página en blanco */
.no-js .revela{opacity:1;transform:none}
.no-js .idiomas,
.no-js .ficha__corazon,
.no-js .ficha__anadir,
.no-js .filtros{display:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .revela{opacity:1;transform:none}
}

/* ---------- Pie ---------- */
.pie{background:var(--negro);color:var(--crema);padding-block:clamp(3rem,7vw,5rem) 2rem}
.pie__rejilla{display:grid;gap:2.5rem;margin-bottom:3rem}
@media (min-width:64rem){.pie__rejilla{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pie__marca img{
  height:120px;width:auto;object-fit:contain;
  clip-path:inset(24% 12% 18% 12%);margin:-30px -20px 0;
}
.pie h4{
  font-family:var(--texto);font-weight:400;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1.1rem;color:var(--oro);
}
.pie ul{list-style:none;display:grid;gap:.7rem}
.pie ul a{font-size:.85rem;color:rgba(247,242,231,.68);transition:color .3s var(--suave)}
.pie ul a:hover{color:var(--oro)}
.pie__legal{
  border-top:1px solid rgba(247,242,231,.12);padding-top:1.8rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.72rem;color:rgba(247,242,231,.45);
}
.social{display:flex;gap:.7rem;margin-top:1.4rem}
.social a{
  width:40px;height:40px;border-radius:50%;color:#fff;
  display:grid;place-items:center;
  transition:transform .3s var(--suave),box-shadow .3s var(--suave),filter .3s var(--suave);
}
.social a:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.35);filter:brightness(1.06)}
.social svg{width:20px;height:20px}
/* Colores reales de cada marca */
.social__ig{background:radial-gradient(circle at 28% 108%,#FEDA75 0%,#FA7E1E 25%,#D62976 50%,#962FBF 75%,#4F5BD5 100%)}
.social__fb{background:#1877F2}
.social__wa{background:#25D366}

/* ====================================================================
   BANNER DE COOKIES + PANEL + AVISO DEL MAPA
   El banner y el panel los inyecta sitio.js en todas las páginas.
   Rechazar tiene el mismo peso visual que aceptar (guía de la AEPD).
==================================================================== */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  padding:0 var(--marco) max(1rem,env(safe-area-inset-bottom));
  display:none;
}
.cookies[data-ver="true"]{display:block;animation:ck-sube .45s var(--suave) both}
@keyframes ck-sube{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.cookies__caja{
  max-width:64rem;margin:0 auto 1rem;
  background:var(--negro-2);color:var(--crema);
  border:1px solid rgba(233,213,68,.25);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  padding:1.4rem clamp(1.2rem,3vw,1.9rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
}
.cookies__txt{flex:1 1 22rem;font-size:.9rem;line-height:1.65;color:rgba(247,242,231,.85)}
.cookies__txt b{color:var(--crema)}
.cookies__link{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.cookies__acc{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cookies__btn{
  border:0;cursor:pointer;font-family:inherit;
  padding:.85rem 1.6rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  border-radius:6px;transition:opacity .25s var(--suave),transform .25s var(--suave),background .25s var(--suave),color .25s var(--suave);
}
.cookies__btn:hover{transform:translateY(-2px)}
.cookies__btn--si{background:var(--oro);color:var(--negro)}
.cookies__btn--no{background:transparent;color:var(--crema);border:1px solid rgba(247,242,231,.5)}
.cookies__btn--no:hover{border-color:var(--crema)}
.cookies__btn--cfg{background:transparent;color:rgba(247,242,231,.75);padding:.85rem .6rem;text-decoration:underline;text-underline-offset:3px}
.cookies__btn--cfg:hover{color:var(--crema)}
.cjk .cookies__btn{letter-spacing:.05em}

/* Panel de preferencias (modal) */
.ckpanel{
  position:fixed;inset:0;z-index:1300;display:none;
  align-items:center;justify-content:center;padding:var(--marco);
  background:rgba(12,11,9,.6);backdrop-filter:blur(3px);
}
.ckpanel[data-ver="true"]{display:flex;animation:ck-fade .3s var(--suave) both}
@keyframes ck-fade{from{opacity:0}to{opacity:1}}
.ckpanel__caja{
  background:var(--crema);color:var(--tinta);
  max-width:34rem;width:100%;max-height:88vh;overflow:auto;border-radius:14px;
  padding:clamp(1.4rem,4vw,2.2rem);box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.ckpanel__caja h2{font-size:1.6rem;margin:0 0 .3rem}
.ckpanel__intro{font-size:.9rem;color:var(--tinta-suave);line-height:1.6;margin:0 0 1.4rem}
.ckgrupo{
  border:1px solid var(--crema-2);border-radius:10px;padding:1.1rem 1.2rem;margin-bottom:.9rem;
  display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
}
.ckgrupo__txt h3{font-size:1rem;margin:0 0 .25rem}
.ckgrupo__txt p{font-size:.84rem;color:var(--tinta-suave);line-height:1.55;margin:0}
.ckgrupo__fijo{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--turquesa);font-weight:500;white-space:nowrap;padding-top:.15rem}
.cjk .ckgrupo__fijo{letter-spacing:.03em}
/* interruptor */
.cksw{position:relative;flex:0 0 auto;width:46px;height:26px}
.cksw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cksw__via{position:absolute;inset:0;background:#cfc6b4;border-radius:26px;transition:background .25s var(--suave)}
.cksw__via::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .25s var(--suave);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cksw input:checked + .cksw__via{background:var(--turquesa)}
.cksw input:checked + .cksw__via::before{transform:translateX(20px)}
.cksw input:focus-visible + .cksw__via{outline:2px solid var(--oro-hondo);outline-offset:2px}
.ckpanel__acc{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.ckpanel__guardar{
  flex:1 1 auto;border:0;cursor:pointer;font-family:inherit;background:var(--negro);color:var(--crema);
  padding:.95rem 1.6rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;border-radius:6px;
  transition:opacity .25s var(--suave)}
.ckpanel__guardar:hover{opacity:.9}
.cjk .ckpanel__guardar{letter-spacing:.05em}

/* Aviso en el hueco del mapa cuando no hay consentimiento */
.mapa__consent{
  position:absolute;inset:0;z-index:2;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:1rem;padding:2rem 1.5rem;background:var(--negro-2);color:var(--crema);
}
.mapa__consent[data-ver="true"]{display:flex}
.mapa__consent p{max-width:34ch;font-size:.9rem;line-height:1.6;color:rgba(247,242,231,.85)}

/* Enlace "Configurar cookies" del footer */
.pie__cfg{background:none;border:0;cursor:pointer;color:inherit;font:inherit;
  text-decoration:underline;text-underline-offset:3px;opacity:.85;padding:0}
.pie__cfg:hover{opacity:1;color:var(--oro)}

@media (max-width:40rem){
  .cookies__caja{flex-direction:column;align-items:stretch}
  .cookies__acc{justify-content:space-between}
  .cookies__btn--si,.cookies__btn--no{flex:1 1 auto;text-align:center}
}

/* ====================================================================
   GALERÍA "NUESTRA TIENDA" · fotos del interior de la tienda
   ==================================================================== */
.galeria-tienda{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.8rem,2vw,1.4rem);
}
@media (min-width:62rem){
  .galeria-tienda{grid-template-columns:repeat(3,1fr)}
}
.galeria-tienda__foto{
  display:block;position:relative;overflow:hidden;
  border-radius:14px;background:var(--crema-2);
  aspect-ratio:4/3;
  box-shadow:0 8px 22px rgba(12,11,9,.10);
}
/* La foto vertical ocupa doble alto para que no se recorte de mala manera */
.galeria-tienda__foto--alta{aspect-ratio:3/4}
@media (min-width:62rem){
  .galeria-tienda__foto--alta{grid-row:span 2;aspect-ratio:auto}
}
.galeria-tienda__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.galeria-tienda__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,11,9,.28),transparent 45%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.galeria-tienda__foto:hover img,
.galeria-tienda__foto:focus-visible img{transform:scale(1.05)}
.galeria-tienda__foto:hover::after,
.galeria-tienda__foto:focus-visible::after{opacity:1}
@media (prefers-reduced-motion: reduce){
  .galeria-tienda__foto img{transition:none}
  .galeria-tienda__foto:hover img{transform:none}
}

/* Fila de botones al final de "Nuestra Tienda" */
.nt-cta{
  display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem;
}
.nt-cta__wa{display:inline-flex;align-items:center;gap:.5rem}

/* ---- LIGHTBOX ---- */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(8,7,6,.92);
  opacity:0;transition:opacity .25s ease;
}
.lightbox[data-abierto="true"]{display:flex;opacity:1}
.lightbox__fig{
  margin:0;max-width:min(1100px,92vw);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.lightbox__img{
  max-width:100%;max-height:78vh;object-fit:contain;
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  background:#000;
}
.lightbox__pie{
  color:rgba(247,242,231,.85);font-size:.95rem;line-height:1.5;
  text-align:center;max-width:60ch;
}
.lightbox__cerrar,
.lightbox__nav{
  position:absolute;background:rgba(20,18,15,.55);border:0;cursor:pointer;
  color:var(--crema);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease;
}
.lightbox__cerrar svg,
.lightbox__nav svg{width:26px;height:26px}
.lightbox__cerrar{top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);width:48px;height:48px}
.lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px}
.lightbox__nav--prev{left:clamp(.5rem,2vw,1.5rem)}
.lightbox__nav--next{right:clamp(.5rem,2vw,1.5rem)}
.lightbox__cerrar:hover,
.lightbox__nav:hover{background:rgba(196,154,58,.85);color:#100f0c}
.lightbox__nav:hover{transform:translateY(-50%) scale(1.06)}
@media (max-width:40rem){
  .lightbox__nav{width:44px;height:44px}
  .lightbox__nav svg{width:22px;height:22px}
}