/* =========================================================================
   BESTIARIO — sistema visual
   Paleta y tipografías de marca. Layout y composición propios del sitio.

   tinta    #151515   la tinta del catálogo
   papel    #FBFBFB   la página
   azul     #1913BF   la evidencia, el mapa, el esqueleto
   rojo     #FB3D44   la criatura, lo vivo
   violeta  #8325F0   donde el azul y el rojo se superponen: el ensamblaje
   ========================================================================= */

/* --- Tipografía de marca -------------------------------------------------- */
/* StackSansHeadline es la única tipografía del sitio. La jerarquía la dan el
   peso (200-700 del variable), el tamaño y el interletrado. */
@font-face{
  font-family:"Stack Sans";
  src:url("../fonts/StackSansHeadline-VariableFont_wght.ttf") format("truetype");
  font-weight:200 700; font-style:normal; font-display:swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root{
  --tinta:#151515;
  --papel:#FBFBFB;
  --azul:#1913BF;
  --rojo:#FB3D44;
  --rojo-lleno:#C81E26;    /* el rojo de marca oscurecido: fondo de botón con letra blanca, AA */
  --violeta:#8325F0;

  --azul-claro:#6C66FF;      /* azul legible sobre tinta */
  --azul-vivo:#4A44FF;       /* azul de titulares sobre papel */
  --violeta-claro:#A97BFF;

  --sans:"Stack Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Se conserva el nombre por compatibilidad: apunta a la misma familia. */
  --serif:var(--sans);

  /* escala tipográfica */
  --t-hero:clamp(2.4rem, 5.6vw, 5.4rem);
  --t-display:clamp(1.9rem, 1.1rem + 3.6vw, 4.25rem);
  --t-lead:clamp(1.35rem, 0.95rem + 1.7vw, 2.35rem);
  --t-titulo:clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  --t-body:clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --t-small:0.875rem;
  --t-label:0.6875rem;
  --t-menu:0.8125rem;         /* el menú, dos puntos sobre el rótulo */

  /* ritmo */
  --gutter:clamp(1.25rem, 5vw, 5.5rem);
  --ancho:1520px;
  --medida:64ch;
  --sec-y:clamp(4.5rem, 11vh + 3rem, 11rem);

  --anillo:0 0 0 2px var(--bg), 0 0 0 4px var(--foco);

  /* tema por defecto: papel */
  --bg:var(--papel);
  --fg:var(--tinta);
  --mudo:#616161;
  --linea:rgba(21,21,21,.18);
  --linea-suave:rgba(21,21,21,.09);
  --acento:var(--azul);
  --foco:var(--violeta);
  --error:#C81E26;          /* rojo de marca oscurecido para cumplir AA sobre papel */

  /* Los tres colores de marca, ajustados al fondo que tengan debajo. */
  --vivo-azul:var(--azul);
  --vivo-rojo:#C81E26;
  --vivo-violeta:var(--violeta);

  /* Los anillos de la marca llevan siempre los colores de la composición
     del HERO: azul, violeta y rojo. Sobre tinta suben de tono para no
     perderse contra el negro. */
  --anillo-1:var(--azul);
  --anillo-2:var(--violeta);
  --anillo-3:var(--rojo);
}

[data-tema="tinta"]{
  --bg:var(--tinta);
  --fg:var(--papel);
  --mudo:#9A9A9A;
  --linea:rgba(251,251,251,.24);
  --linea-suave:rgba(251,251,251,.12);
  --acento:var(--azul-claro);
  --foco:var(--azul-claro);
  --error:var(--rojo);
  --vivo-azul:var(--azul-claro);
  --vivo-rojo:var(--rojo);
  --vivo-violeta:var(--violeta-claro);
  --anillo-1:var(--azul-claro);
  --anillo-2:var(--violeta-claro);
  --anillo-3:var(--rojo);
}
/* El azul de marca como fondo de bloque. Todo lo que va encima queda en
   blanco: no hay realces de color, porque el bloque entero ya es el color. */
[data-tema="azul"]{
  --bg:var(--azul);
  --fg:var(--papel);
  --mudo:rgba(251,251,251,.84);
  --linea:rgba(251,251,251,.36);
  --linea-suave:rgba(251,251,251,.14);
  --acento:var(--papel);
  --foco:var(--papel);
  --error:#FFD9DB;
  --vivo-azul:var(--papel);
  --vivo-rojo:var(--papel);
  --vivo-violeta:var(--papel);
  --anillo-1:var(--papel);
  --anillo-2:var(--papel);
  --anillo-3:var(--papel);
}
[data-tema="papel"]{
  --bg:var(--papel);
  --fg:var(--tinta);
  --mudo:#616161;
  --linea:rgba(21,21,21,.18);
  --linea-suave:rgba(21,21,21,.09);
  --acento:var(--azul);
  --foco:var(--violeta);
  --error:#C81E26;
  --vivo-azul:var(--azul);
  --vivo-rojo:#C81E26;
  --vivo-violeta:var(--violeta);

  /* Los anillos de la marca llevan siempre los colores de la composición
     del HERO: azul, violeta y rojo. Sobre tinta suben de tono para no
     perderse contra el negro. */
  --anillo-1:var(--azul);
  --anillo-2:var(--violeta);
  --anillo-3:var(--rojo);
}

/* --- Los anillos de la marca --------------------------------------------- */
.anillo--1{stroke:var(--anillo-1)}
.anillo--2{stroke:var(--anillo-2)}
.anillo--3{stroke:var(--anillo-3)}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:350;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}

:focus-visible{
  outline:2px solid var(--foco);
  outline-offset:3px;
  border-radius:1px;
}

::selection{background:var(--azul); color:var(--papel)}

.saltar{
  position:absolute; left:var(--gutter); top:0;
  transform:translateY(-120%);
  background:var(--tinta); color:var(--papel);
  padding:.7rem 1.1rem; z-index:100;
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
}
.saltar:focus{transform:translateY(0)}

.oculto-visual{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- Contenedores -------------------------------------------------------- */
.seccion{
  background:var(--bg);
  color:var(--fg);
  padding-block:var(--sec-y);
  position:relative;
}
.seccion--sin-tope{padding-block-start:0}
.seccion--sin-fin{padding-block-end:0}

.envoltura{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.rejilla{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1rem,2.4vw,2.5rem);
}

/* --- Tipografía ---------------------------------------------------------- */
.rotulo{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mudo);
  margin:0;
}
.rotulo--acento{color:var(--acento)}

.display{
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--t-display);
  line-height:1.06;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
.entrada{
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--t-lead);
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:pretty;
}
.entrada em{font-style:italic}

.parrafo{
  margin:0 0 1.15em;
  max-width:var(--medida);
  color:var(--fg);
}
.parrafo:last-child{margin-bottom:0}
.parrafo--mudo{color:var(--mudo)}

.titulo{
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--t-titulo);
  line-height:1.16;
  letter-spacing:-.015em;
  margin:0;
}

/* --- Realce: la paleta subrayando lo que importa -------------------------- */
/* No es negrita: es color. Hereda el peso del texto que lo rodea para que la
   frase no se rompa, y sube de tono sobre tinta. */
