/* HIOX — estilos de contenido del sitio construido por build.py.
   El chrome del portal (tokens de color, temas, barra de arriba y pie) vive en
   `portal.css`, que cargan también las siete apps de /hiox-apps/. Acá va sólo
   lo que es propio de estas 60 páginas.

   Las páginas heredadas de WordPress traen su propio <style> con IDs propios
   (#hiox_wifi_qr_1, #hiox-lpf-apertura-2026, …). Por eso acá NADA se estila por
   selector de elemento suelto dentro de .cuerpo: se usan clases del shell para
   no pisarles nada. */

/* Reglas de <html>: van acá y no en portal.css porque cada app tiene las
   suyas y no hay que pisárselas. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ── estructura ───────────────────────────────────────── */
.envoltorio{max-width:var(--max);margin:0 auto;padding:0 20px 72px;}
.miga{
  font-size:13px;color:var(--muted);padding:18px 0 0;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.miga a{color:var(--muted);}
.miga .sep{opacity:.5;}

.cabecera-art{padding:20px 0 26px;border-bottom:1px solid var(--hair);margin-bottom:30px;}
.cabecera-art h1{
  font-size:clamp(1.85rem,4.4vw,2.7rem);line-height:1.14;letter-spacing:-.02em;
  margin:0 0 12px;text-wrap:balance;font-weight:800;
}
.bajada{font-size:1.12rem;color:var(--muted);margin:0;max-width:60ch;line-height:1.55;}
.meta-art{
  font-size:13px;color:var(--muted);margin-top:14px;
  display:flex;gap:14px;flex-wrap:wrap;
}

/* ── cuerpo heredado de WordPress ─────────────────────── */
/* La columna de lectura va CENTRADA dentro del envoltorio. Antes quedaba
   pegada a la izquierda mientras la barra de arriba ocupaba los 1080px:
   se leía como si la página estuviera desalineada, con medio ancho vacío
   a la derecha. La miga y el encabezado se alinean con ella, si no el
   título arranca en un margen y el texto en otro. */
.cuerpo,.miga,.cabecera-art{max-width:var(--prosa);margin-inline:auto;}
.cuerpo.ancho{max-width:none;}
/* En una página ancha —un índice, una calculadora, una carrera del Radar— el
   cuerpo ocupa todo el envoltorio pero la miga y el título seguían atados a los
   68ch de la columna de lectura. El resultado era un título que arrancaba 220px
   más a la derecha que su propio texto. Van juntos o no van. */
.envoltorio.ancho>.miga,.envoltorio.ancho>.cabecera-art{max-width:none;}
/* Justificado con partición de palabras. Sin `hyphens: auto` el justificado
   abre ríos blancos horribles en castellano, que tiene palabras largas; con
   partición queda parejo. Funciona porque la página declara lang="es-AR" —
   sin idioma declarado el navegador no sabe dónde cortar. */
.cuerpo p{margin:0 0 18px;text-align:justify;hyphens:auto;}
.cuerpo li{hyphens:auto;}
/* Los bloques cortos NO se justifican: en dos o tres renglones el justificado
   se nota como espaciado raro en vez de como prolijidad. */
.bajada,.paso-desc,.tarjeta p,.ruta-conteo,.pie .legal p{text-align:left;}
.cuerpo h2{font-size:1.5rem;line-height:1.25;margin:38px 0 12px;letter-spacing:-.01em;text-wrap:balance;}
.cuerpo h3{font-size:1.18rem;margin:28px 0 10px;}
.cuerpo ul,.cuerpo ol{margin:0 0 18px;padding-left:22px;}
.cuerpo li{margin-bottom:7px;}
.cuerpo img{border-radius:8px;}
.cuerpo figure{margin:24px 0;}
.cuerpo blockquote{
  margin:24px 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent);
  color:var(--muted);font-style:italic;
}
.cuerpo table{border-collapse:collapse;width:100%;font-size:14.5px;}
.cuerpo th,.cuerpo td{padding:10px 12px;border-bottom:1px solid var(--hair);text-align:left;}
.cuerpo thead th{background:var(--surface);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.tabla-scroll{overflow-x:auto;margin:0 0 22px;}

/* ── tarjetas / índices ───────────────────────────────── */
.rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:16px;margin:0 0 32px;padding:0;list-style:none;
}
.tarjeta{
  background:var(--surface);border:1px solid var(--hair);border-radius:10px;
  padding:20px;display:flex;flex-direction:column;gap:8px;
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s;
}
.tarjeta:hover{border-color:var(--accent);transform:translateY(-2px);}
.tarjeta .et{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
/* La fecha de la carrera, a la derecha de la etiqueta. En tono apagado: ubica
   la tarjeta sin competir con el titulo, que es lo que se lee primero. */
.tarjeta .cuando{
  color:var(--muted);font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;text-transform:none;white-space:nowrap;
}
.tarjeta h3{margin:0;font-size:1.06rem;line-height:1.32;letter-spacing:-.01em;}
.tarjeta p{margin:0;font-size:14.2px;color:var(--muted);line-height:1.5;}

/* ── portada ──────────────────────────────────────────── */
.hero{padding:52px 0 40px;border-bottom:1px solid var(--hair);margin-bottom:38px;}
.hero h1{
  font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1.08;margin:0 0 16px;
  letter-spacing:-.025em;font-weight:800;max-width:18ch;text-wrap:balance;
}
.hero p{font-size:1.18rem;color:var(--muted);margin:0;max-width:56ch;line-height:1.55;}
.seccion-tit{
  display:flex;align-items:baseline;gap:14px;margin:0 0 18px;flex-wrap:wrap;
}
.seccion-tit h2{margin:0;font-size:1.45rem;letter-spacing:-.015em;}
.seccion-tit p{margin:0;font-size:14.5px;color:var(--muted);}

/* ── aviso / caja destacada ───────────────────────────── */
.aviso{
  background:var(--accent-soft);border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;padding:16px 20px;margin:0 0 26px;font-size:15px;
}
.aviso p{margin:0 0 10px;}
.aviso p:last-child{margin:0;}
.aviso strong{font-weight:700;}

/* ── ranura de publicidad ───────────────────────────────────────────────
   El espacio se RESERVA con altura mínima aunque el anuncio no cargue. Sin
   eso la página salta cuando llega el anuncio y el lector pierde el renglón
   que estaba leyendo — es el defecto que Google mismo mide como CLS y el que
   más se siente como "invasión".

   Y va con separación generosa arriba y abajo: un anuncio pegado al texto se
   lee como parte de la nota, que además de molesto es engañoso. */
.ranura-ad{
  margin:44px 0;
  min-height:100px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:14px 0 18px;
  overflow:hidden;
}
/* La etiqueta va SIEMPRE, cargue o no el anuncio: es lo que separa el
   contenido propio del pago, y sin ella el bloque vacío parece un error de
   maquetación. Va en gris chico, no compite con nada. */
.ranura-ad::before{
  content:"Publicidad";
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.6;
  align-self:flex-start;
}
/* Sólo en escritorio: en el celular el ancho lo fija el script junto con la
   medida del anuncio (300×250), y un `width:100%` acá lo pelearía. */
@media (min-width:768px){ .ranura-ad .adsbygoogle{width:100%;} }
/* En pantallas chicas el aire de 44px se come media pantalla. */
@media (max-width:640px){
  .ranura-ad{margin:32px 0;min-height:90px;}
}

/* ── herramientas (las nuevas) ────────────────────────── */
.herr{
  background:var(--surface);border:1px solid var(--hair);border-radius:12px;
  padding:24px;margin:0 0 28px;
}
.herr .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo label{font-size:13px;font-weight:600;color:var(--muted);}
.campo input,.campo select{
  font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--hair);
  border-radius:7px;background:var(--ground);color:var(--ink);width:100%;
}
.campo .pista{font-size:12px;color:var(--muted);line-height:1.4;}
.resultado{
  background:var(--ground);border:1px solid var(--hair);border-radius:9px;padding:18px 20px;
}
.linea-res{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:8px 0;border-bottom:1px dashed var(--hair);font-size:15px;
}
.linea-res:last-child{border-bottom:none;}
.linea-res .lab{color:var(--muted);}
.linea-res .val{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.linea-res.total{border-top:2px solid var(--ink);border-bottom:none;margin-top:8px;padding-top:13px;}
.linea-res.total .lab{color:var(--ink);font-weight:700;}
.linea-res.total .val{color:var(--accent);font-size:1.25rem;}
.nota-chica{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.5;}

/* ── Herramientas: jerarquía visual ──────────────────────────────────────
   Una calculadora con 15 campos en una grilla plana se lee como un
   formulario de AFIP. Lo que sigue separa el ingreso de datos del
   resultado, y dentro del resultado destaca los cuatro números por los
   que alguien abre la página: ganancia, margen, ROI y equilibrio. */
.herr h3{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--hair);
}
.herr h3+.nota-chica{margin-top:-6px;margin-bottom:14px;}
.herr .campos+h3{margin-top:26px;}

