/* ZOESYSTEM MLM · secciones.css (M06)
   Esqueleto de las 15 secciones (fondos y ritmo vertical de pantallas.md 2.2) y la columna de texto del inicio (S01),
   cuyo presupuesto vertical se fija aquí (CA-01.2). M07 en adelante completa cada sección en esta misma capa. */

@layer secciones {

  .seccion { position: relative; padding-block: var(--e-8); }
  .seccion__cabecera { margin-bottom: var(--e-6); }
  .seccion__cabecera > h2 { max-width: 20em; }
  @media (min-width: 900px) {
    .seccion { padding-block: var(--e-9); }
    .seccion__cabecera { margin-bottom: var(--e-7); }
  }

  .seccion--niebla { background: var(--mist-50); }
  .seccion--blanca { background: var(--white); }
  .seccion--pino { background: var(--pine-900); color: var(--white); --foco: var(--foco-oscuro); }

  /* ---------- S01 Inicio ---------- */
  .inicio {
    position: relative;
    background: var(--pine-925);
    color: var(--white);
    --foco: var(--foco-oscuro);
    /* Arriba solo 32 px y abajo 24 px más: la tarjeta de respaldo (S02) se monta sobre el final del inicio */
    padding-block: var(--e-6) calc(var(--e-7) + var(--e-5));
  }
  @media (min-width: 900px) {
    .inicio { padding-block: var(--e-9) calc(var(--e-9) + var(--e-6)); }
  }
  .inicio__texto { max-width: 40em; }
  @media (min-width: 900px) { .inicio__texto { max-width: 46em; } }

  .pildora {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0 0 var(--e-4);
    padding: 6px 14px 6px 12px;
    border: 1px solid var(--pine-line);
    border-radius: var(--r-pill);
    background: rgba(116, 231, 202, .1);
    color: var(--on-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }
  .pildora__punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--zoe-200); }

  .inicio__titulo { margin: 0 0 var(--e-4); color: var(--white); }
  .inicio__titulo .linea { display: block; }
  .inicio__titulo .resalte { color: var(--zoe-200); }
  .inicio__subtitulo { margin: 0 0 var(--e-5); max-width: 34em; color: var(--on-dark); }
  .inicio__micro { margin: var(--e-4) 0 0; color: var(--on-dark-2); font-size: 15px; line-height: 1.5; }

  /* ---------- S02 Respaldo: tarjeta que se monta sobre el final del inicio ---------- */
  .respaldo { position: relative; z-index: var(--z-contenido); padding-bottom: var(--e-6); }
  .respaldo__tarjeta {
    margin-top: calc(-1 * var(--e-5));
    min-height: 72px;
    padding: var(--e-5);
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--sombra-2);
  }
  @media (min-width: 900px) {
    .respaldo__tarjeta { margin-top: calc(-1 * var(--e-7)); max-width: 1100px; margin-inline: auto; }
  }

  /* ---------- S03 Cinta: franja menta inclinada. El envoltorio recorta lo que sobra (sin desplazamiento horizontal). ---------- */
  .cinta-envoltura { overflow: hidden; padding-block: var(--e-3); }
  .cinta {
    width: 104%;
    margin-left: -2%;
    min-height: 56px;
    background: var(--zoe-200);
    color: var(--pine-925);
    transform: rotate(-1.2deg);
  }
}