/* ============================================================
   Etisistema — Rediseño 2026
   Paleta: azul #1B1FA8 · marino #080C30 · acento #F97B2E
   ============================================================ */
:root{
  --blue-950:#080C30; --blue-900:#10145F; --blue-800:#161B85;
  --blue-700:#1B1FA8; --blue-600:#2E33C4; --blue-100:#E3E5F8; --blue-50:#F1F2FB;
  --accent:#F97B2E; --accent-dark:#D95F12; --accent-50:#FFF3EA; --accent-100:#FFE0C8;
  --green:#1FAF5E; --green-dark:#128c48;
  --bg:#FFFFFF; --bg-soft:#F7F8FD; --line:#E5E7F2;
  --heading:#12153B; --text:#3C4055; --text-soft:#6A6F84;
  --radius:14px; --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(18,21,59,.06);
  --shadow:0 10px 30px rgba(18,21,59,.10);
  --shadow-lg:0 24px 60px rgba(18,21,59,.15);
  --container:1300px;
  --header-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 60px)}
html,body{overflow-x:hidden}
body{
  font-family:"Archivo",-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.icon{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- Utilidades ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue-700);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:200}
.skip-link:focus{left:0;color:#fff}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-700);margin-bottom:14px;
}
.eyebrow--accent{color:var(--accent-dark)}
.eyebrow--light{color:var(--accent)}
h1,h2,h3,h4{color:var(--heading);line-height:1.15;font-weight:800}
.section{padding:clamp(46px,5.5vw,74px) 0}
.section--soft{background:var(--bg-soft)}
.section-title{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.02em;margin-bottom:16px}
.section-sub{max-width:640px;font-size:1.06rem;color:var(--text-soft)}
.center{text-align:center}.center .section-sub{margin-inline:auto}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:12px;font-weight:700;font-size:.98rem;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  border:2px solid transparent;
}
.btn .icon{transition:transform .18s ease}
.btn:hover .icon{transform:translateX(3px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(249,123,46,.35)}
.btn--primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 12px 28px rgba(249,123,46,.45)}
.btn--outline{border-color:var(--blue-700);color:var(--blue-700);background:#fff}
.btn--outline:hover{background:var(--blue-700);color:#fff;transform:translateY(-2px)}
.btn--ghost-light{border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn--wa{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(31,175,94,.32)}
.btn--wa:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(249,123,46,.55);outline-offset:2px;
}

/* ---------- Barra superior ---------- */
.topbar{background:var(--blue-950);color:#C9CDF0;font-size:.82rem}
.topbar .container{display:flex;justify-content:center;gap:clamp(14px,4vw,44px);padding-block:8px;flex-wrap:wrap}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar .icon{color:var(--accent);width:.95em;height:.95em}
.topbar a:hover{color:#fff;text-decoration:underline}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:#fff;
  transition:box-shadow .25s ease;
}
.header.scrolled{box-shadow:0 6px 24px rgba(18,21,59,.12)}
.header-main{display:flex;align-items:center;gap:26px;height:var(--header-h)}
.header-logo img{height:44px;width:auto}
.header-phone{display:none;align-items:center;gap:8px;font-weight:700;color:var(--blue-700);font-size:.95rem;margin-left:auto}
.header-phone .icon{color:var(--accent)}
@media(min-width:1150px){.header-phone{display:inline-flex}}
.header-cta{display:none}
@media(min-width:900px){.header-cta{display:inline-flex;padding:11px 20px;font-size:.9rem}}
.nav{margin-left:auto}
@media(min-width:1150px){.nav{margin-left:0}}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-list a, .nav-list .nav-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 13px;border-radius:10px;font-weight:600;font-size:.93rem;color:var(--heading);
  transition:background .15s,color .15s;
}
.nav-list a:hover,.nav-list .nav-trigger:hover{background:var(--blue-50);color:var(--blue-700)}
.nav-list a.active{color:var(--blue-700);background:var(--blue-50)}
.nav-trigger .icon{transition:transform .2s}
.nav-item{position:relative}
.nav-item.open .nav-trigger .icon{transform:rotate(180deg)}
/* Mega menú */
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  width:min(760px,92vw);background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:22px;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.nav-item.open .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;align-items:flex-start}
.mega a:hover{background:var(--blue-50)}
.mega a strong{color:var(--heading);font-size:.95rem}
.mega a small{color:var(--text-soft);font-size:.8rem;font-weight:400}
/* Hamburguesa */
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border-radius:10px}
.burger span{display:block;height:2px;background:var(--heading);border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.burger{display:none}}
@media(max-width:899px){.nav{display:none}}
/* Menú móvil */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:#fff;padding:calc(var(--header-h) + 20px) 24px 40px;
  transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a,.mobile-menu summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 6px;border-bottom:1px solid var(--line);font-weight:700;color:var(--heading);font-size:1.05rem;
}
.mobile-menu details a{padding:11px 6px 11px 18px;font-weight:500;font-size:.95rem;color:var(--text)}
.mobile-menu .btn{width:100%;justify-content:center;margin-top:22px}
.mobile-menu .m-phone{display:block;text-align:center;margin-top:16px;color:var(--blue-700);border:none}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 480px at 85% -10%, var(--blue-100), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, var(--accent-50), transparent 55%),
    var(--bg-soft);
  padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px);
}
.hero-grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.03em;margin-bottom:20px}
.hero h1 .hl{color:var(--blue-700)}
.hero p.lead{font-size:1.13rem;color:var(--text-soft);max-width:520px;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-points{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px}
.hero-points li{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--heading)}
.hero-points .icon{color:var(--green)}
/* Slider */
.hero-slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.hero-slider .slide{display:none;position:relative}
.hero-slider .slide.active{display:block;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:.4}to{opacity:1}}
.hero-slider img{width:100%;aspect-ratio:3/2;object-fit:cover}
.slide-caption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  background:linear-gradient(transparent,rgba(8,12,48,.85));color:#fff;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.slide-caption .count{font-size:.82rem;font-weight:500;opacity:.85}
.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:var(--shadow);color:var(--heading);
  transition:background .15s,transform .15s;
}
.slider-btn:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.slider-btn.prev{left:14px}.slider-btn.next{right:14px}
.slider-dots{position:absolute;bottom:64px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:2}
.slider-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .2s,transform .2s}
.slider-dots button.active{background:var(--accent);transform:scale(1.25)}
/* Barra de confianza */
.trust{background:#fff;border-block:1px solid var(--line);padding:26px 0}
.trust .container{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap}
.trust span.label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.trust .chain{font-weight:800;color:var(--blue-900);opacity:.55;font-size:1.02rem;letter-spacing:-.01em;transition:opacity .2s}
.trust .chain:hover{opacity:1}

/* ---------- Beneficios (strip) ---------- */
.benefits{padding:clamp(40px,5vw,60px) 0}
.benefits-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.benefit{display:flex;gap:14px;align-items:flex-start}
.benefit .b-ico{
  width:46px;height:46px;border-radius:12px;background:var(--blue-50);color:var(--blue-700);
  display:grid;place-items:center;flex-shrink:0;
}
.benefit .b-ico .icon{width:22px;height:22px}
.benefit strong{display:block;color:var(--heading);font-size:.98rem}
.benefit small{color:var(--text-soft);font-size:.85rem}

/* ---------- Catálogo ---------- */
.catalog-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin-top:44px}
.p-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.p-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.p-card img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--blue-50)}
.p-card .p-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-card h3{font-size:1.12rem}
.p-card p{font-size:.9rem;color:var(--text-soft);flex:1}
.p-link{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--blue-700);
  font-size:.92rem;margin-top:6px;
}
.p-link .icon{transition:transform .18s}
.p-card:hover .p-link .icon{transform:translateX(4px)}
.p-card--promo{background:linear-gradient(135deg,var(--blue-800),var(--blue-600));border:none;color:#fff;justify-content:center;padding:34px 30px;gap:12px}
.p-card--promo h3{color:#fff;font-size:1.35rem}
.p-card--promo p{color:#C9CDF0}
.p-card--promo .p-link{color:var(--accent)}
.p-card--promo .badge{display:inline-block;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px;width:max-content}

/* ---------- Sectores ---------- */
.sectors{background:linear-gradient(160deg,var(--blue-950),var(--blue-800));color:#fff;position:relative;overflow:hidden}
.sectors::before{content:"";position:absolute;width:560px;height:560px;border:1px solid rgba(255,255,255,.08);border-radius:50%;top:-220px;right:-160px}
.sectors::after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.07);border-radius:50%;bottom:-160px;left:-120px}
.sectors .section-title,.sectors h2{color:#fff}
.sectors .section-sub{color:#B9BEE6}
.sector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:40px;position:relative;z-index:1}
.sector-chip{
  display:flex;align-items:center;gap:10px;padding:11px 20px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  font-weight:600;font-size:.93rem;color:#fff;transition:background .2s,transform .2s,border-color .2s;
  user-select:none;-webkit-user-select:none;text-decoration:none;
}
.sector-chip:hover,.sector-chip:focus-visible{
  background:rgba(249,123,46,.16);transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 6px 18px rgba(249,123,46,.22);outline:none;color:#fff;
}
.sector-chip:active{background:rgba(249,123,46,.24);transform:translateY(0)}
.sector-chip .icon{color:var(--accent);width:1.15em;height:1.15em}

/* ---------- Por qué / stats ---------- */
.why-grid{display:grid;gap:24px;margin-top:44px}
@media(min-width:960px){.why-grid{grid-template-columns:1.05fr 1fr;align-items:stretch}}
.why-main{
  background:linear-gradient(160deg,var(--blue-900),var(--blue-700));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.why-main h3{color:#fff;font-size:1.5rem}
.why-main p{color:#C9CDF0}
.why-side{display:grid;gap:16px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;text-align:center;
}
.stat .num{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:900;color:var(--blue-700);letter-spacing:-.02em}
.stat .num.accent{color:var(--accent-dark)}
.stat small{display:block;color:var(--text-soft);font-size:.82rem;margin-top:4px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;gap:16px;align-items:flex-start}
.why-card .b-ico{width:46px;height:46px;border-radius:12px;background:var(--accent-50);color:var(--accent-dark);display:grid;place-items:center;flex-shrink:0}
.why-card h4{font-size:1.05rem;margin-bottom:6px}
.why-card p{font-size:.9rem;color:var(--text-soft)}
.check-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 26px;margin-top:8px}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check-list .icon{color:var(--green);margin-top:4px}

/* ---------- Testimonios ---------- */
.testi-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:44px}
.testi{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  display:flex;flex-direction:column;gap:16px;position:relative;
}
.testi::before{content:"“";position:absolute;top:6px;right:22px;font-size:4.6rem;font-weight:900;color:var(--blue-100);line-height:1}
.testi .stars{color:#F5A623;letter-spacing:2px;font-size:1rem}
.testi p{font-size:.96rem;flex:1}
.testi-author{display:flex;align-items:center;gap:13px}
.testi-avatar{
  width:46px;height:46px;border-radius:50%;background:var(--blue-700);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;flex-shrink:0;
}
.testi-author strong{display:block;color:var(--heading);font-size:.94rem}
.testi-author small{color:var(--text-soft);font-size:.82rem}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:44px auto 0;display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:19px 24px;font-weight:700;color:var(--heading);text-align:left;font-size:1rem;
}
.faq-q .icon{color:var(--blue-700);transition:transform .25s}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 20px;color:var(--text-soft);font-size:.95rem}

/* ---------- Contacto / formulario ---------- */
.contact-band{
  background:
    radial-gradient(700px 400px at 100% 0%,rgba(249,123,46,.16),transparent 55%),
    linear-gradient(150deg,var(--blue-950),var(--blue-900));
  border-radius:var(--radius-lg);color:#fff;padding:clamp(34px,5vw,60px);
}
.contact-grid{display:grid;gap:clamp(28px,4vw,52px)}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-band h2{color:#fff}
.contact-band .section-sub{color:#B9BEE6}
.contact-channels{display:grid;gap:13px;margin-top:26px}
.channel{
  display:flex;align-items:center;gap:15px;padding:16px 20px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  transition:background .2s,transform .2s;color:#fff;
}
.channel:hover{background:rgba(255,255,255,.13);transform:translateX(4px)}
.channel .icon{width:22px;height:22px;color:var(--accent)}
.channel small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#9EA3D6;font-weight:700}
.channel strong{font-size:1rem}
/* Formulario */
.q-form{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,3.5vw,38px);color:var(--text);box-shadow:var(--shadow-lg)}
.q-form h3{margin-bottom:6px}
.q-form .f-sub{font-size:.88rem;color:var(--text-soft);margin-bottom:20px}
.f-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.f-grid .full{grid-column:1/-1}
.q-form label{display:block;font-size:.82rem;font-weight:700;color:var(--heading);margin-bottom:5px}
.q-form input,.q-form select,.q-form textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.93rem;color:var(--heading);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.q-form input:focus,.q-form select:focus,.q-form textarea:focus{
  outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(46,51,196,.12);
}
.q-form textarea{resize:vertical;min-height:96px}
.q-form .field-error{border-color:#D93A3A!important}
.f-error-msg{color:#D93A3A;font-size:.78rem;margin-top:4px;display:none}
.q-form .btn{width:100%;justify-content:center;margin-top:6px}
.f-note{font-size:.78rem;color:var(--text-soft);text-align:center;margin-top:12px}
.f-success{
  display:none;background:#E9F9F0;border:1px solid #B9EBCF;color:#0E7A3D;
  padding:14px 18px;border-radius:12px;font-size:.92rem;margin-top:14px;
}
.f-success.show{display:block}

/* ---------- Mapa ---------- */
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.map-wrap iframe{width:100%;height:380px;border:0;display:block}

/* ---------- Páginas internas ---------- */
.page-hero{
  background:
    radial-gradient(800px 400px at 90% -20%,rgba(249,123,46,.14),transparent 55%),
    linear-gradient(150deg,var(--blue-950),var(--blue-800));
  color:#fff;padding:clamp(52px,7vw,90px) 0;
  position:relative;overflow:hidden;
}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.09);border-radius:50%;bottom:-200px;right:-100px}
.breadcrumbs{font-size:.85rem;color:#9EA3D6;margin-bottom:26px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumbs a:hover{color:#fff;text-decoration:underline}
.breadcrumbs .sep{opacity:.5}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.02em;max-width:820px}
.page-hero .lead{color:#C9CDF0;max-width:640px;margin-top:16px;font-size:1.08rem}
.page-hero .eyebrow{color:var(--accent)}
.page-hero .hero-actions{margin-top:28px}

/* Tarjetas de información / specs */
.info-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:40px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.info-card h3{font-size:1.08rem}
.info-card p,.info-card li{font-size:.9rem;color:var(--text-soft)}
.info-card img{border-radius:12px;margin-bottom:8px;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--blue-50)}
.info-card .b-ico{width:44px;height:44px;border-radius:12px;background:var(--blue-50);color:var(--blue-700);display:grid;place-items:center}
.chip-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chip{
  background:var(--blue-50);color:var(--blue-800);font-weight:700;font-size:.85rem;
  padding:7px 14px;border-radius:8px;
}
.chip--accent{background:var(--accent-50);color:var(--accent-dark)}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:28px;font-size:.93rem}
.spec-table th,.spec-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.spec-table thead th{background:var(--blue-950);color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.spec-table tbody tr:hover{background:var(--bg-soft)}
.spec-table td:first-child{font-weight:700;color:var(--heading)}

/* Línea de tiempo (proceso de maquila) */
.timeline{display:grid;gap:0;margin-top:44px;position:relative}
.t-step{display:grid;grid-template-columns:52px 1fr;gap:20px;position:relative;padding-bottom:34px}
.t-step:last-child{padding-bottom:0}
.t-step::before{
  content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:var(--blue-100);
}
.t-step:last-child::before{display:none}
.t-num{
  width:52px;height:52px;border-radius:50%;background:var(--blue-700);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:1.15rem;flex-shrink:0;z-index:1;
}
.t-step:nth-child(odd) .t-num{background:var(--accent)}
.t-body h3{font-size:1.1rem;margin-bottom:5px}
.t-body p{font-size:.93rem;color:var(--text-soft);max-width:560px}

/* Promociones */
.promo-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:40px}
.promo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;position:relative}
.promo-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.promo-card .promo-tag{position:absolute;top:16px;left:16px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:99px;z-index:1}
.promo-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--blue-50)}
.promo-card .p-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.promo-card h3{font-size:1.15rem}
.promo-card p{font-size:.9rem;color:var(--text-soft);flex:1}
.promo-vig{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--accent-dark);font-weight:700}
.promo-vig .icon{width:.95em;height:.95em}
.promo-terms{font-size:.78rem;color:var(--text-soft)}

