/* ==========================================================================
   HEMPAZ — MATERIA Y NORMA
   El sitio alterna materia (cálido, fotográfico, poco texto) y norma
   (claro, denso, siglas y entregables). El único ornamento es la
   nomenclatura regulatoria tipografiada.
   ========================================================================== */

/* --- Tipografía autoalojada. Archivo variable cubre cuatro registros con un
   solo archivo usando el eje de ancho: display expandido, texto normal y
   etiquetas condensadas. Source Serif sólo para lectura larga. --- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* Superficies */
  --paper: #F0EAE7;
  --paper-2: #E7DFDA;
  --surface: #FFFFFF;
  --deep: #1F2A18;
  --deep-2: #2E3D24;
  --deeper: #16200F;

  /* Texto */
  --ink: #1F2A18;
  --ink-2: #54604A;
  --cream: #F0EAE7;
  --cream-2: #C9C2B8;

  /* Ámbar. #DE8C1F da 2.24:1 sobre el beige: sólo vive sobre fondo oscuro
     o como fondo de botón. Sobre claro, siempre --amber-ink. */
  --amber: #DE8C1F;
  --amber-ink: #7A4A05;
  --amber-soft: #F7E4C8;

  /* Líneas y foco */
  --line: #DED2CB;
  --line-strong: #C4B5AC;
  --line-dark: rgba(240, 234, 231, .18);
  --focus: #7A4A05;
  --focus-dark: #DE8C1F;

  /* Layout */
  --container: 1280px;
  --pad-x: clamp(20px, 5vw, 56px);
  --gutter: 24px;
  --sec-y: clamp(64px, 8.5vw, 116px);
  --card-pad: 24px;
  --r-card: 10px;
  --r-btn: 4px;
  --header-h: 68px;

  /* Tipografía */
  --f-display: "Archivo", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --f-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-read: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-display: clamp(2.05rem, 5.2vw, 4.15rem);
  --t-h2: clamp(1.8rem, 4vw, 2.9rem);
  --t-h3: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  --t-lead: clamp(1.08rem, 1rem + .55vw, 1.35rem);
  --t-body: clamp(1rem, .96rem + .2vw, 1.08rem);
  --t-label: .72rem;
  --t-data: .8125rem;

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-reveal: 480ms;
  --dur-ui: 200ms;
}

@media (max-width: 719px) {
  :root { --gutter: 16px; --card-pad: 20px; --header-h: 60px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Las animaciones de entrada desplazan elementos hacia los costados;
     clip evita que eso genere scroll horizontal sin crear un contenedor nuevo. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* El header queda fijo arriba: todo destino de ancla o de foco tiene que
     detenerse por debajo de él. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}
:target { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 100;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* Las listas del sitio son estructura, no enumeración: el estilo lo pone
   cada componente. Dentro de los artículos vuelven a comportarse como listas. */
ul, ol { margin: 0; padding: 0; list-style: none; }
.prose ul { list-style: disc; padding-left: 1.1rem; }
.prose ol { list-style: decimal; padding-left: 1.1rem; }
.prose li { display: list-item; }

a { color: var(--amber-ink); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
a:hover { color: var(--ink); }
}
.on-dark a { color: var(--amber); }
@media (hover: hover) and (pointer: fine) {
.on-dark a:hover { color: var(--cream); }
}

/* Titular que además lleva a su nota. Va envuelto por fuera del h2, no adentro:
   la animación por líneas reconstruye el interior del titular y se llevaría
   puesto cualquier enlace que estuviera ahí dentro. */
a.titulo-enlace, .on-dark a.titulo-enlace {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  /* el h2 también, porque .materia le fija el color y ahí la herencia se corta */
  .on-dark a.titulo-enlace:hover,
  .on-dark a.titulo-enlace:hover h2 { color: var(--amber); }
  /* la palabra en ámbar se cambia por la crema, para que el titular entero
     acuse el paso del cursor sin perder el contraste de dos tonos */
  a.titulo-enlace:hover h2 .lead-word,
  a.titulo-enlace:hover [data-lines] .w.lead-word { color: var(--cream); }
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--focus-dark); }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep); color: var(--cream);
  padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* --- Registros tipográficos.
   El ancho variable de Archivo hace el trabajo que normalmente hacen
   tres familias distintas. --- */
.display {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: var(--t-display);
  line-height: .94;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0;
  /* Nunca partir una palabra al medio: si no entra, se condensa. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
/* En pantallas angostas el ancho expandido no entra: la familia variable
   permite condensar en vez de achicar el cuerpo o romper palabras. */
@media (max-width: 560px) {
  .display { font-variation-settings: "wdth" 88; letter-spacing: 0; }
}
@media (max-width: 380px) {
  .display { font-variation-settings: "wdth" 78; }
}

h2 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
h2 .lead-word { color: var(--amber-ink); }
.on-dark h2 .lead-word { color: var(--amber); }

h3 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 104;
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  margin: 0 0 8px;
}

