/*
 * Portada (fase 2, spec §6): Todo SatControl (heroe con el diagrama), precio con la calculadora,
 * cuanto te ahorras y casos. El movimiento vive en movimiento.css; esta hoja no oculta nada.
 */

/* ---------- Heroe: Todo SatControl ---------- */
.heroe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  column-gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
  min-height: calc(100svh - var(--alto-cabecera));
  padding-block: 48px 56px;
}

.heroe-discurso {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.heroe h1 {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  margin: 0;
}

.pasos {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  display: grid;
  gap: 18px;
  counter-reset: paso;
}

.paso {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 2px;
  counter-increment: paso;
}

.paso::before {
  content: counter(paso);
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 600;
  color: var(--rojo-texto);
  background: var(--insignia-anade-fondo);
}

.paso:nth-child(2)::before {
  color: var(--oro-texto);
  background: var(--insignia-pronto-fondo);
}

.paso:nth-child(3)::before {
  color: var(--insignia-aparte-tinta);
  background: var(--insignia-aparte-fondo);
}

.paso-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 7px;
}

.paso p:not(.paso-titulo) {
  color: var(--tinta-2);
  font-size: .95rem;
}

/* ---------- Diagrama ---------- */
.orbita {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.orbita-circulo {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
}

.orbita-anillos {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo) 0%, rgba(251, 227, 229, .45) 32%, transparent 62%);
}

.orbita-anillos::before,
.orbita-anillos::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px dotted var(--linea-fuerte);
}

/* Radio de las pastillas: 40 % del lado (el mismo RADIO_ORBITA de scripts/modulos/componer.js) */
.orbita-anillos::before {
  inset: 10%;
}

.orbita-anillos::after {
  inset: 21%;
}

.orbita-radio {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  height: 2px;
  margin-top: -1px;
  overflow: hidden;
  transform-origin: 0 50%;
  transform: rotate(var(--angulo));
  background: var(--linea);
}

.orbita-viaje {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

.orbita-radio--activo .orbita-viaje {
  transform: none;
}

.orbita-viaje::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 26%;
  border-radius: 2px;
  background: var(--rojo);
}

.orbita-centro {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--blanco);
  box-shadow: 0 10px 30px rgba(208, 28, 37, .14), 0 0 0 10px rgba(255, 255, 255, .6);
}

.orbita-centro img {
  width: 70%;
  height: auto;
}

.orbita-areas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orbita-punto {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.orbita-area {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--linea);
  border-radius: 99px;
  background: var(--blanco);
  box-shadow: var(--sombra-suave);
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}

.orbita-area .icono-modulo {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: var(--insignia-anade-fondo);
}

.orbita-area .icono-modulo svg {
  width: 17px;
  height: 17px;
}

.orbita-area:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
}

.orbita-area--activa {
  transform: scale(1.06);
  border-color: rgba(208, 28, 37, .3);
  box-shadow: 0 10px 26px rgba(208, 28, 37, .18);
}

.orbita-area--activa .icono-modulo {
  background: var(--rojo);
}

.orbita-area--activa .icono-modulo svg {
  stroke: var(--sobre-rojo);
}

/* El subrayado solo existe en la pastilla activa: nada que ocultar en las demas */
.orbita-area--activa::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -9px;
  height: 3px;
  border-radius: 3px;
  transform-origin: left;
  background: var(--rojo);
}

.orbita-ficha {
  width: min(100%, 520px);
  min-height: 200px;
  padding: 18px 22px 14px;
}

.orbita-ficha-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.orbita-ficha-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.orbita-pausa {
  padding: 4px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 99px;
  background: none;
  font-size: .8rem;
  color: var(--tinta-2);
  cursor: pointer;
}

.orbita-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orbita-modulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
}

.orbita-lista li:first-child .orbita-modulo {
  border-top: 0;
}

.orbita-modulo-nombre {
  display: block;
  font-weight: 600;
}

.orbita-modulo-descripcion {
  display: block;
  font-size: .85rem;
  color: var(--tinta-2);
}

.orbita-flecha {
  font-weight: 700;
  color: var(--rojo-texto);
}

.orbita-todos {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--rojo-texto);
  text-decoration: none;
}

/* ---------- Precio ---------- */
.precio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 56px;
  align-items: start;
}

.precio-texto {
  display: grid;
  gap: 16px;
  align-content: start;
  padding-top: 24px;
}

.precio-texto h2 {
  margin: 0;
}

.precio-texto .heroe-ctas {
  margin-top: 4px;
}

.precio-sello {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  font-size: .88rem;
  color: var(--tinta-2);
}

.precio-sello img {
  height: 64px;
  width: auto;
}

