@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap");

/* ============================================================
   MERCADO JAMÓN — hoja principal de la tienda.

   Paleta: el logo manda. Carbón de la placa, rojo jamón para el
   precio y las llamadas, oro de la brida "Etiqueta Negra" para los
   detalles y crema para separar secciones sin ensuciar el blanco.
   ============================================================ */
:root{
  --tinta:#1d1d1b;          /* carbón del logo */
  --tinta-2:#3f3f3c;
  --gris:#6f6f6a;
  --gris-claro:#a3a39d;
  --linea:#e6e2da;
  --crema:#faf7f2;
  --crema-2:#f3ede3;
  --jamon:#9e1b32;          /* rojo del ibérico */
  --jamon-oscuro:#7d1527;
  --oro:#b8893b;            /* la brida negra lleva letras doradas */
  --verde:#2f7d4f;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--linea)}
html{-webkit-text-size-adjust:100%;font-family:var(--sans);line-height:1.5;scroll-behavior:smooth}
body{min-height:100vh;background:#fff;font-family:var(--sans);color:var(--tinta);-webkit-font-smoothing:antialiased}
img,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;cursor:pointer}
ul{list-style:none}
a{color:inherit;text-decoration:none}
.no-scroll{overflow:hidden}

/* ---------- contenedor ---------- */
.container{width:100%;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{max-width:640px}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:1024px){.container{max-width:1024px}}
@media(min-width:1280px){.container{max-width:1280px}}
@media(min-width:1536px){.container{max-width:1440px}}
.max-w-6xl{max-width:72rem;margin:0 auto}
.max-w-4xl{max-width:56rem;margin:0 auto}
.max-w-3xl{max-width:48rem;margin:0 auto}

/* ---------- barra superior ---------- */
.topbar{background:var(--tinta);color:#fff}
.topbar-inner{display:flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:36px;font-size:.75rem;letter-spacing:.02em;color:rgba(255,255,255,.82)}
.topbar-item{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.topbar-item svg{width:15px;height:15px;color:var(--oro);flex-shrink:0}
.topbar-sep{color:rgba(255,255,255,.28)}
@media(max-width:767px){
  /* en el móvil solo cabe la promesa que de verdad vende */
  .topbar-item:not(:first-child),.topbar-sep{display:none}
  .topbar-inner{font-size:.72rem}
}

/* ---------- cabecera ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linea)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:4.5rem}
.header-left{display:flex;align-items:center;gap:2.25rem}
.brand{display:flex;align-items:center;height:3.1rem}
.brand img{height:100%;width:auto;object-fit:contain}
.main-nav{display:none;align-items:center;gap:1.75rem;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:500}
@media(min-width:900px){.main-nav{display:flex}}
.main-nav a{color:var(--tinta-2);transition:color .15s}
.main-nav a:hover{color:var(--jamon)}
.main-nav a.active{color:var(--tinta);border-bottom:2px solid var(--oro);padding-bottom:.3rem}
.header-actions{display:flex;align-items:center;gap:.75rem}
.icon-btn{padding:.5rem;color:var(--tinta-2);transition:color .15s}
.icon-btn:hover{color:var(--jamon)}
.icon-btn svg{width:1.25rem;height:1.25rem}
.cart-btn{position:relative}
.cart-badge{position:absolute;top:0;right:0;min-width:1.05rem;height:1.05rem;padding:0 .25rem;
  background:var(--jamon);color:#fff;font-size:.6875rem;font-weight:700;line-height:1.05rem;
  border-radius:9999px;display:flex;align-items:center;justify-content:center}

/* ---------- migas ---------- */
.breadcrumb{padding-top:.9rem;padding-bottom:.5rem}
.breadcrumb nav{font-size:.8125rem;color:var(--gris)}
.breadcrumb .sep{margin:0 .45rem;color:var(--gris-claro)}
.breadcrumb .current{color:var(--tinta)}

/* ---------- ficha de producto ---------- */
.product-section{padding-top:1.25rem;padding-bottom:2.5rem}
.product-grid{display:grid;grid-template-columns:1fr;gap:2rem}
.product-grid>*{min-width:0}
@media(min-width:1024px){.product-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem}}

.gallery{display:flex;flex-direction:column;gap:.85rem}
.gallery-main{position:relative;aspect-ratio:1/1;background:var(--crema);
  border:1px solid var(--linea);border-radius:.25rem;overflow:hidden}
.gallery-viewport{overflow:hidden;height:100%;cursor:grab}
.gallery-viewport:active{cursor:grabbing}
.gallery-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.25,.8,.5,1)}
.gallery-slide{min-width:0;flex:0 0 100%;height:100%}
.gallery-slide img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
/* la brida del producto, dibujada con CSS sobre la foto */
.gallery-flag{position:absolute;left:0;top:1.25rem;z-index:10;
  background:var(--tinta);color:var(--oro);font-size:.6875rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:.45rem 1rem .45rem .9rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}