/* Nomenclatura: el ornamento del sitio */
.tag {
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 78;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.on-dark .tag { color: var(--cream-2); }

.data {
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 82;
  font-weight: 500;
  font-size: var(--t-data);
  letter-spacing: .05em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 24px;
}
.on-dark .lead { color: var(--cream-2); }

section { padding-block: var(--sec-y); }

.band {
  background: var(--deep);
  color: var(--cream);
}
.band-deeper { background: var(--deeper); color: var(--cream); }

/* Se usa la propiedad independiente `scale` para que el barrido componga con
   el translate del reveal en vez de pisarlo. */
.rule {
  height: 2px;
  background: var(--amber);
  width: 64px;
  margin-bottom: 28px;
}

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-btn);
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 92;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-2px); }
}
.btn-primary { background: var(--amber); color: #1F2A18; }
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { background: #C97C15; color: #1F2A18; }
}
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
}
.on-dark .btn-ghost { border-color: var(--line-dark); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
.on-dark .btn-ghost:hover { border-color: var(--cream); color: var(--cream); }
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Íconos. Los PNG del cliente son siluetas de un solo color con alfa:
   la máscara permite recolorearlos según el fondo. Como <img> quedarían
   verde sobre verde en las bandas oscuras. --- */
/* Set propio de trazo uniforme: nítido a cualquier tamaño y hereda el color,
   sin depender de máscaras ni de PNG de banco con detalle fino. */
.ico {
  display: block;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--amber-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ico use { pointer-events: none; }
.on-dark .ico { stroke: var(--amber); }

/* --- Header --- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  /* El zócalo superior lleva el mismo verde que el pie. */
  background: var(--deeper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line-dark);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
/* El zócalo superior lleva el mismo verde del pie, en todas las páginas.
   Las semillas quedan fuera del cambio: son una foto, no el logotipo. */
.header .brand img:not(.semillas) { content: url("/img/logo-lockup-blanco-sm.png"); }
.header .nav a { color: var(--cream); }
.header .nav a:hover { color: var(--amber); }
.header .nav-toggle { border-color: rgba(240, 234, 231, .4); color: var(--cream); }
.header-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.brand { display: flex; align-items: center; margin-right: auto; padding-block: 11px; }
.brand img { height: 22px; width: auto; }
/* Las semillas acompañan al logotipo. Van más altas que el lockup porque son un
   objeto, no una palabra: a la misma altura se leerían como una mancha. */
.brand .semillas { height: 26px; margin-left: 14px; }
.sign a { display: inline-block; padding-block: 6px; }
.nav { display: flex; gap: 26px; }
.nav a {
  position: relative;
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 80;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-ui) var(--ease);
}

.header .btn { padding: 10px 16px; font-size: .85rem; }
.nav-only-mobile { display: none; }

/* Botón de menú: sólo existe cuando la barra no entra. El acceso a WhatsApp
   nunca queda escondido detrás de él. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-btn);
  cursor: pointer;
  color: var(--ink);
  padding: 0;
  place-items: center;
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
}
.nav-toggle-bars span:first-child { margin-bottom: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 719px) {
  /* Zócalo de 60px: las semillas bajan para no tocar los bordes. */
  .brand .semillas { height: 23px; margin-left: 10px; }
}
/* Con el botón de WhatsApp y el de menú en pantallas angostas ya no entran. */
@media (max-width: 560px) {
  .brand .semillas { display: none; }
}

@media (max-width: 940px) {
  .nav-toggle { display: grid; }
  .nav-only-mobile { display: block; }
  .nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad-x) 16px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    border-bottom-color: var(--line);
    font-size: .8rem;
  }
  .nav a:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { border-bottom-color: var(--line); color: var(--amber-ink); }
}
}


/* --- Panel de alcance --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.panel-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding: 16px var(--card-pad);
  align-items: baseline;
}
.panel-row + .panel-row { border-top: 1px solid var(--line); }
.panel-row dd { margin: 0; font-weight: 500; }
@media (max-width: 420px) {
  .panel-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Hero cinematográfico --- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(600px, 92vh, 940px);
  display: flex;
  align-items: center;
  padding-block: clamp(90px, 14vh, 150px) clamp(110px, 16vh, 170px);
  overflow: hidden;
  color: var(--cream);
}
.hero-media { position: absolute; inset: -8% 0 -8%; z-index: -2; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: hero-in 2200ms var(--ease-out) both;
  will-change: scale, translate;
}
/* Se anima `scale`, no `transform`: así el parallax puede usar `translate`
   sin que la animación de entrada lo pise para siempre. */
