/*
Theme Name:   Noralta
Theme URI:    https://noralta.mx
Description:  Tema hijo de Hello Elementor para Noralta — Vaso Michelado.
Author:       Grupo Altíz
Template:     hello-elementor
Version:      1.0.0
Text Domain:  noralta
*/

:root{
  /* negros cálidos, no negro plano */
  --nrl-ink:#0B0705;
  --nrl-ink-2:#120C08;
  --nrl-ink-3:#1A120B;
  --nrl-char:#241811;

  --nrl-gold:#BC9A52;
  --nrl-gold-lit:#D4A72C;
  --nrl-amber:#E8A33D;

  --nrl-clasica:#890000;
  --nrl-clasica-lit:#C4342A;
  --nrl-nortena:#CE6238;
  --nrl-tropical:#C1A15A;

  --nrl-cream:#F3E9DC;
  --nrl-cream-dim:#B9AC9C;
  --nrl-cream-faint:#6E6255;

  --nrl-display:"Fraunces",Georgia,serif;
  --nrl-ui:"Archivo","Helvetica Neue",sans-serif;

  --nrl-edge:1px solid rgba(188,154,82,.16);
  --nrl-gutter:clamp(20px,4vw,56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--nrl-ink);color:var(--nrl-cream);
  font-family:var(--nrl-ui);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
html{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- grano de película sobre todo ---------- */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;
  opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,3%)}
}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* ---------- tipografía ---------- */
.display{
  font-family:var(--nrl-display);font-weight:550;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 132;
  line-height:.94;letter-spacing:-.022em;text-wrap:balance;
}
h1.display{font-size:clamp(2.6rem,7.2vw,6.2rem);font-weight:520}
h2.display{font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:540}
h3.display{font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1;font-weight:560}

.kicker{
  font-family:var(--nrl-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--nrl-gold);
  display:flex;align-items:center;gap:.9rem;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--nrl-gold);flex:none}
.kicker.solo::before{display:none}

.serif-it{font-family:var(--nrl-display);font-style:italic;font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1}

p{color:var(--nrl-cream-dim);max-width:62ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.62;color:var(--nrl-cream-dim)}

/* ---------- layout ---------- */
.wrap{max-width:1340px;margin:0 auto;padding-inline:var(--nrl-gutter);width:100%}
section{position:relative}
.bleed{position:relative;overflow:hidden}

/* resplandor ámbar tipo luz de bar */
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}

/* ---------- header ---------- */
.nrl-header{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;padding:18px 0}
.nrl-header.stuck{background:rgba(11,7,5,.86);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(188,154,82,.18);padding:10px 0}
.nrl-header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nrl-header .mark{height:54px;width:auto;transition:height .4s}
.nrl-header.stuck .mark{height:42px}
nav.main{display:flex;align-items:center}
nav.main .nrl-menu{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0}
nav.main li{margin:0}
nav.main a{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nrl-cream-dim);position:relative;padding:6px 0;transition:color .3s}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--nrl-gold);transition:width .35s cubic-bezier(.2,.9,.2,1)}
nav.main a:hover{color:var(--nrl-cream)}
nav.main a:hover::after,nav.main a.on::after{width:100%}
nav.main a.on,nav.main .current-menu-item>a,nav.main .current_page_item>a{color:var(--nrl-gold)}
nav.main .current-menu-item>a::after,nav.main .current_page_item>a::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:1.5px;background:var(--nrl-cream);display:block}

.saltar{position:absolute;left:-9999px;top:0;z-index:300;background:var(--nrl-gold);color:var(--nrl-ink);
  padding:12px 20px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.saltar:focus{left:0}
.nrl-header .marca{display:block;line-height:0}
main{display:block}
.cup-img{width:100%;height:auto}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;
  padding-top:120px;padding-bottom:clamp(24px,5vh,56px);
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(232,163,61,.16), transparent 62%),
    radial-gradient(90% 70% at 12% 92%, rgba(137,0,0,.22), transparent 60%),
    linear-gradient(180deg,var(--nrl-ink) 0%,var(--nrl-ink-2) 68%,var(--nrl-ink) 100%);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;align-items:end;width:100%}
