/* ⚠️ Los rotulos pequenos estaban a 0.6875rem = 11 px. Con versalitas y
   mucho espaciado eso baja del suelo legible, y estas webs las va a mirar
   gente que no tiene veinte anos. 12 px es el minimo. */
/* Sistema de esta demo. Lo comparten index.html y sus subpáginas.
   ⚠️ Extraído del <style> de la portada el 20/09/2026: con una copia por
   página, a la tercera edición divergen. */
/* ───────────────────────────────────────────────────────────────────────────
   CHRIS PELUQUERÍA — «Se peina con el ratón»
   Dirección: Ragged Edge (refero.design). Brutalismo editorial sobre blanco:
   tinta y aire, tipografía expandida enorme, y UN solo golpe de color que se
   usa como exclamación y nunca como decoración. Aquí ese golpe de color no
   está en la interfaz: está en el pelo.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --papel:#ffffff;
  --lienzo:#faf7f4;      /* el blanco cálido de la casa, nunca blanco puro de pantalla */
  --tinta:#181414;       /* la casi-negra que carga el 90 % de la interfaz */
  --grafito:#4a4342;
  --ceniza:#a39c99;
  --niebla:#e3dcd7;      /* filetes */
  --beso:#d6294b;        /* EL acento. Solo contorno y una palabra. Nunca relleno grande */
  --max:1380px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--lienzo); color:var(--tinta);
  font-family:'Lora',Georgia,serif; font-weight:400;
  font-size:17px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--beso); color:#fff}
:focus-visible{outline:2px solid var(--beso); outline-offset:4px; border-radius:2px}
p{margin:0}
a{color:inherit; text-decoration:none}

/* La familia expandida es la firma. Siempre en caja alta, nunca por debajo de 11 px,
   y siempre en peso 400–500: la anchura ya aporta todo el peso que hace falta. */
.exp{font-family:'Archivo',Impact,sans-serif; font-weight:500; text-transform:uppercase;
  font-stretch:125%; letter-spacing:-.018em; line-height:1.06}
h1,h2,h3{margin:0; font-weight:400}

.env{width:min(100% - 1.75rem, var(--max)); margin-inline:auto}
@media(min-width:900px){ .env{width:min(100% - 5rem, var(--max))} }
.con-dedo{display:none}
@media(hover:none),(pointer:coarse){ .con-raton{display:none} .con-dedo{display:inline} }
.micro{font-family:'Archivo',sans-serif; font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grafito)}

/* ── EL CAMPO DE HEBRAS ──────────────────────────────────────────────────── */
#melena{position:fixed; inset:0; z-index:0; pointer-events:none}
#melena canvas{display:block; width:100%; height:100%}
.capa{position:relative; z-index:2}

/* ── NAVEGACIÓN ──────────────────────────────────────────────────────────── */
nav{position:fixed; inset:0 0 auto; z-index:40; padding:1.05rem 0;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent}
nav.posada{background:rgba(250,247,244,.82); backdrop-filter:blur(16px);
  border-bottom-color:var(--niebla)}
nav .env{display:flex; align-items:center; justify-content:space-between; gap:1rem}
nav .marca{font-family:'Archivo',sans-serif; font-weight:600; font-stretch:125%;
  text-transform:uppercase; font-size:.9375rem; letter-spacing:-.01em}
nav ul{display:none; list-style:none; margin:0; padding:0; gap:2.25rem}
@media(min-width:1000px){ nav ul{display:flex} }
nav ul a{position:relative; font-family:'Archivo',sans-serif; font-size:.75rem;
  font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--grafito);
  transition:color .3s var(--ease)}
nav ul a::after{content:''; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--beso); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease)}
nav ul a:hover{color:var(--tinta)}
nav ul a:hover::after{transform:scaleX(1); transform-origin:left}

/* Pastillas de 40–64 px de radio: la cápsula blanda contra la tipografía angulosa. */
.pil{display:inline-flex; align-items:center; gap:.6rem; min-height:46px;
  padding:.8rem 1.5rem; border-radius:56px; cursor:pointer;
  font-family:'Archivo',sans-serif; font-size:.75rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  background:var(--tinta); color:var(--lienzo); border:1px solid var(--tinta);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)}
