/* =====================================================================
   MN BEAUTY STUDIO · página de captación «Moldeado corporal, técnica colombiana»
   Capa propia sobre estilos.css (kit ARCED + MN). Solo tokens de 00-tokens-mn.css.
   Sin animaciones infinitas: todo es de una pasada y se apaga con prefers-reduced-motion.
   ===================================================================== */

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-texto h1 .linea{ display:block; }

/* ---------- Cifras ---------- */
.cifras{ list-style:none; margin:0 0 clamp(44px, 6vw, 80px); padding:clamp(22px, 3vw, 34px) 0; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  border-top:1px solid var(--c-linea); border-bottom:1px solid var(--c-linea); }
.cifras li{ display:grid; gap:6px; }
.cifras b{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); line-height:1; color:var(--c-acento-titulo); font-variant-numeric:tabular-nums; }
.cifras li > span{ font-size:.9rem; color:var(--c-texto-suave); max-width:18ch; }
@media (max-width:700px){ .cifras{ grid-template-columns:1fr 1fr; gap:26px 18px; } }

/* ---------- Técnicas ---------- */
.tecnicas{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:clamp(14px, 2vw, 22px); }
.tec{ grid-column:span 2; position:relative; display:grid; gap:10px; align-content:start; padding:clamp(22px, 2.6vw, 30px);
  background:#fff; border:1px solid var(--c-linea); border-radius:28px var(--radio) 28px var(--radio);
  transition:transform var(--t-media) var(--ease-salida), box-shadow var(--t-media) var(--ease-salida), border-color var(--t-rapida) var(--ease); }
.tec:nth-child(4), .tec:nth-child(5){ grid-column:span 3; }
.tec:hover{ transform:translateY(-4px); box-shadow:var(--sombra-suave); border-color:var(--c-linea-acento); }
.tec-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--c-oro-palido); color:var(--c-acento-2); }
.tec-ico svg{ width:28px; height:28px; }
.tec-tipo{ position:absolute; top:clamp(22px, 2.6vw, 30px); right:clamp(22px, 2.6vw, 30px); padding:.3em .8em; border-radius:999px; border:1px solid var(--c-linea-acento);
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-acento-2); }
.tec-tipo--manual{ background:var(--c-oscuro); border-color:var(--c-oscuro); color:var(--c-sobre-oscuro); }
.tec h3{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; line-height:1.2; margin:6px 0 0; }
.tec p{ margin:0; font-size:.97rem; }
@media (max-width:900px){ .tecnicas{ grid-template-columns:1fr 1fr; } .tec, .tec:nth-child(4), .tec:nth-child(5){ grid-column:span 1; } .tec:nth-child(5){ grid-column:1 / -1; } }
@media (max-width:560px){ .tecnicas{ grid-template-columns:1fr; } .tec:nth-child(5){ grid-column:auto; } }

.aviso-honesto{ display:flex; gap:18px; align-items:flex-start; margin-top:clamp(28px, 4vw, 48px); padding:clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
  background:var(--c-fondo-alt); border-left:3px solid var(--c-acento); border-radius:var(--radio) 28px var(--radio) 28px; }
.aviso-honesto svg{ width:30px; height:30px; flex-shrink:0; color:var(--c-acento-2); margin-top:2px; }
.aviso-honesto p{ margin:0; color:var(--c-texto); max-width:70ch; }

/* ---------- La sesión: fases ---------- */
.fases{ margin-top:8px; }
.fases-barra{ display:flex; gap:8px; }
.fases-barra button{ position:relative; overflow:hidden; flex:var(--min) 1 0; min-width:84px; min-height:76px; display:grid; align-content:center; gap:2px; text-align:left;
  padding:14px clamp(12px, 1.4vw, 20px); background:rgba(247,241,230,.05); color:var(--c-sobre-oscuro); border:1px solid var(--c-linea-oscuro); border-radius:var(--radio) 22px var(--radio) 22px;
  cursor:pointer; font:inherit; transition:background var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease), transform var(--t-rapida) var(--ease); }
.fases-barra button:hover{ border-color:var(--c-acento-claro); transform:translateY(-2px); }
.fases-barra button:focus-visible{ outline:2px solid var(--c-acento-claro); outline-offset:3px; }
.fases-barra .f-n{ font-family:var(--f-display); font-weight:600; font-size:1.2rem; line-height:1; color:var(--c-acento-claro); }
.fases-barra .f-t{ font-weight:700; font-size:.95rem; line-height:1.2; }
.fases-barra .f-m{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.78; }
.fases-barra button[aria-selected="true"]{ background:var(--c-acento); border-color:var(--c-acento); color:var(--c-sobre-acento); }
.fases-barra button[aria-selected="true"] .f-n{ color:var(--c-sobre-acento); }
.fases-barra button::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--c-oscuro); }
.fases.is-auto .fases-barra button[aria-selected="true"]::after{ animation:mdProgreso var(--fase-ms, 6s) linear forwards; }
@keyframes mdProgreso{ from{ width:0; } to{ width:100%; } }
.fase-panel{ display:flex; gap:clamp(16px, 3vw, 32px); align-items:flex-start; margin-top:clamp(22px, 3vw, 34px); padding:clamp(22px, 3vw, 36px);
  background:var(--c-oscuro-alt); border:1px solid var(--c-linea-oscuro); border-radius:40px var(--radio) 40px var(--radio); animation:mdFase .5s var(--ease-salida); }
