/* ============================================================
   MOKOMO · mokomocheesecake.com
   Base limpia y moderna (v1) + toques artesanales (sello + Fraunces)
   Paleta oficial del Kit de Marca (2026-07)
   ============================================================ */

/* ---------- Fuentes autoalojadas (variable, subset latin) ---------- */
@font-face{
  font-family:"Fraunces";
  src:url("../assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../assets/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Nunito Sans";
  src:url("../assets/fonts/nunito-sans-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Paleta oficial */
  --lila:#B380C3;        /* marca: display grande y decoración (3.1:1 — nunca texto pequeño) */
  --lila-osc:#7E4F91;    /* acción: botones, enlaces (6.1:1 sobre blanco) */
  --lila-hover:#6C4380;
  --lila-suave:#F1E7F6;  /* fondos de sección, chips */
  --crema:#F7F2EC;       /* fondo base */
  --oro:#C89B5A;         /* acento cálido decorativo */
  --oro-osc:#9F6128;     /* oro como texto */
  --tinta:#1D1817;       /* texto principal */
  --tenue:#665C6B;       /* texto secundario */
  --matcha:#C9D94E;      /* solo dots/decoración */
  --blanco:#fff;
  --borde:#E7DEEA;

  /* Tipografía */
  --f-display:"Fraunces",Georgia,serif;
  --f-texto:"Nunito Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --fs-h1:clamp(2.2rem,5vw,3.3rem);
  --fs-h2:clamp(1.65rem,3.6vw,2.3rem);

  /* Geometría */
  --radio:16px;
  --radio-pill:999px;
  --sombra:0 10px 30px rgba(126,79,145,.10);
  --maxw:1120px;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-texto);color:var(--tinta);background:var(--crema);
  line-height:1.65;font-size:1.04rem;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;}
h1 em,h2 em{font-style:italic;font-weight:600;color:var(--lila-osc);position:relative;white-space:nowrap;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
ul{list-style:none;}
:focus-visible{outline:3px solid var(--lila-osc);outline-offset:3px;border-radius:4px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-9999px;top:0;background:var(--lila-osc);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:100;font-weight:700;}
.skip:focus{left:0;}

.eyebrow{
  font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lila-osc);display:inline-flex;align-items:center;gap:8px;
}
/* subrayado a mano (injerto v2, recoloreado) */
.uline{position:absolute;left:0;right:0;bottom:-.18em;width:100%;height:.22em;pointer-events:none;}
.uline path{stroke:var(--lila);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-texto);font-weight:700;font-size:1rem;
  border-radius:var(--radio-pill);padding:13px 26px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
}
.btn-primary{background:var(--lila-osc);color:#fff;box-shadow:0 6px 18px rgba(126,79,145,.35);}
.btn-primary:hover{background:var(--lila-hover);transform:translateY(-1px);}
.btn-ghost{background:var(--blanco);color:var(--lila-osc);border-color:var(--borde);}
.btn-ghost:hover{border-color:var(--lila);}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* ---------- Header / nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(247,242,236,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--lila-osc);}
.logo img{width:40px;height:40px;border-radius:50%;border:2px solid var(--lila);}
.nav-links{display:flex;gap:6px;align-items:center;}
.nav-links a{
  font-weight:700;font-size:.95rem;color:var(--tinta);
  padding:8px 14px;border-radius:var(--radio-pill);transition:background .15s,color .15s;
}
.nav-links a:hover{color:var(--lila-osc);}
.nav-links a[aria-current="page"]{background:var(--lila-suave);color:var(--lila-osc);}
.nav-ig{white-space:nowrap;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--lila-osc);padding:8px;}
.nav-toggle .ic{width:26px;height:26px;}
.nav-toggle .ic-close{display:none;}
.nav-toggle[aria-expanded="true"] .ic-open{display:none;}
.nav-toggle[aria-expanded="true"] .ic-close{display:block;}

/* ---------- Sello (marca de la casa) ---------- */
.sello{filter:drop-shadow(0 3px 6px rgba(126,79,145,.25));}
.sello .disco{fill:var(--blanco);}
.sello .ring{fill:none;stroke:var(--lila-osc);}
.sello text{fill:var(--lila-osc);font-family:var(--f-display);font-weight:600;letter-spacing:.14em;}

