/* ============================================================================
   innovacionsantiago.cl · capa propia sobre la hoja de la versión del 9

   Tres reglas del canon mandan acá y explican casi todo lo que sigue:
     · prohibido el border-left de acento en tarjetas (Martín, 6 de agosto)
     · «este tipo de tarjetas debe desaparecer» y «nunca usar divs con un
       sombreado, eso es muy ai»; en su lugar, «una tablita con los valores»
     · el papel es blanco desde el 5 de agosto, el beige está descartado
   ============================================================================ */

/* ─── Papel blanco ────────────────────────────────────────────────────────── */

:root, html[data-theme="light"] {
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --surface: #ffffff;
  --bg: #ffffff;
}

html[data-theme="light"], html:not([data-theme="dark"]) body { background: #ffffff; }

.home-sect, .legal-pag { background: var(--paper); }

/* El velo global deja ver el render. La legibilidad se verifica con capturas del candidato. */
.hero__scene-light, .santiago-hero-v2__veil {
  z-index: 1;
  mix-blend-mode: normal;
  background: color-mix(in srgb, var(--paper) 18%, transparent);
}

/* Capa local detrás de la columna de texto. Mantiene el fondo visible fuera de esa zona.
   canon-ok: H28 prohíbe el gradiente de fondo; la excepción está registrada en KIT-DESVIACIONES.md. */
.hero__scene-fade {
  z-index: 1;
  background: linear-gradient(to right, color-mix(in srgb, var(--paper) 50%, transparent) 0%, color-mix(in srgb, var(--paper) 50%, transparent) 62%, transparent 88%); /* canon-ok: H28 prohíbe el gradiente de fondo; Martín lo pidió el 10-sep para sostener AA sin tapar el render · KIT-DESVIACIONES.md */
}

/* La portada de Santiago combina la capa local de lectura con el velo global
   más liviano para mantener visible el render. */
.santiago-hero-v2__veil {
  background: linear-gradient(to right, color-mix(in srgb, var(--paper) 50%, transparent) 0%, color-mix(in srgb, var(--paper) 50%, transparent) 62%, transparent 88%), color-mix(in srgb, var(--paper) 18%, transparent); /* canon-ok: mismo caso que .hero__scene-fade · KIT-DESVIACIONES.md */
}

/* Bajo 760 px la columna de texto ocupa el ancho entero y la capa local es plana. */
@media (max-width: 760px) {
  .hero__scene-fade {
    background: color-mix(in srgb, var(--paper) 50%, transparent);
  }
    .santiago-hero-v2__veil {
    background: color-mix(in srgb, var(--paper) 59%, transparent);
  }
}

/* La bajada estaba en --ink-muted. Sobre el render, ese gris no llega a 4,5:1
   ni con el velo al 86 %. En --ink llega con margen y el velo puede bajar. */
.hero__lead { color: var(--ink); }

.hero__title, .hero__lead,
.santiago-hero-v2__title, .santiago-hero-v2__lead { text-shadow: none; }

.santiago-hero-v2__text { z-index: 2; }
.santiago-hero-v2__text, .santiago-hero-v2__title { color: var(--ink); }
/* Mismo motivo que la bajada de la portada: sobre el render, --ink-muted no
   llega a 4,5:1 con ninguna capa razonable. */
.santiago-hero-v2__eyebrow, .santiago-hero-v2__lead { color: var(--ink); }

/* Lockups publicados por candidate.34: no se reconstruye la marca con texto
   ni círculos locales. */
.gr-nav__lockup { display:block; width: min(238px, 31vw); height: 42px; object-fit: contain; object-position: left center; }
.gr-footer__lockup { display:block; width: 250px; max-width:100%; height: 48px; object-fit:contain; object-position:left center; }

/* ─── Rótulo de marca ─────────────────────────────────────────────────────
   Desviación H29 sobre el kit v10 mientras el kit publica su corrección
   (Martín, 10 de septiembre). El kit pinta .gr-nav__wordmark en minúsculas y
   con un mark de 28 px contra un bloque de texto de 34: el símbolo queda más
   chico que el nombre. Acá el rótulo va en mayúsculas y en tres líneas, y el
   mark mide el bloque de texto de cap-top a línea base.

   El bloque son dos interlíneas más una altura de mayúscula. La altura de
   mayúscula de IBM Plex Sans es 698 de las 1000 unidades del cuerpo. Con el
   mark y el rótulo centrados en la misma línea flex, el centro del mark cae
   sobre el centro de ese bloque con menos de 0,2 px de diferencia. */

.cis-marca {
  --rot-cuerpo: 11px;
  --rot-interlinea: 1.02;
  --rot-bloque: calc(2 * var(--rot-cuerpo) * var(--rot-interlinea)
                     + 0.698 * var(--rot-cuerpo));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cis-rotulo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--rot-cuerpo);
  font-weight: 700;
  line-height: var(--rot-interlinea);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cis-rotulo-marca {
  flex: none;
  width: var(--rot-bloque);
  height: var(--rot-bloque);
}

/* El pie usa un cuerpo mayor, y el mark se centra en el rótulo y no en el
   rótulo más la bajada, que es lo que pedía el kit con align-items: flex-start. */
.gr-footer__brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.gr-footer__brand .cis-marca { --rot-cuerpo: 12px; }

/* ─── Carga incremental del render de la portada ──────────────────────────── */

/* El marcador de posición viaja embebido en el HTML, así que se pinta con el
   primer byte de la página y no espera ninguna petición. Llega desenfocado
   desde preparar_hero.py, no con filter: blur(), que H28 prohíbe. */
.hero__lqip {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 200ms linear;
}

.hero__scene.is-lista .hero__lqip { opacity: 0; }

/* Dos correcciones sobre la hoja heredada: su fondo opaco tapaba el marcador,
   y la imagen no se oculta hasta terminar de cargar porque lo que se quiere
   ver es justamente cómo el JPEG progresivo gana definición encima. */
.hero__render { background: transparent; opacity: 1; }

/* El crédito vive dentro del hero y fuera de .hero__scene, que es aria-hidden. */
.hero { position: relative; }

.hero__credito {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: 16px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-muted);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
}

