/* ============================================================
   Paralelo 39 — hoja de estilos del sitio p39.cl
   Los tokens son los del manual de marca (Identidad/Manual_Marca.html).
   No se introducen colores fuera de las seis de la paleta: cuando hace
   falta alfa se usan las tripletas RGB de esos mismos tonos.
   ============================================================ */

:root {
  --papel:      #E9ECE7;
  --papel-alt:  #DEE3DD;
  --panel:      #F4F6F2;
  --tinta:      #0D1A1D;
  --pizarra:    #47595D;
  --hairline:   #BDC6C0;
  --hairline-2: #D3DAD4;
  --ocre:       #8F6320;
  --ocre-vivo:  #B98A34;
  --magenta:    #972954;
  --rio:        #2A6155;

  --tinta-rgb:   13, 26, 29;
  --ocre-rgb:    143, 99, 32;
  --papel-rgb:   233, 236, 231;

  --ff-display: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --ff-body:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-data:    ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", "Liberation Mono", monospace;

  --maxw: 64rem;
  --s1: .35rem; --s2: .7rem; --s3: 1.1rem; --s4: 1.8rem;
  --s5: 2.8rem; --s6: 4.4rem; --s7: 6.5rem;

  --iso-lat: var(--ocre);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:#0C1417; --papel-alt:#101B1F; --panel:#131F23; --tinta:#E2E9E4;
    --pizarra:#94A5A6; --hairline:#2A3A3E; --hairline-2:#1E2C30;
    --ocre:#D2A252; --ocre-vivo:#E0B767; --magenta:#DE7CA5; --rio:#6FBFAB;
    --tinta-rgb:226,233,228; --ocre-rgb:210,162,82; --papel-rgb:12,20,23;
  }
}
:root[data-theme="dark"] {
  --papel:#0C1417; --papel-alt:#101B1F; --panel:#131F23; --tinta:#E2E9E4;
  --pizarra:#94A5A6; --hairline:#2A3A3E; --hairline-2:#1E2C30;
  --ocre:#D2A252; --ocre-vivo:#E0B767; --magenta:#DE7CA5; --rio:#6FBFAB;
  --tinta-rgb:226,233,228; --ocre-rgb:210,162,82; --papel-rgb:12,20,23;
}

/* ============================ BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; max-width: 65ch; }
ul { margin: 0; padding-left: 1.15rem; }
li { max-width: 62ch; }
li + li { margin-top: var(--s2); }

a { color: var(--ocre); text-underline-offset: .18em; }
a:hover { color: var(--ocre-vivo); }

img, svg { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.stack    { display: flex; flex-direction: column; gap: var(--s3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s5); }

.eyebrow {
  font-family: var(--ff-data);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pizarra); margin: 0;
}
.lede { font-size: 1.14rem; color: var(--pizarra); max-width: 56ch; }
.coord { font-family: var(--ff-data); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Salta al contenido — visible solo con teclado. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: var(--papel);
  padding: .6rem 1rem; z-index: 50;
}
.skip:focus { left: var(--s3); top: var(--s3); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--ocre);
  outline-offset: 2px;
}

/* ============================ LOGO ============================ */
.iso { display: block; width: auto; flex: none; }

