/* ============================================================================
   MAQUETA DE SITIO WEB — FIRMA JURÍDICA
   Hoja de estilos principal
   ----------------------------------------------------------------------------
   ÍNDICE
     01. Tokens de diseño (color, tipografía, espaciado)
     02. Reinicio y bases
     03. Utilidades y accesibilidad
     04. Tipografía de secciones
     05. Botones y enlaces
     06. Header / navegación
     07. Hero
     08. Estadísticas
     09. Nuestra historia
     10. Firma familiar
     11. Filosofía / método
     12. Áreas de práctica
     13. Visión jurídica integral (diagrama)
     14. Valores
     15. Equipo
     16. Frase institucional
     17. Contacto
     18. Footer
     19. WhatsApp flotante
     20. Modal
     21. Animaciones de aparición (reveal)
     22. Responsive
     23. Preferencias de movimiento reducido / impresión
   ========================================================================== */


/* ============================================================================
   01. TOKENS DE DISEÑO
   ========================================================================== */
:root {
  /* ---- Paleta ---- */
  --navy:        #221E1D;   /* grafito profundo — color institucional */
  --navy-700:    #2E2928;
  --navy-500:    #3D3735;
  --petrol:      #6E2F38;   /* granate — acento secundario */
  --petrol-600:  #5A2530;
  --slate:       #5C5350;   /* gris cálido neutro */
  --gold:        #6B2632;   /* burdeos oscuro — SOLO acento */
  --gold-soft:   #C98A93;
  --paper:       #F4F1F1;   /* gris piedra muy claro */
  --paper-2:     #ECE7E7;
  --line:        #DDD6D6;
  --warm-gray:   #6A6362;
  --ink:         #1F1B1A;
  --white:       #FFFFFF;

  /* ---- Tipografía ---- */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Montserrat", "Lato", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero:    clamp(2.5rem, 6.4vw, 5.1rem);
  --fs-h2:      clamp(1.85rem, 3.6vw, 3.05rem);
  --fs-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-quote:   clamp(1.5rem, 3.2vw, 2.6rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-tight:   1.12;
  --lh-title:   1.2;
  --lh-body:    1.78;

  --ls-wide:    0.18em;   /* interletraje para antetítulos */
  --ls-mid:     0.09em;
  --ls-btn:     0.13em;

  /* ---- Espaciado y medidas ---- */
  --section-y:  clamp(4.25rem, 8.5vw, 8.5rem);
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --maxw:       1220px;
  --maxw-text:  68ch;
  --header-h:   84px;
  --header-h-sm: 68px;
  --radius:     2px;       /* esquinas casi rectas: sobriedad */
  --radius-lg:  4px;

  /* ---- Transiciones ---- */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --t-fast:     .22s;
  --t-mid:      .38s;
  --t-slow:     .7s;

  /* ---- Sombras (muy discretas) ---- */
  --shadow-sm:  0 1px 2px rgba(34, 30, 29, .05), 0 6px 18px rgba(34, 30, 29, .05);
  --shadow-md:  0 2px 4px rgba(34, 30, 29, .06), 0 18px 44px rgba(34, 30, 29, .09);
}


/* ============================================================================
   02. REINICIO Y BASES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: -.005em;
  color: var(--navy);
}

p  { margin: 0 0 1.15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
img { border-radius: var(--radius); }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

::selection { background: rgba(107, 38, 50, .22); }


/* ============================================================================
   03. UTILIDADES Y ACCESIBILIDAD
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--paper  { background: var(--paper); }
.section--navy   { background: var(--navy);  color: rgba(255,255,255,.82); }
.section--petrol { background: var(--petrol); color: rgba(255,255,255,.84); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 300;
  padding: .7rem 1.15rem;
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mid);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: .75rem; }


/* ============================================================================
   04. TIPOGRAFÍA DE SECCIONES
   ========================================================================== */
.eyebrow {
  margin: 0 0 1.15rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--light { color: var(--gold-soft); }

.eyebrow::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  margin-top: .7rem;
  background: currentColor;
  opacity: .55;
}

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow::after { margin-inline: auto; }

.section__title { font-size: var(--fs-h2); }
.section__title--light { color: var(--white); }
.section__title--display { max-width: 34ch; }
.section__title em {
  font-style: italic;
  color: var(--gold);
}
.section__title--light em { color: var(--gold-soft); }

.section__subtitle {
  margin-top: 1.15rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--warm-gray);
}
.section__subtitle--light { color: rgba(255,255,255,.72); }

