/* =========================================================================
   Dr. Aníbal Navarro Escobar — Página personal del perito
   One-pager estático. Identidad: paleta ecosistema CEF + Nunito Sans.
   Patrones heredados del sitio FCMF (tokens :root, BEM en español, AA).
   ========================================================================= */

:root {
  /* ---- Paleta de marca (ecosistema CEF) ---- */
  --azul:   #00324B;   /* Deep Space Blue — principal */
  --teal:   #005866;   /* Dark Teal — secundario */
  --mist:   #58A79D;   /* Ocean Mist — acento decorativo */
  --frost:  #B8E6E6;   /* Frosted Blue — fondos suaves / claro sobre oscuro */
  --whatsapp: #25D366; /* Verde WhatsApp — SOLO botón de WhatsApp */

  /* ---- Alias de rol ---- */
  --navy:   var(--azul);
  --corp:   var(--teal);
  --medio:  var(--teal);   /* texto/enlace con requisito AA */
  --acento: var(--mist);   /* decorativo */
  --claro:  var(--frost);
  --palido: #E6F4F4;       /* frosted muy claro */

  --negro:       #0D0D0D;
  --gris-texto:  #2B2B2B;
  --gris-medio:  #566468;  /* gris azulado, AA sobre blanco */
  --gris-claro:  #D5D8DC;
  --blanco:      #FFFFFF;

  /* Roles */
  --texto:       #14313d;
  --texto-suave: #3f5258;
  --fondo:       #ffffff;
  --fondo-alt:   #eef6f6;

  --maxw: 1080px;
  --radio: 12px;
  --sombra: 0 6px 24px rgba(0, 50, 75, .10);
  --sombra-fuerte: 0 14px 40px rgba(0, 50, 75, .18);
  --transicion: .2s ease;

  --fuente: "Nunito Sans", Arial, "Segoe UI", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-weight: 400;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.65;
  font-size: 1.05rem;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--corp); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--medio); }
