/* ========================================================================== 
NEXUM ABOGADOS · style.css
Índice:
01. Variables y reset
02. Base (html, body, tipografía, enlaces, imágenes)
03. Utilidades (container, sr-only, eyebrow, botones base)
04. Componentes reutilizables (botones, tarjetas, etiquetas, íconos)
05. Header y navegación
06. Hero / Slider
07. Áreas de servicio
08. Franja CTA
09. Proceso (Así trabajamos)
10. Por qué Nexum
11. Quién está detrás (Irving)
12. Footer
13. Elementos flotantes (WhatsApp)
14. Animaciones
15. Responsive (media queries)
16. Posible código sin uso
========================================================================== */

/* ========================================================================== 
01. Variables y reset
========================================================================== */

:root {
  /* Colores */
  --navy: #0B1F33;
  --gold: #B59A6A;
  --cool-bg: #F0F4FA;
  --warm-bg: #F9F4EE;
  --white: #FFFFFF;
  --text-soft: #526171;
  --border: rgba(11,31,51,.14);
  --gold-line: rgba(181,154,106,.72);

  /* Layout */
  --container: 1240px;

  /* Tipografías */
  --serif: "Bogat Semi Bold", "Bogat", Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;

  /* Componentes */
  --radius: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* {
  box-sizing: border-box;
}

/* ========================================================================== 
02. Base
========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--navy);
  background: var(--white);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
02A. Preloader
========================================================================== */

/*
  Cubre toda la ventana desde el primer momento y centra el recurso de marca.
  La clase en <html> evita mostrarlo nuevamente en visitas posteriores.
*/
.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  overflow: hidden;
  background: var(--navy);
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}

.page-preloader__image {
  width: min(180px, 42vw);
  height: auto;
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
}

.page-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nexum-preloader-seen .page-preloader {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-preloader {
    transition: none;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

/* ========================================================================== 
03. Utilidades
========================================================================== */

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 1000;
  padding: 10px 14px;
  color: #fff;
  background: var(--navy);
}

.skip-link:focus {
  top: 16px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -.025em;
}

.section-heading > p:last-child {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--text-soft);
}

/* ========================================================================== 
04. Componentes reutilizables
========================================================================== */

/* Botones */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.button:hover {
  transform: translateY(-1px);
}

.button--gold {
  color: var(--navy);
  background: var(--gold);
}

.button--gold:hover {
  background: #a88d5d;
}

.button--outline {
  color: var(--navy);
  background: transparent;
  border-color: var(--navy);
}

.button--outline:hover {
  color: #fff;
  background: var(--navy);
}

/* Enlace de texto */
.text-link {
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}

/* ========================================================================== 
05. Header y navegación
========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(11,31,51,.08);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 74px;
}

.site-header__brand img {
  width: 205px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
}

.site-nav__link {
  position: relative;
  padding: 28px 0;
  font-size: .84rem;
  text-decoration: none;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--ease);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

.site-header__toggle {
  display: none;
  padding: 10px;
  border: 0;
  background: none;
}

.site-header__toggle span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 5px;
  background: var(--navy);
}

/* ========================================================================== 
06. Hero / Slider
========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--warm-bg);
}

.hero__slides {
  position: relative;
  height: var(--hero-height, min(620px, calc(100vh - 74px)));
  min-height: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
}

.hero__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 50%;
  background: rgba(249, 244, 238, .5);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  height: 100%;
  padding: clamp(48px, 7vw, 92px) clamp(28px, 7vw, 92px);
}

.hero__copy h1,
.hero__copy h2 {
  max-width: 640px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.65rem, 5vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.035em;
}

.hero__copy h2 {
  font-size: clamp(2.45rem, 4.5vw, 4.6rem);
}

.hero__copy h2.hero__title--compact {
  max-width: 760px;
  font-size: clamp(2rem, 3.15vw, 3.35rem);
  line-height: 1.08;
}

.hero__text {
  max-width: 590px;
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: clamp(.96rem, 1.2vw, 1.08rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--navy);
  background: rgba(255,255,255,.96);
  font-size: 1.7rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(11,31,51,.12);
  transform: translateY(-50%);
}

.hero__arrow--prev {
  left: 18px;
}

.hero__arrow--next {
  right: 18px;
}

.hero__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 5;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(11,31,51,.18);
  cursor: pointer;
}

.hero__dot.is-active {
  width: 25px;
  background: var(--gold);
}

/* ========================================================================== 
07. Áreas de servicio
========================================================================== */

.areas-ref {
  padding-top: clamp(56px, 6vw, 96px);
  background: #fbfbfb;
}

.areas-ref__trigger {
  min-height: max(814px, calc(100vh - 35px));
}

.areas-ref__sticky {
  position: sticky;
  top: 74px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 129px);
  min-height: 705px;
  padding: 38px 0 14px;
  overflow: hidden;
}

.areas-ref__header {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  padding-top: 4px;
  text-align: center;
}

.areas-ref__header .eyebrow {
  margin: 0 0 7px;
}

.areas-ref__header h2 {
  margin: 0 0 9px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: .98;
}

.areas-ref__header > p:last-child {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: .82rem;
  line-height: 1.45;
}

.areas-ref__grid {
  position: relative;
  z-index: 20;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  min-height: 0;
  margin-top: 12px;
  margin-bottom: 8px;
}

.areas-ref__column {
  position: relative;
  z-index: 25;
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  gap: 50px;
  width: 250px;
}

.areas-ref__column--left {
  align-items: flex-start;
}

.areas-ref__column--right {
  align-items: flex-end;
}

/* Tarjeta de área */
.areas-ref__card {
  position: relative;
  display: block;
  width: 250px;
  min-height: 116px;
  box-sizing: border-box;
  padding: 30px 14px 15px;
  overflow: visible;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid rgba(181,154,106,.8);
  border-radius: 0;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(11,31,51,.035);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}