/* Foto a sangre por la derecha, detras de la calculadora (`right` se mide sobre la seccion) */
.precio-foto {
  position: absolute;
  right: calc(50% - 50vw);
  top: 36px;
  z-index: -1;
  width: min(40vw, 560px);
}

.precio-datos {
  position: relative;
  padding-top: 90px;
}

/* ---------- Calculadora compacta, en tarjeta ---------- */
/* La foto de la capsula pasa por DETRAS de esta tarjeta y asomaba pegada a su borde, sin nada que
   las separase. El anillo abre ese margen sin encoger la foto ni renunciar al sangrado del dossier:
   va del color de SU seccion (--fondo-seccion, no --fondo: #precio es de las pares y va en blanco),
   asi que donde no hay foto no se ve, y donde la foto pasa por detras deja 16 px limpios. */
.calculadora-en-heroe {
  margin: 0;
  padding: 24px 26px;
  background: var(--blanco);
  border-top: 5px solid var(--rojo);
  border-radius: 16px;
  box-shadow: 0 0 0 16px var(--fondo-seccion), var(--sombra);
}

.calculadora-en-heroe > h3 {
  font-size: 1.06rem;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}

.calculadora-en-heroe .calculadora-interactiva {
  margin-top: 0;
  grid-template-columns: 1fr;
}

/* El relleno HORIZONTAL no se toca: la caja de la calculadora tiene borde propio, y a cero el
   nombre del modulo y su importe salen pegados a ese borde ("Plan Business" contra el filo izquierdo
   y "3,00 EUR" contra el derecho). Aqui solo se aprieta el vertical, que es lo que hace falta para
   que la version compacta quepa; 20 px en vez de los 28 de la calculadora grande, en proporcion a
   una tarjeta mas estrecha. */
.calculadora-en-heroe .calculadora-columna-izquierda,
.calculadora-en-heroe .calculadora-columna-derecha {
  padding: 18px 20px;
}

.calculadora-en-heroe .calculadora-modulos {
  margin-top: 12px;
}

.calculadora-en-heroe .calculadora-modulos .calculadora-fila {
  padding: 9px 0;
}

.calculadora-en-heroe .calculadora-fila-nucleo {
  padding-top: 0;
  padding-bottom: 11px;
}

.calculadora-en-heroe .calculadora-empleados {
  margin-top: 16px;
}

.calculadora-en-heroe .calculadora-columna-derecha {
  display: grid;
  gap: 14px;
}

.calculadora-en-heroe .calculadora-resultado p:first-child,
.calculadora-en-heroe .calculadora-cta,
.calculadora-en-heroe .calculadora-columna-derecha .micro:last-child {
  margin-top: 0;
}

.calculadora-en-heroe .calculadora-tablas {
  grid-template-columns: 1fr;
}

/* ---------- Ahorro ---------- */
.ahorro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 64px;
  align-items: center;
}

.ahorro-texto {
  display: grid;
  gap: 16px;
}

.ahorro-texto h2 {
  margin: 0;
}

.ahorro-cifra {
  display: grid;
  padding: 32px 34px;
}

.ahorro-numero {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--rojo-texto);
}

.ahorro-etiqueta {
  margin: 6px 0 24px;
  color: var(--tinta-2);
}

.ahorro-barras {
  display: grid;
  gap: 14px;
}

.ahorro-barra {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 90px;
  gap: 12px;
  align-items: center;
  font-size: .88rem;
}

.ahorro-barra-pista {
  height: 12px;
}

.ahorro-barra-relleno {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: var(--linea-fuerte);
}

.ahorro-barra--nuestra .ahorro-barra-relleno {
  background: var(--rojo);
}

.ahorro-barra-total {
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
}

.ahorro-barra--nuestra .ahorro-barra-total {
  color: var(--rojo-texto);
}

/* ---------- Casos ---------- */
.casos-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px 32px;
  margin-bottom: 34px;
}

.casos-cabecera h2 {
  margin: 12px 0 0;
  max-width: 760px;
}

/* ---------- Movil ---------- */
@media (max-width: 1000px) {
  .precio-foto {
    display: none;
  }

  .precio-datos {
    padding-top: 0;
  }
}

