/* ==========================================================================
   The Lab Room · Sobre nosotros
   Solo lo propio de esta página. Paleta, retícula, botones, `.reveal`/`.char`
   y `.band`/`.split` salen de piezas.css, que es la hoja compartida.

   Reconstruida el 1 de septiembre de 2026 sobre la capa Synaptik, sustituyendo
   el render de Elementor. Ver el mu-plugin (`syn_es_sobre_nosotros`) y
   `.planning/PLAN-sobre-nosotros-2026-09-01.md`.
   ========================================================================== */

/* ---------- héroe ---------- */
/* 10-sep, Dani: "pégalo un poco más, hay mucho espacio" */
.sn-hero{padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem)}
/* La hoja del tema viejo pone h1 en mayúsculas por debajo de 1024 px (visto
   en móvil en la ronda del 10-sep): el titular en cursiva se queda en caja normal. */
.sn .sn-hero h1{text-transform:none}
.sn-hero .eyebrow{margin-bottom:1.3rem}
.sn-hero h1{font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.18;letter-spacing:-.012em;max-width:26ch}

/* ---------- párrafo lede, libro y podcast ---------- */

/* ---------- bloque de una sola columna (el libro, sin foto propia) ----------
   No es un `.split`, así que no hereda `.split-copy p` (color, medida de
   línea): sin esto el párrafo del libro salía más oscuro y más ancho que el
   resto del texto de sección de la página. */
.sn-sencilla{max-width:44rem;margin:0 auto;text-align:left}
.sn-sencilla p:not(.sn-lede){color:var(--ink-soft);max-width:42ch;font-size:1.04rem}
.sn-sencilla .btn{margin-top:1.8rem}

/* 18 oct. Dani elige la opción 1 del podcast (maquetas del 17, Omorovicza,
   bloque "Free Even Tone Serum"): caja partida con radio de 8 px sobre banda
   piedra; foto a sangre a la izquierda y panel hueso con antetítulo, título,
   texto pequeño y botón compacto en tinta. Tipografía A (18 oct): título
   Zodiak 300 a 46/34 px y texto Archivo 300 a 14,5/1,75. Piedra y hueso van
   aquí como propiedades locales: no están en design-system.css. */
