/* =====================================================
   ALTALTIUM · LANDING PAGES DE SOLUCIONES
   Capa de estilos exclusiva para las 6 landings de
   /LANDINGS/*. Se apoya en las variables y componentes ya
   existentes (site-shared.css, style.css, lo_que_ofrecemos.css:
   .detalle-*, .btn-consulta, .modal-asesoria) — aquí solo se
   define lo que esas hojas no cubren: hero de solución,
   breadcrumb, franja de confianza y CTA final.
   ===================================================== */

body.landing-body {
  background: var(--bg);
}

.landing-main { display: block; }

/* ── Breadcrumb ──────────────────────────────────────── */
.landing-breadcrumb {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px 0;
  font-family: var(--fh);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text3);
}
.landing-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.landing-breadcrumb a { color: var(--text3); text-decoration: none; }
.landing-breadcrumb a:hover { color: var(--accent); }
.landing-breadcrumb li[aria-current] { color: var(--text2); }
.landing-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--border2); }

/* ── Hero ────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
.landing-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Carrusel de fondo del hero: 5 fotos en crossfade continuo,
   solo CSS (sin JS, sin dependencias). */
.landing-hero__slideshow {
  position: absolute;
  inset: 0;
}
.landing-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: landingHeroSlide 25s infinite;
}
.landing-hero__slide:nth-child(1) { animation-delay: 0s; }
.landing-hero__slide:nth-child(2) { animation-delay: 5s; }
.landing-hero__slide:nth-child(3) { animation-delay: 10s; }
.landing-hero__slide:nth-child(4) { animation-delay: 15s; }
.landing-hero__slide:nth-child(5) { animation-delay: 20s; }

@keyframes landingHeroSlide {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  20%   { opacity: 1; }
  25%   { opacity: 0; }
  100%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__slide {
    animation: none;
    opacity: 0;
  }
  .landing-hero__slide:first-child { opacity: 1; }
}
.landing-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,8,.55) 0%, rgba(7,7,8,.72) 55%, rgba(7,7,8,1) 100%);
}
.landing-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 90px;
  text-align: center;
}
.landing-hero__inner h1 {
  font-family: var(--fh);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 1.1rem;
  color: #fff;
}
.landing-hero__inner h1 span { color: var(--accent-h); }
.landing-hero__sub {
  font-family: var(--fh);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,255,255,.86);
  max-width: 620px;
  margin: 0 auto 2rem;
  line-height: 1.55;
}
.landing-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 2.1rem;
}
.btn-secondary {
  padding: 13px 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  cursor: pointer;
  background: transparent;
  color: #fff;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  transition: var(--trans);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,204,204,.08);
}
.landing-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
}
.landing-hero__trust svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent-h);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Secciones genéricas ─────────────────────────────── */
.landing-section {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px;
}
.landing-section--alt {
  max-width: none;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.landing-section--alt > .landing-section-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px;
}
.landing-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.landing-section-header h2 {
  font-family: var(--fh);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 10px;
}
.landing-section-header p {
  color: var(--text3);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Franja de confianza (Forbes, respaldo) ─────────── */
.landing-trust-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  background: rgba(245, 246, 248, .97);
  border-radius: var(--r2);
  box-shadow: 0 20px 46px rgba(0,0,0,.4);
  padding: 18px 22px;
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.landing-trust-badge:hover,
.landing-trust-badge:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 26px 56px rgba(0,0,0,.46);
}
.landing-trust-badge:hover .about-badge__arrow,
.landing-trust-badge:focus-visible .about-badge__arrow {
  transform: rotate(45deg);
  background: var(--accent);
}
.landing-trust-badge:hover .about-badge__arrow svg,
.landing-trust-badge:focus-visible .about-badge__arrow svg {
  stroke: var(--on-accent);
}

/* ── CTA final ───────────────────────────────────────── */
.landing-final-cta {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border-top: 1px solid var(--border);
  padding: 80px 24px;
  text-align: center;
}
.landing-final-cta h2 {
  font-family: var(--fh);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 14px;
}
.landing-final-cta p {
  color: var(--text2);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto 30px;
}
.landing-final-cta__contacto {
  margin-top: 24px;
  font-size: .85rem;
  color: var(--text3);
}
.landing-final-cta__contacto a { color: var(--text2); text-decoration: none; }
.landing-final-cta__contacto a:hover { color: var(--accent); }

.landing-final-cta__form {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
/* #formAsesoria trae un estilo claro heredado de lo_que_ofrecemos.css
   (pensado para un modal sobre fondo blanco). Aquí el formulario va
   directo sobre el tema oscuro de la landing, así que se restaura la
   paleta oscura del sistema de diseño para que el texto se lea bien. */
.landing-final-cta__form #formAsesoria input,
.landing-final-cta__form #formAsesoria select,
.landing-final-cta__form #formAsesoria textarea {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border2);
}
.landing-final-cta__form #formAsesoria input:focus,
.landing-final-cta__form #formAsesoria select:focus,
.landing-final-cta__form #formAsesoria textarea:focus {
  background: var(--bg3);
  border-color: var(--accent);
}

/* ── Hero variante "split": nombre del servicio grande
   anclado abajo a la izquierda + titular en líneas separadas;
   del otro lado la descripción, los CTAs y las palomitas. ─ */
.landing-hero--split { align-items: flex-end; }
.landing-hero__split {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 64px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: end;
  text-align: left;
}
.landing-hero__left .hero-eyebrow { margin-bottom: 1.1rem; }

/* Variante: todo en una sola columna, pegada a la derecha. */
.landing-hero__split--right,
.landing-hero__split--left {
  display: flex;
  max-width: none;
  width: 100%;
}
.landing-hero__split--right {
  justify-content: flex-end;
  padding-right: 6vw;
}
.landing-hero__split--left {
  justify-content: flex-start;
  padding-left: 6vw;
}
.landing-hero__split--right .landing-hero__right,
.landing-hero__split--left .landing-hero__right {
  max-width: 620px;
}

