/* ============================================================
   La Boutique de la Belleza — hoja de estilo principal
   Paleta: negro carbón + oro de marca (#E3B23C)
   ============================================================ */

:root{
  --negro:#0B0B0D;
  --carbon:#111114;
  --superficie:#17171B;
  --superficie-2:#1F1F24;
  --oro:#E3B23C;
  --oro-claro:#F2D390;
  --oro-oscuro:#B98D28;
  --crema:#F6F2EA;
  --gris:#A8A199;
  --gris-osc:#6E6963;
  --linea:rgba(227,178,60,.20);
  --linea-suave:rgba(246,242,234,.10);
  --sombra:0 24px 60px rgba(0,0,0,.45);
  --radio:2px;
  --ancho:1220px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --t:.45s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--negro);color:var(--crema);
  font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;line-height:1.12;letter-spacing:.01em}
p{margin:0 0 1.1em}
::selection{background:var(--oro);color:#000}

.contenedor{width:min(100% - 2.6rem,var(--ancho));margin-inline:auto}
.contenedor-ancho{width:min(100% - 2.6rem,1480px);margin-inline:auto}
.seccion{padding:clamp(4.5rem,9vw,8.5rem) 0}
.seccion--fino{padding:clamp(3rem,6vw,5rem) 0}
.centrado{text-align:center}

/* ---------- tipografía de marca ---------- */
.epigrafe{
  font-family:var(--sans);font-size:.685rem;font-weight:400;letter-spacing:.42em;
  text-transform:uppercase;color:var(--oro);margin:0 0 1.2rem;
}
.epigrafe--gris{color:var(--gris-osc)}
h1,.h1{font-size:clamp(2.9rem,7.2vw,5.4rem)}
h2,.h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h3,.h3{font-size:clamp(1.35rem,2.2vw,1.75rem)}
.entradilla{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--gris);max-width:62ch}
.entradilla--centro{margin-inline:auto}

/* filete ornamental */
.filete{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.6rem 0}
.filete::before,.filete::after{content:"";height:1px;width:min(90px,14vw);background:linear-gradient(90deg,transparent,var(--oro))}
.filete::after{background:linear-gradient(90deg,var(--oro),transparent)}
.filete span{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--oro)}
.filete--izq{justify-content:flex-start}
.filete--izq::before{display:none}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.02rem 2.05rem;font-family:var(--sans);font-size:.75rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--oro);
  border-radius:var(--radio);transition:var(--t);cursor:pointer;white-space:nowrap;
}
.btn--oro{background:var(--oro);color:#0B0B0D;font-weight:500}
.btn--oro:hover{background:var(--oro-claro);border-color:var(--oro-claro);transform:translateY(-2px)}
.btn--linea{background:transparent;color:var(--oro)}
.btn--linea:hover{background:rgba(227,178,60,.10);transform:translateY(-2px)}
.btn--claro{background:transparent;color:var(--crema);border-color:rgba(246,242,234,.35)}
.btn--claro:hover{border-color:var(--crema);background:rgba(246,242,234,.06)}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.botonera{display:flex;flex-wrap:wrap;gap:.9rem}
.botonera--centro{justify-content:center}

/* ---------- cabecera ---------- */
.cabecera{
  position:fixed;inset:0 0 auto;z-index:80;padding:1.15rem 0;
  transition:background var(--t),padding var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.cabecera.solida{background:rgba(11,11,13,.94);backdrop-filter:blur(14px);border-bottom-color:var(--linea);padding:.7rem 0}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.marca{display:flex;align-items:center;gap:.75rem}
.marca img{width:34px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.marca__texto{display:flex;flex-direction:column;line-height:1}
.marca__nombre{font-family:var(--serif);font-size:1.16rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crema)}
.marca__sub{font-size:.55rem;letter-spacing:.36em;text-transform:uppercase;color:var(--oro);margin-top:.3rem}
.nav{display:flex;align-items:center;gap:2.05rem}
.nav a{font-size:.735rem;letter-spacing:.19em;text-transform:uppercase;color:var(--crema);opacity:.82;transition:var(--t);position:relative;padding-block:.25rem}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--oro);transition:var(--t)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;color:var(--oro)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.cabecera__acciones{display:flex;align-items:center;gap:1rem}
.idioma{display:flex;align-items:center;gap:.4rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.idioma a{transition:var(--t)}
.idioma a[aria-current]{color:var(--oro)}
.idioma span{opacity:.35}
.hamburguesa{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.hamburguesa span{display:block;width:24px;height:1px;background:var(--crema);margin:6px 0;transition:var(--t)}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1000px){
  /* sin backdrop-filter: crea un contexto que rompe el menu fijo a pantalla completa */
  .cabecera.solida{backdrop-filter:none;background:rgba(11,11,13,.97)}
  .hamburguesa{display:block}
  .nav{
    position:fixed;inset:0;background:rgba(11,11,13,.985);
    flex-direction:column;justify-content:center;gap:2.1rem;
    transform:translateX(100%);transition:transform var(--t);
    z-index:90;
  }
  .nav.abierto{transform:none}
  .nav a{font-size:1.05rem;letter-spacing:.24em}
  .cabecera__acciones .btn{display:none}
}

/* ---------- portada ---------- */
.portada{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.portada__media{position:absolute;inset:0;z-index:-2}
.portada__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.portada::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 30%,rgba(11,11,13,.35),rgba(11,11,13,.86) 62%,rgba(11,11,13,.97)),
             linear-gradient(180deg,rgba(11,11,13,.75) 0%,transparent 28%);
}
.portada__cuerpo{padding:9rem 0 7.5rem;max-width:960px}
.portada__emblema{width:clamp(74px,9vw,112px);margin:0 auto 1.9rem;opacity:.96}
.portada h1{margin-bottom:1.1rem}
.portada .entradilla{margin-inline:auto;color:rgba(246,242,234,.86)}
.sello{
  display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1.9rem;padding:.5rem 1.1rem;
  border:1px solid var(--linea);border-radius:99px;background:rgba(11,11,13,.5);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--crema);
}
.sello__estrellas{color:var(--oro);letter-spacing:.12em}
.portada__scroll{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gris-osc)}
@media (max-width:760px){.portada__scroll{display:none}}
.portada__scroll::after{content:"";display:block;width:1px;height:26px;margin:.7rem auto 0;background:linear-gradient(var(--oro),transparent)}