@keyframes hero-in { from { scale: 1.18; } to { scale: 1.06; } }
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(16, 24, 11, .93) 0%,
      rgba(16, 24, 11, .86) 30%,
      rgba(16, 24, 11, .55) 58%,
      rgba(16, 24, 11, .22) 82%,
      rgba(16, 24, 11, .12) 100%),
    linear-gradient(to top, rgba(16, 24, 11, .85) 0%, transparent 28%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
}
.hero .display {
  margin-bottom: 26px;
  max-width: 100%;
  color: var(--cream);
  font-variation-settings: "wdth" 104;
  font-size: clamp(2.05rem, 4.6vw, 3.9rem);
}
@media (max-width: 560px) { .hero .display { font-variation-settings: "wdth" 86; } }
.hero .lead { color: var(--cream); max-width: 54ch; text-shadow: 0 1px 12px rgba(16, 24, 11, .55); }
.hero-kicker { display: block; margin-bottom: 22px; color: var(--amber); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .btn-ghost { border-color: rgba(240, 234, 231, .45); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
.hero .btn-ghost:hover { border-color: var(--cream); background: rgba(240, 234, 231, .1); color: var(--cream); }
}

/* El panel de alcance flota sobre la foto */
.hero .panel {
  background: rgba(16, 24, 11, .58);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(240, 234, 231, .16);
  border-radius: 14px;
  overflow: hidden;
}
.hero-fuera .hero .panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(22, 32, 15, .55);
}
.hero .panel-row { border-color: rgba(240, 234, 231, .14); transition: background var(--dur-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) {
.hero .panel-row:hover { background: rgba(240, 234, 231, .07); }
}
.hero .panel .tag { color: var(--cream-2); }
.hero .panel dd { color: var(--cream); }

/* Indicador de que hay más abajo */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cream-2);
  z-index: 2;
}
.hero-scroll .tag { color: inherit; }
.hero-scroll-linea {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--amber));
  position: relative;
  overflow: hidden;
}
.hero-scroll-linea::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  animation: scroll-linea 2100ms var(--ease-out) infinite;
}
@keyframes scroll-linea {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (hover: hover) and (pointer: fine) {
.hero-scroll:hover { color: var(--cream); }
.hero-fuera .hero-scroll-linea::after { animation-play-state: paused; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-block: clamp(64px, 12vh, 110px) clamp(90px, 14vh, 130px); }
  .hero-scroll { display: none; }
  /* La foto es apaisada: estirada a una pantalla vertical se convierte en una
     mancha. Ocupa la franja de arriba con su proporción y se funde hacia abajo. */
  /* La foto ocupa la franja de arriba con su proporción real. El velo se
     extiende MÁS ABAJO que la foto (por eso el contenedor no puede recortar):
     el parallax la desplaza y sin ese margen asoma una franja iluminada. */
  .hero-media { inset: 0 0 auto; height: 58vh; overflow: visible; }
  .hero-media img { height: 58vh; object-position: center 45%; }
  .hero-veil { inset: 0 0 -90px; }
  .hero-veil {
    /* el último tramo llega a opaco antes de que termine la foto: así el
       corte con el fondo no deja una franja brillante */
    background: linear-gradient(to bottom,
      rgba(16, 24, 11, .58) 0%,
      rgba(16, 24, 11, .74) 40%,
      rgba(31, 42, 24, .96) 78%,
      var(--deep) 90%);
  }
  .hero { background: var(--deep); }
}

/* --- Cifras --- */
.cifras { padding-block: clamp(56px, 7vw, 92px); background: var(--paper-2); }
.cifras-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.cifra {
  padding: 32px clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--line);
  display: grid;
  gap: 14px;
  align-content: start;
}
.cifra-n {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 96;
  font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: .95;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cifra-n::before { content: "+"; color: var(--amber-ink); margin-right: .06em; }
.cifra:not(:first-child) .cifra-n::before { content: none; }
.cifra:first-child { border-left: 0; }
@media (max-width: 760px) {
  .cifras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { grid-column: 1 / -1; }
}

/* --- Prueba social --- */
.proof { padding-block: clamp(36px, 5vw, 56px); background: var(--paper-2); }
.proof-logos {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.proof-logos li {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  min-height: 108px;
  display: grid;
  place-items: center;
  padding: 18px;
}
.proof-logos img { max-height: 62px; width: auto; object-fit: contain; }
@media (max-width: 720px) {
  .proof-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Bloque materia (cáñamo no es marihuana) --- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Encabezado en dos columnas: título a la izquierda, bajada a la derecha.
   Deja la tabla o la lista que sigue a todo el ancho. */
.intro-split, .edu-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.intro-split .lead, .edu-head .lead { margin-bottom: 0; }
.edu-head { align-items: center; }
.edu-photo { justify-self: end; max-width: 440px; width: 100%; height: auto; }
@media (max-width: 900px) {
  .intro-split, .edu-head { grid-template-columns: 1fr; align-items: start; }
  .edu-photo { display: none; }
}

.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.compare caption { text-align: left; padding-bottom: 14px; }
.compare th, .compare td {
  text-align: left;
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line-dark);
}
.compare thead th {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.05rem;
}
.compare tbody th {
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 78;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-2);
  width: 26%;
}
.compare td { font-size: .96rem; color: var(--cream); }
.compare .col-hemp { background: rgba(222, 140, 31, .07); }
@media (max-width: 720px) {
  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; width: auto; }
  .compare thead { display: none; }
  .compare caption { display: block; width: 100%; }
  .compare tbody th { border: 0; padding: 18px 0 4px; width: auto; }
  .compare td { border-bottom: 1px solid var(--line-dark); padding: 4px 0 14px; }
  .compare .col-hemp { background: none; border-left: 2px solid var(--amber); padding-left: 12px; }
  .compare td::before {
    content: attr(data-col);
    display: block;
    font-variation-settings: "wdth" 78;
    font-weight: 600;
    font-size: var(--t-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 4px;
  }
}

/* La foto del frasco viene recortada con transparencia: no depende de ningún
   modo de mezcla, que se rompe en cuanto un padre crea su propia capa. */

/* --- Servicios: tabla, no grilla de tarjetas --- */
.svc { border-top: 1px solid var(--line); margin-top: 8px; }
.svc-item { border-bottom: 1px solid var(--line); }
.svc-head {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 42px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.svc-head:hover { background: var(--surface); }
}
.svc-num {
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 76;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--amber-ink);
}
.svc-title { font-family: var(--f-display); font-variation-settings: "wdth" 104; font-weight: 700; font-size: var(--t-h3); }
.svc-toggle {
  width: 26px; height: 26px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.svc-toggle svg { width: 12px; height: 12px; }
.svc-head[aria-expanded="true"] .svc-toggle { transform: rotate(45deg); border-color: var(--ink); }
/* Sin JavaScript los seis paneles quedan abiertos: el contenido nunca es
   inalcanzable. El colapso lo activa la clase .js, que pone el propio script. */
.svc-body { display: grid; grid-template-rows: 1fr; }
.js .svc-body {
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease);
}
.js .svc-head[aria-expanded="true"] + .svc-body { grid-template-rows: 1fr; }
.js .svc-head[aria-expanded="false"] + .svc-body > div { visibility: hidden; }
.js .svc-head[aria-expanded="true"] + .svc-body > div { visibility: visible; transition: visibility 0s; }
.svc-body > div { overflow: hidden; }
/* Alinea con la columna del título: 56 + 36 + los dos gaps de 18. */
.svc-inner {
  padding: 0 4px 26px calc(56px + 42px + 18px * 2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.io dt { margin-bottom: 6px; }
.io dd { margin: 0; color: var(--ink-2); font-size: .96rem; }
.chip {
  display: inline-block;
  background: var(--amber-soft);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-variation-settings: "wdth" 80;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .svc-head { grid-template-columns: 34px 34px minmax(0, 1fr) auto; gap: 12px; }
  .svc-inner { padding-left: 4px; }
}

.sign {
  margin-top: 26px;
  margin-bottom: -18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

/* --- Muro de siglas --- */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.wall li {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  transition: border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.wall li:hover { border-color: var(--ink); transform: translateY(-2px); }
}
.wall .sig {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 96;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .02em;
  display: block;
  margin-bottom: 4px;
}
.wall .full { display: block; margin-bottom: 10px; }
.wall p { margin: 0; color: var(--ink-2); font-size: .94rem; }
@media (max-width: 720px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wall li { padding: 16px; }
  .wall .sig { font-size: 1.2rem; overflow-wrap: anywhere; }
  .wall .full { font-size: .74rem; letter-spacing: .08em; line-height: 1.35; }
  .wall p { font-size: .86rem; }
}
@media (max-width: 380px) {
  .wall { grid-template-columns: 1fr; }
}

/* --- Proceso --- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-top: 8px;
}
.steps > li { list-style: none; background: var(--deep); padding: var(--card-pad); }
.steps .step-n {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 90;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--amber);
  display: block;
  margin-bottom: 14px;
}
.steps h3 { color: var(--cream); }
.steps .io dd { color: var(--cream-2); }
.steps .io dt { color: var(--cream); }

/* --- Materia: banda de apetito --- */
.materia {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 14vw, 190px);
  color: var(--cream);
}
.materia .display, .materia h2 { color: var(--cream); }
.materia::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(100deg, rgba(18, 26, 12, .95) 0%, rgba(18, 26, 12, .9) 42%, rgba(18, 26, 12, .78) 78%, rgba(18, 26, 12, .72) 100%),
    image-set(url("/img/foto2-1400.webp") type("image/webp"), url("/img/foto2-1400.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 35%;
  translate: 0 var(--py, 0px);
  scale: 1.14;
  backface-visibility: hidden;
  will-change: transform;
}
.materia > * { position: relative; }
.materia .display { font-size: clamp(2.1rem, 5.6vw, 4.2rem); max-width: 18ch; margin-bottom: 26px; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}
.materia .facts dt { margin-bottom: 6px; color: var(--amber); }
.facts dd { margin: 0; color: var(--cream); font-size: 1.02rem; }

/* --- Servicio llave en mano --- */
.llave-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-top: 8px;
}
.llave-grid li { background: var(--deep); padding: var(--card-pad); display: grid; gap: 8px; align-content: start; }
.llave-grid .tag { color: var(--amber); }
.llave-grid p { margin: 0; color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .llave-grid li { transition: background var(--dur-ui) var(--ease); }
  .llave-grid li:hover { background: var(--deep-2); }
}

/* --- Alianzas --- */
.brands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.brand-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px var(--card-pad);
  transition: border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.brand-row:hover { border-color: var(--ink); transform: translateY(-2px); }
}
.brand-row img { max-height: 84px; max-width: 140px; width: auto; object-fit: contain; }
.brand-row h3 { margin-bottom: 6px; }
.brand-row p { margin: 0; }
@media (max-width: 860px) {
  .brands { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .brand-row { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .brand-row img { max-width: 100px; max-height: 64px; }
}



/* --- Disciplinas --- */
.disc { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin-top: 8px; }
.disc li {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  background: var(--surface);
}
.disc .ico { width: 38px; height: 38px; margin-bottom: 18px; }
.disc p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* --- Educación --- */
.notes { border-top: 1px solid var(--line); margin-top: 8px; }
.note-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-ui) var(--ease), padding-left var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.note-row:hover { background: var(--surface); padding-left: 14px; color: var(--ink); }
}
.note-row .n {
  font-variation-settings: "wdth" 76;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--amber-ink);
}
.note-row h3 { margin-bottom: 6px; }
.note-row .meta { color: var(--ink-2); }
.note-row .arrow { width: 26px; height: 26px; transition: transform var(--dur-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) {
.note-row:hover .arrow { transform: translateX(4px); }
}
.note-row[aria-disabled="true"] { color: var(--ink-2); pointer-events: none; }
.note-row[aria-disabled="true"] h3 { color: var(--ink-2); }
@media (max-width: 720px) {
  .note-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding-block: 20px; }
}