.wish-btn{position:absolute;top:1rem;right:1rem;z-index:10;padding:.55rem;background:#fff;
  border-radius:9999px;box-shadow:0 4px 14px rgba(29,29,27,.14);transition:background .15s,color .15s}
.wish-btn:hover{background:var(--crema);color:var(--jamon)}
.wish-btn svg{width:1.15rem;height:1.15rem;color:var(--gris)}
.thumbs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.35rem}
.thumb{width:4rem;height:4rem;border-radius:.25rem;overflow:hidden;
  border:1px solid var(--linea);flex-shrink:0;transition:border-color .15s;opacity:.8}
@media(min-width:640px){.thumb{width:4.75rem;height:4.75rem}}
.thumb:hover{opacity:1;border-color:var(--gris-claro)}
.thumb.is-active{border-color:var(--tinta);border-width:2px;opacity:1}
.thumb img{width:100%;height:100%;object-fit:cover}

.product-info{display:flex;flex-direction:column;gap:1.35rem}
.product-eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro);margin-bottom:.6rem}
.product-title{font-family:var(--serif);font-size:1.85rem;line-height:1.18;
  font-weight:700;letter-spacing:-.01em;color:var(--tinta)}
@media(min-width:1024px){.product-title{font-size:2.35rem}}
.product-sub{margin-top:.6rem;font-size:.95rem;color:var(--gris)}
.product-sub strong{color:var(--tinta);font-weight:600}

/* destacados */
.mj-destaques{margin-top:1.35rem;padding-top:1.25rem;border-top:1px solid var(--linea)}
.mj-destaques ul{display:flex;flex-direction:column;gap:.7rem}
.mj-destaques li{display:flex;align-items:center;gap:.7rem;font-size:.9375rem;
  line-height:1.35;color:var(--tinta-2)}
.mj-destaques li svg{width:19px;height:19px;flex-shrink:0;color:var(--jamon)}
.mj-destaques li strong{font-weight:600;color:var(--tinta)}

/* urgencia */
.mj-urgencia{margin-top:1.35rem}
.mj-urg-vendido{display:flex;align-items:center;gap:.55rem;font-size:.9375rem;
  font-weight:700;color:var(--verde)}
.mj-urg-ponto{width:9px;height:9px;border-radius:50%;background:var(--verde);flex-shrink:0}
.mj-urg-pack{display:flex;align-items:center;gap:.55rem;margin-top:.65rem;
  font-size:.9375rem;color:var(--tinta-2)}
.mj-urg-pack svg{width:19px;height:19px;flex-shrink:0;color:var(--gris)}
.mj-urg-pack strong{font-weight:700;color:var(--tinta)}
.mj-urg-stock{margin-top:.9rem;padding:.85rem 1.05rem;background:var(--crema);
  border:1px solid var(--linea);border-left:3px solid var(--jamon);border-radius:.25rem}
.mj-urg-stock-titulo{display:flex;align-items:center;gap:.45rem;font-size:.6875rem;
  font-weight:700;color:var(--jamon);letter-spacing:.14em;margin-bottom:.3rem}