@media (max-width: 860px) {
  .heroe {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    row-gap: 40px;
  }

  .orbita-circulo {
    width: 100%;
    aspect-ratio: auto;
  }

  .orbita-anillos,
  .orbita-radio,
  .orbita-centro {
    display: none;
  }

  .orbita-areas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }

  .orbita-punto {
    position: static;
    transform: none;
  }

  /* Media anchura: rejilla y no flex-wrap, que separaba icono y nombre en dos filas. El icono tiene
     su columna, el nombre parte en la otra y la insignia ("Pronto") baja debajo del nombre. */
  .orbita-area {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    width: 100%;
    white-space: normal;
    border-radius: 22px;
  }

  .orbita-area .insignia {
    grid-column: 2;
    justify-self: start;
  }

  .orbita-area--activa {
    transform: none;
  }

  .precio,
  .ahorro {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ahorro-barra {
    grid-template-columns: minmax(0, 1fr) 80px;
  }

  .ahorro-barra-pista {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Bajo 420 px "Documentos" (una palabra, no se puede partir) no cabe en su columna de texto: se
   achica la pastilla entera (icono, huecos y relleno), no solo la letra, medido en el navegador a
   360 y 390 px (decision del titular, 2026-09-17). */
@media (max-width: 420px) {
  .orbita-areas {
    gap: 8px;
  }

  .orbita-area {
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 6px;
    padding: 6px 10px 6px 5px;
    font-size: .85rem;
  }

  .orbita-area .icono-modulo {
    width: 26px;
    height: 26px;
  }

  .orbita-area .icono-modulo svg {
    width: 14px;
    height: 14px;
  }
}

/*
 * Tramos del plan en la columna de texto del bloque de precio (2026-09-18). La columna se quedaba
 * a media altura frente a la calculadora, que mide 1175 px: quedaba un palmo de blanco. Se llena
 * con lo unico que de verdad le interesa a quien esta moviendo el deslizador de empleados -- hasta
 * donde le baja el precio si crece --, y sale del catalogo, no escrito a mano.
 */
.precio-tramos {
  margin-top: 4px;
  padding: 18px 20px;
  background: var(--fondo-seccion);
  border: 1px solid var(--linea);
  border-radius: 14px;
}

.precio-tramos-titulo {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}

/* Los tramos van SIN importe (ver el comentario de index.njk): el numerito de cada escalon es el
   orden, no un precio. La escalera se lee de arriba abajo -- cuanta mas plantilla, mas barato --
   y quien quiera la cifra la tiene en la calculadora de al lado. */
.precio-tramos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tramo;
  display: grid;
  gap: 2px;
}

.precio-tramos-lista li {
  counter-increment: tramo;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--linea);
  color: var(--tinta);
  font-size: .95rem;
}

.precio-tramos-lista li:first-child {
  border-top: 0;
}

.precio-tramos-lista li::before {
  content: counter(tramo);
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--halo);
  color: var(--rojo-texto);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  display: grid;
  place-items: center;
}

.precio-tramos .micro {
  margin: 12px 0 0;
}

/* El parrafo que remata la columna, bajo los tramos (2026-09-18). */
.precio-siguiente {
  margin: 0;
  color: var(--tinta-2);
  font-size: .95rem;
  line-height: 1.55;
}

.precio-siguiente strong {
  color: var(--tinta);
}

/*
 * Franja de clientes, entre el heroe y el precio (2026-09-18). No es una seccion (ver el comentario
 * de index.njk: lo seria a costa de invertir la alternancia de fondos de toda la portada), asi que
 * se pinta su propio fondo y sale a sangre por los lados con el mismo truco que la marca de agua.
 */
/*
 * ============ La franja de clientes, en banda roja sesgada (2026-09-18) ============
 * Era una banda blanca con un filete arriba y otro abajo. El titular trajo como referencia como lo
 * resuelve otra web del sector -- fondo a todo ancho, bordes en diagonal, titular grande en
 * blanco -- y pidio eso mismo. Se monto primero en oscuro y, al verlo, pidio el rojo corporativo:
 * "negro no me gusta, el rojo corporativo para que quede bien".
 *
 * De ahi que el fondo sea EXACTAMENTE el del cierre -- mismo degradado, mismo angulo y la misma
 * marca de agua roja --, y no un rojo nuevo. Son las dos unicas superficies de marca del sitio y
 * tienen que ser la misma; ademas, sus contrastes ya estaban medidos y viven en piel.test.js.
 *
 * El sesgo lo hace un `clip-path` sobre el ::before, no un SVG ni una imagen: los dos bordes suben
 * de izquierda a derecha (un romboide), y los dos triangulos que se recortan dejan ver la seccion
 * de al lado, que es de donde sale el efecto de cuña.
 *
 * EL RELLENO VERTICAL TIENE QUE SER MAYOR QUE EL SESGO. Si no, el titular se mete en la esquina
 * recortada y desaparece. Por eso `--franja-sesgo` lleva tope (64 px) y el relleno es de 92: en una
 * pantalla de 2560 px el sesgo se iria a 77 px sin ese tope y morderia la primera linea.
 */
