/* ==========================================================================
   Promova · estilos del sitio

   Inspirado en el sitio original de Promova (hero gris, grilla de servicios,
   una franja de color por servicio, cierre en degradé), reinterpretado:
   la grilla se monta sobre el borde del hero, las tarjetas toman el color
   de su servicio al pasar el mouse, cada franja tiene número y destacados,
   y un índice lateral marca en qué servicio estás.

   Sistema
   - Poppins en 400, 500 y 600. Hero en 500; títulos de franja y tarjetas en 600.
   - Escala fija: display · h2 · h3 · lead · cuerpo · chico · mínimo.
   - Cada servicio trae --color: el tono del original llevado lo justo para que
     el texto blanco pase 4,5:1. La única franja clara (Google) va con tinta.
   - Movimiento: [data-animar] entra al aparecer; la cinta de colores del título
     se dibuja al cargar; las fotos y los números tienen un paralaje suave donde
     el navegador soporta animaciones ligadas al scroll. Todo se apaga con
     prefers-reduced-motion y sin JS (ver el <head>).
   ========================================================================== */

:root {
  --tinta: #101828;
  --texto: #3f4552;
  --suave: #667085;
  --linea: #e6e7ea;
  --fondo: #ffffff;
  --gris-hero: #e4e4e4;
  --azul: #1a73e8;
  --azul-oscuro: #1557b0;
  --cian: #19c8f0;
  --verde-enlace: #0a7c78;

  --t-display: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem);
  --t-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --t-h3: 1.1875rem;
  --t-lead: 1.0625rem;
  --t-chico: .875rem;
  --t-min: .8125rem;

  --fuente: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1160px;
  --gutter: 20px;
  --alto-cabecera: 64px;
  --curva: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

@media (min-width: 760px) {
  :root { --gutter: 32px; --alto-cabecera: 72px; }
}

/* Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-cabecera);
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 { margin: 0; color: var(--tinta); font-weight: 600; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; }
strong { font-weight: 600; }

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

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--tinta);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

.icono { width: 1.125em; height: 1.125em; flex: none; }

.contenedor {
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin-inline: auto;
}

/* Botones ------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font: 500 15px/1 var(--fuente);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.boton .icono { width: 18px; height: 18px; }
.boton:active { transform: translateY(1px); }

.boton--azul { background: var(--azul); color: #fff; }
.boton--azul:hover { background: var(--azul-oscuro); box-shadow: 0 10px 24px -12px rgba(26, 115, 232, .7); }

.boton--cian { border-radius: 999px; background: var(--cian); color: var(--tinta); font-weight: 600; }
.boton--cian:hover { background: #0fb4db; }
/* el "Hablemos" de la cabecera va con texto blanco */
.cabecera .boton--cian { color: #fff; }

.boton--chico { height: 40px; padding: 0 18px; font-size: 14px; }
.boton--ancho { width: 100%; }

/* "Más información" de la grilla */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--tinta);
  font-size: var(--t-min);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .3s, color .3s;
}
.pastilla .icono { width: 14px; height: 14px; transition: transform .25s var(--curva); }

@media (max-width: 419px) {
  .pastilla { height: 32px; padding: 0 12px; font-size: 12px; }
  .pastilla .icono { display: none; }
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.enlace-flecha .icono { width: 16px; height: 16px; transition: transform .25s var(--curva); }
.enlace-flecha:hover .icono { transform: translateX(3px); }

/* Cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.cabecera--scroll,
.cabecera.menu-abierto { border-bottom-color: var(--linea); box-shadow: 0 8px 24px -20px rgba(16, 24, 40, .4); }

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

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

.cabecera__acciones { display: flex; align-items: center; gap: 12px; }

.cabecera__redes { display: none; gap: 4px; }
.cabecera__redes a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--tinta); }
.cabecera__redes a:hover { background: #f2f4f7; }
.cabecera__redes .icono { width: 20px; height: 20px; }

.cabecera__menu {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  cursor: pointer;
}
.cabecera__menu .icono { width: 24px; height: 24px; grid-area: 1 / 1; }
.cabecera__menu .icono--cerrar,
.menu-abierto .cabecera__menu .icono--abrir { display: none; }
.menu-abierto .cabecera__menu .icono--cerrar { display: block; }

/* Navegación: panel en mobile, en línea desde 960px */
.nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-height: calc(100dvh - var(--alto-cabecera));
  overflow-y: auto;
  padding: 8px var(--gutter) 24px;
  border-bottom: 1px solid var(--linea);
  background: #fff;
}
.menu-abierto .nav { display: block; }

.nav__lista > li { border-bottom: 1px solid var(--linea); }

.nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}
.nav__enlace .icono { width: 20px; height: 20px; color: var(--suave); }

.nav__servicios { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.nav__abrir {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta);
  cursor: pointer;
}
.nav__abrir .icono { width: 16px; height: 16px; transition: transform .2s; }
.nav__abrir[aria-expanded="true"] .icono { transform: rotate(180deg); }

/* Menú de servicios: en el celular es una lista agrupada dentro del panel;
   desde 960px, un menú amplio de 4 categorías con 2 servicios cada una */
.megamenu { display: none; flex-basis: 100%; padding-bottom: 8px; }
.nav__servicios.abierto .megamenu { display: block; }
.megamenu .contenedor { width: auto; }