.pil:hover{background:var(--beso); border-color:var(--beso); transform:translateY(-2px)}
.pil.hueca{background:transparent; color:var(--tinta); border-color:var(--beso)}
.pil.hueca:hover{background:var(--beso); color:#fff}
.pil svg{width:15px; height:15px; flex:none}

/* ── PORTADA ─────────────────────────────────────────────────────────────── */
header{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:7rem 0 clamp(2rem,6vh,4rem)}
header h1{font-size:clamp(2.6rem,10.2vw,9.6rem)}
header h1 .beso{color:var(--beso)}
.lin{display:block; overflow:hidden}
.lin > span{display:block}
.tras{margin-top:2.6rem; display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem}
.tras p{max-width:38ch; font-size:1.0625rem; line-height:1.75; color:var(--grafito)}
.cifras{display:grid; grid-template-columns:repeat(3,auto); gap:1.75rem;
  border-top:1px solid var(--niebla); margin-top:3.2rem; padding-top:1.1rem}
@media(min-width:700px){ .cifras{gap:3.5rem} }
.cifras b{display:block; font-family:'Archivo',sans-serif; font-weight:500;
  font-stretch:125%; font-size:1.75rem; letter-spacing:-.02em; margin-bottom:.1rem}

/* ── SECCIONES ───────────────────────────────────────────────────────────── */
.bloque{padding:clamp(6rem,17vh,11.25rem) 0}
.rotulo{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.rotulo h2{font-size:clamp(1.9rem,5.4vw,4.4rem); max-width:16ch}
.rotulo h2 .beso{color:var(--beso)}
.rotulo p{max-width:32ch; color:var(--grafito); font-size:.9375rem; line-height:1.8}

/* Cristina: el bloque de autoría va sobre papel, no sobre el lienzo. */
.autoria{background:var(--papel); border:1px solid var(--niebla); border-radius:22px;
  padding:clamp(1.9rem,4.5vw,4rem)}
.autoria .cita{font-size:clamp(1.35rem,3.5vw,2.5rem); line-height:1.32; max-width:21ch;
  font-style:italic}
.autoria .cuerpo{margin-top:2.6rem; display:grid; gap:1.9rem; max-width:64ch}
@media(min-width:900px){
  .autoria{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem);
    align-items:start}
  .autoria .cuerpo{margin-top:.4rem}
}
.autoria p{color:var(--grafito); line-height:1.85}
.firma{margin-top:2rem; padding-top:1rem; border-top:1px solid var(--niebla)}

/* ── LAS TRES ESPECIALIDADES ─────────────────────────────────────────────── */
.tres{display:grid; gap:1.25rem}
@media(min-width:960px){ .tres{grid-template-columns:repeat(3,1fr); gap:1.5rem} }
.esp{background:var(--papel); border:1px solid var(--niebla); border-radius:22px;
  padding:clamp(1.6rem,2.6vw,2.4rem); display:flex; flex-direction:column;
  min-height:clamp(300px,42vh,420px); cursor:default;
  transition:border-color .5s var(--ease), transform .5s var(--ease)}
.esp:hover, .esp.viva{border-color:var(--beso); transform:translateY(-5px)}
.esp .n{font-family:'Archivo',sans-serif; font-size:.75rem; font-weight:500;
  letter-spacing:.16em; color:var(--ceniza); font-variant-numeric:tabular-nums}
.esp h3{margin:auto 0 .9rem; font-size:clamp(1.5rem,2.5vw,2.05rem);
  font-family:'Archivo',sans-serif; font-weight:500; font-stretch:125%;
  text-transform:uppercase; letter-spacing:-.018em; line-height:1.04; max-width:11ch}
.esp p{color:var(--grafito); font-size:.9375rem; line-height:1.8}
/* La muestra del tono: el color que esa técnica pone en el pelo. */
.esp .tono{margin-top:1.6rem; height:5px; border-radius:99px; background:var(--niebla);
  overflow:hidden}
/* ⚠️ `transform`, no `width` ni `padding`. Animar una propiedad de maquetación
   obliga al navegador a recalcular posiciones y a repintar en CADA fotograma,
   que es de donde salen los tirones; `transform` va en la GPU y no toca el
   flujo. Lo marcaron las dos skills el 21/09/2026. */
.esp .tono i{display:block; height:100%; width:100%; transform:scaleX(0);
  transform-origin:left; transition:transform .9s var(--ease)}
.esp:hover .tono i, .esp.viva .tono i{transform:scaleX(1)}

/* ── EL ESPEJO ───────────────────────────────────────────────────────────── */
.espejo{text-align:center; padding:clamp(6rem,20vh,13rem) 0}
.espejo h2{font-size:clamp(2rem,6.6vw,5.6rem); max-width:19ch; margin-inline:auto;
  font-family:'Lora',serif; font-style:italic; font-weight:400; line-height:1.18;
  letter-spacing:-.015em}
.espejo h2 .beso{color:var(--beso); font-style:normal;
  font-family:'Archivo',sans-serif; font-weight:500; font-stretch:125%;
  text-transform:uppercase; letter-spacing:-.02em}

/* ── CITA ────────────────────────────────────────────────────────────────── */
/* ⚠️ Fondo TRANSLUCIDO, no solido. El cierre era un bloque opaco que tapaba la
   melena, asi que el hilo de la pagina —el pelo— desaparecia justo al final.
   Ahora se ve a traves, y alli el pelo se aclara para leerse sobre el oscuro:
   la web abre con pelo castaño sobre crema y cierra con pelo claro sobre negro.
   Natxo, 21/09/2026: eligio que el pelo fuese el hilo de toda la web. */
#cita{background:rgba(24,20,20,.90); color:var(--lienzo); border-radius:28px 28px 0 0;
  padding:clamp(4.5rem,13vh,8.5rem) 0 0; position:relative; z-index:3; margin-top:4rem}