.hero__credito:hover,
.hero__credito:focus-visible { color: var(--ink); }

/* ─── Rótulos y titulares de sección ──────────────────────────────────────── */

.marcas__inner,
.destacados__inner,
.catalogo__inner,
.doctrina-publica__inner,
.proyectos__inner,
.legal-pag__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) clamp(20px, 5vw, 48px);
}

.marcas__rot,
.destacados__rot,
.catalogo__rot,
.doctrina-publica__rot,
.proyectos__rot,
.legal-pag__rot {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

.marcas h2,
.destacados h2,
.catalogo h2,
.doctrina-publica h2,
.proyectos h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 12px;
}

.marcas__entrada,
.destacados__entrada,
.catalogo__entrada,
.proyectos__entrada {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 66ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
}

.marcas__pie, .destacados__pie { margin: clamp(20px, 3vw, 30px) 0 0; font-size: 14.5px; }
.marcas__pie a, .destacados__pie a { color: var(--ink); }

/* ─── Marcas ──────────────────────────────────────────────────────────────
   Sin barrita de acento y sin sombra. Borde de 1 px uniforme; la jerarquía la
   pone el wordmark, que ya trae el color de cada marca. */

.marcas { border-top: 1px solid var(--line); }

.marcas__lista { display: flex; flex-wrap: wrap; gap: 14px; }

.marca {
  flex: 1 1 248px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
  transition: border-color .12s ease;
}

.marca:hover { border-color: var(--ink); }
.marca__g { font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }

.marca__w {
  display: flex;
  align-items: center;
  min-height: 58px;
  box-sizing: border-box;
}

