/* Clima en Casa
   -------------------------------------------------------------------------
   Dirección: "instrumento". El sitio mide cosas — grados, kilowatts, pesos al
   mes — así que el fondo es un gris frío de instrumento, no un crema tibio, y
   los dos acentos NO son decoración: naranja = calor, cian = frío. Son los dos
   temas del sitio y se usan para señalar cuál es cuál.

   Consecuencia práctica: cuando entre el contenido de aire acondicionado, el
   sitio ya tiene su color y no hay que rediseñar nada.
   ------------------------------------------------------------------------- */

:root{
  /* El sitio es siempre claro (casi blanco), aunque el visitante tenga el equipo
     en modo oscuro. Por eso NO respondemos a prefers-color-scheme. */
  color-scheme: light;

  /* Página casi blanca. Las tarjetas son blancas también, así que la separación
     la dan el borde y una sombra apenas más marcada, no un fondo gris. */
  --bg:#fbfcfd; --surface:#ffffff; --sunk:#eef2f5; --raised:#ffffff;
  --line:#dce3e9; --line-hi:#c3cdd6;
  --text:#0f171e; --muted:#4f5d6a; --faint:#5b6874;

  /* acentos semánticos */
  --warm:#cf4318;  --warm-ink:#a83513; --warm-soft:#fdeee7; --warm-line:#f6cdba;
  /* El botón lleva su propio par: en oscuro el naranja se aclara tanto que el
     texto blanco cae a 2.7:1. Ahí el texto pasa a ser oscuro sobre el naranja. */
  --btn-bg:#cf4318; --btn-bg-hover:#a83513; --btn-fg:#ffffff;
  --cool:#0b7a96;  --cool-ink:#095f76; --cool-soft:#e6f4f8; --cool-line:#b8dfe9;
  --good:#0d7350;  --good-soft:#e4f3ec; --good-line:#b6ded0;

  --shadow-sm:0 1px 3px rgba(15,23,30,.07), 0 1px 2px rgba(15,23,30,.04);
  --shadow:0 3px 10px rgba(15,23,30,.08), 0 1px 3px rgba(15,23,30,.05);
  --shadow-lg:0 14px 36px rgba(15,23,30,.12), 0 3px 8px rgba(15,23,30,.06);

  --r:10px; --r-lg:16px; --max:1080px;
  --fh:'Archivo',system-ui,sans-serif;
  --fb:'Source Sans 3',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.65;
     font-size:16.5px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--fh);letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
:focus-visible{outline:2.5px solid var(--cool);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* cifras alineadas en todo lo que sea dato */
.price,.mini-price,table td,.row .v,.big .val,.spec b,.s-price,.stars-n{font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--fh);font-weight:800;font-size:18px;letter-spacing:-.035em;display:flex;align-items:center;gap:9px}
.brand span{color:var(--warm)}
.logo-mark{display:block;flex:0 0 auto}
.nav-links{display:flex;gap:24px;font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a{padding:4px 0;border-bottom:2px solid transparent;transition:.15s}
.nav-links a:hover{color:var(--text);border-bottom-color:var(--warm)}

/* En móvil el menú NO se oculta: pasa a una fila de pills que se desliza en
   horizontal (mismo patrón que gratistragamonedas.cl). Sin JS, sin hamburguesa,
   y el usuario siempre ve a dónde puede ir. */
@media(max-width:720px){
  .nav-in{height:auto;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .nav-in .brand{padding:11px 20px 7px}
  .nav-links{
    gap:8px;font-size:13px;padding:0 20px 10px;
    flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    flex:0 0 auto;white-space:nowrap;
    padding:7px 13px;border:1px solid var(--line);border-radius:999px;
    background:var(--sunk);color:var(--muted);
  }
  .nav-links a:hover,.nav-links a:focus-visible{
    color:var(--text);border-color:var(--warm);background:var(--warm-soft);
  }
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px 72px}
.crumb{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--faint);padding:18px 0 0}
.crumb a{color:var(--cool)}.crumb a:hover{text-decoration:underline}
.crumb em{font-style:normal;color:var(--muted)}

/* ---------- banda oscura de encabezado ----------
   Tokens propios, NO derivados del tema: la banda es oscura siempre, tanto para
   el visitante en modo claro como en oscuro. Por eso no van en :root con override. */
.band{
  --band-bg:#0a2c35; --band-bg2:#0f3f4b; --band-fg:#eef7fa;
  --band-mut:#a7c6ce; --band-line:rgba(255,255,255,.16);
  /* color sólido bajo el degradado: si el degradado no pinta, el texto claro
     sigue teniendo fondo oscuro y legible */
  background-color:#0a2c35;
  background-image:linear-gradient(150deg,var(--band-bg) 0%,var(--band-bg2) 100%);
  color:var(--band-fg);border-bottom:1px solid rgba(0,0,0,.2);position:relative}
.band::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
             background:linear-gradient(90deg,var(--warm),var(--cool))}