.landing-hero__name {
  font-family: var(--fh);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.3rem;
}
.landing-hero__split h1 {
  font-family: var(--fh);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255,255,255,.94);
  margin: 0;
}
.landing-hero__split h1 span { display: block; color: var(--accent-h); }
.landing-hero__right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.landing-hero__right .landing-hero__sub {
  margin: 0;
  max-width: 480px;
  text-align: left;
}
.landing-hero__right .landing-hero__cta { justify-content: flex-start; margin: 0; }
.landing-hero__right .landing-hero__trust { justify-content: flex-start; }

@media (max-width: 900px) {
  .landing-hero__split { grid-template-columns: 1fr; padding: 32px 20px 40px; gap: 28px; }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
  .landing-hero { min-height: 92vh; }
  .landing-hero__inner { padding: 48px 20px 70px; }
  .landing-section { padding: 50px 20px; }
  .landing-section--alt > .landing-section-inner { padding: 50px 20px; }
  .landing-trust-badge { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-trust-badge { transition: none; }
}

/* ── Sección "¿Qué es?": texto a la izquierda, imagen a
   sangre completa a la derecha (sin padding, borde a borde
   con la sección). ─────────────────────────────────────── */
.landing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.landing-split__inner {
  display: contents;
}
.landing-split__text {
  padding: 70px clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-split__text h2 {
  font-family: var(--fh);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 18px;
}
.landing-split__lead {
  font-family: var(--fh);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-h);
  line-height: 1.5;
  margin: 0 0 22px;
}
.landing-split__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text2);
  margin: 0 0 16px;
}
.landing-split__body:last-child { margin-bottom: 16px; }
.landing-split__check {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}
.landing-split__check li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.landing-split__check svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 560px) {
  .landing-split__check { grid-template-columns: 1fr; }
}
.landing-split__media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}
.landing-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}
@media (max-width: 900px) {
  .landing-split { grid-template-columns: 1fr; }
  .landing-split__media { min-height: 280px; }
  .landing-split__text { padding: 44px 24px; }
}

/* ── Lista de problemas: tarjetas con icono, entrada
   escalonada al hacer scroll (reusa [data-reveal] + --d) y
   pequeño levantamiento/realce al pasar el cursor. ────── */
.landing-problems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.landing-problems li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.45;
  transition: transform .3s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.landing-problems li:hover {
  transform: translateX(8px);
  border-color: var(--accent);
  background: var(--bg3);
  box-shadow: 0 10px 26px var(--glow);
}
.landing-problems__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dark);
  color: var(--accent);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.landing-problems li:hover .landing-problems__icon {
  background: var(--accent);
  color: var(--on-accent);
  transform: rotate(-8deg) scale(1.08);
}
.landing-problems__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 700px) {
  .landing-problems { grid-template-columns: 1fr; }
}

/* =====================================================
   COMPONENTES ESTILO POLK (portados de la plantilla,
   recoloreados al tema oscuro de Altaltium)
   ===================================================== */

/* Etiqueta lateral rotada del hero — el sello visual de Polk
   (banner_taital girado 90°) junto a la imagen. Solo desktop:
   en móvil no hay espacio para texto vertical. */
.landing-hero__side-label {
  position: absolute;
  top: 50%;
  left: 28px;
  z-index: 2;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .landing-hero__side-label { display: none; }
}

/* Grid de trabajo/subdivisiones con overlay al hover — versión
   oscura del .design_section_main / .container_main de Polk.
   .polk-grid--4 replica el patrón asimétrico 1-2-1 de Polk
   (columna central con dos tarjetas apiladas) para grupos de 4. */
.polk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.polk-grid__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.polk-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--bg2);
  flex: 1;
  display: block;
  text-decoration: none;
  transition: border-color .3s ease;
}
.polk-card:hover,
.polk-card:focus-visible { border-color: var(--accent); }
.polk-card__img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.polk-card:hover .polk-card__img,
.polk-card:focus-visible .polk-card__img,
.polk-card:focus-within .polk-card__img { transform: scale(1.08); }

.polk-card__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, transparent, rgba(7,7,8,.92) 75%);
  transition: opacity .35s ease;
}
.polk-card__label strong {
  display: block;
  font-family: var(--fh);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.polk-card:hover .polk-card__label,
.polk-card:focus-visible .polk-card__label,
.polk-card:focus-within .polk-card__label { opacity: 0; }

.polk-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(165deg, rgba(0,204,204,.22), rgba(7,7,8,.94));
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.polk-card:hover .polk-card__overlay,
.polk-card:focus-visible .polk-card__overlay,
.polk-card:focus-within .polk-card__overlay {
  opacity: 1;
  pointer-events: auto;
}
.polk-card__overlay-inner { max-width: 88%; }
.polk-card__title {
  font-family: var(--fh);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.polk-card__desc {
  font-size: .84rem;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  margin: 0 0 18px;
}
.polk-card__btn {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid var(--accent-h);
  border-radius: 999px;
  color: #fff;
  font-family: var(--fh);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--trans);
}
.polk-card__btn:hover,
.polk-card__btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 800px) {
  .polk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .polk-grid { grid-template-columns: 1fr; }
  .polk-grid__stack { gap: 24px; }
  .polk-card__img { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .polk-card__img,
  .polk-card__label,
  .polk-card__overlay { transition: none; }
}

/* ── "¿Cómo funciona?": letra grande estilo título,
   desbordando la tarjeta, sin círculo; fondo de la sección
   con foto translúcida (mismo patrón que .about-section). ─ */
#detalle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#detalle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/RECURSOS/IMG/Solucioneslegales2.png') center/cover no-repeat;
  opacity: .16;
  pointer-events: none;
}
#detalle .detalle-card { overflow: visible; padding-top: 48px; }
#detalle .detalle-card__letra {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  font-family: var(--fh);
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-bottom: 0;
}

/* ── "¿Qué nos hace diferentes?": tarjetas de borde punteado
   (estilo boleto/festival, igual al ejemplo que mandó el cliente),
   con dos fotos flotando en las orillas reales de la pantalla. ─ */
.diferentes-section {
  position: relative;
  overflow: hidden;
}
/* .landing-section-inner es un div normal (sin position), y un
   elemento posicionado (las fotos, position:absolute) siempre pinta
   ENCIMA de uno sin posicionar aunque venga antes en el HTML. Para
   que el encabezado quede realmente arriba de la foto —y no al
   revés— necesita su propio contexto de apilamiento. */