.megamenu__columnas { display: grid; gap: 14px; }
.megamenu__categoria {
  padding: 0 12px 4px;
  color: var(--suave);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.megamenu__lista { display: grid; gap: 2px; }

.megamenu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .2s;
}
.megamenu__item:hover { background: #f5f6f8; }
.megamenu__item[aria-current] { background: color-mix(in srgb, var(--color) 8%, white); }

.megamenu__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color) 11%, white);
  color: var(--color);
  transition: background-color .2s, color .2s;
}
.megamenu__icono .icono { width: 22px; height: 22px; }
.megamenu__item:hover .megamenu__icono,
.megamenu__item[aria-current] .megamenu__icono { background: var(--color); color: #fff; }

.megamenu__texto { display: flex; flex-direction: column; min-width: 0; }
.megamenu__nombre { font-size: 15px; font-weight: 600; line-height: 1.3; }
.megamenu__linea,
.megamenu__pie { display: none; }

@media (max-width: 339px) {
  .cabecera__acciones .boton { display: none; }
}

@media (min-width: 760px) {
  .cabecera__logo img { height: 36px; }
}

@media (min-width: 960px) {
  .cabecera__menu { display: none; }
  .cabecera__redes { display: flex; }

  .nav,
  .menu-abierto .nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
  }
  .nav__lista { display: flex; align-items: center; gap: 28px; }
  .nav__lista > li { border: 0; }

  .nav__enlace {
    position: relative;
    gap: 7px;
    padding: 6px 0;
    color: var(--texto);
    font-size: 14.5px;
    transition: color .2s;
  }
  .nav__enlace .icono { width: 18px; height: 18px; }
  .nav__enlace:hover,
  .nav__enlace[aria-current] { color: var(--tinta); }
  .nav__enlace[aria-current]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: var(--cian);
  }

  /* el menú se ubica respecto de la cabecera (sticky), a todo el ancho */
  .nav__servicios { position: static; flex-wrap: nowrap; gap: 2px; }
  .nav__abrir { width: 24px; height: 24px; }

  .megamenu {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    padding: 0;
    border-top: 1px solid var(--linea);
    background: #fff;
    box-shadow: 0 40px 60px -40px rgba(16, 24, 40, .35);
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    /* al salir queda un instante visible: perdona un mouse que se va un poco de más */
    transition: opacity .2s, translate .28s var(--curva), visibility 0s linear .28s;
  }
  /* puente invisible entre el enlace y el panel, para que el hover no se corte */
  .megamenu::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
  .nav__servicios.abierto .megamenu { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .megamenu .contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); }

  /* 4 columnas iguales; cada una, su categoría y sus 2 servicios */
  .megamenu__columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; padding: 28px 0 24px; }
  .megamenu__categoria { margin-bottom: 8px; padding: 0 10px 10px; border-bottom: 1px solid var(--linea); }
  .megamenu__lista { gap: 4px; }

  .megamenu__item { align-items: flex-start; gap: 12px; padding: 10px; }
  .megamenu__icono { width: 40px; height: 40px; border-radius: 11px; }
  .megamenu__icono .icono { width: 24px; height: 24px; }
  .megamenu__nombre { font-size: 14.5px; white-space: nowrap; }
  /* la descripción reserva siempre dos renglones: todas las filas miden lo mismo */
  .megamenu__linea { display: block; min-height: 2.9em; margin-top: 2px; color: var(--suave); font-size: 13px; line-height: 1.45; }

  /* franja al pie, a todo el ancho */
  .megamenu__pie { display: block; border-top: 1px solid var(--linea); background: #f6f7f9; }
  .megamenu__pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; }
  .megamenu__pregunta { color: var(--texto); font-size: 14px; }
  .megamenu__pregunta strong { margin-right: 4px; color: var(--tinta); }
  .megamenu__acciones { display: flex; flex: none; align-items: center; gap: 20px; }
  .megamenu__todos {
    color: var(--tinta);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--linea-fuerte);
    text-underline-offset: 4px;
  }
  .megamenu__todos:hover { text-decoration-color: currentColor; }
}

/* entre 960 y 1200px las 4 columnas no entran: 2 x 2. Ahí cada descripción
   entra en un renglón, así que no se reservan dos (dejaría un hueco abajo),
   y del pie queda solo la pregunta para que no se parta en dos líneas. */
@media (min-width: 960px) and (max-width: 1199px) {
  .megamenu__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; padding: 22px 0 18px; }
  .megamenu__item { align-items: center; padding: 8px 10px; }
  .megamenu__linea { min-height: 0; }
  .megamenu__pregunta-detalle { display: none; }
}

@media (min-width: 960px) and (hover: hover) {
  .nav__servicios:hover .megamenu { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
}

/* Hero ---------------------------------------------------------------- */

.hero {
  padding: 72px 0 152px;
  background: var(--gris-hero);
  text-align: center;
}

.hero__titulo {
  color: #2a2d34;
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.04em;
}
.hero__titulo > span { display: block; }

/* "digital" subrayado con los 8 colores de servicio, en tramos */
/* la barra va detrás de las letras: la "g" la cruza, como un subrayado a mano */
.hero__subrayado { position: relative; z-index: 0; display: inline-block; }
.hero__subrayado::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: .02em; right: .02em;
  bottom: .02em;
  height: .1em;
  border-radius: 99px;
  background: var(--barra);
  transform-origin: left center;
}

.hero__bajada {
  max-width: 42em;
  margin: 26px auto 0;
  color: #4a4f59;
  font-size: var(--t-lead);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 32px;
}
.hero__acciones .enlace-flecha { color: var(--tinta); }

@media (min-width: 760px) {
  .hero { padding: 104px 0 200px; }
}

/* Grilla de servicios, montada sobre el borde inferior del hero ------- */

.servicios { position: relative; z-index: 2; margin-top: -104px; padding-bottom: 96px; }

@media (min-width: 760px) {
  .servicios { margin-top: -136px; padding-bottom: 120px; }
}

.grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 359px) { .grilla { grid-template-columns: 1fr; } }
@media (min-width: 960px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.tarjeta-servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 16px 18px;
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 18px 40px -24px rgba(16, 24, 40, .35);
  transition: background-color .35s var(--curva), border-color .35s, transform .35s var(--curva), box-shadow .35s var(--curva);
}

.tarjeta-servicio__icono {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color) 11%, white);
  color: var(--color);
  transition: background-color .35s, color .35s;
}
.tarjeta-servicio__icono .icono { width: 28px; height: 28px; }

.tarjeta-servicio__titulo {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color .35s;
}

.tarjeta-servicio__texto {
  margin: 6px 0 18px;
  color: var(--suave);
  font-size: var(--t-min);
  line-height: 1.55;
  transition: color .35s;
}

.tarjeta-servicio .pastilla { margin-top: auto; }
/* toda la tarjeta es clickeable */
.tarjeta-servicio .pastilla::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.tarjeta-servicio .pastilla:focus-visible { outline: none; }
.tarjeta-servicio:has(.pastilla:focus-visible) { outline: 2px solid var(--color); outline-offset: 3px; }