/* --- Contacto --- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.channels { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; }
.channels li { list-style: none; }
/* El correo se puede abrir o copiar: no todos los equipos tienen
   configurado un cliente de correo y el enlace no haría nada. */
.canal-mail { position: relative; }
.copiar {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  background: rgba(240, 234, 231, .08);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-btn);
  color: var(--cream-2);
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 82;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.copiar svg { width: 15px; height: 15px; }
.copiar.listo { background: var(--amber); border-color: var(--amber); color: #1F2A18; }
@media (hover: hover) and (pointer: fine) {
  .copiar:hover { background: rgba(240, 234, 231, .16); color: var(--cream); border-color: var(--cream-2); }
}
@media (max-width: 620px) {
  .copiar { position: static; transform: none; margin: 12px 0 0 auto; }
  .canal-mail { display: flex; flex-direction: column; align-items: stretch; }
}
.channels a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--cream);
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.channels a:hover { border-color: var(--amber); background: var(--deep-2); color: var(--cream); }
}
.channels a > span:last-child { min-width: 0; }
.channels .who { display: block; }
.channels .val {
  font-variation-settings: "wdth" 96;
  font-weight: 600;
  font-size: clamp(.92rem, .82rem + .5vw, 1.05rem);
  display: block;
  overflow-wrap: anywhere;
}
.channels svg { width: 26px; height: 26px; color: var(--amber); flex: 0 0 auto; }