.realce{font-weight:inherit; color:var(--realce, var(--acento))}
.realce--azul{--realce:var(--vivo-azul)}
.realce--violeta{--realce:var(--vivo-violeta)}
.realce--rojo{--realce:var(--vivo-rojo)}

/* --- Enlaces y botones --------------------------------------------------- */
.enlace{
  display:inline-block;
  border-bottom:1px solid var(--linea);
  padding-bottom:.15em;
  transition:border-color .25s ease, color .25s ease;
}
.enlace:hover{border-bottom-color:var(--acento); color:var(--acento)}

.enlace-flecha{
  display:inline-flex; align-items:baseline; gap:.6em;
  font-size:var(--t-small);
  letter-spacing:.02em;
  border-bottom:1px solid var(--linea);
  padding-bottom:.35em;
  transition:border-color .25s ease, color .25s ease;
}
.enlace-flecha .punta{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.enlace-flecha:hover{border-bottom-color:var(--acento); color:var(--acento)}
.enlace-flecha:hover .punta{transform:translateX(.35em)}

.boton{
  display:inline-flex; align-items:center; gap:.9em;
  background:var(--fg); color:var(--bg);
  border:1px solid var(--fg);
  padding:.95em 1.6em;
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.boton:hover{background:var(--azul); border-color:var(--azul); color:var(--papel)}
.boton[disabled]{opacity:.5; cursor:default}
.boton--fantasma{background:transparent; color:var(--fg); border-color:var(--linea)}
.boton--fantasma:hover{background:var(--fg); color:var(--bg); border-color:var(--fg)}
/* El rojo de marca, lleno. Va en la versión oscurecida —la misma que ya usa
   el texto en rojo sobre papel— porque el #FB3D44 puro con letra blanca se
   queda en 3.5:1 y este rótulo es texto pequeño: en #C81E26 sube a 5.5:1.
   Al pasar el cursor hereda el azul del resto de los botones. */
.boton--rojo{background:var(--rojo-lleno); border-color:var(--rojo-lleno); color:var(--papel)}

/* =========================================================================
   Cabecera
   ========================================================================= */
/* Se queda en tinta pase por donde pase: es la banda que sostiene el contraste
   con el hero en blanco. */
.cabecera{
  position:sticky; top:0; z-index:60;
  color:var(--fg);
  background:var(--tinta);
  transition:border-color .35s ease;
  border-bottom:1px solid transparent;
}
.cabecera[data-fijo="si"]{border-bottom-color:rgba(251,251,251,.16)}
.cabecera__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,3rem);
  height:clamp(64px,8vh,84px);
}
.marca{
  position:relative; display:block;
  width:clamp(96px,10vw,132px); height:2.4em;
}
.marca__firma,.marca__iso{
  position:absolute; inset:0;
  background-color:currentColor;
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.marca__firma{
  -webkit-mask:url("../img/logo/mask-bestiario.svg") no-repeat left center/contain;
  mask:url("../img/logo/mask-bestiario.svg") no-repeat left center/contain;
}
/* El isólogo es alto y estrecho: se ancla a la izquierda y al alto de la barra. */
.marca__iso{
  -webkit-mask:url("../img/logo/BC.isologo.svg") no-repeat left center/contain;
  mask:url("../img/logo/BC.isologo.svg") no-repeat left center/contain;
  opacity:0; transform:scale(.9);
}
.marca:hover .marca__firma,.marca:focus-visible .marca__firma{opacity:0; transform:scale(.96)}
.marca:hover .marca__iso,.marca:focus-visible .marca__iso{opacity:1; transform:none}

.nav{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.4rem)}
@media (max-width:960px){ .nav{display:none} }