.marca__lockup {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

/* Los namebrands canónicos tienen tinta negra y fondo transparente. En tema
   oscuro se presentan sobre una placa blanca explícita; el resto de la ficha
   conserva papel y texto oscuros del sistema. */
html[data-theme="dark"] .marca { background: var(--paper); }
html[data-theme="dark"] .marca__w {
  background: #fff;
  border: 1px solid #d5dbe3;
  padding: 8px 10px;
}

.ac-wm { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.ac-wm__d { font-weight: 400; color: var(--ink-soft); }

.ac-nb { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.ac-nb__s { flex: none; width: 30px; height: 30px; }
.ac-nb__s svg { width: 100%; height: 100%; display: block; }
.ac-nb__t {
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 10px;
}

/* El namebrand de la Compañía al pie de la marca que lo lleva. Va chico y en
   tinta suave: acompaña, no compite con el wordmark. */
.marca__sello {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  opacity: .62;
}

.marca__sello .ac-nb__s { width: 20px; height: 20px; }
.marca__sello .ac-nb__t { font-size: 7.5px; }

/* ─── Listas de productos y catálogo ──────────────────────────────────────
   La tablita que pidió el canon en lugar de las tarjetas. */

.destacados { border-top: 1px solid var(--line); }
.catalogo { border-top: 1px solid var(--line); }

.lins, .cats { list-style: none; margin: 0; padding: 0; }

.lin, .cat {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.1fr) minmax(0, 2fr);
  gap: 12px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.lins .lin:first-child, .cats .cat:first-child { border-top: 1px solid var(--ink); }

.lin__h, .cat__h { display: inline-flex; align-items: baseline; gap: 8px; }
.lin__n, .cat__n { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.lin__n--off, .cat__n--off { color: var(--ink-muted); }

.lin__n--brand {
  display: block;
  box-sizing: border-box;
  width: min(100%, 270px);
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--line);
}

.lin__lockup {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: contain;
  object-position: left center;
}

.lin__x, .cat__x {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.cat__x { color: #b91c1c; }

.lin__d, .cat__d {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--ink-muted);
}

.lin__t, .cat__t { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

.cat-gr { margin-bottom: clamp(28px, 4vw, 44px); }

.cat-gr__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
}

.cat-gr__h h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0;
  border: 0;
}

.cat-gr__n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: auto;
}

/* ─── Principios de Filosofía ─────────────────────────────────────────────
   La versión vieja los numeraba 01 a 07 en una columna aparte. Los números
   salieron: son un conjunto y no una secuencia, así que el número no aportaba
   nada y competía con el título. Queda una lista con hilos, igual que el resto
   del sitio. */

.principle {
  display: block;
  padding: clamp(20px, 3vw, 28px) 0;
  border-top: 1px solid var(--line);
  max-width: 74ch;
}

.principle:first-of-type { border-top: 1px solid var(--ink); }

.principle__title {
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 10px;
  text-transform: none;
}

.principle__body p { margin: 0 0 10px; font-size: 15px; line-height: 1.62; color: var(--ink-muted); }
.principle__body p:last-child { margin-bottom: 0; }

/* ─── Cómo trabajamos ─────────────────────────────────────────────────────── */

.doctrina-publica { border-top: 1px solid var(--line); }

.doctrina-publica article { padding: 0 0 clamp(18px, 2.6vw, 26px); max-width: 74ch; }

.doctrina-publica article + article {
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2.6vw, 26px);
}

.doctrina-publica h3 {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-transform: none;
  border: 0;
  margin: 0 0 8px;
  padding: 0;
}

.doctrina-publica p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-muted); }

/* ─── Proyectos ───────────────────────────────────────────────────────────── */

.proyectos { border-top: 1px solid var(--line); }

.proyectos__lista { max-width: 74ch; }

.proyectos__lista article {
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-top: 1px solid var(--line);
}

.proyectos__lista article:first-of-type { border-top: 1px solid var(--ink); }

.proyectos__lista h3 {
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: -0.025em;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 8px;
}

.proyectos__lista p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ─── Información legal ───────────────────────────────────────────────────── */

.legal-pag h1 {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 0 14px;
}

.legal-pag__entrada { font-size: 16px; line-height: 1.6; color: var(--ink-muted); max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 40px); }

.ficha {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  max-width: 660px;
  border-top: 1px solid var(--ink);
}

.ficha div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.ficha span:first-child {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 10.5px;
  padding-top: 2px;
}

.legal-pag__docs { list-style: none; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; }
.legal-pag__docs li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.legal-pag__docs li:first-child { border-top: 1px solid var(--ink); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .lin, .cat { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .ficha div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .marca { transition: none; }
}

/* Lockup de Periodismo2: conserva la escala del resto de las marcas. */
.ac-nb--p2 .ac-nb__s { width: 26px; height: 26px; }
.p2-wm { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }

/* ─── Formulario de contacto ──────────────────────────────────────────────────
   Misma disciplina que el resto de la hoja: radio cero, filete de 1 px, sin
   sombra, sin relleno de color. El campo obligatorio no se marca con rojo
   preventivo: el error se dice cuando ocurre, no antes. */

.form { display: flex; flex-direction: column; gap: 18px; max-width: 60ch; }

.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form__campo { display: flex; flex-direction: column; gap: 6px; }

.form__label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #626c74;
}