#cita h2{font-size:clamp(2.2rem,8.4vw,7.2rem); max-width:13ch}
#cita h2 .beso{color:var(--beso)}
#cita .sub{margin-top:1.9rem; max-width:40ch; color:#bfb6b2; line-height:1.8}
#cita .pil{background:var(--lienzo); color:var(--tinta); border-color:var(--lienzo)}
#cita .pil:hover{background:var(--beso); color:#fff; border-color:var(--beso)}
#cita .pil.hueca{background:transparent; color:var(--lienzo); border-color:#5b5250}
#cita .pil.hueca:hover{background:var(--lienzo); color:var(--tinta); border-color:var(--lienzo)}
.acciones{margin-top:2.6rem; display:flex; gap:.9rem; flex-wrap:wrap}
footer{margin-top:clamp(4rem,11vh,7rem); border-top:1px solid #362f2e; padding:2rem 0 2.6rem}
footer .env{display:flex; flex-wrap:wrap; gap:1.4rem 3rem; justify-content:space-between}
footer .col{color:#bfb6b2; font-size:.875rem; line-height:1.85}
footer .col b{display:block; font-family:'Archivo',sans-serif; font-weight:500;
  font-stretch:125%; text-transform:uppercase; font-size:.75rem; letter-spacing:.14em;
  color:var(--lienzo); margin-bottom:.55rem}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .rev,.tras,.cifras{opacity:1 !important; transform:none !important}
}

/* ── El salón de verdad ───────────────────────────────────────────────────
   Esta web era tipografía y una cortina de pelo dibujada: ni una fotografía
   en toda la página, mientras su web real sí enseña el salón. Sobre un fondo
   claro y muy tipográfico, una banda de fotos a sangre es el respiro y, sobre
   todo, la prueba de que el sitio existe.

   ⚠️ `100vw` con `margin-left:50%` para salirse del contenedor centrado. El
   `overflow-x:hidden` del body evita la barra horizontal. */
.prueba{margin:clamp(4rem,10vh,7rem) 0; width:100vw; margin-left:50%;
  transform:translateX(-50%); display:grid; gap:2px; grid-template-columns:1fr}
@media(min-width:880px){ .prueba{grid-template-columns:repeat(3,1fr)} }
/* Altura fija, no proporción: con columnas iguales y `aspect-ratio` cada foto
   sale de una altura distinta y la banda queda escalonada. */
.prueba figure{position:relative; margin:0; overflow:hidden;
  height:clamp(300px,46vh,560px); background:#efece7}
.prueba img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){ .prueba figure:hover img{transform:scale(1.07)} }
.prueba figcaption{position:absolute; inset:auto 0 0 0; padding:1.5rem 1.35rem 1.2rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(to top, rgba(12,10,9,.84), rgba(12,10,9,0));
  display:flex; gap:.55rem; align-items:baseline; flex-wrap:wrap}
.prueba figcaption b{font-weight:700}
.prueba figcaption span{opacity:.72; letter-spacing:.06em; text-transform:none;
  font-size:.8125rem}

/* ── El índice de servicios ───────────────────────────────────────────────
   Antes eran tres tarjetas iguales en horizontal, que es el patrón que la
   skill `design-taste-frontend` prohíbe por su nombre y que Natxo describió
   como «muy básico». Ahora es un índice: filas a pantalla ancha, número
   enorme, y la fila entera es la zona sensible que tiñe la melena de arriba.

   Las filas alternan sangrado para que la columna de números no forme un peine
   perfecto: es la asimetría que pide la skill sin romper la lectura. */
.indice{ list-style:none; margin:0; padding:0; counter-reset:svc }
.indice li{
  position:relative; display:grid; gap:.6rem 2.4rem; align-items:start;
  padding:clamp(2.2rem,5vh,3.4rem) 0;
  border-top:1px solid var(--niebla);
}
@media(min-width:820px){
  .indice li{ grid-template-columns:minmax(0,7rem) 1fr minmax(0,12rem) }
  .indice li:nth-child(even){ padding-left:clamp(2rem,6vw,7rem) }
}
.indice li:last-child{ border-bottom:1px solid var(--niebla) }


.indice h3{
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 125;
  text-transform:uppercase; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.4rem,3.4vw,2.3rem); line-height:1.02; margin:0 0 .7rem;
}
.indice p{ margin:0; max-width:52ch; line-height:1.8; color:var(--grafito) }