/* ---------- Hero (inicio) ---------- */
.hero{padding:52px 0 44px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero h1{font-size:var(--fs-h1);margin:14px 0 16px;}
.hero .sub{font-size:1.16rem;color:var(--tenue);max-width:36ch;margin-bottom:26px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.proof{display:flex;align-items:center;gap:6px 10px;margin-top:22px;font-size:.95rem;color:var(--tenue);flex-wrap:wrap;}
.stars{color:var(--oro-osc);letter-spacing:2px;font-size:1.05rem;}
.hero-media{position:relative;justify-self:center;}
.phone{
  width:min(320px,80vw);aspect-ratio:9/16;border-radius:28px;overflow:hidden;
  box-shadow:var(--sombra);border:8px solid var(--blanco);background:var(--tinta);
}
.phone video{width:100%;height:100%;object-fit:cover;}
.hero-sello{position:absolute;right:-30px;top:-30px;transform:rotate(-8deg);width:124px;height:124px;}

/* ---------- Ribbon expectativas ---------- */
.ribbon{background:var(--lila-osc);color:#fff;}
.ribbon .wrap{
  display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;
  padding:14px 20px;text-align:center;font-weight:700;font-size:.98rem;
}
.ribbon .dot{width:9px;height:9px;border-radius:50%;background:var(--matcha);flex:none;animation:pulse 1.8s infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(201,217,78,0);}0%,100%{box-shadow:0 0 0 0 rgba(201,217,78,.4);}}
.ribbon .sep{opacity:.5;}
.ribbon .destacado{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:var(--radio-pill);padding:5px 14px;font-size:.92rem;}
.ribbon a{color:#fff;text-decoration:underline;font-weight:800;}
/* banda oscura de prueba social (mismo lila, layout normal) */
.banda{background:var(--lila-osc);color:#fff;}
.banda h2{color:#fff;}

/* ---------- Secciones ---------- */
section.blk{padding:64px 0;}
.blk h2{font-size:var(--fs-h2);margin:8px 0 12px;}
.blk .lead{color:var(--tenue);font-size:1.1rem;max-width:62ch;}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}
.blk--blanco{background:var(--blanco);}
.blk--suave{background:var(--lila-suave);}

/* ---------- Tarjetas genéricas ---------- */
.card{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:26px;}

/* ---------- Vídeo click-to-play ---------- */
.vcard{position:relative;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);background:var(--tinta);max-width:380px;width:100%;justify-self:center;align-self:center;}
/* height:auto es imprescindible: sin él, el atributo height del HTML fija la altura
   y el aspect-ratio del CSS se ignora (tarjetas kilométricas) */
.vcard video,.vcard img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;}
.vcard--wide{max-width:340px;}
.vcard--wide video,.vcard--wide img{aspect-ratio:3/4;}
/* mini-reels en fila (home): miniaturas, subordinadas a los pasos */
.reels-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.vcard--mini{max-width:190px;}
.vcard--mini .aro{width:54px;height:54px;}
.vcard--mini .aro svg{width:46px;height:46px;}
.vcard--mini .pie{font-size:.78rem;bottom:8px;}
.vplay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(29,24,23,0) 55%,rgba(29,24,23,.45));
  border:0;cursor:pointer;width:100%;padding:0;
}
.vplay .aro{
  width:84px;height:84px;border-radius:50%;background:rgba(247,242,236,.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(29,24,23,.4);transition:transform .18s;
}
.vplay:hover .aro{transform:scale(1.06);}
.vplay .aro svg{width:70px;height:70px;}
.vplay .pie{
  position:absolute;bottom:14px;left:0;right:0;color:#fff;font-weight:700;font-size:.95rem;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ---------- Pasos elaboración ---------- */
.elab-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:30px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;}
.step{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:22px 20px;box-shadow:var(--sombra);}
.step .num{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:1.6rem;color:var(--lila);line-height:1;}
.step h3{font-size:1.05rem;margin:8px 0 6px;}
.step p{font-size:.94rem;color:var(--tenue);}

/* ---------- Facts producto ---------- */
.facts{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 8px;}
.fact{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:14px 18px;text-align:center;flex:1;min-width:120px;box-shadow:var(--sombra);}
.fact .n{font-family:var(--f-display);font-weight:700;font-size:1.5rem;color:var(--lila-osc);}
.fact .l{font-size:.85rem;color:var(--tenue);}

/* ---------- Galería ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
.gallery img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radio);box-shadow:var(--sombra);}

/* ---------- Ficha producto ---------- */
.ficha-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;margin-top:28px;}
.ficha .li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px dashed var(--borde);}
.ficha .li:last-child{border-bottom:0;}
.ficha .li span:first-child{color:var(--tenue);}
.ficha .li b{font-family:var(--f-display);font-weight:700;color:var(--lila-osc);text-align:right;}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.chip{background:var(--lila-suave);color:var(--lila-osc);font-weight:700;font-size:.85rem;border-radius:var(--radio-pill);padding:6px 14px;}

