/* =============================================================
   PATRIMONIO SEGURO — Sistema de diseño
   Estudio jurídico · Defensa patrimonial inmobiliaria · Paraguay

   Índice
   01. Tokens
   02. Reset y base
   03. Tipografía
   04. Layout y bandas
   05. Utilidades de marca
   06. Botones
   07. Header y navegación
   08. Hero
   09. Marquesina
   10. Situaciones
   11. Servicios
   12. Perfiles
   13. Abogada
   14. Proceso
   15. Filosofía
   16. Preguntas frecuentes
   17. Contacto
   18. Footer
   19. Flotantes
   20. Animaciones de entrada
   21. Movimiento reducido e impresión
   ============================================================= */

/* ------------------------------------------------------------
   01. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Tinta */
  --ink-900: #050505;
  --ink-800: #0b0b0b;
  --ink-700: #131313;
  --ink-600: #1a1a1a;
  --ink-500: #232323;

  /* Blancos */
  --bone-50: #ffffff;
  --bone-100: #f4f4f2;
  --bone-200: #eaeae8;
  --bone-300: #d6d6d4;

  /* El acento no es un color: es el contraste. Blanco puro sobre fondo
     oscuro, negro sobre fondo claro. Cada banda lo redefine. */
  --acento: #111111;
  --acento-alto: #333333;
  --acento-bajo: #111111;
  /* Color legible encima del acento: se invierte junto con él */
  --acento-fg: #ffffff;

  --danger: #b3261e;

  /* Tokens semánticos — por defecto, banda clara */
  --bg: var(--bone-100);
  --bg-elev: var(--bone-50);
  --fg: #111111;
  --fg-dim: #545454;
  /* #6f6f6f es el gris más claro que aún alcanza 4.5:1 sobre el hueso */
  --fg-mute: #6f6f6f;
  --line: rgb(0 0 0 / 13%);
  --line-strong: rgb(0 0 0 / 26%);
  --accent: var(--acento);
  --accent-text: var(--acento);

  /* Tipografía */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Geométrica de marca: es la familia del logotipo. Se usa solo en la
     cabecera, para que el texto lea como continuación del isotipo.
     Alternativa equivalente si se prefiere: "Montserrat". */
  --font-brand: "Poppins", "Montserrat", var(--font-body);

  --fs-display: clamp(2.9rem, 7.4vw, 6.75rem);
  --fs-h1: clamp(2.25rem, 5vw, 4.25rem);
  --fs-h2: clamp(1.95rem, 3.7vw, 3.35rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.85rem);
  --fs-h4: clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-lead: clamp(1.06rem, 1.35vw, 1.35rem);
  --fs-body: clamp(1rem, 1.02vw, 1.075rem);
  --fs-small: 0.925rem;
  --fs-eyebrow: 0.735rem;

  /* Espaciado — escala amplia, densidad baja (sitio editorial) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --band-y: clamp(5rem, 10vw, 9.5rem);
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --maxw: 1300px;
  --maxw-text: 62ch;

  --radius: 2px;
  --radius-lg: 4px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --z-header: 100;
  --z-menu: 200;
  --z-float: 90;

  --header-h: 102px;
}

/* Bandas oscuras — el acento pasa a ser blanco */
.band--dark {
  --bg: var(--ink-800);
  --bg-elev: var(--ink-700);
  --fg: var(--bone-100);
  --fg-dim: #a4a4a4;
  --fg-mute: #6b6b6b;
  --line: rgb(255 255 255 / 12%);
  --line-strong: rgb(255 255 255 / 24%);
  --acento: #ffffff;
  --acento-alto: #ffffff;
  --acento-bajo: #9c9c9c;
  --acento-fg: #0b0b0b;
  /* Gris claro, no blanco puro: las etiquetas acompañan, no compiten */
  --accent-text: #cfcfcf;
}
.band--darker {
  --bg: var(--ink-900);
  --bg-elev: var(--ink-800);
}
.band--dark-alt {
  --bg: var(--ink-700);
  --bg-elev: var(--ink-600);
}

/* Bandas claras — el acento pasa a ser negro */
.band--light {
  --bg: var(--bone-100);
  --bg-elev: var(--bone-50);
  --fg: #111111;
  --fg-dim: #545454;
  --fg-mute: #6f6f6f;
  --line: rgb(0 0 0 / 13%);
  --line-strong: rgb(0 0 0 / 26%);
  --acento: #111111;
  --acento-alto: #333333;
  --acento-bajo: #111111;
  --acento-fg: #ffffff;
  --accent-text: #111111;
}
.band--light-alt {
  --bg: var(--bone-200);
  --bg-elev: var(--bone-50);
}

