/* nativa.cl — hoja de estilos */

:root{
  --ceniza:      #E9EAE5;
  --ceniza-2:    #DCDED6;
  --tinta:       #14181C;
  --tinta-suave: #545C63;
  --indigo:      #22357A;
  --indigo-claro:#5B6FB8;
  --brasa:       #A63A24;

  --display: "Petrona", Georgia, serif;
  --texto: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "DejaVu Sans Mono", monospace;

  --max: 1140px;
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--ceniza);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 380;
}

.envoltura{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

a{ color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--brasa); }

:focus-visible{ outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---------- encabezado ---------- */

.sitio-cabecera{
  border-bottom: 1px solid var(--tinta);
  background: var(--ceniza);
  position: sticky; top: 0; z-index: 20;
}
.cabecera-fila{
  display:flex; align-items: baseline; gap: 28px;
  flex-wrap: wrap; padding: 14px 0 12px;
}
.marca{
  font-family: var(--display);
  font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  text-decoration: none; color: var(--tinta); line-height:1;
}
.marca span{ color: var(--indigo); }
.marca-nota{
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.menu{ margin-left:auto; display:flex; flex-wrap: wrap; gap: 4px 18px; }
.menu a{
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em;
  text-decoration:none; color: var(--tinta-suave); padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover{ color: var(--tinta); border-bottom-color: var(--indigo-claro); }
.menu a.activo{ color: var(--tinta); border-bottom-color: var(--indigo); }

/* ---------- portada: banda comparativa ---------- */

.portada{ padding: 54px 0 40px; border-bottom: 1px solid var(--ceniza-2); }
.portada-tesis{ max-width: 46ch; }
.portada-tesis p{ font-size: 20px; line-height:1.5; margin:0; }
.portada-tesis .primera{ font-family: var(--display); font-size: 27px; line-height:1.34; margin-bottom: 14px; font-weight: 500; }

.banda{ margin-top: 44px; }
.banda-selector{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.banda-selector button{
  font-family: var(--mono); font-size: 12px; letter-spacing:.06em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--ceniza-2); color: var(--tinta-suave);
  padding: 6px 13px; cursor: pointer; border-radius: 0;
}
.banda-selector button:hover{ border-color: var(--indigo-claro); color: var(--tinta); }
.banda-selector button[aria-pressed="true"]{
  background: var(--indigo); border-color: var(--indigo); color: var(--ceniza);
}

.banda-rejilla{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tinta);
}
.banda-celda{
  padding: 26px 20px 22px;
  border-right: 1px solid var(--ceniza-2);
}
.banda-celda:last-child{ border-right: 0; }
.banda-palabra{
  font-family: var(--display); font-size: clamp(32px, 5.2vw, 54px);
  font-weight: 500; line-height: 1; letter-spacing: -0.015em; margin: 0 0 12px;
}
.banda-fonetica{ font-family: var(--mono); font-size: 13px; color: var(--indigo); margin: 0 0 16px; }
.banda-lengua{
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0;
}
.banda-pie{
  font-family: var(--mono); font-size: 12px; color: var(--tinta-suave);
  margin: 16px 0 0; max-width: 70ch;
}

/* ---------- escala de vitalidad ---------- */

.seccion{ padding: 56px 0; border-bottom: 1px solid var(--ceniza-2); }
.seccion:last-of-type{ border-bottom: 0; }

.rotulo{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 10px;
}
h1.titulo{
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: 0 0 18px;
}
h2.titulo{
  font-family: var(--display); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 16px;
}
h3{
  font-family: var(--display); font-weight: 600; font-size: 21px;
  margin: 32px 0 8px; letter-spacing: -0.01em;
}
.entradilla{ max-width: 68ch; font-size: 18.5px; }

.escala{ margin-top: 26px; border-top: 1px solid var(--tinta); }
.escala-fila{
  display:grid; grid-template-columns: 210px 1fr;
  border-bottom: 1px solid var(--ceniza-2); padding: 14px 0; gap: 18px;
}
.escala-grado{
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-suave); padding-top: 3px;
}
.escala-fila.critico .escala-grado{ color: var(--brasa); }
.fichas{ display:flex; flex-wrap: wrap; gap: 8px; }
.ficha{
  font-family: var(--mono); font-size: 12.5px;
  border: 1px solid var(--tinta); padding: 3px 10px; text-decoration: none; color: var(--tinta);
  background: transparent;
}
.ficha:hover{ background: var(--indigo); border-color: var(--indigo); color: var(--ceniza); }
.escala-fila.critico .ficha{ border-color: var(--brasa); color: var(--brasa); }
.escala-fila.critico .ficha:hover{ background: var(--brasa); color: var(--ceniza); }

/* ---------- tarjetas de lengua ---------- */

.tarjetas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--ceniza-2); border: 1px solid var(--ceniza-2); margin-top: 28px; }
.tarjeta{ background: var(--ceniza); padding: 24px 22px 26px; display:flex; flex-direction: column; }
.tarjeta h3{ margin: 0 0 4px; font-size: 25px; }
.tarjeta h3 a{ text-decoration: none; color: var(--tinta); }
.tarjeta h3 a:hover{ color: var(--indigo); }
.tarjeta-familia{ font-family: var(--mono); font-size: 11.5px; letter-spacing:.08em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 14px; }
.tarjeta p.resumen{ margin: 0 0 18px; font-size: 16px; }
.datos{ margin: auto 0 0; border-top: 1px solid var(--ceniza-2); padding-top: 12px; }
.datos div{ display:flex; gap: 12px; font-family: var(--mono); font-size: 12px; padding: 3px 0; }
.datos dt, .datos .clave{ color: var(--tinta-suave); min-width: 92px; }
.datos .valor{ color: var(--tinta); }