.lockup { display: flex; align-items: center; gap: .85rem; color: var(--tinta); text-decoration: none; }
.wordmark { display: flex; flex-direction: column; gap: .12rem; }
.wordmark .name {
  font-family: var(--ff-body); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.wordmark .name b { font-weight: 700; color: var(--ocre); letter-spacing: .14em; }
.wordmark .tag {
  font-family: var(--ff-data); letter-spacing: .13em; text-transform: uppercase;
  color: var(--pizarra); line-height: 1.4;
}
.lockup--xl .name { font-size: clamp(1.05rem, 3.6vw, 1.7rem); }
.lockup--xl .tag  { font-size: clamp(.5rem, 1.2vw, .62rem); }
.lockup--md .name { font-size: 1rem; }
.lockup--md .tag  { font-size: .55rem; }
.lockup--sm .name { font-size: .78rem; letter-spacing: .2em; }
.lockup--sm .tag  { display: none; }

/* ============================ NAV ============================ */
.nav {
  border-bottom: 1px solid var(--hairline);
  background: rgba(var(--papel-rgb), .92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.nav-links { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.nav-links a {
  font-size: .82rem; color: var(--pizarra); text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--tinta); }
.nav-links a[aria-current="page"] { box-shadow: 0 2px 0 var(--ocre); }

/* ============================ BOTONES ============================ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-body); font-size: .88rem; font-weight: 600;
  padding: .72rem 1.25rem;
  border: 1.5px solid var(--tinta); background: var(--tinta); color: var(--papel);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--ocre); border-color: var(--ocre); color: #F4F6F2; }
.btn--ghost { background: transparent; color: var(--tinta); }
.btn--ghost:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ============================ SECCIONES ============================ */
/* Cada section va en su propio .wrap, así que :last-of-type calzaría con
   todas. El respiro final se cuelga de main, no de la última sección. */
section { padding-top: var(--s6); }
main { padding-bottom: var(--s7); }

.sec-head {
  display: flex; align-items: baseline; gap: var(--s3);
  border-top: 1.5px solid var(--tinta);
  padding-top: var(--s2);
  margin-bottom: var(--s4);
}
.sec-head .num {
  font-family: var(--ff-data); font-size: .7rem; letter-spacing: .1em;
  color: var(--ocre); flex: none; padding-top: .35rem;
}
.sec-head h2 { font-size: clamp(1.35rem, 3.2vw, 1.85rem); }

/* La línea de latitud: regla ocre de borde a borde, nunca centrada. */
.latitud { border: 0; border-top: 2px solid var(--ocre); opacity: .55; margin: 0; }

/* ============================ PORTADA ============================ */
.hero { padding: var(--s6) 0 var(--s3); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(var(--papel-rgb), 0) 35%, rgba(var(--papel-rgb), 1) 100%),
    repeating-linear-gradient(to right,  var(--hairline-2) 0 1px, transparent 1px 3.2rem),
    repeating-linear-gradient(to bottom, var(--hairline-2) 0 1px, transparent 1px 3.2rem);
}
.hero h1 { font-size: clamp(2rem, 6.2vw, 3.4rem); max-width: 18ch; }
.hero .lede { font-size: clamp(1.05rem, 2.4vw, 1.22rem); }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  font-family: var(--ff-data); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pizarra);
}

/* ============================ BIFURCACIÓN ============================ */
.fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s3); }
.fork-card {
  border: 1.5px solid var(--tinta); background: var(--panel);
  padding: var(--s4); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: var(--s2);
  transition: background .15s ease, transform .15s ease;
}
.fork-card:hover { background: var(--papel-alt); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .fork-card:hover { transform: none; } }
.fork-card .quien { font-family: var(--ff-data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); }
.fork-card h2 { font-size: 1.35rem; }
.fork-card p { font-size: .92rem; color: var(--pizarra); max-width: none; }
.fork-card .ir { font-size: .82rem; font-weight: 600; color: var(--ocre); margin-top: auto; padding-top: var(--s2); }

/* ============================ TARJETAS / GRILLAS ============================ */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s3); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--s3); }

.card {
  border: 1px solid var(--hairline); background: var(--panel);
  padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2);
}
.card h3, .card h4 { font-size: 1.02rem; }
.card p { font-size: .9rem; color: var(--pizarra); max-width: none; }

/* Tarjeta de servicio, con letra de orden en ocre. */
.svc { display: flex; gap: var(--s3); align-items: flex-start; }
.svc .letra {
  font-family: var(--ff-data); font-size: .78rem;
  color: var(--ocre); border: 1px solid var(--ocre);
  width: 1.85rem; height: 1.85rem; flex: none;
  display: grid; place-items: center; margin-top: .12rem;
}
.svc h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.svc p { font-size: .92rem; color: var(--pizarra); max-width: 54ch; }
.opcional {
  font-family: var(--ff-data); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pizarra);
  border: 1px solid var(--hairline); padding: .1rem .4rem;
  margin-left: .5rem; vertical-align: .14em; white-space: nowrap;
}