/* ---------- Alérgenos ---------- */
.alergenos{
  background:var(--lila-suave);border:1.5px solid var(--lila);border-radius:var(--radio);
  padding:18px 22px;margin-top:20px;display:flex;gap:14px;align-items:flex-start;
}
.alergenos .ic{color:var(--lila-osc);margin-top:3px;}
.alergenos b{color:var(--lila-osc);}

/* ---------- Temperaturas (3 formas) ---------- */
.temp-rail{
  height:6px;border-radius:3px;margin:38px 8px 0;
  background:linear-gradient(90deg,var(--oro),var(--lila-suave));
  position:relative;
}
.temp-rail .marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--blanco);border:3px solid var(--lila-osc);}
.temp-rail .marker:nth-child(1){left:10%;border-color:var(--oro-osc);}
.temp-rail .marker:nth-child(2){left:50%;border-color:var(--lila-osc);}
.temp-rail .marker:nth-child(3){left:90%;border-color:var(--lila);}
.temps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px;}
.temp{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:24px 22px;box-shadow:var(--sombra);position:relative;}
.temp h3{font-size:1.2rem;letter-spacing:.06em;display:flex;align-items:center;gap:10px;}
.temp .grados{font-family:var(--f-display);font-style:italic;font-weight:600;color:var(--oro-osc);font-size:1rem;margin-top:2px;display:block;}
.temp p{font-size:.96rem;color:var(--tenue);margin-top:10px;}
.temp .como{margin-top:12px;font-size:.9rem;font-weight:700;color:var(--lila-osc);background:var(--lila-suave);border-radius:10px;padding:8px 12px;display:block;}
.temp .badge-casa{
  position:absolute;top:-13px;right:16px;background:var(--lila-osc);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--radio-pill);padding:4px 12px;
}
.termo{width:22px;height:34px;flex:none;}

/* ---------- Info conservación ---------- */
.dos-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px;align-items:stretch;}
.lista-ico{margin-top:14px;}
.lista-ico li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.lista-ico .ic{color:var(--lila-osc);margin-top:3px;}

/* ---------- Aviso canal (solo en tienda) ---------- */
.aviso-tienda{
  background:var(--tinta);color:var(--crema);border-radius:var(--radio);
  padding:30px 32px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.aviso-tienda h3{font-size:1.3rem;color:#fff;}
.aviso-tienda p{color:#cfc6c2;max-width:52ch;}

/* ---------- Prensa (recortes) ---------- */
.recortes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
.recorte{
  background:var(--blanco);border:1px solid var(--borde);border-top:3px solid var(--lila);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:24px 24px 20px;
  display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s;
}
.recorte:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(126,79,145,.16);}
.recorte .medio{
  font-family:var(--f-display);font-weight:700;font-variant:small-caps;
  letter-spacing:.06em;font-size:1.05rem;
}
.recorte .fecha{color:var(--tenue);font-size:.85rem;}
.recorte .titular{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:1.12rem;line-height:1.3;flex:1;}
.recorte .titular::before{content:"“";color:var(--lila);font-size:1.6em;line-height:0;vertical-align:-.35em;margin-right:2px;}
.recorte .cita{color:var(--tenue);font-size:.94rem;border-left:3px solid var(--lila-suave);padding-left:12px;}
.recorte .leer{font-weight:700;color:var(--lila-osc);font-size:.95rem;margin-top:4px;}
.recorte .leer:hover{text-decoration:underline;}
/* cinta de medios (inicio) */
.press-cinta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px;}
.press-cinta span{
  border:1px solid rgba(255,255,255,.4);border-radius:var(--radio-pill);padding:7px 16px;
  font-family:var(--f-display);font-variant:small-caps;letter-spacing:.05em;font-size:.95rem;
}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:30px auto 0;}
.faq-list details{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra);margin-bottom:14px;overflow:hidden;
}
.faq-list summary{
  cursor:pointer;padding:18px 22px;font-weight:800;font-size:1.04rem;
  display:flex;justify-content:space-between;align-items:center;gap:14px;list-style:none;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+";font-family:var(--f-display);font-weight:600;font-size:1.5rem;color:var(--lila-osc);
  flex:none;transition:transform .2s;line-height:1;
}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list .resp{padding:0 22px 20px;color:var(--tenue);}
.faq-list .resp a{color:var(--lila-osc);font-weight:700;text-decoration:underline;}

