/* ==========================================================================
   Dialogfy — Home
   Verde de marca #12a19a reservado a CTAs y acentos puntuales.
   Sin sombras: la jerarquía se construye con borde, tono y espacio.
   ========================================================================== */

:root {
  --verde: #12a19a;
  --verde-oscuro: #0e8781;
  --verde-claro: #eaf6f5;
  --verde-texto: #0b6b66;   /* solo para texto pequeño sobre --verde-claro */
  --verde-borde: #cfe9e7;

  --tinta: #101917;
  --tinta-70: #55655f;
  --tinta-50: #5a6865;
  --tinta-35: #5f6d6a;
  --grafito: #333d3b;

  --blanco: #ffffff;
  --gris-fondo: #f6f8f8;
  --gris-hover: #eef3f2;
  --gris-borde: #e6eae9;
  --gris-linea: #eaeeed;

  --oscuro-texto: #c3cecb;
  --oscuro-borde: #26302e;
  --oscuro-suave: #9caaa7;

  --fuente: 'Poppins', system-ui, -apple-system, sans-serif;

  --ancho: 1720px;
  --margen: 100px;
  --seccion: 130px;
  --cabecera: 96px;
  --radio: 18px;
  --radio-s: 12px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
svg { width: 24px; height: 24px; fill: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: var(--verde-texto); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--verde); }

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

section[id] { scroll-margin-top: calc(var(--cabecera) + 8px); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Contenedores ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--seccion); }
.seccion--gris { background: var(--gris-fondo); }
.seccion--oscura { background: var(--tinta); color: var(--blanco); }

/* ---------- Tipografía ---------- */
.h1 {
  font-size: clamp(2.5rem, 4.1vw, 4.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.h2 {
  font-size: clamp(2rem, 2.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
}

.h2--grande { font-size: clamp(2.25rem, 3.4vw, 3.875rem); }
.h2--medio { font-size: clamp(1.375rem, 1.8vw, 1.9375rem); line-height: 1.2; }

.h3 {
  font-size: clamp(1.25rem, 1.5vw, 1.6875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.antetitulo {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-35);
}

.entradilla {
  font-size: clamp(1.0625rem, 1.15vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-70);
}

.microcopy { font-size: 1rem; font-weight: 400; color: var(--tinta-50); }
.cuerpo { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* Énfasis: un trazo de rotulador verde que entra, se mantiene y sale */
.destaca {
  background-image: linear-gradient(var(--verde), var(--verde));
  background-repeat: no-repeat;
  background-position: 0% 90%;
  background-size: 0% 34%;
  padding-inline: .08em;
  margin-inline: -.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: marcar 8s var(--ease) infinite;
}
@keyframes marcar {
  0%, 5%    { background-size: 0% 34%; background-position: 0% 90%; }
  24%, 64%  { background-size: 100% 34%; background-position: 0% 90%; }
  83%, 100% { background-size: 0% 34%; background-position: 100% 90%; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 38px;
  border-radius: 999px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); }

.btn--primario { background: var(--verde); color: var(--blanco); }
.btn--primario:hover { background: var(--grafito); color: var(--blanco); }
.btn--primario:hover svg { transform: translateX(4px); }

.btn--secundario { border: 1.5px solid #d9e0de; color: var(--tinta); }
.btn--secundario:hover { border-color: var(--grafito); background: var(--grafito); color: var(--blanco); }
.btn--secundario:hover svg { transform: translateY(3px); }

.btn--compacto { padding: 15px 28px; font-size: 1.0625rem; }
.btn--grande { padding: 23px 46px; font-size: 1.3125rem; }

/* ==========================================================================
   Cabecera — fija y transparente sobre el hero
   ========================================================================== */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.cabecera.esta-fija {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--gris-linea);
}

/* Con el menú desplegado la cabecera ocupa la pantalla completa.
   El menú es position:fixed y vive dentro de la cabecera, que tiene
   backdrop-filter: eso crea containing block, así que el inset del menú se
   resuelve contra la cabecera y no contra el viewport. En vez de pelear con la
   cascada para apagar el desenfoque, se le da a la cabecera el alto del
   viewport: el menú ocupa entonces todo el espacio bajo ella, con o sin filtro.
   Visualmente no cambia nada: el menú abierto ya cubría la pantalla con fondo
   blanco sólido. */
body.menu-abierto .cabecera {
  height: 100svh;
  background: var(--blanco);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  height: var(--cabecera);
}

.cabecera__logo { flex: none; }
.cabecera__logo img { height: 42px; width: auto; }

.menu { display: flex; align-items: center; gap: 40px; }
.menu__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--tinta);
}
.menu__enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.menu__enlace:hover { color: var(--tinta); }
.menu__enlace:hover::after { transform: scaleX(1); }
.menu__icono { width: 19px; height: 19px; flex: none; color: var(--verde); }
.menu__flecha {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--tinta-35);
  transition: transform .22s var(--ease);
}
.menu__grupo:hover .menu__flecha,
.menu__grupo.esta-desplegado .menu__flecha { transform: rotate(180deg); }

.cabecera__demo { display: none; }
/* Desplegable de Servicios */
.menu__grupo { position: relative; }

.submenu {
  position: absolute;
  top: calc(100% + 22px);
  left: -22px;
  min-width: 292px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
  background: var(--blanco);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.menu__grupo:hover .submenu,
.menu__grupo:focus-within .submenu,
.menu__grupo.esta-desplegado .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Puente invisible: el ratón puede bajar del enlace al panel sin perderlo */
.submenu::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -22px;
  height: 22px;
}

.submenu__enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinta);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.submenu__enlace svg { width: 20px; height: 20px; flex: none; color: var(--verde); }
.submenu__enlace:hover { background: var(--gris-hover); color: var(--tinta); }
.submenu__enlace.esta-activo { background: var(--verde-claro); color: var(--verde-texto); }

.hamburguesa { display: none; }

/* ==========================================================================
   Hero — pantalla completa, el vídeo manda a la derecha
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--blanco);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(97deg,
    #fff 0%, #fff 24%,
    rgba(255, 255, 255, .94) 36%,
    rgba(255, 255, 255, .5) 52%,
    rgba(255, 255, 255, .05) 70%,
    rgba(255, 255, 255, 0) 100%);
}

.hero__interior {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--cabecera) + 40px) 56px;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}
.hero__texto .entradilla { max-width: 620px; }
.hero__acciones { display: flex; align-items: center; gap: 18px; margin-top: 6px; }

/* ==========================================================================
   Barra de confianza
   ========================================================================== */
.confianza {
  border-block: 1px solid var(--gris-linea);
  background: var(--blanco);
}
.confianza__sectores {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-block: 40px;
}
.confianza__intro {
  flex: none;
  max-width: 220px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tinta-70);
}

/* Carrusel automático, una sola línea */
.marquesina {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 190px, #000 calc(100% - 190px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 190px, #000 calc(100% - 190px), transparent 100%);
}
.marquesina__pista {
  display: flex;
  align-items: center;
  width: max-content;
  animation: desfile 46s linear infinite;
}
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes desfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.confianza__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding-inline: 26px;
  font-size: 1.03125rem;
  font-weight: 500;
  white-space: nowrap;
}
.confianza__item svg { width: 26px; height: 26px; flex: none; color: var(--tinta); }

/* Fila de datos destacada */
.confianza__banda {
  border-top: 1px solid var(--gris-linea);
  background: var(--gris-fondo);
}
.confianza__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.dato {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 34px 40px;
  border-left: 1px solid var(--gris-borde);
}
.dato:first-child { padding-left: 0; border-left: 0; }
.dato:last-child { padding-right: 0; }
.dato > svg { width: 26px; height: 26px; flex: none; color: var(--verde); }
.dato p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta-70);
}
.dato__cifra { display: flex; align-items: baseline; gap: .4rem; }
.dato b {
  font-size: clamp(1.75rem, 2.1vw, 2.375rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Cada mensaje sin responder — fondo oscuro fijo
   ========================================================================== */
.perdida {
  position: relative;
  color: var(--blanco);
  background-color: #070d0c;
  overflow: hidden;
}
.perdida--plataforma .perdida__fondo { background-image: url('assets/fondo-plataforma.png'); }
.perdida--plataforma .perdida__interior { align-items: center; }

.perdida__fondo {
  position: absolute;
  inset: 0;
  background-image: url('assets/fondo-oscuro.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.perdida__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7, 13, 12, .92) 0%, rgba(7, 13, 12, .82) 45%, rgba(7, 13, 12, .55) 100%);
}
.perdida__interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 620px);
  gap: 110px;
  align-items: center;
  padding-block: 150px;
}
.perdida__derecha { display: flex; flex-direction: column; gap: 34px; }
.perdida__cifra { display: flex; align-items: center; gap: 24px; }
.perdida p.perdida__numero {
  flex: none;
  font-size: clamp(3.5rem, 5vw, 6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--verde);
}
.perdida p { font-size: clamp(1.0625rem, 1.15vw, 1.3125rem); font-weight: 300; line-height: 1.6; color: var(--oscuro-texto); }

/* ==========================================================================
   Los 4 pilares
   ========================================================================== */
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 44px; }