/* Cifra grande sobre etiqueta — bloques de alcance. */
.kpi { display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid var(--hairline); padding-top: var(--s2); }
.kpi .rot { font-family: var(--ff-data); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pizarra); }
.kpi .cifra { font-family: var(--ff-data); font-size: 1.9rem; line-height: 1.1; color: var(--ocre); font-variant-numeric: tabular-nums; }
.kpi p { font-size: .84rem; color: var(--pizarra); max-width: none; }

/* Bloque de nota — un aparte sobrio, sin color de dato. */
.nota {
  border-left: 2px solid var(--ocre);
  padding: var(--s2) 0 var(--s2) var(--s3);
  font-size: .92rem; color: var(--pizarra);
}

/* ============================ MÁRGENES DEL SUR ============================
   Dos bandas fijas en los costados, fuera de la columna de texto. Son frames
   del mismo atardecer en el río de Valdivia, tomados por Alejandro: al ser el
   mismo lugar, la página no queda entre dos fotos distintas sino dentro de un
   solo paisaje. La máscara las desvanece antes de llegar al contenido — la
   idea es que se intuya un paisaje detrás del documento, no que haya una foto
   en la página.

   El encuadre se ajustó midiendo los estratos de cada toma sobre pruebas
   renderizadas, no a ojo: entra una franja de cielo, el cerro, la arboleda,
   el junquillo —que es el estrato con más textura y por eso lleva el peso—
   y el agua en torno a un tercio. Ni el agua ni el cielo pueden dominar: el
   agua deja la banda monótona y el cielo, sobre papel claro a esta opacidad,
   queda a seis niveles del fondo, o sea invisible. Así rinde unos cuarenta.
   La saturación va cortada para que el azul del agua caiga cerca de la
   pizarra y el junquillo cerca del ocre, sin sumar colores nuevos.

   Solo aparecen cuando de verdad sobra margen. Bajo 78rem no hay costados
   que llenar y el texto quedaría encima de la imagen, que es justo lo que
   se quiere evitar. */
@media (min-width: 78rem) {
  body::before, body::after {
    content: "";
    position: fixed;
    top: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    /* El ancho llega justo hasta el margen y se detiene bastante antes de que
       empiece el texto — .wrap reserva 1,8rem de relleno interno. Así no hay
       ni un píxel de imagen bajo la lectura, que es la condición de todo esto. */
    width: calc((100vw - var(--maxw)) / 2 + .5rem);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .26;
    filter: saturate(.5) contrast(.92);
  }
  /* Las dos bandas son frames del mismo atardecer en el río, tomados por
     Alejandro en Valdivia. Al ser el mismo lugar, la página no queda entre
     dos fotos distintas: queda dentro de un solo paisaje. El bosque de banco
     salió de acá justamente por eso — mezclarlo rompía la sintonía. */
  body::before {
    left: 0;
    background-image: url("fotos/rio-poniente.jpg");
    -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  }
  body::after {
    right: 0;
    background-image: url("fotos/rio-oriente.jpg");
    -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  }

  /* En oscuro la misma opacidad se vuelve una mancha clara: baja el brillo
     para que el bosque se hunda en el fondo en vez de flotar sobre él. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::before,
    :root:not([data-theme="light"]) body::after {
      opacity: .34; filter: saturate(.45) contrast(.9) brightness(.6);
    }
  }
  :root[data-theme="dark"] body::before,
  :root[data-theme="dark"] body::after {
    opacity: .34; filter: saturate(.45) contrast(.9) brightness(.6);
  }
}

/* ============================ FOTOGRAFÍA ============================
   El manual prohíbe poner el lockup directo sobre una imagen, así que la
   fotografía funciona como banda autónoma: nunca lleva texto encima.
   El tratamiento baja saturación y contraste para que el ámbar de la
   cerveza no compita con el ocre, que es el único acento de la marca. */
.foto {
  margin: 0;
  overflow: hidden;
  background: var(--papel-alt);
  border: 1px solid var(--hairline);
}
.foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foto img { filter: saturate(.72) contrast(1.02) brightness(.82); }
}
:root[data-theme="dark"] .foto img { filter: saturate(.72) contrast(1.02) brightness(.82); }