/* ------------------------------------------------------------
   02. RESET Y BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bone-100);
  color: #111111;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

::selection {
  background: var(--acento);
  color: var(--acento-fg);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--acento);
  color: var(--acento-fg);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

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

/* ------------------------------------------------------------
   03. TIPOGRAFÍA
   ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
}
h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--fg-dim);
  max-width: var(--maxw-text);
}

.display {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.032em;
}

/* Palabra acentuada en cursiva serif */
.em {
  font-style: italic;
  color: var(--accent-text);
}

/* ------------------------------------------------------------
   04. LAYOUT Y BANDAS
   ------------------------------------------------------------ */
.band {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--band-y);
  overflow: clip;
}

.band--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 940px;
}

/* Cabecera de sección: etiqueta + título + bajada */
.band-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.band-head--split {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .band-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: end;
  }
  .band-head--split .lead {
    padding-bottom: 0.4rem;
  }
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Sobre fondo claro el grano se nota mucho más: se baja */
.band--light.grain::after,
.hero.grain::after {
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.band > .container {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   05. UTILIDADES DE MARCA
   ------------------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.eyebrow::before {
  content: "";
  width: clamp(24px, 3vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}

.eyebrow--center {
  justify-content: center;
}
.eyebrow--center::after {
  content: "";
  width: clamp(24px, 3vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.num {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  line-height: 1;
}

.mark-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.04;
  filter: grayscale(1);
  will-change: transform;
}

/* ------------------------------------------------------------
   06. BOTONES
   ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--acento);
  --btn-fg: var(--acento-fg);
  --btn-bd: var(--acento);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 54px;
  padding: 0.95rem 1.75rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

/* Barrido de relleno al pasar el cursor */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone-100);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleY(1);
}

.btn:hover,
.btn:focus-visible {
  color: var(--ink-900);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  flex: none;
  stroke-width: 2;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover svg {
  transform: translateX(4px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--line-strong);
}
.btn--ghost::before {
  background: var(--fg);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--bg);
  border-color: var(--fg);
}

.btn--solid {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-bd: var(--fg);
}
.btn--solid::before {
  background: var(--acento);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--acento-fg);
  border-color: var(--acento);
}

.btn--wide {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Enlace con subrayado animado */
.link-u {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--accent-text);
  padding-bottom: 3px;
}
.link-u::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.link-u:hover::after,
.link-u:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ------------------------------------------------------------
   07. HEADER Y NAVEGACIÓN
   ------------------------------------------------------------ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: calc(var(--z-header) + 5);
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--acento-bajo), var(--acento-alto));
  pointer-events: none;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    height var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  height: 74px;
  background: rgb(244 244 242 / 88%);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgb(0 0 0 / 11%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.brand__mark {
  width: 74px;
  height: 74px;
  transition: transform var(--dur-slow) var(--ease-out), width var(--dur) var(--ease),
    height var(--dur) var(--ease), filter var(--dur) var(--ease);
}

/* Al hacer scroll la cabecera se compacta y el isotipo la acompaña */
.header.is-scrolled .brand__mark {
  width: 50px;
  height: 50px;
}

.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.05);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
/* Mismo peso y tracking que el logotipo: el nombre es parte de la marca */
.brand__name {
  font-family: var(--font-brand);
  font-size: 0.965rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg);
}
.brand__tag {
  font-family: var(--font-brand);
  font-size: 0.565rem;
  font-weight: 600;
  letter-spacing: 0.148em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.nav {
  display: none;
}

@media (min-width: 1080px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.1vw, 2.1rem);
  }
}

.nav__link {
  position: relative;
  font-family: var(--font-brand);
  font-size: 0.815rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--fg-dim);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active {
  color: var(--fg);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__cta {
  display: none;
}
@media (min-width: 1080px) {
  .header__cta {
    display: inline-flex;
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    font-family: var(--font-brand);
    font-size: 0.755rem;
    font-weight: 600;
  }
}

/* Grupo de acciones a la derecha de la cabecera */
.header__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

/* Conmutador de tema: sol y luna */
.tema-btn {
  display: inline-grid;
  place-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.tema-btn svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.6;
}

.tema-btn:hover,
.tema-btn:focus-visible {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-fg);
}

