/* LG Industrias · estilos de la web (landing de empresas, /lihuel y 404).
   Estilo decidido por el fundador (2026-10-07): siempre sutil, tranquilo. Línea fina, mucho aire,
   Azul Plano y un solo acento: Cobre. Montserrat local (recortada a castellano). Cero llamadas a terceros. */

@font-face { font-family: "LG Montserrat"; src: url("fuentes/montserrat-300.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "LG Montserrat"; src: url("fuentes/montserrat-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LG Montserrat"; src: url("fuentes/montserrat-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --azul: #1B2A41;
  --cobre: #A8672F;          /* líneas, puntos y detalles */
  --cobre-texto: #93582A;    /* el mismo cobre, apenas más oscuro, para texto chico (contraste AA) */
  --texto: #3B4657;
  --suave: #626A77;
  --tenue: #A4AAB3;
  --linea: #DEDDDA;
  --linea-fuerte: #C9CDD3;
  --fondo: #FBFAF7;
  --fondo-2: #F4F2ED;
  --blanco: #FFFFFF;

  --ancho: 1160px;
  --gutter: clamp(20px, 5vw, 56px);
  --aire: clamp(88px, 11vw, 152px);
  --t-lento: 900ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "LG Montserrat", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 17px; } }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
h4 { font-weight: 300; color: var(--azul); }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(168, 103, 47, .18); color: var(--azul); }

:focus-visible { outline: 1.5px solid var(--cobre); outline-offset: 4px; border-radius: 2px; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--azul); color: var(--blanco); padding: 10px 16px; font-size: 14px; text-decoration: none;
}
.saltar:focus { top: 12px; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------- tipografía ---------------- */
h1, h2, h3 { font-weight: 300; color: var(--azul); letter-spacing: -0.012em; }
h1 { font-size: clamp(34px, 6.2vw, 64px); line-height: 1.1; }
h2 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.18; }
h3 { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; }

.rotulo {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--suave); margin-bottom: 26px;
}
.rotulo::before { content: ""; width: 28px; border-top: 1px solid var(--cobre); flex: none; }

.bajada { margin-top: 24px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--texto); max-width: 34em; }
.chico { font-size: 14px; color: var(--suave); line-height: 1.6; }
.cobre { color: var(--cobre-texto); }
/* Un solo rótulo en mayúscula (.rotulo). Lo demás, en minúscula y gris: más propio, menos plantilla. */
.mayus { font-size: 14px; font-weight: 400; color: var(--suave); line-height: 1.6; }
.dato { font-variant-numeric: tabular-nums lining-nums; }

/* ---------------- encabezado ---------------- */
.encabezado {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 250, 247, .9);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}
.encabezado.con-borde { border-bottom-color: var(--linea); }
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.marca { display: block; line-height: 0; text-decoration: none; }
.marca img { width: 200px; height: auto; }
.nav { display: none; gap: 32px; font-size: 14px; }
.nav a { text-decoration: none; color: var(--texto); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .3s ease, color .3s ease; }
.nav a:hover { color: var(--azul); border-bottom-color: var(--cobre); }
@media (min-width: 1040px) { .nav { display: flex; } }

/* ---------------- botones ---------------- */
.boton {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--azul); border-radius: 999px;
  background: var(--azul); color: var(--blanco);
  font-size: 15px; font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.boton:hover { background: #26395A; border-color: #26395A; }
.boton .flecha { transition: transform .35s var(--curva); }
.boton:hover .flecha { transform: translateX(3px); }
.boton.claro { background: transparent; color: var(--azul); border-color: var(--linea-fuerte); }
.boton.claro:hover { border-color: var(--azul); background: transparent; }
.boton.chico { min-height: 40px; padding: 0 16px; font-size: 13.5px; gap: 0; }
/* Celular: el llamado principal se lee completo ("Charla sin cargo"); se achica apenas el logo. */
@media (max-width: 480px) {
  .encabezado .contenedor { gap: 12px; height: 64px; }
  .marca img { width: 142px; }
  .boton.chico { padding: 0 13px; font-size: 13px; }
  .rotulo { letter-spacing: .18em; gap: 12px; }
  .rotulo::before { width: 22px; }
}

.enlace {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--azul); text-decoration: none; font-weight: 400;
  border-bottom: 1px solid var(--linea-fuerte); padding-bottom: 2px;
  transition: border-color .3s ease;
}
.enlace:hover { border-bottom-color: var(--cobre); }
.enlace .ext { font-size: .8em; color: var(--cobre-texto); }

