*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--letra);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
.contenedor{width:min(1120px,100% - 32px);margin-inline:auto}
section{padding:72px 0}
h1,h2,h3{font-family:var(--titulos);line-height:1.15;margin:0 0 .4em}
.boton{display:inline-flex;align-items:center;gap:.5em;background:var(--acento);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:999px;border:0;box-shadow:0 8px 22px -10px var(--acento);transition:transform .15s}
.boton:hover{transform:translateY(-2px)}
.boton.sec{background:transparent;color:var(--acento);box-shadow:inset 0 0 0 2px var(--acento)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,230px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px}
.carrusel .prod{scroll-snap-align:start}
.prod{margin:0;background:var(--tarjeta);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.25)}
.prod-img{border:0;padding:0;background:#fff;cursor:zoom-in;aspect-ratio:4/5;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.prod-img:hover img{transform:scale(1.04)}
.prod figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-nombre{font-weight:600;font-size:.95rem;flex:1}
.prod-pedir{align-self:flex-start;font-size:.85rem;font-weight:700;text-decoration:none;color:var(--acento)}
.prod-pedir::after{content:" →"}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista li{display:flex;gap:14px;align-items:center;background:var(--tarjeta);border-radius:var(--radio);padding:16px 18px}
.lista .ico{font-size:1.5rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;flex:none}
video{width:100%;border-radius:var(--radio);background:#000;display:block}
.wa-flotante{position:fixed;right:18px;bottom:18px;z-index:20;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.wa-flotante svg{width:30px;height:30px;fill:#fff}
.visor{position:fixed;inset:0;z-index:30;background:rgba(20,15,25,.82);display:grid;place-items:center;padding:16px}
.visor[hidden]{display:none}
.visor-caja{background:#fff;border-radius:18px;padding:16px;max-width:520px;width:100%;max-height:92vh;overflow:auto;text-align:center;position:relative}
.visor-caja img{max-height:66vh;margin:0 auto;border-radius:10px}
.visor-caja p{font-weight:700;margin:12px 0}
.visor-cerrar{position:absolute;top:8px;right:8px;border:0;background:#fff;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
footer{padding:32px 0 96px;font-size:.85rem;opacity:.75;text-align:center}
@media (max-width:600px){section{padding:52px 0}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.prod figcaption{padding:10px}}

/* ===== Nivel pro: animaciones y tarjetas ===== */
@keyframes flotar{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes mancha{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.08)}66%{transform:translate(-20px,15px) scale(.95)}}
@keyframes brillo{0%{left:-60%}60%,100%{left:130%}}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes degradado{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes entra{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.revelar{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.revelar.visto{opacity:1;transform:none}
.hero-anim>*{animation:entra .9s cubic-bezier(.2,.7,.2,1) both}
.hero-anim>*:nth-child(2){animation-delay:.12s}.hero-anim>*:nth-child(3){animation-delay:.24s}.hero-anim>*:nth-child(4){animation-delay:.36s}.hero-anim>*:nth-child(5){animation-delay:.48s}
.manchas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.manchas i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;animation:mancha 14s ease-in-out infinite}
.manchas i:nth-child(1){width:340px;height:340px;background:var(--m1);top:-80px;left:-60px}
.manchas i:nth-child(2){width:300px;height:300px;background:var(--m2);top:30%;right:-80px;animation-delay:-5s}
.manchas i:nth-child(3){width:240px;height:240px;background:var(--m3);bottom:-60px;left:35%;animation-delay:-9s}
.con-manchas{position:relative;overflow:hidden}.con-manchas>.contenedor{position:relative;z-index:1}
.degradado{background:linear-gradient(90deg,var(--acento),var(--m2b,#f5a),var(--acento));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:degradado 6s ease infinite}
.boton{position:relative;overflow:hidden;isolation:isolate}
.boton::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:brillo 3.2s ease-in-out infinite;z-index:-1}
.boton.sec::after{display:none}
.wa-flotante{animation:latido 2.4s infinite}
.flotantes{position:relative;height:420px}
.flotantes img{position:absolute;width:44%;border-radius:20px;background:#fff;padding:8px;box-shadow:0 30px 60px -28px rgba(0,0,0,.45);animation:flotar 6s ease-in-out infinite}
.flotantes img:nth-child(1){--r:-6deg;left:2%;top:8%}
.flotantes img:nth-child(2){--r:5deg;left:50%;top:0;animation-delay:-2s;z-index:2}
.flotantes img:nth-child(3){--r:3deg;left:22%;top:46%;animation-delay:-4s;z-index:3}
/* tarjetas */
.prod{position:relative;border:1px solid rgba(0,0,0,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.prod:hover{transform:translateY(-8px);box-shadow:0 26px 50px -24px rgba(0,0,0,.4)}
.prod-img{margin:10px 10px 0;border-radius:calc(var(--radio) - 6px);background:linear-gradient(160deg,#fff,#f4f1f4)}
.prod-etiqueta{position:absolute;top:18px;left:18px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(0,0,0,.3)}
.prod-pedir{display:inline-flex;align-items:center;gap:6px;background:var(--acento);color:#fff!important;padding:7px 14px;border-radius:999px;font-size:.8rem;transition:filter .2s,transform .2s}
.prod-pedir::after{content:""}.prod-pedir:hover{filter:brightness(1.08);transform:scale(1.04)}
.prod-pedir svg{width:14px;height:14px;fill:currentColor}
/* franja animada */
.marquesina{overflow:hidden;background:var(--acento);color:#fff;padding:14px 0;font-weight:700;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquesina>div{display:inline-flex;gap:48px;padding-right:48px;animation:desliza 28s linear infinite}
.marquesina:hover>div{animation-play-state:paused}
/* cifras */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cifra{background:var(--tarjeta);border-radius:var(--radio);padding:24px 18px;text-align:center;border:1px solid rgba(0,0,0,.06);box-shadow:0 14px 34px -26px rgba(0,0,0,.4)}
.cifra b{display:block;font-family:var(--titulos);font-size:clamp(2rem,4vw,2.8rem);color:var(--acento);line-height:1}
.cifra span{display:block;margin-top:8px;font-size:.9rem;opacity:.8}
/* listas */
.lista li{border:1px solid rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s}
.lista li:hover{transform:translateX(6px);box-shadow:0 12px 28px -20px rgba(0,0,0,.4)}
.lista .ico{border-radius:14px;background:linear-gradient(135deg,var(--m1),var(--m3))}
.video-marco{position:relative;border-radius:calc(var(--radio) + 6px);padding:8px;background:linear-gradient(135deg,var(--m1),var(--m2),var(--m3));box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.video-marco video{border-radius:var(--radio)}
@media (max-width:800px){.cifras{grid-template-columns:1fr 1fr}.flotantes{height:300px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.revelar{opacity:1;transform:none}}
body:not([data-catalogo="pestanas"]) .prod-etiqueta{display:none}
/* cintillo oncoffee.dev */
.cintillo{background:#1E1A1D;color:#F3EDE8;font-size:.82rem;position:relative;z-index:25}
.cintillo-in{width:min(1120px,100% - 32px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;flex-wrap:wrap;padding:4px 0}
.cintillo-marca{display:inline-flex;align-items:center;gap:8px;text-decoration:none;opacity:.9}
.cintillo-marca:hover{opacity:1}.cintillo-marca b{color:#E8B98A}
.cintillo-marca svg{width:18px;height:18px;color:#E8B98A}
.cintillo-tabs{display:flex;gap:4px;background:rgba(255,255,255,.08);padding:3px;border-radius:999px}
.cintillo-tabs a{text-decoration:none;padding:5px 12px;border-radius:999px;white-space:nowrap;transition:background .2s}
.cintillo-tabs a:hover{background:rgba(255,255,255,.12)}
.cintillo-tabs a.activa{background:#F3EDE8;color:#1E1A1D;font-weight:700}
@media (max-width:600px){.cintillo-in{justify-content:center}.cintillo-tabs a{padding:5px 9px}}