/*
Theme Name: CBR Impresores
Description: Theme custom para CBR Impresores — stickers y adhesivos personalizados por m².
Author: Krea & Cuenta SpA
Version: 0.1.0
Text Domain: cbr-impresiones
*/

/* ============================================================
   TOKENS
============================================================ */
:root{
  --c-cyan:#00A8F0;
  --c-magenta:#F80088;
  --c-yellow:#F8F000;
  --c-ink:#0A0A0A;
  --c-white:#FFFFFF;
  --c-paper:#FAFAFA;
  --c-gray-100:#F2F2F2;
  --c-gray-300:#DEDEDE;
  --c-gray-500:#8A8A8A;
  --c-gray-700:#3D3D3D;

  --font-display:'Sora', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;

  --shadow-sm: 0 2px 10px rgba(10,10,10,.06);
  --shadow-md: 0 10px 30px rgba(10,10,10,.10);
  --shadow-lg: 0 22px 50px rgba(10,10,10,.16);
  --shadow-glow: 0 8px 28px rgba(0,168,240,.35);

  --gradient-brand: linear-gradient(135deg, var(--c-cyan) 0%, var(--c-magenta) 100%);

  --container: 1240px;

  /* Easing tokens (skill: animate) */
  --ease-out-quint: cubic-bezier(.23,1,.32,1);
  --ease-out-cubic: cubic-bezier(.33,1,.68,1);
  --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
}

/* ============================================================
   RESET / BASE — regla global overflow-x obligatoria
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  overflow-x:hidden;margin:0;padding:0;
  font-family:var(--font-body);
  color:var(--c-ink);
  background:var(--c-white);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.1;letter-spacing:-.01em}
p{margin:0 0 1em}
button{font-family:inherit;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-cyan);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:7px 16px 7px 12px;border-radius:999px;
  background:linear-gradient(0deg, rgba(0,168,240,.08), rgba(0,168,240,.08)), var(--c-white);
  border:1px solid rgba(0,168,240,.25);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gradient-brand);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,168,240,.15);
}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:16px 32px;border-radius:999px;overflow:hidden;isolation:isolate;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  border:2px solid var(--c-ink);
  transition:transform .25s var(--ease-out-quint), box-shadow .25s var(--ease-out-quint), border-color .25s var(--ease-out-quint), color .25s var(--ease-out-quint);
}
.btn::after{
  content:"→";display:inline-block;
  transition:transform .25s var(--ease-out-quint);
}
.btn:hover::after{transform:translateX(4px)}
.btn-primary{background:var(--c-ink);color:var(--c-white)}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-brand);opacity:0;
  transition:opacity .3s var(--ease-out-quint);
}
.btn-primary:hover{border-color:transparent;transform:translateY(-3px);box-shadow:var(--shadow-glow)}
.btn-primary:hover::before{opacity:1}
.btn-primary:active{transform:scale(.97)}
.btn-outline{background:var(--c-white);color:var(--c-ink)}
.btn-outline:hover{background:var(--c-ink);color:var(--c-white);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-outline:active{transform:scale(.97)}

/* ============================================================
   ANIMACIÓN — reveal on scroll + microinteracciones
   (skill: animate — solo transform/opacity, ease-out-quint, 500-700ms)
============================================================ */
.reveal{
  opacity:0;transform:translateY(40px) scale(.97);
  transition:opacity .8s var(--ease-out-quint), transform .8s var(--ease-out-quint);
  will-change:transform,opacity;
}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger > *{
  opacity:0;transform:translateY(32px) scale(.96);
  transition:opacity .7s var(--ease-out-quint), transform .7s var(--ease-out-quint);
}
.reveal-stagger.is-visible > *{opacity:1;transform:none}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:90ms}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:180ms}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:270ms}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:360ms}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:450ms}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:540ms}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:630ms}

