/* ==========================================================================
   Victor Feliz Associates — hoja de estilos principal

   Índice
   1.  Variables de diseño
   2.  Base y tipografía
   3.  Utilidades de maquetación
   4.  Botones y enlaces
   5.  Barra superior
   6.  Cabecera y navegación
   7.  Portada
   8.  Franja de cifras y sellos de la portada
   9.  Servicios
   10. Franja de credenciales
   11. Banda de cita con vídeo
   12. Por qué elegirnos
   13. Nosotros (sección oscura)
   14. Opiniones de clientes
   15. Proceso en cuatro pasos
   16. Cifras de resultados
   17. Preguntas frecuentes
   18. Contacto y formulario
   19. Franja de llamada a la acción
   20. Pie de página
   21. Botones flotantes
   22. Animaciones de entrada
   23. Adaptación a pantallas pequeñas
   ========================================================================== */

/* ==========================================================================
   1. Variables de diseño
   ========================================================================== */
:root {
  /* Color — tomado del logotipo: campo azul marino, curva de acero y el
     brillo dorado de las letras. */
  --ink: #14212B;           /* Títulos */
  --text: #64727C;          /* Texto corrido */
  --white: #ffffff;
  --accent: #26506B;        /* Azul marino principal */
  --accent-dark: #16303F;   /* Azul marino a la presión */
  --accent-light: #3B7295;  /* Azul de acero, enlaces al pasar el ratón */
  --accent-soft: #9FC4DA;   /* Azul claro sobre fondos oscuros */
  --gold: #C9A227;          /* Dorado de la marca: realces menudos */
  --gold-soft: #E8C864;     /* Dorado sobre fondos oscuros */
  --dark: #10202B;          /* Secciones oscuras y pie */
  --dark-2: #1C3446;        /* Tarjetas sobre fondo oscuro */
  --soft: #EEF4F8;          /* Tinte azul muy claro */
  --alt: #F8FAFB;           /* Fondo alterno */
  --line: #E7ECEF;
  --line-dark: rgba(255, 255, 255, .14);
  --whatsapp: #25d366;

  /* Tipografía */
  --font-head: "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
  --font-text: "Roboto", "Segoe UI", Tahoma, sans-serif;
  --font-mark: Georgia, "Times New Roman", serif;   /* Solo para el monograma */

  /* Maquetación */
  --container: 1280px;
  --gutter: 24px;
  --header-h: 92px;
  --topbar-h: 42px;
  --notch: 44px;            /* Esquina recortada: rasgo de la referencia */

  /* Sombras */
  --shadow-sm: 0 2px 10px rgba(20, 33, 43, .08);
  --shadow-md: 0 12px 34px rgba(20, 33, 43, .16);

  /* Transición */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Base y tipografía
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Deja aire para que el ancla no quede debajo de la cabecera fija. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

/* text-wrap: balance reparte las líneas del titular para que no quede una
   palabra suelta colgando al final. */
h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(1.95rem, 3.6vw, 3.25rem); text-wrap: balance; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .25s var(--ease);
}
a:hover { color: var(--accent-light); }

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

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

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

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

.skip-link {
  position: absolute;
  top: -60px; left: 16px;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   3. Utilidades de maquetación
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(64px, 8vw, 118px) 0; }
.section--alt { background: var(--alt); }
.section--soft { background: var(--soft); }
.section--tight { padding-top: 0; }

/* Encabezado de sección: columna angosta a la izquierda con el párrafo de
   entrada y el titular grande a la derecha. Se repite en todas las secciones
   claras; es el gesto que más identifica a la referencia. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.section-head__aside {
  text-align: right;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.section-head__aside p { font-size: .98rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
/* El trazo dorado es el único guiño al brillo metálico del logotipo. */
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--gold);
  flex: 0 0 22px;
}
.eyebrow--light { color: var(--accent-soft); }
.eyebrow--light::before { background: var(--gold-soft); }

.lead { font-size: 1.075rem; }