/* ---------------- secciones ---------------- */
.seccion { padding: var(--aire) 0; border-top: 1px solid var(--linea); }
.seccion.sin-borde { border-top: 0; }
.seccion.tono { background: var(--fondo-2); border-top-color: transparent; }

.dos { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .dos { grid-template-columns: 4fr 7fr; gap: 64px 8%; align-items: start; }
  .dos > .cabeza { position: sticky; top: 120px; }
}
.cabeza .seguir { margin-top: 32px; font-size: 15px; }

/* ---------------- portada ---------------- */
.portada { padding: clamp(56px, 10vw, 128px) 0 clamp(72px, 10vw, 144px); }
.portada .contenedor { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .portada .contenedor { grid-template-columns: 6fr 5fr; gap: 6%; } }
.portada h1 .linea { display: block; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.portada .pie-portada { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linea); max-width: 30em; }
.orden { width: 100%; max-width: 520px; justify-self: center; }
/* Estado final por defecto (sin JS se ve ordenado). Con JS arranca disperso y se acomoda (cx/cy en CSS). */
.orden .p { fill: var(--azul); stroke: var(--azul); stroke-width: 1.6; transition: cx 2s var(--curva), cy 2s var(--curva), fill 1.4s ease .5s, stroke 1.4s ease .5s; }
.orden .grilla { stroke-dasharray: 1400; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--curva) .5s; }
.orden .acento { transition: opacity 1s ease 2s; }
.js .orden:not(.listo) .p { cx: var(--sx); cy: var(--sy); fill: transparent; stroke: var(--tenue); }
.js .orden:not(.listo) .grilla { stroke-dashoffset: 1400; }
.js .orden:not(.listo) .acento { opacity: 0; }

/* ---------------- ¿te suena? ---------------- */
.filas li {
  padding: 20px 0; border-top: 1px solid var(--linea);
  font-size: clamp(18px, 1.9vw, 21px); font-weight: 300; color: var(--azul); line-height: 1.45;
  display: grid; grid-template-columns: 44px 1fr; align-items: baseline;
}
.filas li:last-child { border-bottom: 1px solid var(--linea); }
.filas .n { font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--suave); }
.remate { margin-top: 44px; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; color: var(--texto); }
.remate b { font-weight: 500; color: var(--azul); }

/* ---------------- todo conectado (diagrama) ---------------- */
.diagrama-caja { display: grid; gap: 36px; }
@media (min-width: 960px) { .diagrama-caja { grid-template-columns: 7fr 5fr; gap: 6%; align-items: center; } }
.diagrama { width: 100%; max-width: 600px; margin: 0 auto; overflow: visible; }
.diagrama .eje, .diagrama .anillo-txt, .diagrama .nodo, .diagrama .punto { transition: stroke .5s ease, fill .5s ease, opacity .5s ease; }
.diagrama .eje { stroke: var(--azul); stroke-width: 1.6; }
.diagrama .nodo { cursor: pointer; }
.diagrama .nodo circle.aro { fill: var(--fondo); stroke: var(--azul); stroke-width: 1.8; transition: fill .5s ease, stroke .5s ease, r .4s ease; }
.diagrama .nodo circle.centro-nodo { fill: var(--azul); transition: fill .5s ease; }
.diagrama .nodo text { fill: var(--azul); font-family: "LG Montserrat", sans-serif; font-weight: 500; font-size: 25px; letter-spacing: 4px;
  stroke: var(--fondo-2); stroke-width: 14px; stroke-linejoin: round; paint-order: stroke; }
