/* Chori Caliente: sistema visual (manual de marca, octubre 2026), ajustado 5/10.
 * Bloques de color plenos, sin líneas divisorias, texto grande, todo alineado a la izquierda.
 * Voces: Fugaz One (títulos, MAYÚSCULA) · Familjen Grotesk (subtítulos y texto) · Chori Marca (solo la palabra gigante de fondo). */

@font-face{font-family:"Chori Marca";src:url("../fonts/chori-marca-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Fugaz One";src:url("../fonts/fugaz-one-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../fonts/familjen-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../fonts/familjen-grotesk-600.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --noche:#1E0A0F; --vino:#6B0F24; --cereza:#E0233A; --chicle:#FF8FAB; --leche:#F9D9DE;
  --vino-2:#4A0A19; --giant:#7E1830; --suave:#fff3f5;
  --f-marca:"Chori Marca","Cooper Black",Georgia,serif;
  --f-grito:"Fugaz One","Arial Black",Impact,sans-serif;
  --f-texto:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--noche);color:var(--leche);font-family:var(--f-texto);font-size:19px;line-height:1.55;min-height:100vh}
@media (max-width:620px){body{font-size:18px}}
img,svg{max-width:100%}
a{color:inherit}
b,strong{font-weight:700}
p{margin:0;max-width:64ch}
h1,h2{font-family:var(--f-grito);font-weight:400;text-transform:uppercase;line-height:.96;letter-spacing:.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6vw,76px)}
h2{font-size:clamp(32px,5.2vw,68px)}
h3{font-family:var(--f-texto);font-weight:700;letter-spacing:-.01em;line-height:1.1;font-size:clamp(22px,2.2vw,28px);margin:0}
:focus-visible{outline:3px solid var(--chicle);outline-offset:3px}
.s-leche :focus-visible,body.claro :focus-visible{outline-color:var(--vino)}

.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
section{padding-block:clamp(40px,6vw,76px)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--leche);color:var(--noche);padding:10px 16px;border-radius:6px;font-weight:700;z-index:100;text-decoration:none}
.skip:focus{top:12px}

.s-vino{background:var(--vino);color:var(--leche)}
.s-leche{background:var(--leche);color:var(--vino)}
.s-cereza{background:var(--cereza);color:var(--leche)}
.s-noche{background:var(--noche);color:var(--leche)}

.lead{font-size:clamp(20px,1.9vw,24px);line-height:1.5}
.small{font-size:16px;line-height:1.5}
.head{display:grid;gap:14px;margin-bottom:clamp(22px,3vw,36px)}
.acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:14px 34px;border-radius:40px;border:2px solid transparent;
  font:700 20px/1.1 var(--f-texto);text-decoration:none;cursor:pointer;background:var(--cereza);color:var(--leche);transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:#C71C32}
.btn:active{background:#B5182D}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn.sec{background:transparent;border-color:var(--leche);color:var(--leche)}
.btn.sec:hover{background:var(--leche);color:var(--noche)}
.btn.vino{background:var(--vino);color:var(--leche)}
.btn.vino:hover{background:var(--vino-2)}
.btn.sec-vino{background:transparent;border-color:var(--vino);color:var(--vino)}
.btn.sec-vino:hover{background:var(--vino);color:var(--leche)}
.btn.leche{background:var(--leche);color:var(--noche)}
.btn.leche:hover{background:#fff}
.btn.grande{min-height:66px;font-size:22px;padding-inline:42px}

/* ═════ HERO ═════ */
.hero{position:relative;overflow:hidden;background:var(--vino);padding-block:0}
.hero .block{position:absolute;right:0;top:0;bottom:0;width:40%;background:var(--cereza)}
@media (max-width:820px){.hero .block{top:auto;width:100%;height:440px}}
.hero .giant{position:absolute;left:-2vw;top:50%;transform:translateY(-52%);font-family:var(--f-marca);font-weight:700;font-size:clamp(220px,38vw,560px);line-height:.8;letter-spacing:-.05em;color:var(--giant);white-space:nowrap;user-select:none;pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;min-height:min(700px,90vh);gap:24px}
.hero-txt{display:grid;gap:22px;padding-block:44px;z-index:2;justify-items:start}
.hero-txt .logo{display:block;width:min(600px,88vw);height:auto}
.claim{font-family:var(--f-grito);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.7vw,38px);line-height:1;letter-spacing:.01em;color:var(--leche)}
.claim em{font-style:normal;color:var(--chicle)}
.hero .lead{max-width:34ch;font-size:clamp(21px,2vw,26px)}
.hero-prod{position:relative;height:100%;min-height:520px;z-index:1}
.hero-prod img{position:absolute;left:58%;top:50%;height:96%;width:auto;transform:translate(-50%,-50%) rotate(24deg);filter:drop-shadow(0 30px 40px rgba(20,4,8,.55))}
.badge72{position:absolute;right:4%;bottom:9%;z-index:3;text-align:right;font-family:var(--f-grito);line-height:.85;color:var(--leche)}
.badge72 b{display:block;font-size:clamp(64px,8vw,112px);font-weight:400}
.badge72 span{font-size:15px;letter-spacing:.06em}
@media (max-width:820px){.hero-in{grid-template-columns:1fr}.hero-prod{min-height:430px}.hero-prod img{height:105%}.hero-txt{padding-block:36px 0}}
@media (prefers-reduced-motion:no-preference){
  .hero-prod img{animation:sway 5.2s ease-in-out infinite alternate}
  @keyframes sway{0%{transform:translate(-50%,-49%) rotate(27deg)}50%{transform:translate(-51%,-53%) rotate(18deg)}100%{transform:translate(-49%,-50%) rotate(25deg)}}
  .hero .giant{animation:deriva 14s ease-in-out infinite alternate}
  @keyframes deriva{from{transform:translate(0,-52%)}to{transform:translate(-2.2vw,-52%)}}
}
.hero.noche{background:var(--noche)}
.hero.noche .giant{color:#2C1119}
.hero.noche .block{width:46%}
.hero.noche .hero-prod img{transform:translate(-50%,-50%) rotate(-22deg);left:44%}
@media (prefers-reduced-motion:no-preference){
  .hero.noche .hero-prod img{animation:sway2 5.2s ease-in-out infinite alternate}
  @keyframes sway2{0%{transform:translate(-50%,-49%) rotate(-26deg)}50%{transform:translate(-49%,-53%) rotate(-17deg)}100%{transform:translate(-51%,-50%) rotate(-24deg)}}
}
@media (max-width:820px){.hero.noche .hero-prod img{left:50%}}

/* ═════ GALERÍA fina y larga ═════ */
.galeria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-inline:8px}
.galeria figure{margin:0;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:var(--vino)}
.galeria img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){
  .galeria{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:16px;scrollbar-width:none}
  .galeria::-webkit-scrollbar{display:none}
  .galeria figure{flex:0 0 82vw;scroll-snap-align:center}
}

/* ═════ BLOQUES DE DATOS ═════ */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:820px){.tiles{grid-template-columns:1fr}}
.tile{padding:clamp(24px,3.4vw,40px);border-radius:6px;display:grid;gap:14px;align-content:space-between;min-height:230px}
.tile b{display:block;font:400 clamp(34px,3.9vw,56px)/.95 var(--f-grito);text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:820px){.tile b{font-size:clamp(40px,11vw,60px)}}
.tile p{font-size:clamp(19px,1.7vw,22px);line-height:1.4;max-width:26ch}
.tile.t1{background:var(--cereza);color:var(--leche)}
.tile.t2{background:var(--leche);color:var(--vino)}
.tile.t3{background:var(--chicle);color:var(--noche)}
body.claro .tile.t2{background:var(--vino);color:var(--leche)}

