/* ═══════════════════════════════════════════════════════════════════════
   julio.cuestas.com - plantilla adaptada del sitio de referencia
   Lienzo de referencia: 1280 px · margen lateral 104 px · contenido 1072 px
   Paleta: #FFBF00 (dorado, acento) · #0A0A0A (negro profundo) · #FFFFFF ·
           #1A1A1A (secciones oscuras) · #F7F5F0 (fondo claro cálido)
   Tipografía: titulares Space Grotesk · cuerpo Inter (cargadas en el <head>)
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════ TOKENS ══════════════════ */
:root {
  --negro: #0A0A0A;
  --tinta: #1A1A1A;
  --claro: #F7F5F0;
  --acento: #FFBF00;
  --acento-claro: #FFD24D;
  --rojo-boton: #8a6a10;
  --borde-calido: #6b5510;

  --radio: 15.434px;
  --radio-foto: 9px;
  --sombra: 4px 4px 14px rgba(0, 0, 0, .25);

  --sans: 'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --pixel: var(--display);

  /* Escala de texto sobre fondo oscuro - contrastes verificados AA/AAA
     sobre #0A0A0A: cuerpo 13:1 · suave 10,6:1 · tenue 7,7:1 */
  --texto-cuerpo: rgba(255, 255, 255, .86);
  --texto-suave:  rgba(255, 255, 255, .78);
  --texto-tenue:  rgba(255, 255, 255, .64);
  /* … y sobre fondo claro */
  --tinta-cuerpo: rgba(20, 20, 20, .92);
  --tinta-suave:  rgba(20, 20, 20, .8);

  /* margen lateral: 104 px a 1280 px, proporcional por debajo */
  --margen: clamp(20px, 8.125vw, 104px);

  /* ritmo vertical de sección */
  --pad-sec-sup: 73px;
  --pad-sec-inf: 82px;
  --gap-sub: 0px;
  --gap-bloque: 50px;

  --curva: cubic-bezier(.22, .68, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
  background: var(--negro);
  /* evita el rebote elástico (Windows/Chrome) que deja ver un hueco
     sobre la barra fija al scrollear con mouse/trackpad */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--negro);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: var(--acento); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acento-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 13px 22px;
  background: var(--negro);
  color: #fff;
  font-weight: 700;
  border: 2px solid var(--acento);
  border-radius: 10px;
  transform: translateY(-160%);
  transition: transform .25s var(--curva);
}
.saltar:focus { transform: none; }

/* REGLA DE ANCHOS: todas las páginas usan este mismo contenedor (1280px),
   así el texto arranca en el mismo borde que el logo, el menú y el pie.
   No achicar el contenedor por página: el ancho de lectura se limita en
   los elementos de adentro (cuerpo del post, intros, embeds...). */
.contenedor {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--margen);
  position: relative;
  z-index: 2;
}

.centro { text-align: center; }