.diferentes-section > .landing-section-inner {
  position: relative;
  z-index: 1;
}
/* El marco mide exactamente el alto completo de la sección
   (height:100%) y el ancho se calcula con aspect-ratio a partir de
   ese alto, con la MISMA proporción real de la foto (1800x1600):
   así el marco tiene la forma exacta de la foto y no sobra ni falta
   nada de espacio — sin recortar ni degradar y tocando arriba/abajo
   por completo. Como puede llegar a ser ancha, va detrás de todo
   (z-index menor); las tarjetas y el encabezado tienen fondo sólido
   propio, así que donde la foto se mete debajo de ellos simplemente
   queda tapada, nunca compite con el texto. */
.diferentes-side {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 1800 / 1600;
  object-fit: contain;
  z-index: 0;
  display: block;
}
.diferentes-side--left {
  left: 0;
  object-position: left center;
}
.diferentes-side--right {
  right: 0;
  object-position: right center;
}
.diferentes-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.diferentes-card {
  position: relative;
  background: rgba(15, 15, 17, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 26px 22px;
}
/* border:dotted liga el tamaño del punto con la separación entre
   puntos (no se pueden ajustar por separado). Para tener puntos
   chicos con más espacio entre ellos, el borde se dibuja con 4
   gradientes radiales en miniatura (uno por lado) en vez del
   border-style nativo. */
.diferentes-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: top left, bottom left, top left, top right;
  background-size: 11px 3px, 11px 3px, 3px 11px, 3px 11px;
  background-image:
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px),
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px),
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px),
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px);
}
.diferentes-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #04211f;
  font-family: var(--fh);
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 16px;
}
.diferentes-card h3,
.diferentes-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.diferentes-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
}
.diferentes-card__list {
  list-style: none;
  margin-top: 10px;
}
.diferentes-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text2);
  margin-bottom: 6px;
}
.diferentes-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
@media (max-width: 1100px) {
  .diferentes-side { display: none; }
}
@media (max-width: 800px) {
  .diferentes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .diferentes-grid { grid-template-columns: 1fr; }
}

/* ── "Nuestro proceso": lista de pasos donde el círculo
   activo se agranda/blanquea y su texto se despliega A SU
   DERECHA (el resto queda colapsado, solo el círculo). Con
   autoplay + clic manual. Fondo con blobs difuminados, igual
   que la sección de Asesorías. ─────────────────────────── */
.section-blobs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Las .asesorias-blob originales se posicionan en % de la altura de
   SU PROPIA sección, pero su tamaño está fijo en vw (relativo al
   viewport, no a la sección). Eso funciona en la sección de
   Asesorías porque su alto es predecible, pero aquí la sección de
   FAQ crece con la cantidad de preguntas y puede ser mucho más alta:
   con las posiciones originales quedaba un hueco enorme sin mancha
   en medio de la sección (un "borde"/corte visible en el efecto).
   Aquí se reposicionan en % repartidos a lo largo de toda la
   sección y con manchas más grandes para que siempre se traslapen
   y no quede ningún hueco, sin importar cuántas preguntas haya. */
.section-blobs .asesorias-blob--1 {
  top: -6%;
  left: -14%;
  bottom: auto;
  right: auto;
  width: 56vw;
  max-width: 680px;
}
.section-blobs .asesorias-blob--2 {
  top: 34%;
  right: -16%;
  bottom: auto;
  left: auto;
  width: 52vw;
  max-width: 640px;
}
.section-blobs .asesorias-blob--3 {
  top: 70%;
  left: 24%;
  width: 46vw;
  max-width: 560px;
}
@media (max-width: 900px) {
  .section-blobs .asesorias-blob--1 {
    top: -8%;
    left: -30%;
    width: 95vw;
    max-width: 480px;
  }
  .section-blobs .asesorias-blob--2 {
    top: 38%;
    right: -30%;
    width: 90vw;
    max-width: 460px;
  }
  .section-blobs .asesorias-blob--3 {
    top: 78%;
    left: -10%;
    width: 85vw;
    max-width: 440px;
  }
}
.proceso-flow__label {
  flex-shrink: 0;
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
}
.proceso-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 900px;
  margin: 28px auto 0;
  padding: 10px 0;
}
.proceso-flow__track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0;
}
/* Cada paso ocupa siempre el mismo espacio (flex:0 0 auto, sin
   crecer/encoger): así la fila entera nunca se mueve ni se
   descentra sin importar cuál paso esté activo. Lo único que
   cambia de tamaño/posición es el círculo, y solo vía transform
   (que no afecta el layout de sus hermanos). El texto se
   posiciona absoluto a la derecha del círculo, así que tampoco
   empuja al resto de la fila. */
.proceso-flow__step {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.proceso-flow__circle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--bg3), var(--bg2));
  border: 2px solid var(--border2);
  cursor: pointer;
  padding: 0;
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.proceso-flow__circle strong {
  font-family: var(--fh);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text2);
  transition: color .4s ease;
}
.proceso-flow__arc {
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
}
.proceso-flow__step.is-active .proceso-flow__circle {
  transform: translateX(-12px) scale(1.35);
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 10px 26px var(--glow);
  z-index: 2;
}
.proceso-flow__step.is-active .proceso-flow__circle strong {
  color: #0c0d0f;
}
/* En escritorio el texto de cada etapa NO va junto al círculo: va
   en un panel único debajo de toda la fila (como al inicio de esta
   sesión). Por eso .proceso-flow__text se oculta aquí; solo se usa
   en móvil (ver media query), donde cada etapa SÍ necesita su propio
   texto flotando junto a su círculo. */