/* ═════ CÓMO SE PIDE ═════ */
.pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.pasos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.pasos,.pasos.tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pasos,.pasos.tres{grid-template-columns:1fr}}
.paso{background:var(--vino);color:var(--leche);padding:clamp(22px,2.6vw,32px);border-radius:6px;display:grid;gap:10px;align-content:start}
.paso .num{font:400 clamp(52px,6vw,76px)/.85 var(--f-grito);color:var(--chicle)}
.paso p{font-size:19px;line-height:1.45}
.seguro-bloque{margin-top:12px;background:var(--chicle);color:var(--noche);border-radius:6px;padding:clamp(24px,3.4vw,40px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:center}
.seguro-bloque svg{width:clamp(56px,7vw,88px);height:auto}
.seguro-bloque h3{font-size:clamp(26px,3.2vw,40px)}
.seguro-bloque p{font-size:clamp(19px,1.8vw,22px);margin-top:8px;max-width:60ch}
@media (max-width:560px){.seguro-bloque{grid-template-columns:1fr}}
.nota-entrega{margin:clamp(18px,2.4vw,28px) auto 0;font-size:clamp(19px,1.8vw,22px);line-height:1.5;max-width:72ch;text-align:center}

/* ═════ PRECIO + textura de fondo ═════ */
.precio-sec{position:relative;overflow:hidden}
.precio-sec>.wrap{position:relative;z-index:1}
.textura{position:absolute;inset:0;display:grid;align-content:center;gap:0;pointer-events:none;overflow:hidden}
.textura .fila{white-space:nowrap;line-height:1}
.textura .pista{display:inline-flex;align-items:center;gap:.5em;font:400 clamp(34px,5vw,72px)/1.1 var(--f-grito);text-transform:uppercase;color:var(--giant);will-change:transform}
.textura i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--giant);margin-inline:.1em}
@media (prefers-reduced-motion:no-preference){
  .textura .pista{animation:desliza 90s linear infinite}   /* la duración real la fija paginas.js para mantener la velocidad */
  .textura .inversa .pista{animation-direction:reverse}
  @keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
.precio{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:760px){.precio{grid-template-columns:1fr}}
.precio-num{font-family:var(--f-grito);line-height:.82;color:var(--leche)}
.precio-num b{display:block;font-weight:400;font-size:clamp(96px,17vw,220px)}
.precio-num span{display:block;margin-top:clamp(12px,1.6vw,20px);line-height:1.1;font-size:clamp(16px,1.9vw,21px);letter-spacing:.06em;color:var(--chicle);text-transform:uppercase}
.bolitas{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.bolitas li{position:relative;padding-left:32px;max-width:60ch;font-size:clamp(19px,1.8vw,22px);line-height:1.45}
.bolitas li::before{content:"";position:absolute;left:0;top:.45em;width:15px;height:15px;border-radius:50%;background:var(--chicle)}
.s-leche .bolitas li::before,body.claro .bolitas li::before{background:var(--cereza)}
body.claro .s-vino .bolitas li::before{background:var(--chicle)}
.comparar{background:var(--leche);color:var(--vino);border-radius:6px;padding:clamp(20px,2.4vw,28px);margin-bottom:24px;max-width:60ch}
.comparar b{display:block;font:400 clamp(26px,2.8vw,36px)/1 var(--f-grito);text-transform:uppercase;margin-bottom:10px}
.comparar p{font-size:clamp(18px,1.6vw,20px);line-height:1.45}
.comparar .small{margin-top:8px;font-size:15px;opacity:.85}

/* ═════ PREGUNTAS ═════ */
.faq{display:grid;gap:10px}
.faq details{background:var(--vino-2);border-radius:6px;padding:0 clamp(18px,2.4vw,28px)}
.faq summary{cursor:pointer;font:700 clamp(20px,2vw,24px)/1.25 var(--f-texto);padding-block:20px;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--chicle);transition:transform .15s}
.faq details[open] summary::after{transform:scale(.55)}
.faq details p{padding-bottom:22px;font-size:clamp(18px,1.7vw,21px);line-height:1.5}
.s-leche .faq details,body.claro .faq details{background:var(--suave)}
.s-leche .faq summary::after,body.claro .faq summary::after{background:var(--cereza)}

/* ═════ cabecera simple, pie, avisos ═════ */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px}
.top img{height:36px;width:auto;display:block}
.top a.volver{font-family:var(--f-grito);text-transform:uppercase;font-size:16px;letter-spacing:.04em;text-decoration:none;color:var(--chicle)}
.top a.volver:hover{text-decoration:underline;text-underline-offset:5px}
footer.pie{padding-block:44px;background:var(--noche)}
footer.pie .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer.pie img{height:46px;width:auto;display:block}
footer.pie .legal{display:grid;gap:6px;margin-top:22px}
footer.pie a{text-underline-offset:4px}
.aviso-stock{background:var(--chicle);color:var(--noche);padding:14px 16px;text-align:center;font-weight:700;font-size:19px}
.aviso-stock[hidden]{display:none}
.barra-cta{display:none}
@media (max-width:820px){
  .barra-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--noche);transform:translateY(115%);transition:transform .2s}
  .barra-cta.ver{transform:none}
  .barra-cta span{font:400 26px/1 var(--f-grito);color:var(--leche)}
  .barra-cta span small{display:block;font:400 14px/1.2 var(--f-texto);color:var(--chicle);margin-top:2px}
  .barra-cta .btn{min-height:50px;padding:10px 28px;font-size:19px}
  body.con-barra footer.pie{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){.barra-cta{transition:none}}

/* ═════ modo claro (tercera edad) ═════ */
body.claro{background:var(--leche);color:var(--vino);font-size:21px;line-height:1.6;color-scheme:light}
@media (max-width:620px){body.claro{font-size:20px}}
body.claro .lead{color:var(--vino);font-size:clamp(22px,2.1vw,26px)}
body.claro .small{color:var(--vino);font-size:18px}
body.claro .btn{min-height:66px;font-size:23px}
body.claro .btn.sec{border-color:var(--vino);color:var(--vino)}
body.claro .btn.sec:hover{background:var(--vino);color:var(--leche)}
body.claro footer.pie{background:var(--vino);color:var(--leche)}
body.claro h1,body.claro h2{font-family:var(--f-texto);font-weight:700;text-transform:none;letter-spacing:-.02em;line-height:1.04}
body.claro h1{font-size:clamp(40px,6vw,76px)}
body.claro h2{font-size:clamp(34px,4.6vw,58px)}
body.claro .paso p,body.claro .tile p{font-size:21px}

/* ═════ CHECKOUT ═════ */
.co-top{position:relative;overflow:hidden;background:var(--vino)}
.co-top .giant{position:absolute;left:-1vw;bottom:-.17em;font-family:var(--f-marca);font-weight:700;font-size:clamp(150px,26vw,330px);line-height:.8;letter-spacing:-.05em;color:var(--giant);white-space:nowrap;pointer-events:none;user-select:none}
.co-top img.prod{position:absolute;right:8%;top:-36%;height:190%;width:auto;transform:rotate(24deg);pointer-events:none}
@media (max-width:700px){.co-top img.prod{right:-10%;height:170%;top:-30%}}
.co-top .top-bar{position:relative;z-index:2}
.co-top .co-hero{position:relative;z-index:2;padding-block:clamp(32px,6vw,84px) clamp(30px,5vw,60px);display:grid;gap:16px;align-content:end}
.co-top h1{font-size:clamp(38px,6.4vw,84px);max-width:12ch}
.co-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:start;padding-block:clamp(28px,4.6vw,56px)}
@media (max-width:960px){.co-grid{grid-template-columns:1fr}}
form#pedido{display:grid;gap:clamp(34px,5vw,52px)}
fieldset.bloque{border:0;margin:0;padding:0;display:grid;gap:20px;min-width:0}
fieldset.bloque>legend{padding:0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;margin-bottom:6px;width:100%}
.n{font-family:var(--f-grito);font-size:clamp(44px,6vw,64px);line-height:.9;color:var(--chicle)}
.bloque h2{font-size:clamp(30px,4vw,46px)}
.dato{font-size:clamp(19px,1.8vw,22px);font-weight:600}
.dato b{color:var(--chicle)}

.campo{display:grid;gap:8px;min-width:0;align-content:start}
.campo label,.campo .etq{font-weight:700;font-size:18px}
.campo .ayuda{font-size:16px;font-weight:400;color:color-mix(in srgb,var(--leche) 80%,transparent)}
.campo input[type="text"],.campo input[type="tel"],.campo input[type="email"],.campo select,.campo textarea{
  width:100%;min-height:56px;padding:12px 14px;background:var(--vino-2);color:var(--leche);border:1px solid rgba(249,217,222,.38);border-radius:6px;font:400 19px/1.3 var(--f-texto)}
.campo textarea{min-height:92px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:color-mix(in srgb,var(--leche) 62%,transparent)}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--leche) 50%),linear-gradient(135deg,var(--leche) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--chicle);outline-offset:1px;border-color:var(--chicle)}
.campo [aria-invalid="true"]{border-color:var(--cereza);border-width:2px}
.err{color:var(--chicle);font-weight:700;font-size:17px}
.err:empty{display:none}
.fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.fila{grid-template-columns:1fr}}
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.cantidad{display:inline-grid;grid-template-columns:64px 96px 64px;align-items:center;border:1px solid rgba(249,217,222,.38);border-radius:6px;overflow:hidden;width:max-content;background:var(--vino-2)}
.cantidad button{min-height:64px;background:transparent;color:var(--leche);border:0;font:400 36px/1 var(--f-grito);cursor:pointer}
.cantidad button:hover:not(:disabled){background:var(--vino)}
.cantidad button:disabled{opacity:.35;cursor:not-allowed}
.cantidad output{text-align:center;font:400 42px/1 var(--f-grito)}

