/* ==========================================================================
   Hero
   La idea: en vez de una ilustracion de stock, se ve el producto trabajando.
   Un pedido entra de una tienda, una regla le asigna transportista y sale la
   etiqueta. Es literalmente lo que vende Enviamo, contado en 6 segundos y
   sin una sola palabra de marketing.
   ========================================================================== */

.portada {
  position: relative;
  padding-top: clamp(7rem, 5rem + 8vw, 10rem);
  padding-bottom: clamp(4rem, 3rem + 5vw, 7rem);
  overflow: clip;
}

/* Fondo: un halo violeta muy abierto. No es un degradado decorativo de
   cabecera, es luz que cae sobre el panel del producto. */
.portada::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(66, 60, 212, .16), transparent 70%),
    radial-gradient(45% 40% at 85% 8%, rgba(1, 236, 167, .13), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.portada__reja {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .portada__reja { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

/* --- Columna de texto --- */

.portada__titular { margin-bottom: 1.5rem; }

/* La segunda linea en violeta: no es un adorno, separa la promesa
   («Todos tus pedidos») del beneficio («en un panel»). */
.portada__titular span {
  display: block;
  background: linear-gradient(100deg, var(--violeta) 0%, #6f4ae8 48%, var(--violeta-hondo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada__pie {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

.portada__garantia {
  /* En flex, cada garantia es una caja que no se parte. Antes era una
     cadena suelta y en movil cortaba donde le tocaba: «Se / conecta en
     minutos», con un « · » colgando al final de la linea. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .55rem;
  margin-top: 1.4rem;
  font-size: .9rem;
  color: var(--tinta-suave);
}
/* El separador va DETRAS de cada garantia menos la ultima, y dentro de su
   misma caja. Puesto delante (span + span::before) el punto se quedaba
   colgando al principio de la segunda linea al envolver. */
.portada__garantia span:not(:last-child)::after {
  content: '·';
  margin-left: .55rem;
  color: var(--linea);
}
.portada__garantia strong { color: var(--tinta-media); font-weight: 600; }

/* --- El hero en movil ---
   A una sola columna el bloque queda centrado. Alineado a la izquierda, la
   linea de garantia se descolgaba: los botones ocupan casi todo el ancho y
   parecen centrados, asi que el texto corto de debajo se leia desplazado.

   El corte es 640px y no el 1000px donde la reja pasa a una columna: entre
   medias (tablet) sigue habiendo ancho de sobra y centrar lineas largas ahi
   queda flojo. */
@media (max-width: 640px) {
  .portada__reja > .aparece-al-cargar { text-align: center; }
  .portada__pie,
  .portada__garantia { justify-content: center; }
}

/* --- Panel del producto --- */

.escena {
  position: relative;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  /* Un grado escaso de perspectiva: lo justo para que se lea como una
     pantalla y no como un dibujo plano. Mas que esto marea. */
  transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.5deg);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.escena:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }

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

.escena__barra {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, #fff, var(--papel));
}

.escena__punto { width: 10px; height: 10px; border-radius: 50%; background: #e0dff0; }
.escena__ruta {
  margin-left: .6rem;
  font-size: .78rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.escena__cuerpo { padding: 1.1rem; display: grid; gap: .7rem; }

/* Cada paso del recorrido del pedido */
.paso {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .85rem .95rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--papel-alto);
  /* Arranca SIN OCUPAR SITIO; el JS las va sacando en cadena. El panel
     empieza vacio y cada fila aparece cuando le toca: asi el final no se
     ve venir y no parece una interfaz deshabilitada. */
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  transition:
    opacity .42s ease,
    transform .52s cubic-bezier(.2, .9, .25, 1),
    border-color .5s,
    box-shadow .5s;
}

/* El hueco se abre a la vez que entra la fila. `grid-template-rows` de 0fr a
   1fr anima la altura sin tener que conocerla de antemano, y empuja
   suavemente a las filas de abajo. */
.escena__cuerpo {
  display: grid;
  gap: 0;
}
.escena__cuerpo > .paso {
  /* Cada fila vive en su propia rejilla de una sola linea, que crece */
  overflow: hidden;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  transition:
    opacity .42s ease,
    transform .52s cubic-bezier(.2, .9, .25, 1),
    max-height .5s cubic-bezier(.2, .9, .25, 1),
    padding .5s cubic-bezier(.2, .9, .25, 1),
    margin .5s cubic-bezier(.2, .9, .25, 1),
    border-color .5s,
    box-shadow .5s;
}
.escena__cuerpo > .paso.activo {
  max-height: 120px;
  padding-top: .85rem;
  padding-bottom: .85rem;
  margin-bottom: .7rem;
}

.paso.activo {
  opacity: 1;
  transform: none;
  border-color: #cfccf3;
  box-shadow: 0 8px 24px -14px rgba(66, 60, 212, .5);
}

.paso__icono {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--niebla);
  font-size: 1.05rem;
}
.paso.activo .paso__icono { background: rgba(66, 60, 212, .1); }

.paso__titulo { font-size: .92rem; font-weight: 620; letter-spacing: -.015em; }
.paso__detalle { font-size: .78rem; color: var(--tinta-suave); margin-top: .1rem; }

.paso__estado {
  font-size: .72rem;
  font-weight: 640;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--niebla);
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: background-color .4s, color .4s;
}

/* El verde SOLO aqui: cuando el paso termina bien. Esa es toda la razon de
   que el verde exista en esta pagina. */
.paso.hecho .paso__estado {
  background: rgba(1, 236, 167, .16);
  color: #04795a;
}

.paso.curso .paso__estado { background: rgba(66, 60, 212, .12); color: var(--violeta-hondo); }

/* Etiqueta final que se imprime */
.etiqueta {
  margin-top: .3rem;
  border: 1px dashed #c9c7e4;
  border-radius: 14px;
  padding: .9rem 1rem;
  background: repeating-linear-gradient(-45deg, #fcfcff 0 10px, #f7f7fd 10px 20px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .55s, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.etiqueta.visible { opacity: 1; transform: none; }

.etiqueta__ref { font-size: .72rem; color: var(--tinta-suave); }
.etiqueta__codigo {
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Codigo de barras dibujado con un degradado repetido: pesa 0 KB y es nitido
   en cualquier pantalla. */
.etiqueta__barras {
  width: 108px; height: 42px;
  background: repeating-linear-gradient(90deg,
    var(--tinta) 0 2px, transparent 2px 4px,
    var(--tinta) 4px 5px, transparent 5px 9px,
    var(--tinta) 9px 12px, transparent 12px 14px);
  border-radius: 3px;
}

/* Contadores bajo el panel */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
}

.cifra__dato {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cifra__pie { font-size: .82rem; color: var(--tinta-suave); margin-top: .35rem; }