.proceso-flow__text {
  display: none;
}
.proceso-flow__panel {
  max-width: 520px;
  margin: 22px auto 0;
  padding: 0 16px;
  text-align: center;
  opacity: 1;
  transition: opacity .2s ease;
}
.proceso-flow__panel.is-fading {
  opacity: 0;
}
.proceso-flow__panel h3 {
  font-family: var(--fh);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
}
.proceso-flow__panel p {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text2);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero__slide {
    animation: none;
    opacity: 0;
  }
  .landing-hero__slide:first-child { opacity: 1; }
}
.landing-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,7,8,.55) 0%, rgba(7,7,8,.72) 55%, rgba(7,7,8,1) 100%);
}
.landing-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 90px;
  text-align: center;
}
.landing-hero__inner h1 {
  font-family: var(--fh);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 1.1rem;
  color: #fff;
}
.landing-hero__inner h1 span { color: var(--accent-h); }
.landing-hero__sub {
  font-family: var(--fh);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,255,255,.86);
  max-width: 620px;
  margin: 0 auto 2rem;
  line-height: 1.55;
}
.landing-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 2.1rem;
}
.btn-secondary {
  padding: 13px 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  cursor: pointer;
  background: transparent;
  color: #fff;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  transition: var(--trans);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,204,204,.08);
}
.landing-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
}
.landing-hero__trust svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent-h);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Secciones genéricas ─────────────────────────────── */
.landing-section {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px;
}
.landing-section--alt {
  max-width: none;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.landing-section--alt > .landing-section-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px;
}
.landing-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.landing-section-header h2 {
  font-family: var(--fh);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 10px;
}
.landing-section-header p {
  color: var(--text3);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Franja de confianza (Forbes, respaldo) ─────────── */
.landing-trust-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  background: rgba(245, 246, 248, .97);
  border-radius: var(--r2);
  box-shadow: 0 20px 46px rgba(0,0,0,.4);
  padding: 18px 22px;
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.landing-trust-badge:hover,
.landing-trust-badge:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 26px 56px rgba(0,0,0,.46);
}
.landing-trust-badge:hover .about-badge__arrow,
.landing-trust-badge:focus-visible .about-badge__arrow {
  transform: rotate(45deg);
  background: var(--accent);
}
.landing-trust-badge:hover .about-badge__arrow svg,
.landing-trust-badge:focus-visible .about-badge__arrow svg {
  stroke: var(--on-accent);
}

/* ── CTA final ───────────────────────────────────────── */
.landing-final-cta {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border-top: 1px solid var(--border);
  padding: 80px 24px;
  text-align: center;
}
.landing-final-cta h2 {
  font-family: var(--fh);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 14px;
}
.landing-final-cta p {
  color: var(--text2);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto 30px;
}
.landing-final-cta__contacto {
  margin-top: 24px;
  font-size: .85rem;
  color: var(--text3);
}
.landing-final-cta__contacto a { color: var(--text2); text-decoration: none; }
.landing-final-cta__contacto a:hover { color: var(--accent); }

.landing-final-cta__form {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
/* #formAsesoria trae un estilo claro heredado de lo_que_ofrecemos.css
   (pensado para un modal sobre fondo blanco). Aquí el formulario va
   directo sobre el tema oscuro de la landing, así que se restaura la
   paleta oscura del sistema de diseño para que el texto se lea bien. */
.landing-final-cta__form #formAsesoria input,
.landing-final-cta__form #formAsesoria select,
.landing-final-cta__form #formAsesoria textarea {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border2);
}
.landing-final-cta__form #formAsesoria input:focus,
.landing-final-cta__form #formAsesoria select:focus,
.landing-final-cta__form #formAsesoria textarea:focus {
  background: var(--bg3);
  border-color: var(--accent);
}

/* ── Hero variante "split": nombre del servicio grande
   anclado abajo a la izquierda + titular en líneas separadas;
   del otro lado la descripción, los CTAs y las palomitas. ─ */
.landing-hero--split { align-items: flex-end; }
.landing-hero__split {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 64px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: end;
  text-align: left;
}
.landing-hero__left .hero-eyebrow { margin-bottom: 1.1rem; }

/* Variante: todo en una sola columna, pegada a la derecha. */
.landing-hero__split--right,
.landing-hero__split--left {
  display: flex;
  max-width: none;
  width: 100%;
}
.landing-hero__split--right {
  justify-content: flex-end;
  padding-right: 6vw;
}
.landing-hero__split--left {
  justify-content: flex-start;
  padding-left: 6vw;
}
.landing-hero__split--right .landing-hero__right,
.landing-hero__split--left .landing-hero__right {
  max-width: 620px;
}

.landing-hero__name {
  font-family: var(--fh);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.3rem;
}
.landing-hero__split h1 {
  font-family: var(--fh);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255,255,255,.94);
  margin: 0;
}
.landing-hero__split h1 span { display: block; color: var(--accent-h); }
.landing-hero__right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.landing-hero__right .landing-hero__sub {
  margin: 0;
  max-width: 480px;
  text-align: left;
}
.landing-hero__right .landing-hero__cta { justify-content: flex-start; margin: 0; }
.landing-hero__right .landing-hero__trust { justify-content: flex-start; }

@media (max-width: 900px) {
  .landing-hero__split { grid-template-columns: 1fr; padding: 32px 20px 40px; gap: 28px; }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
  .landing-hero { min-height: 92vh; }
  .landing-hero__inner { padding: 48px 20px 70px; }
  .landing-section { padding: 50px 20px; }
  .landing-section--alt > .landing-section-inner { padding: 50px 20px; }
  .landing-trust-badge { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-trust-badge { transition: none; }
}

/* ── Sección "¿Qué es?": texto a la izquierda, imagen a
   sangre completa a la derecha (sin padding, borde a borde
   con la sección). ─────────────────────────────────────── */
.landing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.landing-split__inner {
  display: contents;
}
.landing-split__text {
  padding: 70px clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-split__text h2 {
  font-family: var(--fh);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 18px;
}
.landing-split__lead {
  font-family: var(--fh);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-h);
  line-height: 1.5;
  margin: 0 0 22px;
}
.landing-split__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text2);
  margin: 0 0 16px;
}
.landing-split__body:last-child { margin-bottom: 16px; }
.landing-split__check {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}
.landing-split__check li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.landing-split__check svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 560px) {
  .landing-split__check { grid-template-columns: 1fr; }
}
.landing-split__media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
}
.landing-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}
@media (max-width: 900px) {
  .landing-split { grid-template-columns: 1fr; }
  .landing-split__media { min-height: 280px; }
  .landing-split__text { padding: 44px 24px; }
}

