:root{
  /* Paleta — solo lo que se usa en el proyecto */
  --blue:#005CFF;
  --navy:#003080;      /* azul de la estructura de la fachada */
  --cream:#FFFFFF;
  --yellow:#F8B820;
  --red:#E8401A;
  --black:#1a1a1a;
  /* Tipografía */
  --serif:'DM Serif Display',serif;
  --sans:'DM Sans',sans-serif;
  --hand:'Caveat',cursive;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--black);overflow-x:hidden;cursor:none}

#cur{position:fixed;width:12px;height:12px;background:var(--blue);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s}
#cur.big{width:44px;height:44px;background:var(--yellow);opacity:.85}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--blue);color:white;font-family:var(--sans);font-size:13px;font-weight:500;padding:13px 32px;border-radius:50px;z-index:600;transition:transform .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--navy);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--black);display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:60px}
.nav-menu{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.nav-logo{font-family:var(--serif);font-style:italic;font-size:22px;color:#fff;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-decoration:none}
.nav-cart{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.cart-n{background:#fff;color:var(--blue);border-radius:50%;width:20px;height:20px;font-size:10px;display:flex;align-items:center;justify-content:center}

/* ══ HERO FULLSCREEN — Fachada (imagen) ══ */
.hero{width:100vw;height:100vh;position:relative;overflow:hidden;background:#F8F0E3;display:flex;align-items:center;justify-content:center}
.hero-stage{position:relative;display:inline-flex;z-index:3}
.hero-img{max-width:72vw;max-height:84vh;width:auto;height:auto;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* CTA estilo CARTEL — idéntico al cartel "HOY SÍ ABRIMOS": papel crema, texto azul oscuro */
.hero-cta{
  position:absolute;left:51.5%;top:78%;
  transform:translate(-50%,-50%) rotate(-2deg);
  z-index:6;
  background:#F8EBDA;color:#13245c;
  font-family:var(--sans);font-size:15px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  padding:11px 26px;
  border:1.5px solid #13245c;border-radius:3px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .2s;
}
.hero-cta:hover{
  transform:translate(-50%,-50%) rotate(0deg) scale(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

/* DECORACIONES ANIMADAS DEL HERO — emergen desde detrás de la fachada */
.hero-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-decor svg{position:absolute;display:block;will-change:transform,opacity}
.hero-decor .d-star-1{top:32%;left:24%;width:54px;animation:dFloat1 7s ease-in-out infinite, dEmergeL 1.2s .4s cubic-bezier(.2,.8,.3,1) backwards}
.hero-decor .d-star-2{top:38%;right:23%;width:48px;animation:dFloat2 8s ease-in-out infinite, dEmergeR 1.2s .55s cubic-bezier(.2,.8,.3,1) backwards}
.hero-decor .d-heart-2{top:24%;left:42%;width:34px;animation:dFloat2 7s ease-in-out infinite, dEmergeT 1.1s 1.1s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes dFloat1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes dFloat2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(-10deg)}}
@keyframes dSpin{to{transform:rotate(360deg)}}
@keyframes dSpinSlow{to{transform:rotate(360deg)}}
@keyframes dPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.6);opacity:1}}
@keyframes dEmergeL{from{opacity:0;transform:translateX(60px) scale(.4)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes dEmergeR{from{opacity:0;transform:translateX(-60px) scale(.4)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes dEmergeT{from{opacity:0;transform:translateY(40px) scale(.4)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dEmergeB{from{opacity:0;transform:translateY(-40px) scale(.4)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .hero-decor svg{animation:none !important}
}

.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--hand);font-size:13px;color:rgba(0,92,255,.5);pointer-events:none;animation:bh 2s ease-in-out infinite}
@keyframes bh{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media (max-width:720px){
  .hero-img{max-width:90vw;max-height:70vh}
  .hero-cta{font-size:12px;padding:9px 20px;top:83%;box-shadow:0 6px 14px rgba(0,0,0,.2)}
  .hero-decor .d-star-1{width:38px}
  .hero-decor .d-star-2{width:34px}
  .hero-decor .d-heart-2{width:24px}
}

/* ══ MARQUEE ══ */
.marquee{overflow:hidden;white-space:nowrap;border-top:2px solid var(--black);border-bottom:2px solid var(--black);padding:0;background:var(--blue);position:relative}.marquee-inner{padding:12px 0;background:repeating-linear-gradient(90deg,var(--blue) 0px,var(--blue) 44px,rgba(255,255,255,.18) 44px,rgba(255,255,255,.18) 48px)}
.m-track{display:inline-block;animation:ms 26s linear infinite}
.m-track span{font-family:var(--serif);font-style:italic;font-size:20px;color:white;margin:0 40px}
.dot{font-style:normal;font-size:10px;opacity:.4;vertical-align:middle}
@keyframes ms{to{transform:translateX(-50%)}}

/* ══ SECCIÓN BASE ══ */
.section{padding:100px 80px}
.sec-eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:12px;opacity:.7}
.sec-title{font-family:var(--serif);font-style:italic;font-size:clamp(48px,6vw,80px);color:var(--blue);letter-spacing:-.03em;line-height:.9;margin-bottom:16px}
.sec-title .up{font-style:normal}
.sec-sub{font-family:var(--hand);font-size:20px;color:#888;line-height:1.5;max-width:500px;margin-bottom:60px}

/* ═══════════════════════════════════════════════════════════
   TIENDA — Imagen de la tienda con 12 huecos como FONDO,
   cards posicionadas sobre cada hueco. Aspect-ratio fijo
   1643/957 para que los huecos siempre alineen con las cards.
   ═══════════════════════════════════════════════════════════ */
.prod-section{
  background:#FFFFFF;
  border-top:2px solid #1a1a1a;
  padding:0 0 40px;
  position:relative;
  overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:auto 1400px;
}

.prod-header{
  position:relative;
  z-index:3;
  width:calc(100% - 120px);
  max-width:1400px;
  margin:0 auto;
  padding:40px 0 20px;
  background:transparent;
}
.prod-header .sec-title{font-size:clamp(36px,4.5vw,60px); margin-bottom:8px}
.prod-header .sec-eyebrow{margin-bottom:6px}

/* Nota al pie del catálogo — pequeña, sutil, lineal */
.prod-footnote{
  width:calc(100% - 120px);
  max-width:1400px;
  margin:20px auto 0;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,30,80,.4);
  border-top:1px solid rgba(0,30,80,.12);
  padding-top:18px;
  text-align:center;
}

/* Barra de filtros (encima del canvas) */
.cat-bar-wrap{
  width:calc(100% - 120px);
  max-width:1400px;
  margin:0 auto 16px;
  position:relative;
  z-index:3;
}
.cat-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  background:#FFFFFF;
  border:1.5px solid rgba(0,0,0,.08);
  border-radius:50px;
  box-shadow:0 4px 14px rgba(0,30,80,.06);
}
.cat-tabs{
  display:flex;
  align-items:center;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
  flex:1;
  min-width:0;
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#666;
  background:none;
  border:none;
  padding:7px 14px;
  border-radius:50px;
  cursor:pointer;
  transition:color .15s, background .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.cat-tab:hover{color:var(--blue)}
.cat-tab.active{color:var(--blue);background:rgba(0,92,255,.10)}
.cat-tab-icon{
  width:32px;height:32px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.12);
  background:#FFFFFF;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  color:var(--blue);
  transition:all .15s;
  flex-shrink:0;
}
.cat-tab-icon:hover{background:var(--blue);color:white;border-color:var(--blue)}

/* ═══ CANVAS: imagen de fondo + 12 cards posicionadas ═══ */
.store-canvas{
  position:relative;
  width:calc(100% - 120px);
  max-width:1400px;
  margin:0 auto 24px;
  aspect-ratio:1643/957;
  background:#FFF8E1;
  border-radius:18px;
  overflow:hidden;
  border:1.5px solid rgba(0,30,80,.08);
}
.split-illu{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.store-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Grid de las 12 cards superpuesto a los 12 huecos de la imagen */
.holes-grid{
  position:absolute;
  left:28.12%;
  top:4.91%;
  width:45.53%;
  height:72.83%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:1.5% 1.0%;
  z-index:2;
  transition:all .35s ease;
}

/* MODO FILTRADO: la ilustración de la tienda PERMANECE como lienzo,
   los productos se ocultan/aparecen dentro de los huecos sin destruir
   la composición de la fachada. */
.store-canvas.is-filtered .split-illu{opacity:1; pointer-events:none}
.store-canvas.is-filtered .holes-grid{
  /* Mantiene la posición sobre la imagen — no se reorganiza */
}
/* Cards filtradas: se desvanecen suavemente con un placeholder fantasma
   para que el hueco siga siendo visible pero quede vacío */
.store-canvas.is-filtered .mini-card{
  transition:opacity .35s ease, transform .35s ease, filter .35s ease;
}
.store-canvas.is-filtered .mini-card.is-hidden{
  opacity:.08;
  filter:grayscale(1) blur(1px);
  pointer-events:none;
  transform:scale(.92);
}
.store-canvas.is-filtered{
  background:#FAF4E6;
  transition:background .35s ease;
}
@media(max-width:900px){
  .store-canvas.is-filtered .holes-grid{
    /* En móvil mantenemos también la disposición original sobre la fachada */
  }
}

/* Card en hueco — la FOTO del producto y el nombre/precio están
   SIEMPRE visibles dentro del hueco. El hover añade énfasis (borde
   azul, sombra, ligera elevación) y revela el botón "+". */
.mini-card{
  position:relative;
  background:#FFF8E1;
  border:2px solid rgba(0,30,80,.08);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.mini-card.is-hidden{opacity:.08;filter:grayscale(1) blur(1px);pointer-events:none;transform:scale(.92);transition:opacity .35s ease, transform .35s ease, filter .35s ease}
.mini-card.hidden{display:none}

/* Imagen del producto — ocupa la mayor parte de la card */
.mini-card .mini-img{
  width:100%;
  flex:1 1 65%;
  min-height:0;
  background:#FFF8E1;
  overflow:hidden;
}
.mini-card .mini-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  font-size:0;
  color:transparent;
  text-indent:-9999px;
  border:none;
}
.mini-card:hover .mini-img img{transform:scale(1.08)}

/* Nombre del producto siempre visible debajo de la foto */
.mini-card .mini-name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:12px;
  line-height:1.1;
  color:var(--blue);
  padding:5px 7px 1px;
  background:#FFF8E1;
}

/* Descripción oculta en huecos (no cabe), visible en mobile/desktop fuera del grid */
.mini-card .mini-sub{
  display:none;
}

/* Footer: precio + botón "+" siempre visibles */
.mini-card .mini-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1px 7px 5px;
  gap:6px;
  background:#FFF8E1;
  border-radius:0 0 8px 8px;
}
.mini-card .mini-price{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:13px;
  color:var(--blue);
}
.mini-card .mini-add{
  width:20px;height:20px;
  border-radius:50%;
  border:1.5px solid var(--blue);
  background:#FFFFFF;
  color:var(--blue);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:all .15s;
}
.mini-card .mini-add:hover{background:var(--blue);color:white;transform:scale(1.15)}

/* Hover: borde azul + ligera elevación + sombra */
.mini-card:hover{
  border-color:var(--blue);
  z-index:5;
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(0,30,80,.22);
}

/* ═══════════════════════════════════════════════════════════
   PANEL DE DETALLE DEL PRODUCTO
   Inspirado en el mockup samosas:
   - Toldo amarillo/blanco arriba
   - Izquierda: nombre grande, etiquetas, datos, descripción, CTA
   - Derecha: figura naranja orgánica GIRANDO con la foto en el centro
   ═══════════════════════════════════════════════════════════ */
.product-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(960px, 95vw);
  background:#FFFFFF;
  z-index:200;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  box-shadow:-30px 0 80px rgba(0,30,80,.18);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.product-drawer.open{transform:translateX(0)}

/* Overlay oscuro detrás */
.product-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,30,60,.45);
  z-index:199;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.product-overlay.open{opacity:1;pointer-events:auto}

/* Toldo amarillo y blanco arriba — patrón rayado con borde inferior ondulado */
.drawer-awning{
  position:relative;
  height:90px;
  background:repeating-linear-gradient(
    90deg,
    #F8B820 0 64px,
    #FFFFFF 64px 128px
  );
  border-bottom:3px solid #1a1a1a;
}
/* Festón ondulado del toldo (las gotas de la parte inferior) */
.drawer-awning::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-22px;
  height:24px;
  background:
    radial-gradient(circle at 32px 0, #1a1a1a 22px, transparent 23px) 0 0/64px 24px repeat-x,
    radial-gradient(circle at 32px 0, #F8B820 18px, transparent 19px) 0 0/64px 24px repeat-x;
  background-blend-mode:normal;
}
.drawer-close{
  position:absolute;
  top:18px; right:24px;
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid #1a1a1a;
  background:#FFFFFF;
  color:#1a1a1a;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--sans);
  font-weight:700;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.drawer-close:hover{background:#1a1a1a;color:#FFFFFF;transform:rotate(90deg)}

/* Cuerpo del drawer: dos columnas */
.drawer-body{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:60px 60px 40px;
  align-items:start;
}

/* COLUMNA IZQUIERDA */
.drawer-info{display:flex;flex-direction:column;gap:22px}
.drawer-title{
  font-family:var(--sans);
  font-weight:900;
  font-size:54px;
  line-height:.95;
  letter-spacing:-.02em;
  color:#1a1a1a;
  text-transform:uppercase;
  margin:0;
}
.drawer-subtitle{
  font-family:var(--sans);
  font-weight:700;
  font-size:20px;
  letter-spacing:.02em;
  color:#1a1a1a;
  text-transform:uppercase;
  margin:-12px 0 0;
}

/* Etiquetas: círculos amarillos con icono + label */
.drawer-tags{
  display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  margin-top:4px;
}
.drawer-tag{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  color:#1a1a1a;
}
.drawer-tag-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#F8B820;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
}

/* Datos: tabla con líneas separadoras */
.drawer-data{
  display:flex;
  flex-direction:column;
  margin-top:8px;
}
.drawer-data-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1.5px solid #1a1a1a;
  font-family:var(--sans);
  font-size:14px;
}
.drawer-data-row:last-child{border-bottom:none}
.drawer-data-label{
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#1a1a1a;
}
.drawer-data-value{
  font-weight:500;
  color:#1a1a1a;
}

/* Descripción larga */
.drawer-desc{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:#1a1a1a;
  margin:8px 0 0;
}

/* CTA azul */
.drawer-cta{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--blue);
  color:#FFFFFF;
  border:none;
  border-radius:50px;
  padding:14px 22px;
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:12px;
  transition:all .2s;
  box-shadow:0 6px 18px rgba(0,92,255,.22);
}
.drawer-cta:hover{background:#1a1a1a;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.drawer-cta-arrow{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#FFFFFF;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

/* COLUMNA DERECHA: mancha naranja girando con la foto en el centro */
.drawer-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Estrellitas decorativas alrededor */
.drawer-spark{
  position:absolute;
  color:#F8B820;
  font-size:24px;
  pointer-events:none;
  animation:sparkleTwinkle 2.5s ease-in-out infinite;
}
.drawer-spark.s1{top:8%; left:5%; animation-delay:0s}
.drawer-spark.s2{top:30%; right:-2%; animation-delay:.6s; font-size:20px}
.drawer-spark.s3{bottom:35%; left:-3%; animation-delay:1.1s; font-size:18px}
.drawer-spark.s4{bottom:10%; right:8%; animation-delay:1.7s; font-size:22px}
@keyframes sparkleTwinkle{
  0%, 100%{opacity:.4; transform:scale(.85)}
  50%{opacity:1; transform:scale(1.15)}
}

/* La FIGURA NARANJA ORGÁNICA — SVG dentro de un wrapper que gira */
.drawer-blob{
  width:88%;
  height:88%;
  position:absolute;
  inset:0;
  margin:auto;
  animation:blobSpin 18s linear infinite;
}
.drawer-blob svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 18px 40px rgba(232,64,26,.25));
}
@keyframes blobSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* La FOTO del producto va por encima de la mancha (NO gira) */
.drawer-photo{
  position:relative;
  z-index:2;
  width:62%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border:4px solid #FFFFFF;
}
.drawer-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bloqueo de scroll body cuando el drawer está abierto */
body.drawer-open{overflow:hidden}

/* RESPONSIVE drawer */
@media(max-width:900px){
  .product-drawer{width:100vw}
  .drawer-body{
    grid-template-columns:1fr;
    padding:40px 28px 30px;
    gap:30px;
  }
  .drawer-stage{
    order:-1; /* la mancha sale arriba en mobile */
    max-width:340px;
    margin:0 auto;
  }
  .drawer-title{font-size:40px}
  .drawer-subtitle{font-size:17px}
  .drawer-tags{gap:12px 18px}
  .drawer-tag{font-size:13px}
}
@media(max-width:480px){
  .drawer-title{font-size:32px}
  .drawer-body{padding:32px 20px 24px}
  .drawer-awning{height:70px}
  .drawer-close{width:38px;height:38px;font-size:18px;top:14px;right:18px}
}

/* CTA inferior */
.split-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
  background:#FFFFFF;
  border:1.5px solid var(--blue);
  color:var(--blue);
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:16px 32px;
  border-radius:50px;
  cursor:pointer;
  transition:all .18s;
  box-shadow:0 4px 14px rgba(0,30,80,.06);
}
.split-cta:hover{
  background:var(--blue);
  color:white;
  box-shadow:0 12px 32px rgba(0,92,255,.28);
}
.split-cta .star{font-style:normal}
.split-cta .arrow{transition:transform .2s}
.split-cta:hover .arrow{transform:translateX(4px)}

/* ═══ RESPONSIVE ═══
   En tablet/móvil: la imagen-tienda pasa a ser banda decorativa pequeña arriba,
   y las cards se muestran en grid normal con toda la información visible. */
@media(max-width:1100px){
  .prod-header{width:calc(100% - 64px);padding:60px 0 24px}
  .prod-footnote{width:calc(100% - 64px)}
  .cat-bar-wrap{width:calc(100% - 64px);margin-bottom:18px}
  .store-canvas{
    width:calc(100% - 64px);
    aspect-ratio:auto;
    height:240px;
    margin-bottom:24px;
    overflow:visible; /* deja salir la grid */
  }
  .split-illu{
    position:relative;
    width:100%;
    height:240px;
    border-radius:18px;
    overflow:hidden;
  }
  .holes-grid{
    /* En mobile: grid normal que sale del canvas, debajo de la imagen */
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    margin-top:20px;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:none;
    gap:18px;
    z-index:auto;
  }
  /* Card en mobile/tablet: bordes visibles + toda info visible siempre */
  .mini-card{
    background:#FFFFFF;
    border:1.5px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:14px;
    box-shadow:0 4px 14px rgba(0,30,80,.06);
  }
  .mini-card .mini-img{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    border-radius:10px;
    overflow:hidden;
    opacity:1;
    background:#FFF8E1; /* cream para que no se note el placeholder gris si falta la imagen */
  }
  /* En mobile: si la imagen falla en cargar, la ocultamos completamente para que se vea solo el fondo cream */
  .mini-card .mini-img img{
    background:#FFF8E1;
  }
  .mini-card .mini-name,
  .mini-card .mini-sub,
  .mini-card .mini-foot{
    opacity:1;
    background:transparent;
    margin:0;
    padding:0;
  }
  .mini-card .mini-name{font-size:15px;margin-top:6px}
  .mini-card .mini-sub{font-size:13px;color:#777;line-height:1.3}
  .mini-card .mini-price{font-size:17px}
  .mini-card .mini-add{width:30px;height:30px;font-size:18px}
  .mini-card:hover{transform:translateY(-4px);scale:1;background:#FFFFFF;border-color:var(--blue)}
}
@media(max-width:600px){
  .prod-header{width:calc(100% - 40px);padding:60px 0 24px}
  .prod-footnote{width:calc(100% - 40px)}
  .cat-bar-wrap{width:calc(100% - 40px)}
  .store-canvas{width:calc(100% - 40px);height:auto}
  .split-illu{height:160px}
  .holes-grid{
    width:100%;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .mini-card{padding:10px;border-radius:12px}
  .mini-card .mini-name{font-size:13px}
  .mini-card .mini-sub{font-size:11px;line-height:1.2}
  .mini-card .mini-price{font-size:14px}
  .mini-card .mini-add{width:26px;height:26px;font-size:15px}
}

/* ══ BOTONES REUTILIZABLES ══ */
.btn-pill{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.03em;padding:15px 44px;border-radius:50px;cursor:pointer;text-decoration:none;display:inline-block;transition:all .18s}
.btn-white{background:white;color:var(--blue);border:2px solid white}
.btn-white:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black)}

/* ══ ABOUT — fondo azul, sello y cards de valores ══ */
.about{
  background:#012FA9;
  color:#fff;
  padding:90px 80px 100px;
  position:relative;
  overflow:hidden;
}

/* Sello Club Inútil arriba con líneas a los lados */
.about-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:50px;
}
.about-top-line{
  flex:1;
  max-width:480px;
  height:1.5px;
  background:rgba(255,255,255,.4);
}
.about-spark{
  color:var(--yellow);
  font-size:22px;
  flex-shrink:0;
}
.about-badge{
  width:200px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.about-badge img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));
}
.about-badge svg{
  width:100%;
  height:100%;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));
}