.prose { max-width: var(--maxw-text); color: var(--slate); }
.prose--wide { max-width: 60ch; }
.prose--light { color: rgba(255,255,255,.78); }
.prose p:last-child { margin-bottom: 0; }

.prose__highlight {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
}

.pullquote {
  margin: 0 0 1.85rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--gold);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--navy);
}


/* ============================================================================
   05. BOTONES Y ENLACES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm    { padding: .78rem 1.5rem; }
.btn--block { display: flex; width: 100%; }

/* Rótulo con icono: al ir ambos dentro del mismo elemento en línea, se
   mantienen centrados como un bloque cuando el texto ocupa varias líneas */
.btn__label { text-wrap: balance; }
.btn__label svg {
  display: inline-block;
  vertical-align: -.28em;
  margin-right: .55rem;
}

.btn--gold {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.btn--gold:hover { background: #541D26; border-color: #541D26; }

.btn--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.42);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.75);
}

/* Enlace "Conocer más" / "Ver perfil" con subrayado animado */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  padding-top: 1.35rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--navy);
  position: relative;
  align-self: flex-start;
  transition: color var(--t-fast) var(--ease);
}
.link-more::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.link-more:hover { color: var(--gold); }
.link-more:hover::after { transform: scaleX(1); }
.link-more span { transition: transform var(--t-mid) var(--ease); }
.link-more:hover span { transform: translateX(4px); }

.inline-link {
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  transition: color var(--t-fast) var(--ease);
}
.inline-link:hover { color: var(--gold); }


/* ============================================================================
   06. HEADER / NAVEGACIÓN
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: rgba(34, 30, 29, .0);
  transition: background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease);
}

/* Gradiente sutil para legibilidad sobre el hero */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,16,15,.55), rgba(20,16,15,0));
  transition: opacity var(--t-mid) var(--ease);
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  position: relative;
  z-index: 2;
  transition: height var(--t-mid) var(--ease);
}

/* Estado con scroll */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(34,30,29,.06);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
}
.site-header.is-scrolled::before { opacity: 0; }
.site-header.is-scrolled .header-inner { height: var(--header-h-sm); }

/* ---- Logotipo ---- */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.brand__logo {
  display: block;
  height: clamp(28px, 3.6vw, 38px);
  width: auto;
  /* El logotipo original es negro sobre transparente: se invierte a blanco
     mientras el header flota sobre el hero oscuro, y recupera su color
     natural en cuanto el header adopta fondo claro. */
  filter: brightness(0) invert(1);
  transition: filter var(--t-mid) var(--ease);
}
.site-header.is-scrolled .brand__logo,
.site-header.is-nav-open .brand__logo { filter: none; }

/* ---- Navegación ---- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.6rem);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 2.05rem);
}
.nav__link {
  position: relative;
  padding: .35rem 0;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  transition: color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--white); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.site-header.is-scrolled .nav__link { color: var(--slate); }
.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled .nav__link.is-active { color: var(--navy); }
.site-header.is-scrolled .nav__link::after { background: var(--gold); }

/* ---- Botón hamburguesa ---- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-toggle__bar {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--white);
  transition: transform var(--t-mid) var(--ease),
              opacity var(--t-fast) var(--ease),
              background var(--t-mid) var(--ease);
}
.site-header.is-scrolled .nav-toggle__bar,
.site-header.is-nav-open  .nav-toggle__bar { background: var(--navy); }

.site-header.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-header.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.is-nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---- Velo oscuro tras el panel de navegación móvil ----
   Se coloca por debajo del header (z-index 200) para que el logotipo siga
   legible, y por encima del contenido y del botón de WhatsApp. */
