/* Home y Sobre mí.
   La home va oscura (el cian solo vive sobre oscuro) y Sobre mí va clara:
   la máquina trabaja en lo oscuro, la persona vive en la luz. */

.nav-links{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem);font-size:.82rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--text-soft);transition:color .18s ease}
.nav-links a:hover{color:var(--cyan)}

/* ---------- home: el manifiesto ----------
   Antes esto era una rejilla de dos columnas (34% + resto) con el manifiesto a
   la izquierda y la hoja de productos a la derecha. La hoja se quitó el
   2026-08-10 y nadie tocó la rejilla: el manifiesto se quedó encerrado en un
   carril de 34% con media pantalla vacía al lado. De ahí venía el "todo está
   muy a la izquierda".

   Ahora la portada es un pliego: la afirmación ocupa el ancho y las dos líneas
   de apoyo bajan por la derecha, alineadas al pie de la afirmación. */
.hero{padding:clamp(2.8rem,6.5vw,6rem) 0 clamp(2.6rem,5vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26ch);
  gap:clamp(2rem,5vw,4.5rem);align-items:end}

/* El nombre como entrada de diccionario: la palabra pequeña nombra la mitad,
   la grande dice qué significa. Que sean lo más grande de la página no es
   adorno — no hay tesis más corta que el propio nombre. */
.claim-hero{margin-top:1rem}
.def{display:block}
.def + .def{margin-top:clamp(.5rem,1.2vw,1rem)}
.def-k{display:block;font-family:'Raleway',sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:.1rem}
.def .word{display:block;font-family:'Lora',Georgia,serif;font-weight:500;
  font-style:italic;color:var(--cyan);
  font-size:clamp(2.7rem,8.6vw,5.4rem);line-height:.92;letter-spacing:-.035em;
  margin-left:-.035em}

.gloss{margin-top:clamp(1.3rem,2.6vw,2rem);font-family:'Lora',Georgia,serif;
  font-size:clamp(1.02rem,1.9vw,1.3rem);line-height:1.42;max-width:30ch}

.hero-side .lede{max-width:none}
.sign{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--hairline)}
/* El lema. El giro va en rosa porque es la mitad humana de la frase: el cian
   es de la máquina y ya se lo gastó el nombre. */
.motto{font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(1.12rem,2.1vw,1.42rem);line-height:1.28;letter-spacing:-.012em;
  color:var(--text)}
.motto b{display:block;font-weight:500;color:var(--rose)}
.sign-name{margin-top:.8rem;font-size:.78rem;letter-spacing:.04em;color:var(--text-faint)}
.sign-name a{color:var(--cyan);text-decoration:none}

/* ---------- la firma ----------
   Los PNG vienen en un solo color (#ffe9ee) sobre transparente: están hechos
   para fondo oscuro y como <img> desaparecerían en la página clara. Van como
   máscara para que tomen el color del sitio donde caen —blush en el home
   oscuro, rosa profundo en Sobre mí— con un archivo por firma y sin dos
   versiones de color que después se desincronizan.
   Si el navegador no soporta máscaras no se pinta nada, y no se pierde nada:
   el nombre está escrito justo al lado. */
.firma{display:block;background:currentColor;margin-top:1.4rem;
  width:min(230px,100%);aspect-ratio:768/159;
  -webkit-mask:url(/img/firma.png) no-repeat left center/contain;
          mask:url(/img/firma.png) no-repeat left center/contain}
.firma-bloque{width:min(190px,100%);aspect-ratio:518/292;color:var(--rose-deep);
  margin-top:1.9rem;
  -webkit-mask-image:url(/img/firma-bloque.png);mask-image:url(/img/firma-bloque.png)}
@supports not ((-webkit-mask-image:url(#m)) or (mask-image:url(#m))){
  .firma{background:none}
}

.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--hairline)}
.sheet-head h2{font-family:'Lora',Georgia,serif;font-weight:500;font-size:1.18rem;letter-spacing:-.01em}
.sheet-head p{font-size:.78rem;color:var(--text-faint)}

.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(1rem,2vw,1.6rem);margin-top:1.3rem}
.group{margin-top:clamp(2.6rem,5vw,4rem)}
.group:first-of-type{margin-top:1.9rem}
.group-q{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1rem,1.8vw,1.24rem);line-height:1.42;max-width:46ch;
  border-left:2px solid var(--cyan);padding:.1rem 0 .1rem 1.05rem}

.card{border:1px solid var(--hairline);padding:1.2rem;
  transition:border-color .2s ease,background .2s ease}
.card:hover{border-color:rgba(110,223,249,.45)}
.card h3{font-family:'Lora',Georgia,serif;font-weight:500;font-size:1.06rem;letter-spacing:-.01em}
.card p{font-size:.87rem;color:var(--text-soft);margin-top:.35rem}
.card-try{display:inline-block;margin-top:.9rem;font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);text-decoration:none;
  border-bottom:1px solid rgba(110,223,249,.4);padding-bottom:.15rem}

.tier{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.3rem;border-top:1px solid var(--hairline)}
.tier h3{font-family:'Lora',Georgia,serif;font-weight:500;font-size:1.12rem;letter-spacing:-.01em}
.tier > p{font-size:.83rem;color:var(--text-faint);margin-top:.25rem;max-width:48ch}

/* La cuenta: la única cifra dura del sitio. Va sola en su banda porque es el
   argumento del que cuelga todo lo de abajo. */
.cuenta{border-top:1px solid var(--hairline);padding:clamp(2.6rem,5vw,4rem) 0}
.cifra{font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(1.4rem,3.4vw,2.3rem);line-height:1.24;letter-spacing:-.018em;
  margin-top:.9rem;max-width:32ch}
.cifra b{font-weight:500;color:var(--cyan)}