.nav__lista{
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.4rem);
  list-style:none; margin:0; padding:0;
}
.nav__item{position:relative}
.nav__enlace{
  display:inline-block;
  font-size:var(--t-menu);
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:.5rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__enlace:hover,
.nav__item[data-activo="si"] > .nav__enlace{border-bottom-color:currentColor}
.nav__item[data-actual="si"] > .nav__enlace{color:var(--azul-claro)}

/* Contacto no es una sección más: es la acción. */
.nav__enlace--boton,
.nav__item[data-actual="si"] > .nav__enlace--boton{
  background:var(--azul);
  color:var(--papel);
  padding:.62rem 1.15rem;
  border-bottom:0;
  transition:background-color .25s ease;
}
.nav__enlace--boton:hover{background:var(--azul-claro); border-bottom-color:transparent}

.submenu{
  position:absolute; top:100%; left:-1.1rem;
  min-width:19rem;
  background:var(--tinta); color:var(--papel);
  border:1px solid rgba(251,251,251,.16);
  padding:.6rem;
  margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__item[data-activo="si"] .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu a{
  display:block; padding:.55rem .8rem;
  font-size:var(--t-small); line-height:1.3;
  transition:background-color .18s ease, color .18s ease;
}
.submenu a:hover{background:rgba(251,251,251,.08); color:var(--azul-claro)}

.idiomas{display:flex; align-items:center; gap:.5rem; font-size:var(--t-menu); letter-spacing:.1em}
.idiomas__actual{color:var(--fg); font-weight:500}
.idiomas__otro{color:var(--mudo); transition:color .2s ease}
.idiomas__otro:hover{color:var(--acento)}
.idiomas__sep{color:var(--mudo)}

.hamburguesa{
  display:none;
  background:none; border:1px solid var(--linea);
  color:inherit;
  padding:.55rem .9rem; cursor:pointer;
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hamburguesa:hover{background:var(--azul-claro); border-color:var(--azul-claro); color:var(--papel)}
@media (max-width:960px){ .hamburguesa{display:inline-block} }

.panel{
  position:fixed; inset:0; z-index:70;
  background:var(--tinta); color:var(--papel);
  padding:var(--gutter);
  overflow-y:auto;
  display:flex; flex-direction:column;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.panel[data-abierto="si"]{transform:translateY(0)}
.panel__tope{display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem}
.panel__lista{list-style:none; margin:0; padding:0}
.panel__lista > li{border-top:1px solid rgba(251,251,251,.16)}
.panel__lista > li:last-child{border-bottom:1px solid rgba(251,251,251,.16)}
.panel__principal{
  display:block; padding:1.1rem 0;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.6rem,7vw,2.4rem); line-height:1.1; letter-spacing:-.025em;
}
.panel__principal{transition:color .2s ease}
.panel__principal:hover{color:var(--azul-claro)}
.panel__sub{list-style:none; margin:0 0 1.1rem; padding:0}
.panel__sub a{display:block; padding:.35rem 0; font-size:var(--t-small); color:#9A9A9A; transition:color .2s ease}
.panel__sub a:hover{color:var(--azul-claro)}
.panel__pie{margin-top:auto; padding-top:2.5rem; display:flex; justify-content:space-between; align-items:end; gap:1rem}

/* =========================================================================
   Hero — sobre tinta, con el resplandor azul de marca detrás. Los anillos
   ocupan la mitad izquierda; el eslogan, alineado a la derecha, la otra.
   ========================================================================= */
.hero{
  --bg:var(--tinta); --fg:var(--papel); --mudo:#9A9A9A;
  --linea:rgba(251,251,251,.24); --acento:var(--azul-claro); --foco:var(--azul-claro);
  background:var(--tinta); color:var(--papel);
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(520px, 84svh, 940px);
  display:flex; align-items:center;
  padding-block:clamp(2.5rem,7vh,5rem);
}

/* --- El resplandor -------------------------------------------------------
   La bestia2 en azul de marca, difuminada, colocada como en la maqueta: la
   pieza mide un 121 % del ancho del bloque y sube hasta dejar a la vista sólo
   su franja central. El desplazamiento va en `transform`, que se calcula
   sobre el propio alto de la pieza, para que la proporción aguante en
   cualquier pantalla sin depender del alto del hero. */
.hero__resplandor{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.hero__bestia{
  position:absolute;
  left:-14.8%; top:0;
  width:121%; height:auto;
  max-width:none;          /* desborda el bloque a propósito: img,svg lo limita */
  transform:translateY(-31.8%);
}
/* En vertical el bloque es mucho más alto que ancho: la mancha crece y baja
   para seguir cayendo detrás de los anillos y del eslogan. */
@media (max-width:899px){
  .hero__bestia{left:-45%; width:190%; transform:translateY(-2%)}
}

.hero__contenido{
  position:relative; z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
@media (min-width:900px){
  /* mitad y mitad: el dibujo no pesa menos que el texto */
  .hero__contenido{grid-template-columns:1fr 1fr}
  .hero__texto{text-align:right}
}
.hero__slogan{
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--t-hero);
  line-height:.94;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0 0 clamp(1.75rem,4.5vh,3rem);
}
.hero__slogan span{display:block; overflow:hidden}
.hero__slogan i{display:block; font-style:normal}
.hero__pie{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
}
@media (min-width:900px){ .hero__pie{justify-content:flex-end} }

.hero__figura{
  justify-self:center;
  width:min(100%, 560px);
}
@media (min-width:900px){ .hero__figura{justify-self:start; width:min(100%,620px)} }
.hero__anillos{width:100%; height:auto; overflow:visible}

/* El botón del hero, sobre el resplandor: contorno blanco que se rellena de
   azul al pasar el cursor. */
/* El botón del hero es la única acción del bloque: pesa más que un botón
   corriente, así que sube de cuerpo y afloja el interletrado. */
.hero .boton{
  font-size:clamp(.8125rem,.74rem + .28vw,1rem);
  letter-spacing:.06em;
  padding:.85em 1.9em;
}
.hero .boton--fantasma{
  background:transparent; color:var(--papel); border-color:rgba(251,251,251,.75);
}
.hero .boton--fantasma:hover,
.hero .boton--fantasma:focus-visible{
  background:var(--papel); color:var(--tinta); border-color:var(--papel);
}

/* entrada orquestada */
.js .hero__slogan i{transform:translateY(105%)}
.js .hero__pie,
.js .hero__figura{opacity:0; transform:translateY(14px)}
.hero[data-entrada="si"] .hero__slogan i{
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.16,.84,.3,1) var(--retraso,0s);
}
.hero[data-entrada="si"] .hero__pie,
.hero[data-entrada="si"] .hero__figura{
  opacity:1; transform:translateY(0);
  transition:opacity .9s ease var(--retraso,0s), transform .9s cubic-bezier(.16,.84,.3,1) var(--retraso,0s);
}
.hero__figura{--retraso:.35s}

/* Los anillos vibran y laten a la vez. La vibración es una órbita minúscula
   —cada anillo entra en ella por un ángulo distinto (--giro)—, así que las
   intersecciones se desplazan sin parar: los círculos se ven interactuando
   entre sí en vez de temblar cada uno por su lado. El latido reparte los
   cinco turnos a lo largo de un mismo ciclo de 9 s, de modo que siempre hay
   anillos entrando mientras otros se van.

   Van a un trazo fino y con el techo de opacidad bajo que les pone el propio
   latido (ver anillo-late): son el tercer nivel del bloque —detrás del
   eslogan y del botón—, atmósfera y no figura.

   El color cambia con el ancho. En vertical la mancha azul queda justo
   detrás de ellos y el morado de marca es lo que mejor los separa del
   fondo; en horizontal la composición se abre sobre la tinta y van en
   blanco. */
.anillo{
  fill:none; stroke:var(--violeta); stroke-width:1;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box; transform-origin:center;
  animation:anillo-orbita 4.5s linear var(--retraso,0s) infinite,
            anillo-late 9s ease-in-out var(--retraso,0s) infinite;
}
@media (min-width:900px){ .anillo{stroke:var(--papel)} }
@keyframes anillo-orbita{
  from{transform:rotate(var(--giro,0deg)) translateX(5px) rotate(calc(-1 * var(--giro,0deg)))}
  to  {transform:rotate(calc(var(--giro,0deg) + 360deg)) translateX(5px) rotate(calc(-1 * (var(--giro,0deg) + 360deg)))}
}
@keyframes anillo-late{
  0%,100%{opacity:.62}
  46%    {opacity:.1}
}

/* =========================================================================
   Bloque 2 — El ensamblaje: a la izquierda el enunciado, a la derecha el
   isólogo a tamaño de bloque. Sobre papel y quieto a propósito: es la pausa
   entre el hero y los servicios.
   ========================================================================= */
.ensamblaje{
  overflow:hidden;
  padding-block:clamp(5rem,13vh + 2rem,10rem);
}
.ensamblaje__rejilla{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,4rem);
  align-items:center;
}
@media (min-width:900px){
  .ensamblaje__rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
.ensamblaje__lead{
  margin:0;
  max-width:22ch;
  /* Sin destacado: la frase va en la voz ligera de la casa, no en negrita. */
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.5rem,1rem + 2.2vw,3rem);
  line-height:1.2; letter-spacing:-.025em;
  text-wrap:balance;
  color:var(--fg);
}
.ensamblaje__marca{display:flex; justify-content:center}
@media (min-width:900px){ .ensamblaje__marca{justify-content:flex-end} }
.marca-grande{
  width:min(100%, 20rem); height:auto;
  color:var(--fg);
}
@media (max-width:899px){ .marca-grande{width:min(48%, 12rem)} }

/* El isólogo se compone a la vista y vuelve a empezar: el «b» primero,
   después el punto y al final la coma. Es un ciclo de 3 s repartido en tres
   tiempos —se arma en 0,8 s, se queda quieto 1,4 s y se deshace en 0,7 s en
   el orden inverso—, de modo que el reposo pesa más que el movimiento y el
   bucle no queda inquieto. El escalonado va dentro de los propios fotogramas
   y no en un
   `animation-delay`: los tres trazos comparten duración y no se descuelgan
   nunca de fase, por muchas vueltas que den.

   El contenedor lleva `data-revelar`, así que quien arranca el ciclo es el
   mismo observador que el resto del sitio. */
.js .ensamblaje__marca[data-revelar]{opacity:1; transform:none}
.js .marca-grande__b,
.js .marca-grande__punto,
.js .marca-grande__coma{opacity:0}
.marca-grande__b,
.marca-grande__punto,
.marca-grande__coma{transform-box:fill-box; transform-origin:center}

.js .ensamblaje__marca[data-visible="si"] .marca-grande__b{
  animation:iso-b 3s linear infinite;
}
.js .ensamblaje__marca[data-visible="si"] .marca-grande__punto{
  animation:iso-punto 3s linear infinite;
}
.js .ensamblaje__marca[data-visible="si"] .marca-grande__coma{
  animation:iso-coma 3s linear infinite;
}
/* El «b» sube a su sitio y es el último en irse. */
@keyframes iso-b{
  0%   {opacity:0; transform:translateY(9%); animation-timing-function:cubic-bezier(.16,.84,.3,1)}
  12.5%{opacity:1; transform:none}
  84%  {opacity:1; transform:none; animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  100% {opacity:0; transform:translateY(4%)}
}
/* El punto cae desde arriba y se asienta. */
@keyframes iso-punto{
  0%,10%{opacity:0; transform:translateY(-70%) scale(.55); animation-timing-function:cubic-bezier(.34,1.4,.5,1)}
  18.5% {opacity:1; transform:none}
  80%   {opacity:1; transform:none; animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  89%   {opacity:0; transform:scale(.6)}
  100%  {opacity:0; transform:translateY(-70%) scale(.55)}
}
/* La coma se descuelga del punto: nace pegada a él y baja a su sitio. Al
   deshacerse el conjunto es la primera en marcharse. */
@keyframes iso-coma{
  0%,17.5%{opacity:0; transform:translateY(-38%) scale(.72); animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  27.5%   {opacity:1; transform:none}
  76%     {opacity:1; transform:none; animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  85.5%   {opacity:0; transform:scale(.75)}
  100%    {opacity:0; transform:translateY(-38%) scale(.72)}
}

/* =========================================================================
   Anillos de esquina — la marca asomando por el borde de los bloques azules.
   Sólo entra el arco que cabe en la esquina; el resto queda fuera del bloque.
   ========================================================================= */
.anillos-esquina{
  position:absolute; z-index:0;
  width:min(52vw,30rem); height:auto;
  fill:none;
  stroke:rgba(251,251,251,.32);
  stroke-width:1.25;
  pointer-events:none;
}
.anillos-esquina circle{vector-effect:non-scaling-stroke}
/* Bloque 3: asoma por arriba a la derecha. */
.anillos-esquina--servicios{top:-34%; right:-13%}
/* Filosofía (página interior): mismo gesto, por abajo a la izquierda, para no
   caer sobre la columna de texto, que aquí va a la derecha. */
.anillos-esquina--filosofia{bottom:-40%; left:-14%; width:min(52vw,32rem)}
@media (max-width:899px){
  .anillos-esquina{display:none}
}

/* =========================================================================
   Bloque 3 — Sobre papel. Ancho: seis columnas; al posar el cursor sobre una,
   su descripción ocupa el panel de abajo. Angosto: cada servicio se pliega,
   para que el bloque quepa en una pantalla en vez de en cuatro.
   ========================================================================= */
.bloque__tope{margin-bottom:clamp(2.5rem,6vw,4rem)}
/* El rótulo de cada bloque de la home pesa un poco más que un rótulo suelto:
   es el título del bloque, no una etiqueta al margen. */
.bloque__rotulo{
  margin-bottom:1.4rem;
  font-size:clamp(.8125rem,.72rem + .3vw,1rem);
  letter-spacing:.13em;
  color:var(--fg);
}
.bloque__lead{max-width:24ch}

/* El encabezado ocupa el ancho del bloque: la marca ya asoma por la esquina
   de arriba (ver .anillos-esquina--servicios). */
.servicios{position:relative; overflow:hidden}
.servicios .envoltura{position:relative; z-index:1}
.servicios__tope{display:grid; gap:clamp(1.5rem,4vw,3rem)}
.servicios__encabezado .bloque__lead{max-width:30ch}

.servicios6{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--linea);
}
@media (min-width:1080px){
  .servicios6{
    grid-template-columns:repeat(6,minmax(0,1fr));
    /* sitio reservado para el panel: la altura no baila al pasar el cursor */
    --panel-alto:clamp(12rem,18vw,15rem);
    padding-bottom:var(--panel-alto);
  }
}
.servicio6{
  border-bottom:1px solid var(--linea);
  transition:background-color .3s ease;
}
@media (min-width:1080px){
  .servicio6{
    border-left:1px solid var(--linea);
    border-bottom:0;
    padding:clamp(1.1rem,2vw,1.6rem) clamp(.9rem,1.4vw,1.3rem) clamp(1.6rem,3vw,2.4rem);
    cursor:default;
  }
  .servicio6:last-child{border-right:1px solid var(--linea)}
}
.servicio6:hover,.servicio6:focus-within{background:var(--linea-suave)}

/* La cabeza: es el <summary>, así que el triángulo del navegador sobra. */
.servicio6__cabeza{
  display:block; list-style:none; cursor:pointer;
  outline:none;
}
.servicio6__cabeza::-webkit-details-marker{display:none}
.servicio6__cabeza::marker{content:""}
.servicio6__cabeza:focus-visible{outline:2px solid var(--foco); outline-offset:-2px}

.servicio6__nombre{
  display:flex; align-items:center; gap:clamp(.8rem,2vw,1.2rem);
  margin:0; padding:1.05rem .2rem;
  font-family:var(--sans); font-weight:400;
  text-wrap:pretty;
}
.servicio6__num{
  flex:none;
  font-family:var(--sans); font-weight:200;
  font-size:1.6rem; line-height:1; letter-spacing:-.02em;
  color:var(--vivo-azul);
  transition:opacity .3s ease;
}
.servicio6__rotulo{
  flex:1 1 auto;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem); font-weight:500;
  line-height:1.28; letter-spacing:-.012em;
}

/* El signo: una cruz que se vuelve raya al abrirse. */
.servicio6__signo{
  position:relative; flex:none;
  width:.85rem; height:.85rem;
}
.servicio6__signo::before,
.servicio6__signo::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--vivo-azul);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.servicio6__signo::after{transform:rotate(90deg)}
.servicio6[open] .servicio6__signo::after{transform:rotate(0deg)}

/* Angosto: la descripción vive dentro del desplegable. */
.servicio6__panel{padding:0 .2rem 1.6rem}
.servicio6[open] .servicio6__panel{animation:desplegar .4s cubic-bezier(.16,.84,.3,1) both}
@keyframes desplegar{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* La frase de entrada manda dentro de la ficha: sube de cuerpo y va a color
   pleno, igual que en ancho. Los párrafos que siguen quedan en el tono
   apagado, así que la ficha se lee de un vistazo antes de leerla entera. */
.servicio6__resumen{
  margin:0;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);
  line-height:1.34; letter-spacing:-.015em;
  color:var(--fg);
}
.servicio6__texto{margin-top:1.1rem}
.servicio6__texto .parrafo{font-size:var(--t-small); line-height:1.6; color:var(--mudo)}

/* Ancho: vuelve la diagramación de seis columnas. El desplegable se queda
   siempre abierto y la descripción salta al panel compartido bajo la fila. */
@media (min-width:1080px){
  .servicio6__nombre{display:block; padding:0}
  .servicio6__num{display:block; font-size:clamp(2.1rem,1.2rem + 2.4vw,3.4rem)}
  /* El título del servicio es lo que se lee de la fila: pesa más que el
     número y manda sobre el resumen de abajo. */
  .servicio6__rotulo{
    display:block;
    margin-top:clamp(1.2rem,2.6vw,2.2rem);
    font-size:clamp(1.05rem,.86rem + .55vw,1.45rem);
    font-weight:500; line-height:1.2; letter-spacing:-.015em;
    color:var(--fg);
    text-wrap:balance;
    transition:opacity .3s ease;
  }
  .servicio6__signo{display:none}
  /* La columna entera responde al cursor; el summary no captura el clic. */
  .servicio6__cabeza{cursor:default; pointer-events:none}
  .servicio6__panel{
    position:absolute;
    left:0; right:0;
    /* la banda reservada, exacta: el borde superior del panel cae justo
       donde terminan las columnas */
    top:calc(100% - var(--panel-alto)); bottom:0;
    margin:0; padding:clamp(1.4rem,2.4vw,2rem) 0 0;
    animation:none;
    align-content:start;
    border-top:1px solid var(--linea);
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(1.5rem,3vw,3rem);
    opacity:0; visibility:hidden;
    transform:translateY(10px);
    /* En reposo, sin transición: al pasar de un servicio a otro el panel que
       sale desaparece en seco y nunca se superpone con el que entra. */
    transition:none;
    pointer-events:none;
  }
  .servicio6:hover .servicio6__panel,
  .servicio6:focus-within .servicio6__panel,
  .servicios6:not(:hover):not(:focus-within) .servicio6:first-child .servicio6__panel{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .25s ease, transform .35s cubic-bezier(.16,.84,.3,1);
  }
  .servicios6:not(:hover):not(:focus-within) .servicio6:first-child{background:var(--linea-suave)}
  .servicio6__resumen{
    font-family:var(--sans); font-weight:300;
    font-size:clamp(1.15rem,.95rem + .8vw,1.7rem);
    line-height:1.18; letter-spacing:-.02em;
    color:var(--fg); max-width:22ch;
  }
  .servicio6__texto{margin-top:0}
  .servicio6__texto .parrafo{max-width:58ch; font-size:var(--t-body); line-height:1.62}
  /* Mientras uno está activo, el resto baja la voz. */
  .servicios6:hover .servicio6:not(:hover) .servicio6__num,
  .servicios6:focus-within .servicio6:not(:focus-within) .servicio6__num{opacity:.32}
  .servicios6:hover .servicio6:not(:hover) .servicio6__rotulo,
  .servicios6:focus-within .servicio6:not(:focus-within) .servicio6__rotulo{opacity:.5}
  .servicios6__pista{display:none}
}
.servicios6__pista{
  margin:1.4rem 0 0; font-size:var(--t-small); color:var(--mudo); max-width:46ch;
}

/* --- Bloque 3 sobre azul: la fila de servicios es una banda blanca ---------
   Dentro de cada ficha se invierte el tema —azul sobre blanco— y la banda se
   separa con juntas del propio azul del bloque. La descripción, en cambio,
   cae fuera de la banda: ésa vuelve a ir en blanco sobre azul. */
[data-tema="azul"] .servicios6{border-top:0; gap:2px}
[data-tema="azul"] .servicio6{
  --fg:var(--azul); --mudo:#4B4B6E;
  --linea:rgba(25,19,191,.22); --linea-suave:rgba(25,19,191,.07);
  --vivo-azul:var(--azul); --foco:var(--azul);
  background:var(--papel); color:var(--azul);
  border:0;
}
[data-tema="azul"] .servicio6:hover,
[data-tema="azul"] .servicio6:focus-within{background:#FFFFFF}

@media (min-width:1080px){
  [data-tema="azul"] .servicio6:last-child{border-right:0}
  /* El panel está posicionado contra la fila, no contra la ficha: se sale de
     la banda blanca, así que recupera los colores del bloque. */
  [data-tema="azul"] .servicio6__panel{
    --fg:var(--papel); --mudo:rgba(251,251,251,.84);
    color:var(--papel);
    border-top:0;
    padding-top:clamp(1.1rem,2vw,1.7rem);
  }
  [data-tema="azul"] .servicio6__resumen{color:var(--papel)}
  [data-tema="azul"] .servicio6__texto .parrafo{color:rgba(251,251,251,.84)}
  /* Sin cursor encima manda la primera: en blanco puro, no en gris. */
  [data-tema="azul"] .servicios6:not(:hover):not(:focus-within) .servicio6:first-child{
    background:#FFFFFF;
  }
}

/* =========================================================================
   Bloque 4 — El método. A la izquierda los círculos que se ensamblan
   alrededor del isólogo; a la derecha los tres pasos.
   ========================================================================= */
.metodo__rejilla{row-gap:clamp(2rem,5vw,3rem); align-items:start}
.metodo__lienzo{grid-column:1 / -1; margin:0 0 1.6rem; justify-self:center; width:min(100%,32rem)}
.metodo__pasos{grid-column:1 / -1}
.metodo__rotulo{margin-bottom:clamp(1.6rem,3vw,2.4rem)}

/* Angosto: el lienzo deja de empujar el texto y pasa a ser fondo. Ocupa todo
   el alto del bloque, sin fondo propio —antes tapaba los pasos con un cuadro
   blanco— y el dibujo se queda pegado arriba mientras se baja. */
@media (max-width:999px){
  .metodo__rejilla{position:relative}
  .metodo__lienzo{
    position:absolute; inset:0; z-index:0;
    display:flex; justify-content:center; align-items:flex-start;
    margin:0; padding:0; width:auto;
    pointer-events:none;
  }
  .metodo__lienzo .ensamble{
    position:sticky;
    top:calc(clamp(64px,8vh,84px) + 7vh);
    width:min(96%,24rem); max-height:38vh;
    /* Baja la voz: acompaña la lectura en vez de competir con ella. */
    opacity:.34;
  }
  .metodo__lienzo .ensamble__anillo{stroke-width:2}
  .metodo__lienzo .ensamble__iso{opacity:0}
  .js .metodo__lienzo .ensamble[data-etapa="3"] .ensamble__iso{opacity:.55}
  .metodo__pasos{position:relative; z-index:1}
}
@media (min-width:1000px){
  .metodo__lienzo{
    grid-column:1 / span 6;
    position:sticky; top:calc(clamp(64px,8vh,84px) + 4vh);
    align-self:start; margin:0; justify-self:center;
    width:min(100%,34rem);
  }
  .metodo__pasos{grid-column:8 / span 5}
}

.ensamble{width:100%; height:auto; overflow:visible; color:var(--fg)}
.ensamble__anillo{
  fill:none; stroke-opacity:.85;
  stroke-width:1.6; vector-effect:non-scaling-stroke;
}
/* Dispersos al empezar; se buscan hasta cerrar la composición de marca. */
.js .ensamble__anillo{
  transform:translate(var(--dx),var(--dy));
  opacity:.2;
  transition:transform 1.5s cubic-bezier(.22,.72,.24,1) var(--turno,0s),
             opacity 1.1s ease var(--turno,0s), stroke-opacity .9s ease;
}
.js .ensamble[data-etapa="1"] .ensamble__anillo{
  transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45));
  opacity:.6;
}
.js .ensamble[data-etapa="2"] .ensamble__anillo,
.js .ensamble[data-etapa="3"] .ensamble__anillo{transform:none; opacity:1}

.ensamble__iso{
  color:var(--fg);
  opacity:0;
  transition:opacity 1s ease .25s;
}
.js .ensamble[data-etapa="3"] .ensamble__iso{opacity:1}
html:not(.js) .ensamble__iso{opacity:1}

/* Cada paso es un <details>. En angosto (y en táctil) se pliega y se abre al
   pincharlo; en pantalla ancha con cursor el JavaScript lo deja abierto y
   bloqueado, y el texto aparece al posar el cursor. Sin JavaScript salen
   los tres abiertos: nada queda escondido. */
.metodo__paso{
  border-top:1px solid var(--linea);
  transition:opacity .6s ease;
  padding-block:clamp(1.8rem,4vw,2.6rem);
}
.metodo__paso:last-child{border-bottom:1px solid var(--linea)}
/* El apagado sólo tiene sentido si algo lo vuelve a encender: es el scroll
   quien marca el paso vivo. Sin JavaScript los tres van a plena luz. */
.js .metodo__paso{opacity:.42}
.js .metodo__paso[data-vivo="si"]{opacity:1}
/* Un paso que el visitante abrió está a plena luz, aunque el scroll señale otro. */
[data-metodo][data-plegable="si"] .metodo__paso[open]{opacity:1}

.metodo__cabeza{
  list-style:none;
  cursor:pointer;
}
.metodo__cabeza::-webkit-details-marker{display:none}
.metodo__cabeza::marker{content:""}
.metodo__cabeza:focus{outline:none}
.metodo__cabeza:focus-visible{outline:2px solid var(--foco); outline-offset:6px}

.metodo__titulo{
  display:flex; align-items:center; gap:0;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.2rem,1rem + .9vw,1.75rem);
  line-height:1.16; letter-spacing:-.02em;
  margin:0;
  text-wrap:pretty;
}
.metodo__cifra{color:var(--vivo-azul); font-weight:300; margin-right:.4em}
.metodo__punto{color:var(--mudo); margin-right:.4em}
.metodo__nombre{flex:1 1 auto}
/* Dos puntos más que antes: el texto del paso es lectura, no pie de foto. */
.metodo__paso .parrafo{max-width:52ch; font-size:1rem; line-height:1.6; margin:0}
.metodo__texto{padding-top:1rem}

/* La cruz que avisa que hay texto debajo; se vuelve raya al desplegarse. */
.metodo__signo{
  display:block; position:relative; flex:none;
  width:.8rem; height:.8rem; margin-left:1.5rem;
  align-self:center;
}
.metodo__signo::before,
.metodo__signo::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--vivo-azul);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.metodo__signo::after{transform:rotate(90deg)}
.metodo__paso[open] .metodo__signo::after{transform:rotate(0deg)}

/* Ancho y con cursor: los tres quedan abiertos y del paso sólo se ve el
   título; el texto se despliega al posarse encima —o al enfocarlo con el
   teclado— y se repliega al salir. */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){
  .metodo__cabeza{cursor:default}
  .metodo__texto{
    display:grid; grid-template-rows:0fr;
    padding-top:0;
    opacity:0;
    transition:grid-template-rows .45s cubic-bezier(.16,.84,.3,1), opacity .3s ease;
  }
  .metodo__texto > *{overflow:hidden; min-height:0}
  .metodo__paso:hover,
  .metodo__paso:focus-within{opacity:1}
  .metodo__paso:hover .metodo__texto,
  .metodo__paso:focus-within .metodo__texto{grid-template-rows:1fr; opacity:1; padding-top:1rem}
  .metodo__paso[open] .metodo__signo::after{transform:rotate(90deg)}
  .metodo__paso:hover .metodo__signo::after,
  .metodo__paso:focus-within .metodo__signo::after{transform:rotate(0deg)}
}


