
:root{--wine:#700000;--sky:#bfd4fa;--cream:#fcf4f1;--ink:var(--wine);--line:var(--wine)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Neue Montreal',Arial,sans-serif}button,select{font:inherit}button,a{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.announcement{background:var(--sky);color:var(--wine);text-align:center;padding:8px;font-size:10px;font-weight:800;letter-spacing:.18em}.site-header{height:90px;background:var(--wine);color:var(--cream);display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:24px;position:relative;z-index:10}.wordmark{width:166px;flex:none}.wordmark img{width:100%;display:block}.site-header nav{display:flex;align-items:center;gap:25px}.site-header nav a,.cart-trigger{font-size:11px;font-weight:800;letter-spacing:.035em}.site-header nav a:hover{text-decoration:underline}.cart-trigger,.mobile-toggle{border:0;background:none;color:var(--cream)}.cart-trigger span{display:inline-grid;place-items:center;color:var(--wine);background:var(--sky);width:24px;height:24px;border-radius:50%;margin-left:6px}.mobile-toggle{display:none;font-size:24px}.hero{background:var(--wine);color:var(--cream);min-height:760px;padding:42px 5.5% 92px;display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(420px,.95fr);align-items:start;column-gap:60px;overflow:hidden}
.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:800}
.hero h1,.section h2,.editorial h2,.feature h2{font-family:'BlurWeb',Arial,sans-serif;font-weight:700;letter-spacing:-.085em;line-height:.87}
.hero-v2 .hero-copy{padding-top:78px}
.hero-v2 h1{font-size:clamp(112px,16vw,260px);margin:0 0 30px;color:var(--cream);line-height:.82}
.hero-v2 h1 em,.section h2 i,.editorial h2 i,.feature h2 i{font-style:normal}
.hero-v2 p{max-width:520px;color:var(--cream);font-size:22px;line-height:1.16;margin:18px 0 56px}
.pill{display:inline-block;border:0;border-radius:999px;padding:18px 30px;font-size:13px;font-weight:800;letter-spacing:.02em;text-align:center}
.pill.light{background:var(--sky);color:var(--wine)}
.pill.dark{background:var(--cream);color:var(--wine)}
.pill.burgundy-btn{background:var(--wine);color:var(--cream)}
.hero-art{position:relative}
.hero-art-v2{padding-top:40px;display:flex;justify-content:flex-end}
.hero-main-v2{width:min(100%,760px);aspect-ratio:1/1;object-fit:cover;border-radius:38px;display:block}
.ticker{background:var(--sky);overflow:hidden;padding:19px 0;color:var(--wine);white-space:nowrap}.ticker div{font-family:'BlurWeb';font-weight:700;font-size:35px;letter-spacing:-.06em;word-spacing:15px}.section{padding:100px 6.5%}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px}.section-top p{max-width:300px;line-height:1.6;font-size:14px}.section h2{font-size:clamp(53px,7vw,98px);color:var(--wine);margin:23px 0 30px}.section h2 i{color:var(--wine)}.burgundy{color:var(--wine)}.filters{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}.filter{border:1px solid var(--wine);background:transparent;color:var(--wine);border-radius:30px;padding:11px 18px;font-size:11px;font-weight:800}.filter.active,.filter:hover{background:var(--wine);color:var(--cream)}.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:27px 16px}.product-card{min-width:0}.product-image{width:100%;border:0;background:var(--cream);padding:0;display:block;position:relative;overflow:hidden;aspect-ratio:3/4}.product-image img{height:100%;width:100%;object-fit:cover;transition:transform .45s}.product-image:hover img{transform:scale(1.045)}.product-image .tag{position:absolute;top:12px;left:12px;background:var(--cream);font-size:10px;font-weight:800;padding:8px 10px;border-radius:20px}.product-meta{display:flex;justify-content:space-between;gap:8px;margin-top:13px}.product-meta strong{font-size:15px}.product-meta span{font-size:11px;color:var(--wine)}.product-card .mini-link{background:none;border:0;text-decoration:underline;color:var(--wine);font-size:11px;font-weight:800;margin-top:9px;padding:0}.editorial{display:grid;grid-template-columns:1fr 1fr;background:var(--sky);min-height:640px}.editorial-picture img{width:100%;height:100%;object-fit:cover;display:block}.editorial-copy{color:var(--wine);padding:11% 10%;display:flex;flex-direction:column;align-items:start;justify-content:center}.editorial h2{font-size:clamp(60px,6.5vw,110px);margin:35px 0}.editorial h2 i{color:var(--cream)}.editorial p{font-size:16px;line-height:1.6;max-width:360px;margin-bottom:25px}.how h2 i{color:var(--wine)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}.steps article{border-top:2px solid var(--wine);padding:20px 0}.steps article span{font-size:12px;color:var(--wine);font-weight:800}.steps h3{font-size:27px;color:var(--wine);letter-spacing:-.04em}.steps p{line-height:1.5;font-size:14px;max-width:280px}.feature{background:var(--wine);color:var(--cream);display:grid;grid-template-columns:45% 55%;min-height:650px}.feature-copy{padding:13% 12%;display:flex;flex-direction:column;justify-content:center}.feature-copy>span{font-size:10px;font-weight:800;letter-spacing:.15em}.feature h2{font-size:clamp(60px,6vw,100px)}.feature p{line-height:1.6;max-width:300px}.feature img{width:100%;height:100%;object-fit:cover}.personalized{text-align:center;background:var(--cream)}.personalized h2{margin:25px auto}.personalized p{max-width:550px;margin:0 auto 30px;line-height:1.6}footer{background:var(--wine);color:var(--sky);padding:45px 6.5% 24px}.footer-word{font-family:'BlurWeb';font-size:clamp(110px,24vw,360px);line-height:1;font-weight:700;letter-spacing:-.1em;text-align:center}.footer-bottom{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--sky);padding-top:25px;color:var(--cream);font-size:11px}.overlay{position:fixed;inset:0;background:#700000a0;z-index:90}.drawer{position:fixed;z-index:100;right:0;top:0;bottom:0;width:min(440px,100vw);background:var(--cream);transform:translateX(102%);transition:transform .3s;display:flex;flex-direction:column;padding:25px}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.drawer-head h2{color:var(--wine);font-size:25px}.drawer-head button,.dialog-close{background:none;border:none;font-size:24px}.cart-items{flex:1;overflow:auto;padding:20px 0}.cart-row{display:grid;grid-template-columns:80px 1fr;gap:13px;margin:0 0 16px}.cart-row img{width:80px;height:105px;object-fit:cover}.cart-row p{margin:6px 0;color:var(--wine);font-size:12px}.cart-row button{border:0;background:none;padding:0;color:var(--wine);text-decoration:underline;font-size:11px}.drawer-bottom{border-top:1px solid var(--line);padding-top:18px}.drawer-bottom p{font-size:12px;line-height:1.5}.product-dialog{border:0;padding:0;background:var(--cream);width:min(940px,95vw);max-height:90vh;overflow:auto;box-shadow:0 20px 70px #70000055}.product-dialog::backdrop{background:#700000bd}.dialog-close{position:absolute;right:15px;top:12px;z-index:3;color:var(--wine)}.detail-grid{display:grid;grid-template-columns:1.05fr 1fr}.detail-image{width:100%;height:100%;max-height:660px;object-fit:cover}.detail-copy{padding:65px 42px 45px}.detail-copy h2{font-size:56px;letter-spacing:-.06em;line-height:1;color:var(--wine);margin:15px 0}.detail-copy p{font-size:14px;line-height:1.6}.detail-copy label{display:block;margin:20px 0 9px;font-weight:800;font-size:11px;letter-spacing:.08em}.detail-copy select{width:100%;padding:14px;background:transparent;border:1px solid var(--wine)}.detail-copy .pill{width:100%;margin-top:26px}.detail-note{font-size:11px!important;color:var(--wine)}.detail-thumbs{display:flex;gap:9px;margin-top:20px}.detail-thumbs button{padding:0;border:2px solid transparent;background:none}.detail-thumbs button.selected{border-color:var(--wine)}.detail-thumbs img{width:66px;height:85px;object-fit:cover;display:block}
@media(max-width:950px){.site-header nav{gap:13px}.site-header nav a{font-size:9px}.products{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr 1fr;column-gap:36px;min-height:640px}.hero-v2 .hero-copy{padding-top:48px}.hero-v2 h1{font-size:clamp(90px,14vw,170px)}.hero-v2 p{font-size:19px;max-width:420px}.hero-main-v2{aspect-ratio:1/1;border-radius:28px}}
@media(max-width:700px){.site-header{height:68px;padding:0 5%}.wordmark{width:125px}.mobile-toggle{display:block}.site-header nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--wine);padding:20px;flex-direction:column;align-items:start;z-index:50}.site-header nav.open{display:flex}.cart-trigger{margin-left:auto;font-size:10px}.hero{grid-template-columns:1fr;padding:30px 7% 70px;min-height:0;row-gap:34px}.hero-v2 .hero-copy{padding-top:10px}.hero-v2 h1{font-size:clamp(74px,24vw,118px);margin-bottom:22px}.hero-v2 p{font-size:16px;max-width:320px;margin:12px 0 28px;line-height:1.2}.hero-art-v2{padding-top:0}.hero-main-v2{width:100%;aspect-ratio:1/1;border-radius:26px}.section{padding:72px 6%}.section-top{display:block}.section h2{font-size:54px}.section-top p{margin-bottom:25px}.products{gap:22px 11px}.product-meta{flex-direction:column;gap:3px}.product-meta strong{font-size:13px}.editorial,.feature{grid-template-columns:1fr}.editorial-picture{height:450px}.editorial-copy{padding:65px 8%}.editorial h2,.feature h2{font-size:70px}.steps{grid-template-columns:1fr;gap:8px}.feature img{height:410px;grid-row:1}.feature-copy{padding:65px 8%}.footer-bottom{flex-direction:column}.detail-grid{grid-template-columns:1fr}.detail-image{height:400px}.detail-copy{padding:30px 23px 35px}.detail-copy h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* TABLO brand system: user-provided local fonts (not distributed in this zip).
   Add licensed font files locally in /fonts using the filenames below. */
