/* ⚠️ 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. */
/* ───────────────────────────────────────────────────────────────────────────
   CRISTINA TORRECILLA — «La seda»
   Dirección: SSENSE (refero.design). Un editorial de moda hecho web: lienzo
   de mármol, serif de portada a escala descomunal con tracking negativo
   fuerte, y un sistema DELIBERADAMENTE monocromo — sin acentos, sin rellenos,
   sin degradados. Aquí no hay fotografía, así que el único color lo pone la
   luz sobre la tela.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --obsidiana:#000000;
  --grafito:#333333;   /* el texto largo: negro puro cansa a tamaño grande */
  --ceniza:#888888;
  --plata:#979797;     /* filetes */
  --bruma:#e8e8e8;
  --marmol:#f4f1ec;    /* el lienzo. CÁLIDO: en gris puro parecía una galería */
  --papel:#ffffff;
  /* ⚠️ Su marca real es cálida: lino, velas, flores secas, madera. El sistema
     original era gris neutro de punta a punta y la convertía en algo frío que
     no se parece a su centro. Estos dos no repintan nada: templan el lienzo y
     dan un acento donde antes solo había negro. */
  --lino:#e6ded3;
  --arena:#8c7255;   /* ⚠️ Era #9c7f5f. Con texto blanco encima daba 3,7:1 y el minimo
     legible es 4,5:1. Mismo tono, solo mas oscuro, para no cambiar la paleta. */
  --max:1400px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--marmol); color:var(--grafito);
  /* ⚠️ Inter es la sans por defecto de practicamente toda web generada por IA, y
    las dos skills la desaconsejan como eleccion automatica. Jost es
    geometrica y sienta bien al lado de una Playfair. */
  font-family:'Jost',system-ui,sans-serif; font-weight:300;
  font-size:15px; line-height:1.62; letter-spacing:-.004em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--obsidiana); color:var(--marmol)}
:focus-visible{outline:1px solid var(--obsidiana); outline-offset:4px}
p{margin:0}
a{color:inherit; text-decoration:none}

/* El tracking se aprieta a medida que crece el cuerpo: es la firma del
   sistema. A 95 px, -0,047em compacta la palabra en un bloque de arquitectura. */
.ed{font-family:'Playfair Display',Georgia,serif; font-weight:400; line-height:1.02}
h1,h2,h3{margin:0; font-weight:400}
.meta{font-size:.75rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ceniza)}

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

/* Nada de rellenos: en este sistema toda acción es un contorno de un píxel. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:46px; padding:.85rem 1.7rem; cursor:pointer;
  font-size:.75rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--obsidiana); color:var(--obsidiana); background:transparent;
  transition:background .35s var(--ease), color .35s var(--ease)}
.btn:hover{background:var(--obsidiana); color:var(--marmol)}
.btn.lleno{background:var(--obsidiana); color:var(--marmol)}
.btn.lleno:hover{background:transparent; color:var(--obsidiana)}
.btn svg{width:14px; height:14px; flex:none}

/* ── LA SEDA ─────────────────────────────────────────────────────────────── */
#seda{position:fixed; inset:0; z-index:0; pointer-events:none}
#seda 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.3rem 0;
  border-bottom:1px solid transparent; isolation:isolate;
  transition:background .5s var(--ease), border-color .5s var(--ease)}
nav::before{content:''; position:absolute; inset:0 0 -2.6rem; z-index:-1;
  pointer-events:none; transition:opacity .5s var(--ease);
  background:linear-gradient(180deg, var(--marmol) 22%, rgba(244,244,244,0) 100%)}
nav.posada::before{opacity:0}
nav.posada{background:rgba(244,244,244,.86); backdrop-filter:blur(14px);
  border-bottom-color:var(--bruma)}
nav .env{display:flex; align-items:center; justify-content:space-between; gap:1rem}
nav .marca{font-family:'Playfair Display',serif; font-size:1rem; letter-spacing:-.01em;
  color:var(--obsidiana)}