/* =========================================================================
   Bloque 5 — ¿Quiénes somos? en la home. Sobre papel: a la izquierda una
   frase y el botón rojo; a la derecha la bestia1 en rojo, difuminada, que se
   sale por el borde del bloque.
   ========================================================================= */
.nosotras{position:relative; overflow:hidden}
.nosotras__rejilla{row-gap:clamp(2rem,5vw,3rem); align-items:center}
.nosotras__texto{grid-column:1 / -1; position:relative; z-index:1}
.nosotras__bestia{grid-column:1 / -1; position:relative; min-height:48vw}
@media (min-width:900px){
  .nosotras__texto{grid-column:1 / span 6}
  .nosotras__bestia{grid-column:7 / -1; min-height:28rem}
}
.nosotras__lead{
  font-size:clamp(1.7rem,1rem + 2.6vw,3.4rem);
  line-height:1.1; letter-spacing:-.028em;
  max-width:24ch;
  margin-bottom:clamp(1.8rem,4vw,2.6rem);
  text-wrap:pretty;
}
/* La mancha roja sale del bloque por la derecha; lo que se ve no es la
   silueta del animal sino su resplandor. Respira muy despacio para que el
   bloque no quede muerto. */
@keyframes bestia-respira{
  0%,100%{opacity:.62}
  50%    {opacity:.9}
}
@keyframes bestia-respira-fondo{
  0%,100%{opacity:.92}
  50%    {opacity:1}
}
.nosotras__silueta{
  position:absolute; z-index:0;
  top:50%; left:16%;
  transform:translateY(-50%);
  width:min(100vw,60rem); max-width:none; height:auto;
  pointer-events:none;
  animation:bestia-respira 26s ease-in-out infinite;
}
/* Angosto: la bestia deja de ser una columna al lado del texto y pasa a ser
   el fondo del bloque entero —el texto se lee encima, sobre la parte clara de
   arriba a la izquierda—. El botón se vacía: relleno rojo sobre fondo rojo no
   se distinguiría. */