.band-in{max-width:var(--max);margin:0 auto;padding:22px 20px 40px;
         display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.band-main{min-width:0;max-width:68ch}
.band-crumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;
            color:var(--band-mut);margin-bottom:22px}
.band-crumb a{color:var(--band-mut)}
.band-crumb a:hover{color:var(--band-fg);text-decoration:underline}
.band-crumb em{font-style:normal;color:var(--band-fg)}
.band-crumb span{opacity:.45}
.band-pill{display:inline-block;font-family:var(--fh);font-size:11.5px;font-weight:700;
           letter-spacing:.11em;text-transform:uppercase;color:var(--band-fg);
           background:rgba(255,255,255,.11);border:1px solid var(--band-line);
           padding:5px 13px;border-radius:999px;margin-bottom:18px}
.band h1{font-size:clamp(28px,4.3vw,44px);font-weight:800;letter-spacing:-.035em;
         color:#fff;margin-bottom:16px}
.band-lead{font-size:18px;line-height:1.62;color:var(--band-mut)}
.band-lead strong{color:var(--band-fg);font-weight:600}
.band-lead a{color:#8ed6e8;text-decoration:underline}
.band-disc{font-size:12.5px;color:var(--band-mut);opacity:.85;margin-top:16px;max-width:60ch}
.band-author{display:flex;align-items:center;gap:11px;margin-top:22px;
             padding-top:18px;border-top:1px solid var(--band-line)}
.band-avatar{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:grid;place-items:center;
             font-family:var(--fh);font-weight:800;font-size:16px;color:#0a2c35;
             background-color:#c2c6b8;
             background-image:linear-gradient(140deg,#f0b58f,#8ed6e8)}
.band-author b{display:block;font-size:14.5px;font-weight:700;color:var(--band-fg)}
.band-author em{font-style:normal;font-size:12.5px;color:var(--band-mut)}
.band-aside{background:var(--surface);color:var(--text);border-radius:var(--r-lg);
            padding:24px 26px;box-shadow:var(--shadow-lg);margin-top:52px}
.band-aside h2{font-family:var(--fh);font-size:13px;font-weight:800;text-transform:uppercase;
               letter-spacing:.09em;color:var(--faint);margin-bottom:12px}
.band-aside p{font-size:15px;color:var(--muted);line-height:1.62}
.band-aside strong{color:var(--text);font-weight:600}
@media(max-width:900px){
  .band-in{grid-template-columns:1fr;gap:22px;padding-bottom:32px}
  .band-aside{margin-top:0}
}

/* ---------- hero (páginas sin banda) ---------- */
.hero{padding:36px 0 12px;max-width:70ch}
.eyebrow{display:inline-block;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.12em;
         text-transform:uppercase;color:var(--warm-ink);background:var(--warm-soft);
         border:1px solid var(--warm-line);padding:5px 12px;border-radius:6px;margin-bottom:18px}
.hero h1{font-size:clamp(29px,4.4vw,45px);font-weight:800;letter-spacing:-.035em;margin-bottom:16px}
.lead{color:var(--muted);font-size:17.5px;line-height:1.68}
.lead strong{color:var(--text);font-weight:600}
.byline{font-size:13px;color:var(--faint);margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.byline b{color:var(--muted);font-weight:600}
.byline a{color:var(--cool)}

/* ---------- bloques de texto ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
      padding:26px 30px;margin:18px 0;box-shadow:var(--shadow-sm)}
.card h2{font-size:22px;font-weight:700;margin-bottom:14px}
.card h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.card p{color:var(--muted);margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.card p strong,.card li strong{color:var(--text);font-weight:600}
.card a{color:var(--cool);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.card ul,.card ol{padding-left:20px;display:flex;flex-direction:column;gap:9px;margin-bottom:13px;color:var(--muted)}
.sec-title{font-size:clamp(21px,3vw,29px);font-weight:800;letter-spacing:-.03em;margin:42px 0 5px}
.sec-sub{color:var(--muted);font-size:16px;margin-bottom:18px}

/* ---------- botones ---------- */
.btn{display:block;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--fh);font-weight:700;font-size:15px;
     padding:12px 20px;border-radius:var(--r);text-align:center;transition:.15s;border:none;cursor:pointer;
     box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow)}
.btn .arrow{opacity:.65;font-weight:400}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line-hi);font-size:14px;box-shadow:none}
.btn.ghost:hover{color:var(--text);background:var(--sunk);box-shadow:none}
.btn.sm{font-size:13px;padding:8px 14px;border-radius:8px}

/* ---------- chip de nota ----------
   El color codifica el tramo (verde = recomendable, gris = flojo), así que la
   tabla se lee de un vistazo sin comparar decimales. */
.nota{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--fh);
      padding:5px 10px;border-radius:8px;line-height:1;white-space:nowrap}
