@charset "UTF-8";
@import url("liquid-glass.css");
/* ============================================================
   marcelomedina.cl — sistema base
   El sello es UNA variable que migra por mundo: --acento.
   Tipografía, grilla, aire y estructura quedan clavados.
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root {
  /* Color: papel hueso + tinta cálida (derivados de las fotos, §7 BRIEF) */
  --papel:       #F3EDE1;
  --papel-hondo: #ECE3D2;
  --tinta:       #28241F;
  --tinta-70:    rgba(40, 36, 31, .72);
  --tinta-45:    rgba(40, 36, 31, .68); /* captions/meta: subido para contraste AA sobre el hueso */
  --linea:       rgba(40, 36, 31, .14);

  /* Acento por defecto = Home (mezcla de los tres mundos) */
  --acento: #615451;

  /* Derivados del acento (recalculan por mundo). Degradan con gracia. */
  --acento-ink:   color-mix(in srgb, var(--acento) 72%, var(--tinta));
  --acento-title: color-mix(in srgb, var(--acento) 58%, var(--tinta));
  --acento-line:  color-mix(in srgb, var(--acento) 42%, var(--linea));
  --acento-wash:  color-mix(in srgb, var(--acento) 6%,  var(--papel));

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --fs-eyebrow: .76rem;
  --fs-body: clamp(1.02rem, 1.4vw + .7rem, 1.18rem);
  --fs-lead: clamp(1.18rem, 1.6vw + .8rem, 1.42rem);
  --fs-h2: clamp(1.6rem, 3vw + .55rem, 2.3rem);
  --fs-h1: clamp(2.1rem, 4.3vw + .6rem, 3.5rem);
  --fs-quote: clamp(1.45rem, 2.6vw + .65rem, 2.15rem);

  /* Ritmo */
  --measure: 38rem;        /* ancho cómodo de lectura */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --paso: clamp(4.5rem, 11vw, 9rem); /* aire entre secciones */
}

