/* ═══════════════════════════════════════════════════════════════════
   SALÓN DE BELLEZA ÓPALO · Puerto Montt — demo personalizada DRAKO
   arquetipo 12 · Editorial Boutique (claro, serif display, foto a sangre)

   La paleta NO se invento: sale de su propio minisite de AgendaPro
   (colorMinisite #C033E4 · colorMedium #D96BF9 · colorLight #971EE0) y del
   color medido de su logo real (#91089C). Los cremas salen de la
   ambientacion de SUS fotos de equipo (fondo durazno pastel).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --morado:#91089C;          /* medido del logo real */
  --morado-vivo:#C033E4;     /* el suyo, de su minisite */
  --lila:#D96BF9;
  --morado-hondo:#5B0A62;
  --crema:#FBF6F2;
  --durazno:#F2E3D8;         /* el fondo de sus retratos de equipo */
  --arena:#E7D3C6;
  --tinta:#2B1830;
  --tinta-suave:#6B5670;
  --blanco:#FFFFFF;
  --sombra:0 18px 50px -24px rgba(91,10,98,.45);
  --display:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  --texto:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ancho:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--texto);font-size:17px;line-height:1.7;
  overflow-x:hidden;
}
/* 🪤 `height:auto` NO es decorativo. Las <img> llevan width/height en el HTML (evitan el
   salto de maquetacion al cargar), y ese atributo es una altura ESPECIFICADA: le gana al
   `aspect-ratio` del CSS. Medido el 1-sep-2026 en el navegador: un retrato con max-width
   330px salia 330x900 —no 330x440— y `object-fit:cover` lo recortaba en vez de escalarlo,
   dejando un hueco enorme al lado del texto. Con `height:auto` manda el aspect-ratio. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

.env{width:min(100% - 2.4rem,var(--ancho));margin-inline:auto}

/* ── tipografia con caracter (regla: display distinto del cuerpo) ── */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.1;margin:0}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.ojo{
  font-family:var(--texto);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--morado);font-weight:600;margin:0 0 .9rem
}
.cursiva{font-style:italic;color:var(--morado)}

/* ── encabezado ── */
.top{
  position:sticky;top:0;z-index:60;background:rgba(251,246,242,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--arena)
}
.top .env{display:flex;align-items:center;gap:1.2rem;min-height:74px}
.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.marca img{width:38px;height:38px}
.marca b{font-family:var(--display);font-size:1.35rem;font-weight:400;letter-spacing:.04em}
.marca span{display:block;font-size:.58rem;letter-spacing:.24em;color:var(--tinta-suave);text-transform:uppercase}
.menu{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-size:.9rem;padding:.35rem 0;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.menu a:hover,.menu a[aria-current="page"]{border-color:var(--morado);color:var(--morado)}

/* ── botones ──
   ⚠️ El de RESERVAR no es verde a proposito: verde promete WhatsApp y esto
   abre su agenda. La regla existe porque un boton que miente enfria la venta. */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;border:0;cursor:pointer;
  padding:.95rem 1.7rem;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.95rem;position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s
}
.btn:hover{transform:translateY(-2px)}
.btn-reserva{background:linear-gradient(120deg,var(--morado),var(--morado-vivo));color:#fff;box-shadow:var(--sombra)}
.btn-reserva::after{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s
}
.btn-reserva:hover::after{transform:translateX(120%)}
.btn-linea{background:transparent;color:var(--morado);border:1.5px solid var(--morado)}
.btn-linea:hover{background:var(--morado);color:#fff}
.btn-wa{background:#128C7E;color:#fff}

/* ── portada ── */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;width:52vw;height:52vw;max-width:640px;max-height:640px;
  right:-14vw;top:-16vw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(217,107,249,.30),rgba(145,8,156,.05) 62%,transparent 72%);
  filter:blur(6px);pointer-events:none
}
.hero .env{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative}
.hero-foto{position:relative}
.hero-foto img{border-radius:220px 220px 26px 26px;box-shadow:var(--sombra);aspect-ratio:3/4;object-fit:cover}
.sello{
  position:absolute;left:-1.4rem;bottom:1.6rem;background:var(--blanco);border-radius:18px;
  padding:.85rem 1.15rem;box-shadow:var(--sombra);max-width:220px;border-left:3px solid var(--morado)
}
.sello b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--morado);line-height:1}
.sello span{font-size:.76rem;color:var(--tinta-suave);line-height:1.35;display:block;margin-top:.2rem}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.bajada{font-size:1.06rem;color:var(--tinta-suave);max-width:46ch;margin:1.3rem 0 0}

/* ── credenciales ── */
.credenciales{background:var(--durazno);padding:clamp(2.2rem,4vw,3.2rem) 0}
.credenciales .env{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem}
.cred{display:flex;gap:.9rem;align-items:flex-start}
.cred .ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--blanco);
  display:grid;place-items:center;color:var(--morado);font-size:1.05rem;box-shadow:0 4px 14px -6px rgba(91,10,98,.5)
}
.cred b{display:block;font-size:.95rem}
.cred span{font-size:.84rem;color:var(--tinta-suave);line-height:1.45}