/* Layout principal: izquierda texto + abajo CTA, derecha grid 2x2 de cards */
.about-main{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:70px;
  max-width:1400px;
  margin:0 auto;
  align-items:start;
}

/* Columna izquierda */
.about-left{
  display:flex;
  flex-direction:column;
}
.about-eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.about-title{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(38px, 4.8vw, 64px);
  font-weight:400;
  line-height:1.05;
  color:#fff;
  letter-spacing:-.01em;
  margin:0;
  position:relative;
}
.about-title::after{
  content:'';
  display:block;
  width:120px;
  height:4px;
  background:var(--yellow);
  margin-top:18px;
  border-radius:2px;
}
.about-para{
  font-family:var(--sans);
  font-size:15.5px;
  color:rgba(255,255,255,.9);
  line-height:1.65;
  margin:36px 0 0;
  max-width:540px;
}
.about-para + .about-para{margin-top:22px}

/* Código de barras decorativo + barra de "100% Inútil" */
.about-barcode{
  margin-top:50px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  align-self:flex-start;
  background:#FFFFFF;
  padding:14px 26px 14px;
  border-radius:10px;
  transform:rotate(-3deg);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.about-barcode-stripes{
  display:flex;
  align-items:stretch;
  gap:2px;
  height:42px;
  margin-bottom:8px;
}
.about-barcode-stripes span{
  display:block;
  background:#1a1a1a;
  border-radius:1px;
  height:100%;
}
.about-barcode-label{
  font-family:var(--sans);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  color:#1a1a1a;
}

/* Columna derecha: grid 2x2 de cards con imagen */
.about-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.about-card{
  background:#FFFFFF;
  border-radius:14px;
  padding:18px 18px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:default;
}
.about-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
}
.about-card-img{
  width:100%;
  aspect-ratio:1/1;
  background:#F0EAD9;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:16px;
}
.about-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-card-text{
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:#1a1a1a;
  margin:0;
}
.about-card-text .line{display:block}