/* ==========================================================================
   4. Botones y enlaces
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 1.05rem 2rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }

.btn--light { background: #fff; color: var(--accent); }
.btn--light:hover { background: var(--soft); color: var(--accent-dark); }

.btn--outline { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--outline:hover { background: #fff; color: var(--accent); border-color: #fff; }

.btn--outline-ink { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline-ink:hover { border-color: var(--accent); color: var(--accent); }

.btn--wa { background: var(--whatsapp); color: #08361A; }
.btn--wa:hover { background: #1FBB5A; color: #08361A; }

/* Botón circular con flecha que acompaña a la píldora. */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.15rem;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.btn-round:hover { background: var(--accent-dark); color: #fff; transform: rotate(45deg); }
.btn-round--light { background: #fff; color: var(--accent); }
.btn-round--light:hover { background: var(--soft); color: var(--accent); }

.btn-group {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Enlace de texto con flecha en círculo (tarjetas de servicio). */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}
.arrow-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover i { transform: translateX(4px); background: var(--accent-dark); }
.arrow-link--light { color: #fff; }
.arrow-link--light i { background: #fff; color: var(--accent); }
.arrow-link--light:hover { color: #fff; }

/* Lista con vistos. */
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .7rem;
}
.check-list li::before {
  content: "\F26E";                 /* bi-check-lg */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0; top: .28rem;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-size: .72rem;
  line-height: 1;
}
.check-list--light li::before { background: rgba(255, 255, 255, .16); color: #fff; }

/* Detalle de un punto: se sangra y cambia el check por una viñeta discreta
   para que no compita con el punto que lo contiene. */
.check-list ul {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
}
.check-list ul li {
  padding-left: 1.15rem;
  margin-bottom: .32rem;
  font-size: .93rem;
  opacity: .82;
}
.check-list ul li::before {
  content: "";
  left: .15rem;
  top: .58rem;
  width: 5px; height: 5px;
  background: currentColor;
  color: inherit;
  border-radius: 50%;
  opacity: .6;
}

/* ==========================================================================
   5. Barra superior
   ========================================================================== */
.topbar {
  position: relative;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  font-size: .875rem;
  color: rgba(255, 255, 255, .8);
  background: rgba(8, 17, 24, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar__info {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
}
.topbar__info span,
.topbar__info a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: inherit;
  white-space: nowrap;
}
.topbar__info a:hover { color: #fff; }
.topbar__info i { color: var(--gold-soft); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 500;
  padding: .3rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  transition: background-color .25s var(--ease);
}
.lang-switch:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lang-switch .flag { width: 20px; height: 15px; border-radius: 2px; display: block; }

/* ==========================================================================
   6. Cabecera y navegación
   ========================================================================== */
.site-header {
  position: absolute;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Al bajar, la cabecera se despega de la portada y se vuelve sólida. */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  height: 78px;
  background: #fff;
  box-shadow: 0 6px 26px rgba(20, 33, 43, .12);
}

.brand { flex: 0 0 auto; display: block; }
.brand img { width: auto; height: 58px; }
/* Sobre la portada oscura va la versión clara del logotipo; en cuanto la
   cabecera se fija y se vuelve blanca, aparece la versión a color. */
.brand__color { display: none; }
.site-header.is-stuck .brand__white { display: none; }
.site-header.is-stuck .brand__color { display: block; height: 50px; }

.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.2rem);
}
.main-nav a {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding: .4rem 0;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .25s var(--ease);
}
.main-nav a:hover::after,
.main-nav a.is-active::after { width: 100%; }
.site-header.is-stuck .main-nav a { color: var(--ink); }
.site-header.is-stuck .main-nav a:hover,
.site-header.is-stuck .main-nav a.is-active { color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: clamp(1rem, 2vw, 2.2rem);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
}
.header-phone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  flex: 0 0 46px;
}
.header-phone__num {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.06rem;
}
.header-phone__num small {
  font-weight: 400;
  font-size: .8rem;
  opacity: .8;
}
.site-header.is-stuck .header-phone { color: var(--ink); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}
.site-header.is-stuck .nav-toggle { color: var(--ink); border-color: var(--line); }

.nav-close { display: none; }
.nav-backdrop { display: none; }

/* ==========================================================================
   7. Portada
   ========================================================================== */
.hero {
  position: relative;
  /* Alto ajustado a la franja de sellos: con la de cifras anterior, mas alta,
     eran 780px. El titular se apoya en el borde inferior, asi que el alto de
     la portada y el de su franja se mueven juntos. */
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  isolation: isolate;
  color: #fff;
}

/* Capas, de arriba abajo: resplandor azul, velo marino, fotografía y color
   de respaldo. El velo es alto a propósito: la fotografía tiñe la portada,
   no la protagoniza, y el titular tiene que leerse encima sin depender de
   qué imagen se ponga. Para quitar la fotografía basta con borrar la línea
   del url(): las demás capas se sostienen solas. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* El fondo del contenedor lo pinta el navegador DEBAJO de sus hijos, así
     que aquí solo queda lo que debe ir bajo el vídeo: la fotografía, que se
     ve si el vídeo no carga o si el visitante pide menos animación, y el
     degradado de respaldo por si tampoco carga la imagen. */
  background:
    url("../img/header-image.jpg") center / cover no-repeat,
    linear-gradient(155deg, #16303F 0%, #10202B 55%, #0A1620 100%);
}

/* El vídeo cubre la portada como lo haría una fotografía de fondo. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sin esto, un vídeo más estrecho que la portada deja franjas negras. */
  background: #10202B;
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Retícula de líneas finas: el papel cuadriculado del oficio contable. */
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(900px 600px at 30% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(900px 600px at 30% 40%, #000 0%, transparent 78%);
}
/* Todo lo que va por encima del vídeo, en una sola capa: el velo marino y su
   resplandor (que antes eran las primeras capas del fondo, y ahí quedarían
   tapados por el vídeo) más el oscurecimiento del pie, para que la franja de
   sellos se lea sobre cualquier fotograma. En el atajo background la primera
   capa listada es la de arriba. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(10, 22, 32, 0) 52%,
      rgba(10, 22, 32, .55) 100%),
    radial-gradient(1100px 620px at 78% 12%, rgba(59, 114, 149, .3) 0%, rgba(16, 32, 43, 0) 62%),
    linear-gradient(105deg,
      rgba(9, 20, 29, .95) 0%,
      rgba(14, 40, 54, .88) 50%,
      rgba(30, 66, 90, .78) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  padding-bottom: clamp(40px, 5vw, 64px);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(4px);
}
.hero__badge i { color: var(--gold-soft); }

.hero h1 { color: #fff; margin-bottom: 0; }
.hero h1 .accent { color: var(--accent-soft); }

.hero__aside p {
  color: rgba(255, 255, 255, .82);
  font-size: 1.06rem;
  margin-bottom: 1.9rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.6rem;
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .09);
  border-radius: 999px;
  padding: .35rem .9rem;
}
.hero__facts i { color: var(--gold-soft); font-size: .8rem; }

/* Línea que separa la portada de su franja de sellos. */
.hero__trust { border-top: 1px solid rgba(255, 255, 255, .18); }

/* ==========================================================================
   8. Franja de sellos de la portada
   ========================================================================== */
/* Tres compromisos en una fila. Envuelve en pantallas estrechas en lugar de
   encogerse: son frases cortas y deben leerse enteras. */
.hero__seals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3.4vw, 52px);
  padding: clamp(22px, 2.6vw, 32px) 0;
}
.hero__seals li {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-head);
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  letter-spacing: -.01em;
}
.hero__seals i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gold-soft);
  font-size: .82rem;
}