.form__opcional { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.form__input {
  font: inherit;
  font-size: 0.95rem;
  color: #111820;
  background: #ffffff;
  border: 1px solid #d9dde0;
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
}

.form__input:focus-visible {
  outline: 2px solid #111820;
  outline-offset: -1px;
  border-color: #111820;
}

.form__input--area { resize: vertical; min-height: 8em; line-height: 1.5; }

/* Campo trampa. Fuera de pantalla y fuera del recorrido de tabulación, así que
   una persona no lo encuentra ni con teclado; un bot que rellena todo, sí. */
.form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.form__aviso { margin: 0; font-size: 0.875rem; color: #626c74; }
.form__aviso--ok { color: #126b67; }
.form__aviso--error { color: #9a3b2f; }

@media (max-width: 640px) {
  .form__fila { grid-template-columns: 1fr; }
}

/* ─── Navegación móvil ───────────────────────────────────────────────────────
   La marca y el menú ocupan la primera fila. Tema y cuenta comparten una
   segunda fila completa, de modo que ningún acceso queda fuera del viewport. */

@media (max-width: 720px) {
  .gr-nav__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .gr-nav__brand { grid-column: 1; grid-row: 1; }
  .gr-nav__toggle { grid-column: 2; grid-row: 1; }

  .gr-nav__actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: stretch;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    gap: 8px;
  }

  .gr-nav__theme { flex: 0 0 34px; }

  .gr-nav__cta {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
  }

  .gr-nav__links { grid-row: 3; }
}

@media (max-width: 1044px) {
  .gr-nav__inner { gap: 10px; }
  .gr-nav__links { gap: 4px; }
  .gr-nav__link { padding-inline: 7px; }
  .gr-nav__actions { gap: 6px; }
}

@media (max-width: 900px) {
  .gr-nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .gr-nav__toggle { display: inline-flex; }
  .gr-nav__links { grid-column: 1 / -1; order: 3; width: 100%; }
  .gr-nav__actions { min-width: 0; }
}

@media (max-width: 826px) {
  .gr-nav__actions { grid-column: 1 / -1; width:100%; justify-content:stretch; }
  .gr-nav__cta { flex: 1 1 0; min-width:0; justify-content:center; }
}

@media (max-width: 761px) {
  .gr-nav__lockup { width: min(224px, 64vw); height: 38px; }
  .gr-nav__links { flex-wrap: wrap; }
}

/* Las etiquetas laterales se retiraron del HTML. Sus 180 px heredados no
   deben convertirse en la columna del contenido, tampoco en escritorio. */
.home-sect__inner, .page__header, .sect {
  grid-template-columns: minmax(0, 1fr);
}
.home-sect__body, .sect__body {
  grid-column: 1 / -1;
  max-width: 68ch;
}
.home-sect__body h2 { margin-bottom: 16px; }
.home-sect__body h3, .sect__body h3 {
  margin: 28px 0 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  text-transform: none;
  letter-spacing: normal;
}
.form__opcional { color: var(--ink-muted); opacity: 1; }

/* El SVG canónico tiene tinta negra fija; conserva un soporte claro como
   los lockups del portafolio cuando la página usa el tema oscuro. */
html[data-theme="dark"] .gr-nav__lockup,
html[data-theme="dark"] .gr-footer__lockup { background: #fff; }

/* El menú se pliega antes de perder una sola fila. El botón controla el
   estado .is-open que entrega chrome.js; cerrado no deja enlaces a la vista. */
@media (max-width: 960px) {
  .gr-nav__toggle { display: inline-flex; }
  .gr-nav__links { display: none; grid-column: 1 / -1; width: 100%; }
  .gr-nav__links.is-open, .gr-nav__toggle[aria-expanded="true"] + .gr-nav__links { display: flex; }
  .gr-nav__links.is-open .gr-nav__group { width: 100%; }
  .gr-nav__links.is-open .gr-nav__link { display: block; }
}

/* Los títulos del pie son encabezados de navegación, no cejas editoriales. */
.gr-footer__col h4 {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 720px) {
  .gr-nav__actions .gr-nav__cta { display: inline-flex; }
}

@media (max-width: 720px) {
  .gr-nav__actions .gr-nav__cta { display: inline-flex !important; }
}