/* ⚠️ 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. */
/* ───────────────────────────────────────────────────────────────────────────
   KAREN ORTIZ — «La luz que trabaja»
   Dirección: Active Theory (refero.design). Vacío negro absoluto, la interfaz
   susurra y la escena 3D carga todo el peso cromático. Un solo acento.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --void:#000000;          /* el lienzo. Negro absoluto, nunca gris */
  --niebla:#c6c6c6;        /* texto terciario */
  --ceniza:#4d4d4d;        /* filetes: el vacío no proyecta sombras */
  --humo:#8a8a8a;
  --blanco:#ffffff;
  --luz:#e0a07e;           /* el acento, racionado: luz cálida sobre piel */
  --max:1320px;
  --filete:1px solid var(--ceniza);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--void); color:var(--blanco);
  /* ⚠️ Archivo ya es la sans de Chris. Dos demos con la misma voz vuelven a
    oler a plantilla, que es justo lo que se esta corrigiendo. Schibsted es
    una neo-grotesca limpia que aguanta al lado de una didone. */
  font-family:'Schibsted Grotesk',system-ui,sans-serif;   /* ⚠️ Era Space Grotesk, en la
    lista de tipografias que las dos skills marcan como agotadas: salen en
    tantas webs generadas por IA que ya no distinguen nada. */ font-weight:300;
  font-size:16px; line-height:1.55; letter-spacing:.005em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--luz); color:#000}
:focus-visible{outline:2px solid var(--luz); outline-offset:3px; border-radius:2px}

/* ⚠️ Era Instrument Serif, y `design-taste-frontend` la nombra por su nombre:
   «prohibidas como opcion por defecto: Fraunces e Instrument Serif, las dos
   serif favoritas de los modelos». Era la voz de TODA la web.
   Bodoni Moda es una didone de contraste alto: el registro de la prensa de
   belleza, que es exactamente donde vive un centro medico-estetico, y no la
   eligiria una IA por defecto. */
h1,h2,h3{font-family:'Bodoni Moda',Georgia,serif; font-weight:400; margin:0;
  letter-spacing:-.012em; line-height:.94}
p{margin:0}
a{color:inherit; text-decoration:none}

.env{width:min(100% - 2rem, var(--max)); margin-inline:auto}
@media(min-width:900px){ .env{width:min(100% - 5rem, var(--max))} }

/* La pista de interacción se dice distinta según haya ratón o dedo. */
.con-dedo{display:none}
@media(hover:none),(pointer:coarse){ .con-raton{display:none} .con-dedo{display:inline} }

/* etiqueta de chrome: micro, tracked, geométrica */
.chrome{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--humo); font-weight:400}

/* ── ESCENA ──────────────────────────────────────────────────────────────── */
/* ⚠️ `-1`, no `0`. La molecula vive en una capa FIJA detras de toda la pagina:
   con z-index 0 se dibujaba por ENCIMA del contenido y se comia el texto de
   las tarjetas por las que pasaba. A -1 queda debajo de todo, y como las
   secciones no tienen fondo opaco se ve entera de arriba abajo, que es
   justo lo que pidio Natxo el 21/09/2026. */
#escena{position:fixed; inset:0; z-index:-1; pointer-events:none}
#escena canvas{display:block; width:100%; height:100%}
.capa{position:relative; z-index:2}
/* En pantallas pequeñas la esfera ocupa todo el fondo y se come el contraste
   del texto. La escena es decoración; el texto no se negocia. */
@media(max-width:860px){
  #escena::after{content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.72) 100%)}
}

/* ── ENTRADA ─────────────────────────────────────────────────────────────── */
#entrada{position:fixed; inset:0; z-index:90; background:var(--void);
  display:flex; align-items:flex-end; justify-content:center; padding:0 0 12vh}
#entrada .marca{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Bodoni Moda',serif; font-size:clamp(2rem,7vw,4.5rem); opacity:0;
  white-space:nowrap}
#entrada .cuenta{font-variant-numeric:tabular-nums; font-size:.75rem;
  letter-spacing:.2em; color:var(--humo)}
#barra{position:absolute; left:0; bottom:0; height:1px; width:0%; background:var(--blanco)}

/* ── NAVEGACIÓN ──────────────────────────────────────────────────────────── */
nav{position:fixed; top:0; left:0; right:0; z-index:40; padding:1.15rem 0;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease)}
nav.posada{background:rgba(0,0,0,.55); backdrop-filter:blur(14px); border-bottom-color:var(--ceniza)}
nav .env{display:flex; align-items:center; justify-content:space-between; gap:1rem}
nav .logo{font-family:'Bodoni Moda',serif; font-size:1.0625rem; letter-spacing:.02em}
nav .logo em{font-style:italic; color:var(--luz)}
nav ul{display:none; list-style:none; margin:0; padding:0; gap:2rem}
@media(min-width:980px){ nav ul{display:flex} }
nav ul a{position:relative; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--niebla); transition:color .3s var(--ease)}
nav ul a::after{content:''; position:absolute; left:0; bottom:-5px; height:1px; width:100%;
  background:var(--luz); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease)}