/* Tarjetas de indicadores: los números que deciden algo */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:0 0 20px;
}
.kpi{
  background:var(--ground);border:1px solid var(--hair);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
}
.kpi .k-lab{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}
.kpi .k-val{
  font-size:1.6rem;font-weight:700;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi .k-pie{font-size:12px;color:var(--muted);line-height:1.35;}
.kpi.bien{border-color:var(--accent);background:var(--accent-soft);}
.kpi.bien .k-val{color:var(--accent);}
.kpi.mal{border-color:var(--warn);}
.kpi.mal .k-val{color:var(--warn);}

/* El desglose pasa a ser detalle secundario, plegable */
.desglose{margin-top:4px;}
.desglose>summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--accent);
  padding:6px 0;list-style:none;
}
.desglose>summary::-webkit-details-marker{display:none;}
.desglose>summary::before{content:"▸ ";display:inline-block;transition:transform .15s;}
.desglose[open]>summary::before{transform:rotate(90deg);}
.desglose>summary:hover{text-decoration:underline;}
.linea-res.sub .lab{padding-left:14px;font-size:14px;}
.linea-res.encabeza{border-bottom:1px solid var(--hair);margin-top:10px;}
.linea-res.encabeza .lab{color:var(--ink);font-weight:700;font-size:13px;
  letter-spacing:.03em;text-transform:uppercase;}