.hero-copy{padding-bottom:clamp(60px,9vh,120px);position:relative;z-index:3}
.hero-copy h1{margin:26px 0 0}
.hero-copy h1 .lit{color:var(--nrl-gold);display:block}
.hero-copy .lede{margin-top:30px;max-width:46ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* los vasos son de 1200px de ancho: hay que sujetarlos */
.vcup img{width:100%;height:auto;max-width:100%}
/* el del hero se limita también por alto de pantalla: si solo se limita por
   ancho, en monitores bajos el vaso no cabe y el hero lo recorta */
.hero-cup img{width:auto;height:auto;max-width:100%;max-height:68svh;margin-inline:auto}

/* el vaso completo, sin sangrado ni recorte */
.hero-cup{position:relative;z-index:2;justify-self:center;width:min(100%,430px);
  margin-bottom:0;filter:drop-shadow(0 28px 55px rgba(0,0,0,.7))}

/* texto vertical al borde */
.rail{position:absolute;right:clamp(10px,2vw,26px);top:52%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:.63rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--nrl-cream-faint);z-index:4;display:flex;align-items:center;gap:18px}
.rail::after{content:"";width:1px;height:70px;background:linear-gradient(var(--nrl-gold),transparent)}

.scrollcue{position:absolute;left:clamp(20px,4vw,56px);bottom:26px;z-index:5;
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--nrl-cream-faint);
  display:flex;align-items:center;gap:12px}
.scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(var(--nrl-gold),transparent);
  animation:drop 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--nrl-ui);
  font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  padding:17px 30px;border:1px solid var(--nrl-gold);color:var(--nrl-ink);background:var(--nrl-gold);
  position:relative;overflow:hidden;transition:color .4s;cursor:pointer}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--nrl-cream);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.3,.9,.25,1);z-index:1}
.btn:hover::before{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--nrl-gold)}
.btn.ghost::before{background:var(--nrl-gold)}
.btn.ghost:hover{color:var(--nrl-ink)}
.btn .arw{position:relative;z-index:2;transition:transform .35s}
.btn:hover .arw{transform:translateX(5px)}

/* ---------- marquee ---------- */
.ticker{border-top:var(--nrl-edge);border-bottom:var(--nrl-edge);background:var(--nrl-ink-2);
  padding:17px 0;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:44px;animation:slide 34s linear infinite;will-change:transform}
.ticker span{font-family:var(--nrl-display);font-style:italic;font-weight:400;
  font-size:1.05rem;letter-spacing:.02em;color:var(--nrl-gold);display:inline-flex;align-items:center;gap:44px}
.ticker span::after{content:"✦";color:var(--nrl-clasica-lit);font-style:normal;font-size:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- editorial: qué es ---------- */
.editorial{padding:clamp(90px,13vh,170px) 0;background:var(--nrl-ink)}
.ed-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,90px);align-items:start}
.ed-quote{font-family:var(--nrl-display);font-weight:300;font-style:italic;
  font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:clamp(1.5rem,3.1vw,2.55rem);line-height:1.22;color:var(--nrl-cream);
  letter-spacing:-.02em;max-width:none}
.ed-quote em{color:var(--nrl-gold);font-style:italic}
.ed-side{padding-top:12px;display:flex;flex-direction:column;gap:22px}
.ed-side p{font-size:.98rem;color:var(--nrl-cream-dim)}
.dropcap::first-letter{font-family:var(--nrl-display);font-weight:600;font-size:3.5em;
  float:left;line-height:.78;margin:.06em .12em 0 0;color:var(--nrl-gold)}

/* ---------- lista editorial de características ---------- */
.feats{padding:clamp(80px,11vh,150px) 0;background:var(--nrl-ink-2);border-top:var(--nrl-edge)}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,4vw,58px);
  align-items:baseline;padding:34px 0;border-bottom:var(--nrl-edge);position:relative;
  transition:background .45s}