/* ---------- Tiendas ---------- */
.tiendas-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:32px;align-items:stretch;}
.tienda{display:flex;flex-direction:column;gap:0;overflow:hidden;padding:0;}
.tienda .cuerpo{padding:26px 26px 22px;flex:1;}
.tienda h3{font-size:1.35rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tienda .tipo{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lila-osc);background:var(--lila-suave);border-radius:var(--radio-pill);padding:4px 12px;}
.line{display:flex;gap:12px;align-items:flex-start;margin-top:14px;}
.line .ic{color:var(--lila-osc);margin-top:3px;}
/* ubicación en home (card + mapa, como v1) */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch;}
.loc-grid .mapa{border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);}
.mapa{position:relative;background:var(--lila-suave);min-height:260px;}
.mapa iframe{border:0;width:100%;height:100%;min-height:260px;display:block;}
.mapa .map-facade{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;background:var(--lila-suave);color:var(--lila-osc);font-weight:800;font-size:1rem;width:100%;
}
.mapa .map-facade .ic{width:34px;height:34px;}
.mapa .map-facade:hover{background:#e9dcf2;}

/* ---------- Historia (clara, como v1) ---------- */
.hist-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;}
.hist-grid img{width:100%;height:auto;border-radius:var(--radio);box-shadow:var(--sombra);aspect-ratio:4/5;object-fit:cover;}
.pull{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.3;color:var(--lila-osc);margin:10px 0 14px;}

/* ---------- Footer ---------- */
footer.site{background:var(--tinta);color:#cfc6c2;padding:52px 0 26px;position:relative;overflow:hidden;}
footer.site::before{
  content:"";position:absolute;inset:0;opacity:.04;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;position:relative;}
footer.site .logo{color:#fff;}
footer.site .logo img{border-color:var(--lila);}
footer.site a:hover{color:#fff;}
.foot-h{font-family:var(--f-display);font-weight:700;color:#fff;margin-bottom:12px;font-size:1rem;}
.foot-links{display:flex;flex-direction:column;gap:8px;font-size:.93rem;}
.legal{border-top:1px solid #3a3330;margin-top:36px;padding-top:18px;font-size:.8rem;color:#98908c;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;position:relative;}

/* ---------- Banner de cookies (RGPD: aceptar y rechazar con igual facilidad) ---------- */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:0 14px 40px rgba(29,24,23,.2);padding:18px 22px;
  display:flex;gap:14px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  max-width:760px;margin:0 auto;
}
.cookie-banner p{font-size:.92rem;color:var(--tenue);margin:0;flex:1;min-width:240px;}
.cookie-banner p a{color:var(--lila-osc);font-weight:700;text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-actions .btn{padding:10px 20px;font-size:.93rem;}
/* consentimiento contextual del mapa (sustituye a la fachada al pulsar) */
.map-consent{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:var(--lila-suave);padding:20px;text-align:center;
}
.map-consent p{font-size:.9rem;color:var(--tenue);max-width:36ch;}
.map-consent .btn{padding:10px 18px;font-size:.9rem;}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ---------- Responsive ---------- */
@media (max-width:1160px){
  /* en portátiles justos (o zoom 125%) el botón de IG no cabe sin descuadrar el nav */
  .nav-ig{display:none;}
}
@media (max-width:880px){
  .hero-grid,.elab-grid,.ficha-grid,.hist-grid,.tiendas-grid,.dos-cols,.loc-grid{grid-template-columns:1fr;}
  .temps,.recortes{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero-media{margin-top:10px;}
  .hero-sello{right:-8px;top:-14px;width:96px;height:96px;}
  .hist-grid img{order:-1;}
  .temp-rail{display:none;}
  /* nav móvil */
  .nav-toggle{display:block;}
  .nav-ig{display:none;}
  nav[aria-label="Principal"]{position:static;}
  .nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--blanco);border-bottom:1px solid var(--borde);
    padding:14px 20px 18px;box-shadow:var(--sombra);
  }
  header.site.menu-abierto .nav-links{display:flex;}
  .nav-links a{padding:12px 14px;}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
  .facts{flex-direction:column;}
  .steps{grid-template-columns:1fr;}
  .vcard--mini{max-width:150px;}  /* los dos reels caben en fila también en móvil */
  /* móvil: hero centrado y botones a ancho completo (nada queda "descolgado" a la izquierda) */
  .hero-grid > div:first-child{text-align:center;}
  .hero .sub{margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  .proof{justify-content:center;}
  main .btn{width:100%;justify-content:center;}
}