/* =====================================================================
   PANTALLA · Web pública · INICIO → NUESTRO CATÁLOGO y
   CÓMO EMPEZAR
   Qué hace:    el catálogo: el texto con «Ver el catálogo» y tres celulares
                en abanico con CAPTURAS de la demo (no la demo: sobre,
                portada y lugares), que se abren al bajar y se cierran al
                subir (al ritmo del desplazamiento); y los 4 pasos para
                empezar, con el mismo camino que los 4 tiempos. Solo tokens
                del sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css, componentes/telefono, web-inicio-tiempos.css
   Requisitos:  R-WEB-01, 14
   ===================================================================== */

.web-inicio__catalogo,
.web-inicio__empezar {
  padding-block: var(--espacio-7) var(--espacio-8);
  text-align: center;
}

.web-inicio__seccion-bajada {
  margin: var(--espacio-2) 0 var(--espacio-5);
  color: var(--color-texto-suave);
  font-size: var(--tamano-m);
}

.web-inicio__catalogo {
  display: grid;
  gap: var(--espacio-7);
  align-items: center;
}

.web-inicio__catalogo-boton {
  margin: 0;
}

/* El título va arriba y centrado, sobre el texto y los celulares */
.web-inicio__catalogo-titulo {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}

/* Tres celulares encimados: el del centro adelante y los otros dos se abren en abanico */
.web-inicio__celulares {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: var(--espacio-5);
}

.web-inicio__celular {
  grid-area: 1 / 1;
  width: min(13rem, 42vw);
}

.web-inicio__celular--centro {
  z-index: 1;
}

.web-inicio__celular .telefono__pantalla {
  object-fit: cover;
  object-position: top;
}

/* Al ritmo del desplazamiento (inicio.js pone --progreso de 0 a 1 en los celulares): los de los
   costados salen de detrás del central, girando un poco. Solo con --animar; sin JS, ya abiertos. */
.web-inicio__celular--izquierda {
  translate: -52% 4%;
  rotate: -8deg;
}

.web-inicio__celular--derecha {
  translate: 52% 4%;
  rotate: 8deg;
}

.web-inicio__celulares--animar .web-inicio__celular--izquierda {
  translate: calc(var(--abre) * -52%) calc(var(--abre) * 4%);
  rotate: calc(var(--abre) * -8deg);
}

.web-inicio__celulares--animar .web-inicio__celular--derecha {
  translate: calc(var(--abre) * 52%) calc(var(--abre) * 4%);
  rotate: calc(var(--abre) * 8deg);
}

.web-inicio__celulares--animar {
  --abre: clamp(0, calc((var(--progreso, 0) - 0.2) / 0.8), 1);
}

@media (min-width: 48rem) {
  .web-inicio__catalogo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    row-gap: var(--espacio-5);
    text-align: left;
  }

  .web-inicio__celular {
    width: 13rem;
  }
}

/* ---------- Cómo empezar: el mismo camino que los 4 tiempos (web-inicio-tiempos.css) ---------- */
.web-inicio__pasos {
  max-width: 64rem;
  margin: var(--espacio-6) auto 0;
}