.tema-btn:active {
  transform: scale(0.94);
}

/* En claro se ofrece la luna; en oscuro, el sol */
.tema-btn__sol {
  display: none;
}
[data-tema="oscuro"] .tema-btn__sol {
  display: block;
}
[data-tema="oscuro"] .tema-btn__luna {
  display: none;
}

/* Botón hamburguesa */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
  margin-right: -11px;
}
@media (min-width: 1080px) {
  .burger {
    display: none;
  }
}

.burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--fg);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Menú móvil a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  background: var(--bone-100);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  overflow-y: auto;
}

/* El atributo hidden debe ganarle al display:flex de arriba */
.menu[hidden] {
  display: none;
}

.menu.is-open {
  visibility: visible;
  opacity: 1;
}

.menu__list {
  display: grid;
  gap: 0.35rem;
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
}

.menu__item {
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  opacity: 0;
  transform: translateY(18px);
}
.menu.is-open .menu__item {
  animation: menu-in 520ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}

@keyframes menu-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  line-height: 1.1;
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease-out);
}
.menu__link:hover,
.menu__link:focus-visible {
  color: var(--fg-dim);
  padding-left: 0.6rem;
}
.menu__link span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
}

.menu__foot {
  max-width: var(--maxw);
  width: 100%;
  margin: var(--sp-5) auto 0;
  display: grid;
  gap: 1rem;
}

/* ------------------------------------------------------------
   08. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(5rem, 10vh, 8rem);
  background: var(--bg);
  color: var(--fg);
  overflow: clip;
}

/* Retícula de plano de fondo */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(0 0 0 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 0 0 / 6%) 1px, transparent 1px);
  background-size: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 96px);
  mask-image: radial-gradient(ellipse 100% 78% at 50% 42%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 100% 78% at 50% 42%, #000 12%, transparent 76%);
}

/* Halo cálido detrás del titular */
.hero__glow {
  position: absolute;
  z-index: 0;
  top: 44%;
  left: 50%;
  width: min(1180px, 130vw);
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Aclara el centro hacia el blanco puro, para que el titular respire
     sin ensuciar el fondo con un velo oscuro */
  background: radial-gradient(
    ellipse at center,
    rgb(255 255 255 / 85%) 0%,
    rgb(255 255 255 / 40%) 36%,
    transparent 70%
  );
}

/* El isotipo como pieza gráfica del hero, no como marca de agua tenue */
.hero__mark {
  z-index: 0;
  width: min(800px, 94vw);
  right: clamp(-140px, -6vw, -30px);
  top: 50%;
  translate: 0 -50%;
  opacity: 0.1;
}

@media (max-width: 900px) {
  .hero__mark {
    right: 50%;
    translate: 50% -50%;
    top: 44%;
    width: min(580px, 122vw);
    opacity: 0.07;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero .display {
  margin-block: clamp(1.2rem, 2.4vw, 2rem) 0;
}

/* Lema de marca, bajo la bajada. La cursiva serif lo separa del párrafo
   anterior, que va en sans: no hace falta ningún adorno */
.hero__lema {
  margin: clamp(1.15rem, 2.2vw, 1.7rem) 0 0;
  max-width: 50ch;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.6vw, 1.38rem);
  font-style: italic;
  line-height: 1.44;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.hero__lead {
  margin-top: clamp(0.9rem, 1.8vw, 1.35rem);
  max-width: 46ch;
}

.hero__actions {
  margin-top: clamp(1.9rem, 3.4vw, 2.75rem);
}

/* Franja de credibilidad bajo el hero */
.hero__trust {
  display: grid;
  gap: 1.1rem;
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.1rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 720px) {
  .hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.trust__item {
  display: grid;
  gap: 0.3rem;
}
.trust__k {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  color: var(--fg);
  line-height: 1;
}
.trust__v {
  font-size: 0.845rem;
  line-height: 1.5;
  color: var(--fg-mute);
}

/* Riel lateral vertical */
.hero__rail {
  display: none;
}
@media (min-width: 1280px) {
  .hero__rail {
    position: absolute;
    z-index: 2;
    left: calc(var(--gutter) * 0.34);
    top: 50%;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fg-mute);
  }
  .hero__rail::after {
    content: "";
    width: 1px;
    height: 84px;
    background: linear-gradient(to bottom, var(--acento), transparent);
  }
}

/* Indicador de scroll — solo cuando hay altura suficiente para no
   pisar la franja de credibilidad */
.hero__cue {
  display: none;
  position: absolute;
  z-index: 2;
  bottom: clamp(1.5rem, 3.5vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

@media (min-height: 880px) {
  .hero__cue {
    display: flex;
  }
}

.hero__cue-line {
  width: 1px;
  height: 38px;
  background: var(--line-strong);
  overflow: hidden;
  position: relative;
}
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acento);
  animation: cue 2.2s var(--ease) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  55%,
  100% {
    transform: translateY(100%);
  }
}

/* Revelado del titular línea por línea */
.reveal-line {
  display: block;
  overflow: hidden;
}
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1000ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 105ms + 120ms);
}
.is-ready .reveal-line > span {
  transform: none;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 780ms var(--ease-out), transform 780ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 340ms);
}
.is-ready .fade-up {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   09. MARQUESINA
   ------------------------------------------------------------ */
.marquee {
  position: relative;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--ink-900);
  color: var(--bone-100);
  border-block: 1px solid rgb(255 255 255 / 10%);
  overflow: hidden;
  --marquee-dur: 34s;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur) linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  padding-inline: clamp(0.6rem, 1.3vw, 1.2rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 2.15rem);
  letter-spacing: -0.01em;
  color: var(--bone-100);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: #ffffff;
  flex: none;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------
   10. SITUACIONES
   ------------------------------------------------------------ */
.cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1060px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: clamp(1.7rem, 3vw, 2.5rem);
  background: var(--bg);
  transition: background var(--dur) var(--ease);
  isolation: isolate;
}

.card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover {
  background: var(--bg-elev);
}
.card:hover::after {
  transform: scaleX(1);
}

.card__icon {
  width: 34px;
  height: 34px;
  color: var(--accent-text);
  margin-bottom: 0.35rem;
}
.card__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.35;
}

.card__title {
  font-family: var(--font-body);
  font-size: 1.075rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.card__text {
  font-size: 0.955rem;
  line-height: 1.6;
  color: var(--fg-dim);
}

.situaciones__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
}

.situaciones__foot p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1.3;
  max-width: 34ch;
}

/* ------------------------------------------------------------
   11. SERVICIOS
   ------------------------------------------------------------ */
.svc {
  border-top: 1px solid var(--line);
}

.svc__item {
  border-bottom: 1px solid var(--line);
}

.svc__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 2.2rem);
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.95rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: padding-inline var(--dur-slow) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .svc__item:hover .svc__head {
    padding-inline: clamp(0.4rem, 1.2vw, 1.1rem);
  }
}

/* Barrido de fondo al pasar el cursor */
.svc__head::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  z-index: -1;
  background: linear-gradient(90deg, rgb(20 22 15 / 6%), transparent 72%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
@media (hover: hover) {
  .svc__item:hover .svc__head::before {
    opacity: 1;
  }
}

.svc__num {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.04em;
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease);
}
.svc__item:hover .svc__num,
.svc__item.is-open .svc__num {
  opacity: 1;
}

.svc__title {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
.svc__item.is-open .svc__title {
  color: var(--acento-alto);
}

.svc__toggle {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur-slow) var(--ease-out);
}
.svc__toggle::before,
.svc__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.svc__toggle::before {
  width: 13px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.svc__toggle::after {
  width: 1.5px;
  height: 13px;
  transform: translate(-50%, -50%);
}
/* Abierto: el signo pasa de "+" a "−" girando media vuelta */
.svc__item.is-open .svc__toggle {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-fg);
  transform: rotate(180deg);
}
.svc__item.is-open .svc__toggle::after {
  opacity: 0;
}

/* Panel desplegable */
.svc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease-out);
}
.svc__item.is-open .svc__panel {
  grid-template-rows: 1fr;
}

.svc__panel-inner {
  overflow: hidden;
}

.svc__body {
  display: grid;
  gap: 1.2rem;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  padding-left: clamp(0rem, 5vw, 4.6rem);
  max-width: 68ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease) 90ms, transform 420ms var(--ease-out) 90ms;
}
.svc__item.is-open .svc__body {
  opacity: 1;
  transform: none;
}

.svc__body p {
  color: var(--fg-dim);
  font-size: 1.02rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.775rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--fg-dim);
}

/* ------------------------------------------------------------
   12. PERFILES PATRIMONIALES (pestañas)
   ------------------------------------------------------------ */