@media (max-width:520px){
  .herr{padding:18px 16px;}
  .kpi .k-val{font-size:1.35rem;}
}

/* ── variaciones porcentuales (índices, series) ───────── */
.var{font-variant-numeric:tabular-nums;font-weight:600;}
.var.sube{color:var(--warn);}
.var.baja{color:var(--accent);}

/* ── página archivada ─────────────────────────────────── */
.aviso.archivo{
  background:var(--surface);border-left-color:var(--muted);
}
.aviso.archivo strong{color:var(--muted);}

/* ── enlaces internos al pie del artículo ─────────────── */
.relacionados{
  max-width:var(--max);margin:52px 0 0;padding-top:30px;
  border-top:1px solid var(--hair);
}
.relacionados h2{font-size:1.25rem;margin:0 0 18px;letter-spacing:-.01em;}

/* ── Radar F1: actas de comisarios ──────────────────────────────────
   Una carrera por página, un bloque por acta. La traducción va en un
   <dl> porque el original es un formulario (Hecho / Infracción /
   Decisión / Motivo) y perder esa estructura sería traducir de más. */
.acta-doc{border-top:1px solid var(--hair);padding-top:1.2rem;margin-top:2rem}
.acta-doc h2{margin:0 0 .35rem;line-height:1.25}
.meta-acta{margin:0 0 .6rem;font-size:.82rem;color:var(--muted)}
.meta-acta .orig,.listado-actas .orig{font-style:italic}
.chips{margin:.2rem 0 .8rem;display:flex;flex-wrap:wrap;gap:.3rem}
.chip{background:var(--accent-soft);color:var(--accent);border:1px solid var(--hair);
      border-radius:999px;padding:.12rem .55rem;font-size:.74rem;font-weight:600}