@media (max-width:899px){
  .nosotras__bestia{
    position:absolute; inset:0; z-index:0;
    grid-column:auto; min-height:0;
    overflow:hidden; pointer-events:none;
  }
  .nosotras__silueta{
    top:57%; left:48%;
    transform:translate(-50%,-50%);
    width:188vw;
    /* De fondo la mancha tiene que pesar: a la opacidad del costado del
       escritorio se quedaría en un rosa lavado. */
    animation-name:bestia-respira-fondo;
  }
  .nosotras{padding-block:clamp(5rem,16vh,9rem)}
  .nosotras__texto{padding-bottom:clamp(6rem,30vw,11rem)}
  .nosotras .boton--rojo{
    background:transparent;
    border-color:var(--fg);
    color:var(--fg);
  }
  .nosotras .boton--rojo:hover{background:var(--fg); border-color:var(--fg); color:var(--bg)}
}
.nosotras__accion{margin:0}
.nosotras .boton{
  font-size:clamp(.8125rem,.74rem + .28vw,1rem);
  letter-spacing:.06em;
  padding:.85em 1.9em;
}

/* =========================================================================
   Página interior — Fundadoras y colaboradores
   ========================================================================= */
.equipo{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  margin-top:clamp(2.5rem,6vw,4rem);
}
.equipo--breve{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:clamp(1.6rem,3vw,2.4rem);
}
.persona{border-top:1px solid var(--linea); padding-top:1.6rem}
.persona__nombre{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.4rem,1.1rem + 1vw,2rem);
  line-height:1.08; letter-spacing:-.025em;
  margin:0 0 .5rem;
}
.persona__rol{
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--vivo-azul); margin:0 0 1.2rem;
}
.persona__texto{font-size:var(--t-small); line-height:1.65; color:var(--mudo)}
.persona--breve .persona__nombre{font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}