/* ==========================================================================
   9. Servicios
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
/* Cuatro columnas para los perfiles de contribuyente: tarjetas sin fotografía,
   una por perfil. A 1100px la regla adaptativa las baja a dos. */
.services__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Nota al pie de una seccion: el caso que queda fuera de lo que ofrecemos y a
   donde mandarlo. Va sobre fondo suave para que se lea como acotacion y no
   como una tarjeta mas. */
.aside-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
  background: var(--soft);
  border-top-right-radius: var(--notch);
}
.aside-note > i {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1.5;
}
.aside-note p { margin: 0; }
.aside-note .arrow-link { margin-left: .55rem; }

/* Sin fotografia la tarjeta solo lleva lamina y titular: el cuerpo no necesita
   estirarse ni dejar hueco para una lista que no existe. */
.service-card:not(.service-card--photo) .service-card__body { padding-top: clamp(26px, 2.6vw, 34px); }
.service-card:not(.service-card--photo) h3 { margin-bottom: 0; }

.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top-right-radius: var(--notch);
  padding: clamp(26px, 2.6vw, 38px);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
              transform .35s var(--ease);
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}

/* Fotografía de la tarjeta, con la esquina recortada de la referencia. Es
   opcional: sin ella, la lámina del icono queda arriba y la tarjeta funciona
   igual. */
.service-card__media {
  position: relative;
  margin-bottom: 2.9rem;
}
.service-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-top-right-radius: var(--notch);
  transition: transform .6s var(--ease);
}
/* El recorte de la esquina lo hace el propio <img>, así que el zoom del
   ratón necesita un contenedor que sí recorte. */
.service-card__media-frame {
  overflow: hidden;
  border-top-right-radius: var(--notch);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }

/* Con fotografía, la lámina del icono monta sobre el borde inferior. */
.service-card--photo .service-card__plate {
  position: absolute;
  left: 0; bottom: -32px;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
}

/* Lámina de color con el icono del servicio. */
.service-card__plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--soft) 0%, #DCE9F1 100%);
  color: var(--accent);
  font-size: 1.85rem;
  margin-bottom: 1.5rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.service-card:hover .service-card__plate {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: #fff;
}

.service-card h3 { margin-bottom: .6rem; }
.service-card__body { flex: 1 1 auto; }

/* Aviso del notario. Va dentro de la tarjeta y no en letra pequeña al final
   de la página: en Nueva Jersey, anunciarse como notario en un idioma que no
   sea el inglés obliga a aclarar que no se es abogado, y esa aclaración solo
   sirve donde la persona está leyendo la oferta. */
.service-card__note {
  margin-top: 1.2rem;
  padding: .85rem 1.05rem;
  border-left: 3px solid var(--gold);
  background: var(--alt);
  font-size: .88rem;
  line-height: 1.62;
}
.service-card__note em { font-style: italic; }
.service-card__body p { font-size: .98rem; }
.service-card .check-list { margin: 1.1rem 0 1.6rem; }
.service-card .check-list li { font-size: .94rem; margin-bottom: .45rem; }

/* ==========================================================================
   10. Franja de credenciales
   ========================================================================== */
.credentials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding-top: clamp(28px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.credential {
  display: flex;
  align-items: flex-start;
  gap: .95rem;
}
.credential > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-size: 1.05rem;
}
.credential strong {
  display: block;
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.35;
}
.credential span { font-size: .9rem; }

/* ==========================================================================
   11. Banda de cita con vídeo
   ========================================================================== */