body.has-nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(20, 16, 15, .45);
  animation: veilIn var(--t-mid) var(--ease) both;
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Barra de progreso de lectura ---- */
.header-progress {
  height: 1.5px;
  width: 0;
  background: var(--gold);
  transition: width .1s linear;
  position: relative;
  z-index: 3;
}


/* ============================================================================
   07. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 100vh como respaldo; svh evita el salto por la barra de direcciones en móvil */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 3.5rem) 7rem;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

/* SUSTITUIR:FOTO — fotografía de fondo del hero.
   Descomentar la línea background-image y colocar el archivo en
   assets/images/hero.jpg (o .webp). Mientras no exista la fotografía,
   se muestra una composición de degradados sobria. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* background-image: url("../assets/images/hero.jpg"); */
  background-color: var(--navy);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  /* Composición provisional: velado arquitectónico */
  background-image:
    linear-gradient(105deg, rgba(110,47,56,.55) 0%, rgba(34,30,29,0) 58%),
    radial-gradient(120% 90% at 78% 18%, rgba(107,38,50,.20) 0%, rgba(107,38,50,0) 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 96px),
    linear-gradient(180deg, #2A2523 0%, #221E1D 55%, #191615 100%);
  transform: scale(1.04);
  animation: heroDrift 26s var(--ease-soft) infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.2%, 0); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(20,16,15,.86) 0%, rgba(20,16,15,.62) 46%, rgba(20,16,15,.38) 100%),
    linear-gradient(to top, rgba(20,16,15,.75) 0%, rgba(20,16,15,0) 45%);
}

.hero__inner { position: relative; max-width: 62rem; }

.hero__eyebrow {
  margin: 0 0 1.6rem;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-soft);
}

.hero__title {
  margin: 0 0 1.7rem;
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  color: var(--white);
  text-wrap: balance;
}
.hero__title em {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
}

.hero__lead {
  max-width: 44ch;
  margin: 0 0 1.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.05vw, 1.7rem);
  font-weight: 300;
  line-height: 1.48;
  color: rgba(255,255,255,.92);
}

.hero__text {
  max-width: 58ch;
  margin: 0 0 2.65rem;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(255,255,255,.7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Indicador de desplazamiento */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 2.25rem;
  transform: translateX(-50%);
  width: 24px; height: 56px;
  display: grid;
  place-items: center;
}
.hero__scroll-line {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(201,138,147,.9));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  animation: scrollHint 2.6s var(--ease-soft) infinite;
}
@keyframes scrollHint {
  0%        { transform: translateY(-100%); opacity: 0; }
  35%, 55%  { opacity: .85; }
  100%      { transform: translateY(100%); opacity: 0; }
}


/* ============================================================================
   08. ESTADÍSTICAS
   ========================================================================== */
.stats { background: var(--white); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}

.stat {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left-color: var(--gold); }

.stat__number {
  display: flex;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: clamp(3.1rem, 6.6vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.stat__prefix {
  font-size: .48em;
  font-weight: 300;
  color: var(--gold);
  margin-right: .08em;
  transform: translateY(-.35em);
}

.stat__label {
  display: block;
  margin-top: 1.1rem;
  max-width: 16ch;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--warm-gray);
}

.stats__note {
  max-width: 62ch;
  margin: clamp(2.75rem, 5vw, 4rem) 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: #8A857D;
}


/* ============================================================================
   09. NUESTRA HISTORIA
   ========================================================================== */
.history__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.history__media { position: relative; }

.portrait { margin: 0; position: relative; z-index: 2; }
.portrait--tall img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--paper-2);
  filter: saturate(.92) contrast(1.02);
}

/* ---- Marcador temporal mientras no hay fotografías de personas ----
   En lugar de un retrato, se muestra el emblema institucional centrado
   sobre un fondo neutro. Al incorporar la fotografía real, basta con
   quitar la clase .img-pending del <img>. */
.portrait--tall img.img-pending {
  object-fit: contain;
  padding: 16%;
  filter: none;
}

.portrait__caption {
  display: block;
  margin-top: 1.15rem;
  padding-left: 1rem;
  border-left: 1px solid var(--gold);
}
.portrait__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--navy);
}
.portrait__role {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--warm-gray);
}

