/* ═══════════════════════════════════════════════════════════════════════════
   CIVINNOVA · sistema de diseño
   Paleta MEDIDA del archivo del logo: navy #07203E, celeste #9BBCEE,
   sombra del anillo #4E6A91. Una sola paleta para el símbolo y el sistema.

   Tema: claro, con portada y pie en navy como sujetadores de marca. Se fija
   light (color-scheme) a propósito: los esquemas SVG usan los colores medidos
   de la marca y no tienen versión oscura. Excepción documentada.

   Capas (z-index): pie de página 0 · WhatsApp flotante 38 · menú móvil 39 ·
   cabecera 40 · enlace "saltar" 50.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* marca */
  --navy: #07203E;
  --celeste: #9BBCEE;
  --sombra: #4E6A91;

  /* derivados, misma familia */
  --navy-linea: rgba(155, 188, 238, .18);
  --tinta: #07203E;
  --tinta-2: #1A3C63;
  --texto-2: #52647A;        /* gris con sesgo azul; 5.4:1 sobre --fondo-2 */
  --fondo: #FFFFFF;
  --fondo-2: #F5F8FC;
  --fondo-3: #E8F0FA;        /* tinte celeste para la celda de supervisión */
  --linea: #E1E8F1;
  --linea-2: #EDF2F8;

  /* tipografía */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lectura: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1180px;
  --alto-nav: 76px;
  /* curva con masa: arranca rápido y asienta despacio */
  --curva: cubic-bezier(.22, .68, 0, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 560px) { .wrap { padding: 0 20px; } }