.intro-banner {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 46vw, 560px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
/* Duotono: el degradado azul tiñe la fotografía para que la banda se
   distinga de la portada y el titular grande siga legible encima. */
.intro-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(760px 520px at 88% 78%, rgba(59, 114, 149, .38) 0%, rgba(16, 48, 63, 0) 68%),
    linear-gradient(115deg, rgba(16, 48, 63, .95) 0%, rgba(28, 52, 70, .88) 48%, rgba(38, 80, 107, .74) 100%),
    url("../img/banner-image.jpg") center / cover no-repeat,
    #16303F;
}
.intro-banner__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(700px 460px at 82% 30%, #000 0%, transparent 76%);
  mask-image: radial-gradient(700px 460px at 82% 30%, #000 0%, transparent 76%);
}
.intro-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, auto);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: 100%;
  padding: clamp(48px, 6vw, 80px) 0;
}
.intro-banner blockquote {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.avatar-stack__row { display: flex; }
.avatar-stack__row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
}
.avatar-stack__row span + span { margin-left: -14px; }
.avatar-stack p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.3;
}
.avatar-stack small {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: .88rem;
  color: rgba(255, 255, 255, .72);
}

.play {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
}
.play__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--gold);
  color: #221A03;
  font-size: 1.5rem;
  transition: background-color .25s var(--ease);
}
.play__circle::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  animation: play-pulse 2.4s var(--ease) infinite;
}
.play:hover .play__circle { background: var(--gold-soft); }
@keyframes play-pulse {
  0%   { transform: scale(.92); opacity: .9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Ventana del vídeo */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 22, 32, .84);
}
.video-modal.is-open { display: flex; }
.video-modal__box {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: #0A1620;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, .8);
}
.video-modal__box iframe { width: 100%; height: 100%; border: 0; }
.video-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
}

/* ==========================================================================
   12. Por qué elegirnos
   ========================================================================== */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

/* Panel marino con la cita de reputación. */
.why__panel {
  position: relative;
  background: var(--accent);
  color: #fff;
  padding: clamp(32px, 4vw, 54px);
  border-top-left-radius: var(--notch);
  border-bottom-right-radius: var(--notch);
  overflow: hidden;
}
.why__panel::before {
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.why__panel > * { position: relative; }
.why__panel .quote-mark {
  font-family: var(--font-mark);
  font-size: 4.5rem;
  line-height: .6;
  color: var(--gold-soft);
  opacity: .55;
  display: block;
  margin-bottom: 1rem;
}
.why__panel blockquote {
  margin: 0 0 1.4rem;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.why__panel cite {
  display: block;
  font-style: normal;
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 2rem;
}

.why__list li {
  display: flex;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.why__list li:first-child { padding-top: 0; }
.why__list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* La sección del Formulario 1040 reutiliza esta misma rejilla y el panel
   marino. Solo hacen falta tres cosas: que el titular del panel se lea sobre
   fondo oscuro, aire entre la lista y la nota, y una nota al pie discreta
   separada por una línea en las dos columnas. */
.why__panel h3 { color: #fff; }
.why__panel .check-list { margin-bottom: 0; }

.why__note {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: .93rem;
}
.why__panel .why__note {
  border-top-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .78);
}
.why__note + .btn-group { margin-top: 1.9rem; }

/* Con fotografia, las dos columnas se alinean por arriba: el borde superior
   de la imagen queda a la altura del borde del panel marino. */
.why__grid--top { align-items: start; }

/* Cuando la fotografía es la única pieza de su columna, se estira hasta la
   altura de la lista que tiene al lado en vez de dejar un hueco debajo. Solo
   por encima del punto donde la rejilla se parte en una columna: apilada, la
   altura la manda el recorte 16/9 de siempre. */
.why__grid--fill { align-items: stretch; }

@media (min-width: 993px) {
  .why__grid--fill .filing__photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
    margin-bottom: 0;
  }
}

/* La esquina recortada va en diagonal opuesta a la del panel que tiene al
   lado, para que las dos piezas se lean como un par. El recorte 16/9 deja que
   encaje cualquier fotografia sin deformarla, y el fondo suave evita un hueco
   en blanco mientras carga. */
.filing__photo {
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(26px, 3vw, 38px);
  background: var(--soft);
  border-top-right-radius: var(--notch);
  border-bottom-left-radius: var(--notch);
  overflow: hidden;
}
.filing__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .9rem;
  margin-top: .25rem;
}
.why__list h3 { margin-bottom: .35rem; font-size: 1.22rem; }
.why__list p { font-size: .98rem; margin: 0; }

/* ==========================================================================
   13. Nosotros (sección oscura)
   ========================================================================== */
.about {
  background: var(--dark);
  color: rgba(255, 255, 255, .76);
}
.about .section-head__aside { border-bottom-color: var(--line-dark); }
.about .section-head__aside p { color: rgba(255, 255, 255, .72); }
.about h2 { color: #fff; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 3vw, 40px);
  align-items: stretch;
}

/* En lugar de una fotografía de oficina —que habría que inventar— la
   columna izquierda es una lámina de marca con el monograma en marca de
   agua. Si algún día hay foto, basta con poner un <img> dentro y darle
   position:absolute; inset:0; object-fit:cover. */
.about__media {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-top-left-radius: var(--notch);
  background:
    radial-gradient(520px 420px at 78% 82%, rgba(59, 114, 149, .55) 0%, rgba(28, 52, 70, 0) 70%),
    linear-gradient(145deg, #1C3446 0%, #16303F 60%, #0F2331 100%);
}
.about__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* El monograma es el respaldo cuando no hay fotografía. En cuanto la
   columna lleva un <img>, sobra: borrar la imagen lo devuelve solo. */
.about__media:has(img) .about__monogram { display: none; }
.about__monogram {
  position: absolute;
  right: -.08em; bottom: -.22em;
  margin: 0;
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: clamp(9rem, 17vw, 15rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(159, 196, 218, .28);
  user-select: none;
  pointer-events: none;
}

/* La tarjeta de cita va arriba: abajo choca con el monograma. */
.about__quote {
  position: absolute;
  left: 0; top: 0;
  width: min(80%, 470px);
  background: var(--accent);
  color: #fff;
  padding: clamp(22px, 2.6vw, 34px);
  border-top-left-radius: var(--notch);
  border-bottom-right-radius: var(--notch);
}
.about__quote p {
  font-family: var(--font-head);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  margin-bottom: 1.1rem;
}

.about__panel {
  background: var(--dark-2);
  padding: clamp(28px, 3vw, 44px);
  border-bottom-right-radius: var(--notch);
  display: flex;
  flex-direction: column;
}
.about__panel p { color: rgba(255, 255, 255, .76); }
.about__panel .check-list { margin: 1.4rem 0 auto; }
.about__panel .check-list li { color: rgba(255, 255, 255, .84); font-size: .96rem; }

.about__founder {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
}
.about__founder-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
}
.about__founder strong {
  display: block;
  font-family: var(--font-head);
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.3;
}
.about__founder span { font-size: .88rem; color: rgba(255, 255, 255, .62); }

/* ==========================================================================
   14. Opiniones de clientes
   ========================================================================== */
.testimonials { overflow: hidden; }
.testimonials__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.testimonials__nav { display: flex; gap: .6rem; flex: 0 0 auto; }
.testimonials__nav button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), opacity .25s var(--ease);
}
.testimonials__nav button:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.testimonials__nav button:disabled { opacity: .35; cursor: default; }