.franja-clientes {
  position: relative;
  /* Mas relleno abajo que arriba: ahi vive el boton de pausa, anclado a la esquina, y necesita sitio
     entre los nombres y el borde en diagonal. Ver su regla en movimiento.css. */
  padding: 92px 0 118px;
  text-align: center;
}

.franja-clientes::before {
  content: "";
  position: absolute;
  /* 1 px de mas por arriba y por abajo: sin el, el antialiasing de la diagonal deja una raya clara
     de medio pixel entre la banda y la seccion de al lado. */
  inset: -1px calc(50% - 50vw);
  z-index: -1;
  /*
   * Rojo LISO, a peticion del titular. Llevo primero la marca de agua `marca/roja.svg` sobre un
   * degradado, como el cierre; con el monograma cruzando la banda por detras de los nombres quedaba
   * cargado, asi que fuera las dos cosas -- la textura y el degradado. Es un color plano y punto.
   *
   * Sigue siendo `--rojo`, el mismo de la marca, asi que los contrastes no cambian: blanco 5,42:1 y
   * dorado 4,54:1, los dos ya en piel.test.js.
   */
  background: var(--rojo);
  clip-path: polygon(
    0 var(--franja-sesgo),
    100% 0,
    100% calc(100% - var(--franja-sesgo)),
    0 100%
  );
}

/*
 * El titulo de la franja, en grande (2026-09-18). Nacio como un renglon gris de .92rem y el titular
 * lo vio perdido: "mas grande, y que sobresalte". Sube a tamaño de titular de seccion, en la
 * tipografia de display, y remata en rojo -- el mismo recurso que el <h1> del heroe, que tambien
 * dice la mitad de la frase en <em> rojo. No es un <h2> a proposito: la franja no es una seccion y
 * meterla en el esquema de encabezados dejaria un nivel colgando entre el precio y los casos.
 */
.franja-clientes-titulo {
  margin: 0 auto;
  /*
   * 30ch y no 24: medido en el navegador, a 24ch la caja se queda en 526 px y "Empresas que ya
   * llevan su dia a dia" pide 611, asi que el titular partia por la mitad de la frase ("su dia /
   * a dia"). A 30ch la caja mide 657 y el corte cae donde tiene que caer: la frase entera arriba y
   * el remate dorado solo en la segunda linea. Va en `ch` y no en pixeles para que la proporcion
   * aguante cuando el `clamp` de abajo encoja la letra en pantallas estrechas.
   */
  max-width: 30ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--sobre-rojo);
}

/*
 * El remate va en DORADO y no en rojo, que es lo que hace en el resto del sitio: sobre rojo, el
 * rojo no se ve. Es el mismo dorado que ya remata el cierre (`--oro-sobre-rojo`, 4,54:1 sobre el
 * extremo claro del degradado y 6,75:1 sobre el profundo).
 */
.franja-clientes-titulo em {
  font-style: normal;
  color: var(--oro-sobre-rojo);
}

/*
 * Todo lo demas, en blanco. Es lo mismo que hace el cierre, donde el <h2> y el <p> heredan los dos
 * `--sobre-rojo`: sobre una superficie de marca no se busca la jerarquia con un segundo color
 * -- cualquier blanco velado baja del umbral --, sino con el tamaño y el grosor.
 */
.franja-clientes-sub {
  margin: 14px auto 30px;
  max-width: 62ch;
  color: var(--sobre-rojo);
  font-size: 1rem;
  line-height: 1.5;
}

.franja-clientes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 44px;
}

/*
 * Los nombres tampoco llevan `opacity` como cuando la banda era blanca (iban en `--tinta` al .62).
 * Una opacidad no se puede comprobar: `test/piel.test.js` recalcula el contraste de cada par desde
 * tokens.css, y un color a medio velar no es un par que se pueda mirar.
 */
.franja-clientes-lista li {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--sobre-rojo);
}

/*
 * La cinta es un envoltorio y nada mas mientras el desfile no corra: ni recorta ni desplaza, asi
 * que sin JavaScript (o con movimiento reducido) la lista de dentro se sigue centrando y
 * envolviendo como antes, con los siete nombres a la vista. El recorte, el bucle y el boton de
 * pausa los pone movimiento.css, colgados de .movimiento-js.
 */
.franja-clientes-cinta {
  position: relative;
}

@media (max-width: 600px) {
  /* El relleno baja: los 92 px de escritorio estan calculados contra un sesgo de hasta 64, y en un
     movil el sesgo se queda en 12 px (3vw de 390). Mantenerlos alli solo era aire. */
  .franja-clientes {
    padding: 58px 0 62px;
  }

  .franja-clientes-lista {
    gap: 12px 26px;
  }

  .franja-clientes-lista li {
    font-size: 1rem;
  }
}