@font-face{font-family:"BlurWeb";src:local("BlurWeb Bold W03 Regular"),local("BlurWeb Bold"),url("fonts/BlurWeb-Bold W03 Regular.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:local("Neue Montreal Medium"),local("NeueMontreal-Medium"),url("fonts/NeueMontreal-Medium.otf") format("opentype");font-weight:400 900;font-style:normal;font-display:swap}
body,button,select,input,textarea{font-family:"Neue Montreal",Arial,sans-serif;font-weight:500}
h1,h2,h3,.ticker,.footer-word{font-family:"BlurWeb",Arial,sans-serif!important;font-weight:400!important;letter-spacing:normal}
.footer-brand{display:flex;justify-content:center;align-items:center;min-height:225px;padding:5px 0 26px}
.footer-brand img{display:block;max-width:min(800px,95%);width:100%;height:auto;mix-blend-mode:normal}
.site-header,.hero,.feature,footer{background:var(--wine)}
.editorial,.ticker,.announcement{background:var(--sky)}
.collection,.how,.personalized{background:var(--cream)}
.section h2 i,.how h2 i{color:var(--wine)}
.product-image{background:var(--cream)}
.product-image .tag{background:var(--cream);color:var(--wine)}
.product-dialog,.drawer{background:var(--cream);color:var(--wine)}
.detail-copy .pill,.pill.burgundy-btn{color:var(--cream)}
.steps article,.footer-bottom{border-color:var(--wine)}
@media(max-width:700px){.footer-brand{min-height:120px}}

/* El hero usa exactamente BlurWeb cuando se instala o coloca la fuente. */
.hero-v2 h1{font-family:"BlurWeb",sans-serif!important;font-weight:400!important;letter-spacing:0!important}

/* V5: titular a escala de la columna, sin solaparse con el mockup. */
.hero-v2{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);column-gap:clamp(28px,4vw,70px)}
.hero-v2 .hero-copy,.hero-v2 .hero-art{min-width:0}
.hero-v2 h1{font-size:clamp(70px,7.4vw,124px);line-height:.94;max-width:100%;overflow-wrap:normal}
.hero-v2 .hero-art{height:auto}
@media(max-width:950px) and (min-width:701px){
 .hero-v2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
 .hero-v2 h1{font-size:clamp(58px,7vw,78px)}
}
@media(max-width:700px){
 .hero-v2{grid-template-columns:minmax(0,1fr);gap:28px}
 .hero-v2 h1{font-size:clamp(70px,17vw,104px);line-height:.94}
 .hero-v2 .hero-art{width:100%}
}

/* V6 — Titular grande, proporcionado a su columna y sin superposición. */
.hero-v2{grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);column-gap:clamp(24px,3vw,52px)}
.hero-v2 .hero-copy{min-width:0;container-type:inline-size}
.hero-v2 h1{font-size:clamp(90px, 10vw, 178px);font-size:min(18.5cqw, 178px);line-height:.9;max-width:100%;margin-bottom:32px;white-space:nowrap;overflow:visible}
.hero-v2 .hero-art{min-width:0;height:auto}
@media(max-width:950px) and (min-width:701px){
 .hero-v2{grid-template-columns:minmax(0, 1.17fr) minmax(0, .83fr);column-gap:22px}
 .hero-v2 h1{font-size:18.5cqw}
}
@media(max-width:700px){
 .hero-v2{grid-template-columns:minmax(0, 1fr);gap:28px}
 .hero-v2 h1{font-size:19cqw;line-height:.93}
}