/* `fit-content` y no `max-content`: la columna de etiquetas crece con el
   contenido pero **con techo**. Con max-content, un <dt> largo estiraba la
   grilla más allá del ancho de la página y aparecía scroll horizontal. */
dl.acta{margin:.6rem 0;display:grid;grid-template-columns:fit-content(11rem) 1fr;
        gap:.28rem .9rem;font-size:.94rem}
dl.acta dt{font-weight:700;color:var(--muted)}
dl.acta dt,dl.acta dd{min-width:0;overflow-wrap:anywhere}
dl.acta dd{margin:0;text-align:justify;hyphens:auto}
/* Una línea del acta que no es un campo: ocupa las dos columnas. */
dl.acta dd.suelto{grid-column:1/-1;color:var(--muted);font-size:.95em}
@media (max-width:560px){
  dl.acta{grid-template-columns:1fr;gap:.1rem .0}
  dl.acta dd{margin:0 0 .5rem}
}
.redaccion{background:var(--surface);border-left:3px solid var(--accent);
           border-radius:0 6px 6px 0;padding:.8rem 1rem;margin:1rem 0}
.redaccion h3{margin:0 0 .3rem;font-size:.78rem;text-transform:uppercase;
              letter-spacing:.06em;color:var(--accent)}
.redaccion p{margin:0;text-align:justify;hyphens:auto}
.acciones{margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
          font-size:.9rem}
a.boton{background:var(--accent);color:var(--accent-ink);padding:.4rem .9rem;
        border-radius:6px;font-weight:600;text-decoration:none}
a.boton:hover{opacity:.9}
.listado-actas{padding-left:1.1rem}
.listado-actas li{margin:.2rem 0}
.nota-fuente,.actualizado{font-size:.84rem;color:var(--muted);text-align:justify;
                          hyphens:auto}
.nota-fuente{border-top:1px solid var(--hair);margin-top:2rem;padding-top:.9rem}


/* ── Calculadora estilo Amazon/ProfitGuru ────────────────────────────────
   El campo editable vive DENTRO de la fila del desglose, no en un formulario
   aparte. Así se lee como una cuenta que baja: precio, menos cada comisión,
   igual a lo que queda. Es el formato al que ya está acostumbrado quien vende
   en Amazon, y evita el salto mental entre "cargar datos" y "leer resultado". */
.calc{background:var(--surface);border:1px solid var(--hair);border-radius:12px;
  padding:0;margin:0 0 28px;overflow:hidden;}