/* CTA inferior: cuadro amarillo con texto + sello smile */
/* Sello smile centrado al final del about */
.about-smile-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:60px;
  position:relative;
  z-index:2;
}
.about-cta-smile{
  width:140px;
  height:140px;
  flex-shrink:0;
  display:block;
  animation:smileSpin 18s linear infinite;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.22));
}
@keyframes smileSpin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* Sparkles decorativos sueltos */
.about-deco-spark{
  position:absolute;
  color:var(--yellow);
  font-size:18px;
  pointer-events:none;
  animation:aboutTwinkle 2.5s ease-in-out infinite;
}
.about-deco-spark.d1{top:60%; left:5%; animation-delay:.3s}
.about-deco-spark.d2{bottom:8%; left:35%; animation-delay:1.2s; font-size:14px}
.about-deco-spark.d3{top:30%; right:3%; animation-delay:.8s; font-size:16px}
@keyframes aboutTwinkle{
  0%, 100%{opacity:.5; transform:scale(.85)}
  50%{opacity:1; transform:scale(1.1)}
}

@media(max-width:1000px){
  .about-main{grid-template-columns:1fr; gap:50px}
}
@media(max-width:800px){
  .about{padding:60px 24px 80px}
  .about-top{gap:14px; margin-bottom:36px}
  .about-top-line{max-width:none}
  .about-badge{width:120px;height:120px}
  .about-cards{gap:12px}
  .about-card{padding:12px 12px 16px}
  .about-card-text{font-size:13px}
  .about-cta-smile{width:100px;height:100px}
  .about-smile-wrap{margin-top:40px}
}
@media(max-width:480px){
  .about-cards{grid-template-columns:1fr}
}