nav ul{display:none; list-style:none; margin:0; padding:0; gap:2.1rem}
@media(min-width:1000px){ nav ul{display:flex} }
nav ul a{font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:#5a5a5a; transition:color .3s var(--ease)}
nav ul a:hover{color:var(--obsidiana)}
nav .cita{font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--obsidiana); border-bottom:1px solid var(--obsidiana); padding-bottom:2px}

/* ── PORTADA ─────────────────────────────────────────────────────────────── */
header{min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:7.5rem 0 clamp(1.75rem,5vh,3rem); position:relative}
header h1{font-size:clamp(2.4rem,7.4vw,6.6rem); letter-spacing:-.042em;
  max-width:15ch; color:var(--obsidiana); position:relative; z-index:2}

/* ── Su foto en la portada ────────────────────────────────────────────────
   Ella misma trabajando. En un oficio que se hace con las manos, eso vende
   más que cualquier titular, y la demo no tenía ni una foto.

   Va a la derecha y sangrando por el borde, con el titular por delante: así
   no compite con la frase de las veinticuatro años, la acompaña. En móvil se
   convierte en una banda arriba, porque a esa anchura solapar foto y titular
   no deja leer ninguno de los dos. */
.retrato{position:absolute; inset:0 0 0 auto; width:min(52%, 760px);
  z-index:1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 26%);
          mask-image:linear-gradient(to right, transparent 0%, #000 26%)}
.retrato img{width:100%; height:100%; object-fit:cover; object-position:58% 40%;
  filter:saturate(.92) contrast(1.02);
  animation:acerca 22s ease-in-out infinite alternate}
@keyframes acerca{ from{transform:scale(1.0)} to{transform:scale(1.07)} }
@media (prefers-reduced-motion: reduce){ .retrato img{animation:none} }
@media(max-width:860px){
  .retrato{position:relative; inset:auto; width:100vw; margin-left:50%;
    transform:translateX(-50%); height:44svh; margin-bottom:2.5rem;
    -webkit-mask-image:none; mask-image:none; order:-1}
  header{justify-content:flex-start; padding-top:5.5rem}
}
header h1 em{font-style:italic}
.pie-port{margin-top:clamp(2.5rem,7vh,4.5rem); padding-top:1.1rem;
  border-top:1px solid var(--plata); display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end; gap:1.75rem;
  position:relative; z-index:2}
/* ⚠️ El retrato ocupa la mitad derecha, y este pie repartía párrafo a la
   izquierda y cifras a la derecha: las cifras caían debajo de la foto y
   desaparecían. Se le limita el ancho a la mitad libre y se apilan solas. */
@media(min-width:861px){ .pie-port{max-width:min(54%, 680px)} }
.pie-port p{max-width:40ch; line-height:1.8}
.cifras{display:flex; gap:2.75rem; flex-wrap:wrap}
.cifras b{display:block; font-family:'Playfair Display',serif; font-weight:400;
  font-size:1.6rem; letter-spacing:-.02em; color:var(--arena); margin-bottom:.1rem}

/* ── BLOQUES ─────────────────────────────────────────────────────────────── */
.bloque{padding:clamp(5.5rem,16vh,10.5rem) 0}
.dos{display:grid; gap:2.5rem}
@media(min-width:900px){ .dos{grid-template-columns:1fr 1.15fr; gap:clamp(3rem,7vw,7rem)} }
.dos h2{font-size:clamp(1.9rem,4.6vw,3.5rem); letter-spacing:-.032em;
  color:var(--obsidiana); max-width:13ch}
.dos h2 em{font-style:italic}
.dos .texto{display:grid; gap:1.6rem; max-width:56ch; line-height:1.85}

/* Los tres tratamientos: sin tarjetas. Filete arriba y aire, como una
   página de revista. En este sistema no hay sombras ni fondos elevados. */
.trio{display:grid; gap:2.75rem}
@media(min-width:880px){ .trio{grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem)} }
.trat{border-top:1px solid var(--obsidiana); padding-top:1.5rem}

.trat h3{margin:1.9rem 0 .9rem; font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,2.7vw,2.15rem); letter-spacing:-.028em; color:var(--obsidiana)}
.trat p{line-height:1.85}