.checklist {
  border: 1px solid var(--line-dark);
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
.checklist ol { margin: 16px 0 0; padding: 0; counter-reset: c; }
.checklist li {
  list-style: none;
  counter-increment: c;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding-block: 11px;
  color: var(--cream);
}
.checklist li + li { border-top: 1px solid var(--line-dark); }
.checklist li::before {
  content: counter(c, decimal-leading-zero);
  font-variation-settings: "wdth" 76;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--amber);
}

/* --- Footer --- */
.footer { background: var(--deeper); color: var(--cream); padding-block: clamp(56px, 7vw, 84px) 34px; }
/* El pie es fondo oscuro: los rótulos secundarios necesitan el gris claro,
   no el gris de fondo claro. */
.footer .tag, .footer .data, .footer .legal { color: var(--cream-2); }
.footer a { color: var(--cream); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
.footer a:hover { color: var(--amber); }
}
/* Las columnas de contacto necesitan ancho real: el mail es largo y es el
   dato que no se puede cortar. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(150px, .5fr) minmax(240px, .8fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand img { height: clamp(38px, 4.5vw, 54px); width: auto; margin-bottom: 22px; }
.footer-sub1 {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 104;
  font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--cream);
}
.footer-sub2 {
  margin: 0;
  font-family: var(--f-ui);
  font-variation-settings: "wdth" 84;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-2);
}
.hashtag {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 106;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1;
  margin-top: 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hashtag b { font-weight: 800; color: var(--cream); }
.hashtag span { font-weight: 400; color: var(--amber); }
.footer-col ul { margin: 8px 0 0; padding: 0; display: grid; }
.footer-col li { list-style: none; }
/* Área táctil cómoda: los enlaces del pie son la vía de contacto real. */
.footer-col a {
  display: inline-block;
  padding-block: 11px;
  overflow-wrap: anywhere;
}
.legal { padding-top: 22px; color: var(--cream-2); max-width: 78ch; }
@media (max-width: 1020px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Artículos de Educación --- */
.article { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.crumbs { color: var(--ink-2); margin-bottom: 34px; }
.crumbs a { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
.crumbs a:hover { color: var(--amber-ink); }
}
.crumbs span[aria-hidden] { color: var(--ink-2); margin-inline: 4px; }
.article-head { max-width: 44rem; }
.article-head .tag { display: block; margin-bottom: 20px; }

/* La banda toma el centro de la foto, no su borde superior: con aspect-ratio
   la imagen tiene una altura propia sobre la que object-fit puede trabajar. */
.article-figure { margin: clamp(36px, 5vw, 56px) 0; }
.article-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 720px) {
  .article-figure img { aspect-ratio: 16 / 10; }
}

.article-body {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.toc {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  max-width: 20rem;
}
.toc ol { margin: 14px 0 0; padding: 0; counter-reset: t; }
.toc li {
  list-style: none;
  counter-increment: t;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}
.toc li::before {
  content: counter(t, decimal-leading-zero);
  font-variation-settings: "wdth" 76;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--amber-ink);
  padding-top: 3px;
}
.toc a { color: var(--ink); text-decoration: none; font-size: .94rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
.toc a:hover { color: var(--amber-ink); }
}
@media (max-width: 1000px) {
  .article-body { grid-template-columns: 1fr; }
  .toc { position: static; max-width: none; order: -1; margin-bottom: 32px; }
}

.cta-note {
  margin-top: 56px;
  background: var(--deep);
  color: var(--cream);
  border-radius: var(--r-card);
  padding: clamp(26px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.cta-note .tag { color: var(--cream-2); display: block; margin-bottom: 10px; }
.cta-note h2 { color: var(--cream); font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 8px; }
.cta-note p { margin: 0; color: var(--cream-2); }
@media (max-width: 760px) {
  .cta-note { grid-template-columns: 1fr; }
}
.article-head .display { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 20px; }
.prose { max-width: 40rem; font-family: var(--f-read); font-size: 1.14rem; line-height: 1.72; }
.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  margin-top: 48px;
  margin-bottom: 14px;
}
.prose h3 { margin-top: 32px; font-size: 1.2rem; }
.prose p { margin: 0 0 20px; }
.prose ul { margin: 0 0 20px; padding-left: 1.1rem; }
.prose li { margin-bottom: 10px; }
.prose strong { font-weight: 700; }
/* Aclaración regulatoria dentro de un artículo: se lee como nota al pie,
   no como parte del argumento comercial. */
.prose .nota-legal {
  font-family: var(--f-ui);
  font-size: .94rem;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
  padding: 16px 20px;
  margin: 28px 0;
}

.prose .pull {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 106;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.14;
  color: var(--ink);
  border-left: 3px solid var(--amber);
  padding-left: 22px;
  margin: 40px 0;
}
/* --- 404 --- */
.notfound { padding-block: clamp(80px, 12vw, 160px); min-height: 52vh; }
.notfound .tag { display: block; margin-bottom: 16px; }
.notfound .display { margin-bottom: 22px; }
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.notfound-links a {
  font-variation-settings: "wdth" 82;
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding-block: 10px;
}

.faq { margin-top: 8px; }
.faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 100;
  font-size: 1.06rem;
  margin: 0 0 8px;
  text-transform: none;
}
.faq-item p { margin: 0; }

.article-nav {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.seals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 32px 0 40px; }
.seals li {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 18px;
  text-align: center;
  font-family: var(--f-ui);
}
.seals .ico { width: 38px; height: 38px; margin: 0 auto 14px; }
.seals b {
  display: block;
  font-variation-settings: "wdth" 84;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: 4px;
}
.seals span { font-size: .88rem; color: var(--ink-2); font-family: var(--f-ui); }



/* ==========================================================================
   TERMINACIONES
   ========================================================================== */

/* Nota: se probó una textura de grano con mix-blend-mode sobre las bandas
   grandes y costaba más de 20 cuadros por segundo. No entra: la fluidez del
   scroll vale más que una textura que casi no se percibe. */

/* Transición entre páginas: el navegador la resuelve solo donde está disponible */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* El botón principal deja una estela ámbar al pasar */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .32) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover::after { transform: translateX(120%); }
}