/* ── Lista de problemas: tarjetas con icono, entrada
   escalonada al hacer scroll (reusa [data-reveal] + --d) y
   pequeño levantamiento/realce al pasar el cursor. ────── */
.landing-problems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.landing-problems li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.45;
  transition: transform .3s var(--ease), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.landing-problems li:hover {
  transform: translateX(8px);
  border-color: var(--accent);
  background: var(--bg3);
  box-shadow: 0 10px 26px var(--glow);
}
.landing-problems__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dark);
  color: var(--accent);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease);
}
.landing-problems li:hover .landing-problems__icon {
  background: var(--accent);
  color: var(--on-accent);
  transform: rotate(-8deg) scale(1.08);
}
.landing-problems__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 700px) {
  .landing-problems { grid-template-columns: 1fr; }
}

/* =====================================================
   COMPONENTES ESTILO POLK (portados de la plantilla,
   recoloreados al tema oscuro de Altaltium)
   ===================================================== */

/* Etiqueta lateral rotada del hero — el sello visual de Polk
   (banner_taital girado 90°) junto a la imagen. Solo desktop:
   en móvil no hay espacio para texto vertical. */
.landing-hero__side-label {
  position: absolute;
  top: 50%;
  left: 28px;
  z-index: 2;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .landing-hero__side-label { display: none; }
}

/* Grid de trabajo/subdivisiones con overlay al hover — versión
   oscura del .design_section_main / .container_main de Polk.
   .polk-grid--4 replica el patrón asimétrico 1-2-1 de Polk
   (columna central con dos tarjetas apiladas) para grupos de 4. */
.polk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.polk-grid__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.polk-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--bg2);
  flex: 1;
  display: block;
  text-decoration: none;
  transition: border-color .3s ease;
}
.polk-card:hover,
.polk-card:focus-visible { border-color: var(--accent); }
.polk-card__img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.polk-card:hover .polk-card__img,
.polk-card:focus-visible .polk-card__img,
.polk-card:focus-within .polk-card__img { transform: scale(1.08); }

.polk-card__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, transparent, rgba(7,7,8,.92) 75%);
  transition: opacity .35s ease;
}
.polk-card__label strong {
  display: block;
  font-family: var(--fh);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.polk-card:hover .polk-card__label,
.polk-card:focus-visible .polk-card__label,
.polk-card:focus-within .polk-card__label { opacity: 0; }

.polk-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(165deg, rgba(0,204,204,.22), rgba(7,7,8,.94));
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.polk-card:hover .polk-card__overlay,
.polk-card:focus-visible .polk-card__overlay,
.polk-card:focus-within .polk-card__overlay {
  opacity: 1;
  pointer-events: auto;
}
.polk-card__overlay-inner { max-width: 88%; }
.polk-card__title {
  font-family: var(--fh);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.polk-card__desc {
  font-size: .84rem;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  margin: 0 0 18px;
}
.polk-card__btn {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid var(--accent-h);
  border-radius: 999px;
  color: #fff;
  font-family: var(--fh);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--trans);
}
.polk-card__btn:hover,
.polk-card__btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 800px) {
  .polk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .polk-grid { grid-template-columns: 1fr; }
  .polk-grid__stack { gap: 24px; }
  .polk-card__img { height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .polk-card__img,
  .polk-card__label,
  .polk-card__overlay { transition: none; }
}

/* ── "¿Cómo funciona?": letra grande estilo título,
   desbordando la tarjeta, sin círculo; fondo de la sección
   con foto translúcida (mismo patrón que .about-section). ─ */
#detalle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#detalle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/RECURSOS/IMG/Solucioneslegales2.png') center/cover no-repeat;
  opacity: .16;
  pointer-events: none;
}
#detalle .detalle-card { overflow: visible; padding-top: 48px; }
#detalle .detalle-card__letra {
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  font-family: var(--fh);
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-bottom: 0;
}

/* ── "¿Qué nos hace diferentes?": tarjetas de borde punteado
   (estilo boleto/festival, igual al ejemplo que mandó el cliente),
   con dos fotos flotando en las orillas reales de la pantalla. ─ */
.diferentes-section {
  position: relative;
  overflow: hidden;
}
/* .landing-section-inner es un div normal (sin position), y un
   elemento posicionado (las fotos, position:absolute) siempre pinta
   ENCIMA de uno sin posicionar aunque venga antes en el HTML. Para
   que el encabezado quede realmente arriba de la foto —y no al
   revés— necesita su propio contexto de apilamiento. */
.diferentes-section > .landing-section-inner {
  position: relative;
  z-index: 1;
}
/* El marco mide exactamente el alto completo de la sección
   (height:100%) y el ancho se calcula con aspect-ratio a partir de
   ese alto, con la MISMA proporción real de la foto (1800x1600):
   así el marco tiene la forma exacta de la foto y no sobra ni falta
   nada de espacio — sin recortar ni degradar y tocando arriba/abajo
   por completo. Como puede llegar a ser ancha, va detrás de todo
   (z-index menor); las tarjetas y el encabezado tienen fondo sólido
   propio, así que donde la foto se mete debajo de ellos simplemente
   queda tapada, nunca compite con el texto. */
.diferentes-side {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 1800 / 1600;
  object-fit: contain;
  z-index: 0;
  display: block;
}
.diferentes-side--left {
  left: 0;
  object-position: left center;
}
.diferentes-side--right {
  right: 0;
  object-position: right center;
}
.diferentes-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.diferentes-card {
  position: relative;
  background: rgba(15, 15, 17, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 26px 22px;
}
/* border:dotted liga el tamaño del punto con la separación entre
   puntos (no se pueden ajustar por separado). Para tener puntos
   chicos con más espacio entre ellos, el borde se dibuja con 4
   gradientes radiales en miniatura (uno por lado) en vez del
   border-style nativo. */
.diferentes-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: top left, bottom left, top left, top right;
  background-size: 11px 3px, 11px 3px, 3px 11px, 3px 11px;
  background-image:
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px),
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px),
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px),
    radial-gradient(circle, var(--accent) 1.1px, transparent 1.2px);
}
.diferentes-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #04211f;
  font-family: var(--fh);
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 16px;
}
.diferentes-card h3,
.diferentes-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.diferentes-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
}
.diferentes-card__list {
  list-style: none;
  margin-top: 10px;
}
.diferentes-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text2);
  margin-bottom: 6px;
}
.diferentes-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
@media (max-width: 1100px) {
  .diferentes-side { display: none; }
}
@media (max-width: 800px) {
  .diferentes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .diferentes-grid { grid-template-columns: 1fr; }
}

