/* ==========================================================================
   Librería de recursos · Divisual
   Sistema visual: ../../juanpe-web/DESIGN.md — "The Digital Curator"
   Reglas duras que vienen de ahí:
     · Cero bordes de 1px para separar secciones. La separación es tonal.
     · Cero sombras planas. La profundidad se hace apilando superficies.
     · El ámbar es alto voltaje: si todo es ámbar, nada importa.
   ========================================================================== */

:root {
  --surface:            #131313;
  --surface-lowest:     #0e0e0e;
  --surface-low:        #1c1b1b;
  --surface-high:       #2a2a2a;
  --surface-highest:    #353534;
  --surface-bright:     #3a3939;

  --primary:            #eeba05;
  --primary-container:  #d4a27f;
  --on-primary:         #49290f;

  --on-background:      #e5e2e1;
  --on-muted:           #cbc6c3;   /* subido: el gris antiguo (#9a9391) no se leía sobre el fondo */
  --outline:            #50443d;

  --info-bg:            #89b3bf;
  --info-fg:            #1a4650;

  --r-sm: .375rem;
  --r-md: .5rem;
  --r-xl: .75rem;
  --r-full: 999px;

  --display: "Space Grotesk", system-ui, sans-serif;
  --texto:   "Manrope", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ancho: 76rem;
  --glow: 0 0 40px rgba(238, 186, 5, .04);
}

* { box-sizing: border-box; }

/* Sin esto, cualquier `display` propio anula el atributo `hidden` y el elemento
   se sigue viendo. Pasó con los formularios de acceso: salían los tres a la vez. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Reserva el hueco de la barra de scroll. Sin esto, abrir un diálogo la
     esconde y toda la página da un salto de unos píxeles a la derecha. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-background);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}

a { color: inherit; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--on-primary);
  padding: .75rem 1.25rem; border-radius: var(--r-md); z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --- Kicker: la etiqueta diminuta y espaciada que ancla cada titular ------ */