/* escala tipográfica */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--sombra); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, header :focus-visible, footer :focus-visible, .menu-movil :focus-visible { outline-color: var(--celeste); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--celeste); color: var(--navy); font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
  transition: top .3s var(--curva);
}
.saltar:focus { top: 16px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
header {
  position: fixed; inset: 0 0 auto; z-index: 40;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .5s var(--curva), border-color .5s var(--curva);
}
header.solido { background: rgba(7, 32, 62, .92); backdrop-filter: blur(14px); border-bottom-color: var(--navy-linea); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--alto-nav); gap: 24px; }
.lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.lockup svg { width: 30px; height: 30px; color: var(--celeste); flex: none; transition: transform .6s var(--curva); }
@media (hover: hover) and (pointer: fine) { .lockup:hover svg { transform: rotate(-6deg) scale(1.06); } }
.lockup b { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .13em; color: #fff; line-height: 1; }
.links { display: flex; gap: 2px; }
.links a {
  color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 9px 14px; border-radius: 100px;
  transition: color .3s var(--curva), background .3s var(--curva);
}
.links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
@media (max-width: 940px) { .links { display: none; } }

section[id], .hero { scroll-margin-top: var(--alto-nav); }

/* ── Portada ──────────────────────────────────────────────────────────── */
.hero { background: var(--navy); color: #fff; padding: 148px 0 100px; position: relative; overflow: hidden; }
@media (max-width: 680px) { .hero { padding: 116px 0 72px; } }
/* Papel milimetrado del plano, desvanecido hacia el texto. Estático: no repinta.
   Excepción consciente al detector de Impeccable: esta superficie ES un plano con medición. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(155, 188, 238, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 188, 238, .07) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 76% 52%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 55% 75% at 76% 52%, #000 25%, transparent 78%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero::before { -webkit-mask-image: radial-gradient(ellipse 80% 45% at 50% 78%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 45% at 50% 78%, #000 25%, transparent 80%); }
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--celeste); display: block; }
.hero .bajada { margin-top: 26px; max-width: 44ch; font-size: 19.5px; color: rgba(255, 255, 255, .8); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ── Elevación técnica ─────────────────────────────────────────────── */
.elevacion { margin: 0; width: 100%; max-width: 500px; justify-self: end; }
@media (max-width: 1000px) { .elevacion { justify-self: center; max-width: 420px; } }
.elevacion svg { width: 100%; height: auto; display: block; overflow: visible; }
.el-trazo { fill: none; stroke: var(--celeste); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.el-media { stroke-opacity: .55; stroke-width: 1; }
.el-fina { stroke-opacity: .32; stroke-width: 1; }
.el-texto { font-family: var(--mono); font-size: 11px; fill: rgba(155, 188, 238, .72); }
.el-eje circle { fill: var(--navy); stroke: rgba(155, 188, 238, .55); stroke-width: 1; }
.el-eje text { font-family: var(--mono); font-size: 11px; fill: var(--celeste); }
.c-ok { fill: var(--celeste); fill-opacity: .9; }
.c-pr { fill: var(--celeste); fill-opacity: .28; }
.elevacion figcaption { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .68); }
.elevacion figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.elevacion figcaption i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.lg-ok { background: rgba(155, 188, 238, .9); }
.lg-pr { background: rgba(155, 188, 238, .28); }
.lg-pe { border: 1px solid rgba(155, 188, 238, .55); }

/* El único momento de movimiento de la página. Primero se trazan las líneas
   (ease-in-out: es dibujo en pantalla), luego se llenan los sectores de abajo
   hacia arriba con 45 ms entre cada uno (ease-out: cada celda "llega").
   Sin animación, el dibujo está completo: el estado por defecto es el final. */
@media (prefers-reduced-motion: no-preference) {
  .hero-texto > * { animation: asentar .8s cubic-bezier(.23, 1, .32, 1) both; }
  .hero-texto > :nth-child(2) { animation-delay: .08s; }
  .hero-texto > :nth-child(3) { animation-delay: .16s; }
  .el-trazo { stroke-dasharray: 1; animation: trazar 1.2s cubic-bezier(.77, 0, .175, 1) .1s both; }
  .el-aparece { animation: aparecer .6s ease .75s both; }
  .el-celda { transform-box: fill-box; transform-origin: 50% 100%; animation: llenar .5s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(1s + var(--i) * 45ms); }
  .elevacion figcaption { animation: aparecer .6s ease 1.9s both; }
}
@keyframes asentar { from { opacity: 0; transform: translateY(14px); } }
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes llenar { from { opacity: 0; transform: scaleY(.35); } }
@keyframes aparecer { from { opacity: 0; } }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none; white-space: nowrap;
  font-weight: 600; font-size: 15px; padding: 8px 8px 8px 24px; border-radius: 100px;
  transition: transform .4s var(--curva), background .4s var(--curva), color .4s var(--curva);
}
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn .ico { width: 34px; height: 34px; border-radius: 100px; display: grid; place-items: center; flex: none; transition: transform .4s var(--curva); }
.btn .ico svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .btn:hover .ico { transform: translateX(2px) scale(1.06); } }
.btn-p { background: var(--celeste); color: var(--navy); }
.btn-p .ico { background: rgba(7, 32, 62, .12); }
.btn-p:hover { background: #fff; }
.claro .btn-p:hover, section .btn-p:hover { background: var(--navy); color: #fff; }
.claro .btn-p:hover .ico, section .btn-p:hover .ico { background: rgba(255, 255, 255, .14); }
.btn-s { color: #fff; border: 1px solid rgba(155, 188, 238, .34); }
.btn-s .ico { background: rgba(255, 255, 255, .1); }
.btn-s:hover { background: rgba(255, 255, 255, .08); }

/* ── Secciones ────────────────────────────────────────────────────────── */
section { padding: 128px 0 136px; }
@media (max-width: 680px) { section { padding: 84px 0 92px; } }
.claro { background: var(--fondo-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.encabezado { max-width: 62ch; margin-bottom: 60px; }
.encabezado p { margin-top: 18px; color: var(--texto-2); font-size: 18px; }
.apoyo { color: var(--texto-2); margin-top: 20px; }
.apoyo.pequeno { font-size: 15px; margin-top: 18px; }
.nota { margin-top: 32px; font-size: 14.5px; color: var(--texto-2); max-width: 70ch; }

/* ── Tesis ────────────────────────────────────────────────────────────── */
.tesis-titulo { max-width: 22ch; }
.tesis-texto { margin-top: 28px; }
.tesis-texto p { font-size: 19px; color: var(--texto-2); max-width: 60ch; }
.tesis-texto p + p { margin-top: 14px; }
.tesis-texto strong { color: var(--tinta); font-weight: 600; }

.pilares { list-style: none; margin-top: 64px; border-top: 1px solid var(--linea); }
.pilares a {
  display: grid; grid-template-columns: minmax(220px, 1fr) 2fr 28px; gap: 12px 40px; align-items: center;
  padding: 26px 4px; border-bottom: 1px solid var(--linea); text-decoration: none;
  transition: background .25s ease;
}
.pilar-nombre { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; }
.pilar-texto { color: var(--texto-2); font-size: 16px; max-width: 60ch; }
.pilar-ico { width: 22px; height: 22px; color: var(--sombra); justify-self: end; transition: transform .35s var(--curva), color .35s var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .pilares a:hover { background: var(--fondo-2); }
  .pilares a:hover .pilar-ico { transform: translate(3px, -3px); color: var(--navy); }
}
@media (max-width: 760px) {
  .pilares a { grid-template-columns: 1fr 24px; }
  .pilar-texto { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Servicios: bento de 12 columnas ─────────────────────────────────── */
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
}
.bento article { background: var(--fondo); display: flex; flex-direction: column; }
.b-5 { grid-column: span 5; } .b-6 { grid-column: span 6; } .b-7 { grid-column: span 7; } .b-12 { grid-column: span 12; }
.b-texto { padding: 32px 30px 34px; }
.b-texto h3 { margin-bottom: 10px; }
.b-texto p { color: var(--texto-2); font-size: 15.5px; }
.con-foto img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; background: var(--linea-2); }
.tenida { background: var(--fondo-3) !important; }
.tenida .b-texto { padding: 36px 34px; display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 12px 40px; align-items: baseline; }
.tenida h3 { font-size: 1.6rem; margin: 0; }
.tenida p { color: var(--tinta-2); }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-5, .b-6, .b-7 { grid-column: span 1; }
  .b-12 { grid-column: span 2; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; }
  .b-5, .b-6, .b-7, .b-12 { grid-column: span 1; }
  .tenida .b-texto { grid-template-columns: 1fr; }
}

/* ── Método ───────────────────────────────────────────────────────────── */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; gap: 48px; } }
.cita { font-family: var(--display); font-weight: 500; font-size: 1.55rem; line-height: 1.3; color: var(--tinta); margin-top: 28px; max-width: 34ch; }

.tabla-metodo > div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.tabla-metodo > div:first-child { border-top: 1px solid var(--linea); }
.tabla-metodo dt { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.tabla-metodo dd { color: var(--texto-2); font-size: 15.5px; }
@media (max-width: 560px) { .tabla-metodo > div { grid-template-columns: 1fr; gap: 4px; } }

/* bandeja: el esquema montado como una placa en su marco */
.bandeja { margin-top: 36px; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 12px; padding: 7px; }
.bandeja > .interior { background: var(--fondo); border: 1px solid var(--linea-2); border-radius: 7px; padding: 26px 26px 18px; }
.esquema { width: 100%; height: auto; display: block; }
.esquema-pie { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea-2); font-size: 13px; color: var(--texto-2); }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; }
.leyenda > span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 16px; height: 0; display: inline-block; }
.l-plan { border-top: 2px dashed #A9BED6; }
.l-ganado { border-top: 3px solid var(--navy); }
.l-costo { border-top: 3px solid var(--sombra); }
.marca-esquema { color: var(--sombra); font-weight: 500; }

/* ── Entregables ──────────────────────────────────────────────────────── */
.entregables { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.entregables article { grid-column: span 2; background: var(--fondo); padding: 32px 28px; display: flex; flex-direction: column; }
.entregables article:nth-child(4), .entregables article:nth-child(5) { grid-column: span 3; }
.entregables h3 { margin-bottom: 12px; }
.entregables p { color: var(--texto-2); font-size: 15.5px; flex: 1; }
.entregables strong { color: var(--tinta); font-weight: 600; }
.entregables dl { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 14px; display: grid; gap: 4px; }
.entregables dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.entregables dt { color: var(--texto-2); }
.entregables dd { font-weight: 600; text-align: right; }
@media (max-width: 1000px) {
  .entregables { grid-template-columns: repeat(2, 1fr); }
  .entregables article, .entregables article:nth-child(4) { grid-column: span 1; }
  .entregables article:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 680px) {
  .entregables { grid-template-columns: 1fr; }
  .entregables article, .entregables article:nth-child(4), .entregables article:nth-child(5) { grid-column: span 1; }
}

/* ── Tecnología: franja de capacidades, separadas por hairlines ──────── */
.franja { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.franja li { padding: 30px 28px 34px; }
.franja li + li { border-left: 1px solid var(--linea); }
.franja li:first-child { padding-left: 0; }
.franja h3 { font-size: 1.25rem; margin-bottom: 10px; }
.franja p { color: var(--texto-2); font-size: 15px; }
@media (max-width: 1000px) {
  .franja { grid-template-columns: repeat(2, 1fr); }
  .franja li { padding: 26px 24px 28px 0; }
  .franja li + li { border-left: 0; }
  .franja li:nth-child(even) { border-left: 1px solid var(--linea); padding-left: 24px; }
  .franja li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 560px) {
  .franja { grid-template-columns: 1fr; }
  .franja li, .franja li:nth-child(even) { border-left: 0; padding: 22px 0; }
  .franja li + li { border-top: 1px solid var(--linea); }
}

/* ── Obras ────────────────────────────────────────────────────────────── */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.galeria figure { margin: 0; }
.galeria .marco { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fondo); border: 1px solid var(--linea); border-radius: 8px; }
.galeria .marco { background: var(--linea-2); }
.galeria .marco img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--curva); }
@media (hover: hover) and (pointer: fine) { .galeria figure:hover .marco img { transform: scale(1.03); } }
.galeria figcaption { margin-top: 12px; font-size: 15px; font-weight: 500; }
.galeria figcaption span { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--texto-2); }

