/* ============================================================================
 * iShop · css/05-landing.css — portada pública
 * ========================================================================== */

@layer secciones {

  /* ======================================================================
   * HERO
   * ==================================================================== */
  .hero {
    padding-block: var(--space-7) var(--space-8);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: var(--space-5);
  }

  .hero__titulo {
    font-size: clamp(2.5rem, 1.6rem + 4.6vw, 5.5rem);
    max-inline-size: 18ch;
    font-weight: 800;
  }

  .hero__titulo em {
    font-style: normal;
    /* Degradado sobre el texto: el recurso más característico de esta
       dirección, y el único sitio donde se usa. */
    background: linear-gradient(100deg,
      oklch(0.80 0.17 320), oklch(0.84 0.14 210) 60%, oklch(0.82 0.16 32));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__entradilla { max-inline-size: 46ch; font-size: var(--step-1); }

  .hero__acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

  .hero__escenario {
    position: relative;
    margin-block-start: var(--space-6);
    display: grid;
    place-items: center;
    inline-size: 100%;
  }

  .hero__dispositivo { inline-size: min(72vw, 17rem); }

  /* Tarjetas de vidrio flotando a los lados. */
  .hero__flotante {
    display: none;
    position: absolute;
    z-index: 3;
    padding: var(--space-4);
    inline-size: 13rem;
    text-align: start;
    border-radius: var(--radius-2);
  }

  @media (min-width: 68rem) {
    .hero__flotante { display: block; }
    .hero__flotante--izq { inset-inline-start: 8%;  inset-block-start: 18%; }
    .hero__flotante--der { inset-inline-end: 8%;   inset-block-start: 52%; }
  }

  .hero__cuenta {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  /* ======================================================================
   * PASOS — tarjetas de vidrio apiladas
   * ==================================================================== */
  .pasos { display: grid; gap: var(--space-3); list-style: none; padding: 0; }

  .paso {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-2) var(--space-4);
    align-items: start;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-2);
  }

  .paso__n {
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: var(--step--1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .paso__titulo { font-weight: 700; font-size: var(--step-0); line-height: 1.3; }
  .paso__texto { grid-column: 2; font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; }

  /* ======================================================================
   * PROBLEMA
   * ==================================================================== */
  .problema__lista { display: grid; gap: var(--space-3); list-style: none; padding: 0; }

  .problema__item { padding: var(--space-5); border-radius: var(--radius-2); }
  .problema__item h3 { margin-block-end: var(--space-2); font-size: var(--step-1); }
  .problema__item p { font-size: var(--step--1); color: var(--ink-3); }

  /* ======================================================================
   * PRINCIPIO
   * ==================================================================== */
  .principio {
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-3);
    text-align: center;
    display: grid;
    gap: var(--space-4);
    justify-items: center;
  }

  .principio__formula {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .principio__formula i { font-style: normal; color: var(--accent); }
  .principio__texto { max-inline-size: 52ch; font-size: var(--step-0); }

  /* ======================================================================
   * DUELO
   * ==================================================================== */
  .duelo { display: grid; gap: var(--space-3); }

  @media (min-width: 54rem) {
    .duelo { grid-template-columns: 1fr 1fr; }
  }

  .duelo__cara {
    padding: var(--space-5);
    border-radius: var(--radius-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .duelo__cara h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-1); }

  .duelo__lista {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    font-size: var(--step--1);
    color: var(--ink-2);
    margin-block-start: auto;
  }

  .duelo__lista li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--space-2);
    line-height: 1.45;
  }

  .duelo__lista li::before {
    content: attr(data-marca);
    color: var(--ink-3);
    font-size: 0.85em;
    font-weight: 700;
  }

  .veredicto {
    margin-block-start: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-2);
  }

  .veredicto__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-block-end: var(--space-4);
  }

  .veredicto__eje {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: var(--step--1);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--line);
  }

  .veredicto__eje span:first-child { margin-inline-start: -0.25em; }
  .veredicto__eje span:last-child  { margin-inline-end: -0.5em; }

  /* ======================================================================
   * KPIs
   * ==================================================================== */
  .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-3);
  }

  /* ======================================================================
   * EXCLUSIONES
   * ==================================================================== */
  .exclusiones { display: grid; gap: var(--space-2); list-style: none; padding: 0; }

  .exclusion {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-2);
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--line);
  }

  @media (min-width: 54rem) {
    .exclusion { grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--space-5); align-items: baseline; }
  }

  .exclusion__que {
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--ink-2);
    line-height: 1.3;
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--danger) 70%, transparent);
    text-decoration-thickness: 2px;
  }

  .exclusion__porque { font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; }

  /* ======================================================================
   * PRECIO
   * ==================================================================== */
  .precio {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-3);
  }

  .precio__cifra {
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .precio__nota { max-inline-size: 44ch; font-size: var(--step-0); }
}