/* ==========================================================================
   Jorge Díaz — jorgediazfilms.com
   Paleta de su marca personal (MP JD Manual de marca, v1.0).

   Los roles NO son decorativos, vienen del manual:
     I  JADE      Jade Noir  #04211C  fondo profundo
                  Jade Profundo #0B3B33  color firma: botón principal, franjas
                  Jade Luz   #14705F  ACENTO: reglas, numerales, glows. Máx 5%
                  Jade Bruma #9DB8B0  texto secundario: kickers, fechas, subtítulos
     II NEUTRALES Negro Cine #000000  fondo por defecto
                  Grafito    #121212  tarjetas y capas
                  Gris Set   #2A2A2A  líneas de 1px y divisores
                  Gris Humo  #6E6E6E  metadatos y créditos
                  Blanco Hueso #F4F2ED  todo el texto principal
     III PROPORCIÓN  60 negro · 22 jade · 13 blanco · 5 jade luz

   Dos reglas duras del manual que este archivo respeta:
     · Nunca más de un jade por bloque.
     · PROHIBIDO texto sobre Jade Luz — es acento, no fondo. Por eso el botón
       principal es Jade Profundo (contraste 9.6:1 con Blanco Hueso) y el hover
       invierte a Blanco Hueso sobre Jade Noir (16:1), no a Jade Luz.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Neutrales — aquí vive el 85% de la página */
  --negro: #000000;        /* Negro Cine */
  --grafito: #121212;      /* Grafito: tarjetas y capas */
  --carbon: #121212;       /* misma capa; se conservan los dos nombres */
  --linea: #2a2a2a;        /* Gris Set: líneas de 1px y divisores */
  --blanco: #f4f2ed;       /* Blanco Hueso: todo el texto principal */
  --humo: rgba(244, 242, 237, 0.66);
  --humo-tenue: rgba(244, 242, 237, 0.44);

  /* Jade */
  --jade-noir: #04211c;
  --jade: #0b3b33;         /* color firma */
  --jade-luz: #14705f;     /* acento, máximo 5% */
  --bruma: #9db8b0;        /* texto secundario y núcleos de luz */
  --jade-tenue: rgba(20, 112, 95, 0.4);

  --fuente: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --marco: clamp(20px, 5vw, 80px);
  --seccion: clamp(88px, 13vh, 160px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip, no hidden: recorta sin crear un contenedor de scroll propio */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* --------------------------------------------------------------------------
   Textura de película: grano + viñeta. Sutil, es lo que quita el look plano.
   -------------------------------------------------------------------------- */
.grano {
  position: fixed;
  /* -6% basta para el desplazamiento del grano (máx. 2%). Con -50% el elemento
     medía el doble del viewport y provocaba desborde horizontal en celular. */
  inset: -6%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: granoMueve 0.7s steps(3) infinite;
}
@keyframes granoMueve {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
.vineta {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.72) 100%);
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.env {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--marco);
}

.rotulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bruma);
  margin: 0 0 clamp(24px, 4vw, 44px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--jade-tenue);
  max-width: 180px;
}

.titular {
  font-weight: 900;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
/* Utilidades globales: sirven en cualquier titular, no solo en .titular. */
/* --humo-tenue solo aquí: es titular grande, donde el mínimo es 3:1.
   En textos de 10-12 px daba 3.91:1 y no pasaba, así que esos usan --humo. */
.apagado { color: var(--humo-tenue); }
.jade { color: var(--jade-luz); }

.parrafo {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.6;
  color: var(--humo);
  max-width: 56ch;
}
.parrafo strong { color: var(--blanco); font-weight: 600; }

.seccion {
  padding-block: var(--seccion);
  position: relative;
}
.seccion + .seccion { border-top: 1px solid var(--linea); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  --alto: clamp(52px, 4.2vw, 62px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--alto);
  padding-inline: clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--jade-luz);
  border-radius: 999px;
  background: var(--jade);
  color: var(--blanco);
  font-family: var(--fuente);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--jade-noir);
}
.btn--fantasma {
  background: transparent;
  color: var(--blanco);
  border-color: var(--linea);
}
.btn--fantasma:hover {
  background: transparent;
  border-color: var(--jade-luz);
  color: var(--bruma);
}
.btn svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
  padding-inline: var(--marco);
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease), background 0.4s linear,
    backdrop-filter 0.4s linear, border-color 0.4s linear;
  border-bottom: 1px solid transparent;
}
.nav.visible { transform: translateY(0); }
.nav.solido {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}
.nav__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__marca img { width: 30px; height: 30px; }
.nav__enlaces {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav__enlaces a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--humo);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.nav__enlaces a:hover { color: var(--blanco); }
.nav .btn { --alto: 42px; font-size: 13px; padding-inline: 22px; }
@media (max-width: 780px) {
  .nav__enlaces a { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 120px clamp(48px, 7vh, 88px);
  overflow: hidden;
}
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* El motion graphic ya viene en la paleta de la marca: nada de desaturar. */
.hero__fondo video,
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.35) 38%,
    rgba(0, 0, 0, 0.88) 82%,
    var(--negro) 100%
  );
}
/* Base bajo el video: si el motion graphic aún no carga, el negro no queda plano. */
.hero__fondo--base {
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(255, 255, 255, 0.07) 0%, transparent 62%),
    radial-gradient(60% 45% at 22% 78%, rgba(20, 112, 95, 0.06) 0%, transparent 70%);
}