/* La barra de tono: los dos colores reales de esa técnica, raíz y punta. Es
   el mismo par que tiñe la melena de la portada, así que la barra no es un
   adorno: es la leyenda de lo que va a pasar arriba. */
.indice .tono{
  display:block; height:3px; align-self:center; border-radius:99px;
  background:linear-gradient(90deg, var(--a), var(--b));
  transform:scaleX(.34); transform-origin:left center;
  transition:transform .6s var(--ease);
}
@media(max-width:819px){ .indice .tono{ margin-top:1.1rem } }

@media (hover:hover) and (pointer:fine){
  /* El sangrado al pasar por encima mueve el CONTENIDO, no la fila: el filete
     de separación se queda quieto, que además queda mejor. */
  .indice li > *{ transition:transform .55s var(--ease) }
  .indice li:hover > *{ transform:translateX(clamp(1rem,2.5vw,2.2rem)) }
  .indice li:hover .tono{ transform:scaleX(1) }
}

/* ── El espejo, ahora sobre su salón ──────────────────────────────────────
   El velo va en el dorado de la casa, no en un gris neutro: el fondo cambia
   de foto pero el color de Chris no. */
.espejo.fondo-vivo{
  /* ⚠️ Velo FUERTE. Su salón es blanco, suelo de madera claro y focos: una
     foto muy luminosa. Con el velo suave que sirve para una foto oscura, el
     texto blanco se pierde en cuanto pasa por encima de una pared. Se mide por
     la foto más clara del carrusel, no por la media. */
  --fv-velo: rgba(20,16,16,.90);
  --fv-velo-2: rgba(20,16,16,.74);
  padding:clamp(7rem,20vh,12rem) 0;
  color:var(--papel);
}
.espejo.fondo-vivo h2{ color:var(--papel); text-shadow:0 2px 24px rgba(0,0,0,.55) }
/* El acento se aclara lo justo para que aguante sobre foto, pero sigue siendo
   SU rojo. `#ff5f7a` se iba a rosa chicle y dejaba de ser la marca. */