/* Footer: original transparent TABLO logo, no surrounding canvas */
.footer-brand img{width:min(800px,92%);max-width:100%;height:auto;object-fit:contain}


/* v12: WhatsApp Business + Mercado Pago en preparación */
.drawer-bottom .whatsapp-btn{display:block;width:100%;background:var(--sky);color:var(--wine);margin-bottom:10px}
.drawer-bottom .copy-order-btn{display:block;width:100%;background:transparent;color:var(--wine);border:1px solid var(--wine);border-radius:999px;padding:12px;font-size:11px;margin-bottom:12px}
.drawer-bottom .mp-btn{display:block;width:100%;background:var(--wine);color:var(--cream);opacity:.55;cursor:not-allowed;font-size:10px;padding:14px 10px}
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:50;background:var(--sky);color:var(--wine);border:2px solid var(--wine);border-radius:999px;padding:12px 17px;box-shadow:0 5px 18px #70000040;font-size:11px;font-weight:800;display:flex;align-items:center;gap:8px}
.whatsapp-float:hover{background:var(--cream)}
@media(max-width:700px){.whatsapp-float{right:12px;bottom:12px;padding:12px}.whatsapp-float span{display:none}}

.detail-price{font-family:"BlurWeb",Arial,sans-serif;font-size:38px!important;color:var(--wine);margin:20px 0 5px}.cart-total{border-top:1px solid var(--wine);display:flex;justify-content:space-between;padding-top:18px;margin-top:18px;font-size:18px;color:var(--wine)}.cart-shipping{font-size:12px;color:var(--wine)}