.diagrama .anillo-txt { fill: var(--texto); font-family: "LG Montserrat", sans-serif; font-weight: 400; font-size: 30px; }
.diagrama .punto { fill: var(--azul); }
.diagrama .tu { fill: var(--azul); font-family: "LG Montserrat", sans-serif; font-weight: 300; font-size: 36px; }
.diagrama.elegido .eje { stroke: var(--linea-fuerte); }
.diagrama.elegido .anillo-txt { fill: var(--tenue); }
.diagrama.elegido .nodo { opacity: .45; }
.diagrama.elegido .nodo.activo { opacity: 1; }
.diagrama.elegido .nodo.activo circle.aro { fill: var(--cobre); stroke: var(--cobre); }
.diagrama.elegido .nodo.activo circle.centro-nodo { fill: var(--fondo); }
.diagrama.elegido .eje.activo { stroke: var(--cobre); }
.diagrama.elegido .anillo-txt.activo { fill: var(--azul); font-weight: 500; }
.diagrama .flujo { stroke: var(--cobre); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; opacity: 0; }
.diagrama.elegido .flujo.activo { opacity: 1; animation: fluir 1.6s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -28; } }

.quienes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.quienes button {
  min-height: 44px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--linea-fuerte); color: var(--azul);
  font-size: 14px; font-weight: 400; transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.quienes button:hover { border-color: var(--azul); }
.quienes button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.explica { margin-top: 28px; min-height: 9.5em; padding-top: 22px; border-top: 1px solid var(--linea); }
.explica .quien-es { font-size: 15px; font-weight: 500; color: var(--cobre-texto); }
.explica p.que { margin-top: 10px; font-size: clamp(18px, 1.8vw, 20px); font-weight: 300; color: var(--azul); line-height: 1.5; }
.explica p.areas { margin-top: 12px; font-size: 14px; color: var(--suave); }

/* ---------------- una app para cada uno ---------------- */
.apps { display: grid; gap: 0; margin-top: 56px; border-top: 1px solid var(--linea); }
@media (min-width: 480px) { .apps { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (min-width: 760px) { .apps { column-gap: 40px; } }
@media (min-width: 1040px) { .apps { grid-template-columns: repeat(3, 1fr); column-gap: 48px; } }
.apps li { padding: 30px 0 32px; border-bottom: 1px solid var(--linea); }
.apps svg { width: 36px; height: 56px; margin: 0 0 18px -2px; }
.apps .tit { font-size: 17px; font-weight: 500; color: var(--azul); }
.apps .desc { margin-top: 6px; font-size: 15px; line-height: 1.6; }
.apps li.mas { display: flex; flex-direction: column; justify-content: center; }
.apps li.mas p { font-size: 15px; color: var(--suave); }

/* ---------------- pasos ---------------- */
.pasos { position: relative; }
.pasos::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 30px; border-left: 1px solid var(--linea-fuerte); }
.pasos li { position: relative; padding: 0 0 40px 48px; }
.pasos li:last-child { padding-bottom: 0; }
.pasos li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--fondo); border: 1.2px solid var(--azul);
}
.pasos li.primero::before { background: var(--cobre); border-color: var(--cobre); }
.pasos .num { font-size: 11.5px; font-weight: 500; letter-spacing: .22em; color: var(--suave); }
.pasos .tit { margin-top: 2px; font-size: clamp(19px, 2vw, 22px); font-weight: 300; color: var(--azul); line-height: 1.35; }
.pasos .desc { margin-top: 8px; font-size: 15.5px; max-width: 32em; }
.pasos .plan { margin-top: 16px; display: grid; gap: 0; max-width: 34em; border-top: 1px solid var(--linea); }
.pasos .plan li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--linea); font-size: 15px; }
.pasos .plan li::before { width: 6px; height: 6px; top: 21px; left: 2px; border: 0; background: var(--cobre); }
.nota-legal { margin-top: 48px; padding: 22px 0 0; border-top: 1px solid var(--linea); font-size: 14px; color: var(--suave); max-width: 38em; }

/* ---------------- lo que te llevás + compromisos ---------------- */
.listas { display: grid; gap: 56px; margin-top: 64px; }
@media (min-width: 900px) { .listas { grid-template-columns: 1fr 1fr; gap: 8%; } }
.lista h3 { font-size: 19px; font-weight: 300; color: var(--azul); margin-bottom: 18px; }
.lista li { padding: 18px 0 19px; border-top: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 1px solid var(--linea); }
.lista .tit { font-weight: 500; color: var(--azul); font-size: 16.5px; }
.lista .desc { margin-top: 3px; font-size: 15px; }

