/* ═══════════════════════════════════════════════════════════════════════════
   Luisa Fonseca Nails · Collado Villalba
   ───────────────────────────────────────────────────────────────────────────
   EL AVISO QUE ME HICE A MÍ MISMO, y va primero porque es el riesgo de esta
   web: su identidad gráfica ya está decidida por ella y es CREMA + SERIF DE
   ALTO CONTRASTE con versalitas espaciadas (mírese su cartel de precios). Y
   eso es, literalmente, el tópico número uno del "diseño hecho por IA":
   crema + serif de alto contraste + acento terracota.

   Se respeta su identidad (es la suya, no se le cambia la marca) y se sale del
   tópico invirtiendo la relación y sacando el color de SUS fotos:
     · el fondo NO es crema: es NOGAL OSCURO, la madera del mueble de su salón.
     · el crema queda para el texto y para una sola sección clara.
     · y el acento no es terracota: es el ROSA NUDE exacto de las uñas que hace
       (sacado de la foto m03, que es un trabajo suyo de verdad).
   Un serif de alto contraste sobre nogal, con rosa nude, no se parece a la
   plantilla de crema.

   EL OBJETO FIRMA es la CALCULADORA DE PRECIO CERRADO, y no es un adorno: su
   tarifa tiene DOS precios según quién te atienda (35-40 € el equipo,
   45-50 € Luisa) más tres niveles de decoración. Es un dato que casi ningún
   salón publica y que hoy no se puede consultar en ninguna parte, porque su
   dominio sirve un error.

   TIPOGRAFÍA: Bodoni Moda para titulares (es la que ella ya usa en su cartel)
   y Tenor Sans para el texto. Ninguna de las dos la usa ninguna hermana.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bodoni Moda';src:url(fonts/bodoni.woff2)format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Tenor Sans';src:url(fonts/tenor.woff2)format('woff2');font-weight:400;font-display:swap}

:root{
  --nogal:#241a17;      /* la madera del mueble de su salón. Fondo dominante */
  --nogal-2:#2f2320;    /* las cajas */
  --nogal-3:#3d2e2a;    /* filetes */
  --crema:#f3ece6;      /* su crema, aquí para el texto */
  --crema-2:#c8b8ae;    /* secundario */
  --nude:#e79aa2;       /* EL ROSA NUDE de las uñas que hace */
  --nude-cl:#f6d5d6;    /* su versión clara */
  --r:8px;
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--nogal);color:var(--crema);
  font:400 clamp(16px,1.02vw,17.5px)/1.68 'Tenor Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--nude);outline-offset:3px;border-radius:3px}
.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--nude);color:var(--nogal);
  padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.barra{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:1.4rem;
  padding:.8rem clamp(1rem,3vw,2.4rem);background:rgba(36,26,23,.84);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nogal-3);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.barra.oculta{transform:translateY(-104%)}
.marca{display:grid;line-height:1;margin-right:auto}
.marca-t{font-family:'Bodoni Moda',serif;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:400;
  letter-spacing:.02em}
.marca-s{font-size:max(12.5px,.62rem);letter-spacing:.42em;text-transform:uppercase;
  color:var(--nude);margin-top:.4em}
.barra-nav{display:flex;gap:1.5rem;font-size:.92rem;color:var(--crema-2);letter-spacing:.03em}
.barra-nav a{padding:.4rem 0;border-bottom:1px solid transparent}
.barra-nav a:hover{color:var(--crema);border-bottom-color:var(--nude)}
.barra-cta{background:var(--nude);color:var(--nogal);padding:.62rem 1.2rem;border-radius:999px;
  font-size:.92rem;white-space:nowrap;letter-spacing:.03em;will-change:transform}
@media (max-width:900px){.barra-nav{display:none}}

/* ── portada ──────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;
  padding:0 clamp(1.1rem,4vw,3.4rem) clamp(2.5rem,7vh,4.5rem)}
.hero-foto{position:absolute;inset:0;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--nogal) 2%,rgba(36,26,23,.8) 32%,rgba(36,26,23,.14) 66%,rgba(36,26,23,.42) 100%)}
.hero-txt{position:relative;z-index:2}
.hero-sup{font-size:max(12.5px,.78rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--nude);margin-bottom:1.2rem}
.hero-h1{font-family:'Bodoni Moda',serif;font-weight:400;
  font-size:clamp(2.5rem,7.2vw,6.4rem);line-height:1.02;letter-spacing:-.01em;max-width:20ch}
.hero-h1 em{font-style:italic;color:var(--nude)}
.hero-p{max-width:44ch;margin-top:1.4rem;color:var(--crema-2)}
.hero-p b{color:var(--crema);font-weight:400;border-bottom:1px solid var(--nude)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.hero-nota{position:relative;z-index:2;margin-top:1.4rem;font-size:.86rem;color:var(--crema-2)}
.hero-nota b{color:var(--nude)}

/* ── piezas comunes ──────────────────────────────────────────────────── */
.etiqueta{font-size:max(12.5px,.76rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--nude);margin-bottom:.9rem}
.h2{font-family:'Bodoni Moda',serif;font-weight:400;
  font-size:clamp(1.9rem,4.8vw,4rem);line-height:1.04;letter-spacing:-.01em}
