/* =======================================================================
   "Cuatro mujeres. Cuatro razones." — versión nueva: una mujer a la vez
   Solo se usa en index-mujeres.html (la página de prueba).
   El color del cuadro de texto vive en UNA variable: --panel (abajo, en .mu2)
   ======================================================================= */
.mu2{
  --panel:linear-gradient(135deg,rgba(10,12,12,.50) 0%,rgba(10,12,12,.68) 100%);   /* capa oscura sobre la foto desenfocada (más opaca = texto más legible) */
  --blur:38px;                                                                       /* cuánto se desenfoca la foto del fondo del texto */
  --ease:cubic-bezier(.2,.8,.2,1);
}
#las-que-la-llevan.mu2{ padding:72px 0; }
.mu2 .mu__head{ margin-bottom:32px; }

/* ---------- La pieza: foto + cuadro de texto pegados ---------- */
.mu2__box{ display:grid; grid-template-columns:1fr; border-radius:28px; overflow:hidden; isolation:isolate; }
.mu2__box:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

.mu2__photo{ position:relative; order:-1; aspect-ratio:1/1; overflow:hidden; background:#1a1a1c; touch-action:pan-y; }
.mu2__pic{ position:absolute; inset:0; opacity:0; z-index:0; }
.mu2__pic.is-prev{ opacity:1; z-index:1; }
.mu2__pic.is-on{ opacity:1; z-index:2; transition:opacity 1s ease; }
.mu2__pic img{ width:100%; height:100%; object-fit:cover; object-position:50% var(--om,50%); transform-origin:50% 50%; }
.mu2__pic.kb img{ animation:mu2kb 9s cubic-bezier(.25,.5,.5,1) both; }
@keyframes mu2kb{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

.mu2__text{ position:relative; display:grid; overflow:hidden; background:#111; color:#fff; }
/* Fondo del texto: la misma foto de la mujer, muy desenfocada y oscurecida (cambia con fundido junto con la foto) */
.mu2__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.mu2__bg::after{ content:""; position:absolute; inset:0; z-index:5; background:var(--panel); }
.mu2__bpic{ position:absolute; inset:0; opacity:0; z-index:0; }
.mu2__bpic.is-prev{ opacity:1; z-index:1; }
.mu2__bpic.is-on{ opacity:1; z-index:2; transition:opacity 1s ease; }
.mu2__bpic img{ width:100%; height:100%; object-fit:cover; object-position:50% var(--om,50%); filter:blur(var(--blur)) saturate(1.15); transform:scale(1.35); }
/* Las cuatro historias ocupan la misma celda: el cuadro no cambia de tamaño al pasar de una a otra */
.mu2__t{ position:relative; z-index:1; grid-area:1/1; display:flex; flex-direction:column; padding:28px 24px 24px; visibility:hidden; opacity:0; transition:opacity .3s ease, visibility 0s .3s; }
.mu2__t.is-on{ visibility:visible; opacity:1; transition:none; }

/* Una sola clase para los cuatro títulos y otra para los cuatro párrafos */
.mu2__title{ margin:0 0 16px; font-family:var(--serif); font-weight:500; font-size:28px; line-height:1.15; letter-spacing:-.01em; color:#fff; }
.mu2__title .ln > span{ white-space:nowrap; }
.mu2__p{ margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.8); }
/* "Lleva:" siempre pegado al fondo del cuadro */
.mu2__w{ margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:14px; }
.mu2__wt{ margin:0; font-size:13px; line-height:1.4; color:#fff; }
.mu2__wt .lnk{ color:#fff; border-bottom:1px solid var(--blue); }
.mu2__c{ flex:none; width:44px; height:44px; border-radius:9999px; overflow:hidden; background:#1a1a1c; }
.mu2__c img{ width:100%; height:100%; object-fit:cover; transform:scale(2.2); transform-origin:var(--or,50% 50%); }

/* ---------- Controles: rayitas a la izquierda, flechas a la derecha ---------- */
.mu2__ctl{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; }
.mu2__bars{ display:flex; gap:8px; }
.mu2__bar{ position:relative; flex:none; width:56px; height:48px; padding:0; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mu2__bar::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#fff; opacity:.25; }
.mu2__bar i{ position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#fff; transform:scaleX(0); transform-origin:left center; }
.mu2__bar.is-on i{ animation:mu2fill 8s linear forwards; }
@keyframes mu2fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.mu2__arrows{ display:flex; gap:12px; }
.mu2__arrow{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; padding:0; border-radius:9999px; background:rgba(253,253,253,.94); border:1px solid var(--line-1px); color:#111; cursor:pointer; transition:transform .2s ease; }
@media (hover:hover){ .mu2__arrow:hover{ transform:scale(1.06); } }
.mu2__bar:focus-visible, .mu2__arrow:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.mu2.is-paused .mu2__bar.is-on i, .mu2.is-paused .mu2__pic.kb img{ animation-play-state:paused; }

/* ---------- Entrada del texto (una historia a la vez) ---------- */
@media (prefers-reduced-motion:no-preference){
  .mu2__t .ln > span{ transform:translateY(110%); transition:transform 0s .35s; }
  .mu2__t.is-on .ln > span{ transform:none; transition:transform .7s var(--ease) calc(.25s + var(--l, 0) * .1s); }
  .mu2__t .mu2__p, .mu2__t .mu2__q, .mu2__t .mu2__w{ opacity:0; transform:translateY(12px); transition:opacity 0s .35s, transform 0s .35s; }
  .mu2__t.is-on .mu2__p, .mu2__t.is-on .mu2__q, .mu2__t.is-on .mu2__w{ opacity:1; transform:none; transition:opacity .6s var(--ease) .55s, transform .6s var(--ease) .55s; }
}
@media (prefers-reduced-motion:reduce){
  .mu2__pic.is-on, .mu2__bpic.is-on, .mu2__t, .mu2__arrow{ transition:none !important; }
  .mu2__pic.kb img, .mu2__bar.is-on i{ animation:none; }
  .mu2__bar.is-on i{ transform:scaleX(1); }
}

/* ======================= ESCRITORIO ======================= */
@media (min-width:769px){
  #las-que-la-llevan.mu2{ padding:120px 0; }
  .mu2 .mu__head{ margin-bottom:56px; }
  .mu2__box{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); height:560px; border-radius:32px; }
  .mu2__photo{ order:0; aspect-ratio:auto; }
  .mu2__pic img, .mu2__bpic img{ object-position:50% var(--od,50%); }
  .mu2__t{ padding:56px; }
  .mu2__title{ margin-bottom:20px; font-size:38px; }
  .mu2__p{ font-size:18px; }
  .mu2__wt{ font-size:14px; }
  .mu2__ctl{ margin-top:28px; }
}

/* Pantallas angostas (375 px): rayitas de 48 px para que el control no se pase del ancho */
@media (max-width:400px){ .mu2__bars{ gap:6px; } .mu2__bar{ width:48px; } }