.pilar {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.pilar:hover { border-color: var(--verde-borde); background: #fcfdfd; }

.pilar__pantalla {
  height: 186px;
  padding: 16px;
  background: linear-gradient(170deg, #f7f9f9 0%, #eef3f2 100%);
  border-bottom: 1px solid var(--gris-borde);
  overflow: hidden;
}
.ui {
  height: 100%;
  border-radius: 10px;
  background: var(--blanco);
  border: 1px solid #e4e9e8;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.35;
}
.ui__fila { display: flex; align-items: center; gap: 7px; }
.ui__avatar { width: 18px; height: 18px; border-radius: 50%; background: #dfe5e3; flex: none; }
.ui__avatar--verde { background: var(--verde); }
.ui__avatar--tinta { background: var(--tinta); }
.ui__nombre { font-weight: 600; font-size: .6875rem; }
.ui__meta { font-size: .625rem; color: var(--tinta-35); margin-left: auto; flex: none; }
.ui__barra { height: 6px; border-radius: 3px; background: #eef1f0; }
.ui__barra--corta { width: 45%; }
.ui__barra--media { width: 70%; }
.ui__barra--verde { background: var(--verde-borde); }
.ui__globo {
  padding: 7px 9px;
  border-radius: 8px;
  background: #f1f4f3;
  max-width: 78%;
  font-size: .625rem;
  color: var(--tinta-70);
}
.ui__globo--propia {
  align-self: flex-end;
  background: var(--verde-claro);
  border: 1px solid var(--verde-borde);
  color: var(--tinta);
}
.ui__chip {
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--verde-claro);
  color: var(--verde-texto);
  font-size: .5625rem;
  font-weight: 600;
}
.ui__nota {
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff8e6;
  border: 1px dashed #e7d6a8;
  font-size: .5625rem;
  color: var(--tinta-70);
}
.ui__aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: .5625rem;
  font-weight: 500;
}
.ui__aviso svg { width: 12px; height: 12px; flex: none; }
.ui__ok { display: flex; align-items: center; gap: 5px; font-size: .5625rem; font-weight: 600; color: var(--verde-texto); }
.ui__ok svg { width: 12px; height: 12px; flex: none; }
.ui__separador { height: 1px; background: var(--gris-linea); }
.ui__pie { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.ui__campo { flex: 1; height: 20px; border-radius: 6px; border: 1px solid #e4e9e8; }
.ui__boton {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--verde);
  display: grid;
  place-items: center;
  color: var(--blanco);
  flex: none;
}
.ui__boton svg { width: 11px; height: 11px; }

.pilar__contenido {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 30px 28px;
  flex: 1;
}
.pilar__enlace {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.03125rem;
  font-weight: 600;
  color: var(--verde-texto);
}
.pilar__enlace svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.pilar__enlace:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Tira de sectores — avanza con el scroll, el rótulo se queda quieto
   ========================================================================== */
.tira {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
}
.tira__pista {
  display: flex;
  width: max-content;
  will-change: transform;
}
.tira__pista img {
  flex: none;
  width: 380px;
  height: 540px;
  object-fit: cover;
}
.tira__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 25, 23, .3) 0%, rgba(16, 25, 23, .62) 50%, rgba(16, 25, 23, .3) 100%);
}
.tira__texto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--margen);
  pointer-events: none;
}
.tira__texto span {
  max-width: 780px;
  text-align: center;
  color: var(--blanco);
  font-size: clamp(1.375rem, 2.3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
}

/* ==========================================================================
   Cómo funciona
   ========================================================================== */
#como-funciona { overflow: hidden; }
.pasos__interior {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 110px;
  align-items: start;
}
.pasos__intro { z-index: 1; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.pasos__titulo {
  font-size: clamp(1.5rem, 2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.pasos__persona {
  position: absolute;
  left: var(--margen);
  top: auto;
  bottom: calc(var(--seccion) * -1);
  z-index: 0;
  width: 330px;
  height: auto;
  max-height: calc(42% + var(--seccion));
  object-fit: contain;
  object-position: bottom left;
  pointer-events: none;
  user-select: none;
}
.pasos__lista { position: relative; z-index: 1; display: flex; flex-direction: column; }
.paso {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 28px;
  padding-block: 34px;
  border-bottom: 1px solid #e2e8e6;
}
.paso:last-child { border-bottom: 0; }
.paso__numero {
  font-size: 2.875rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--tinta-35);
  transition: color .35s var(--ease);
}
.paso:hover .paso__numero { color: var(--verde); }
.paso__texto { display: flex; flex-direction: column; gap: 8px; }
.paso__texto p { font-size: 1.1875rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); max-width: 720px; }

/* ==========================================================================
   Por qué Dialogfy — vídeo fijo y tarjetas que suben por la derecha
   ========================================================================== */
.porque { position: relative; overflow: clip; background: var(--tinta); }
.porque__fondo {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
}
.porque__fondo video,
.porque__fondo img { width: 100%; height: 100%; object-fit: cover; }
.porque__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(93deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, .35) 42%,
    rgba(255, 255, 255, .78) 58%,
    rgba(255, 255, 255, .9) 100%);
}
.porque__interior {
  position: relative;
  z-index: 1;
  margin-top: -100svh;
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  padding-block: 28svh 30svh;
}
.porque__columna {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.porque__columna .antetitulo { color: var(--tinta-70); margin-bottom: 8px; }
.ventaja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 32px;
  border: 1px solid rgba(16, 25, 23, .1);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ventaja__icono { width: 26px; height: 26px; color: var(--verde); margin-bottom: 2px; }
.ventaja h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.ventaja p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* ==========================================================================
   Testimonios
   ========================================================================== */
.testimonios__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.testimonio {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 38px 34px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
}
.testimonio blockquote {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.01em;
}
.testimonio figcaption { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.testimonio img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; }
.testimonio__nombre { font-size: 1.03125rem; font-weight: 600; }
.testimonio__cargo { font-size: .9375rem; font-weight: 300; color: var(--tinta-50); }
.testimonio__aviso {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px dashed #d8b26a;
  border-radius: 999px;
  background: #fff8e6;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a5c15;
}
.testimonio--ejemplo { background: #fdfcf8; border-color: #d9c89a; }
.testimonio--ejemplo blockquote { color: var(--tinta-70); }

/* ==========================================================================
   Comparativa
   ========================================================================== */
.comparativa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 52px; align-items: start; }
.columna {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: #fbfcfc;
}
.columna--dialogfy { border: 1.5px solid var(--verde); background: var(--blanco); }
.columna__titulo {
  padding: 24px 34px;
  border-bottom: 1px solid var(--gris-borde);
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--tinta-50);
}
.columna--dialogfy .columna__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--verde-claro);
  border-bottom-color: #d9ecea;
  color: var(--tinta);
}
.columna--dialogfy .columna__titulo img { width: 24px; height: 24px; }
.columna li {
  display: flex;
  gap: 14px;
  padding: 24px 34px;
  border-bottom: 1px solid #eef1f0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--tinta-70);
}
.columna li:last-child { border-bottom: 0; }
.columna li svg { width: 22px; height: 22px; flex: none; color: #b9c4c1; }
.columna--dialogfy li { font-weight: 500; color: var(--tinta); }
.columna--dialogfy li svg { color: var(--verde); }

/* ==========================================================================
   De cinco herramientas a una — diagrama
   ========================================================================== */
.fusion { background: var(--tinta); color: var(--blanco); }
.fusion__interior {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 90px;
  align-items: center;
  padding-block: 110px;
}
.fusion__texto {
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
}
.fusion__diagrama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 300px);
  align-items: center;
  gap: 0;
}
.fusion__diagrama > .fusion__lineas { align-self: stretch; }
.fusion__origen { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fusion__origen li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border: 1px solid var(--oscuro-borde);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--oscuro-texto);
  white-space: nowrap;
}
.fusion__origen svg { width: 18px; height: 18px; flex: none; color: #b0bcb9; }
.fusion__lineas { width: 150px; height: auto; align-self: stretch; }
.fusion__destino {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 30px;
  border: 1.5px solid var(--verde);
  border-radius: var(--radio);
  background: rgba(18, 161, 154, .1);
}
.fusion__destino img { width: 34px; height: 34px; }
.fusion__destino strong { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; }
.fusion__destino span { font-size: 1rem; font-weight: 300; color: var(--oscuro-texto); }

/* ==========================================================================
   Sectores
   ========================================================================== */
.sectores__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
.sectores__titulo { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.sectores__intro {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-70);
  max-width: 760px;
}
.sectores__cierre {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sectores__nota {
  margin: 0;
  max-width: 720px;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinta-70);
}
.sectores__nota strong { font-weight: 600; color: var(--tinta); }
.sectores__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.sector {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 32px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.sector:hover { background: var(--gris-hover); border-color: #dde5e3; }
.sector svg { width: 32px; height: 32px; color: var(--tinta); }
.sector h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.sector p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* ==========================================================================
   Seguridad
   ========================================================================== */
.seguridad__interior {
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 110px;
  align-items: start;
}
.seguridad__titulo { display: flex; flex-direction: column; gap: 18px; }
.seguridad__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 44px; padding-top: 8px; }
.seguridad__item { display: flex; gap: 16px; }
.seguridad__item svg { width: 26px; height: 26px; flex: none; color: var(--tinta); }
.seguridad__item p { font-size: 1.15625rem; font-weight: 300; line-height: 1.55; }

/* ==========================================================================
   FAQ — vídeo fijo de fondo
   ========================================================================== */
.faq { position: relative; overflow: clip; background: var(--gris-fondo); }
.faq__fondo {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
}
.faq__fondo video,
.faq__fondo img { width: 100%; height: 100%; object-fit: cover; }
.faq__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 248, 248, .78) 0%, rgba(246, 248, 248, .88) 50%, rgba(246, 248, 248, .95) 100%);
}
.faq__interior {
  position: relative;
  z-index: 1;
  margin-top: -100svh;
  min-height: 145svh;
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 110px;
  align-items: start;
  align-content: center;
  padding-block: var(--seccion);
}
.faq__lista { border-top: 1px solid #dde4e2; }
.faq__item { border-bottom: 1px solid #dde4e2; }
.faq__boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 28px 0;
  text-align: left;
  font-size: clamp(1.125rem, 1.35vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  transition: color .2s var(--ease);
}
.faq__boton:hover { color: var(--verde-texto); }
.faq__mas { position: relative; width: 22px; height: 22px; flex: none; }
.faq__mas::before,
.faq__mas::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  margin-top: -1px;
  background: var(--tinta-35);
  border-radius: 2px;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.faq__mas::after { transform: rotate(90deg); }
.faq__item.esta-abierto .faq__mas::before,
.faq__item.esta-abierto .faq__mas::after { background: var(--verde); }
.faq__item.esta-abierto .faq__mas::after { transform: rotate(0); }
.faq__respuesta { overflow: hidden; height: 0; transition: height .35s var(--ease); }
/* El ítem abierto de partida ya tiene altura sin esperar a que el JS la mida:
   evita que el icono muestre «abierto» con la respuesta a 0 px. */
.faq__item.esta-abierto .faq__respuesta { height: auto; }
.faq__respuesta p {
  padding-bottom: 28px;
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-70);
  max-width: 880px;
}

/* ==========================================================================
   CTA final
   ========================================================================== */
.cierre {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #070d0c;
  color: var(--blanco);
}
.cierre__fondo { position: absolute; inset: 0; z-index: 0; }
.cierre__fondo video { width: 100%; height: 100%; object-fit: cover; }
.cierre__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 82% at 50% 50%, rgba(7, 13, 12, .58) 0%, rgba(7, 13, 12, .82) 100%);
}
.cierre__interior {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding-block: 140px 130px;
}
.cierre .h2 { max-width: 1180px; }
.cierre p {
  max-width: 860px;
  font-size: clamp(1.0625rem, 1.15vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--oscuro-texto);
}
.cierre .btn { margin-top: 10px; }
.cierre__micro { font-size: 1rem; font-weight: 400; color: #8fa19d; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { background: var(--tinta); color: var(--blanco); }
.pie__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) repeat(3, 1fr);
  gap: 70px;
  padding-block: 74px 58px;
  border-top: 1px solid var(--oscuro-borde);
}
.pie__marca { display: flex; flex-direction: column; gap: 18px; }
.pie__marca img { width: 186px; height: auto; }
.pie__claim { font-size: 1.03125rem; font-weight: 300; line-height: 1.6; color: var(--oscuro-suave); }
.pie__redes { display: flex; gap: 10px; margin-top: 2px; }
.pie__redes a {
  padding: 8px 16px;
  border: 1px solid #2d3735;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--oscuro-texto);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.pie__redes a:hover { border-color: var(--verde); color: var(--verde); }

.pie__columna { display: flex; flex-direction: column; gap: 14px; }
.pie__titulo {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8b9895;
}
.pie a { color: #dfe6e4; }
.pie a:hover { color: var(--verde); }
.pie__columna a,
.pie__columna span { font-size: 1.03125rem; font-weight: 300; color: #dfe6e4; }
.pie__contacto { display: flex; align-items: center; gap: 10px; }
.pie__contacto svg { width: 18px; height: 18px; flex: none; color: #8b9895; }

.pie__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 28px 52px;
  border-top: 1px solid var(--oscuro-borde);
  font-size: .9375rem;
  font-weight: 300;
  color: #8b9895;
}
.pie__rgpd { display: flex; align-items: center; gap: 9px; }
.pie__rgpd svg { width: 17px; height: 17px; }

/* ==========================================================================
   Páginas de servicio
   ========================================================================== */
.migas {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--tinta-50);
}
.migas a { color: var(--tinta-50); }
.migas a:hover { color: var(--verde); }
.migas svg { width: 15px; height: 15px; color: #b9c4c1; }

.hero__h1 {
  max-width: 640px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tinta-50);
}

.servicio__hero .hero__texto { gap: 24px; }
.servicio__hero .h1 { font-size: clamp(2.25rem, 3.4vw, 4rem); }

/* Banda con el dato destacado */
.destacado { background: var(--tinta); color: var(--blanco); }
.destacado__interior {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 74px;
}
/* Las bandas oscuras que solo llevan texto necesitan su propio respiro:
   sin esto el párrafo queda pegado al borde de la sección anterior. */
.destacado > .contenedor { padding-block: 96px; }
.destacado--sincifra > .contenedor { padding-block: 104px; }
.destacado__cifra {
  flex: none;
  font-size: clamp(3.25rem, 5.4vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.destacado__texto {
  font-size: clamp(1.125rem, 1.5vw, 1.625rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--oscuro-texto);
  max-width: 900px;
}
.destacado--sincifra .destacado__texto {
  font-size: clamp(1.375rem, 2.1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--blanco);
}

/* Problema y solución */
.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 44px;
}
.par__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 38px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
}
.par__tarjeta--solucion { border-color: var(--verde-borde); background: #fbfefe; }
.par__etiqueta {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gris-fondo);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-50);
}
.par__tarjeta--solucion .par__etiqueta { background: var(--verde-claro); color: var(--verde-texto); }
.par__tarjeta p { font-size: 1.1875rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* Solución con imagen */
.solucion__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.solucion__texto { display: flex; flex-direction: column; gap: 20px; }
.solucion__texto p { font-size: 1.1875rem; font-weight: 300; line-height: 1.65; color: var(--tinta-70); }
.solucion__imagen {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
}

/* Funcionalidades clave */
.claves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--gris-borde); }
.clave {
  display: flex;
  gap: 16px;
  padding: 30px 44px 30px 0;
  border-bottom: 1px solid var(--gris-borde);
}
.clave:nth-child(even) { padding-right: 0; padding-left: 44px; border-left: 1px solid var(--gris-borde); }
.clave svg { width: 24px; height: 24px; flex: none; color: var(--verde); margin-top: 3px; }
.clave__texto { display: flex; flex-direction: column; gap: 5px; }
.clave h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.clave p { font-size: 1.0625rem; font-weight: 300; line-height: 1.55; color: var(--tinta-70); }