/* v16: hero tipográfico */
.hero.hero-type{display:block;min-height:auto;padding:54px 5.5% 70px;background:var(--wine);color:var(--cream)}
.hero-type-inner{max-width:1200px;margin:0 auto}
.hero-kicker{display:block;color:var(--sky);margin-bottom:28px}
.hero-type h1{display:flex;flex-direction:column;gap:0;font-family:"BlurWeb",Arial,sans-serif;font-size:clamp(130px,18vw,280px);line-height:.78;letter-spacing:-.06em;margin:0;color:var(--cream)}
.hero-type h1 span:last-child{color:var(--sky)}
.hero-type p{max-width:560px;margin:34px 0 28px;color:var(--cream);font-size:21px;line-height:1.18}
.hero-type .pill{margin-bottom:52px}
.hero-type-line{padding-top:26px;border-top:1px solid var(--sky);font-family:"BlurWeb",Arial,sans-serif;font-size:clamp(26px,3.7vw,54px);line-height:.95;letter-spacing:-.04em;color:var(--sky)}
@media(max-width:950px){.hero.hero-type{padding:44px 5.5% 58px}.hero-type h1{font-size:clamp(110px,17vw,210px)}.hero-type p{font-size:19px;max-width:470px}.hero-type-line{font-size:clamp(24px,4vw,40px)}}
@media(max-width:700px){.hero.hero-type{padding:34px 7% 48px}.hero-kicker{margin-bottom:18px}.hero-type h1{font-size:clamp(72px,24vw,120px);line-height:.82}.hero-type p{font-size:16px;max-width:320px;margin:22px 0 24px}.hero-type .pill{margin-bottom:34px;width:auto}.hero-type-line{font-size:24px;line-height:.95;padding-top:18px}}