/* ══ MANIFESTO ══
   Poster colgado sobre fondo azul Club Inútil.
   El cartel contiene TODO el manifiesto (título, ilustración y frase).
   Se balancea sutilmente como si colgara de los clips. */
.manifesto{
  padding:100px 40px 120px;
  position:relative;
  overflow:hidden;
  background:#F2E8D5;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:auto;
}

/* Wrapper del poster: limita ancho y permite el efecto de "colgado" */
.mani-poster-wrap{
  position:relative;
  width:100%;
  max-width:680px;
  transform-origin:50% 0%;
  animation:mani-sway 7s ease-in-out infinite;
  filter:drop-shadow(0 28px 36px rgba(0,0,0,.28)) drop-shadow(0 8px 14px rgba(0,0,0,.22));
}

/* Balanceo muy sutil para que se sienta vivo */
@keyframes mani-sway{
  0%,100%{transform:rotate(-.4deg)}
  50%{transform:rotate(.4deg)}
}

/* Imagen del poster: ocupa todo el contenedor */
.mani-poster-img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Pausa la animación si el usuario prefiere menos movimiento */
@media(prefers-reduced-motion: reduce){
  .mani-poster-wrap{animation:none}
}

/* Responsive */
@media(max-width:900px){
  .manifesto{padding:70px 28px 90px}
  .mani-poster-wrap{max-width:520px}
}
@media(max-width:600px){
  .manifesto{padding:50px 20px 70px}
  .mani-poster-wrap{
    max-width:100%;
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.25));
  }
}

/* ═══════════════════════════════════════════════════════════
   DRAWER DE DETALLE DE PRODUCTO
   Diseño inspirado en el mockup samosas:
   - Toldo amarillo/blanco con festón ondulado arriba
   - Dos columnas: info (izquierda) + mancha naranja GIRANDO con foto (derecha)
   - Etiquetas circulares amarillas, tabla de datos, CTA azul
   ═══════════════════════════════════════════════════════════ */
.pd-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,20,55,.55);
  z-index:199;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.pd-backdrop.is-open{opacity:1;pointer-events:auto}

.pd-drawer{
  position:fixed;
  top:50%;
  left:50%;
  width:min(1000px, calc(100vw - 48px));
  max-height:min(620px, calc(100vh - 64px));
  background:#FFFFFF;
  z-index:200;
  opacity:0;
  transform:translate(-50%, -50%) translateY(20px) scale(.96);
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  box-shadow:0 30px 90px rgba(0,30,80,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:18px;
  pointer-events:none;
}
.pd-drawer.is-open{
  transform:translate(-50%, -50%) translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* Toldo amarillo y blanco con festón ondulado — replicado del SVG de referencia */
.pd-awning{
  position:relative;
  height:78px;
  flex-shrink:0;
  margin:0;
  overflow:visible;
  z-index:2;
}
.pd-awning svg{
  display:block;
  width:100%;
  height:100%;
}
.pd-close{
  position:absolute;
  top:18px; right:18px;
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid #1a1a1a;
  background:#FFFFFF;
  color:#1a1a1a;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--sans);
  font-weight:700;
  transition:all .25s;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.pd-close:hover{background:#1a1a1a;color:#FFFFFF;transform:rotate(90deg)}

/* Cuerpo del drawer: dos columnas */
.pd-body{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:30px 45px 32px;
  align-items:start;
}

/* COLUMNA IZQUIERDA */
.pd-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.pd-cat{
  font-family:var(--sans);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--blue);
  text-transform:uppercase;
  margin-bottom:-4px;
}
.pd-name{
  font-family:var(--sans);
  font-weight:900;
  font-size:42px;
  line-height:.95;
  letter-spacing:-.02em;
  color:#1a1a1a;
  text-transform:uppercase;
  margin:0;
}
.pd-sub{
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  color:#1a1a1a;
  text-transform:uppercase;
  margin:0;
}

/* Etiquetas circulares amarillas */
.pd-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:2px;
}
.pd-tag{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-weight:600;
  font-size:12px;
  color:#1a1a1a;
}
.pd-tag-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#F8B820;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#1a1a1a;
  flex-shrink:0;
}

/* Datos: tabla con líneas separadoras */
.pd-data{
  display:flex;
  flex-direction:column;
  margin-top:2px;
}
.pd-data-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  border-bottom:1.5px solid #1a1a1a;
  font-family:var(--sans);
  font-size:13px;
}
.pd-data-row:last-child{border-bottom:none}
.pd-data-label{
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#1a1a1a;
}
.pd-data-value{
  font-weight:500;
  color:#1a1a1a;
}