.mj-urg-pulso{position:relative;width:9px;height:9px;border-radius:50%;background:var(--jamon);
  flex-shrink:0;animation:mjNucleo 1.5s ease-in-out infinite}
.mj-urg-pulso::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--jamon);animation:mjAnel 1.5s ease-out infinite;pointer-events:none}
@keyframes mjNucleo{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes mjAnel{0%{opacity:.5;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.8)}}
.mj-urg-stock p{font-size:.9375rem;color:var(--tinta)}
.mj-urg-stock strong{font-weight:700;color:var(--jamon)}

/* ---------- selector de pack ---------- */
/* Tres filas tipo radio. La fila entera es el área de clic (es una <label>),
   que en el móvil es lo único que se acierta con el dedo a la primera. */
.mj-packs{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:.6rem}
/* las filas con cinta necesitan un respiro de más: la cinta sobresale por
   arriba y si no, se echa encima del borde de la fila anterior */
.mj-pack:has(.mj-pack__cinta){margin-top:.45rem}
.mj-packs__titulo{font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta);margin-bottom:.15rem}

.mj-pack{position:relative;display:flex;align-items:center;gap:.85rem;
  padding:.9rem 1rem;border:1px solid var(--linea);border-radius:.25rem;
  background:#fff;cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s}
.mj-pack:hover{border-color:var(--gris-claro)}
/* la casilla va dibujada a mano para verse igual en todos los navegadores */
.mj-pack input{position:absolute;opacity:0;pointer-events:none}
.mj-pack__marca{flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid #cbc5ba;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.mj-pack__marca::after{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--jamon);transform:scale(0);transition:transform .15s}
.mj-pack:has(input:checked){border-color:var(--tinta);background:var(--crema);
  box-shadow:inset 0 0 0 1px var(--tinta)}
.mj-pack:has(input:checked) .mj-pack__marca{border-color:var(--jamon)}
.mj-pack:has(input:checked) .mj-pack__marca::after{transform:scale(1)}
.mj-pack input:focus-visible ~ .mj-pack__marca{box-shadow:0 0 0 3px rgba(29,29,27,.18)}

.mj-pack__txt{flex:1;min-width:0}
.mj-pack__nombre{display:block;font-size:.9375rem;font-weight:700;color:var(--tinta);
  line-height:1.25}
.mj-pack__detalle{display:block;font-size:.75rem;color:var(--gris);margin-top:.2rem}

.mj-pack__precios{flex:none;text-align:right}
.mj-pack__precio{display:block;font-size:1.05rem;font-weight:700;color:var(--tinta);
  line-height:1.2}
.mj-pack__antes{display:block;font-size:.75rem;color:var(--gris-claro);
  text-decoration:line-through}

/* la cinta se apoya en el borde de arriba de su fila */
.mj-pack__cinta{position:absolute;top:-.55rem;left:.9rem;
  background:var(--jamon);color:#fff;font-size:.625rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:.15rem}
.mj-pack__cinta--oro{background:var(--oro)}

@media(max-width:389px){
  /* pantallas muy estrechas: el precio baja a su propia línea antes que
     apretar el nombre del pack hasta partirlo */
  .mj-pack{flex-wrap:wrap;row-gap:.5rem}
  .mj-pack__precios{width:100%;text-align:left;padding-left:1.85rem}
  .mj-pack__antes{display:inline;margin-left:.4rem}
}

/* precio */
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;margin-top:1.35rem}
.price-sale{font-family:var(--serif);font-size:2.35rem;line-height:1;font-weight:700;color:var(--tinta)}
.price-base{font-size:1.05rem;color:var(--gris-claro);text-decoration:line-through}
.price-badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:.2rem;
  font-size:.8125rem;font-weight:700;background:var(--jamon);color:#fff;letter-spacing:.02em}
.price-kilo{margin-top:.45rem;font-size:.8125rem;color:var(--gris)}

.buy-btn{width:100%;padding:1.1rem 2rem;border-radius:.25rem;font-size:.9375rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--tinta);
  transition:background .18s,transform .1s}
.buy-btn:hover{background:var(--jamon)}
.buy-btn:active{transform:scale(.99)}

.payments{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.payments svg{flex:0 0 38px;width:38px;height:25px}
.footer-grid .payments{justify-content:flex-start;max-width:170px;gap:6px}
.footer-grid .payments svg{flex:0 0 34px;width:34px;height:23px}
.cart-pay.payments{flex-wrap:nowrap;gap:4px}
.cart-pay.payments svg{flex:1 1 0;min-width:0;max-width:40px;height:auto;aspect-ratio:48/32}

/* miniaturas en bucle bajo los iconos de pago: rellenan el hueco que la
   columna de la ficha deja al lado de la galería. Solo en escritorio — en
   el móvil no hay hueco que rellenar y serían vídeos de más que bajar. */
.mini-videos{display:none}
@media(min-width:1024px){
  .mini-videos{display:flex;gap:14px;justify-content:center;margin-top:.35rem}
  .mini-video{position:relative;flex:0 0 auto;width:116px;height:206px;
    border-radius:.25rem;overflow:hidden;background:var(--tinta);
    border:1px solid var(--linea);padding:0;cursor:pointer;
    transition:transform .2s ease,border-color .2s ease}
  .mini-video:hover{transform:translateY(-3px);border-color:var(--oro)}
  .mini-video video{width:100%;height:100%;object-fit:cover;pointer-events:none}
  .mini-video__sound{position:absolute;right:.4rem;bottom:.4rem;width:1.6rem;height:1.6rem;
    border-radius:9999px;background:rgba(29,29,27,.6);backdrop-filter:blur(4px);
    color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .mini-video__sound svg{width:.85rem;height:.85rem}
  .mini-video__sound .ico-sound{display:none}
  .mini-video[aria-pressed="true"] .ico-mute{display:none}
  .mini-video[aria-pressed="true"] .ico-sound{display:block}
}

/* ---------- banner ---------- */
.hero-banner{padding:1rem 1rem 2.5rem}
.hero-banner__inner{position:relative;max-width:1440px;margin:0 auto;
  border-radius:.25rem;overflow:hidden;background:var(--tinta);
  aspect-ratio:16/7}
@media(max-width:767px){.hero-banner__inner{aspect-ratio:4/5}}
.hero-banner__media{display:block;width:100%;height:100%}
/* la foto original trae texto impreso a la izquierda: se encuadra a la
   derecha para que solo se vea el plato y el rótulo lo ponga la página */
.hero-banner__media img{width:100%;height:100%;object-fit:cover;object-position:78% center;
  transition:transform 1.6s cubic-bezier(.16,.68,.4,1);will-change:transform}
@media(max-width:767px){.hero-banner__media img{object-position:center 82%}}
.has-anim .hero-banner__media img{transform:scale(1.12)}
.has-anim .hero-banner__media.is-in img{transform:scale(1)}
.hero-banner__overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.55) 42%,rgba(20,18,16,.05) 72%)}
@media(max-width:767px){
  .hero-banner__overlay{background:linear-gradient(180deg,rgba(20,18,16,.85) 0%,rgba(20,18,16,.35) 55%,rgba(20,18,16,.6) 100%)}
}
.hero-banner__content{position:absolute;inset:0;z-index:1;overflow:hidden;
  display:flex;align-items:center;padding:0 clamp(24px,6vw,88px)}