/* ── ELLAS ───────────────────────────────────────────────────────────────── */
.ellas{background:var(--papel); padding:clamp(5rem,14vh,9rem) 0}
.ellas .cab{margin-bottom:clamp(2.5rem,6vh,4rem); max-width:26ch}
.ellas .cab h2{font-family:'Playfair Display',serif; font-size:clamp(1.7rem,4.2vw,3.1rem);
  letter-spacing:-.032em; color:var(--obsidiana)}
.ellas .cab h2 em{font-style:italic}
.voces{display:grid; gap:2.75rem}
@media(min-width:900px){ .voces{grid-template-columns:repeat(3,1fr); gap:3rem} }
.voz{border-top:1px solid var(--bruma); padding-top:1.5rem}
.voz blockquote{margin:0 0 1.5rem; font-family:'Playfair Display',serif;
  font-size:1.0625rem; line-height:1.55; letter-spacing:-.012em; color:var(--obsidiana)}
.voz .quien{font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ceniza)}

/* ── CITA ────────────────────────────────────────────────────────────────── */
#cita{padding:clamp(6rem,18vh,12rem) 0 0; text-align:center}
#cita h2{font-size:clamp(2.2rem,7.6vw,7rem); letter-spacing:-.045em;
  color:var(--obsidiana); max-width:14ch; margin-inline:auto}
#cita h2 em{font-style:italic}
#cita .sub{margin:2rem auto 3rem; max-width:44ch; line-height:1.85}
.acciones{display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap}
footer{margin-top:clamp(5rem,13vh,9rem); border-top:1px solid var(--plata);
  padding:2rem 0 2.75rem; text-align:left}
footer .env{display:flex; flex-wrap:wrap; gap:1.4rem 3.5rem; justify-content:space-between}
footer .col{font-size:.8125rem; line-height:1.95; color:var(--grafito)}
footer .col b{display:block; font-size:.75rem; font-weight:400; letter-spacing:.09em;
  text-transform:uppercase; color:var(--obsidiana); margin-bottom:.5rem}

.con-dedo{display:none}
@media(hover:none),(pointer:coarse){ .con-raton{display:none} .con-dedo{display:inline} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ── La banda de fotos ────────────────────────────────────────────────────
   Misma pieza que en Karen, Laysa y Chris: tres fotos suyas a sangre. Altura
   fija y no proporción, porque con columnas iguales y `aspect-ratio` cada una
   sale de una altura distinta y la banda queda escalonada. */
.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)} }
.prueba figure{position:relative; margin:0; overflow:hidden;
  height:clamp(300px,46vh,560px); background:var(--lino)}
.prueba img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.4s var(--ease)}
@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(28,22,16,.82), rgba(28,22,16,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}

/* ── Lo que se llevaría al cambiar de web ─────────────────────────────────
   El club y la tarjeta regalo existen en su web de verdad. Una demo que no
   los tiene no es una mejora: es perder dos cosas que le dan caja. */
.suyo{background:var(--lino); padding:clamp(3.5rem,9vh,6rem) 0;
  width:100vw; margin-left:50%; transform:translateX(-50%)}
.suyo .env{display:grid; gap:2.5rem}
@media(min-width:820px){ .suyo .env{grid-template-columns:1fr 1fr; gap:4rem} }
.suyo article h3{font-family:'Playfair Display',Georgia,serif; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.02em; margin:0 0 .7rem;
  color:var(--obsidiana)}
.suyo article p{margin:0 0 1.2rem; max-width:44ch; line-height:1.8;
  color:var(--grafito)}
.suyo .sello{display:inline-block; font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--arena); margin-bottom:.9rem}
.suyo a{display:inline-flex; align-items:center; gap:.5rem; min-height:46px;
  padding:.7rem 1.4rem; border:1px solid var(--arena); color:var(--arena);
  border-radius:2px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .suyo a:hover{background:var(--arena); color:var(--papel)}
}

/* ── Ellas, sobre el sitio donde vienen ───────────────────────────────────
   Los testimonios eran texto sobre blanco. Ahora van sobre su cabina, sus
   velas y ella trabajando: quien dice «llevo veinticuatro años viniendo» se
   lee encima del sitio al que lleva viniendo.
   El velo es su lino oscurecido, no un gris: su marca es cálida y un velo
   neutro la enfriaría otra vez. */