/* ---------- Footer ---------- */
.footer{background:var(--blue-950);color:#AEB3DE;padding:clamp(48px,6vw,72px) 0 0;margin-top:clamp(64px,8vw,110px)}
.footer-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding-bottom:44px}
.footer img{height:46px;margin-bottom:18px}
.footer p{font-size:.9rem;max-width:320px}
.footer h4{color:#fff;font-size:.95rem;margin-bottom:16px;letter-spacing:.02em}
.footer li{margin-bottom:9px}
.footer a{font-size:.92rem;transition:color .15s}
.footer a:hover{color:#fff}
.footer .f-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.footer .f-contact .icon{color:var(--accent);margin-top:4px}
.social{display:flex;gap:10px;margin-top:20px}
.social a{
  width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;transition:background .2s,border-color .2s;color:#fff;
}
.social a:hover{background:rgba(255,255,255,.1);border-color:var(--accent)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#7E84B8;
}
.footer-bottom a:hover{color:#fff}

/* ---------- Botón flotante WhatsApp ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:0;
}
.wa-bubble{
  background:#fff;color:var(--heading);font-weight:700;font-size:.86rem;
  padding:10px 16px;border-radius:12px 12px 4px 12px;box-shadow:var(--shadow-lg);
  margin-right:12px;opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .3s,transform .3s;white-space:nowrap;
}
.wa-float.show-bubble .wa-bubble{opacity:1;transform:none}
.wa-btn{
  width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(31,175,94,.45);
  transition:transform .2s,background .2s;position:relative;
}
.wa-btn:hover{transform:scale(1.08);background:var(--green-dark)}
.wa-btn .icon{width:30px;height:30px;fill:currentColor;stroke:none}
@media(max-width:560px){
  .wa-float{right:14px;bottom:14px}
  .wa-btn{width:52px;height:52px}
  .wa-bubble{display:none}
}

/* ---------- Misceláneos ---------- */
.notice{
  background:var(--accent-50);border:1px solid var(--accent-100);border-radius:var(--radius);
  padding:18px 22px;font-size:.9rem;color:var(--accent-dark);display:flex;gap:12px;align-items:flex-start;
}
.notice .icon{flex-shrink:0;margin-top:3px}
.two-col{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:920px){.two-col{grid-template-columns:1fr 1fr}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:36px}
.gallery img{border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);transition:transform .2s}
.gallery img:hover{transform:scale(1.03)}
.privacy-body{max-width:780px}
.privacy-body h2{font-size:1.3rem;margin:32px 0 12px}
.privacy-body p,.privacy-body li{font-size:.95rem;margin-bottom:12px}
.privacy-body ul{padding-left:22px;list-style:disc}

/* Flechas del slider (rotación del chevron) */
.slider-btn.prev .icon{transform:rotate(90deg)}
.slider-btn.next .icon{transform:rotate(-90deg)}
.slider-btn:hover .icon{transform:rotate(90deg)}
.slider-btn.next:hover .icon{transform:rotate(-90deg)}

/* Ajuste: hero de página interna seguido de sección */
.page-hero + .section{padding-top:clamp(34px,5vw,60px)}

/* ============================================================
   V2 — Hero oscuro, banda transportadora, marquee, layouts
   ============================================================ */

/* ---------- HERO V2 ---------- */
.hero-v2{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1000px 520px at 88% -18%, rgba(46,51,196,.55), transparent 60%),
    radial-gradient(720px 460px at -12% 112%, rgba(249,123,46,.22), transparent 55%),
    linear-gradient(155deg,var(--blue-950) 0%,var(--blue-900) 55%,#0D1266 100%);
  padding:clamp(56px,7vw,100px) 0 0;
}
/* patrón de código de barras de fondo */
.hero-v2::before{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 7px,#fff 7px 10px,transparent 10px 16px,#fff 16px 17px,transparent 17px 26px);
  mask-image:linear-gradient(115deg,transparent 30%,#000 75%);
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 75%);
}
.hero-v2::after{
  content:"";position:absolute;width:640px;height:640px;border:1px solid rgba(255,255,255,.08);
  border-radius:50%;top:-260px;right:-180px;pointer-events:none;
  animation:slowSpin 40s linear infinite;
}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero-v2 .container{position:relative;z-index:1}
.hero-v2 .eyebrow{color:var(--accent)}
.hero-v2 h1{
  color:#fff;font-size:clamp(2.3rem,5.2vw,4.1rem);letter-spacing:-.03em;
  margin-bottom:22px;max-width:640px;
}
.hero-v2 h1 .hl{
  color:var(--accent);position:relative;display:inline-block;
}
.hero-v2 h1 .hl::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:rgba(249,123,46,.35);border-radius:4px;z-index:-1;
  transform:scaleX(0);transform-origin:left;animation:underlineIn .8s .5s ease forwards;
}
@keyframes underlineIn{to{transform:scaleX(1)}}
.hero-v2 .lead{color:#C9CDF0;font-size:1.14rem;max-width:540px;margin-bottom:32px}
.hero-v2 .hero-points li{color:#E7E9FB}
.hero-v2 .hero-points .icon{color:var(--accent)}
/* panel de imagen con etiquetas flotantes */
.hero-visual{position:relative}
.hero-visual .main-img{
  border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
}
.float-tag{
  position:absolute;background:#fff;color:var(--heading);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.35);padding:10px 16px;
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:.86rem;
  animation:floatY 4.5s ease-in-out infinite;
}
.float-tag .ft-barcode{
  width:44px;height:22px;flex-shrink:0;
  background:repeating-linear-gradient(90deg,#12153B 0 2px,transparent 2px 4px,#12153B 4px 7px,transparent 7px 9px,#12153B 9px 10px,transparent 10px 14px);
}
.float-tag small{display:block;font-weight:600;color:var(--text-soft);font-size:.7rem}
.float-tag.tag1{top:-22px;left:-18px;animation-delay:0s}
.float-tag.tag2{bottom:26%;right:-20px;animation-delay:1.4s}
.float-tag.tag3{bottom:-20px;left:12%;animation-delay:2.6s}
.float-tag.tag2 .ft-swatch{background:linear-gradient(135deg,#D93A3A,#F97B2E)}
.ft-swatch{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--blue-600),var(--blue-800));flex-shrink:0}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-12px) rotate(1.2deg)}}
.hero-badge{
  position:absolute;top:16px;right:16px;z-index:2;
  background:var(--accent);color:#fff;font-weight:800;font-size:.8rem;
  padding:9px 16px;border-radius:99px;box-shadow:0 10px 26px rgba(249,123,46,.5);
  animation:pulseBadge 2.6s ease-in-out infinite;
}
@keyframes pulseBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(max-width:979px){
  .float-tag.tag1{left:6px}
  .float-tag.tag2{right:6px}
}
@media (prefers-reduced-motion:reduce){
  .float-tag,.hero-badge,.hero-v2::after{animation:none}
  .hero-v2 h1 .hl::after{transform:scaleX(1)}
}

/* ---------- BANDA TRANSPORTADORA DE ETIQUETAS ---------- */
.belt-section{padding:0;background:transparent}
.belt{
  position:relative;overflow:hidden;padding:26px 0 30px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 30%),
    var(--blue-950);
  border-top:1px solid rgba(255,255,255,.09);
}
/* rodillos de la banda */
.belt::before,.belt::after{
  content:"";position:absolute;bottom:8px;width:14px;height:14px;border-radius:50%;
  background:#2E33C4;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);
  animation:roller 1.2s linear infinite;
}
.belt::before{left:3%}
.belt::after{right:3%}
@keyframes roller{to{transform:rotate(360deg)}}
.belt-track{
  display:flex;gap:22px;width:max-content;
  animation:beltMove 30s linear infinite;
}
.belt:hover .belt-track{animation-play-state:paused}
@keyframes beltMove{to{transform:translateX(-50%)}}
/* etiqueta individual */
.lbl{
  background:#fff;border-radius:8px;padding:10px 16px 8px;
  display:flex;flex-direction:column;gap:6px;min-width:150px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  position:relative;transform:rotate(-.6deg);
}
.lbl:nth-child(even){transform:rotate(.7deg)}
.lbl::before{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--blue-50);
  box-shadow:inset 0 0 0 1.5px #C9CDEF;
}
.lbl .lbl-code{
  height:26px;
  background:repeating-linear-gradient(90deg,#12153B 0 2px,transparent 2px 5px,#12153B 5px 6px,transparent 6px 10px,#12153B 10px 13px,transparent 13px 15px,#12153B 15px 16px,transparent 16px 20px);
}
.lbl .lbl-text{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--heading);display:flex;justify-content:space-between;gap:8px;
}
.lbl .lbl-text .price{color:var(--accent-dark)}
.lbl--color .lbl-code{
  background:repeating-linear-gradient(90deg,var(--blue-700) 0 3px,transparent 3px 8px);
  border-radius:3px;
}
.lbl--warn .lbl-code{background:repeating-linear-gradient(45deg,#D93A3A 0 8px,#fff 8px 16px);border-radius:3px}
.belt-title{
  text-align:center;color:#9EA3D6;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;
}
.belt-title span{color:var(--accent)}

/* ---------- MARQUEE DE SECTORES (hilera en movimiento) ---------- */
.marquee{overflow:hidden;position:relative;margin-top:40px;display:grid;gap:16px}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:26px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--blue-950),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--blue-800),transparent)}
.marquee-row{display:flex;gap:14px;width:max-content;animation:beltMove 38s linear infinite}
.marquee-row.rev{animation:marqueeRev 44s linear infinite}
@keyframes marqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee:hover .marquee-row{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .marquee-row,.belt-track{animation:none}
}