/* Marco decorativo desplazado */
.history__frame {
  position: absolute;
  z-index: 1;
  top: clamp(-14px, -1.6vw, -22px);
  left: clamp(-14px, -1.6vw, -22px);
  width: 46%;
  height: 42%;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  opacity: .6;
  pointer-events: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2.15rem;
}
.chip {
  padding: .45rem .95rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,.65);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--slate);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--navy); }


/* ============================================================================
   10. FIRMA FAMILIAR
   ========================================================================== */
.family__text {
  max-width: 68ch;
  margin: 0 auto clamp(3rem, 6vw, 4.75rem);
  text-align: center;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.85;
  color: rgba(255,255,255,.76);
}

.lineage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  padding-top: 2.5rem;
}
/* Línea de continuidad generacional */
.lineage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(201,138,147,0) 0%,
    rgba(201,138,147,.55) 12%,
    rgba(201,138,147,.55) 88%,
    rgba(201,138,147,0) 100%);
}

.lineage__item { position: relative; padding-right: 1rem; }

.lineage__dot {
  position: absolute;
  top: -2.5rem;
  left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px rgba(201,138,147,.14);
}

.lineage__name {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--white);
  text-wrap: balance;
}
.lineage__role {
  margin: .55rem 0 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--gold-soft);
}
.lineage__note {
  margin: .7rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: rgba(255,255,255,.6);
}


/* ============================================================================
   11. FILOSOFÍA / MÉTODO
   ========================================================================== */
.philosophy__head { max-width: 58rem; }
.philosophy__head .prose { margin-top: 1.85rem; }

.method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.method__card {
  position: relative;
  padding: clamp(1.85rem, 3vw, 2.75rem) clamp(1.35rem, 2.2vw, 2rem);
  background: var(--white);
  transition: background var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.method__card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.method__card:hover { background: var(--paper); }
.method__card:hover::after { transform: scaleX(1); }

.method__step {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: .1em;
  color: var(--gold);
}
.method__title {
  margin: 1.35rem 0 .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--navy);
}
.method__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--warm-gray);
}


/* ============================================================================
   12. ÁREAS DE PRÁCTICA
   ========================================================================== */
.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}

.area-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.85rem, 2.8vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
/* Velado inferior que aparece al pasar el cursor */
.area-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.area-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: #D6CBCB;
}
.area-card:hover::before { transform: scaleX(1); }

.area-card__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--petrol);
  transition: color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
.area-card__icon svg { width: 26px; height: 26px; }
.area-card:hover .area-card__icon {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(107,38,50,.06);
}

.area-card__title {
  margin-bottom: .85rem;
  font-size: clamp(1.28rem, 1.75vw, 1.5rem);
  font-weight: 400;
  color: var(--navy);
}

.area-card__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--warm-gray);
}

/* Tarjeta de cierre de la retícula */
.area-card--cta {
  background: var(--navy);
  border-color: var(--navy);
  justify-content: center;
}
.area-card--cta .area-card__title { color: var(--white); }
.area-card--cta .area-card__text  { color: rgba(255,255,255,.66); }
.area-card--cta .link-more        { color: var(--gold-soft); }
.area-card--cta .link-more:hover  { color: var(--white); }
.area-card--cta::before { background: var(--gold-soft); }


/* ============================================================================
   13. VISIÓN JURÍDICA INTEGRAL (diagrama)
   ========================================================================== */
.integral__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.integral__body .prose { margin-top: 1.6rem; }
.integral__body .btn   { margin-top: 1.75rem; }

/* --- Composición: 7 áreas alrededor de un núcleo --- */
.orbit {
  --orbit-size: clamp(290px, 38vw, 430px);
  --orbit-r: calc(var(--orbit-size) * .375);
  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
  margin-inline: auto;
  flex-shrink: 0;
}

.orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.orbit__ring {
  fill: none;
  stroke: rgba(255,255,255,.22);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  transform-origin: 200px 200px;
  animation: ringSpin 90s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.orbit__spokes line {
  stroke: rgba(201,138,147,.42);
  stroke-width: 1;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.orbit.is-visible .orbit__spokes line { stroke-dashoffset: 0; }
.orbit__spokes line:nth-child(1) { transition-delay: .05s; }
.orbit__spokes line:nth-child(2) { transition-delay: .15s; }
.orbit__spokes line:nth-child(3) { transition-delay: .25s; }
.orbit__spokes line:nth-child(4) { transition-delay: .35s; }
.orbit__spokes line:nth-child(5) { transition-delay: .45s; }
.orbit__spokes line:nth-child(6) { transition-delay: .55s; }
.orbit__spokes line:nth-child(7) { transition-delay: .65s; }

.orbit__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42%; height: 42%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,138,147,.6);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.09), rgba(255,255,255,.02));
  text-align: center;
}
.orbit__core::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.orbit__core-text {
  font-family: var(--font-serif);
  font-size: clamp(.95rem, 1.45vw, 1.2rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--white);
}

.orbit__node {
  position: absolute;
  top: 50%; left: 50%;
  padding: .42rem .78rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  background: rgba(34,30,29,.72);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.9);
  /* Distribución radial: 360° / 7 ≈ 51.4286° */
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 51.4286deg))
    translateY(calc(var(--orbit-r) * -1))
    rotate(calc(var(--i) * -51.4286deg));
  transition: border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
.orbit__node:hover {
  border-color: var(--gold-soft);
  background: rgba(110,47,56,.9);
}


/* ============================================================================
   14. VALORES
   ========================================================================== */
/* Seis bloques en tres columnas: dos filas completas, sin celdas vacías */
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.value {
  padding: clamp(1.85rem, 3vw, 2.75rem);
  background: var(--white);
  transition: background var(--t-mid) var(--ease);
}
.value:hover { background: var(--paper); }

.value__num {
  display: block;
  font-family: var(--font-serif);
  font-size: .95rem;
  letter-spacing: .22em;
  color: var(--gold);
}
.value__title {
  margin: 1.15rem 0 .65rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 400;
  color: var(--navy);
}
.value__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--warm-gray);
}


/* ============================================================================
   15. EQUIPO
   ========================================================================== */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.15rem);
}

.member {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.member:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.member__photo {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}
.member__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  filter: saturate(.9) contrast(1.02);
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
.member:hover .member__photo img { transform: scale(1.035); filter: saturate(1) contrast(1.03); }

/* ---- Marcador temporal mientras no hay fotografías de personas ----
   En lugar del retrato, se muestra el emblema institucional centrado
   sobre un fondo neutro. Al incorporar la fotografía real, basta con
   quitar la clase .img-pending del <img>. */
.member__photo img.img-pending { object-fit: contain; padding: 18%; filter: none; }
.member:hover .member__photo img.img-pending { transform: none; filter: none; }

/* Velado inferior sobre la fotografía */
.member__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(34,30,29,.28), rgba(34,30,29,0));
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  pointer-events: none;
}
.member:hover .member__photo::after { opacity: 1; }

.member__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.75rem, 2.8vw, 2.35rem);
}
.member__name {
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  font-weight: 400;
  color: var(--navy);
  text-wrap: balance;
}
.member__role {
  margin: .5rem 0 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--gold);
}
.member__text {
  margin: .9rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--warm-gray);
}
.member .link-more { padding-top: 1.15rem; }

.team__institutional {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.team__institutional img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  background: var(--paper-2);
}
/* Marcador temporal mientras no hay fotografía institucional del equipo */
.team__institutional img.img-pending { object-fit: contain; padding: 6% 22%; }


/* ============================================================================
   16. FRASE INSTITUCIONAL
   ========================================================================== */
.statement {
  position: relative;
  padding-block: clamp(5rem, 11vw, 10rem);
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(110,47,56,.55), rgba(110,47,56,0) 60%),
    radial-gradient(70% 90% at 88% 100%, rgba(107,38,50,.16), rgba(107,38,50,0) 60%);
}

.statement__inner { max-width: 58rem; text-align: center; }

.statement__mark {
  margin: 0 0 -1.1rem;
  font-family: var(--font-serif);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  color: rgba(201,138,147,.4);
}

