/* COMO PERRO — hoja de estilos única
   Paleta, tipografía y reglas documentadas en docs/direccion_de_arte.md */

:root{
  --negro:#000000;
  --hueso:#F2F2F2;
  --rojo:#8B1E1E;
  --rojo-claro:#A42121;
  --carbon:#2B2B2B;
  --tinta:#1E1A1A;
  --linea:rgba(242,242,242,.16);
  --linea-clara:rgba(30,26,26,.14);
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  background:var(--negro);
  color:var(--hueso);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{
  background:var(--rojo-claro);
  color:var(--hueso);
}

a{color:inherit;}

:focus-visible{
  outline:2px solid var(--rojo-claro);
  outline-offset:3px;
}

/* ---------- Entrada ---------- */

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(1.6rem,4vw,3.4rem);
}

.hero-mark{
  width:100%;
  max-width:100%;
  margin-block:auto;
  margin-inline:0;
  text-align:center;
  animation:entra 1.4s cubic-bezier(.2,.7,.2,1) both;
}

/* La imagen oficial ya lleva el nombre de la marca: el h1 solo la contiene.
   La imagen es un WebP con fondo transparente (v5); `lighten` la funde con el negro de la página. */
.wordmark{
  margin:0;
  line-height:0;
}

.wordmark img{
  display:block;
  width:min(100%,42svh,440px);
  height:auto;
  margin:0 auto;
  mix-blend-mode:lighten;
}

.firma{
  margin:clamp(1.1rem,2.4vw,1.9rem) 0 0;
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(.85rem,1.1vw,1rem);
  letter-spacing:.22em;
  text-transform:none;
  color:rgba(242,242,242,.7);
}

.hero-pie{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem 1.2rem;
  border-top:1px solid var(--linea);
  padding-top:1.1rem;
}

.lema,
.disciplinas{
  margin:0;
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(.95rem,1.3vw,1.15rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

.lema{ color:rgba(242,242,242,.88); }
.disciplinas{ color:rgba(242,242,242,.62); }

/* ---------- Efectos de desplazamiento ----------
   escena.js escribe --p (0 a 1) en .escena y --r (0 a 1) en cada .revela.
   Sin JavaScript o con movimiento reducido, los valores por defecto dejan todo visible y quieto. */

.escena{
  position:relative;
  height:200svh;
}

.escena .hero{
  position:sticky;
  top:0;
  height:100svh;
  min-height:0;
  overflow:hidden;
}

.escena .wordmark{
  transform:scale(calc(1 + var(--p,0) * .5)) translateY(calc(var(--p,0) * -3svh));
  opacity:calc(1 - var(--p,0) * 1.2);
  will-change:transform,opacity;
}

.escena .firma{
  transform:translateY(calc(var(--p,0) * 5svh));
  opacity:calc(1 - var(--p,0) * 2.2);
}

.escena .hero-pie{
  opacity:calc(1 - var(--p,0) * 3);
}

/* Pausa entre frases del manifiesto: cada una entra sola al desplazarse */
.manifiesto .texto p.revela{margin-bottom:max(1.1em,16svh);}
.manifiesto .texto p.revela:last-child{margin-bottom:0;}

.revela{
  --r:1;
  opacity:calc(.14 + var(--r) * .86);
  transform:translateY(calc((1 - var(--r)) * 22px));
}

@keyframes entra{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}

/* ---------- Manifiesto ---------- */

.manifiesto{
  background:var(--hueso);
  color:var(--tinta);
  padding:clamp(5rem,11vw,9.5rem) 0;
}

.manifiesto-in{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(1.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.8rem,5vw,3.2rem);
}

.rotulo{
  margin:0;
  font-size:11px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--carbon);
}

.rotulo::before{
  content:"";
  display:block;
  width:44px;
  height:2px;
  background:var(--rojo-claro);
  margin-bottom:1.1rem;
}

.rotulo .num{
  display:block;
  font-family:'Anton',Impact,sans-serif;
  font-size:2rem;
  line-height:1;
  letter-spacing:0;
  margin-bottom:.55rem;
  color:var(--rojo);
}

.texto{max-width:32ch;}

.texto p{
  margin:0 0 1.1em;
  font-family:'EB Garamond',Georgia,serif;
  font-size:clamp(1.3rem,2.3vw,2.05rem);
  line-height:1.36;
  letter-spacing:.002em;
}

.texto p:last-child{margin-bottom:0;}

/* ---------- Bloques de doctrina ---------- */

.bloque{
  padding:clamp(5rem,11vw,9.5rem) 0;
}

.bloque.claro{
  background:var(--hueso);
  color:var(--tinta);
}

.bloque.oscuro{
  background:var(--negro);
  color:var(--hueso);
  border-top:1px solid var(--linea);
}

.oscuro .rotulo{color:rgba(242,242,242,.62);}
.oscuro .rotulo .num{color:var(--rojo-claro);}

/* Doctrina: cuatro principios */
.principios{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3rem) clamp(2rem,5vw,4.5rem);
}

