/* ==========================================================================
   Portada, version con presencia
   La anterior era correcta y olvidable: texto a la izquierda, panel a la
   derecha, fondo blanco. El mismo esqueleto que cualquier SaaS.
   Esta apuesta por lo contrario: fondo oscuro profundo, tipografia enorme y
   el producto flotando sobre una malla de luz. Se juega todo en la primera
   pantalla, que es donde se decide si alguien sigue leyendo.
   ========================================================================== */

.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: clamp(6rem, 5rem + 6vw, 9rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  /* La diagonal pasa por el centro casi en blanco: es donde va el texto. */
  background:
    /* El ultimo tramo vertical funde con el color del body: sin esto, la
       diagonal acababa en malva contra el blanco de la seccion siguiente y
       se veia la costura. */
    linear-gradient(180deg, transparent 72%, var(--papel) 100%),
    linear-gradient(155deg,
      #ece7ff 0%,
      #f7f5ff 38%,
      #fdfcff 62%,
      #efe9f9 100%);
  color: var(--tinta);
  overflow: clip;
  isolation: isolate;
}

/* --- Capa 1: dos manchas de luz muy suaves a los lados. No se mueven:
   en claro, una aurora en movimiento se lee como un fallo de render --- */

.portada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(55% 50% at 95% 5%, rgba(150, 110, 255, .26), transparent 70%),
    radial-gradient(50% 45% at 2% 98%, rgba(66, 60, 212, .18), transparent 68%),
    /* Un apunte de verde en el centro, tan leve que no se ve como color:
       solo evita que la diagonal sea puro violeta de punta a punta. */
    radial-gradient(40% 35% at 50% 50%, rgba(1, 236, 167, .05), transparent 70%);
}

/* --- Capa 2: arcos concentricos al 5%, como un papel tramado. Sustituyen
   a la malla en perspectiva, que dibujaba un suelo de videojuego --- */

.portada::after {
  content: '';
  position: absolute;
  right: -25%;
  top: 50%;
  width: 90rem;
  height: 90rem;
  transform: translateY(-50%);
  z-index: -2;
  border-radius: 50%;
  background: repeating-radial-gradient(closest-side,
    rgba(120, 100, 230, .05) 0 1px, transparent 1px 70px);
}

/* --- Contenido --- */

.portada__reja {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1040px) {
  .portada__reja { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
}

/* Titular: mucho mas grande y apretado. Es el elemento con el que se juega
   todo, asi que ocupa lo que tiene que ocupar. */
.portada__titular {
  font-size: clamp(3rem, 1.2rem + 7.4vw, 6.4rem);
  /* .93 apretaba tanto que la «p» de pedidos tocaba la «U» de Un: las letras
     con rasgo descendente chocaban con las mayusculas de la linea siguiente.
     1.02 deja el aire justo sin que el titular pierda fuerza. */
  line-height: 1.02;
  letter-spacing: -.05em;
  margin-bottom: 1.6rem;
}

.portada__titular span {
  display: block;
  /* Sobre claro el degradado va hacia el violeta de marca, no hacia el
     blanco. El verde entra solo al final, como apunte. */
  background: linear-gradient(96deg, var(--violeta-hondo) 0%, #6d55e8 55%, #17b39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada .entradilla {
  color: var(--tinta-suave);
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  max-width: 54ch;
}

.portada__garantia { color: var(--tinta-suave); }
.portada__garantia strong { color: var(--tinta); }

/* Botones sobre fondo claro */
.portada .boton--calmo {
  background: #fff;
  color: var(--tinta);
  border-color: rgba(20, 19, 43, .16);
  box-shadow: 0 1px 2px rgba(20, 19, 43, .06);
}
.portada .boton--calmo:hover {
  background: #fff;
  border-color: rgba(20, 19, 43, .32);
}

/* --- El panel del producto, flotando --- */

.escena {
  background: #fff;
  /* Sobre claro el panel necesita un limite: el blanco sobre casi-blanco se
     deshace sin borde. Y la sombra va en violeta, no en negro, que sobre
     fondo claro ensucia. */
  border: 1px solid #ece9f8;
  box-shadow:
    0 1px 2px rgba(50, 45, 161, .06),
    0 30px 70px -28px rgba(50, 45, 161, .38);
  transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateZ(0);
  animation: levitar 9s ease-in-out infinite alternate;
}

@keyframes levitar {
  from { transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) translateY(0); }
  to   { transform: perspective(1600px) rotateY(-5deg) rotateX(2deg) translateY(-14px); }
}

.escena:hover {
  animation-play-state: paused;
  transform: perspective(1600px) rotateY(0) rotateX(0) translateY(-6px);
}

@media (max-width: 1039px) {
  .escena { transform: none; animation: none; }
}

/* --- Cifras sobre oscuro --- */

.cifras {
  border-top-color: rgba(255, 255, 255, .14);
  position: relative;
  z-index: 1;
}
.cifra__dato {
  color: var(--tinta);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
}
.cifra__pie { color: var(--tinta-suave); }

/* --- Cabecera ---
   Con la portada clara la cabecera es la misma arriba y abajo: no hay que
   invertir el logo ni aclarar los enlaces al llegar al hero. */

/* --- Transicion al resto de la pagina ---
   La curva que cosia el corte de oscuro a claro ya no hace falta: la
   portada y el resto de la pagina comparten fondo. */

.portada__cierre { display: none; }

/* Y el contenido necesita hueco para no quedar pegado a la curva */
.portada .cifras { margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }

@media (prefers-reduced-motion: reduce) {
  .portada::before, .portada::after, .escena { animation: none; }
}

/* --------------------------------------------------------------------------
   El panel es una isla clara dentro de la portada oscura
   `.portada { color: #fff }` se heredaba hacia dentro y dejaba el texto del
   panel en blanco sobre blanco: los titulos de cada fila desaparecian.
   -------------------------------------------------------------------------- */

.escena, .escena * { color: var(--tinta); }
.escena__ruta { color: var(--tinta-suave); }
.paso__detalle { color: var(--tinta-suave); }
.paso__estado { color: var(--tinta-suave); }
.paso.hecho .paso__estado { color: #04795a; }
.paso.curso .paso__estado { color: var(--violeta-hondo); }
.etiqueta__ref { color: var(--tinta-suave); }