.colaboradores{margin-top:clamp(3.5rem,8vw,6rem)}
.colaboradores__nota{max-width:52ch; margin-top:-.4rem}
.persona--vacia{
  border-top:1px dashed var(--linea);
  min-height:8.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
}
.persona__ranura{
  margin:0; font-weight:200;
  font-size:1.9rem; line-height:1; letter-spacing:-.02em;
  color:var(--linea);
}
.persona__pendiente{
  margin:1.6rem 0 0;
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mudo); opacity:.7;
}

/* =========================================================================
   Página interior — La filosofía, al final y sobre los círculos
   ========================================================================= */
.filosofia{position:relative; overflow:hidden}
.filosofia .envoltura{position:relative; z-index:1}
.filosofia__rejilla{row-gap:clamp(2rem,5vw,3rem)}
.filosofia__tope{grid-column:1 / -1}
.filosofia__texto{grid-column:1 / -1}
@media (min-width:960px){
  .filosofia__tope{grid-column:1 / span 5; position:sticky; top:16vh; align-self:start}
  .filosofia__texto{grid-column:7 / span 6}
}
/* La frase es larga: baja un escalón de tamaño para caber en la columna
   pegajosa sin desbordarla. */
.filosofia__cita{
  font-size:var(--t-lead); max-width:24ch; margin-bottom:1.2rem;
}
.filosofia__fuente{max-width:34ch}
.filosofia__parrafo{
  max-width:56ch; color:var(--mudo);
  margin-bottom:1.5em;
}
.filosofia__parrafo:first-child{
  color:var(--fg); font-size:var(--t-lead); font-weight:300;
  line-height:1.22; letter-spacing:-.02em; max-width:26ch;
}
/* Aparecen a medida que se baja. */
.js [data-revelar]{opacity:0; transform:translateY(18px)}
.js [data-revelar][data-visible="si"]{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .9s cubic-bezier(.16,.84,.3,1);
}