/* ── Los tres tratamientos: trío ASIMÉTRICO ───────────────────────────────
   Eran tres columnas iguales con una foto cada una: el patrón que la skill
   `design-taste-frontend` prohíbe por su nombre —«NO 3-column equal feature
   cards»— y que Natxo describió como «mismas cajas de texto en los mismos
   sitios».

   Ahora la primera manda: ocupa la columna ancha y su foto es vertical y
   grande; las otras dos se apilan a su lado en horizontal. Tres elementos,
   tres celdas, ninguna vacía. La jerarquía dice algo: los faciales son «el
   punto de partida de casi todo», y ahora se ve sin leerlo. */
@media(min-width:880px){
  .trio{
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    gap: clamp(2rem,4vw,3.4rem) clamp(2.5rem,5vw,4.5rem);
    align-items: start;
  }
  .trio .trat:first-child{ grid-row: 1 / span 2 }
  .trio .trat:first-child .trat-foto{ aspect-ratio: 3/4 }
  .trio .trat:first-child h3{ font-size: clamp(1.8rem,3.4vw,2.6rem) }
  /* Las dos de la derecha entran en horizontal: al ser más bajas, una
     proporción vertical las dejaría desequilibradas contra la grande. */
  .trio .trat:not(:first-child) .trat-foto{ aspect-ratio: 16/10 }
  .trio .trat:not(:first-child) p{ max-width: 46ch }
}

/* ⚠️ Su fotografía es muy alta en luces —paredes blancas, lino claro, luz
   suave— y funciona en pequeño, pero a tamaño grande se queda casi en blanco
   y la tarjeta parece vacía. Se le levanta el contraste solo a la grande, que
   es donde se nota. No se toca el color: sigue siendo su tono cálido. */
.trio .trat:first-child .trat-foto img{
  filter: saturate(1.04) contrast(1.16) brightness(.97);
}

/* Los rituales, sobre el aceite y los rodillos de jade: las herramientas del
   ritual debajo de la explicación del ritual. */
#rituales.fondo-vivo{
  --fv-velo: rgba(28,22,16,.92);
  --fv-velo-2: rgba(28,22,16,.80);
  color:#f4f1ec;
}
#rituales.fondo-vivo h2, #rituales.fondo-vivo .ed{ color:#fff }
#rituales.fondo-vivo p{ color:rgba(255,255,255,.90) }

/* El color con el que `tacto.css` tine las superficies del navegador
   —seleccion, cursor, barra y anillo de foco—. Aqui es el lino calido que usa en los filetes.
   Va al final para ganar al valor de reserva de tacto.css. */
:root{ --tinte: #b9a48c }

/* ── Cierre y testimonios ──────────────────────────────────────────────────
   Dos arreglos de ritmo, no de gusto:

   · `.suyo` (Club y tarjeta regalo) iba PEGADO a `#cita`, y los dos eran
     paneles claros sin una sola fotografía. El cierre de la web era el bloque
     más plano de las cuatro demos. Ahora lleva retrato de fondo con un velo
     muy alto: sigue siendo claro de sensación, pero ya no es papel en blanco.

   · `#ellas` se había vuelto oscuro al ponerle fondo vivo, cuando su color de
     base ya era `--papel`. Se le quita y vuelve al tono editorial de la página,
     que además rompe la cadena de secciones oscuras seguidas. */
#cita.fondo-vivo{
  --fv-velo: rgba(244,241,236,.93);
  --fv-velo-2: rgba(244,241,236,.86);
}
#cita.fondo-vivo h2, #cita.fondo-vivo p{ color:var(--obsidiana) }

/* ⚠️ Los nombres de las reseñadoras quedaron a 3,54:1 al devolver `#ellas` al
   fondo claro: su color estaba elegido para el velo oscuro que tuvo un rato.
   Es el mismo fallo que hubo en el «Cómo trabajamos» de Laysa —cambiar el
   fondo de una sección y olvidarse del texto—, y aquí lo cazó el medidor de
   legibilidad, no el ojo. A 12 px el mínimo es 4,5:1. */
#ellas .quien{ color:#5f574e }