/* El logotipo del header respira al pasar por encima */
.brand img { transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.brand:hover img { transform: scale(1.04); }
}

/* Las etapas del proceso se dibujan de a una */
.steps > li { position: relative; overflow: hidden; }
.steps > li::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 640ms var(--ease-out) var(--delay, 0ms);
}
.steps > li.in::after { transform: scaleY(1); }

/* ==========================================================================
   INTERACCIONES DE SECCIÓN
   ========================================================================== */

/* Fichas del muro normativo: se levantan y encienden su sigla */
.wall li {
  position: relative;
  overflow: hidden;
  transition: border-color 320ms var(--ease-out), transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.wall li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.wall li:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -28px rgba(31, 42, 24, .5);
}
}
@media (hover: hover) and (pointer: fine) {
.wall li:hover::before { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) {
.wall li:hover .sig { color: var(--amber-ink); }
}
.wall .sig { transition: color 320ms var(--ease-out); }

/* Filas de servicio: la fila se corre y aparece una barra ámbar */
.svc-item { position: relative; }
.svc-head { position: relative; transition: background 320ms var(--ease-out), padding-left 320ms var(--ease-out); }
.svc-head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 360ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.svc-head:hover::before,
}
.svc-head[aria-expanded="true"]::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
.svc-head:hover { padding-left: 14px; }
}
@media (hover: hover) and (pointer: fine) {
.svc-head:hover .svc-title { color: var(--amber-ink); }
}
.svc-title { transition: color 280ms var(--ease-out); }
.svc-toggle { transition: transform 380ms var(--ease-out), border-color 280ms var(--ease-out), background 280ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.svc-head:hover .svc-toggle { border-color: var(--amber-ink); background: var(--amber-soft); }
}

/* Tarjetas de marca y disciplinas */
.brand-row, .disc li, .seals li {
  transition: transform 420ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.brand-row:hover, .disc li:hover, .seals li:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 20px 44px -30px rgba(31, 42, 24, .55);
}
}
@media (hover: hover) and (pointer: fine) {
.disc li:hover .ico, .seals li:hover .ico { transform: scale(1.08) rotate(-3deg); }
}
.disc .ico, .seals .ico { transition: transform 420ms var(--ease-out); }

/* Logos de la tira: se despiertan al pasar */
.proof-logos li {
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.proof-logos li:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -30px rgba(31, 42, 24, .55); }
}
.proof-logos img { transition: transform 520ms var(--ease-out); filter: saturate(.9); }
@media (hover: hover) and (pointer: fine) {
.proof-logos li:hover img { transform: scale(1.06); filter: saturate(1); }
}

/* Etapas del proceso: el número se rellena al pasar */
.steps > li { transition: background 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.steps > li:hover { background: var(--deep-2); }
}
.steps .step-n { transition: color 420ms var(--ease-out), -webkit-text-stroke-color 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.steps > li:hover .step-n { color: var(--amber); }
}

/* Filas de notas: la flecha viaja y el fondo se corre */
.note-row { position: relative; overflow: hidden; }
.note-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  transform: translateX(-101%);
  transition: transform 480ms var(--ease-out);
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
.note-row:hover::before { transform: translateX(0); }
}

/* Canales de contacto */
.channels a { transition: transform 360ms var(--ease-out), border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) {
.channels a:hover { transform: translateX(8px); }
}

/* Cifras: la línea superior se dibuja */
.cifra { position: relative; }
.cifra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  z-index: 1;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out) var(--delay, 0ms);
}
.cifra.in::after { transform: scaleX(1); }

/* ==========================================================================
   MOVIMIENTO
   Un solo sistema: apariciones por scroll, líneas que se descubren,
   parallax, magnetismo y cortina de entrada. Todo se apaga con
   prefers-reduced-motion.
   ========================================================================== */