.pf {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}

.pf__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf__tab {
  flex: 1 1 132px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.55rem;
  min-height: 102px;
  padding: 1rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.pf__tab svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.4;
}

.pf__tab:hover {
  background: var(--bg-elev);
  border-color: var(--line-strong);
  color: var(--fg);
}

.pf__tab:active {
  transform: translateY(1px);
}

.pf__tab[aria-selected="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-fg);
}

.pf__panel {
  display: grid;
  gap: clamp(1.8rem, 3.6vw, 3.2rem);
  padding: clamp(1.6rem, 3.2vw, 2.9rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
}

.pf__panel[hidden] {
  display: none;
}

@media (min-width: 940px) {
  .pf__panel {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    align-items: start;
  }
}

.pf__main {
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

/* En contextos de rejilla el espaciado lo da el gap, no el margen del párrafo */
.pf__main > p,
.pf__aside-top p {
  margin: 0;
}

.pf__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pf__badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
  flex: none;
}

.pf__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

.pf__desc {
  color: var(--fg-dim);
  max-width: 56ch;
}

.pf__sub {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.pf__acts {
  display: grid;
  gap: 0.75rem;
}

.pf__act {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.975rem;
  line-height: 1.5;
}

.pf__act svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 0.28rem;
  color: var(--accent-text);
  stroke-width: 2;
}

.pf__cta {
  justify-self: start;
  margin-top: 0.5rem;
}

.pf__aside {
  display: grid;
  align-content: start;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pf__aside-top {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  background: var(--bg);
  text-align: center;
}

.pf__aside-top svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.15;
  color: var(--accent-text);
  margin-bottom: 0.2rem;
}

.pf__aside-ttl {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.2;
}

.pf__aside-sub {
  font-size: 0.8rem;
  color: var(--fg-mute);
}

.pf__note {
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  background: var(--bg);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg-dim);
}

.pf__note strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--fg);
  font-weight: 600;
}

/* ------------------------------------------------------------
   12b. DIAGNÓSTICO JURÍDICO INTERACTIVO
   ------------------------------------------------------------ */
.diag {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.9rem);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Halo tenue en la esquina, mismo recurso que el hero */
.diag::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 9%), transparent 68%);
  pointer-events: none;
}

.diag > * {
  position: relative;
}

.diag__bar {
  margin-bottom: clamp(1.7rem, 3vw, 2.4rem);
}

.diag__bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.diag__bar-meta span:last-child {
  color: var(--accent-text);
}

.diag__bar-track {
  height: 2px;
  background: var(--line-strong);
  overflow: hidden;
}

.diag__bar-fill {
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, var(--acento-bajo), var(--acento-alto));
  transition: width 420ms var(--ease-out);
}

.diag__q {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--font-body);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--fg);
  text-align: center;
}

.diag__step[hidden],
.diag__result[hidden] {
  display: none;
}

.diag__opts {
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 700px) {
  .diag__opts--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.diag__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  padding: clamp(0.95rem, 1.9vw, 1.25rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.diag__opt:hover,
.diag__opt:focus-visible {
  background: var(--bg-elev);
  border-color: var(--line-strong);
}

.diag__opt:active {
  transform: translateY(1px);
}

.diag__opt-ico {
  display: grid;
  place-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--fg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.diag__opt-ico svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}
.diag__opt:hover .diag__opt-ico,
.diag__opt:focus-visible .diag__opt-ico {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-fg);
}

.diag__opt-body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.diag__opt-t {
  font-size: 0.985rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--fg);
}

.diag__opt-d {
  font-size: 0.885rem;
  line-height: 1.5;
  color: var(--fg-dim);
}

.diag__opt-chev {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0.35rem 0 0 auto;
  color: var(--accent-text);
  stroke-width: 1.8;
}

.diag__tag {
  display: inline-flex;
  justify-self: start;
  padding: 0.28rem 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line-strong);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.diag__back {
  display: block;
  margin: clamp(1.1rem, 2.2vw, 1.5rem) auto 0;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--fg-mute);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.diag__back:hover {
  color: var(--fg);
}

/* Resultado */
.diag__result {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}

.diag__verdict {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
  background: var(--bg);
  border: 1px solid var(--line-strong);
}