/* ══════════════════ UTILIDADES DE TEXTO ══════════════════ */
/* degradado naranja → blanco (títulos sobre fondo oscuro) */
.grad-claro {
  background-image: linear-gradient(90deg, #FFBF00 0%, #FFD24D 40%, #fff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* degradado naranja → negro (título sobre fondo claro) */
.grad-oscuro {
  background-image: linear-gradient(90deg, #FFBF00 0%, #FFD24D 40%, var(--negro) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* degradado naranja pleno */
.grad-naranja {
  background-image: linear-gradient(90deg, #FFD24D 0%, #FFBF00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fino    { font-weight: 300; color: var(--tinta); }
.negra   { font-weight: 900; }
.negrita { font-weight: 700; }
.blanca  { color: #fff; }
.media   { font-weight: 500; font-size: .9167em; }
.destacado { color: var(--acento-claro); }

/* ══════════════════ TÍTULOS DE SECCIÓN ══════════════════ */
.titulo {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.0345em;
  line-height: 1.05;
  width: fit-content;
  max-width: 100%;
}
.titulo--58 { font-size: clamp(30px, 4.531vw, 58px); }
.titulo--48 { font-size: clamp(28px, 3.75vw, 48px); }
.titulo--32 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.15; }
.titulo--doble { display: flex; flex-direction: column; line-height: 1.15; }
.titulo.centro { margin-inline: auto; text-align: center; }

.subtitulo {
  margin-top: var(--gap-sub);
  font-size: clamp(16px, 1.5625vw, 20px);
  line-height: 1.65;
  color: var(--texto-suave);
}
.subtitulo--oscuro { color: var(--tinta-suave); }
h1 + .subtitulo { margin-top: 18px; }

/* ══════════════════ SECCIONES Y FONDOS ══════════════════ */
.seccion {
  position: relative;
  padding-top: var(--pad-sec-sup);
  padding-bottom: var(--pad-sec-inf);
  isolation: isolate;
}
.seccion--oscura { background: var(--negro); color: #fff; }
.redes { padding-bottom: 36px; }
.seccion--clara  { background: var(--claro); color: var(--tinta); }

/* capa de las secciones oscuras (antes llevaba grano) */
.ruido {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* sin textura a propósito: un grano claro aclaraba el negro de las
     secciones oscuras. La capa queda por si se quiere otro efecto. */
}

/* trama diagonal de las secciones claras */
.trama {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* líneas diagonales finas que se desvanecen hacia el centro de la sección */
.trama--diagonal {
  background: repeating-linear-gradient(135deg, rgba(26, 26, 26, .09) 0 1px, transparent 1px 16px);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 25%, #000 85%);
          mask-image: radial-gradient(ellipse at center, transparent 25%, #000 85%);
  opacity: .72;
}
/* rejilla que nace del borde inferior y se desvanece hacia arriba (SVG en línea) */
.trama--rejilla {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1110' height='420'%3E%3Cdefs%3E%3Cpattern id='p' width='37' height='37' patternUnits='userSpaceOnUse'%3E%3Cpath d='M37 0H0V37' fill='none' stroke='%231A1A1A' stroke-opacity='.28'/%3E%3C/pattern%3E%3CradialGradient id='g' cx='50%25' cy='100%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)' mask='url(%23m)'/%3E%3C/svg%3E") center bottom / 1110px auto no-repeat;
  opacity: .49;
}

/* resplandor naranja en el borde superior de las secciones claras */
.resplandor {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 200px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(58% 100% at 62% 0%, rgba(255, 210, 77, .58) 0%, rgba(255, 210, 77, 0) 72%),
    radial-gradient(52% 100% at 40% 0%, rgba(253, 229, 152, .42) 0%, rgba(253, 229, 152, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}

/* ══════════════════ SUPERFICIES DE VIDRIO ══════════════════ */
.vidrio {
  position: relative;
  border: 1.102px solid var(--borde-calido);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .05) 2.885%,
    rgba(255, 210, 77, .05) 69.716%,
    rgba(255, 191, 0, .05) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
.vidrio-claro {
  position: relative;
  border: 1.102px solid var(--borde-calido);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .55) 2.885%,
    rgba(255, 210, 77, .07) 69.716%,
    rgba(255, 191, 0, .09) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

/* ══════════════════ BOTONES ══════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9.345px;
  min-height: 58.059px;
  padding: 8px 32.706px;
  border-radius: 49.059px;
  font-size: 15.185px;
  font-weight: 700;
  letter-spacing: .9111px;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva),
              background-image .35s var(--curva), color .35s var(--curva);
  will-change: transform;
}
.btn .flecha { font-style: normal; font-size: 24px; line-height: 1; transition: transform .35s var(--curva); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .flecha { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--claro {
  color: var(--rojo-boton);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(233, 233, 233, .94));
}
.btn--claro:hover {
  background-image: linear-gradient(90deg, #fff, #ededed);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.btn--fantasma {
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  padding-inline: 32.707px;
  border-radius: 53.732px;
  background-image: linear-gradient(90deg, rgba(255, 191, 0, .2), rgba(255, 210, 77, .2));
}
.btn--fantasma:hover {
  color: #fff;
  background-image: linear-gradient(90deg, rgba(255, 191, 0, .45), rgba(255, 210, 77, .45));
}

.btn--naranja {
  color: #fff;
  background-image: linear-gradient(90deg, rgba(255, 210, 77, .5), rgba(255, 191, 0, .5));
}
.btn--naranja:hover {
  background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
  box-shadow: 0 12px 30px rgba(255, 191, 0, .3);
}

/* pastillas (botones dentro de tarjetas) */
.pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 41px;
  padding: 6px 16px;
  white-space: nowrap;
  border-radius: 65px;
  font-size: 19.636px;
  font-weight: 700;
  line-height: 1.375;
  color: #fff;
  background-image: linear-gradient(90deg, rgba(255, 210, 77, .5), rgba(255, 191, 0, .5));
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), background-image .35s var(--curva);
}
.pastilla--ancha { width: 100%; }
.pastilla--cta {
  width: calc(100% - 16px);
  margin-inline: auto;
  border-radius: 90px;
  background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
}
.pastilla--cta:hover { background-image: linear-gradient(90deg, #e6ac00, #cc9900); }
.pastilla:hover {
  background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 191, 0, .28);
}
.pastilla:hover .flecha-diag { transform: translate(3px, -3px); }

/* flecha diagonal ↗ */
.flecha-diag {
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  transition: transform .35s var(--curva);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.6591 11.6591'><path d='M1.25559 11.6591L0 10.4035L8.60979 1.79371H0.896853V0H11.6591V10.7622H9.86538V3.0493L1.25559 11.6591Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.6591 11.6591'><path d='M1.25559 11.6591L0 10.4035L8.60979 1.79371H0.896853V0H11.6591V10.7622H9.86538V3.0493L1.25559 11.6591Z'/></svg>") center / contain no-repeat;
}

/* ══════════════════ NAVEGACIÓN ══════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 60px;
  background: rgba(10, 10, 10, .3);
  border-bottom: 1.111px solid rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .4s var(--curva), border-color .4s var(--curva);
}
.nav.nav--fija {
  background: rgba(10, 10, 10, .88);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.nav__inner {
  height: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__marca {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.42px;
  color: #fff;
  white-space: nowrap;
  padding-block: 8px;
  transition: color .3s var(--curva);
}
.nav__marca:hover { color: var(--acento-claro); }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .48px;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  transition: color .3s var(--curva);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1.5px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--curva);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .35s var(--curva), opacity .25s var(--curva);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════ 1 · HERO ══════════════════ */
.hero {
  position: relative;
  min-height: clamp(680px, 100vh, 900px);
  padding-top: 96px;
  padding-bottom: 72px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  background: #140f00;
}
.hero__fondo { position: absolute; inset: 0; z-index: 0; }
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 26% center;
}
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(16, 15, 14, .34) 0%, rgba(16, 15, 14, .1) 40%, rgba(16, 15, 14, 0) 62%);
}
.hero__desvanecido {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(16, 15, 14, 0) 0%, var(--negro) 88%);
}
.hero__contenido { width: 100%; position: relative; z-index: 3; }

.hero__titulo {
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-size: clamp(46px, 10.11vw, 129px);
  line-height: .88;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero__nombre   { font-weight: 700; color: #fff; }
.hero__apellido { font-weight: 300; width: fit-content; }

.hero__rol {
  max-width: 497px;
  margin-top: 0;
  font-size: clamp(20px, 2.344vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  color: rgba(255, 255, 255, .8);
}
.hero__texto {
  max-width: 617px;
  margin-top: 24px;
  font-size: clamp(16px, 1.719vw, 22px);
  line-height: 1.5;
  color: var(--texto-cuerpo);
  text-wrap: pretty;
}
.hero__texto p + p { margin-top: 14px; }
.hero__texto b { font-weight: 700; color: #fff; }

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 31px;
}
.hero__acciones .btn { white-space: nowrap; }

/* ══════════════════ 2 · QUIÉN ES MELISA ══════════════════ */
.quien { padding-top: 78px; padding-bottom: 91px; }
.quien__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 385fr) minmax(0, 618fr);
  gap: clamp(30px, 6.44%, 69px);
  align-items: start;
}
.quien__retrato {
  position: relative;
  border-radius: 17px;
  overflow: hidden;
  border: 1px solid #4a3a10;
  box-shadow: 6px 6px 21.6px rgba(0, 0, 0, .4);
  aspect-ratio: 9 / 16;
  max-width: 380px;
}

/* ══════════════════ HISTORIAS (retrato en formato stories) ══════════════════
   Igual que Instagram/WhatsApp: barra segmentada arriba, avanza sola en bucle
   infinito, se puede tocar/deslizar a los lados para cambiar. Sin pantalla
   completa a propósito: son fotos reales de apoyo, no deben competir en
   protagonismo con el resto del contenido. */
.historias__barra {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 5px;
  pointer-events: none;
}
.historias__segmento {
  flex: 1 1 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
}
.historias__relleno {
  display: block;
  width: 0%;
  height: 100%;
  background: #fff;
  border-radius: inherit;
}
.historias__segmento--visto .historias__relleno { width: 100%; }
.historias__segmento--activo .historias__relleno {
  animation: historias-progreso 4.5s linear forwards;
}
.historias.historias--pausada .historias__segmento--activo .historias__relleno {
  animation-play-state: paused;
}
@keyframes historias-progreso {
  from { width: 0%; }
  to   { width: 100%; }
}

.historias__pista {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.historias__pista::-webkit-scrollbar { display: none; }
.historias__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  margin: 0;
}
.historias__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.historias__texto {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 16px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, transparent 100%);
}
.historias__titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.historias__zona {
  position: absolute;
  z-index: 2;
  top: 22px;
  bottom: 0;
  width: 50%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.historias__zona--anterior { left: 0; }
.historias__zona--siguiente { right: 0; }

.cita {
  position: relative;
  margin-top: 30px;
  padding: 30px 30px 24px;
  border: 1px solid rgba(255, 210, 77, .45);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 191, 0, .18) 0%, rgba(255, 210, 77, .08) 48%, rgba(255, 255, 255, .035) 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
}
.cita::after {                       /* brillo cálido en la esquina superior */
  content: '';
  position: absolute;
  inset: -60% 40% 55% -30%;
  background: radial-gradient(closest-side, rgba(255, 210, 77, .35), transparent 100%);
  pointer-events: none;
}
.cita__comilla {
  position: relative;
  display: block;
  margin-bottom: 2px;
  font-size: 60px;
  line-height: .62;
  font-weight: 700;
  color: rgba(255, 210, 77, .55);
  pointer-events: none;
}
.cita__texto {
  position: relative;
  font-size: clamp(17px, 1.5625vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  color: #ffe29a;
  text-wrap: pretty;
}
.cita__firma {
  position: relative;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.quien__nota {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-suave);
}
.quien__nota p + p { margin-top: 10px; }
.quien__nota b { font-weight: 700; color: #fff; }

.quien__cuerpo {
  margin-top: 9px;
  font-size: clamp(16px, 1.5625vw, 20px);
  line-height: 1.65;
  color: var(--texto-cuerpo);
  max-width: 62ch;
}
.quien__cuerpo p + p { margin-top: 1.15em; }
.quien__cuerpo b { font-weight: 700; color: #fff; }
.quien__cuerpo .destacado { color: var(--acento-claro); }

.quien__mas { margin-top: 1.15em; overflow: hidden; }
.quien__boton-mas { display: none; }

/* el bloque final de la biografía se colapsa solo cuando la rejilla
   pasa a una sola columna (≤1023px): en escritorio se lee completo */
@media (max-width: 1023px) {
  .quien__mas {
    max-height: 0;
    transition: max-height .5s var(--curva);
  }
  .quien__mas.abierto { max-height: 2400px; }

  .quien__boton-mas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 4px 0;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--acento-claro);
    cursor: pointer;
    background: none;
    border: 0;
  }
  .quien__boton-mas .flecha {
    font-style: normal;
    font-size: 15px;
    transition: transform .35s var(--curva);
  }
  .quien__boton-mas:hover { color: #fff; }
  .quien__boton-mas[aria-expanded="true"] .flecha { transform: rotate(180deg); }
}
.quien__barra {
  height: 9px;
  margin-top: 15px;
  background-image: linear-gradient(90deg, #FFBF00 0%, #FFD24D 40%, #fff 70%);
}

/* ══════════════════ 3 · TRAYECTORIA EN CIFRAS ══════════════════ */
.cifras__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(121.264px, auto));
  gap: 18px;
  margin-top: var(--gap-bloque);
}
.cifra {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border: 1.102px solid var(--borde-calido);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--negro);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.cifra:hover { transform: translateY(-3px); box-shadow: 6px 8px 22px rgba(0, 0, 0, .3); }

.cifra--alta { grid-row: span 2; align-items: flex-end; }
.cifra--alta .cifra__icono { align-self: flex-start; }
.cifra--naranja {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, .9) 2.885%,
    rgba(255, 210, 77, .9) 69.716%,
    rgba(255, 191, 0, .9) 100%);
  align-items: center;
}
.cifra--foto { background: rgba(255, 255, 255, .25); align-items: center; }
.cifra__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.cifra__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: blur(26px) saturate(.85);
  transform: scale(1.25);
}
.cifra__foto--baja img { object-position: 50% 52%; }
.cifra__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 150% at 12% 105%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .16) 100%);
}
.cifra__cuerpo { position: relative; z-index: 1; }
.cifra__numero {
  font-family: var(--pixel);
  font-size: clamp(34px, 3.75vw, 48px);
  line-height: 1.05;
  letter-spacing: -.56px;
  color: var(--acento);
}
.cifra__pie {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.32;
  color: rgba(16, 15, 14, .82);
  max-width: 26em;
}
.cifra__pie b { font-weight: 700; }
.cifra__icono {
  position: relative;
  z-index: 1;
  flex: none;
  width: 74px;
  height: auto;
  color: #fff;
  opacity: .95;
}
.cifra__icono--vistas { width: 62px; }
/* iconos vectoriales: en las tarjetas claras van en naranja de marca */
svg.cifra__icono { width: 64px; height: 64px; }
.cifra__icono--marca { color: var(--acento); opacity: .92; }