/* Mundos — lo único que cambia entre páginas. PALETA OFICIAL (jun-2026). */
.w-home           { --acento: #8A7B6E; } /* mezcla de los tres */
.w-ingenieria     { --acento: #4A6FA8; } /* azul de Prusia */
.w-espiritualidad { --acento: #6F5B9A; } /* púrpura */
.w-arte           { --acento: #BE7044; } /* ocre / terracota */
.w-ingenieria-espiritualidad { --acento: #5A6599; } /* Ing ∩ Esp — índigo limpio */
.w-precision-arte { --acento: #8A7B6E; } /* Ing ∩ Arte — topo (el barro) */
.w-servir-mirada  { --acento: #97718A; } /* Esp ∩ Arte — malva terroso */
/* compat: clases antiguas mapeadas a la paleta nueva */
.w-mirada        { --acento: #BE7044; }
.w-precision-ojo { --acento: #8A7B6E; }
.w-pensar-ver    { --acento: #97718A; }
.w-inteligencia  { --acento: #6F5B9A; }
.w-ia-industria  { --acento: #5A6599; }

/* ---- Reset suave ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acento) 6.5%, var(--papel)) 0%, color-mix(in srgb, var(--acento) 2.2%, var(--papel)) 52%, var(--papel) 100%) fixed,
    var(--papel);
  color: var(--tinta);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--acento-ink, var(--acento)); }

/* ---- Layout ----------------------------------------------- */
.wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.flow > * + * { margin-top: 1.1em; }
.measure { max-width: var(--measure); }

/* Saltar al contenido */
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--tinta); color: var(--papel);
  padding: .6rem 1rem; z-index: 99; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---- Tipografía ------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 1.08; letter-spacing: -.012em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 1.3rem; line-height: 1.2; }
p, li { hyphens: none; }
strong { font-weight: 500; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento-ink, var(--acento));
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 1px;
  background: var(--acento-line, var(--linea));
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--tinta-70); font-weight: 300; }

/* Enlaces de texto con subrayado fino */
.prose a, .link {
  color: var(--acento-ink, var(--acento));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--acento-line, var(--linea));
  transition: text-decoration-color .25s;
}
.prose a:hover, .link:hover { text-decoration-color: currentColor; }

/* ---- Cabecera / navegación -------------------------------- */
.site-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .8rem 1.5rem;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
}
.brand {
  font-family: var(--display); font-weight: 400; font-size: 1.32rem;
  letter-spacing: -.01em; color: var(--tinta); text-decoration: none;
}
.brand:hover { color: var(--acento-ink, var(--acento)); }
.nav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .35rem 1.05rem; }
.nav a {
  font-size: .8rem; letter-spacing: .04em; color: var(--tinta-70);
  text-decoration: none; padding-bottom: .2rem; position: relative; white-space: nowrap;
}
.nav a.nav-cross { font-size: .73rem; color: var(--tinta-45); letter-spacing: .03em; }
.nav a.nav-cross:hover, .nav a.nav-cross[aria-current="page"] { color: var(--tinta); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--acento-ink, var(--acento)); transition: right .3s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--tinta); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

/* ---- Hero (Home) ------------------------------------------ */
.hero { padding-block: clamp(2rem, 6vw, 5rem) var(--paso); }
.hero-grid { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; }
}
.hero h1 { margin-top: 1.2rem; max-width: 16ch; }
.hero .lead { margin-top: 1.6rem; max-width: 34rem; }
.hero-cta { margin-top: 2.2rem; }

.figura {
  position: relative; isolation: isolate;
  background: var(--papel-hondo);
  padding: .55rem;
  border: 1px solid var(--linea);
}
.figura::after { /* filo de acento, susurrado */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px var(--acento-line, transparent);
  mix-blend-mode: multiply; opacity: .8;
}
.figura img { width: 100%; }
.figura figcaption {
  font-size: .8rem; color: var(--tinta-45); letter-spacing: .02em;
  margin-top: .6rem;
}

/* Botón discreto (tipo enlace con filete) */
.boton {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .95rem; letter-spacing: .04em;
  color: var(--tinta); text-decoration: none;
  padding-bottom: .35rem; border-bottom: 1px solid var(--acento-ink, var(--acento));
}
.boton .arr { transition: transform .28s ease; }
.boton:hover .arr { transform: translateX(.35em); }

/* ---- Puentes (intersecciones) ----------------------------- */
.puentes { padding-block: var(--paso); border-top: 1px solid var(--linea); }
.puentes > .eyebrow { margin-bottom: 2.4rem; }
.puente {
  display: grid; gap: .4rem 2rem; align-items: baseline;
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--linea);
  text-decoration: none; color: inherit;
}
.puente:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 48rem) {
  .puente { grid-template-columns: minmax(0, 22rem) 1fr auto; }
}
.puente-par { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; }
.puente-par .cruz { color: var(--acento-ink, var(--acento)); font-style: italic; padding-inline: .15em; }
.puente-desc { color: var(--tinta-70); }
.puente-arr { color: var(--acento-ink, var(--acento)); justify-self: start; transition: transform .28s ease; }
.puente:hover .puente-par { color: var(--acento-ink, var(--acento)); }
.puente:hover .puente-arr { transform: translateX(.4em); }

/* ---- Artículo (pestañas de par) --------------------------- */
.tab-hero { padding-block: clamp(2rem, 5vw, 4rem) var(--paso); }
.tab-hero h1 { margin-top: 1.2rem; max-width: 18ch; color: var(--acento-title); }
.tab-hero .lead { margin-top: 1.6rem; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.2em; }
.prose h2 { margin-top: 2.4em; }

.cita {
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: var(--fs-quote); line-height: 1.28; color: var(--acento-ink, var(--acento));
  max-width: 24ch; margin-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: clamp(1rem, 3vw, 2rem); border-left: 2px solid var(--acento-line, var(--linea));
}

/* ---- Epígrafe: retrato + cita atribuida ------------------- */
.epigrafe { margin-block: clamp(2.6rem, 6vw, 4.2rem); max-width: 27rem; }
.epigrafe picture, .epigrafe img { display: block; }
.epigrafe img {
  width: 100%; height: auto;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  padding: .55rem;
}
.epigrafe blockquote {
  margin: 1.5rem 0 0;
  padding-left: clamp(1rem, 3vw, 1.6rem);
  border-left: 2px solid var(--acento-line, var(--linea));
}
.epigrafe blockquote p {
  margin: 0;
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(1.25rem, 2vw + .5rem, 1.7rem); line-height: 1.3;
  color: var(--acento-ink, var(--acento)); text-wrap: balance;
}
.epigrafe figcaption {
  margin-top: .9rem; padding-left: clamp(1rem, 3vw, 1.6rem);
  font-size: .8rem; letter-spacing: .04em; color: var(--tinta-45);
}
.epigrafe figcaption cite { font-style: normal; }

.textura { margin-block: var(--paso); }
.textura figcaption { font-size: .82rem; color: var(--tinta-45); margin-top: .7rem; max-width: 40rem; }

/* ---- Galería (Mirada) ------------------------------------- */
.galeria { padding-block: var(--paso); columns: 1; column-gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 40rem) { .galeria { columns: 2; } }
@media (min-width: 64rem) { .galeria { columns: 3; } }
.galeria figure { break-inside: avoid; margin-bottom: clamp(1rem, 3vw, 2rem); }
.galeria img { width: 100%; border: 1px solid var(--linea); background: var(--papel-hondo); }
.galeria figcaption { font-size: .8rem; color: var(--tinta-45); margin-top: .5rem; }

/* ---- Pie / contacto --------------------------------------- */
.site-foot {
  padding-block: var(--paso) clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.site-foot .eyebrow { margin-bottom: 1.4rem; }
.foot-lead { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
.foot-contacto { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline; }
.foot-mail {
  font-family: var(--display); font-size: clamp(1.3rem, 3vw, 2rem); color: var(--tinta);
  text-decoration: none; border-bottom: 1px solid var(--acento-ink, var(--acento)); padding-bottom: .15rem;
}
.foot-mail:hover { color: var(--acento-ink, var(--acento)); }
.foot-wa { color: var(--tinta-45); font-size: 1rem; }
.foot-wa em { font-style: normal; color: var(--acento-ink, var(--acento)); }
.foot-meta { margin-top: 2.8rem; font-size: .82rem; color: var(--tinta-45); letter-spacing: .02em; }

/* ---- Marcador de borrador (voz de Marcelo pendiente) ------ */
.borrador { position: relative; }
.borrador::before {
  content: "PROPUESTA — reemplazar";
  display: inline-block; font-family: var(--body); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento-ink, var(--acento));
  border: 1px dashed var(--acento-line, var(--linea));
  border-radius: 2px; padding: .15em .5em; margin-bottom: .9rem;
}

/* ---- Movimiento (mejora progresiva) -----------------------
   Sólo se oculta cuando hay JS: la clase .js la agrega un script
   inline en <head> antes del primer paint. Sin JS, todo visible. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Transición de color entre páginas (View Transitions, cross-document) */
@view-transition { navigation: auto; }

:focus-visible { outline: 2px solid var(--acento-ink, var(--acento)); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
  .boton .arr, .puente-arr { transition: none; }
}

/* ============================================================
   LIQUID GLASS — material (reviste TODAS las páginas)
   Inspirado en el lenguaje Liquid Glass de Apple (jun 2025), pero
   sobre papel hueso cálido + paleta del proyecto: vidrio cálido,
   no glassmorphism oscuro genérico ni Apple-azul. Voz propia.
   ============================================================ */
:root {
  --glass-bg:        rgba(249, 245, 237, 0.40);
  --glass-bg-strong: rgba(249, 245, 237, 0.56);
  --glass-stroke:    rgba(255, 255, 255, 0.55);
  --glass-stroke-lo: rgba(40, 36, 31, 0.10);
  --glass-hi:        rgba(255, 255, 255, 0.7);
  --glass-shadow:    0 14px 40px -16px rgba(40, 36, 31, 0.34);
  --glass-blur:      16px;
  --stage-deep:  #211e2b;
  --stage-deep2: #14121b;
}

/* Nav flotante de vidrio (sticky: refracta el contenido que pasa debajo) */
.site-head {
  position: sticky; top: clamp(.5rem, 1.5vw, 1rem); z-index: 50;
  align-items: center;
  margin-top: clamp(.5rem, 1.5vw, 1rem);
  padding: .6rem clamp(1rem, 2.5vw, 1.4rem);
  border-radius: 22px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* Botón de vidrio (pastilla) */
.boton {
  padding: .72rem 1.3rem; border-radius: 100px;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  color: var(--tinta);
  transition: transform .28s ease, box-shadow .28s ease;
}
.boton:hover { transform: translateY(-2px); }

/* Marco de foto de vidrio */
.figura { border-radius: 18px; padding: .6rem; border: 1px solid var(--glass-stroke);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi); }
.figura::after { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--acento-line, transparent); opacity: .5; }
.figura img { border-radius: 13px; }

/* Tarjetas-puente de vidrio */
.puentes { border-top: none; }
.puente { border: 1px solid var(--glass-stroke); border-radius: 18px;
  margin-bottom: clamp(.8rem, 2vw, 1.1rem);
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 2.1rem);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(11px) saturate(1.45); backdrop-filter: blur(11px) saturate(1.45);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  transition: transform .3s ease, box-shadow .3s ease; }
.puente:last-child { border-bottom: 1px solid var(--glass-stroke); }
.puente:hover { transform: translateY(-3px);
  box-shadow: 0 20px 46px -18px color-mix(in srgb, var(--acento) 55%, rgba(40,36,31,.4)), inset 0 1px 0 var(--glass-hi); }