.hero__contenido { position: relative; z-index: 1; }
.hero__marca {
  position: absolute;
  top: clamp(32px, 5vh, 56px);
  left: var(--marco);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__marca img { width: clamp(44px, 4.4vw, 62px); flex: none; }
.hero__marca__txt { display: block; }
.hero__marca__txt b {
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blanco);
}
.hero__marca__txt i {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bruma);
}
@media (max-width: 560px) {
  .hero__marca__txt i { letter-spacing: 0.14em; font-size: 9px; }
}
.hero h1 {
  font-weight: 900;
  font-size: clamp(2.7rem, 8.2vw, 7.4rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  max-width: 15ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--jade-luz);
}
.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
}
.hero__pie .parrafo { max-width: 44ch; margin: 0; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; }

/* Centrado abajo: la esquina derecha es del interruptor de sonido. */
.bajar {
  position: absolute;
  bottom: clamp(20px, 3vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--humo);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bajar::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--bruma), transparent);
  animation: baja 2.2s var(--ease) infinite;
}
@keyframes baja {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}
@media (max-width: 780px) { .bajar { display: none; } }

/* --------------------------------------------------------------------------
   Frase a pantalla completa (secciones de golpe)
   -------------------------------------------------------------------------- */
.frase {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.frase__grande {
  font-weight: 900;
  font-size: clamp(2.2rem, 6.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.frase__apoyo {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 980px;
}
.frase__apoyo p { margin: 0; color: var(--humo); line-height: 1.6; }
.frase__cierre {
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--jade-tenue);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--jade-luz);
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   Servicio — tres columnas
   -------------------------------------------------------------------------- */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(44px, 5vw, 72px);
}
.pilar {
  background: var(--negro);
  padding: clamp(28px, 3vw, 44px);
  transition: background 0.5s var(--ease);
}
.pilar:hover { background: var(--grafito); }
.pilar__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bruma);
}
.pilar h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 18px 0 12px;
}
.pilar p { margin: 0; color: var(--humo); font-size: 0.98rem; line-height: 1.6; }

.remate {
  margin-top: clamp(44px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  justify-content: space-between;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--jade-tenue);
  border-radius: 4px;
  background: linear-gradient(120deg, rgba(20, 112, 95, 0.07), transparent 60%);
}
.remate p {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 30ch;
}

/* Variante apilada: cuando el bloque lleva un párrafo de apoyo debajo del
   remate y no solo un botón al lado. */
.remate--apilado {
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
}
.remate--apilado > p:first-child { color: var(--jade-luz); max-width: 34ch; }
/* `.remate p` gana en especificidad, así que hay que devolverle al párrafo de
   apoyo su peso normal y su ancho de lectura. */
.remate--apilado .parrafo {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   JD Method — pasos
   -------------------------------------------------------------------------- */
.metodo { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
  .metodo { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .metodo__intro { position: sticky; top: 140px; }
}
.metodo__intro .parrafo { margin-top: 28px; }

.pasos { display: flex; flex-direction: column; }
.paso {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: clamp(16px, 2vw, 32px);
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__num {
  font-size: clamp(1.2rem, 1.6vw, 1.35rem);
  font-weight: 900;
  color: var(--jade-luz);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.paso h3 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.paso p { margin: 0; color: var(--humo); line-height: 1.6; }
.ciclo {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bruma);
}
.ciclo svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Trabajo — rejilla de verticales
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  /* 150px de mínimo para que en celular caigan dos por fila; con una sola
     columna la sección se volvía un scroll interminable. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 700px) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
.pieza {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--carbon);
  border: 1px solid var(--linea);
  overflow: hidden;
  cursor: pointer;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), border-color 0.4s var(--ease);
}
.pieza:hover { border-color: var(--jade-tenue); }
/* mientras el cursor está encima la transición se acorta: la tarjeta tiene que
   seguir la mano, no perseguirla */
.pieza.inclinando { transition: transform 0.1s linear, border-color 0.4s var(--ease); }

/* brillo dorado que sigue al cursor: es lo que la hace ver como un objeto
   con superficie y no como un rectángulo con foto */
.pieza::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(20, 112, 95, 0.26), rgba(255, 255, 255, 0.05) 38%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.pieza:hover::after { opacity: 1; }
.pieza img { width: 100%; height: 100%; object-fit: cover; }
.pieza__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pieza__meta span { display: block; color: var(--bruma); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.pieza__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.pieza:hover .pieza__play { opacity: 1; transform: scale(1.08); }
.pieza__play i {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.25);
}
.pieza__play svg { width: 15px; height: 15px; margin-left: 3px; }

/* Marcador de material pendiente (se borra al meter el archivo real) */
.pendiente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  background:
    repeating-linear-gradient(45deg, rgba(20, 112, 95,0.05) 0 10px, transparent 10px 20px),
    var(--carbon);
  color: var(--bruma);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pendiente small {
  display: block;
  color: var(--humo);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Clientes
   -------------------------------------------------------------------------- */
.clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(40px, 5vw, 64px);
}
.cliente { background: var(--negro); padding: clamp(26px, 3vw, 40px); }
.cliente h3 {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cliente__giro {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bruma);
  margin-bottom: 18px;
}
.cliente p { margin: 0; color: var(--humo); font-size: 0.97rem; line-height: 1.6; }
.cliente__dato {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--blanco);
}

/* Fila de logos: todos en blanco monocromo para que ninguna paleta ajena
   pelee con el negro/jade. */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  margin-top: clamp(44px, 5vw, 72px);
  padding-block: clamp(28px, 3vw, 40px);
  border-block: 1px solid var(--linea);
}
.logos img {
  height: clamp(30px, 3.4vw, 44px);
  width: auto;
  opacity: 0.62;
  transition: opacity 0.4s var(--ease);
}
/* El PNG de Realtesa trae fondo blanco opaco: gris + invertido lo deja
   en blanco sobre negro y el fondo se funde con la página. */
.logos img.invertir { filter: grayscale(1) invert(1) contrast(1.15); }
.logos img:hover { opacity: 1; }
.logos__texto {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--humo);
  transition: color 0.4s var(--ease);
}
.logos__texto:hover { color: var(--blanco); }

.testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(28px, 3vw, 44px);
}
.testimonio {
  border: 1px solid var(--linea);
  padding: clamp(26px, 3vw, 38px);
  position: relative;
}
.testimonio blockquote {
  margin: 0 0 22px;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.testimonio cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bruma);
}

/* --------------------------------------------------------------------------
   Quién soy
   -------------------------------------------------------------------------- */
.retrato {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .retrato { grid-template-columns: 0.72fr 1.28fr; }
  /* En dos columnas sí cabe el vertical completo. La columna se estrecha un
     poco para que la foto no le gane el peso al texto. */
  .retrato__foto { aspect-ratio: 9 / 16; }
}
.retrato__foto {
  position: relative;
  aspect-ratio: 4 / 5;   /* celular: apilado y a todo lo ancho, 9:16 sería una pared */
  background: var(--carbon);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.retrato__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
.retrato h2 {
  font-weight: 900;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(24px, 3vw, 36px);
  max-width: 18ch;
  text-wrap: balance;
}
.retrato h2 em { font-style: normal; color: var(--jade-luz); }
.retrato .parrafo + .parrafo { margin-top: 20px; }

/* Firma bajo el texto de "Quién soy": cierra la sección con su nombre,
   como firma un director. Regla dorada corta a la izquierda. */
.firma {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.firma span {
  display: block;
  font-weight: 900;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: -0.03em;
}
.firma em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bruma);
}

/* --------------------------------------------------------------------------
   Cómo entramos
   -------------------------------------------------------------------------- */
.ruta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(40px, 5vw, 64px);
}
.ruta__paso { background: var(--negro); padding: clamp(26px, 3vw, 38px); }
.ruta__paso b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bruma);
  margin-bottom: 16px;
}
.ruta__paso h3 {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.ruta__paso p { margin: 0; color: var(--humo); font-size: 0.95rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Preguntas
   -------------------------------------------------------------------------- */
.faq { margin-top: clamp(40px, 5vw, 64px); max-width: 900px; }
.faq details {
  border-top: 1px solid var(--linea);
}
.faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: clamp(22px, 2.6vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bruma); }
.faq summary::after {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  border-right: 1.5px solid var(--jade-luz);
  border-bottom: 1.5px solid var(--jade-luz);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details p {
  margin: 0;
  padding-bottom: clamp(24px, 3vw, 32px);
  color: var(--humo);
  max-width: 62ch;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Cierre + footer
   -------------------------------------------------------------------------- */
/* El cierre es el único bloque de la página con campo de color: Jade Noir, el
   "fondo profundo" del manual. Es lo que le da al sitio su 22 % de jade sin
   romper la regla de un solo jade por bloque. Encima, el CTA se invierte a
   Blanco Hueso sobre Jade Noir (16:1), la pareja que el manual marca válida
   —y de paso el último botón de la página es el más fuerte de todos. */
.cierre {
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  background: linear-gradient(180deg,
    var(--negro) 0%, var(--jade-noir) 34%, var(--jade-noir) 76%, var(--negro) 100%);
}
.cierre .btn {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--jade-noir);
}
.cierre .btn:hover {
  background: transparent;
  border-color: var(--bruma);
  color: var(--blanco);
}
.cierre h2 {
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(26px, 3vw, 40px);
  max-width: 16ch;
  text-wrap: balance;
}
.cierre .parrafo { margin: 0 auto clamp(34px, 4vw, 52px); text-align: center; }

.pie {
  border-top: 1px solid var(--linea);
  padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3vw, 40px);
}
.pie__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  justify-content: space-between;
  align-items: flex-start;
}
.pie__logo { display: flex; align-items: center; gap: clamp(14px, 2vw, 20px); }
.pie__logo img { width: clamp(64px, 7vw, 88px); height: auto; }
.pie__firma strong {
  display: block;
  font-weight: 900;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.03em;
}
.pie__firma span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--humo);
}
.pie__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 88px); }
.pie__col h3 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bruma);
}
.pie__col a, .pie__col p {
  display: block;
  margin: 0 0 10px;
  color: var(--humo);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s var(--ease);
}
.pie__col a:hover { color: var(--blanco); }
.pie__legal {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   PIEZAS DE CONVERSIÓN
   Las cuatro piezas que le faltaban a la página según la metodología de las
   cuatro capas (claridad → relevancia → valor → diferenciación) más manejo de
   objeciones y reversión de riesgo. Cada una hace UN trabajo:

     .franja    prueba inmediata, arriba del pliegue    → confianza en 3 s
     .dolores   los dolores del cliente en su idioma    → capa de RELEVANCIA
     .contraste yo vs. la alternativa, lado a lado      → capa de DIFERENCIACIÓN
     .riesgo    qué NO arriesga, pegado al CTA          → reversión de riesgo
   -------------------------------------------------------------------------- */

/* La franja de prueba: va inmediatamente debajo del hero porque la decisión de
   quedarse o irse se toma antes de scrollear. Tres hechos, nada de adjetivos. */
.franja {
  border-block: 1px solid var(--linea);
  background: var(--grafito);
}
.franja__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
  padding-block: clamp(26px, 3.2vw, 40px);
}
@media (min-width: 760px) {
  .franja__fila { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
  .franja__d + .franja__d { border-left: 1px solid var(--linea); padding-left: clamp(28px, 4vw, 64px); }
}
.franja__d b {
  display: block;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--blanco);
}
.franja__d span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bruma);
}