.mapa-caja{display:grid;gap:14px}
.mapa{height:440px;border-radius:6px;overflow:hidden;border:1px solid rgba(249,217,222,.38);background:#2a1218}
@media (max-width:620px){.mapa{height:380px}}
.mapa .leaflet-tile-pane.oscuro{filter:invert(1) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.92)}
.leaflet-container{font-family:var(--f-texto);background:#2a1218}
.leaflet-control-zoom a{background:var(--noche)!important;color:var(--leche)!important;border-color:rgba(249,217,222,.2)!important}
.leaflet-control-zoom a:hover{background:var(--vino)!important}
.leaflet-control-attribution{background:rgba(30,10,15,.82)!important;color:rgba(249,217,222,.85)!important;font-size:11px!important}
.leaflet-control-attribution a{color:var(--chicle)!important}
.pin-wrap{background:transparent;border:0}
.pin{width:32px;height:32px;border-radius:50%;background:var(--cereza);border:5px solid var(--leche);box-sizing:border-box}
.pin.fuera{background:var(--noche);border-color:var(--chicle)}
.mapa-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-chico{min-height:50px;padding:10px 22px;font-size:18px}
.zona-msg{background:var(--vino-2);border-radius:6px;padding:18px 20px;display:grid;gap:10px;min-height:64px;font-size:19px}
.zona-msg b{font-size:21px}
.zona-msg.ok b{color:var(--chicle)}
.zona-msg.mal{background:var(--vino)}
.zona-msg a.btn{justify-self:start}
.aviso-entrega{background:var(--vino);border-radius:6px;padding:18px 20px;font-size:18px;line-height:1.5}

.consent{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.consent input{width:28px;height:28px;margin:2px 0 0;accent-color:var(--cereza)}
.consent label{font-size:18px;line-height:1.45}
.consent a{color:var(--chicle);text-underline-offset:4px}

.resumen{background:var(--vino);padding:clamp(22px,3vw,34px);border-radius:6px;display:grid;gap:18px;position:sticky;top:18px}
@media (max-width:960px){.resumen{position:static}}
.resumen h2{font-size:clamp(28px,3vw,38px)}
.lineas{display:grid;gap:14px;margin:0}
.lineas>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:19px}
.lineas dt{font-weight:400}
.lineas dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.lineas dd.pend{font-weight:400;color:var(--chicle);font-size:17px}
.total{display:grid;gap:6px;padding-top:4px}
.total span{font:400 18px/1 var(--f-grito);text-transform:uppercase;letter-spacing:.05em;color:var(--chicle)}
.total b{display:block;font:400 clamp(52px,12vw,80px)/.9 var(--f-grito);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (min-width:961px){.total b{font-size:clamp(46px,4.4vw,64px)}}
.resumen .btn{width:100%}
.estado-pago{min-height:24px;font-size:17px}
.estado-pago.error{color:var(--chicle);font-weight:700}
.seguro{font-size:17px;line-height:1.5;color:color-mix(in srgb,var(--leche) 90%,transparent)}
.seguro b{color:var(--chicle)}

/* páginas de texto */
.texto{max-width:760px;padding-block:clamp(40px,7vw,88px)}
.texto h1{font-size:clamp(34px,5.6vw,60px);margin-bottom:28px}
.texto h2{font-size:clamp(24px,3vw,34px);margin:38px 0 12px}
.texto p+p{margin-top:14px}
.texto ul{padding-left:22px}
.texto li{margin-block:8px}

/* ═════ AJUSTES 6/10: PC, foto de fondo, galería con flechas, dudas, privacidad, mapa y checkout ═════ */
.wrap{max-width:1240px}
@media (min-width:1000px){
  section{padding-block:56px}
  .head{margin-bottom:28px}
  .hero-txt{padding-block:36px}
}

/* galería: 8 fotos, 4 a la vista en PC, se desliza en el celular, con flechas */
.galeria-wrap{position:relative}
.galeria{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 8px;scrollbar-width:none;scroll-behavior:smooth}
.galeria::-webkit-scrollbar{display:none}
.galeria>*:first-child,.galeria>*:last-child{margin-left:0;margin-right:0}
.galeria figure{flex:0 0 calc((100% - 24px) / 4);aspect-ratio:4/3;scroll-snap-align:start;border-radius:6px;overflow:hidden;background:var(--vino);margin:0}
@media (max-width:820px){.galeria{padding-inline:16px}.galeria figure{flex:0 0 82vw;scroll-snap-align:center}}
.gal-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:56px;height:56px;border-radius:50%;border:0;background:rgba(30,10,15,.8);cursor:pointer}
.gal-flecha::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-top:4px solid var(--leche);border-right:4px solid var(--leche)}
.gal-flecha.sig{right:18px}.gal-flecha.sig::before{transform:rotate(45deg);left:-5px}
.gal-flecha.ant{left:18px}.gal-flecha.ant::before{transform:rotate(-135deg);left:5px}
.gal-flecha:hover:not(:disabled){background:var(--cereza)}
.gal-flecha:disabled{opacity:.25;cursor:default}
@media (max-width:820px){.gal-flecha{display:none}}

/* bloque con la foto de fondo: tarjetas transparentes para que se vea la imagen */
.s-foto{background:linear-gradient(rgba(30,10,15,.5),rgba(30,10,15,.64)),url("/img/fondo-cama.webp") 62% 35%/cover no-repeat;color:var(--leche)}
@media (max-width:820px){.s-foto{background-image:linear-gradient(rgba(30,10,15,.55),rgba(30,10,15,.7)),url("/img/fondo-cama-cel.webp");background-position:66% 30%}}
.s-foto .tile.t1{background:rgba(224,35,58,.76)}
.s-foto .tile.t2{background:rgba(249,217,222,.85)}
.s-foto .tile.t3{background:rgba(255,143,171,.85)}
.s-foto .paso{background:rgba(74,10,25,.58);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.s-foto .seguro-bloque{background:rgba(255,143,171,.92)}
.s-foto .nota-entrega{background:rgba(30,10,15,.58);padding:18px 24px;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.s-foto .head h2{text-shadow:0 2px 14px rgba(30,10,15,.6)}

/* ¿Dudas?: cerrado al entrar; se abre el título y recién ahí cada pregunta */
.dudas>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:6px}
.dudas>summary::-webkit-details-marker{display:none}
.dudas>summary h2{margin:0}
.dudas .faq{margin-top:clamp(20px,3vw,32px)}
@media (min-width:900px){.dudas .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}

/* privacidad: bloques en dos columnas */
.privacidad{padding-block:clamp(28px,5vw,60px)}
.privacidad h1{font-size:clamp(34px,5.6vw,64px);margin-bottom:6px}
.priv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
@media (max-width:820px){.priv-grid{grid-template-columns:1fr}}
.priv-grid section{background:var(--vino-2);border-radius:6px;padding:clamp(20px,2.6vw,30px);display:grid;gap:10px;align-content:start}
.priv-grid section.ancho{grid-column:1/-1}
.priv-grid h2{font-size:clamp(22px,2.2vw,28px)}
.priv-grid ul{margin:0;padding-left:22px}
.priv-grid li{margin-block:6px}
.priv-grid p{max-width:none}
.priv-grid a{color:var(--chicle);text-underline-offset:4px}

/* mapa: pin en gota, barra de botones arriba */
.pin-svg{display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.mapa-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mapa-ayuda{font-size:16px;line-height:1.45;color:color-mix(in srgb,var(--leche) 82%,transparent)}

/* checkout en PC: formulario ancho, campos en pares, mapa más grande */
@media (min-width:1000px){
  .co-grid{grid-template-columns:minmax(0,1.65fr) minmax(330px,.7fr);gap:44px}
  form#pedido{gap:36px}
  .mapa{height:470px}
  .campo input[type="text"],.campo input[type="tel"],.campo input[type="email"],.campo select{min-height:50px;font-size:18px}
  .co-top .co-hero{padding-block:36px 34px}
  .bloque h2{font-size:clamp(30px,3vw,40px)}
}

/* ═════ AJUSTES 6/10 (2): ¿Dudas? se ve como botón; cada pregunta con + que gira a × ═════ */
.abrir{flex:none;display:inline-flex;align-items:center;gap:12px;padding:12px 14px 12px 22px;border-radius:999px;background:var(--chicle);color:var(--noche);font:700 clamp(16px,1.6vw,19px)/1 var(--f-texto);transition:background .15s,transform .15s}
.abrir i{position:relative;width:30px;height:30px;border-radius:50%;background:var(--noche);flex:none}
.abrir i::before,.abrir i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;margin:-1.5px 0 0 -7px;border-radius:2px;background:var(--chicle);transition:transform .2s}
.abrir i::after{transform:rotate(90deg)}
.dudas[open] .abrir i::after{transform:rotate(0deg)}
.abrir .cerrar,.dudas[open] .abrir .ver{display:none}
.dudas[open] .abrir .cerrar{display:inline}
.dudas>summary:hover .abrir{background:var(--leche);transform:translateY(-1px)}
.dudas>summary:focus-visible{outline:3px solid var(--chicle);outline-offset:6px;border-radius:6px}
@keyframes dudas-pulso{0%,100%{box-shadow:0 0 0 0 rgba(255,143,171,.55)}50%{box-shadow:0 0 0 10px rgba(255,143,171,0)}}
.dudas:not([open]) .abrir{animation:dudas-pulso 2.4s ease-out 3}
@media (prefers-reduced-motion:reduce){.dudas:not([open]) .abrir{animation:none}}
body.claro .abrir{background:var(--cereza);color:var(--leche)}
body.claro .abrir i{background:var(--leche)}
body.claro .abrir i::before,body.claro .abrir i::after{background:var(--cereza)}
body.claro .dudas>summary:hover .abrir{background:var(--vino)}

.faq summary::after{width:28px;height:28px;background:var(--chicle) no-repeat center/14px 14px;background-image:linear-gradient(var(--noche),var(--noche)),linear-gradient(var(--noche),var(--noche));background-size:14px 3px,3px 14px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--chicle)}
.s-leche .faq summary::after,body.claro .faq summary::after{background-color:var(--cereza);background-image:linear-gradient(var(--leche),var(--leche)),linear-gradient(var(--leche),var(--leche))}
.s-leche .faq summary:hover,body.claro .faq summary:hover{color:var(--cereza)}