/* Descripción: solo una frase resumen */
.pd-desc{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.5;
  color:#444;
  margin:4px 0 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA azul */
.pd-add{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--blue);
  color:#FFFFFF;
  border:none;
  border-radius:50px;
  padding:12px 20px;
  font-family:var(--sans);
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:8px;
  transition:all .2s;
  box-shadow:0 6px 18px rgba(0,92,255,.22);
}
.pd-add:hover{background:#1a1a1a;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.pd-add-arrow{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#FFFFFF;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

/* COLUMNA DERECHA: mancha naranja GIRANDO con foto en el centro */
.pd-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Estrellitas decorativas — cada una orbita alrededor del centro */
.pd-spark{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  pointer-events:none;
  z-index:3;
  transform-origin:0 0;
}
.pd-spark::before{
  content:'✦';
  position:absolute;
  color:#F8B820;
  font-size:26px;
  display:block;
  animation:pdSparkleTwinkle 2.5s ease-in-out infinite;
}
/* Cada estrellita se posiciona a un radio distinto y orbita */
.pd-spark.s1{animation:pdOrbit 14s linear infinite}
.pd-spark.s1::before{left:-150px; top:-160px; animation-delay:0s}

.pd-spark.s2{animation:pdOrbit 18s linear infinite reverse; animation-delay:-3s}
.pd-spark.s2::before{left:170px; top:-80px; font-size:22px; animation-delay:.6s}

.pd-spark.s3{animation:pdOrbit 20s linear infinite; animation-delay:-7s}
.pd-spark.s3::before{left:-180px; top:120px; font-size:20px; animation-delay:1.1s}

.pd-spark.s4{animation:pdOrbit 16s linear infinite reverse; animation-delay:-5s}
.pd-spark.s4::before{left:160px; top:150px; font-size:24px; animation-delay:1.7s}

@keyframes pdOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes pdSparkleTwinkle{
  0%, 100%{opacity:.45; transform:scale(.85)}
  50%{opacity:1; transform:scale(1.15)}
}

/* MANCHA NARANJA ORGÁNICA — SVG que gira en bucle infinito */
.pd-blob{
  width:92%;
  height:92%;
  position:absolute;
  inset:0;
  margin:auto;
  animation:pdBlobSpin 22s linear infinite;
  z-index:1;
}
.pd-blob svg{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 18px 40px rgba(232,64,26,.32));
}
@keyframes pdBlobSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* FOTO del producto: va POR ENCIMA de la mancha en círculo, NO gira */
.pd-photo{
  position:relative;
  z-index:2;
  width:54%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:transparent;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  border:4px solid #FFFFFF;
  cursor:zoom-in;
  transition:transform .25s ease;
}
.pd-photo:hover{transform:scale(1.03)}

/* Lightbox: foto expandida en pantalla completa al hacer click */
.pd-lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,15,30,.92);
  z-index:300;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  cursor:zoom-out;
}
.pd-lightbox.is-open{opacity:1;pointer-events:auto}
.pd-lightbox img{
  max-width:90vw;
  max-height:90vh;
  width:auto;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  transform:scale(.94);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.pd-lightbox.is-open img{transform:scale(1)}
.pd-lightbox-close{
  position:absolute;
  top:24px; right:24px;
  width:48px; height:48px;
  border-radius:50%;
  border:none;
  background:#FFFFFF;
  color:#1a1a1a;
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition:transform .25s;
}
.pd-lightbox-close:hover{transform:rotate(90deg)}
.pd-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Body scroll lock cuando drawer está abierto: position fixed conserva la posición exacta */
body.pd-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
  padding-right:var(--scrollbar-w, 0px);
}

/* RESPONSIVE */
@media(max-width:900px){
  .pd-backdrop{padding:16px 12px}
  .pd-drawer{
    width:100%;
    max-height:calc(100vh - 32px);
    border-radius:8px;
  }
  .pd-body{
    grid-template-columns:1fr;
    padding:20px 26px 30px;
    gap:30px;
  }
  .pd-awning{height:72px; margin-bottom:14px}
  .pd-stage{
    order:-1;
    width:260px;
    height:260px;
    max-width:90%;
    aspect-ratio:auto;
    margin:0 auto;
    position:relative;
    overflow:visible;
  }
  /* En móvil, las estrellitas orbitan más cerca */
  .pd-spark.s1::before{left:-110px; top:-115px}
  .pd-spark.s2::before{left:120px; top:-60px}
  .pd-spark.s3::before{left:-125px; top:85px}
  .pd-spark.s4::before{left:115px; top:105px}
  .pd-name{font-size:38px}
  .pd-sub{font-size:15px}
  .pd-tags{gap:12px 18px}
  .pd-tag{font-size:12px}
  .pd-tag-icon{width:26px;height:26px;font-size:12px}
}
@media(max-width:480px){
  .pd-name{font-size:30px}
  .pd-body{padding:32px 20px 24px}
  .pd-awning{height:70px}
  .pd-close{width:38px;height:38px;font-size:16px;top:16px;right:18px}
  .pd-data-row{font-size:13px;padding:11px 0}
  .pd-stage{width:240px}
}

/* ══ BLOG — rediseñado tipo "Club Inutil" referencia ══ */
.blog{
  background:#F9F1E3;
  padding:50px 60px 70px;
  position:relative;
  overflow:hidden;
}

/* HERO del blog: título gigante + mano dibujando a la derecha */
.blog-hero{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:center;
  max-width:1400px;
  margin:0 auto 32px;
}
.blog-hero-text{
  max-width:680px;
}
.blog-eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#1a1a1a;
  margin-bottom:12px;
  display:block;
}
.blog-hero-title{
  font-family:var(--sans);
  font-weight:900;
  font-size:clamp(42px, 6vw, 78px);
  line-height:.9;
  letter-spacing:-.03em;
  color:#1a1a1a;
  text-transform:uppercase;
  margin:0 0 16px;
}
.blog-hero-sub{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  color:#1a1a1a;
  max-width:430px;
  margin:0;
}

/* Ilustración del teléfono Club Inútil en el hero del blog */
.blog-hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
}
.blog-hero-art img{
  width:auto;
  max-width:300px;
  max-height:320px;
  height:auto;
  display:block;
  animation:phoneFloat 5s ease-in-out infinite;
}
@keyframes phoneFloat{
  0%, 100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
.blog-spark{
  position:absolute;
  color:var(--yellow);
  font-size:24px;
  pointer-events:none;
  animation:bSparkTwinkle 2.5s ease-in-out infinite;
}
.blog-spark.s1{top:10%; left:8%; animation-delay:0s}
.blog-spark.s2{top:28%; right:5%; animation-delay:.6s; font-size:20px}
.blog-spark.s3{bottom:18%; right:15%; animation-delay:1.2s; font-size:22px}
.blog-spark.s4{top:55%; left:0%; animation-delay:1.7s; font-size:18px}
@keyframes bSparkTwinkle{
  0%, 100%{opacity:.5; transform:scale(.85)}
  50%{opacity:1; transform:scale(1.15)}
}

/* Filtros pill */
.blog-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:1400px;
  margin:0 auto 40px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.blog-filter{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:50px;
  border:1.5px solid #1a1a1a;
  background:transparent;
  color:#1a1a1a;
  cursor:pointer;
  transition:all .2s;
}
.blog-filter:hover{background:#1a1a1a; color:#FFFFFF}
.blog-filter.is-active{background:var(--yellow); border-color:var(--yellow); color:#1a1a1a}

/* Grid 4 columnas (8 posts = 4×2) — cards compactas */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  max-width:1300px;
  margin:0 auto;
}

/* Card más pequeña */
.blog-card{
  background:#FFFFFF;
  border:1.5px solid #1a1a1a;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,30,80,.10);
}
.blog-card-img{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#F0EAD9;
  position:relative;
}
.blog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}

.blog-card-body{
  padding:12px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.blog-card-cat{
  font-family:var(--sans);
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
}
.blog-card-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  line-height:1.25;
  color:#1a1a1a;
  margin:0;
  flex:1;
}
.blog-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}
.blog-card-date{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  color:#1a1a1a;
}
.blog-card-arrow{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--yellow);
  color:#1a1a1a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  transition:transform .25s ease;
}
.blog-card:hover .blog-card-arrow{transform:translateX(3px)}

