/* Fuentes alojadas en el propio sitio (sin pedirlas a Google): más rápido y sin bloquear el pintado.
   Cormorant Garamond e Inter — licencia SIL Open Font License. Solo el subconjunto latino (cubre el español). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   LG Soluciones Jurídicas — hoja de estilos
   Sitio estático. Animaciones ligadas al scroll con CSS + JS.
   ========================================================= */

:root {
  --navy-950: #0b1220;
  --navy-900: #0f1b2d;
  --navy-800: #16263d;
  --navy-700: #1f3350;
  --gold: #c8a45c;
  --gold-text: #85651d; /* dorado oscuro para texto sobre fondos claros (contraste 4.8:1) */
  --gold-soft: #e3c98f;
  --cream: #f6f2e9;
  --paper: #fbfaf6;
  --ink: #1a1c22;
  --muted: #5b6472;
  --line: #e4ddcf;

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 1120px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 18px 50px -24px rgba(15, 27, 45, 0.35);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.4em;
  letter-spacing: 0.2px;
}

h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-text);
  margin: 0 0 1rem;
}
.hero .eyebrow, .blog-hero .eyebrow { color: var(--gold); }

/* Variante grande del rótulo superior (p. ej. "Nuestra firma") */
.eyebrow--lg {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: 0.2em;
  margin-bottom: 1.2rem;
}

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }

.section-head {
  max-width: 640px;
  margin-bottom: 3rem;
}
.section-sub { color: var(--muted); font-size: 1.05rem; }
.section-head--light .eyebrow { color: var(--gold-soft); }
.section-head--light h2 { color: var(--cream); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-primary {
  background: var(--gold);
  color: var(--navy-950);
  box-shadow: 0 12px 30px -12px rgba(200, 164, 92, 0.7);
}
.btn-primary:hover { background: var(--gold-soft); transform: translateY(-3px); }
.btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); transform: translateY(-3px); }
.btn-block { width: 100%; }
[data-magnetic] { transition: transform 0.3s var(--ease); }

/* =========================================================
   HEADER
   ========================================================= */
#topSentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.4rem 0;
  transition: padding 0.3s var(--ease);
}
/* El fondo va en una capa propia (::before): si el encabezado tuviera backdrop-filter,
   el menú móvil (position: fixed) se mediría contra el encabezado y no contra la pantalla. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 18, 32, 0);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck { padding: 0.7rem 0; }
.site-header.is-stuck::before {
  background: rgba(11, 18, 32, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 0.75rem; color: #fff; }
.brand-mark {
  display: block;
  width: 56px;
  height: 47px;
  flex: none;
  background: url("../img/logo-mark.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
/* Letras del logo ("LG SOLUCIONES JURÍDICAS S.A.S.") tomadas de la imagen oficial; el texto real
   queda en el HTML solo para lectores de pantalla y buscadores. */
.brand-text {
  position: relative;
  display: block;
  width: clamp(150px, 46vw, 215px);
  aspect-ratio: 800 / 58;
  background: url("../img/logo-word.png") left center / contain no-repeat;
}
.brand-text > *, .footer-brand p {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  transition: color 0.2s var(--ease);
}
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.main-nav a:not(.nav-cta):hover { color: #fff; }
.main-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-cta:hover { background: var(--gold); color: var(--navy-950); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Barra de progreso ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 120;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width 0.1s linear;
}

/* =========================================================
   CORTINA DE ENTRADA
   ========================================================= */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-950);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.curtain.is-open { transform: translateY(-100%); }
.curtain-mark {
  display: block;
  width: min(66vw, 300px);
  aspect-ratio: 900 / 654;
  background: url("../img/logo.png") center / contain no-repeat;
}

/* =========================================================
   CURSOR PERSONALIZADO (escritorio con mouse, sin reduced-motion)
   ========================================================= */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* por encima de ventanas emergentes (p. ej. el captcha de descarga, z-index 400) */
  pointer-events: none;
  display: none;
}
html.has-hover:not(.reduce-motion) .cursor-dot,
html.has-hover:not(.reduce-motion) .cursor-ring {
  display: block;
}
html.has-hover:not(.reduce-motion) body,
html.has-hover:not(.reduce-motion) a,
html.has-hover:not(.reduce-motion) button {
  cursor: none;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.cursor-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 92, 0.55);
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
    border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cursor-ring.is-active {
  width: 64px;
  height: 64px;
  background: rgba(200, 164, 92, 0.12);
  border-color: var(--gold);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 9rem 0 6rem;
  overflow: hidden;
  background: radial-gradient(120% 120% at 20% 0%, var(--navy-800), var(--navy-950) 60%);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; perspective: 1200px; overflow: hidden; }
.hero-tilt {
  position: absolute;
  inset: -6%;
  will-change: transform;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-1920.jpg");
  background-repeat: no-repeat;
  background-position: center 22%;
  background-size: 126% auto;
  background-color: var(--navy-900);
  animation: kenburns 16s var(--ease) forwards;
  will-change: transform, background-size;
}
/* Rendimiento sin cambiar el aspecto: el zoom lento arranca cuando la página terminó de cargar
   (main.js añade la clase "is-loaded"), así no compite con el primer pintado. Sin JavaScript corre normal. */