/* Por sector, en pestañas */
.pestanas { margin-top: 44px; }
.pestanas__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gris-borde);
}
.pestana {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--blanco);
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinta-70);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pestana svg { width: 20px; height: 20px; flex: none; }
.pestana:hover { background: var(--gris-hover); border-color: #dde5e3; }
.pestana[aria-selected="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}
.pestanas__panel { padding-top: 34px; }
.pestanas__panel[hidden] { display: none; }
[role="tabpanel"][hidden] { display: none; }
.pestanas__panel p {
  font-size: clamp(1.1875rem, 1.6vw, 1.625rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--tinta);
  max-width: 1000px;
}

/* ==========================================================================
   Páginas de texto legal, mapa del sitio y 404
   ========================================================================== */
.legal { padding-block: calc(var(--cabecera) + 72px) var(--seccion); }
.legal__interior { max-width: 860px; }
.legal__intro { margin-top: 18px; font-size: 1.0625rem; color: var(--tinta-50); }

.texto { margin-top: 52px; }
.texto h2 {
  margin-top: 52px;
  font-size: clamp(1.375rem, 1.9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.texto h3 {
  margin-top: 34px;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
}
.texto p { margin-top: 16px; font-size: 1.0625rem; font-weight: 300; line-height: 1.7; color: var(--tinta-70); }
.texto p strong, .texto li strong { font-weight: 600; color: var(--tinta); }
.texto ul { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.texto li {
  position: relative;
  padding-left: 22px;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--tinta-70);
}
.texto li::before {
  content: '';
  position: absolute;
  left: 2px; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verde);
}
.texto__datos {
  margin-top: 20px;
  padding: 26px 28px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
  background: var(--gris-fondo);
}
.texto__datos p { margin-top: 6px; font-size: 1rem; }
.texto__datos p:first-child { margin-top: 0; }

.tabla { margin-top: 20px; overflow-x: auto; }
.tabla table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla th, .tabla td {
  padding: 13px 16px;
  border: 1px solid var(--gris-borde);
  text-align: left;
  vertical-align: top;
  font-weight: 300;
  line-height: 1.5;
  color: var(--tinta-70);
}
.tabla th { background: var(--gris-fondo); font-weight: 600; color: var(--tinta); }
.tabla td code { font-family: ui-monospace, monospace; font-size: .875rem; color: var(--tinta); }

/* Mapa del sitio */
.mapa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.mapa__grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 32px 30px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
}
.mapa__titulo {
  margin-bottom: 12px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-35);
}
.mapa__grupo a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--tinta);
  border-bottom: 1px solid var(--gris-linea);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.mapa__grupo a:last-child { border-bottom: 0; }