.calc-cab{background:var(--accent);color:var(--accent-ink);padding:12px 18px;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.fila-calc{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 18px;border-bottom:1px solid var(--hair);font-size:15px;}
.fila-calc:last-child{border-bottom:none;}
.fila-calc .f-lab{color:var(--ink);flex:1;min-width:0;}
.fila-calc .f-lab small{display:block;color:var(--muted);font-size:12px;
  line-height:1.35;margin-top:2px;font-weight:400;}
.fila-calc .f-val{font-variant-numeric:tabular-nums;font-weight:600;
  white-space:nowrap;text-align:right;}
.fila-calc input{font:inherit;font-size:15px;font-weight:600;width:110px;
  padding:6px 9px;border:1px solid var(--accent);border-radius:6px;
  background:var(--ground);color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;}
.fila-calc input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.fila-calc select{font:inherit;font-size:14px;padding:6px 8px;
  border:1px solid var(--accent);border-radius:6px;background:var(--ground);color:var(--ink);}
.fila-calc.entrada{background:var(--accent-soft);}
.fila-calc.resta .f-val{color:var(--warn);}
.fila-calc.suma{border-top:2px solid var(--ink);font-weight:700;}
.fila-calc.suma .f-lab{font-weight:700;}
.fila-calc.final{background:var(--accent-soft);border-top:2px solid var(--accent);}
.fila-calc.final .f-lab{font-weight:700;font-size:16px;}
.fila-calc.final .f-val{font-size:1.5rem;color:var(--accent);}
.fila-calc.final.mal .f-val{color:var(--warn);}
.calc-pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--hair);border-top:1px solid var(--hair);}
.calc-pie>div{background:var(--ground);padding:12px 14px;text-align:center;}
.calc-pie .p-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.calc-pie .p-val{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;}
@media (max-width:520px){
  .fila-calc{padding:10px 13px;font-size:14px;}
  .fila-calc input{width:92px;}
}
/* ── móvil ────────────────────────────────────────────── */
/* El chrome ya se adapta en portal.css; acá sólo el ancho del contenido. */
@media (max-width:640px){
  .envoltorio{padding:0 16px 56px;}
}

/* ── Academia: temario y navegación de ruta ──────────────────────────────
   Una ruta es una lista ORDENADA, y eso se tiene que ver: el número de paso
   es lo primero que se lee, antes que el título. Sin él la página vuelve a
   ser una pila de enlaces, que es justamente de lo que la academia trata de
   salir. */
.temario{list-style:none;margin:0 0 32px;padding:0;counter-reset:paso;}
.paso{margin:0 0 8px;}
.paso a{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radio);
  padding:16px 18px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s;
}
.paso a:hover{border-color:var(--accent);transform:translateX(3px);}
.paso-n{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;margin-top:1px;
}
.paso-cuerpo{display:flex;flex-direction:column;gap:3px;min-width:0;}
.paso-et{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
.paso-tit{font-size:1.02rem;font-weight:650;line-height:1.32;color:var(--ink);}
.paso-desc{font-size:13.8px;color:var(--muted);line-height:1.5;}

/* Una herramienta no es una lección más: es el momento de aplicar lo anterior,
   y conviene que se distinga de un vistazo al recorrer el temario. */
.paso-herramienta a{background:var(--accent-soft);border-color:var(--accent);}
.paso-herramienta .paso-n{background:var(--ink);color:var(--ground);}
.paso-caso .paso-n{background:var(--muted);}

.ruta-conteo{font-size:14.5px;color:var(--muted);margin:0 0 22px;}
.tarjeta.ruta .et{color:var(--accent);}

/* ── Navegación dentro de una ruta ──────────────────────────────────────── */
.ruta-nav{
  max-width:var(--prosa);margin:44px auto 0;padding:20px 0 0;
  border-top:2px solid var(--accent);
}
.ruta-donde{font-size:14px;color:var(--muted);margin:0 0 14px;}
.ruta-donde strong{color:var(--ink);font-variant-numeric:tabular-nums;}
.ruta-saltos{display:grid;gap:10px;grid-template-columns:1fr;}
@media (min-width:620px){.ruta-saltos{grid-template-columns:1fr 1fr;}}
.ruta-saltos a{
  display:flex;flex-direction:column;gap:3px;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radio-chico);
  padding:12px 15px;text-decoration:none;color:var(--ink);
  font-size:14.5px;line-height:1.35;font-weight:600;
}
.ruta-saltos a:hover{border-color:var(--accent);}
.ruta-saltos span{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
/* El "siguiente" a la derecha y alineado a la derecha: es la dirección en la
   que se avanza y conviene que el ojo lo encuentre sin leer la etiqueta. */
.ruta-sig{text-align:right;}
.ruta-ant:only-child{grid-column:1;}
.ruta-sig:only-child{grid-column:-2;}

@media (max-width:520px){
  .paso a{padding:13px 14px;gap:12px;}
  .paso-n{width:26px;height:26px;font-size:13px;}
}