/* ---------- tablas ---------- */

.tabla{ width:100%; border-collapse: collapse; margin: 22px 0; font-size: 16px; }
.tabla th{
  text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-suave); font-weight: 500;
  border-bottom: 1px solid var(--tinta); padding: 8px 14px 8px 0; vertical-align: bottom;
}
.tabla td{ border-bottom: 1px solid var(--ceniza-2); padding: 10px 14px 10px 0; vertical-align: top; }
.tabla td.voz{ font-family: var(--display); font-size: 19px; font-weight: 500; white-space: nowrap; }
.tabla td.afi{ font-family: var(--mono); font-size: 13px; color: var(--indigo); white-space: nowrap; }
.tabla-envoltura{ overflow-x: auto; }

/* ---------- texto largo ---------- */

.cuerpo{ max-width: 70ch; }
.cuerpo p{ margin: 0 0 18px; }
.cuerpo ul{ margin: 0 0 18px; padding-left: 20px; }
.cuerpo li{ margin-bottom: 7px; }

.nota{
  border-left: 3px solid var(--indigo); padding: 4px 0 4px 18px;
  font-size: 16px; color: var(--tinta-suave); margin: 26px 0; max-width: 66ch;
}

.dosclm{ display:grid; grid-template-columns: 1fr 1fr; gap: 44px; }

.bibliografia{ list-style: none; padding: 0; margin: 22px 0 0; max-width: 78ch; }
.bibliografia li{ border-bottom: 1px solid var(--ceniza-2); padding: 13px 0; font-size: 16px; }
.bibliografia .anio{ font-family: var(--mono); font-size: 12px; color: var(--indigo); display:inline-block; min-width: 58px; }
.bibliografia cite{ font-style: italic; }

/* ---------- pie ---------- */

.sitio-pie{ border-top: 1px solid var(--tinta); margin-top: 40px; padding: 34px 0 60px; }
.pie-rejilla{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
.pie-rejilla h4{ font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 12px; font-weight: 500; }
.pie-rejilla ul{ list-style:none; margin:0; padding:0; }
.pie-rejilla li{ margin-bottom: 6px; font-size: 15px; }
.pie-rejilla a{ text-decoration: none; }
.pie-rejilla a:hover{ text-decoration: underline; }
.pie-nota{ font-size: 15px; color: var(--tinta-suave); max-width: 46ch; margin: 0 0 14px; }

/* ---------- adaptación ---------- */

@media (max-width: 900px){
  .banda-rejilla{ grid-template-columns: repeat(2, 1fr); }
  .banda-celda:nth-child(2n){ border-right: 0; }
  .banda-celda:nth-child(-n+2){ border-bottom: 1px solid var(--ceniza-2); }
  .dosclm{ grid-template-columns: 1fr; gap: 0; }
  .pie-rejilla{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px){
  body{ font-size: 16px; }
  .envoltura{ padding: 0 18px; }
  .cabecera-fila{ gap: 12px; }
  .menu{ margin-left: 0; width: 100%; gap: 4px 14px; }
  .escala-fila{ grid-template-columns: 1fr; gap: 8px; }
  .pie-rejilla{ grid-template-columns: 1fr; }
  .portada{ padding: 34px 0 28px; }
}

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