/* ---------------- lo que ya hicimos ---------------- */
.obras { display: grid; margin-top: 64px; border-top: 1px solid var(--linea); }
@media (min-width: 860px) { .obras { grid-template-columns: 1fr 1fr; column-gap: 8%; } }
.obra { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 40px 0 42px; border-bottom: 1px solid var(--linea); }
.obra svg { width: 52px; height: 52px; }
.obra .nombre { font-size: 24px; font-weight: 300; color: var(--azul); line-height: 1.2; }
.obra .mayus { margin-top: 4px; }
.obra .desc { margin-top: 14px; font-size: 15.5px; }
.obra .vinculos { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; }
.obra .privado { margin-top: 18px; font-size: 14px; color: var(--suave); }

/* ---------------- hacia dónde vamos ---------------- */
.vision { width: 100%; max-width: 760px; margin: 56px auto 0; overflow: visible; }
.vision text { font-family: "LG Montserrat", sans-serif; }
.vision .rotulos text { stroke: var(--fondo-2); stroke-width: 14px; stroke-linejoin: round; paint-order: stroke; }
.vision .lleno { stroke: var(--azul); stroke-width: 1.6; }
.vision .camino { stroke: var(--tenue); stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round; }
.vision .camino.anda { animation: fluir 2.4s linear infinite; }
.vision .obra-t { font-size: 27px; font-weight: 300; fill: var(--azul); }
.leyenda { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; margin: 28px auto 0; font-size: 14px; line-height: 1.55; color: var(--suave); }
.leyenda span { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; }
.leyenda i { display: inline-block; width: 30px; border-top: 1.6px solid var(--azul); }
.leyenda i.punto-lleno { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--azul); justify-self: center; }
.leyenda i.p { border-top: 2px dotted var(--tenue); }
.cita {
  margin-top: 64px; padding: 40px 0 0; border-top: 1px solid var(--linea); max-width: 44em;
}
.cita blockquote p { font-size: clamp(21px, 2.4vw, 27px); font-weight: 300; line-height: 1.45; color: var(--azul); }
.cita figcaption { margin-top: 16px; }
.verdad { margin-top: 40px; max-width: 42em; font-size: 15.5px; }
.verdad b { font-weight: 500; color: var(--azul); }
.metas { margin-top: 40px; display: grid; gap: 0; border-top: 1px solid var(--linea); max-width: 44em; }
.metas li { padding: 16px 0; border-bottom: 1px solid var(--linea); font-weight: 300; color: var(--azul); font-size: 18px; }

/* ---------------- valores ---------------- */
.frase-grande { max-width: 22em; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.2; }
.siempre { margin-top: 32px; font-size: 17px; font-weight: 400; color: var(--cobre-texto); }
/* "Cómo somos": un momento solo, la frase centrada y mucho aire. */
.momento { text-align: center; padding-top: calc(var(--aire) * 1.15); padding-bottom: calc(var(--aire) * 1.15); }
.momento .rotulo { justify-content: center; }
.momento .frase-grande { margin: 0 auto; max-width: 17em; }
.momento .bajada { margin: 28px auto 0; max-width: 30em; }
.valores { display: grid; margin-top: 64px; border-top: 1px solid var(--linea); }
@media (min-width: 720px) { .valores { grid-template-columns: 1fr 1fr; column-gap: 8%; } }
@media (min-width: 1040px) { .valores { grid-template-columns: repeat(4, 1fr); column-gap: 40px; } }
.valores li { padding: 26px 0 28px; border-bottom: 1px solid var(--linea); }
.valores .tit { font-weight: 500; color: var(--azul); }
.valores .desc { margin-top: 6px; font-size: 15px; }