/* portada interior (páginas secundarias) */
.portadilla{position:relative;padding:12rem 0 5.5rem;text-align:center;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--linea)}
.portadilla__media{position:absolute;inset:0;z-index:-2}
.portadilla__media img{width:100%;height:100%;object-fit:cover}
.portadilla::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,13,.9),rgba(11,11,13,.78) 50%,rgba(11,11,13,.95))}

/* ---------- cifras ---------- */
.cifras{border-block:1px solid var(--linea);background:var(--carbon)}
.cifras__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.cifra{padding:2.6rem 1.2rem;text-align:center;border-right:1px solid var(--linea-suave)}
.cifra:last-child{border-right:0}
.cifra__num{font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,2.9rem);color:var(--oro);line-height:1}
.cifra__txt{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gris);margin-top:.7rem}
@media (max-width:760px){.cifras__grid{grid-template-columns:repeat(2,1fr)}.cifra:nth-child(2){border-right:0}.cifra:nth-child(-n+2){border-bottom:1px solid var(--linea-suave)}}

/* ---------- bloque dos columnas ---------- */
.duo{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.duo--invertido .duo__media{order:2}
.duo__media{position:relative}
.duo__media img{width:100%;aspect-ratio:5/4;height:auto;object-fit:cover;border-radius:var(--radio)}
.duo__media::after{content:"";position:absolute;inset:14px;border:1px solid var(--linea);pointer-events:none}
@media (max-width:900px){.duo{grid-template-columns:1fr}.duo--invertido .duo__media{order:0}}

/* ---------- servicios ---------- */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea-suave);border:1px solid var(--linea-suave)}
@media (max-width:1100px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.servicios{grid-template-columns:1fr}}
.servicio{
  background:var(--carbon);padding:2.6rem 2.1rem;display:flex;flex-direction:column;gap:.85rem;
  transition:var(--t);position:relative;overflow:hidden;
}
.servicio::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(227,178,60,.09),transparent 55%);opacity:0;transition:var(--t)}
.servicio:hover{background:var(--superficie);transform:translateY(-3px)}
.servicio:hover::before{opacity:1}
.servicio__n{font-family:var(--serif);font-size:.95rem;color:var(--oro-oscuro);letter-spacing:.2em}
.servicio h3{font-size:1.5rem}
.servicio p{color:var(--gris);font-size:.94rem;margin:0}
.servicio__pie{margin-top:auto;padding-top:1.3rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;border-top:1px solid var(--linea-suave)}
.servicio__precio{font-family:var(--serif);font-size:1.32rem;color:var(--oro)}
.servicio__precio small{font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-osc);display:block;margin-bottom:.25rem;white-space:nowrap}
.servicio__num{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-osc);white-space:nowrap;text-align:right}