/* Hero: entrada orquestada al cargar (no scroll-gated, siempre visible primero) */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__content > *{opacity:0;animation:heroIn .8s var(--ease-out-quint) forwards}
.hero__content .eyebrow{animation-delay:.05s}
.hero__content h1{animation-delay:.18s}
.hero__content p{animation-delay:.32s}
.hero__content .hero__ctas{animation-delay:.46s}
.hero__media img{
  animation:heroMediaIn 1.1s var(--ease-out-quint) both;
}
@keyframes heroMediaIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero__content > *,.hero__media img{animation:none!important;opacity:1!important;transform:none!important}
}

/* ============================================================
   HEADER
============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-gray-300);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 24px;max-width:var(--container);margin:0 auto;
}
.site-logo img{height:104px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav a{
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:10px 18px;border-radius:999px;color:var(--c-ink);
  transition:background .2s ease;
}
.main-nav a:hover,.main-nav a.is-active{background:var(--c-gray-100)}
.cart-link{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--c-magenta);color:var(--c-white)!important;
  padding:10px 20px!important;border-radius:999px;
  font-weight:700!important;
  box-shadow:0 4px 14px rgba(184,0,136,.35);
}
.cart-link:hover{background:var(--c-ink)!important}
.cart-count{
  background:var(--c-magenta);color:var(--c-white);
  font-size:11px;font-weight:800;min-width:19px;height:19px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;
}
.nav-toggle{display:none;background:none;border:none;font-size:26px;padding:6px}

/* ============================================================
   HERO
============================================================ */
.hero{position:relative;overflow:hidden;background:var(--c-paper)}
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;
  opacity:.35;pointer-events:none;
}
.hero::before{
  width:420px;height:420px;background:var(--c-cyan);top:-160px;left:-120px;
  animation:blobFloat 14s ease-in-out infinite;
}
.hero::after{
  width:380px;height:380px;background:var(--c-magenta);bottom:-180px;left:18%;
  animation:blobFloat 18s ease-in-out infinite reverse;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-20px) scale(1.08)}
}
.hero__media{width:100%;position:relative;z-index:1}
.hero__media img{width:100%;height:auto;display:block}
.hero__media picture{display:block}
.hero__content{
  position:absolute;top:0;left:0;height:100%;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 6% 0 6%;max-width:560px;
}
.hero__content h1{
  font-size:clamp(32px,5vw,54px);font-weight:800;
}
.hero__content h1 .accent{
  position:relative;color:var(--c-ink);white-space:nowrap;
}
.hero__content h1 .accent::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.34em;
  background:var(--gradient-brand);opacity:.32;z-index:-1;border-radius:3px;
}
.hero__content p{font-size:18px;color:var(--c-gray-700);max-width:440px}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after{animation:none}
}

/* ============================================================
   MARQUEE
============================================================ */
.marquee{
  background:var(--c-ink);color:var(--c-white);overflow:hidden;
  padding:16px 0;white-space:nowrap;
}
.marquee__track{
  display:inline-flex;align-items:center;gap:36px;
  animation:marqueeScroll 26s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:36px;
}
.marquee__track .dot{
  width:6px;height:6px;border-radius:50%;background:var(--gradient-brand);
  display:inline-block;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none;overflow-x:auto}
}

/* ============================================================
   SECTION: split (image + text)
============================================================ */
.section{padding:96px 0}
.section--tight{padding:72px 0}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.split.reverse .split__media{order:2}
.split.reverse .split__text{order:1}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.split__text h2{font-size:clamp(26px,3.4vw,38px)}
.split__text p{font-size:16px;color:var(--c-gray-700)}

.feature-list{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.feature-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:15px;color:var(--c-gray-700);
}
.feature-list .dot{
  flex-shrink:0;width:10px;height:10px;border-radius:50%;margin-top:6px;
}
.feature-list li:nth-child(1) .dot{background:var(--c-cyan)}
.feature-list li:nth-child(2) .dot{background:var(--c-magenta)}
.feature-list li:nth-child(3) .dot{background:var(--c-yellow)}
.feature-list strong{color:var(--c-ink);font-family:var(--font-display)}