/* ══════════════════ LO QUE CONSTRUYO (carrusel único, mobile + desktop) ══════════════════ */
.proyectos__carrusel {
  margin-top: var(--gap-bloque);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox: oculta la barra sin quitar el scroll */
  -ms-overflow-style: none; /* Edge legacy */
  /* sin esto, el snap "mandatory" ignora el padding de alineación de
     .proyectos__pista y salta solo al cargar para encajar la primera
     tarjeta, arrancando con scroll ya desplazado en vez de en 0. */
  /* --proyectos-inicio lo mide js/main.js con la posición real del
     contenedor (100vw en CSS incluye el ancho de la scrollbar y el
     contenedor no, así que el cálculo puro en CSS queda ~7px corrido). */
  scroll-padding-inline-start: var(--proyectos-inicio, var(--margen));
}
.proyectos__carrusel::-webkit-scrollbar { display: none; } /* Chrome, Safari, Edge */
.proyectos__pista {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-block: 4px 18px;
  padding-inline-end: var(--margen);
  padding-inline-start: var(--proyectos-inicio, var(--margen));
}
.proyectos__tarjeta {
  flex: 0 0 82vw;
  max-width: 380px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .proyectos__tarjeta { flex-basis: 46vw; max-width: 420px; }
}
@media (min-width: 1024px) {
  .proyectos__tarjeta { flex-basis: 30vw; max-width: 400px; }
}

.proyectos__puntos {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.proyectos__punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: background .3s var(--curva), transform .3s var(--curva);
}
.proyectos__punto:hover { background: rgba(255, 255, 255, .5); }
.proyectos__punto.is-activo { background: var(--acento); transform: scale(1.3); }

/* ══ Barra de navegación compartida (flechas + puntos) de los carruseles ══
   Se muestra u oculta por JS según si el contenido realmente desborda
   (main.js mide scrollWidth vs. clientWidth) — no por un breakpoint fijo,
   porque cuántas tarjetas entran en pantalla depende de cuántas tenga
   cada carrusel (3 en Programas, 5 en Lo que construyo). */
.carrusel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.carrusel-nav--oculto { display: none; }
.carrusel-nav__flecha {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.102px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color .3s var(--curva), background .3s var(--curva), transform .3s var(--curva);
}
.carrusel-nav__flecha:hover { border-color: var(--acento); background: rgba(255, 191, 0, .1); transform: translateY(-1px); }
.carrusel-nav__flecha .flecha { font-size: 15px; font-style: normal; }
.carrusel-nav__flecha--claro { border-color: var(--borde-calido); color: var(--tinta); }
.carrusel-nav__flecha--claro:hover { border-color: var(--acento); background: rgba(255, 191, 0, .12); }

/* ══════════════════ PROGRAMAS (carrusel, fondo claro) ══════════════════ */
.programas__carrusel {
  margin-top: var(--gap-bloque);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline-start: var(--programas-inicio, var(--margen));
}
.programas__carrusel::-webkit-scrollbar { display: none; }
.programas__pista {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-block: 4px 18px;
  padding-inline-end: var(--margen);
  padding-inline-start: var(--programas-inicio, var(--margen));
}
.programas__tarjeta {
  flex: 0 0 82vw;
  max-width: 400px;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .programas__tarjeta { flex-basis: 46vw; max-width: 420px; }
}
@media (min-width: 1024px) {
  .programas__tarjeta { flex-basis: 30vw; max-width: 400px; }
}
.programas__puntos {
  display: flex;
  justify-content: center;
  gap: 10px;
}
@media (min-width: 1024px) {
  /* en desktop, con "siempre visible" activado, un solo punto suelto no
     aporta nada junto a las flechas - se deja el indicador solo en mobile,
     donde sí ayuda a ubicarse en un carrusel táctil. */
  .programas__puntos { display: none; }
}
.programas__punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, .2);
  cursor: pointer;
  transition: background .3s var(--curva), transform .3s var(--curva);
}
.programas__punto:hover { background: rgba(20, 20, 20, .4); }
.programas__punto.is-activo { background: var(--acento); transform: scale(1.3); }

/* ══════════════════ REJILLAS DE TARJETAS ══════════════════ */
.rejilla-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 47px;
  margin-top: var(--gap-bloque);
  align-items: stretch;
}
.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 29px;
  margin-top: var(--gap-bloque);
  align-items: stretch;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: 16px;
  transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s var(--curva);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: 6px 10px 26px rgba(0, 0, 0, .38); border-color: #b8940a; }
.medios .tarjeta { min-height: 432px; }
.articulos .tarjeta { min-height: 338px; }

.tarjeta__medio {
  position: relative;
  border-radius: var(--radio-foto);
  overflow: hidden;
  aspect-ratio: 292 / 164;
  background: #1a1512;
}
.tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.tarjeta:hover .tarjeta__medio img { transform: scale(1.05); }
/* Las miniaturas de "Lo que construyo" son capturas reales con forma de
   iPhone (verticales). No se muestra el mockup completo (queda demasiado
   alto): la ventana se recorta más corta que la imagen para asomar justo
   status bar + logo + mensaje principal, sin llegar al botón. La imagen de
   origen queda intacta - solo cambia cuánto se ve de ella. */
.proyectos__tarjeta .tarjeta__medio { aspect-ratio: 420 / 400; background: #17130d; }
/* Sin zoom al pasar el mouse: en una foto real queda bien, pero en un
   mockup de teléfono recortado se ve raro acercarse de golpe. */
.proyectos__tarjeta:hover .tarjeta__medio img { transform: none; }
.proyectos__tarjeta .tarjeta__medio img { object-position: top; }

.tarjeta__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 59px;
  height: 59px;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
  transition: transform .4s var(--curva);
}
.tarjeta__play svg { width: 100%; height: 100%; }
.tarjeta:hover .tarjeta__play { transform: translate(-50%, -50%) scale(1.08); }