/* Flexbox y no rejilla: con grid-auto-columns el ancho calculado contra el
   100 % del contenedor desplazable no es fiable y las tarjetas terminan
   encogidas en lugar de desplazarse. */
.testi-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  /* La barra se oculta: se navega con las flechas o arrastrando. */
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }

.testi-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top-right-radius: var(--notch);
  padding: clamp(26px, 2.6vw, 36px);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.testi-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.testi-card__stars {
  color: var(--gold);
  font-size: .92rem;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}
.testi-card h3 { font-size: 1.18rem; margin-bottom: .7rem; }
.testi-card p { font-size: .98rem; flex: 1 1 auto; margin-bottom: 1.6rem; }
.testi-card__author {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.testi-card__author .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
}
.testi-card__author strong {
  display: block;
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.3;
}
.testi-card__author small { font-size: .87rem; color: var(--text); }
.testi-card__author > div { min-width: 0; }

/* ==========================================================================
   15. Proceso en cuatro pasos
   ========================================================================== */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.steps__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.step {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-top-right-radius: var(--notch);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease);
}
.step:hover { transform: translateY(-6px); }

/* Fotografía al filo superior de la tarjeta: los márgenes negativos repiten
   exactamente el relleno de .step, así que la imagen sangra hasta el borde sin
   que haya que sacar el contenido de su caja. El recorte 16/9 y el fondo suave
   dejan el hueco reservado mientras carga. */
.step__photo {
  margin: calc(-1 * clamp(28px, 3vw, 40px)) calc(-1 * clamp(22px, 2.4vw, 32px)) clamp(20px, 2.2vw, 28px);
  /* Sin proporcion fija a proposito: el hueco toma la altura que le pide la
     fotografia, asi que la imagen se ve completa y no recortada. La proporcion
     la manda el archivo, de modo que se puede sustituir por otra de cualquier
     forma sin tocar esta hoja. Los atributos width y height del <img> en el
     HTML son los que reservan el sitio antes de que la imagen cargue, para que
     el texto de la tarjeta no salte. */
  overflow: hidden;
  background: var(--soft);
  border-top-right-radius: var(--notch);
}
.step__photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s var(--ease);
}
.step:hover .step__photo img { transform: scale(1.04); }
/* Sobre la tarjeta marina la foto se atenúa para que el texto blanco siga
   siendo lo primero que se lee. */
.step--filled .step__photo { background: rgba(255, 255, 255, .12); }
/* Antes se atenuaba al 82% para que la fotografia de archivo se fundiera con
   el azul de la tarjeta. Ahora la foto es la captura del resumen, y atenuarla
   apaga precisamente el texto que se quiere leer, asi que va a plena opacidad
   como las de las otras dos tarjetas. */
.step--filled .step__photo img { opacity: 1; }