.areas-ref__card:hover,
.areas-ref__card:focus-visible {
  background: var(--warm-bg);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(181,154,106,.16);
  transform: translateY(-2px);
}

.areas-ref__icon {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid rgba(181,154,106,.8);
  transform: translate(-50%,-50%);
}

.areas-ref__icon i {
  font-size: 30px !important;  /* Ajusta este valor para hacerlo más grande o pequeño (ej. 28px o 30px) */
  line-height: 1 !important;
  display: block !important;
}

.areas-ref__card:hover .areas-ref__icon,
.areas-ref__card:focus-visible .areas-ref__icon {
  color: var(--gold);
  border-color: var(--gold);
}

.areas-ref__card-content {
  display: block;
  text-align: center;
}

.areas-ref__card-content strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.13rem;
  line-height: 1.1;
}

.areas-ref__card-content small {
  display: block;
  color: #596575;
  font-size: .70rem;
  line-height: 1.38;
}

.areas-ref__center {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}

.areas-ref__balance {
  width: auto;
  height: 500px;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: contrast(1.03) brightness(.98);
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 52%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.52) 76%, transparent 94%);
  mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 52%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.52) 76%, transparent 94%);
}

.areas-ref__arrows {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.areas-ref__arrow {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  transition: d .03s linear, opacity .2s ease;
}

.areas-ref__bottom {
  position: relative;
  z-index: 30;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.areas-ref__hint {
  position: relative;
  z-index: 12;
  left: auto;
  bottom: auto;
  margin: 0;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  opacity: .8;
}

/* Mantiene la precedencia del control inferior sobre los ajustes responsive de .areas-ref__hint. */
.areas-ref__bottom .areas-ref__hint {
  position: relative;
  left: auto;
  bottom: auto;
  margin: 0;
}

.areas-ref__bottom .areas-ref__footer-link {
  position: relative;
  top: auto;
  margin-top: 50px;
  padding-top: 0;
  min-height: 0;
}

.areas-ref__hint span {
  display: inline-block;
  margin-right: 5px;
  animation: areasHintBounce 1.5s ease-in-out infinite;
  justify-content: center !important;
}

.areas-ref__footer-link {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 50px;
  padding-top: 0;
  text-align: center;
}

.areas-ref__footer-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
}

.areas-ref__footer-link a span {
  transition: transform .25s ease;
}

.areas-ref__footer-link a:hover span {
  transform: translateX(5px);
}

/* ========================================================================== 
08. Franja CTA
========================================================================== */

.cta-strip {
  color: var(--navy);
  background: var(--gold);
}

.cta-strip__inner {
  display: grid;
  grid-template-columns: 285px 1px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 38px;
  row-gap: 34px;
  min-height: 184px;
  padding: 26px 0;
}

.cta-strip__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 3.3vw, 3.2rem);
  line-height: .92;
  letter-spacing: -.035em;
}

.cta-strip__title span {
  display: block;
}

.cta-strip__divider {
  display: block;
  width: 1px;
  height: 118px;
  background: var(--navy);
  opacity: .9;
}

.cta-strip h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
}

.cta-strip p {
  margin: 0;
  max-width: 620px;
  font-size: .88rem;
}

.cta-strip__inner > p {
  max-width: 690px;
  margin: 0;
  font-size: clamp(.95rem, 1.15vw, 1.12rem);
  line-height: 1.7;
}

.cta-strip__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: 250px;
  min-height: 64px;
  padding: 12px 24px;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  text-decoration: none;
  font-size: .98rem;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.cta-strip__button:hover,
.cta-strip__button:focus-visible {
  color: var(--white);
  background: var(--navy);
  transform: translateY(-1px);
}

.cta-strip__button .icon--whatsapp {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
}

.cta-strip__button .icon--whatsapp svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================================================================== 
09. Proceso (Así trabajamos)
========================================================================== */

.process {
  padding: 76px 0 92px;
  background: var(--white);
}

.process .section-heading {
  max-width: 900px;
  margin-bottom: 66px;
}

.process .section-heading .eyebrow {
  margin-bottom: 12px;
  font-size: .78rem;
  letter-spacing: .25em;
}

.process .section-heading h2 {
  font-size: clamp(3rem, 5vw, 4.25rem);
  line-height: .98;
}