@media(max-width:767px){.hero-banner__content{align-items:flex-start;padding-top:clamp(28px,9vw,56px)}}
.hero-banner__box{color:#fff;max-width:560px}
.hero-banner__eyebrow{font-size:clamp(10px,1vw,13px);font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--oro);margin-bottom:clamp(10px,1.4vw,18px)}
.hero-banner__title{font-family:var(--serif);font-size:clamp(34px,5.4vw,72px);font-weight:700;
  line-height:1.04;letter-spacing:-.015em;margin-bottom:clamp(10px,1.3vw,18px)}
.hero-banner__title .word,.pack-title .word{display:inline-block;white-space:pre}
.hero-banner__text{font-size:clamp(13px,1.4vw,19px);line-height:1.45;color:rgba(255,255,255,.9)}

/* estado inicial de lo que se anima; se libera al entrar en pantalla. Cuelga
   de .has-anim, que solo pone el JS: si el script no corre, el texto se ve
   igual en vez de quedarse invisible. */
.has-anim [data-animate="fade-up"],
.has-anim .word{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease-out,transform .7s cubic-bezier(.16,.68,.4,1);
  transition-delay:var(--delay,0ms)}
.has-anim [data-animate="fade-up"].is-in,
.has-anim .word.is-in{opacity:1;transform:none}