/* ── bloques ── */
.bloque{padding:clamp(3.2rem,7vw,5.6rem) 0}
.bloque.claro{background:var(--blanco)}
.cabecera{max-width:56ch;margin-bottom:clamp(2rem,4vw,3rem)}
.cabecera p{color:var(--tinta-suave);margin:.9rem 0 0}

/* riel horizontal — el equipo se recorre, no se apila en grilla */
.riel{display:flex;gap:1.2rem;overflow-x:auto;padding:.4rem .2rem 1.4rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
.riel::-webkit-scrollbar{height:7px}
.riel::-webkit-scrollbar-thumb{background:var(--arena);border-radius:99px}
.riel > *{scroll-snap-align:start;flex:0 0 clamp(230px,26vw,280px)}

.ficha{background:var(--blanco);border-radius:20px;overflow:hidden;box-shadow:0 10px 34px -22px rgba(43,24,48,.5);transition:transform .3s,box-shadow .3s}
.ficha:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.ficha img{aspect-ratio:3/4;object-fit:cover;object-position:top center}
.ficha .cuerpo{padding:1.1rem 1.2rem 1.4rem}
.ficha h3{margin-bottom:.15rem}
.anos{display:inline-block;background:var(--durazno);color:var(--morado-hondo);font-size:.72rem;font-weight:700;
  padding:.2rem .6rem;border-radius:99px;letter-spacing:.04em}
.ficha p{font-size:.9rem;color:var(--tinta-suave);margin:.6rem 0 0}

/* carta de servicios — linea con puntitos, no tarjetas */
.carta{list-style:none;margin:0;padding:0}
.carta li{padding:1.15rem 0;border-bottom:1px dashed var(--arena)}
.carta .fila{display:flex;align-items:baseline;gap:.8rem}
.carta .nom{font-family:var(--display);font-size:1.22rem}
.carta .guia{flex:1;border-bottom:1px dotted var(--arena);transform:translateY(-4px)}
.carta .val{font-size:.86rem;color:var(--morado);font-weight:600;white-space:nowrap}
.carta .det{font-size:.92rem;color:var(--tinta-suave);margin:.35rem 0 0;max-width:62ch}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.duo img{border-radius:22px;box-shadow:var(--sombra)}

.cita{
  font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.35;
  max-width:24ch;color:var(--morado-hondo)
}

/* ── cierre ── */
.cierre{background:linear-gradient(140deg,var(--morado-hondo),var(--morado));color:#fff;padding:clamp(3rem,6vw,4.6rem) 0;text-align:center}
.cierre h2{color:#fff}
.cierre p{color:rgba(255,255,255,.86);max-width:52ch;margin:1rem auto 2rem}
.cierre .btn-reserva{background:#fff;color:var(--morado)}
.cierre .btn-linea{border-color:rgba(255,255,255,.7);color:#fff}
.cierre .btn-linea:hover{background:#fff;color:var(--morado)}

/* ── pie ── */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);padding:2.8rem 0 2rem;font-size:.9rem}
.pie .env{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.8rem}
.pie h4{font-family:var(--display);color:#fff;font-size:1.1rem;margin:0 0 .6rem;font-weight:400}
.pie a{color:rgba(255,255,255,.72);text-decoration:none}
.pie a:hover{color:#fff}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:1.2rem;font-size:.78rem;color:rgba(255,255,255,.5)}

/* ── flotante de WhatsApp ── */
.flota{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  text-decoration:none;transition:transform .25s
}
.flota:hover{transform:scale(1.08)}
.flota svg{width:29px;height:29px;fill:#fff}

/* ── revelado al deslizar ──
   🪤 PLAN B SIN JS: si el script no corre, `.rev` nunca recibe `.visto` y la
   pagina quedaria en blanco. Por eso el estado oculto lo pone el PROPIO script
   (clase `js` en <html>), no el CSS. Sin JS, todo se ve. */
.js .rev{opacity:0;transform:translateY(22px)}
.js .rev.visto{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none}
  .btn:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ── movil ── */
@media (max-width:860px){
  .hero .env,.duo{grid-template-columns:1fr}
  .hero-foto{order:-1;max-width:420px;margin-inline:auto}
  .sello{left:auto;right:.6rem;bottom:-.8rem}
  .menu{gap:1rem}
  .menu a{font-size:.82rem}
  .marca span{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .top .env{min-height:64px;flex-wrap:wrap;gap:.5rem 1rem;padding-block:.6rem}
  .menu{order:3;width:100%;justify-content:space-between;gap:.4rem}
  .acciones .btn{flex:1 1 100%;justify-content:center}
  .hero-foto img{border-radius:150px 150px 20px 20px}
}