@media(max-width:1100px){
  .blog-grid{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:800px){
  .blog{padding:60px 24px 80px}
  .blog-hero{grid-template-columns:1fr; gap:32px; text-align:center}
  .blog-hero-text{margin:0 auto}
  .blog-hero-art{order:-1; min-height:200px}
  .blog-hero-art img{max-width:220px}
  .blog-grid{grid-template-columns:repeat(2, 1fr); gap:14px}
}
@media(max-width:480px){
  .blog-grid{grid-template-columns:1fr}
}

/* ══ ARTÍCULO BLOG — overlay fullscreen inspirado en About ══ */
.article-overlay{
  position:fixed;
  inset:0;
  background:#FBF6EC;
  color:#1a1a1a;
  z-index:1000;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.article-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .4s ease, visibility 0s linear 0s;
}
body.article-open{overflow:hidden}

.article-close{
  position:fixed;
  top:24px;
  right:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#1a1a1a;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#FFFFFF;
  cursor:pointer;
  z-index:1010;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .2s, background .2s, color .2s;
}
.article-close:hover{transform:rotate(90deg) scale(1.05); background:var(--yellow); color:#1a1a1a}

.article-inner{
  max-width:760px;
  margin:0 auto;
  padding:80px 32px 100px;
  position:relative;
}

/* Estrellitas decorativas */
.article-deco-spark{
  position:absolute;
  color:var(--blue);
  font-size:20px;
  pointer-events:none;
  opacity:.45;
  animation:bSparkTwinkle 3s ease-in-out infinite;
}
.article-deco-spark.s1{top:90px; left:30px}
.article-deco-spark.s2{top:200px; right:60px; animation-delay:1s}
.article-deco-spark.s3{top:50%; left:5%; animation-delay:.5s; font-size:18px}
.article-deco-spark.s4{top:60%; right:8%; animation-delay:1.5s}

/* Sello arriba (igual que about-top) */
.article-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-bottom:50px;
}
.article-top-line{
  flex:1;
  max-width:380px;
  height:1.5px;
  background:rgba(0,0,0,.15);
}
.article-top .about-spark{
  color:var(--yellow);
  font-size:22px;
}
.article-badge{
  width:140px;
  flex-shrink:0;
}
.article-badge img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.18));
}

/* Eyebrow + titular grande */
.article-eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:18px;
  display:block;
  text-align:center;
}
.article-title{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(34px, 5vw, 58px);
  font-weight:400;
  line-height:1.08;
  color:#1a1a1a;
  letter-spacing:-.01em;
  margin:0 auto 16px;
  max-width:680px;
  text-align:center;
}
.article-meta{
  font-family:var(--sans);
  font-size:13px;
  color:rgba(0,0,0,.55);
  text-align:center;
  margin-bottom:40px;
  letter-spacing:.04em;
}
.article-meta strong{color:var(--blue); font-weight:700}

/* Hero image — se ve completa, sin recortes */
.article-hero-img{
  width:100%;
  max-width:560px;
  margin:0 auto 48px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}
.article-hero-img img{
  width:100%;
  height:auto;
  display:block;
}

/* Contenido en una columna editorial */
.article-body{
  display:block;
  max-width:680px;
  margin:0 auto;
}
.article-lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:24px;
  line-height:1.45;
  color:#1a1a1a;
  margin:0 0 32px;
  padding-left:20px;
  border-left:4px solid var(--yellow);
}
.article-content{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  color:rgba(26,26,26,.88);
}
.article-content p{margin:0 0 22px}
.article-content p:last-child{margin-bottom:0}
.article-content em{color:var(--blue); font-style:italic; font-weight:600}

/* Sello smile al final */
.article-footer{
  display:flex;
  justify-content:center;
  margin-top:72px;
  padding-top:48px;
  border-top:1px solid rgba(0,0,0,.1);
}
.article-footer img{
  width:120px;
  height:120px;
  animation:smileSpin 18s linear infinite;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.22));
}

@media(max-width:800px){
  .article-inner{padding:80px 24px 60px}
  .article-body{grid-template-columns:1fr; gap:30px}
  .article-lead{font-size:18px}
  .article-content{font-size:15px}
}

/* ══ FOOTER ══ */
/* ══ FOOTER ══ */
footer{background:#012FA9;border-top:1.5px solid var(--black);padding:0 80px;position:relative;overflow:hidden;color:#fff}

/* Headline + silla en la misma fila */
.foot-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  padding:60px 0 50px;
  border-bottom:1px solid rgba(255,255,255,.15);
  position:relative;
  z-index:2;
}
.foot-headline{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(36px,6vw,88px);
  color:#fff;
  letter-spacing:-.04em;
  line-height:.92;
  margin:0;
}
.foot-chair{
  width:clamp(220px,26vw,360px);
  height:auto;
  display:block;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:-30px;
  align-self:end;
}