/* ---------- descripción ---------- */
.description-section{padding-top:1rem;padding-bottom:2rem}
.description-box{padding-top:1.5rem;border-top:1px solid var(--linea)}
.description-box>h3{font-size:.6875rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-bottom:1rem}

/* ---------- qué llega a tu casa ---------- */
.pack-section{background:var(--tinta);padding:clamp(48px,7vw,84px) 20px}
.pack-wrap{max-width:1200px;margin:0 auto}
.pack-eyebrow{text-align:center;font-size:.6875rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--oro);margin-bottom:.85rem}
.pack-title{text-align:center;font-family:var(--serif);color:#fff;
  font-size:clamp(30px,4vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.015em;
  margin-bottom:clamp(32px,4vw,56px)}
.pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.pack-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.pack-card__media{width:100%;aspect-ratio:1/1;border-radius:.25rem;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center}
.pack-card__media img{width:100%;height:100%;object-fit:cover}
.pack-card__label{color:#fff;font-size:clamp(14px,1.2vw,18px);font-weight:600;line-height:1.25}
.pack-card__note{color:rgba(255,255,255,.55);font-size:.8125rem;line-height:1.35;margin-top:-.5rem}
@media(max-width:899px){.pack-grid{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:479px){.pack-card__label{font-size:13.5px}.pack-card__note{font-size:.75rem}}

/* ---------- preguntas frecuentes ---------- */
.faq-section{padding:clamp(48px,6vw,76px) 0;background:var(--crema)}
.faq-section h2{font-family:var(--serif);font-size:clamp(26px,3vw,38px);font-weight:700;
  color:var(--tinta);margin-bottom:2rem;text-align:center}
.faq-list{display:flex;flex-direction:column;gap:.6rem}
.faq-item{border:1px solid var(--linea);border-radius:.25rem;overflow:hidden;background:#fff}
.faq-q{width:100%;padding:1.1rem 1.15rem;display:flex;align-items:center;
  justify-content:space-between;text-align:left;gap:1rem;transition:color .15s}
.faq-q:hover{color:var(--jamon)}
.faq-q span{font-weight:600;font-size:.9375rem}
.faq-q svg{height:1.15rem;width:1.15rem;color:var(--gris);flex-shrink:0}
.faq-a{padding:0 1.15rem 1.15rem}
.faq-a p{color:var(--gris);font-size:.9375rem;line-height:1.65}

/* ---------- botón flotante ---------- */
.floating-cta{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:40;
  transition:transform .3s,opacity .3s;transform:translateY(130%);opacity:0;pointer-events:none}
.floating-cta.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
@media(min-width:1024px){.floating-cta{display:none}}
.floating-cta button{width:100%;padding:1rem 1.5rem;border-radius:.25rem;font-weight:700;
  font-size:.9375rem;letter-spacing:.04em;color:#fff;background:var(--jamon);
  box-shadow:0 10px 30px rgba(29,29,27,.28)}

/* ---------- barra de servicios ---------- */
.service-section{background:#fff;padding:clamp(40px,5vw,64px) 20px;border-top:1px solid var(--linea)}
.service-wrap{max-width:1200px;margin:0 auto}
.service-card{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.service-item{display:flex;align-items:center;gap:1rem;min-width:0}
.service-icon{width:48px;height:48px;min-width:48px;border-radius:50%;
  background:var(--crema-2);color:var(--jamon);
  display:flex;align-items:center;justify-content:center}
.service-icon svg{width:50%;height:50%}
.service-content h3{font-size:.875rem;font-weight:700;line-height:1.25;color:var(--tinta)}
.service-content p{font-size:.78rem;line-height:1.4;color:var(--gris);margin-top:.25rem}
@media(max-width:899px){
  .service-card{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .service-item{flex-direction:column;text-align:center;gap:.7rem}
}

/* ---------- vídeos (justo encima del pie) ---------- */
.videos-section{background:var(--tinta);padding:clamp(44px,6vw,72px) 0;color:#fff}
.videos-eyebrow{text-align:center;font-size:.6875rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--oro);margin-bottom:.75rem}
.videos-title{text-align:center;font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);
  font-weight:700;line-height:1.1;margin-bottom:clamp(28px,3.5vw,44px)}
.videos-rel{position:relative}
.videos-viewport{overflow:hidden}
.videos-track{display:flex;align-items:center;justify-content:center;margin-left:-.75rem;
  transition:transform .4s cubic-bezier(.25,.8,.5,1)}
@media(min-width:1024px){.videos-track{margin-left:-1.25rem}}
.video-slide{min-width:0;padding-left:.75rem;flex:0 0 72%}
@media(min-width:640px){.video-slide{flex:0 0 42%}}
@media(min-width:768px){.video-slide{flex:0 0 32%}}
@media(min-width:1024px){.video-slide{flex:0 0 25%;padding-left:1.25rem}}
.video-card{position:relative;aspect-ratio:9/16;width:100%;border-radius:.25rem;overflow:hidden;
  background:#000;box-shadow:0 20px 40px rgba(0,0,0,.35);
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px;
  transition:transform .5s,opacity .5s;transform:scale(.88);opacity:.55;cursor:pointer}
.video-card.is-active{transform:scale(1);opacity:1}
/* cuando todos caben en fila no hay "destacado": todos iguales */
.videos-rel.is-static .video-card{transform:none;opacity:1}
.video-card video{width:100%;height:100%;object-fit:cover}

.video-sound{position:absolute;right:.6rem;bottom:.6rem;z-index:2;width:2.25rem;height:2.25rem;
  border-radius:9999px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.video-sound:hover{background:rgba(0,0,0,.78);transform:scale(1.06)}
.video-sound svg{width:1.05rem;height:1.05rem}
.video-sound .ico-sound{display:none}
.video-sound[aria-pressed="true"] .ico-mute{display:none}
.video-sound[aria-pressed="true"] .ico-sound{display:block}

/* indicador de pausa: solo aparece con el vídeo parado */
.video-state{position:absolute;inset:0;z-index:1;display:flex;align-items:center;
  justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none;background:rgba(0,0,0,.25)}
.video-card.is-paused .video-state{opacity:1}
.video-state svg{width:3.25rem;height:3.25rem;color:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));margin-left:.25rem}

.video-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  height:2.5rem;width:2.5rem;border-radius:9999px;background:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.25);display:flex;align-items:center;
  justify-content:center;transition:transform .15s}
.video-arrow:hover{transform:translateY(-50%) scale(1.06)}
.video-arrow svg{height:1.2rem;width:1.2rem;color:var(--tinta)}
.video-arrow.prev{left:.25rem}
.video-arrow.next{right:.25rem}
@media(min-width:640px){.video-arrow.prev{left:.5rem}.video-arrow.next{right:.5rem}}
@media(min-width:1024px){.video-arrow{height:3rem;width:3rem}.video-arrow.prev{left:-.5rem}.video-arrow.next{right:-.5rem}}
.video-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1.5rem}
.video-dots button{height:.375rem;width:.375rem;border-radius:9999px;
  background:rgba(255,255,255,.3);transition:all .2s}
.video-dots button:hover{background:rgba(255,255,255,.55)}
.video-dots button.is-active{width:1.75rem;background:var(--oro)}
.videos-rel.is-static .video-arrow{display:none}

/* ---------- pie ---------- */
.site-footer{background:#141412;color:#fff}
.footer-inner{padding-top:3rem;padding-bottom:2.5rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2.25rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-grid h4{font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro);margin-bottom:1rem}
.footer-contact{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;color:rgba(255,255,255,.62)}
.footer-contact span{color:#fff}
.footer-contact a{transition:color .15s}
.footer-contact a:hover{color:var(--oro)}
.footer-links{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;color:rgba(255,255,255,.62)}
.footer-links button,.footer-links a{text-align:left;transition:color .15s}
.footer-links button:hover,.footer-links a:hover{color:#fff}
.footer-links .plain{cursor:default}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}
@media(min-width:768px){.footer-bottom{flex-direction:row}}
.footer-bottom p{font-size:.8125rem;color:rgba(255,255,255,.5)}
.footer-social{display:flex;align-items:center;gap:1rem}
.footer-social svg{height:1.15rem;width:1.15rem;fill:rgba(255,255,255,.5);
  transition:fill .15s;cursor:pointer}
.footer-social span:hover svg{fill:var(--oro)}

/* ---------- modal de políticas ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,18,16,.62);backdrop-filter:blur(4px)}
.modal-panel{position:relative;background:#fff;border-radius:.35rem;
  box-shadow:0 25px 60px rgba(0,0,0,.35);max-width:42rem;width:100%;max-height:82vh;
  overflow:hidden;animation:mjZoom .2s ease-out}
@keyframes mjZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--linea)}
.modal-head h2{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--tinta)}
.modal-close{padding:.5rem;border-radius:9999px;transition:background .15s}
.modal-close:hover{background:var(--crema)}
.modal-close svg{height:1.2rem;width:1.2rem;color:var(--gris)}
.modal-body{padding:1.5rem;overflow-y:auto;max-height:calc(82vh - 82px);
  color:var(--tinta-2);font-size:.875rem;line-height:1.72}
.modal-body h3{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--tinta);margin-bottom:.75rem}
.modal-body h4{font-weight:700;color:var(--tinta);margin:1.25rem 0 .5rem}
.modal-body p{margin-bottom:.75rem}
.modal-body ul{list-style:disc;padding-left:1.35rem;margin-bottom:.75rem}
.modal-body li{margin-bottom:.25rem}

/* ---------- carrito lateral ---------- */
.cart-backdrop{position:fixed;inset:0;background:rgba(20,18,16,.55);backdrop-filter:blur(4px);
  z-index:70;transition:opacity .3s;opacity:0;pointer-events:none}
.cart-backdrop.is-open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:100%;background:#fff;z-index:80;
  box-shadow:-20px 0 50px rgba(0,0,0,.2);display:flex;flex-direction:column;
  transition:transform .3s ease-out;transform:translateX(100%)}
@media(min-width:640px){.cart-drawer{max-width:27rem}}
.cart-drawer.is-open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--linea)}
.cart-head .ttl{display:flex;align-items:center;gap:.55rem}
.cart-head svg{height:1.2rem;width:1.2rem;color:var(--tinta)}
.cart-head h2{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--tinta)}
.cart-added{padding:.75rem 1.25rem;background:#f0f8f3;border-bottom:1px solid #dcefe3;
  display:flex;align-items:center;gap:.55rem}