.js .hero-media { animation-play-state: paused; }
.js.is-loaded .hero-media { animation-play-state: running; }
@media (max-width: 900px) {
  .hero-media { background-image: url("../img/hero-960.jpg"); }
}
@keyframes kenburns {
  from { background-size: 138% auto; }
  to { background-size: 116% auto; }
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 30%),
    rgba(232, 201, 143, 0.95), rgba(232, 201, 143, 0.25) 38%, transparent 68%);
  will-change: background;
  pointer-events: none;
}
.hero-glow.is-active { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.5) 0%, rgba(11, 18, 32, 0.86) 55%, var(--navy-950) 96%),
    radial-gradient(45% 50% at 80% 15%, rgba(200, 164, 92, 0.2), transparent 70%),
    radial-gradient(45% 45% at 10% 90%, rgba(60, 100, 160, 0.25), transparent 70%);
}
.hero-grain {
  position: absolute; inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero-content { position: relative; z-index: 2; max-width: 760px; }
.hero-title {
  font-size: clamp(2.6rem, 6.5vw, 5.1rem);
  margin: 0.6rem 0 1.4rem;
}
.hero-title .line { display: block; }
.hero-title .line--accent { color: var(--gold-soft); font-style: italic; }

.hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 40ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 3rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  /* el número se anima: aislarlo evita recalcular el diseño de todo el hero en cada fotograma */
  contain: layout style;
  font-variant-numeric: tabular-nums;
}
.hero-stats dd { margin: 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}
.scroll-hint-dot {
  width: 22px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  position: relative;
}
.scroll-hint-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  background: var(--gold-soft);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: hintMove 1.8s var(--ease) infinite;
}
@keyframes hintMove {
  0% { opacity: 0; transform: translate(-50%, -4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* =========================================================
   NOSOTROS
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split--contact { align-items: start; }

.split-media { position: relative; padding-bottom: 1.5rem; }

.media-photo {
  position: relative;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.img-reveal { position: absolute; inset: 0; overflow: hidden; }
.img-reveal-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 15%;
  background-color: var(--navy-800);
  transform: scale(1.14);
  transition: transform 1.1s var(--ease);
}
.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.9s var(--ease) 0.05s;
}
.img-reveal.is-visible::after { transform: scaleX(0); }
.img-reveal.is-visible .img-reveal-bg { transform: scale(1); }

.media-card {
  position: relative;
  z-index: 2;
  margin-top: -3.2rem;
  margin-left: 2.6rem;
  background: linear-gradient(155deg, var(--navy-800), var(--navy-950));
  color: #fff;
  border-radius: var(--radius);
  padding: 2.6rem 2.2rem;
  box-shadow: var(--shadow-soft);
  will-change: transform;
}
.media-quote p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--cream);
}
.media-quote cite { font-family: var(--font-sans); font-style: normal; font-size: 0.85rem; color: var(--gold-soft); }
/* Credenciales: dos distintivos dorados que se apoyan sobre la esquina de la tarjeta.
   Van en el flujo normal (no absolutos) y por encima de la tarjeta (z-index), así nunca quedan
   tapados ni salen de pantalla, en escritorio y en móvil. */
.media-badges {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  width: fit-content;
  max-width: calc(100% - 1rem);
  margin: -1.7rem 0.4rem 0 auto;
  will-change: transform;
}
.media-badge {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, #b58f43);
  color: var(--navy-950);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.75rem 1.1rem 0.75rem 0.9rem;
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(11, 18, 32, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.media-badge::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--navy-950);
  transform: rotate(45deg);
  border-radius: 1px;
}
/* brillo que cruza el distintivo */
.media-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
/* aparición al desplazarse: entra desde la derecha, uno tras otro */
.media-badges .media-badge[data-reveal] {
  opacity: 0;
  transform: translateX(46px) scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.media-badges .media-badge[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  /* flotación suave (propiedad "translate": no choca con la entrada, que usa "transform") */
  animation: badgeFloat 5.5s ease-in-out 1.4s infinite;
}
.media-badges .media-badge[data-reveal].is-visible:nth-child(2) { animation-delay: 2.8s; }
.media-badges .media-badge[data-reveal].is-visible::after {
  animation: badgeShine 6.5s ease-in-out 1s infinite;
}
.media-badges .media-badge[data-reveal].is-visible:nth-child(2)::after { animation-delay: 2.2s; }
@keyframes badgeFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes badgeShine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.check-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.8rem;
  color: var(--muted);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* =========================================================
   MARQUESINA
   ========================================================= */
.marquee {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.5);
  padding: 1.1rem 0;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  animation: marquee 32s linear infinite;
}
.marquee-track span:nth-child(even) { color: var(--gold); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* =========================================================
   ÁREAS
   ========================================================= */
.areas { background: var(--cream); }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}
.card-num {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--gold-text);
  letter-spacing: 0.1em;
}
.card h3 { margin: 0.6rem 0 0.5rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.96rem; }
.card .card-text { margin-top: 0.7rem; color: var(--ink); font-size: 1.02rem; line-height: 1.55; }
/* tarjetas de la portada: texto corto + 3 puntos, todas de la misma altura y con "Ver área" abajo */
.cards .card { display: flex; flex-direction: column; }
/* toda la tarjeta de la portada es un enlace (al área o al contacto): el enlace del título se estira sobre la tarjeta */
.cards .card { position: relative; }
.cards .card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.cards .card h3 a:focus-visible { outline: none; }
.cards .card h3 a:focus-visible::after { outline: 3px solid var(--gold); outline-offset: 3px; }
.card-points { list-style: none; margin: 1.05rem 0 0.4rem; padding: 0; display: grid; gap: 0.5rem; }
.card-points li { position: relative; padding-left: 1.15rem; color: var(--ink); font-size: 0.92rem; line-height: 1.45; }
.card-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.4rem; height: 0.4rem; background: var(--gold); transform: rotate(45deg); }

/* =========================================================
   PROCESO (pin + progreso)
   ========================================================= */