.mapa__grupo a:hover { color: var(--verde-texto); padding-left: 6px; }
.mapa__grupo a svg { width: 19px; height: 19px; flex: none; color: var(--verde); }

/* 404 */
.error { min-height: 100svh; display: flex; align-items: center; background: var(--gris-fondo); }
.error__interior {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 720px;
  padding-block: calc(var(--cabecera) + 60px) 80px;
}
.error__codigo {
  font-size: clamp(5rem, 11vw, 11rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--verde);
}
.error__acciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.error__enlaces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.error__enlaces a {
  padding: 10px 18px;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--blanco);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta-70);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.error__enlaces a:hover { border-color: var(--verde); color: var(--verde); }

/* ==========================================================================
   Banner de cookies
   ========================================================================== */
.cookies {
  position: fixed;
  left: 20px;
  right: auto;
  bottom: 20px;
  z-index: 200;
  width: min(calc(100vw - 40px), 460px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: 24px 26px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  transform: translateY(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.cookies.esta-visible { opacity: 1; transform: none; visibility: visible; }
.cookies h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.cookies p { margin-top: 8px; font-size: .875rem; font-weight: 300; line-height: 1.55; color: var(--tinta-70); }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cookies__acciones .btn { flex: 1 1 auto; justify-content: center; padding: 13px 18px; font-size: .9375rem; }
.cookies__ajustes {
  border: 0;
  padding: 13px 6px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--tinta-70);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s var(--ease);
}
.cookies__ajustes:hover { color: var(--verde-texto); }

/* Panel de configuración */
.panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 13, 12, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.panel.esta-visible { opacity: 1; visibility: visible; }
.panel__caja {
  width: 100%;
  max-width: 680px;
  max-height: min(84svh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
  transform: translateY(16px);
  transition: transform .28s var(--ease);
}
.panel.esta-visible .panel__caja { transform: none; }
.panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px;
  border-bottom: 1px solid var(--gris-linea);
}
.panel__cabecera h2 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -.015em; }
.panel__cerrar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: var(--tinta-50);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.panel__cerrar:hover { background: var(--gris-hover); color: var(--tinta); }
.panel__cerrar svg { width: 20px; height: 20px; }
.panel__cuerpo { padding: 26px 30px; overflow-y: auto; }
.panel__intro { font-size: .9375rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }
.panel__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 30px;
  border-top: 1px solid var(--gris-linea);
  background: var(--gris-fondo);
}
.panel__pie .btn { flex: 1 1 auto; justify-content: center; padding: 15px 22px; font-size: 1rem; }

.grupo {
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
}
.grupo__fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.grupo h3 { font-size: 1.0625rem; font-weight: 600; }
.grupo p { margin-top: 8px; font-size: .9375rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }
.grupo__fijo {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--verde-claro);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--verde);
}
.grupo details { margin-top: 14px; }
.grupo summary {
  font-size: .875rem;
  font-weight: 500;
  color: var(--tinta-50);
  cursor: pointer;
  list-style: none;
}
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary::before { content: '▸ '; color: var(--verde); }
.grupo details[open] summary::before { content: '▾ '; }

/* Interruptor */
.palanca { position: relative; flex: none; width: 52px; height: 30px; }
.palanca input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.palanca span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d3dbd9;
  transition: background-color .25s var(--ease);
  pointer-events: none;
}
.palanca span::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--blanco);
  transition: transform .25s var(--ease);
}
.palanca input:checked + span { background: var(--verde); }
.palanca input:checked + span::after { transform: translateX(22px); }
.palanca input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 3px; }

/* ==========================================================================
   Bloques de las páginas de agente de IA
   ========================================================================== */

/* Flujo vertical: mensaje → entiende → actúa → resultado */
.flujo {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
}
.flujo__paso {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
  background: var(--blanco);
}
.flujo__paso svg { width: 26px; height: 26px; flex: none; color: var(--verde); }
.flujo__paso span { font-size: 1.0625rem; font-weight: 500; }
.flujo__paso em { font-style: normal; font-weight: 300; color: var(--tinta-70); }
.flujo__union {
  width: 1px;
  height: 26px;
  margin-left: 46px;
  background: var(--gris-borde);
}
.flujo--oscuro .flujo__paso { background: rgba(255,255,255,.04); border-color: var(--oscuro-borde); }
.flujo--oscuro .flujo__paso span { color: var(--blanco); }
.flujo--oscuro .flujo__paso em { color: var(--oscuro-texto); }
.flujo--oscuro .flujo__union { background: var(--oscuro-borde); }

/* Cinta horizontal: mensaje → entiende → conversa → actúa → resultado */
.cinta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 44px;
}
.cinta__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
  background: var(--blanco);
}
.cinta__paso:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--gris-borde);
}
.cinta__paso svg { width: 24px; height: 24px; color: var(--verde); }
.cinta__paso h3 {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-35);
}
.cinta__paso p { font-size: 1rem; font-weight: 400; line-height: 1.45; }
.cinta__paso--fin { border-color: var(--verde); background: var(--verde-claro); }

/* Tarjetas de intención: ¿qué quieres que haga tu WhatsApp? */
.intenciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.intencion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 32px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.intencion:hover { border-color: var(--verde-borde); background: #fbfefe; }
.intencion__quiero {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-texto);
}
.intencion h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.intencion p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }
.intencion__resultado {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--gris-linea);
  font-size: 1rem;
  font-weight: 600;
}
.intencion__resultado svg { width: 18px; height: 18px; color: var(--verde); }