/* tarjetas con foto */
.destacados{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media (max-width:1050px){.destacados{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.destacados{grid-template-columns:1fr}}
.destacado{position:relative;overflow:hidden;border:1px solid var(--linea-suave);background:var(--carbon);display:block;transition:var(--t)}
.destacado img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .9s cubic-bezier(.22,.61,.36,1);filter:saturate(.95)}
.destacado:hover img{transform:scale(1.06)}
.destacado__cuerpo{position:absolute;inset:auto 0 0;padding:1.8rem 1.6rem;background:linear-gradient(transparent,rgba(11,11,13,.93) 42%)}
.destacado h3{font-size:1.42rem;margin-bottom:.3rem}
.destacado span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}

/* ---------- galería ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-bottom:2.8rem}
.filtro{
  background:transparent;border:1px solid var(--linea-suave);color:var(--gris);
  padding:.62rem 1.35rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;transition:var(--t);border-radius:99px;
}
.filtro:hover{color:var(--crema);border-color:var(--linea)}
.filtro.activo{background:var(--oro);border-color:var(--oro);color:#0B0B0D}
.mosaico{columns:3;column-gap:14px}
@media (max-width:900px){.mosaico{columns:2}}
@media (max-width:380px){.mosaico{columns:1}}
.mosaico figure{break-inside:avoid;margin:0 0 14px;position:relative;overflow:hidden;border:1px solid var(--linea-suave)}
.mosaico img{width:100%;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{
  position:absolute;inset:auto 0 0;padding:1.4rem 1.1rem .95rem;
  background:linear-gradient(transparent,rgba(11,11,13,.88));
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crema);
  opacity:0;transform:translateY(8px);transition:var(--t);
}
.mosaico figure:hover figcaption{opacity:1;transform:none}
.oculto{display:none !important}

/* ---------- equipo ---------- */
.equipo{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--linea-suave);border:1px solid var(--linea-suave)}
@media (max-width:1100px){.equipo{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.equipo{grid-template-columns:repeat(2,1fr)}}
.miembro{background:var(--carbon);padding:2.1rem .9rem;text-align:center;transition:var(--t)}
.miembro:hover{background:var(--superficie)}
.miembro__inicial{
  width:56px;height:56px;margin:0 auto 1.2rem;display:grid;place-items:center;
  border:1px solid var(--linea);transform:rotate(45deg);
}
.miembro__inicial span{transform:rotate(-45deg);font-family:var(--serif);font-size:1.5rem;color:var(--oro)}
.miembro h3{font-size:1.18rem;margin-bottom:.35rem}
.miembro p{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-osc);margin:0}

/* ---------- reseñas ---------- */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem}
.resena{background:var(--carbon);border:1px solid var(--linea-suave);padding:2.2rem 1.9rem;position:relative}
.resena__estrellas{color:var(--oro);letter-spacing:.2em;font-size:.85rem;margin-bottom:1rem}
.resena p{font-family:var(--serif);font-size:1.2rem;line-height:1.55;color:var(--crema);margin-bottom:1.3rem}
.resena__autor{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-osc)}

/* ---------- llamada final ---------- */
.llamada{position:relative;text-align:center;padding:clamp(5rem,10vw,8rem) 0;overflow:hidden;isolation:isolate;border-block:1px solid var(--linea)}
.llamada__media{position:absolute;inset:0;z-index:-2}
.llamada__media img{width:100%;height:100%;object-fit:cover}
.llamada::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,13,.86)}

