/* Mich Luxe Lash Studio — colores tomados del logo */
:root{
  --rosa:#F155B7;        /* rosa del logo */
  --rosa-claro:#F8ABDF;  /* pestañas del logo */
  --rosa-tinta:#B0246F;  /* rosa legible para texto */
  --ciruela:#3A1630;     /* texto */
  --ciruela-2:#6E4A63;
  --nube:#FDF5F8;        /* fondo */
  --polvo:#F6E3EC;
  --blanco:#fff;
  --serif:"Bodoni Moda", Didot, Georgia, serif;
  --sans:"Figtree", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --g:clamp(20px,5vw,56px);
}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--nube);color:var(--ciruela);font:400 17px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:400}
h1,h2{font-family:var(--serif);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--rosa-claro);color:var(--ciruela)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--ciruela);color:#fff;padding:8px 14px;z-index:99}
.saltar:focus{left:8px}
:focus-visible{outline:2px solid var(--rosa-tinta);outline-offset:3px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--ciruela);color:var(--nube);text-decoration:none;font-weight:500;font-size:16px;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform 140ms var(--ease),background 200ms ease}
.btn:active{transform:scale(.97)}
.btn-linea{background:transparent;color:var(--ciruela);box-shadow:inset 0 0 0 1.5px var(--ciruela)}
.btn-chico{min-height:40px;padding:0 18px;font-size:15px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--rosa-tinta)}
  .btn-linea:hover{background:var(--ciruela);color:var(--nube)}
  .barra-nav a:hover{color:var(--rosa-tinta)}
  .pie a:hover{color:var(--rosa-tinta)}
}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* Barra */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:10px var(--g);padding-top:max(10px,env(safe-area-inset-top));
  background:color-mix(in srgb,var(--nube) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--polvo)}
.barra-logo img{width:92px}
.barra-nav{display:flex;gap:28px;margin-left:auto;font-size:15px}
.barra-nav a{text-decoration:none}
.barra-menu{display:none}
@media (max-width:760px){
  .barra-cta{margin-left:auto}
  .barra-menu{display:grid;place-content:center;gap:6px;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
  .barra-menu span{display:block;width:24px;height:2px;background:var(--ciruela);transition:transform 200ms var(--ease)}
  .barra-menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .barra-menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .barra-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
    background:var(--nube);border-bottom:1px solid var(--polvo);padding:8px var(--g) 16px;
    opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity 180ms ease,transform 220ms var(--ease),visibility 0s 220ms}
  .barra-nav.abierto{opacity:1;transform:none;visibility:visible;transition:opacity 180ms ease,transform 220ms var(--ease)}
  .barra-nav a{padding:14px 0;font-size:18px;border-bottom:1px solid var(--polvo)}
  .barra-nav a:last-child{border-bottom:0}
}

/* Secciones */
section{padding:clamp(64px,10vw,120px) var(--g)}
.cabeza{max-width:640px;margin-bottom:clamp(32px,5vw,56px)}
.cabeza h2{font-size:clamp(38px,6vw,64px)}
.cabeza p{margin-top:14px;color:var(--ciruela-2);font-size:18px}

/* Portada */
.portada{display:grid;align-content:start;gap:clamp(24px,4vw,40px);
  padding-top:clamp(40px,8vw,80px);padding-bottom:clamp(40px,6vw,64px);overflow:hidden;position:relative}
.portada-in{max-width:760px;position:relative;z-index:1}
.portada h1{font-size:clamp(50px,9vw,108px)}
.portada h1 em{font-style:italic;color:var(--rosa-tinta);display:block}
.portada .lead{margin:22px 0 30px;max-width:30em;font-size:clamp(18px,2vw,20px);color:var(--ciruela-2)}
.portada-trazo{width:min(78%,640px);order:-1;margin:0 0 -8px}
.trazo{width:100%;height:auto;overflow:visible}
.trazo path{fill:none;stroke-linecap:round}
.trazo-lid{stroke:var(--ciruela);stroke-width:2}
.trazo-pest{stroke:var(--rosa);stroke-width:1.4}
/* el único momento de movimiento: se dibuja el párpado y luego caen las pestañas */
.portada .trazo-lid{stroke-dasharray:1;stroke-dashoffset:1;animation:dibuja 1100ms var(--ease) 150ms forwards}
.portada .trazo-pest{opacity:0;transform:translateY(-6px);animation:pestanea 700ms var(--ease) 900ms forwards}
@keyframes dibuja{to{stroke-dashoffset:0}}
@keyframes pestanea{to{opacity:1;transform:none}}
@media (min-width:980px){
  .portada{min-height:min(calc(100svh - 64px),760px);align-content:center;grid-template-columns:1.2fr .8fr;align-items:center}
  .portada-trazo{order:0;width:100%;margin:0}
}

/* Servicios: menú editorial, no tarjetas */
.servicios{background:var(--blanco)}
.menu-serv{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--ciruela)}
.menu-serv li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:6px 16px;padding:26px 0;border-bottom:1px solid var(--polvo)}
.menu-serv li::before{content:"0" counter(s);grid-row:span 3;font-family:var(--serif);font-size:20px;color:var(--rosa-tinta);line-height:1.5}
.menu-serv h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);line-height:1.15}
.menu-serv p{color:var(--ciruela-2);max-width:38em}
.dato{font-size:14px;font-weight:600;color:var(--rosa-tinta);margin-top:4px}
@media (min-width:900px){
  .menu-serv li{grid-template-columns:70px minmax(0,1fr) minmax(0,1.3fr) 220px;align-items:baseline;padding:34px 0}
  .menu-serv li::before{grid-row:auto}
  .dato{text-align:right;margin:0}
}