/* ---------- LAYOUTS ALTERNADOS PARA PÁGINAS DE PRODUCTO ---------- */
.alt-row{display:grid;gap:clamp(26px,4vw,56px);align-items:center;padding:clamp(30px,4vw,46px) 0;border-bottom:1px solid var(--line)}
.alt-row:last-child{border-bottom:none}
@media(min-width:920px){
  .alt-row{grid-template-columns:1fr 1fr}
  .alt-row.flip .alt-media{order:2}
}
.alt-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%}
.alt-body h3{font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:10px}
.alt-body p{color:var(--text-soft);font-size:.97rem}
.alt-num{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--accent-50);color:var(--accent-dark);font-weight:900;font-size:1.05rem;margin-bottom:14px;
}
/* banda destacada naranja */
.feature-band{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  border-radius:var(--radius-lg);color:#fff;padding:clamp(26px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  box-shadow:0 18px 44px rgba(249,123,46,.35);
}
.feature-band h3{color:#fff;font-size:clamp(1.2rem,2.4vw,1.6rem)}
.feature-band p{color:#FFE3D0;max-width:560px}
.feature-band .btn{background:#fff;color:var(--accent-dark);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.feature-band .btn:hover{background:var(--blue-950);color:#fff}

/* swatches de colores de ribbon */
.swatch-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.swatch{
  display:flex;flex-direction:column;align-items:center;gap:7px;font-size:.75rem;
  font-weight:700;color:var(--text-soft);
}
.swatch i{
  width:44px;height:44px;border-radius:50%;display:block;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.18),0 4px 10px rgba(18,21,59,.15);
  border:3px solid #fff;
}

/* ticket de rollo térmico */
.ticket{
  background:#fff;border-radius:6px;max-width:340px;margin-inline:auto;
  padding:26px 24px;box-shadow:var(--shadow-lg);position:relative;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 2px 0 rgba(18,21,59,.06));
}
.ticket::before,.ticket::after{
  content:"";position:absolute;left:0;right:0;height:10px;
  background:radial-gradient(circle at 8px -3px,transparent 7px,#fff 7.5px);
  background-size:16px 10px;background-repeat:repeat-x;
}
.ticket::before{top:-9px;transform:rotate(180deg)}
.ticket::after{bottom:-9px}
.ticket h4{text-align:center;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;margin-bottom:14px}
.ticket .t-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.ticket .t-line strong{color:var(--heading)}
.ticket .t-total{display:flex;justify-content:space-between;padding-top:12px;font-weight:800;color:var(--accent-dark)}
.ticket .t-code{
  height:34px;margin-top:16px;
  background:repeating-linear-gradient(90deg,#12153B 0 2px,transparent 2px 5px,#12153B 5px 6px,transparent 6px 9px,#12153B 9px 12px,transparent 12px 14px);
}

/* sección oscura genérica */
.dark-band{
  background:linear-gradient(150deg,var(--blue-950),var(--blue-800));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px);
}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band .section-sub{color:#B9BEE6}
.dark-band .spec-table{box-shadow:0 18px 44px rgba(0,0,0,.35)}

/* ---------- NOSOTROS ---------- */
.values-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:38px}
.value-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px;text-align:center;transition:transform .2s,box-shadow .2s;
}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.value-card .b-ico{
  width:54px;height:54px;border-radius:50%;background:var(--blue-50);color:var(--blue-700);
  display:grid;place-items:center;margin:0 auto 14px;
}
.value-card h3{font-size:1.05rem;margin-bottom:7px}
.value-card p{font-size:.88rem;color:var(--text-soft)}


/* ============================================================
   V3 — Hero limpio, bandas con JS y temas por página
   ============================================================ */

/* ---------- HERO V3: adiós patrón de barras y etiquetas flotantes ---------- */
.hero-v2::before{display:none}        /* quita el patrón de código de barras */
.hero-v2::after{                      /* anillo punteado girando, más visible */
  width:560px;height:560px;top:-200px;right:-140px;
  border:2px dashed rgba(255,255,255,.14);
}
.hero-visual{display:flex;justify-content:center}
.hero-visual .main-img{
  position:relative;z-index:1;border:none;box-shadow:none;border-radius:0;
  max-width:min(520px,92%);width:100%;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.5));
  animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-visual .glow-disc{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:min(430px,80%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(249,123,46,.34),rgba(46,51,196,.16) 55%,transparent 72%);
  filter:blur(6px);
}
.hero-visual .ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:min(470px,86%);aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(255,255,255,.16);
  animation:slowSpin 36s linear infinite;
}