/* Los dolores. Se leen como lo que la gente le dice a Jorge en la llamada:
   la frase entrecomillada es del cliente, la respuesta es de él. La regla
   vertical va en Jade Luz porque el manual le da justo ese rol: "reglas". */
.dolores { margin-top: clamp(40px, 5vw, 68px); display: grid; gap: clamp(26px, 3.2vw, 40px); }
@media (min-width: 900px) { .dolores { grid-template-columns: 1fr 1fr; gap: clamp(30px, 3.6vw, 52px); } }
.dolor {
  border-left: 2px solid var(--jade-luz);
  padding-left: clamp(18px, 2vw, 26px);
}
.dolor b {
  display: block;
  font-size: clamp(1.12rem, 1.75vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.28;
  color: var(--blanco);
  text-wrap: balance;
}
.dolor p {
  margin: 12px 0 0;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.62;
  color: var(--humo);
  max-width: 46ch;
}

/* El contraste. Dos columnas: la alternativa apagada, él encendido. En celular
   se apilan y la etiqueta de cada lado deja claro cuál es cuál. */
.contraste {
  margin-top: clamp(38px, 4.5vw, 60px);
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}
@media (min-width: 820px) { .contraste { grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 2.6vw, 40px); } }
.contraste__cab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.contraste__cab--otros { color: var(--humo); }
.contraste__cab--yo { color: var(--bruma); }
.contraste__l {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: clamp(14px, 1.7vw, 20px) 0;
  border-bottom: 1px solid var(--linea);
  font-size: clamp(0.97rem, 1.2vw, 1.06rem);
  line-height: 1.55;
}
.contraste__l--otros { color: var(--humo); }
.contraste__l--yo { color: var(--blanco); }
.contraste__l i {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  position: relative;
}
.contraste__l--otros i { border: 1px solid var(--linea); }
.contraste__l--yo i { border: 1px solid var(--jade-luz); background: rgba(20, 112, 95, 0.22); }
.contraste__l--yo i::after {
  content: '';
  position: absolute;
  left: 4px; top: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bruma);
}
/* Apilado en celular: cada bloque necesita su etiqueta encima. */
@media (max-width: 819px) {
  .contraste__cab { margin-top: clamp(24px, 4vw, 32px); }
  .contraste__cab:first-child { margin-top: 0; }
}

/* La reversión de riesgo. Va pegada al último CTA porque ahí es donde el miedo
   a equivocarse pesa más. Sin garantías inventadas: sólo lo que Jorge ya
   cumple en sus llamadas. */
.riesgo {
  margin-top: clamp(38px, 4.5vw, 60px);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 820px) { .riesgo { grid-template-columns: repeat(3, 1fr); } }
.riesgo__c {
  border: 1px solid var(--linea);
  border-top: 2px solid var(--jade-luz);
  border-radius: 4px;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--grafito);
}
.riesgo__c h3 {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.28;
  color: var(--blanco);
}
.riesgo__c p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--humo);
}

/* --------------------------------------------------------------------------
   MARCADOR — el antes/después del caso de Santi.
   Dos columnas de números. La de "antes" va apagada, la de "después" en jade.
   El pie de la tabla dice EXACTAMENTE qué se está comparando: sin esa línea,
   cualquiera que scrollee el perfil encuentra un reel viejo más grande y la
   afirmación se cae.
   -------------------------------------------------------------------------- */
.marcador {
  margin-top: clamp(36px, 4.5vw, 56px);
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}
@media (min-width: 760px) { .marcador { grid-template-columns: 1fr 1fr; } }
.marcador__c {
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--grafito);
}
.marcador__c--despues { border-color: var(--jade-luz); background: linear-gradient(160deg, rgba(20,112,95,.13), transparent 70%), var(--grafito); }
.marcador__et {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.marcador__c--antes   .marcador__et { color: var(--humo); }
.marcador__c--despues .marcador__et { color: var(--bruma); }
.marcador__n {
  display: block;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.marcador__c--antes   .marcador__n { color: var(--humo); }
.marcador__c--despues .marcador__n { color: var(--blanco); }
.marcador__u {
  display: block;
  margin-top: 12px;
  font-size: 0.97rem;
  color: var(--humo);
}
.marcador__lista { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linea); }
.marcador__lista span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 0.94rem;
  color: var(--humo);
}
.marcador__lista span b { font-weight: 700; color: var(--blanco); font-variant-numeric: tabular-nums; }
.marcador__c--antes .marcador__lista span b { color: var(--humo); }
.nota-tabla {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--humo);
  max-width: 62ch;
  padding-left: 16px;
  border-left: 2px solid var(--linea);
}

/* Pasos numerados del sistema */
.sistema { margin-top: clamp(36px, 4.5vw, 56px); display: grid; gap: 0; }
.sistema__p {
  display: grid;
  gap: 6px clamp(20px, 3vw, 40px);
  padding: clamp(22px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--linea);
}
.sistema__p:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 820px) { .sistema__p { grid-template-columns: 90px 1fr; } }
.sistema__n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bruma);
  padding-top: 6px;
}
.sistema__p h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.25;
  color: var(--blanco);
}
.sistema__p p { margin: 0; color: var(--humo); line-height: 1.62; max-width: 62ch; }
.sistema__p p + p { margin-top: 10px; }
.sistema__p em { font-style: normal; color: var(--bruma); }