/* Reproductores de llamada */
.demos { margin-top: 44px; }
.demos__barra { display: flex; flex-wrap: wrap; gap: 10px; }
.demos__lista { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.demos__lista[hidden] { display: none; }
.reproductor {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
  background: var(--blanco);
}
.reproductor__play {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
}
.reproductor__play svg { width: 20px; height: 20px; }
.reproductor__cuerpo { flex: 1; min-width: 0; }
.reproductor__titulo { font-size: 1.0625rem; font-weight: 600; }
.reproductor__onda {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  margin-top: 10px;
}
.reproductor__onda i {
  flex: 1;
  min-width: 2px;
  background: var(--verde-borde);
  border-radius: 2px;
}
.reproductor__tiempo { flex: none; font-size: .9375rem; font-weight: 500; color: var(--tinta-50); font-variant-numeric: tabular-nums; }
.reproductor--hueco { border-style: dashed; background: var(--gris-fondo); }
.reproductor--hueco .reproductor__play { background: #c8d2d0; }

/* Marcas de tiempo de la llamada */
.marcas { margin-top: 30px; display: flex; flex-direction: column; }
.marca {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--gris-borde);
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--tinta-70);
}
.marca:last-child { border-bottom: 0; }
.marca b { font-weight: 600; color: var(--verde-texto); font-variant-numeric: tabular-nums; }

/* Integraciones */
.integraciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--oscuro-borde); }
.integracion {
  display: flex;
  gap: 16px;
  padding: 28px 44px 28px 0;
  border-bottom: 1px solid var(--oscuro-borde);
}
.integracion:nth-child(even) { padding-right: 0; padding-left: 44px; border-left: 1px solid var(--oscuro-borde); }
.integracion svg { width: 24px; height: 24px; flex: none; color: var(--verde); margin-top: 3px; }
.integracion h3 { font-size: 1.1875rem; font-weight: 600; color: var(--blanco); }
.integracion p { margin-top: 5px; font-size: 1rem; font-weight: 300; line-height: 1.55; color: var(--oscuro-texto); }
.cadena {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding: 26px 30px;
  border: 1px solid var(--verde);
  border-radius: var(--radio-s);
  background: rgba(18, 161, 154, .08);
}
.cadena span { font-size: 1.0625rem; font-weight: 600; color: var(--blanco); }
.cadena svg { width: 18px; height: 18px; color: var(--verde); }
.cadena em { font-style: normal; font-size: 1.0625rem; font-weight: 300; color: var(--oscuro-texto); }

/* Beneficios y casos de uso en rejilla ligera */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.rejilla--dos { grid-template-columns: repeat(2, 1fr); }
.ficha {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 30px 28px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.ficha:hover { background: var(--gris-hover); border-color: #dde5e3; }
.ficha svg { width: 26px; height: 26px; color: var(--verde); }
.ficha h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; }
.ficha p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* Traspaso a persona: cronología */
.crono { margin-top: 44px; display: flex; flex-direction: column; }
.crono__hito {
  display: grid;
  grid-template-columns: 92px 34px 1fr;
  align-items: start;
  gap: 20px;
  padding: 20px 0;
}
.crono__hora { font-size: 1rem; font-weight: 600; color: var(--tinta-35); font-variant-numeric: tabular-nums; padding-top: 4px; }
.crono__punto { position: relative; display: grid; place-items: start center; height: 100%; }
.crono__punto i {
  width: 12px; height: 12px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--gris-borde);
}
.crono__hito--clave .crono__punto i { background: var(--verde); }
.crono__punto::after {
  content: '';
  position: absolute;
  top: 24px; bottom: -20px;
  width: 1px;
  background: var(--gris-borde);
}
.crono__hito:last-child .crono__punto::after { display: none; }
.crono__texto h3 { font-size: 1.125rem; font-weight: 600; }
.crono__texto p { margin-top: 5px; font-size: 1.0625rem; font-weight: 300; line-height: 1.55; color: var(--tinta-70); }

/* Bifurcación: ¿puede automatizarse? */
.bifurca { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
.rama {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
}
.rama--si { border-color: var(--verde); background: var(--verde-claro); }
.rama__etiqueta { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 600; }
.rama__etiqueta svg { width: 22px; height: 22px; color: var(--verde); }
.rama ul { display: flex; flex-direction: column; gap: 8px; }
.rama li { font-size: 1.0625rem; font-weight: 300; color: var(--tinta-70); }

/* Mensajes sueltos de un cliente */
.hilo { margin-top: 32px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.hilo p {
  max-width: 460px;
  padding: 13px 18px;
  border-radius: 14px 14px 14px 4px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  font-size: 1.0625rem;
  font-weight: 300;
}

/* Comparativa contestador vs agente */
.versus { margin-top: 44px; overflow-x: auto; }
.versus table { width: 100%; border-collapse: collapse; }
.versus th, .versus td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--tinta-70);
}
.versus thead th {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tinta);
  border-bottom: 1.5px solid var(--tinta);
}
.versus tbody th { font-weight: 400; color: var(--tinta); }
.versus td { text-align: center; width: 190px; }
.versus td:last-child { background: #fbfefe; font-weight: 600; color: var(--verde); }
.versus svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.versus .si { color: var(--verde); }
.versus .no { color: #b9c4c1; }

/* Prueba social antes/después */
.caso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border: 1px solid var(--gris-borde); border-radius: var(--radio); overflow: hidden; }
.caso__col { padding: 32px 30px; border-left: 1px solid var(--gris-borde); }
.caso__col:first-child { border-left: 0; }
.caso__col--fin { background: var(--verde-claro); }
.caso__etiqueta {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-35);
}
.caso__col--fin .caso__etiqueta { color: var(--verde-texto); }
.caso__col p { margin-top: 12px; font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* Enlace a producto hermano */
.hermanas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.hermana {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 32px 30px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
}
.hermana--aqui { border-color: var(--verde); background: var(--verde-claro); }
.hermana svg { width: 28px; height: 28px; color: var(--verde); }
.hermana h3 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -.02em; }
.hermana p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }
.hermana__aqui {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--verde-texto);
}
.hermana__aqui svg { width: 18px; height: 18px; }
.hermana__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--verde-texto);
}
.hermana__enlace svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.hermana__enlace:hover svg { transform: translateX(4px); }

/* Lista de sectores como texto corrido */
.sectores__linea {
  margin-top: 26px;
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--tinta);
}
.sectores__linea span { color: var(--verde-texto); font-weight: 600; }

/* Bloque de cierre con salida a otro producto */
.salida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 44px;
  padding: 34px 36px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--gris-fondo);
}
.salida__texto h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.salida__texto p { margin-top: 8px; font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); max-width: 640px; }

/* Callouts del hero */
.hero__callouts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero__callouts span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(16, 25, 23, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-size: .9375rem;
  font-weight: 500;
}
.hero__callouts svg { width: 18px; height: 18px; color: var(--verde); }

/* CTA permanente en la cabecera */
.cabecera__prueba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
}
.cabecera__prueba svg { width: 17px; height: 17px; color: var(--verde); flex: none; }
.cabecera__prueba a { color: var(--blanco); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cabecera__prueba a:hover { color: var(--verde); }
body.tiene-aviso { --cabecera: 138px; }

/* ==========================================================================
   Bloque con vídeo de fondo fijo (mismo patrón que el FAQ)
   ========================================================================== */
.fondo-fijo { position: relative; overflow: clip; }
.fondo-fijo__media {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  z-index: 0;
}
.fondo-fijo__media video,
.fondo-fijo__media img { width: 100%; height: 100%; object-fit: cover; }
.fondo-fijo__interior {
  position: relative;
  z-index: 1;
  margin-top: -100svh;
  min-height: 135svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--seccion);
}

/* Sobre oscuro: el contenido va en blanco */
.fondo-fijo--oscuro { background: var(--tinta); color: var(--blanco); }
.fondo-fijo--oscuro .fondo-fijo__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 25, 23, .78) 0%, rgba(16, 25, 23, .86) 50%, rgba(16, 25, 23, .93) 100%);
}
.fondo-fijo--oscuro .antetitulo { color: var(--oscuro-suave); }
.fondo-fijo--oscuro .destacado__texto { color: var(--blanco); }