.fase-panel[hidden]{ display:none; }
.fase-panel > svg{ width:56px; height:56px; flex-shrink:0; color:var(--c-acento-claro); }
.fase-panel h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.35rem, 1.15rem + .8vw, 1.85rem); line-height:1.2; color:var(--c-sobre-oscuro); margin:0 0 10px; }
.fase-panel p{ margin:0; max-width:62ch; color:var(--c-sobre-oscuro-suave); }
@keyframes mdFase{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:640px){
  .fases-barra{ display:grid; grid-template-columns:1fr 1fr; }
  .fase-panel{ flex-direction:column; }
}

/* ---------- El estudio: galería ---------- */
.galeria{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1.5fr 1fr; grid-template-rows:repeat(2, clamp(190px, 21vw, 280px)); gap:clamp(12px, 1.6vw, 20px); }
.g{ position:relative; margin:0; min-width:0; min-height:0; }
.g:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
.g:nth-child(2){ grid-column:2; grid-row:1; }
.g:nth-child(3){ grid-column:2; grid-row:2; }
.g:nth-child(4){ grid-column:3; grid-row:1 / span 2; }
.g button{ position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:var(--c-oscuro); border-radius:28px var(--radio) 28px var(--radio); overflow:hidden; cursor:zoom-in; }
.g img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-salida); }
.g button:hover img{ transform:scale(1.045); }
.g button:focus-visible{ outline:2px solid var(--c-acento); outline-offset:4px; }
.g-lupa{ position:absolute; right:12px; top:12px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(20,20,20,.62); color:var(--c-sobre-oscuro); }
.g-lupa svg{ width:22px; height:22px; }
.g-pie{ position:absolute; left:0; right:0; bottom:0; padding:42px 16px 14px; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:#fff;
  background:linear-gradient(to top, rgba(20,20,20,.78), rgba(20,20,20,0)); border-radius:0 0 var(--radio) 0; pointer-events:none; }
@media (max-width:760px){
  .galeria{ grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:clamp(210px, 52vw, 300px); }
  .g:nth-child(n){ grid-column:auto; grid-row:auto; }
  .g:nth-child(1){ order:1; }
  .g:nth-child(4){ order:2; }
  .g:nth-child(2){ order:3; grid-column:1 / -1; }
  .g:nth-child(3){ order:4; grid-column:1 / -1; }
}

.apoyo{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:clamp(36px, 5vw, 60px); padding:clamp(20px, 3vw, 30px) clamp(22px, 3vw, 36px);
  background:var(--c-fondo); border-radius:var(--radio) 40px var(--radio) 40px; box-shadow:var(--sombra-suave); }
.apoyo img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--c-acento); }
.apoyo p{ flex:1 1 320px; margin:0; color:var(--c-texto); }
.apoyo .btn--linea{ --_fg:var(--c-texto); }
@media (max-width:480px){ .apoyo .btn{ width:100%; } }

/* ---------- Bonos ---------- */
.bono-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px); max-width:960px; }
.bono-op{ position:relative; display:block; cursor:pointer; }
.bono-op input{ position:absolute; opacity:0; width:1px; height:1px; }
.bono-card{ position:relative; display:grid; gap:10px; height:100%; padding:clamp(26px, 3vw, 38px); background:#fff; border:1px solid var(--c-linea);
  border-radius:40px var(--radio) 40px var(--radio); transition:transform var(--t-media) var(--ease-salida), box-shadow var(--t-media) var(--ease-salida), border-color var(--t-rapida) var(--ease); }