/* Los pasos alternos nacen en marino para dar el ritmo de la referencia. */
.step--filled {
  background: var(--accent);
  border-color: var(--accent);
  color: rgba(255, 255, 255, .82);
}
.step--filled h3 { color: #fff; }
.step--filled .step__num { color: rgba(255, 255, 255, .45); }
.step--filled .step__icon { background: rgba(255, 255, 255, .16); color: #fff; }

.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-size: 1.35rem;
}
.step__num {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: #C3CDD4;
}
.step h3 { margin-bottom: .6rem; }
.step p { font-size: .96rem; margin: 0; }

/* ==========================================================================
   16. Cifras de resultados
   ========================================================================== */
.achievements { background: var(--soft); }
.achievements__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.counter {
  background: #fff;
  border: 1px solid var(--line);
  border-top-right-radius: var(--notch);
  padding: clamp(24px, 2.6vw, 34px);
}
.counter > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-size: 1.15rem;
  margin-bottom: 1.2rem;
}
.counter strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.counter strong sup {
  position: relative;          /* sin esto, top no mueve el signo */
  font-size: .5em;
  color: var(--gold);
  top: -.6em;
}
/* Hijo directo: si no, la regla también alcanza al <span> del número que va
   dentro del <strong> y la cifra sale en cuerpo de texto. */
.counter > span {
  display: block;
  margin-top: .45rem;
  font-size: .96rem;
}

/* ==========================================================================
   17. Preguntas frecuentes
   ========================================================================== */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.faq__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.faq__aside .btn-group { margin-top: 1.8rem; }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.4rem 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 700;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__trigger i {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-size: .85rem;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease);
}
.accordion__trigger[aria-expanded="true"] { color: var(--accent); }
.accordion__trigger[aria-expanded="true"] i {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
}

/* El panel se abre animando grid-template-rows de 0fr a 1fr: así la altura
   la calcula el navegador y no hay que medirla con JavaScript. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 1.5rem; margin: 0; max-width: 64ch; }

/* ==========================================================================
   18. Contacto y formulario
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

.contact__cards { display: grid; gap: 1rem; margin-top: 2rem; }
.contact__card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top-right-radius: var(--notch);
  padding: 1.4rem 1.6rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.contact__card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.contact__card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--accent);
  font-size: 1.1rem;
}
.contact__card strong {
  display: block;
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: .15rem;
}
.contact__card a { color: var(--text); }
.contact__card a:hover { color: var(--accent); }

/* Mapa de la oficina. La proporción fija reserva el hueco antes de que el
   iframe cargue, así que la columna no salta; el fondo suave es lo que se ve
   mientras tanto y también si el visitante bloquea el mapa. */
/* A lo ancho de la sección la altura se fija con clamp en lugar de con una
   proporción: a 1296px de ancho un recorte 4/3 daría casi mil píxeles de alto
   y el mapa se comería la página. */