/* ============================================================
   CATÁLOGO — product-grid / product-card
   (auto-fit: no requiere sincronizar columnas con cantidad de ítems)
============================================================ */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;
}
.product-card{
  position:relative;display:flex;flex-direction:column;background:var(--c-white);
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--c-gray-300);box-shadow:var(--shadow-sm);
  text-decoration:none;color:var(--c-ink);
  transition:transform .35s var(--ease-out-quint), box-shadow .35s var(--ease-out-quint), border-color .35s var(--ease-out-quint);
}
.product-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--gradient-brand);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out-quint);z-index:2;
}
.product-card:hover{
  transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent;
}
.product-card:hover::before{transform:scaleX(1)}
.product-card__media{
  aspect-ratio:4/3;overflow:hidden;background:var(--c-gray-100);
}
.product-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out-quint);
}
.product-card:hover .product-card__media img{transform:scale(1.06)}
.product-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card__body h3{font-size:17px;margin:0}
.product-card__price{font-family:var(--font-display);font-weight:700;color:var(--c-cyan);font-size:16px}
.product-card__price del{color:var(--c-gray-500);font-weight:400;margin-right:6px}
.product-card__cta{margin-top:auto;align-self:flex-start;pointer-events:none}

/* ============================================================
   PROCESO (3 pasos)
============================================================ */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;
}
.step-card{
  position:relative;background:var(--c-white);border-radius:var(--radius-md);
  padding:28px 26px;box-shadow:var(--shadow-sm);border:1px solid var(--c-gray-300);
  transition:transform .3s var(--ease-out-quint), box-shadow .3s var(--ease-out-quint), border-color .3s var(--ease-out-quint);
}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.step-card__num{
  font-family:var(--font-display);font-weight:800;font-size:14px;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-white);margin-bottom:16px;
}
.step-card:nth-child(1) .step-card__num{background:var(--c-cyan)}
.step-card:nth-child(2) .step-card__num{background:var(--c-magenta)}
.step-card:nth-child(3) .step-card__num{background:var(--c-yellow);color:var(--c-ink)}
.step-card h3{font-size:18px;margin-bottom:8px}
.step-card p{font-size:14px;color:var(--c-gray-700);margin:0}

/* ============================================================
   CTA BAND (fondo suave)
============================================================ */
.cta-band{
  position:relative;padding:110px 0;text-align:center;overflow:hidden;
  background-size:cover;background-position:center;isolation:isolate;
}
.cta-band::before{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.72);z-index:-1;
}
.cta-band::after{
  content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;
  background:var(--gradient-brand);opacity:.14;filter:blur(90px);
  transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
}
.cta-band h2{font-size:clamp(26px,4vw,42px);max-width:640px;margin:0 auto 18px}
.cta-band p{max-width:520px;margin:0 auto 32px;color:var(--c-gray-700);font-size:17px}

