/* =========================================================
   Marvital — paginas legales: privacidad y terminos.

   Hoja propia y chica. Las paginas legales son texto para leer: no cargan
   la app ni la hoja de /instalar. Comparten con ellas los colores, las
   tipografias (servidas desde /fuentes) y el tono.

   Sin estilos en linea en el HTML: la politica de seguridad del sitio
   declara style-src 'self', y un atributo style= seria bloqueado.
   ========================================================= */

:root{
  --bg-0:#0a0e0f;
  --bg-1:#10161a;
  --bg-2:#161e22;
  --linea:#28343a;
  --texto-alto:#eaf2f1;
  --texto-medio:#9fb4b3;
  --texto-bajo:#849697;
  --senal:#36e1c4;
  --senal-tenue:rgba(54,225,196,.10);
  --alerta:#ffb86b;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{
  margin:0;min-height:100vh;
  background:radial-gradient(110% 55% at 50% -12%,#12302c,var(--bg-1) 45%,var(--bg-0) 100%) fixed;
  color:var(--texto-medio);
  font:400 16px/1.72 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
a{color:var(--senal);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--texto-alto)}
:focus-visible{outline:2px solid var(--senal);outline-offset:3px;border-radius:4px}

.lg-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1080px;margin:0 auto;padding:18px clamp(18px,4vw,40px);
}
.lg-marca{display:block;line-height:0}
.lg-marca img{display:block;height:26px;width:auto}
.lg-volver{
  font-size:14px;font-weight:500;color:var(--texto-medio);text-decoration:none;white-space:nowrap;
  padding:9px 16px;border:1px solid var(--linea);border-radius:999px;
}
.lg-volver:hover{color:var(--texto-alto);border-color:rgba(54,225,196,.45)}

.lg-doc{max-width:760px;margin:0 auto;padding:clamp(26px,6vw,60px) clamp(18px,4vw,40px) clamp(48px,8vw,90px)}
.lg-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--senal);margin:0 0 14px;
}
.lg-doc h1{
  font-weight:800;color:var(--texto-alto);font-size:clamp(29px,5.2vw,44px);
  line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;text-wrap:balance;
}
.lg-fecha{font-size:14px;color:var(--texto-bajo);margin:0 0 30px}

.lg-resumen{
  margin:0 0 22px;padding:20px 22px;border-radius:14px;
  background:var(--senal-tenue);border:1px solid rgba(54,225,196,.28);
  color:var(--texto-alto);font-size:15.5px;
}
.lg-resumen p{margin:0}
.lg-resumen p+p{margin-top:10px}
.lg-resumen strong{color:var(--senal)}

/* Aviso de datos de salud: tiene que distinguirse del resumen */
.lg-aviso{
  margin:0 0 40px;padding:18px 22px;border-radius:14px;
  background:rgba(255,184,107,.07);border:1px solid rgba(255,184,107,.32);
  color:var(--texto-alto);font-size:15px;
}
.lg-aviso p{margin:0}
.lg-aviso p+p{margin-top:8px}
.lg-aviso strong{color:var(--alerta)}

.lg-indice{margin:0 0 44px;padding:0;list-style:none;counter-reset:ind;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 20px}
.lg-indice li{counter-increment:ind;font-size:14px}
.lg-indice li::before{content:counter(ind,decimal-leading-zero) "  ";
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--texto-bajo)}
.lg-indice a{color:var(--texto-medio);text-decoration:none}
.lg-indice a:hover{color:var(--senal)}

.lg-doc h2{
  font-weight:700;color:var(--texto-alto);font-size:clamp(19px,2.6vw,23px);
  letter-spacing:-.015em;line-height:1.25;margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--linea);
}
.lg-doc h2 span{
  display:block;font-family:'JetBrains Mono',monospace;font-weight:400;font-size:11px;
  letter-spacing:.2em;color:var(--senal);margin-bottom:8px;
}
.lg-doc h3{font-weight:700;color:var(--texto-alto);font-size:16.5px;margin:24px 0 8px}
.lg-doc p{margin:0 0 14px}
.lg-doc ul{margin:0 0 16px;padding-left:20px}
.lg-doc li{margin-bottom:8px}
.lg-doc li::marker{color:var(--senal)}
.lg-doc strong{color:var(--texto-alto);font-weight:600}

.lg-tabla{width:100%;overflow-x:auto;margin:6px 0 18px}
.lg-tabla table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.lg-tabla th,.lg-tabla td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--linea)}
.lg-tabla th{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-bajo)}
.lg-tabla td:first-child{color:var(--texto-alto);font-weight:500;width:28%}

.lg-aaip{
  margin:40px 0 0;padding:20px 22px;border-radius:14px;border:1px solid var(--linea);
  background:rgba(16,22,26,.7);font-size:13.5px;line-height:1.65;
}
.lg-aaip p{margin:0}
.lg-aaip p+p{margin-top:10px}

.lg-pie{
  max-width:1080px;margin:0 auto;padding:26px clamp(18px,4vw,40px) 40px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--texto-bajo);
}
.lg-pie nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.lg-pie a{color:var(--texto-medio);text-decoration:none}
.lg-pie a:hover,.lg-pie a[aria-current="page"]{color:var(--senal)}

/* En telefono la tabla se vuelve fichas: deslizar de costado para leer es
   incomodo, y a estas paginas se llega sobre todo desde un celular. */
@media (max-width:640px){
  .lg-tabla table{min-width:0}
  .lg-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lg-tabla tr{display:block;padding:14px 0;border-bottom:1px solid var(--linea)}
  .lg-tabla td{display:block;width:auto !important;border:0;padding:3px 0}
  .lg-tabla td::before{
    content:attr(data-rotulo);display:block;margin-bottom:1px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-bajo);
  }
}
@media (max-width:520px){
  body{font-size:15.5px}
  .lg-volver{font-size:13px;padding:8px 13px}
  .lg-resumen,.lg-aviso{padding:16px 17px}
}
@media print{
  body{background:#fff;color:#111;font-size:11pt}
  .lg-volver,.lg-indice,.lg-pie nav{display:none}
  .lg-doc h1,.lg-doc h2,.lg-doc h3,.lg-doc strong,.lg-resumen,.lg-aviso,.lg-marca{color:#000}
  .lg-resumen,.lg-aviso,.lg-aaip{background:none;border-color:#999}
  a{color:#000}
}