/* ==========================================================================
   mermas.css — Landing /control-de-mermas/
   Depende de tokens.css + base.css + layout.css (cargar despues).
   Solo contiene lo especifico de esta pagina. Todo lo reutilizable
   (.section, .grid, .btn, .container) viene de base.css.
   ========================================================================== */

/* --- Hero de pagina interior --------------------------------------------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 55vh, 620px);
  background: var(--c-navy);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(13,27,42,0.94) 0%,
    rgba(13,27,42,0.86) 45%,
    rgba(13,27,42,0.45) 100%);
}
.page-hero__inner { position: relative; z-index: 1; padding-block: var(--sp-8); }
.page-hero__content { max-width: 62ch; }
.page-hero__title {
  color: var(--c-white);
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-5);
}
.page-hero__lead {
  color: #c8d2dd;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-4);
}
.page-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: #8a99a8;
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: #8a99a8; }
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb [aria-current="page"] { color: #c8d2dd; }

/* --- Escenas (imagen + texto alternado) ---------------------------------- */
.escenas { display: grid; gap: var(--sp-7); }
.escena { display: grid; gap: var(--sp-5); align-items: center; }
.escena__media { border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.escena__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.escena__num {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.escena__body h3 { margin-bottom: var(--sp-3); }

@media (min-width: 860px) {
  .escena { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .escena--reverse .escena__media { order: 2; }
  .escena--reverse .escena__body { order: 1; }
}

/* --- Prosa (bloque navy) ------------------------------------------------- */
.prosa p + p { margin-top: var(--sp-4); }
.prosa p { font-size: var(--fs-md); max-width: 68ch; }

/* --- Metodo: pasos numerados + imagen ------------------------------------ */
.metodo { display: grid; gap: var(--sp-7); align-items: start; }
.pasos { counter-reset: paso; display: grid; gap: var(--sp-5); list-style: none; }
.paso {
  counter-increment: paso;
  position: relative;
  padding-left: calc(var(--sp-6) + var(--sp-3));
}
.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-6); height: var(--sp-6);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  color: var(--c-accent);
  background: var(--c-accent-100);
  border-radius: var(--radius-sm);
}
.paso__titulo { margin-bottom: var(--sp-2); }
.metodo__media { border-radius: var(--radius); overflow: hidden; }
.metodo__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.metodo__cierre {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md);
  color: var(--c-ink);
  max-width: 60ch;
}

@media (min-width: 900px) {
  .metodo { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); }
}

/* --- Entregables --------------------------------------------------------- */
.entregable {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
}
.entregable__titulo { margin-bottom: var(--sp-2); }

/* --- Modalidades --------------------------------------------------------- */
.modalidades {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.modalidades__titulo { margin-bottom: var(--sp-4); }
.modalidades__lista {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.modalidades__lista li {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

/* --- Para quien ---------------------------------------------------------- */
.publico__col {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--c-white);
  border-left: 3px solid var(--c-line);
}
.publico__col--si { border-left-color: var(--c-accent); }
.publico__titulo { margin-bottom: var(--sp-3); }

/* --- CTA final ----------------------------------------------------------- */
.cta-final__lead {
  color: #c8d2dd;
  font-size: var(--fs-md);
  margin-top: var(--sp-4);
}
.cta-final__actions { margin-top: var(--sp-6); }
.cta-final__datos {
  display: grid; gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-navy-700);
}
.cta-final__label {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a99a8;
  margin-bottom: var(--sp-1);
}
.cta-final__datos a { color: var(--c-white); }
.cta-final__datos a:hover { color: var(--c-accent-100); }

@media (min-width: 720px) {
  .cta-final__datos { grid-template-columns: repeat(3, 1fr); }
}