/* ============================================================
   FOOTER
============================================================ */
.site-footer{background:var(--c-ink);color:var(--c-white);padding:64px 0 28px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand img{height:34px;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer-brand p{color:var(--c-gray-300);font-size:14px;max-width:280px}
.footer-col h4{font-family:var(--font-display);font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;color:var(--c-gray-300)}
.footer-col a{display:block;color:var(--c-white);font-size:15px;padding:6px 0;opacity:.9}
.footer-col a:hover{opacity:1;color:var(--c-cyan)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding-top:24px;
  font-size:13px;color:var(--c-gray-500);flex-wrap:wrap;gap:10px;
}
.footer-credit{
  font-weight:700;text-decoration:none;
  background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .2s ease;
}
.footer-credit:hover{opacity:.8}
.footer-credit strong{font-weight:800}

/* Botón WhatsApp en la página de confirmación de pedido (order-received) */
.cbr-thankyou-wa{
  margin:28px 0;padding:24px;border-radius:var(--radius-md);
  background:linear-gradient(0deg,rgba(37,211,102,.06),rgba(37,211,102,.06)),var(--c-white);
  border:1px solid rgba(37,211,102,.3);text-align:center;
}
.cbr-thankyou-wa__title{
  font-family:var(--font-display);font-weight:800;font-size:18px;margin:0 0 6px;
}
.cbr-thankyou-wa__text{color:var(--c-gray-700);font-size:14px;margin:0 0 16px;max-width:48ch;margin-left:auto;margin-right:auto}
.cbr-thankyou-wa__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 28px;
  border-radius:999px;background:#25D366;color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:800;font-size:15px;
  transition:transform .22s var(--ease-out-quint),box-shadow .22s var(--ease-out-quint);
}
.cbr-thankyou-wa__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,211,102,.35)}
.cbr-thankyou-wa__btn svg{width:20px;height:20px;fill:#fff}

/* WhatsApp flotante — con halo pulsante */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:200;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .25s var(--ease-out-quint);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px;fill:#fff;position:relative;z-index:2}
.wa-float img{width:30px;height:30px;position:relative;z-index:2}
.wa-float::before,.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;z-index:1;
  animation:waHalo 2.6s var(--ease-out-cubic) infinite;
}
.wa-float::after{animation-delay:1.3s}
@keyframes waHalo{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(2.1)}
}
@media (prefers-reduced-motion: reduce){
  .wa-float::before,.wa-float::after{animation:none;display:none}
}

/* ============================================================
   HERO — efecto typing
============================================================ */
.hero__typed{
  display:inline-flex;align-items:center;min-height:1.2em;
  color:var(--c-cyan);font-weight:800;
}
.hero__typed-cursor{
  display:inline-block;width:3px;height:1em;margin-left:4px;
  background:var(--c-magenta);border-radius:2px;
  animation:caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .hero__typed-cursor{animation:none;opacity:1}
}

/* ============================================================
   RESEÑAS GOOGLE
============================================================ */
.reviews{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:center}
.reviews__score{text-align:center}
.reviews__score-title{
  font-family:var(--font-display);font-weight:800;font-size:26px;
  letter-spacing:.02em;margin:0 0 8px;
}
.reviews__stars{display:flex;justify-content:center;gap:2px;margin-bottom:10px}
.reviews__stars svg{width:26px;height:26px;fill:#F5A623}
.reviews__count{font-size:14px;color:var(--c-gray-700);margin-bottom:12px}
.reviews__google-logo{height:34px;margin:0 auto;display:block}
.reviews__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
}
.review-card{
  background:var(--c-gray-100);border-radius:var(--radius-md);padding:22px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .3s var(--ease-out-quint), box-shadow .3s var(--ease-out-quint);
}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.review-card__head{display:flex;align-items:center;gap:12px}
.review-card__avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--gradient-brand);color:var(--c-white);
  font-family:var(--font-display);font-weight:800;font-size:18px;
}
.review-card__meta{flex:1;min-width:0}
.review-card__name{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.2}
.review-card__date{font-size:13px;color:var(--c-gray-500)}
.review-card__g{width:20px;height:20px;flex-shrink:0}
.review-card__stars{display:flex;gap:1px}
.review-card__stars svg{width:17px;height:17px;fill:#F5A623}
.review-card__text{font-size:15px;color:var(--c-gray-700);margin:0}
.reviews__pending{
  grid-column:1/-1;background:var(--c-gray-100);border:1px dashed var(--c-gray-300);
  border-radius:var(--radius-md);padding:28px;text-align:center;color:var(--c-gray-700);
}

/* ============================================================
   WOOCOMMERCE — página de producto (estilo pro)
============================================================ */
.woocommerce-breadcrumb{
  max-width:var(--container);margin:24px auto 0;padding:0 24px;
  font-size:13px;color:var(--c-gray-500);
}
.woocommerce-breadcrumb a{color:var(--c-gray-700)}
.woocommerce-breadcrumb a:hover{color:var(--c-cyan)}

.single-product div.product{
  max-width:var(--container);margin:0 auto;padding:40px 24px 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
}
.single-product div.product .woocommerce-product-gallery{
  width:100%;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--c-gray-100);box-shadow:var(--shadow-md);
}
.single-product div.product .summary{margin:0;display:flex;flex-direction:column;gap:6px}
.single-product .product_title{
  font-size:clamp(26px,3.2vw,38px);margin-bottom:6px;
}
.single-product div.product p.price,
.single-product div.product span.price{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);color:var(--c-ink);
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:linear-gradient(0deg,rgba(0,168,240,.1),rgba(0,168,240,.1));
  border:1px solid rgba(0,168,240,.3);border-radius:999px;
  padding:8px 20px;width:fit-content;margin:6px 0 14px;
}
.single-product div.product p.price del{color:var(--c-gray-500);font-weight:500;font-size:.7em}
.single-product div.product p.price ins{text-decoration:none}
.single-product .woocommerce-product-details__short-description{
  color:var(--c-gray-700);font-size:16px;margin-bottom:18px;
}