.kicker {
  font-family: var(--texto);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-muted);
  margin: 0 0 .75rem;
}

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem;
  border: 0; border-radius: var(--r-xl);
  font-family: var(--texto); font-size: .9375rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .2s ease, filter .2s ease;
}
.btn--primario {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
}
.btn--primario:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn--fantasma {
  background: transparent;
  color: var(--on-background);
  box-shadow: inset 0 0 0 1px rgba(80, 68, 61, .2);
}
.btn--fantasma:hover { background: var(--surface-high); }
.btn--grande { padding: 1rem 1.75rem; font-size: 1rem; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* --- Fondo del hero ----------------------------------------------------------
   La captura del canal, volcada hacia atrás en 3D y desenfocada. No está para
   leerse: está para dar profundidad. Por eso va con desenfoque fuerte, brillo
   bajo y una máscara que la disuelve justo donde empieza el texto.
   ------------------------------------------------------------------------------ */
.hero__fondo {
  position: absolute;
  inset: 0;
  perspective: 2200px;
  perspective-origin: 50% 40%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* Ocupa el header entero, volcada hacia atrás. El desenfoque y el velo son lo
   que la mantienen como fondo y no como contenido que compite con el titular. */
.hero__fondo img {
  position: absolute;
  top: 50%; left: 50%;
  width: 132%;
  max-width: none;
  transform: translate(-50%, -50%) rotateX(9deg) rotateY(-17deg) rotateZ(1.5deg) scale(1.02);
  transform-origin: center;
  filter: blur(3px) saturate(.9) brightness(1.02);
  opacity: .9;
  border-radius: 1.5rem;
  /* Viñeta: los bordes se disuelven para que no se lea como un rectángulo pegado. */
  -webkit-mask-image: radial-gradient(ellipse 82% 78% at 52% 46%, #000 42%, rgba(0,0,0,.45) 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 78% at 52% 46%, #000 42%, rgba(0,0,0,.45) 72%, transparent 100%);
}

/* Velo. Más denso a la izquierda, donde va el titular, pero presente en todo el
   ancho para que la imagen no se coma ningún texto. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Velo local: oscurece solo lo que hay detrás del titular, para que el
       resto del header conserve la imagen a plena luz. */
    radial-gradient(ellipse 48% 62% at 14% 50%, rgba(19,19,19,.94) 0%, rgba(19,19,19,.8) 55%, transparent 100%),
    linear-gradient(96deg, rgba(19,19,19,.9) 0%, rgba(19,19,19,.6) 30%, rgba(19,19,19,.34) 60%, rgba(19,19,19,.3) 100%),
    linear-gradient(to bottom, rgba(19,19,19,.3), transparent 20%, transparent 66%, var(--surface) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero__cuerpo, .hero .contador { position: relative; z-index: 1; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(4.5rem, 11vw, 8.5rem) 1.5rem clamp(3.5rem, 8vw, 6rem);
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 60rem) {
  /* Asimetría intencionada: el texto pesa más que el contador. */
  .hero { grid-template-columns: 1.45fr .85fr; }
}

.hero h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); }

.lead {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: var(--on-background);
  max-width: 34ch;
  margin: 1.25rem 0 0;
}

/* --- Contador de suscriptores --------------------------------------------- */
.contador {
  background: rgba(14, 14, 14, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  box-shadow: var(--glow);
}
.contador__cifra {
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.contador__nombre { margin: .375rem 0 1.25rem; color: var(--on-muted); font-size: .9375rem; }

.barra {
  height: .5rem;
  background: var(--surface-high);
  border-radius: var(--r-full);
  overflow: hidden;
}
.barra__relleno {
  height: 100%;
  width: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  border-radius: var(--r-full);
  transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
}
.contador__meta { margin: .625rem 0 1.25rem; font-size: .8125rem; color: var(--on-muted); }
.contador__campana { margin: .875rem 0 0; font-size: .8125rem; color: var(--on-background); line-height: 1.5; }

/* --- Rejilla de recursos --------------------------------------------------- */
/* Un solo fondo en toda la página. Lo que separa las zonas es el aire y el
   titular, no un cambio de color: con bandas, cada scroll era un salto de tono. */
.catalogo { padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 8vw, 5.5rem); }
.catalogo__interior { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

.rejilla { display: flex; flex-direction: column; gap: 1.25rem; }

/* --- Rejilla de vídeos, al estilo YouTube -------------------------------------
   Cada vídeo es una ficha: miniatura 16:9 arriba, título debajo, y pegada a ella
   su carpeta de recursos. Al abrirla, la ficha pasa a ocupar la fila entera y se
   recoloca en horizontal — ocho tarjetas dentro de una columna estrecha no hay
   quien las lea.
   ------------------------------------------------------------------------------ */
.seccion {
  display: grid;
  gap: 2.25rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.seccion + .seccion { margin-top: clamp(2.5rem, 6vw, 4rem); }
.seccion__cabecera { grid-column: 1 / -1; margin-bottom: -.5rem; }
.seccion__desc { color: var(--on-background); font-size: .9375rem; margin: .5rem 0 0; }
.seccion__vacia {
  grid-column: 1 / -1;
  color: var(--on-muted);
  font-size: .9375rem;
  margin: 0;
}

.carpeta { display: flex; flex-direction: column; gap: .875rem; min-width: 0; }
.carpeta__cabecera { display: contents; }

.carpeta__video {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  text-decoration: none;
  min-width: 0;
}
.carpeta__video--sin { pointer-events: none; }

.carpeta__texto { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }
.carpeta__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: 1rem; letter-spacing: -.01em; line-height: 1.3;
  /* Como YouTube: dos líneas y a partir de ahí, puntos suspensivos. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.carpeta__video:hover .carpeta__titulo { color: var(--primary); }

/* Al abrir, la ficha crece hacia abajo y se queda en su columna. Antes ocupaba
   la fila entera y recolocaba todas las demás miniaturas: abrir una carpeta te
   movía media pantalla. */

/* --- La carpeta de recursos, pegada bajo cada vídeo --------------------------
   El botón de marca, en compacto. Es la acción de la página —llevarse el
   recurso—, así que va en ámbar como "Suscribirme": el único elemento
   encendido de cada ficha, ahora que el play es de cristal.
   ---------------------------------------------------------------------------- */
.entregable {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  border: 0;
  border-radius: var(--r-xl);
  padding: .625rem 1.25rem;
  min-height: 2.75rem;   /* 44px: los que pide un dedo; se quedaba en 39 */
  color: var(--on-primary);
  font-family: var(--texto); font-size: .875rem; font-weight: 700;
  text-decoration: none;   /* cuando es un enlace a Drive */
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
}
.entregable:hover { transform: translateY(-2px); filter: brightness(1.06); }

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

/* --- Miniatura ------------------------------------------------------------- */
.miniatura {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-high);
}
.miniatura img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.miniatura--vacia img { opacity: 0; }
.carpeta__video:hover .miniatura img,
.tarjeta:hover .miniatura img,
.ficha__video:hover .miniatura img { transform: scale(1.045); }

/* Botón de play. En reposo es cristal oscuro; el ámbar aparece al apuntar y se
   va, como manda la regla de alto voltaje. Antes eran veinte discos amarillos
   encendidos a la vez y se comían las miniaturas. */
.miniatura__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 60%);
}
.miniatura__play svg {
  width: 2.75rem; height: 2.75rem;
  padding: .75rem;
  box-sizing: content-box;
  border-radius: var(--r-full);
  background: rgba(14, 14, 14, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  fill: var(--on-background);
  transform: scale(.62);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s ease, fill .2s ease;
}
.carpeta__video:hover .miniatura__play svg,
.tarjeta:hover .miniatura__play svg { transform: scale(.68); }

.carpeta__video:hover .miniatura__play svg,
.tarjeta:hover .miniatura__play svg,
.ficha__video:hover .miniatura__play svg,
.ultimo__tarjeta:hover .miniatura__play svg,
.directo__repeticion:hover .miniatura__play svg {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  fill: var(--on-primary);
}

/* En la ficha la miniatura manda: el play va a tamaño completo. */
.ficha__video .miniatura__play svg { transform: scale(.85); }
.ficha__video:hover .miniatura__play svg { transform: scale(.92); }

/* En las tarjetas la miniatura es un apoyo, no el protagonista. */
.tarjeta .miniatura { margin: -.5rem 0 1rem; }
.tarjeta .miniatura__play svg { transform: scale(.5); }
.tarjeta:hover .miniatura__play svg { transform: scale(.55); }

.tarjeta {
  display: flex; flex-direction: column;
  text-align: left;
  background: var(--surface-low);
  border: 0; border-radius: var(--r-xl);
  padding: 1.5rem;
  cursor: pointer;
  font-family: var(--texto);
  color: var(--on-background);
  transition: background .18s ease, transform .18s ease;
}
.tarjeta:hover { background: var(--surface-high); transform: translateY(-3px); }
.tarjeta h3 { font-size: 1.0625rem; margin: .5rem 0 .625rem; }
.tarjeta__resumen {
  margin: 0 0 1.25rem;
  font-size: .875rem; line-height: 1.55;
  color: var(--on-background);
  flex: 1;
}
.tarjeta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.etiqueta {
  display: inline-block;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: var(--r-full);
  background: var(--surface-high);
  color: var(--on-muted);
}
/* El azul es la excepción, no el adorno: marca lo que no es un ZIP. */
.etiqueta--destacada { background: var(--info-bg); color: var(--info-fg); }
.etiqueta--pronto    { background: var(--surface-bright); color: var(--on-background); }

.tarjeta--pronto { opacity: .58; }
.tarjeta--pronto:hover { transform: none; }

/* --- Panel de colección sin archivos --------------------------------------- */
.pronto {
  grid-column: 1 / -1;
  background: var(--surface-low);
  border-radius: var(--r-xl);
  padding: 1.75rem;
}
.pronto__titulo { font-family: var(--display); font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; }
.pronto__texto  { color: var(--on-background); font-size: .875rem; margin: 0 0 1.25rem; max-width: 62ch; }
.pronto__lista  { display: flex; flex-wrap: wrap; gap: .5rem; }
.pronto__item {
  background: var(--surface-high); color: var(--on-muted);
  border: 0; border-radius: var(--r-full);
  padding: .5rem 1rem;
  font-family: var(--texto); font-size: .8125rem; font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pronto__item:hover { background: var(--surface-high); color: var(--on-background); }

/* --- Estado vacío ---------------------------------------------------------- */
.vacio {
  grid-column: 1 / -1;
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.vacio__titulo { font-family: var(--display); font-size: 1.25rem; font-weight: 700; margin: 0 0 .75rem; }
.vacio__texto { color: var(--on-background); max-width: 46ch; margin: 0 auto 1.5rem; font-size: .9375rem; }

/* --- Embudo ---------------------------------------------------------------- */
.embudo {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
}
.embudo h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.embudo__desc { color: var(--on-background); margin: 1rem 0 1.5rem; max-width: 42ch; }
/* --- Reloj de la mentoría --------------------------------------------------
   Cifras monoespaciadas y tabulares: sin eso, los segundos hacen bailar el
   ancho de la caja cada vez que cambian. */
.reloj { display: flex; gap: .5rem; margin: 0 0 1.75rem; flex-wrap: wrap; }

.reloj__unidad {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  background: var(--surface-lowest);
  border-radius: var(--r-md);
  padding: .75rem .5rem .625rem;
  min-width: 4.25rem;
}
.reloj__cifra {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.reloj__etiqueta {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-muted);
}

.reloj__directo {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--mono);
  font-size: .875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary);
  background: var(--surface-lowest);
  border-radius: var(--r-md);
  padding: .875rem 1.125rem;
}
.reloj__directo::before {
  content: ""; width: .5rem; height: .5rem; border-radius: var(--r-full);
  background: var(--primary);
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- FAQ ------------------------------------------------------------------- */
.faq { max-width: var(--ancho); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; }
.faq h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: 2rem; }
/* Sin líneas divisorias: separa el hueco, no una raya. */
.faq__lista { display: flex; flex-direction: column; gap: .5rem; max-width: 52rem; }
.faq__item { background: var(--surface-lowest); border-radius: var(--r-md); overflow: hidden; }
.faq__item[open] { background: var(--surface-low); }
.faq__p {
  cursor: pointer; list-style: none;
  padding: 1.125rem 1.375rem;
  font-weight: 700; font-size: .9375rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq__p::-webkit-details-marker { display: none; }
.faq__p::after { content: "+"; color: var(--primary); font-size: 1.25rem; flex: none; }
.faq__item[open] .faq__p::after { content: "–"; }
.faq__p:hover { background: var(--surface-low); }
.faq__r { margin: 0; padding: 0 1.375rem 1.375rem; color: var(--on-background); font-size: .9375rem; }

.pie {
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--on-muted);
  font-size: .8125rem;
}
.pie p { margin: 0; }
.malla { overflow: hidden; }   /* el halo que deriva no saca scroll lateral */
.pie__logo { display: block; height: 44px; width: auto; margin: 0 auto; opacity: .8; }

/* --- Ficha (modal) --------------------------------------------------------- */
.ficha {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(85vh, 50rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface-low);
  color: var(--on-background);
  box-shadow: 0 0 40px rgba(238, 186, 5, .04);
  overflow: visible;
}
.ficha::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.ficha__cuerpo { padding: clamp(1.75rem, 4vw, 2.5rem); overflow-y: auto; max-height: min(85vh, 50rem); }
.ficha__cerrar {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 2.25rem; height: 2.25rem;
  background: var(--surface-high); color: var(--on-background);
  border: 0; border-radius: var(--r-full);
  cursor: pointer; font-size: .875rem;
}
.ficha__cerrar:hover { background: var(--surface-bright); }
.ficha h2 { font-size: clamp(1.375rem, 3.5vw, 1.75rem); margin: .625rem 0 1rem; padding-right: 2rem; }
.ficha__resumen { color: var(--on-background); margin: 0 0 1.75rem; }

.ficha__bloque { margin: 0 0 1.5rem; }
/* Rótulo de bloque en caja baja: "LO QUE NECESITAS ANTES DE EMPEZAR" en
   versales y con .18em de separación ocupaba dos líneas para decir poco. */
.ficha__bloque h3 {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
  color: var(--on-muted);
  margin: 0 0 .625rem;
}
/* Ni el flujo ni los requisitos van ya en cajas rellenas: la ficha eran seis
   rectángulos apilados. Aquí manda el texto, y lo único que marca el bloque es
   una raya de ámbar o un punto. */
.ficha__flujo {
  margin: 0;
  padding: 0 0 0 .875rem;
  box-shadow: inset 2px 0 0 0 rgba(238, 186, 5, .35);
  font-size: .9375rem;
}
.ficha__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.ficha__lista li {
  position: relative;
  padding-left: 1.0625rem;
  font-size: .9375rem;
  line-height: 1.5;
}
.ficha__lista li::before {
  content: "";
  position: absolute; left: 0; top: .5625em;
  width: .3125rem; height: .3125rem;
  border-radius: var(--r-full);
  background: var(--primary);
  opacity: .55;
}
/* Sin caja alrededor: era un marco relleno encerrando una miniatura, que ya es
   un rectángulo con sus esquinas. El acercamiento de la imagen basta como
   señal de que se puede pulsar. */
.ficha__video { display: block; text-decoration: none; }
.ficha__video-texto { display: block; padding: .75rem 0 0; }
.ficha__video strong {
  display: block; font-size: .9375rem; margin-bottom: .25rem;
  transition: color .18s ease;
}
.ficha__video:hover strong { color: var(--primary); }
.ficha__video-texto > span { font-size: .8125rem; color: var(--primary); }

.ficha__siguiente {
  background: var(--surface-lowest);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin: 1.75rem 0 0;
}
.ficha__siguiente p { margin: 0 0 1rem; font-size: .9375rem; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* --- Aviso de file:// ------------------------------------------------------ */
.aviso-local {
  position: fixed; inset: auto 1rem 1rem 1rem;
  background: var(--info-bg); color: var(--info-fg);
  padding: 1rem 1.25rem; border-radius: var(--r-md);
  font-size: .875rem; line-height: 1.5; z-index: 50;
}
.aviso-local code {
  background: rgba(0, 0, 0, .12); padding: .1rem .375rem; border-radius: var(--r-sm);
  font-size: .8125rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   CAPA TECH
   Rejilla de plano, barridos de escáner, esquinas de HUD y monoespaciada para
   todo lo que es un dato. Va al final a propósito: es una capa encima del
   sistema, no un sistema nuevo. Se puede borrar entera y la web sigue en pie.

   Las reglas de DESIGN.md siguen mandando:
     · Las esquinas son marcas, no bordes. Nada encierra una caja con 1px.
     · El ámbar sigue siendo alto voltaje: aparece al pasar por encima y se va.
   ========================================================================== */

/* --- Rejilla de plano ------------------------------------------------------ */
.malla {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(229, 226, 225, .042) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 226, 225, .042) 1px, transparent 1px);
  background-size: 68px 68px;
  /* Presente en toda la página, uniforme. Solo se apaga en los bordes, para que
     no se lea como una hoja cuadriculada pegada. */
  -webkit-mask-image: radial-gradient(ellipse 96% 88% at 50% 42%, #000 42%, rgba(0,0,0,.55) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 96% 88% at 50% 42%, #000 42%, rgba(0,0,0,.55) 78%, transparent 100%);
}

/* El contenido va por encima de la rejilla de fondo.
   Lista explícita a propósito: la versión comodín (`body > *`) pisaba el
   position de todo lo que ya lo tenía puesto — dejó el menú en `relative`
   en vez de `sticky` y al enlace de saltar le quitó el `absolute`, con lo
   que ocupaba 46px de hueco arriba. */
.hero, .curso, .catalogo, .ultimo, .embudo, .faq, .pie { position: relative; z-index: 1; }
#top { position: absolute; top: 0; }

/* --- Halo del hero --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 8%;
  width: 45rem; height: 45rem;
  max-width: 90vw;
  background: radial-gradient(circle, rgba(238, 186, 5, .07), transparent 62%);
  pointer-events: none;
}

/* --- Escáner del hero -------------------------------------------------------
   Una pasada lenta y con pausa larga. Si vuelve cada dos segundos deja de ser
   elegante y pasa a ser una discoteca. */
.escaner {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(238, 186, 5, .55) 50%, transparent);
  box-shadow: 0 0 12px rgba(238, 186, 5, .35);
  opacity: 0;
  animation: barrido-hero 9s cubic-bezier(.4, 0, .3, 1) infinite;
}
@keyframes barrido-hero {
  0%   { transform: translateY(0);      opacity: 0; }
  6%   {                                opacity: 1; }
  46%  { transform: translateY(38rem);  opacity: 0; }
  100% { transform: translateY(38rem);  opacity: 0; }
}

/* --- Monoespaciada para todo lo que es dato -------------------------------- */
.kicker,
.etiqueta,
.chip,
.contador__cifra,
.contador__meta,
.ficha__bloque h3,
.ficha__flujo,
.pronto__item,
.pie {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.contador__cifra { font-weight: 600; letter-spacing: -.02em; }
.etiqueta { font-weight: 500; letter-spacing: .08em; }
.chip { font-weight: 500; letter-spacing: .04em; }

/* --- Esquinas de HUD --------------------------------------------------------
   Cuatro marcas en las esquinas, no un marco. Se quedan en el contador, que es
   un panel de lectura y uno solo. En las fichas de vídeo se retiraron: con la
   rejilla llena, cada barrido del ratón encendía y apagaba esquinas por toda
   la pantalla. */
.contador::before {
  content: "";
  position: absolute;
  inset: .625rem;
  pointer-events: none;
  --c: rgba(238, 186, 5, .55);
  --l: 11px;
  background:
    linear-gradient(var(--c), var(--c)) 0    0    / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    0    / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0    / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0    / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0    100% / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat;
  opacity: 0;
  transition: opacity .25s ease;
}
.contador { position: relative; }
/* Sus esquinas están siempre, apagadas. */
.contador::before { --c: rgba(238, 186, 5, .3); opacity: 1; }

/* --- Barrido al pasar por encima de una tarjeta ----------------------------
   Solo queda en la tarjeta del último vídeo, que es una sola y grande. Se
   declara con ella, más abajo; aquí vive nada más el fotograma. */
@keyframes barrido-tarjeta {
  from { background-position: 0 -100%; }
  to   { background-position: 0  100%; }
}

/* Las líneas de escáner sobre la miniatura se retiraron: ensuciaban justo lo
   que hay que mirar en esta página, que es la miniatura del vídeo. */

/* --- Brillo que recorre la barra de progreso ------------------------------- */
.barra { position: relative; overflow: hidden; }
.barra::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(229, 226, 225, .35), transparent);
  transform: translateX(-100%);
  animation: destello 4.5s ease-in-out infinite;
}
@keyframes destello {
  0%, 55% { transform: translateX(-100%); }
  85%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

/* --- Remates --------------------------------------------------------------- */
/* El panel de "todavía no están subidos" se lee como una consola. */
.pronto { position: relative; }
.pronto__titulo { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; font-size: .8125rem; }
.pronto__titulo::before { content: "// "; color: var(--primary); }

.faq__p { font-family: var(--texto); }
.faq__item { position: relative; }

.ficha__flujo { font-size: .875rem; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
  .escaner, .barra::after { display: none; }
  .ultimo__tarjeta:hover::after { animation: none; opacity: 0; }
}

/* --- Último vídeo publicado ------------------------------------------------ */
.ultimo {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1.5rem clamp(3rem, 7vw, 5rem);
}
.ultimo__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-decoration: none;
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  transition: background .18s ease;
}
@media (min-width: 48rem) {
  .ultimo__tarjeta { flex-direction: row; align-items: center; gap: 2rem; padding: 1.5rem; }
}
.ultimo__tarjeta:hover { background: var(--surface-low); }

.ultimo__mini { display: block; flex: none; }
@media (min-width: 48rem) {
  .ultimo__mini .miniatura { width: clamp(16rem, 32vw, 24rem); }
}

.ultimo__texto { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; min-width: 0; }
.ultimo__nombre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  letter-spacing: -.02em; line-height: 1.2;
}
/* La frase de las visitas es un dato: monoespaciada, como el resto de medidas. */
.ultimo__dato {
  font-family: var(--mono);
  font-size: .8125rem; letter-spacing: .02em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.ultimo__cta { margin-top: .5rem; }

/* Esquinas de HUD y barrido, igual que en las carpetas. */
.ultimo__tarjeta::before, .ultimo__tarjeta::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.ultimo__tarjeta::after {
  background: linear-gradient(180deg, transparent, rgba(238, 186, 5, .09) 50%, transparent);
  background-size: 100% 200%; background-position: 0 -100%; opacity: 0;
}
.ultimo__tarjeta:hover::after { opacity: 1; animation: barrido-tarjeta 1.1s ease-out; }
.ultimo__tarjeta:hover .miniatura img { transform: scale(1.045); }

/* --- Menú -------------------------------------------------------------------
   Flotante y de cristal: surface_variant al 60% con desenfoque, como manda el
   sistema para lo que se queda por encima del contenido.
   ---------------------------------------------------------------------------- */
.menu {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(28, 27, 27, .72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.menu__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.menu__marca {
  font-family: var(--display);
  font-weight: 700; font-size: 1rem;
  letter-spacing: -.02em;
  text-decoration: none;
  flex: none;
}
/* El logotipo del menú es la versión de trazo engrosado: el original, a 30px de
   alto, deja las líneas por debajo de un píxel y se lee gris. */
.menu__marca img { display: block; height: 30px; width: auto; }
@media (max-width: 48rem) { .menu__marca img { height: 24px; } }
/* 44px de alto para el dedo sin mover nada: el relleno agranda la zona de toque y
   el margen negativo lo compensa. */
.menu__marca { padding-block: .625rem; margin-block: -.625rem; }

/* En móvil el menú se desliza en horizontal en vez de partirse en dos filas. */
.menu__enlaces {
  display: flex;
  align-items: center;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: auto;
  padding: .125rem;
}
.menu__enlaces::-webkit-scrollbar { display: none; }

.menu__enlace {
  flex: none;
  font-family: var(--mono);
  font-size: .75rem; letter-spacing: .04em;
  color: var(--on-muted);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.menu__enlace:hover { color: var(--on-background); background: var(--surface-high); }
.menu__enlace[aria-current] { color: var(--primary); background: var(--surface-lowest); }

/* El curso es el botón fuerte: el único elemento del menú con relleno de marca. */
.menu__enlace--destacado {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: var(--r-xl);
  margin-right: .5rem;
}
.menu__enlace--destacado:hover { background: linear-gradient(135deg, var(--primary), var(--primary-container)); color: var(--on-primary); filter: brightness(1.08); }
.menu__enlace--destacado[aria-current] { background: linear-gradient(135deg, var(--primary), var(--primary-container)); color: var(--on-primary); }

/* Que el menú pegajoso no tape el título al saltar a una sección. */
.curso, .seccion, .ultimo, #catalogo { scroll-margin-top: 4.5rem; }

/* --- Curso gratis ------------------------------------------------------------
   Se trata como el producto caro que sería si se vendiera: escenario propio,
   índice a la izquierda y la lección en grande a la derecha. La forma del
   reproductor comunica el valor antes de que se lea una palabra.
   ------------------------------------------------------------------------------ */
.curso { max-width: var(--ancho); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) 1.5rem clamp(3rem, 7vw, 5rem); }

.curso__escenario {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem);
}
/* Sin halo: el que había caía justo detrás del titular y se tragaba su lavado
   de ámbar. Además era el último resto del diseño por escenas de colores. */

.curso__cabecera { position: relative; margin-bottom: clamp(2rem, 4vw, 2.75rem); max-width: 46rem; }
.curso h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
.curso .lead { max-width: 46ch; margin-top: 1rem; }

.curso__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-muted);
}
.curso__meta span { display: inline-flex; align-items: center; gap: 1.25rem; }
.curso__meta span + span::before {
  content: ""; width: .25rem; height: .25rem; border-radius: var(--r-full);
  background: var(--primary); flex: none;
}

/* --- Índice a la izquierda, visor a la derecha -------------------------------- */
.curso__cuerpo { position: relative; display: grid; gap: 1.5rem; }
@media (min-width: 60rem) {
  .curso__cuerpo { grid-template-columns: 20rem 1fr; gap: 2rem; align-items: start; }
}

.curso__indice {
  background: var(--surface-lowest);
  border-radius: var(--r-md);
  padding: 1.25rem 1rem;
  order: 2;              /* en móvil, debajo del vídeo */
}
@media (min-width: 60rem) {
  .curso__indice { order: 0; max-height: 34rem; display: flex; flex-direction: column; }
}
.curso__indice-titulo {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-muted);
  margin: 0 0 1rem; padding: 0 .5rem;
}
.curso__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .25rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-bright) transparent;
}
.curso__lista::-webkit-scrollbar { width: 4px; }
.curso__lista::-webkit-scrollbar-thumb { background: var(--surface-bright); border-radius: var(--r-full); }