.diag__risk {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  padding: 0.45rem 0.9rem;
  background: var(--acento);
  color: var(--acento-fg);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.diag__vttl {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.diag__rec {
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--bg-elev);
  border-left: 2px solid var(--acento);
}

.diag__rec-k {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.diag__rec-v {
  color: var(--fg);
  line-height: 1.62;
}

.diag__recap {
  display: grid;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}

.diag__recap div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.diag__recap dt {
  flex: none;
  min-width: 132px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--fg-mute);
  padding-top: 0.15rem;
}

.diag__recap dd {
  margin: 0;
  color: var(--fg-dim);
  flex: 1 1 200px;
}

.diag__disc {
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--fg-mute);
}

.diag__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.diag__actions .btn {
  flex: 1 1 260px;
}

/* ------------------------------------------------------------
   13. ABOGADA
   ------------------------------------------------------------ */
.abogada {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .abogada {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  }
}

.abogada__media {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  overflow: hidden;
}

.abogada__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marco de latón desplazado */
.abogada__media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgb(20 22 15 / 24%);
  pointer-events: none;
}

.abogada__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  padding: 2rem;
  text-align: center;
  color: var(--fg-mute);
}
.abogada__ph svg {
  width: 46px;
  height: 46px;
  opacity: 0.55;
}
.abogada__ph span {
  font-size: 0.775rem;
  letter-spacing: 0.05em;
  max-width: 24ch;
  line-height: 1.5;
}

.abogada__name {
  margin-top: 0.9rem;
}

.abogada__role {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.quote {
  position: relative;
  margin: clamp(1.6rem, 3vw, 2.3rem) 0 0;
  padding-left: clamp(1.1rem, 2vw, 1.7rem);
  border-left: 2px solid var(--acento);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-style: italic;
  line-height: 1.42;
  color: var(--fg);
}

.abogada__meta {
  display: grid;
  gap: 0.9rem;
  margin-top: clamp(1.7rem, 3vw, 2.4rem);
  padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
  .abogada__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }
}

.meta__k {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.3rem;
}
.meta__v {
  font-size: 0.985rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   14. PROCESO
   ------------------------------------------------------------ */
.proceso {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 980px) {
  .proceso {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .proceso__aside {
    position: sticky;
    top: calc(var(--header-h) + 3.5rem);
  }
}

.steps {
  position: relative;
  padding-left: clamp(2.6rem, 5vw, 4rem);
}

.steps__list {
  display: block;
}

/* Riel vertical con relleno progresivo */
.steps__rail {
  position: absolute;
  left: clamp(9px, 1.2vw, 15px);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}

.steps__fill {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--acento-alto), var(--acento));
  transition: height 180ms linear;
}

.step {
  position: relative;
  padding-bottom: clamp(2.1rem, 4vw, 3.2rem);
}
.step:last-child {
  padding-bottom: 0;
}

.step__dot {
  position: absolute;
  left: calc(clamp(2.6rem, 5vw, 4rem) * -1 + clamp(9px, 1.2vw, 15px));
  top: 7px;
  width: 11px;
  height: 11px;
  translate: -5.5px 0;
  rotate: 45deg;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    scale var(--dur) var(--ease-out);
}
.step.is-active .step__dot {
  background: var(--acento);
  border-color: var(--acento);
  scale: 1.25;
}

.step__num {
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  font-family: var(--font-body);
  margin-bottom: 0.5rem;
}

.step__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.16;
  margin-bottom: 0.6rem;
}

.step__text {
  color: var(--fg-dim);
  max-width: 48ch;
}

/* ------------------------------------------------------------
   15. FILOSOFÍA
   ------------------------------------------------------------ */
.mv {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 820px) {
  .mv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mv__cell {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.9rem, 3.4vw, 3rem);
  background: var(--bg);
}

.mv__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
}

.mv__text {
  color: var(--fg-dim);
  max-width: 46ch;
}

.principios {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
@media (min-width: 880px) {
  .principios {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.principios__list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) {
  .principios__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.principio {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: clamp(0.95rem, 1.8vw, 1.3rem) clamp(0.6rem, 1.4vw, 1.1rem);
  background: var(--bg);
  font-size: 0.985rem;
  font-weight: 500;
}

.principio__n {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent-text);
  flex: none;
}

.valores-bloque {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  padding-top: clamp(2rem, 3.8vw, 2.9rem);
  border-top: 1px solid var(--line);
}

.valores-bloque .lead {
  margin-top: var(--sp-2);
  font-size: 1.02rem;
}

.valores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.2rem);
}