.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:48px 0;border-bottom:1px solid rgba(255,255,255,.15);position:relative;z-index:2}
@media(max-width:800px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;text-align:center;gap:24px}
  .foot-chair{margin:0 auto -20px;width:60vw;max-width:240px}
}
.foot-brand{font-family:var(--serif);font-style:italic;font-size:24px;color:#fff;margin-bottom:10px}
.foot-desc{font-family:var(--hand);font-size:15px;color:rgba(255,255,255,.75);line-height:1.6;max-width:250px;margin-bottom:22px}
.foot-socials{display:flex;gap:8px}
.sp{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;border-radius:50px;border:1.5px solid rgba(255,255,255,.5);background:transparent;cursor:pointer;text-decoration:none;color:#fff;transition:all .15s}
.sp:hover{background:#fff;border-color:#fff;color:#012FA9}
.foot-col-title{font-family:var(--sans);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-bottom:18px}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-links a{font-size:14px;color:rgba(255,255,255,.9);text-decoration:none;transition:color .15s}
.foot-links a:hover{color:var(--yellow)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:24px 0;font-family:var(--sans);font-size:12px;color:rgba(255,255,255,.55);position:relative;z-index:2}
.foot-bottom a{color:var(--yellow);text-decoration:none;font-style:italic}

/* CART */
/* ════════ CARRITO LATERAL (drawer derecho) ════════ */
body.cart-open{overflow:hidden}

/* Overlay con fondo azul ilustrado (cuando está abierto) */
.cart-overlay{
  position:fixed;
  inset:0;
  z-index:1300;
  background:rgba(0,30,80,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  display:block;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.cart-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .3s ease, visibility 0s linear 0s;
}

/* Fondo ilustrado de la máquina (visible solo en el área del drawer) */
.cart-bg{
  position:fixed;
  top:0; right:0; bottom:0;
  width:440px;
  max-width:100vw;
  background:#012FA9 url('../img/cart-bg.jpg') center center / cover no-repeat;
  z-index:1301;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.cart-overlay.is-open .cart-bg{transform:translateX(0)}

/* Carta crema con forma de arco arriba */
.cart-card{
  position:fixed;
  top:32px;
  right:24px;
  bottom:32px;
  width:392px;
  max-width:calc(100vw - 48px);
  background:#FAF4E6;
  border:none;
  display:flex;
  flex-direction:column;
  padding:0;
  border-radius:160px 160px 24px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateX(calc(100% + 32px));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  font-family:var(--sans);
  text-align:center;
  z-index:1302;
  visibility:inherit;
  overflow:hidden;
}
.cart-overlay.is-open .cart-card{transform:translateX(0)}

/* Cabecera con botón cerrar circular arriba + título */
.cart-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:34px 36px 18px;
  flex-shrink:0;
  position:relative;
}
.cart-close{
  width:44px;
  height:44px;
  border-radius:50%;
  background:transparent;
  border:2px solid var(--blue);
  color:var(--blue);
  font-size:18px;
  font-weight:300;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  flex-shrink:0;
  margin-bottom:24px;
  line-height:1;
}
.cart-close:hover{background:var(--blue); color:#FAF4E6; transform:rotate(90deg)}
.cart-header-title{
  font-family:var(--sans);
  font-weight:900;
  font-size:24px;
  color:var(--blue);
  letter-spacing:.01em;
  margin:0 0 4px;
  text-transform:uppercase;
  line-height:1.1;
}
.cart-header-sub{
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--blue);
  opacity:.7;
  margin:0;
  font-weight:400;
}
.cart-header-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:18px 0 0;
  width:100%;
}
.cart-header-divider::before,
.cart-header-divider::after{
  content:"";
  flex:1;
  max-width:60px;
  height:1px;
  background:rgba(0,30,80,.25);
}
.cart-header-divider .spark{
  color:var(--yellow);
  font-size:14px;
}

/* Contenido scrolleable */
.cart-body{
  flex:1;
  overflow-y:auto;
  padding:8px 30px 14px;
}

/* Estado vacío */
.cart-empty{
  padding:18px 0;
  text-align:center;
}
.cart-empty-spark{
  color:var(--yellow);
  font-size:18px;
  display:block;
  margin:6px 0 14px;
}
.cart-empty-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  color:var(--blue);
  margin:0 0 14px;
}
.cart-empty-text{
  display:block;
  font-family:var(--sans);
  font-size:12.5px;
  color:#555;
  line-height:1.5;
  margin:0 auto 18px;
  max-width:240px;
}
.cart-divider, .cart-bored, .cart-summary{display:none}
.cart-explore{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--blue);
  color:#FAF4E6;
  text-decoration:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
  padding:14px 24px;
  border:none;
  border-radius:40px;
  margin-top:8px;
  cursor:pointer;
  transition:all .2s;
}
.cart-explore:hover{background:#001f75; transform:translateY(-1px)}
.cart-explore-star{color:var(--yellow); font-size:14px}
.cart-empty-bored{
  display:block;
  font-family:var(--sans);
  font-size:11.5px;
  color:var(--blue);
  margin-top:14px;
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:.65;
  cursor:pointer;
}

/* Items del carrito */
.cart-items{
  display:flex;
  flex-direction:column;
  text-align:left;
}
.cart-item{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(0,30,80,.1);
}
.cart-item:first-child{padding-top:6px}
.cart-item:last-child{border-bottom:none}
.cart-item-icon{
  width:54px;height:54px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid rgba(0,30,80,.15);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cart-item-icon svg{width:55%;height:55%}
.cart-item-icon img{width:100%;height:100%;object-fit:cover;display:block}
.cart-item-info{flex:1; min-width:0}
.cart-item-name{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--blue);margin-bottom:4px;line-height:1.3}
.cart-item-price{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--blue)}
.cart-item-rm{
  background:none;border:none;cursor:pointer;
  color:rgba(0,30,80,.35);font-size:14px;
  transition:color .15s;
  width:28px;height:28px;
}
.cart-item-rm:hover{color:#E8401A}

/* Footer del drawer con resumen estilo factura + total + botón amarillo */
.cart-foot{
  padding:14px 32px 26px;
  flex-shrink:0;
  background:transparent;
}
.cart-summary-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:12px;
  text-align:left;
}
.cart-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--sans);
  font-size:12.5px;
  color:#444;
}
.cart-summary-row .row-label{
  font-weight:500;
}
.cart-summary-row .row-value{
  font-weight:600;
  color:var(--blue);
}
.cart-summary-row.is-unknown .row-value{
  font-style:italic;
  font-weight:500;
  opacity:.7;
}
.cart-foot-divider{
  border:none;
  border-top:1.5px dashed rgba(0,30,80,.3);
  margin:8px 0 12px;
}
.cart-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:0 0 18px;
}
.cart-total-label{
  font-family:var(--sans);
  font-weight:900;
  font-size:22px;
  color:var(--blue);
  letter-spacing:.02em;
  text-transform:uppercase;
  font-style:normal;
}
.cart-total-amount{
  font-family:var(--sans);
  font-weight:900;
  font-size:22px;
  color:var(--blue);
  font-style:normal;
}
.cart-checkout{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:var(--yellow);
  color:var(--blue);
  border:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.01em;
  padding:16px 22px;
  border-radius:50px;
  cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 6px 18px rgba(245,200,66,.4);
}
.cart-checkout:hover{background:#f2bb2b; transform:translateY(-1px); box-shadow:0 8px 22px rgba(245,200,66,.55)}
.cart-checkout-smile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--blue);
  color:var(--yellow);
  font-size:13px;
  flex-shrink:0;
}

@media(max-width:520px){
  .cart-card{width:calc(100vw - 32px); right:16px; left:16px; max-width:none; top:16px; bottom:16px; border-radius:120px 120px 20px 20px}
  .cart-bg{width:100vw}
  .cart-header{padding:28px 24px 14px}
  .cart-body{padding:6px 22px 12px}
  .cart-foot{padding:12px 24px 22px}
}

/* ════════ CHECKOUT — Fullscreen con fondo azul ilustrado, layout compacto ════════ */
body.checkout-open{overflow:hidden}

.checkout-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  overflow-y:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:32px 20px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.checkout-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .4s ease, visibility 0s linear 0s;
}

/* Fondo azul con patrón vectorial (sin imagen pixelada) */
.checkout-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(245,200,66,.18) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,92,255,.4) 0, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,.08) 0, transparent 45%),
    linear-gradient(180deg, #012FA9 0%, #001F75 100%);
  z-index:-1;
}
.checkout-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.12) 1.2px, transparent 1.4px),
    radial-gradient(circle, rgba(245,200,66,.18) 1px, transparent 1.2px);
  background-size: 28px 28px, 44px 44px;
  background-position: 0 0, 14px 14px;
  opacity:.55;
  mix-blend-mode:screen;
}
.checkout-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,200,66,.08) 0, transparent 60%);
  pointer-events:none;
}

/* Carta crema — centrada y con esquinas superiores muy redondeadas */
.checkout-card{
  background:#FAF4E6;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  border-radius:28px 28px 20px 20px;
  padding:32px 44px 26px;
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  font-family:var(--sans);
}

.checkout-close{
  position:fixed;
  top:20px;
  right:20px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#FFFFFF;
  border:none;
  color:#012FA9;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .2s, background .2s;
}
.checkout-close:hover{background:var(--yellow); transform:rotate(90deg)}

.checkout-hero{
  text-align:center;
  margin-bottom:20px;
}
.checkout-spark{
  color:var(--yellow);
  font-size:18px;
  display:block;
  margin-bottom:4px;
}
.checkout-title{
  font-family:var(--sans);
  font-weight:900;
  font-size:26px;
  color:#012FA9;
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.checkout-sub{
  font-family:var(--sans);
  font-size:13.5px;
  color:#012FA9;
  margin:0;
  opacity:.85;
}

/* Grid principal — sidebar sticky */
.checkout-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:32px;
  align-items:start;
}