.demos-band,.medida{border-top:1px solid var(--hairline);padding:clamp(3rem,6vw,5rem) 0}
.demos-band h2,.medida h2{font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em}
.medida .btn{margin-top:clamp(1.6rem,3vw,2.2rem)}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero{padding-top:2.2rem}
  .nav-links{display:none}
}

/* ---------- Sobre mí: tema claro ---------- */
body.light{background:var(--paper);color:var(--ink-deep)}
body.light .bar{background:var(--ink-deep);color:var(--blush)}
body.light main{color:var(--ink-deep)}
body.light .eyebrow{color:var(--rose-deep)}
body.light a{color:inherit}

.open{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem)}
.origin{font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(1.75rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.022em;
  margin-top:1.2rem;max-width:24ch}
.origin em{font-style:italic;color:var(--rose-deep)}
.origin-note{margin-top:1.4rem;color:rgba(9,19,61,.70);max-width:44ch;font-size:1.02rem}

.who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.4rem,4vw,3rem);
  align-items:start;padding:clamp(1.8rem,4vw,3rem) 0 clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid rgba(9,19,61,.14)}
/* Vertical y no cuadrado: el original es 661×795 y en un cuadrado había que
   cortarle la cabeza o el hombro. A 4:5 entra casi entero y se lee como
   retrato editorial en vez de como avatar. */
.portrait{width:clamp(160px,23vw,250px);aspect-ratio:4/5;background:var(--blush);
  border:1px solid rgba(9,19,61,.14);display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.name{font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.8rem);letter-spacing:-.015em;line-height:1.2}
.role{margin-top:.3rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rose-deep)}
.bio{margin-top:1.3rem;color:rgba(9,19,61,.72);max-width:56ch}
.bio p + p{margin-top:.85rem}
/* La única cifra de la página. Se resalta porque es la prueba, no porque sí. */
.bio b{font-weight:600;color:var(--ink-deep)}
.links{margin-top:1.7rem;display:flex;flex-wrap:wrap;gap:.5rem}
.links a{font-size:.85rem;font-weight:500;text-decoration:none;padding:.42rem .95rem;
  border:1px solid rgba(9,19,61,.16);transition:border-color .2s ease,color .2s ease}
.links a:hover{border-color:var(--rose-deep);color:var(--rose-deep)}
.links a::after{content:' ↗';color:rgba(9,19,61,.45);font-size:.78em}

.facts{background:var(--blush);padding:clamp(2rem,4.5vw,3.2rem) 0}
.facts dl{display:grid;grid-template-columns:minmax(130px,auto) minmax(0,1fr);
  gap:.8rem clamp(1.2rem,3vw,2.5rem);margin-top:1.4rem;max-width:62ch}
.facts dt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(9,19,61,.48);padding-top:.22rem}
.facts dd{font-size:.98rem}
.facts dd a{color:var(--rose-deep);text-decoration:none;border-bottom:1px solid rgba(161,61,92,.3)}

/* ---------- Sobre mí: el cierre vuelve a lo oscuro ----------
   Es el único bloque oscuro de la página clara. Por eso puede permitirse ser
   el más grande: no compite con nada y empalma con el pie, que ya era oscuro. */
body.light .purpose{background:var(--ink-deep);color:var(--blush)}
body.light .purpose .eyebrow{color:var(--cyan)}
.purpose{padding:clamp(3.2rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)}

.creed{margin-top:clamp(1.4rem,3vw,2.2rem)}
.creed-row{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr);
  gap:.5rem clamp(1.2rem,4vw,3rem);align-items:baseline;
  padding:clamp(1.5rem,3.4vw,2.4rem) 0;border-top:1px solid var(--hairline)}
.creed-row:last-child{border-bottom:1px solid var(--hairline)}
.creed-row h3{font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose)}
.creed-row p{font-family:'Lora',Georgia,serif;font-weight:500;
  font-size:clamp(1.3rem,3vw,2.05rem);line-height:1.26;letter-spacing:-.018em;
  max-width:34ch}
/* el giro de cada frase, no una palabra suelta: es donde la idea cambia de lado */
.creed-row p b{font-weight:500;color:var(--cyan)}

@media (max-width:640px){
  .creed-row{grid-template-columns:1fr;gap:.7rem}
}

body.light .foot{background:var(--ink-deep);color:rgba(255,233,238,.6);border-top:0;margin-top:0}
body.light .foot a{color:rgba(255,233,238,.85)}

@media (max-width:640px){
  .who{grid-template-columns:1fr}
  .facts dl{grid-template-columns:1fr;gap:.25rem}
  .facts dt{padding-top:.7rem}
}

/* legales */
.legal-page{padding:clamp(2.5rem,5vw,4rem) 0;max-width:70ch}
.legal-page h1{font-family:'Lora',Georgia,serif;font-weight:500;font-size:2rem;letter-spacing:-.02em}
.legal-page h2{font-family:'Lora',Georgia,serif;font-weight:500;font-size:1.15rem;margin-top:2rem}
.legal-page p,.legal-page li{margin-top:.7rem;font-size:.95rem;color:rgba(9,19,61,.75)}
.legal-page ul{margin-left:1.2rem}
.legal-page .updated{font-size:.8rem;color:rgba(9,19,61,.5);margin-top:.5rem}
.legal-page a{color:var(--rose-deep)}
/* proveedores: cada uno con su enlace, que se lea como ficha y no como párrafo */
.legal-page .proveedores{list-style:none;margin-left:0}
.legal-page .proveedores li{border-left:2px solid rgba(9,19,61,.14);padding:.15rem 0 .15rem .9rem;margin-top:.9rem}
.legal-page .proveedores a{display:inline-block;margin-top:.15rem;font-size:.88rem;white-space:nowrap}