/* Sobre claro */
.fondo-fijo--claro { background: var(--gris-fondo); }
.fondo-fijo--claro .fondo-fijo__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 248, 248, .8) 0%, rgba(246, 248, 248, .89) 50%, rgba(246, 248, 248, .95) 100%);
}

/* ==========================================================================
   Separador a ancho completo con la frase clave encima
   ========================================================================== */
.separador {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--tinta);
}
.separador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.separador::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 13, 12, .3) 0%, rgba(7, 13, 12, .45) 55%, rgba(7, 13, 12, .34) 100%);
}
/* El velo de la sección no basta: sobre un ventanal o un cielo el compuesto se
   queda en 2.9:1. El párrafo lleva su propio scrim radial, que se difumina en
   los bordes y garantiza 4.5:1 incluso contra un píxel blanco puro. */
.separador p {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-inline: var(--margen);
  padding: 34px 46px;
  border-radius: var(--radio);
  background: radial-gradient(ellipse 120% 150% at 50% 50%,
    rgba(7, 13, 12, .9) 0%,
    rgba(7, 13, 12, .86) 58%,
    rgba(7, 13, 12, .58) 82%,
    rgba(7, 13, 12, 0) 100%);
  text-align: center;
  color: var(--blanco);
  font-size: clamp(1.375rem, 2.4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
}

/* ==========================================================================
   Landing IA Experience
   ========================================================================== */
.lp-cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gris-linea);
}
.lp-cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 82px;
}
.lp-cabecera__logo img { height: 38px; width: auto; }
.lp-cabecera__acciones { display: flex; align-items: center; gap: 26px; }
.lp-cabecera__enlace { font-size: 1rem; font-weight: 500; color: var(--tinta); }
.lp-cabecera__enlace:hover { color: var(--verde-texto); }

/* Cifras del hero */
.lp-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin-top: 8px;
}
.lp-datos span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 24px;
  border-left: 1px solid #cfd8d6;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinta-70);
}
.lp-datos span:first-child { padding-left: 0; border-left: 0; }
.lp-datos b {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Frase de remate a media sección */
.lp-remate {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--gris-borde);
  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.022em;
}
.lp-remate b { color: var(--verde-texto); font-weight: 600; }

/* Dos columnas de titular + cuerpo */
.lp-doble {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.lp-doble p { font-size: 1.1875rem; font-weight: 300; line-height: 1.65; color: var(--tinta-70); }
.lp-doble p + p { margin-top: 18px; }

/* Resultados numerados sobre fondo oscuro */
.lp-logros { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: 44px; border-top: 1px solid var(--oscuro-borde); }
.lp-logro {
  display: flex;
  gap: 18px;
  padding: 28px 34px 28px 0;
  border-bottom: 1px solid var(--oscuro-borde);
}
.lp-logro span {
  flex: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.lp-logro p { font-size: 1.0625rem; font-weight: 300; line-height: 1.55; color: var(--oscuro-texto); }

/* Línea del proceso */
.lp-proceso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 26px 0;
  border-block: 1px solid var(--gris-borde);
}
.lp-proceso span { font-size: 1.0625rem; font-weight: 600; }
.lp-proceso i {
  flex: 1 1 40px;
  min-width: 30px;
  height: 1px;
  background: var(--gris-borde);
}

/* Etapas del programa */
.lp-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.lp-etapa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.lp-etapa:hover { border-color: var(--verde-borde); background: #fbfefe; }
.lp-etapa__num {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--tinta-35);
}
.lp-etapa__cuando {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-texto);
}
.lp-etapa h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
.lp-etapa p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--tinta-70); }

/* Departamentos */
.lp-areas { display: flex; flex-direction: column; border-top: 1px solid var(--gris-borde); }
.lp-area {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--gris-borde);
}
.lp-area span { font-size: 1rem; font-weight: 600; color: var(--tinta-35); font-variant-numeric: tabular-nums; }
.lp-area strong { font-size: 1.3125rem; font-weight: 600; letter-spacing: -.018em; }
.lp-area p { font-size: 1.0625rem; font-weight: 300; color: var(--tinta-70); }

/* Mapa de oportunidades */
.lp-mapa {
  padding: 32px 34px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
}
.lp-mapa__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gris-linea);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lp-mapa__cabecera b { color: var(--tinta-35); font-weight: 600; }
.lp-mapa__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}
.lp-mapa__rejilla span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-s);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}
.lp-mapa__rejilla span:first-child { background: var(--verde-claro); border-color: var(--verde-borde); color: var(--verde-texto); }
.lp-mapa small {
  display: block;
  margin-top: 16px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-35);
}

/* Testimonios de Google */
.lp-resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.lp-resena {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 34px 30px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  background: var(--blanco);
}
.lp-resena blockquote { font-size: 1.125rem; font-weight: 400; line-height: 1.55; }
.lp-resena figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.lp-resena strong { font-size: 1.03125rem; font-weight: 600; }
.lp-resena span { display: flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 400; color: var(--tinta-50); }
.lp-resena span svg { width: 15px; height: 15px; color: var(--verde); }

/* Encaje: dos listas enfrentadas */
.lp-encaje { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.lp-encaje ul { display: flex; flex-direction: column; gap: 14px; }
.lp-encaje li { display: flex; gap: 14px; font-size: 1.0625rem; font-weight: 300; line-height: 1.55; color: var(--tinta-70); }
.lp-encaje li svg { width: 21px; height: 21px; flex: none; margin-top: 2px; }
.lp-encaje__si li svg { color: var(--verde); }
.lp-encaje__no li svg { color: #b9c4c1; }

/* Formulario */
.lp-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.lp-form__intro { display: flex; flex-direction: column; gap: 20px; }
.lp-form__intro p { font-size: 1.1875rem; font-weight: 300; line-height: 1.65; color: var(--tinta-70); }
.lp-garantia {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
  padding: 26px 28px;
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  background: var(--verde-claro);
}
.lp-garantia b { font-size: 1.0625rem; font-weight: 600; color: var(--verde-texto); }
.lp-garantia span { font-size: 1rem; font-weight: 300; line-height: 1.55; color: var(--tinta-70); }

.lp-campos { display: flex; flex-direction: column; gap: 18px; }
.lp-campos label { display: flex; flex-direction: column; gap: 8px; font-size: .9375rem; font-weight: 500; }
.lp-campos input,
.lp-campos select,
.lp-campos textarea {
  width: 100%;
  padding: 15px 17px;
  border: 1px solid #d9e0de;
  border-radius: var(--radio-s);
  background: var(--blanco);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--tinta);
  transition: border-color .2s var(--ease);
}
.lp-campos textarea { resize: vertical; min-height: 96px; }
.lp-campos input:focus,
.lp-campos select:focus,
.lp-campos textarea:focus { outline: 0; border-color: var(--verde); }
.lp-campos input::placeholder,
.lp-campos textarea::placeholder { color: var(--tinta-35); font-weight: 300; }
.lp-campos__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-campos button { margin-top: 6px; }
.lp-campos__nota { font-size: .875rem; font-weight: 300; line-height: 1.5; color: var(--tinta-50); }

/* ==========================================================================
   Efectos de scroll
   ========================================================================== */
/* La aparición usa animación propia: así no interfiere con las
   transiciones de hover de tarjetas, botones y enlaces. */
.js .aparece { opacity: 0; }
.js .aparece.visible { animation: aparecer .7s var(--ease) both; }
.js .aparece.visible[data-retardo="1"] { animation-delay: .08s; }
.js .aparece.visible[data-retardo="2"] { animation-delay: .16s; }
.js .aparece.visible[data-retardo="3"] { animation-delay: .24s; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Los pilares entran de uno en uno, cada cuarto de segundo */
.js .pilar.aparece.visible { animation-name: aparecer-pilar; }
.js .pilar.aparece.visible[data-retardo="1"] { animation-delay: .25s; }
.js .pilar.aparece.visible[data-retardo="2"] { animation-delay: .5s; }
.js .pilar.aparece.visible[data-retardo="3"] { animation-delay: .75s; }

@keyframes aparecer-pilar {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece { opacity: 1; }
  .js .aparece.visible { animation: none; }
  .destaca { animation: none; background-size: 100% 34%; }
  .marquesina__pista { animation: none; }
  .perdida__fondo { background-attachment: scroll; }
  .tira__pista { transform: none !important; }
}

/* ==========================================================================
   1440 — portátil
   ========================================================================== */
@media (max-width: 1560px) {
  :root { --margen: 72px; --seccion: 112px; }
  .confianza__item { font-size: .96875rem; padding-inline: 22px; }
  .perdida__interior { gap: 72px; padding-block: 124px; }
  .pasos__interior,
  .seguridad__interior,
  .faq__interior { gap: 72px; }
  .pasos__persona { width: 290px; max-height: calc(40% + var(--seccion)); }
  .porque__interior { grid-template-columns: 1fr minmax(0, 520px); }
  .fusion__interior { gap: 60px; }
  .fusion__diagrama { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 260px); }
  .fusion__lineas { width: 110px; height: auto; }
  .pie__grid { gap: 48px; }
  .tira__pista img { width: 340px; height: 480px; }
}

/* ==========================================================================
   1280 — portátil pequeño
   ========================================================================== */
@media (max-width: 1360px) {
  :root { --margen: 56px; --seccion: 100px; }
  .pilares { grid-template-columns: repeat(2, 1fr); }
  .pilar__pantalla { height: 220px; }
  .confianza__sectores { flex-wrap: wrap; gap: 22px; }
  .confianza__intro { max-width: none; flex: 1 1 100%; }
  .marquesina { flex: 1 1 100%; }
  .confianza__item { padding-inline: 18px; }
  .marquesina {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%);
  }
  .seguridad__lista { grid-template-columns: 1fr; gap: 26px; }
  .fusion__interior { grid-template-columns: 1fr; gap: 48px; padding-block: 90px; }
  .fusion__diagrama { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 280px); }
  .fusion__lineas { width: 120px; height: auto; }
  .tira__pista img { width: 300px; height: 420px; }
}

