/* ============================================================================
   Portada · hoja propia
   ----------------------------------------------------------------------------
   TESIS. El sistema es acromático a propósito y el color lo pone el trabajo.
   El papel es blanco porque así quedó el canon el 5 de agosto, y el beige está
   descartado. Entonces el color no puede venir del fondo: viene de las
   imágenes, de los tres acentos de marca usados a gran escala, y de la serie
   de datos de cochid, que es el único lugar del grupo donde el color es dato.

   FIRMA. El hero es Santiago isométrico a sangre, renderizado por nosotros
   desde datos abiertos, y encima la marca de CIS a escala de ciudad: dos
   anillos concéntricos trazados sobre el plano. La marca de la Compañía de
   Innovación DE SANTIAGO es literalmente un círculo sobre Santiago; el hero
   solo lo hace visible. Es el único gesto audaz de la página y por eso todo lo
   que viene después es disciplinado.

   El negro del hero es #14161c, que no es un negro elegido acá: es el
   theme-color que ya declara isometrico.innovacionsantiago.cl.
   ============================================================================ */

:root {
  --noche: #14161c;   /* theme-color del isométrico */
  --iso-tierra: #a4937e;
  --iso-polvo:  #c7b79c;
  --iso-hueso:  #f4f1e0;
  --iso-cerro:  #6c685f;
  --cis-azul:    #1e3a5f;
  --cds-tinta:   #1a1a2e;
  --cochid-azul: #1d4ed8;
}

/* --- Hero -----------------------------------------------------------------
   Altura por viewport con tope: en una pantalla baja el hero no puede comerse
   la primera sección, y en una alta no tiene por qué crecer sin límite. */
.ph {
  position: relative;
  min-height: min(78vh, 660px);
  display: grid;
  place-items: center;
  background: var(--noche);
  overflow: hidden;
  margin-bottom: var(--space-8, 64px);
}
.ph__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* La foto se apaga para que el trazo blanco de la marca gane sin taparla. */
  opacity: .58; filter: saturate(1.05) contrast(1.02);
}
.ph__velo {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 12%, rgba(20,22,28,.72) 78%);
}
/* Los anillos a escala de ciudad. Proporción exacta del archivo de marca:
   r92 con trazo 4 y r56 con trazo 18 sobre lienzo de 200. No se redibuja. */
.ph__anillos {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(128vw, 1180px); aspect-ratio: 1; color: #fff; opacity: .72;
  pointer-events: none;
}
.ph__anillos svg { width: 100%; height: 100%; display: block; }
/* Velo bajo el titular, por ENCIMA de los anillos. En ventana angosta el trazo
   blanco del anillo cruzaba el texto y lo volvia ilegible: el anillo puede
   pasar por detras, pero nunca por encima de lo que hay que leer. El radio va
   en ch para que crezca con el texto y no con la pantalla. */
.ph__scrim {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(96vw, 46rem); height: min(60vh, 22rem);
  background: radial-gradient(ellipse at center, rgba(20,22,28,.86) 0%, rgba(20,22,28,.72) 45%, transparent 72%);
  pointer-events: none;
}
.ph__centro { position: relative; text-align: center; padding: 40px 24px; color: #fff; }
.ph__nb {
  font-weight: 800; font-size: clamp(13px, 1.5vw, 17px); line-height: 1.15;
  letter-spacing: .06em; text-transform: uppercase; margin: 0 0 18px;
}
.ph__frase {
  margin: 0 auto; max-width: min(15ch, 60vw);
  font-size: clamp(28px, 4.4vw, 52px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.025em; text-wrap: balance;
}
.ph__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  padding: 14px clamp(16px, 4vw, 40px);
  font-family: var(--font-epi, var(--font-mono)); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.16);
}
.ph__pie a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }

/* --- Bandas de sociedad ---------------------------------------------------
   Cada sociedad ocupa una banda entera con su acento, porque son tres y no
   treinta: una rejilla de tarjetas las igualaría con los productos, y no son
   lo mismo. */