.nota b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.nota em{font-style:normal;font-size:10.5px;font-weight:600;opacity:.72}
.nota.top{background:var(--good);color:#fff}
.nota.alta{background:var(--cool);color:#fff}
.nota.media{background:var(--sunk);color:var(--text);border:1px solid var(--line-hi)}
.nota.baja{background:var(--sunk);color:var(--faint);border:1px solid var(--line)}
.nota.xl{padding:9px 14px;border-radius:10px}
.nota.xl b{font-size:22px}.nota.xl em{font-size:12px}

/* ---------- estrellas ---------- */
.stars{display:inline-flex;gap:1px;font-size:14px;letter-spacing:1px}
.stars i{font-style:normal;color:var(--line-hi)}
.stars i.on{color:#e0921b}
.stars i.half{background:linear-gradient(90deg,#e0921b 50%,var(--line-hi) 50%);
              -webkit-background-clip:text;background-clip:text;color:transparent}
.stars-n{font-family:var(--fh);font-size:14px;font-weight:800;margin-left:7px;vertical-align:1px}

/* ---------- calculadora: lectura de instrumento ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
       padding:26px 28px;box-shadow:var(--shadow-sm)}
.panel.out{background:var(--raised);border-color:var(--cool-line);box-shadow:var(--shadow)}
.panel h2{font-family:var(--fh);font-weight:700;font-size:16px;margin-bottom:20px;
          display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.field{margin-bottom:15px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field .hint{display:block;font-size:12.5px;color:var(--faint);font-weight:400;margin-top:2px}
.inp{width:100%;background:var(--sunk);border:1px solid var(--line-hi);border-radius:9px;color:var(--text);
     font-family:var(--fb);font-size:16px;font-weight:600;padding:11px 13px;outline:none;
     font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.inp:focus{border-color:var(--cool);background:var(--surface)}
select.inp{cursor:pointer}
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button{flex:1 1 auto;min-width:80px;background:var(--sunk);border:1px solid var(--line-hi);border-radius:8px;
            color:var(--muted);font-family:var(--fh);font-weight:700;font-size:13px;padding:9px 8px;
            cursor:pointer;transition:.15s}
.seg button:hover{border-color:var(--cool-line);color:var(--text)}
.seg button.on{background:var(--cool);border-color:var(--cool);color:var(--btn-fg)}

.big{background:linear-gradient(150deg,var(--cool-soft),transparent 140%);
     border:1px solid var(--cool-line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:15px}
.big .lbl{font-family:var(--fh);font-size:11.5px;font-weight:700;text-transform:uppercase;
          letter-spacing:.1em;color:var(--cool-ink);margin-bottom:7px}
.big .val{font-family:var(--fh);font-weight:800;font-size:clamp(31px,5.5vw,42px);line-height:1.02;letter-spacing:-.035em}
.big .sub{font-size:13.5px;color:var(--muted);margin-top:7px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--sunk);
     border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;margin-bottom:9px}
.row .k{font-size:14px;color:var(--muted)}
.row .v{font-family:var(--fh);font-weight:700;font-size:16px;white-space:nowrap}
.row.win{background:var(--good-soft);border-color:var(--good-line)}
.row.win .v{color:var(--good)}
.note{font-size:13.5px;color:var(--faint);line-height:1.6;margin-top:13px}

/* ---------- tablas ---------- */
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--r-lg);
          background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
th{background:var(--sunk);color:var(--muted);font-family:var(--fh);font-weight:700;font-size:11.5px;
   text-transform:uppercase;letter-spacing:.07em;padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--text);font-weight:600}
tbody tr:hover{background:var(--sunk)}

/* ---------- tira de elegidos ---------- */
.picks-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 8px}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
      display:flex;flex-direction:column;text-align:center;transition:.18s;box-shadow:var(--shadow-sm)}
.mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-hi)}
.mini.hero-pick{border-color:var(--warm-line);box-shadow:var(--shadow)}
.mini .mini-tag{font-family:var(--fh);font-size:10.5px;font-weight:800;letter-spacing:.1em;
                text-transform:uppercase;color:var(--warm-ink);margin-bottom:12px}
.mini.hero-pick .mini-tag{color:var(--btn-fg);background:var(--warm);margin:-20px -20px 14px;padding:7px;
                          border-radius:var(--r-lg) var(--r-lg) 0 0}
.mini .estufa-svg,.mini .aire-svg{margin:0 auto 10px}
.aire-svg{display:block;max-width:100%;height:auto}
.pick-media .aire-svg{width:auto;max-height:120px}
.mini h4{font-family:var(--fh);font-size:15px;font-weight:700;margin-bottom:6px}
.mini .mini-why{font-size:13.5px;color:var(--muted);line-height:1.5;margin:9px 0 13px;flex:1}
.mini .mini-price{font-family:var(--fh);font-weight:800;font-size:19px;margin-bottom:11px;letter-spacing:-.02em}
@media(max-width:760px){.picks-strip{grid-template-columns:1fr}}

/* ---------- ficha de producto ---------- */
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin:20px 0;
      overflow:hidden;display:grid;grid-template-columns:180px 1fr 236px;box-shadow:var(--shadow-sm)}