/* ---------- datos / contacto ---------- */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--linea-suave);border:1px solid var(--linea-suave)}
.dato{background:var(--carbon);padding:2.2rem 1.8rem}
.dato h3{font-size:1.15rem;margin-bottom:.7rem;color:var(--oro)}
.dato p,.dato li{font-size:.94rem;color:var(--gris);margin:0}
.dato ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.dato li{display:flex;justify-content:space-between;gap:1rem}
.dato li b{font-weight:400;color:var(--crema)}
.mapa{border:1px solid var(--linea-suave);filter:grayscale(1) invert(.92) contrast(.85);width:100%;height:440px}

/* ---------- flotante whatsapp ---------- */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:70;
  display:flex;align-items:center;gap:.65rem;padding:.85rem 1.35rem;border-radius:99px;
  background:#1E9E52;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.45);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;transition:var(--t);
}
.wa:hover{transform:translateY(-3px);background:#24b45e}
.wa svg{width:19px;height:19px;fill:currentColor}
@media (max-width:560px){.wa span{display:none}.wa{padding:1rem;border-radius:50%}}

/* ---------- pie ---------- */
.pie{background:var(--carbon);border-top:1px solid var(--linea);padding:4.5rem 0 2.2rem}
.pie__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.pie h4{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);font-family:var(--sans);margin-bottom:1.15rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie a{color:var(--gris);font-size:.92rem;transition:var(--t)}
.pie a:hover{color:var(--oro)}
.pie__marca img{width:52px;margin-bottom:1.1rem}
.pie__legal{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--linea-suave);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.72rem;color:var(--gris-osc)}
@media (max-width:900px){.pie__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__grid{grid-template-columns:1fr}}

/* ---------- animación de entrada ---------- */
.aparece{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto}
  .aparece{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}


/* ============================================================
   Ajustes para móvil
   ============================================================ */
@media (max-width:640px){
  body{font-size:16px}
  .seccion{padding:3.6rem 0}
  .seccion--fino{padding:2.6rem 0}
  .contenedor,.contenedor-ancho{width:min(100% - 2rem,var(--ancho))}

  /* portada */
  .portada{min-height:auto}
  .portada__cuerpo{padding:7.5rem 0 5.5rem}
  .portada__emblema{display:none}
  .portada__media img{object-position:center 42%}
  .portada::after{background:linear-gradient(180deg,rgba(11,11,13,.88) 0%,rgba(11,11,13,.74) 38%,rgba(11,11,13,.90) 78%,rgba(11,11,13,.97) 100%)}
  .epigrafe{font-size:.62rem;letter-spacing:.26em}
  .portada .entradilla{font-size:1rem}
  .sello{font-size:.64rem;letter-spacing:.1em;padding:.45rem .9rem}
  .botonera{width:100%}
  .botonera .btn{width:100%}
  .portadilla{padding:8.5rem 0 3.5rem}

  /* tarjetas destacadas: más anchas y menos altas */
  .destacado img{aspect-ratio:16/11}
  .destacado__cuerpo{padding:1.4rem 1.2rem}

  /* servicios */
  .servicio{padding:2rem 1.5rem}
  .servicio h3{font-size:1.35rem}

  /* galería: las leyendas se ven siempre, no hay hover en el móvil */
  .mosaico{column-gap:10px}
  .mosaico figure{margin-bottom:10px}
  .mosaico figcaption{opacity:1;transform:none;font-size:.58rem;padding:1.1rem .7rem .6rem}
  .filtros{gap:.4rem;margin-bottom:2rem}
  .filtro{padding:.5rem 1rem;font-size:.62rem;letter-spacing:.14em}

  /* equipo */
  .miembro{padding:1.7rem .6rem}
  .miembro__inicial{width:48px;height:48px;margin-bottom:.9rem}
  .miembro h3{font-size:1.05rem}
  .miembro p{font-size:.56rem}

  /* reseñas y datos */
  .resena{padding:1.8rem 1.4rem}
  .resena p{font-size:1.08rem}
  .dato{padding:1.8rem 1.4rem}
  .cifra{padding:2rem .8rem}

  /* pie */
  .pie{padding:3.2rem 0 1.8rem}
  .pie__legal{gap:.6rem;font-size:.68rem}
}

@media (max-width:400px){
  .mosaico{columns:2}
}