/* Banda de tres fotos a ancho completo, separadas por el papel del fondo.
   En móvil pasa a dos columnas y la tercera ocupa el ancho: tres fotos de
   375 px de ancho no muestran nada. */
.tira {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
  margin-top: var(--s6);
}
.tira--duo { grid-template-columns: repeat(2, 1fr); }

/* Banda panorámica de una sola imagen, a ancho completo. La proporción sigue
   al archivo para no recortarlo dos veces. */
.panorama { margin-top: var(--s6); border-block: 1px solid var(--hairline); }
/* 16:9 exacto, sin tope de altura. La escena es vertical —nubes, cerro,
   arboleda, velero, agua— y cualquier recorte en alto se come justamente el
   velero y el agua, que están abajo. Como la proporción de la caja calza con
   la del archivo, el object-fit no recorta nada: se ve la foto completa. */
.panorama .foto {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.tira .foto { border: 0; aspect-ratio: 4 / 3; }
@media (max-width: 44rem) {
  .tira { grid-template-columns: repeat(2, 1fr); }
  /* Con tres fotos, la última pasa a ancho completo y se apaisa; con dos,
     la regla no aplica porque :nth-child(odd):last-child no se cumple. */
  .tira:not(.tira--duo) .foto:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
/* En una columna las tres fotos quedan una sobre otra, así que van todas a
   la misma proporción: la regla del último hijo de arriba tiene más
   especificidad y hay que anularla explícitamente. */
@media (max-width: 30rem) {
  .tira, .tira--duo { grid-template-columns: 1fr; }
  .tira .foto,
  .tira:not(.tira--duo) .foto:last-child { aspect-ratio: 16 / 9; }
}

/* Foto de acompañamiento dentro de una grilla de dos columnas. */
.foto--retrato { aspect-ratio: 4 / 5; }
.foto--apaisada { aspect-ratio: 3 / 2; }

.foto figcaption {
  font-family: var(--ff-data); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pizarra);
  padding: .5rem .1rem 0;
}

/* ============================ TABLA ============================ */
/* Sin min-width la tabla de dos columnas cabe en un teléfono sin scroll
   lateral. Solo la de tres columnas lo necesita, y lo pide con .ancha. */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.ancha { min-width: 32rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th {
  font-family: var(--ff-data); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pizarra); font-weight: 400;
  border-bottom: 1.5px solid var(--tinta);
}
td.num { font-family: var(--ff-data); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================ FORMULARIO ============================ */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s2) var(--s3); }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-family: var(--ff-data); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pizarra);
}
.campo input, .campo textarea, .campo select {
  font-family: var(--ff-body); font-size: .95rem; color: var(--tinta);
  background: var(--panel); border: 1px solid var(--hairline);
  padding: .6rem .7rem; border-radius: 0; width: 100%;
}
.campo textarea { resize: vertical; min-height: 6.5rem; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--ocre); }
.form-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.form-pie p { font-size: .8rem; color: var(--pizarra); max-width: 40ch; }

/* ============================ PIE ============================ */
.pie { border-top: 1.5px solid var(--tinta); background: var(--panel); padding: var(--s5) 0 var(--s4); }
.pie-in { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.pie-col { display: flex; flex-direction: column; gap: var(--s1); font-size: .86rem; color: var(--pizarra); }
.pie-col a { color: var(--pizarra); text-decoration: none; }
.pie-col a:hover { color: var(--ocre); }
.pie-col .rot { font-family: var(--ff-data); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pizarra); margin-bottom: .3rem; }
.pie-fin {
  margin-top: var(--s4); padding-top: var(--s2);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  font-family: var(--ff-data); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pizarra);
}

@media (max-width: 34rem) {
  .wrap, .nav-in { padding-left: var(--s3); padding-right: var(--s3); }
  section { padding-top: var(--s5); }
  .nav-links { gap: var(--s2); }
}

@media print {
  .nav, .btn-row, .form { display: none; }
  body::before, body::after { display: none; }
}