/* ---------------- quién está detrás ---------------- */
.detras { display: grid; gap: 48px; align-items: center; }
@media (min-width: 860px) { .detras { grid-template-columns: 5fr 7fr; gap: 8%; } }
.retrato { position: relative; max-width: 440px; }
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.nombre-f { font-size: clamp(30px, 3.4vw, 40px); font-weight: 300; color: var(--azul); line-height: 1.15; }
.cargo { margin-top: 10px; font-size: 16px; font-weight: 400; color: var(--cobre-texto); }
.detras .prensa-nota { margin-top: 14px; font-size: 15px; color: var(--suave); }
.bio { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--linea); max-width: 36em; }
.bio p + p { margin-top: 14px; }
.bio b { font-weight: 500; color: var(--azul); }
.detras .boton { margin-top: 36px; }

/* ---------------- presentación ---------------- */
.llevala { display: grid; gap: 48px; align-items: center; }
@media (min-width: 860px) { .llevala { grid-template-columns: 7fr 5fr; gap: 8%; } }
/* Tres páginas reales de la presentación, planas, con filete fino y sin sombra. */
.paginas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 480px; margin: 0 auto; align-items: start; }
.paginas img { width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--linea); background: var(--fondo); }
.paginas img:nth-child(2) { margin-top: 28px; }
.paginas img:nth-child(3) { margin-top: 56px; }
.llevala .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ---------------- preguntas ---------------- */
.preguntas { border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 24px 0; font-size: clamp(17px, 1.7vw, 19px); font-weight: 400; color: var(--azul); line-height: 1.4;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .signo { position: relative; flex: none; width: 14px; height: 14px; }
.preguntas summary .signo::before, .preguntas summary .signo::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; border-top: 1.2px solid var(--cobre); transition: transform .4s var(--curva);
}
.preguntas summary .signo::after { transform: rotate(90deg); }
.preguntas details[open] summary .signo::after { transform: rotate(0deg); }
.preguntas .resp { padding: 0 0 28px; max-width: 40em; font-size: 15.5px; }
.preguntas .resp p + p { margin-top: 10px; }

/* ---------------- contacto ---------------- */
.contacto h2 .cobre { display: block; }
.contacto-grid { display: grid; gap: 56px; margin-top: 48px; }
@media (min-width: 900px) { .contacto-grid { grid-template-columns: 7fr 5fr; gap: 8%; align-items: start; } }
.vias { border-top: 1px solid var(--linea); max-width: 640px; }
.despues { border-top: 1px solid var(--linea); }
.despues li { display: grid; grid-template-columns: 32px 1fr; padding: 16px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; color: var(--azul); }
.despues .n { font-size: 12px; font-weight: 500; color: var(--cobre-texto); padding-top: 3px; }
.vias li { border-bottom: 1px solid var(--linea); }
.vias a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; padding: 24px 0; text-decoration: none; }
.vias .et { font-size: 14px; color: var(--suave); }
.contacto > .contenedor > .vias { margin-top: 48px; }
.vias .val { font-size: clamp(19px, 2.2vw, 24px); font-weight: 300; color: var(--azul); transition: color .3s ease; word-break: break-word; }
.vias a:hover .val { color: var(--cobre-texto); }
.firma { margin-top: 28px; font-size: 15px; }
.firma b { font-weight: 500; color: var(--azul); }

/* ---------------- pie ---------------- */
.pie { padding: clamp(72px, 9vw, 120px) 0 40px; border-top: 1px solid var(--linea); }
.pie .logo-grande { width: min(560px, 100%); }
.pie .abajo { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 13.5px; color: var(--suave); }
.pie .abajo a { color: var(--suave); text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); }
.pie .abajo a:hover { color: var(--azul); border-bottom-color: var(--cobre); }
.pie .pez-nota { margin-top: 18px; font-size: 13px; color: var(--tenue); }

/* ---------------- aparición suave ---------------- */
.js .aparece { opacity: 0; transform: translateY(14px); transition: opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva); }
.js .aparece.visto { opacity: 1; transform: none; }