/* ── "Nuestro proceso": lista de pasos donde el círculo
   activo se agranda/blanquea y su texto se despliega A SU
   DERECHA (el resto queda colapsado, solo el círculo). Con
   autoplay + clic manual. Fondo con blobs difuminados, igual
   que la sección de Asesorías. ─────────────────────────── */
.section-blobs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Las .asesorias-blob originales se posicionan en % de la altura de
   SU PROPIA sección, pero su tamaño está fijo en vw (relativo al
   viewport, no a la sección). Eso funciona en la sección de
   Asesorías porque su alto es predecible, pero aquí la sección de
   FAQ crece con la cantidad de preguntas y puede ser mucho más alta:
   con las posiciones originales quedaba un hueco enorme sin mancha
   en medio de la sección (un "borde"/corte visible en el efecto).
   Aquí se reposicionan en % repartidos a lo largo de toda la
   sección y con manchas más grandes para que siempre se traslapen
   y no quede ningún hueco, sin importar cuántas preguntas haya. */
.section-blobs .asesorias-blob--1 {
  top: -6%;
  left: -14%;
  bottom: auto;
  right: auto;
  width: 56vw;
  max-width: 680px;
}
.section-blobs .asesorias-blob--2 {
  top: 34%;
  right: -16%;
  bottom: auto;
  left: auto;
  width: 52vw;
  max-width: 640px;
}
.section-blobs .asesorias-blob--3 {
  top: 70%;
  left: 24%;
  width: 46vw;
  max-width: 560px;
}
@media (max-width: 900px) {
  .section-blobs .asesorias-blob--1 {
    top: -8%;
    left: -30%;
    width: 95vw;
    max-width: 480px;
  }
  .section-blobs .asesorias-blob--2 {
    top: 38%;
    right: -30%;
    width: 90vw;
    max-width: 460px;
  }
  .section-blobs .asesorias-blob--3 {
    top: 78%;
    left: -10%;
    width: 85vw;
    max-width: 440px;
  }
}
.proceso-flow__label {
  flex-shrink: 0;
  font-family: var(--fh);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
}
.proceso-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 900px;
  margin: 28px auto 0;
  padding: 10px 0;
}
.proceso-flow__track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0;
}
/* Cada paso ocupa siempre el mismo espacio (flex:0 0 auto, sin
   crecer/encoger): así la fila entera nunca se mueve ni se
   descentra sin importar cuál paso esté activo. Lo único que
   cambia de tamaño/posición es el círculo, y solo vía transform
   (que no afecta el layout de sus hermanos). El texto se
   posiciona absoluto a la derecha del círculo, así que tampoco
   empuja al resto de la fila. */
.proceso-flow__step {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.proceso-flow__circle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--bg3), var(--bg2));
  border: 2px solid var(--border2);
  cursor: pointer;
  padding: 0;
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.proceso-flow__circle strong {
  font-family: var(--fh);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text2);
  transition: color .4s ease;
}
.proceso-flow__arc {
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
}
.proceso-flow__step.is-active .proceso-flow__circle {
  transform: translateX(-12px) scale(1.35);
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 10px 26px var(--glow);
  z-index: 2;
}
.proceso-flow__step.is-active .proceso-flow__circle strong {
  color: #0c0d0f;
}
/* En escritorio el texto de cada etapa NO va junto al círculo: va
   en un panel único debajo de toda la fila (como al inicio de esta
   sesión). Por eso .proceso-flow__text se oculta aquí; solo se usa
   en móvil (ver media query), donde cada etapa SÍ necesita su propio
   texto flotando junto a su círculo. */
.proceso-flow__text {
  display: none;
}
.proceso-flow__panel {
  max-width: 520px;
  margin: 22px auto 0;
  padding: 0 16px;
  text-align: center;
  opacity: 1;
  transition: opacity .2s ease;
}
.proceso-flow__panel.is-fading {
  opacity: 0;
}
.proceso-flow__panel h3 {
  font-family: var(--fh);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
}
.proceso-flow__panel p {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text2);
  margin: 0;
}
/* Aqui vivia una COPIA del bloque movil de .proceso-flow. En este archivo
   TODA la seccion .proceso-flow aparece dos veces; como las reglas de
   escritorio de la segunda copia venian despues, pisaban al bloque movil
   que estaba mas arriba y el circulo activo salia del tamano y la posicion
   de escritorio. El bloque movil bueno se movio hasta aqui, despues de esa
   segunda copia, para que sea el ultimo en aplicarse. */

/* ── MOVIL ────────────────────────────────────────────────────────────
   La version vertical dejaba el texto muy lejos de la linea de tiempo y
   estiraba muchisimo la seccion. Ahora se conserva el formato HORIZONTAL
   de escritorio: la fila de pasos se desliza de lado cuando no cabe, y el
   texto queda justo debajo, cerca de los circulos.

   El desplazamiento lateral vive DENTRO de la fila (overflow-x en el
   track), no en la pagina: la guia es que el contenido nunca desborde el
   ancho de la ventana.                                                    */