.capitulo {
  width: 100%;
  display: flex; align-items: center; gap: .875rem;
  text-align: left;
  background: transparent; border: 0;
  border-radius: var(--r-sm);
  padding: .75rem .625rem;
  color: inherit; font-family: var(--texto);
  cursor: pointer;
  transition: background .16s ease;
}
.capitulo:hover { background: var(--surface-low); }
.capitulo[aria-current="true"] { background: var(--surface-high); }

.capitulo__n {
  font-family: var(--mono);
  font-size: .8125rem; font-weight: 600;
  color: var(--surface-bright);
  font-variant-numeric: tabular-nums; flex: none;
}
.capitulo--lista .capitulo__n,
.capitulo[aria-current="true"] .capitulo__n { color: var(--primary); }

.capitulo__texto { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.capitulo__titulo { font-size: .875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capitulo:not(.capitulo--lista) .capitulo__titulo { color: var(--on-muted); font-weight: 500; }
.capitulo__estado {
  font-family: var(--mono);
  font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-muted);
}

/* --- El visor ------------------------------------------------------------------ */
.curso__visor { min-width: 0; }

.visor__lienzo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-lowest);
  margin-bottom: 1.5rem;
}
.visor__lienzo .miniatura { width: 100%; height: 100%; border-radius: 0; }

