/* vitroceramicainduccion.shop — sistema visual
   Layout: una columna de lectura (65ch) sobre fondo "cristal esmerilado";
   cabecera y hero en "cristal negro" de placa; un solo elemento audaz: la zona encendida. */
:root{
  --bg:#EFF1F3; --surface:#FFFFFF; --fg:#15191D; --muted:#5B6670; --line:#D6DBE0;
  --glass:#1B2429; --glass-fg:#ECEFF1; --glass-muted:#AEB9C2;
  --accent:#E25C1E; --accent-deep:#B23A0F; --accent-soft:#FCEDE4;
  --ok:#2A7A4B; --ok-soft:#E3F2E8; --warn:#B7791F; --warn-soft:#FBF1DC; --bad:#B3261E; --bad-soft:#F9E3E1;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius:10px; --measure:65ch;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121619; --surface:#1B2126; --fg:#ECEFF1; --muted:#9AA6B0; --line:#2C353C;
  --glass:#0C0F11; --glass-fg:#ECEFF1; --glass-muted:#9AA6B0;
  --accent:#F0713A; --accent-deep:#E25C1E; --accent-soft:#33211A;
  --ok:#5CBE85; --ok-soft:#17301F; --warn:#E0A64A; --warn-soft:#332912; --bad:#E57368; --bad-soft:#3A1C1A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121619; --surface:#1B2126; --fg:#ECEFF1; --muted:#9AA6B0; --line:#2C353C;
  --glass:#0C0F11; --glass-fg:#ECEFF1; --glass-muted:#9AA6B0;
  --accent:#F0713A; --accent-deep:#E25C1E; --accent-soft:#33211A;
  --ok:#5CBE85; --ok-soft:#17301F; --warn:#E0A64A; --warn-soft:#332912; --bad:#E57368; --bad-soft:#3A1C1A; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,4.5vw,2.75rem);font-weight:700}
h2{font-size:clamp(1.35rem,3vw,1.75rem);font-weight:650;margin-top:2em}
h3{font-size:1.15rem;font-weight:600;margin-top:1.5em}
p,ul,ol,table{margin:0 0 1.1em}
.eyebrow{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.num,.w{font-family:var(--mono);font-variant-numeric:tabular-nums}

.wrap{max-width:72rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.read{max-width:var(--measure)}

/* Cabecera: cristal negro */
.site-header{background:var(--glass);color:var(--glass-fg)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--glass-fg);line-height:1.1}
.brand strong{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.brand strong em{font-style:normal;color:var(--accent)}
.brand small{font-size:.72rem;color:var(--glass-muted);letter-spacing:.04em}
.nav-toggle{background:none;border:1px solid var(--glass-muted);color:var(--glass-fg);border-radius:8px;padding:.45rem .7rem;font:inherit;font-size:.9rem;cursor:pointer}
.site-nav{display:none;width:100%}
.site-nav.open{display:block}
.site-nav ul{list-style:none;margin:0;padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.1rem}
.site-nav a{display:block;padding:.55rem .25rem;color:var(--glass-fg);text-decoration:none;border-top:1px solid #2C353C;font-size:.95rem}
.site-nav a[aria-current="page"]{color:var(--accent)}
.site-nav a .hint{display:block;font-size:.75rem;color:var(--glass-muted)}
@media (min-width:860px){
  .site-header .wrap{flex-wrap:nowrap}
  .nav-toggle{display:none}
  .site-nav{display:block;width:auto}
  .site-nav ul{flex-direction:row;gap:.1rem;padding:0}
  .site-nav a{border:0;padding:.5rem .7rem;border-radius:6px}
  .site-nav a:hover{background:#2C353C}
  .site-nav a .hint{display:none}
}

/* Hero: la zona encendida */
.hero{background:var(--glass);color:var(--glass-fg);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:1.5rem;padding-block:2.5rem 3rem;align-items:center}
.hero h1{color:var(--glass-fg);font-size:clamp(2.1rem,6vw,3.6rem);margin-bottom:.35em}
.hero p{font-size:1.1rem;color:var(--glass-muted);max-width:38rem}
.hero p strong{color:var(--glass-fg);font-weight:600}
.zone{width:min(260px,60vw);aspect-ratio:1;border-radius:50%;justify-self:center;
  background:radial-gradient(circle,#FFD1A8 0 14%,#FFA35C 15% 22%,var(--accent) 23% 36%,var(--accent-deep) 37% 44%,#3A1C10 45% 47%,transparent 48%);
  box-shadow:0 0 60px 10px rgba(226,92,30,.35),inset 0 0 0 1px rgba(255,255,255,.06);position:relative}
.zone::after{content:"7.4 kW";position:absolute;inset:auto 0 -2.2rem;text-align:center;font-family:var(--mono);font-size:.85rem;color:var(--glass-muted);letter-spacing:.06em}
@media (min-width:860px){.hero .wrap{grid-template-columns:1.4fr 1fr;padding-block:3.5rem 4rem}}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.btn{display:inline-block;padding:.75rem 1.1rem;border-radius:var(--radius);font-weight:600;text-decoration:none;font-size:1rem;border:1px solid transparent}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep);color:#fff}
.btn-ghost{border-color:var(--glass-muted);color:var(--glass-fg)}
.btn-ghost:hover{border-color:var(--glass-fg);color:var(--glass-fg)}
.btn-amazon{background:var(--fg);color:var(--bg)}
.btn-amazon:hover{background:var(--accent-deep);color:#fff}

/* Contenido */
main .wrap{padding-block:2rem 3rem}
.lead{font-size:1.15rem;font-weight:500;border-left:4px solid var(--accent);padding:.6rem .9rem;background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:1.5em}
.lead strong{font-weight:650}
.meta{color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-bottom:1.25rem}
.crumbs{font-size:.85rem;color:var(--muted);margin:0 0 1rem}
.crumbs a{color:var(--muted)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"›";margin-right:.35rem}

.table-wrap{overflow-x:auto;margin:0 0 1.25em;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.95rem;margin:0}
th,td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:600;background:var(--bg);font-size:.85rem}
tr:last-child td{border-bottom:0}
td strong{font-weight:650}

.cards{display:grid;gap:1rem;list-style:none;padding:0;margin:1rem 0 1.5rem}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card a{font-weight:600}
.card .state{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.card .state.ok{background:var(--ok-soft);color:var(--ok)}

/* Las tres comprobaciones */
.checks{counter-reset:c;list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;gap:.75rem}
.checks li{counter-increment:c;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem .9rem 3.4rem;position:relative;min-width:0}
.checks li::before{content:counter(c);position:absolute;left:1rem;top:.85rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;display:grid;place-items:center;font-size:.95rem}
.checks li strong{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.15rem}
.checks li span{color:var(--muted);font-size:.95rem}

/* Afiliación */
.disclosure{background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem 1rem;font-size:.92rem;color:var(--fg);margin:1.5rem 0}
.disclosure strong{font-weight:600}
.product{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:1rem 1.1rem;margin:0 0 1.25em;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:space-between}
.product .model{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.product .note{font-size:.85rem;color:var(--muted);width:100%}

.link-pending{color:var(--muted);border-bottom:1px dotted var(--muted);cursor:help}
.link-pending::after{content:" (pronto)";font-size:.8em;color:var(--muted)}

/* Calculadora */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;display:grid;gap:1rem;margin:1.25rem 0}
.tool fieldset{border:0;padding:0;margin:0;min-width:0}
.tool legend{font-family:var(--display);font-weight:650;font-size:1.05rem;margin-bottom:.5rem}
.tool label{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;font-size:.98rem}
.tool select,.tool input[type=number]{font:inherit;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);min-width:0;max-width:100%}
.tool input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--accent)}
.result{border-radius:var(--radius);padding:1rem 1.1rem;background:var(--bg);border:1px solid var(--line)}
.result .big{font-family:var(--mono);font-size:2rem;font-weight:500;line-height:1.1}
.result .big small{font-size:.95rem;color:var(--muted);font-family:var(--body);font-weight:400}
.result ul{margin:.75rem 0 0;padding-left:1.1rem}
.result li{margin:.25rem 0}
.pill{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:.1rem .5rem;border-radius:999px;margin-right:.35rem;vertical-align:middle}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}

/* FAQ */
.faq h3{font-size:1.05rem;margin-top:1.25em}

/* Pie */
.site-footer{background:var(--glass);color:var(--glass-muted);font-size:.88rem;margin-top:2rem}
.site-footer .wrap{padding-block:1.75rem;display:grid;gap:1rem}
.site-footer a{color:var(--glass-fg)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.site-footer p{margin:0}

/* Cookies */
.cookie{position:fixed;left:0;right:0;bottom:0;background:var(--surface);color:var(--fg);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.12);
  padding-top:.9rem;padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));z-index:50;font-size:.92rem}
.cookie .wrap{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.cookie p{margin:0;max-width:44rem}
.cookie .btns{display:flex;gap:.5rem}
.cookie button{font:inherit;font-weight:600;padding:.55rem .9rem;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.cookie button.accept{background:var(--fg);color:var(--bg);border-color:var(--fg)}