.contact__map {
  margin-top: clamp(36px, 4vw, 56px);
  height: clamp(300px, 32vw, 440px);
  overflow: hidden;
  background: var(--soft);
  /* Mismo tratamiento de borde que .form-card, la tarjeta del formulario que
     tiene al lado: las dos esquinas recortadas en diagonal, el filete claro y
     la sombra media. Así el mapa y el formulario se leen como un par. */
  border: 1px solid var(--line);
  border-top-left-radius: var(--notch);
  border-bottom-right-radius: var(--notch);
  box-shadow: var(--shadow-md);
}
.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact__directions { margin-top: 1.1rem; }

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top-left-radius: var(--notch);
  border-bottom-right-radius: var(--notch);
  padding: clamp(26px, 3vw, 46px);
  box-shadow: var(--shadow-md);
}
.form-card h3 { margin-bottom: .4rem; }
.form-card > p { margin-bottom: 1.8rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: #C0392B; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 130px; }

/* El señuelo antirrobots: invisible para las personas, rellenable por un
   robot. Si llega con valor, el envío se descarta. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Estados del envío: los muestra contact.js añadiendo la clase is-shown. */
.form-status > div { display: none; }
.form-status > div.is-shown { display: block; }
.form-status .loading,
.form-status .error-message,
.form-status .sent-message {
  border-radius: 12px;
  padding: .85rem 1.1rem;
  font-size: .95rem;
  margin-top: 1.2rem;
}
.form-status .loading { background: var(--soft); color: var(--accent); }
.form-status .error-message { background: #FDECEA; color: #A5281B; }
.form-status .sent-message { background: #E8F7EE; color: #1C6B3D; }

.form-note { font-size: .9rem; margin-top: 1.2rem; }

/* ==========================================================================
   19. Franja de llamada a la acción
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
  border-top-left-radius: var(--notch);
  border-bottom-right-radius: var(--notch);
  padding: clamp(40px, 5vw, 68px) clamp(28px, 4vw, 64px);
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.cta-band::before { width: 320px; height: 320px; right: -90px; top: -140px; }
.cta-band::after  { width: 200px; height: 200px; right: 140px; bottom: -120px; }

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .45rem; font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.cta-band p { color: rgba(255, 255, 255, .82); margin: 0; }

/* ==========================================================================
   20. Pie de página
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--dark);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(60px, 7vw, 100px);
  overflow: hidden;
}

/* Titular gigante de fondo: mitad sólido, mitad contorneado. */
.footer__display {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: .9;
  white-space: nowrap;
  margin: 0;
  color: rgba(255, 255, 255, .1);
  user-select: none;
  pointer-events: none;
}
.footer__display .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
}

.footer__cards {
  position: relative;
  margin-top: -3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}
.footer__card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: clamp(24px, 2.6vw, 36px);
  backdrop-filter: blur(6px);
}
.footer__card h4 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.footer__card img.footer-logo { height: 52px; width: auto; margin-bottom: 1.2rem; }
/* Segundo bloque dentro de una misma tarjeta del pie (enlaces + contacto). */
.footer__card-second {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__card p { font-size: .95rem; }
.footer__card a { color: rgba(255, 255, 255, .78); }
.footer__card a:hover { color: #fff; }
/* La regla de arriba también alcanzaría a los botones y los dejaría con el
   texto blanco sobre fondo blanco, así que aquí recuperan su color. */
.footer__card .btn--light { color: var(--accent); }
.footer__card .btn--light:hover { color: var(--accent-dark); }
.footer__card .btn--wa,
.footer__card .btn--wa:hover { color: #08361A; }

.footer__links li { margin-bottom: .6rem; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .96rem;
}
.footer__links i { color: var(--gold-soft); font-size: .8rem; }

.footer__contact li {
  display: flex;
  gap: .8rem;
  margin-bottom: .85rem;
  font-size: .95rem;
}
.footer__contact i { color: var(--gold-soft); margin-top: .3rem; }

/* Horario del pie: dos columnas, el día a la izquierda y la hora alineada a
   la derecha, para que se lea como un cartel de puerta. */
.footer__hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .93rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.footer__hours li:last-child { border-bottom: 0; }
.footer__hours li span:last-child {
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.footer__hours .is-closed span:last-child { color: rgba(255, 255, 255, .45); }

/* Tarjeta de llamada a la acción del pie. */
.footer__cta h4 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; }
.footer__cta > p { margin-bottom: 1.6rem; }
.footer__phone {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.7rem;
}
/* Más específico que .footer__card a, que si no lo deja apagado. */
.footer__card .footer__phone { color: #fff; }
.footer__card .footer__phone:hover { color: var(--gold-soft); }
.footer__phone i { color: var(--gold-soft); font-size: .78em; }
.footer__cta .btn { padding: .9rem 1.5rem; font-size: .95rem; }
.footer__cta-alt {
  margin-top: 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .95rem;
}
.footer__card .footer__cta-alt a { color: var(--gold-soft); }
.footer__card .footer__cta-alt a:hover { color: #fff; }

.footer__social {
  display: flex;
  gap: .6rem;
  margin-top: 1.4rem;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .25s var(--ease);
}
.footer__social a:hover { background: var(--accent); color: #fff; }

.footer__bottom {
  margin-top: clamp(36px, 4vw, 56px);
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .9rem;
}
.footer__bottom a { color: rgba(255, 255, 255, .8); }
.footer__bottom a:hover { color: #fff; }

/* Aviso legal obligatorio para un despacho de impuestos. */
.footer__disclaimer {
  font-size: .82rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .5);
  padding-bottom: 1.6rem;
  max-width: 96ch;
}

/* ==========================================================================
   21. Botones flotantes
   ========================================================================== */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), opacity .25s var(--ease),
              visibility .25s var(--ease), background-color .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--accent-dark); color: #fff; }

/* --------------------------------------------------------------------------
   Widget de WhatsApp: botón flotante y ventana de chat. El marcado lo genera
   assets/js/whatsapp.js, así que aquí solo vive la apariencia. Los colores
   son los de WhatsApp a propósito: el visitante tiene que reconocer de qué
   aplicación se trata antes de pulsar.
   -------------------------------------------------------------------------- */
.wa-widget {
  --wa-green: var(--whatsapp);
  --wa-green-dark: #128C7E;
  --wa-header: #075E54;
  --wa-chat-bg: #E5DDD5;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font-text);
  /* El contenedor no captura clics: el panel, aunque esté oculto, ocupa su
     hueco y taparía lo que haya debajo. */
  pointer-events: none;
}
.wa-launcher,
.wa-panel { pointer-events: auto; }

.wa-launcher {
  position: relative;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  font-size: 1.7rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.wa-launcher:hover,
.wa-launcher:focus-visible {
  background: var(--wa-green-dark);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 140, 126, .45);
}
.wa-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wa-launcher i { pointer-events: none; }
.wa-launcher .wa-launcher__close { display: none; font-size: 1.35rem; }
.wa-widget.is-open .wa-launcher .wa-launcher__open { display: none; }
.wa-widget.is-open .wa-launcher .wa-launcher__close { display: block; }

/* Globo de mensaje sin leer. */
.wa-launcher__badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #EF4444;
  color: #fff;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  line-height: 20px;
  box-shadow: 0 0 0 2px #fff;
}
.wa-widget.is-seen .wa-launcher__badge { display: none; }

.wa-panel {
  width: min(340px, calc(100vw - 44px));
  max-height: min(520px, calc(100vh - 170px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(12px) scale(.96);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.wa-widget.is-open .wa-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wa-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--wa-header);
  color: #fff;
}
.wa-panel__avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--wa-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 0;
}
.wa-panel__id { flex: 1 1 auto; min-width: 0; }
.wa-panel__name {
  margin: 0;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.wa-panel__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: .75rem;
  line-height: 1.3;
  opacity: .85;
}
.wa-panel__status::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
}
.wa-panel__close {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: .95rem;
  line-height: 0;
  padding: 8px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .25s var(--ease), background-color .25s var(--ease);
}
.wa-panel__close:hover,
.wa-panel__close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .15); }

.wa-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 16px 24px;
  background-color: var(--wa-chat-bg);
  background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 14px 14px;
}
.wa-bubble {
  position: relative;
  max-width: 92%;
  padding: 10px 12px 20px;
  border-radius: 0 10px 10px 10px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(20, 33, 43, .16);
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.55;
}
.wa-bubble::before {
  content: "";
  position: absolute;
  top: 0; left: -8px;
  border-style: solid;
  border-width: 0 9px 10px 0;
  border-color: transparent #fff transparent transparent;
}
.wa-bubble p { margin: 0 0 8px; }
.wa-bubble p:last-of-type { margin-bottom: 0; }
.wa-bubble__time {
  position: absolute;
  right: 10px; bottom: 6px;
  font-size: .69rem;
  color: #8696A0;
}