/* ==========================================================================
   1024 — tablet horizontal
   ========================================================================== */
@media (max-width: 1180px) and (min-width: 981px) {
  :root { --margen: 44px; --seccion: 88px; }

  .menu { gap: 26px; }
  .menu__enlace { font-size: 1rem; }
  .menu .btn { padding: 13px 22px; font-size: 1rem; }

  .hero { min-height: auto; }
  .hero__interior { padding-block: calc(var(--cabecera) + 56px) 72px; }
  .hero__velo {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, .82) 100%);
  }

  .perdida__interior { grid-template-columns: 1fr; gap: 40px; padding-block: 100px; }
  .pasos__interior,
  .seguridad__interior,
  .faq__interior { grid-template-columns: 1fr; gap: 40px; }
  .pasos__persona { display: none; }
  .porque__interior { padding-block: 16svh 18svh; }
  .faq__interior { min-height: 120svh; }
  .fondo-fijo__interior { min-height: 110svh; }
  .separador { min-height: 380px; }
  .separador p { padding: 28px 32px; }

  .porque__interior { grid-template-columns: 1fr; padding-block: 16svh 18svh; }
  .porque__columna { grid-column: 1; }
  .porque__velo {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .86) 40%, rgba(255, 255, 255, .92) 100%);
  }

  .testimonios__lista { grid-template-columns: 1fr 1fr; }
  .testimonio:last-child { grid-column: span 2; }
  .sectores__grid { grid-template-columns: 1fr 1fr; }
  .comparativa__grid { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .pie__marca { grid-column: span 2; }

  .par { grid-template-columns: 1fr; }
  .mapa { grid-template-columns: 1fr 1fr; }
  .cinta { grid-template-columns: repeat(2, 1fr); }
  .lp-etapas { grid-template-columns: repeat(2, 1fr); }
  .lp-resenas { grid-template-columns: 1fr; }
  .lp-doble, .lp-form { grid-template-columns: 1fr; gap: 44px; }
  .cinta__paso:not(:last-child)::after { display: none; }
  .cinta__paso:last-child { grid-column: span 2; }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .hermanas { grid-template-columns: 1fr; }
  .caso { grid-template-columns: 1fr; }
  .caso__col { border-left: 0; border-top: 1px solid var(--gris-borde); }
  .caso__col:first-child { border-top: 0; }
  .integraciones { grid-template-columns: 1fr; }
  .integracion, .integracion:nth-child(even) { padding: 24px 0; border-left: 0; }
  .solucion__interior { grid-template-columns: 1fr; gap: 44px; }
  .claves { grid-template-columns: 1fr; }
  .clave, .clave:nth-child(even) { padding: 26px 0; border-left: 0; }
}

/* ==========================================================================
   768 — tablet vertical
   ========================================================================== */