/* Estilos de ojo */
.estilos{background:var(--polvo)}
.ojos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(16px,3vw,40px)}
.ojos figure{margin:0}
.ojo{width:100%;height:auto;overflow:visible;margin-bottom:10px}
.ojo path{fill:none;stroke-linecap:round}
.ojo-lid{stroke:var(--ciruela);stroke-width:1.8}
.ojo-bajo{stroke:var(--ciruela-2);stroke-width:1.2;opacity:.45}
.ojo-iris{fill:var(--rosa-claro)}
.ojo-pest{stroke:var(--ciruela);stroke-width:1.1}
.ojos figcaption{font-size:15px;color:var(--ciruela-2)}
.ojos figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ciruela);margin-bottom:2px}
@media (min-width:900px){.ojos{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Cita */
.pasos{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:28px;align-content:start}
.pasos li{counter-increment:p;padding-top:18px;border-top:1.5px solid var(--ciruela)}
.pasos li::before{content:counter(p);font-family:var(--serif);font-size:40px;line-height:1;color:var(--rosa-tinta);display:block;margin-bottom:10px}
.pasos h3{font-weight:600;font-size:19px;margin-bottom:6px}
.pasos p{color:var(--ciruela-2)}
@media (min-width:760px){.pasos{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Dudas */
.dudas{background:var(--blanco)}
.lista-dudas{max-width:820px;border-top:1px solid var(--ciruela)}
.lista-dudas details{border-bottom:1px solid var(--polvo)}
.lista-dudas summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);line-height:1.25}
.lista-dudas summary::-webkit-details-marker{display:none}
.lista-dudas summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;
  border-right:1.5px solid var(--ciruela);border-bottom:1.5px solid var(--ciruela);transform:rotate(45deg);transition:transform 200ms var(--ease)}
.lista-dudas details[open] summary::after{transform:translateY(5px) rotate(-135deg)}
.lista-dudas details p{padding:0 0 24px;color:var(--ciruela-2);max-width:40em}

/* Agenda */
.agenda{background:var(--ciruela);color:var(--nube);text-align:center;display:grid;justify-items:center}
.agenda h2{font-size:clamp(44px,8vw,96px)}
.agenda p{margin:16px 0 30px;color:color-mix(in srgb,var(--nube) 80%,transparent);max-width:30em}
.agenda .acciones{justify-content:center}
.agenda .btn{background:var(--rosa);color:var(--ciruela)}
.agenda .btn-linea{background:transparent;color:var(--nube);box-shadow:inset 0 0 0 1.5px var(--nube)}
@media (hover:hover) and (pointer:fine){
  .agenda .btn:hover{background:var(--rosa-claro)}
  .agenda .btn-linea:hover{background:var(--nube);color:var(--ciruela)}
}
.trazo-chico{width:180px;margin-bottom:18px}
.trazo-chico .trazo-lid{stroke:var(--nube)}
.trazo-chico .trazo-pest{stroke:var(--rosa-claro)}

/* Pie */
.pie{padding:56px var(--g) calc(32px + env(safe-area-inset-bottom));display:grid;gap:32px}
.pie > img{width:150px}
.pie-cols{display:grid;gap:24px}
.pie h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ciruela-2);margin-bottom:6px}
.pie a{text-decoration:none;border-bottom:1px solid var(--rosa-claro)}
.pie-legal{font-size:14px;color:var(--ciruela-2)}
@media (min-width:760px){.pie{grid-template-columns:200px 1fr;align-items:start}.pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.pie-legal{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important}
}

/* ===== v2 (correcciones de impeccable critique) ===== */
p{text-wrap:pretty}
/* servicios sin numeración: no es una secuencia */
.menu-serv li{grid-template-columns:1fr}
.menu-serv li::before{content:none}
@media (min-width:900px){.menu-serv li{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 220px}}
/* puente a Instagram como prueba de trabajo */
.trabajos{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:40px;padding:26px 28px;
  border-radius:18px;background:var(--polvo);text-decoration:none;transition:transform 140ms var(--ease)}
.trabajos:active{transform:scale(.985)}
.trabajos-txt{font-family:var(--serif);font-size:clamp(24px,3vw,32px);line-height:1.15}
.trabajos-link{font-weight:600;color:var(--rosa-tinta);border-bottom:1.5px solid currentColor}
@media (hover:hover) and (pointer:fine){.trabajos:hover .trabajos-link{color:var(--ciruela)}}
/* estilos: lo más largo en rosa */
.ojo-larga{fill:none;stroke:var(--rosa);stroke-width:1.5;stroke-linecap:round}
@media (max-width:520px){
  .ojos{grid-template-columns:1fr;gap:28px}
  .ojos figure{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
  .ojo{margin:0}
  .ojos figcaption b{font-size:24px}
}
/* portada en PC: el dibujo arriba y grande, una sola columna */
@media (min-width:980px){
  .portada{grid-template-columns:1fr;min-height:0;padding-top:56px}
  .portada-trazo{order:-1;width:min(560px,48vw);margin:0 0 -18px -12px}
}
.portada h1 em{margin-left:-.04em;padding-left:.06em}
/* agenda: una acción principal */
.btn-grande{min-height:56px;padding:0 32px;font-size:17px}
.agenda .alterna{margin:18px 0 0;font-size:15px}
.agenda .alterna a{color:var(--rosa-claro);text-underline-offset:3px}
/* barra fija de agendar (solo celular) */
.barra-movil{display:none}
@media (max-width:760px){
  .barra-cta{display:none}
  .barra-menu{margin-left:auto}
  .barra-movil{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--nube) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--polvo);transform:translateY(110%);transition:transform 260ms var(--ease)}
  .barra-movil.visible{transform:none}
  .barra-movil .btn{width:100%}
  .pie{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
.pasos li::before{font-variant-numeric:lining-nums}