/* Diagramas en pantallas chicas: letra un poco más grande dentro del dibujo, para que se lea. */
/* (a 360 px ninguna letra de los dibujos baja de unos 12-13 px) */
@media (max-width: 560px) {
  .diagrama .nodo text { font-size: 37px; letter-spacing: 1.5px; }
  .diagrama .anillo-txt { font-size: 36px; }
  .diagrama .tu { font-size: 42px; }
  .vision .rotulos text { font-size: 33px; letter-spacing: .5px; }
  .vision .obra-t { font-size: 34px; }
}

/* =================== página personal (/lihuel) =================== */
.perfil-portada { padding: clamp(40px, 7vw, 96px) 0 clamp(80px, 10vw, 140px); }
.perfil-portada .contenedor { display: grid; gap: 48px; align-items: end; }
@media (min-width: 900px) { .perfil-portada .contenedor { grid-template-columns: 5fr 6fr; gap: 7%; align-items: center; } }
.foto-grande { position: relative; max-width: 480px; }
.foto-grande img { width: 100%; aspect-ratio: 720 / 1020; object-fit: cover; }
.foto-grande figcaption { margin-top: 14px; font-size: 13px; color: var(--suave); }
.frase-fe { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.14; }
.frase-fe-2 { margin-top: 28px; font-size: clamp(19px, 2vw, 23px); font-weight: 300; color: var(--azul); line-height: 1.5; max-width: 26em; }
.quien-linea { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linea); }

.texto-yo p { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.75; max-width: 34em; }
.texto-yo p + p { margin-top: 20px; }
.frases { margin-top: 56px; border-top: 1px solid var(--linea); }
.frases li { padding: 26px 0; border-bottom: 1px solid var(--linea); }
.frases p { font-size: clamp(19px, 2vw, 23px); font-weight: 300; color: var(--azul); line-height: 1.45; }
.frases .de { margin-top: 10px; font-size: 13px; color: var(--suave); }

.mapa { margin-top: 72px; display: grid; gap: 72px; }
.grupo-tit { display: grid; gap: 8px; margin-bottom: 8px; }
@media (min-width: 900px) { .grupo { display: grid; grid-template-columns: 3fr 8fr; gap: 6%; } .grupo-tit { position: sticky; top: 120px; align-self: start; } }
.grupo-tit h3 { font-size: 24px; font-weight: 300; }
.grupo-tit p { font-size: 14px; color: var(--suave); }
.creaciones { border-top: 1px solid var(--linea); }
.creacion { padding: 34px 0 36px; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.creacion svg { width: 44px; height: 44px; }
.creacion .nombre { font-size: 22px; font-weight: 300; color: var(--azul); line-height: 1.25; }
.creacion .estado { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--suave); }
.creacion .estado::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; background: var(--azul); vertical-align: 1px; }
.creacion .estado.camino::before { background: transparent; border: 1px solid var(--tenue); }
.creacion .estado.vivo::before { background: var(--cobre); }
.creacion .desc { margin-top: 12px; font-size: 15.5px; max-width: 36em; }
.creacion .desc + .desc { margin-top: 10px; }
.creacion .vinculos { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; }
.creacion blockquote { margin-top: 16px; padding-left: 18px; border-left: 1px solid var(--cobre); font-weight: 300; color: var(--azul); font-size: 18px; }