.feat:first-of-type{border-top:var(--nrl-edge)}
.feat::before{content:"";position:absolute;left:-4vw;right:-4vw;top:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(188,154,82,.05),transparent);
  opacity:0;transition:opacity .45s;pointer-events:none}
.feat:hover::before{opacity:1}
.feat .num{font-family:var(--nrl-display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.5rem);
  color:var(--nrl-gold);opacity:.55;letter-spacing:-.02em;min-width:2.4ch}
.feat h3{font-family:var(--nrl-display);font-weight:560;font-variation-settings:"SOFT" 45,"WONK" 1;
  font-size:clamp(1.35rem,2.7vw,2.15rem);line-height:1;letter-spacing:-.028em;
  transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.feat:hover h3{transform:translateX(10px)}
.feat p{font-size:.94rem;max-width:34ch;text-align:right;color:var(--nrl-cream-faint);
  transition:color .45s}
.feat:hover p{color:var(--nrl-cream-dim)}
/* asimetría: desplazamiento alterno */
.feat:nth-child(even){padding-left:clamp(0px,4vw,70px)}

/* ---------- presentaciones full-bleed ---------- */
.pres{padding:clamp(80px,11vh,140px) 0 0;background:var(--nrl-ink)}
.variant{position:relative;overflow:hidden;border-top:var(--nrl-edge)}
.variant .vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:clamp(24px,5vw,70px);padding-block:clamp(50px,8vh,110px)}
.variant.flip .vgrid{direction:rtl}
.variant.flip .vgrid>*{direction:ltr}
.variant .vnum{font-family:var(--nrl-display);font-weight:500;
  font-size:clamp(6rem,17vw,15rem);line-height:.72;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(243,233,220,.14);
  position:absolute;top:6%;pointer-events:none;user-select:none;z-index:0}
.variant:not(.flip) .vnum{left:clamp(-10px,1vw,20px)}
.variant.flip .vnum{right:clamp(-10px,1vw,20px)}
.vcopy{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.vcopy h3{color:var(--nrl-cream)}
.vcopy .vtag{display:inline-flex;align-items:center;gap:10px;font-size:.64rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;padding:8px 16px;color:var(--nrl-cream)}
.vsteps{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:6px;width:100%;max-width:400px}
.vsteps li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(243,233,220,.08);
  font-size:.93rem;color:var(--nrl-cream-dim)}
.vsteps li b{font-family:var(--nrl-display);font-weight:600;font-size:.85rem;opacity:.75;min-width:2ch}
.vnet{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--nrl-cream-faint);
  border:1px solid rgba(243,233,220,.14);padding:9px 15px;margin-top:6px}
.vcup{position:relative;z-index:1;justify-self:center;width:min(100%,400px)}

/* lavado de color por variante */
.variant[data-v]{--nrl-wash:var(--nrl-gold)}
.variant[data-v="clasica"]{--nrl-wash:var(--nrl-clasica-lit)}
.variant[data-v="nortena"]{--nrl-wash:var(--nrl-nortena)}
.variant[data-v="tropical"]{--nrl-wash:var(--nrl-tropical)}
.variant .wash{position:absolute;width:60%;height:120%;top:-10%;border-radius:50%;
  background:var(--nrl-wash);opacity:.13;filter:blur(110px);pointer-events:none;z-index:0}
.variant:not(.flip) .wash{right:-8%}
.variant.flip .wash{left:-8%}
.vcopy .vtag{background:var(--nrl-wash)}
.vcopy .kicker{color:var(--nrl-wash)}
.vcopy .kicker::before{background:var(--nrl-wash)}

/* ---------- CTA ancha ---------- */
.cta{padding:clamp(90px,13vh,160px) 0;background:var(--nrl-ink-2);border-top:var(--nrl-edge);
  position:relative;overflow:hidden;text-align:center}
.cta .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
.cta .kicker{justify-content:center}
.cta p{text-align:center;margin:0 auto}