.trayectoria { margin-top: 104px; max-width: 64ch; }
.trayectoria h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); max-width: 26ch; }
.trayectoria p { color: var(--texto-2); margin-top: 18px; }

/* ── Publicaciones ────────────────────────────────────────────────────── */
.invitacion { font-size: 17px; color: var(--texto-2); max-width: 64ch; margin-top: -24px; }
.invitacion strong { color: var(--tinta); font-weight: 600; }
.invitacion a, .ver-todo a { color: var(--tinta-2); text-decoration-color: var(--celeste); text-underline-offset: 3px; }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contacto { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: start; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; gap: 44px; } }
.canales { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 32px; }
.correo {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.8rem); text-decoration: none;
  border-bottom: 1px solid var(--sombra); padding-bottom: 2px; transition: color .3s var(--curva), border-color .3s var(--curva);
}
.correo:hover { color: var(--sombra); border-color: var(--celeste); }
.ficha div { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; }
.ficha div:first-child { border-top: 1px solid var(--linea); }
.ficha dt { color: var(--texto-2); }
.ficha dd { font-weight: 600; text-align: right; }
.ficha dd a { text-decoration: none; border-bottom: 1px solid var(--linea); transition: border-color .3s var(--curva); }
.ficha dd a:hover { border-color: var(--sombra); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
footer { background: var(--navy); color: rgba(255, 255, 255, .6); padding: 48px 0; font-size: 13.5px; }
.pie { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie-marca { display: flex; flex-direction: column; gap: 8px; }
.pie .lockup svg { width: 24px; height: 24px; opacity: .9; }
.pie .lockup b { font-size: 16px; color: rgba(255, 255, 255, .9); }
.firma { font-size: 13px; color: var(--celeste); }
.pie a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pie a:hover { color: #fff; }

/* ── Menú de celular ──────────────────────────────────────────────────── */
.hamburguesa {
  display: none; width: 44px; height: 44px; border: 1px solid rgba(155, 188, 238, .34);
  border-radius: 100px; background: transparent; cursor: pointer; position: relative; flex: none; padding: 0;
}
.hamburguesa span { position: absolute; left: 13px; width: 18px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .5s var(--curva); }
.hamburguesa span:nth-child(1) { top: 18px; }
.hamburguesa span:nth-child(2) { top: 24px; }
.abierto .hamburguesa span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.abierto .hamburguesa span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
.menu-movil {
  position: fixed; inset: 0; z-index: 39; background: rgba(7, 32, 62, .97); backdrop-filter: blur(18px);
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 28px;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--curva), visibility .45s;
}
.abierto .menu-movil { opacity: 1; visibility: visible; }
.menu-movil a {
  color: #fff; text-decoration: none; font-family: var(--display); font-size: 34px; font-weight: 600;
  padding: 11px 0; border-bottom: 1px solid var(--navy-linea);
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--curva), transform .5s var(--curva);
}
.abierto .menu-movil a { opacity: 1; transform: none; }
.abierto .menu-movil a:nth-child(2) { transition-delay: .05s; }
.abierto .menu-movil a:nth-child(3) { transition-delay: .1s; }
.abierto .menu-movil a:nth-child(4) { transition-delay: .15s; }
.abierto .menu-movil a:nth-child(5) { transition-delay: .2s; }
.abierto .menu-movil a:nth-child(6) { transition-delay: .25s; }
@media (max-width: 940px) { .hamburguesa { display: block; } }
@media (min-width: 941px) { .menu-movil { display: none; } }
body.bloqueado { overflow: hidden; }

/* ── WhatsApp flotante (solo celular) ─────────────────────────────────── */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 38; width: 56px; height: 56px; border-radius: 100px;
  display: none; place-items: center; background: var(--celeste); color: var(--navy);
  box-shadow: 0 12px 30px -12px rgba(7, 32, 62, .5); transition: transform .4s var(--curva);
}
.wa-flotante svg { width: 27px; height: 27px; }
.wa-flotante:active { transform: scale(.94); }
@media (max-width: 940px) { .wa-flotante { display: grid; } }
.abierto .wa-flotante { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   ARTÍCULOS: el sitio es sans; el cuerpo de un artículo es serif porque
   son 2000 palabras y se leen, no se escanean.
   ═══════════════════════════════════════════════════════════════════════ */
.pagina-interior { padding-top: var(--alto-nav); }
.migas { font-size: 14px; color: var(--texto-2); }
.migas a { color: var(--tinta-2); text-decoration-color: var(--celeste); text-underline-offset: 3px; }
.art-cabecera { padding: 64px 0 44px; border-bottom: 1px solid var(--linea); }
.art-cabecera h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); max-width: 26ch; margin-top: 18px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14.5px; color: var(--texto-2); }
.art-meta .autoria { color: var(--tinta); font-weight: 600; }