/* =========================================================================
   Contacto
   ========================================================================= */
.contacto{position:relative; overflow:hidden}
.contacto .envoltura{position:relative; z-index:1}

.contacto__rejilla{row-gap:clamp(2.5rem,6vw,4rem); align-items:start}
.contacto__texto{grid-column:1 / -1}
.contacto__panel{grid-column:1 / -1; min-width:0}
@media (min-width:960px){
  .contacto__texto{grid-column:1 / span 4}
  .contacto__panel{grid-column:6 / span 7}
}
.contacto__lead{margin-bottom:1.4rem}
.contacto__directo{margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid var(--linea)}
.contacto__directo .rotulo{margin-bottom:.8rem}
.contacto__correo{
  overflow-wrap:anywhere;
  font-family:var(--sans); font-weight:300; letter-spacing:-.015em;
  font-size:clamp(1.1rem,1rem + .6vw,1.5rem);
  border-bottom:1px solid var(--linea); padding-bottom:.2em;
  transition:border-color .25s ease,color .25s ease; display:inline-block;
}
.contacto__correo:hover{color:var(--acento); border-bottom-color:var(--acento)}

/* Sobre tinta el formulario necesita un plano propio: un panel apenas más
   claro, con las etiquetas y las líneas subidas de tono. Así se lee. */