.sn .band--podcast{--sn-piedra:#EBE6DF;--sn-hueso:#F6F4F0;background:var(--sn-piedra);padding-block:clamp(2.5rem,5vw,4.5rem)}
.sn-pod{max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.sn-pod__caja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:8px;overflow:hidden;background:var(--sn-hueso);min-height:580px}
.sn-pod__foto{position:relative;min-width:0;overflow:hidden;background:var(--card)}
/* 19 oct: la portada del pódcast lleva el título a la izquierda; anclada a la izquierda, `cover` solo recorta por la
   derecha (centrada se comía la "P" de "Píldoras" a 1100 y a 390). */
.sn-pod__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 26%}
.sn-pod__panel{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(2.5rem,6vw,6.5rem)}
.sn-pod .eyebrow{margin:0 0 1.1rem}
.sn-pod h2{margin:0 0 1.5rem;max-width:14ch;font-family:var(--serif);font-weight:var(--tlr-t-titulo-peso,300);
  font-size:clamp(34px,1.4rem + 1.65vw,46px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.sn-pod__txt{margin:0;max-width:42ch;font:var(--tlr-t-cuerpo,300 14.5px/1.75 'Archivo',sans-serif);color:var(--tlr-ink-soft,#3A382F)}
.sn-pod__txt + .sn-pod__txt{margin-top:.8rem}
.sn-pod .btn{margin-top:2rem;padding:.85rem 1.45rem;font-size:.68rem;background:var(--ink);border-color:var(--ink);color:var(--bone)}
.sn-pod .btn:hover{background:transparent;color:var(--ink)}
@media(max-width:900px){
  .sn-pod__caja{grid-template-columns:minmax(0,1fr);min-height:0}
  .sn-pod__foto{height:400px}
  .sn-pod__panel{padding:2.4rem 1.5rem 2.6rem}
}
.sn-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin-left:.15rem}
.sn-eq i{display:block;width:2px;height:4px;background:currentColor;border-radius:1px;transform-origin:bottom}
.sn-eq i:nth-child(2){height:8px}.sn-eq i:nth-child(3){height:12px}.sn-eq i:nth-child(4){height:6px}
@keyframes sn-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
/* 11:55, Dani: que suene todo el rato, llama más la atención. */
.sn-eq i{animation:sn-eq .9s ease-in-out infinite}
.sn-eq i:nth-child(2){animation-delay:.15s}
.sn-eq i:nth-child(3){animation-delay:.3s}
.sn-eq i:nth-child(4){animation-delay:.45s}
@media(prefers-reduced-motion:reduce){.sn-eq i{animation:none!important}}

/* ---------- la historia en hitos, 10-sep ----------
   Hitos con año cuando está documentado y etiqueta cuando no. Segunda
   pasada (11:20, Dani: "muy agobiante"): fuera la variante a sangre; partido
   normal con su aire de banda y hueco entre columnas, foto pegajosa mientras
   se lee. Ritmo: apretado dentro de cada hito, generoso entre bloques. */
/* Tercera pasada (11:30): la foto SIN margen izquierdo (sale por el borde,
   como pidió Dani) y más lejos del texto; `min-width:0` en las dos columnas
   porque la foto, con su ancho intrínseco, ensanchaba su columna en pantallas
   anchas (mismo patrón que la rejilla de la tienda el día 7). */
/* 11:55, Dani: "que cubra todo, sin margen por arriba al hacer scroll". La
   banda pierde el padding superior; el aire lo lleva solo la columna del
   texto, y la foto se pega justo bajo la cabecera fija (78 px). */
.band--historia{padding-top:0;padding-bottom:clamp(3rem,5vw,4.5rem)}
.band--historia .split-copy{padding-top:clamp(3.5rem,7vw,7.5rem)}
.sn .band--historia .split{align-items:start;max-width:none;padding-left:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,7vw,7.5rem)}
.band--historia .split>*{min-width:0}
.band--historia .split-copy{max-width:calc(var(--maxw) / 2);padding-right:var(--pad)}
/* piezas.css da a la foto de un `.split--rev` un margen derecho de −72 px
   (`margin-right:calc(-1 * var(--pad))`) para que sangre hacia el hueco: aquí
   sangra por la IZQUIERDA (el padding-left ya es 0), así que ese margen se
   anula; con él la foto se comía 72 px del hueco y el texto quedaba a 28 px. */
.sn .band--historia .split-media{position:sticky;top:78px;border-radius:0;margin-right:0;width:100%}
.band--historia h2{font-size:clamp(2rem,3.3vw,3rem);margin:1rem 0 0;max-width:14ch}
.sn-hitos{list-style:none;margin:clamp(2.4rem,4vw,3.4rem) 0 0;padding:0;border-top:1px solid var(--line)}
.sn-hito{display:grid;grid-template-columns:6rem 1fr;gap:1.6rem;padding:clamp(1.4rem,2.2vw,1.9rem) 0;border-bottom:1px solid var(--line);align-items:baseline}
.sn-hito__ano{font-family:var(--serif);font-size:1.55rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sn-hito__ano--eti{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--verde-texto);font-weight:500;align-self:center}
.sn-hito__tit{font-family:var(--serif);font-size:1.2rem;margin:0 0 .4rem;color:var(--ink)}
.sn-hito__txt{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink-soft);max-width:46ch}
.band--historia .sn-casa-eyebrow{margin:clamp(2.6rem,4vw,3.4rem) 0 1.1rem}
.band--historia .split-copy>p:not(.eyebrow){max-width:44ch;line-height:1.55}
.band--historia .split-copy>p+p{margin-top:.9rem}
.band--historia .chips{margin:1.8rem 0 0}
@media(max-width:1023px){.band--historia .split-media{position:static}.sn .band--historia .split{padding-left:var(--pad)}.band--historia .split-copy{max-width:none;padding-right:0}}

/* ---------- el libro: "La cita" (L2), 10-sep 11:55 ----------
   Una frase del libro en cursiva grande y la portada girada −6° como objeto
   sobre la banda. Momento propio: la portada se posa al llegar (entra a −14°
   y 40 px alta, se asienta en −6° y la sombra crece) y se endereza un poco al
   pasar el ratón. Solo transform, opacity y sombra. */
.band--libro{padding-block:clamp(3.5rem,7vw,6rem)}
.band--libro .split{grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
.sn-cita{font-family:var(--serif);font-weight:401;font-style:italic;font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.28;letter-spacing:-.005em;color:var(--ink);max-width:24ch;margin:1rem 0 1.1rem;text-wrap:balance}
.sn-cita__firma{font-size:.92rem;color:var(--ink-soft);margin:0 0 2rem}
.sn-cita__firma em{font-style:italic}
.sn-cita__libro{display:grid;place-items:center;padding:1rem 0}
/* 17 oct, Dani (img 32): el libro recto, no girado. Fuera los cinco giros
   (reposo, hover, entrada y reducido); se quedan la subida al llegar y al
   pasar el ratón, y la sombra.
   19 oct, Mónica: "la foto del libro quedamos que iba en grande". Dani elige la A:
   460 px (antes 300). La foto del producto mide 800 px: más grande saldría blanda en retina. */
.sn-cita__libro img{width:min(90%,460px);height:auto;border-radius:2px;transform:none;
  box-shadow:0 34px 60px -18px rgba(27,26,23,.34),0 10px 20px -8px rgba(27,26,23,.14);
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1)}
.sn-cita__libro:hover img{transform:translateY(-6px)}
.sn-cita__libro.reveal{transform:none}
.sn-cita__libro.reveal img{transform:translateY(40px) scale(.95);box-shadow:0 6px 14px -8px rgba(27,26,23,.12);
  transition:transform 1.2s cubic-bezier(.16,1,.3,1),box-shadow 1.2s cubic-bezier(.16,1,.3,1)}
.sn-cita__libro.reveal.in img{transform:none;box-shadow:0 34px 60px -18px rgba(27,26,23,.34),0 10px 20px -8px rgba(27,26,23,.14)}
@media(max-width:900px){.band--libro .split{grid-template-columns:1fr}.sn-cita__libro{order:-1}}
@media(prefers-reduced-motion:reduce){.sn-cita__libro img,.sn-cita__libro.reveal img{transform:none!important;transition:none}}

/* ---------- prensa y reconocimiento ---------- */
.sn-prensa{padding-block:clamp(3rem,6vw,5rem);text-align:center}
.sn-prensa-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;
  margin-top:1.4rem;list-style:none;padding:0}