.parr{max-width:56ch;margin-top:1.1rem;color:var(--crema-2)}
.parr b{color:var(--crema);font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.7rem;border-radius:999px;font-size:.98rem;letter-spacing:.03em;
  transition:transform .2s,box-shadow .2s;will-change:transform}
.btn-ac{background:var(--nude);color:var(--nogal);box-shadow:0 10px 26px -14px rgba(231,154,162,.85)}
.btn-ac:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(231,154,162,1)}
.btn-linea{border:1px solid var(--nogal-3);color:var(--crema)}
.btn-linea:hover{border-color:var(--nude);color:var(--nude)}
.btn-ancho{width:100%}
.sube{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sube{opacity:1;transform:none;transition:none}}

/* ── LA PIEZA: la calculadora ────────────────────────────────────────── */
.cita{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.cita-cab{max-width:44ch}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(1.2rem,2.5vw,2rem);margin-top:clamp(2rem,4vh,3rem);align-items:start}
@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-mando{background:var(--nogal-2);border:1px solid var(--nogal-3);border-radius:var(--r);
  padding:clamp(1.2rem,3vw,2rem);display:grid;gap:clamp(1.5rem,3vw,2.2rem)}
.paso-t{display:flex;align-items:center;gap:.7rem;font-family:'Bodoni Moda',serif;
  font-size:1.25rem;margin-bottom:.9rem}
.paso-n{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--nude);
  color:var(--nude);border-radius:50%;font-size:.85rem;font-family:'Tenor Sans',sans-serif}
.paso-n2{margin-top:.8rem;font-size:.85rem;color:var(--crema-2)}
.ops{display:flex;flex-wrap:wrap;gap:.5rem}
.op{border:1px solid var(--nogal-3);border-radius:999px;padding:.65rem 1.15rem;font-size:.95rem;
  transition:.2s;min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
.op span{font-size:.8rem;color:var(--crema-2)}
.op:hover{border-color:var(--nude)}
.op.on{background:var(--nude);border-color:var(--nude);color:var(--nogal)}
.op.on span{color:rgba(36,26,23,.68)}

.calc-tot{background:linear-gradient(165deg,var(--nogal-3),var(--nogal-2) 65%);
  border:1px solid var(--nogal-3);border-radius:var(--r);padding:clamp(1.2rem,3vw,1.8rem);
  display:grid;gap:.7rem;position:sticky;top:5.6rem}
@media (max-width:960px){.calc-tot{position:static}}
.tot-r{font-size:max(12.5px,.78rem);letter-spacing:.24em;text-transform:uppercase;color:var(--crema-2)}
.tot-n{font-family:'Bodoni Moda',serif;font-size:clamp(3.4rem,8vw,5rem);line-height:.95;
  color:var(--nude);display:flex;align-items:baseline;gap:.12em}
.tot-n b{font-size:.42em;font-weight:400;opacity:.75}
.tot-d{font-size:.98rem}
.tot-l{display:grid;gap:.25rem;padding:.8rem 0;border-top:1px solid var(--nogal-3);
  border-bottom:1px solid var(--nogal-3);font-size:.86rem;color:var(--crema-2)}
.tot-l li{display:flex;justify-content:space-between;gap:.8rem}
.tot-n2{font-size:.82rem;color:var(--crema-2)}
.tot-n2 b{color:var(--crema);font-weight:400}
.tot-av{font-size:max(12.5px,.76rem);color:var(--crema-2);opacity:.78;line-height:1.55}
.cita-por{margin-top:clamp(1.6rem,3vh,2.4rem);max-width:70ch;color:var(--crema-2);font-size:.95rem}
.cita-por b{color:var(--crema);font-weight:400}

/* ── los trabajos ────────────────────────────────────────────────────── */
.trabajos{padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.trabajos-cab{max-width:40ch}
/* seis piezas: 3+3 */
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.2rem);
  margin-top:clamp(2rem,4vh,3rem)}