.statement__quote {
  margin: 0 auto;
  font-size: var(--fs-quote);
  font-weight: 300;
  font-style: italic;
  line-height: 1.42;
  color: var(--white);
  text-wrap: balance;
}

.statement__tag {
  margin: clamp(2rem, 4vw, 3rem) 0 2.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-soft);
}
.statement__tag::before {
  content: "";
  display: block;
  width: 46px; height: 1px;
  margin: 0 auto 1.5rem;
  background: rgba(201,138,147,.55);
}

/* El CTA lleva un texto largo ("Agendar una consulta por WhatsApp"): se le
   permite fluir en varias líneas para que no desborde en pantallas estrechas */
.statement .btn {
  max-width: 100%;
  white-space: normal;
}

/* ============================================================================
   17. CONTACTO
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

/* Los datos se reparten en columnas según el ancho disponible */
.contact__data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.85rem clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
}
.contact__item { display: grid; gap: .3rem; align-content: start; }
.contact__label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--gold);
}
.contact__value {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--navy);
  transition: color var(--t-fast) var(--ease);
}
a.contact__value:hover { color: var(--gold); }


/* ============================================================================
   18. FOOTER
   ========================================================================== */
.site-footer {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  background: #1A1615;
  color: rgba(255,255,255,.6);
  font-size: var(--fs-small);
}

/* La última columna (contacto) recibe más ancho: contiene la dirección
   completa, mientras que las de enlaces son de una sola palabra */
.footer__grid {
  display: grid;
  grid-template-columns: 1.25fr .8fr .8fr 1.35fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.brand--footer .brand__logo { height: clamp(26px, 3vw, 34px); }

.footer__tagline {
  margin: 1.25rem 0 0;
  max-width: 26ch;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: rgba(255,255,255,.55);
}

.footer__title {
  margin: 0 0 1.15rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--gold-soft);
}
.footer__title--spaced { margin-top: 2rem; }

.footer__list { display: grid; gap: .6rem; }
.footer__list a {
  position: relative;
  color: rgba(255,255,255,.6);
  transition: color var(--t-fast) var(--ease);
}
.footer__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.footer__list a:hover { color: var(--white); }
.footer__list a:hover::after { transform: scaleX(1); }
.footer__list--plain { color: rgba(255,255,255,.5); }

/* Dirección a varias líneas: interlineado más ajustado que el resto de la lista */
.footer__address { line-height: 1.55; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.65rem;
  border-top: 1px solid rgba(255,255,255,.09);
}
.footer__copy, .footer__disclaimer {
  margin: 0;
  font-size: .78rem;
  color: rgba(255,255,255,.42);
}
.footer__disclaimer { max-width: 52ch; text-align: right; }


/* ============================================================================
   19. WHATSAPP FLOTANTE
   ========================================================================== */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.85rem);
  bottom: clamp(1rem, 2.5vw, 1.85rem);
  z-index: 150;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              visibility var(--t-mid);
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.wa-float:hover { background: var(--petrol); transform: translateY(-3px); }


/* ============================================================================
   20. MODAL
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,16,15,.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 3.25rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(20,16,15,.35);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.modal.is-open .modal__dialog { opacity: 1; transform: translateY(0); }

.modal__close {
  position: absolute;
  top: .75rem; right: .95rem;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--warm-gray);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.modal__close:hover { color: var(--navy); transform: rotate(90deg); }

.modal__eyebrow {
  margin: 0 0 .85rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.modal__title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.modal__body { color: var(--slate); }
.modal__body p { font-size: .9375rem; line-height: 1.85; }
.modal__body ul {
  display: grid;
  gap: .55rem;
  margin: 0 0 1.35rem;
}
.modal__body li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9375rem;
  line-height: 1.75;
}
.modal__body li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--gold);
}
.modal__note {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--paper);
  border-left: 2px solid var(--gold);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--warm-gray);
}
.modal__cta { margin-top: 1.85rem; }


/* ============================================================================
   21. ANIMACIONES DE APARICIÓN (reveal)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--d1.is-visible { transition-delay: .09s; }
.reveal--d2.is-visible { transition-delay: .18s; }
.reveal--d3.is-visible { transition-delay: .27s; }
.reveal--d4.is-visible { transition-delay: .36s; }


/* ============================================================================
   22. RESPONSIVE
   ========================================================================== */