.proceso { background: var(--paper); }
.proceso-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}
.proceso-sticky {
  position: sticky;
  top: 140px;
}
.proceso-counter {
  font-family: var(--font-serif);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* ---- Número y nombre de la etapa actual, con la barra de progreso ---- */
.proceso-progress { margin-top: 1.4rem; }
.stage-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
}
.proceso-progress .proceso-counter { margin: 0; gap: 0.35rem; }
.proceso-progress #procesoNum { color: var(--gold-text); font-size: clamp(2.6rem, 5vw, 3.6rem); }
.proceso-progress .proceso-total { color: var(--muted); }
.stage-label {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-900);
}
.proceso-progress .proceso-track { margin-top: 0.9rem; }
#procesoNum { font-size: 4.5rem; font-weight: 700; color: var(--navy-900); line-height: 1; }
.proceso-total { font-size: 1.2rem; color: var(--muted); }
.proceso-track {
  margin-top: 1.2rem;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.proceso-track span {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}

.proceso-steps { list-style: none; margin: 0; padding: 0; }
.proceso-step {
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
  opacity: 0.8;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transform: translateY(8px);
}
.proceso-step:last-child { border-bottom: 1px solid var(--line); }
.proceso-step.is-active { opacity: 1; transform: none; }
.proceso-step h3 { position: relative; }
.proceso-step h3::before {
  content: attr(data-step);
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
}
.proceso-step p { color: #3f4756; margin: 0; }

/* =========================================================
   EQUIPO
   ========================================================= */
.equipo { background: var(--cream); }
/* ---- Equipo: tarjetas oscuras con entrada en 3D, brillo que las recorre, borde dorado que gira,
   foco de luz que sigue al puntero (con mouse) y se activan solas al pasar por el centro de la pantalla (celular). ---- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.7rem;
  perspective: 1400px;
}
.team-card { position: relative; }
/* entrada: sube desde atrás, se endereza y se enfoca; cada tarjeta con su retraso */
.team-card[data-reveal] {
  opacity: 0;
  transform: translateY(80px) rotateX(18deg) scale(0.94);
  transform-origin: 50% 100%;
  filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 1.15s var(--ease), filter 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.team-card[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

.team-card-in {
  --mx: 50%;
  --my: -30%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  padding: 2.5rem 1.9rem 2.2rem;
  border-radius: calc(var(--radius) + 4px);
  color: #fff;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.11) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat,
    radial-gradient(120% 90% at 20% 0%, #213a5c 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  box-shadow: inset 0 0 0 1px rgba(227, 201, 143, 0.2), 0 28px 50px -30px rgba(11, 18, 32, 0.7);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.25s ease-out, box-shadow 0.4s ease;
}
.team-card-in:hover { box-shadow: inset 0 0 0 1px rgba(227, 201, 143, 0.35), 0 34px 60px -28px rgba(200, 164, 92, 0.45); }
/* borde dorado que da la vuelta: una vez al activarse y sin parar mientras el puntero está encima */
.team-card-in::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ang), transparent 0 56%, rgba(227, 201, 143, 0) 60%, var(--gold-soft) 80%, var(--gold) 88%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
/* foco de luz que sigue al puntero */
.team-card-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(227, 201, 143, 0.18), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.team-card-in:hover::after { opacity: 1; }
.team-card-in > * { position: relative; z-index: 2; }

.team-card.is-lit .team-card-in { animation: teamSheen 1.7s var(--ease) both; }
.team-card.is-lit .team-card-in::before { animation: teamBorder 2.6s ease-in-out both; }
.team-card-in:hover::before { opacity: 1; animation: teamSpin 3.6s linear infinite; }
@keyframes teamSheen {
  from { background-position: 160% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}
@keyframes teamBorder {
  0% { --ang: 0deg; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { --ang: 360deg; opacity: 0; }
}
@keyframes teamSpin { to { --ang: 360deg; } }

.team-index {
  position: absolute !important;
  top: 0.4rem;
  right: 1.2rem;
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(227, 201, 143, 0.1);
  pointer-events: none;
}
.team-avatar {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  background: radial-gradient(circle at 30% 25%, #f3deaa, var(--gold) 55%, #9a7628);
  box-shadow: 0 12px 26px -8px rgba(200, 164, 92, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}
.team-avatar span { font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; color: var(--navy-950); }
.team-avatar::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(227, 201, 143, 0.6);
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: teamRing 16s linear infinite;
  animation-play-state: paused;
}
.team-card.is-lit .team-avatar::before, .team-card-in:hover .team-avatar::before { opacity: 1; animation-play-state: running; }
@keyframes teamRing { to { transform: rotate(360deg); } }

.team-card h3 { margin: 0 0 0.3rem; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.team-role {
  position: relative;
  margin: 0 0 1.2rem;
  padding-bottom: 1.1rem;
  color: var(--gold-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.team-role::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 1s var(--ease) 0.35s;
}
.team-card.is-lit .team-role::after, .team-card-in:hover .team-role::after { width: 64px; }
.team-creds { list-style: none; margin: 0; padding: 0; }
.team-creds li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.65rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.5;
}
.team-creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--gold);
  transform: rotate(45deg);
}
.team-creds li:last-child { margin-bottom: 0; }

/* Tarjeta ancha: "equipo de abogados expertos" (ocupa toda la fila, avatar a la izquierda) */
.team-card--wide { grid-column: 1 / -1; }
.team-avatar svg { width: 2.4rem; height: 2.4rem; fill: var(--navy-950); }
.team-wide-text .team-role { margin-bottom: 0.9rem; }
.team-note { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, 0.88); font-size: 1.02rem; line-height: 1.65; }
@media (min-width: 700px) {
  .team-card--wide .team-card-in { display: grid; grid-template-columns: auto 1fr; column-gap: 2.2rem; align-items: center; }
  .team-card--wide .team-avatar { margin-bottom: 0; }
}

/* =========================================================
   CIFRAS
   ========================================================= */
.cifras {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
}
.cifras-bg {
  position: absolute;
  inset: -10% -6%;
  background-image: url("../img/hero-960.jpg");
  background-size: cover;
  background-position: 75% 25%;
  opacity: 0.32;
  filter: grayscale(0.15);
  will-change: transform;
}
.cifras-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 80% 0%, rgba(22, 38, 61, 0.94), rgba(11, 18, 32, 0.97));
}
.cifras .container { position: relative; z-index: 1; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.stat { border-left: 1px solid rgba(255, 255, 255, 0.15); padding-left: 1.4rem; }
.stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--gold-soft);
}
.stat span { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
/* Escenario oscuro y cinematográfico: los testimonios se despliegan solos, uno tras otro. */
.testimonios {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #1b3050 0%, var(--navy-900) 52%, var(--navy-950) 100%);
}
/* resplandores dorados que derivan muy despacio */
.testimonios::before, .testimonios::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(200, 164, 92, 0.16), rgba(200, 164, 92, 0));
  animation: testiDrift 22s ease-in-out infinite alternate;
}
.testimonios::before { left: -22vmax; top: -26vmax; }
.testimonios::after { right: -24vmax; bottom: -30vmax; animation-delay: -11s; }
@keyframes testiDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(7vmax, 4vmax, 0) scale(1.12); }
}
.testimonios .section-head { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.testimonios .eyebrow { color: var(--gold-soft); }
.testimonios h2 { color: var(--cream); }

.testi-stage {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4.2rem) clamp(1.2rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
}
/* marco dorado de esquinas que se dibuja al entrar */
.testi-stage::before, .testi-stage::after {
  content: "";
  position: absolute;
  width: 72px; height: 72px;
  border: 1px solid rgba(227, 201, 143, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease 0.9s, transform 1.2s var(--ease) 0.7s;
}
.testi-stage::before { left: 0; top: 0; border-right: 0; border-bottom: 0; transform: translate(18px, 18px); }
.testi-stage::after { right: 0; bottom: 0; border-left: 0; border-top: 0; transform: translate(-18px, -18px); }
.testi-stage.is-in::before, .testi-stage.is-in::after { opacity: 1; transform: none; }

/* despliegue de entrada: el escenario se abre desde el centro */
.testi-stage.is-live { opacity: 0; clip-path: inset(0 50% 0 50%); }
.testi-stage.is-live.is-in {
  opacity: 1;
  clip-path: inset(-40px 0 -40px 0);
  transition: opacity 0.8s ease, clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* todas las frases ocupan la misma celda: el alto es el de la más larga, sin saltos */
.testi-slides { position: relative; display: grid; }
.testi {
  grid-area: 1 / 1;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.testi blockquote {
  margin: 0 0 1.8rem;
  max-width: 24em;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3.3vw, 2.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.28;
  color: #fff;
}
.testi figcaption { display: flex; align-items: center; justify-content: center; gap: 0.9rem; text-align: left; }
.testi-avatar {
  display: grid; place-items: center;
  flex: none;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 700;
  color: var(--navy-950);
  background: linear-gradient(135deg, #e3c98f 0%, #c8a45c 50%, #b08a3e 100%);
  box-shadow: 0 0 0 4px rgba(200, 164, 92, 0.22), 0 10px 26px -10px rgba(200, 164, 92, 0.7);
}
.testi-who { display: flex; flex-direction: column; gap: 0.1rem; }
.testi-who strong { font-size: 1.05rem; color: #fff; letter-spacing: 0.01em; }
.testi-who em { font-style: normal; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }

/* con JavaScript: pila de diapositivas con transiciones */
.testi-stage.is-live .testi {
  opacity: 0; visibility: hidden;
  transform: translateY(26px) scale(0.985);
  filter: blur(8px);
  transition: opacity 0.7s ease, transform 0.9s var(--ease), filter 0.7s ease, visibility 0s linear 0.9s;
}
.testi-stage.is-live .testi.is-active {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition-delay: 0s;
}
.testi-stage.is-live .testi.is-leaving { opacity: 0; visibility: visible; transform: translateY(-26px) scale(1.01); filter: blur(8px); }
/* palabra por palabra */
.testi-stage.is-live .testi .w { display: inline-block; opacity: 0; transform: translateY(0.55em); filter: blur(6px); }
.testi-stage.is-live .testi.is-active .w {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.7s ease, transform 0.8s var(--ease), filter 0.7s ease;
  transition-delay: calc(var(--i) * 42ms + 260ms);
}
.testi-stage.is-live .testi figcaption { opacity: 0; transform: translateY(14px); }
.testi-stage.is-live .testi.is-active figcaption {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease, transform 0.9s var(--ease);
  transition-delay: calc(var(--n, 12) * 42ms + 450ms);
}
.testi-stage.is-live .testi.is-active .testi-avatar { animation: testiAvatar 0.9s var(--ease) both; animation-delay: calc(var(--n, 12) * 42ms + 450ms); }
@keyframes testiAvatar { from { transform: scale(0.4) rotate(-40deg); } to { transform: none; } }

/* controles */
.testi-ui { position: relative; margin-top: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.testi-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; }
.testi-btn {
  flex: none;
  display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  border: 1px solid rgba(227, 201, 143, 0.5);
  background: transparent;
  color: var(--gold-soft);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.testi-btn:hover { background: var(--gold); color: var(--navy-950); transform: scale(1.06); }
.testi-btn:focus-visible, .testi-person:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.testi-btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.testi-people {
  display: flex; align-items: center; gap: 0.55rem;
  max-width: min(100%, 30rem);
  overflow-x: auto; scrollbar-width: none;
  padding: 0.5rem 0.4rem;
}
.testi-people::-webkit-scrollbar { display: none; }
.testi-person {
  flex: none;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(227, 201, 143, 0.35);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-serif); font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.testi-person:hover { color: #fff; border-color: var(--gold-soft); }
.testi-person[aria-current="true"] {
  transform: scale(1.22);
  color: var(--navy-950);
  border-color: transparent;
  background: linear-gradient(135deg, #e3c98f, #b08a3e);
  box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.25);
}
.testi-count { font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); }
.testi-count b { color: var(--gold-soft); font-weight: 700; }
.testi-progress { width: min(100%, 22rem); height: 2px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; }
.testi-progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #b08a3e, #e3c98f); }
.testi-progress span.is-running { animation: testiFill var(--testi-dur, 7s) linear forwards; }
.testi-stage.is-paused .testi-progress span.is-running { animation-play-state: paused; }
@keyframes testiFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* sin JavaScript o con "reducir movimiento": todos los testimonios visibles, sin animación */
html:not(.js) .testi-slides, .testi-stage.is-static .testi-slides {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.4rem;
}
html:not(.js) .testi, .testi-stage.is-static .testi {
  grid-area: auto;
  padding: 1.8rem;
  border: 1px solid rgba(227, 201, 143, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}
html:not(.js) .testi blockquote, .testi-stage.is-static .testi blockquote { font-size: 1.15rem; margin-bottom: 1.2rem; }
.testi-stage.is-static .testi, .testi-stage.is-static .testi * { transition: none; }
.testi-stage.is-static .testi figcaption { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .testi blockquote { margin-bottom: 1.4rem; }
  .testi-avatar { width: 2.9rem; height: 2.9rem; font-size: 1.05rem; }
  .testi-btn { width: 2.5rem; height: 2.5rem; }
  .testi-person { width: 1.9rem; height: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonios::before, .testimonios::after { animation: none; }
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto { background: var(--paper); }
.contact-info { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.contact-info li { display: grid; grid-template-columns: 11rem 1fr; gap: 0.15rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.contact-info strong { color: var(--ink); }
@media (max-width: 640px) { .contact-info li { grid-template-columns: 1fr; } }

.contact-form {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 164, 92, 0.2);
}
.consent { display: flex; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 1.2rem; }
.consent input { margin-top: 0.25rem; }
.form-note { font-size: 0.78rem; color: var(--muted); margin: 0.9rem 0 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.6);
  padding: 3.5rem 0 2.5rem;
}
.footer-inner { display: grid; gap: 1.6rem; }
.footer-brand { position: relative; display: flex; align-items: center; gap: 0.9rem; color: #fff; }
/* Pie: logo completo apilado */
.footer-brand .brand-mark {
  width: 230px;
  height: 167px;
  background-image: url("../img/logo.png");
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.footer-brand strong { font-family: var(--font-serif); font-size: 1.1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer nav a { font-size: 0.9rem; transition: color 0.2s var(--ease); }
.site-footer nav a:hover { color: var(--gold-soft); }
.footer-legal { font-size: 0.78rem; margin: 0; color: #98a0ab; }
.footer-legal .footer-credit { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.footer-legal .footer-credit:hover { color: #fff; }
.footer-legal .footer-credit:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; border-radius: 2px; }

/* ---------- Volver arriba ---------- */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--navy-950);
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: var(--navy-950); }

/* =========================================================
   ANIMACIONES DE SCROLL (reveal)
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .split, .proceso-grid { grid-template-columns: 1fr; }
  .proceso-sticky { position: static; }
  .proceso-progress #procesoNum { font-size: 2.4rem; }
  .stage-label { font-size: 1.25rem; }
  .proceso-step { opacity: 1; transform: none; }
  .media-badges { margin-right: 1.4rem; }
  .media-photo { max-width: 100%; }
  .media-card { margin-left: 1rem; margin-right: 1rem; }

  /* Menú móvil: panel oscuro a pantalla completa con letras siempre claras,
     así el texto se lee sobre cualquier página (clara u oscura). */
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.6rem 2rem;
    background: #0b1220;
    background: linear-gradient(180deg, #0f1b2d 0%, #0b1220 100%);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .main-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.35s var(--ease), visibility 0s;
    box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.6);
  }
  .main-nav a:not(.nav-cta) {
    color: #ffffff;
    font-size: 1.08rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .main-nav a:not(.nav-cta)::after { display: none; }
  .main-nav a[aria-current="page"] { color: var(--gold-soft); }
  .main-nav .nav-cta {
    margin-top: 1.4rem;
    text-align: center;
    padding: 0.85rem 1.1rem;
    background: var(--gold);
    color: var(--navy-950);
    font-weight: 700;
  }
  .nav-toggle { display: flex; z-index: 110; }

  /* Fondo oscuro tras el menú abierto y sin scroll de la página */
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(5, 10, 20, 0.6);
  }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.5rem; }
  .hero-stats dt { font-size: 1.9rem; }
}

/* =========================================================
   PREFERENCIA: MENOS MOVIMIENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .team-card[data-reveal] { opacity: 1; transform: none; filter: none; }
  .media-badges .media-badge[data-reveal] { opacity: 1; transform: none; animation: none; }
  .media-badge::after { display: none; }
  .hero-tilt { transform: none !important; }
  .hero-media { animation: none; background-size: 116% auto; }
  .hero-glow { display: none; }
  .img-reveal::after { display: none; }
  .img-reveal-bg { transform: none; }
  .curtain { display: none; }
}

/* =========================================================
   ACCESIBILIDAD Y SEO (enlaces de salto, foco, migas, FAQ, pie ampliado)
   ========================================================= */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 400;
  background: var(--gold);
  color: var(--navy-950);
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

.breadcrumb { margin-bottom: 1.2rem; font-size: 0.82rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li { color: rgba(255, 255, 255, 0.7); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumb a { color: var(--gold-soft); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb--dark li { color: var(--muted); }
.breadcrumb--dark a { color: var(--navy-900); }

.faq-wrap { max-width: 820px; }
.faq-list { display: grid; gap: 0.8rem; }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.4rem;
  transition: border-color 0.25s var(--ease);
}
.faq-item[open] { border-color: var(--gold); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2rem 1.1rem 0;
  font-weight: 600;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--muted); margin: 0 0 1.2rem; }
.faq-note { font-size: 0.85rem; color: var(--muted); margin-top: 1.4rem; }

.card h3 a { color: inherit; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card-more { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 0.9rem; font-size: 0.85rem; font-weight: 600; color: var(--navy-900); }
.card:hover .card-more { color: var(--gold); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem;
}
.footer-cols nav, .footer-contact { display: flex; flex-direction: column; gap: 0.45rem; font-style: normal; }
.footer-h {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.4rem;
}
.footer-cols a, .footer-contact span { font-size: 0.9rem; }
.footer-cols a:hover { color: var(--gold-soft); }

.form-success {
  background: #e9f5ee;
  border: 1px solid #b7dcc4;
  color: #1f5c3a;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  margin: 0 0 1.2rem;
}

/* Sin JavaScript no hay cortina de reveal: la imagen se muestra directamente */
html:not(.js) .img-reveal::after { display: none; }
html:not(.js) .img-reveal-bg { transform: none; }

/* =========================================================
   TEMIS EN EL MENÚ MÓVIL
   Recorte fotográfico real de la estatua (pecho hacia arriba, sin el
   edificio de fondo) quieto en la esquina inferior, con su balanza, sin
   tapar ninguna opción. La espada se dibuja aparte y es la que señala:
   al tocar una opción, Temis se desplaza despacio hasta esa fila y, al
   llegar, la espada gira y apunta hacia el texto (ver js/main.js).
   ========================================================= */
.themis { display: none; }

@keyframes themisFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  /* Franja angosta pegada al borde derecho: ahí es donde se mueve Temis, en el
     margen vacío a la derecha del texto de cada opción, nunca sobre las letras. */
  /* Ojo: la posición (--ty) y la entrada del menú comparten esta MISMA transición de
     "transform". Antes la entrada usaba una @keyframes animation aparte, y una animación
     CSS siempre le gana a una transición sobre la misma propiedad mientras está activa: si
     el usuario tocaba una opción en el primer instante tras abrir el menú (hasta 1.2s), la
     animación de entrada ganaba y el desplazamiento lento hacia la fila no se veía, dando
     la sensación de salto instantáneo. Con un solo mecanismo (transición, no animación),
     un toque durante la entrada simplemente redirige esa misma transición sin cortes. */
  .themis {
    display: block;
    position: absolute;
    right: 0.5rem;
    bottom: 1.1rem;
    width: min(26vw, 96px);
    aspect-ratio: 420 / 256;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(calc(var(--ty, 0px) + 26px)) scale(0.94);
    transition: transform 1.15s cubic-bezier(0.4, 0.05, 0.2, 1), opacity 0.5s var(--ease);
    will-change: transform;
  }
  .main-nav.is-open .themis {
    opacity: 0.95;
    transform: translateY(var(--ty, 0px)) scale(1);
  }

  /* Estela dorada: una copia difuminada de la misma figura, detrás de la nítida, que se
     estira suavemente en vertical mientras Temis viaja (como un brillo que deja rastro
     al moverse) y se apaga y contrae al llegar. Va DENTRO de .themis, así que ya se
     desplaza junto con ella sin necesitar su propio translateY (si lo tuviera, se movería
     el doble: una vez por el padre y otra por sí misma). Usa los tonos dorados del sitio,
     con mezcla "screen" para leerse como luz sobre el azul oscuro del menú. */
  .themis-trail {
    position: absolute;
    inset: -10% 0;
    background-image: url("../img/temis-menu.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scaleY(1);
    transform-origin: center;
    filter: blur(7px) saturate(1.6) drop-shadow(0 0 10px rgba(200, 164, 92, 0.8)) drop-shadow(0 0 22px rgba(227, 201, 143, 0.5));
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    mix-blend-mode: screen;
    pointer-events: none;
  }
  .main-nav.is-judging .themis-trail {
    opacity: 0.55;
    transform: scaleY(1.7);
    filter: blur(11px) saturate(1.8) drop-shadow(0 0 14px rgba(200, 164, 92, 0.9)) drop-shadow(0 0 30px rgba(227, 201, 143, 0.6));
    transition: opacity 0.2s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 1.1s ease;
  }

  .themis-inner {
    position: relative;
    width: 100%;
    height: 100%;
    animation: themisFloat 5.5s ease-in-out infinite;
  }
  .themis-photo {
    position: absolute;
    inset: 0;
    background-image: url("../img/temis-menu.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  }

  /* Opciones: entrada escalonada, brillo dorado al tocar y fila elegida resaltada */
  .main-nav a { position: relative; z-index: 1; overflow: hidden; -webkit-tap-highlight-color: transparent; }
  .main-nav.is-open a {
    animation: navItemIn 0.55s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 55ms + 120ms);
  }
  .main-nav a:not(.nav-cta)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(227, 201, 143, 0.32), rgba(227, 201, 143, 0) 88%);
    transform: translateX(-102%);
    transition: transform 0.55s var(--ease);
  }
  .main-nav a.is-pressed::before,
  .main-nav a:not(.nav-cta):active::before { transform: none; }
  .main-nav a.is-pressed:not(.nav-cta) { color: var(--gold-soft); }
  .main-nav .nav-cta.is-pressed { transform: scale(0.97); filter: brightness(1.12); }
  .main-nav.is-judging a:not(.is-pressed) { opacity: 0.35; transition: opacity 0.35s var(--ease); }
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* =========================================================
   WhatsApp: botones y burbuja flotante
   ========================================================= */
.btn-wa, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.25s ease, color 0.25s ease;
}
.btn-wa {
  position: relative;
  overflow: hidden;
  color: var(--navy-950);
  background: linear-gradient(135deg, #e3c98f 0%, #c8a45c 48%, #b08a3e 100%);
  box-shadow: 0 14px 30px -14px rgba(133, 101, 29, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.btn-wa svg { width: 1.35rem; height: 1.35rem; fill: currentColor; flex: none; }
.btn-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: waBtnShine 6.5s ease-in-out 2s infinite;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(133, 101, 29, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.btn-wa:hover::after { animation: none; transform: translateX(120%); transition: transform 0.9s var(--ease); }
@keyframes waBtnShine {
  0% { transform: translateX(-120%); }
  22%, 100% { transform: translateX(120%); }
}
.btn-wa:focus-visible, .btn-outline:focus-visible, .wa-float:focus-visible { outline: 3px solid var(--navy-950); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.btn-outline { color: var(--navy-900); border: 1.5px solid var(--navy-900); background: transparent; }
.btn-outline:hover { background: var(--navy-900); color: #fff; transform: translateY(-2px); }

/* equipo: invitación a escribir */
.team-cta { margin-top: 3.2rem; text-align: center; }
.team-cta p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--navy-900); }
.team-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.4rem; }

/* preguntas frecuentes: llamado a la acción */
.faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  margin-top: 2.4rem;
  padding: 1.9rem 2.1rem;
  border-radius: calc(var(--radius) + 4px);
  color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #213a5c 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  box-shadow: inset 0 0 0 1px rgba(227, 201, 143, 0.22), 0 26px 46px -30px rgba(11, 18, 32, 0.7);
}
.faq-cta h3 { margin: 0 0 0.3rem; color: #fff; font-size: 1.6rem; }
.faq-cta p { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }

.contact-wa { margin: 1.6rem 0 0; }

/* burbuja flotante (todas las páginas) */
.wa-float {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 89;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.7rem;
  border-radius: 999px;
  color: var(--navy-950);
  font-size: 0.9rem;
  font-weight: 700;
  /* franja de brillo (capa superior) sobre el degradado dorado */
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(135deg, #e3c98f 0%, #c8a45c 48%, #b08a3e 100%);
  box-shadow: 0 16px 32px -12px rgba(11, 18, 32, 0.75), 0 0 0 1px rgba(227, 201, 143, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), padding 0.6s var(--ease);
  animation: waShine 7s ease-in-out 2.5s infinite;
}
/* dos ondas doradas que se expanden, desfasadas */
.wa-float::before,
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(200, 164, 92, 0);
  animation: waRing 7s ease-out 2.5s infinite;
  pointer-events: none;
}
.wa-float::after { animation-delay: 2.9s; }
@media (hover: hover) { .wa-float:hover { transform: translateY(-3px); animation-play-state: paused; } }
/* Versión web: la burbuja es solo el icono y cada 30 s se despliega y muestra el texto (main.js pone .is-open).
   También se despliega al pasar el mouse o al enfocarla con el teclado. */
.wa-float-text {
  display: block;
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: max-width 0.7s var(--ease), padding-left 0.7s var(--ease), opacity 0.45s ease, transform 0.6s var(--ease);
}
.wa-float.is-open { padding-right: 1.3rem; }
.wa-float.is-open .wa-float-text {
  max-width: 15rem;
  padding-left: 0.65rem;
  opacity: 1;
  transform: none;
  transition-delay: 0s, 0s, 0.15s, 0.1s;
}
/* con mouse o teclado también se despliega al acercarse (en pantallas táctiles no, para que no se quede abierta) */
@media (hover: hover) {
  .wa-float:hover { padding-right: 1.3rem; }
  .wa-float:hover .wa-float-text { max-width: 15rem; padding-left: 0.65rem; opacity: 1; transform: none; transition-delay: 0s, 0s, 0.15s, 0.1s; }
}
.wa-float:focus-visible { padding-right: 1.3rem; }
.wa-float:focus-visible .wa-float-text { max-width: 15rem; padding-left: 0.65rem; opacity: 1; transform: none; }
.wa-float-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy-950); color: var(--gold-soft); animation: waIcon 7s ease-in-out 2.5s infinite; }
.wa-float-icon svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
@keyframes waShine {
  0% { background-position: 100% 0, 0 0; }
  20%, 100% { background-position: 0% 0, 0 0; }
}
@keyframes waRing {
  0% { box-shadow: 0 0 0 0 rgba(227, 201, 143, 0.75); }
  26%, 100% { box-shadow: 0 0 0 20px rgba(227, 201, 143, 0); }
}
@keyframes waIcon {
  0%, 24%, 100% { transform: scale(1) rotate(0); }
  6% { transform: scale(1.14) rotate(-10deg); }
  12% { transform: scale(1.14) rotate(10deg); }
  18% { transform: scale(1.06) rotate(-4deg); }
}
@media (max-width: 640px) {
  /* celular: mismo efecto (círculo que se despliega cada 10 s), un poco más compacto */
  .wa-float { left: 0.9rem; bottom: 0.9rem; padding: 0.55rem; font-size: 0.86rem; }
  .wa-float.is-open, .wa-float:focus-visible { padding-right: 1.1rem; }
  .wa-float.is-open .wa-float-text { max-width: 13rem; }
  .wa-float-icon { width: 2.1rem; height: 2.1rem; }
  .faq-cta { padding: 1.6rem 1.4rem; }
  .faq-cta .btn-wa, .team-cta-actions > a, .contact-wa .btn-wa { width: 100%; }
}
body.nav-open .wa-float { display: none; }

/* Menú de escritorio: cada enlace en una sola línea (incluye "Preguntas frecuentes") */
.main-nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1240px) {
  .main-nav { gap: 1.05rem; }
  .main-nav a { font-size: 0.85rem; }
  .nav-cta { padding: 0.45rem 0.9rem; }
  .brand { gap: 0.55rem; }
  .brand-mark { width: 48px; height: 40px; }
  .brand-text { width: 150px; }
}
@media (min-width: 901px) and (max-width: 1020px) {
  .main-nav { gap: 0.8rem; }
  .main-nav a { font-size: 0.8rem; }
}

/* ---------- "Cómo trabajamos" en celular y tableta: la cabecera queda fija (título, número y nombre de
   la etapa) y los pasos 01 a 04 pasan por debajo; al terminar la sección todo vuelve a desplazarse normal. ---------- */
@media (max-width: 900px) {
  .proceso-sticky {
    position: sticky;
    top: 66px; /* justo debajo del encabezado del sitio (ya pegado al hacer scroll) */
    z-index: 3;
    padding: 0.85rem 0 0.7rem;
  }
  /* fondo a todo el ancho para que el contenido que sube no se vea por los lados */
  .proceso-sticky::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    z-index: -1;
  }
  /* desvanecido bajo la cabecera: el texto se "mete" por debajo */
  .proceso-sticky::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 100vw;
    height: 22px;
    transform: translateX(-50%);
    background: linear-gradient(var(--paper), rgba(251, 250, 246, 0));
    pointer-events: none;
    z-index: -1;
  }
  .proceso-sticky .eyebrow { margin-bottom: 0.2rem; }
  .proceso-sticky h2 { font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.15; margin: 0; }
  .proceso-progress { margin-top: 0.6rem; }
  .proceso-progress #procesoNum { font-size: 2rem; }
  .proceso-progress .proceso-track { margin-top: 0.55rem; }
  .proceso-steps { padding-top: 0.6rem; }
}

/* pantallas muy angostas: la burbuja desplegada no debe chocar con el botón de subir */
@media (max-width: 360px) {
  .wa-float { left: 0.7rem; font-size: 0.76rem; }
  .wa-float.is-open, .wa-float:focus-visible { padding-right: 0.9rem; }
  .wa-float.is-open .wa-float-text { padding-left: 0.5rem; }
}

/* ---------- "Áreas de práctica": el título queda fijo mientras las tarjetas pasan por debajo
   (mismo efecto que "Cómo trabajamos"); al terminar las tarjetas todo vuelve a desplazarse normal. ---------- */
.areas-pin {
  position: sticky;
  top: 66px; /* justo debajo del encabezado del sitio (ya pegado al hacer scroll) */
  z-index: 5;
  padding: 0.8rem 0 0.35rem;
  margin-top: -0.8rem;
}
.areas-pin h2 { margin-bottom: 0.15em; }
.areas-pin .eyebrow { margin-bottom: 0.45rem; }
/* fondo a todo el ancho: el contenido que sube no se ve por los lados */
.areas-pin::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--cream);
  z-index: -1;
}
/* desvanecido bajo el título: las tarjetas se "meten" por debajo */
.areas-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 100vw;
  height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(var(--cream), rgba(246, 242, 233, 0));
  pointer-events: none;
  z-index: -1;
}
.areas-sub { margin-top: 0.9rem; }
@media (max-width: 900px) {
  .areas-pin h2 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
}

/* ---------- Captcha del formulario de contacto ---------- */
.captcha-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.captcha-img {
  flex: none;
  min-width: 190px; min-height: 60px;
  display: grid; place-items: center;
  line-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.captcha-img svg { display: block; max-width: 100%; height: auto; }
.captcha-loading { font-size: 0.85rem; line-height: 1; color: var(--muted); }
.captcha-refresh {
  flex: none;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-text);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.5s var(--ease);
}
.captcha-refresh svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.captcha-refresh:hover { background: var(--gold); color: var(--navy-950); transform: rotate(180deg); }
.captcha-refresh:focus-visible { outline: 3px solid var(--navy-950); outline-offset: 3px; }
.captcha-row input { flex: 1 1 8rem; min-width: 7rem; max-width: 12rem; text-align: center; font-size: 1.1rem; letter-spacing: 0.08em; }
.captcha-help { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }
.captcha-error { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 600; color: #9b2c2c; }
.captcha-error[hidden] { display: none; }
.captcha.has-error .captcha-row input { border-color: #9b2c2c; }
@media (max-width: 640px) { .captcha-img { flex: 1 1 100%; } .captcha-row input { max-width: none; } }
@media (max-width: 640px) { .captcha-img svg { width: 100%; height: auto; } }

/* ---------- Ventana con captcha para descargar el formulario ---------- */
.dl-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(8, 14, 26, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s ease;
}
.dl-overlay.is-open { opacity: 1; }
.dl-card {
  position: relative;
  width: min(100%, 30rem);
  max-height: 92vh; overflow: auto;
  padding: 1.8rem 1.6rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.45s var(--ease);
}
.dl-overlay.is-open .dl-card { transform: none; }
.dl-card h2 { font-size: 1.45rem; margin: 0 2rem 0.4rem 0; }
.dl-card > p { margin: 0 0 1.1rem; color: var(--muted); font-size: 0.95rem; }
.dl-close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--navy-900); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dl-close:hover { background: var(--navy-900); color: #fff; }
.dl-close:focus-visible, .dl-cancel:focus-visible { outline: 3px solid var(--navy-950); outline-offset: 3px; }
.dl-actions { display: flex; gap: 0.8rem; margin-top: 1.1rem; flex-wrap: wrap; }
.dl-actions .btn { flex: 1 1 10rem; }
.dl-cancel { flex: 0 1 auto; padding: 0.85rem 1.3rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--navy-900); font-weight: 600; cursor: pointer; }
.dl-cancel:hover { border-color: var(--navy-900); }
body.dl-open { overflow: hidden; }