/* ═════ AJUSTES 6/10 (3): botón enorme en lugar del título "Cómo se pide", popup fuera de zona ═════ */
.cta-enorme{justify-content:center;margin-bottom:clamp(26px,3.6vw,44px)}
.btn.enorme{font:400 clamp(26px,4.2vw,56px)/1 var(--f-grito);text-transform:uppercase;letter-spacing:.005em;padding:clamp(20px,2.4vw,30px) clamp(30px,4.4vw,64px);min-height:0;border-radius:999px;box-shadow:0 14px 34px rgba(30,10,15,.45);transition:transform .15s,background .15s}
.btn.enorme:hover{transform:translateY(-2px)}
@media (max-width:520px){.btn.enorme{width:100%;font-size:clamp(22px,7vw,30px);padding-inline:18px}}

.aviso-wa{margin-top:2px;padding:14px 16px;border-radius:6px;background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.45);font-size:19px;line-height:1.45}
.aviso-wa b{color:#7CF0A8}

.popup-fondo{position:fixed;inset:0;z-index:1000;background:rgba(30,10,15,.72);display:grid;place-items:center;padding:16px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.popup-fondo[hidden]{display:none}
.popup{background:var(--vino-2);color:var(--leche);border-radius:14px;max-width:440px;width:100%;padding:clamp(24px,4vw,34px);display:grid;gap:14px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:popup-in .18s ease-out}
.popup .carita{color:var(--chicle);white-space:nowrap}
.popup h2{font-size:clamp(28px,6vw,40px)}
.popup p{font-size:19px;line-height:1.45;margin:0}
.popup .acciones{justify-content:center;flex-wrap:wrap}
@keyframes popup-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.popup{animation:none}}
.co-top .co-hero h1{white-space:nowrap;font-size:clamp(26px,7.4vw,92px)}

/* ═════ Página de gracias: semáforo (verde = salió bien, amarillo = Abitab/Redpagos, rojo = no se completó) ═════ */
.semaforo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
@media (max-width:760px){.semaforo{grid-template-columns:1fr}}
.sem{border-radius:10px;padding:clamp(22px,3vw,36px);display:grid;gap:12px;align-content:start;border:1px solid;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sem h2{font-size:clamp(24px,2.6vw,34px);margin:0}
.sem p{margin:0;max-width:62ch}
.sem .acciones{margin-top:6px}
.sem-ok{grid-column:1/-1;background:rgba(46,204,113,.13);border-color:rgba(46,204,113,.55);padding:clamp(28px,4.4vw,56px)}
.sem-ok h2{color:#8FF0B4}
.sem-ok p{font-size:clamp(19px,1.9vw,23px);line-height:1.5}
.sem-ok .gracias-grande{font:700 clamp(50px,12.5vw,150px)/1 var(--f-marca);letter-spacing:-.04em;color:var(--leche);text-transform:lowercase;margin:0 0 .12em;max-width:none;overflow-wrap:normal}
.sem-ok .guino{font-weight:700;color:var(--chicle)}
.sem-espera{background:rgba(255,196,0,.11);border-color:rgba(255,196,0,.5)}
.sem-espera h2{color:#FFD76A}
.sem-mal{background:rgba(224,35,58,.15);border-color:rgba(224,35,58,.6)}
.sem-mal h2{color:#FF8A98}


/* ── Actualización 17/10 ── */
.head.centro{justify-items:center;text-align:center}
.head.centro h2{margin-inline:auto}

/* Galería: cinta que pasa sola (sin imán, para que el movimiento sea parejo) */
.galeria{scroll-snap-type:none;scroll-behavior:auto}
.galeria figure{scroll-snap-align:none}
.gal-abrir{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:inherit;overflow:hidden}
.gal-abrir img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;-webkit-user-drag:none;user-select:none}
.gal-abrir:hover img,.gal-abrir:focus-visible img{transform:scale(1.04)}
.gal-abrir:focus-visible{outline:3px solid var(--chicle);outline-offset:-3px}

/* Visor de fotos */
.visor{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(18,4,8,.9);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));touch-action:pan-y}
.visor-foto{margin:0;max-width:min(92vw,1400px);max-height:86vh;display:grid;place-items:center}
.visor-foto img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.visor-flecha,.visor-cerrar{position:absolute;border:0;border-radius:50%;background:rgba(30,10,15,.75);cursor:pointer;width:56px;height:56px}
.visor-flecha{top:50%;transform:translateY(-50%)}
.visor-flecha.ant{left:max(12px,env(safe-area-inset-left,0px))}
.visor-flecha.sig{right:max(12px,env(safe-area-inset-right,0px))}
.visor-flecha::before{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-top:4px solid var(--leche);border-right:4px solid var(--leche)}
.visor-flecha.ant::before{transform:translateX(3px) rotate(-135deg)}
.visor-flecha.sig::before{transform:translateX(-3px) rotate(45deg)}
.visor-cerrar{top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
.visor-cerrar::before,.visor-cerrar::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:3px;background:var(--leche);border-radius:2px}
.visor-cerrar::before{transform:translate(-50%,-50%) rotate(45deg)}
.visor-cerrar::after{transform:translate(-50%,-50%) rotate(-45deg)}
.visor-flecha:hover,.visor-cerrar:hover{background:var(--cereza)}
.visor-n{position:absolute;bottom:max(14px,env(safe-area-inset-bottom,0px));left:0;right:0;margin:auto;text-align:center;font-size:15px;letter-spacing:.08em;opacity:.8}
@media (max-width:620px){.visor-flecha{width:46px;height:46px;top:auto;bottom:max(10px,env(safe-area-inset-bottom,0px));transform:none}}
body.visor-abierto{overflow:hidden}
.visor[hidden]{display:none}

/* Redes oficiales */
.redes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.redes a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 18px;border-radius:40px;background:var(--vino-2);color:var(--leche);text-decoration:none;font-weight:700;font-size:16px;transition:background-color .15s}
.redes a:hover{background:var(--cereza)}
.redes svg{width:22px;height:22px;flex:none}
footer.pie .redes{margin-top:22px}
.redes.grande a{background:var(--noche)}

/* Contacto */
.contacto-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:820px){.contacto-in{grid-template-columns:1fr}}
.contacto-txt{display:grid;gap:20px;align-content:start}
.form-contacto{display:grid;gap:8px;background:var(--vino-2);padding:clamp(20px,3vw,32px);border-radius:8px;position:relative}
.form-contacto label{font-weight:700;font-size:18px;margin-top:8px}
.form-contacto input,.form-contacto textarea{width:100%;min-height:56px;padding:12px 14px;background:var(--noche);color:var(--leche);border:1px solid rgba(249,217,222,.38);border-radius:6px;font:400 19px/1.3 var(--f-texto)}
.form-contacto textarea{min-height:120px;resize:vertical}
.form-contacto input:focus,.form-contacto textarea:focus{outline:3px solid var(--chicle);outline-offset:1px;border-color:var(--chicle)}
.form-contacto [aria-invalid="true"]{border-color:var(--cereza);border-width:2px}
.form-contacto .btn{margin-top:14px;justify-self:start}
.form-estado{min-height:1.5em;font-size:17px}
.form-estado.ok{color:var(--chicle);font-weight:700}
.form-estado.mal{color:#FF8A98}

/* Latido del botón grande y aparición suave al bajar */
@media (prefers-reduced-motion:no-preference){
  .btn.enorme{animation:latido 2.8s ease-in-out infinite}
  .btn.enorme:hover,.btn.enorme:focus-visible{animation-play-state:paused}
  @keyframes latido{0%,60%{transform:scale(1);box-shadow:0 14px 34px rgba(30,10,15,.45),0 0 0 0 rgba(255,143,171,.55)}68%{transform:scale(1.045)}76%{transform:scale(.99)}84%{transform:scale(1.03)}100%{transform:scale(1);box-shadow:0 14px 34px rgba(30,10,15,.45),0 0 0 22px rgba(255,143,171,0)}}
  .rev{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .rev.pre{opacity:0;transform:translateY(26px)}
}

.prod-fuente{position:absolute;width:2px;height:2px;opacity:.01;pointer-events:none;left:0;top:0}


/* ═════════════ Actualización 22/10: promo, checks, tres pantallas en PC, hero del celular, pie nuevo ═════════════ */

/* Franja de arriba: Uruguay + precio de lanzamiento */
.franja-promo{position:relative;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;padding:9px 16px;background:var(--cereza);color:var(--leche);font-size:16px;font-weight:600;line-height:1.3;text-align:center}
.franja-promo b{font:400 19px/1 var(--f-grito)}
.franja-promo s{opacity:.75}
.franja-promo .sep{opacity:.7}
.bandera{width:25px;height:17px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(30,10,15,.25)}
.promo-vencida .promo-on{display:none!important}

/* Hero: el título principal (H1) dice qué es; el lema queda arriba con su estilo de siempre */
.hero-h1{font-family:var(--f-texto);font-weight:600;text-transform:none;letter-spacing:0;line-height:1.3;font-size:clamp(20px,1.9vw,26px);max-width:30ch;margin:0}
.hero-precio{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0}
.pc{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--f-grito)}
.pc b{font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--leche)}
.pc s{font-size:clamp(20px,1.8vw,28px);opacity:.72;text-decoration-thickness:3px}
.hero-precio>span.promo-on{background:var(--chicle);color:var(--noche);font-weight:700;font-size:clamp(14px,1.25vw,17px);padding:6px 13px;border-radius:999px;line-height:1.2}
.tag-bolitas{position:absolute;z-index:4;background:var(--leche);color:var(--vino);font:700 clamp(14px,1.15vw,17px)/1 var(--f-texto);padding:10px 15px;border-radius:999px;box-shadow:0 8px 22px rgba(30,10,15,.35);white-space:nowrap;pointer-events:none}
.tag-bolitas::after{content:"";position:absolute}