/* ---------- páginas internas ---------- */
.phero{padding:clamp(150px,20vh,240px) 0 clamp(50px,7vh,90px);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--nrl-ink-2),var(--nrl-ink))}
.phero .wrap{position:relative;z-index:2}
.phero h1{margin-top:20px}
.phero .lede{margin-top:24px;max-width:52ch}

.split{padding:clamp(70px,10vh,130px) 0;background:var(--nrl-ink)}
.split-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(34px,6vw,86px);align-items:center}
.stat{display:flex;flex-direction:column;gap:4px;padding:22px 0;border-bottom:var(--nrl-edge)}
.stat .k{font-family:var(--nrl-display);font-weight:580;font-size:clamp(1.9rem,3.4vw,2.9rem);
  color:var(--nrl-gold);line-height:1;letter-spacing:-.03em}
.stat .v{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nrl-cream-faint)}

/* ---------- contacto ---------- */
.contact{padding:clamp(70px,10vh,130px) 0;background:var(--nrl-ink-2);border-top:var(--nrl-edge)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,6vw,80px);align-items:start}
.dl{list-style:none;display:flex;flex-direction:column}
.dl li{padding:19px 0;border-bottom:var(--nrl-edge);display:flex;justify-content:space-between;
  align-items:baseline;gap:20px}
.dl .lab{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--nrl-cream-faint)}
.dl .val{font-family:var(--nrl-display);font-weight:600;font-size:1.02rem;color:var(--nrl-cream);text-align:right;transition:color .3s}
a.dl-x{}
.dl a.val:hover{color:var(--nrl-gold)}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:42px;height:42px;border:1px solid rgba(188,154,82,.3);color:var(--nrl-gold);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  transition:background .35s,color .35s,border-color .35s}
.socials a:hover{background:var(--nrl-gold);color:var(--nrl-ink);border-color:var(--nrl-gold)}

.form{background:linear-gradient(160deg,var(--nrl-ink-3),var(--nrl-ink-2));
  border:var(--nrl-edge);padding:clamp(28px,4vw,46px)}
.form .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.fld{margin-bottom:18px;position:relative}
.fld label{display:block;font-size:.62rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--nrl-cream-faint);margin-bottom:9px}
.fld input,.fld textarea,.fld select{width:100%;background:rgba(0,0,0,.35);color:var(--nrl-cream);
  border:0;border-bottom:1px solid rgba(188,154,82,.28);padding:13px 2px;
  font-family:var(--nrl-ui);font-size:1rem;transition:border-color .35s}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-bottom-color:var(--nrl-gold)}
.fld textarea{min-height:110px;resize:vertical}
.fld select{appearance:none;cursor:pointer}

/* ---------- footer ---------- */
footer{background:var(--nrl-ink);border-top:var(--nrl-edge);padding:clamp(60px,8vh,100px) 0 34px;
  position:relative;overflow:hidden}
.f-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);
  padding-bottom:52px;border-bottom:var(--nrl-edge)}
footer .fmark{width:210px;margin-bottom:20px}
footer h4{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--nrl-cream-faint);margin-bottom:20px;font-weight:600}
footer ul{list-style:none;display:flex;flex-direction:column;gap:13px}
footer ul a{font-size:.93rem;color:var(--nrl-cream-dim);transition:color .3s,padding-left .3s}
footer ul a:hover{color:var(--nrl-gold);padding-left:6px}
.f-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;font-size:.76rem;color:var(--nrl-cream-faint)}
.f-bottom .altiz{display:flex;align-items:center;gap:9px}
.f-bottom .altiz b{color:var(--nrl-gold);font-weight:600;letter-spacing:.06em}

/* ---------- portafolio de marcas ---------- */
.brands{display:flex;flex-direction:column;margin-top:44px}
.brand{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.6fr) auto;gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:30px 0;border-bottom:var(--nrl-edge);position:relative;transition:padding-left .45s}
.brand:first-child{border-top:var(--nrl-edge)}
.brand:hover{padding-left:14px}
.brand .bn{font-family:var(--nrl-display);font-weight:560;font-size:clamp(1.5rem,2.9vw,2.3rem);
  line-height:1;letter-spacing:-.025em;color:var(--nrl-cream)}