.art-cuerpo { padding: 48px 0 88px; }
.art-cuerpo .col { max-width: 68ch; margin: 0 auto; font-family: var(--lectura); font-size: 19px; line-height: 1.75; }
.art-cuerpo .col > * + * { margin-top: 1.15em; }
.art-cuerpo h2 { font-family: var(--display); font-size: 1.85rem; margin-top: 2.2em; }
.art-cuerpo h3 { font-family: var(--display); font-size: 1.32rem; margin-top: 1.8em; }
.art-cuerpo p { max-width: none; }
.art-cuerpo strong { font-weight: 600; }
.art-cuerpo a { color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--celeste); text-underline-offset: 3px; }
.art-cuerpo ul, .art-cuerpo ol { padding-left: 1.3em; }
.art-cuerpo li + li { margin-top: .4em; }
.art-cuerpo blockquote { border-left: 1px solid var(--sombra); padding: 2px 0 2px 22px; color: var(--tinta-2); font-style: italic; }
.art-cuerpo figure { margin: 2em 0; }
.art-cuerpo figure img { width: 100%; height: auto; display: block; border: 1px solid var(--linea); }
.art-cuerpo figcaption { font-family: var(--texto); font-size: 14px; color: var(--texto-2); margin-top: 10px; line-height: 1.5; }

