/* =========================================================================
   VISTA MÓVIL (< 768px) — concepto 1b "Inmersivo", README-mobile.md
   Markup propio (clases .m-*), no es el desktop reestilado.
   ========================================================================= */
:root{
  --oliva-profundo:#2E3A1F; --dorado-claro:#E3CFA6;
  --m-pad:22px;
}
body.sin-scroll{overflow:hidden}
.m-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.m-eyebrow.dorado{color:var(--dorado)}
.m-eyebrow.cobre{color:var(--cobre)}
.m-eyebrow.gris{color:var(--gris-2);letter-spacing:.14em}
.cobre{color:var(--cobre)}
.oliva{color:var(--oliva)}
.m-marca{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:.04em;color:var(--marfil)}
.m-marca em{color:var(--dorado-claro)}

/* nav superpuesta al hero */
.m-nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--m-pad) 0;pointer-events:none}
.m-burger{pointer-events:auto;width:44px;height:44px;padding:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;cursor:pointer;
  border:1px solid rgba(246,242,236,.6);background:rgba(46,58,31,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.m-burger span{width:16px;height:1px;background:var(--marfil)}

/* menú overlay */
.m-menu{position:fixed;inset:0;z-index:30;background:var(--oliva-profundo);color:var(--marfil);
  display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--m-pad) 40px;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
.m-menu.abierto{transform:translateX(0)}
.m-menu-top{display:flex;align-items:center;justify-content:space-between}
.m-cerrar{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(246,242,236,.6);background:transparent;color:var(--marfil);font-size:22px;cursor:pointer}
.m-menu-links{display:flex;flex-direction:column;margin-top:48px;flex:1}
.m-menu-links a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;
  border-bottom:1px solid rgba(201,184,154,.3);color:var(--marfil);font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1}
.m-menu-num{font-family:'Figtree',sans-serif;font-size:11px;letter-spacing:.14em;color:var(--dorado)}
.m-menu-pie{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.m-menu-pie span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,236,.6);text-align:center}

/* botones */
.m-btn-dorado{display:flex;justify-content:center;padding:18px;background:var(--dorado);color:var(--oliva-profundo);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.m-btn-dorado:hover{color:var(--oliva-profundo)}
.m-btn-outline{display:flex;justify-content:center;width:100%;padding:16px;border:1px solid rgba(201,184,154,.6);
  color:var(--marfil);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.m-btn-outline:hover{color:var(--marfil)}

/* hero */
.m-hero{position:relative;height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.m-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.m-hero-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,48,28,.35) 0%,rgba(42,48,28,0) 30%,rgba(42,48,28,.15) 55%,rgba(42,48,28,.92) 100%)}
.m-hero-texto{position:relative;padding:0 var(--m-pad) 44px;display:flex;flex-direction:column;gap:16px;color:var(--marfil)}
.m-hero-texto h1{font-size:52px;line-height:.95;letter-spacing:-.01em}
.m-hero-texto h1 em{color:var(--dorado-claro)}
.m-hero-texto p{margin:0;font-size:15px;line-height:1.55;font-weight:300;color:rgba(246,242,236,.85)}
.m-scroll{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,242,236,.7);margin-top:8px}
.m-scroll:hover{color:var(--marfil)}

/* skincare: tarjetas foto → cada una lleva a su página (?t=...) */
.m-skincare{padding:44px var(--m-pad) 0;display:flex;flex-direction:column;gap:16px}
.m-head{display:flex;flex-direction:column;gap:8px}
.m-head h2{font-size:38px;line-height:1}
.m-head p{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:var(--gris)}
.m-trat-btn{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;color:var(--marfil);
  background:var(--oliva-profundo)}