.contacto__panel{
  background:var(--panel-bg,transparent);
  border:1px solid var(--panel-linea,transparent);
  padding:var(--panel-aire,0);
}
[data-tema="tinta"] .contacto__panel,
.pie ~ .contacto__panel{
  --panel-bg:rgba(251,251,251,.045);
  --panel-linea:rgba(251,251,251,.14);
  --panel-aire:clamp(1.4rem,3.5vw,2.8rem);
}
[data-tema="tinta"] .contacto__panel .campo__etiqueta{color:#CFCFCF}
[data-tema="tinta"] .contacto__panel .campo__control{
  border-bottom-color:rgba(251,251,251,.34);
}
[data-tema="tinta"] .contacto__panel .campo__control:hover{border-bottom-color:var(--papel)}
[data-tema="tinta"] .contacto__panel .campo__control:focus{border-bottom-color:var(--azul-claro)}
[data-tema="tinta"] .contacto__panel .campo__control::placeholder{color:#8F8F8F}
[data-tema="tinta"] .contacto__panel select.campo__control option{background:#1E1E1E}
[data-tema="tinta"] .contacto__panel .opcion{color:var(--fg)}
[data-tema="tinta"] .contacto__panel .opcion input{border-color:rgba(251,251,251,.4)}
[data-tema="tinta"] .contacto__panel .opcion input:checked{
  border-color:var(--azul-claro);
  box-shadow:inset 0 0 0 3px #1E1E1E, inset 0 0 0 1rem var(--azul-claro);
}
[data-tema="tinta"] .contacto__panel .boton{background:var(--azul); border-color:var(--azul); color:var(--papel)}
[data-tema="tinta"] .contacto__panel .boton:hover{background:var(--papel); border-color:var(--papel); color:var(--tinta)}

.formulario{display:grid; gap:clamp(1.4rem,3vw,2rem)}
.campo{display:grid; gap:.5rem}
.campo--doble{display:grid; gap:clamp(1.4rem,3vw,2rem); grid-template-columns:1fr}
@media (min-width:640px){ .campo--doble{grid-template-columns:1fr 1fr} }
.campo__etiqueta{
  font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mudo);
}
.campo__pista{text-transform:none; letter-spacing:.02em; color:var(--mudo); opacity:.75}
.campo__control{
  background:transparent;
  border:0; border-bottom:1px solid var(--linea);
  padding:.75rem 0;
  font-size:var(--t-body);
  color:var(--fg);
  border-radius:0;
  transition:border-color .25s ease;
  width:100%;
}
.campo__control:hover{border-bottom-color:var(--fg)}
.campo__control:focus{outline:none; border-bottom-color:var(--foco); border-bottom-width:1px}
.campo__control:focus-visible{outline:2px solid var(--foco); outline-offset:4px}
.campo__control::placeholder{color:var(--mudo); opacity:1}
textarea.campo__control{resize:vertical; min-height:7.5rem; line-height:1.55}
select.campo__control{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(1.35em),calc(100% - 6px) calc(1.35em);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:1.8rem;
}
select.campo__control option{background:var(--bg); color:var(--fg)}
.campo__error{
  font-size:var(--t-small); color:var(--error); min-height:0;
}
.campo[data-error="si"] .campo__control{border-bottom-color:var(--error)}
.campo__opciones{display:grid; gap:.7rem; margin-top:.2rem}
.opcion{display:flex; align-items:flex-start; gap:.7rem; cursor:pointer; font-size:var(--t-small); line-height:1.4}
.opcion input{
  appearance:none; width:1rem; height:1rem; border-radius:50%; flex:none;
  border:1px solid var(--linea); margin-top:.15rem; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.opcion input:checked{border-color:var(--azul); box-shadow:inset 0 0 0 3px var(--bg), inset 0 0 0 1rem var(--azul)}
.opcion input:focus-visible{outline:2px solid var(--foco); outline-offset:3px}
.formulario__pie{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem}
.formulario__aviso{font-size:var(--t-small); color:var(--mudo)}
.formulario__estado{
  border-top:1px solid var(--linea); padding-top:1.4rem;
}
.formulario__estado[hidden]{display:none}
.formulario__ok{font-family:var(--sans); font-weight:300; font-size:var(--t-lead); line-height:1.2; margin:0 0 .5rem}
.miel{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* =========================================================================
   Pie
   ========================================================================= */
/* En blanco: es lo que separa el pie del formulario de contacto, que va en
   tinta justo encima. */
.pie{
  --bg:var(--papel); --fg:var(--tinta); --mudo:#616161; --linea:rgba(21,21,21,.16);
  background:var(--papel); color:var(--tinta);
  padding-block:clamp(4rem,9vw,6.5rem) clamp(1.6rem,3vw,2.4rem);
  position:relative; overflow:hidden;
}
.pie__rejilla{row-gap:clamp(2.2rem,5vw,3rem); align-items:start}
.pie__marca{grid-column:1 / -1}
.pie__col{grid-column:span 12}
@media (min-width:560px){ .pie__col{grid-column:span 6} }
@media (min-width:900px){
  .pie__marca{grid-column:1 / span 4}
  .pie__col{grid-column:span 2}
}
@media (min-width:1200px){
  .pie__marca{grid-column:1 / span 5}
  .pie__col{grid-column:span 2}
}
/* La firma, sola: el pie va limpio, sin recurso gráfico detrás. */
.pie__sello{position:relative; display:block; width:clamp(150px,17vw,230px)}
.pie__firma{
  position:relative; z-index:1;
  display:block; width:100%; height:auto;
  background-color:var(--fg);
  -webkit-mask:url("../img/logo/mask-bestiario.svg") no-repeat left center/contain;
  mask:url("../img/logo/mask-bestiario.svg") no-repeat left center/contain;
  aspect-ratio:1300/307;
}
.pie__tagline{
  position:relative; z-index:1;
  margin-top:1.1rem; font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mudo);
}
.pie__titulo{margin-bottom:1.1rem}
.pie__lista{
  list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
  font-size:var(--t-small); overflow-wrap:anywhere;
}
.pie__lista li{color:var(--mudo)}
.pie__lista a{color:var(--mudo); transition:color .2s ease}
.pie__lista a:hover{color:var(--fg)}
.pie__base{
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.4rem;
  border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:var(--t-label); letter-spacing:.1em; color:var(--mudo);
}

/* =========================================================================
   Páginas interiores
   ========================================================================= */
.portada{
  --bg:var(--tinta); --fg:var(--papel); --mudo:#9A9A9A;
  --linea:rgba(251,251,251,.24); --acento:var(--azul-claro); --foco:var(--azul-claro);
  background:var(--tinta); color:var(--papel);
  padding-block:clamp(8rem,20vh,13rem) clamp(3.5rem,8vh,6rem);
  margin-top:calc(-1 * clamp(64px,8vh,84px));
  position:relative; overflow:hidden;
}
.portada__rejilla{align-items:end; row-gap:2rem}
.portada__texto{grid-column:1 / -1}
@media (min-width:900px){ .portada__texto{grid-column:1 / span 8} }
.portada__rotulo{margin-bottom:1.4rem}
.portada__titulo{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(2.4rem,1.2rem + 6vw,6rem);
  line-height:.98; letter-spacing:-.03em; text-transform:uppercase; margin:0;
}
.portada__bajada{margin-top:1.6rem; max-width:44ch; color:#C9C9C9}
/* El mismo resplandor del hero, a la escala de la portada: la pieza entra
   por la derecha, que es el lado que aquí queda libre —el titular va a la
   izquierda—, y el texto se lee sobre la tinta. */
.portada__resplandor{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.portada__resplandor .hero__bestia{
  left:34%; top:0;
  width:110%;
  transform:translateY(-34%) scaleX(-1);
}
@media (max-width:899px){
  .portada__resplandor .hero__bestia{left:-10%; width:190%; transform:translateY(-22%) scaleX(-1)}
}
.portada .envoltura{position:relative; z-index:1}

/* Los anillos de la portada son el tercer nivel, igual que en el hero: van en
   el morado de marca y apenas se insinúan detrás del titular. */
.portada__anillos{
  position:absolute; z-index:0;
  right:-6vw; bottom:-30%;
  width:min(46vw,520px); pointer-events:none; opacity:.42;
}
.portada__anillos circle{stroke:var(--violeta); vector-effect:non-scaling-stroke}
@media (max-width:900px){ .portada__anillos{opacity:.26; right:-22vw; bottom:-18%} }

.migas{font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--mudo)}
.migas a{color:var(--mudo)}
.migas a:hover{color:var(--fg)}

.bloque-anclado{scroll-margin-top:6rem}
/* La cabecera va fija: los bloques de la home a los que apunta la barra se
   detienen justo debajo de ella, no debajo de su borde. */
.seccion[id],.hero[id]{scroll-margin-top:clamp(64px,8vh,84px)}

.cierre{
  border-top:1px solid var(--linea);
  padding-block:clamp(3rem,7vw,5rem);
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1.5rem;
}
.cierre__texto{
  font-family:var(--sans); font-weight:300; letter-spacing:-.02em;
  font-size:var(--t-lead); line-height:1.14; margin:0; max-width:24ch;
}

/* --- Movimiento reducido -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .hero__slogan i{transform:none}
  .js .hero__pie,.js .hero__figura{opacity:1; transform:none}
  .anillo{animation:none; opacity:1}
  .js .ensamble__anillo{transform:none; opacity:1}
  .ensamble__iso{opacity:1}
  .metodo__paso{opacity:1}
  .js [data-revelar]{opacity:1; transform:none}
  /* El isólogo se muestra entero: si sólo se acortara la duración, los
     retrasos seguirían escalonando la entrada. */
  .js .marca-grande__b,
  .js .marca-grande__punto,
  .js .marca-grande__coma{animation:none; opacity:1}
  .nosotras__silueta{animation:none}
  .servicio6[open] .servicio6__panel{animation:none}
}

/* --- Impresión ------------------------------------------------------------ */
@media print{
  .cabecera,.panel,.hero__figura,.portada__anillos,.metodo__lienzo{display:none}
  .seccion,.hero,.portada,.pie{background:#fff!important; color:#000!important; padding-block:1.5rem}
  .servicio6__panel{position:static; opacity:1; visibility:visible; transform:none; display:block}
}