/* Cita de vidrio */
.cita { border-radius: 16px; border: 1px solid var(--glass-stroke);
  border-left: 3px solid var(--acento-ink, var(--acento));
  padding: clamp(1.4rem, 3.5vw, 2.1rem) clamp(1.6rem, 4vw, 2.6rem);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi); max-width: 30rem; }

/* Galería: marco de vidrio + disparador de lightbox */
.galeria img { border-radius: 13px; border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow); }
.gallery-trigger { all: unset; display: block; width: 100%; cursor: zoom-in; }
.gallery-trigger:focus-visible { outline: 2px solid var(--acento-ink, var(--acento)); outline-offset: 4px; border-radius: 14px; }

/* Pie de vidrio */
.site-foot { border: 1px solid var(--glass-stroke); border-radius: 22px;
  margin-top: var(--paso); padding-inline: clamp(1.3rem, 4vw, 3rem);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi); }

/* ============================================================
   EL SELLO — Venn de vidrio líquido (tres mundos + sus cruces)
   ============================================================ */
.hero-venn-grid { align-items: center; }
@media (min-width: 56rem) { .hero-venn-grid { grid-template-columns: 1fr 1.04fr; } }

.venn-stage {
  position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1;
  margin-inline: auto; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 47%,
      var(--stage-deep) 0%, var(--stage-deep2) 28%,
      rgba(20,18,27,0.55) 52%, rgba(243,237,225,0) 72%);
}
.venn { position: relative; width: 90%; aspect-ratio: 1/1; isolation: isolate; }