.bono-op:hover .bono-card{ transform:translateY(-4px); box-shadow:var(--sombra-suave); }
.bono-op input:checked + .bono-card{ border-color:var(--c-acento); box-shadow:0 0 0 2px var(--c-acento), var(--sombra); }
.bono-op input:focus-visible + .bono-card{ outline:2px solid var(--c-acento); outline-offset:5px; }
.bono-op--mejor .bono-card{ padding-top:clamp(52px, 5vw, 64px); background:linear-gradient(180deg, #FFFBF1, #fff 60%); }
.bono-cinta{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:38px var(--radio) 0 0;
  background:var(--c-oscuro); color:var(--c-acento-claro); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center; }
.bono-cinta svg{ width:16px; height:16px; flex-shrink:0; }
.bono-chip{ justify-self:start; padding:.28em .8em; border-radius:999px; background:var(--c-oro-palido); color:var(--c-acento-2); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.bono-nombre{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height:1.15; color:var(--c-texto); }
.bono-ritmo{ font-size:.95rem; color:var(--c-texto-suave); }
.bono-precio{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-top:6px; }
.bono-precio s{ font-size:1.05rem; font-weight:500; color:var(--c-texto-suave); }
.bono-precio strong{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height:1; color:var(--c-acento-2); font-variant-numeric:tabular-nums; }
.bono-linea{ font-size:.92rem; font-weight:700; color:var(--c-acento-2); }
.bono-lista{ display:grid; gap:8px; margin-top:10px; padding-top:16px; border-top:1px solid var(--c-linea); font-size:.93rem; color:var(--c-texto-suave); }
.bono-lista > span{ position:relative; padding-left:26px; }
.bono-lista > span::before{ content:""; position:absolute; left:2px; top:.55em; width:12px; height:7px; border-left:2px solid var(--c-acento-2); border-bottom:2px solid var(--c-acento-2); transform:rotate(-45deg); }
@media (max-width:760px){ .bono-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .bono-op--mejor .bono-card{ padding-top:78px; } .bono-cinta{ font-size:.66rem; padding:10px 12px; } }

.ritmo{ max-width:960px; margin:clamp(28px, 4vw, 48px) 0 0; padding:clamp(20px, 3vw, 32px); background:var(--c-fondo-alt); border-radius:var(--radio) 40px var(--radio) 40px; }
.ritmo-titulo{ margin:0 0 16px; font-family:var(--f-display); font-weight:600; font-size:1.25rem; color:var(--c-texto); }
.semanas{ display:grid; gap:10px; }
.semana{ display:grid; grid-template-columns:96px repeat(5, minmax(0, 1fr)); gap:8px; align-items:center; }
.semana-n{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-acento-2); }
.dia{ display:grid; place-items:center; min-height:44px; border-radius:var(--radio) 14px var(--radio) 14px; border:1px dashed var(--c-linea); font-size:.82rem; font-weight:600; color:var(--c-texto-suave);
  background:transparent; transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease-salida); transition-delay:var(--d, 0s); }
.dia.es-sesion{ background:var(--c-acento); border:1px solid var(--c-acento); color:var(--c-sobre-acento); transform:scale(1.04); }
.dia.es-sesion b{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.semana.vacia .dia{ opacity:.55; }
.ritmo-nota{ margin:16px 0 0; font-size:.88rem; }
@media (max-width:560px){ .semana{ grid-template-columns:62px repeat(5, minmax(0, 1fr)); gap:5px; } .semana-n{ font-size:.66rem; letter-spacing:.06em; } }

/* ---------- Visor de fotos ---------- */
.visor{ width:min(1100px, 100vw - 24px); max-width:none; max-height:calc(100dvh - 24px); padding:0; border:0; background:transparent; color:#fff; overflow:visible; }
.visor::backdrop{ background:rgba(10,10,10,.88); }
.visor figure{ margin:0; display:grid; gap:12px; justify-items:center; }
.visor img{ max-width:100%; max-height:calc(100dvh - 120px); width:auto; height:auto; object-fit:contain; border-radius:var(--radio); }
.visor figcaption{ font-size:.92rem; color:rgba(255,255,255,.86); text-align:center; }
.visor-b{ position:absolute; display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:rgba(20,20,20,.72); color:#fff; cursor:pointer; }
.visor-b:hover{ background:var(--c-acento); color:var(--c-sobre-acento); }
.visor-b:focus-visible{ outline:2px solid var(--c-acento-claro); outline-offset:3px; }
.visor-b svg{ width:22px; height:22px; }
.visor-x{ top:8px; right:8px; }
.visor-ant{ left:8px; top:50%; transform:translateY(-50%) scaleX(-1); }
.visor-sig{ right:8px; top:50%; transform:translateY(-50%); }

/* ---------- Formulario: rejilla de chips en la columna estrecha ---------- */
#form-moldeado .chip span{ font-size:.9rem; padding:.6em 1.05em; }
#form-moldeado fieldset{ gap:10px; }
#form-moldeado legend{ margin-bottom:2px; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .tec, .bono-card, .g img, .dia, .fase-panel, .fases-barra button{ transition:none !important; animation:none !important; }
  .fases.is-auto .fases-barra button[aria-selected="true"]::after{ animation:none; width:100%; }
}