nav ul a:hover{color:var(--blanco)}
nav ul a:hover::after{transform:scaleX(1); transform-origin:left}

.pastilla{display:inline-flex; align-items:center; gap:.6rem; min-height:44px;
  padding:.72rem 1.35rem; border-radius:500px; cursor:pointer;
  font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; font-weight:400;
  background:var(--blanco); color:#000;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease)}
.pastilla:hover{background:var(--luz); transform:translateY(-1px)}
.pastilla.fantasma{background:transparent; color:var(--blanco); border:1px solid var(--humo)}
.pastilla.fantasma:hover{background:var(--blanco); color:#000; border-color:var(--blanco)}
.pastilla svg{width:15px; height:15px; flex:none}

/* ── PORTADA ─────────────────────────────────────────────────────────────── */
header{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(2rem,6vh,4rem); position:relative}
header h1{font-size:clamp(3.1rem,11.5vw,10.5rem); max-width:16ch}
header h1 em{font-style:italic; color:var(--luz)}
.lin{display:block; overflow:hidden; padding-bottom:.06em}
.lin > span{display:block; transform:translateY(110%)}
.bajada{margin-top:2.2rem; max-width:44ch; color:var(--niebla); font-size:1.0625rem;
  line-height:1.75; opacity:0}
.pieport{margin-top:3rem; padding-top:1.15rem; border-top:var(--filete);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem; opacity:0}
.pieport .grupo{display:grid; grid-template-columns:repeat(3,auto);
  gap:1.5rem; align-items:start}
@media(min-width:600px){ .pieport .grupo{gap:2.75rem} }
.pieport b{display:block; font-family:'Bodoni Moda',serif; font-weight:400;
  font-size:1.5rem; margin-bottom:.15rem; letter-spacing:-.01em}

/* ── MANIFIESTO ──────────────────────────────────────────────────────────── */
.manifiesto{padding:clamp(7rem,18vh,13rem) 0}
.manifiesto h2{font-size:clamp(2.2rem,6.6vw,5.4rem); max-width:17ch}
.manifiesto h2 em{font-style:italic; color:var(--luz)}
.manifiesto .cuerpo{margin-top:3.2rem; display:grid; gap:2.5rem;
  grid-template-columns:1fr; max-width:62ch}
@media(min-width:860px){
  .manifiesto .cuerpo{grid-template-columns:1fr 1fr; max-width:none;
    padding-left:38%; gap:3.5rem}
}
.manifiesto p{color:var(--niebla); line-height:1.85}

/* ── DISCIPLINAS (carril horizontal anclado) ─────────────────────────────── */
#disciplinas{position:relative}
.carril{display:flex; align-items:center; height:100svh; will-change:transform}
.panel{flex:none; width:min(86vw,520px); margin-right:clamp(1.5rem,4vw,3.5rem);
  border:1px solid rgba(255,255,255,.1); border-radius:12px;
  background:rgba(255,255,255,.028); backdrop-filter:blur(7px);
  padding:clamp(1.9rem,3.4vw,2.9rem); min-height:min(58svh,440px);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .5s var(--ease), background .5s var(--ease)}
.panel:first-child{margin-left:clamp(1rem,6vw,5rem)}
.panel.viva{border-color:rgba(224,160,126,.5); background:rgba(224,160,126,.05)}

.panel h3{font-size:clamp(1.9rem,3.3vw,2.7rem); margin:2.4rem 0 1rem; max-width:13ch}
.panel p{color:var(--niebla); font-size:.9375rem; line-height:1.8; max-width:36ch}
.panel .regla{margin-top:2rem; height:1px; background:var(--ceniza); position:relative}
/* ⚠️ `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. */
.panel .regla i{position:absolute; inset:0 0 0 0; background:var(--luz);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease)}
.panel.viva .regla i{transform:scaleX(1)}
.cabecera-carril{position:absolute; top:clamp(4.5rem,11vh,7rem); left:0; right:0; z-index:3}
.cabecera-carril .env{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.cabecera-carril h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.progreso{width:min(34vw,240px); height:1px; background:var(--ceniza); position:relative;
  flex:none}
.progreso i{position:absolute; inset:0 auto 0 0; width:0%; background:var(--blanco)}

/* ── LISTA GRANDE (aparatología / marcas) ────────────────────────────────── */
.lista{border-top:var(--filete)}
.lista .fila{display:flex; align-items:baseline; gap:1.5rem;
  padding:clamp(1.3rem,3vw,2.1rem) 0; border-bottom:var(--filete);
  position:relative}
.lista .fila > *{ transition:transform .55s var(--ease) }
.lista .fila:hover > *{ transform:translateX(1.1rem) }
.lista .fila h3{font-size:clamp(1.75rem,5.4vw,4.1rem); flex:1 1 auto}
.lista .fila .glosa{color:var(--humo); font-size:.8125rem; letter-spacing:.06em;
  text-transform:uppercase; text-align:right; max-width:18ch}
.lista .fila::before{content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--luz); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease)}
.lista .fila:hover::before{transform:scaleY(1); transform-origin:top}

