/* infra-it-offer — estilos propios de las páginas internas
   (barra superior, botón de instalar, tarjetas de caso y de competencia,
   y la versión CLARA de los controles de la portada).
   Se carga después de explorador.css, así que lo pisa. */

/* barra superior de las páginas que no son la portada */
.topbar{position:sticky;top:0;z-index:60;background:#07070f;color:#fff;
 display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
 padding:.75rem clamp(1rem,4vw,4rem);border-bottom:1px solid rgba(255,255,255,.1)}
.topbar .marca{display:flex;align-items:center;gap:.8rem;min-width:0}
.topbar img{max-height:34px;max-width:150px;width:auto;object-fit:contain}
.topbar .tt{font-size:.98rem;font-weight:600;line-height:1.15;white-space:nowrap}
.topbar .volver{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;
 text-decoration:none;font-size:.82rem;font-weight:600;color:#fff;
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
 border-radius:999px;padding:.45rem .95rem;transition:.15s ease}
.topbar .volver:hover{background:var(--acc);border-color:var(--acc)}

body[data-pagina]:not([data-pagina="portada"]) section.sec:first-of-type{padding-top:2.2rem}

/* ==================================================================
   CONTROLES SOBRE FONDO CLARO
   Los botones de vertical, el panel y los chips nacieron para la
   portada oscura: texto blanco y bordes translúcidos. Dentro de una
   sección clara quedaban invisibles. Acá va su versión en claro.
   ================================================================== */
section.sec .vbtn{background:#fff;border:1px solid var(--line);color:var(--ink);
 box-shadow:var(--shadow)}
section.sec .vbtn:hover{background:#fff;border-color:var(--acc);color:var(--acc)}
section.sec .vbtn b{color:inherit}
section.sec .vbtn small{color:var(--muted)}
section.sec .vbtn[aria-expanded="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
section.sec .vbtn[aria-expanded="true"] b,
section.sec .vbtn[aria-expanded="true"] small{color:#fff}

section.sec .vpanel{background:#fff;border:1px solid var(--acc);box-shadow:var(--shadow)}
section.sec .vp-tit{color:var(--acc)}
section.sec .flabel{color:var(--muted)}
section.sec .vp-pie{border-top-color:var(--line)}
section.sec .vp-total{color:var(--muted)}
section.sec .vp-total b{color:var(--ink)}
section.sec .exp-limpiar{color:var(--muted)}
section.sec .exp-limpiar:hover{color:var(--acc)}

section.sec .chipf{background:#F4F4F5;border:1px solid var(--line);color:#3F3F46}
section.sec .chipf:hover{background:#E4E4E7;border-color:var(--acc);color:var(--acc)}
section.sec .chipf[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}

/* fila de familias en competencia: más chica que la de verticales,
   porque son hasta siete y con nombres largos */
.famrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.55rem;
 margin-top:.8rem}
.famrow .vbtn{min-height:0;padding:.65rem .8rem}
.famrow .vbtn b{font-size:.86rem}

/* ------------------------------------------------ tarjetas de CASO
   No tienen imagen: el alto lo da el texto, así que se libera el
   recorte de líneas que usan las tarjetas de producto. */
.card.caso .body{padding-top:1.1rem}
.card.caso h3{-webkit-line-clamp:3;min-height:0;font-size:1.06rem}
.card.caso p{-webkit-line-clamp:6;min-height:0}
.card.caso .caso-tit{color:var(--c);font-weight:600;font-size:.9rem;
 -webkit-line-clamp:2;margin-bottom:.1rem}
.card.caso .links a{background:var(--c);color:#fff}
.card.caso .links a:hover{filter:brightness(1.12)}

/* --------------------------------------- tarjetas de COMPETENCIA */
.comp-grid{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card.comp .body{padding-top:1.1rem;gap:.4rem}
.card.comp h3{-webkit-line-clamp:2;min-height:0;font-size:1.1rem;
 display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.card.comp .mio{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:#fff;background:var(--acc);border-radius:999px;padding:.16rem .5rem}
.card.comp.propio{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset,var(--shadow)}
.oferta{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.42rem}
.oferta li{position:relative;padding-left:.95rem;font-size:.84rem;color:#3F3F46;line-height:1.35}
.oferta li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
 border-radius:50%;background:var(--c)}

/* botón de instalar la app */
#instalar{position:fixed;left:14px;bottom:14px;z-index:70;display:none;align-items:center;
 gap:.5rem;background:var(--acc);color:#fff;border:0;border-radius:999px;cursor:pointer;
 font-family:'DM Sans',system-ui,sans-serif;font-size:.82rem;font-weight:600;
 padding:.62rem 1.05rem;box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
#instalar.on{display:inline-flex}
#instalar:hover{filter:brightness(1.1)}
#ayudaIos{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;display:none;
 background:#07070f;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;
 padding:.9rem 1rem;font-family:'DM Sans',system-ui,sans-serif;font-size:.83rem;line-height:1.45}
#ayudaIos.on{display:block}
#ayudaIos b{color:var(--acc)}
#ayudaIos button{background:none;border:0;color:rgba(255,255,255,.5);font:inherit;
 text-decoration:underline;cursor:pointer;padding:0;margin-top:.4rem}

@media (max-width:640px){
  .topbar .tt{white-space:normal;font-size:.88rem}
  .topbar{padding:.6rem 1rem}
  .comp-grid{grid-template-columns:1fr}
  .famrow{grid-template-columns:1fr 1fr}
}