.visor__fantasma {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(238, 186, 5, .10), transparent 62%),
    linear-gradient(to right,  rgba(229, 226, 225, .04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(229, 226, 225, .04) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--surface);
}
.visor__marca {
  font-family: var(--mono);
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 600; line-height: 1;
  color: var(--surface-bright);
  font-variant-numeric: tabular-nums;
}
.visor__insignia {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .4375rem .875rem;
  border-radius: var(--r-full);
  background: rgba(14, 14, 14, .78);
  backdrop-filter: blur(8px);
  color: var(--on-muted);
}

.visor__pie { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.visor__meta {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary); margin: 0;
}
.visor__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: -.02em; line-height: 1.2; margin: 0;
}
.visor__resumen { color: var(--on-background); margin: 0; max-width: 56ch; }
.visor__pie .btn { margin-top: .625rem; }

/* --- Secciones del catálogo --------------------------------------------------
   El bloque de la maqueta anterior (secciones apiladas en columna) se retiró:
   venía después en el archivo y le pisaba la rejilla a `.seccion`. Lo único que
   sobrevive es el tamaño del titular, que ahora baja de rango. */
.seccion__titulo { font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.625rem); }

@media (max-width: 48rem) {
  .hero__fondo img { width: 190%; opacity: .55; filter: blur(5px) brightness(.85); }
  .hero::after {
    background: linear-gradient(180deg, rgba(19,19,19,.72), rgba(19,19,19,.82) 55%, var(--surface) 100%);
  }
}

/* --- Cabecera de zona ---------------------------------------------------------
   Las tres zonas de la página —curso, recursos y último vídeo— se presentan
   igual: kicker, titular grande y una línea. Sin esto, "recursos" era solo un
   montón de tarjetas sin principio.
   -------------------------------------------------------------------------------- */
.zona { margin: 0 0 clamp(2rem, 5vw, 3rem); max-width: 44rem; }
.zona h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -.02em; line-height: 1.05;
  margin: 0;
}
.zona .lead { margin-top: 1rem; max-width: 46ch; }

/* La zona del último vídeo vuelve al color de la página: cierra el bloque de
   recursos y devuelve el contraste. */
.ultimo { padding-top: clamp(3.5rem, 8vw, 5.5rem); }
.ultimo__tarjeta { background: var(--surface-lowest); }
.ultimo__tarjeta:hover { background: var(--surface-low); }

/* Dentro de la banda clara, los titulares de grupo bajan de rango: la zona ya
   dijo que esto son recursos. */
.seccion__titulo { font-size: clamp(1.25rem, 2.6vw, 1.625rem); }

/* --- Resaltado de los titulares -----------------------------------------------
   Nada de bloque de color con bordes duros. Un lavado de ámbar que se desvanece
   hacia la derecha, y debajo una regla que también se apaga. Sin ningún borde
   que cierre la forma: el degradado es el que la define.
   Fuera de la FAQ a propósito — ahí no empieza una zona, solo un apartado.
   -------------------------------------------------------------------------------- */
.curso h2,
.zona h2,
.embudo h2 {
  position: relative;
  display: inline-block;
  padding: .1em .6em .16em .3em;
  line-height: 1.2;
  margin: 0;
}
/* El lavado va en un pseudo-elemento para poder enmascararlo por arriba. Como
   fondo del propio h2 dejaba un canto recto arriba que delataba la caja. */
.curso h2::before,
.zona h2::before,
.embudo h2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(96deg,
    rgba(238, 186, 5, .26) 0%,
    rgba(238, 186, 5, .10) 48%,
    transparent 100%);
  /* Extensión fija, no porcentual: con porcentaje el degradado se estira con la
     caja y un titular largo salía mucho más lavado que uno corto. */
  background-size: 27rem 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.4) 78%, transparent 100%);
          mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.4) 78%, transparent 100%);
}
.curso h2::after,
.zona h2::after,
.embudo h2::after {
  content: "";
  position: absolute;
  left: .3em; right: 0; bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--primary), rgba(238, 186, 5, .3) 42%, transparent 100%);
  background-size: 27rem 100%;
  background-repeat: no-repeat;
}