.sn-prensa-lista li{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-soft)}
.sn-prensa-lista a{color:inherit;border-bottom:1px solid transparent;transition:border-color .3s}
.sn-prensa-lista a:hover{border-color:var(--ink-soft)}

/* ---------- el blog, "Secretos de Salón" (16 oct) ---------- */
.sn-blog{padding-block:clamp(3rem,6vw,5rem) 0;text-align:center}
.sn-blog h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);margin:1rem 0 .9rem}
.sn-blog__txt{color:var(--ink-soft);max-width:44ch;margin:0 auto}
.sn-blog .btn{margin-top:1.6rem}

/* ---------- CTA doble, cierre ---------- */
.sn-cta{text-align:center;padding-block:clamp(1rem,3vw,2rem)}
.sn-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.8vw,3.2rem);
  line-height:1.05;letter-spacing:-.01em;margin-bottom:2rem}
.sn-cta .hero-cta{justify-content:center}

/* ---------- Ken Burns al revelarse (mismo patrón que portada, 1 de sept.) ----------
   `.split-media img` ya trae `transition:transform 1.2s` (piezas.css) para el
   hover; se reutiliza para que la foto pase de scale(1.04) a scale(1) UNA sola
   vez, justo cuando la sección gana `.in` al desplazarse. */
.js .split-media.reveal img{transform:scale(1.04)}
.js .split-media.reveal.in img{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  /* El Ken Burns no cuelga de `.reveal,.char` de piezas.css:445, que solo
     fuerza al PROPIO elemento `.reveal` (aquí `.split-media`) y no a su `img`
     hijo. Sin esto, si el `.in` tarda en llegar la foto se queda fija en
     scale(1.04), recortada — el mismo defecto que ya apareció y se corrigió
     en portada el 1 de septiembre. */
  .split-media img{transform:none!important}
}