/* Tabla de variaciones — píldoras estilo Level Up */
.single-product form.cart{display:flex;flex-direction:column;gap:0}
.single-product table.variations{
  display:block;width:100%;border:none;background:transparent;margin:0 0 20px;
}
.single-product table.variations tbody{
  display:flex;flex-wrap:wrap;gap:18px 36px;width:100%;
}
.single-product table.variations tr{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:auto;border:none;background:transparent;
}
.single-product table.variations th,
.single-product table.variations td{
  display:block;width:auto;padding:0;border:none;background:transparent;
}
.single-product table.variations label{
  margin:0;font-family:var(--font-body);font-weight:600;font-size:14px;
  color:var(--c-gray-700);white-space:nowrap;text-transform:none;
}
.single-product table.variations select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  min-height:46px;padding:0 44px 0 20px;
  border:2px solid var(--c-cyan);border-radius:999px;
  background-color:var(--c-white);color:var(--c-ink);
  font-family:var(--font-display);font-weight:700;font-size:15px;line-height:46px;
  cursor:pointer;outline:none;box-shadow:none;min-width:200px;max-width:100%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2300A8F0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.single-product table.variations select:hover{box-shadow:0 0 0 4px rgba(0,168,240,.12)}
.single-product table.variations select:focus{box-shadow:0 0 0 4px rgba(0,168,240,.22)}
.single-product .reset_variations{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--c-gray-500);margin-top:10px;
}
.single-product .reset_variations:hover{color:var(--c-magenta)}
.single-product .woocommerce-variation-price{margin:0 0 16px}

/* Calculador de medidas — tarjeta destacada */
#price_calculator.wc-measurement-price-calculator-price-table{
  display:block!important;width:100%;margin:0 0 24px;
  background:var(--c-gray-100);border:1px solid var(--c-gray-300);
  border-radius:var(--radius-md);padding:22px 24px;
  border-collapse:separate;position:relative;overflow:hidden;
}
#price_calculator::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-brand);
}
#price_calculator tbody{display:flex;flex-direction:column;gap:14px;width:100%}
#price_calculator tr.price-table-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
}
#price_calculator td{padding:0;border:none;background:transparent}
#price_calculator td:first-child{
  font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--c-gray-700);
}
#price_calculator td:last-child{text-align:right!important;display:flex;align-items:center;gap:8px}
#price_calculator label{margin:0;font:inherit;color:inherit;cursor:default}
#price_calculator input.amount_needed{
  width:120px;min-height:46px;padding:0 16px;text-align:center;
  border:2px solid var(--c-cyan);border-radius:999px;background:var(--c-white);
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--c-ink);
  outline:none;transition:box-shadow .2s ease;
}
#price_calculator input.amount_needed:focus{box-shadow:0 0 0 4px rgba(0,168,240,.22)}
#price_calculator input.amount_needed::placeholder{color:var(--c-gray-500);font-weight:500}
#price_calculator .wc-measurement-price-calculator-input-help{display:none}
/* Fila de área total */
#price_calculator tr.total-amount{
  padding-top:14px;border-top:1px dashed var(--c-gray-300);
}
#price_calculator .wc-measurement-price-calculator-total-amount{
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--c-ink);
}
/* Fila de precio calculado — la más destacada */
#price_calculator tr.calculated-price{
  padding-top:14px;border-top:1px solid var(--c-gray-300);
}
#price_calculator tr.calculated-price td:first-child{
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--c-ink);
}
#price_calculator .product_price{
  font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--c-white);
  background:var(--gradient-brand);border-radius:999px;padding:8px 22px;display:inline-block;
}
#price_calculator .product_price .amount{color:inherit}