/* --------------------------------------------------------------------------
   Revelado al hacer scroll
   -------------------------------------------------------------------------- */
.rev {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--retraso, 0ms);
}
.rev.dentro { opacity: 1; transform: none; }

/* Titulares que entran con giro 3D suave */
.rev3d {
  opacity: 0;
  transform: perspective(1200px) rotateX(9deg) translateY(38px);
  transform-origin: 50% 100%;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--retraso, 0ms);
}
.rev3d.dentro { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev, .rev3d { opacity: 1; transform: none; transition: none; }
  .grano { animation: none; }
  .bajar::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Página interior (landing pages)
   -------------------------------------------------------------------------- */
.interior { padding-top: clamp(140px, 18vh, 200px); }
.interior h1 {
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(26px, 3vw, 38px);
  max-width: 16ch;
  text-wrap: balance;
}
.incluye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: clamp(40px, 5vw, 64px);
}
.incluye div { background: var(--negro); padding: clamp(24px, 2.8vw, 36px); }
.incluye h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; }
.incluye p { margin: 0; color: var(--humo); font-size: 0.95rem; line-height: 1.6; }
.muestras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 64px);
}
.muestra {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  border: 1px solid var(--linea);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--carbon);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transform-style: preserve-3d;
  transition: border-color 0.4s var(--ease), transform 0.6s var(--ease);
}
.muestra:hover { border-color: var(--jade-tenue); }
.muestra.inclinando { transition: border-color 0.4s var(--ease), transform 0.1s linear; }
.muestra::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
              rgba(20, 112, 95, 0.2), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.muestra:hover::after { opacity: 1; }
.muestra img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.muestra__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 18px 18px;
  /* Las capturas son claras: el degradado tiene que subir más y ser más opaco
     o el rótulo dorado se pierde encima del blanco. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.86) 55%, transparent 100%);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.muestra__meta span {
  display: block;
  color: var(--bruma);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* --------------------------------------------------------------------------
   LAS 7 VECES — siete pantallas en arco 3D que se encienden una por una.
   La séptima es la que compra. CSS 3D puro, sin librerías.
   -------------------------------------------------------------------------- */
.siete {
  margin-top: clamp(40px, 5vw, 68px);
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
.siete__escena {
  position: relative;
  height: clamp(150px, 17vw, 220px);
  transform-style: preserve-3d;
  transform: rotateX(9deg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.siete__p {
  --ang: calc((var(--i) - 3) * 7deg);
  --z: calc(var(--i) * 6px);
  position: absolute;
  left: calc(var(--i) * clamp(50px, 9.2vw, 132px));
  width: clamp(56px, 6vw, 84px);
  height: clamp(104px, 11vw, 152px);
  border-radius: clamp(8px, 0.9vw, 13px);
  transform-style: preserve-3d;
  transform: rotateY(var(--ang)) translateZ(var(--z)) translateY(14px) scale(0.94);
  /* el brillo sube con --i: se lee como impresiones que se van acumulando */
  --luz: calc(0.05 + var(--i) * 0.028);
  background: linear-gradient(160deg, rgba(255, 255, 255, var(--luz)), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, calc(0.08 + var(--i) * 0.026));
  opacity: 0;
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease),
    border-color 0.7s var(--ease),
    box-shadow 0.7s var(--ease),
    background 0.7s var(--ease);
  transition-delay: calc(var(--i) * 130ms);
}
/* la barrita interior: da la lectura de "pantalla", no de rectángulo suelto */
.siete__p::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 16%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, calc(0.14 + var(--i) * 0.05));
  transition: background 0.7s var(--ease);
  transition-delay: calc(var(--i) * 130ms);
}

.siete.dentro .siete__p {
  opacity: 1;
  transform: rotateY(var(--ang)) translateZ(var(--z)) translateY(0) scale(1);
}

/* la séptima: la que sí compra */
.siete.dentro .siete__p--compra {
  border-color: var(--jade-luz);
  background: linear-gradient(160deg, rgba(20, 112, 95, 0.34), rgba(20, 112, 95, 0.07));
  box-shadow:
    0 0 0 1px rgba(20, 112, 95, 0.35),
    0 8px 26px rgba(20, 112, 95, 0.14),
    0 22px 70px rgba(20, 112, 95, 0.1);
}
.siete.dentro .siete__p--compra::before { background: var(--bruma); }

.siete__p--compra span {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%) translateY(6px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bruma);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: 1.15s;
}
.siete.dentro .siete__p--compra span { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .siete__p { opacity: 1; transform: none; transition: none; }
  .siete__escena { transform: none; }
}

/* En pantallas angostas el arco se salía del borde y cortaba el rótulo COMPRA. */
@media (max-width: 700px) {
  .siete__escena { height: 132px; transform: rotateX(7deg); }
  .siete__p {
    left: calc(var(--i) * 42px);
    width: 50px;
    height: 92px;
    border-radius: 8px;
  }
  .siete__p--compra span { bottom: -22px; font-size: 9px; letter-spacing: 0.16em; }
}

/* --------------------------------------------------------------------------
   SONIDO — interruptor flotante. Apagado por defecto: nadie que llega desde
   Instagram quiere que una página le suene sola.
   -------------------------------------------------------------------------- */