.m-trat-btn:hover{color:var(--marfil)}
.m-trat-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-trat-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,48,28,0) 40%,rgba(42,48,28,.9) 100%)}
.m-trat-texto{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.m-trat-titulo{font-family:'Cormorant Garamond',serif;font-size:32px;line-height:1}
.m-trat-titulo em{color:var(--dorado-claro)}
.m-trat-desc{font-size:13px;font-weight:300;color:rgba(246,242,236,.85)}
.m-trat-num{position:absolute;top:16px;right:16px;font-size:11px;letter-spacing:.12em;padding:6px 10px;border:1px solid rgba(246,242,236,.6)}
.m-trat-mas{position:absolute;top:16px;left:16px;width:32px;height:32px;border:1px solid rgba(246,242,236,.6);
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}

/* hair style + k-beauty (bloque oliva) */
.m-oliva{margin-top:48px;padding:44px var(--m-pad);background:var(--oliva);color:var(--marfil);
  display:flex;flex-direction:column;gap:20px}
.m-oliva h2{font-size:36px;line-height:1}
.m-oliva h2 em{color:var(--dorado)}
.m-hair{display:flex;flex-direction:column;border-top:1px solid rgba(201,184,154,.35)}
.m-hair-fila{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;padding:16px 0;
  border-bottom:1px solid rgba(201,184,154,.35)}
.m-hair-fila img,.m-hair-ph{aspect-ratio:1;width:100%;object-fit:cover}
.m-hair-ph{background:repeating-linear-gradient(135deg,rgba(246,242,236,.12) 0 10px,rgba(246,242,236,.06) 10px 20px)}
.m-hair-fila>div{display:flex;flex-direction:column;gap:4px}
.m-hair-titulo{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1}
.m-hair-titulo em{color:var(--dorado)}
.m-hair-desc{font-size:13px;font-weight:300;color:rgba(246,242,236,.8)}
.m-kbeauty{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.m-kbeauty>img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%}
.m-kbeauty>div{display:flex;flex-direction:column;gap:10px}
.m-kbeauty h3{font-size:28px;line-height:1}
.m-kbeauty h3 em{color:var(--dorado)}
.m-kbeauty-lista{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:300;color:rgba(246,242,236,.85)}

/* gabriela */
.m-sobre{padding:48px var(--m-pad);display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}
.m-sobre>img,.m-sobre>.ph{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%}
.m-sobre>div{display:flex;flex-direction:column;gap:10px}
.m-sobre h2{font-size:32px;line-height:1}
.m-sobre p{margin:0;font-size:13px;line-height:1.55;font-weight:300;color:var(--gris)}

/* productos */
.m-productos{padding:0 var(--m-pad) 8px;display:flex;flex-direction:column;gap:14px}
.m-prod-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.m-prod-head h2{font-size:30px;line-height:1}
.m-prod-track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--m-pad) * -1);
  padding:0 var(--m-pad);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.m-prod-track::-webkit-scrollbar{display:none}
.m-prod{flex:0 0 150px;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;color:var(--tinta)}
.m-prod img,.m-prod .ph{aspect-ratio:4/5;width:100%;object-fit:contain;padding:10%;background:#EDE6DB}
.m-prod s{color:var(--gris-2)}
.m-prod-mas{justify-content:center;align-items:center;text-align:center;aspect-ratio:4/5;padding:12px;border:1px solid var(--cobre)}
.m-prod-mas .m-prod-nom{color:var(--cobre)}
.m-prod-nom{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.1}
.m-prod-tipo{font-size:12px;color:var(--gris-2);font-weight:300}

/* faq */
.m-faq{padding:48px var(--m-pad) 8px;display:flex;flex-direction:column;gap:20px}
.m-faq .m-head h2{font-size:34px}
.m-acc{display:flex;flex-direction:column;border-top:1px solid var(--dorado)}
.m-acc-item{display:flex;flex-direction:column;border-bottom:1px solid var(--dorado)}
.m-acc-btn{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:18px 0;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--tinta);font:inherit;width:100%}
.m-acc-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--cobre)}
.m-acc-q{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:23px;line-height:1.1}
.m-acc-mas{width:32px;height:32px;border:1px solid var(--oliva);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:18px;line-height:1;color:var(--oliva);transition:transform .3s}
.m-acc-item.open .m-acc-mas{transform:rotate(45deg)}
.m-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.m-acc-item.open .m-acc-body{grid-template-rows:1fr}
.m-acc-body>div{overflow:hidden}
.m-acc-body p{margin:0;padding:0 0 20px 40px;font-size:14px;line-height:1.65;font-weight:300;color:var(--gris)}

/* reservar + footer (bloque oscuro) */
.m-cierre{margin-top:48px;position:relative;overflow:hidden;background:var(--oliva-profundo);color:var(--marfil)}
.m-cierre-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.m-cierre-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,58,31,.4),rgba(46,58,31,.95) 70%)}
.m-cierre-cuerpo{position:relative;padding:64px var(--m-pad) 48px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:20px}
/* ponytail: teñido con filtro hasta que la clienta mande el logo en dorado (#C9B89A) */
.m-cierre-logo{width:64px;height:64px;object-fit:contain;filter:brightness(0) invert(88%) sepia(20%) saturate(400%) hue-rotate(350deg)}
.m-cierre h2{font-size:44px;line-height:.95}
.m-cierre h2 em{color:var(--dorado-claro)}
.m-cierre p{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:rgba(246,242,236,.8);max-width:290px}
.m-cierre .m-btn-dorado{width:100%}
.m-datos{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(201,184,154,.3);text-align:left}
.m-datos>div{display:flex;flex-direction:column;gap:6px}
.m-dato-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dorado)}
.m-dato-valor{font-size:13px;line-height:1.5;color:rgba(246,242,236,.9)}
.m-footer{position:relative;padding:20px var(--m-pad) 40px;display:flex;justify-content:space-between;gap:12px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,236,.5)}
.m-footer a{color:rgba(246,242,236,.5)}