/* Cantidad + botón */
.single-product form.cart .quantity{
  display:inline-flex;align-items:stretch;
  border:2px solid var(--c-gray-300);border-radius:999px;overflow:hidden;
  width:auto;background:var(--c-white);
}
.single-product form.cart .quantity input.qty{
  -moz-appearance:textfield;appearance:textfield;
  width:56px;border:none;text-align:center;padding:0;line-height:44px;
  font-family:var(--font-display);font-weight:700;font-size:16px;background:transparent;
}
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button,
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.single-product form.cart .quantity .action{
  display:grid;place-items:center;width:42px;cursor:pointer;user-select:none;
  color:var(--c-gray-700);transition:background .2s ease, color .2s ease;
}
.single-product form.cart .quantity .action:hover{background:var(--c-gray-100);color:var(--c-cyan)}
.single-product form.cart .quantity .action svg{width:16px;height:16px}

.single-product .single_add_to_cart_button,
.single-product .cart .button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 36px;border:none;border-radius:999px;
  background:var(--c-ink);color:var(--c-white);
  font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.01em;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--ease-out-quint), box-shadow .25s var(--ease-out-quint);
}
.single-product .single_add_to_cart_button::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-brand);opacity:0;transition:opacity .3s var(--ease-out-quint);
}
.single-product .single_add_to_cart_button:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow)}
.single-product .single_add_to_cart_button:hover::before{opacity:1}
.single-product .single_add_to_cart_button:active{transform:scale(.98)}
.single-product .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.single-product form.cart .quantity + .single_add_to_cart_button{margin-left:14px}

/* Metadatos del producto */
.single-product .product_meta{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--c-gray-300);
  font-size:14px;color:var(--c-gray-500);display:flex;flex-direction:column;gap:6px;
}
.single-product .product_meta a{color:var(--c-gray-700)}
.single-product .product_meta a:hover{color:var(--c-cyan)}

/* Pestañas y relacionados */
.single-product .woocommerce-tabs{
  max-width:var(--container);margin:0 auto 80px;padding:0 24px;
  border:none;flex-direction:column;
}
.single-product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 24px;padding:0;border:none;
}
.single-product .woocommerce-tabs ul.tabs li{
  padding:0;border-radius:999px;border:2px solid var(--c-gray-300);
  transition:border-color .2s ease, background .2s ease;
}
.single-product .woocommerce-tabs ul.tabs li a{
  display:block;padding:10px 24px;
  font-family:var(--font-display);font-weight:700;font-size:14px;
}
.single-product .woocommerce-tabs ul.tabs li.active{background:var(--c-ink);border-color:var(--c-ink)}
.single-product .woocommerce-tabs ul.tabs li.active a{color:var(--c-white)}
.single-product .woocommerce-tabs .panel{padding:0;border:none}
.single-product .related.products,
.single-product .up-sells.products{
  max-width:var(--container);margin:0 auto 80px;padding:0 24px;
}
.single-product .related.products > h2,
.single-product .up-sells.products > h2{font-size:clamp(24px,3vw,34px);margin-bottom:28px}