.disc { position: absolute; width: 60%; aspect-ratio: 1/1; border-radius: 50%;
  mix-blend-mode: screen; pointer-events: none;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 2px 16px rgba(255,255,255,.30), 0 0 60px -10px rgba(255,255,255,.05); }
.disc::before { content:""; position:absolute; inset:-1px; border-radius:50%;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.22) 12%,
    transparent 30%, transparent 60%, rgba(255,255,255,.13) 76%, transparent 94%);
  animation: venn-spin 22s linear infinite; }
.disc::after { content:""; position:absolute; left:14%; top:9%; width:52%; height:36%;
  border-radius:50%; filter: blur(3px);
  background: radial-gradient(circle at 42% 32%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); }

.disc-a { left:8%;  top:8%;  background: radial-gradient(circle at 42% 38%, rgba(152,204,238,.95), rgba(64,120,165,.5) 56%, rgba(36,70,110,.08) 100%); }
.disc-b { left:32%; top:8%;  background: radial-gradient(circle at 58% 38%, rgba(180,164,244,.95), rgba(108,96,206,.48) 56%, rgba(52,48,120,.08) 100%); }
.disc-c { left:20%; top:32%; background: radial-gradient(circle at 50% 60%, rgba(247,203,133,.96), rgba(206,140,70,.5) 56%, rgba(120,75,35,.08) 100%); }
.disc-b::before { animation-duration: 28s; animation-direction: reverse; }
.disc-c::before { animation-duration: 34s; }

.venn-core { position:absolute; left:50%; top:46%; width:21%; aspect-ratio:1/1;
  transform: translate(-50%,-50%); border-radius:50%; pointer-events:none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,252,246,.95), rgba(255,250,240,.3) 42%, transparent 70%);
  animation: venn-pulse 6.5s ease-in-out infinite; }

@keyframes venn-spin  { to { transform: rotate(360deg); } }
@keyframes venn-pulse { 0%,100%{ opacity:.78; } 50%{ opacity:1; } }