.sonido {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 9999;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  color: var(--humo);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.sonido:hover { opacity: 1; transform: translateY(-2px); color: var(--blanco); }
.sonido svg { width: 17px; height: 17px; }
.sonido .on { display: none; }
.sonido[aria-pressed="true"] {
  opacity: 1;
  color: var(--bruma);
  border-color: var(--jade-tenue);
}
.sonido[aria-pressed="true"] .on { display: block; }
.sonido[aria-pressed="true"] .off { display: none; }

/* pista la primera vez, para que se note que hay sonido y no sea un botón mudo */
.sonido__pista {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bruma);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.sonido--pista .sonido__pista { opacity: 1; transform: translateY(-50%) translateX(0); }


/* Sin inclinación donde no hay cursor fino (celular/tablet) ni si pidieron
   menos movimiento: ahí el 3D solo estorbaría. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .pieza, .muestra { transform: none; }
  .pieza::after, .muestra::after { display: none; }
}

/* El revelado (.rev.dentro) pone transform:none y le ganaba a la inclinación.
   Estas reglas van al final y con más especificidad para devolverle el 3D. */
.pieza.rev.dentro {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
}
.muestra.rev.dentro {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .pieza.rev.dentro, .muestra.rev.dentro { transform: none; }
}

/* Sombra en tres capas al levantar la tarjeta: contacto, oclusión y ambiente.
   Una sola sombra difusa se ve a plantilla; tres se ven a objeto real. */
.pieza, .muestra { z-index: 1; }
.pieza:hover, .muestra:hover {
  z-index: 4;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 16px 40px rgba(0, 0, 0, 0.38),
    0 44px 110px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(20, 112, 95, 0.16);
}
.pieza, .muestra {
  transition:
    transform 0.6s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
}
.pieza.inclinando, .muestra.inclinando {
  transition:
    transform 0.1s linear,
    border-color 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
}

/* --------------------------------------------------------------------------
   EL CICLO 3D — el JD Method dibujado como lo que es: un aro que da vueltas.
   Seis nodos sobre un plano inclinado; se enciende el del paso que se está
   leyendo, y una marca dorada gira hasta él.
   -------------------------------------------------------------------------- */
.ciclo3d {
  --r: 152px;              /* radio del aro */
  --tilt: 60deg;           /* inclinación del plano */
  margin-top: clamp(36px, 4vw, 56px);
  height: calc(var(--r) * 2 * 0.5 + 64px);
  perspective: 900px;
  perspective-origin: 50% 40%;
}
.ciclo3d__plano {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt));
}
.ciclo3d__aro,
.ciclo3d__marca {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin-left: calc(var(--r) * -1);
  margin-top: calc(var(--r) * -1);
  border-radius: 50%;
  box-sizing: border-box;
}
.ciclo3d__aro { border: 1px solid rgba(255, 255, 255, 0.13); }

/* un arco dorado que apunta al nodo activo */
.ciclo3d__marca {
  border: 2px solid transparent;
  border-top-color: var(--jade-luz);
  transform: rotate(var(--activo, -90deg));
  transition: transform 0.8s var(--ease);
  filter: drop-shadow(0 0 6px rgba(20, 112, 95, 0.5));
  opacity: 0.9;
}

.ciclo3d__n {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(var(--a)) translateX(var(--r));
  transform-style: preserve-3d;
}
/* el punto y el número se contra-rotan para quedar de frente a la cámara */
.ciclo3d__n i,
.ciclo3d__n b {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(calc(var(--a) * -1)) rotateX(calc(var(--tilt) * -1)) translate(-50%, -50%);
  transform-origin: 0 0;
}
.ciclo3d__n i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease),
    width 0.5s var(--ease), height 0.5s var(--ease);
}
.ciclo3d__n b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--humo);
  margin-top: -30px;
  transition: color 0.5s var(--ease);
}
.ciclo3d__n.activo i {
  width: 14px;
  height: 14px;
  background: var(--bruma);
  box-shadow: 0 0 0 4px rgba(20, 112, 95, 0.24), 0 0 18px rgba(20, 112, 95, 0.85);
}
.ciclo3d__n.activo b { color: var(--bruma); }

@media (max-width: 999px) {
  .ciclo3d { --r: 104px; --tilt: 58deg; }
}
@media (prefers-reduced-motion: reduce) {
  .ciclo3d__marca { transition: none; }
}

/* --------------------------------------------------------------------------
   LOS TRES OBJETOS DEL SERVICIO — una pieza 3D por pilar, como en un keynote.
   Marca = una diana (a quién le hablas). Producción = un diafragma de cámara.
   Datos = barras que crecen y la que gana se enciende en jade.
   Arrancan cuando la sección entra en pantalla (.pilares.dentro).
   -------------------------------------------------------------------------- */