.valor {
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.5vw, 1.2rem);
  letter-spacing: -0.01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.valor:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-fg);
}

/* ------------------------------------------------------------
   16. PREGUNTAS FRECUENTES
   ------------------------------------------------------------ */
.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.45;
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.faq__q:hover {
  color: var(--accent-text);
}

.faq__sign {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-text);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.faq__sign::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq__sign::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.faq__item.is-open .faq__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a-inner {
  overflow: hidden;
}

.faq__a p {
  padding-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-right: 3rem;
  max-width: 72ch;
  color: var(--fg-dim);
}

/* ------------------------------------------------------------
   17. CONTACTO
   ------------------------------------------------------------ */
.contacto {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 960px) {
  .contacto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

.form {
  display: grid;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field--half {
  grid-column: span 1;
}

@media (min-width: 620px) {
  .form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.field label {
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.field .req {
  color: var(--acento);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  appearance: none;
}

.field textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.6;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-mute);
  opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--bg);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}

.field__err {
  display: none;
  font-size: 0.8rem;
  color: #e8836f;
}
.field.has-error .field__err {
  display: block;
}

.form__note {
  font-size: 0.815rem;
  line-height: 1.55;
  color: var(--fg-mute);
}

.form__status {
  display: none;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--acento);
  background: rgb(255 255 255 / 8%);
  font-size: 0.9rem;
}
.form__status.is-visible {
  display: block;
}

/* Bloque de datos directos */
.direct {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.direct__row {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.2rem, 2.2vw, 1.65rem);
  background: var(--bg);
  transition: background var(--dur) var(--ease);
}
a.direct__row:hover {
  background: var(--bg-elev);
}

.direct__k {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.direct__k svg {
  width: 15px;
  height: 15px;
  color: var(--acento);
  flex: none;
}

.direct__v {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.direct__v--ph {
  color: var(--fg-mute);
  font-style: italic;
  font-weight: 400;
}

/* ------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------ */
/* El pie es la única zona oscura permanente: cierra la página y hace de base */
.footer {
  --acento: #ffffff;
  --acento-alto: #ffffff;
  --acento-fg: #0b0b0b;
  --fg: var(--bone-100);
  --fg-dim: #a4a4a4;
  --fg-mute: #6b6b6b;
  --line: rgb(255 255 255 / 10%);
  --line-strong: rgb(255 255 255 / 22%);

  background: var(--ink-900);
  color: var(--bone-100);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
}

.footer__top {
  display: grid;
  gap: clamp(2.2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.4rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 860px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.footer__brand {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}

.footer__logo {
  width: clamp(150px, 20vw, 200px);
}

/* Lema de marca, bajo el logotipo del pie */
.footer__regla {
  width: 34px;
  height: 1px;
  background: var(--acento);
}

.footer__frase {
  max-width: 34ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--bone-100);
}

.footer__frase-p {
  font-style: normal;
  color: var(--fg-mute);
}

.footer__ttl {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1.1rem;
}

.footer__list {
  display: grid;
  gap: 0.6rem;
}

.footer__list a,
.footer__list li {
  font-size: 0.925rem;
  color: var(--fg-dim);
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover,
.footer__list a:focus-visible {
  color: var(--acento);
}

.footer__bottom {
  display: grid;
  gap: 1rem;
  padding-top: clamp(1.5rem, 2.6vw, 2rem);
  font-size: 0.79rem;
  color: var(--fg-mute);
  line-height: 1.6;
}

@media (min-width: 780px) {
  .footer__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }
}

.footer__legal {
  max-width: 76ch;
}

/* ------------------------------------------------------------
   19. FLOTANTES
   ------------------------------------------------------------ */
.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.8rem);
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: 56px;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-fg);
  font-size: 0.845rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 34px rgb(0 0 0 / 42%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.94);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out),
    visibility var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}

.wa.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wa:hover {
  background: var(--acento-alto);
}

.wa svg {
  width: 23px;
  height: 23px;
  flex: none;
}

.wa__label {
  display: none;
}
@media (min-width: 560px) {
  .wa__label {
    display: inline;
  }
}