/* Apariciones al hacer scroll. Sin JS nada se esconde. */
.js-anim [data-anim] { opacity: 0; will-change: opacity, transform; }
.js-anim [data-anim="up"] { transform: translateY(16px); }
.js-anim [data-anim="fade"] { transform: none; }
.js-anim [data-anim="left"] { transform: translateX(-20px); }
.js-anim [data-anim="right"] { transform: translateX(20px); }
@media (max-width: 900px) {
  .js-anim [data-anim="left"], .js-anim [data-anim="right"] { transform: translateY(22px); }
}
.js-anim [data-anim="scale"] { transform: scale(.965); }
.js-anim [data-anim="mask"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.js-anim [data-anim]:focus-within,
.js-anim [data-anim]:has(:focus-visible) {
  opacity: 1;
  transform: none;
  clip-path: none;
}
.js-anim [data-anim].in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 440ms var(--ease-out) var(--delay, 0ms),
    transform 560ms var(--ease-out) var(--delay, 0ms),
    clip-path 620ms var(--ease-out) var(--delay, 0ms);
}

/* Titulares que se descubren línea por línea */
[data-lines] .line { display: block; overflow: hidden; padding-inline: .04em; margin-inline: -.04em; }
[data-lines] .line-in { display: block; }
[data-lines] .w { display: inline-block; }
[data-lines] .w.lead-word { color: var(--amber-ink); }
.on-dark [data-lines] .w.lead-word, .hero [data-lines] .w.lead-word { color: var(--amber); }
.js-anim [data-lines] .line-in {
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
}
.js-anim [data-lines].in .line-in { transform: translateY(0); }

/* Parallax: sólo transform, en su propia capa */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }

/* Botones magnéticos */
[data-magnet] {
  translate: var(--mx, 0) var(--my, 0);
  transition: translate 420ms var(--ease-out), transform var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
  will-change: translate;
}
@media (hover: hover) and (pointer: fine) {
[data-magnet]:hover { transition-duration: 120ms, 200ms, 200ms, 200ms, 200ms; }
}

/* Punto que acompaña al cursor */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  will-change: transform;
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out), opacity 240ms, background 240ms, border-color 240ms;
  border: 1px solid transparent;
}
.cursor-dot.on { opacity: .85; }
.cursor-dot.big {
  width: 42px; height: 42px;
  background: transparent;
  border-color: var(--amber);
}

/* Cortina de entrada. Sólo existe si hay JavaScript para retirarla:
   sin JS nunca se dibuja y la página se ve de una. */
.curtain { display: none; }
.js-anim .curtain {
  display: grid;
  animation: curtain-auto 1000ms cubic-bezier(.76, 0, .24, 1) 700ms forwards;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--deeper);
  place-items: center;
  transition: transform 1000ms cubic-bezier(.76, 0, .24, 1);
}
.curtain img { width: clamp(150px, 24vw, 250px); opacity: 0; animation: curtain-logo 900ms var(--ease-out) forwards; }
.curtain-out { transform: translateY(-101%); }
/* Respaldo sin JavaScript: aunque el script no llegue a cargar, la cortina
   se levanta sola y nunca deja la pantalla tapada. */
@keyframes curtain-auto {
  to { transform: translateY(-101%); visibility: hidden; }
}
@keyframes curtain-logo {
  0% { opacity: 0; transform: translateY(14px); }
  55% { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}

/* Barra de avance de lectura */
.progress-bar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2;
}

/* Cinta de nomenclatura */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--line-dark);
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 48s linear infinite;
  animation-delay: -6s;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
.ticker:hover .ticker-track { animation-play-state: paused; }
}
.ticker-group { display: flex; gap: 44px; padding-right: 44px; }
.ticker span {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 104;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.7rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 44px;
}
.ticker span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  /* las frases largas no entran en 390 px y se leen a pedazos */
  .ticker-group span:nth-child(1), .ticker-group span:nth-child(5) { display: none; }
  .ticker-track { animation-duration: 26s; }
}

/* Imágenes que se descubren y respiran */
.reveal-img { overflow: hidden; border-radius: var(--r-card); }
.reveal-img img { transform: scale(1.06); transition: transform 1200ms var(--ease-out); }
.reveal-img.in img { transform: scale(1); }
.js-anim .zoom-hover img { transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.zoom-hover:hover img { transform: scale(1.05); }
}

/* Enlaces con subrayado que se dibuja */
.prose a, .sign a, .crumbs a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size 320ms var(--ease-out), color var(--dur-ui) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.prose a:hover, .sign a:hover, .crumbs a:hover { background-size: 100% 1px; }
}

