/* ==========================================================================
   Enviamo v2 — sistema de secciones
   ==========================================================================

   El problema de la version anterior: veintiséis hojas de CSS donde cada
   retoque anadia un fichero que pisaba al anterior, y doce secciones con el
   mismo peso visual. Al bajar, todas parecian igual de importantes, que es
   otra forma de decir que ninguna lo era.

   Aqui hay UNA decision: cada seccion es `.s` y declara su rango con una
   clase. El rango gobierna a la vez el fondo y el aire, que es lo que de
   verdad crea jerarquia.

     .s--clave    lo que hay que ver si solo miras tres cosas
     .s--apoyo    lo que sostiene el argumento
     .s--dato     listas, logos, precios: informacion que se consulta

   ========================================================================== */

/* --------------------------------------------------------------------------
   El contenedor comun
   -------------------------------------------------------------------------- */

.s {
  position: relative;
  isolation: isolate;
}

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

/* --------------------------------------------------------------------------
   Los tres rangos
   El aire es la mitad del mensaje: una seccion clave respira el doble que
   una de dato, y eso se nota antes de leer una palabra.
   -------------------------------------------------------------------------- */

.s--clave { padding-block: clamp(4.5rem, 3.5rem + 5vw, 8rem); }
.s--apoyo { padding-block: clamp(3.5rem, 2.8rem + 3.5vw, 6rem); }
.s--dato  { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

/* --------------------------------------------------------------------------
   Los fondos
   Alternan para marcar el ritmo al hacer scroll. El color no decora: dice
   «esto importa». Por eso solo lo llevan las claves.
   -------------------------------------------------------------------------- */

/* Lavanda: el color de la casa, el mismo del hero */
.s--lavanda {
  background:
    radial-gradient(55% 50% at 92% 8%, rgba(150, 110, 255, .16), transparent 68%),
    radial-gradient(50% 45% at 4% 96%, rgba(66, 60, 212, .11), transparent 66%),
    linear-gradient(160deg, #f1eeff 0%, #faf9ff 52%, #f3f0fd 100%);
}

/* Verde: solo donde algo sale bien. Es la seccion del cliente final. */
.s--verde {
  background:
    radial-gradient(58% 52% at 88% 10%, rgba(1, 236, 167, .18), transparent 68%),
    radial-gradient(48% 46% at 5% 94%, rgba(66, 60, 212, .08), transparent 66%),
    linear-gradient(160deg, #eefbf6 0%, #fafdfe 52%, #f4f2fd 100%);
}

/* Tinta: para el cierre. Un solo bloque oscuro en toda la pagina, que es lo
   que hace que se mire. */
.s--tinta {
  background: linear-gradient(150deg, #16123f 0%, #241d6e 48%, var(--violeta-hondo) 100%);
  color: #fff;
}
.s--tinta .s__titulo { color: #fff; }
.s--tinta .s__entradilla { color: rgba(255, 255, 255, .72); }
.s--tinta .s__rotulo { background: rgba(255, 255, 255, .12); color: #fff; }

/* Blanco puro: separa dos bloques de color sin meter un tercero */
.s--papel { background: var(--papel-alto); }

/* --------------------------------------------------------------------------
   La cabecera de seccion
   Tres piezas: rotulo, titular y entradilla. Siempre en ese orden y siempre
   con las mismas medidas, para que la pagina tenga una sola voz.
   -------------------------------------------------------------------------- */

.s__cabecera {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.s__cabecera--centro {
  margin-inline: auto;
  text-align: center;
}

.s__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .9rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(50, 45, 161, .08);
  color: var(--violeta-hondo);
  font-size: .78rem;
  font-weight: 700;
}
.s__rotulo::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* En las de cliente final, el punto verde */
.s--verde .s__rotulo { background: rgba(4, 168, 120, .12); color: #04795a; }

.s__titulo {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--tinta);
}

/* El tamano del titular tambien marca rango */
.s--clave .s__titulo { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.2rem); }
.s--apoyo .s__titulo { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem); }
.s--dato  .s__titulo { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }

.s__entradilla {
  margin: 1rem 0 0;
  max-width: 52ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  color: var(--tinta-suave);
}
.s__cabecera--centro .s__entradilla { margin-inline: auto; }

/* El acento del titular: UNA idea por titular, nunca dos */
.s__ac {
  background: linear-gradient(96deg, var(--violeta-hondo) 0%, #6d55e8 55%, #17b39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s--tinta .s__ac {
  background: linear-gradient(96deg, #fff 0%, #cfc8ff 45%, var(--verde) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Entrada al hacer scroll
   Un solo gesto: subir y aparecer. Sin escalas ni rotaciones, que es lo que
   hace que una pagina parezca una plantilla.
   -------------------------------------------------------------------------- */

/* `.entra`, no `.llega`: esa clase la usan las hojas heredadas para una
   animacion ligada al scroll con `animation-timeline: view()`, y las dos a
   la vez dejaban los bloques encogidos de forma permanente cuando el
   recorrido de scroll no llegaba a completarse. */
.entra {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .25, 1);
}
.entra.dentro {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .entra { opacity: 1; transform: none; transition: none; }
}