.process .section-heading > p:last-child {
  max-width: none;
  margin-top: 16px;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.process__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  column-gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.process__list::before {
  content: "";
  position: absolute;
  top: 59px;
  right: 10%;
  left: 10%;
  z-index: 0;
  height: 1px;
  background: var(--gold);
}

.process-step {
  position: relative;
  min-width: 0;
  text-align: center;
}

.process-step__interactive {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 12px;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: center;
  cursor: pointer;
}

.process-step__icon {
  position: relative;
  display: grid;
  flex: 0 0 118px;
  place-items: center;
  width: 118px;
  height: 118px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 1.75rem;
  transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}

.process-step__svg {
  width: 62px;
  height: 62px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .18s ease;
}

.process-step__number {
  display: none;
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.process-step__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.65vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -.018em;
}

.process-step__text {
  max-width: 290px;
  margin: 12px auto 0;
  color: var(--text-soft);
  font-size: clamp(.92rem, 1.05vw, 1.05rem);
  line-height: 1.52;
}

.process-step__interactive:hover .process-step__icon,
.process-step__interactive:focus-visible .process-step__icon,
.process-step.is-active .process-step__icon {
  color: var(--white);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.process-step__interactive:hover .process-step__svg,
.process-step__interactive:focus-visible .process-step__svg,
.process-step.is-active .process-step__svg {
  display: none;
}

.process-step__interactive:hover .process-step__number,
.process-step__interactive:focus-visible .process-step__number,
.process-step.is-active .process-step__number {
  display: block;
}

/* ========================================================================== 
10. Por qué Nexum
========================================================================== */

.why {
  padding: 88px 0;
  background: var(--white);
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.why__item {
  padding: 8px 28px;
  text-align: center;
  border-right: 1px solid var(--border);
}

.why__item:last-child {
  border-right: 0;
}

.why__icon {
  display: block;
  min-height: 38px;
  color: var(--gold);
  font-size: 2rem;
}

.why__item h3 {
  margin: 10px 0 4px;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.why__item p {
  margin: 0;
  color: var(--text-soft);
  font-size: .82rem;
}

/* ========================================================================== 
11. Quién está detrás (Irving)
========================================================================== */

.lawyer {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  padding: 70px 0 76px;
  background: var(--warm-bg);
  border-bottom: 5px solid var(--gold);
}

.lawyer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  align-items: center;
  gap: clamp(60px, 6vw, 105px);
  width: min(calc(100% - 80px), 1280px);
  margin-inline: auto;
}

.lawyer__photo-wrap {
  position: relative;
  z-index: 2;
  justify-self: start;
  width: 520px;
  height: 520px;
}

.lawyer__photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 520px;
  height: 520px;
  aspect-ratio: .82;
  object-fit: cover;
  object-position: center center;
  border-radius: 18px;
}

.lawyer__frame {
  position: absolute;
  top: -28px;
  left: -28px;
  z-index: 1;
  width: 520px;
  height: 520px;
  border: 4px solid var(--gold);
  border-radius: 3px;
  pointer-events: none;
}

.lawyer__copy {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 650px;
}

.lawyer__copy .eyebrow {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: clamp(.72rem, .8vw, .92rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.lawyer__copy h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(3.6rem, 4.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.lawyer__lead {
  margin: 20px 0 30px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  line-height: 1.28;
}

.lawyer__copy > p:not(.eyebrow):not(.lawyer__lead) {
  max-width: 650px;
  margin: 0 0 32px;
  color: var(--navy);
  font-size: clamp(.98rem, 1.08vw, 1.1rem);
  line-height: 1.58;
}

.lawyer__copy .text-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  padding-bottom: 5px;
}

.lawyer__copy .text-link__label {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
}

.lawyer__copy .text-link__arrow {
  border-bottom: 0;
  font-size: 1.45em;
  line-height: .6;
  transition: transform .25s var(--ease);
}

.lawyer__copy .text-link:hover .text-link__arrow {
  transform: translateX(5px);
}

.lawyer__watermark {
  position: absolute;
  top: 50%;
  right: -2%;
  z-index: 1;
  width: min(28vw, 500px);
  opacity: .045;
  pointer-events: none;
  transform: translateY(-50%);
}

.lawyer__watermark img {
  width: 100%;
  height: auto;
}

/* ========================================================================== 
12. Footer
========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 68px 0 0;
  color: #fff;
  background: var(--navy);
  border-top: 4px solid var(--gold);
}

.site-footer__watermark {
  position: absolute;
  top: 12px;
  right: 1%;
  width: min(35vw, 480px);
  opacity: .055;
  pointer-events: none;
}

.site-footer__watermark img {
  width: 100%;
}

.site-footer__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr .8fr .9fr 1fr;
  gap: 42px;
  padding-bottom: 48px;
}

.site-footer__brand img {
  width: 160px;
  height: auto;
  margin-bottom: 16px;
}

.site-footer__brand p {
  max-width: 270px;
  color: rgba(255,255,255,.72);
  font-size: .8rem;
}

.site-footer__heading {
  margin: 0 0 17px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.site-footer__links {
  display: grid;
  gap: 8px;
}

.site-footer__links a {
  color: rgba(255,255,255,.78);
  font-size: .8rem;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: #fff;
}

.site-footer__socials {
  display: flex;
  gap: 9px;
}

.site-footer__socials a {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  font-size: .75rem;
  text-decoration: none;
}

.site-footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 55px;
  color: rgba(255,255,255,.58);
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .68rem;
}

.site-footer__bottom a {
  text-decoration: none;
}

/* Contacto */
.site-footer__contact {
  position: relative;
  z-index: 2;
}

.site-footer__contact-location,
.site-footer__contact-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer__contact-location {
  margin-bottom: 14px;
}

.site-footer__contact-location p {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: .9rem;
  line-height: 1.55;
}

.site-footer__contact-icon {
  display: inline-grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--gold);
}

.site-footer__contact-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__map {
  width: 100%;
  min-height: 120px;
  margin: 8px 0 20px;
  overflow: hidden;
  aspect-ratio: 16 / 8.5;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
}

.site-footer__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.site-footer__contact-row {
  margin-top: 10px;
  color: rgba(255,255,255,.92);
  font-size: .9rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.site-footer__contact-row:hover {
  color: var(--gold);
  transform: translateX(2px);
}

.site-footer__contact-row .site-footer__contact-icon {
  flex-basis: 38px;
}

/* ========================================================================== 
13. Elementos flotantes (WhatsApp)
========================================================================== */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--navy);
  background: var(--gold);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(11,31,51,.18);
}

/* ========================================================================== 
14. Animaciones
========================================================================== */

@keyframes areasHintBounce {
  0%,
  100% {
    transform: translateY(-2px);
  }

  50% {
    transform: translateY(3px);
  }
}

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

/* ========================================================================== 
15. Responsive (media queries)
========================================================================== */

@media (max-width: 1200px) {
  /* 11. Quién está detrás */
  .lawyer__inner {
    grid-template-columns: 470px minmax(0, 1fr);
    gap: 58px;
    width: min(calc(100% - 64px), 1080px);
  }

  .lawyer__photo-wrap,
  .lawyer__photo,
  .lawyer__frame {
    width: 450px;
    height: 450px;
  }

  .lawyer__copy h2 {
    font-size: clamp(3.2rem, 5vw, 4.5rem);
  }

  .lawyer__watermark {
    right: -110px;
    width: 400px;
  }
}

@media (max-width: 1100px) {
  /* 07. Áreas de servicio */
  .areas-ref__grid {
    gap: 16px;
  }

  .areas-ref__column {
    flex-basis: 220px;
    width: 220px;
  }

  .areas-ref__card {
    width: 220px;
    min-height: 112px;
  }

  .areas-ref__balance {
    height: 520px;
  }
}

@media (max-width: 1024px) {
  /* REVISAR: implementación anterior de .areas */
  .areas__layout {
    grid-template-columns: 1fr 1fr;
  }

  .areas__media {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 300px;
  }

  .areas__column {
    grid-row: 2;
  }

  .areas__scroll {
    height: 160vh;
  }

  /* REVISAR: implementación anterior; no coincide con el HTML actual. */
  .cta-strip .button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* 05. Header y navegación */
  .site-nav__link {
    padding: 20px 0;
  }

  /* 06. Hero / Slider */
  .hero__copy {
    padding: 48px;
  }

  /* 08. Franja CTA */
  .cta-strip__inner {
    grid-template-columns: 250px 1px minmax(0, 1fr);
    column-gap: 28px;
  }

  .cta-strip__button {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -58px;
  }

  /* 09. Proceso */
  .process__list {
    column-gap: 10px;
  }

  .process-step__icon {
    flex-basis: 100px;
    width: 100px;
    height: 100px;
  }

  .process__list::before {
    top: 50px;
  }

  /* 12. Footer */
  .site-footer__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 900px) {
  /* 11. Quién está detrás */
  .lawyer {
    padding: 64px 0 72px;
  }

  .lawyer__inner {
    grid-template-columns: 1fr;
    gap: 52px;
    justify-items: center;
    width: min(calc(100% - 48px), 720px);
  }

  .lawyer__photo-wrap {
    width: min(500px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .lawyer__photo,
  .lawyer__frame {
    width: 100%;
    height: 100%;
  }

  .lawyer__copy {
    max-width: 680px;
    text-align: center;
  }

  .lawyer__copy > p:not(.eyebrow):not(.lawyer__lead) {
    margin-inline: auto;
  }

  .lawyer__copy .text-link {
    justify-content: center;
  }

  .lawyer__watermark {
    top: 72%;
    right: -110px;
    width: 360px;
  }
}

@media (min-width: 821px) {
  /* 07. Áreas de servicio */
  .areas-ref__sticky {
    min-height: 740px;
    padding-top: 0;
    padding-bottom: 16px;
  }

  .areas-ref__header {
    padding-top: 0;
  }

  .areas-ref__header .eyebrow {
    margin-bottom: 8px;
  }

  .areas-ref__header h2 {
    margin-bottom: 10px;
  }

  .areas-ref__grid {
    margin-top: 24px;
    margin-bottom: 64px;
  }

  .areas-ref__center {
    justify-content: flex-start;
    padding-top: 4px;
    box-sizing: border-box;
  }

  .areas-ref__balance {
    height: 500px;
  }

  .areas-ref__hint {
    margin-top: 12px;
  }

  .areas-ref__footer-link {
    position: relative;
    top: auto;
    min-height: 44px;
    margin-top: 50px;
    padding-top: 0;
  }
}

@media (max-width: 820px) {
  /* 07. Áreas de servicio */
  .areas-ref__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: calc(100vh - 74px);
    padding: 45px 0 45px;
    overflow: visible;
  }

  .areas-ref__trigger {
    min-height: 180vh;
  }

  .areas-ref__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px 18px;
    margin: 42px 0 30px;
  }

  .areas-ref__center {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 340px;
    order: -1;
  }

  .areas-ref__column {
    flex-basis: auto;
    width: auto;
    gap: 24px;
  }

  .areas-ref__column--left,
  .areas-ref__column--right {
    align-items: stretch;
  }

  .areas-ref__card {
    width: 100%;
    min-height: 120px;
  }

  .areas-ref__balance {
    height: 390px;
    max-width: 100%;
  }

  .areas-ref__arrows {
    display: none;
  }

  .areas-ref__hint {
    bottom: auto;
    margin-top: 1px;
  }

  .areas-ref__footer-link {
    margin-top: 34px;
    padding-top: 0;
  }

  .areas-ref__bottom .areas-ref__footer-link {
    margin-top: 34px;
  }
}

@media (max-width: 768px) {
  /* REVISAR: implementación anterior de .areas */
  .areas__scroll {
    height: auto;
  }

  .areas__sticky {
    position: relative;
    top: auto;
    min-height: 0;
    padding: 72px 0 54px;
  }

  .areas__layout {
    grid-template-columns: 1fr;
  }

  .areas__media {
    grid-column: auto;
    grid-row: auto;
    min-height: 300px;
    order: -1;
  }

  .areas__column {
    grid-row: auto;
  }

  .areas__footer-link {
    margin-top: 28px;
  }

  /* 03. Utilidades */
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  /* 05. Header y navegación */
  .site-header__inner {
    min-height: 66px;
  }

  .site-header__brand img {
    width: 170px;
  }

  .site-header__toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 66px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--border);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav__link {
    padding: 10px 0;
  }

  .site-nav__link::after {
    bottom: 4px;
  }

  .site-nav__cta {
    margin-top: 6px;
  }

  /* 06. Hero / Slider */
  .hero__slides {
    height: var(--hero-height, 720px);
    min-height: 0;
  }

  .hero__slide {
    display: block;
  }

  .hero__slide::before {
    width: 68%;
  }

  .hero__copy {
    width: 68%;
    padding: 42px 28px 28px;
  }

  .hero__copy h1,
  .hero__copy h2 {
    font-size: clamp(2.25rem, 10vw, 3.5rem);
  }

  .hero__copy h2.hero__title--compact {
    font-size: clamp(1.9rem, 7.2vw, 2.65rem);
    line-height: 1.08;
  }

  .hero__media {
    min-height: 0;
  }

  .hero__arrow {
    top: auto;
    bottom: 285px;
    transform: none;
  }

  .hero__arrow--prev {
    left: 12px;
  }

  .hero__arrow--next {
    right: 12px;
  }

  /* 08. Franja CTA */
  .cta-strip__inner {
    grid-template-columns: 1fr;
    row-gap: 18px;
    min-height: 0;
    padding: 34px 0;
  }

  .cta-strip__title {
    font-size: 2.5rem;
  }

  .cta-strip__divider {
    width: 100%;
    height: 1px;
  }

  .cta-strip__inner > p {
    max-width: 650px;
  }

  .cta-strip__button {
    grid-column: auto;
    justify-self: start;
    margin-top: 4px;
  }

  /* 09. Proceso */
  .process {
    padding: 68px 0 76px;
  }

  .process .section-heading {
    margin-bottom: 48px;
  }

  .process .section-heading h2 {
    font-size: clamp(2.7rem, 9vw, 3.6rem);
  }

  .process__list {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  .process__list::before {
    top: 59px;
    right: auto;
    bottom: 59px;
    left: 59px;
    width: 1px;
    height: auto;
  }

  .process-step__interactive {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 24px;
    padding: 0;
    text-align: left;
  }

  .process-step__icon {
    grid-row: 1 / span 2;
  }

  .process-step__title {
    margin-top: 0;
  }

  .process-step__text {
    max-width: none;
    margin: 10px 0 0;
  }

  /* 10. Por qué Nexum */
  .why__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .why__item {
    padding: 25px 15px;
    border-bottom: 1px solid var(--border);
  }

  .why__item:nth-child(2) {
    border-right: 0;
  }

  /* 11. Quién está detrás */
  .lawyer__inner {
    grid-template-columns: 1fr;
  }

  .lawyer__photo-wrap {
    margin: 0 auto;
  }

  .lawyer__copy {
    text-align: center;
  }

  .lawyer__copy > p:not(.eyebrow):not(.lawyer__lead) {
    margin-inline: auto;
  }

  /* 12. Footer */
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;
    text-align: center;
  }

  .site-footer__map {
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  /* REVISAR: implementación anterior de .areas */
  .areas__media {
    min-height: 240px;
  }

  .areas__balance-wrap {
    max-width: 310px;
  }

  /* 06. Hero / Slider */
  .hero__slides {
    height: var(--hero-height, 760px);
    min-height: 0;
  }

  .hero__slide {
    display: block;
  }

  .hero__slide::before {
    width: 78%;
  }

  .hero__copy {
    width: 78%;
    padding: 36px 22px 20px;
  }

  .hero__actions .button {
    width: 100%;
  }

  /* 10. Por qué Nexum */
  .why__grid {
    grid-template-columns: 1fr;
  }

  .why__item {
    border-right: 0;
  }
}

@media (max-width: 560px) {
  /* 07. Áreas de servicio */
  .areas-ref__trigger {
    min-height: auto;
  }

  .areas-ref__sticky {
    padding: 58px 0 42px;
  }

  .areas-ref__break {
    display: none;
  }

  .areas-ref__header h2 {
    font-size: 2rem;
  }

  .areas-ref__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .areas-ref__center {
    grid-column: auto;
    min-height: 310px;
  }

  .areas-ref__column {
    gap: 26px;
  }

  .areas-ref__card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .areas-ref__balance {
    height: 330px;
    max-width: 100%;
  }

  .areas-ref__hint {
    font-size: .62rem;
  }
}


@media (max-width: 767px) {
  /* 08. Franja CTA: título en una sola línea en pantallas móviles y tabletas estrechas */
  .cta-strip__title {
    font-size: clamp(.95rem, 4vw, 1.65rem);
    white-space: nowrap;
    letter-spacing: -.045em;
  }

  .cta-strip__title span {
    display: inline;
  }

  .cta-strip__button {
    width: 100%;
  }

  /* 09. Proceso */
  .process__list::before {
    left: 43px;
  }

  .process-step__interactive {
    grid-template-columns: 86px minmax(0,1fr);
    column-gap: 18px;
  }

  .process-step__icon {
    flex-basis: 86px;
    width: 86px;
    height: 86px;
  }

  .process-step__svg {
    width: 48px;
    height: 48px;
  }

  /* 11. Quién está detrás */
  .lawyer {
    padding: 50px 0 62px;
  }

  .lawyer__inner {
    width: min(calc(100% - 30px), 480px);
    gap: 42px;
  }

  .lawyer__photo-wrap {
    width: calc(100% - 16px);
    margin-right: 16px;
  }

  .lawyer__frame {
    top: -12px;
    left: -12px;
    border-width: 3px;
  }

  .lawyer__copy .eyebrow {
    font-size: .62rem;
    letter-spacing: .16em;
  }

  .lawyer__copy h2 {
    font-size: clamp(2.55rem, 11vw, 3.5rem);
  }

  .lawyer__lead {
    font-size: 1.06rem;
  }

  .lawyer__copy > p:not(.eyebrow):not(.lawyer__lead) {
    font-size: .94rem;
  }

  .lawyer__watermark {
    top: 68%;
    right: -105px;
    width: 270px;
    opacity: .04;
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    /* !important necesario: garantiza que la preferencia de movimiento reducido prevalezca sobre las transiciones y animaciones declaradas. */
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ========================================================================== 
16. Posible código sin uso
========================================================================== */

/* REVISAR: estas reglas pertenecen a una implementación anterior de áreas de servicio y no encuentran correspondencia en el HTML actual. Se conservan para no eliminar código potencialmente reutilizable. */


/* REVISAR: no se utiliza en el HTML actual. */


/* REVISAR: los breakpoints de .areas de la implementación anterior se conservan integrados en la sección 15 para mantener todas las @media juntas. */


/* ==========================================================================
   17. ANIMACIONES DE ENTRADA (SCROLL REVEAL)
   Qué controla: aparición suave de encabezados, atributos y presentación del abogado.
   Seguridad: el contenido solo se oculta cuando JavaScript confirma que puede observarlo.
   ========================================================================== */

/* Estado inicial visual; permanece visible si JavaScript o IntersectionObserver no están disponibles. */
.reveal {
  opacity: 1;
  transform: none;
}

/* Esta clase solo se activa desde JS cuando IntersectionObserver está disponible. */
.scroll-reveal-enabled .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.scroll-reveal-enabled .reveal {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-enabled .reveal,
  .scroll-reveal-enabled .reveal:not(.is-visible),
  .scroll-reveal-enabled .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}


/* ========================================================================== 
12. Acabados modernos: tarjetas redondeadas y elevación sutil
========================================================================== */

/* Áreas de servicio: bordes suaves sin alterar la distribución de las tarjetas. */
.areas-ref__card {
  border-radius: var(--radius);
  border-color: rgba(181, 154, 106, .4);
  box-shadow: 0 4px 20px rgba(11, 31, 51, .04);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease), background .3s var(--ease);
}

.areas-ref__card:hover,
.areas-ref__card:focus-visible {
  background: var(--warm-bg);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(181, 154, 106, .15);
  transform: translateY(-4px);
}

.areas-ref__icon {
  border-radius: 12px;
  border-color: rgba(181, 154, 106, .5);
  box-shadow: 0 4px 10px rgba(11, 31, 51, .05);
}

/* Por qué Nexum: cada elemento se convierte en una tarjeta independiente. */
.why__item {
  border-right: 0;
  border-radius: var(--radius);
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.why__item:hover,
.why__item:focus-within {
  background: var(--white);
  box-shadow: 0 10px 30px rgba(11, 31, 51, .05);
  transform: translateY(-2px);
}

/* Fotografía y marco de Irving: radios coordinados y elegantes. */
.lawyer__photo {
  border-radius: var(--radius);
}

.lawyer__frame {
  border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .areas-ref__card,
  .why__item {
    transition: none;
  }

  .areas-ref__card:hover,
  .areas-ref__card:focus-visible,
  .why__item:hover,
  .why__item:focus-within {
    transform: none;
  }
}


/* ========================================================================== 
   HERO MÓVIL VERTICAL · imágenes independientes 2:3
   En orientación vertical se usa Slider-XX-movil.webp y se compone el contenido
   como una portada vertical. En horizontal se conserva el Hero panorámico.
========================================================================== */
@media (orientation: portrait) and (max-width: 767px) {
  .hero {
    background: var(--navy);
  }

  .hero__slides {
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 3;
    max-height: 850px;
  }

  .hero__slide {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    min-height: 0;
  }

  .hero__slide.is-active {
    position: relative;
  }

  .hero__slide::before {
    inset: 0;
    width: 100%;
    background: transparent;
  }

  .hero__media,
  .hero__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero__copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    width: 100%;
    height: auto;
    justify-content: flex-end;
    padding: 78px 24px 68px;
    color: #fff;
  }

  .hero__copy .eyebrow {
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: .12em;
  }

  .hero__copy h1,
  .hero__copy h2,
  .hero__copy h2.hero__title--compact {
    max-width: 100%;
    color: var(--navy, #0B1F33);
    font-size: clamp(2rem, 8.5vw, 2.8rem);
    line-height: 1.02;
    letter-spacing: -.025em;
  }

  .hero__text {
    max-width: 100%;
    margin-top: 14px;
    color: var(--navy, #0B1F33);
    font-size: .94rem;
    line-height: 1.45;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 18px;
  }

  .hero__actions .button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .hero__arrow {
    top: 50%;
    bottom: auto;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
  }

  .hero__arrow--prev { left: 10px; }
  .hero__arrow--next { right: 10px; }

  .hero__dots {
    bottom: 20px;
    z-index: 6;
  }
}

@media (orientation: landscape), (min-width: 768px) {
  .hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }
}


/* Corrección de ancho del hero móvil: imagen y slides ocupan todo el viewport.
   Se mantienen intactos los colores de los títulos y párrafos. */
@media (orientation: portrait) and (max-width: 767px) {
  .hero,
  .hero__slides,
  .hero__slide,
  .hero__media,
  .hero__media picture,
  .hero__media img {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero {
    overflow: hidden;
  }

  .hero__slides {
    display: block;
    overflow: hidden;
  }

  .hero__slide,
  .hero__slide.is-active {
    left: 0;
    right: 0;
  }

  .hero__media {
    inset: 0;
  }

  .hero__media img {
    display: block;
    object-fit: cover;
    object-position: center;
  }
}


/* RESTAURACIÓN VISUAL · sección “Un acompañamiento en el que puede confiar” */
.why {
  padding: 88px 0;
  background: var(--white);
}

.why .section-heading {
  max-width: 850px;
  margin: 0 auto 46px;
  text-align: center;
}

.why .section-heading .eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
}

.why .section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -.025em;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.why__item {
  min-width: 0;
  padding: 8px 24px;
  text-align: center;
  border: 0;
  border-right: 1px solid rgba(181, 154, 106, .7);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.why__item:last-child {
  border-right: 0;
}

.why__icon {
  display: block;
  min-height: 42px;
  color: var(--gold);
  font-size: 2rem;
  line-height: 1.25;
}

.why__item h3 {
  margin: 10px 0 4px;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.2;
}

.why__item p {
  max-width: 250px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: .78rem;
  line-height: 1.5;
}

.why__item:hover,
.why__item:focus-within {
  background: transparent;
  box-shadow: none;
  transform: none;
}

@media (max-width: 767px) {
  .why {
    padding: 64px 0;
  }

  .why .section-heading {
    margin-bottom: 32px;
    padding-inline: 16px;
  }

  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why__item {
    padding: 22px 12px;
    border-right: 1px solid rgba(181, 154, 106, .55);
    border-bottom: 1px solid rgba(181, 154, 106, .55);
  }

  .why__item:nth-child(2n) {
    border-right: 0;
  }

  .why__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .why__icon {
    font-size: 2rem;
  }

  .why__item h3 {
    font-size: 1.05rem;
  }

  .why__item p {
    font-size: .8rem;
  }
}

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

  .why__item {
    padding-inline: 8px;
  }
}


/* Iconos Bootstrap de la sección «Por qué elegir Nexum». Tamaño aprobado: 52 × 52 px. */
.why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 52px;
  font-size: 52px;
  line-height: 1;
}

.why__icon i {
  display: block;
  font-size: 52px;
  line-height: 1;
}

/* Interacción sutil para los iconos de «Por qué elegir Nexum». */
.why__icon i {
  transition: transform .28s ease, color .28s ease, filter .28s ease;
  transform: translateY(0);
  transform-origin: center;
}

.why__item:hover .why__icon i,
.why__item:focus-within .why__icon i {
  color: #c7a66b;
  transform: translateY(-4px);
  filter: drop-shadow(0 0 5px rgba(181, 154, 106, .42));
}

@media (prefers-reduced-motion: reduce) {
  .why__icon i {
    transition: none;
  }
  .why__item:hover .why__icon i,
  .why__item:focus-within .why__icon i {
    transform: none;
  }
}


/* ==========================================================================
   14A. Movimiento sutil de Nexum
   Se activa solo con JavaScript; sin soporte, el contenido permanece visible.
========================================================================== */
.motion-reveal { --motion-delay: 0ms; }
.motion-reveal--copy { --motion-delay: 120ms; }
.motion-ready .motion-reveal:not(.is-motion-visible) { opacity: 0; transform: translateY(20px); }
.motion-ready .motion-reveal { transition: opacity .62s var(--ease) var(--motion-delay), transform .62s var(--ease) var(--motion-delay); }
.motion-ready .motion-reveal.is-motion-visible { opacity: 1; transform: translateY(0); }

/* Hero: zoom muy leve y entrada breve del contenido al activarse cada diapositiva. */
.hero__slide.is-active .hero__media img { animation: nexum-hero-settle 6.5s ease-out both; }
.hero__slide.is-active .hero__copy > * { animation: nexum-hero-copy .58s var(--ease) both; }
.hero__slide.is-active .hero__copy > *:nth-child(1) { animation-delay: .06s; }
.hero__slide.is-active .hero__copy > *:nth-child(2) { animation-delay: .13s; }
.hero__slide.is-active .hero__copy > *:nth-child(3) { animation-delay: .20s; }
.hero__slide.is-active .hero__copy > *:nth-child(4) { animation-delay: .28s; }
@keyframes nexum-hero-settle { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes nexum-hero-copy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.motion-ready .areas-ref__grid.areas-motion-visible .areas-ref__arrows { opacity: 1; }
.areas-ref__arrows { transition: opacity .45s ease; }
.motion-ready .process__list::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .18s; }
.motion-ready .process.process-motion-visible .process__list::before { transform: scaleX(1); }
.lawyer__frame { transition: transform .72s var(--ease) .16s; transform-origin: center; }
.motion-ready .lawyer__frame { transform: scale(.97); }
.motion-ready .lawyer__photo-wrap.is-motion-visible .lawyer__frame { transform: scale(1); }

@media (max-width: 820px) {
  .motion-ready .process__list::before { transform: scaleY(0); transform-origin: center top; }
  .motion-ready .process.process-motion-visible .process__list::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active .hero__media img, .hero__slide.is-active .hero__copy > *, .motion-ready .motion-reveal, .lawyer__frame { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
  .motion-ready .process__list::before { transform: none !important; transition: none !important; }
}

/* =========================================================
   Nexum | Catálogo de productos y servicios
   Mantiene la identidad azul institucional + oro champagne.
   Compatible con listados de WooCommerce y bloques comunes
   de SureCart/WordPress.
   ========================================================= */

/* WooCommerce: cuadrícula de productos */
.woocommerce ul.products,
.woocommerce-page ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin: 24px 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(11,31,51,.12);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  text-align: left !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.wc-block-grid__product-image img {
  display: block;
  width: 100% !important;
  max-width: 190px !important;
  height: 155px !important;
  object-fit: contain !important;
  margin: 0 auto 16px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  color: #0B1F33 !important;
  font-size: 18px !important;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 10px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.wc-block-grid__product-price {
  color: #0B1F33 !important;
  font-weight: 600;
  margin: 10px 0 14px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 20px !important;
  border: 1px solid #B59A6A !important;
  border-radius: 999px !important;
  background: #B59A6A !important;
  color: #0B1F33 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #a58a5b !important;
  border-color: #a58a5b !important;
  color: #0B1F33 !important;
}

/* SureCart: reducir miniaturas y dar formato de catálogo a sus listados. */
.sc-product-list,
.sc-products-list,
.wp-block-surecart-product-list,
.wp-block-surecart-product-collection {
  gap: 24px;
}
.sc-product-list img,
.sc-products-list img,
.wp-block-surecart-product-list img,
.wp-block-surecart-product-collection img,
.sc-product-card img,
.sc-product-item img {
  max-width: 190px !important;
  max-height: 165px !important;
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  margin-inline: auto;
}
.sc-product-card,
.sc-product-item,
.wp-block-surecart-product-list > *,
.wp-block-surecart-product-collection > * {
  box-sizing: border-box;
}
.sc-product-card button,
.sc-product-card .sc-button,
.sc-product-item button,
.sc-product-item .sc-button,
.sc-product-list button,
.sc-product-list .sc-button,
.sc-products-list button,
.sc-products-list .sc-button,
.wp-block-surecart-product-list button,
.wp-block-surecart-product-list .sc-button,
.wp-block-surecart-product-collection button,
.wp-block-surecart-product-collection .sc-button,
[class*="surecart"] button,
[class*="surecart"] .sc-button {
  background: #B59A6A !important;
  border-color: #B59A6A !important;
  color: #0B1F33 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.sc-product-card button:hover,
.sc-product-card .sc-button:hover,
.sc-product-item button:hover,
.sc-product-item .sc-button:hover,
.sc-product-list button:hover,
.sc-products-list button:hover,
[class*="surecart"] button:hover,
[class*="surecart"] .sc-button:hover {
  background: #a58a5b !important;
  border-color: #a58a5b !important;
  color: #0B1F33 !important;
}

/* Responsive: catálogo en una columna en pantallas pequeñas. */
@media (max-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .wc-block-grid__products {
    grid-template-columns: 1fr;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .wc-block-grid__product {
    padding: 16px !important;
  }
}

/* ========================================================================== 
   EASY DIGITAL DOWNLOADS · Catálogo de productos Nexum
   Basado en el marcado real de EDD: .edd-blocks__downloads / .edd-blocks__download.
   Solo presentación visual; no modifica HTML, productos ni el proceso de compra.
========================================================================== */
.wp-block-edd-downloads.edd-blocks__downloads {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 340px)) !important;
  align-items: stretch !important;
  justify-content: start !important;
  gap: 28px !important;
  width: min(100% - 40px, 1160px) !important;
  margin: 32px auto 56px !important;
  padding: 0 !important;
}

.wp-block-edd-downloads.edd-blocks__downloads > .edd-blocks__download {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(11, 31, 51, .12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(11, 31, 51, .06) !important;
}

.wp-block-edd-downloads .edd-blocks__download-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

.wp-block-edd-downloads .edd-blocks__download-image-link {
  display: block !important;
  width: 100% !important;
  height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #F0F4FA !important;
  border-radius: 7px !important;
}

.wp-block-edd-downloads img.edd-blocks__download-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 190px !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.wp-block-edd-downloads .edd-blocks__download-header h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

.wp-block-edd-downloads .edd-blocks__download-header h3 a {
  color: #0B1F33 !important;
  text-decoration: none !important;
}

.wp-block-edd-downloads .edd-blocks__download-header h3 a:hover {
  color: #8e7449 !important;
}

.wp-block-edd-downloads .edd-blocks__download-content {
  flex: 1 0 auto !important;
  margin: 0 !important;
  color: #536273 !important;
  font-size: .94rem !important;
  line-height: 1.6 !important;
}

.wp-block-edd-downloads .edd-blocks__download-content p {
  margin: 0 0 14px !important;
}

.wp-block-edd-downloads .edd-blocks__download-price {
  margin: 12px 0 4px !important;
  color: #0B1F33 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

.wp-block-edd-downloads .edd-blocks__download-footer {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd-add-to-cart,
.wp-block-edd-downloads .edd_purchase_submit_wrapper input.edd-add-to-cart,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd_go_to_checkout,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd-submit,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 11px 20px !important;
  background: #B59A6A !important;
  border: 1px solid #B59A6A !important;
  border-radius: 999px !important;
  color: #0B1F33 !important;
  font: inherit !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}

.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd-add-to-cart:hover,
.wp-block-edd-downloads .edd_purchase_submit_wrapper input.edd-add-to-cart:hover,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd_go_to_checkout:hover,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd-submit:hover,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .button:hover {
  background: #a58a5b !important;
  border-color: #a58a5b !important;
  color: #0B1F33 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
  .wp-block-edd-downloads.edd-blocks__downloads {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100% - 28px, 420px) !important;
    gap: 18px !important;
    margin-top: 24px !important;
  }
  .wp-block-edd-downloads.edd-blocks__downloads > .edd-blocks__download {
    max-width: none !important;
  }
  .wp-block-edd-downloads .edd-blocks__download-image-link,
  .wp-block-edd-downloads img.edd-blocks__download-image {
    height: 200px !important;
    max-height: 200px !important;
  }
}

/* Nexum + Easy Digital Downloads: show one Purchase button plus Checkout beside it.
   Hide only the duplicate no-JavaScript fallback control. */
.wp-block-edd-downloads .edd_purchase_submit_wrapper input.edd-no-js,
.wp-block-edd-downloads .edd_purchase_submit_wrapper .edd-no-js {
  display: none !important;
}

.wp-block-edd-downloads .edd_purchase_submit_wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.wp-block-edd-downloads .edd_purchase_submit_wrapper a.edd_go_to_checkout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 11px 20px !important;
  margin: 0 !important;
  background: #B59A6A !important;
  border: 1px solid #B59A6A !important;
  border-radius: 999px !important;
  color: #0B1F33 !important;
  font: inherit !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.wp-block-edd-downloads .edd_purchase_submit_wrapper a.edd_go_to_checkout:hover {
  background: #a58a5b !important;
  border-color: #a58a5b !important;
  color: #0B1F33 !important;
}


/* Nexum + EDD: center the loading indicator over the Purchase button.
   The label remains in normal flow; EDD may hide it while the request is running. */
.wp-block-edd-downloads .edd_purchase_submit_wrapper button.edd-add-to-cart {
  position: relative !important;
}

.wp-block-edd-downloads .edd_purchase_submit_wrapper button.edd-add-to-cart > span.edd-loading {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  float: none !important;
  flex: 0 0 17px !important;
  pointer-events: none !important;
}