.tiempo { margin-top: 64px; position: relative; display: grid; gap: 0; }
.tiempo::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px solid var(--linea-fuerte); display: none; }
.tiempo li { position: relative; padding: 0 0 26px 30px; border-left: 1px solid var(--linea-fuerte); margin-left: 6px; }
.tiempo li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--fondo); border: 1.2px solid var(--azul); }
.tiempo li.hoy::before { background: var(--cobre); border-color: var(--cobre); }
.tiempo .anio { font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--suave); }
.tiempo .que { margin-top: 4px; font-size: 15.5px; color: var(--azul); }
@media (min-width: 900px) {
  .tiempo { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .tiempo::before { display: block; }
  .tiempo li { border-left: 0; margin-left: 0; padding: 30px 0 0 0; }
  .tiempo li::before { left: 0; top: 0; }
}

.oasiss-fotos { margin-top: 56px; display: grid; gap: 16px; }
.oasiss-fotos figure { margin: 0; overflow: hidden; background: var(--fondo-2); }
.oasiss-fotos img { width: 100%; height: 100%; object-fit: cover; }
.oasiss-fotos .ancha img { aspect-ratio: 2000 / 783; }
@media (max-width: 560px) { .oasiss-fotos .ancha img { aspect-ratio: 4 / 3; object-position: 47.5% 50%; } }
.oasiss-fotos .par { display: grid; gap: 16px; grid-template-columns: 1fr; }
.oasiss-fotos .par .alta img { aspect-ratio: 667 / 1000; }
.oasiss-fotos .par .tapas img { aspect-ratio: 1400 / 915; }
@media (min-width: 720px) {
  .oasiss-fotos .par { grid-template-columns: 5fr 7fr; align-items: stretch; }
  .oasiss-fotos .par .tapas img, .oasiss-fotos .par .alta img { aspect-ratio: auto; height: 100%; }
  .oasiss-fotos .par figure { height: clamp(320px, 38vw, 520px); }
}
.oasiss-fotos figcaption { font-size: 13px; color: var(--suave); padding: 10px 0 0; background: var(--fondo); }
.oasiss-datos { margin-top: 56px; display: grid; gap: 48px; }
@media (min-width: 900px) { .oasiss-datos { grid-template-columns: 1fr 1fr; gap: 8%; } }
.ficha { border-top: 1px solid var(--linea); }
.ficha div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.ficha dt { color: var(--suave); }
.ficha dd { color: var(--azul); }
.prensa { border-top: 1px solid var(--linea); }
.prensa li { border-bottom: 1px solid var(--linea); }
.prensa a { display: block; padding: 16px 0 17px; text-decoration: none; }
.prensa .medio { font-size: 13.5px; color: var(--suave); }
.prensa .titulo { display: block; margin-top: 4px; color: var(--azul); font-size: 15.5px; line-height: 1.5; transition: color .3s ease; }
.prensa a:hover .titulo { color: var(--cobre-texto); }

.predicas { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .predicas { grid-template-columns: 6fr 5fr; gap: 8%; } }
.predicas .luz { width: 100%; max-width: 360px; justify-self: center; }

.ideas { margin-top: 56px; display: grid; border-top: 1px solid var(--linea); }
@media (min-width: 760px) { .ideas { grid-template-columns: 1fr 1fr; column-gap: 8%; } }
.ideas li { padding: 24px 0 26px; border-bottom: 1px solid var(--linea); }
.ideas .tit { font-weight: 500; color: var(--azul); }
.ideas .desc { margin-top: 6px; font-size: 15px; }

.redes { margin-top: 48px; border-top: 1px solid var(--linea); }
@media (min-width: 760px) { .redes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; } }
.redes li { border-bottom: 1px solid var(--linea); }
.redes a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline; padding: 18px 0; text-decoration: none; }
.redes .cuenta { word-break: break-word; }
.redes .que { font-size: 13px; color: var(--suave); }
.redes .cuenta { color: var(--azul); font-size: 16px; transition: color .3s ease; }
.redes a:hover .cuenta { color: var(--cobre-texto); }
@media (max-width: 480px) { .redes a { flex-direction: column; gap: 2px; } }

/* Teléfonos angostos: el ícono arriba y la ficha más compacta, para que el texto respire. */
@media (max-width: 480px) {
  .obra, .creacion { grid-template-columns: 1fr; gap: 14px; }
  .obra svg, .creacion svg { width: 38px; height: 38px; }
  .ficha div { grid-template-columns: 6.2em 1fr; gap: 12px; }
}

/* =================== 404 =================== */
.no-esta { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 48px var(--gutter); }
.no-esta img { width: 72px; margin: 0 auto 40px; opacity: .9; }
.no-esta h1 { font-size: clamp(28px, 4vw, 38px); }
.no-esta p { margin-top: 18px; color: var(--suave); }
.no-esta .boton { margin-top: 36px; }

/* =================== movimiento reducido =================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparece { opacity: 1; transform: none; }
}

/* =================== impresión =================== */
@media print {
  .encabezado, .saltar, .quienes, .llevala .paginas { display: none; }
  .seccion { padding: 32px 0; }
  .js .aparece { opacity: 1; transform: none; }
}