.espejo.fondo-vivo .beso{ color:#ef4a6a }

/* ⚠️ Neutralizar la tarjeta vieja dentro del índice.
   `.esp` sigue haciendo falta porque es la clase a la que está enganchada la
   melena de la portada —al pasar por encima se tiñe con los tonos de esa
   técnica— pero su maquetación de tarjeta (fondo blanco, borde redondeado y
   `min-height` de 420 px) sobra aquí: dejaba cada fila dentro de una caja
   blanca enorme y medio vacía. Se anula solo la maquetación, nunca el gancho. */
.indice li.esp{
  background:none; border:0; border-radius:0; min-height:0;
  border-top:1px solid var(--niebla);
  padding:clamp(2.2rem,5vh,3.4rem) 0;
  display:grid;
}
.indice li.esp:hover, .indice li.esp.viva{ transform:none; border-color:var(--niebla) }
.indice li.esp:last-child{ border-bottom:1px solid var(--niebla) }
.indice li.esp h3{ margin:0 0 .7rem; max-width:none; font-stretch:125%; font-weight:600 }
.indice li.esp p{ font-size:1rem }
.indice li.esp .tono{ margin-top:0; height:3px; background:linear-gradient(90deg,var(--a),var(--b)) }
@media(min-width:820px){
  .indice li.esp{ grid-template-columns:minmax(0,7rem) 1fr minmax(0,12rem) }
  .indice li.esp:nth-child(even){ padding-left:clamp(2rem,6vw,7rem) }
  .indice li.esp .tono{ margin-top:0 }
}
@media(max-width:819px){ .indice li.esp .tono{ margin-top:1.1rem } }

/* «Cristina», sobre ella peinando. El velo es el marrón casi negro de la casa. */
#cristina.fondo-vivo{
  --fv-velo: rgba(20,16,16,.91);
  --fv-velo-2: rgba(20,16,16,.79);
  color:var(--lienzo);
}
#cristina.fondo-vivo .cita, #cristina.fondo-vivo h2{ color:#fff }
#cristina.fondo-vivo .cuerpo p{ color:rgba(255,255,255,.88) }
#cristina.fondo-vivo .beso{ color:#ef4a6a }

/* El color con el que `tacto.css` tine las superficies del navegador
   —seleccion, cursor, barra y anillo de foco—. Aqui es el rosa con el que ya se marca el enfasis.
   Va al final para ganar al valor de reserva de tacto.css. */
:root{ --tinte: #ef4a6a }

/* ── #cristina · fuera la tarjeta blanca ───────────────────────────────────
   ⚠️ FALLO REAL, detectado por Natxo el 21/09/2026 en una captura: la sección
   se veía en blanco con dos palabras rojas sueltas flotando.

   Causa: `.autoria` es una tarjeta con fondo `--papel`, borde y esquinas
   redondeadas. Al convertir la sección en fondo vivo puse el texto en blanco
   contando con el velo oscuro… pero la tarjeta blanca se interpone entre la
   foto y el texto. Blanco sobre blanco: solo se leían las dos palabras que van
   en rojo. Y de paso la tarjeta anulaba entero el fondo vivo, que era
   justamente lo que se había ido a poner ahí.

   `impeccable` ya lo advierte en su suelo de calidad: *«la tarjeta es el
   contenedor perezoso»*. Aquí el contenedor sobraba y además rompía.

   El texto pasa a ir DIRECTO sobre la fotografía. */
#cristina .autoria{
  background:none; border:0; border-radius:0; padding:0;
}
#cristina .autoria p{ color:rgba(255,255,255,.90) }
#cristina .autoria .cita{ color:#fff }
#cristina .autoria .micro{ color:rgba(255,255,255,.62) }
#cristina .autoria .firma{ border-top-color:rgba(255,255,255,.22) }

/* El cierre, con textura y con un velo MÁS CLARO que el de #espejo: si los dos
   llevan el mismo negro, tener foto detrás no arregla nada — siguen siendo la
   misma pantalla dos veces seguidas. */
#cita.fondo-vivo{
  --fv-velo: rgba(24,20,20,.93);
  --fv-velo-2: rgba(40,28,26,.78);
  background:none !important;
}