/* ============================================================
   RESPONSIVE — breakpoints obligatorios 1024 / 900 / 600
============================================================ */
@media (max-width:1024px){
  .split{grid-template-columns:1fr;gap:36px}
  .split.reverse .split__media{order:1}
  .split.reverse .split__text{order:2}
  .steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:1024px){
  .single-product div.product{grid-template-columns:1fr;gap:36px}
  .reviews{grid-template-columns:1fr;gap:28px}
}
@media (max-width:900px){
  /* Hero mobile: el texto va DEBAJO de la imagen, no encima —
     así el contraste no depende de la foto de fondo. */
  .hero{display:flex;flex-direction:column}
  .hero__media{order:1}
  .hero__content{
    order:2;position:static;height:auto;max-width:100%;
    padding:32px 6% 40px;background:var(--c-white);
  }
  .hero__content h1{font-size:clamp(28px,7vw,40px)}
  .hero__content p{color:var(--c-gray-700);max-width:100%}
  .steps{grid-template-columns:1fr}
}
@media (max-width:600px){
  .main-nav{
    position:fixed;inset:64px 0 0 0;background:var(--c-white);
    flex-direction:column;align-items:stretch;padding:20px;gap:4px;
    display:none;
  }
  .main-nav.is-open{display:flex}
  .main-nav a{padding:16px 18px;border-bottom:1px solid var(--c-gray-100)}
  .nav-toggle{display:block}
  .site-logo img{height:68px}
  .hero__content{padding:0 5%;background:rgba(255,255,255,.85)}
  .hero__content h1{font-size:30px}
  .product-grid{grid-template-columns:1fr;gap:20px}
  .hero__content p{font-size:15px}
  .section{padding:56px 0}
  .footer-grid{grid-template-columns:1fr}
  .wa-float{right:12px;bottom:12px;width:52px;height:52px}
  .hero::before{width:260px;height:260px}
  .hero::after{width:220px;height:220px}
  .marquee__track{gap:24px}
  .marquee__track span{font-size:13px;gap:24px}
  .btn{padding:14px 26px;font-size:14px}
  .single-product div.product{padding:24px 20px 60px}
  .single-product table.variations tbody{gap:16px 20px}
  .single-product table.variations select{min-width:100%;width:100%}
  .single-product table.variations tr{width:100%}
  .single-product form.cart .quantity + .single_add_to_cart_button{
    margin-left:0;margin-top:14px;width:100%;
  }
  .reviews__list{grid-template-columns:1fr}
}

/* ============================================================
   CAMBIOS 08-09-2026 (plan de cambios, pruebas con cliente)
============================================================ */
/* Footer: logo original completo, sobre fondo blanco, colores de marca */
.footer-brand img{
  height:124px;width:auto;max-width:100%;box-sizing:border-box;
  padding:10px 14px;background:#fff;border-radius:14px;filter:none;margin-bottom:16px;
}
@media (max-width:600px){ .footer-brand img{height:104px} }

/* Hero: altura acotada para que "Configura tu sticker" y "Ver catálogo" se vean sin scroll */
.hero__content{max-width:660px}
.hero__typed{display:inline}
.hero__content h1{font-size:clamp(30px,3.9vw,48px)}
@media (min-width:901px){
  .hero__media img{height:clamp(440px,calc(100vh - 112px),700px);object-fit:cover;object-position:right center}
  .hero__content p{font-size:17px}
}
@media (max-width:900px){
  .hero__media img{height:clamp(170px,27vh,280px);object-fit:cover;object-position:center}
  .hero__content{padding:20px 6% 28px;background:var(--c-white)}
  .hero__content h1{font-size:clamp(26px,7vw,34px);margin-bottom:8px}
  .hero__content p{font-size:14.5px;margin-bottom:10px}
  .hero__ctas{margin-top:4px}
}
@media (min-width:901px){
  .hero__content{max-width:none;width:58%;padding-right:8%;background:linear-gradient(90deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.85) 55%,rgba(255,255,255,0) 100%)}
  .hero__content > *{max-width:560px}
}