/* ------------------------------------------------------------
   20. ANIMACIONES DE ENTRADA
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 75ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="line"] {
  opacity: 1;
  transform: none;
  scale: 0 1;
  transform-origin: left;
  transition: scale 900ms var(--ease-out);
}
[data-reveal="line"].is-in {
  scale: 1 1;
}

/* ------------------------------------------------------------
   21. MODO OSCURO

   El sitio está construido en claro y esta capa lo invierte. No se
   duplica nada: se redefinen los mismos tokens que ya usan las bandas,
   así que cualquier componente nuevo queda cubierto sin tocar esto.

   Las bandas que ya eran oscuras bajan un escalón más, para que el
   ritmo de contraste entre secciones no se pierda.
   ------------------------------------------------------------ */
[data-tema="oscuro"] body {
  background: var(--ink-800);
  color: var(--bone-100);
}

[data-tema="oscuro"] .band--light,
[data-tema="oscuro"] .hero,
[data-tema="oscuro"] .header,
[data-tema="oscuro"] .menu {
  --bg: var(--ink-800);
  --bg-elev: var(--ink-700);
  --fg: var(--bone-100);
  --fg-dim: #a4a4a4;
  --fg-mute: #7d7d7d;
  --line: rgb(255 255 255 / 12%);
  --line-strong: rgb(255 255 255 / 24%);
  --acento: #ffffff;
  --acento-alto: #ffffff;
  --acento-bajo: #9c9c9c;
  --acento-fg: #0b0b0b;
  --accent-text: #cfcfcf;
}

[data-tema="oscuro"] .band--light-alt {
  --bg: var(--ink-700);
  --bg-elev: var(--ink-600);
}

[data-tema="oscuro"] .band--dark {
  --bg: var(--ink-900);
  --bg-elev: var(--ink-800);
}

[data-tema="oscuro"] .menu {
  background: var(--ink-900);
}

[data-tema="oscuro"] .header.is-scrolled {
  background: rgb(11 11 11 / 86%);
  border-bottom-color: rgb(255 255 255 / 11%);
}

/* La marquesina sube de tono: en modo oscuro el contraste lo da al revés */
[data-tema="oscuro"] .marquee {
  background: var(--ink-600);
  border-block-color: rgb(255 255 255 / 10%);
}

/* El isotipo es negro sobre transparente: invertirlo lo vuelve blanco,
   así no hacen falta dos archivos ni cambiar el src por JavaScript */
[data-tema="oscuro"] .brand__mark {
  filter: invert(1);
}
[data-tema="oscuro"] .hero__mark {
  filter: grayscale(1) invert(1);
}

/* Retícula y halo del hero */
[data-tema="oscuro"] .hero__grid {
  background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
}

[data-tema="oscuro"] .hero__glow {
  background: radial-gradient(
    ellipse at center,
    rgb(255 255 255 / 7%) 0%,
    rgb(255 255 255 / 2.5%) 36%,
    transparent 70%
  );
}

/* Sobre fondo oscuro el grano se nota menos y admite más */
[data-tema="oscuro"] .band--light.grain::after,
[data-tema="oscuro"] .hero.grain::after {
  opacity: 0.05;
}

/* Detalles que asumían fondo claro */
[data-tema="oscuro"] .svc__head::before {
  background: linear-gradient(90deg, rgb(255 255 255 / 8%), transparent 72%);
}

[data-tema="oscuro"] .abogada__media::after {
  border-color: rgb(255 255 255 / 26%);
}

/* Elementos fuera de banda, que toman los tokens de :root */
[data-tema="oscuro"] .progress {
  background: linear-gradient(90deg, #555555, #ffffff);
}

[data-tema="oscuro"] .wa {
  background: #ffffff;
  color: #0b0b0b;
}
[data-tema="oscuro"] .wa:hover {
  background: #e0e0e0;
}

[data-tema="oscuro"] .skip-link {
  background: #ffffff;
  color: #0b0b0b;
}

[data-tema="oscuro"] ::selection {
  background: #ffffff;
  color: #0b0b0b;
}

/* ------------------------------------------------------------
   22. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ------------------------------------------------------------ */
@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;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    scale: 1 !important;
  }

  .reveal-line > span {
    transform: none !important;
  }

  .marquee__track {
    animation: none;
  }

  .hero__cue-line::after {
    animation: none;
    transform: translateY(0);
  }
}

@media print {
  .header,
  .menu,
  .wa,
  .progress,
  .hero__cue,
  .marquee {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .band {
    padding-block: 1.5rem;
    background: #fff !important;
    color: #000 !important;
  }

  .svc__panel,
  .faq__a {
    grid-template-rows: 1fr !important;
  }
}