.tabla-datos { overflow-x: auto; margin: 2em 0; border: 1px solid var(--linea); border-radius: 6px; }
.tabla-datos table { width: 100%; border-collapse: collapse; font-family: var(--texto); font-size: 15px; }
.tabla-datos th { text-align: left; font-weight: 600; font-size: 13px; color: var(--texto-2); background: var(--fondo-2); padding: 10px 14px; border-bottom: 1px solid var(--linea); }
.tabla-datos td { padding: 10px 14px; border-bottom: 1px solid var(--linea-2); }
.tabla-datos tr:last-child td { border-bottom: 0; }
.tabla-datos .num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.formula { font-family: var(--mono); font-size: 16px; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 6px; padding: 16px 20px; overflow-x: auto; }
.formula .nota { display: block; font-family: var(--texto); font-size: 13.5px; color: var(--texto-2); margin-top: 8px; }

.art-pie { border-top: 1px solid var(--linea); margin-top: 56px; padding-top: 28px; font-size: 14.5px; color: var(--texto-2); }
.art-pie h4 { font-family: var(--display); font-size: 1.05rem; color: var(--tinta); margin-bottom: 8px; }
.referencias { list-style: none; font-size: 14.5px; }
.referencias li { padding: 8px 0; border-bottom: 1px solid var(--linea-2); color: var(--texto-2); }

.lista-art { border-top: 1px solid var(--linea); margin-top: 48px; }
.lista-art a { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--linea); text-decoration: none; transition: background .3s var(--curva); }
.lista-art a:hover { background: var(--fondo-2); }
.lista-art .fecha { font-size: 13.5px; color: var(--sombra); padding-top: 6px; }
.lista-art h3 { margin-bottom: 6px; }
.lista-art p { color: var(--texto-2); font-size: 15.5px; max-width: 72ch; }
.lista-art .autor { font-size: 13.5px; color: var(--sombra); margin-top: 8px; }
.ver-todo { margin-top: 28px; font-weight: 600; }