.principios li{
  border-top:1px solid var(--linea);
  padding-top:1.3rem;
}

.principios .rom{
  display:block;
  font-family:'Anton',Impact,sans-serif;
  font-size:1.5rem;
  line-height:1;
  margin-bottom:.9rem;
  color:var(--rojo-claro);
}

.principios h3{
  margin:0 0 .8rem;
  font-size:11px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(242,242,242,.62);
}

.principios p{
  margin:0;
  max-width:30ch;
  font-family:'EB Garamond',Georgia,serif;
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.36;
}

/* Texto corrido sobre fondo oscuro y citas */
.oscuro .texto p{color:rgba(242,242,242,.88);}

.texto .cita{
  font-style:italic;
  margin-top:1.6em;
}

.texto .remate{
  color:var(--hueso);
  padding-top:1.1em;
  border-top:1px solid var(--linea);
}

/* Se dice así: frases de cierre en la voz de la marca */
.frases{
  display:grid;
  gap:clamp(1.6rem,4vw,2.8rem);
}

.frases p{
  margin:0;
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2rem,6.2vw,4.4rem);
  line-height:1.08;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.frases em{
  font-style:normal;
  color:var(--rojo);
}

.frases .cierre{
  padding-top:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--linea-clara);
  font-size:clamp(1rem,1.3vw,1.15rem);
  letter-spacing:.14em;
}

/* Mi práctica */
.practica{max-width:46ch;}

.practica .entradilla{
  margin:0 0 clamp(1.8rem,4vw,2.8rem);
  font-family:'EB Garamond',Georgia,serif;
  font-size:clamp(1.3rem,2.3vw,2.05rem);
  line-height:1.36;
}

.practica dl{margin:0;}

.practica dl > div{
  border-top:1px solid var(--linea-clara);
  padding:1.1rem 0 1.3rem;
}

.practica dt{
  margin:0 0 .45rem;
  font-family:'Anton',Impact,sans-serif;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--rojo);
}

.practica dd{
  margin:0;
  font-family:'EB Garamond',Georgia,serif;
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.4;
}

.firma-bloque{
  margin:1.8rem 0 0;
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:.95rem;
  letter-spacing:.22em;
  text-transform:none;
  color:rgba(30,26,26,.7);
}

@media (min-width:900px){
  .principios{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Lo que sostiene: seis cualidades */
.sostiene .entradilla{
  margin:0 0 clamp(2rem,4.5vw,3.2rem);
  max-width:24ch;
  font-family:'EB Garamond',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.4rem);
  line-height:1.25;
}

.cualidades{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.6rem,3.5vw,2.4rem) clamp(2rem,5vw,4.5rem);
}

.cualidades li{
  border-top:1px solid var(--linea);
  padding-top:1.1rem;
}

.cualidades h3{
  margin:0 0 .6rem;
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--rojo-claro);
}

.cualidades p{
  margin:0;
  max-width:34ch;
  font-family:'EB Garamond',Georgia,serif;
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.4;
  color:rgba(242,242,242,.88);
}

/* ---------- Pie ---------- */

.pie{
  background:var(--negro);
  border-top:1px solid var(--linea);
  padding:clamp(2rem,4vw,2.8rem) 0;
}

.pie-in{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(1.5rem,5vw,4rem);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.7rem 2rem;
}