@media(max-width:900px){
  .sn-hero h1{max-width:none}
  .sn-cta .hero-cta{flex-direction:column;align-items:stretch}
}

/* Al apilar (≤900), las tres bandas partidas vuelven a UNA columna: sus
   reglas de dos columnas ganaban a la de piezas.css por especificidad y a
   390 salían dos columnas de 151 px con desbordamiento (medido 460 px). */
@media(max-width:900px){
  .sn .band--historia .split,.band--libro .split{grid-template-columns:1fr}
}

/* ---------- paso animado entre la portada y Nuestra historia, 13-sep ----------
   Dani: "este botón de conoce nuestra historia quiero una animación bien guapa
   hacia la siguiente área que será el sobre nosotros", y lo mismo para "conoce
   el espacio" de la banda de la casa.

   Se hace con View Transitions entre documentos, y el detalle que importa es
   que las transiciones entre páginas SOLO ocurren si se apuntan las DOS, la de
   salida y la de llegada. Este bloque está únicamente en `portada.css` (que va
   incrustado en la portada) y en `sobre-nosotros.css` (que solo carga esa
   página). Resultado: portada <-> Nuestra historia se funden, y cualquier otro
   enlace de la portada (tienda, ficha, spa) sigue navegando en seco, sin que
   haya que tocar un solo enlace ni escribir JavaScript.

   El navegador que no lo soporte (Firefox, hoy) simplemente navega como
   siempre: no hay nada que arreglar ni ninguna espera de más.

   La página que se va retrocede y se apaga; la que llega sube y aparece. Es lo
   que hace que se lea como "ir hacia" la sección siguiente y no como un
   parpadeo. Con `prefers-reduced-motion` no se apunta la navegación, así que
   no hay transición ninguna.                                                */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto }
}
::view-transition-old(root){
  animation:tlr-paso-sale .34s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:tlr-paso-entra .52s cubic-bezier(0,0,.2,1) both;
}
@keyframes tlr-paso-sale{
  to{ opacity:0; transform:scale(.988) translateY(-14px) }
}
@keyframes tlr-paso-entra{
  from{ opacity:0; transform:translateY(26px) }
  to  { opacity:1; transform:none }
}

/* ==========================================================================
   18 oct, tipografía A (Oak), la de toda la web desde hoy
   (.planning/feedback/2026-10-17-dani/DIRECCION-diseno-referencias.md).
   Solo tipografía: tamaño, peso, color y espaciado de letra; los botones no
   se tocan. Tokens de design-system.css con su valor de reserva. La cita del
   libro (.sn-cita) es la pieza aprobada del 10 sep: conserva su tamaño y solo
   pasa a cursiva 301. El H1 conserva su tamaño y pasa a 300.
   ========================================================================== */
.sn-hero h1{font-weight:var(--tlr-t-titulo-peso,300)}
.sn h2:not(.sn-cita){font-weight:var(--tlr-t-titulo-peso,300);font-size:clamp(34px,1.4rem + 1.65vw,46px)}
.sn .sn-cita{font-weight:301}
.sn-hito__ano:not(.sn-hito__ano--eti),.sn-hito__tit{font-weight:var(--tlr-t-titulo-peso,300)}
.sn-prensa-lista li{font-weight:301}
.sn .eyebrow,.sn .sn-hito__ano--eti,.sn .chip{
  font:var(--tlr-t-etiqueta,600 11.5px/1.3 'Archivo',sans-serif);
  letter-spacing:var(--tlr-t-etiqueta-ls,.16em);text-transform:uppercase}
.sn .sn-hito__ano--eti{line-height:1}
/* p.clase y .sn delante: `.split-copy p` (piezas.css) fija el tamaño con más especificidad */
.sn p.sn-hito__txt,.sn .band--historia .split-copy > p:not(.eyebrow),.sn p.sn-cita__firma,.sn p.sn-blog__txt{
  font:var(--tlr-t-cuerpo,300 14.5px/1.75 'Archivo',sans-serif);color:var(--tlr-ink-soft,#3A382F);max-width:60ch}