/* ==========================================================================
   TOPSA · Calculadora solar (v2: portada con foto, tarjeta de resultado
   oscura y banda para instaladores al pie).
   Vive en páginas normales de WordPress. Tokens propios y botones con dos
   clases, porque Hello Elementor pinta todo botón de magenta.
   ========================================================================== */
.ths{
  --ths-ink:#111111; --ths-muted:#5D5954; --ths-rule:#E2DED7; --ths-bg:#F7F5F1;
  --ths-orange:#FF6A00; --ths-white:#FFFFFF;
  --ths-sans:Inter,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--ths-sans);color:var(--ths-ink);margin:0 0 48px;
}
.ths *,.ths *::before,.ths *::after{box-sizing:border-box}
.ths [hidden]{display:none!important}

/* El tema imprime su propio título; con portada propia estorba. */
body.ths-hero-on .entry-header,body.ths-hero-on .entry-title,
body.ths-hero-on h1.page-title,body.ths-hero-on .page-header{display:none}
body.ths-hero-on .site-main{padding-top:0}

/* ---------- Portada ---------- */
.ths-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:center;margin:8px 0 34px}
.ths-hero__t{margin:0;font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:var(--ths-ink)}
.ths-hero__p{margin:14px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.45;color:var(--ths-muted);max-width:34ch}
.ths-hero__foto{position:relative;margin:0;border-radius:10px;overflow:hidden;background:#dfdbd4;aspect-ratio:16/7}
.ths-hero__foto img{display:block;width:100%;height:100%;object-fit:cover}
.ths-hero__pie{position:absolute;top:16px;right:18px;max-width:14ch;text-align:right;color:#fff;font-size:13px;line-height:1.35;
  text-shadow:0 1px 10px rgba(0,0,0,.45)}
.ths-hero__pie::after{content:"";display:block;width:34px;height:2px;margin:8px 0 0 auto;background:var(--ths-orange)}
@media (max-width:860px){
  .ths-hero{grid-template-columns:1fr;gap:20px}
  .ths-hero__foto{aspect-ratio:16/9}
  .ths-hero__p{max-width:none}
}

/* ---------- Rejilla principal ---------- */
.ths__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start}
@media (max-width:860px){.ths__grid{grid-template-columns:1fr}}

/* ---------- Tarjeta del formulario ---------- */
.ths__form{display:flex;flex-direction:column;gap:26px;padding:26px;background:var(--ths-white);
  border:1px solid var(--ths-rule);border-radius:10px}