.curso .lead, .zona .lead { display: block; margin-top: 1.5rem; }
.embudo h2 + .embudo__desc { margin-top: 1.5rem; }

/* --- El directo de la mentoría ------------------------------------------------
   Ocupa la fila entera del embudo: cuando hay directo, es lo único que importa
   de esa sección.
   -------------------------------------------------------------------------------- */
.directo { grid-column: 1 / -1; margin-bottom: clamp(2rem, 4vw, 2.75rem); }

.directo__estado {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--mono);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}
.directo__estado::before {
  content: ""; width: .5rem; height: .5rem; border-radius: var(--r-full);
  background: var(--primary);
  animation: latido 1.6s ease-in-out infinite;
}

.directo__marco { display: grid; gap: 1rem; }
@media (min-width: 62rem) {
  /* El chat a la derecha, como en YouTube. Por debajo de ese ancho se apila. */
  .directo__marco--con-chat { grid-template-columns: 1fr 22rem; }
}

.directo__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-lowest);
}
.directo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.directo__chat {
  width: 100%;
  height: 26rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-lowest);
}
@media (min-width: 62rem) { .directo__chat { height: auto; min-height: 100%; } }

/* --- La repetición, cuando no hay directo ------------------------------------- */
.directo__repeticion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: 1rem;
  max-width: 34rem;
  transition: background .18s ease;
}
@media (min-width: 40rem) {
  .directo__repeticion { flex-direction: row; align-items: center; gap: 1.25rem; }
  .directo__repeticion .miniatura { width: 11rem; flex: none; }
}
.directo__repeticion:hover { background: var(--surface-low); }
.directo__repeticion:hover .miniatura img { transform: scale(1.045); }

.directo__texto { display: flex; flex-direction: column; gap: .25rem; }
.directo__kicker {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-muted);
}
.directo__titulo { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--primary); }

/* --- La miniatura convertida en reproductor ---------------------------------- */
.miniatura[data-reproduciendo] { background: #000; cursor: default; }
.miniatura[data-reproduciendo] iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Mientras se reproduce, fuera el acercamiento al pasar por encima: sobre un
   vídeo en marcha estorba. */
.carpeta__video:hover .miniatura[data-reproduciendo] img,
.tarjeta:hover .miniatura[data-reproduciendo] img { transform: none; }

/* El lienzo del curso es pulsable aunque no sea un enlace. */
.visor__lienzo[data-video] { cursor: pointer; }
.visor__lienzo[data-video]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Pantalla de acceso -------------------------------------------------------
   Misma paleta y mismo aire que el resto, pero centrada: aquí no hay nada que
   explorar, solo una decisión que tomar.
   -------------------------------------------------------------------------------- */
.acceso {
  display: grid; place-items: center;
  /* La columna nunca más ancha que la pantalla. Con la implícita (auto), lo que no
     encoge del formulario la estiraba a 320px y en un móvil de 320 salía scroll lateral. */
  grid-template-columns: minmax(0, 1fr);
  /* svh, no vh: en el móvil la barra del navegador se come parte de 100vh y la
     página nace ya con un recorte que no se ve hasta que scrolleas. */
  min-height: 100svh;
  padding: clamp(1.5rem, 5vw, 2rem) 1.25rem;
  padding-bottom: max(clamp(1.5rem, 5vw, 2rem), env(safe-area-inset-bottom));
}

/* --- La pantalla de acceso, como landing --------------------------------------
   A la izquierda lo que hay dentro; a la derecha el formulario. Antes era solo
   el formulario, y quien llegaba del grupo de WhatsApp veía una petición de email
   sin saber qué había detrás.

   En móvil se apila: primero qué hay dentro, luego el formulario y al final la
   letra pequeña. Ese orden importa — la mayoría del tráfico entra por un anuncio
   y no sabe todavía quién eres.
   ------------------------------------------------------------------------------ */
.acceso__lienzo {
  display: grid;
  gap: clamp(2rem, 6vw, 4.5rem);
  justify-items: center;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(1rem, 5vw, 3rem) 0;
}
@media (min-width: 62rem) {
  .acceso__lienzo {
    grid-template-columns: 1.1fr .9fr;
    justify-items: stretch;
    align-items: start;
    row-gap: 1.75rem;
  }
  /* La caja ocupa las dos filas de la derecha; la letra pequeña se queda debajo
     de la vitrina, en su columna. La caja va anclada arriba y pegajosa: con el
     premio, la vitrina mide más de 1100px y, centrada, la caja dejaba el botón
     en y≈765 — fuera del pliegue de un portátil de 800px. Arriba, el botón
     queda a ~560px, y al bajar por la vitrina el formulario acompaña. */
  .vitrina      { grid-area: 1 / 1; }
  .acceso__pie  { grid-area: 2 / 1; margin: 0; }
  .acceso__caja { grid-area: 1 / 2 / span 2 / 3; align-self: start; position: sticky; top: 1.5rem; }
}

.vitrina { min-width: 0; width: 100%; }

/* Quién lo dice, en una fila: la foto a tamaño de avatar, no de retrato. Ocupando
   5,5rem de alto ella sola se comía la primera pantalla del móvil. */
.vitrina__quien { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.vitrina__quien .kicker { margin: 0 0 .125rem; }
.vitrina__foto {
  width: 4.5rem; height: 4.5rem; flex: none;
  border-radius: var(--r-full);
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px rgba(238, 186, 5, .35), 0 0 40px rgba(238, 186, 5, .12);
}
/* Después de la regla base, no antes: con la misma especificidad manda el orden. */
@media (min-width: 62rem) { .vitrina__foto { width: 5rem; height: 5rem; } }
.vitrina__autor { margin: 0; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.vitrina__prueba {
  margin: .125rem 0 0;
  font-family: var(--mono);
  font-size: .6875rem; letter-spacing: .04em;
  color: var(--on-muted);
  font-variant-numeric: tabular-nums;
}

.vitrina__titulo {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.625rem, 4.2vw, 2.75rem);
  letter-spacing: -.02em; line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
/* La objeción del tráfico frío ("¿dónde está el truco?") se contesta pegada al
   titular, no al final de la página. */
.vitrina__lead {
  margin: 1rem 0 0;
  font-size: 1.0625rem; font-weight: 700;
  color: var(--on-background);
  max-width: 46ch;
}
.vitrina__gratis {
  display: inline-block;
  color: var(--primary);
  position: relative;
}
/* El mismo lavado que los titulares de la librería, para que la marca sea una. */
.vitrina__gratis::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(96deg, rgba(238,186,5,.28) 0%, rgba(238,186,5,.1) 50%, transparent 100%);
  background-size: 22rem 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.4) 78%, transparent 100%);
          mask-image: linear-gradient(to top, #000 22%, rgba(0,0,0,.4) 78%, transparent 100%);
}

/* --- El premio ----------------------------------------------------------------
   Dos veces Mejor Mentor de IA del Mundo, otorgado por Alex Hormozi y Sam Ovens.
   La foto grande es la de 2026 recortada a 2:1 —a 16:9 se comía 200px del móvil—
   y la de 2025 va pequeña, solapando la esquina y con un giro leve: la asimetría
   que pide DESIGN.md, y dos años demostrados con la altura de una sola foto.
   Ni un borde de 1px: la miniatura se separa con un anillo del color del fondo.
   ---------------------------------------------------------------------------- */
.premio { margin: 0 0 1.375rem; }
.premio__marco { position: relative; }
.premio__foto {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; object-fit: cover; object-position: center 30%;
  border-radius: var(--r-md);
  box-shadow: var(--glow);
}
/* La etiqueta del año: cristal oscuro sobre la foto, como manda el sistema para
   lo que flota (surface al 60 % con desenfoque), no un rectángulo negro. */
.premio__anyo {
  position: absolute; left: .625rem; bottom: .625rem;
  padding: .25rem .5rem;
  border-radius: var(--r-sm);
  background: rgba(19, 19, 19, .6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--on-background);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  line-height: 1;
}
/* La de 2025 es un elemento más de la fila del pie, al final, subido con un
   margen negativo para que solape el borde inferior derecho de la foto grande.
   En flujo, no absoluta: así nunca pisa el texto ni se sale de la página. */
.premio__antes {
  position: relative; flex: none;
  width: 6rem; aspect-ratio: 1;
  margin-top: -3.25rem;
  transform: rotate(-3deg);
}
@media (min-width: 62rem) { .premio__antes { width: 7rem; margin-top: -4rem; } }
.premio__antes img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 3px var(--surface), 0 12px 28px rgba(0, 0, 0, .45);
}
.premio__anyo--chico { left: .375rem; bottom: .375rem; padding: .1875rem .375rem; font-size: .5625rem; }