/* ---------- BANDAS MOVIDAS POR JS (siempre se mueven) ---------- */
.belt-track,.marquee-row{animation:none;will-change:transform}
.belt,.marquee{cursor:default}

/* ---------- IMPRESORAS: la página imprime etiquetas ---------- */
.printer-demo{display:flex;justify-content:center;padding:10px 0 0}
.printer{
  position:relative;width:min(300px,80%);height:118px;border-radius:18px 18px 10px 10px;
  background:linear-gradient(180deg,#2A2E7E,#191D55);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 50px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.14);
}
.printer::before{ /* franja superior */
  content:"";position:absolute;top:16px;left:18px;right:18px;height:8px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),#FFB37E);
}
.printer .p-led{
  position:absolute;top:36px;right:20px;width:9px;height:9px;border-radius:50%;
  background:#3DD97C;box-shadow:0 0 10px #3DD97C;animation:ledBlink 1.6s ease-in-out infinite;
}
@keyframes ledBlink{50%{opacity:.35}}
.printer .p-slot{ /* ranura de salida */
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:72%;height:12px;border-radius:6px;background:#0B0E33;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8);
}
.printer .p-brand{position:absolute;top:32px;left:20px;color:#8E94CC;font-size:.68rem;font-weight:800;letter-spacing:.18em}
.print-area{width:min(300px,80%);height:210px;overflow:hidden;display:flex;justify-content:center}
.print-label{
  width:66%;background:#fff;border-radius:0 0 8px 8px;color:var(--heading);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
  padding:10px 14px 12px;text-align:center;height:0;opacity:0;overflow:hidden;
}
.print-label .pl-code{
  height:34px;margin-bottom:8px;
  background:repeating-linear-gradient(90deg,#12153B 0 2px,transparent 2px 5px,#12153B 5px 6px,transparent 6px 10px,#12153B 10px 13px,transparent 13px 15px,#12153B 15px 16px,transparent 16px 20px);
}
.print-label .pl-title{font-weight:900;font-size:.95rem;letter-spacing:.04em}
.print-label .pl-sub{font-size:.7rem;font-weight:700;color:var(--accent-dark);letter-spacing:.1em;text-transform:uppercase}

/* ---------- JANEL: diurex pegado al borde que se desenrolla ---------- */
.tape-side{
  position:fixed;top:0;right:0;bottom:0;width:56px;z-index:40;pointer-events:none;
  display:none;
}
@media(min-width:1200px){.tape-side{display:block}}
.tape-strip{
  position:absolute;top:0;right:6px;width:42px;height:0;
  background:linear-gradient(180deg,rgba(240,183,78,.5),rgba(228,166,52,.42));
  border-left:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  backdrop-filter:blur(1px);
}
.tape-strip::after{ /* borde cortado de abajo */
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;
  background:linear-gradient(-45deg,transparent 8px,rgba(228,166,52,.42) 0) 0 0/16px 16px repeat-x,
             linear-gradient(45deg,transparent 8px,rgba(240,183,78,.5) 0) 8px 0/16px 16px repeat-x;
}
.tape-roll{
  position:absolute;top:0;right:0;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,#F5E3BE 0 26%,#E4A634 27% 55%,#C98A20 56% 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 0 0 3px rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.12);
}
.tape-roll::before{ /* agujero del core */
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;background:#8A5A10;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.tape-roll::after{ /* marca para ver la rotación */
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:5px;height:12px;border-radius:3px;background:rgba(138,90,16,.75);
}

/* ---------- SUJETADOR: tarjetas colgando de plastiflecha ---------- */
.hang{position:relative;padding-top:22px}
.hang::before{ /* barra de la plastiflecha */
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:7px;border-radius:4px;background:#D8DAE8;
  box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 #fff;
}
.hang::after{ /* punta que atraviesa la tarjeta */
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:3px;height:16px;background:linear-gradient(180deg,#C9CDEF,#AEB2CC);
  border-radius:2px;
}
.hang-swing{animation:hangSwing 5s ease-in-out infinite;transform-origin:top center}
@keyframes hangSwing{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}

/* etiqueta colgante grande (hero de sujetador) */
.hang-tag{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:26px 30px;text-align:center;max-width:320px;margin:0 auto;
  position:relative;
}
.hang-tag .ht-code{
  height:44px;margin:10px 0 12px;
  background:repeating-linear-gradient(90deg,#12153B 0 3px,transparent 3px 6px,#12153B 6px 7px,transparent 7px 12px,#12153B 12px 15px,transparent 15px 18px);
}
.hang-tag .ht-price{font-size:1.7rem;font-weight:900;color:var(--heading)}
.hang-tag small{color:var(--text-soft);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem}

/* ---------- ROLLO TÉRMICO: ticket que se imprime línea a línea ---------- */
.ticket .t-line,.ticket h4,.ticket .t-total,.ticket .t-code{
  opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s ease;
}
.ticket.printed .t-line,.ticket.printed h4,.ticket.printed .t-total,.ticket.printed .t-code{
  opacity:1;transform:none;
}
.ticket.printed h4{transition-delay:.05s}
.ticket.printed .t-line:nth-of-type(1){transition-delay:.35s}
.ticket.printed .t-line:nth-of-type(2){transition-delay:.75s}
.ticket.printed .t-line:nth-of-type(3){transition-delay:1.15s}
.ticket.printed .t-total{transition-delay:1.55s}
.ticket.printed .t-code{transition-delay:1.9s}

/* ---------- FIX TAMAÑO DE IMÁGENES EN PÁGINAS DE PRODUCTO ---------- */
.alt-media img{max-width:440px;margin-inline:auto;display:block}
.alt-media .img-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alt-media .img-duo img{max-width:100%}
.p-frame{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;box-shadow:var(--shadow-sm);max-width:440px;margin-inline:auto;
}
.p-frame img{border-radius:12px;width:100%;display:block}
.p-frame figcaption{text-align:center;font-size:.78rem;font-weight:700;color:var(--text-soft);padding-top:10px;letter-spacing:.04em}

/* info-card con imagen más contenida */
.info-card img{max-height:230px}

/* ---------- RIBBON: rollo que gira al hacer scroll (decorativo) ---------- */
.ribbon-roll{
  width:120px;height:120px;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle,#fff 0 22%,#2E33C4 23% 60%,#1B1FA8 61% 100%);
  box-shadow:0 16px 34px rgba(27,31,168,.3), inset 0 0 0 4px rgba(255,255,255,.5);
  position:relative;
}
.ribbon-roll::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:#E8EAF7;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.18);
}
.ribbon-roll::after{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:8px;height:22px;border-radius:4px;background:rgba(255,255,255,.85);
}


/* ============================================================
   V4 — Hero panel, fondos uniformes, componentes con imagen real
   ============================================================ */
:root{--blend:#7A5AF8;--img-bg:linear-gradient(180deg,#F8F9FE,#EDF0F9)}

/* ---------- HERO V4: sin círculos, panel tipo tienda ---------- */
.hero-v2::after{display:none}
.hero-visual .ring,.hero-visual .glow-disc{display:none}
.hero-visual .main-img{display:none}   /* se sustituye por el panel */
.hero-panel{
  position:relative;background:linear-gradient(160deg,#FFFFFF 20%,#EEF1FB);
  border-radius:26px;padding:clamp(18px,2.6vw,34px);
  box-shadow:
    0 34px 70px rgba(2,6,40,.55),
    0 4px 18px rgba(2,6,40,.35),
    0 0 0 1px rgba(255,255,255,.14);
}
.hero-panel::after{ /* filo naranja inferior */
  content:"";position:absolute;left:10%;right:10%;bottom:-7px;height:14px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--accent) 30% 70%,transparent);
  filter:blur(6px);opacity:.8;
}
.hero-panel img{width:100%;display:block;animation:heroFloat 6.5s ease-in-out infinite}
.hero-panel .hp-tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.08em;
  padding:7px 18px;border-radius:99px;box-shadow:0 8px 20px rgba(249,123,46,.5);
  text-transform:uppercase;white-space:nowrap;
}

/* ---------- FONDOS DE IMAGEN UNIFORMES (estilo tienda online) ---------- */
.p-card img,.info-card img,.alt-media img,.p-frame img{
  background:var(--img-bg);object-fit:contain;
}
img[src*="zebra"]{object-fit:cover;background:#fff}

/* ---------- CATÁLOGO: la imagen manda ---------- */
.p-card{display:flex;flex-direction:column}
.p-card img{aspect-ratio:16/11;transition:transform .35s ease}
.p-card:hover img{transform:scale(1.045)}
.p-card .p-body{padding:16px 18px 18px}
.p-card .p-body h3{font-size:1.02rem;margin-bottom:6px}
.p-card .p-body p{font-size:.84rem;line-height:1.5;margin-bottom:10px}
.p-card .p-link{font-size:.84rem}

/* ---------- IMPRESORA REAL IMPRIMIENDO ---------- */
.printer-demo{display:flex;align-items:center;justify-content:center;min-height:430px}
.p-machine{
  width:min(400px,90%);display:block;margin:0 auto;position:relative;z-index:2;
  filter:drop-shadow(0 26px 36px rgba(0,0,0,.5));
}
.print-area{width:min(400px,90%);height:225px;overflow:hidden;display:flex;justify-content:center;margin-top:-4px}
.print-label{width:62%;z-index:1}
.print-label .pl-title{font-size:.86rem}

/* ---------- DIUREX REAL PEGADO AL BORDE ---------- */
.tape-side{width:70px}
.tape-strip{right:10px;width:44px}
.tape-roll-img{
  position:absolute;right:-2px;width:74px;height:auto;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.32));
}

/* ---------- BOTONES Y SOMBRAS CON MÁS VIDA ---------- */
.btn--primary{
  background:linear-gradient(180deg,#FF8A3D,#F96A0E);
  box-shadow:0 10px 24px rgba(249,123,46,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{background:linear-gradient(180deg,#F97B2E,#E85E0F);box-shadow:0 14px 30px rgba(249,123,46,.5)}
.p-card,.info-card,.q-form,.ticket{box-shadow:0 2px 6px rgba(18,21,59,.05),0 18px 40px rgba(18,21,59,.08)}
.p-card:hover,.info-card:hover{box-shadow:0 4px 10px rgba(18,21,59,.06),0 24px 50px rgba(18,21,59,.13)}
.alt-num{background:linear-gradient(135deg,var(--blend),var(--blue-700));color:#fff}

/* ---------- tarjetas de industria: contenido equilibrado ---------- */
.info-card ul.check-list{flex-grow:1}

/* ============================================================
   V5 — Hero centrado (estilo Framer/Linear): tipografía enorme,
   imagen grande flotando sobre resplandor, sin tarjetas
   ============================================================ */
.hero-c{position:relative;overflow:hidden;background:linear-gradient(180deg,#080B2E 0%,#0D1148 58%,#101457 100%);text-align:center;padding:clamp(80px,10.5vh,126px) 0 0;color:#fff}
.hero-c::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(55% 46% at 50% -4%, rgba(74,88,224,.55), transparent 68%),
  radial-gradient(34% 26% at 12% 30%, rgba(46,58,168,.35), transparent 70%),
  radial-gradient(34% 26% at 88% 30%, rgba(46,58,168,.35), transparent 70%)}
.hero-c .container{position:relative;z-index:2}
.hero-c-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#C9CEF2;font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 20px;border-radius:99px;margin-bottom:clamp(22px,3vw,32px)}
.hero-c-pill .icon{color:var(--accent);width:15px;height:15px}
.hero-c h1{color:#fff;font-size:clamp(2.55rem,6.2vw,4.7rem);line-height:1.03;letter-spacing:-.022em;font-weight:800;max-width:15ch;margin:0 auto clamp(18px,2.4vw,26px);text-wrap:balance}
.hero-c h1 .hl{color:var(--accent);position:relative;white-space:nowrap}
.hero-c h1 .hl::after{content:"";position:absolute;left:2%;right:2%;bottom:.02em;height:.1em;border-radius:99px;background:linear-gradient(90deg,rgba(249,123,46,0),rgba(249,123,46,.55),rgba(249,123,46,0))}
.hero-c .lead{max-width:620px;margin:0 auto clamp(26px,3.4vw,36px);color:#B9BEE6;font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.65}
.hero-c .hero-actions{justify-content:center}
.hero-c .hero-points{justify-content:center;margin-top:clamp(26px,3.4vw,36px)}
.hero-c .hero-points li{color:#D5D9F7;font-size:.88rem}
.hero-c .hero-points .icon{color:var(--accent)}
.hero-c-img{position:relative;z-index:2;width:min(880px,92%);margin:clamp(38px,5.5vw,64px) auto 0}
.hero-c-img img{position:relative;z-index:2;width:100%;display:block;animation:heroFloat 6.5s ease-in-out infinite;filter:drop-shadow(0 44px 60px rgba(1,3,24,.65))}
.hero-c-img::before{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:110px;z-index:1;background:radial-gradient(50% 100% at 50% 100%, rgba(249,123,46,.5), rgba(249,123,46,.12) 55%, transparent 75%);filter:blur(26px)}
.hero-c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(6,9,44,.85))}
@media(max-width:640px){
  .hero-c .hero-points{flex-direction:column;gap:10px;align-items:center}
  .hero-c-img{width:96%}
}

/* ============================================================
   V6 — Hero compacto: imagen dentro del titular + rotador
   ============================================================ */
.hero-c--compact{padding:clamp(72px,10vh,116px) 0 clamp(64px,9vh,104px)}
.hero-c--compact::after{display:none}
.hero-c--compact h1{font-size:clamp(2.3rem,5.2vw,4rem);max-width:22ch}
.h-chip{display:inline-block;vertical-align:-0.16em;height:.82em;width:auto;border-radius:.24em;overflow:hidden;background:var(--img-bg);box-shadow:0 .06em .18em rgba(1,3,24,.45), inset 0 0 0 1px rgba(255,255,255,.35);margin:0 .04em}
.h-chip img{height:100%;width:auto;display:block;object-fit:cover}
.rot{display:inline-block;overflow:hidden;vertical-align:-0.12em;position:relative;color:var(--accent);white-space:nowrap;padding-bottom:.06em;min-width:6.85em;text-align:left}
.rot-word{position:relative;display:inline-block;transition:transform .34s cubic-bezier(.5,0,.15,1),opacity .3s ease}
.rot-word::after{content:"";position:absolute;left:2%;right:2%;bottom:.02em;height:.1em;border-radius:99px;background:linear-gradient(90deg,rgba(249,123,46,0),rgba(249,123,46,.55),rgba(249,123,46,0))}
.rot-word.rot-out{transform:translateY(-110%);opacity:0}
.rot-word.rot-pre{transition:none;transform:translateY(110%);opacity:0}
@media(max-width:640px){.hero-c--compact h1{max-width:16ch}}

/* ============================================================
   V7 — TEMA CLARO (patrón Mercado Libre): todo blanco, un solo
   banner de color, tarjetas blancas y botones a la medida
   ============================================================ */
body{background:#F4F6FB}
.section{background:#fff}
.section--soft{background:#F1F4FA}

/* — Botones a la medida: rectángulos discretos, nada inflado — */
.btn{padding:11px 22px;border-radius:8px;font-weight:600;font-size:.94rem;border-width:1.5px}
.btn--primary{background:#F97B2E;box-shadow:0 4px 14px rgba(249,123,46,.3)}
.btn--primary:hover{background:#E85E0F;box-shadow:0 8px 20px rgba(249,123,46,.38)}
.btn--outline{border-color:#D6DBF0;color:var(--blue-700);background:#fff}
.btn--outline:hover{background:#F0F3FF;color:var(--blue-800);border-color:#B9C2E8}

/* — Hero: banner de color con texto a la izquierda y producto flotando — */
.hero-ml{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#28339F 0%,#1C2588 55%,#161D70 100%);
  padding:clamp(52px,7vh,80px) 0 clamp(100px,13vh,140px)}
.hero-ml::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 88% 115%,rgba(249,123,46,.4),transparent 62%),
             radial-gradient(520px 280px at 6% -25%,rgba(122,90,248,.38),transparent 62%)}
.hero-ml-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
@media(min-width:980px){.hero-ml-grid{grid-template-columns:1.02fr .98fr}}
.hero-ml .eyebrow{color:#FFB27A}
.hero-ml h1{color:#fff;font-size:clamp(2.1rem,4.3vw,3.5rem);line-height:1.07;letter-spacing:-.022em;font-weight:800;margin:16px 0 18px;max-width:19ch;text-wrap:balance}
.hero-ml .lead{color:#C9CDF0;max-width:520px;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.62;margin-bottom:28px}
.hero-ml .hero-points{margin-top:26px}
.hero-ml .hero-points li{color:#D5D9F7;font-size:.88rem}
.hero-ml .hero-points .icon{color:#FFB27A}
.hero-ml-img{position:relative;z-index:1}
.hero-ml-img img{width:min(520px,100%);display:block;margin-inline:auto;
  filter:drop-shadow(0 30px 44px rgba(3,6,40,.55));animation:heroFloat 6.5s ease-in-out infinite}

/* — Tarjetas de beneficios montadas sobre el banner (firma ML) — */
.benefits{padding:0 0 clamp(40px,5vw,60px);margin-top:-56px;position:relative;z-index:5}
.benefit{background:#fff;border-radius:12px;padding:20px 22px;
  box-shadow:0 6px 24px rgba(18,21,59,.08),0 1px 4px rgba(18,21,59,.05);transition:transform .2s,box-shadow .2s}
.benefit:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,21,59,.12)}

/* — Banda transportadora en claro — */
.belt{background:#E9EDF7;border-block:1px solid #DCE1F0}
.belt::before,.belt::after{background:#B9C2E6;box-shadow:inset 0 0 0 3px rgba(255,255,255,.65)}
.belt-title{color:#7A81AC}
.lbl{box-shadow:0 6px 16px rgba(18,21,59,.12)}

/* — Sectores en claro — */
.sectors{background:#fff;color:var(--heading)}
.sectors::before,.sectors::after{display:none}
.sectors .section-title,.sectors h2{color:var(--heading)}
.sectors .section-sub{color:var(--text-soft)}
.marquee::before{background:linear-gradient(90deg,#fff,transparent)}
.marquee::after{background:linear-gradient(-90deg,#fff,transparent)}
.sector-chip{background:#F1F3FA;border-color:#E3E7F5;color:var(--heading)}
.sector-chip:hover,.sector-chip:focus-visible{background:#FFEDE0;border-color:var(--accent);color:var(--heading);box-shadow:0 6px 16px rgba(249,123,46,.18)}
.sector-chip:active{background:#FFE3CE}

/* — Bandas que eran oscuras, ahora claras — */
.dark-band{background:linear-gradient(150deg,#F5F7FD,#EAEDFA);color:var(--heading);border:1px solid #E2E6F4}
.dark-band h2,.dark-band h3{color:var(--heading)}
.dark-band .section-sub{color:var(--text-soft)}
.dark-band .spec-table{box-shadow:var(--shadow-sm)}

/* — Banda de contacto naranja (el banner CTA, como el azul de ML) — */
.contact-band{background:linear-gradient(135deg,#FF8A3D,#F96A0E 62%,#E85E0F);box-shadow:0 24px 54px rgba(249,106,14,.28)}
.contact-band h2{color:#fff}
.contact-band .section-sub{color:#FFEBDD}
.contact-band .eyebrow--light{color:#fff}
.channel{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.channel:hover{background:rgba(255,255,255,.22)}
.channel .icon{color:#fff}
.channel small{color:#FFE0CC}
.channel strong{color:#fff}

/* — Hero de páginas internas en claro — */
.page-hero{background:linear-gradient(150deg,#F5F7FD,#EAEDFA);color:var(--heading);border-bottom:1px solid #E4E8F5}
.page-hero::after{display:none}
.page-hero h1{color:var(--heading)}
.page-hero .lead{color:var(--text-soft)}
.breadcrumbs{color:#8A8FB5}
.breadcrumbs a{color:var(--blue-700)}
.hero-v2{background:linear-gradient(150deg,#F5F7FD,#EAEDFA);color:var(--heading)}
.hero-v2::before,.hero-v2::after{display:none}
.hero-v2 h1{color:var(--heading)}
.hero-v2 .lead{color:var(--text-soft)}
.hero-v2 .hero-points li{color:var(--heading)}

/* — Footer en claro — */
.footer{background:#EFF1F8;color:#5A6088;border-top:1px solid #E3E7F4}
.footer h4{color:var(--heading)}
.footer a{color:#5A6088}
.footer a:hover{color:var(--blue-700)}
.footer-bottom{border-top:1px solid #DFE4F2;color:#8A8FB5}
.footer-bottom a:hover{color:var(--blue-700)}

/* — Definición fina de tarjetas sobre fondo claro — */
.p-card,.info-card{border:1px solid #EAEEFA}

/* ============================================================
   V8 — Pulido final: menos curvatura, imágenes que cubren,
   capas del marquee al frente, impresora derecha
   ============================================================ */
:root{--radius:8px;--radius-lg:12px}
.btn{border-radius:6px}
.sector-chip{border-radius:8px}
.chip{border-radius:7px}
.benefit{border-radius:9px}
.info-card img,.p-frame img,.gallery img{border-radius:8px}
.spec-table{border-radius:8px}

/* las imágenes ya traen su fondo tipo tienda horneado: cubrir todo */
.p-card img,.info-card img,.alt-media img,.p-frame img{object-fit:cover}

/* la hilera de sectores se mueve SIEMPRE por encima, sin velos que la coman */
.marquee::before,.marquee::after{display:none}

/* demo de impresora: la etiqueta sale de la boca, alineada y derecha */
.print-area{margin-top:-50px;position:relative;z-index:3;justify-content:flex-start}
.print-label{width:44%;margin-left:29.5%;box-shadow:0 16px 28px rgba(18,21,59,.22);border-radius:0 0 6px 6px}
.print-label .pl-title{font-size:.8rem;white-space:nowrap}
.print-label .pl-sub{font-size:.62rem}

/* ============================================================
   V4 — Corrección de bugs (2026)
   ============================================================ */

/* 1) Banda y marquee: la animación CSS sólo aplica SIN JavaScript.
      Con JS activo manda el bucle por requestAnimationFrame (main.js);
      antes ambos escribían `transform` a la vez y se pisaban,
      por eso las hileras se veían "brincar" o desalineadas. */
.js .belt-track,
.js .marquee-row{animation:none}

/* 2) Título de la banda: en pantallas angostas la línea en mayúsculas
      con tracking amplio era más ancha que el viewport y .belt la recortaba
      por ambos lados (overflow:hidden). Se acota tamaño y tracking. */
.belt-title{padding:0 14px;text-wrap:balance}
@media (max-width:560px){
  .belt-title{font-size:.66rem;letter-spacing:.1em;line-height:1.6}
}

/* 3) Imágenes de tarjeta: con width/height en el HTML el navegador
      reserva su espacio desde el inicio; height:auto evita que el
      atributo height estire la imagen antes de cargar el CSS. */
.p-card img,.info-card img,.alt-media img,.p-frame img{height:auto}
.hero-ml img,.hero-v2 img{max-width:100%;height:auto}

/* 4) Seguro anti-desborde: ningún hijo de las secciones debe sacar
      contenido fuera de la pantalla en móvil. */
.section,.hero-ml,.benefits{overflow-x:clip}

/* 5) Menú móvil: que no herede animaciones de transform de otros parches */
.mobile-menu{will-change:transform}

/* 6) Janel: el diurex cuelga DESDE la altura del logo —es decir, por
      debajo de la barra superior y del encabezado (que se quedan como
      están)— y se mantiene en el lado derecho de la pantalla. */
.tape-side{
  top:calc(var(--header-h) + 36px);
  bottom:auto;
  height:calc(100vh - var(--header-h) - 36px);
}
/* el rollo se encoge desde su centro inferior para simular que se gasta */
.tape-roll-img{transform-origin:center 60%}

/* 7) Contacto: cuando un canal muestra dos líneas (4 teléfonos, 2 correos),
      cada valor va en su propio renglón */
.channel strong{display:block;line-height:1.45}