/* Nav con marcador que se desliza */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.nav a:hover::after, .nav a.activo::after { transform: scaleX(1); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-anim [data-anim], [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker-track { animation: none; width: 100%; justify-content: center; }
  .ticker-group:last-child { display: none; }
  .ticker-group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .cursor-dot { display: none; }
}

@media print {
  .header, .btn, .materia::before { display: none; }
  body { background: #fff; color: #000; }
}

/* --- Equipo ---
   La sección vive sobre el papel base: no declara fondo ni padding propio, así
   toma el ritmo vertical de la regla global y queda medio tono más clara que
   las áreas de trabajo, justo antes de que caiga la banda de contacto. Tiene
   tres niveles reales —la sección, los dos subbloques y cada persona o socio—
   y el marcado los expresa con encabezados, no sólo con tamaño de letra. */

/* Los dos párrafos que siguen a la bajada son contexto y corren en el mismo
   cuerpo que el resto del sitio: la bajada sigue siendo la única voz alta del
   bloque. La medida va en el párrafo y no en el contenedor, como en .lead. */
.equipo-nota p {
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--ink-2);
}
.equipo-nota p:last-child { margin-bottom: 0; }

/* Rótulo de subbloque en el registro de la nomenclatura. El filete lo separa
   del bloque anterior con el mismo gesto con el que .svc y .notes abren los
   suyos, y como los dos rótulos son el mismo componente arrancan los dos en el
   mismo borde: ninguno queda centrado por herencia de su contenedor. */
.equipo-rotulo {
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* --- Equipo: fundadores --- */
.fundadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.fundador {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  transition: border-color 320ms var(--ease-out);
}
/* El retrato va arriba y no al costado. Las dos biografías son largas: con la
   foto al lado, la columna de texto queda en torno a treinta caracteres en
   toda la banda de notebook y salta a ochenta en cuanto la ficha se apila.
   Apoyado arriba, el texto usa el ancho completo de la ficha en todos lados.
   El recorte circular se declara acá porque el reset de img pisa el atributo
   height del marcado; el disco relleno sostiene la forma mientras las fotos no
   estén subidas, de modo que el hueco se lee como espera y no como error. */
.fundador img {
  width: clamp(96px, 10vw, 132px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
/* Los nombres son el tercer nivel de la sección y llevan el registro de h3 */
.fundador h4 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 104;
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  margin: 0 0 8px;
}
.fundador p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: .96rem; }
@media (max-width: 860px) {
  .fundadores { grid-template-columns: minmax(0, 1fr); }
}

/* --- Equipo: socios --- */
/* Tres fichas con CvC en el eje. El orden del marcado es Ka'atech · CvC · 213,
   así que la columna del medio y la posición del medio en la pila son la misma
   pieza. La grilla nunca pasa por un estado de dos columnas: ahí una ficha
   quedaría huérfana y CvC saldría del centro. */
.aliados {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.aliado {
  position: relative;
  overflow: hidden;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  display: grid;
  /* la primera fila queda reservada en las tres fichas aunque sólo CvC lleve
     rótulo: sin ella las tres firmas no arrancarían a la misma altura */
  grid-template-rows: calc(var(--t-label) * 1.6) auto auto;
  row-gap: 18px;
  align-content: start;
  /* la ficha centra: las tres marcas se resuelven distinto (imagen, wordmark
     y numeral) y el eje comun es lo que las hace leer como una sola familia */
  justify-items: center;
  text-align: center;
  transition: border-color 320ms var(--ease-out);
}
.aliado-rango { grid-row: 1; display: block; }
.aliado-firma { grid-row: 2; }
.aliado > p { grid-row: 3; margin: 0 auto; max-width: 36ch; color: var(--ink-2); font-size: .96rem; }

/* Caja de firma de alto común, el mismo recurso que la tira de logos de la
   prueba social. Las tres marcas se resuelven distinto —imagen, wordmark y
   placa— y sin una caja compartida las descripciones no arrancarían parejas.
   Centra en los dos ejes: es el eje comun que sostiene la fila de socios. */
.aliado-firma {
  min-height: clamp(84px, 8.5vw, 112px);
  display: grid;
  place-items: center;
}
.aliado-firma h4 { margin: 0; }
.aliado-firma img { height: clamp(52px, 6vw, 74px); width: auto; }

/* Ka'atech no tiene archivo de logo. El wordmark se arma con la familia
   variable llevada a peso 800, y la forma societaria baja de cuerpo y de ancho
   para acompañar al nombre en vez de competirle. */
.aliado-wordmark {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 92;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  /* un wordmark no se parte al medio: si no entra, se condensa */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.aliado-wordmark span {
  font-variation-settings: "wdth" 78;
  font-weight: 600;
  font-size: .44em;
  letter-spacing: .16em;
  vertical-align: .42em;
  color: var(--ink-2);
}

/* 213 Company. El numeral es el logo: va en tinta y sin placa, apoyado en el
   mismo wordmark que Ka'atech pero con el eje de ancho al máximo y el tracking
   más apretado, que es el gesto de la referencia de marca. Las cifras van
   tabulares para que las tres tengan el mismo paso. */
.aliado-numeral {
  font-variation-settings: "wdth" 120;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

/* La jerarquía de CvC no se apoya sólo en el filete: el rótulo la dice con
   palabras, que es lo que sigue funcionando cuando la fila se apila y para
   quien no distingue el ámbar. El filete es refuerzo, no el único indicio. */
.aliado-eje::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--amber);
}

/* Desde acá tres firmas con su descripción dejan de entrar en una fila. Es el
   mismo punto en el que las fichas de marca abandonan las dos columnas. La
   pila conserva a CvC en el medio y la caja de alto común deja de hacer falta:
   ya no hay nada que alinear al costado, y sin liberarla dejaría tres huecos
   de aire muerto en teléfono. */
@media (max-width: 860px) {
  .aliados { grid-template-columns: minmax(0, 1fr); }
  .aliado { grid-template-rows: auto; }
  .aliado-rango, .aliado-firma, .aliado > p { grid-row: auto; }
  .aliado-firma { min-height: 0; }
}

/* Ninguna ficha lleva enlace: el paso del cursor sólo afirma el borde y no
   promete un clic que no existe, a diferencia del levantado de las tarjetas
   que sí navegan. La regla del reveal reemplaza la lista completa de
   transiciones en cuanto la tarjeta entra en pantalla, así que hay que volver
   a declararla con su propio peso o el borde cambiaría de golpe. */
.js-anim .fundadores .fundador.in,
.js-anim .aliados .aliado.in {
  transition:
    opacity 440ms var(--ease-out) var(--delay, 0ms),
    transform 560ms var(--ease-out) var(--delay, 0ms),
    border-color 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.fundadores .fundador:hover,
.aliados .aliado:hover { border-color: var(--line-strong); }
}

@media print {
  .fundador, .aliado { break-inside: avoid; }
}