h1, h2, h3, h4 { line-height: 1.2; color: var(--navy); margin: 0 0 .5em; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 5.5vw, 3.3rem); letter-spacing: -.015em; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3.5vw, 2.15rem); letter-spacing: -.01em; }
h3 { font-weight: 700; font-size: 1.18rem; }
p  { margin: 0 0 1rem; max-width: 70ch; }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 3px solid var(--medio); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--navy); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.contenedor { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura { background: var(--navy); color: var(--palido); }
.seccion--oscura h2 { color: #fff; }
.seccion--oscura p { color: var(--palido); }
.seccion__intro { max-width: 62ch; margin-bottom: 2.5rem; }
.seccion__intro--centrada { max-width: 56ch; margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--medio); margin-bottom: .8rem;
}
.eyebrow--claro { color: var(--claro); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--fuente); font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: .8rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: all var(--transicion); text-align: center;
}
.btn svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.btn--grande { padding: 1rem 1.8rem; font-size: 1.06rem; }
.btn--primario { background: var(--medio); color: #fff; }
.btn--primario:hover { background: var(--azul); color: #fff; transform: translateY(-1px); }
.btn--whatsapp { background: var(--whatsapp); color: #05391f; }
.btn--whatsapp:hover { background: #1ebe5a; color: #05391f; transform: translateY(-1px); box-shadow: var(--sombra); }
.btn--contorno { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--contorno:hover { background: var(--navy); color: #fff; }
.btn--claro { background: #fff; color: var(--navy); }
.btn--claro:hover { background: var(--palido); color: var(--navy); transform: translateY(-1px); }
.btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--fantasma:hover { background: rgba(255,255,255,.12); color: #fff; }

/* =========================================================================
   Cabecera / navegación  (sticky discreto, SIN blur — ver bitácora §2)
   ========================================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--gris-claro);
}
.cabecera__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .55rem 0; min-height: 64px;
}
.cabecera__logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--navy); }
.cabecera__logo:hover { color: var(--navy); }
.cabecera__monograma {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .03em;
}
.cabecera__nombre { font-weight: 800; font-size: 1.02rem; line-height: 1.1; color: var(--navy); }
.cabecera__nombre span { font-weight: 600; color: var(--medio); }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav__lista { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.nav__lista a {
  color: var(--gris-texto); font-weight: 600; font-size: .92rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav__lista a:hover { color: var(--navy); border-bottom-color: var(--acento); }
.cabecera__cta { padding: .55rem 1.1rem; font-size: .92rem; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .4rem; color: var(--navy);
}
.nav__toggle svg { width: 28px; height: 28px; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  /* Capas: gradiente de marca translúcido (arriba) + textura IA (medio) + gradiente sólido
     de respaldo (abajo). Si falta hero-fondo.jpg (404), el gradiente sólido se ve igual. */
  background:
    linear-gradient(135deg, rgba(0,38,58,.90) 0%, rgba(0,50,75,.80) 45%, rgba(0,88,102,.76) 100%),
    url("../assets/img/hero-fondo.jpg") center / cover no-repeat,
    linear-gradient(135deg, #00263a 0%, var(--azul) 45%, var(--teal) 100%);
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(rgba(184,230,230,.10) 1.2px, transparent 1.2px) 0 0 / 26px 26px,
    radial-gradient(900px 400px at 80% -10%, rgba(88,167,157,.22), transparent 60%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.hero .eyebrow { color: var(--claro); }
.hero h1 { color: #fff; margin-bottom: .35rem; }
.hero__rol { font-size: 1.12rem; font-weight: 600; color: var(--frost); margin: 0 0 1.2rem; max-width: 40ch; }
.hero__sub { font-size: 1.1rem; color: #e9f5f5; margin: 0 0 2rem; max-width: 52ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero__sello {
  display: inline-flex; align-items: center; gap: .55rem; margin: 2rem 0 0;
  font-size: .92rem; font-weight: 600; color: var(--claro);
  border-left: 3px solid var(--acento); padding-left: .9rem; max-width: 46ch;
}
.hero__sello svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--acento); }

/* Retrato (placeholder hasta tener la foto real) */
.hero__retrato { margin: 0; }
.hero__retrato img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px; box-shadow: var(--sombra-fuerte);
  border: 1px solid rgba(255,255,255,.15);
}
.retrato-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: 16px; border: 1px dashed rgba(184,230,230,.45);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(88,167,157,.18), transparent 70%),
    rgba(255,255,255,.04);
  text-align: center; box-shadow: var(--sombra-fuerte);
}
.retrato-ph__mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 2px solid var(--acento);
  color: #fff; font-weight: 800; font-size: 2.1rem; letter-spacing: .04em;
}
.retrato-ph__nota { color: var(--claro); font-size: .9rem; line-height: 1.4; opacity: .85; }

/* =========================================================================
   Sobre mí — bio + credenciales
   ========================================================================= */
.dos-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: start; }
.dos-col--sobre { grid-template-columns: 1.35fr .65fr; }
.dos-col__texto > :last-child { margin-bottom: 0; }

/* Foto de pareja (Sobre mí) */
.sobre__foto { margin: 0; }
.sobre__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.sobre__foto figcaption {
  margin-top: .6rem; font-size: .82rem; color: var(--gris-medio); line-height: 1.4;
}

.credenciales {
  list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(5, 1fr);
}
.credenciales li {
  background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radio);
  padding: 1.1rem 1.2rem; box-shadow: var(--sombra);
}
.credenciales__num { display: block; font-size: 1.9rem; font-weight: 800; color: var(--teal); line-height: 1; }
.credenciales__num--sm { font-size: 1.25rem; }
.credenciales__label { display: block; margin-top: .35rem; color: var(--texto-suave); font-size: .9rem; }

/* =========================================================================
   Tarjetas (pericia / docencia)
   ========================================================================= */
.grid { display: grid; gap: 1.4rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.tarjeta {
  background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radio);
  padding: 1.5rem; box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,50,75,.13); }
.tarjeta__icono { width: 44px; height: 44px; margin-bottom: 1rem; color: var(--acento); }
.tarjeta__icono svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta h3 { margin-bottom: .45rem; }
.tarjeta p { color: var(--texto-suave); font-size: .96rem; margin: 0; }
.tarjeta__cta { display: inline-block; margin-top: 1rem; font-weight: 700; }
.tarjeta--cta {
  background: var(--navy); color: #fff; border-color: var(--navy);
  display: flex; flex-direction: column; justify-content: center;
}
.tarjeta--cta h3 { color: #fff; }
.tarjeta--cta p { color: var(--palido); }
.tarjeta--cta .tarjeta__cta { color: var(--frost); }
.tarjeta--cta .tarjeta__cta:hover { color: #fff; }

/* =========================================================================
   Producción científica — referencias
   ========================================================================= */
/* Banda decorativa de sección */
.banda { margin: 0 0 2.5rem; }
.banda img {
  width: 100%; height: clamp(120px, 18vw, 200px); object-fit: cover;
  border-radius: var(--radio); box-shadow: var(--sombra); display: block;
}

.ciencia { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; align-items: start; }
.ciencia__titulo { font-size: 1.05rem; color: var(--navy); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--acento); }
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: ref; }
.refs li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.refs p { margin: 0; font-size: .96rem; color: var(--texto-suave); }
.refs strong { color: var(--navy); }
.refs__anio {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  color: var(--teal); background: var(--palido); border-radius: 6px;
  padding: .25rem .5rem; white-space: nowrap; min-width: 3.4rem; text-align: center;
}
.refs--num li { counter-increment: ref; }
.ciencia__nota { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--gris-claro); }
.ciencia__nota p { font-size: .92rem; color: var(--texto-suave); }
.ciencia__scholar { font-style: italic; }

/* =========================================================================
   En medios
   ========================================================================= */
.medios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.medios__item {
  background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra); transition: transform var(--transicion), box-shadow var(--transicion);
}
.medios__item:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,50,75,.13); }
.medios__item h3 { font-size: 1.05rem; margin: .2rem 0 .4rem; }
.medios__item p { font-size: .94rem; color: var(--texto-suave); margin: 0; }
.medios__tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .3rem;
}
.medios__item--destacado {
  grid-column: span 2; border-color: var(--acento); border-width: 2px;
  background: linear-gradient(120deg, #fff 60%, var(--palido));
}
.medios__item--destacado h3 { font-size: 1.25rem; }
.medios__nota { margin-top: 1.6rem; font-size: .88rem; color: var(--gris-medio); font-style: italic; }
.medios--simple { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.medios--simple .medios__item { display: flex; flex-direction: column; align-items: flex-start; }
.medios--simple .tarjeta__cta { margin-top: auto; padding-top: .6rem; }

/* Videos incrustados (responsivos 16:9) */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 1.6rem; }
.video { margin: 0; }
.video__marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: #000; }
.video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: .6rem; font-size: .9rem; color: var(--texto-suave); line-height: 1.4; }
.video__medio { display: block; font-weight: 800; color: var(--navy); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
@media (max-width: 960px) { .videos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .videos { grid-template-columns: 1fr; } }

/* =========================================================================
   Artículos (blog migrado) — índice y páginas individuales
   ========================================================================= */
.articulo { max-width: 760px; margin: 0 auto; }
.articulo__volver { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; margin-bottom: 1.4rem; }
.articulo__hero { margin: 0 0 1.8rem; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.articulo__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.articulo__meta { font-size: .85rem; color: var(--gris-medio); margin-bottom: 1.8rem; }
.articulo h1 { margin-bottom: .35rem; }
.articulo h2 { margin-top: 2.2rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.articulo h3 { margin-top: 1.5rem; color: var(--teal); font-size: 1.12rem; }
.articulo p { font-size: 1.06rem; }
.articulo ul { padding-left: 1.2rem; margin: 0 0 1.1rem; }
.articulo li { margin-bottom: .4rem; color: var(--texto-suave); }
.articulo__video { margin: 1.6rem 0; }
.articulo__cta { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--gris-claro); display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.articulos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.articulo-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform var(--transicion), box-shadow var(--transicion); }
.articulo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,50,75,.13); }
.articulo-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.articulo-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.articulo-card__tag { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.articulo-card h3 { margin: .3rem 0 .5rem; font-size: 1.1rem; }
.articulo-card p { font-size: .95rem; color: var(--texto-suave); margin: 0 0 1rem; }
.articulo-card__cta { margin-top: auto; font-weight: 700; }
@media (max-width: 900px) { .articulos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .articulos-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Contacto
   ========================================================================= */
.contacto__cta { text-align: center; margin: 0 auto 2.5rem; }
.contacto { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: start; }
.formulario { display: grid; gap: 1rem; background: rgba(255,255,255,.06); padding: 1.6rem; border-radius: var(--radio); border: 1px solid rgba(255,255,255,.12); }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: .9rem; color: #fff; }
.campo input, .campo textarea, .campo select {
  font-family: var(--fuente); font-size: 1rem; padding: .7rem .85rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: #fff; color: var(--texto);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); }
.contacto__directo { display: grid; gap: .85rem; align-content: start; }
.contacto__directo--centrado { max-width: 480px; margin: 0 auto; text-align: center; }
.contacto__directo--centrado .contacto__item { justify-content: center; }
.contacto__directo--centrado .redes { justify-content: center; }
.contacto__directo h3 { color: #fff; }
.contacto__item { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.contacto__item svg { width: 22px; height: 22px; color: var(--acento); flex: 0 0 auto; margin-top: .2rem; }
.contacto__item a, .contacto__item span { overflow-wrap: anywhere; min-width: 0; color: var(--palido); }
.contacto__item a:hover { color: #fff; }
.aviso-form { font-size: .82rem; color: var(--palido); margin: 0; }
.aviso-form a { color: var(--frost); text-decoration: underline; }
.redes { display: flex; gap: .7rem; margin-top: .6rem; }
.redes__item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.redes__item svg { width: 20px; height: 20px; }
.redes__item:hover { background: var(--acento); color: var(--navy); border-color: var(--acento); }
.redes__nota { font-size: .8rem; color: var(--palido); opacity: .8; margin: .2rem 0 0; }

/* =========================================================================
   Pie de página
   ========================================================================= */
.pie { background: #00263a; color: var(--palido); padding: 3rem 0 1.5rem; }
.pie a { color: var(--claro); }
.pie a:hover { color: #fff; }
.pie__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.pie__logo { font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: .8rem; }
.pie__desc { color: var(--palido); font-size: .92rem; max-width: 42ch; }
.pie h4 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .94rem; overflow-wrap: anywhere; }
.pie__legal {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .84rem; color: var(--gris-claro);
}

/* =========================================================================
   Sticky CTA móvil (barra inferior fija)
   ========================================================================= */
.cta-movil {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  align-items: center; justify-content: center; gap: .6rem;
  background: var(--whatsapp); color: #05391f; font-weight: 800; font-size: 1.02rem;
  padding: .95rem 1rem; box-shadow: 0 -4px 20px rgba(0,0,0,.18);
}
.cta-movil svg { width: 1.4em; height: 1.4em; }

/* =========================================================================
   Animación de entrada (fade-in al hacer scroll)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__retrato { max-width: 320px; margin-inline: auto; }
  .ciencia { grid-template-columns: 1fr; gap: 1.8rem; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .credenciales { grid-template-columns: repeat(3, 1fr); }
  .sobre__foto { max-width: 360px; margin-inline: auto; }
  .medios { grid-template-columns: repeat(2, 1fr); }
  .medios__item--destacado { grid-column: span 2; }
}
@media (max-width: 820px) {
  .nav__lista, .cabecera__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav--abierto .nav__lista {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 64px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--gris-claro); box-shadow: var(--sombra);
    padding: .5rem 1.5rem 1rem;
  }
  .nav--abierto .nav__lista a { padding: .85rem 0; border-bottom: 1px solid var(--gris-claro); }
  .dos-col, .contacto { grid-template-columns: 1fr; gap: 1.8rem; }
  .cabecera__nombre span { display: none; }
}
@media (max-width: 680px) {
  .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .credenciales { grid-template-columns: repeat(2, 1fr); }
  .medios { grid-template-columns: 1fr; }
  .medios__item--destacado { grid-column: span 1; }
  .pie__grid { grid-template-columns: 1fr; }
  .hero__acciones .btn { width: 100%; }
  .cta-movil { display: flex; }
  body { padding-bottom: 64px; } /* deja espacio para la barra fija */
  .pie__legal { padding-bottom: 1rem; }
}
@media (max-width: 420px) {
  .cabecera__nombre { font-size: .92rem; }
  .cta-movil span { font-size: .95rem; }
}

/* Respeto a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}