/* v17 */
.hero-type h1 span:last-child{color:var(--cream)!important}
.hero-type .pill{margin-bottom:0}
.hero.hero-type{padding-bottom:95px}
.payment-label{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:var(--wine)}
#paymentChoice{display:block;width:100%;padding:12px;border:1px solid var(--wine);border-radius:4px;background:var(--cream);color:var(--wine)}
.payment-total{font-size:22px!important;font-weight:700!important;color:var(--wine);margin:12px 0 5px!important}
@media(max-width:700px){.hero.hero-type{padding-bottom:55px}}

/* v19: interlineado editorial compacto */
.hero-type h1{line-height:.76;gap:0}
.hero-type p{line-height:1.12}
.section h2,.editorial h2,.feature h2,.personalized h2{line-height:.88}
.steps h3{line-height:1.05}
@media(max-width:700px){.hero-type h1{line-height:.8}.section h2,.editorial h2,.feature h2,.personalized h2{line-height:.91}.hero-type p{line-height:1.17}}

/* v20 — WhatsApp al lado izquierdo, también en móvil */
.whatsapp-float{left:18px;right:auto}
@media(max-width:700px){.whatsapp-float{left:12px;right:auto}}

/* v21: WhatsApp a la derecha e ícono + cinta animada */
.whatsapp-float{left:auto;right:18px}
.whatsapp-float svg{display:block;flex-shrink:0}
.ticker{overflow:hidden}
.ticker .ticker-track{display:flex;width:max-content;gap:0;animation:tablo-marquee 24s linear infinite;will-change:transform}
.ticker .ticker-track span{display:block;white-space:nowrap;flex:none}
@keyframes tablo-marquee{to{transform:translateX(-50%)}}
@media(max-width:700px){.whatsapp-float{left:auto;right:12px}}
@media(prefers-reduced-motion:reduce){.ticker .ticker-track{animation:none;will-change:auto}}

/* v22: precio por transferencia destacado, precio de lista tachado */
.catalog-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.05}
.catalog-price s,.crossed-price,.cart-crossed{text-decoration:line-through;opacity:.65;font-size:12px;font-family:"Neue Montreal",Arial,sans-serif;font-weight:500}
.catalog-price strong{font-family:"BlurWeb",Arial,sans-serif;font-size:25px;line-height:1;color:var(--wine)}
.catalog-price small,.price-caption{font-family:"Neue Montreal",Arial,sans-serif;font-size:10px;color:var(--wine)}
.detail-price{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.detail-price .crossed-price{font-size:16px}
.detail-price .transfer-price{font-family:"BlurWeb",Arial,sans-serif;font-size:clamp(38px,5vw,58px);line-height:1.05}
.detail-price .price-caption{font-size:12px}
.cart-price{font-family:"BlurWeb",Arial,sans-serif;font-size:22px}
@media(max-width:700px){.catalog-price{align-items:flex-start}.catalog-price strong{font-size:22px}.product-meta{gap:6px}}

/* V24 · Vista de producto en celulares: nunca recortar la obra completa. */
@media (max-width: 700px) {
  .product-dialog {
    width: min(100%, 95vw);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .product-dialog .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-dialog .detail-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}
