/* =====================================================
   PAPER SELL — VARIANTE BLANCA
   Se carga DESPUÉS de papersell.css y solo repinta.
   Morado y amarillo institucionales se conservan como acento.
   ===================================================== */

:root{
  --pur:#602080;--pur-d:#2a0d3d;--pur-l:#9542bd;
  --yel:#fff020;--yel-d:#d4c400;

  --cream:#ffffff;--cream-2:#f4f4f6;--off:#ffffff;
  --ink:#111113;--ink-2:#26262a;--muted:#6a6a72;
  --line:rgba(17,17,19,.12);
  --red-tint:rgba(96,32,128,.07);

  --glass-bg:rgba(255,255,255,.82);
  --glass-brd:rgba(17,17,19,.10);
  --glass-shadow:0 18px 44px -24px rgba(17,17,19,.22), 0 4px 14px -8px rgba(17,17,19,.12);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.9);
}

body{background:#fff;background-image:none}
a{color:var(--pur)}a:hover{color:var(--pur-d)}

/* ---------- HERO / SLIDER HILO ---------- */
.hilo{background:var(--cream-2)}
.hilo-wash{background:radial-gradient(90% 120% at 22% 20%,#fff 0%,transparent 62%),linear-gradient(120deg,#f7f7f9 0%,#f0f0f3 58%,#ebebef 100%)}
/* el wordmark es blanco: sobre fondo claro se invierte a tinta tenue */
.hilo-word{opacity:.06;filter:invert(1)}
.hilo-rule{background:linear-gradient(90deg,transparent,rgba(96,32,128,.22) 22%,rgba(96,32,128,.22) 62%,transparent)}
.hilo-orb-a{background:radial-gradient(circle at 34% 30%,rgba(96,32,128,.10),transparent 66%)}
.hilo-orb-b{background:radial-gradient(circle at 60% 40%,rgba(255,240,32,.22),transparent 64%)}
.hilo-tag{color:var(--pur)}
.hilo-name{color:var(--ink)}
.hilo-spec{color:var(--muted)}
.hilo-shot img{filter:none}
.products-panels .product-card.glass,.pface{background:#f7f6fc}
.hilo-cta{background:var(--pur);color:#fff}
.hilo-cta:hover{box-shadow:0 16px 34px -14px rgba(96,32,128,.55)}
.hilo-arrow{border:1px solid rgba(17,17,19,.16);background:rgba(255,255,255,.7);color:var(--ink)}
.hilo-arrow:hover{background:#fff}
.hilo-dot{background:rgba(17,17,19,.22)}
.hilo-dot[data-on="1"]{background:var(--pur)}
.hilo-count{color:rgba(17,17,19,.45)}

/* ---------- TARJETAS DE PRODUCTO: todas blancas ---------- */
.products-panels .product-card,
.products-panels .product-card:nth-child(4n+1),
.products-panels .product-card:nth-child(4n+2),
.products-panels .product-card:nth-child(4n+3),
.products-panels .product-card:nth-child(4n+4){
  --panel:#f7f6fc;--panel-ink:var(--ink);--panel-dim:var(--muted);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(17,17,19,.04);
  transition:box-shadow .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s;
}
.products-panels .product-img{background:transparent}
.products-panels .product-card:hover{
  border-color:rgba(96,32,128,.42);
  box-shadow:0 22px 48px -26px rgba(17,17,19,.30);
  transform:translateY(-4px);
}
.products-panels .product-card .product-card-cta,
.products-panels a.product-card-cta{color:var(--pur)}

/* ---------- SECCIÓN CORTE (era oscura) ---------- */
.corte{background:var(--cream-2);color:var(--ink)}
.corte .section-title,.corte h2,.corte h3{color:var(--ink)}
.corte p,.corte li,.corte .section-lede{color:var(--muted)}
.corte-bg-glow{background:radial-gradient(circle,rgba(96,32,128,.10),transparent 62%)}
.corte-bg-lines{opacity:.35}
.corte-list li{color:var(--ink-2);border-color:var(--line)}
.corte-visual{background:#fff;border:1px solid var(--line)}
.corte-visual-label,.corte-visual-spec{color:var(--ink)}
.corte-cut-line{background:var(--pur)}
.btn-link-light{color:var(--pur);border-color:rgba(96,32,128,.4)}
.btn-link-light:hover{color:var(--pur-d);border-color:var(--pur-d)}

/* ---------- NOSOTROS ---------- */
.nosotros{background:linear-gradient(180deg,#fff 0%,var(--cream-2) 100%)}

/* ---------- CONTACTO ---------- */
.contacto{background:#fff}
.contacto-bg{background:radial-gradient(ellipse 700px 500px at 20% 30%,rgba(96,32,128,.07),transparent 62%),radial-gradient(ellipse 500px 400px at 85% 75%,rgba(255,240,32,.16),transparent 62%)}
.contacto-form{background:#fff;border:1px solid var(--line);box-shadow:var(--glass-shadow)}

/* ---------- HERO: fondo plano del mismo tono que las fotos ---------- */
.hilo{background:#f7f6fc}
.hilo-wash{background:#f7f6fc}
.hilo-orb{display:none}
.hilo-shot img{filter:none}
.hilo-rule{background:linear-gradient(90deg,transparent,rgba(96,32,128,.18) 22%,rgba(96,32,128,.18) 62%,transparent)}

/* ---------- FOTOS DEL CATÁLOGO: recortadas, sin caja ----------
   Vienen con fondo transparente y sin la sombra original de estudio.
   La sombra la pone el CSS, igual para las 17, así ninguna desentona. */
.products-panels .product-img{margin:0;border-radius:0;overflow:visible;background:none;align-items:center}
.products-panels .product-img img,
.products-panels .product-card:hover .product-img img{transform:none;width:100%;height:100%;max-width:none;object-fit:contain;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s cubic-bezier(.2,.8,.2,1)}
.products-panels .product-img img{filter:none}
.products-panels .product-card:hover .product-img img{transform:scale(1.05);filter:none}
.product-img-shine{display:none}

/* ---------- SUCURSALES: tarjeta con borde y sombra ---------- */
.suc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 22px;box-shadow:0 1px 2px rgba(17,17,19,.04);transition:box-shadow .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.suc:hover{border-color:rgba(96,32,128,.34);box-shadow:0 20px 44px -26px rgba(17,17,19,.30);transform:translateY(-3px)}
.suc-name{color:var(--ink)}
.suc-mail{color:var(--pur)}
.suc-mail:hover{color:var(--pur-d)}
a.suc-dir{display:block;color:var(--muted);text-decoration:none;border-bottom:0}
a.suc-dir:hover{color:var(--pur)}
.suc-mapa{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.04em;color:var(--pur);text-decoration:none;margin-top:2px}
.suc-mapa:hover{color:var(--pur-d);text-decoration:underline}
.suc-mapa svg{width:13px;height:13px;flex:0 0 auto}

/* ---------- FRANJA SUPERIOR QUE SE ESCONDE AL BAJAR ---------- */
.topbar{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.nav{transition:top .32s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s}
body.topbar-oculta .topbar{transform:translateY(-100%)}
body.topbar-oculta .nav{top:0}

/* ---------- PÁGINAS DE PRODUCTO ----------
   El texto de estas páginas venía en morado; sobre blanco se lee como enlace. */
.pdp-lede,.pdp-sec p,.faq-a{color:var(--muted)}
.pdp-title,.pdp-h2,.faq-q,.spec-table td,.usos li,.pdp-list li,.rel-name{color:var(--ink)}
.pdp-eyebrow{color:var(--pur)}
.pdp-chip{background:rgba(96,32,128,.08);color:var(--pur-d)}
.usos li{background:#fff}
.usos{background:var(--line)}
.pdp-thumb{background:var(--cream-2);border-color:var(--line)}
.pdp-shot{background:#f7f6fc}
.rel{background:#fff;border:1px solid var(--line)}
.rel:hover{background:#fff;border-color:rgba(96,32,128,.34)}
.pdp-back{color:var(--pur)}
.crumbs a:hover{color:var(--pur)}

/* ---------- TÍTULOS QUE ERAN BLANCOS SOBRE OSCURO ---------- */
.section-title-light{color:var(--ink)}
.section-title-light em{color:var(--pur-l)}
.section-title em{color:var(--pur-l)}
.corte-list li .mono{color:var(--pur)}

/* ---------- CALCULADORA: de panel oscuro a panel claro ---------- */
.calc{background:#fff;border:1px solid var(--line);box-shadow:var(--glass-shadow)}
.calc-title{color:var(--ink)}
.calc-title em{color:var(--pur-l)}
.calc-lede{color:var(--muted)}
.calc-group-label{color:var(--pur)}
.calc-form label .mono{color:var(--muted)}
.calc-input{background:#fbfbfc;border:1px solid var(--line)}
.calc-input input{color:var(--ink)}
.calc-input input::placeholder{color:rgba(17,17,19,.32)}
.calc-input span{color:var(--muted);border-left:1px solid var(--line)}
.calc-input:focus-within{background:#fff;border-color:var(--pur);box-shadow:0 0 0 3px rgba(96,32,128,.14)}
.calc-seg{background:#f2f2f4;border:1px solid var(--line)}
.calc-seg span{color:var(--muted)}
.calc-seg input:checked+span{background:var(--pur);color:#fff}
.calc-seg input:focus-visible+span{outline:2px solid var(--pur)}
.calc-aviso{background:rgba(255,240,32,.30);border:1px solid rgba(212,196,0,.55);color:var(--pur-d)}
.calc-canvas-label{color:var(--muted)}
.calc-canvas-wrap{background:#fbfbfc;border:1px solid var(--line)}
.calc-stat{background:#fbfbfc;border:1px solid var(--line);color:var(--ink)}
.calc-stat .mono{color:var(--muted)}
.calc-stat-hl{background:var(--pur);color:#fff}
.calc-stat-hl .mono{color:rgba(255,255,255,.72)}
.calc-reset{color:var(--pur);border-color:rgba(96,32,128,.32)}
.calc-reset:hover{background:var(--pur);color:#fff;border-color:var(--pur);box-shadow:0 10px 28px -8px rgba(96,32,128,.45)}

/* ---------- CONTACTO: texto era blanco sobre oscuro ---------- */
.contacto-title,.contacto .section-title,.contacto h2{color:var(--ink)}
.contacto-title em,.contacto .section-title em{color:var(--pur-l)}
.contacto .section-lede,.contacto p{color:var(--muted)}
.contacto-form label .mono,.contacto-form .mono{color:var(--muted)}
.contacto-form input,.contacto-form select,.contacto-form textarea{background:#fbfbfc;border:1px solid var(--line);color:var(--ink)}
.contacto-form input::placeholder,.contacto-form textarea::placeholder{color:rgba(17,17,19,.32)}
.contacto-form input:focus,.contacto-form select:focus,.contacto-form textarea:focus{background:#fff;border-color:var(--pur);box-shadow:0 0 0 3px rgba(96,32,128,.14)}
.form-foot,.form-foot *{color:var(--muted)}
.form-direct a{color:var(--pur)}
.form-direct a:hover{color:var(--pur-d)}
.form-sent{color:var(--ink)}

/* ---------- AMARILLO: solo como bloque, nunca como texto sobre blanco ---------- */
.tag,.mono.tag{color:var(--pur)}
.btn-primary{background:var(--pur);color:#fff}
.btn-primary:hover{background:var(--pur-d)}

/* =====================================================
   BARRA DE ACCIÓN MÓVIL — reemplaza la topbar en celular
   ===================================================== */
.mbar{display:none}
.mbar-btn{
  flex:1 1 0;min-height:52px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
.mbar-call{background:var(--pur);color:#fff}
.mbar-call:hover,.mbar-call:active{background:var(--pur-d);color:#fff}
.mbar-quote{background:var(--yel);color:var(--pur-d)}
.mbar-quote:hover,.mbar-quote:active{background:var(--yel-d);color:var(--pur-d)}
.mbar-btn svg{width:18px;height:18px;flex:0 0 auto}

@media (max-width:900px){
  /* fuera la franja de contacto: no se gana los 34px */
  .topbar{display:none}
  .nav{top:0}
  .hilo-first{padding-top:96px}
  .hilo-first .hilo-count{top:calc(96px + 18px)}

  .mbar{
    display:flex;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--line);
  }
  /* que la barra no tape el final del sitio */
  body{padding-bottom:84px}
}
@media (max-width:900px) and (display-mode:standalone){
  .mbar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* sombra horneada en la foto: sin sombra de CSS */
@media (hover:none){.products-panels .product-img img,.products-panels .product-card:hover .product-img img{filter:none!important}}

/* 24 sep: sin óvalo gris bajo la foto (la sombra ya viene en la imagen) */
.products-panels .product-card-inner::after,.pface-front::after{display:none}
/* 24 sep: el menú flotante tapaba el texto de atrás en celular */
.nav-inner{background:rgba(255,255,255,.94)}
/* 24 sep: la unidad no se pasa a mayúsculas (G/M²) */
.u{text-transform:none}

/* 24 sep: fotos DERECHAS, sin inclinación (dirección) */
.products-panels .product-img img{--pimg-t:none;transform:none!important}
.products-panels .product-card:hover .product-img img{transform:scale(1.05)!important}
@media (max-width:900px){.products-panels .product-img img,.products-panels .product-card:hover .product-img img{--pimg-t:scale(1.12);transform:scale(1.12)!important}}
@media (max-width:560px){.products-panels .product-img img,.products-panels .product-card:hover .product-img img{--pimg-t:scale(1.2);transform:scale(1.2)!important}}
@media (hover:none){.products-panels .product-img img,.products-panels .product-card:hover .product-img img{filter:none!important}}

/* 25 sep: productos relacionados — foto completa, flecha; en celular 2 columnas */
.pdp-aside-title{font-size:12px;color:var(--ink);letter-spacing:.1em;margin-bottom:6px}
.rel{position:relative}
.rel img{object-fit:contain;background:#f4f4f6;padding:4px}
.rel-spec{font-size:12px;color:#6a6a72}
.rel-go{margin-left:auto;color:var(--pur);font-size:18px;padding-right:4px;transition:transform .2s}
.rel:hover .rel-go{transform:translateX(3px)}
@media (max-width:900px){
.pdp-aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pdp-aside-title,.pdp-aside-box{grid-column:1/-1}
.rel{flex-direction:column;align-items:stretch;gap:10px;padding:10px 10px 14px}
.rel img{width:100%;height:auto;aspect-ratio:1;padding:10px}
.rel-txt{padding:0 22px 0 4px}
.rel-name{font-size:15px}
.rel-go{position:absolute;right:12px;top:calc(100% - 42px);padding:0}
}

/* 25 sep (Elias): carrusel HILO sin botón; la foto es el enlace a la ficha */
.hilo-shot-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hilo-shot-link img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hilo-shot-link:hover img{transform:scale(1.03)}
.hilo-shot-link:active img{transform:scale(.98)}

/* 25 sep: sin el botón, el carrusel en celular dejaba un hueco; la altura ahora la marca el contenido */
@media (max-width:900px){.hilo-first{height:auto;min-height:0;padding-bottom:116px}}