/* ---------- Escritorio reducido / tablet horizontal ---------- */
@media (max-width: 1080px) {
  .method       { grid-template-columns: repeat(2, 1fr); }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .lineage  { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  :root { --header-h: 74px; --header-h-sm: 64px; }

  /* Navegación móvil: panel lateral */
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 400px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + 2rem) clamp(1.75rem, 6vw, 2.75rem) 2.5rem;
    background: var(--white);
    box-shadow: -20px 0 60px rgba(20,16,15,.18);
    transform: translateX(100%);
    visibility: hidden;
    /* visibility se retrasa al cerrar (para no cortar la salida) y es
       inmediata al abrir (para que la entrada sí se vea) */
    transition: transform var(--t-mid) var(--ease),
                visibility 0s linear var(--t-mid);
    overflow-y: auto;
  }
  .site-header.is-nav-open .nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-mid) var(--ease),
                visibility 0s linear 0s;
  }

  /* El header se vuelve claro cuando el menú está abierto */
  .site-header.is-nav-open {
    background: rgba(255,255,255,.98);
    box-shadow: 0 1px 0 var(--line);
  }
  .site-header.is-nav-open::before { opacity: 0; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link {
    display: block;
    padding: 1.15rem 0;
    font-size: .8125rem;
    color: var(--slate);
  }
  .nav__link:hover, .nav__link.is-active { color: var(--navy); }
  .nav__link::after { background: var(--gold); }

  .nav__cta { margin-top: 2rem; }

  /* Secciones a una columna */
  .history__grid,
  .integral__grid { grid-template-columns: 1fr; }

  .history__media { max-width: 460px; }
  .integral__grid { gap: clamp(2.5rem, 6vw, 3.5rem); }
  /* En una sola columna el diagrama puede crecer: evita que las etiquetas
     inferiores (Amparo / Administrativo) queden demasiado próximas */
  .orbit { order: 2; --orbit-size: clamp(300px, 62vw, 430px); }

  .footer__disclaimer { text-align: left; }
}

/* ---------- Móvil ---------- */
@media (max-width: 680px) {
  :root { --lh-body: 1.72; }

  .hero { min-height: 92svh; padding-block: calc(var(--header-h) + 2.5rem) 5.5rem; }
  .hero__actions .btn { width: 100%; }

  .hero__scroll { display: none; }

  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat { padding-left: 1rem; }
  .stat__label { max-width: 14ch; }

  .method       { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }
  .lineage { grid-template-columns: 1fr; row-gap: 2.25rem; padding-top: 2rem; }
  .lineage::before { display: none; }
  .lineage__item { padding-left: 1.35rem; padding-right: 0; }
  .lineage__item::before {
    content: "";
    position: absolute;
    left: 0; top: .55rem; bottom: 0;
    width: 1px;
    background: rgba(201,138,147,.32);
  }
  .lineage__dot { top: .55rem; left: -3px; transform: none; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .modal__dialog { max-height: 90vh; }
}

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat__label { max-width: none; }
}

/* ---------- Pantallas amplias ---------- */
@media (min-width: 1500px) {
  :root { --maxw: 1320px; }
}


/* ============================================================================
   23. PREFERENCIAS DE MOVIMIENTO REDUCIDO / IMPRESIÓN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .orbit__spokes line { stroke-dashoffset: 0; }
  .hero__media { animation: none; transform: none; }
}

@media print {
  .site-header, .wa-float, .modal, .hero__scroll,
  .nav-toggle { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: auto; padding-block: 2rem; background: #fff; }
  .hero__media, .hero__overlay { display: none; }
  .hero__title, .hero__lead, .hero__text { color: #000 !important; }
  .brand__logo { filter: none !important; }
  .section--navy, .section--petrol, .statement, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .section__title--light, .statement__quote, .lineage__name { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}