.cart-added .dot{flex-shrink:0;width:1.4rem;height:1.4rem;border-radius:9999px;
  background:var(--verde);display:flex;align-items:center;justify-content:center}
.cart-added .dot svg{height:.9rem;width:.9rem;color:#fff}
.cart-added p{font-size:.8125rem;font-weight:600;color:#1f5c38}
.cart-ship{padding:.7rem 1.25rem;background:var(--crema);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:.55rem}
.cart-ship svg{height:.95rem;width:.95rem;color:var(--tinta-2);flex-shrink:0}
.cart-ship p{font-size:.75rem;color:var(--tinta-2)}
.cart-body{flex:1;overflow-y:auto;padding:1.1rem 1.25rem}
.cart-line{display:flex;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--linea)}
.cart-line img{width:5.5rem;height:5.5rem;object-fit:cover;border-radius:.25rem;
  border:1px solid var(--linea);flex-shrink:0}
.cart-line .info{flex:1;min-width:0}
.cart-line h3{font-weight:500;color:var(--tinta);font-size:.8125rem;line-height:1.4}
.cart-line .prices{margin-top:.55rem;text-align:right}
.cart-line .prices .old{font-size:.75rem;color:var(--gris-claro);text-decoration:line-through;line-height:1.2}
.cart-line .prices .now{font-size:.9375rem;font-weight:700;color:var(--tinta);line-height:1.3}
.cart-totals{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.cart-totals .row{display:flex;justify-content:space-between;font-size:.875rem;color:var(--tinta-2)}
.cart-totals .row b{font-weight:600}
.cart-totals .free{color:var(--verde);font-weight:700}
.cart-totals .total{display:flex;justify-content:space-between;padding-top:.75rem;
  border-top:1px solid var(--linea);font-size:1.05rem;font-weight:700;color:var(--tinta)}
.cart-foot{border-top:1px solid var(--linea);padding:1rem 1.25rem;background:#fff;
  display:flex;flex-direction:column;gap:.7rem}
.cart-checkout{width:100%;padding:.95rem 1.5rem;border-radius:.25rem;font-weight:700;
  font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--tinta);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  transition:background .18s,transform .1s}
.cart-checkout:hover{background:var(--jamon)}
.cart-checkout:active{transform:scale(.99)}
.cart-checkout svg{height:1rem;width:1rem}
.cart-secure{display:flex;align-items:center;justify-content:center;gap:.35rem;
  font-size:.75rem;color:var(--gris)}
.cart-secure svg{height:.75rem;width:.75rem}

/* ---------- oferta extra del carrito ---------- */
/* Una fila limpia, del mismo tono que el resto del carrito: miniatura,
   nombre, precio y un botón "Añadir". El recuadro de aviso amarillo con
   la casilla marcada gritaba más que el propio producto. */
.bumps{border-top:1px solid var(--linea);margin-top:1.1rem;padding-top:1.1rem}
.bumps__titulo{font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.7rem}

.bump{position:relative;display:flex;align-items:center;gap:.7rem;
  margin-bottom:.5rem;padding:.6rem .7rem;
  border:1px solid var(--linea);border-radius:.25rem;background:#fff;
  cursor:pointer;transition:border-color .15s,background-color .15s}
.bump:last-child{margin-bottom:0}
.bump:hover{background:var(--crema);border-color:var(--gris-claro)}
.bump--marcado{border-color:var(--verde);background:#f3faf5}
/* la casilla real se esconde: quien manda visualmente es el botón de la derecha */
.bump__check{position:absolute;opacity:0;pointer-events:none}

.bump__img{flex:0 0 46px;width:46px;height:46px;border-radius:.2rem;
  background:var(--crema);overflow:hidden;display:grid;place-items:center}
.bump__img img{width:100%;height:100%;object-fit:cover}

.bump__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.bump__info b{font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--tinta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bump__precio{display:flex;align-items:baseline;gap:6px}
.bump__precio em{font-style:normal;font-weight:700;font-size:.875rem;color:var(--jamon)}
.bump__precio s{color:var(--gris-claro);font-size:.75rem}

.bump__add{flex:0 0 auto;padding:6px 14px;border-radius:999px;
  border:1.5px solid var(--tinta);background:#fff;color:var(--tinta);
  font-size:.78rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s}
.bump__add i{font-style:normal}
.bump__add .add-off{display:none}
.bump:hover .bump__add{background:var(--tinta);color:#fff}
.bump--marcado .bump__add{background:var(--verde);border-color:var(--verde);color:#fff}
.bump--marcado .bump__add .add-on{display:none}
.bump--marcado .bump__add .add-off{display:inline}
.bump__check:focus-visible ~ .bump__add{box-shadow:0 0 0 3px rgba(29,29,27,.18)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mj-urg-pulso,.mj-urg-pulso::after{animation:none}
  .mj-urg-pulso::after{opacity:0}
  .hero-banner__media img,.has-anim .hero-banner__media img{transform:none;transition:none}
  .has-anim [data-animate="fade-up"],.has-anim .word{opacity:1;transform:none;transition:none}
}