/* al pasar el mouse, la tarjeta toma el color de su franja */
@media (hover: hover) {
  .tarjeta-servicio:hover {
    border-color: var(--color);
    background: var(--color);
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 28px 48px -24px color-mix(in srgb, var(--color) 70%, transparent);
  }
  .tarjeta-servicio:hover .tarjeta-servicio__icono { background: rgba(255, 255, 255, .16); color: #fff; }
  .tarjeta-servicio:hover .tarjeta-servicio__titulo,
  .tarjeta-servicio:hover .tarjeta-servicio__texto { color: #fff; }
  .tarjeta-servicio:hover .pastilla { border-color: rgba(255, 255, 255, .55); color: #fff; }
  .tarjeta-servicio:hover .pastilla .icono { transform: translateX(3px); }
}

@media (min-width: 600px) {
  .tarjeta-servicio { padding: 26px 24px 24px; }
  .tarjeta-servicio__icono { width: 56px; height: 56px; }
  .tarjeta-servicio__icono .icono { width: 32px; height: 32px; }
  .tarjeta-servicio__titulo { margin-top: 20px; font-size: var(--t-h3); }
  .tarjeta-servicio__texto { font-size: var(--t-chico); }
}

/* Franjas de servicio ------------------------------------------------- */

.banda {
  --texto-banda: #fff;
  --etiqueta: color-mix(in srgb, var(--fondo) 70%, #101828);
  position: relative;
  padding: 72px 0;
  overflow-x: clip;
  background: var(--fondo);
  color: var(--texto-banda);
}
.banda--tinta { --texto-banda: var(--tinta); --etiqueta: var(--tinta); }

/* número grande del servicio, de fondo */
.banda__numero {
  position: absolute;
  top: 24px;
  right: 4vw;
  color: rgba(255, 255, 255, .09);
  font-size: clamp(6rem, 3rem + 11vw, 13.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
  user-select: none;
}
.banda--invertida .banda__numero { right: auto; left: 4vw; }
.banda--tinta .banda__numero { color: rgba(16, 24, 40, .05); }
.banda > .contenedor { position: relative; }

.banda__grilla { display: grid; gap: 40px; align-items: center; }

/* en mobile, primero el texto y después la tarjeta */
.banda__texto { order: -1; }

@media (min-width: 900px) {
  .banda { padding: 120px 0; }
  .banda__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; }
  .banda__texto { order: 0; }
  .banda--invertida .banda__grilla { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .banda--invertida .banda__media { order: 2; }
  .banda__numero { top: 40px; }
}

.banda__etiqueta {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--etiqueta);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.banda__titulo {
  max-width: 20ch;
  margin-top: 16px;
  color: var(--texto-banda);
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -.022em;
}

.banda__parrafo { max-width: 34em; margin-top: 16px; font-size: var(--t-lead); line-height: 1.7; }

.destacados { display: grid; gap: 10px; max-width: 34em; margin-top: 24px; }
.destacados li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; line-height: 1.5; }
.destacados .icono {
  width: 22px; height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.banda--tinta .destacados .icono { background: color-mix(in srgb, var(--color) 12%, white); color: var(--color); }

.banda__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* botón blanco con el texto del color de la franja; en la franja blanca, tinta */
.boton--banda { height: 48px; border-radius: 999px; background: #fff; color: var(--color); font-weight: 600; }
.boton--banda:hover { border-color: #fff; background: transparent; color: #fff; }
.banda--tinta .boton--banda { background: var(--tinta); color: #fff; }
.banda--tinta .boton--banda:hover { border-color: var(--tinta); background: transparent; color: var(--tinta); }

/* Tarjeta blanca de cada franja */
.tarjeta {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 36px 72px -36px rgba(0, 0, 0, .55);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.tarjeta:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 44px 80px -34px rgba(0, 0, 0, .6); }
.banda--invertida .tarjeta:hover { transform: translateY(-6px) rotate(.4deg); }
.banda--lisa .tarjeta { border: 1px solid #eef0f3; }

.tarjeta__imagen {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #f2f3f5;
}
.tarjeta__imagen > img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta__pie { display: flex; align-items: center; gap: 14px; padding: 14px 8px 4px; }

.tarjeta__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color) 11%, white);
  color: var(--color);
}
.tarjeta__icono .icono { width: 26px; height: 26px; }

.tarjeta__nombre { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.tarjeta__enlace { color: var(--tinta); font-size: 1rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
/* toda la tarjeta lleva a la página del servicio */
.tarjeta__enlace::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta:has(.tarjeta__enlace:focus-visible) { outline: 3px solid #fff; outline-offset: 4px; }
.banda--tinta .tarjeta:has(.tarjeta__enlace:focus-visible) { outline-color: var(--azul); }

.tarjeta__plazo { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--suave); font-size: 12.5px; }
.tarjeta__plazo .icono { width: 13px; height: 13px; }

.tarjeta__flecha { color: var(--suave); transition: color .25s, transform .25s var(--curva); }
.tarjeta__flecha .icono { width: 20px; height: 20px; }
.tarjeta:hover .tarjeta__flecha { color: var(--color); transform: translate(2px, -2px); }

/* Maqueta de búsqueda en Google */
.mock-google {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid #eef0f3;
  background: #fff;
  font-size: 12px;
  line-height: 1.4;
}
.mock-google > .mock-google__logo { width: 104px; height: auto; }
.mock-google__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 9px 16px;
  border: 1px solid #dfe1e5;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, .16);
  color: var(--tinta);
  font-size: 13px;
}
.mock-google__barra .icono { width: 16px; height: 16px; color: var(--azul); }
.mock-google__busqueda {
  display: inline-block;
  width: 22ch; /* ancho fijo: el tipeo anima de 0 a este valor */
  max-width: calc(100% - 26px);
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
}
.mock-google__resultado { display: flex; flex-direction: column; width: 100%; max-width: 320px; text-align: left; }
.mock-google__etiqueta { color: var(--tinta); font-size: 11.5px; font-weight: 600; }
.mock-google__enlace { color: #1a0dab; font-size: 15px; font-weight: 500; line-height: 1.35; }
.mock-google__texto { color: #4d5156; }

/* Índice lateral de servicios (pantallas anchas) */
.indice {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 30;
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .3s, transform .3s var(--curva);
}
.indice.visible { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }

.indice ol {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .45);
}

.indice a { position: relative; display: grid; place-items: center; width: 24px; height: 24px; text-decoration: none; }

.indice__punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color);
  opacity: .4;
  transition: opacity .2s, transform .25s var(--curva);
}
.indice a:hover .indice__punto,
.indice a[aria-current] .indice__punto { opacity: 1; transform: scale(1.4); }

.indice__nombre {
  position: absolute;
  right: calc(100% + 10px);
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s, transform .2s var(--curva);
  pointer-events: none;
}
.indice a:hover .indice__nombre,
.indice a:focus-visible .indice__nombre { opacity: 1; transform: none; }

@media (min-width: 1240px) { .indice { display: block; } }
/* la etiqueta del servicio actual queda fija solo si hay margen para que no tape contenido */
@media (min-width: 1600px) {
  .indice a[aria-current] .indice__nombre { opacity: 1; transform: none; }
}

/* Contacto ------------------------------------------------------------ */

.contacto {
  padding: 88px 0;
  background: linear-gradient(115deg, #1272e8 0%, #6a62d8 25%, #be40bb 50%, #6a62d8 75%, #1272e8 100%);
  background-size: 300% 100%;
  color: #fff;
}

.contacto__grilla { display: grid; gap: 40px; align-items: center; }

@media (min-width: 960px) {
  .contacto { padding: 120px 0; }
  .contacto__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
}

.contacto__titulo { max-width: 16ch; color: #fff; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.022em; }
.contacto__bajada { max-width: 32em; margin-top: 16px; font-size: var(--t-lead); }

.contacto__canales { display: grid; gap: 16px; margin-top: 36px; }
.contacto__canales li { display: flex; align-items: center; gap: 14px; }
.contacto__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
}
.contacto__icono .icono { width: 22px; height: 22px; }
.contacto__rotulo { display: block; font-size: 12.5px; line-height: 1.4; }
.contacto__canales a { color: #fff; font-weight: 500; text-underline-offset: 4px; }

.formulario {
  padding: 24px 20px;
  border-radius: 20px;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 36px 72px -36px rgba(10, 10, 60, .6);
}
@media (min-width: 640px) { .formulario { padding: 36px; } }

.formulario__titulo { margin-bottom: 20px; font-size: var(--t-h3); letter-spacing: -.01em; }

.formulario__grilla { display: grid; gap: 16px 20px; }
@media (min-width: 640px) {
  .formulario__grilla { grid-template-columns: 1fr 1fr; }
  .campo--ancho { grid-column: 1 / -1; }
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { color: var(--tinta); font-size: var(--t-chico); font-weight: 500; }
.opcional { color: var(--suave); font-weight: 400; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #cfd3da;
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder,
.campo textarea::placeholder { color: #8b919b; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #a9aeb7; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(26, 115, 232, .18); }
.campo input:user-invalid { border-color: #b4232c; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo select {
  appearance: none;
  padding-right: 42px;
  background: #fff url("../iconos/caret-down.svg") no-repeat right 14px center / 16px;
  cursor: pointer;
}

.formulario .boton--ancho { height: 52px; margin-top: 24px; }
.formulario__estado { margin-top: 14px; color: var(--verde-enlace); font-size: var(--t-chico); font-weight: 500; text-align: center; }
.formulario__estado:empty { display: none; }

/* Pie ----------------------------------------------------------------- */

.pie { padding: 64px 0 28px; background: var(--fondo); color: var(--suave); font-size: var(--t-chico); }

.pie__grilla { display: grid; gap: 40px; }
@media (min-width: 760px) { .pie__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; } }

.pie__marca img { width: auto; height: 52px; }
.pie__marca p { max-width: 24em; margin-top: 18px; line-height: 1.6; }

.pie__titulo { margin-bottom: 16px; font-size: 1.0625rem; }
.pie__servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.pie a { text-decoration: none; transition: color .2s; }
.pie a:not(.boton):hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.pie__info ul { display: grid; gap: 10px; margin-bottom: 20px; }
.pie__info li { display: flex; align-items: center; gap: 10px; }
.pie__info li .icono { width: 18px; height: 18px; color: var(--verde-enlace); }

@media (min-width: 760px) {
  .pie__info { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .pie__info li { flex-direction: row-reverse; }
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  font-size: var(--t-min);
}

/* ==========================================================================
   Página de cada servicio. Todo toma --color del servicio (el de su franja).
   ========================================================================== */

/* Portada: texto a la izquierda, el celular con el video a la derecha */
.sv-hero {
  --fondo: var(--color);
  --etiqueta: color-mix(in srgb, var(--color) 70%, #101828);
  position: relative;
  padding: 28px 0 80px;
  overflow: clip;
  background: var(--color);
  color: #fff;
}

/* el número del servicio (01 a 08), como en las franjas de la home */
.sv-hero__numero {
  position: absolute;
  right: -1vw;
  bottom: -.2em;
  color: rgba(255, 255, 255, .07);
  font-size: clamp(11rem, 6rem + 22vw, 30rem);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.07em;
  pointer-events: none;
  user-select: none;
}

.sv-hero__grilla { position: relative; display: grid; gap: 56px; align-items: center; }

@media (min-width: 960px) {
  .sv-hero { padding: 36px 0 104px; }
  .sv-hero__grilla { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; }
}

.migas { margin-bottom: 28px; font-size: var(--t-min); }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.migas li { display: flex; gap: 8px; }
.migas li + li::before { content: "/"; opacity: .7; }
.migas a { color: #fff; text-underline-offset: 3px; }
.migas [aria-current] { font-weight: 500; }

.sv-hero__titulo {
  max-width: 15ch;
  margin-top: 16px;
  color: #fff;
  font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -.038em;
}

.sv-hero__bajada { max-width: 32em; margin-top: 20px; font-size: 1.125rem; line-height: 1.65; }
.sv-hero .destacados { margin-top: 24px; }
.sv-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.sv-hero .enlace-flecha { color: #fff; }

/* Escena: aros de fondo, el celular, el aviso y el plazo */
.escena {
  --escena-arriba: 16px;
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: var(--escena-arriba);
  isolation: isolate;
}

.escena__aro {
  position: absolute;
  z-index: -1;
  top: 46%; left: 50%;
  width: min(420px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 12%, var(--color));
  box-shadow:
    0 0 0 32px color-mix(in srgb, #fff 6%, var(--color)),
    0 0 0 64px color-mix(in srgb, #fff 3%, var(--color));
  translate: -50% -50%;
}

.celular {
  position: relative;
  width: min(280px, 66vw);
  margin: 0;
  padding: 9px;
  border-radius: 46px;
  background: #0d0e12;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 56px 100px -44px rgba(0, 0, 0, .75);
  rotate: -3deg;
}
.celular__pantalla { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 37px; background: #000; }
.celular__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.celular__isla {
  position: absolute;
  top: 19px; left: 50%;
  z-index: 2;
  width: 80px; height: 23px;
  border-radius: 999px;
  background: #0d0e12;
  translate: -50% 0;
}

/* Portada tipo reel mientras no haya video */
.reel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px 14px 16px;
  background:
    radial-gradient(90% 55% at 50% 42%, rgba(255, 255, 255, .22), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--color) 78%, #fff) 0%, var(--color) 48%, color-mix(in srgb, var(--color) 55%, #000) 100%);
  color: #fff;
}

.reel__tope { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.reel__avatar { width: 28px; height: 28px; padding: 3px; border-radius: 50%; background: #fff; }
.reel__seguir { padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 6px; font-size: 11px; font-weight: 600; }

.reel__centro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.reel__play {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.reel__play .icono { width: 26px; height: 26px; translate: 2px 0; }
.reel__portada {
  max-width: 9em;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.reel__pronto { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 11.5px; font-weight: 600; }

.reel__acciones { position: absolute; right: 12px; bottom: 86px; display: grid; gap: 16px; }
.reel__acciones .icono { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3)); }

.reel__pie { display: grid; gap: 6px; padding-right: 40px; }
.reel__texto { font-size: 12.5px; font-weight: 500; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.reel__audio { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
.reel__audio .icono { width: 13px; height: 13px; }
.reel__progreso { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.reel__progreso span { display: block; width: 35%; height: 100%; background: #fff; }

/* aviso tipo notificación, como si le llegara al celular */
/* aparece arriba de la pantalla, debajo de la isla, como una notificación de verdad */
.aviso {
  position: absolute;
  top: calc(var(--escena-arriba) + 40px);
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(300px, 86vw);
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  color: var(--tinta);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .55);
  translate: -50% 0;
}
.aviso__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--color);
  color: #fff;
}
.aviso__icono .icono { width: 22px; height: 22px; }
.aviso__cuerpo { min-width: 0; }
.aviso__titulo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.aviso__hora { color: var(--suave); font-size: 11.5px; font-weight: 400; }
.aviso__texto { display: block; color: var(--texto); font-size: 12.5px; line-height: 1.4; }

@media (min-width: 960px) {
  .escena { --escena-arriba: 0px; }
}



/* Rótulos y títulos de sección */
.sv-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color);
  font-size: var(--t-chico);
  font-weight: 600;
}
.sv-rotulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sv-rotulo--claro { color: #fff; }

.sv-titulo,
.sv-encabezado__titulo {
  max-width: 20ch;
  margin-top: 12px;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -.022em;
}

/* El problema y la propuesta */
.sv-problema { padding: 88px 0; }
@media (min-width: 900px) { .sv-problema { padding: 128px 0; } }

.sv-problema__grilla { display: grid; gap: 48px; }
@media (min-width: 960px) { .sv-problema__grilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; } }

.sv-problema__titulo {
  margin-top: 16px;
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}
/* la parte clave de la pregunta, en el color del servicio y subrayada como a mano */
.sv-problema__titulo em {
  color: var(--color);
  font-style: normal;
  background: linear-gradient(transparent 64%, color-mix(in srgb, var(--color) 16%, white) 64%);
}

.sv-problema__texto { max-width: 30em; margin-top: 24px; font-size: 1.1875rem; line-height: 1.6; }

.buena-noticia {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--color);
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.buena-noticia strong { display: block; margin-bottom: 4px; }

.pilares__titulo { margin-top: 36px; color: var(--tinta); font-size: var(--t-chico); font-weight: 600; }
.pilares { margin-top: 8px; }
.pilar { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.pilar:last-child { border-bottom: 0; }
.pilar__numero { padding-top: 2px; color: var(--color); font-size: var(--t-chico); font-weight: 600; font-variant-numeric: tabular-nums; }
.pilar__titulo { display: block; color: var(--tinta); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.pilar__texto { display: block; margin-top: 4px; font-size: .9375rem; line-height: 1.6; }

/* Beneficios: foto fija a la izquierda, beneficios en filas */
.sv-beneficios { padding: 88px 0; background: color-mix(in srgb, var(--color) 7%, white); }
@media (min-width: 900px) { .sv-beneficios { padding: 128px 0; } }

.sv-beneficios__grilla { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .sv-beneficios__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
  .sv-beneficios__lado { position: sticky; top: calc(var(--alto-cabecera) + 40px); }
}

.sv-beneficios__foto { margin-top: 36px; }
.sv-beneficios__foto .tarjeta { max-width: 420px; margin-inline: 0; rotate: -2deg; }

.beneficio-fila {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color) 18%, white);
}
.beneficio-fila:first-child { padding-top: 0; }

.beneficio-fila__icono {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #fff;
  color: var(--color);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--color) 70%, transparent);
}
.beneficio-fila__icono .icono { width: 30px; height: 30px; }

.beneficio-fila__titulo { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.012em; }
.beneficio-fila__texto { max-width: 36em; margin-top: 6px; line-height: 1.65; }

.beneficio-fila__puntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.beneficio-fila__puntos li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--color) 18%, white);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font-size: var(--t-min);
  line-height: 1.4;
}
.beneficio-fila__puntos .icono { width: 14px; height: 14px; color: var(--color); }

.sv-beneficios__cierre {
  margin-top: 28px;
  padding-left: 18px;
  border-left: 3px solid var(--color);
  color: var(--tinta);
  font-size: 1.0625rem;
  font-weight: 500;
}

/* Cómo trabajamos: franja oscura con el tono del servicio */
.sv-proceso {
  --profundo: color-mix(in srgb, var(--color) 36%, #0a0d16);
  --claro: color-mix(in srgb, var(--color) 50%, white);
  padding: 88px 0;
  background: var(--profundo);
  color: #cfd3db;
}
@media (min-width: 900px) { .sv-proceso { padding: 128px 0; } }

.sv-proceso .sv-titulo { color: #fff; }
.sv-proceso__cabecera { margin-bottom: 48px; }
@media (min-width: 960px) { .sv-proceso__cabecera { margin-bottom: 72px; } }

.pasos-sv { position: relative; display: grid; gap: 40px; padding-left: 36px; }

/* línea de tiempo: vertical en mobile, horizontal desde 960px */
.pasos-sv::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 6px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.paso-sv { position: relative; }
.paso-sv::before {
  content: "";
  position: absolute;
  top: 6px; left: -36px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--claro);
  box-shadow: 0 0 0 5px var(--profundo);
}

.paso-sv__numero {
  display: block;
  color: var(--claro);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.paso-sv__cuando {
  display: inline-block;
  margin-top: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.paso-sv__titulo { margin-top: 14px; color: #fff; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.012em; }
.paso-sv__texto { margin-top: 8px; font-size: .9375rem; line-height: 1.6; }
.paso-sv__puntos { display: grid; gap: 6px; margin-top: 14px; }
.paso-sv__puntos li { position: relative; padding-left: 16px; color: #eef0f3; font-size: var(--t-min); line-height: 1.45; }
.paso-sv__puntos li::before {
  content: "";
  position: absolute;
  top: .55em; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--claro);
}

@media (min-width: 960px) {
  .pasos-sv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 32px 0 0; }
  .pasos-sv::before { top: 6px; right: 0; bottom: auto; left: 0; width: auto; height: 2px; }
  .paso-sv::before { top: -33px; left: 0; }
}

.sv-proceso__pie { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 960px) { .sv-proceso__pie { grid-template-columns: 1fr 1fr; } }

.sv-proceso__nota,
.ejecutivo {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 16px;
  font-size: .9375rem;
  line-height: 1.6;
}
.sv-proceso__nota { border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); }
.sv-proceso__nota .icono { width: 22px; height: 22px; margin-top: 2px; color: var(--claro); }
.sv-proceso__nota strong { color: #fff; }

.ejecutivo { flex-wrap: wrap; align-items: center; background: var(--color); color: #fff; }
.ejecutivo > span:first-of-type { flex: 1 1 16em; }
.ejecutivo__icono { width: 34px; height: 34px; }
.ejecutivo__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ejecutivo__chip .icono { width: 15px; height: 15px; }

/* Planes: sección blanca */
.sv-seccion { padding: 88px 0; }
@media (min-width: 900px) { .sv-seccion { padding: 128px 0; } }
.sv-encabezado { max-width: 760px; margin-bottom: 40px; }
@media (min-width: 900px) { .sv-encabezado { margin-bottom: 56px; } }
.sv-encabezado__bajada { max-width: 38em; margin-top: 12px; font-size: var(--t-lead); }

/* el contacto de cada servicio va en su color */
.pagina-servicio .contacto { background: linear-gradient(120deg, var(--color) 0%, color-mix(in srgb, var(--color) 52%, #101828) 100%); }
.animar .pagina-servicio .contacto { animation: none; }
.pagina-servicio .formulario .boton--azul { background: var(--color); }
.pagina-servicio .formulario .boton--azul:hover { background: color-mix(in srgb, var(--color) 80%, #000); box-shadow: none; }
.pagina-servicio .campo :is(input, select, textarea):focus { border-color: var(--color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color) 20%, transparent); }

/* Planes */
.plan__nombre { display: block; color: var(--tinta); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }

.plan__insignia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--color);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.plan__insignia .icono { width: 13px; height: 13px; }

.plan__si { display: inline-block; width: 20px; height: 20px; color: var(--color); vertical-align: middle; }
.plan__no { display: inline-block; width: 18px; height: 18px; color: #c4c8cf; vertical-align: middle; }

.boton--plan {
  height: 44px;
  padding: 0 20px;
  border-color: var(--color);
  border-radius: 999px;
  background: transparent;
  color: var(--color);
  font-size: 14px;
  font-weight: 600;
}
.boton--plan:hover { background: var(--color); color: #fff; }
.boton--plan-destacado { background: var(--color); color: #fff; }
.boton--plan-destacado:hover { border-color: color-mix(in srgb, var(--color) 80%, #000); background: color-mix(in srgb, var(--color) 80%, #000); }

/* tabla comparativa (desde 900px) */
.planes-tabla { display: none; overflow: hidden; border: 1px solid var(--linea); border-radius: 20px; }
.planes-tabla table { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.planes-tabla thead th { padding: 28px 16px 20px; text-align: center; vertical-align: bottom; }
.planes-tabla thead .plan__insignia { margin-bottom: 10px; }
.planes-tabla tbody th {
  width: 34%;
  padding: 14px 24px;
  border-top: 1px solid var(--linea);
  color: var(--texto);
  font-weight: 400;
  text-align: left;
}
.planes-tabla tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--linea);
  color: var(--tinta);
  font-weight: 500;
  text-align: center;
}
.planes-tabla tbody tr:hover th,
.planes-tabla tbody tr:hover td { background-image: linear-gradient(rgba(16, 24, 40, .025), rgba(16, 24, 40, .025)); }
.planes-tabla tfoot td { padding: 20px 16px 28px; border-top: 1px solid var(--linea); text-align: center; }
.planes-tabla .plan--destacado { background-color: color-mix(in srgb, var(--color) 6%, white); }

/* tarjetas por plan (celular y tablet chica) */
.planes-tarjetas { display: grid; gap: 16px; }

.plan { position: relative; padding: 24px 20px; border: 1px solid var(--linea); border-radius: 18px; background: #fff; }
.plan.plan--destacado { border: 1.5px solid var(--color); box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--color) 70%, transparent); }
.plan .plan__insignia { margin-bottom: 10px; }

.plan__filas { margin: 16px 0 20px; }
.plan__filas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--linea);
  font-size: var(--t-chico);
}
.plan__rotulo { color: var(--texto); line-height: 1.45; }
.plan__valor { flex: none; max-width: 48%; color: var(--tinta); font-weight: 500; text-align: right; }
.plan__fila--no .plan__rotulo { color: var(--suave); }

@media (min-width: 900px) {
  .planes-tabla { display: block; }
  .planes-tarjetas { display: none; }
}

/* plan único (Chat con IA) */
.plan-unico {
  padding: 28px 22px;
  border: 1.5px solid var(--color);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 64px -40px color-mix(in srgb, var(--color) 70%, transparent);
}
@media (min-width: 760px) { .plan-unico { padding: 40px; } }

.plan-unico__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.plan-unico__cabecera .plan__nombre { font-size: 1.375rem; }

.plan-unico__lista { display: grid; gap: 12px 40px; }
@media (min-width: 760px) { .plan-unico__lista { grid-template-columns: 1fr 1fr; } }
.plan-unico__lista li { display: flex; gap: 10px; color: var(--tinta); line-height: 1.5; }
.plan-unico__lista .plan__si { flex: none; margin-top: 2px; }

.plan-unico__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
}
.plan-unico__nota { flex: 1 1 22em; max-width: 44em; font-size: .9375rem; }
.plan-unico__nota strong { color: var(--tinta); }

/* opciones por duración o cantidad (video, imágenes) */
.opciones { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .opciones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.opcion { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px 24px; border: 1px solid var(--linea); border-radius: 18px; background: #fff; }
.opcion.plan--destacado { border: 1.5px solid var(--color); background: color-mix(in srgb, var(--color) 5%, white); }
.opcion .plan__insignia { margin-bottom: 14px; }
.opcion__detalle { flex: 1; margin: 8px 0 24px; font-size: .9375rem; }
/* en fila, las opciones sin etiqueta reservan su lugar para que los títulos queden alineados */
@media (min-width: 760px) {
  .opciones:has(.plan__insignia) .opcion:not(:has(.plan__insignia))::before { content: ""; height: 25px; margin-bottom: 14px; }
}

/* lo que incluyen todos los planes */
.incluye { margin-top: 32px; padding: 24px; border-radius: 18px; background: #f5f6f8; }
@media (min-width: 760px) { .incluye { padding: 28px 32px; } }
.incluye__titulo { margin-bottom: 16px; font-size: 1rem; }
.incluye__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.incluye__lista li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font-size: var(--t-min);
  line-height: 1.4;
}
.incluye__lista .icono { width: 15px; height: 15px; color: var(--color); }

.aclaraciones { display: grid; gap: 6px; margin-top: 20px; color: var(--suave); font-size: var(--t-min); }
.aclaraciones li { position: relative; padding-left: 14px; }
.aclaraciones li::before { content: "*"; position: absolute; left: 0; }

/* Otros servicios */
.otros { padding: 64px 0 72px; border-top: 1px solid var(--linea); }
.otros__titulo { margin-bottom: 24px; font-size: 1.25rem; }
.otros__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.otros a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.otros a:hover { border-color: var(--color); background: color-mix(in srgb, var(--color) 6%, white); }
.otros__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color) 11%, white);
  color: var(--color);
}
.otros__icono .icono { width: 24px; height: 24px; }
.otros__nombre { flex: 1; }
.otros__flecha { width: 16px; height: 16px; color: var(--suave); transition: color .2s, transform .2s var(--curva); }
.otros a:hover .otros__flecha { color: var(--color); transform: translateX(3px); }

/* entrada escalonada de la portada del servicio */
.animar .sv-hero__texto > [data-entrada]:nth-child(2) { animation-delay: .06s; }
.animar .sv-hero__texto > [data-entrada]:nth-child(3) { animation-delay: .12s; }
.animar .sv-hero__texto > [data-entrada]:nth-child(4) { animation-delay: .2s; }
.animar .sv-hero__texto > [data-entrada]:nth-child(5) { animation-delay: .28s; }
.animar .sv-hero__texto > [data-entrada]:nth-child(6) { animation-delay: .36s; }
.animar .escena[data-entrada] { animation-delay: .25s; }
/* el aviso llega al celular un rato después, como una notificación */
.animar .aviso { animation: avisar .6s 1.4s var(--curva) both; }
.animar .reel__progreso span { animation: progreso 9s linear infinite; }
@keyframes avisar { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes progreso { from { width: 0; } to { width: 100%; } }

/* la línea de las etapas se va llenando con el scroll (donde el navegador lo soporta) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
    .pasos-sv::after {
      content: "";
      position: absolute;
      top: 6px; left: 0; right: 0;
      height: 2px;
      border-radius: 2px;
      background: var(--claro);
      transform-origin: left center;
      animation: llenar linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
  }
}
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   Acabado de las páginas de servicio: textura, profundidad y detalles
   -------------------------------------------------------------------------- */

.pagina-servicio {
  /* grano fino (ruido SVG) para que los colores planos tengan cuerpo */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* los colores del isotipo, en anillo */
  --marca-anillo: conic-gradient(from 210deg, #00c4c7, #00a651, #f5c230, #ff9348, #f34153, #00c4c7);
}

/* Portada: luz detrás del celular, sombra hacia el texto y grano encima */
.sv-hero {
  background:
    radial-gradient(60% 80% at 86% 22%, color-mix(in srgb, #fff 16%, var(--color)) 0%, transparent 62%),
    linear-gradient(200deg, var(--color) 35%, color-mix(in srgb, var(--color) 80%, #000) 100%);
}
.sv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  background-size: 180px;
  opacity: .22;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.sv-hero__grilla { z-index: 1; }
.sv-hero .boton--banda { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5); }

/* órbita punteada con un satélite que gira despacio */
.escena__orbita {
  position: absolute;
  z-index: -1;
  top: 46%; left: 50%;
  width: min(560px, 118vw);
  aspect-ratio: 1;
  border: 1px dashed rgba(255, 255, 255, .24);
  border-radius: 50%;
  translate: -50% -50%;
}
.escena__orbita span {
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .16);
}

/* sombra de apoyo debajo del celular */
.escena__piso {
  position: absolute;
  z-index: -1;
  bottom: -26px; left: 50%;
  width: 230px; height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .32);
  filter: blur(16px);
  translate: -50% 0;
}

/* celular: marco con bisel, botones laterales y reflejo de pantalla */
.celular {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .18),
    inset 0 0 0 5px #1c1e24,
    0 64px 110px -44px rgba(0, 0, 0, .75);
}
.celular::before,
.celular::after {
  content: "";
  position: absolute;
  width: 3px;
  background: #1a1c21;
}
.celular::before { top: 108px; left: -3px; height: 36px; border-radius: 3px 0 0 3px; box-shadow: 0 48px 0 #1a1c21; }
.celular::after { top: 150px; right: -3px; height: 72px; border-radius: 0 3px 3px 0; }

.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
}

/* el ícono del servicio, grande y tenue, como marca de agua del reel */
.reel__marca {
  position: absolute;
  top: 47%; left: 50%;
  width: 230px; height: 230px;
  color: rgba(255, 255, 255, .1);
  translate: -50% -50%;
  pointer-events: none;
}
.reel__marca .icono { width: 100%; height: 100%; }

/* avatar con el anillo de colores de la marca, como una historia */
.reel__aro { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 2px; border-radius: 50%; background: var(--marca-anillo); }
.reel__aro .reel__avatar { width: 100%; height: 100%; border: 2px solid var(--color); }

/* stickers pegados al celular */
.sticker {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55);
}
.sticker--icono {
  bottom: 70px;
  left: calc(50% - 196px);
  justify-content: center;
  width: 70px; height: 70px;
  border-radius: 22px;
  color: var(--color);
  rotate: -10deg;
}
.sticker--icono .icono { width: 38px; height: 38px; }
.sticker--plazo {
  right: calc(50% - 208px);
  bottom: -12px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  rotate: 4deg;
}
.sticker--plazo .icono { width: 16px; height: 16px; color: var(--color); }

@media (max-width: 599px) {
  .sticker--icono { left: calc(50% - 168px); bottom: 90px; width: 56px; height: 56px; border-radius: 18px; }
  .sticker--icono .icono { width: 30px; height: 30px; }
  .sticker--plazo { right: auto; left: 50%; bottom: -20px; translate: -50% 0; rotate: -2deg; }
  .sv-hero { padding-bottom: 104px; }
}

/* Cinta con las ideas clave, entre la portada y el problema */
.cinta {
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .08);
  background: color-mix(in srgb, var(--color) 70%, #0b0f1a);
  color: #fff;
}
.cinta__pista { display: flex; align-items: center; gap: 28px; width: max-content; padding: 18px 28px 18px 0; }
.cinta__item { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.cinta__chispa { width: 18px; height: 18px; color: color-mix(in srgb, var(--color) 40%, #fff); }
.cinta:hover .cinta__pista { animation-play-state: paused; }

/* El problema: un "?" gigante de fondo, inclinado */
.sv-problema { position: relative; overflow: clip; }
.sv-problema__pregunta { position: relative; isolation: isolate; }
.sv-problema__pregunta::before {
  content: "?";
  position: absolute;
  z-index: -1;
  top: 50%; right: 2%;
  color: color-mix(in srgb, var(--color) 10%, white);
  font-size: clamp(14rem, 8rem + 14vw, 24rem);
  font-weight: 600;
  line-height: 1;
  rotate: 10deg;
  translate: 0 -50%;
  pointer-events: none;
}

.buena-noticia {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: 24px 24px 24px 6px;
  background: linear-gradient(150deg, var(--color), color-mix(in srgb, var(--color) 76%, #000));
  box-shadow: 0 28px 56px -32px color-mix(in srgb, var(--color) 85%, transparent);
}
.buena-noticia__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
}
.buena-noticia__icono .icono { width: 28px; height: 28px; }
.buena-noticia strong { margin-bottom: 2px; }

/* pilares de la solución: tarjetas suaves con número en círculo */
.pilares { display: grid; gap: 10px; margin-top: 12px; }
.pilar {
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--color) 14%, white);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color) 4%, white);
  transition: border-color .25s, translate .3s var(--curva), background-color .25s;
}
.pilar:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color) 14%, white); }
.pilar:hover { border-color: color-mix(in srgb, var(--color) 40%, white); background: #fff; translate: 4px 0; }
.pilar__numero {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--color);
  color: #fff;
  font-size: var(--t-min);
}

/* Beneficios: la foto apoyada sobre un bloque de color, con puntitos y sticker */
.sv-beneficios { position: relative; overflow: clip; }
.sv-beneficios__foto { position: relative; max-width: 420px; isolation: isolate; }
.sv-beneficios__foto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 24px -18px -18px 24px;
  border-radius: 26px;
  background: var(--color);
  rotate: 3deg;
}
.sv-beneficios__puntitos {
  position: absolute;
  z-index: -1;
  top: -30px; left: -30px;
  width: 128px; height: 128px;
  background-image: radial-gradient(color-mix(in srgb, var(--color) 45%, white) 2px, transparent 2.5px);
  background-size: 16px 16px;
}
.sticker--foto {
  top: -22px; right: -14px;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 20px;
  color: var(--color);
  rotate: 10deg;
}
.sticker--foto .icono { width: 34px; height: 34px; }

.beneficio-fila__icono { position: relative; transition: background-color .3s, color .3s, transform .35s var(--curva); }
.beneficio-fila__numero {
  position: absolute;
  top: -7px; right: -7px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 2px solid color-mix(in srgb, var(--color) 7%, white);
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.beneficio-fila__titulo { transition: color .25s; }
.beneficio-fila:hover .beneficio-fila__icono { background: var(--color); color: #fff; transform: rotate(-6deg) scale(1.05); }
.beneficio-fila:hover .beneficio-fila__titulo { color: var(--color); }

/* Proceso: luz en la esquina, trama de puntos y etapas en tarjetas de vidrio */
.sv-proceso {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(55% 70% at 100% 0%, color-mix(in srgb, var(--color) 50%, transparent), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--profundo);
}

.paso-sv {
  padding: 26px 22px 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: rgba(255, 255, 255, .04);
  transition: background-color .3s, border-color .3s, translate .35s var(--curva);
}
.paso-sv:hover { border-color: color-mix(in srgb, var(--claro) 45%, transparent); background: rgba(255, 255, 255, .07); translate: 0 -4px; }
.paso-sv::before { top: 34px; }
.paso-sv__numero {
  background: linear-gradient(180deg, #fff 0%, var(--claro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 960px) {
  .paso-sv::before { top: -32px; left: 22px; }
}

/* Planes: íconos que crecen y la columna recomendada en relieve */
.plan__icono {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color) 10%, white);
  color: var(--color);
}
.plan__icono .icono { width: 28px; height: 28px; }
.plan--destacado .plan__icono { background: var(--color); color: #fff; }
.planes-tabla thead .plan__icono { margin-inline: auto; }
.plan-unico__cabecera .plan__icono { margin: 0; }
.plan-unico__cabecera { justify-content: flex-start; }
.plan-unico__cabecera .plan__insignia { margin-left: auto; }

.planes-tabla { padding: 24px; }
.planes-tabla table { border-collapse: separate; border-spacing: 0; }
.planes-tabla thead th.plan--destacado { border: 2px solid var(--color); border-bottom: 0; border-radius: 20px 20px 0 0; }
.planes-tabla tbody td.plan--destacado { border-right: 2px solid var(--color); border-left: 2px solid var(--color); }
.planes-tabla tfoot td.plan--destacado { border: 2px solid var(--color); border-top: 1px solid var(--linea); border-radius: 0 0 20px 20px; }
.planes-tabla tbody tr:first-child th,
.planes-tabla tbody tr:first-child td:not(.plan--destacado) { border-top-color: var(--linea); }

.opcion { transition: border-color .25s, box-shadow .3s, translate .35s var(--curva); }
.opcion:hover { border-color: color-mix(in srgb, var(--color) 45%, white); box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--color) 70%, transparent); translate: 0 -4px; }

/* Contacto: el ícono del servicio de marca de agua y grano */
.pagina-servicio .contacto { position: relative; overflow: hidden; isolation: isolate; }
.pagina-servicio .contacto::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px; bottom: -120px;
  width: 540px; height: 540px;
  background: rgba(255, 255, 255, .08);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
  rotate: -12deg;
}
.pagina-servicio .contacto::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--grano);
  background-size: 180px;
  opacity: .2;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Otros servicios: al pasar el mouse, cada uno se pinta con su color */
.otros a:hover { border-color: var(--color); background: var(--color); color: #fff; }
.otros a:hover .otros__icono { background: rgba(255, 255, 255, .18); color: #fff; }
.otros a:hover .otros__flecha { color: #fff; }

/* Movimiento propio de estos detalles */
.animar .escena__orbita { animation: girar 48s linear infinite; }
.animar .sticker--icono { animation: flotar-sticker 6s ease-in-out infinite; }
.animar .sticker--plazo { animation: flotar-sticker 7s ease-in-out -3s infinite; }
.animar .sticker--foto { animation: flotar-sticker 6.5s ease-in-out -2s infinite; }
.animar .cinta__pista { animation: correr-cinta 46s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
@keyframes flotar-sticker { 50% { translate: 0 -8px; } }
@keyframes correr-cinta { to { translate: -50% 0; } }
@media (max-width: 599px) {
  .animar .sticker--plazo { animation: none; }
}

/* WhatsApp flotante (solo si hay número cargado) */
.wa-flotante {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4);
}
.wa-flotante .icono { width: 28px; height: 28px; }

/* Animaciones --------------------------------------------------------- */

@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } }
@keyframes trazar { from { transform: scaleX(0); } }
@keyframes tipeo { from { width: 0; } }
@keyframes cursor { 50% { border-color: var(--tinta); } }
@keyframes degradado { to { background-position: 100% 0; } }

/* Hero: el texto entra escalonado y la cinta de colores se traza debajo de "digital" */
.animar [data-entrada] { animation: entrar .9s var(--curva) both; }
.animar .hero__titulo { animation-delay: .1s; }
.animar .hero__bajada { animation-delay: .3s; }
.animar .hero__acciones { animation-delay: .45s; }
.animar .hero__subrayado::after { animation: trazar 1.1s .8s cubic-bezier(.65, 0, .35, 1) both; }

/* el degradé del contacto se mueve muy despacio */
.animar .contacto { animation: degradado 18s ease-in-out infinite alternate; }

/* Al hacer scroll: [data-animar] entra cuando aparece en pantalla (main.js le pone .visible) */
.animar [data-animar] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
  transition-delay: var(--retraso, 0ms);
}
@media (min-width: 900px) {
  .animar [data-animar="izquierda"] { transform: translateX(-48px); }
  .animar [data-animar="derecha"] { transform: translateX(48px); --retraso: 120ms; }
}
.animar [data-animar].visible { opacity: 1; transform: none; }

/* una vez que entraron, las tarjetas vuelven a sus transiciones de hover */
.animar .tarjeta-servicio[data-animar].visible {
  transition: opacity .8s var(--curva), background-color .35s var(--curva), border-color .35s, transform .35s var(--curva), box-shadow .35s var(--curva);
  transition-delay: var(--retraso, 0ms), 0ms, 0ms, 0ms, 0ms;
}
@media (hover: hover) {
  .animar .tarjeta-servicio[data-animar].visible:hover { transform: translateY(-4px); }
}

/* la maqueta de Google tipea la búsqueda y después aparece el anuncio */
.animar .banda__media:not(.visible) .mock-google__busqueda { width: 0; }
.animar .banda__media:not(.visible) .mock-google__resultado { opacity: 0; }
.animar .banda__media.visible .mock-google__busqueda { animation: tipeo 1.5s steps(22) .6s both, cursor .7s step-end .6s 4; }
.animar .banda__media.visible .mock-google__resultado { animation: entrar .6s var(--curva) 2.2s both; }

/* Paralaje ligado al scroll, solo donde el navegador lo soporta */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tarjeta__imagen > img {
      scale: 1.12;
      animation: paralaje-foto linear both;
      animation-timeline: view();
    }
    .banda__numero {
      animation: paralaje-numero linear both;
      animation-timeline: view();
    }
  }
}
@keyframes paralaje-foto { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes paralaje-numero { from { translate: 0 48px; } to { translate: 0 -48px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}