/* Form */
.checkout-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.co-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.co-section-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
  flex-wrap:wrap;
}
.co-section-icon{
  display:none !important;
}
.co-secure-icon{
  width:22px;
  height:22px;
}
.co-section-title{
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  color:var(--yellow);
  margin:0;
  letter-spacing:0;
}
.co-section-meta{
  font-size:11.5px;
  color:#666;
  margin-left:auto;
}
.co-section-meta a{color:#012FA9; font-weight:600; text-decoration:none}
.co-section-meta a:hover{text-decoration:underline}

.co-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.co-row.full{grid-template-columns:1fr}

.co-section input[type="text"],
.co-section input[type="email"],
.co-section input[type="tel"],
.co-section select{
  width:100%;
  padding:9px 16px;
  border:1px solid rgba(1,47,169,.18);
  border-radius:26px;
  background:#FFFFFF;
  font-family:var(--sans);
  font-size:13.5px;
  color:#012FA9;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.co-section input:focus,
.co-section select:focus{
  border-color:#012FA9;
  box-shadow:0 0 0 3px rgba(1,47,169,.08);
}
.co-section input::placeholder{color:#999}

.co-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 14px;
  border:1px solid rgba(1,47,169,.18);
  border-radius:12px;
  background:#FFFFFF;
  cursor:pointer;
  transition:border-color .15s;
}
.co-option:has(input:checked){
  border-color:#012FA9;
  border-width:1.5px;
}
.co-option input[type="radio"]{
  margin-top:2px;
  accent-color:#012FA9;
  flex-shrink:0;
}
.co-option-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.co-option-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:13.5px;
  color:#012FA9;
}
.co-option-sub{
  font-family:var(--sans);
  font-size:12px;
  color:#666;
}
.co-option-price{
  font-family:var(--sans);
  font-weight:600;
  font-size:13.5px;
  color:#012FA9;
  align-self:center;
}
.co-free{color:#1A9E4A}

.co-option-card .co-option-content{gap:10px}
.co-card-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.co-card-inputs input{
  padding:7px 12px;
  border:1px solid rgba(1,47,169,.18);
  border-radius:8px;
  font-family:var(--sans);
  font-size:12.5px;
  background:#fff;
  color:#012FA9;
  outline:none;
}
.co-card-inputs input:focus{border-color:#012FA9}

.co-terms{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
  color:#666;
}
.co-terms input{margin-top:3px; accent-color:#012FA9}
.co-terms a{color:#012FA9; font-weight:600; text-decoration:underline}

.co-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--yellow);
  color:#1a1a1a;
  border:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:14.5px;
  padding:13px 32px;
  border-radius:50px;
  cursor:pointer;
  margin-top:4px;
  align-self:flex-start;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 6px 18px rgba(245,200,66,.4);
}
.co-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(245,200,66,.5);
}

/* Resumen sticky a la derecha */
.checkout-summary{
  background:transparent;
  position:sticky;
  top:24px;
  align-self:start;
}
.co-items{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:10px 0 0;
}
.co-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.co-item-img{
  width:60px;height:60px;
  border-radius:10px;
  background:#fff;
  border:1.5px solid rgba(1,47,169,.18);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.co-item-img svg{width:60%;height:60%}
.co-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.co-item-info{flex:1; min-width:0}
.co-item-name{
  font-family:var(--sans);
  font-weight:700;
  font-size:13.5px;
  color:#012FA9;
  margin:0 0 2px;
  line-height:1.3;
}
.co-item-qty{
  font-family:var(--sans);
  font-size:11.5px;
  color:#666;
}
.co-item-price{
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  color:#012FA9;
  align-self:flex-start;
}
.co-line{
  border-top:1px solid rgba(1,47,169,.15);
  margin:16px 0 14px;
}
.co-totals{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.co-total-row{
  display:flex;
  justify-content:space-between;
  font-family:var(--sans);
  font-size:13px;
  color:#1a1a1a;
}
.co-total-final{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--sans);
}
.co-total-final span:first-child{
  font-size:16px;
  font-weight:600;
  color:#1a1a1a;
}
.co-total-final span:last-child{
  font-size:22px;
  font-weight:900;
  color:#012FA9;
}

.co-secure{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:18px;
  padding:14px;
  background:#FFFFFF;
  border-radius:12px;
  border:1px solid rgba(1,47,169,.15);
}
.co-secure-icon{
  width:22px;
  height:22px;
  color:var(--yellow);
  flex-shrink:0;
  margin-top:1px;
}
.co-secure strong{
  display:block;
  font-family:var(--sans);
  font-weight:700;
  font-size:13.5px;
  color:#012FA9;
  margin-bottom:2px;
}
.co-secure p{
  font-family:var(--sans);
  font-size:12px;
  color:#666;
  line-height:1.4;
  margin:0;
}

/* TABLET */
@media(max-width:1024px){
  .checkout-card{padding:44px 36px 32px; margin:20px}
  .checkout-title{font-size:26px}
  .checkout-grid{gap:28px}
}
/* MÓVIL */
@media(max-width:780px){
  .checkout-card{padding:40px 22px 28px; margin:16px 12px}
  .checkout-title{font-size:24px}
  .checkout-grid{grid-template-columns:1fr; gap:28px}
  .checkout-summary{position:static}
  .co-row{grid-template-columns:1fr}
  .co-section-meta{margin-left:0; width:100%}
  .checkout-close{top:14px; right:14px; width:38px; height:38px}
}
@media(max-width:480px){
  .co-card-inputs{grid-template-columns:1fr}
  .checkout-card{padding:36px 18px 24px}
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.vis{opacity:1;transform:none}

@media(max-width:800px){
  nav,.section,.manifesto,footer{padding-left:20px;padding-right:20px}
}

/* ═══════════════════════════════════════════════════════════
   MENÚ OVERLAY FULLSCREEN — imagen completa + hotspots clickables
   Las áreas clickables se posicionan en porcentaje sobre los 3 iconos
   visibles en la imagen.
   ═══════════════════════════════════════════════════════════ */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s cubic-bezier(.4,0,.2,1), visibility 0s linear .35s;
  overflow:hidden;
}
.menu-overlay.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);
}

/* Botón cerrar — esquina superior derecha */
.menu-close{
  position:absolute;
  top:32px;
  right:32px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#FFFFFF;
  border:2px solid #1a1a1a;
  color:#1a1a1a;
  font-size:20px;
  font-weight:300;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:all .2s;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.menu-close:hover{
  background:#1a1a1a;
  color:#FFFFFF;
  transform:rotate(90deg);
}

/* Wrapper de la imagen + hotspots — mantiene proporción de la imagen */
.menu-image-wrap{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  /* La imagen es 1400×933, ratio 3:2 aprox */
  aspect-ratio:1400/933;
  max-height:90vh;
}
.menu-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  user-select:none;
  pointer-events:none;
}

/* Hotspots clickables — posicionados en porcentaje sobre cada icono */
.menu-hotspot{
  position:absolute;
  top:35%;
  height:60%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
  cursor:pointer;
  text-decoration:none;
  border-radius:12px;
  transition:background .25s, transform .25s;
  background:rgba(0,92,255,0);
}
.menu-hotspot:hover{
  background:rgba(0,92,255,.08);
  transform:scale(1.03);
}
.menu-hotspot-label{
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  background:#FFFFFF;
  border:1.5px solid var(--blue);
  padding:10px 22px;
  border-radius:50px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s, transform .25s, background .25s, color .25s;
  pointer-events:none;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,92,255,.15);
}
.menu-hotspot:hover .menu-hotspot-label{
  opacity:1;
  transform:translateY(0);
  background:var(--blue);
  color:#FFFFFF;
}

/* Fallback: cuando la imagen del menú no carga, los hotspots se reorganizan como botones grandes en columna centrada */
.menu-image-wrap.no-image{
  aspect-ratio:auto;
  height:auto;
  max-height:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:60px 20px;
}
.menu-image-wrap.no-image::before{
  content:'CLUB INÚTIL';
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(40px,8vw,80px);
  color:var(--blue);
  margin-bottom:20px;
  letter-spacing:-.02em;
}
.menu-image-wrap.no-image .menu-image{display:none}
.menu-image-wrap.no-image .menu-hotspot{
  position:relative;
  top:auto; left:auto; width:auto; height:auto;
  padding:0;
}
.menu-image-wrap.no-image .menu-hotspot .menu-hotspot-label{
  opacity:1;
  transform:none;
  font-size:18px;
  padding:18px 40px;
}

/* Posiciones de los 3 hotspots según los iconos de la imagen */
.menu-hotspot-shop{
  left:5%;
  width:27%;
}
.menu-hotspot-about{
  left:37%;
  width:25%;
}
.menu-hotspot-blog{
  left:66%;
  width:30%;
}

/* Body scroll lock */
body.menu-open{overflow:hidden}

/* Responsive */
@media(max-width:800px){
  .menu-image-wrap{
    max-height:80vh;
    padding:0 12px;
  }
  .menu-close{top:16px;right:16px;width:40px;height:40px;font-size:16px}
  .menu-hotspot-label{font-size:10px;padding:6px 14px}
}