.brand .bd{font-size:.95rem;color:var(--nrl-cream-faint);max-width:44ch}
.brand .bs{font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:7px 14px;border:1px solid;white-space:nowrap}
.brand .bs.vivo{color:var(--nrl-gold);border-color:rgba(188,154,82,.45)}
.brand .bs.pronto{color:var(--nrl-cream-faint);border-color:rgba(243,233,220,.16)}
.brand.propia .bn{color:var(--nrl-gold)}

/* ---------- línea de tiempo ---------- */
.tl{display:flex;flex-direction:column;gap:0;position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:4px;top:10px;bottom:24px;width:1px;
  background:linear-gradient(var(--nrl-gold),rgba(188,154,82,.1))}
.tl-i{position:relative;padding:0 0 34px}
.tl-i::before{content:"";position:absolute;left:-30px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--nrl-ink);border:1px solid var(--nrl-gold)}
.tl-i.on::before{background:var(--nrl-gold)}
.tl-i h4{font-family:var(--nrl-display);font-weight:560;font-size:1.18rem;line-height:1.15;
  letter-spacing:-.02em;color:var(--nrl-cream);margin-bottom:7px}
.tl-i p{font-size:.93rem;color:var(--nrl-cream-faint);max-width:46ch}

/* ---------- valores ---------- */
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:44px}
.val-c{border-top:1px solid rgba(188,154,82,.35);padding-top:22px}
.val-c .vn{font-family:var(--nrl-display);font-weight:540;font-size:1.45rem;line-height:1;
  letter-spacing:-.02em;color:var(--nrl-cream);margin-bottom:12px}
.val-c p{font-size:.93rem;color:var(--nrl-cream-faint)}

@media(max-width:980px){
  .brand{grid-template-columns:1fr auto;gap:10px}
  .brand .bd{grid-column:1/-1;max-width:none}
  .vals{grid-template-columns:1fr}
}

/* ---------- reveal al hacer scroll ---------- */
/* Solo se oculta si hay JS para volver a mostrarlo. Sin JS, todo visible. */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}


/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid,.ed-grid,.split-grid,.contact-grid,.variant .vgrid{grid-template-columns:minmax(0,1fr)}
  .variant .vgrid{direction:ltr}
  .hero{padding-top:100px;min-height:auto;padding-bottom:0}
  .hero-cup{margin-bottom:0;margin-top:30px;width:min(84%,400px)}
  .rail{display:none}
  .feat{grid-template-columns:auto 1fr;gap:18px}
  .feat p{grid-column:2;text-align:left;max-width:none;margin-top:8px}
  .feat:nth-child(even){padding-left:0}
  .f-grid{grid-template-columns:1fr}
  .burger{display:flex}
  nav.main{position:absolute;left:0;right:0;top:100%;display:block;
    background:rgba(11,7,5,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(188,154,82,.18);
    max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.3,.9,.25,1)}
  nav.main.abierto{max-height:70vh;overflow-y:auto}
  nav.main .nrl-menu{flex-direction:column;gap:0;padding:8px var(--nrl-gutter) 20px}
  nav.main li{width:100%;border-bottom:1px solid rgba(243,233,220,.07)}
  nav.main a{display:block;padding:16px 0;font-size:.78rem}
  nav.main a::after{display:none}
  .burger span{transition:transform .35s,opacity .25s}
  .burger.abierto span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.abierto span:nth-child(2){opacity:0}
  .burger.abierto span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .form .row{grid-template-columns:1fr}
  .variant .vnum{font-size:7rem;top:auto;bottom:2%;opacity:.5}
  .vsteps{max-width:none}

  /* el vaso del hero se lleva media pantalla de alto en vertical:
     el titular y los botones importan más */
  .hero-cup{display:none}
  .hero{min-height:auto;padding-bottom:56px}

  /* primero se lee, después se ve el producto */
  .variant .vgrid .vcopy{order:1}
  .variant .vgrid .vcup{order:2;margin-top:8px}
}