.wa-panel__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 6px;
  background: #F0F2F5;
}
.wa-panel__form textarea {
  flex: 1 1 auto;
  max-height: 96px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.4;
  resize: none;
}
.wa-panel__form textarea:focus {
  outline: 0;
  border-color: var(--wa-green);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}
.wa-send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  font-size: 1.05rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.wa-send:hover,
.wa-send:focus-visible { background: var(--wa-green-dark); color: #fff; }

.wa-panel__legal {
  margin: 0;
  padding: 0 14px 10px;
  background: #F0F2F5;
  color: #667781;
  font-size: .69rem;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 575px) {
  .wa-widget { right: 16px; bottom: 16px; }
  .to-top { right: 16px; bottom: 84px; }
  .wa-panel { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-launcher, .wa-panel, .wa-send, .wa-panel__close { transition: none; }
  .wa-launcher:hover, .wa-launcher:focus-visible { transform: none; }
}

/* ==========================================================================
   22. Animaciones de entrada
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__video { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   23. Adaptación a pantallas pequeñas
   ========================================================================== */
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi-card { flex-basis: calc((100% - 24px) / 2); }
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__card--wide { grid-column: 1 / -1; }
}

@media (max-width: 992px) {
  :root { --header-h: 78px; }

  .nav-toggle { display: inline-flex; }
  .header-phone__num { display: none; }
  .header-phone__icon { width: 42px; height: 42px; flex-basis: 42px; }

  /* Menú lateral desplegable. */
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    background: #fff;
    box-shadow: -10px 0 40px rgba(10, 22, 32, .25);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    padding: 92px 28px 32px;
    overflow-y: auto;
    z-index: 70;
    margin-left: 0;
  }
  .main-nav.is-open { transform: none; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a {
    color: var(--ink);
    display: block;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.08rem;
  }
  .main-nav a::after { display: none; }
  .site-header.is-stuck .main-nav a { color: var(--ink); }

  .nav-close {
    position: absolute;
    top: 22px; right: 22px;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 1.2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(10, 22, 32, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
    z-index: 65;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head__aside {
    order: 2;
    text-align: left;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .section-head__main { order: 1; }

  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__aside { max-width: 620px; }

  .why__grid,
  .about__grid,
  .faq__grid,
  .contact__grid,
  .achievements__grid,
  .intro-banner__inner { grid-template-columns: 1fr; }

  /* La franja de cifras pasa a tres columnas y los sellos caen debajo. */

  .testimonials__head { flex-direction: column; align-items: flex-start; }
  .faq__aside { position: static; }
  .about__media { min-height: 380px; }
  .cta-band__inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* En móvil se muestra la fotografía en lugar del vídeo: son casi 6 MB y la
     mayoría de esas visitas llegan por datos. */
  .hero__video { display: none; }
  :root { --notch: 34px; }

  .topbar { height: auto; padding: .5rem 0; font-size: .8rem; }
  .topbar .container { flex-wrap: wrap; gap: .5rem; }
  .topbar__info { gap: .9rem; flex-wrap: wrap; }
  .hide-sm { display: none !important; }

  .services__grid,
  .steps__grid,
  .credentials,
  .footer__cards { grid-template-columns: 1fr; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi-card { flex-basis: 86%; }
  .play__circle { width: 68px; height: 68px; }
  .form-grid { grid-template-columns: 1fr; }

  .footer__display { font-size: clamp(3rem, 16vw, 6rem); }
  .footer__cards { margin-top: -1.5rem; }
  .footer__bottom { justify-content: center; text-align: center; }

  .about__media { min-height: 300px; }
  .about__quote { position: static; width: 100%; border-radius: 0 0 var(--notch) 0; }
  .about__monogram { font-size: clamp(7rem, 26vw, 11rem); }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .btn-group .btn { flex: 1 1 100%; }
  /* La flecha circular repite el enlace de la píldora que tiene al lado; en
     pantallas estrechas solo gastaría una línea entera. */
  .btn-round { display: none; }
}