.seccion{padding:clamp(6rem,15vh,11rem) 0}
.rotulo{display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  margin-bottom:clamp(2.5rem,6vh,4.5rem); flex-wrap:wrap}
.rotulo h2{font-size:clamp(2rem,5.6vw,4.2rem); max-width:15ch}
.rotulo h2 em{font-style:italic; color:var(--luz)}
.rotulo p{color:var(--humo); max-width:34ch; font-size:.9375rem; line-height:1.8}

/* ── CITA ────────────────────────────────────────────────────────────────── */
#cita{padding:clamp(7rem,20vh,14rem) 0 0; text-align:center}
#cita h2{font-size:clamp(2.6rem,9vw,8rem); margin-bottom:2rem}
#cita h2 em{font-style:italic; color:var(--luz)}
#cita .sub{color:var(--niebla); max-width:46ch; margin:0 auto 3rem; line-height:1.8}
.acciones{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
footer{margin-top:clamp(6rem,14vh,10rem); border-top:var(--filete); padding:2.2rem 0 3rem;
  background:var(--void); position:relative; z-index:3}
footer .env{display:flex; flex-wrap:wrap; gap:1.5rem 3rem; justify-content:space-between;
  align-items:flex-start; text-align:left}
footer .col b{display:block; font-family:'Bodoni Moda',serif; font-weight:400;
  font-size:1.0625rem; margin-bottom:.5rem; color:var(--blanco)}
footer .col{color:var(--niebla); font-size:.875rem; line-height:1.9}

.rev{opacity:0; transform:translateY(22px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .rev,.bajada,.pieport{opacity:1 !important; transform:none !important}
  .lin > span{transform:none !important}
}

/* ── La prueba fotográfica ────────────────────────────────────────────────
   A sangre y sin márgenes: después de una página entera de tipografía y una
   esfera generada, el golpe es ver el sitio de verdad. Tres fotos suyas, con
   el pie contando qué se está mirando.

   ⚠️ `100vw` con `margin-left:50%` y `translateX(-50%)` porque esta sección
   vive dentro del contenedor centrado y hay que sacarla de él. Se usa `100vw`
   y no `100%` a propósito; el `overflow-x:hidden` del body evita la barra
   horizontal que provocaría la barra de desplazamiento vertical. */
.prueba{margin:clamp(4rem,10vh,7rem) 0 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 `aspect-ratio`. Con columnas de distinto ancho y una
   proporción, cada foto salía de una altura y la banda quedaba escalonada,
   con escalones negros debajo. La altura la manda la banda, no la foto. */
.prueba figure{position:relative; margin:0; overflow:hidden;
  height:clamp(300px, 46vh, 560px); background:#0b0b0d}
.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), filter .8s ease;
  filter:saturate(.96) contrast(1.02)}
@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(8,8,10,.86), rgba(8,8,10,0));
  display:flex; gap:.55rem; align-items:baseline; flex-wrap:wrap}
.prueba figcaption b{font-weight:700}
.prueba figcaption span{opacity:.68; letter-spacing:.06em; text-transform:none;
  font-size:.8125rem}

/* ── La aparatología, sobre sus cabinas ───────────────────────────────────
   Antes era una lista de cuatro aparatos seguida de una banda de tres fotos
   pegadas. Ahora la lista vive ENCIMA de sus cabinas, que se van fundiendo:
   la lista dice lo que tiene y el fondo lo enseña, en el mismo golpe de vista.
   El velo va en su negro, no en un gris de sistema. */

#aparatologia.fondo-vivo .lista .fila{ border-color:rgba(255,255,255,.16) }

/* El método y la cita, sobre su centro. Velos muy altos: aquí lo que manda es
   el texto y la foto es atmósfera, no protagonista. */



/* El color con el que `tacto.css` tine las superficies del navegador
   —seleccion, cursor, barra y anillo de foco—. Aqui es el melocoton de --luz, el acento de la casa.
   Va al final para ganar al valor de reserva de tacto.css. */
:root{ --tinte: #e0a07e }

/* ── La pieza fotográfica ──────────────────────────────────────────────────
   Una foto pequeña, alineada al borde derecho y desplazada hacia abajo, en la
   mitad de la sección donde NO está la membrana (en «El método» se coloca a la
   izquierda). Deliberadamente contenida: esta página la manda la membrana, y
   una foto grande la volvería a tapar, que es justo lo que Natxo rechazó. */
.manifiesto .pieza{
  margin:clamp(3rem,7vh,5rem) 0 0 auto;
  width:min(300px, 62vw);
}
.manifiesto .pieza img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  filter:brightness(.92) saturate(.96);
}
.manifiesto .pieza figcaption{
  margin-top:.9rem; font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--humo);
}
@media(min-width:900px){
  .manifiesto .pieza{ width:min(340px, 26vw) }
}