/* ---------- teléfono ---------- */
@media(max-width:560px){
  body{font-size:16px}
  h1.display{font-size:clamp(2.5rem,10.5vw,3.4rem)}
  h2.display{font-size:clamp(1.95rem,7.6vw,2.6rem)}
  .ed-quote{font-size:1.32rem;line-height:1.3}
  .feat h3{font-size:1.3rem}
  .feat{padding:26px 0}

  .kicker{font-size:.6rem;letter-spacing:.24em;gap:.65rem}
  .kicker::before{width:20px}

  /* botones a ancho completo: más fáciles de tocar */
  .btn{padding:16px 22px;font-size:.66rem;letter-spacing:.14em;
       width:100%;justify-content:center}
  .hero-cta{flex-direction:column;align-items:stretch;gap:11px}
  .cta .btn,.form .btn{width:100%}

  .brand{padding:22px 0}
  .brand .bn{font-size:1.5rem}
  .brand .bs{font-size:.55rem;padding:6px 10px}

  .dl li{flex-direction:column;align-items:flex-start;gap:5px}
  .dl .val{text-align:left}
  .form{padding:26px 18px}
  .socials a{width:46px;height:46px}

  .variant .vnum{font-size:5.4rem}
  .vcopy{gap:14px}

  /* las rejillas de 3 columnas escritas en línea */
  #pasos3,#mayoreo3{grid-template-columns:1fr!important;gap:0!important}
  #mayoreo3>div{padding:20px 0 4px!important}
  #pasos3>div{padding-top:16px;margin-bottom:18px}

  .f-bottom{flex-direction:column;gap:9px}
  footer .fmark{width:170px}

  .scrollcue{display:none}
}


/* ---------- neutralizar el espaciado de los contenedores de Elementor ---------- */
.elementor .e-con,
.elementor .e-con-inner{
  --padding-block-start:0px;--padding-block-end:0px;
  --padding-inline-start:0px;--padding-inline-end:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;
  --content-width:100%;--width:100%;
  max-width:none;margin-block:0}
.elementor .e-con>.elementor-widget{width:100%;max-width:100%}
.elementor .elementor-widget-html{margin:0}

/* en teléfono el logotipo grande dejaba un encabezado de 91px: demasiado
   después de haber liberado alto quitando el vaso del hero */
@media(max-width:560px){
  .nrl-header{padding:12px 0}
  .nrl-header .mark{height:40px}
  .nrl-header.stuck{padding:9px 0}
  .nrl-header.stuck .mark{height:34px}
}


/* ---------- Contact Form 7 ---------- */
.wpcf7{margin:0}
.wpcf7 form .wpcf7-response-output{
  border:1px solid rgba(188,154,82,.45);background:rgba(188,154,82,.07);
  color:var(--nrl-cream);padding:14px 16px;margin:20px 0 0;font-size:.9rem;line-height:1.5}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:rgba(232,163,61,.6)}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(188,154,82,.7)}
.wpcf7 .wpcf7-not-valid-tip{color:var(--nrl-amber);font-size:.76rem;margin-top:7px}
.wpcf7 .wpcf7-spinner{margin:0 0 0 12px}
.wpcf7 .wpcf7-form-control-wrap{display:block}

/* el botón de CF7 es un <input>: no admite el barrido con ::before */
.wpcf7 input[type=submit]{
  display:inline-block;font-family:var(--nrl-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;padding:17px 30px;
  border:1px solid var(--nrl-gold);background:var(--nrl-gold);color:var(--nrl-ink);
  cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.wpcf7 input[type=submit]:hover{background:var(--nrl-cream);border-color:var(--nrl-cream)}
.wpcf7 input[type=submit]:disabled{opacity:.55;cursor:wait}
@media(max-width:560px){.wpcf7 input[type=submit]{width:100%;padding:16px 22px}}