/* Checks (formas de pago) */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4svh,16px)}
.checks li{display:flex;gap:14px;align-items:center;font-size:clamp(21px,1.9vw,27px);font-weight:700;line-height:1.2}
.ic-check{flex:none;width:1.2em;height:1.2em}
.ic-check circle{fill:var(--chicle)}
.ic-check path{fill:none;stroke:var(--noche);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.checks.mini{gap:7px}
.checks.mini li{font-size:clamp(16px,1.9svh,19px);font-weight:600;gap:10px}
.s-leche .ic-check circle,body.claro .ic-check circle{fill:var(--cereza)}
.s-leche .ic-check path,body.claro .ic-check path{stroke:var(--leche)}
body.claro .s-leche .checks{margin-top:8px}

/* Precio: grande, con la promo y los checks bien legibles */
.precio{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px)}
.precio-num{display:grid;gap:clamp(8px,1.2svh,14px);justify-items:start;line-height:.82}
.precio-num .etq{font:400 clamp(17px,1.6vw,24px)/1 var(--f-grito);text-transform:uppercase;background:var(--chicle);color:var(--noche);padding:8px 14px;border-radius:6px;letter-spacing:.02em}
.precio-num b{font-size:clamp(96px,12.5vw,200px)}
.precio-num .antes{font:400 clamp(26px,2.5vw,40px)/1 var(--f-grito);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.precio-num .antes s{opacity:.72;text-decoration-thickness:4px}
.precio-num .antes em{font:700 clamp(17px,1.5vw,22px)/1 var(--f-texto);background:var(--cereza);color:var(--leche);padding:9px 15px;border-radius:999px}
.precio-num .unidad{display:block;margin:0;font:400 clamp(16px,1.5vw,21px)/1.2 var(--f-grito);letter-spacing:.06em;color:var(--chicle);text-transform:uppercase}
.precio-der{display:grid;gap:clamp(14px,2svh,22px);align-content:center}
.precio-t{font:400 clamp(30px,3.2vw,48px)/1 var(--f-grito);text-transform:uppercase;margin:0}
.precio-datos{font-size:clamp(18px,1.55vw,22px);line-height:1.45;max-width:54ch}
.sello{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.sello svg{width:36px;height:36px;padding:5px;border-radius:50%;background:var(--chicle)}
@media (max-width:760px){.precio{grid-template-columns:1fr}}

/* Tarjetas parejas, pasos y bloque de Handy */
.p2-in{display:grid;gap:clamp(18px,3vw,36px)}
.tile{align-content:start}
.tile p{max-width:30ch}
.como .cta-enorme{margin-bottom:clamp(20px,3vw,40px)}

/* Pie: logo y redes a la izquierda; privacidad y datos legales a la derecha */
.pie-in{display:flex;justify-content:space-between;align-items:center;gap:22px 40px;flex-wrap:wrap}
.pie-izq{display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap}
footer.pie .redes{margin-top:0}
.pie-der{display:grid;gap:4px;justify-items:end;text-align:right}
.pie-links{display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:flex-end;font-weight:700;margin-bottom:2px}
.pie-links a{color:var(--leche)}
@media (max-width:820px){.pie-der{justify-items:start;text-align:left}.pie-links{justify-content:flex-start}}

/* Visor de fotos más chico: se ve el fondo alrededor */
.visor-foto{max-width:min(85vw,1300px);max-height:78vh}
.visor-foto img{max-height:78vh}

/* Título de la galería que va rotando */
.rota span{display:inline-block;transition:opacity .45s ease,transform .45s ease}
.rota span.sale{opacity:0;transform:translateY(-12px)}
.rota span.entra{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){.rota span{transition:none}}

/* Galería: las fotos nuevas son apaisadas (16:9) */
.galeria figure{aspect-ratio:16/9}

/* Guía (tabla de costos) */
.guia .lead{margin-bottom:8px}
.tabla-caja{overflow-x:auto}
.guia table{width:100%;border-collapse:collapse;font-size:clamp(17px,1.6vw,20px);margin-top:8px}
.guia caption{caption-side:bottom;text-align:left;font-size:15px;opacity:.8;padding-top:10px}
.guia th,.guia td{text-align:left;padding:14px 12px;background:var(--vino-2)}
.guia tbody tr+tr th,.guia tbody tr+tr td{border-top:4px solid var(--noche)}
.guia td{text-align:right;font:400 clamp(22px,2.2vw,30px)/1 var(--f-grito);color:var(--chicle);white-space:nowrap}
.guia thead th{background:transparent;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--chicle)}
.guia thead th:last-child{text-align:right}
.guia a{color:var(--chicle)}
.faq a{color:var(--chicle);text-underline-offset:4px}

/* Barra de compra del celular con la promo */
.barra-cta span b{font-weight:400}
.barra-cta span s{font:400 17px/1 var(--f-grito);opacity:.7;margin-left:8px}

/* ── PC: la portada (hero + galería) y el bloque de los cuadros ocupan una pantalla cada uno; el resto entra en la tercera ── */
@media (min-width:1000px) and (min-height:560px){
  .p1{display:flex;flex-direction:column;min-height:100svh}
  .p1 .hero{flex:1 1 auto;display:flex;flex-direction:column}
  .p1 .hero-in{flex:1 1 auto;width:100%;min-height:0;align-items:stretch}
  .p1 .hero-txt{gap:clamp(8px,1.5svh,18px);padding-block:clamp(14px,3svh,36px);align-content:center}
  .p1 .hero-txt .logo{width:auto;height:clamp(84px,15.5svh,200px)}
  .p1 .claim{font-size:clamp(20px,3.3svh,38px)}
  .p1 .hero-h1{font-size:clamp(18px,2.6svh,28px)}
  .p1 .pc b{font-size:clamp(30px,5svh,56px)}
  .p1 .pc s{font-size:clamp(18px,2.8svh,30px)}
  .p1 .hero .btn{min-height:clamp(48px,6.4svh,66px);font-size:clamp(18px,2.2svh,22px);padding-block:8px}
  .p1 .hero-prod{min-height:0}
  .p1 .badge72 b{font-size:clamp(56px,10svh,112px)}
  .galeria-sec{padding-block:clamp(12px,2.4svh,28px) clamp(14px,2.8svh,32px)}
  .galeria-sec .head{margin-bottom:clamp(10px,1.8svh,22px)}
  .galeria-sec h2{font-size:clamp(28px,4.8svh,58px)}
  .galeria figure{flex:0 0 auto;height:clamp(150px,26svh,300px);width:auto}

  .p2{min-height:100svh;display:flex;align-items:center;padding-block:clamp(18px,3svh,40px)}
  .p2-in{width:100%;gap:clamp(12px,2.4svh,28px)}
  .p2 .tiles{gap:12px}
  .p2 .tile{min-height:0;padding:clamp(16px,2.8svh,34px) clamp(20px,2.4vw,36px);gap:clamp(8px,1.4svh,14px)}
  .p2 .tile b{font-size:clamp(28px,4.8svh,52px)}
  .p2 .tile p{font-size:clamp(17px,2.15svh,21px)}
  .p2 .como .cta-enorme{margin-bottom:clamp(12px,2.4svh,28px)}
  .p2 .btn.enorme{font-size:clamp(26px,5svh,54px);padding:clamp(12px,2.1svh,26px) clamp(30px,4vw,60px)}
  .p2 .paso{padding:clamp(14px,2.3svh,28px) clamp(16px,1.8vw,28px);gap:clamp(4px,1svh,10px)}
  .p2 .paso .num{font-size:clamp(36px,6svh,66px)}
  .p2 .paso h3{font-size:clamp(19px,2.6svh,27px)}
  .p2 .paso p{font-size:clamp(16px,2.05svh,19px)}
  .p2 .seguro-bloque{padding:clamp(14px,2.3svh,28px) clamp(20px,2.6vw,38px);margin-top:clamp(8px,1.2svh,12px)}
  .p2 .seguro-bloque svg{width:clamp(40px,6svh,66px)}
  .p2 .seguro-bloque h3{font-size:clamp(22px,3.3svh,36px)}
  .p2 .seguro-bloque p{font-size:clamp(16px,2.05svh,20px);margin-top:4px}

  .p3 .precio-sec{padding-block:clamp(26px,5svh,64px)}
  .p3 .precio-num b{font-size:clamp(90px,19svh,200px)}
  .franja-plegable{padding-block:clamp(20px,3.4svh,38px)}
  .franja-plegable .dudas>summary h2{font-size:clamp(34px,6svh,64px)}
  footer.pie{padding-block:clamp(20px,3.4svh,38px)}
}

/* ── Celular: la portada entra entera en la primera pantalla (logo, lema, título, precio, botones y el chori completo) ── */
@media (max-width:820px){
  .p1 .hero{min-height:calc(100svh - 58px);display:flex;flex-direction:column}
  .p1 .hero-in{flex:1 1 auto;grid-template-rows:auto minmax(190px,1fr);min-height:0;gap:0}
  .p1 .hero-txt{gap:11px;padding-block:20px 4px}
  .p1 .hero-txt .logo{width:min(56vw,300px)}
  .p1 .claim{font-size:clamp(21px,6vw,28px)}
  .p1 .hero-h1{font-size:clamp(18px,4.9vw,22px)}
  .p1 .pc b{font-size:clamp(32px,9vw,42px)}
  .p1 .pc s{font-size:20px}
  .p1 .hero .btn{min-height:52px;font-size:19px;padding:10px 24px}
  .p1 .hero .btn.grande{padding-inline:30px}
  .p1 .hero .block{height:46%;min-height:200px}
  .p1 .hero-prod{min-height:190px;height:auto}
  .p1 .badge72{right:16px;bottom:12px}
  .p1 .badge72 b{font-size:48px}
  .p1 .badge72 span{font-size:12px}
  .rota{min-height:1.95em;display:flex;align-items:center;justify-content:center}
  .franja-promo{font-size:14px;padding:8px 12px}
  .franja-promo b{font-size:17px}
}

/* Checkout: checks de pago y aviso de la promo en el resumen */
.seguro{display:grid;gap:10px}
.seguro p{margin:0}
.resumen-checks li{font-size:17px;gap:10px}
.promo-nota{margin:0;font-weight:700;color:var(--chicle);font-size:17px;line-height:1.4}
.precio-num .unidad span{display:inline}
.pie-izq{flex-direction:column;align-items:flex-start;gap:14px}
@media (min-width:821px){.pie-in{flex-wrap:nowrap}}

/* Notebooks (pantalla baja): checks en dos columnas y pie más bajo, para que la última parte entre lo más posible */
@media (min-width:1000px) and (max-height:780px){
  .precio-der .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
  .precio-der .checks li{font-size:clamp(18px,1.5vw,22px)}
  .p3 .precio-num b{font-size:clamp(80px,17svh,140px)}
  .precio-t{font-size:clamp(26px,5svh,40px)}
  .precio-datos{font-size:17px}
  footer.pie img{height:34px}
  .pie-izq{flex-direction:row;align-items:center}
  .redes a{min-height:40px;padding:8px 14px;font-size:15px}
  .pie-der{font-size:14px}
}
.fp-corto{display:none}
@media (max-width:820px){.fp-largo{display:none}.fp-corto{display:inline}}

@media (max-width:820px){.rota{font-size:clamp(24px,6.6vw,30px);min-height:2.1em}}

/* ═════ 22/10 (3): franja quieta con latido, etiqueta pegada a los pompones, botón Pedilo grande y siempre rojo ═════ */
.franja-promo{font-size:17px;padding:10px 16px;gap:6px 12px}
.franja-promo b{font-size:21px}
.franja-promo .bandera{width:28px;height:19px}
.fp-late{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .fp-late{animation:fp-latido 2.6s ease-in-out infinite;transform-origin:50% 60%}
  @keyframes fp-latido{0%,55%,100%{transform:scale(1);text-shadow:none}65%{transform:scale(1.16);text-shadow:0 0 14px rgba(249,217,222,.85)}75%{transform:scale(.98)}85%{transform:scale(1.08)}}
}
@media (max-width:820px){.franja-promo{font-size:15px;padding:8px 12px}.franja-promo b{font-size:19px}}

/* El producto, su video y la etiqueta giran juntos: la etiqueta siempre queda al lado de los pompones */
.prod-giro{position:absolute;left:58%;top:50%;height:96%;aspect-ratio:250/1300;--giro:24deg;transform:translate(-50%,-50%) rotate(var(--giro));filter:drop-shadow(0 30px 40px rgba(20,4,8,.55))}
.hero .hero-prod .prod-giro>img,.hero-prod .prod-giro>img{position:absolute;left:0;top:0;width:100%;height:100%;transform:none;animation:none;filter:none}
.hero .hero-prod .prod-giro>canvas,.hero-prod .prod-giro>canvas{position:absolute;left:50%;top:-6.13%;height:107.84%;width:auto;transform:translateX(-50%);animation:none;filter:none}
.prod-giro.animado>img{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.prod-giro{animation:sway 5.2s ease-in-out infinite alternate}}
.hero.noche .prod-giro{--giro:-22deg;left:44%}
@media (prefers-reduced-motion:no-preference){.hero.noche .prod-giro{animation-name:sway2}}
/* pompones: borde izquierdo ~18 %, a la altura del 24 % de la foto */
.prod-giro .tag-bolitas{left:17%;top:25%;right:auto;margin:0;transform-origin:100% 50%;transform:translate(calc(-100% - 12px),-50%) rotate(calc(-1 * var(--giro)))}
.prod-giro .tag-bolitas::after{right:-8px;left:auto;top:50%;bottom:auto;margin:-7px 0 0;border:7px solid transparent;border-right:0;border-left:9px solid var(--leche)}
@media (max-width:820px){
  .p1 .prod-giro{left:50%;top:52%;height:min(94vw,420px);--giro:64deg}
  @media (prefers-reduced-motion:no-preference){.p1 .prod-giro{animation:sway-cel 5.2s ease-in-out infinite alternate}
    @keyframes sway-cel{0%{transform:translate(-50%,-49%) rotate(67deg)}50%{transform:translate(-51%,-53%) rotate(58deg)}100%{transform:translate(-49%,-50%) rotate(65deg)}}}
  .hero.noche .prod-giro{left:50%}
  /* en el celu la etiqueta va arriba de los pompones, con la flecha hacia abajo */
  .prod-giro .tag-bolitas{left:46%;top:21%;transform-origin:50% 100%;transform:translate(-50%,calc(-100% - 12px)) rotate(calc(-1 * var(--giro)))}
  .prod-giro .tag-bolitas::after{right:auto;left:50%;top:auto;bottom:-8px;margin:0 0 0 -7px;border:7px solid transparent;border-bottom:0;border-top:9px solid var(--leche)}
}

/* Botón para pedir: grande, rojo vibrante siempre (también al pasar el mouse) */
.btn.pedir{background:var(--cereza);color:var(--leche);font:400 clamp(24px,2.2vw,32px)/1 var(--f-grito);text-transform:uppercase;letter-spacing:.01em;
  min-height:clamp(64px,5.6vw,80px);padding:12px clamp(40px,4vw,64px);border-radius:999px;box-shadow:0 12px 30px rgba(224,35,58,.35),0 6px 16px rgba(30,10,15,.35)}
.btn.pedir:hover{background:#F2304A;transform:translateY(-1px)}
.btn.pedir:active{background:#D41F35;transform:none}
.btn:not(.sec):not(.sec-vino):not(.leche):not(.vino):hover{background:#F2304A}
.hero .btn.sec{font-size:17px;min-height:52px;padding:10px 26px;opacity:.9}
.precio-cta{flex-wrap:nowrap;gap:18px;align-items:center}
.precio-cta .btn.pedir{flex:1 1 auto;min-height:clamp(70px,6.4vw,92px);font-size:clamp(28px,2.8vw,40px)}
.precio-cta .sello{flex:none;max-width:9.5em;line-height:1.25}
@media (min-width:1000px) and (min-height:560px){
  .p1 .hero .btn.pedir{min-height:clamp(56px,8.2svh,82px);font-size:clamp(22px,3.5svh,34px);padding-inline:clamp(36px,4vw,60px)}
  .p1 .hero .btn.sec{min-height:clamp(44px,5.6svh,56px);font-size:clamp(15px,1.9svh,18px)}
}
@media (max-width:820px){
  .p1 .hero .btn.pedir{min-height:60px;font-size:26px;padding-inline:38px}
  .p1 .hero .btn.sec{min-height:48px;font-size:16px;padding-inline:20px}
  .precio-cta{flex-wrap:wrap}
  .precio-cta .btn.pedir{width:100%}
}
/* la etiqueta contrarresta el balanceo del chori, así el texto queda siempre derecho */
@media (prefers-reduced-motion:no-preference){
  .prod-giro .tag-bolitas{animation:tag-pc 5.2s ease-in-out infinite alternate}
  @keyframes tag-pc{0%{transform:translate(calc(-100% - 12px),-50%) rotate(-27deg)}50%{transform:translate(calc(-100% - 12px),-50%) rotate(-18deg)}100%{transform:translate(calc(-100% - 12px),-50%) rotate(-25deg)}}
  .hero.noche .prod-giro .tag-bolitas{animation-name:tag-noche}
  @keyframes tag-noche{0%{transform:translate(calc(-100% - 12px),-50%) rotate(26deg)}50%{transform:translate(calc(-100% - 12px),-50%) rotate(17deg)}100%{transform:translate(calc(-100% - 12px),-50%) rotate(24deg)}}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .p1 .prod-giro .tag-bolitas{animation-name:tag-cel}
  @keyframes tag-cel{0%{transform:translate(-50%,calc(-100% - 12px)) rotate(-67deg)}50%{transform:translate(-50%,calc(-100% - 12px)) rotate(-58deg)}100%{transform:translate(-50%,calc(-100% - 12px)) rotate(-65deg)}}
}
@media (min-width:1000px) and (min-height:560px){.p3 .precio-sec{padding-block:clamp(22px,4.2svh,56px)}}
.resumen #pagar{font:400 clamp(24px,2vw,30px)/1 var(--f-grito);text-transform:uppercase;min-height:72px;box-shadow:0 12px 30px rgba(224,35,58,.35)}

/* Latido leve en los botones para pedir (se frena al pasar el mouse) */
@media (prefers-reduced-motion:no-preference){
  .btn.pedir,.resumen #pagar{animation:pedir-latido 3.2s ease-in-out infinite}
  .btn.pedir:hover,.btn.pedir:focus-visible,.resumen #pagar:hover,.resumen #pagar:disabled{animation:none}
  @keyframes pedir-latido{0%,62%,100%{transform:scale(1)}70%{transform:scale(1.045)}78%{transform:scale(.995)}86%{transform:scale(1.025)}}
}
/* candado de "Pago seguro": círculo perfecto, sin que el flex lo achique */
.sello svg{flex:0 0 auto;width:40px;height:40px;min-width:40px;aspect-ratio:1/1;box-sizing:border-box;padding:7px;border-radius:50%;background:var(--chicle)}

/* 22/10 (4): chori un poco más chico y más abajo (no toca la franja en ningún momento del balanceo); descuento más visible */
@media (min-width:821px){.prod-giro{height:88%;top:51.5%}}
.precio-num .antes{font-size:clamp(40px,3.8vw,62px);gap:18px}
.precio-num .antes s{opacity:.8;text-decoration-thickness:5px}
.precio-num .antes em{font:400 clamp(24px,2.3vw,36px)/1 var(--f-grito);text-transform:uppercase;letter-spacing:.01em;padding:12px 20px;box-shadow:0 8px 22px rgba(224,35,58,.4)}
@media (prefers-reduced-motion:no-preference){
  .precio-num .antes em{display:inline-block;animation:pedir-latido 3.2s ease-in-out infinite;animation-delay:1.2s}
}
@media (min-width:1000px) and (max-height:780px){.precio-num .antes{font-size:clamp(32px,6svh,48px)}.precio-num .antes em{font-size:clamp(20px,3.6svh,28px);padding:9px 16px}}
.precio-num .antes{flex-wrap:nowrap;white-space:nowrap;font-size:clamp(34px,3.1vw,54px);gap:14px}
.precio-num .antes em{font-size:clamp(20px,1.75vw,30px);padding:11px 16px}
@media (max-width:420px){.precio-num .antes{flex-wrap:wrap;white-space:normal}}

/* ═════════════ 23/10: página /links (stickers de la calle) ═════════════ */
body.pag-links{background:var(--vino);min-height:100svh}
.lk-main{position:relative;overflow:hidden;min-height:100svh;display:grid;justify-items:center;padding:clamp(28px,6svh,56px) 16px calc(28px + env(safe-area-inset-bottom))}
.lk-giant{position:absolute;left:50%;bottom:-.16em;transform:translateX(-50%);font-family:var(--f-marca);font-weight:700;font-size:clamp(220px,62vw,520px);line-height:.8;letter-spacing:-.05em;color:var(--giant);white-space:nowrap;pointer-events:none;user-select:none}
.lk-caja{position:relative;z-index:1;width:100%;max-width:460px;display:grid;justify-items:center;gap:14px;text-align:center}
.lk-logo img{display:block;width:min(250px,64vw);height:auto}
.lk-claim{font:400 clamp(20px,5.6vw,26px)/1 var(--f-grito);text-transform:uppercase;color:var(--leche);margin-top:4px}
.lk-claim em{font-style:normal;color:var(--chicle)}
.lk-lead{font-size:17px;line-height:1.4;max-width:30ch;margin:0 auto}
.lk-promo{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;margin:2px 0 0}
.lk-promo b{font:400 38px/1 var(--f-grito);color:var(--leche)}
.lk-promo s{font:400 20px/1 var(--f-grito);opacity:.72;text-decoration-thickness:3px}
.lk-promo span{flex-basis:100%;font-size:14px;font-weight:700;color:var(--chicle)}
.lk-pedir{width:100%;margin:4px 0 6px}
.lk-lista{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:10px}
.lk{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 16px 10px 12px;border-radius:16px;background:var(--vino-2);color:var(--leche);text-decoration:none;text-align:left;border:1px solid rgba(249,217,222,.14);transition:background-color .15s,transform .15s}
.lk:hover,.lk:focus-visible{background:#5A0C1F;transform:translateY(-1px)}
.lk:active{transform:none}
.lk-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--noche);color:var(--chicle)}
.lk-ic svg{width:24px;height:24px}
.lk.wa .lk-ic{background:#25D366;color:#fff}
.lk.web .lk-ic{background:var(--chicle);color:var(--noche)}
.lk-txt{flex:1 1 auto;display:grid;gap:2px;min-width:0}
.lk-txt b{font-size:19px;line-height:1.15}
.lk-txt small{font-size:15px;line-height:1.2;color:color-mix(in srgb,var(--leche) 78%,transparent);overflow-wrap:anywhere}
.lk-flecha{flex:none;width:20px;height:20px;color:var(--chicle)}
.lk-legal{margin-top:10px;font-size:13px;line-height:1.4;opacity:.7}

/* ═════════════ 23/10: arreglos SOLO del celular (en la compu no cambia nada) ═════════════ */
@media (max-width:820px){
  /* "Dos bolitas incluidas": sigue flotando con el chori, pero arriba de los pompones, sin taparlo.
     Primero se endereza (contragiro) y después se corre hacia arriba y a la izquierda, ya en el eje de la pantalla. */
  .p1 .prod-giro .tag-bolitas{left:30%;top:16%;transform-origin:0 0;transform:rotate(-64deg) translate(-84%,calc(-100% - 34px))}
  .p1 .prod-giro .tag-bolitas::after{left:84%}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .p1 .prod-giro .tag-bolitas{animation:tag-cel-2 5.2s ease-in-out infinite alternate}
  @keyframes tag-cel-2{0%{transform:rotate(-67deg) translate(-84%,calc(-100% - 34px))}50%{transform:rotate(-58deg) translate(-84%,calc(-100% - 34px))}100%{transform:rotate(-65deg) translate(-84%,calc(-100% - 34px))}}
}
@media (max-width:620px){
  /* botón grande con el texto centrado */
  .s-foto .btn.enorme{text-align:center;line-height:1.02;font-size:clamp(22px,6.6vw,28px);padding:16px 18px}
  .p2 .como .cta-enorme,.como .cta-enorme{margin-bottom:12px}
  /* los 4 pasos en 2 x 2, compactos: botón + pasos + "nunca vemos tu tarjeta" entran en una pantalla */
  .s-foto .pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .s-foto .paso{padding:12px 13px 14px;gap:5px}
  .s-foto .paso .num{font-size:34px}
  .s-foto .paso h3{font-size:16.5px;line-height:1.15}
  .s-foto .paso p{font-size:14.5px;line-height:1.35}
  .s-foto .paso .checks.mini{gap:4px}
  .s-foto .paso .checks.mini li{font-size:14px;gap:7px}
  .s-foto .seguro-bloque{grid-template-columns:auto 1fr;gap:12px;padding:12px 14px;margin-top:8px}
  .s-foto .seguro-bloque svg{width:38px}
  .s-foto .seguro-bloque h3{font-size:17.5px;line-height:1.2}
  .s-foto .seguro-bloque p{font-size:14px;line-height:1.35;margin-top:3px}
}

/* 23/10 (2): /links sin huecos (antes la grilla se estiraba en pantallas altas) y proporcionada a la pantalla */
.lk-main{align-content:center;padding-block:clamp(22px,5svh,56px) calc(clamp(22px,5svh,56px) + env(safe-area-inset-bottom))}
.lk-caja{align-content:start;gap:clamp(10px,1.7svh,16px)}
.lk-logo img{width:min(270px,66vw)}
.lk-claim{font-size:clamp(21px,6vw,28px);margin-top:2px}
.lk-lead{font-size:clamp(16px,4.3vw,18px)}
.lk-promo b{font-size:clamp(36px,10vw,46px)}
.lk-promo s{font-size:clamp(19px,5vw,24px)}
.lk-promo span{font-size:clamp(13px,3.6vw,15px)}
.lk-pedir{min-height:clamp(60px,8svh,76px);font-size:clamp(24px,6.6vw,30px);margin:clamp(2px,.8svh,8px) 0 clamp(4px,1svh,10px)}
.lk-lista{gap:clamp(8px,1.2svh,12px)}
.lk{min-height:clamp(60px,8svh,72px)}
.lk-giant{bottom:-.2em;opacity:.9}
@media (min-width:900px){.lk-caja{max-width:480px}.lk-logo img{width:300px}}
/* /links en la compu: aprovecha el ancho como la portada. Texto y botón a la izquierda, el chori en el medio, los links a la derecha */
.lk-bloque,.lk-prod{display:none}
.lk-izq,.lk-der{display:contents}
@media (min-width:900px){
  .lk-main{justify-items:stretch;align-content:center;padding:clamp(24px,5svh,64px) clamp(32px,5vw,72px)}
  .lk-bloque{display:block;position:absolute;right:0;top:0;bottom:0;width:38%;background:var(--cereza)}
  .lk-giant{left:-2vw;top:50%;bottom:auto;transform:translateY(-52%);font-size:clamp(300px,36vw,560px);opacity:1}
  .lk-caja{max-width:1240px;margin:0 auto;grid-template-columns:minmax(0,1.05fr) minmax(0,.5fr) minmax(0,.95fr);align-items:center;justify-items:stretch;text-align:left;gap:clamp(20px,3vw,48px)}
  .lk-izq{display:grid;gap:clamp(12px,2.2svh,22px);justify-items:start}
  .lk-logo img{width:clamp(300px,30vw,460px)}
  .lk-claim{font-size:clamp(26px,2.4vw,40px);margin:0;white-space:nowrap}
  .lk-lead{font-size:clamp(19px,1.6vw,23px);margin:0;max-width:28ch}
  .lk-promo{justify-content:flex-start;gap:6px 14px}
  .lk-promo b{font-size:clamp(46px,4.6vw,68px)}
  .lk-promo s{font-size:clamp(22px,2vw,30px)}
  .lk-promo span{flex-basis:100%;font-size:16px}
  .lk-pedir{width:auto;margin:6px 0 0;min-height:clamp(64px,8.6svh,84px);padding-inline:clamp(40px,4vw,64px);font-size:clamp(24px,2.3vw,34px)}
  .lk-prod{display:block;position:relative;align-self:stretch;min-height:min(72svh,640px)}

  .lk-der{display:grid;gap:14px;align-content:center}
  .lk-lista{gap:12px}
  .lk{min-height:76px;padding:12px 20px 12px 14px;background:rgba(74,10,25,.92)}
  .lk:hover,.lk:focus-visible{background:var(--noche)}
  .lk-ic{width:50px;height:50px}
  .lk-txt b{font-size:20px}
  .lk-txt small{font-size:16px}
  .lk-legal{margin:4px 0 0;text-align:left;font-size:13px;opacity:.85}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .lk-giant{animation:deriva 14s ease-in-out infinite alternate}
}
@media (min-width:1600px){
  .lk-caja{max-width:1520px}
  .lk-logo img{width:clamp(460px,28vw,560px)}
  .lk-claim{font-size:clamp(40px,2.5vw,50px)}
  .lk-lead{font-size:clamp(23px,1.35vw,27px)}
  .lk-promo b{font-size:clamp(68px,4.2vw,84px)}
  .lk-promo span{font-size:18px}
  .lk-pedir{min-height:92px;font-size:38px}
  .lk-prod{min-height:min(80svh,860px)}
  .lk-lista{gap:14px}
  .lk{min-height:92px;padding:14px 24px 14px 16px;border-radius:20px}
  .lk-ic{width:60px;height:60px;border-radius:14px}
  .lk-ic svg{width:28px;height:28px}
  .lk-txt b{font-size:24px}
  .lk-txt small{font-size:18px}
  .lk-legal{font-size:15px}
}

/* 23/10 (3): /links sin precio, con "Oferta de lanzamiento" y el chori flotando también en el celular */
.lk-oferta{display:inline-block;margin:2px 0 0;padding:9px 16px;border-radius:999px;background:var(--chicle);color:var(--noche);font:400 clamp(14px,3.9vw,17px)/1.15 var(--f-grito);text-transform:uppercase;letter-spacing:.01em;box-shadow:0 8px 22px rgba(30,10,15,.35)}
@media (prefers-reduced-motion:no-preference){.lk-oferta{animation:pedir-latido 3.2s ease-in-out infinite;animation-delay:1.2s}}
/* celular: logo, lema, texto, oferta, chori en diagonal, botón (todo en la primera pantalla) y abajo los links */
@media (max-width:899px){
  .lk-logo{order:1}.lk-claim{order:2}.lk-lead{order:3}.lk-oferta{order:4}.lk-prod{order:5}.lk-pedir{order:6}.lk-lista{order:7}.lk-legal{order:8}
  .lk-main{align-content:start}
  .lk-caja{gap:clamp(8px,1.4svh,14px)}
  .lk-logo img{width:min(240px,60vw)}
  .lk-prod{display:block;position:relative;width:100%;height:clamp(190px,30svh,290px);pointer-events:none}

  .lk-pedir{margin:0 0 clamp(14px,3svh,26px)}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  @keyframes lk-sway-cel{0%{transform:translate(-50%,-48%) rotate(61deg)}50%{transform:translate(-51%,-54%) rotate(53deg)}100%{transform:translate(-49%,-50%) rotate(59deg)}}
}
/* compu: la oferta en lugar del precio */
@media (min-width:900px){.lk-oferta{font-size:clamp(16px,1.4vw,22px);padding:11px 20px}}
@media (min-width:1600px){.lk-oferta{font-size:24px;padding:13px 24px}}
.lk-oferta{display:grid;justify-items:inherit;gap:6px;padding:0;background:none;box-shadow:none;animation:none}
.lk-oferta b{display:inline-block;justify-self:center;white-space:nowrap;padding:10px 20px;border-radius:999px;background:var(--chicle);color:var(--noche);font:400 clamp(17px,4.8vw,21px)/1 var(--f-grito);text-transform:uppercase;box-shadow:0 8px 22px rgba(30,10,15,.35)}
.lk-oferta span{font:700 clamp(13px,3.6vw,15px)/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--chicle)}
@media (prefers-reduced-motion:no-preference){.lk-oferta{animation:none}.lk-oferta b{animation:pedir-latido 3.2s ease-in-out infinite;animation-delay:1.2s}}
@media (max-width:899px){
  .lk-prod::before{content:"";position:absolute;left:50%;top:50%;width:min(118%,520px);height:120%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(224,35,58,.85),rgba(224,35,58,.35) 60%,rgba(224,35,58,0))}
}
@media (min-width:900px){
  .lk-oferta{justify-items:start}
  .lk-oferta b{justify-self:start;font-size:clamp(20px,1.9vw,28px);padding:12px 24px}
  .lk-oferta span{font-size:clamp(14px,1.1vw,17px);padding-left:6px}
}
@media (min-width:1600px){.lk-oferta b{font-size:32px;padding:14px 28px}.lk-oferta span{font-size:19px}}

/* 23/10 (4): /links usa el mismo chori animado (video con transparencia) de la portada */
.lk-prod .prod-giro{left:50%;top:50%;height:100%;--giro:24deg}
.lk-prod .prod-giro>img{position:absolute;left:0;top:0;width:100%;height:100%}
.lk-prod .prod-giro>canvas{position:absolute;left:50%;top:-6.13%;height:107.84%;width:auto;transform:translateX(-50%)}
@media (max-width:899px){
  .lk-prod .prod-giro{height:142%;--giro:58deg;filter:drop-shadow(0 22px 26px rgba(20,4,8,.55))}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .lk-prod .prod-giro{animation:lk-sway-cel 5.2s ease-in-out infinite alternate}
}