.pick.top{border-color:var(--warm-line);box-shadow:var(--shadow-lg)}
.pick-media{background:var(--sunk);border-right:1px solid var(--line);padding:24px 16px;
            display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.pick-rank{position:absolute;top:12px;left:12px;width:27px;height:27px;border-radius:8px;
           background:var(--text);color:var(--surface);font-family:var(--fh);font-size:13px;font-weight:800;
           display:flex;align-items:center;justify-content:center}
.pick.top .pick-rank{background:var(--warm);color:var(--btn-fg)}
.pick-media .disclaimer{font-size:10px;color:var(--faint);text-align:center;margin-top:12px;line-height:1.45}
/* Foto real de producto: cuadrada, sin deformar, sobre el fondo claro del media */
.prod-img{width:100%;max-width:170px;height:auto;aspect-ratio:1/1;object-fit:contain;
          display:block;mix-blend-mode:multiply}
@media (prefers-color-scheme: dark){.prod-img{mix-blend-mode:normal;border-radius:10px;background:#fff}}
.mini .prod-img{max-width:112px;margin:0 auto 10px}
.pick-body{padding:26px 28px;min-width:0}
.pick-tag{display:inline-block;font-family:var(--fh);font-size:10.5px;font-weight:800;letter-spacing:.1em;
          text-transform:uppercase;color:var(--btn-fg);background:var(--warm);padding:5px 11px;border-radius:6px;margin-bottom:12px}
.pick-tag.alt{background:var(--cool);color:var(--btn-fg)}
.pick-body h3{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.pick-rate{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pick-rate a{color:var(--cool-ink);text-decoration:underline;text-underline-offset:2px}
.rate-meta{font-size:13px;color:var(--faint)}
.pick-body p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
/* después de .pick-body p: si va antes, la regla de párrafo genérica gana por
   especificidad (0,1,1 contra 0,1,0) y el veredicto pierde su énfasis */
.pick-body p.pick-verdict{font-size:15.5px;color:var(--text);font-weight:600;
              border-left:3px solid var(--warm);padding-left:14px;margin-bottom:16px;line-height:1.5}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.spec{background:var(--surface);padding:11px 10px;text-align:center}
.spec b{display:block;font-family:var(--fh);font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.spec span{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
/* paneles a favor / en contra, con fondo teñido para separarlos de un vistazo */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:14.5px;margin-bottom:16px}
.pros>div{border-radius:var(--r);padding:15px 17px;border:1px solid}
.pros>div:first-child{background:var(--good-soft);border-color:var(--good-line)}
.pros>div:last-child{background:var(--warm-soft);border-color:var(--warm-line)}
.pros ul{list-style:none;padding:0;gap:8px;margin:0;display:flex;flex-direction:column}
.pros li{color:var(--muted);line-height:1.5}
.pros h5{font-family:var(--fh);font-size:11px;text-transform:uppercase;letter-spacing:.09em;
         margin-bottom:10px;font-weight:800}
.pros>div:first-child h5{color:var(--good)}
.pros>div:last-child h5{color:var(--warm-ink)}
.pros .p li::before{content:'+ ';color:var(--good);font-weight:800}
.pros .c li::before{content:'− ';color:var(--warm);font-weight:800}
.fit{display:grid;gap:9px;font-size:14.5px;border-top:1px solid var(--line);padding-top:16px}
.fit div{display:flex;gap:10px;align-items:baseline}
.fit b{font-family:var(--fh);font-size:11px;text-transform:uppercase;letter-spacing:.07em;
       white-space:nowrap;padding-top:2px}
.fit .si b{color:var(--good)}.fit .no b{color:var(--warm)}
.fit span{color:var(--muted)}

.buy{background:var(--sunk);border-left:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column}
.buy .was{font-size:14px;color:var(--faint);text-decoration:line-through}
.price{font-family:var(--fh);font-weight:800;font-size:28px;line-height:1.08;letter-spacing:-.035em}
.price-note{font-size:12.5px;color:var(--faint);margin:6px 0 15px;line-height:1.5}
.stores{display:flex;flex-direction:column;gap:8px;margin-bottom:13px}
.store{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);
       border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:14px;transition:.15s}
.store:hover{border-color:var(--cool-line);box-shadow:var(--shadow-sm)}
.store .s-name{font-weight:600;font-size:13.5px}
.store .s-note{font-style:normal;font-size:11px;color:var(--faint);font-weight:500}
.store .s-price{font-family:var(--fh);font-weight:700;font-size:13.5px;white-space:nowrap}
.buy-foot{font-size:11px;color:var(--faint);text-align:center;margin-top:auto;padding-top:13px;line-height:1.5}

@media(max-width:980px){
  .pick{grid-template-columns:130px 1fr}
  .buy{grid-column:1/-1;border-left:none;border-top:1px solid var(--line);flex-direction:row;
       align-items:center;flex-wrap:wrap;gap:14px;padding:16px 20px}
  .buy .price-block{flex:1 1 150px}.buy .stores{flex:2 1 240px;margin:0}
  .buy .price-note,.buy-foot{flex:1 1 100%;text-align:left;margin:0}
}
@media(max-width:620px){
  .pick{grid-template-columns:1fr}
  .pick-media{border-right:none;border-bottom:1px solid var(--line);flex-direction:row;gap:16px;padding:16px}
  .pick-media .estufa-svg{height:110px;width:auto}
  .pick-media .disclaimer{margin-top:0;text-align:left}
  .specs{grid-template-columns:repeat(2,1fr)}
  .pros{grid-template-columns:1fr}
  /* volver a columna exige resetear el wrap y las bases del bloque de 980px,
     si no los hijos wrapean en una segunda columna fuera de la tarjeta */
  .buy{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0}
  .buy>*{flex:0 0 auto}
  .buy .stores{margin-bottom:12px}
  .buy .price-note{text-align:left}
  .buy-foot{text-align:center;padding-top:13px}
}

/* ---------- módulo de producto en contexto ---------- */
.promo{display:grid;grid-template-columns:150px 1fr 214px;gap:24px;align-items:center;
       background:var(--surface);border:1px solid var(--warm-line);border-radius:var(--r-lg);
       padding:24px 28px;margin:24px 0;box-shadow:var(--shadow);position:relative;overflow:hidden}
.promo::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
               background:linear-gradient(180deg,var(--warm),var(--cool))}
.promo-media{display:flex;justify-content:center}
.promo-eyebrow{display:block;font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:.11em;
               text-transform:uppercase;color:var(--warm-ink);margin-bottom:8px}
.promo-body h3{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.promo-body p{color:var(--muted);font-size:15px;margin:10px 0 12px}
.promo-specs{display:flex;flex-wrap:wrap;gap:7px}
.promo-specs span{font-size:12.5px;color:var(--muted);background:var(--sunk);border:1px solid var(--line);
                  padding:4px 11px;border-radius:999px}
.promo-buy{text-align:center}
.promo-buy .price{margin-bottom:12px}
.promo-buy .btn+.btn{margin-top:8px}
.promo-foot{font-size:11px;color:var(--faint);margin-top:10px}
@media(max-width:840px){
  .promo{grid-template-columns:110px 1fr;gap:18px;padding:20px 22px}
  .promo-buy{grid-column:1/-1;text-align:left;display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;align-items:center}
  .promo-buy .price{margin:0}.promo-buy .btn+.btn{margin-top:0}.promo-foot{grid-column:1/-1;margin:0}
}
@media(max-width:520px){
  .promo{grid-template-columns:1fr;text-align:center}
  .promo-specs{justify-content:center}
  .promo-buy{grid-template-columns:1fr;text-align:center}
}

/* ---------- callouts ---------- */
.box{border-radius:var(--r-lg);padding:18px 22px;margin:18px 0;font-size:15px;border:1px solid}
.box-t{font-family:var(--fh);font-weight:700;font-size:15px;margin-bottom:6px}
.box p{color:var(--muted);margin:0}
.box.warm{background:var(--warm-soft);border-color:var(--warm-line)}
.box.warm .box-t{color:var(--warm-ink)}
.box.cool{background:var(--cool-soft);border-color:var(--cool-line)}
.box.cool .box-t{color:var(--cool-ink)}
/* sobre el fondo teñido del callout, --cool queda en 4.4:1; --cool-ink sí pasa */
.box a{color:var(--cool-ink);text-decoration:underline}
.box code{font-size:13px;background:var(--sunk);padding:1px 5px;border-radius:4px}

/* ---------- tarjetas de herramienta ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:20px 0}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
      transition:.18s;display:block;box-shadow:var(--shadow-sm)}
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-hi)}
.tool .ico{font-size:23px;margin-bottom:12px}
.tool h3{font-size:17px;font-weight:700;margin-bottom:7px}
.tool p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--line-hi);box-shadow:var(--shadow-sm)}
.faq summary{padding:16px 20px;cursor:pointer;font-family:var(--fh);font-weight:700;font-size:16px;
             list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;color:var(--faint);font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 20px 17px;color:var(--muted);font-size:15px}
.faq details a{color:var(--cool);text-decoration:underline}

/* ---------- footer ---------- */
.foot{background:var(--surface);border-top:1px solid var(--line);padding:44px 20px 0;margin-top:20px}
.foot-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
.foot-col p{font-size:14.5px;color:var(--muted);margin-top:12px;max-width:42ch}
.foot-col h4{font-family:var(--fh);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
             color:var(--faint);margin-bottom:12px}
.foot-col a{display:block;font-size:14.5px;color:var(--muted);margin-bottom:9px}
.foot-col a:hover{color:var(--warm)}
.foot-legal{max-width:var(--max);margin:34px auto 0;padding:22px 0 32px;border-top:1px solid var(--line)}
.foot-legal p{font-size:12.5px;color:var(--faint);line-height:1.65;margin-bottom:9px}
.foot-legal strong{color:var(--muted)}
@media(max-width:760px){.foot-in{grid-template-columns:1fr;gap:26px}.calc{grid-template-columns:1fr}}

/* ---------- espacio publicitario ---------- */
.ad-slot{margin:26px 0;text-align:center;min-height:90px;display:flex;flex-direction:column;
         align-items:center;justify-content:center;gap:6px}
.ad-label{font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.12em;
          text-transform:uppercase;color:var(--faint)}
.ad-slot ins{width:100%}
.ad-ph{border:1px dashed var(--line-hi);border-radius:var(--r);background:var(--sunk);
       min-height:120px;color:var(--faint)}
.ad-ph span{font-family:var(--fh);font-size:12px;line-height:1.5}
.ad-ph small{font-size:10.5px;opacity:.75}

/* En móvil la tabla comparativa deja solo lo que decide la compra (modelo,
   superficie, precio y botón) para que quepa sin scroll lateral. Va scopeado a
   .tbl-compare: las otras tablas del sitio tienen 3-4 columnas y no se tocan. */
@media(max-width:620px){
  .tbl-compare table{min-width:0}
  .tbl-compare th:nth-child(2),.tbl-compare td:nth-child(2),
  .tbl-compare th:nth-child(3),.tbl-compare td:nth-child(3),
  .tbl-compare th:nth-child(5),.tbl-compare td:nth-child(5){display:none}
  .tbl-compare th,.tbl-compare td{padding:10px 6px;font-size:13px}
  .tbl-compare td:first-child{font-size:12.5px;line-height:1.35}
  .tbl-compare .btn.sm{padding:7px 9px;font-size:11.5px}
}

/* CTA en tabla */
td .btn.sm{display:inline-block}
.tbl-cta{white-space:nowrap}
.tbl-model{color:var(--text);text-decoration:none}
.tbl-model:hover{color:var(--cool-ink);text-decoration:underline}