@media (max-width: 900px) {
  .proceso-flow {
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    width: 100%;
    margin: 24px auto 0;
    padding: 0;
  }

  /* Las etiquetas Inicio/Fin no caben junto a la fila deslizable. */
  .proceso-flow__label { display: none; }

  .proceso-flow__track {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    /* Espacio a los lados para que el primer y ultimo circulo no queden
       pegados al borde, y arriba/abajo para que el circulo activo quepa
       cuando crece. */
    padding: 14px 40px;
    scrollbar-width: none;
  }
  .proceso-flow__track::-webkit-scrollbar { display: none; }

  .proceso-flow__step {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
    margin: 0;
    scroll-snap-align: center;
  }

  .proceso-flow__circle {
    width: 46px;
    height: 46px;
    border-width: 1px;
  }
  .proceso-flow__circle strong { font-size: 1rem; }

  .proceso-flow__step.is-active .proceso-flow__circle {
    transform: scale(1.28);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 8px 22px var(--glow);
  }
  .proceso-flow__step.is-active .proceso-flow__circle strong { color: #0c0d0f; }

  /* Tramo entre pasos: linea corta horizontal en vez de flecha. */
  .proceso-flow__arc {
    width: 26px;
    height: 2px;
    transform: none;
    margin: 0 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--border2), var(--accent));
    opacity: .5;
  }
  .proceso-flow__arc path,
  .proceso-flow__arc > * { display: none; }

  /* El texto por etapa sigue en el HTML como fuente de datos; lo muestra
     el panel de abajo, igual que en escritorio. */
  .proceso-flow__text { display: none; }

  .proceso-flow__panel {
    display: block;
    max-width: 100%;
    margin: 6px auto 0;
    padding: 0 20px;
  }
  .proceso-flow__panel h3 { font-size: 1rem; margin-bottom: 6px; }
  .proceso-flow__panel p { font-size: .86rem; line-height: 1.5; }
}