.aviso { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 8px; padding: 22px 26px; font-size: 15.5px; color: var(--texto-2); }
.aviso b, .aviso strong { color: var(--tinta); }

/* ── 404 ──────────────────────────────────────────────────────────────── */
.error-404 { min-height: 100dvh; display: grid; place-items: center; background: var(--navy); color: #fff; padding: 120px 0; }
.error-404 h1 { color: #fff; max-width: 18ch; }
.error-404 p { margin-top: 18px; color: rgba(255, 255, 255, .8); }
.error-404 .acciones { margin-top: 32px; }

/* ── Control: sección navy con los cuatro compromisos ─────────────────── */
.oscura { background: var(--navy); color: #fff; }
.oscura .encabezado p { color: rgba(255, 255, 255, .76); }
.promesas { list-style: none; counter-reset: promesa; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--navy-linea); }
.promesas li { counter-increment: promesa; padding: 36px 40px 40px 0; border-bottom: 1px solid var(--navy-linea); }
.promesas li:nth-child(even) { padding: 36px 0 40px 40px; border-left: 1px solid var(--navy-linea); }
.promesas h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.15; color: #fff; max-width: 24ch; }
.promesas h3::before { content: counter(promesa); display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--celeste); margin-bottom: 14px; }
.promesas p { margin-top: 14px; color: rgba(255, 255, 255, .72); font-size: 16px; max-width: 46ch; }
.respaldo { margin-top: 48px; padding: 28px 32px; border: 1px solid rgba(155, 188, 238, .3); border-radius: 10px; background: rgba(155, 188, 238, .06); }
.respaldo p { max-width: 72ch; color: rgba(255, 255, 255, .78); font-size: 17px; }
.respaldo strong { color: var(--celeste); font-weight: 600; }
@media (max-width: 760px) {
  .promesas { grid-template-columns: 1fr; }
  .promesas li, .promesas li:nth-child(even) { padding: 28px 0; border-left: 0; }
}

/* ── Artículo publicado: resumen, abstract, índice, fórmulas y referencias ── */
.art-titulo-en { margin-top: 14px; font-family: var(--lectura); font-style: italic; font-size: 18px; color: var(--texto-2); max-width: 60ch; }
.art-acciones { margin-top: 26px; }
.btn-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--sombra); border-radius: 100px; font-size: 14.5px; font-weight: 600; color: var(--tinta); text-decoration: none; transition: background .25s ease, color .25s ease; }
.btn-pdf:hover { background: var(--navy); color: #fff; }
.art-resumen { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 10px; padding: 26px 30px; }
.art-resumen h2, .art-indice h2 { margin-top: 0; font-size: 1.35rem; }
.art-resumen p, .art-abstract p { font-size: 17px; }
.art-claves { font-family: var(--texto); font-size: 14.5px !important; color: var(--texto-2); }
.art-abstract { border: 1px solid var(--linea); border-radius: 10px; padding: 16px 30px; }
.art-abstract summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--tinta); }
.art-abstract[open] summary { margin-bottom: 12px; }
.art-abstract > * + * { margin-top: 1em; }
.art-indice { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 22px 0; font-family: var(--texto); font-size: 15.5px; }
.art-indice ol { list-style: none; padding-left: 0 !important; columns: 2; column-gap: 32px; margin-top: 10px; }
.art-indice li + li { margin-top: .35em; }
.art-indice a { text-decoration: none !important; }
.art-cuerpo section[id] > * + * { margin-top: 1.15em; }
.art-cuerpo .formula { white-space: pre; line-height: 1.6; font-size: 15px; }
.referencias-apa p { padding-left: 2em; text-indent: -2em; font-size: 16px; }
@media (max-width: 640px) { .art-indice ol { columns: 1; } .art-resumen, .art-abstract { padding-left: 20px; padding-right: 20px; } }
@media print {
  header, .menu-movil, footer, .saltar, .wa-flotante, .art-acciones, .art-indice, .hamburguesa { display: none !important; }
  .pagina-interior { padding-top: 0; }
  .art-cabecera { padding: 0 0 18px; }
  .art-cuerpo { padding: 18px 0 0; }
  .art-cuerpo .col { font-size: 11.5pt; max-width: none; }
  .art-abstract summary { list-style: none; }
  .tabla-datos, .formula, .art-resumen { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}