.obj {
  height: 96px;
  margin: 22px 0 4px;
  perspective: 620px;
  perspective-origin: 50% 42%;
}
.obj__plano {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* ---- 01 · la diana ------------------------------------------------------- */
.obj--diana .obj__plano { transform: rotateX(62deg); }
.obj--diana span,
.obj--diana b {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.7s var(--ease);
}
.obj--diana span { border: 1px solid rgba(255, 255, 255, 0.22); }
.obj--diana span:nth-child(1) { width: 168px; height: 168px; transition-delay: 0.05s; }
.obj--diana span:nth-child(2) { width: 112px; height: 112px; transition-delay: 0.17s; }
.obj--diana span:nth-child(3) { width: 58px;  height: 58px;  transition-delay: 0.29s; }
.obj--diana b {
  width: 13px; height: 13px;
  background: var(--bruma);
  box-shadow: 0 0 16px rgba(20, 112, 95, 1);
  transition-delay: 0.44s;
}
.pilares.dentro .obj--diana span,
.pilares.dentro .obj--diana b { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* ---- 02 · el diafragma --------------------------------------------------- */
.obj--iris .obj__plano { transform: rotateX(16deg) rotateZ(0deg); }
.obj--iris span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  /* cada hoja es un triángulo girado 60° respecto de la anterior */
  clip-path: polygon(50% 50%, 100% 8%, 100% 92%);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border-radius: 4px;
  transform: rotate(calc(var(--b) * 60deg)) scale(1);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 0.7s var(--ease);
  transition-delay: calc(var(--b) * 60ms);
}
.obj--iris b {
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--bruma);
  box-shadow: 0 0 18px rgba(20, 112, 95, 1);
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.8s var(--ease), opacity 0.6s var(--ease);
  transition-delay: 0.55s;
}
/* al abrir, las hojas giran y se retiran hacia afuera */
.pilares.dentro .obj--iris span {
  opacity: 1;
  transform: rotate(calc(var(--b) * 60deg + 26deg)) scale(1.22);
}
.pilares.dentro .obj--iris b { opacity: 1; transform: scale(1); }

/* ---- 03 · las barras ----------------------------------------------------- */
.obj--barras .obj__plano {
  /* la rotateY corre el grupo a la derecha: se centra a mano para que las tres
     piezas de la sección queden alineadas entre sí */
  transform: rotateY(19deg) rotateX(6deg) translateX(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
}
.obj--barras span {
  width: 24px;
  flex: none;
  height: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07));
  transition: height 0.85s var(--ease), background 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
  transition-delay: calc(var(--i) * 90ms);
}
.obj--barras span:last-child {
  background: linear-gradient(180deg, var(--bruma), rgba(20, 112, 95, 0.3));
  box-shadow: 0 0 22px rgba(20, 112, 95, 0.5);
}
.pilares.dentro .obj--barras span { height: var(--h); }

@media (max-width: 700px) { .obj { height: 84px; } }
@media (prefers-reduced-motion: reduce) {
  .obj span, .obj b { transition: none !important; }
}


/* --------------------------------------------------------------------------
   EL STING DEL MONOGRAMA — cierre de la página. Se reproduce una sola vez.
   Va con mix-blend-mode: screen porque el video viene renderizado sobre negro:
   así el negro desaparece y solo quedan el blanco hueso y el jade.
   -------------------------------------------------------------------------- */