.tarjeta__kicker {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--acento-claro);
}
.tarjeta__titulo {
  font-family: var(--display);
  margin-top: 12px;
  font-size: 23.6px;
  font-weight: 700;
  line-height: 1.375;
  color: #fff;
  text-wrap: balance;
}
.tarjeta__titulo--art { margin-top: 22px; font-size: 18.9px; line-height: 1.393; }
.tarjeta__texto {
  margin-top: 7px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto-suave);
  text-wrap: pretty;
}
.tarjeta__texto a { color: var(--acento-claro); text-decoration: underline; text-underline-offset: 2px; }
.tarjeta__texto a:hover { color: #fff; }
.tarjeta__pie { margin-top: auto; padding-top: 12px; }
.tarjeta__pie--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarjeta__pie--doble .pastilla { padding-inline: 10px; min-width: 0; }
.tarjeta__enlace-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--acento-claro);
}
.tarjeta__enlace-secundario:hover { color: #fff; }
.tarjeta__enlace-secundario .flecha-diag { width: 9px; height: 9px; }
.tarjeta--enlace { cursor: pointer; }
.tarjeta__leer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--acento-claro);
  transition: gap .3s var(--curva);
}
.tarjeta__leer .flecha-diag { width: 11px; height: 11px; }
.tarjeta--enlace:hover .tarjeta__leer { gap: 12px; color: #ffd24d; }

/* ══════════════════ 5 · PROGRAMAS ══════════════════ */
.programa {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 442px;
  padding: 42px 38px 30px;
  color: var(--tinta);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.programa:hover { transform: translateY(-4px); box-shadow: 6px 10px 26px rgba(0, 0, 0, .22); }
.programa__chip {
  position: absolute;
  top: 15px;
  right: 0;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 14px;
  border-radius: 31px 0 0 31px;
  background: var(--acento);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.programa__titulo {
  font-family: var(--display);
  font-size: clamp(26px, 2.5vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.0717em;
  text-transform: uppercase;
  width: fit-content;
  max-width: 100%;
}
.programa__bajada {
  margin-top: 14px;
  max-width: 400px;
  font-size: clamp(17px, 1.5625vw, 20px);
  line-height: 1.35;
  color: var(--tinta-cuerpo);
}
.programa__lista {
  margin-top: 23px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.programa__lista li {
  position: relative;
  padding-left: 25px;
  max-width: 429px;
  font-size: clamp(16px, 1.5625vw, 20px);
  line-height: 1.35;
  color: var(--tinta-suave);
}
.programa__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 16.5px;
  height: 16.5px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--acento);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.6591 11.6591'><path d='M1.25559 11.6591L0 10.4035L8.60979 1.79371H0.896853V0H11.6591V10.7622H9.86538V3.0493L1.25559 11.6591Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.6591 11.6591'><path d='M1.25559 11.6591L0 10.4035L8.60979 1.79371H0.896853V0H11.6591V10.7622H9.86538V3.0493L1.25559 11.6591Z'/></svg>") center / contain no-repeat;
}
.programa__nota {
  align-self: flex-start;
  margin-top: 22px;
  margin-bottom: 20px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 191, 0, .3);
  border-radius: 999px;
  background: rgba(255, 191, 0, .09);
  font-size: clamp(15px, 1.406vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  color: #8a6a10;
}
.programa .pastilla--cta { margin-top: auto; }

/* ══════════════════ 6 · ARTÍCULOS ══════════════════ */
.articulos .centro { margin-top: 54px; }

/* ══════════════════ 7 · PREGUNTAS FRECUENTES ══════════════════ */
.faq { padding-bottom: 112px; }
.faq__lista {
  max-width: 701px;
  margin: 46px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq__item { overflow: hidden; transition: box-shadow .4s var(--curva); }
.faq__item h3 { font: inherit; margin: 0; }
.faq__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 77.8px;
  padding: 14px 27px 14px 23px;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(19px, 2.031vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.038em;
  color: var(--negro);
  transition: color .3s var(--curva);
}
.faq__boton:hover { color: var(--acento); }

.mas { position: relative; flex: none; width: 32px; height: 32px; }
.mas::before, .mas::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--acento);
  border-radius: 2px;
  transition: transform .4s var(--curva), opacity .3s var(--curva);
}
.mas::before { width: 24px; height: 2.67px; transform: translate(-50%, -50%); }
.mas::after  { width: 2.67px; height: 24px; transform: translate(-50%, -50%); }
.faq__boton[aria-expanded="true"] .mas::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__panel {
  overflow: hidden;
  transition: height .42s var(--curva);
}
.faq__cuerpo {
  padding: 0 62px 24px 23px;
  margin-top: -6px;
  font-size: clamp(16px, 1.5625vw, 20px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: var(--negro);
  text-wrap: pretty;
}
.faq__cuerpo p + p { margin-top: 12px; }
.faq__cuerpo b { font-weight: 700; }
.faq__cuerpo a {
  color: var(--acento);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.faq__cuerpo a:hover { color: #cc9900; }

/* ══════════════════ 8 · REDES Y PIE ══════════════════ */
.red__icono { flex: none; width: 30px; height: 30px; color: var(--acento); }
.red__icono--yt { width: 34px; }
.colabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
.colabs__correo {
  display: inline-block;
  margin-top: 10px;
  padding-block: 9px;
  font-family: var(--display);
  font-size: clamp(19px, 2.089vw, 26.743px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  overflow-wrap: anywhere;
  transition: color .3s var(--curva);
}
.colabs__correo:hover { color: var(--acento-claro); }
.btn--kit { max-width: 100%; }
.colabs__acciones { display: flex; flex-wrap: wrap; gap: 14px; }

.linea-pie {
  height: 1px;
  margin: 58px calc(var(--margen) * -1) 0;
  background-image: linear-gradient(90deg, #4a3a10 2%, #666 98%);
}
.copyright {
  margin-top: 44px;
  text-align: center;
  font-size: clamp(15px, 1.5625vw, 20px);
  line-height: 1.65;
  color: var(--texto-tenue);
}

/* pie con columnas: marca, navegación, formación y ecosistema */
.pie {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1.2fr 1.3fr;
  gap: 40px;
  margin-top: 56px;
}
.pie__logo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.pie__bajada {
  margin-top: 14px;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-tenue);
}
.pie__titulo {
  margin-bottom: 18px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}
.pie__redes { display: flex; gap: 10px; margin-top: 22px; }
.pie__red {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 191, 0, .28);
  border-radius: 50%;
  color: var(--acento);
  transition: border-color .3s var(--curva), background-color .3s var(--curva), color .3s var(--curva);
}
.pie__red:hover,
.pie__red:focus-visible { border-color: var(--acento); background-color: var(--acento); color: var(--negro); }
.pie__red .red__icono { width: 18px; height: 18px; color: inherit; }
.pie__lista { display: grid; gap: 12px; }
.pie__lista a {
  font-size: 15px;
  line-height: 1.4;
  color: var(--texto-suave);
  transition: color .3s var(--curva);
}
.pie__lista a:hover,
.pie__lista a:focus-visible { color: var(--acento-claro); }
.pie__etiqueta {
  margin-left: 4px;
  font-size: 12px;
  color: var(--texto-tenue);
}
.pie__ext {
  font-style: normal;
  font-size: 12px;
  color: var(--texto-tenue);
}
.pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.pie__base .copyright { margin-top: 0; text-align: left; font-size: 14px; }
.pie__grupo { font-size: 14px; color: var(--texto-tenue); }
.pie__grupo a { color: var(--acento); font-weight: 700; }
.pie__grupo a:hover { color: var(--acento-claro); }
@media (max-width: 1023px) {
  .pie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

/* ══════════════════ ANIMACIONES DE ENTRADA ══════════════════ */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--curva), transform .75s var(--curva);
  transition-delay: calc(var(--retardo, 0) * 90ms);
}
.js .reveal.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   ADAPTACIÓN · ESCRITORIO PEQUEÑO (1200 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .quien__rejilla { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 48px; }
  .rejilla-3 { gap: 32px; }
  .programa { padding: 42px 32px 28px; }
  .tarjeta__titulo { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADAPTACIÓN · TABLETA (1024 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  :root { --pad-sec-sup: 76px; --pad-sec-inf: 72px; --gap-bloque: 40px; }

  .hero { min-height: 0; padding-top: 128px; padding-bottom: 110px; }
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(16, 15, 14, .58) 0%, rgba(16, 15, 14, .3) 46%, rgba(16, 15, 14, .04) 72%),
      linear-gradient(180deg, rgba(16, 15, 14, .18) 0%, rgba(16, 15, 14, 0) 34%);
  }
  .hero__titulo { font-size: clamp(49px, 11vw, 106px); }
  .hero__rol { max-width: 62%; }
  .hero__texto { max-width: 66%; }

  .quien { padding-top: 64px; padding-bottom: 76px; }
  .quien__rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .quien__principal { order: 1; }
  .quien__lateral {
    order: 2;
    display: flex;
    align-items: center;
    gap: 34px;
  }
  .quien__retrato { flex: 0 0 min(300px, 42%); margin: 0; }
  .quien__aparte { flex: 1 1 auto; min-width: 0; }
  .cita { margin-top: 0; }
  .quien__barra { margin-top: 32px; }

  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .rejilla-2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .medios .tarjeta, .articulos .tarjeta, .programa { min-height: 0; }

  .cifras__rejilla { grid-template-rows: auto; }
  .trama--rejilla { background-size: 760px auto; opacity: .34; }
  .cifra { min-height: 121px; }
  .cifra--alta { grid-row: span 2; min-height: 260px; }

  .faq { padding-bottom: 84px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADAPTACIÓN · MENÚ MÓVIL (900 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .nav__burger { display: flex; }
  .nav__links {
    position: fixed;
    left: 0;
    right: 0;
    top: 60px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px max(20px, 6.25vw) 20px;
    background: rgba(10, 10, 10, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--curva), transform .3s var(--curva), visibility .3s;
  }
  .nav__links.abierto { opacity: 1; visibility: visible; transform: none; }
  .nav__links a {
    padding: 15px 4px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ADAPTACIÓN · MÓVIL (760 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 759px) {
  :root { --pad-sec-sup: 62px; --pad-sec-inf: 60px; --gap-bloque: 32px; --gap-sub: 12px; }

  html { scroll-padding-top: 60px; }

  .hero {
    padding-top: 118px;
    padding-bottom: 90px;
  }
  .hero__fondo img { object-position: 74% 18%; }
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(16, 15, 14, .3) 0%, rgba(16, 15, 14, .45) 42%, rgba(16, 15, 14, .82) 74%, rgba(16, 15, 14, .95) 100%),
      linear-gradient(90deg, rgba(16, 15, 14, .5) 0%, rgba(16, 15, 14, .18) 55%, rgba(16, 15, 14, .1) 100%);
  }
  .hero__desvanecido { height: 130px; }
  .hero__titulo { font-size: clamp(40px, 13.38vw, 81px); margin-bottom: 6px; }
  .hero__rol { max-width: none; margin-top: 14px; font-size: clamp(19px, 5.1vw, 26px); }
  .hero__texto { max-width: none; margin-top: 20px; font-size: clamp(15.5px, 4.2vw, 19px); }
  .hero__texto p + p { margin-top: 14px; }
  .hero__acciones { gap: 14px; margin-top: 28px; }
  .hero__acciones .btn { width: 100%; white-space: normal; }

  .quien__lateral { flex-direction: column; align-items: stretch; gap: 26px; }
  .quien__retrato { flex: none; }
  .quien__retrato { max-width: 420px; }
  .cita { padding: 24px 22px 20px; }
  .cita__comilla { font-size: 50px; }
  .quien__cuerpo p + p { margin-top: 20px; }
  .quien__mas { margin-top: 20px; }

  .trama--rejilla { background-size: 560px auto; opacity: .26; }
  .cifras__rejilla { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cifra, .cifra--alta { grid-row: auto; min-height: 118px; }
  .cifra--alta { min-height: 150px; align-items: center; }
  .cifra--alta .cifra__icono { align-self: center; }
  .cifra { align-items: center; padding: 18px 20px; }
  .cifra__icono { width: 58px; }
  .cifra__icono--vistas { width: 50px; }

  .rejilla-3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tarjeta__titulo { font-size: 21px; }
  .tarjeta__pie { padding-top: 20px; }
  .tarjeta__pie--doble .pastilla { flex: 1 1 100%; }

  .programa { padding: 40px 22px 26px; }
  .programa__chip { font-size: 17px; height: 25px; padding: 0 12px; }
  .programa__bajada, .programa__lista li, .programa__nota { max-width: none; }
  .pastilla--cta { width: 100%; }

  .faq__boton { min-height: 68px; padding: 14px 18px; gap: 12px; }
  .mas { width: 26px; height: 26px; }
  .mas::before { width: 20px; height: 2.4px; }
  .mas::after { width: 2.4px; height: 20px; }
  .faq__cuerpo { padding: 0 18px 20px; }

  .colabs { gap: 22px; }
  .colabs > * { width: 100%; }
  .colabs__acciones { flex-direction: column; }
  .btn--kit { width: 100%; }
  .linea-pie { margin-top: 44px; }
  .copyright { margin-top: 32px; }
  .pie { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 44px; }
  .pie__base { flex-direction: column; align-items: flex-start; margin-top: 40px; }
}

/* ══════════════════ MOVIMIENTO REDUCIDO ══════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ══════════════════ IMPRESIÓN ══════════════════ */
@media print {
  .nav, .ruido, .trama, .resplandor, .hero__velo, .hero__desvanecido { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ══════════════════ MARCAS / ECOSISTEMAS (marquee) ══════════════════ */
.marcas {
  position: relative;
  overflow: hidden;
  padding: 34px 0;
  background: var(--negro);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.marcas__titulo {
  margin: 0 0 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.marcas__pista {
  display: flex;
  width: max-content;
  /* --marcas-ancho lo fija js/main.js con el ancho real de un grupo,
     y clona tantas copias como haga falta para cubrir la pantalla:
     con solo 2 copias fijas, en monitores anchos el recorrido se
     quedaba sin logos antes de completar el ciclo. */
  animation: marcas-desplazar 34s linear infinite;
}
.marcas:hover .marcas__pista { animation-play-state: paused; }
.marcas__grupo {
  display: flex;
  align-items: center;
  flex: none;
  gap: 72px;
  padding-inline-end: 72px;
}
.marcas__logo {
  height: 100px;
  width: auto;
  opacity: .6;
  filter: grayscale(1) brightness(2.1);
  transition: opacity .3s var(--curva);
}
.marcas__logo:hover { opacity: 1; }

@keyframes marcas-desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marcas-ancho, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .marcas__pista { animation: none; }
}

/* ══════════════════ BARRA DE PROGRESO DE LECTURA ══════════════════ */
#reading-progress-fill {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: 300;
  background-image: linear-gradient(90deg, var(--acento) 0%, var(--acento-claro) 50%, #fff 100%);
  transition: width 100ms ease;
}

/* ══════════════════ BLOG: LISTADO Y ARTÍCULO ══════════════════ */
.etiqueta-categoria {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 5px 14px;
  border-radius: 65px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--negro);
  background: var(--acento);
  width: fit-content;
}
.tarjeta .etiqueta-categoria { margin-top: 16px; }

.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--gap-bloque);
}
.blog-filtro {
  padding: 9px 20px;
  border: 1.102px solid var(--borde-calido);
  border-radius: 65px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--texto-suave);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--curva), background .3s var(--curva), border-color .3s var(--curva);
}
.blog-filtro:hover { color: #fff; border-color: var(--acento); }
.blog-filtro.is-activo {
  color: var(--negro);
  background: var(--acento);
  border-color: var(--acento);
}
.blog-listado .rejilla-3 { margin-top: 36px; }

/* artículo individual */
/* el contenedor es el general; solo los párrafos llevan ancho de lectura.
   Herramientas, embeds y listas usan todo el ancho del contenedor. */
.post__contenedor > .subtitulo { max-width: 720px; }
.post__migas {
  font-size: 14px;
  color: var(--texto-tenue);
}
.post__migas a { color: var(--acento-claro); }
.post__migas a:hover { color: #fff; }
.post__titulo { margin-top: 18px; max-width: 780px; }

.post__autor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.post__autor-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.post__autor-datos { flex: 1 1 auto; min-width: 0; }
.post__autor-nombre { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.post__autor-rol { margin: 2px 0 0; font-size: 13px; color: var(--texto-tenue); }
.post__fecha { font-size: 14px; color: var(--texto-tenue); white-space: nowrap; }

.post__portada {
  margin-top: 34px;
  border-radius: var(--radio-foto);
  overflow: hidden;
  background: #1a1512;
}
.post__portada img { width: 100%; height: auto; }

/* ══ Layout de 2 columnas: tabla de contenido fija + cuerpo del artículo ══
   El sidebar solo tiene sentido con espacio de sobra (desktop); en pantallas
   angostas la TOC pasa a ser un bloque normal arriba del cuerpo, sin sticky. */
.post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .post__layout { grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
}
.post__toc {
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radio-foto);
  background: rgba(255, 255, 255, .03);
}
@media (min-width: 1024px) {
  .post__toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; }
}
.post__toc-titulo {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.post__toc-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post__toc-lista li { counter-increment: toc; }
.post__toc-lista a {
  display: flex;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--texto-tenue);
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
  transition: color .25s var(--curva), border-color .25s var(--curva);
}
.post__toc-lista a::before { content: counter(toc) '.'; flex: none; color: var(--acento); font-weight: 700; }
.post__toc-lista a:hover { color: #fff; }
.post__toc-lista a.is-activo { color: #fff; border-left-color: var(--acento); }

.post__cuerpo {
  font-size: 17px;
  line-height: 1.75;
  color: var(--texto-cuerpo);
  max-width: 780px;
}
.post__cuerpo > * + * { margin-top: 22px; }
.post__cuerpo h2 {
  margin-top: 44px;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.post__cuerpo h3 {
  margin-top: 34px;
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 600;
  color: #fff;
}
.post__cuerpo h4 { font-weight: 700; color: #fff; }
.post__cuerpo strong { color: #fff; font-weight: 700; }
.post__cuerpo a { color: var(--acento-claro); text-decoration: underline; text-underline-offset: 3px; }
.post__cuerpo a:hover { color: #fff; }
.post__lista { padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 10px; }
.post__lista li { padding-left: 4px; }
ol.post__lista { list-style: decimal; }
.post__cita {
  padding: 20px 24px;
  border-left: 3px solid var(--acento);
  background: rgba(255, 191, 0, .07);
  border-radius: 0 var(--radio-foto) var(--radio-foto) 0;
  font-style: italic;
  color: var(--texto-suave);
}
.post__figura { border-radius: var(--radio-foto); overflow: hidden; }
.post__tabla-wrap { overflow-x: auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radio-foto); }
.post__tabla { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.post__tabla th, .post__tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.post__tabla th { color: #fff; font-weight: 700; background: rgba(255, 191, 0, .07); }
.post__tabla tbody tr:last-child td { border-bottom: 0; }
.post__volver { margin-top: 52px; }

@media (max-width: 1023px) {
  .post__cuerpo { font-size: 16px; }
}

/* ══════════════════ RECURSOS: HUB Y COMPARADOR ══════════════════ */
.recursos__rejilla { margin-top: var(--gap-bloque); }
.recurso-tarjeta__proximo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1.102px dashed var(--borde-calido);
  border-radius: var(--radio);
  color: var(--texto-tenue);
}

.comparador__intro { max-width: 720px; }

.comparador__controles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: var(--gap-bloque);
}
.comparador__proveedores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.comparador__chip {
  padding: 8px 16px;
  border: 1.102px solid var(--borde-calido);
  border-radius: 65px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--texto-tenue);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--curva), background .3s var(--curva), border-color .3s var(--curva);
}
.comparador__chip:hover { color: #fff; border-color: var(--acento); }
.comparador__chip.is-activo {
  color: var(--negro);
  background: var(--acento-claro);
  border-color: var(--acento-claro);
}
.comparador__chip.es-nubepal.is-activo { background: var(--acento); border-color: var(--acento); }

.comparador__moneda {
  display: inline-flex;
  border: 1.102px solid var(--borde-calido);
  border-radius: 65px;
  overflow: hidden;
}
.comparador__moneda button {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-tenue);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--curva), background .3s var(--curva);
}
.comparador__moneda button.is-activo { color: var(--negro); background: var(--acento); }
.comparador__moneda-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.comparador__tasa-nota { font-size: 12px; color: var(--texto-tenue); }

.comparador__tabla-wrap {
  margin-top: 28px;
  overflow-x: auto;
  border: 1.102px solid var(--borde-calido);
  border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--borde-calido) transparent;
}
.comparador__tabla-wrap::-webkit-scrollbar { height: 6px; }
.comparador__tabla-wrap::-webkit-scrollbar-track { background: transparent; }
.comparador__tabla-wrap::-webkit-scrollbar-thumb {
  background: var(--borde-calido);
  border-radius: 10px;
}
.comparador__tabla-wrap::-webkit-scrollbar-thumb:hover { background: var(--acento); }
.comparador__tabla {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
.comparador__col-etiqueta { width: 190px; }
.comparador__col-proveedor { width: 170px; }
.comparador__tabla th, .comparador__tabla td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  white-space: normal;
}
.comparador__tabla thead th {
  position: sticky;
  top: 0;
  background: var(--tinta);
  vertical-align: top;
  z-index: 2;
}
.comparador__tabla tbody th {
  position: sticky;
  left: 0;
  background: var(--negro);
  color: var(--texto-suave);
  font-weight: 600;
  z-index: 1;
}
.comparador__tabla td { color: var(--texto-cuerpo); }
.comparador__tabla .fila-grupo th, .comparador__tabla .fila-grupo td {
  padding-top: 22px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acento-claro);
  background: transparent;
  border-bottom: none;
  position: static;
}
.comparador__tabla col.es-nubepal, .comparador__tabla th.es-nubepal, .comparador__tabla td.es-nubepal {
  background: rgba(255, 191, 0, .1);
}
.comparador__proveedor-nombre { font-family: var(--display); font-weight: 700; color: #fff; font-size: 15px; }
.comparador__proveedor-pais { font-size: 12px; color: var(--texto-tenue); font-weight: 400; }
.comparador__proveedor-select {
  margin-top: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--texto-cuerpo);
  background: var(--negro);
  border: 1px solid var(--borde-calido);
  border-radius: 6px;
}
.comparador__precio-destacado { font-family: var(--display); font-weight: 700; color: var(--acento-claro); }

.comparador__incluidos {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1.102px solid var(--borde-calido);
  border-radius: var(--radio);
}
.comparador__incluidos summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  list-style: none;
}
.comparador__incluidos summary::-webkit-details-marker { display: none; }
.comparador__incluidos summary::before { content: '+ '; color: var(--acento); }
.comparador__incluidos[open] summary::before { content: ' - '; }
.comparador__incluidos ul {
  margin-top: 16px;
  padding-left: 20px;
  list-style: disc;
  columns: 2;
  gap: 24px;
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.7;
}
.comparador__nota { margin-top: 24px; font-size: 13px; color: var(--texto-tenue); }
.comparador__nota a { color: var(--acento-claro); text-decoration: underline; text-underline-offset: 3px; }
.comparador__nota a:hover { color: #fff; }

@media (max-width: 640px) {
  .comparador__incluidos ul { columns: 1; }
  .comparador__controles { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════ RECURSOS: CALCULADORA DE PRESUPUESTO ══════════════════ */
.calc__intro { max-width: 720px; }

.calc__controles {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: var(--gap-bloque);
}
.calc__grupo { display: flex; flex-direction: column; gap: 10px; }
.calc__grupo-titulo { font-size: 13px; font-weight: 700; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.calc__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.calc__chip {
  padding: 9px 18px;
  border: 1.102px solid var(--borde-calido);
  border-radius: 65px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--texto-suave);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--curva), background .3s var(--curva), border-color .3s var(--curva);
}
.calc__chip:hover { color: #fff; border-color: var(--acento); }
.calc__chip.is-activo { color: var(--negro); background: var(--acento); border-color: var(--acento); }

.calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}
.calc__panel {
  padding: 28px;
  border: 1.102px solid var(--borde-calido);
  border-radius: var(--radio);
}
.calc__panel-titulo { font-family: var(--display); font-size: 20px; font-weight: 700; color: #fff; }
.calc__subtitulo { margin-top: 24px; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--acento-claro); }
.calc__campos { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.calc__campo { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--texto-suave); }
.calc__campo-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--borde-calido);
  border-radius: 8px;
  background: var(--negro);
}
.calc__campo-input span { color: var(--texto-tenue); font-size: 13px; }
.calc__campo-input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-family: var(--sans);
}
.calc__campo-input input:focus { outline: none; }
.calc__campo-input:focus-within { border-color: var(--acento); }

.calc-embudo { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.calc-embudo__etapa { display: flex; flex-direction: column; gap: 6px; }
.calc-embudo__barra {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-inline: 16px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, var(--acento), var(--acento-claro));
  transition: width .35s var(--curva);
}
.calc-embudo__valor { font-family: var(--display); font-weight: 700; color: var(--negro); font-size: 15px; }
.calc-embudo__etiqueta { font-size: 13px; color: var(--texto-tenue); }

.calc__resultado-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.calc__resultado { display: flex; flex-direction: column; gap: 4px; }
.calc__resultado-etiqueta { font-size: 12px; color: var(--texto-tenue); }
.calc__resultado-valor { font-family: var(--display); font-size: 17px; font-weight: 700; color: #fff; }
.calc__resultado-valor small { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--texto-tenue); }
.calc__resultado-valor--destacado { color: var(--acento-claro); font-size: 20px; }

.calc__diagnostico {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 3px solid;
  border-radius: 0 var(--radio-foto) var(--radio-foto) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.calc__diagnostico.es-ok { border-color: #4ADE80; background: rgba(74, 222, 128, .08); }
.calc__diagnostico.es-alerta { border-color: #FB7185; background: rgba(251, 113, 133, .08); }

@media (max-width: 900px) {
  .calc__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calc__resultado-grid { grid-template-columns: 1fr; }
  .calc__controles { gap: 20px; }
}

/* ══════════════════ RECURSOS: EBOOK ══════════════════ */
.ebook__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  margin-top: 34px;
  align-items: start;
}
.ebook__portada {
  border-radius: var(--radio-foto);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.ebook__portada img { width: 100%; height: auto; display: block; }
.ebook__intro { margin-top: 16px; }
.ebook__contenedor .btn--naranja { margin-top: 28px; }
.ebook__adelanto-titulo { margin-top: 40px; }
.ebook__lista { margin-top: 16px; }
.ebook__mas { margin-top: 12px; font-size: 14px; color: var(--texto-tenue); font-style: italic; }

@media (max-width: 780px) {
  .ebook__grid { grid-template-columns: 1fr; }
  .ebook__portada { max-width: 260px; margin-inline: auto; }
}

/* ══════════════════ RECURSOS: VIABILIDAD DE ECOMMERCE (wizard) ══════════════════ */
.viab-stepper {
  position: sticky;
  top: 60px;
  z-index: 90;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--gap-bloque);
  padding-block: 14px;
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.111px solid rgba(255, 255, 255, .08);
}
.viab-stepper__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--margen);
}
.viab-stepper__texto { font-size: 14px; font-weight: 700; color: var(--texto-suave); }
.viab-stepper__barra {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.viab-stepper__relleno {
  height: 100%;
  background-image: linear-gradient(90deg, var(--acento), var(--acento-claro));
  transition: width .4s var(--curva);
}
.viab-stepper__puntos { display: flex; gap: 6px; flex-wrap: wrap; }
.viab-stepper__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  transition: background .3s var(--curva), box-shadow .3s var(--curva);
}
.viab-stepper__punto.es-completo { background: var(--acento); }
.viab-stepper__punto.es-activo { background: var(--acento-claro); box-shadow: 0 0 0 3px rgba(255, 191, 0, .25); }

.viab__panel { margin-top: 28px; padding: 28px; border: 1.102px solid var(--borde-calido); border-radius: var(--radio); }
.viab__preguntas { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.viab__pregunta { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.viab__pregunta-texto { font-size: 15px; color: #fff; }
.viab__pregunta-num { color: var(--acento-claro); font-weight: 700; }
.viab__opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.viab__opcion {
  padding: 8px 16px;
  border: 1.102px solid var(--borde-calido);
  border-radius: 65px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--curva), background .3s var(--curva), border-color .3s var(--curva);
}
.viab__opcion:hover { color: #fff; border-color: var(--acento); }
.viab__opcion.is-activo { color: var(--negro); background: var(--acento); border-color: var(--acento); }

.viab__nota-label { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--texto-suave); }
.viab__nota {
  padding: 12px 14px;
  border: 1px solid var(--borde-calido);
  border-radius: 8px;
  background: var(--negro);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  resize: vertical;
}
.viab__nota:focus { outline: none; border-color: var(--acento); }

.viab__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.viab__nav button:disabled { opacity: .4; cursor: not-allowed; }
.viab__nav button:disabled:hover { transform: none; }

.viab__puntaje { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.viab__puntaje-numero { font-family: var(--display); font-size: 56px; font-weight: 700; color: var(--acento-claro); line-height: 1; }
.viab__puntaje-etiqueta { font-size: 15px; color: var(--texto-tenue); }
.viab__veredicto { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--texto-suave); max-width: 560px; }

.viab__resultado-grid { display: flex; flex-direction: column; gap: 2px; margin-top: 28px; }
.viab__resultado-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.viab__semaforo { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.viab__semaforo.es-verde { background: #4ADE80; }
.viab__semaforo.es-amarillo { background: #FBBF24; }
.viab__semaforo.es-rojo { background: #FB7185; }
.viab__resultado-nombre { flex: 1; font-size: 15px; color: #fff; }
.viab__resultado-pct { font-family: var(--display); font-weight: 700; color: var(--texto-suave); }

.viab__debiles { margin-top: 20px; font-size: 14px; color: var(--texto-suave); }
.viab__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

@media (max-width: 640px) {
  .viab__panel { padding: 20px; }
  .viab__nav { flex-wrap: wrap; gap: 12px; }
}

/* ══════════════════ RECURSOS: PRESENTACIONES (Canva) ══════════════════ */
.presentacion__tabs { margin-top: var(--gap-bloque); }
.presentacion__subtitulo {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.presentacion__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 24px;
  border-radius: var(--radio-foto);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: #1a1512;
}
.presentacion__embed--tab { margin-top: 20px; }
.presentacion__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.presentacion__fallback {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--acento-claro);
}
.presentacion__fallback:hover { color: #fff; }

/* ══════════════════ RECURSOS: AUDIOBOOK ══════════════════ */
.audio-lista { display: flex; flex-direction: column; gap: 14px; margin-top: var(--gap-bloque); }
.audio-pista {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.audio-pista__portada { width: 64px; height: 64px; border-radius: var(--radio-foto); object-fit: cover; flex: none; }
.audio-pista__cuerpo { flex: 1; min-width: 0; }
.audio-pista__titulo { font-size: 15px; font-weight: 700; color: #fff; }
.audio-pista__player { display: block; width: 100%; margin-top: 10px; height: 36px; }

@media (max-width: 560px) {
  .audio-pista { padding: 12px; gap: 12px; }
  .audio-pista__portada { width: 44px; height: 44px; }
  .audio-pista__titulo { font-size: 14px; }
}

/* ══════════════════ LINK IN BIO ══════════════════
   Página sin nav/pie del sitio (paginaHtml con chrome:false): un solo
   stack angosto pensado para abrirse desde el link de Instagram/TikTok,
   con el mismo lenguaje visual (vidrio, acento ámbar) del resto del sitio. */
.linkbio { display: flex; justify-content: center; padding-top: 52px; padding-bottom: 52px; }
.linkbio__tarjeta {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.linkbio__cabecera { text-align: center; }
.linkbio__avatar {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--acento);
  box-shadow: 0 0 0 6px rgba(255, 191, 0, .12), 0 10px 30px rgba(0, 0, 0, .4);
}
.linkbio__nombre { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; color: #fff; }
.linkbio__usuario { margin: 4px 0 0; font-size: 14px; color: var(--acento-claro); }
.linkbio__bio { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }

.linkbio__enlace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1.102px solid var(--borde-calido);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05) 2.885%, rgba(255, 210, 77, .05) 69.716%, rgba(255, 191, 0, .05) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  transition: transform .3s var(--curva), border-color .3s var(--curva), box-shadow .3s var(--curva);
}
.linkbio__enlace:hover { transform: translateY(-2px); border-color: var(--acento); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.linkbio__enlace .flecha-diag { color: var(--acento); }
.linkbio__enlace--cta {
  border: none;
  background-image: linear-gradient(90deg, #FFD24D, #FFBF00);
  color: #1a1305;
  font-size: 16px;
}
.linkbio__enlace--cta .flecha-diag { color: #1a1305; }
.linkbio__enlace--cta:hover { box-shadow: 0 12px 30px rgba(255, 191, 0, .35); }

.linkbio__grupo { display: flex; flex-direction: column; gap: 10px; }
.linkbio__grupo-titulo {
  margin: 0 0 2px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.linkbio__ecosistemas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.linkbio__eco {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  transition: transform .3s var(--curva), border-color .3s var(--curva);
}
.linkbio__eco:hover { transform: translateY(-2px); border-color: var(--acento); }
.linkbio__eco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.linkbio__eco-texto { font-family: var(--display); font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--acento-claro); }

.linkbio__redes { display: flex; justify-content: center; gap: 14px; }
.linkbio__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  color: var(--acento);
  transition: transform .3s var(--curva), border-color .3s var(--curva), color .3s var(--curva);
}
.linkbio__redes a:hover { transform: translateY(-2px); border-color: var(--acento); color: #fff; }
.linkbio__redes svg { width: 20px; height: 20px; }

.linkbio__pie { text-align: center; margin-top: 4px; }
.linkbio__pie a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--acento-claro); }
.linkbio__pie a:hover { color: #fff; }
.linkbio__pie .copyright { margin-top: 14px; font-size: 12px; color: var(--texto-tenue); }

/* ══════════════════ MODAL: VISTA PREVIA MÓVIL DE UN SITIO ══════════════════
   A propósito NO es un modal ancho de escritorio: el "teléfono" tiene un
   ancho fijo tipo mobile aunque se abra desde una pantalla grande, porque
   la idea es mostrar cómo se ve el sitio en un celular, no su versión de
   escritorio. */
.sitio-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}
.sitio-modal[hidden] { display: none; }
.sitio-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sitio-modal__telefono {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  height: min(844px, 100%);
  border-radius: 34px;
  overflow: hidden;
  border: 6px solid #1a1a1a;
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.sitio-modal__pantalla { position: relative; width: 100%; height: 100%; background: #fff; }
.sitio-modal__pantalla iframe {
  width: 390px;
  height: 100%;
  border: 0;
  display: block;
}
.sitio-modal__barra {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.sitio-modal__externo,
.sitio-modal__cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(20, 20, 20, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: border-color .3s var(--curva), background .3s var(--curva);
}
.sitio-modal__externo:hover,
.sitio-modal__cerrar:hover { border-color: var(--acento); background: rgba(0, 0, 0, .75); }
.sitio-modal__externo svg,
.sitio-modal__cerrar svg { width: 15px; height: 15px; }

@media (max-width: 480px) {
  .sitio-modal { padding: 0; }
  .sitio-modal__telefono { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .sitio-modal__pantalla iframe { width: 100%; }
}

/* ── Modal: podcast (embed Spotify) ─────────────────────────────────
   A diferencia del modal de sitios, éste NO es pantalla completa: es una
   tarjeta centrada del tamaño del reproductor, con el mismo fondo con blur. */
.podcast-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}
.podcast-modal[hidden] { display: none; }
.podcast-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.podcast-modal__tarjeta {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #17130d;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.podcast-modal__cerrar {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(20, 20, 20, .9);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: border-color .3s var(--curva), background .3s var(--curva);
}
.podcast-modal__cerrar:hover { border-color: var(--acento); background: rgba(0, 0, 0, .95); }
.podcast-modal__cerrar svg { width: 15px; height: 15px; }
.podcast-modal__tarjeta iframe { display: block; border: 0; }
.podcast-modal__externo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .3s var(--curva), background .3s var(--curva);
}
.podcast-modal__externo:hover { border-color: var(--acento); background: rgba(255, 255, 255, .05); }
.podcast-modal__externo .flecha-diag { color: var(--acento); }

/* ── Modal: agendar llamada (embed Calendly) ────────────────────────
   Misma estructura que el modal de podcast (fondo con blur + tarjeta
   centrada), pero más grande porque Calendly necesita más espacio. */
.calendly-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}
.calendly-modal[hidden] { display: none; }
.calendly-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.calendly-modal__tarjeta {
  position: relative;
  z-index: 1;
  width: min(1040px, 95vw);
  height: min(800px, 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.calendly-modal__tarjeta iframe { display: block; width: 100%; height: 100%; border: 0; }
.calendly-modal__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  background: rgba(255, 255, 255, .9);
  color: #17130d;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  transition: border-color .3s var(--curva), background .3s var(--curva);
}
.calendly-modal__cerrar:hover { border-color: var(--acento); background: #fff; }
.calendly-modal__cerrar svg { width: 15px; height: 15px; }
.calendly-modal__cargando {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #17130d;
  color: rgba(255, 255, 255, .75);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .3px;
  transition: opacity .3s var(--curva);
}
.calendly-modal__cargando[hidden] { display: none; }
.calendly-modal__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 191, 0, .18);
  border-top-color: var(--acento);
  animation: girar-spinner .8s linear infinite;
}
@keyframes girar-spinner { to { transform: rotate(360deg); } }

/* ── WhatsApp flotante ───────────────────────────────────────────── */
.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
.whatsapp-flotante:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.whatsapp-flotante svg { width: 30px; height: 30px; }

/* ═══════════════════════════════════════════════════════════════
   LEGAL · pie con el titular, páginas legales y aviso de cookies
   ═══════════════════════════════════════════════════════════════ */
.pie__legal { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--texto-tenue); }
.pie__legales { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.pie__legales a { color: var(--texto-suave); text-decoration: none; }
.pie__legales a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.legal__contenedor { padding-top: 116px; padding-bottom: 72px; max-width: 880px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.legal__nav a { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: var(--texto-suave); font-size: 13px; font-weight: 600; text-decoration: none; }
.legal__nav a:hover { color: #fff; border-color: #fff; }
.legal__nav a[aria-current="page"] { background: var(--acento); border-color: var(--acento); color: var(--negro); }
.legal__titulo { margin-top: 0; }
.legal__meta { margin-top: 14px; font-size: 13px; color: var(--texto-tenue); }
.legal__meta a { color: var(--acento-claro); }
.legal__cuerpo { margin-top: 30px; max-width: 780px; font-size: 16.5px; line-height: 1.75; color: var(--texto-cuerpo); }
.legal__seccion { margin-top: 38px; }
.legal__seccion h2 { font-family: var(--display); font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.25; color: #fff; margin-bottom: 12px; }
.legal__seccion p + p, .legal__seccion ul + p, .legal__seccion p + ul { margin-top: 14px; }
.legal__seccion ul { padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.legal__seccion strong { color: #fff; }
.legal__seccion a { color: var(--acento-claro); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 759px) { .legal__contenedor { padding-top: 96px; } }