.premio__pie { display: flex; align-items: flex-start; gap: .875rem; margin: .75rem 0 0; }
.premio__firma { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding-top: .25rem; }
/* El "2×" es el mismo sello del media kit: la marca dice el premio igual en
   todas partes. */
.premio__sello {
  flex: none; display: grid; place-items: center;
  min-width: 2.25rem; height: 2.25rem; padding-inline: .5rem;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  font-family: var(--display); font-weight: 700; font-size: .9375rem;
}
.premio__texto { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.premio__texto b { font-family: var(--display); font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.premio__texto small { font-family: var(--mono); font-size: .6875rem; letter-spacing: .03em; color: var(--on-muted); line-height: 1.4; }
/* Los años saltan de línea como una unidad: en móvil la frase parte, y sin esto
   quedaba un "·" colgando al final de la primera línea. */
.premio__anyos { white-space: nowrap; }
@media (min-width: 62rem) { .premio { max-width: 32rem; } }

.vitrina__lista {
  list-style: none; margin: clamp(1.5rem, 4vw, 2rem) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(.75rem, 2.5vw, 1rem);
}
.vitrina__item { display: flex; align-items: baseline; gap: 1rem; }
.vitrina__cifra {
  font-family: var(--mono);
  font-size: 1.5rem; font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  min-width: 2.25rem;
}
.vitrina__texto { display: flex; flex-direction: column; gap: .125rem; }
.vitrina__texto b { font-size: .9375rem; font-weight: 700; }
.vitrina__texto small { font-size: .8125rem; color: var(--on-muted); }

/* La letra pequeña, debajo del formulario: se lee justo antes de pulsar, que es
   cuando importa. Arriba del todo no la mira nadie. */
.acceso__pie {
  color: var(--on-muted); font-size: .8125rem; line-height: 1.5;
  margin: 0; max-width: 44ch; text-align: center;
}
@media (min-width: 62rem) { .acceso__pie { text-align: left; max-width: 46ch; } }

.acceso__caja {
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  justify-self: center;
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: var(--glow);
}
.acceso__pestanas { display: flex; gap: .25rem; background: var(--surface); border-radius: var(--r-md); padding: .25rem; margin-bottom: 1.5rem; }
.acceso__pestana {
  flex: 1;
  background: transparent; border: 0;
  border-radius: var(--r-sm);
  /* 2,75rem = los 44px que pide un dedo. Con .625rem de padding se quedaba en 38
     y en móvil se fallaba de pestaña. */
  padding: .625rem; min-height: 2.75rem;
  color: var(--on-muted);
  font-family: var(--texto); font-size: .875rem; font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.acceso__pestana[aria-selected="true"] { background: var(--surface-high); color: var(--on-background); }

.acceso__form { display: flex; flex-direction: column; gap: 1.125rem; }

.campo { display: flex; flex-direction: column; gap: .4375rem; }
/* Los campos de contraseña no pueden ser un <label> envolvente: dentro llevan un
   botón, y un label no admite dos elementos enfocables. Ahí la etiqueta va suelta
   con su `for`, y se pinta igual. */
.campo > span, .campo__nombre {
  font-family: var(--mono);
  /* 12px: a 10 no se leía en el móvil, que es por donde entra casi todo el tráfico. */
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-muted);
}
.campo input {
  background: var(--surface);
  border: 0;
  /* Solo borde inferior, como manda el sistema para los campos. */
  box-shadow: inset 0 -1px 0 0 rgba(80, 68, 61, .5);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: .8125rem .875rem;
  color: var(--on-background);
  font-family: var(--texto); font-size: 1rem;
}
.campo input:focus { outline: 0; box-shadow: inset 0 -2px 0 0 var(--primary); }
.campo small { font-size: .75rem; color: var(--on-muted); }

/* --- Ver la contraseña --------------------------------------------------------
   Escribir a ciegas en el teclado de un móvil es la forma más rápida de crear una
   cuenta con una contraseña que no es la que se creía. Texto y no un icono de ojo:
   el ojo tachado no dice si está tapando o mostrando. */
.campo__caja { position: relative; display: grid; }
.campo--clave input { padding-right: 5rem; }
.campo__ojo {
  position: absolute; inset: 0 0 0 auto;
  width: 4.5rem;
  background: transparent; border: 0;
  color: var(--on-muted);
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  border-radius: 0 var(--r-sm) 0 0;
  transition: color .16s ease;
}
.campo__ojo:hover { color: var(--primary); }

.campo__codigo {
  font-family: var(--mono) !important;
  font-size: 1.5rem !important;
  letter-spacing: .4em;
  text-align: center;
}

.acceso__aviso {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: .875rem 1rem;
  margin: 0;
  font-size: .875rem;
  color: var(--on-background);
}
.acceso__error {
  margin: 1.25rem 0 0;
  font-size: .875rem;
  color: var(--primary);
}

/* --- La casilla de la política de privacidad ------------------------------------
   LA USA entrar.html (el registro). Se borró una vez por creerla huérfana al quitar
   la casilla del perfil, y el checkbox salió en crudo. Si se quita de aquí, hay
   que quitarla también del HTML.
   Sin marcar por defecto y en tono discreto: es una casilla, no un peaje. Va antes
   del botón para que se lea, no debajo donde nadie mira. */
.consenti {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .875rem;
  background: var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .8125rem; line-height: 1.45;
  color: var(--on-muted);
  transition: color .16s ease;
}
.consenti:hover { color: var(--on-background); }
.consenti__casilla {
  appearance: none;
  width: 1.375rem; height: 1.375rem; flex: none;
  margin: .0625rem 0 0;
  border-radius: var(--r-sm);
  background: var(--surface-high);
  box-shadow: inset 0 0 0 1px rgba(238, 186, 5, .3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.consenti__casilla:checked {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  box-shadow: none;
}
.consenti__casilla:checked::after {
  content: "✓"; color: var(--on-primary); font-size: .875rem; font-weight: 700; line-height: 1;
}
.consenti__casilla:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Las dos salidas del paso del código, en una fila para que no alarguen la caja. */
.acceso__salidas { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
.acceso__nota {
  margin: 0; text-align: center;
  font-size: .8125rem; color: var(--on-muted);
}
.acceso__nota--google { margin-top: .625rem; font-size: .75rem; }

/* Salir: al final del menú y en tono discreto — es una salida, no una llamada. */
.menu__salir {
  flex: none;
  margin-left: .5rem;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(80, 68, 61, .3);
  border-radius: var(--r-md);
  padding: .5rem .875rem;
  color: var(--on-muted);
  font-family: var(--mono);
  font-size: .75rem; letter-spacing: .04em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.menu__salir:hover { background: var(--surface-high); color: var(--on-background); }

/* --- Entrar con Google -------------------------------------------------------- */
.btn--google {
  width: 100%;
  justify-content: center;
  background: var(--on-background);
  color: #1f1f1f;
  font-weight: 700;
}
.btn--google:hover { background: #fff; transform: none; }

/* Separador con el texto encima de la línea, sin usar un borde de 1px suelto. */
.acceso__separador {
  display: flex; align-items: center; gap: .875rem;
  margin: 1.5rem 0;
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-muted);
}
.acceso__separador::before, .acceso__separador::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80, 68, 61, .5), transparent);
}

.acceso__enlace {
  background: transparent; border: 0;
  color: var(--on-muted);
  font-family: var(--texto); font-size: .8125rem;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  /* .25rem dejaba un blanco de toque de 20px de alto. Con un dedo se falla. */
  padding: .5rem .375rem;
  align-self: center;
}
.acceso__enlace:hover { color: var(--primary); }
.acceso__enlace:disabled { opacity: .5; cursor: default; text-decoration: none; }
/* Dentro de una frase el enlace no se separa del texto que lo acompaña. */
.acceso__nota .acceso__enlace { padding: .25rem 0; align-self: auto; }

/* ==========================================================================
   PANEL DE MENTORÍAS Y PERFIL
   ========================================================================== */

.panel {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(4rem, 8vw, 6rem);
  position: relative;
  z-index: 1;
}

/* --- Progreso ---------------------------------------------------------------- */
.progreso {
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.progreso__cifras { display: flex; gap: 2.5rem; margin-bottom: 1.25rem; }
.progreso__dato { display: flex; flex-direction: column; gap: .125rem; }
.progreso__dato b {
  font-family: var(--mono); font-size: 2rem; font-weight: 600;
  color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums;
}
.progreso__dato span {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-muted);
}

/* --- El regalo ---------------------------------------------------------------- */
.regalo {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  background: linear-gradient(to bottom, rgba(238, 186, 5, .07), transparent 60%);
  border-radius: var(--r-md);
  padding: 1.25rem;
}
.regalo__kicker {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 .5rem;
}
.regalo__titulo { font-family: var(--display); font-weight: 700; font-size: 1.125rem; margin: 0; }
.regalo__titulo--bloqueado { color: var(--on-muted); }
.regalo__titulo--bloqueado::before { content: "🔒 "; }
.regalo__desc { color: var(--on-background); font-size: .9375rem; margin: .5rem 0 1rem; }

/* --- Una mentoría ------------------------------------------------------------- */
.mentoria {
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 1.25rem;
}
.mentoria--cerrada { background: transparent; box-shadow: inset 0 0 0 1px rgba(80, 68, 61, .22); }

.mentoria__meta {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 .5rem;
}
.mentoria--cerrada .mentoria__meta { color: var(--on-muted); }
.mentoria__titulo { font-family: var(--display); font-size: 1.375rem; margin: 0; }
.mentoria__resumen { color: var(--on-background); font-size: .9375rem; margin: .5rem 0 0; max-width: 60ch; }
.mentoria__cuerpo { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.75rem; }

.bloque__titulo {
  font-family: var(--mono);
  font-size: .75rem; letter-spacing: .02em;
  color: var(--on-muted);
  margin: 0 0 .875rem;
}

/* --- El candado --------------------------------------------------------------- */
.candado { margin-top: 1.5rem; }
.candado__texto { color: var(--on-background); font-size: .9375rem; margin: 0 0 1rem; }
.candado__icono { margin-right: .375rem; }
.candado__form { display: flex; flex-wrap: wrap; gap: .625rem; }
.candado__form input {
  flex: 1; min-width: 10rem;
  background: var(--surface-low); border: 0;
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  color: var(--on-background);
  font-family: var(--mono); font-size: 1rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.candado__form input:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.candado__error { color: #ff9a8a; font-size: .875rem; margin: .75rem 0 0; }

/* --- Tareas -------------------------------------------------------------------- */
.tareas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
/* El material va más junto que las tareas: son enlaces de una lista, no fichas
   con casilla y botón. */
.material { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; }

.tarea {
  display: flex; align-items: center; gap: 1.125rem;
  background: var(--surface-low);
  border-radius: var(--r-md);
  padding: 1.25rem 1.25rem;
  transition: background .18s ease;
}
@media (max-width: 34rem) { .tarea { flex-wrap: wrap; } }
.tarea:hover { background: var(--surface-high); }
.tarea--hecha { opacity: .55; }
.tarea--hecha .tarea__titulo { text-decoration: line-through; }

.tarea__casilla {
  appearance: none;
  width: 1.625rem; height: 1.625rem; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-high);
  box-shadow: inset 0 0 0 1px rgba(238, 186, 5, .3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.tarea__casilla:checked {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  box-shadow: none;
}
.tarea__casilla:checked::after {
  content: "✓"; color: var(--on-primary); font-size: 1rem; font-weight: 700; line-height: 1;
}
.tarea__casilla:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tarea__casilla:disabled { opacity: .5; cursor: wait; }

.tarea__texto { flex: 1; display: flex; flex-direction: column; gap: .1875rem; cursor: pointer; min-width: 0; }
.tarea__titulo { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.tarea__detalle { font-size: .875rem; color: var(--on-muted); }

/* El botón es la acción principal de la fila: hacer la tarea. Antes era un
   "IR" diminuto en gris que no se leía como algo que pulsar. */
.tarea__hacer {
  flex: none;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--texto);
  font-size: .9375rem; font-weight: 700;
  text-decoration: none;
  padding: .75rem 1.25rem;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  transition: transform .15s ease, filter .2s ease;
}
.tarea__hacer:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* Ya hecha: el botón se apaga y deja de competir por la atención. */
.tarea--hecha .tarea__hacer {
  background: transparent;
  color: var(--on-muted);
  box-shadow: inset 0 0 0 1px rgba(80, 68, 61, .35);
}
.tarea--hecha .tarea__hacer:hover { transform: none; color: var(--on-background); }

/* --- Material ------------------------------------------------------------------
   Mismo trato que las filas del panel de una carpeta: sin caja de fondo y con
   el ámbar reservado para el enlace bajo el ratón. */
.material__item {
  border-radius: var(--r-md);
  padding: .75rem .875rem;
  margin: 0 -.875rem;
  font-size: .9375rem;
  transition: background .16s ease;
}
.material__item:hover { background: var(--surface-low); }
.material__item a { color: var(--on-background); text-decoration: none; font-weight: 600; }
.material__item a:hover { color: var(--primary); }
.material__item small { display: block; color: var(--on-muted); font-size: .8125rem; margin-top: .25rem; }

.panel__vacio { color: var(--on-muted); background: var(--surface-lowest); border-radius: var(--r-xl); padding: 2rem; }

/* --- Perfil --------------------------------------------------------------------- */
.ficha-perfil {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 2.5rem);
}
.ficha-perfil__avatar {
  width: 4rem; height: 4rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  font-family: var(--display); font-weight: 700; font-size: 1.75rem;
}
.ficha-perfil__nombre { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.ficha-perfil__email { color: var(--on-background); font-size: .9375rem; margin: .1875rem 0 0; }
.ficha-perfil__meta {
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-muted); margin: .5rem 0 0;
}

.perfil__formularios { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.tarjeta-form {
  background: var(--surface-lowest);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 1.75rem);
  display: flex; flex-direction: column; gap: 1rem;
  align-items: flex-start;
}
.tarjeta-form h3 { font-family: var(--display); font-size: 1.0625rem; margin: 0; }
.tarjeta-form .campo { width: 100%; }
.tarjeta-form__aviso { font-size: .8125rem; color: var(--primary); margin: 0; }
.tarjeta-form__aviso--mal { color: #ff9a8a; }

/* Salir es un botón, no un enlace: sin esto el navegador le pone su propio
   fondo gris y desentona con el resto del menú. */
button.menu__enlace {
  background: transparent;
  border: 0;
  font-family: var(--mono);
  cursor: pointer;
}
button.menu__enlace:hover { background: var(--surface-high); }

/* --- Cuenta atrás de salida del curso ----------------------------------------- */
.salida { margin-top: 1.75rem; }
.salida__texto {
  font-family: var(--mono);
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 .875rem;
}
.salida .reloj { margin: 0; }

/* --- Panel de una carpeta ------------------------------------------------------
   Abrir una carpeta ya no ensancha su ficha ni recoloca las demás: se abre este
   panel y en la página no se mueve nada.
   -------------------------------------------------------------------------------- */
.panel-carpeta { display: flex; flex-direction: column; gap: .125rem; margin-top: 1.5rem; }
.panel-carpeta__meta { color: var(--on-muted); font-size: .8125rem; margin: .5rem 0 0; }
.panel-carpeta__pronto { color: var(--on-background); font-size: .9375rem; margin: 1.5rem 0 0; }

/* Cada recurso es una fila de una lista, no una caja suelta: el fondo aparece
   solo bajo el ratón. Con ocho archivos, ocho rectángulos rellenos convertían
   el panel en un muro. */
.fila-recurso {
  display: flex; align-items: center; gap: 1rem;
  text-align: left;
  background: transparent;
  border: 0; border-radius: var(--r-md);
  padding: .8125rem .875rem;
  margin: 0 -.875rem;
  color: var(--on-background);
  font-family: var(--texto);
  cursor: pointer;
  transition: background .16s ease;
}
.fila-recurso:hover { background: var(--surface-lowest); }
.fila-recurso__texto { flex: 1; display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.fila-recurso__titulo { font-weight: 700; font-size: .9375rem; }
.fila-recurso__meta {
  font-size: .8125rem;
  color: var(--on-muted);
  font-variant-numeric: tabular-nums;
}
.fila-recurso__ir {
  flex: none; color: var(--on-muted);
  font-size: 1.25rem; line-height: 1;
  transition: color .16s ease, transform .16s ease;
}
.fila-recurso:hover .fila-recurso__ir { color: var(--primary); transform: translateX(2px); }

.ficha__volver {
  background: transparent; border: 0;
  color: var(--on-muted);
  font-family: var(--mono);
  font-size: .8125rem; letter-spacing: .02em;
  cursor: pointer;
  padding: 0 0 .875rem;
  display: block;
}
.ficha__volver:hover { color: var(--primary); }

/* ==========================================================================
   CAPA DE MOVIMIENTO (nov-2026)
   Entradas al hacer scroll, halos que respiran y respuesta al pasar por
   encima. Solo transform, opacity y sombras: no recoloca nada. Como la capa
   tech, se puede borrar entera. Con «reducir movimiento» se apaga (regla
   global de arriba y app.js no esconde nada).
   ========================================================================== */

/* --- Entrada del hero, al cargar ------------------------------------------- */
@keyframes subir { from { opacity: 0; transform: translateY(1.25rem); } }
.hero__cuerpo > *, .hero .contador { animation: subir .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero__cuerpo > :nth-child(2) { animation-delay: .08s; }
.hero__cuerpo > :nth-child(3) { animation-delay: .16s; }
.hero__cuerpo > :nth-child(4) { animation-delay: .24s; }
.hero .contador { animation-delay: .32s; }

/* --- Halos ------------------------------------------------------------------
   El ámbar del hero deriva despacio, y por detrás de toda la página flota un
   segundo halo melocotón. Lentos a propósito: se notan, no se miran. */
.hero::before { animation: halo 16s ease-in-out infinite alternate; }
@keyframes halo { to { transform: translate(22%, 14%) scale(1.18); } }

.malla::after {
  content: "";
  position: absolute;
  top: 35%; left: -15vmax;
  width: 60vmax; height: 60vmax;
  background: radial-gradient(circle, rgba(212, 162, 127, .08), transparent 64%);
  animation: deriva 30s ease-in-out infinite alternate;
}
@keyframes deriva { to { transform: translate(75vw, -28vh) scale(1.2); } }

/* --- Entrada al hacer scroll ----------------------------------------------- */
.con-revelado .revela {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.con-revelado .revela.visible { opacity: 1; transform: none; }

/* El subrayado de los titulares se dibuja cuando el titular entra. */
.con-revelado .revela h2::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s .25s cubic-bezier(.2, .8, .2, 1);
}
.con-revelado .revela.visible h2::after { transform: scaleX(1); }

/* --- Fichas al pasar por encima --------------------------------------------
   Sube la miniatura, no la ficha: la ficha ya mueve su transform al entrar y
   las dos cosas se pisaban. */
.carpeta .miniatura { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
@media (hover: hover) {
  .carpeta:hover .miniatura {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -16px rgba(238, 186, 5, .35), 0 0 0 1px rgba(238, 186, 5, .4);
  }
}

/* Destello en el botón de recursos: una pasada de luz al apuntarlo. */
.entregable { position: relative; overflow: hidden; isolation: isolate; }
.entregable::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-120%);
}
.entregable:hover::after { transform: translateX(120%); transition: transform .7s ease; }

/* --- Sello «Nuevo» --------------------------------------------------------- */
.carpeta__nuevo {
  position: absolute; top: .625rem; left: .625rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .3125rem .625rem;
  border-radius: var(--r-full);
  background: rgba(14, 14, 14, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--primary);
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none;
}
.carpeta__nuevo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulso 1.8s ease-out infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(238, 186, 5, .65); }
  70%  { box-shadow: 0 0 0 7px rgba(238, 186, 5, 0); }
  100% { box-shadow: 0 0 0 0 rgba(238, 186, 5, 0); }
}

/* --- Quién es Juanpe (nov-2026) --------------------------------------------
   Foto del premio y bio corta entre el catálogo y el último vídeo. Una columna
   en móvil (foto arriba); dos desde 62rem.
   ---------------------------------------------------------------------------- */
.autor {
  position: relative; z-index: 1;   /* por encima de la rejilla, como las demás */
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
}
/* Alineadas arriba: centradas, la columna alta empujaba el titular por encima
   de las fotos. */
.autor__cabecera { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.autor__interior { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .autor__interior { grid-template-columns: 1.05fr 1fr; } }

/* Los tres premios: el de 2026 grande y los otros dos debajo, a pares. Todas a
   3:2 y recortadas por el centro: las fotos originales no miden lo mismo. */
.autor__premios {
  margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem;
}
.autor__premio {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-high);
}
.autor__premio--grande {
  grid-column: 1 / -1;
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px -24px rgba(238, 186, 5, .3);
}
.autor__premio img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) { .autor__premio:hover img { transform: scale(1.04); } }

.autor__sello {
  position: absolute; top: .75rem; left: .75rem;
  padding: .375rem .75rem;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  font-family: var(--display); font-weight: 700; font-size: 1.125rem; line-height: 1;
  box-shadow: 0 6px 20px -6px rgba(238, 186, 5, .6);
}
.autor__premios figcaption {
  grid-column: 1 / -1;
  margin-top: .25rem;
  color: var(--on-muted);
  font-family: var(--mono); font-size: .75rem; line-height: 1.5;
}

.autor__texto > p { margin: 0 0 1rem; max-width: 52ch; }
.autor__texto > p.lead { margin-top: 0; color: var(--on-background); }

/* La historia: cuatro hitos unidos por una línea, del ámbar al apagado. */
.autor__historia {
  list-style: none; padding: 0;
  margin: 1.5rem 0 1.75rem;
  position: relative;
}
/* Un tramo de raya por hito, de su punto al siguiente: una sola raya para toda
   la lista se pasaba del último punto cuando su texto ocupaba dos líneas. */
.autor__historia li:not(:last-child)::after {
  content: "";
  position: absolute; left: 5px; top: 1.0625rem; bottom: -.3125rem;
  width: 1.5px;
  background: rgba(238, 186, 5, .45);
}
.autor__historia li {
  position: relative;
  display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem;
  padding: 0 0 1rem 1.5rem;
}
.autor__historia li:last-child { padding-bottom: 0; }
.autor__historia li::before {
  content: "";
  position: absolute; left: 0; top: .3125rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--primary);
}
.autor__historia li:last-child::before { background: var(--primary); box-shadow: 0 0 0 4px rgba(238, 186, 5, .18); }
.autor__historia b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--primary);
}
.autor__historia span { color: var(--on-background); line-height: 1.45; }

.autor__datos {
  list-style: none; padding: 0;
  margin: 1.75rem 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem;
}
.autor__datos li {
  display: flex; flex-direction: column; gap: .3125rem;
  padding: 1rem .875rem;
  background: var(--surface-low);
  border-radius: var(--r-md);
}
.autor__datos b {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.125rem, 3.2vw, 1.625rem); font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.autor__datos span { color: var(--on-muted); font-size: .8125rem; line-height: 1.35; }

.autor__subtitulo {
  margin: 0 0 .75rem;
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-muted);
}
/* Las seis divisiones: nombre y una línea. Dos columnas cuando hay sitio. */
.autor__divisiones {
  list-style: none; padding: 0;
  margin: 0 0 1.75rem;
  display: grid; gap: .5rem;
}
@media (min-width: 36rem) { .autor__divisiones { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .autor__divisiones { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; } }
.autor__grupo { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.autor__divisiones li {
  display: flex; flex-direction: column; gap: .1875rem;
  padding: .75rem .875rem;
  border-radius: var(--r-md);
  background: var(--surface-lowest);
}
.autor__divisiones b { font-family: var(--display); font-size: .9375rem; }
.autor__divisiones span { color: var(--on-muted); font-size: .8125rem; line-height: 1.4; }

.autor__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- La cara del canal en el hero (nov-2026) --------------------------------
   Su foto de perfil de YouTube, grande y en círculo, con nombre y canal al lado,
   como la cabecera de su canal: es lo que hace que le reconozcan a la primera.
   El anillo ámbar es el único adorno; la foto no lleva filtros.
   ---------------------------------------------------------------------------- */
.hero__autor {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-bottom: 1.75rem;
  text-decoration: none; color: inherit;
}
.hero__foto {
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  box-shadow: 0 10px 40px -10px rgba(238, 186, 5, .55);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.hero__foto img {
  display: block;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  object-fit: cover;
}
@media (min-width: 48rem) { .hero__foto img { width: 120px; height: 120px; } }
@media (hover: hover) { .hero__autor:hover .hero__foto { transform: scale(1.04); } }

.hero__identidad { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hero__nombre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.625rem); letter-spacing: -.01em; line-height: 1.15;
}
.hero__canal { color: var(--on-muted); font-size: .875rem; }
.hero__autor:hover .hero__nombre { color: var(--primary); }

/* --- Móviles muy estrechos (≤ 360px: iPhone SE 1.ª gen., Android pequeños) ---
   Los márgenes de la pantalla de acceso, un poco más justos: el formulario
   necesita cada píxel para que los campos no se queden en nada. */
@media (max-width: 22.5rem) {
  .acceso { padding-inline: .75rem; }
  .acceso__caja { padding-inline: 1rem; }
}
/* El menú, por debajo de 375px, no cabía: «Quién soy» salía cortado. Logotipo un poco
   más pequeño y márgenes más justos; sigue siendo el logotipo, no el isotipo. */
@media (max-width: 23.4rem) {
  .menu__interior { padding-inline: 1rem; gap: .75rem; }
  .menu__marca img { height: 20px; }
  .menu__enlace { padding-inline: .5rem; }
}