.venn-label { position:absolute; transform: translate(-50%,-50%);
  font-family: var(--display); font-weight:400; font-size: clamp(.82rem,1.5vw,1.02rem);
  color: rgba(247,242,233,.94); letter-spacing:.005em; white-space:nowrap; pointer-events:none;
  text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.label-a { left:20%; top:17%; } .label-b { left:80%; top:17%; } .label-c { left:50%; top:89%; }

.venn-hit { position:absolute; transform: translate(-50%,-50%); border-radius:50%;
  display:grid; place-items:center; text-decoration:none; }
.venn-hit > span { opacity:0; transform: translateY(6px) scale(.96);
  transition: opacity .25s ease, transform .25s ease;
  font-family: var(--body); font-size:.72rem; font-weight:600; letter-spacing:.03em;
  color: var(--tinta); background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border:1px solid var(--glass-stroke); border-radius:100px; padding:.32em .72em;
  white-space:nowrap; box-shadow: var(--glass-shadow); pointer-events:none; }
.venn-hit:hover > span, .venn-hit:focus-visible > span { opacity:1; transform:none; }
.venn-hit:focus-visible { outline:2px solid rgba(247,242,233,.92); outline-offset:2px; }
.hit-a{ left:23%; top:31%; width:27%; height:27%; z-index:1; }
.hit-b{ left:77%; top:31%; width:27%; height:27%; z-index:1; }
.hit-c{ left:50%; top:75%; width:27%; height:27%; z-index:1; }
.hit-ab{ left:50%; top:29%; width:19%; height:19%; z-index:2; }
.hit-ac{ left:36%; top:54%; width:19%; height:19%; z-index:2; }
.hit-bc{ left:64%; top:54%; width:19%; height:19%; z-index:2; }
.hit-center{ left:50%; top:46%; width:16%; height:16%; z-index:3; }
.venn.hot-a .disc-a, .venn.hot-b .disc-b, .venn.hot-c .disc-c { filter: brightness(1.2); }

.retrato-seccion { padding-block: var(--paso); display:grid; place-items:center; }
.retrato-seccion .figura { max-width: 440px; width:100%; }

/* ============================================================
   LIGHTBOX de galería
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 2147483646; display: none; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18,16,24,.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.lightbox.is-open { display: grid; animation: lb-in .3s ease; }
@keyframes lb-in { from { opacity:0; } to { opacity:1; } }
.lightbox figure { margin:0; display:grid; place-items:center; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 84vh; border-radius: 14px;
  border:1px solid var(--glass-stroke); box-shadow: 0 30px 90px -24px rgba(0,0,0,.7); }
.lightbox figcaption { color: rgba(247,242,233,.9); text-align:center; margin-top:1rem;
  font-size:.84rem; max-width: 60ch; }
.lb-btn { position:absolute; display:grid; place-items:center; width:3rem; height:3rem;
  border-radius:100px; cursor:pointer; color: var(--tinta);
  background: var(--glass-bg-strong); border:1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow); font-size:1.3rem; line-height:1; }
.lb-close { top: clamp(1rem,3vw,1.6rem); right: clamp(1rem,3vw,1.6rem); }
.lb-prev { left: clamp(.6rem,3vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-next { right: clamp(.6rem,3vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-btn:hover { color: var(--acento-ink, var(--acento)); }
.lb-btn:focus-visible { outline:2px solid rgba(247,242,233,.92); outline-offset:2px; }

/* ============================================================
   v3 — órbita física, discos vívidos, vidrio marcado (refracción
   real), grilla blueprint tenue, movimiento líquido.
   La distorsión SVG y los filtros se activan con .fx (los inyecta
   site.js); sin JS, todo degrada a vidrio CSS sólido.
   ============================================================ */

/* ===========================================================
   IDENTIDAD DE COLOR POR SECCIÓN — textura ambiental (body::before).
   Vive detrás del contenido y se desvanece bajo el hero. Teñida con el
   acento de la sección. Solo Ingeniería y sus cruces técnicos llevan la
   GRILLA (plano / matemática); los mundos del alma llevan luz o estrellas.
   =========================================================== */
:root { --grid: 34px; }
body::before { content:""; position: fixed; inset:0; z-index:-2; pointer-events:none; display:none; }

/* Ingeniería · Ing∩Esp · Ing∩Arte → la grilla, teñida por el acento */
.w-ingenieria body::before,
.w-ingenieria-espiritualidad body::before,
.w-precision-arte body::before {
  display:block;
  --gl: color-mix(in srgb, var(--acento) 16%, transparent);
  --gs: color-mix(in srgb, var(--acento) 25%, transparent);
  background-image:
    linear-gradient(var(--gl) 1px, transparent 1px),
    linear-gradient(90deg, var(--gl) 1px, transparent 1px),
    linear-gradient(var(--gs) 1px, transparent 1px),
    linear-gradient(90deg, var(--gs) 1px, transparent 1px);
  background-size: var(--grid) var(--grid), var(--grid) var(--grid),
                  calc(var(--grid)*5) calc(var(--grid)*5), calc(var(--grid)*5) calc(var(--grid)*5);
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 30%, #000 48%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 72% at 50% 30%, #000 48%, transparent 100%);
}

/* Espiritualidad → campo de estrellas (titila) sobre un velo de nebulosa */
.w-espiritualidad body::before {
  display:block;
  background:
    radial-gradient(2.4px 2.4px at 16% 22%, color-mix(in srgb, var(--acento) 80%, #fff), transparent 60%),
    radial-gradient(1.8px 1.8px at 67% 15%, color-mix(in srgb, var(--acento) 74%, #fff), transparent 60%),
    radial-gradient(1.8px 1.8px at 83% 33%, color-mix(in srgb, var(--acento) 70%, #fff), transparent 60%),
    radial-gradient(2.4px 2.4px at 37% 11%, color-mix(in srgb, var(--acento) 82%, #fff), transparent 60%),
    radial-gradient(1.6px 1.6px at 52% 29%, color-mix(in srgb, var(--acento) 68%, #fff), transparent 60%),
    radial-gradient(2px 2px at 26% 37%, color-mix(in srgb, var(--acento) 74%, #fff), transparent 60%),
    radial-gradient(1.6px 1.6px at 91% 19%, color-mix(in srgb, var(--acento) 70%, #fff), transparent 60%),
    radial-gradient(2.4px 2.4px at 73% 41%, color-mix(in srgb, var(--acento) 80%, #fff), transparent 60%),
    radial-gradient(1.6px 1.6px at 45% 44%, color-mix(in srgb, var(--acento) 66%, #fff), transparent 60%),
    radial-gradient(1.8px 1.8px at 60% 38%, color-mix(in srgb, var(--acento) 72%, #fff), transparent 60%),
    radial-gradient(ellipse 78% 56% at 50% 4%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 16%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 78% at 50% 16%, #000 52%, transparent 100%);
  animation: esp-twinkle 7s ease-in-out infinite;
}
@keyframes esp-twinkle { 0%,100%{ opacity:.72 } 50%{ opacity:1 } }

/* Arte → luz cálida de hora dorada entrando desde arriba */
.w-arte body::before {
  display:block;
  background:
    radial-gradient(ellipse 96% 62% at 50% -6%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 64%),
    radial-gradient(circle at 83% 10%, color-mix(in srgb, var(--acento) 15%, transparent), transparent 36%);
  -webkit-mask-image: radial-gradient(ellipse 100% 84% at 50% 6%, #000 56%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 84% at 50% 6%, #000 56%, transparent 100%);
}

/* Esp∩Arte → resplandor malva suave (emocional, no técnico) */
.w-servir-mirada body::before {
  display:block;
  background:
    radial-gradient(ellipse 90% 58% at 50% -3%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 62%),
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--acento) 12%, transparent), transparent 34%);
  -webkit-mask-image: radial-gradient(ellipse 100% 82% at 50% 8%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 82% at 50% 8%, #000 55%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) { .w-espiritualidad body::before { animation: none; } }

/* Discos MÁS VÍVIDOS (sobre el pozo oscuro, blend screen) */
.disc-a { background: radial-gradient(circle at 42% 38%, rgba(126,200,255,.99), rgba(40,124,190,.62) 54%, rgba(18,60,118,.10) 100%); }
.disc-b { background: radial-gradient(circle at 58% 38%, rgba(166,146,255,.99), rgba(96,78,228,.60) 54%, rgba(46,40,132,.10) 100%); }
.disc-c { background: radial-gradient(circle at 50% 60%, rgba(255,193,98,1),   rgba(228,138,46,.64) 54%, rgba(122,66,20,.10) 100%); }
.disc { box-shadow: inset 0 2px 18px rgba(255,255,255,.36), 0 0 70px -8px rgba(255,255,255,.07); }

/* ÓRBITA FÍSICA — cada disco recorre un círculo alrededor de su lugar */
@keyframes orbit {
  0%     { transform: translate(7%, 0); }
  8.33%  { transform: translate(6.06%, 3.5%); }
  16.66% { transform: translate(3.5%, 6.06%); }
  25%    { transform: translate(0, 7%); }
  33.33% { transform: translate(-3.5%, 6.06%); }
  41.66% { transform: translate(-6.06%, 3.5%); }
  50%    { transform: translate(-7%, 0); }
  58.33% { transform: translate(-6.06%, -3.5%); }
  66.66% { transform: translate(-3.5%, -6.06%); }
  75%    { transform: translate(0, -7%); }
  83.33% { transform: translate(3.5%, -6.06%); }
  91.66% { transform: translate(6.06%, -3.5%); }
  100%   { transform: translate(7%, 0); }
}
.disc   { animation: orbit 28s linear infinite; }
.disc-a { animation-duration: 26s; }
.disc-b { animation-duration: 31s; animation-direction: reverse; }
.disc-c { animation-duration: 35s; }

/* Distorsión de vidrio REAL en los discos (líquido) cuando hay filtros */
.fx .disc { filter: url(#liquid-disc); }

/* GLOW QUE RESPIRA en el centro del Venn */
.venn::after {
  content:""; position:absolute; left:50%; top:46%; width:46%; aspect-ratio:1/1;
  transform: translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:-1;
  background: radial-gradient(circle, rgba(255,250,240,.18), transparent 62%);
  mix-blend-mode: screen; animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* SHEEN que sigue el mouse (luz que recorre el vidrio) */
.puente { position: relative; overflow: hidden; --mx:50%; --my:50%; }
.puente::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.45), transparent 55%);
  opacity:0; transition: opacity .4s ease; mix-blend-mode: soft-light;
}
.puente:hover::after { opacity:1; }
.venn-stage { --mx:50%; --my:50%; }
.venn-stage::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 55%);
  opacity:0; transition: opacity .45s ease; mix-blend-mode: screen;
}
.venn-stage:hover::after { opacity:1; }

/* MARCO DE FOTO integrado (sin bloque blanco, sin sobrecargar) */
.figura {
  padding: .4rem;
  background: linear-gradient(155deg, rgba(255,255,255,.22), rgba(40,36,31,.05) 60%, rgba(255,255,255,.10));
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.figura img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(40,36,31,.06); }
.galeria img { box-shadow: var(--glass-shadow), 0 0 0 1px rgba(40,36,31,.04); }

/* Vidrio del chrome MÁS MARCADO + refracción de fondo (si el navegador la soporta;
   si no, la declaración es inválida y cae al blur base: la escarcha nunca se pierde) */
/* Lente de vidrio + filo pulido en todas las superficies (poco blur para que la
   refracción del fondo se vea; el filo brillante define la pieza sobre fondo claro). */
.fx .site-head, .fx .boton, .fx .puente, .fx .cita, .fx .figura, .fx .site-foot {
  -webkit-backdrop-filter: blur(5px) saturate(1.35);
  backdrop-filter: blur(5px) saturate(1.35) url(#glass-distort);
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 10px 18px -10px rgba(255, 255, 255, 0.45),
    inset 0 -14px 24px -14px rgba(255, 255, 255, 0.18),
    var(--glass-shadow);
}

/* ============================================================
   ORBE DE APERTURA — el hilo visual A (pigmento sobre papel).
   Cada página enciende su zona del Venn. Solo CSS; degrada solo.
   Geometría idéntica al hero de la portada (eng izq · esp der · arte abajo).
   ============================================================ */
.aperture {
  position: relative; width: min(72%, 320px); aspect-ratio: 1/1;
  margin: 0 auto clamp(1.4rem, 3vw, 2.2rem);
  filter: drop-shadow(0 16px 24px rgba(120, 80, 40, .14));
}
.aperture .ap-orb {
  position: absolute; width: 56%; height: 56%; border-radius: 50%;
  transform: translate(-50%, -50%); mix-blend-mode: multiply;
  transition: opacity .7s ease, filter .7s ease;
}
.aperture .eng { left: 38%; top: 42%; background: radial-gradient(circle, rgba(74,111,168,.10) 0 38%, rgba(74,111,168,.50) 67%, rgba(74,111,168,0) 80%); }
.aperture .esp { left: 62%; top: 42%; background: radial-gradient(circle, rgba(111,91,154,.10) 0 38%, rgba(111,91,154,.50) 67%, rgba(111,91,154,0) 80%); }
.aperture .art { left: 50%; top: 62%; background: radial-gradient(circle, rgba(190,112,68,.10) 0 38%, rgba(190,112,68,.50) 67%, rgba(190,112,68,0) 80%); }
.aperture .ap-core {
  position: absolute; left: 50%; top: 48.6%; width: 17%; height: 17%; border-radius: 50%;
  transform: translate(-50%, -50%); mix-blend-mode: multiply; opacity: 0;
  background: radial-gradient(circle, rgba(255,243,216,.92) 0 16%, rgba(217,169,78,.85) 44%, rgba(217,169,78,0) 72%);
}
.aperture .ap-spark {
  position: absolute; left: 50%; top: 48.6%; width: 9%; height: 9%; border-radius: 50%;
  transform: translate(-50%, -50%); mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle, rgba(255,250,236,.95) 0 30%, rgba(255,236,200,0) 70%);
}
@keyframes ap-pulse { 0%,100% { transform: translate(-50%,-50%) scale(.86); opacity:.8; } 50% { transform: translate(-50%,-50%) scale(1.12); opacity:1; } }

/* Núcleo (portada/centro): los tres + centro que late */
.aperture.is-core .ap-core,
.aperture.is-core .ap-spark { opacity: 1; animation: ap-pulse 3.8s ease-in-out infinite; }

/* Un mundo: su orbe se afirma; los otros retroceden */
.aperture.is-eng .esp, .aperture.is-eng .art,
.aperture.is-esp .eng, .aperture.is-esp .art,
.aperture.is-art .eng, .aperture.is-art .esp { opacity: .22; }
.aperture.is-eng .eng, .aperture.is-esp .esp, .aperture.is-art .art { filter: saturate(1.16) brightness(1.02); }

/* Un cruce: dos orbes presentes, el tercero casi ausente, la lente encendida */
.aperture.is-engesp .art, .aperture.is-engart .esp, .aperture.is-espart .eng { opacity: .10; }
.aperture.is-engesp .ap-core { opacity: 1; left: 50%; top: 38.5%; background: radial-gradient(circle, rgba(255,250,242,.92) 0 14%, rgba(90,101,153,.92) 46%, rgba(90,101,153,0) 72%); }
.aperture.is-engart .ap-core { opacity: 1; left: 44%; top: 54%;  background: radial-gradient(circle, rgba(255,250,242,.92) 0 14%, rgba(138,123,110,.94) 46%, rgba(138,123,110,0) 72%); }
.aperture.is-espart .ap-core { opacity: 1; left: 56%; top: 54%;  background: radial-gradient(circle, rgba(255,250,242,.92) 0 14%, rgba(151,113,138,.94) 46%, rgba(151,113,138,0) 72%); }
.aperture.is-engesp .ap-core, .aperture.is-engart .ap-core, .aperture.is-espart .ap-core { animation: ap-pulse 3.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .aperture .ap-core, .aperture .ap-spark { animation: none; } }

/* Títulos de los tres círculos sobre el Venn.
   Resalta el/los mundo(s) de la página (color propio); los demás quedan desvanecidos. */
.aperture .ap-name {
  position: absolute; z-index: 3; white-space: nowrap;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(.72rem, .52rem + 1.1vw, .9rem); line-height: 1; letter-spacing: .01em;
  color: var(--tinta); opacity: .2;
}
.aperture .ap-name.ap-eng { left: 0;      top: 5%; }
.aperture .ap-name.ap-esp { right: 0;     top: 5%; text-align: right; }
.aperture .ap-name.ap-art { left: 50%; bottom: -2%; transform: translateX(-50%); }
.aperture.is-eng .ap-name.ap-eng, .aperture.is-engesp .ap-name.ap-eng, .aperture.is-engart .ap-name.ap-eng, .aperture.is-core .ap-name.ap-eng { opacity: 1; font-weight: 500; color: #4A6FA8; }
.aperture.is-esp .ap-name.ap-esp, .aperture.is-engesp .ap-name.ap-esp, .aperture.is-espart .ap-name.ap-esp, .aperture.is-core .ap-name.ap-esp { opacity: 1; font-weight: 500; color: #6F5B9A; }
.aperture.is-art .ap-name.ap-art, .aperture.is-engart .ap-name.ap-art, .aperture.is-espart .ap-name.ap-art, .aperture.is-core .ap-name.ap-art { opacity: 1; font-weight: 500; color: #BE7044; }