.sting {
  width: clamp(150px, 17vw, 232px);
  aspect-ratio: 1;
  margin: 0 auto clamp(26px, 3.4vw, 44px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
.sting.dentro { opacity: 1; transform: scale(1); }
.sting video { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .sting { opacity: 1; transform: none; transition: none; }
}

/* El grano animado repinta toda la pantalla cada 233 ms, para siempre. En
   escritorio no importa; en celular es batería a cambio de un efecto que a
   3.5% de opacidad casi no se percibe. Ahí se queda estático. */
@media (hover: none) {
  .grano { animation: none; }
}

/* --------------------------------------------------------------------------
   EL MONOGRAMA COMO AVANCE — el aro de la nav se dibuja en bruma conforme bajas.
   La marca haciendo un trabajo en vez de decorar.
   circunferencia = 2·π·150 = 942.48
   -------------------------------------------------------------------------- */
.avance {
  --p: 0;
  display: block;
  width: 30px;
  height: 30px;
  color: var(--blanco);
  flex: none;
}
.avance svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* A 30 px en pantalla, un trazo de 4 en un viewBox de 320 mide 0.375 px: sub-píxel
   y el jade se pierde. Con 11 mide ~1 px y sí se lee. Por eso el arco va en
   Jade Bruma y no en Jade Luz: a ese grosor el acento no alcanza a leerse. */
.avance__pista, .avance__arco { stroke-width: 11; }
.avance__pista { stroke: rgba(255, 255, 255, 0.22); }
.avance__arco {
  stroke: var(--bruma);
  stroke-dasharray: calc(var(--p) * 942.48) 942.48;
  transition: stroke-dasharray 0.15s linear;
  filter: drop-shadow(0 0 3px rgba(20, 112, 95, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  .avance__arco { transition: none; }
}

/* --------------------------------------------------------------------------
   LA VÍA — la línea que une los cuatro pasos de "Cómo entramos". Se dibuja en
   jade al entrar la sección y cada punto se enciende cuando la línea lo alcanza.
   Deliberadamente es una línea y no otro objeto 3D: la página ya tiene los
   suficientes y otro más competiría con el ciclo del método.
   Solo a partir de 1000 px, que es donde la rejilla garantiza cuatro columnas.
   -------------------------------------------------------------------------- */
.via { display: none; }

@media (min-width: 1000px) {
  /* columnas explícitas: así los puntos caen exactamente en el centro de cada
     tarjeta, sin depender de cómo reparta auto-fit */
  .ruta { grid-template-columns: repeat(4, 1fr); }

  .via {
    display: block;
    position: relative;
    height: 9px;
    margin-top: clamp(40px, 5vw, 64px);
    margin-bottom: -9px;
  }
  .via__pista,
  .via__avance {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 4px;
    height: 1px;
  }
  .via__pista { background: var(--linea); }
  .via__avance {
    background: linear-gradient(90deg, var(--jade-tenue), var(--bruma));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.7s var(--ease);
    box-shadow: 0 0 8px rgba(20, 112, 95, 0.45);
  }
  .via i {
    position: absolute;
    top: 0;
    left: calc(var(--x) * 25% - 12.5%);
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--carbon);
    border: 1px solid var(--linea);
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
      box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
    /* cada punto enciende cuando la línea llega a él */
    transition-delay: calc((var(--x) - 1) * 0.42s);
  }
  .via.dentro .via__avance { transform: scaleX(1); }
  .via.dentro i {
    background: var(--bruma);
    border-color: var(--bruma);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(20, 112, 95, 0.22), 0 0 14px rgba(20, 112, 95, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .via__avance { transition: none; transform: scaleX(1); }
  .via i { transition: none; }
}

/* --------------------------------------------------------------------------
   FOCO DE TECLADO — quien navega con Tab tiene que ver dónde está parado.
   Sin esto se queda el anillo azul del navegador, que no existe en la paleta
   y sobre negro casi no se lee. :focus-visible y no :focus, para que no salga
   al hacer clic con el ratón.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--bruma);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible,
.sonido:focus-visible { outline-offset: 4px; }
.pieza:focus-visible,
.muestra:focus-visible { outline-offset: 5px; }
.faq summary:focus-visible { outline-offset: 6px; border-radius: 6px; }
.nav__marca:focus-visible { outline-offset: 6px; }

/* En navegadores sin :focus-visible se mantiene el foco visible de siempre. */
@supports not selector(:focus-visible) {
  a:focus, button:focus, summary:focus, [tabindex]:focus {
    outline: 2px solid var(--bruma);
    outline-offset: 3px;
  }
}

/* La nav está escondida arriba del todo (translateY -100%), pero sus enlaces
   siguen siendo alcanzables con Tab: el foco entraba en elementos invisibles.
   En vez de sacarlos del orden de tabulación —son útiles para navegar— la nav
   se asoma sola en cuanto algo dentro de ella recibe el foco. */
.nav:focus-within {
  transform: translateY(0);
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}

/* --------------------------------------------------------------------------
   EL VISOR — los reels se veían a 320 px en la rejilla, que es donde un
   prospecto juzga el trabajo. Al hacer clic se abren grandes, centrados y
   sobre fondo oscuro. Cierra con Esc, con el botón o tocando fuera.
   -------------------------------------------------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.visor[hidden] { display: none; }
.visor.abierto { opacity: 1; }

.visor__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px) saturate(120%);
  cursor: zoom-out;
}

.visor__marco {
  position: relative;
  margin: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(0.96) translateY(10px);
  transition: transform 0.42s var(--ease);
}
.visor.abierto .visor__marco { transform: scale(1) translateY(0); }

.visor__marco video {
  max-height: min(78vh, 900px);
  max-width: 100%;
  width: auto;
  border-radius: 6px;
  background: #000;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 40px 120px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(20, 112, 95, 0.18);
}
.visor__pie {
  text-align: center;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.visor__pie span {
  display: block;
  color: var(--bruma);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.visor__pie b { color: var(--humo); font-weight: 500; }

.visor__cerrar {
  position: absolute;
  top: clamp(14px, 2.4vw, 26px);
  right: clamp(14px, 2.4vw, 26px);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: rgba(0, 0, 0, 0.55);
  color: var(--humo);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.visor__cerrar:hover { color: var(--blanco); border-color: var(--jade-tenue); transform: rotate(90deg); }
.visor__cerrar svg { width: 18px; height: 18px; }

/* mientras el visor está abierto la página de atrás no debe moverse */
body.visor-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .visor, .visor__marco { transition: none; }
  .visor__cerrar:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   TITULARES PALABRA POR PALABRA — la cascada la hacen las palabras, así que
   el contenedor deja de animarse: dos movimientos a la vez se estorban.
   -------------------------------------------------------------------------- */
.partido { opacity: 1 !important; transform: none !important; }

.pal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.36em);
  transition: opacity 0.5s var(--ease), transform 0.75s var(--ease);
  transition-delay: calc(var(--i) * 44ms);
}
.partido.dentro .pal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pal { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------------------------------
   will-change SOLO en lo que todavía no se ha animado.
   Antes estaba puesto de forma permanente en 155 elementos: el navegador
   mantenía 155 capas promovidas para siempre, por animaciones que corren una
   vez y no vuelven. Con :not(.dentro) el aviso existe mientras hace falta y
   desaparece en cuanto la animación terminó.
   -------------------------------------------------------------------------- */
.rev:not(.dentro),
.rev3d:not(.dentro),
.partido:not(.dentro) .pal { will-change: opacity, transform; }

/* --------------------------------------------------------------------------
   NAVEGACIÓN DENTRO DEL VISOR — quien ve un reel debería poder pasar al
   siguiente sin cerrar. Flechas, teclado y deslizar en celular.
   -------------------------------------------------------------------------- */
.visor__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: var(--humo);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}
.visor__nav:hover { color: var(--blanco); border-color: var(--jade-tenue); background: rgba(0,0,0,.75); }
.visor__nav svg { width: 20px; height: 20px; }
.visor__nav--ant { left: clamp(10px, 3vw, 40px); }
.visor__nav--sig { right: clamp(10px, 3vw, 40px); }

.visor__cuenta {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--humo);
}

/* En pantallas angostas las flechas taparían el video: bajan a los lados
   del pie, donde el pulgar ya está. */
@media (max-width: 620px) {
  .visor__nav {
    top: auto;
    bottom: 10px;
    transform: none;
    width: 46px;
    height: 46px;
  }
  .visor__nav--ant { left: 12px; }
  .visor__nav--sig { right: 12px; }
  .visor__marco { padding-bottom: 44px; }
}