/* ═══════════════════════════════════════════════
   NONWATIO — ESTILO «EN FRÍO» COMPARTIDO
   Tokens, etiquetas, titulares, dígitos LCD, wordmark
   gigante y piezas comunes de home, tienda, producto y servicios.
   ═══════════════════════════════════════════════ */
:root{
  --cobalt:#2A36E6;--cobalt-deep:#1B24B4;--cobalt-ink:#0D1266;
  --ice:#DFF6FF;--frost:rgba(255,255,255,.14);
  --heat:#FF6B2C;--heat-deep:#2A0E04;
  --night:#070A1F;
}
body.cc{background:var(--navy)}
.cc-lbl{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:currentColor;opacity:.85;margin-bottom:20px}
.cc-lbl::before{display:none}
.cc-lbl.heat{color:var(--heat)}
.cc-lbl.ice{color:var(--cyan)}
.cc-h2{font-family:var(--font-display),sans-serif;font-weight:600;font-size:clamp(2.2rem,4.6vw,4.2rem)!important;line-height:1!important;letter-spacing:-.045em!important;color:var(--white)}
.cc-p{font-size:1.05rem;line-height:1.7;color:var(--text-muted);max-width:520px}

/* El nav es transparente sobre el azul; al bajar vuelve a su píldora */
body.cc #nav:not(.scrolled){background:transparent;border-color:transparent}
/* ── DÍGITOS DE 7 SEGMENTOS (LCD / contadores) ── */
.seg-wrap{display:inline-flex;align-items:flex-end;gap:.06em;height:1em}
.seg{height:100%;width:auto;overflow:visible}
.seg path{fill:currentColor;opacity:.07;transition:opacity .08s}
.seg path.on{opacity:1}
.seg.small{height:52%}
.seg-dot{width:.12em;height:.12em;border-radius:1px;background:currentColor;align-self:flex-end;margin:0 .02em .02em}
.seg-unit{align-self:flex-start;font-family:var(--font-display),sans-serif;font-weight:600;font-size:.34em;line-height:1;margin-left:.08em}
.cc-bigword{position:relative;z-index:2;margin-top:110px;padding:0 3vw;line-height:.78;overflow:hidden}
.cc-bigword span{display:block;font-family:var(--font-display),sans-serif;font-weight:600;font-size:13.6vw;letter-spacing:-.06em;white-space:nowrap;color:#fff;text-align:center;padding-bottom:1.4vw}
.cc-bigword i{font-style:normal;display:inline-block}

/* ── Tarjeta de cristal sobre el azul ── */
.cc-glass{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 50px rgba(10,16,110,.28),inset 0 1px 0 #fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--cobalt-ink)}
.cc-glass-n{flex-shrink:0;min-width:48px;height:48px;padding:0 8px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(42,54,230,.1);border:1px solid rgba(42,54,230,.22);font-family:var(--font-display),sans-serif;font-weight:700;font-size:.9rem;color:var(--cobalt)}
.cc-glass b{display:block;font-family:var(--font-display),sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
.cc-glass span{font-size:.84rem;line-height:1.45;color:rgba(13,18,102,.66)}

/* ── Botones sobre el azul ── */
.cc-on-blue .btn-p{background:#fff;color:var(--cobalt-ink)}
.cc-on-blue .btn-p:hover{background:var(--cyan);color:var(--ink)}
.cc-on-blue .btn-o{border-color:rgba(255,255,255,.5);color:#fff}
.cc-on-blue .btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── Hoja negra que se desliza sobre la escena fijada ── */
.cc-sheet{position:relative;z-index:3;background:#000;border-radius:32px 32px 0 0;box-shadow:0 -30px 80px rgba(0,0,0,.35)}

/* ── Cierre azul con palabra gigante ── */
.cc-close{position:relative;background:var(--cobalt);color:#fff;overflow:hidden;padding:120px 0 0;z-index:3}
.cc-close canvas{position:absolute;inset:0;width:100%;height:100%}
.cc-close-in{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.cc-close h2{font-family:var(--font-display),sans-serif;font-weight:500;font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.045em;max-width:680px}
.cc-close p{color:rgba(255,255,255,.78);line-height:1.7;margin:16px 0 0;max-width:520px}
.cc-close-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.cc-close .cc-bigword{margin-top:90px}
@media(max-width:860px){.cc-close{padding-top:90px}.cc-close-in{grid-template-columns:1fr}.cc-close-acts{justify-content:flex-start}.cc-close .cc-bigword{margin-top:60px}}

/* ── LCD del sensor TS301 (x 384–816, y 380–634 sobre la foto de 1200 px) ── */
/* LCD real del sensor: x 384–816, y 380–634 sobre 1200 px */
.cc-lcd{position:absolute;left:32.2%;top:31.8%;width:35.7%;height:21%;border-radius:1.2%/2%;overflow:hidden;
  background:linear-gradient(135deg,#aeb2ad 0%,#d2d5d0 10%,#e6e8e3 45%,#eef0ea 100%);
  box-shadow:inset 3px 3px 6px rgba(0,0,0,.28);color:#1b1d1c;container-type:size;
  display:grid;grid-template-rows:25% 1fr;padding:3% 5% 5%}
.cc-lcd-top{display:flex;align-items:center;gap:6cqw;font-family:var(--font-display),sans-serif;font-weight:600;font-size:11cqh;letter-spacing:.02em}
.cc-lcd-top .t{display:flex;align-items:center;gap:2cqw}
.cc-lcd-top small{font-size:.55em;line-height:1;opacity:.8}
.cc-lcd-warn{width:14cqh;height:14cqh;opacity:.08;transition:opacity .15s}
.cc-lcd.alarm .cc-lcd-warn{opacity:1;animation:ccBlink .6s steps(1) infinite}
@keyframes ccBlink{50%{opacity:.1}}
.cc-lcd-top .icons{margin-left:auto;display:flex;align-items:center;gap:4cqw}
.cc-lcd-top svg{height:12cqh;width:auto}
.cc-lcd-main{display:flex;align-items:flex-end;justify-content:center;font-size:58cqh;padding-bottom:2cqh}
.cc-lcd-main .seg-wrap{height:.92em}

/* ── TARJETA DE PRODUCTO (tienda y relacionados) ─────────────
   El producto flota sobre un azul helado; al pasar el ratón se
   levanta, gira un poco y aparece «Ver producto». */
.nw-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nw-pcard{position:relative;display:flex;flex-direction:column;border-radius:26px;background:var(--navy-card);border:1px solid var(--line);overflow:hidden;transition:border-color .4s,transform .6s var(--ease)}
.nw-pcard:hover{border-color:rgba(0,194,255,.45)}
.nw-pcard-media{position:relative;display:block;aspect-ratio:1/.82;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#4A56FF 0%,var(--cobalt) 55%,var(--cobalt-deep) 100%)}
.nw-pcard-media::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.14'%3E%3Cpath d='M120 20v200M33 70l174 100M33 170L207 70'/%3E%3Cpath d='M120 60l-16-16M120 60l16-16M120 180l-16 16M120 180l16 16M68 90l-22 6M68 90l-6-22M172 150l22-6M172 150l6 22M68 150l-22-6M68 150l-6 22M172 90l22 6M172 90l6-22'/%3E%3C/g%3E%3C/svg%3E") -40px -30px/240px}
.nw-pcard-media.is-sheet{background:#F2F4F7}
.nw-pcard-media.is-sheet::before{display:none}
.nw-pcard-media img{position:absolute;inset:11% 14% 13%;width:72%;height:76%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(8,12,90,.5));transition:transform .8s var(--ease)}
.nw-pcard-media.is-sheet img{filter:none}
.nw-pcard-media img.nw-noimg{inset:34% 36%;width:28%;height:32%;opacity:.9}
.nw-pcard:hover .nw-pcard-media img{transform:translateY(-5%) rotate(-4deg) scale(1.06)}
.nw-pcard-ref{position:absolute;left:16px;top:16px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);font-size:.68rem;font-weight:700;letter-spacing:.08em;color:#fff}
.nw-pcard-media.is-sheet .nw-pcard-ref{background:rgba(13,18,102,.06);border-color:rgba(13,18,102,.15);color:var(--cobalt-ink)}
.nw-pcard-idx{position:absolute;right:16px;top:8px;z-index:2;font-family:var(--font-display),sans-serif;font-weight:500;font-size:3.2rem;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.7)}
.nw-pcard-media.is-sheet .nw-pcard-idx{-webkit-text-stroke-color:rgba(13,18,102,.3)}
.nw-pcard-go{position:absolute;left:50%;bottom:16px;z-index:2;transform:translate(-50%,20px);opacity:0;padding:9px 16px;border-radius:999px;background:#fff;color:var(--cobalt-ink);font-size:.8rem;font-weight:600;white-space:nowrap;transition:opacity .4s,transform .5s var(--ease)}
.nw-pcard:hover .nw-pcard-go{opacity:1;transform:translate(-50%,0)}
.nw-pcard-feat{position:absolute;left:16px;bottom:16px;z-index:2;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--heat);padding:5px 10px;border-radius:999px;transition:opacity .3s}
.nw-pcard:hover .nw-pcard-feat{opacity:0}
.nw-pcard-bd{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.nw-pcard-cat{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.nw-pcard h3{font-family:var(--font-display),sans-serif;font-size:1.22rem;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.nw-pcard h3 a{color:inherit}
.nw-pcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.nw-pcard-tags span{font-size:.7rem;font-weight:500;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--text-muted)}
.nw-pcard-ft{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.nw-pcard-price{font-size:.78rem;color:var(--text-muted);margin-right:auto;line-height:1.3}
.nw-pcard-price b{display:block;color:var(--white);font-size:.9rem;font-weight:600}
.nw-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:40px}
.nw-qty button{width:32px;height:100%;border:none;background:none;color:var(--white);font-size:1rem;cursor:pointer;border-radius:999px}
.nw-qty button:hover{background:rgba(247,246,236,.08)}
.nw-qty span{min-width:18px;text-align:center;font-size:.85rem;font-weight:700}
.nw-add{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;border:none;background:var(--cyan);color:var(--ink);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.nw-add:hover{background:var(--white);transform:translateY(-1px)}
.nw-add.added{background:#6CFFB0}
.nw-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1024px){.nw-pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nw-pgrid{grid-template-columns:1fr}.nw-add span{display:none}.nw-add{padding:0 13px}}