.ths__form-t{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.ths__grupo{display:flex;flex-direction:column;gap:10px;min-width:0}
.ths__etq{margin:0;font-size:14.5px;font-weight:600;color:var(--ths-ink)}
.ths__nota{margin:0;font-size:12.5px;color:var(--ths-muted);line-height:1.45}
.ths__error{margin:0;font-size:13px;color:#B42318;font-weight:500}

/* chips */
.ths__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ths__chips--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ths__chips label{position:relative;margin:0;cursor:pointer;min-width:0}
.ths__chips input{position:absolute;opacity:0;width:0;height:0}
.ths__chips span{display:flex;align-items:center;justify-content:center;padding:12px 8px;border:1px solid var(--ths-rule);
  border-radius:8px;background:var(--ths-white);font-size:14.5px;line-height:1.2;text-align:center;
  transition:border-color .15s,background-color .15s,color .15s}
.ths__chips label:hover span{border-color:#B9B4AC}
.ths__chips input:checked+span{background:var(--ths-ink);border-color:var(--ths-ink);color:#fff;font-weight:600}
.ths__chips--sec input:checked+span{background:#FFF1E6;border-color:var(--ths-orange);color:var(--ths-ink)}
.ths__chips input:focus-visible+span{outline:2px solid var(--ths-orange);outline-offset:2px}

/* campo con prefijo y sufijo */
.ths__campo{display:flex;align-items:stretch;border:1px solid var(--ths-rule);border-radius:8px;background:var(--ths-white);overflow:hidden}
.ths__campo:focus-within{border-color:var(--ths-ink);box-shadow:0 0 0 2px rgba(255,106,0,.28)}
.ths__campo>span{display:flex;align-items:center;padding:0 14px;font-size:15px;color:var(--ths-muted);flex:0 0 auto}
.ths__campo>span+span{border-left:1px solid var(--ths-rule);font-size:12.5px;letter-spacing:.04em}
.ths .ths__input{flex:1 1 auto;min-width:0;width:100%;padding:13px 4px 13px 0;border:0;background:transparent;color:var(--ths-ink);
  font:600 19px var(--ths-sans);font-variant-numeric:tabular-nums}
.ths .ths__input:focus{outline:none}
.ths .ths__input::placeholder{color:#A9A49D;font-weight:400;font-size:15px}
.ths__fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);gap:10px;align-items:center}
@media (max-width:520px){.ths__fila{grid-template-columns:1fr}}

/* deslizador */
.ths__rango-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ths__rango-cab output{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ths input[type=range]{width:100%;accent-color:var(--ths-orange);margin:0}

/* supuestos */
.ths__supuestos{font-size:13.5px;color:var(--ths-muted);border-top:1px solid var(--ths-rule);padding-top:18px}
.ths__supuestos summary{cursor:pointer;font-weight:600;color:var(--ths-ink);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.ths__supuestos summary::-webkit-details-marker{display:none}
.ths__supuestos summary::after{content:"+";font-size:19px;font-weight:400;line-height:1;color:var(--ths-muted)}
.ths__supuestos[open] summary::after{content:"–"}
.ths__supuestos ul{margin:14px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:7px;line-height:1.5}

/* ---------- Tarjeta de resultado ---------- */
.ths__res{display:flex;flex-direction:column;gap:20px;padding:26px;background:var(--ths-ink);color:#fff;border-radius:10px;min-width:0;
  transition:opacity .2s}
.ths__res.is-vacio{opacity:.4}
.ths__chip{align-self:flex-start;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.12);
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.ths__big b{display:block;font-size:clamp(38px,5.6vw,60px);line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--ths-orange);
  font-variant-numeric:tabular-nums}
.ths__big strong{display:block;margin-top:8px;font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.02em}
.ths__big small{display:block;margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.6)}

.ths__par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.ths__par>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ths__par>div+div{padding-left:18px;border-left:1px solid rgba(255,255,255,.16)}
.ths__par b{font-size:clamp(19px,2.2vw,23px);font-weight:700;letter-spacing:-.02em}
.ths__par small{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.4}
.ths__par--sec{border-bottom:0;padding-bottom:0}
.ths__par--sec b{font-size:17px}
.ths__par--sec span{font-size:12.5px;color:rgba(255,255,255,.62)}
@media (max-width:520px){
  .ths__par{grid-template-columns:1fr;gap:14px}
  .ths__par>div+div{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
}

.ths__comp{display:flex;flex-direction:column;gap:9px}
.ths__comp-t{margin:0;font-size:14.5px;font-weight:600}
.ths__barra{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;font-size:13.5px}
.ths__barra>span{color:rgba(255,255,255,.72)}
.ths__barra>b{font-variant-numeric:tabular-nums;min-width:74px;text-align:right;font-weight:600}
.ths__barra-t{height:14px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.ths__barra-t i{display:block;height:100%;background:rgba(255,255,255,.5);transition:width .35s ease}
.ths__barra--con .ths__barra-t i{background:var(--ths-orange)}
@media (max-width:520px){.ths__barra{grid-template-columns:80px minmax(0,1fr) auto;gap:8px;font-size:12.5px}}

.ths__mas{font-size:13.5px}
.ths__mas summary{cursor:pointer;color:rgba(255,255,255,.75);font-weight:600;list-style:none}
.ths__mas summary::-webkit-details-marker{display:none}
.ths__mas summary::after{content:" +"}
.ths__mas[open] summary::after{content:" –"}
.ths__detalle{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:12px 0 0}
.ths__detalle dt,.ths__detalle dd{margin:0;padding:9px 0;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px}
.ths__detalle dt{color:rgba(255,255,255,.7)}
.ths__detalle dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;padding-left:12px}

.ths__nota-res{margin:0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.55)}
.ths__estimado{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.78);padding-left:12px;border-left:2px solid var(--ths-orange)}
.ths__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}

/* ---------- Banda para instaladores ---------- */
.ths-demo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px;padding:20px 24px;
  background:var(--ths-white);border:1px solid var(--ths-rule);border-radius:10px}
.ths-demo__pt{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--ths-orange)}
.ths-demo b{font-size:15px;letter-spacing:-.01em}
.ths-demo span{flex:1 1 260px;min-width:0;font-size:14px;color:var(--ths-muted);line-height:1.45}
@media (max-width:620px){.ths-demo{padding:18px}.ths-demo .ths__btn{width:100%}}

.ths__aviso{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--ths-muted)}

/* ---------- Botones (blindados contra el tema) ---------- */
.ths .ths__btn,.ths .ths__btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;
  font:600 15px var(--ths-sans);line-height:1.2;border:1px solid var(--ths-orange);border-radius:8px;text-decoration:none;cursor:pointer;
  background:var(--ths-orange);color:#FFFFFF;transition:background-color .15s,border-color .15s,color .15s}
.ths .ths__btn:hover,.ths .ths__btn:focus,.ths .ths__btn:active{background:#E65F00;border-color:#E65F00;color:#FFFFFF}
.ths .ths__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ths .ths__cta{width:100%;font-size:15.5px;padding:17px 22px}
.ths__res.is-vacio .ths__cta{pointer-events:none}
.ths .ths__btn--linea,.ths .ths__btn--linea:visited{background:var(--ths-white);border-color:var(--ths-ink);color:var(--ths-ink)}
.ths .ths__btn--linea:hover,.ths .ths__btn--linea:focus,.ths .ths__btn--linea:active{background:var(--ths-ink);border-color:var(--ths-ink);color:#FFFFFF}
.ths .ths__btn--linea:focus-visible{outline:2px solid var(--ths-orange);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.ths *{transition:none!important}}