@media (max-width: 360px) {
  .proceso-flow__circle { width: 42px; height: 42px; }
  .proceso-flow__arc { width: 20px; }
  .proceso-flow__track { padding: 14px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .proceso-flow__circle,
  .proceso-flow__circle strong,
  .proceso-flow__panel,
  .proceso-flow__text { transition: none; }
}

/* ── Preguntas frecuentes: lista limpia sin tarjetas, solo
   separadores. ─────────────────────────────────────────── */
.landing-faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.landing-faq-list__item {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.landing-faq-list__item:first-child { padding-top: 0; }
.landing-faq-list__item:last-child { border-bottom: none; padding-bottom: 0; }
.landing-faq-list__item h3 {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}
.landing-faq-list__item p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}
/* Esta sección tiene el fondo con manchas de color (.section-blobs);
   el gris estándar del sitio (--text2/--text3) se pierde contra esas
   manchas, así que aquí el texto va en blanco para que se siga
   leyendo bien encima del color. */
.section-blobs .landing-section-header p,
.section-blobs .landing-faq-list__item p {
  color: #ffffff;
}


/* =========================================================
   PORTADA DE "SOLUCIONES", SOLO ESA PAGINA

   Llevaba una pildora encima del titulo ("Altaltium · Soluciones") que
   repetia lo que ya dicen el menu y el propio titulo, y de paso empujaba
   todo el bloque hacia abajo. Quitada la pildora sobraba relleno, asi que
   aqui se recorta y el texto queda a la altura de la vista en vez de en el
   ultimo tercio de la pantalla.

   Va al final del archivo a proposito: el bloque @media (max-width:700px)
   que define .landing-hero__inner esta DUPLICADO mas arriba, asi que una
   regla colocada antes de la segunda copia perderia la cascada.

   Las otras seis landings comparten esta hoja y no se ven afectadas: el
   gancho .landing-hero--compacto solo existe en soluciones.html.
========================================================= */
/* El 56vh venia escrito dentro del HTML. Un estilo puesto ahi gana sobre
   cualquier hoja, asi que no habia forma de darle otra altura en movil sin
   recurrir a !important. Ahora vive aqui y se puede ajustar por tamano. */
.landing-hero--compacto { min-height: 56vh; }

@media (max-width: 700px) {
  /* 44vh y no 56: en una pantalla alta y estrecha, 56vh dejaba el titulo
     centrado en el ultimo tercio, muy por debajo de donde cae la vista. */
  .landing-hero--compacto { min-height: 44vh; }
  .landing-hero--compacto .landing-hero__inner { padding: 30px 20px 38px; }
}


/* =========================================================
   UNIONES ENTRE SECCIONES SIN RAYA

   Que pasaba: cada seccion elevada se separaba de la de arriba con
   border-top: 1px solid var(--border). Ese borde es var(--border) sobre un fondo
   de var(--bg): medido, un salto de 28 niveles de brillo en una sola fila de
   pixeles. En una pagina casi negra eso no se lee como "separacion", se lee
   como una raya que parte la pantalla.

   Que se hace: se quita el borde y en su lugar la seccion elevada ARRANCA
   exactamente con el color de la seccion de arriba y se funde a su propio
   color en 56px. Al no haber ninguna fila donde el color cambie de golpe,
   no hay nada que el ojo pueda leer como linea, y la separacion entre
   bloques se sigue notando igual.

   Va al final del archivo porque estas mismas clases estan DUPLICADAS mas
   arriba: una regla colocada antes de la segunda copia perderia la cascada.
========================================================= */
.landing-section--alt,
.landing-split {
  border-top: 0;
  border-bottom: 0;
  background-color: var(--bg2);
  background-image:
    linear-gradient(180deg, var(--bg) 0, var(--bg-t) 56px),
    linear-gradient(0deg,   var(--bg) 0, var(--bg-t) 56px);
  background-repeat: no-repeat;
}

/* La de cierre ya trae su propio degradado en diagonal, asi que el fundido
   se le monta encima como primera capa y el suyo queda debajo. */
.landing-final-cta {
  border-top: 0;
  background-image:
    linear-gradient(180deg, var(--bg) 0, var(--bg-t) 56px),
    linear-gradient(135deg, var(--bg2), var(--bg3));
  background-repeat: no-repeat;
}


/* CUANDO DOS SECCIONES ELEVADAS VAN SEGUIDAS

   El fundido de arriba y el de abajo se sumaban y metian 112px de negro
   entre dos zonas que son del mismo color: parecia una tercera seccion
   oscura colada en medio. Aqui se apaga el fundido del lado por el que se
   tocan, y cada pareja se lee como un solo bloque continuo.

   :has() lo entienden todos los navegadores actuales. En uno muy viejo la
   regla se ignora y vuelve a verse el fundido: se ve raro, pero nada se
   rompe. */
.landing-split:has(+ .landing-section--alt),
.landing-split:has(+ .landing-split),
.landing-section--alt:has(+ .landing-section--alt),
.landing-section--alt:has(+ .landing-split) {
  /* solo el fundido de arriba */
  background-image: linear-gradient(180deg, var(--bg) 0, var(--bg-t) 56px);
}

.landing-split + .landing-section--alt,
.landing-split + .landing-split,
.landing-section--alt + .landing-section--alt,
.landing-section--alt + .landing-split {
  /* solo el fundido de abajo */
  background-image: linear-gradient(0deg, var(--bg) 0, var(--bg-t) 56px);
}

/* Y si van seguidas Y ademas la de abajo tiene otra elevada detras, no
   lleva fundido por ningun lado. */
.landing-split + .landing-section--alt:has(+ .landing-section--alt),
.landing-section--alt + .landing-section--alt:has(+ .landing-section--alt),
.landing-section--alt + .landing-section--alt:has(+ .landing-split),
.landing-split + .landing-section--alt:has(+ .landing-split) {
  background-image: none;
}


/* La seccion de cierre cuenta como elevada para todo lo anterior: si la de
   arriba tambien lo es, entre las dos no debe quedar banda oscura. */
.landing-section--alt:has(+ .landing-final-cta),
.landing-split:has(+ .landing-final-cta) {
  background-image: linear-gradient(180deg, var(--bg) 0, var(--bg-t) 56px);
}
.landing-section--alt + .landing-final-cta,
.landing-split + .landing-final-cta {
  background-image: linear-gradient(135deg, var(--bg2), var(--bg3));
}


/* =========================================================
   EL FUNDIDO DEL HERO SE PROLONGA POR DEBAJO

   Es lo mismo que ya se hizo en la portada (ver style.css): el fundido no
   termina donde termina el hero, sino 110px mas abajo, solapandose con la
   seccion siguiente. Asi no queda ningun borde donde pueda cortarse:
   cuando llega al limite del hero lleva rato siendo negro solido, igual
   que el fondo que hay debajo.

   Para que el fundido pueda salirse, el hero pasa a overflow: visible. El
   recorte de las fotos se mueve al contenedor de las fotos, que es quien
   de verdad lo necesita (las diapositivas se escalan al animarse y sin
   recorte asomarian por los lados).

   El solape es invisible porque lo que se prolonga ya es negro puro sobre
   un fondo negro.
========================================================= */
.landing-hero {
  overflow: visible;
}

/* El recorte vive aqui ahora: es lo que contiene las fotos animadas. */
.landing-hero__bg,
.landing-hero__slideshow {
  overflow: hidden;
}

.landing-hero__scrim {
  inset: 0 0 -110px 0;
  background: linear-gradient(180deg,
      rgba(7, 7, 8, 0.550) 0.0%,
      rgba(7, 7, 8, 0.551) 5.3%,
      rgba(7, 7, 8, 0.556) 10.5%,
      rgba(7, 7, 8, 0.569) 15.8%,
      rgba(7, 7, 8, 0.592) 21.1%,
      rgba(7, 7, 8, 0.623) 26.3%,
      rgba(7, 7, 8, 0.662) 31.6%,
      rgba(7, 7, 8, 0.708) 36.8%,
      rgba(7, 7, 8, 0.757) 42.1%,
      rgba(7, 7, 8, 0.807) 47.4%,
      rgba(7, 7, 8, 0.856) 52.6%,
      rgba(7, 7, 8, 0.900) 57.9%,
      rgba(7, 7, 8, 0.937) 63.2%,
      rgba(7, 7, 8, 0.966) 68.4%,
      rgba(7, 7, 8, 0.985) 73.7%,
      rgba(7, 7, 8, 0.996) 78.9%,
      rgba(7, 7, 8, 1.000) 84.2%,
      rgba(7, 7, 8, 1.000) 89.5%,
      rgba(7, 7, 8, 1.000) 94.7%,
      rgba(7, 7, 8, 1.000) 100.0%);
}

/* Lo que va debajo del hero se pinta por encima del fundido prolongado,
   para que el solape no le tape nada. */
.landing-hero + * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   LA IMAGEN DE LA DERECHA SE APOYA EN EL BORDE DE ABAJO

   Estas secciones son dos columnas: texto a la izquierda, foto a la
   derecha. La foto usa "contain" para no recortarse, asi que cuando la
   columna de texto crece (al estrechar la ventana, el texto ocupa mas
   alto) sobra sitio en la de la foto.

   Con "right center" ese sobrante se repartia arriba y abajo y la foto
   quedaba flotando en mitad de un hueco negro. Con "right bottom" el
   sobrante queda todo arriba y la foto se apoya en el borde inferior de la
   seccion, que es donde el ojo espera que se pose: la casa en la mano, el
   edificio, la persona... todos son objetos con suelo.

   Va al final del archivo porque .landing-split__media esta DUPLICADO mas
   arriba: una regla puesta antes de la segunda copia perderia la cascada.
========================================================= */
.landing-split__media img {
  object-position: right bottom;
}


/* =========================================================
   LOS CINCO PASOS CABEN ENTEROS EN MOVIL

   La fila medía 430px en una pantalla de 390, asi que el quinto paso
   quedaba cortado por el borde y habia que deslizar de lado para verlo.
   Mucha gente ni se entera de que se puede deslizar: da por hecho que el
   proceso tiene cuatro pasos.

   Ajustando el relleno de los lados y el largo de los arcos que unen los
   circulos, los cinco entran de una vez. Se sigue pudiendo deslizar (por
   si la letra del telefono es muy grande y aun asi no cupieran), pero ya
   no hace falta.

   El circulo se ve de 40px pero su zona de toque mide 44x44 gracias al
   ::after, que es el minimo para acertar con el dedo.
========================================================= */
@media (max-width: 768px) {
  .proceso-flow__track {
    padding: 14px 6px;
    justify-content: center;
  }
  .proceso-flow__arc { width: 10px; }
  .proceso-flow__circle { width: 40px; height: 40px; }

  .proceso-flow__circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}