.pie p{
  margin:0;
  font-size:11px;
  line-height:1.6;
  letter-spacing:.02em;
  color:rgba(242,242,242,.58);
}

.pie .ig{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:11px;
  letter-spacing:.02em;
  color:rgba(242,242,242,.58);
  text-decoration:none;
  transition:color .2s;
}

.pie .ig:hover{color:var(--hueso);}

/* ---------- Banda de pelaje ----------
   Textura entre la entrada y el manifiesto. escena.js escribe --v (0 a 1) y la textura
   se desliza de negro a rojo al cruzar la pantalla. */

.pelaje{
  --v:.5;
  position:relative;
  height:62svh;
  background-color:var(--negro);
  background-image:url(../img/pelaje.webp);
  background-repeat:no-repeat;
  background-size:auto 260%;
  background-position:50% calc(var(--v) * 100%);
}

.pelaje::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(var(--negro),rgba(0,0,0,0) 40%);
}

/* ---------- Sello (variante inversa del logo) ---------- */

.sello{
  display:block;
  width:min(100%,250px);
  height:auto;
  margin:clamp(2rem,5vw,3rem) 0 0;
}

/* ---------- Escenas fijadas por bloque ----------
   Solo con movimiento permitido y JavaScript activo. Si no, cada bloque queda como lista estática. */

.recorrido,
.progreso{display:none;}

@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  #doctrina{--n:4;}
  #sostiene{--n:6;}
  .recorrido{--n:8;}

  .escena-b{
    position:relative;
    height:calc(var(--n) * 60svh + 100svh);
    padding:0;
  }

  .recorrido{display:block;height:calc(var(--n) * 40svh + 100svh);}

  .escena-b .pantalla{
    position:sticky;
    top:0;
    height:100svh;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  .escena-b .pantalla > .manifiesto-in{width:100%;}

  .escena-b .pasos{
    display:grid;
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
  }

  .escena-b .pasos > *{
    grid-area:1 / 1;
    --a:0;
    opacity:var(--a);
    transform:translateY(calc((1 - var(--a)) * 24px));
    border-top:0;
    padding-top:0;
    will-change:opacity,transform;
  }

  .escena-b .pasos > :first-child{--a:1;}

  .progreso{
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--rojo-claro);
    transform:scaleX(var(--p,0));
    transform-origin:left;
  }

  /* Doctrina: un principio por pantalla */
  .escena-b .principios{grid-template-columns:1fr;}
  .escena-b .principios .rom{font-size:clamp(2.6rem,9vw,6rem);margin-bottom:1rem;}
  .escena-b .principios h3{margin-bottom:1.1rem;}
  .escena-b .principios p{font-size:clamp(1.6rem,4.2vw,3.2rem);max-width:24ch;}

  /* Sin terreno: el recorrido, una palabra a la vez */
  .recorrido .pasos > li{
    justify-self:center;
    width:100%;
    max-width:1180px;
    padding:0 clamp(1.5rem,5vw,4rem);
    font-family:'Anton',Impact,sans-serif;
    font-size:clamp(3.4rem,18vw,12rem);
    line-height:.95;
    text-transform:uppercase;
  }

  .recorrido .pasos > .cierre{
    font-family:'EB Garamond',Georgia,serif;
    font-style:italic;
    font-size:clamp(2rem,6vw,4.6rem);
    line-height:1.1;
    text-transform:none;
    color:rgba(242,242,242,.88);
  }

  /* Lo que sostiene: una cualidad a la vez */
  .escena-b .cualidades{grid-template-columns:1fr;}
  .escena-b .cualidades h3{font-size:clamp(2.2rem,7vw,4.5rem);margin-bottom:.8rem;}
  .escena-b .cualidades p{font-size:clamp(1.3rem,2.4vw,1.9rem);max-width:34ch;}
}

@media (max-width:699px){
  .pelaje{background-size:auto 260%;}
}

@media (min-width:700px){
  .pelaje{background-size:cover;}
}

/* ---------- Escritorio ---------- */

@media (min-width:900px){
  .manifiesto-in{
    grid-template-columns:190px minmax(0,1fr);
    gap:clamp(3rem,7vw,7rem);
  }

  .cualidades{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion:reduce){
  .hero-mark{animation:none;}
}