@media (max-width:900px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.galeria{grid-template-columns:minmax(0,1fr)}}
.gal-i{border-radius:var(--r);overflow:hidden;background:var(--nogal-2)}
.gal-i img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal-i:hover img{transform:scale(1.04)}
.gal-cita{display:grid;align-content:center;gap:1rem;padding:clamp(1.2rem,3vw,1.8rem);
  background:var(--nude);color:var(--nogal)}
.gal-cita blockquote{font-family:'Bodoni Moda',serif;font-size:1.15rem;line-height:1.45;font-style:italic}
.gal-f{font-size:max(12.5px,.76rem);letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* ── el equipo: la única sección clara ───────────────────────────────── */
.equipo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding:clamp(3.5rem,9vh,6.5rem) clamp(1.1rem,4vw,3.4rem);
  background:var(--crema);color:var(--nogal)}
.equipo .etiqueta{color:#b06a72}
.equipo .parr{color:#6b5852}
.equipo .parr b{color:var(--nogal)}
.equipo-foto img{border-radius:var(--r);aspect-ratio:14/8;object-fit:cover}
.nombres{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.nombres li{font-family:'Bodoni Moda',serif;font-size:1.15rem;padding:.5rem 1.1rem;
  border:1px solid rgba(36,26,23,.2);border-radius:999px}
.equipo-n{margin-top:1.3rem;font-size:.9rem;color:#6b5852}
@media (max-width:960px){.equipo{grid-template-columns:minmax(0,1fr)}.equipo-foto{order:-1}}

/* ── lo que ella escribe ─────────────────────────────────────────────── */
.palabras{padding:clamp(3.5rem,9vh,6rem) clamp(1.1rem,4vw,3.4rem);max-width:900px;
  margin-inline:auto;text-align:center}
.palabras-q{font-family:'Bodoni Moda',serif;font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.28}
.palabras-q span{display:block;font-family:'Tenor Sans',sans-serif;font-style:normal;
  font-size:max(12.5px,.78rem);letter-spacing:.26em;text-transform:uppercase;
  color:var(--nude);margin-top:1.4rem}
.palabras-p{margin-top:2rem;color:var(--crema-2);font-size:.98rem}
.palabras-p b{color:var(--crema);font-weight:400}

/* ── dónde ───────────────────────────────────────────────────────────── */
.donde{padding:clamp(3rem,8vh,6rem) clamp(1.1rem,4vw,3.4rem);max-width:var(--max);margin-inline:auto}
.donde-rej{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.7vw,1.3rem);
  margin-top:clamp(2rem,4vh,3rem)}
@media (max-width:1100px){.donde-rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.donde-rej{grid-template-columns:minmax(0,1fr)}}
.dato{background:var(--nogal-2);border:1px solid var(--nogal-3);border-radius:var(--r);
  padding:1.3rem;display:grid;gap:.6rem;align-content:start}
.dato-t{font-size:max(12.5px,.72rem);letter-spacing:.22em;text-transform:uppercase;color:var(--nude)}
.dato-h{display:grid;grid-template-columns:auto auto;gap:.3rem .9rem;font-size:.92rem}
.dato-h dt{color:var(--crema-2)}
.dato-h dd{text-align:right;font-variant-numeric:tabular-nums}
.dato-g{font-family:'Bodoni Moda',serif;font-size:1.6rem;color:var(--nude);
  justify-self:start;min-height:34px;will-change:transform}
.dato-l{color:var(--crema-2);font-size:.92rem;border-bottom:1px solid transparent;
  justify-self:start;padding:.25rem 0;min-height:30px}
.dato-l:hover{color:var(--nude);border-bottom-color:var(--nude)}
.dato-d{font-size:.92rem;color:var(--crema-2);line-height:1.6}
.dato-n{font-size:.82rem;color:var(--crema-2);opacity:.85;line-height:1.5}

/* ── pie ─────────────────────────────────────────────────────────────── */
.pie{padding:clamp(2.5rem,6vh,4rem) clamp(1.1rem,4vw,3.4rem);border-top:1px solid var(--nogal-3);
  display:grid;gap:1.3rem;max-width:var(--max);margin-inline:auto}
.pie-a{display:grid;gap:.6rem}
.marca-t-pie{font-size:1.5rem}
.pie-d{font-size:.9rem;color:var(--crema-2);line-height:1.75}
.pie-n{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.88rem;color:var(--crema-2)}
.pie-n a{border-bottom:1px solid transparent;padding:.3rem 0;min-height:30px}
.pie-n a:hover{color:var(--nude);border-bottom-color:var(--nude)}
.pie-c{font-size:max(12.5px,.78rem);color:var(--crema-2);opacity:.7;max-width:90ch;line-height:1.6;
  padding-top:1.1rem;border-top:1px solid var(--nogal-3)}