@media (max-width: 980px) {
  :root { --margen: 32px; --seccion: 76px; }

  .testimonios__lista,
  .sectores__grid,
  .comparativa__grid,
  .pie__grid { grid-template-columns: 1fr; }
  .perdida__interior,
  .pasos__interior,
  .seguridad__interior,
  .faq__interior,
  .porque__interior { grid-template-columns: 1fr; gap: 40px; }
  .pasos__persona { display: none; }
  .porque__columna { grid-column: 1; }
  .seguridad__lista { grid-template-columns: 1fr; gap: 26px; }
  .fusion__interior { grid-template-columns: 1fr; gap: 48px; padding-block: 90px; }
  .perdida__interior { padding-block: 100px; }

  .menu {
    position: fixed;
    inset: var(--cabecera) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 28px var(--margen) 40px;
    background: var(--blanco);
    border-top: 1px solid var(--gris-linea);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    overflow-y: auto;
  }
  .menu.abierto { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
  .menu__enlace {
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--gris-linea);
    font-size: 1.25rem;
    font-weight: 500;
  }
  .menu__enlace::after { display: none; }

  .menu__grupo { position: static; }
  .menu__grupo .menu__flecha { display: none; }
  .menu__grupo.esta-desplegado .submenu { opacity: 1; visibility: visible; }
  .submenu {
    position: static;
    min-width: 0;
    padding: 6px 0 14px 12px;
    border: 0;
    border-bottom: 1px solid var(--gris-linea);
    border-radius: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    gap: 0;
  }
  .submenu::before { display: none; }
  .submenu__enlace { padding: 13px 0; font-size: 1.0625rem; font-weight: 400; color: var(--tinta-70); }
  .submenu__enlace:hover { background: none; color: var(--verde); }
  .submenu__enlace.esta-activo { background: none; }
  .menu .btn { justify-content: center; margin-top: 24px; padding: 19px 32px; font-size: 1.125rem; }

  .cabecera.tiene-menu {
    background: var(--blanco);
    border-bottom-color: var(--gris-linea);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .cabecera__interior { gap: 12px; }
  .cabecera__demo.btn {
    display: inline-flex;
    width: auto;
    flex: none;
    margin-left: auto;
    margin-right: 12px;
    padding: 12px 22px;
    font-size: 1rem;
    width: auto;
  }
  .hamburguesa {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    border: 1px solid var(--gris-borde);
    background: rgba(255, 255, 255, .7);
    color: var(--tinta);
  }
  .hamburguesa svg { width: 24px; height: 24px; }
  .hamburguesa .icono-cerrar { display: none; }
  .hamburguesa[aria-expanded="true"] .icono-abrir { display: none; }
  .hamburguesa[aria-expanded="true"] .icono-cerrar { display: block; }
  body.menu-abierto { overflow: hidden; }

  /* Hero: el vídeo arriba a ancho completo y el texto debajo.
     El alto se acota en svh, no solo por proporción: con 16/9 puro, una ventana
     de portátil reducida (900-980 px de ancho y poca altura) dejaría el H1 y los
     CTA por debajo del pliegue. */
  .hero { display: block; min-height: 0; }
  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 38svh;
  }
  .hero__velo { display: none; }
  .hero__interior { padding-block: 34px 56px; }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .btn { justify-content: center; }

  /* Por qué Dialogfy: mismo criterio, el vídeo deja de ser fondo fijo */
  .porque__fondo {
    max-height: 38svh;
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .porque__velo { display: none; }
  .porque__interior { margin-top: 0; padding-block: 36px 60px; }
  .porque__columna .antetitulo { color: var(--oscuro-suave); }

  /* Bloques con vídeo de fondo: el vídeo deja de ser fijo y se apila arriba */
  .fondo-fijo__media {
    max-height: 38svh;
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .fondo-fijo__interior { margin-top: 0; min-height: 0; }
  .fondo-fijo--oscuro .fondo-fijo__velo,
  .fondo-fijo--claro .fondo-fijo__velo { position: absolute; inset: 0; }
  .separador { min-height: 300px; }
  .separador p { padding: 24px 24px; margin-inline: 16px; }

  /* FAQ: igual */
  .faq__fondo {
    max-height: 38svh;
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .faq__velo { display: none; }
  .faq__interior { margin-top: 0; min-height: 0; padding-block: 36px var(--seccion); }

  /* De cinco a uno: la convergencia pasa a leerse de arriba abajo */
  .fusion__origen {
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 380px;
  }
  .fusion__origen::after {
    content: '';
    align-self: center;
    width: 2px;
    height: 32px;
    margin-top: 8px;
    border-radius: 2px;
    background: linear-gradient(#3a4442, var(--verde));
  }

  .pilares { grid-template-columns: 1fr; gap: 20px; }
  .pilar__pantalla { height: 240px; }
  .js .pilar.aparece.visible[data-retardo] { animation-delay: 0s; }
  .testimonios__lista { grid-template-columns: 1fr; }
  .testimonio:last-child { grid-column: auto; }
  .sectores__grid { grid-template-columns: 1fr; }
  .sectores__cabecera { flex-direction: column; align-items: flex-start; gap: 26px; }
  .confianza__datos { grid-template-columns: 1fr; }
  .dato { padding: 24px 0; border-left: 0; border-top: 1px solid var(--gris-borde); }
  .dato:last-child { padding-right: 0; }
  .dato:first-child { border-top: 0; }
  .paso { grid-template-columns: 56px 1fr; gap: 18px; }
  .paso__numero { font-size: 2.25rem; }
  .tira__pista img { width: 240px; height: 340px; }
  .fusion__diagrama { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .fusion__lineas { display: none; }
  .fusion__origen li { justify-content: flex-start; }
  .fusion__destino { align-items: flex-start; width: 100%; max-width: 380px; }
  .par { grid-template-columns: 1fr; }
  .mapa { grid-template-columns: 1fr; }
  .cinta { grid-template-columns: 1fr; }
  .lp-etapas, .lp-encaje, .lp-mapa__rejilla, .lp-campos__dos, .lp-resenas { grid-template-columns: 1fr; }
  .lp-doble, .lp-form { grid-template-columns: 1fr; gap: 36px; }
  .lp-cabecera__enlace { display: none; }
  .lp-area { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .lp-datos span { padding: 0 16px; }
  .lp-logro { padding: 24px 0; }
  .cinta__paso:last-child { grid-column: auto; }
  .cinta__paso:not(:last-child)::after { display: none; }
  .intenciones, .rejilla, .rejilla--dos, .bifurca, .hermanas { grid-template-columns: 1fr; }
  .integraciones { grid-template-columns: 1fr; }
  .integracion, .integracion:nth-child(even) { padding: 24px 0; border-left: 0; }
  .caso { grid-template-columns: 1fr; }
  .caso__col { border-left: 0; border-top: 1px solid var(--gris-borde); }
  .caso__col:first-child { border-top: 0; }
  .crono__hito { grid-template-columns: 76px 26px 1fr; gap: 14px; }
  .marca { grid-template-columns: 64px 1fr; gap: 14px; }
  .salida { flex-direction: column; align-items: flex-start; }
  .versus td { width: auto; }
  body.tiene-aviso { --cabecera: 120px; }
  .solucion__interior { grid-template-columns: 1fr; gap: 36px; }
  .claves { grid-template-columns: 1fr; }
  .clave, .clave:nth-child(even) { padding: 24px 0; border-left: 0; }
  .destacado__interior { flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 60px; }
  .cierre__interior { padding-block: 96px 88px; }
  .pie__grid { grid-template-columns: 1fr; gap: 36px; padding-block: 56px 44px; }
  .pie__marca { grid-column: auto; }
  .pie__base { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==========================================================================
   Ventanas bajas con el hero apilado
   Un portátil con la ventana reducida (poca altura) dejaba los CTA por debajo
   del pliegue aunque el titular sí entrase. Aquí se compacta el hero para que
   titular y botones quepan juntos en la primera pantalla.
   ========================================================================== */
@media (max-width: 980px) and (max-height: 720px) {
  /* El media arranca en y=0 y la cabecera fija se le pone encima, así que el
     alto útil es max-height menos la cabecera: hay que sumarla para que quede
     vídeo visible. --cabecera lo mantiene medirCabecera() en main.js, de modo
     que el calc sigue valiendo con la barra de «30 días» de la Extensión. */
  .hero__media { max-height: calc(var(--cabecera) + 24svh); }
  .hero__interior { padding-block: 24px 40px; }
  .hero__texto { gap: 16px; }
  .servicio__hero .hero__texto { gap: 14px; }
  /* Migas y antetítulo repiten lo que ya dice el H1: se ocultan para que
     titular y CTAs quepan en la primera pantalla. */
  .servicio__hero .migas,
  .servicio__hero .hero__texto > .antetitulo { display: none; }
  .hero__callouts { display: none; }
  .hero__acciones { flex-direction: row; flex-wrap: wrap; }
  .hero__acciones .btn { flex: 1 1 auto; width: auto; }
}

/* Ventanas muy bajas (500 px de alto o menos): el vídeo cede más espacio
   todavía para que los CTA no queden fuera de la primera pantalla. */
@media (max-width: 980px) and (max-height: 500px) {
  .hero__media { max-height: calc(var(--cabecera) + 15svh); }
  .hero__interior { padding-block: 18px 32px; }
  .hero__texto { gap: 13px; }
  .servicio__hero .hero__texto { gap: 11px; }
}

/* ==========================================================================
   390 — móvil
   ========================================================================== */
@media (max-width: 560px) {
  :root { --margen: 20px; --seccion: 60px; --radio: 16px; --cabecera: 76px; }

  body { font-size: 17px; }

  .cabecera__logo img { height: 34px; }
  .cabecera__demo.btn {
    padding: 11px 18px;
    font-size: .9375rem;
    margin-right: 10px;
  }
  .hamburguesa { width: 42px; height: 42px; flex: none; }

  .hero__interior { padding-block: 28px 52px; }
  .hero__texto { gap: 22px; }

  .confianza__sectores { padding-block: 28px; gap: 18px; }
  .confianza__item { padding-inline: 14px; font-size: .9375rem; }
  .marquesina {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  }
  .dato { gap: 14px; }

  .perdida__interior { padding-block: 72px; }
  .perdida__cifra { flex-direction: column; align-items: flex-start; gap: 10px; }
  .perdida__fondo { background-attachment: scroll; }

  .pilar__pantalla { height: 200px; padding: 12px; }
  .pilar__contenido { padding: 24px 22px; gap: 13px; }

  .tira__pista img { width: 180px; height: 260px; }

  .testimonio { padding: 28px 24px; gap: 20px; }
  .columna__titulo { padding: 20px 24px; }
  .columna li { padding: 18px 24px; gap: 12px; font-size: 1.0625rem; }
  .sector { padding: 26px 22px; }
  .ventaja { padding: 26px 24px; }
  .fusion__interior { padding-block: 70px; }


  .par__tarjeta { padding: 28px 24px; }
  .flujo__paso, .reproductor { padding: 18px 20px; gap: 14px; }
  .flujo__union { margin-left: 36px; }
  .intencion, .ficha, .rama, .hermana { padding: 26px 22px; }
  .cinta__paso { padding: 22px 20px; }
  .caso__col { padding: 26px 22px; }
  .salida { padding: 26px 22px; }
  .reproductor__play { width: 42px; height: 42px; }
  body.tiene-aviso { --cabecera: 112px; }
  .cookies { left: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 20px 20px; }
  .cookies__acciones .btn { flex: 1 1 calc(50% - 4px); }
  .panel__cuerpo, .panel__cabecera, .panel__pie { padding-inline: 20px; }
  .panel__pie .btn { flex: 1 1 100%; }
  .legal { padding-block: calc(var(--cabecera) + 44px) var(--seccion); }
  .pestana { padding: 11px 16px; font-size: .9375rem; }
  .servicio__hero .hero__texto { gap: 20px; }

  .faq__boton { padding: 22px 0; gap: 20px; }
  .faq__respuesta p { padding-bottom: 22px; font-size: 1.0625rem; }

  .cierre__interior { padding-block: 72px 68px; gap: 22px; }
  .btn { padding: 17px 28px; font-size: 1.0625rem; width: 100%; justify-content: center; }
  .btn--grande { padding: 19px 30px; font-size: 1.125rem; }
}