.ps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 var(--space-8, 64px); }
.ps__b {
  display: grid; grid-template-columns: 132px minmax(0,1fr) auto; gap: clamp(16px, 3vw, 36px);
  align-items: center; padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 30px);
  background: var(--paper); text-decoration: none; color: var(--ink);
  transition: background .18s;
}
.ps__b:hover { background: var(--paper-raised); }
/* La marca va en tinta, no en el acento. El acento es para el enlace y para
   los datos; teñir el simbolo lo convierte en ilustracion. La unica marca con
   color propio es el cuadrado de cochid, y ese color esta en su archivo. */
.ps__marca { display: grid; place-items: center; height: 92px; color: var(--ink); }
.ps__marca svg { width: 82px; height: 82px; }
.ps__rut { display: block; font-family: var(--font-epi, var(--font-mono)); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 5px; }
.ps__nom { display: block; margin: 0 0 7px; font-size: clamp(19px, 2.3vw, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ps__rol { display: block; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); max-width: 56ch; }
.ps__ir { font-family: var(--font-epi, var(--font-mono)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--m, var(--accent)); white-space: nowrap; }
@media (max-width: 720px) {
  .ps__b { grid-template-columns: 64px minmax(0,1fr); }
  .ps__marca { height: 60px; } .ps__marca svg { width: 54px; height: 54px; }
  .ps__ir { grid-column: 1 / -1; }
}

/* --- Mosaico de productos -------------------------------------------------
   Las capturas son la prueba de que el grupo publica cosas. Van grandes y sin
   recortar a un cuadrado: una portada recortada deja de ser una portada. */
.pm { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; margin: 0 0 var(--space-7, 40px); }
.pm__i { grid-column: span 2; }
@media (max-width: 900px) { .pm__i { grid-column: span 1; } }
.pm a { display: block; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); }
.pm a:hover { border-color: var(--ink); }
/* height:auto es obligatorio. Los atributos width/height del marcado entran
   como "presentational hints" y fijan la altura en píxeles, que gana sobre
   aspect-ratio: sin esto la caja quedaba de 800px de alto y la captura se
   recortaba a tamaño natural en vez de escalar. */
.pm img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-bottom: 1px solid var(--line); }
.pm__t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; }
.pm__n { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pm__d { font-family: var(--font-epi, var(--font-mono)); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-muted); }

/* --- Color: bandas grandes, no fichas de 44px ---------------------------- */
.pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border: 1px solid var(--line); margin: 0 0 var(--space-5, 24px); }
.pc__c { padding: 0; }
.pc__t { height: clamp(90px, 12vw, 140px); }
.pc__l { display: flex; justify-content: space-between; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line); font-family: var(--font-epi, var(--font-mono)); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.pc__l b { color: var(--ink); font-weight: 600; }
.pc__l span { color: var(--ink-muted); }

/* La serie de cochid, dibujada como lo que es: una serie. */
.pg { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.pg__b { flex: 1; min-width: 0; position: relative; }
.pg__e { display: block; width: 100%; }
.pg__n { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-family: var(--font-epi, var(--font-mono)); font-size: 9.5px; color: var(--ink-muted); }
.pg-wrap { margin: 0 0 46px; }

/* --- Namebrands de producto ---------------------------------------------- */
/* La rejilla se dibuja con bordes por celda y no con gap sobre fondo de línea:
   con auto-fit la última fila queda incompleta, y el fondo de línea pintaba de
   gris las celdas vacías. Con bordes por celda, el hueco queda en papel. */
.pw { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); background: var(--paper); border: 1px solid var(--line); border-width: 1px 0 0 1px; }
.pw__i { background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 16px 13px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.pw__i img { width: 100%; max-width: 178px; height: auto; }
.pw__n { font-family: var(--font-epi, var(--font-mono)); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }

/* --- Secciones de la portada --------------------------------------------- */
.pt { margin: 0 0 var(--space-4, 20px); }
.pt__e { font-family: var(--font-epi, var(--font-mono)); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 8px; }
.pt h2 { margin: 0 0 8px; font-size: clamp(21px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.pt p { margin: 0; max-width: 64ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.psec { margin-bottom: var(--space-8, 64px); }

@media (prefers-reduced-motion: reduce) { .ps__b, .pm a { transition: none; } }