:root {
  --fondo: #0e0f12;
  --texto: #f5f5f7;
  --subtexto: #c7c9d6;
  --tarjeta: rgba(23, 24, 30, 0.86);
  --tarjeta-borde: #2f3037;
  --acento: #7c3aed;
  --acento-2: #fd9754;
  --youtube: #ff0000;
  --twitch: #9146ff;
  --x: #ffffff;
  --instagram: #e1306c;
  --discord: #5865f2;
  --fondo-boton: var(--tarjeta);
}

* {
  box-sizing: border-box;
}

body.pagina {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  position: relative;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 16px;
}

/* R2 (007, = R-44): el banner deja de ser fondo del body (que lo estiraba a */
/* toda la página) y pasa a ser una franja superior con alto propio, que      */
/* llega hasta un poco por debajo de los botones de redes y se funde con el   */
/* fondo en su borde inferior. Las tarjetas de "Último vídeo"/"Último         */
/* directo" quedan así por delante de ese final, que es el efecto de la       */
/* referencia. El alto va en clamp() para escalar en 2K/4K (R-51).            */
/* R2 (009, = R-44): la franja baja a ~350px a 1080p (antes ocupaba casi media */
/* pantalla) y el degradado deja de cubrir TODA la imagen — el primer color   */
/* del degradado es transparente (alfa 0): la imagen se ve con su color      */
/* intenso desde arriba, y solo se funde con el fondo en su borde inferior.  */
/* El contraste de avatar/nombre/botones se consigue con recursos LOCALES    */
/* (text-shadow, box-shadow, fondo propio de cada botón), no con este velo.  */
/* R4/R-44 (011): fuera del envoltorio (.panel) y de los márgenes de */
/* body.pagina — 100vw real, sin ningún margen lateral, con el clásico */
/* truco de "full-bleed" (50%/-50vw) para escapar del padding del ancestro. */
/* El alto va en vh (no vw): ahora es del reparto 25/40/25 (R1/R-54, ver */
/* .panel más abajo), y esta franja debe llegar un poco más allá del final */
/* de .zona-identidad para la sensación de integración con Embeds (R4). */
.fondo-superior {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: clamp(200px, 32vh, 460px);
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10, 8, 20, 0) 0%, rgba(10, 8, 20, 0) 72%, var(--fondo) 100%),
    url('fondo.web.webp') center top / cover no-repeat;
  pointer-events: none;
}

/* --- Panel general (estilo panel de streamer) -------------------------- */

.panel {
  position: relative;
  z-index: 1;
  width: 100%;
  /* R9 (007, = R-51): el ancho crece con la pantalla en vez de quedarse   */
  /* clavado en 1100px, que en 2K/4K dejaba el diseño pequeño en el centro. */
  max-width: clamp(1100px, 82vw, 1800px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 24px 0 48px;
}

/* --- Cabecera móvil: menú hamburguesa decorativo (R-18/R-19) ----------- */

.cabecera-movil {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.cabecera-movil__marca {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.menu-hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 10px;
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 10px;
  cursor: default;
}

.menu-hamburguesa span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--texto);
  border-radius: 2px;
}

/* --- Identidad: avatar circular recortado de la propia imagen de banner  */
/* (S-1: sin pedir una imagen nueva) + nombre + subtítulo ---------------- */

.identidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.avatar {
  width: clamp(128px, 11vw, 240px);
  height: clamp(128px, 11vw, 240px);
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--fondo), var(--fondo)) padding-box,
    linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%) border-box;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.35), 0 10px 40px rgba(0, 0, 0, 0.55);
}

h1 {
  margin: 4px 0 0;
  font-size: 2rem;
  letter-spacing: 0.02em;
}

/* R-25: la mayor parte del nombre en blanco sólido, la letra final con el */
/* mismo degradado morado/azul→naranja del anillo del avatar (R-26). */
.marca__base {
  color: var(--texto);
}

/* R1 (005, = R-29): la "X" final separada del resto del nombre y más grande. */
.marca__final {
  background: linear-gradient(90deg, var(--acento) 0%, var(--acento-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.3em;
  margin-left: 0.06em;
  letter-spacing: 0.02em;
}

/* R1 (006, = R-38): algo más grande que el 1rem inicial, para acercarse a la */
/* proporción de la referencia. El peso fino y la Verdana no se tocan.        */
.subtitulo {
  margin: 0;
  color: var(--subtexto);
  font-size: 1.2rem;
  font-family: Verdana, Geneva, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* R2 (005, = R-30): subtítulo fino, sin negrita (el color cálido de R-24 se */
/* mantiene, solo cambia el peso y la tipografía). */
.subtitulo--destacado {
  font-weight: 400;
  background: linear-gradient(90deg, #ff5f37 0%, #fca020 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* R3 (005, = R-31): párrafo descriptivo bajo el subtítulo. */
/* R2 (006, = R-39): el texto son ~120 caracteres, así que con 46ch caía en 3 */
/* líneas. A 62ch entra en 2, como en la referencia, y sigue sin llegar al    */
/* borde en pantallas anchas.                                                 */
.descripcion {
  margin: 2px 0 0;
  color: var(--subtexto);
  font-size: 0.92rem;
  line-height: 1.4;
  max-width: 62ch;
}

/* --- Botones de red, con icono (R-17) ----------------------------------- */

.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* R4 (005, = R-27/R-28): esquinas poco redondeadas (no semicírculo) y un */
/* contorno completo en degradado, en vez del borde izquierdo sólido de */
/* antes — técnica de doble fondo (padding-box/border-box) para no añadir */
/* pseudo-elementos ni filtros. */
.red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--texto);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--fondo-boton), var(--fondo-boton)) padding-box,
    linear-gradient(135deg, var(--borde-red-1, var(--color-red)) 0%, var(--borde-red-2, var(--color-red)) 100%) border-box;
  transition: transform 0.1s ease, background 0.2s ease;
}

.red__icono {
  display: inline-flex;
  color: var(--color-red, var(--texto));
}

.red:hover,
.red:focus-visible {
  transform: translateY(-2px);
}

.red--youtube { --color-red: var(--youtube); --borde-red-1: #ff0000; --borde-red-2: #ff7a6b; }
.red--twitch { --color-red: var(--twitch); --borde-red-1: #9146ff; --borde-red-2: #c19bff; }
.red--x { --color-red: var(--x); --borde-red-1: #ffffff; --borde-red-2: #9a9aa6; }
.red--instagram { --color-red: var(--instagram); --borde-red-1: #e1306c; --borde-red-2: #fd9754; }
/* Discord: degradado propio (dos tonos vecinos del blurple) que no choca */
/* con la paleta morado/naranja del resto del sitio. */
.red--discord { --color-red: var(--discord); --borde-red-1: #5865f2; --borde-red-2: #8f9bff; }

/* --- Embeds (REC-2, sin cambios de comportamiento, solo reubicados) ---- */

.embeds {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.embed {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
}

.embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* --- Secciones: Contenido reciente / Series destacadas (R-12..R-15) ---- */

.seccion {
  width: 100%;
}

/* R7/R9 (005, = R-34/R-36): "Contenido reciente" y "Series destacadas" cada */
/* uno en su propio recuadro, uno junto al otro en escritorio y apilados en */
/* --- R5 (007, = R-47): el usuario, bajo el nombre de marca -------------- */

.usuario {
  margin: 2px 0 6px;
  color: var(--subtexto);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* --- R6 (007, = R-48): aviso de directo ---------------------------------- */
/* Solo se pinta cuando Twitch confirma emisión: el servidor no genera este  */
/* marcado en ningún otro caso, ni siquiera si su API falla.                 */

.identidad__avatar {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.estado-directo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10, 8, 20, 0.78);
  border: 1px solid rgba(255, 95, 55, 0.55);
  color: var(--texto);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.estado-directo__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  animation: latido 1.8s ease-out infinite;
}

@keyframes latido {
  70% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

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

/* --- R7 (007, = R-49): panel "Únete a la comunidad" --------------------- */

.comunidad__texto {
  margin: 0 0 14px;
  color: var(--subtexto);
  font-size: 0.9rem;
  line-height: 1.45;
}

.comunidad__enlaces {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comunidad__enlace {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--texto);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fondo-boton), var(--fondo-boton)) padding-box,
    linear-gradient(135deg, var(--borde-com-1, var(--acento)) 0%, var(--borde-com-2, var(--acento-2)) 100%) border-box;
  border-width: 1px;
  transition: transform 0.1s ease;
}

.comunidad__enlace:hover,
.comunidad__enlace:focus-visible {
  transform: translateX(2px);
}

.comunidad__enlace--discord { --borde-com-1: #5865f2; --borde-com-2: #8f9bff; }
.comunidad__enlace--x { --borde-com-1: #ffffff; --borde-com-2: #9a9aa6; }
.comunidad__enlace--instagram { --borde-com-1: #e1306c; --borde-com-2: #fd9754; }

.comunidad__nombre {
  font-weight: 600;
  font-size: 0.95rem;
}

.comunidad__detalle {
  color: var(--subtexto);
  font-size: 0.78rem;
  text-align: right;
}

/* --- R10 (007, = R-52): carrusel sin barra y con flechas ---------------- */

.carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.carrusel .tarjetas {
  flex: 1 1 auto;
  min-width: 0;
  /* La barra se esconde; el arrastre con el dedo sigue funcionando igual. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrusel .tarjetas::-webkit-scrollbar {
  display: none;
}

.carrusel__flecha {
  flex: 0 0 auto;
  width: 28px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--tarjeta-borde);
  background: rgba(10, 8, 20, 0.72);
  color: var(--texto);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.carrusel__flecha:hover,
.carrusel__flecha:focus-visible {
  border-color: var(--acento);
}

/* móvil (Contenido reciente arriba/izquierda). Una columna por defecto. */
.contenido-series {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  /* R3 (006, = R-40): sin `align-items: start` los dos recuadros se estiran  */
  /* al alto de la fila, que es lo que los deja alineados arriba y abajo.     */
  .contenido-series {
    grid-template-columns: 1fr 1fr;
  }

  /* R4 (006, = R-41): las series pasan a rejilla de tarjetas verticales      */
  /* dentro de su recuadro, con la miniatura recortada en alto y el nombre    */
  /* debajo, como en la referencia de escritorio (S-5).                       */
  .tarjetas--series {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-content: start;
  }

  /* Una sola fila, completa: con 5 series y 3 columnas, las dos últimas caían
     solas debajo y rompían la estética de póster de la referencia. */
  .tarjetas--series .tarjeta-serie:nth-child(n + 4) {
    display: none;
  }

  .tarjeta-serie__miniatura {
    aspect-ratio: 2 / 3;
  }

  .tarjeta-serie__nombre {
    text-align: center;
  }
}

/* Misma familia visual que ya usaba "Sobre mí" (fondo de tarjeta + borde). */
.seccion--recuadro {
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 14px;
  padding: 18px;
}

.seccion__titulo {
  margin: 0 0 14px;
  font-size: 1.2rem;
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* R5 (005, = R-32): icono real (corona/estrella/persona) recortado de la */
/* referencia, junto al título de sección — ya no es un emoji. */
.seccion__icono {
  width: 1.3em;
  height: 1.3em;
  object-fit: contain;
  flex-shrink: 0;
}

/* Lista vertical por defecto (la usan las filas de "Contenido reciente"); */
/* "Series destacadas" la sobreescribe a rejilla, ver abajo. */
.tarjetas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Esta regla NO declara columnas a propósito: un grid sin
   `grid-template-columns` ya es de una sola columna, que es lo que toca por
   defecto. Las columnas de escritorio las fijan las @media de 768 y 1100.
   Antes declaraba `repeat(2, ...)` aquí y, al estar por DEBAJO de la @media de
   768 en el fichero, la anulaba: entre 900 y 1099 px salían dos columnas con
   tres series, dejando una suelta en otra fila. Declarar cualquier valor aquí
   vuelve a romperlo — el test de cascada lo comprueba a cada ancho. */
.tarjetas--series {
  display: grid;
}

.tarjeta-video,
.tarjeta-serie {
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-left: 4px solid var(--acento);
  border-radius: 12px;
  overflow: hidden;
}

.tarjeta-serie {
  border-left-color: var(--acento-2);
}

/* R-23: miniatura de la playlist, con el mismo trato que la de vídeo. */
.tarjeta-serie__miniatura {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #000;
}

.tarjeta-serie__enlace {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* R8 (005, = R-35): cada vídeo de "Contenido reciente" en fila horizontal, */
/* miniatura a la izquierda y el resto (título/fecha/vistas) a la derecha. */
.tarjeta-video__enlace {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.tarjeta-video__miniatura {
  width: 128px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #000;
}

.tarjeta-video__cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.tarjeta-video__titulo,
.tarjeta-serie__nombre {
  margin: 0;
  padding: 10px 12px 4px;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--texto);
}

.tarjeta-serie__nombre {
  padding: 10px 12px 12px;
}

.tarjeta-video__meta {
  margin: 0;
  padding: 0 12px 12px;
  font-size: 0.78rem;
  color: var(--subtexto);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* --- Responsive: móvil primero unos 3 elementos, escritorio unos 5 ----- */
/* (R-15/S-6): el servidor SIEMPRE renderiza hasta 5 tarjetas por sección; */
/* aquí solo se oculta lo que sobra en pantallas pequeñas — sin detección */
/* de dispositivo en el servidor. */

@media (max-width: 640px) {
  body.pagina {
    padding: 12px;
  }

  .panel {
    gap: 20px;
    padding: 16px 0 40px;
  }

  .cabecera-movil {
    display: flex;
  }

  .avatar {
    width: 104px;
    height: 104px;
  }

  h1 {
    font-size: 1.6rem;
  }

  /* R6 (009, = R-53): las 5 redes siguen SIEMPRE en una sola fila horizontal */
  /* en móvil — la columna apilada era justo la regresión que R-53 prohíbe.   */
  /* Cada botón reparte el ancho disponible a partes iguales (flex: 1 1 0).   */
  .redes {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }

  .red {
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 6px;
    gap: 6px;
  }

  .seccion--recuadro {
    padding: 14px;
  }

  /* R5/R6 (006, = R-42): en móvil las dos secciones dejan de ser listas      */
  /* apiladas y pasan a ser una fila de miniaturas que se arrastra con el     */
  /* dedo, con unas cuatro a la vista. El desplazamiento es nativo            */
  /* (overflow-x + scroll-snap): ni JavaScript ni librería de carrusel.       */
  .tarjetas--videos,
  .tarjetas--series {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Sitio para el dedo sin que la barra tape la última fila de la tarjeta. */
    padding-bottom: 4px;
  }

  /* Tres por fila: con cuatro, en un móvil estrecho las miniaturas quedaban */
  /* demasiado pequeñas. Con gap de 8px, tres tarjetas ocupan el ancho menos */
  /* dos huecos.                                                             */
  .tarjeta-video,
  .tarjeta-serie {
    flex: 0 0 calc(33.333% - 6px);
    scroll-snap-align: start;
  }

  /* Solo la imagen: el título, la fecha y las visualizaciones se esconden.   */
  .tarjeta-video__cuerpo {
    display: none;
  }

  .tarjeta-video__enlace {
    flex-direction: column;
  }

  .tarjeta-video__miniatura {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* La serie conserva su nombre, pero encima de la propia miniatura y en     */
  /* pequeño, para que no ocupe: la tarjeta hace de marco de referencia.      */
  .tarjeta-serie {
    position: relative;
    border-left-width: 1px;
  }

  .tarjeta-serie__miniatura {
    aspect-ratio: 16 / 9;
  }

  .tarjeta-serie__nombre {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 6px 4px;
    font-size: 0.62rem;
    line-height: 1.2;
    /* Degradado por detrás para que el texto se lea sobre cualquier imagen. */
    background: linear-gradient(180deg, rgba(10, 8, 20, 0) 0%, rgba(10, 8, 20, 0.85) 60%);
    /* Un nombre largo no debe crecer hacia arriba y comerse la miniatura. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* R3 (013): el nuevo bloque de fecha/etiqueta (pensado para el cuerpo de */
  /* escritorio) no tiene sitio en el overlay móvil — se oculta, el overlay  */
  /* sigue siendo solo el nombre, como pedía R-42 antes de esta unidad.     */
  .tarjeta-serie__meta {
    display: none;
  }

  /* Las tarjetas 4ª y 5ª dejan de esconderse: ahora se llega a ellas         */
  /* arrastrando, que es justo lo que se ha pedido.                          */
  .tarjeta--extra {
    display: flex;
  }

  /* R10 (007, = R-52): aquí es donde el carrusel se usa de verdad, así que  */
  /* las flechas aparecen y la barra se esconde.                             */
  .carrusel__flecha {
    display: inline-flex;
  }

  .tarjetas--videos,
  .tarjetas--series {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tarjetas--videos::-webkit-scrollbar,
  .tarjetas--series::-webkit-scrollbar {
    display: none;
  }
}

/* R6 (009, = R-53): en un móvil estrecho el texto de cada red no cabe junto */
/* al icono en una fila de 5 sin apilarse; en vez de volver a la columna     */
/* (la regresión que R-53 prohíbe), se oculta el texto y queda solo el       */
/* icono con su color identificativo — la fila se mantiene siempre.         */
@media (max-width: 400px) {
  .red__texto {
    display: none;
  }

  .red {
    padding: 10px 4px;
    gap: 0;
  }
}

@media (min-width: 900px) {
  .embeds {
    grid-template-columns: repeat(2, 1fr);
    /* BUG 012: antes `center` — con Embeds a un 40% del alto (era ~32% en la
       009), centrar una caja de tamaño fijo dejaba mucho aire; `stretch`
       (valor por defecto de grid) deja que .embed llene el alto real. */
    align-items: stretch;
  }

  /* R1 (007, = R-43): la cabecera se despliega en horizontal — avatar grande */
  /* a la izquierda, y a su derecha nombre, usuario, subtítulo, texto y       */
  /* botones — aprovechando el ancho, como en la referencia de escritorio.    */
  /* R3/R-55 (011): ya no se estira a width:100% — se deja que .zona-identidad */
  /* la centre como bloque, con .redes debajo alineada al mismo ancho.        */
  .identidad {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(24px, 3vw, 56px);
    text-align: left;
    width: auto;
  }

  .identidad__textos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Los botones dejan de ir centrados como grupo (mobile): se alinean bajo */
  /* el texto, con el mismo ancho que .identidad para que quede una columna */
  /* visual coherente dentro de .zona-identidad centrada (R3/R-55). */
  .redes {
    justify-content: flex-start;
  }

  h1 {
    font-size: clamp(2.2rem, 3.6vw, 4rem);
  }

  /* R7/R-50 (011): tres paneles (Vídeos/Series/Sobre-mí) alineados a la misma */
  /* altura, anchos LIBRES entre sí (1:1.5:1, no forzados a tercios iguales). */
  /* Sin `align-items: start`: las proporciones se romperían (fallo de 006). */
  .contenido-series {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
    height: 100%;
  }

  /* --- R1/R2/R-54 (011): reparto por PROPORCIÓN (flex-grow), no por clamp() */
  /* con techo en px — eso es lo que rompía R-51 en 2K/4K (cada bloque        */
  /* chocaba contra su techo en un punto distinto). R-56: márgenes de ~1-2%   */
  /* del alto de pantalla arriba/abajo, ancho libre al contenido.             */
  body.pagina {
    padding: 0 clamp(16px, 1.4vw, 32px);
  }

  .panel {
    height: 100vh;
    gap: 1.2vh;
    padding: 1.5vh 0;
  }

  /* R1/R-54: Identidad+redes ~25% del alto disponible. */
  .zona-identidad {
    flex: 25 0 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vh, 16px);
    width: 100%;
  }

  .zona-identidad .identidad,
  .zona-identidad .redes {
    width: 100%;
    max-width: clamp(640px, 55vw, 980px);
  }

  /* R1/R-54: Embeds (YouTube+Twitch) ~40% del alto disponible — la parte */
  /* que más crece respecto al reparto viejo (antes ~32%). */
  .embeds {
    flex: 40 0 0;
    min-height: 0;
  }

  /* R1/R-54/R7/R-50: la fila de Vídeos+Series+Sobre-mí ~25% del alto. */
  .contenido-series {
    flex: 25 0 0;
    min-height: 0;
  }

  /* Banda 1 (R-44): avatar + textos + redes, compactados para caber en el */
  /* ~25% de alto de la zona de Identidad. */
  .avatar {
    width: clamp(120px, 9.5vw, 200px);
    height: clamp(120px, 9.5vw, 200px);
  }

  h1 {
    font-size: clamp(1.7rem, 2.4vw, 2.8rem);
    line-height: 1.15;
    margin: 2px 0 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  }

  .usuario {
    font-size: 0.85rem;
    line-height: 1.2;
    margin: 2px 0 4px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  }

  .subtitulo {
    font-size: 0.95rem;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  }

  /* Una sola línea a este ancho: sobra espacio horizontal, y el presupuesto */
  /* vertical de R-54 no da para dos. El global (regla no-media) sigue en   */
  /* 2 líneas para anchos donde SÍ cabe (ajuste-fino, R2/C-39). */
  .descripcion {
    margin: 2px 0 0;
    font-size: 0.8rem;
    line-height: 1.2;
    max-width: 46ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  }

  .red {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  /* Banda 2 (BUG 012): Embeds ahora es una franja de verdad (~40% del alto, */
  /* antes ~32% en la 009) — el `max-width` fijo de la 009 (pensado para una */
  /* franja mucho más baja) dejaba el vídeo pequeño con mucho aire alrededor */
  /* aunque hubiera espacio de sobra. Se sustituye por tamaño DERIVADO DEL   */
  /* ALTO real de la franja (height:100% + aspect-ratio), no de un ancho    */
  /* adivinado en vw: así crece con el reparto en vez de quedarse anclado.  */
  .embed {
    width: auto;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .embed iframe {
    width: auto;
    max-width: 100%;
    height: 100%;
  }

  .embeds {
    justify-items: center;
  }

  /* Banda 3 (R-41/R-50): "Series destacadas" pasa a carrusel horizontal      */
  /* también en escritorio (antes solo en móvil), con la MISMA altura de     */
  /* franja. R-41 pide ancho LIBRE por miniatura —tantas como quepan—, así   */
  /* que aquí NO se fija ningún grid-template-columns: se deja que el        */
  /* aspect-ratio de la miniatura determine su ancho dentro de la fila.      */
  /* "Contenido reciente" en cambio es una lista vertical (R-50/R-52, 014),  */
  /* ver el bloque de más abajo.                                             */
  /* R1/R7/R-50 (011): cada panel llena el 100% de su celda de grid (la fila */
  /* ya viene con altura definida por el reparto flex de .contenido-series), */
  /* en vez de un clamp() con techo en px. Flex column: el título toma su    */
  /* alto natural y el carrusel se lleva el resto (min-height:0 es lo que    */
  /* permite que el overflow-x del carrusel funcione dentro de un flex item. */
  .seccion--recuadro {
    height: 100%;
    padding: clamp(10px, 0.75vw, 18px);
    display: flex;
    flex-direction: column;
  }

  .seccion__titulo {
    flex: 0 0 auto;
    font-size: 1rem;
    margin: 0 0 8px;
  }

  .carrusel {
    flex: 1 1 0;
    min-height: 0;
  }

  .carrusel__flecha {
    display: inline-flex;
  }

  /* Anula la rejilla fija de columnas del tramo tablet (768px, R-41 viejo):  */
  /* a partir de aquí el ancho de cada miniatura de serie es libre (R-41).    */
  .tarjetas--series {
    display: flex;
    grid-template-columns: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* R-50/R-52 (014): "Contenido reciente" vuelve a ser una lista VERTICAL   */
  /* también en escritorio (como ya era en móvil/base) en vez de un carrusel */
  /* horizontal: se desliza hacia abajo, sin flechas, con tantas filas como  */
  /* quepan — mismo patrón height:100% que .embed (bug 012) y .tarjeta-serie */
  /* (unidad 013): el alto real lo da el flex de .carrusel, no un valor      */
  /* adivinado.                                                              */
  .tarjetas--videos {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tarjetas--videos::-webkit-scrollbar,
  .tarjetas--series::-webkit-scrollbar {
    display: none;
  }

  .tarjeta-serie {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .tarjeta-video {
    flex: 0 0 auto;
  }

  /* R-52 (014): las flechas de carrusel solo tienen sentido en una fila que */
  /* se desliza de lado; "Contenido reciente" ya no lo es en escritorio.     */
  .seccion--videos .carrusel__flecha {
    display: none;
  }

  /* R1/R2/R-41 (013): miniatura 16:9 COMPLETA (sin recortar) arriba, cuerpo  */
  /* con nombre+fecha+etiqueta abajo — tarjeta ~3:4, ancho derivado del alto  */
  /* real de la franja (mismo patrón que .embed, bug 012). Con ancho libre   */
  /* se llega a las 5 arrastrando o con las flechas (R-52).                  */
  .tarjeta-serie {
    height: 100%;
    aspect-ratio: 3 / 4;
  }

  .tarjeta-serie__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .tarjeta-serie__miniatura {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
  }

  .tarjeta-serie__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
  }

  .tarjeta-serie__nombre {
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 0.74rem;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* R2: mismo tratamiento visual que .tarjeta-video__meta (fecha + dato fijo). */
  .tarjeta-serie__meta {
    margin: 0;
    font-size: 0.62rem;
    color: var(--subtexto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tarjetas--series .tarjeta-serie:nth-child(n + 4),
  .tarjetas--series .tarjeta-serie:nth-child(n + 5) {
    display: flex;
  }

  /* R6/R-50 (011): "Sobre mí" ocupa ahora el tercer puesto de la fila, a la */
  /* misma altura que Vídeos/Series (ya no es la franja baja aparte de la */
  /* 009 — ver el bloque de .seccion--sobre-mi más abajo en el fichero, que */
  /* ya no tiene su propio @media: hereda .seccion--recuadro de aquí arriba */
  /* y solo ajusta tipografía para el texto/frase de cierre). */
  .seccion--sobre-mi.seccion--recuadro {
    background-position: center;
  }

  .seccion--sobre-mi .seccion__titulo {
    margin: 0 0 4px;
    font-size: 0.85rem;
  }

  .seccion--sobre-mi .sobre-mi__texto {
    margin: 0 0 6px;
    font-size: 0.72rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  /* R-21/R9 (011): la frase de cierre vuelve a verse en escritorio — la 009 */
  /* la ocultaba (display:none) al compactar "Sobre mí" en una franja baja; */
  /* ahora el panel tiene el mismo alto que sus vecinos y hay sitio de sobra. */
  .seccion--sobre-mi .frase-cierre {
    margin: 0;
    font-size: 0.78rem;
  }
}

/* El bloque de 1100px que fijaba .tarjetas--series a una rejilla de 4        */
/* columnas (con la 5ª tarjeta oculta) se retira en la unidad 009: R-41 se    */
/* reescribió a "ancho libre, tantas como quepan, arrastrando o con las       */
/* flechas" (ver el bloque de escritorio de más arriba) — un carrusel no fija */
/* columnas ni oculta ninguna tarjeta. Los tests que vigilaban ESE R-41 se    */
/* actualizaron en la misma unidad (ver hallazgos.md, unidad 009).            */

/* --- Sobre mí + frase de cierre (R-20/R-21) ----------------------------- */
/* R6 (005, = R-33): imagen de fondo (escena espacial) recortada de la */
/* referencia, con una capa oscura semitransparente encima para que el */
/* texto siga siendo legible. */

.seccion--sobre-mi {
  position: relative;
  padding: 20px;
  margin-top: 8px;
  border: 1px solid var(--tarjeta-borde);
  border-radius: 14px;
  background-image:
    linear-gradient(90deg, rgba(14, 15, 18, 0.92) 0%, rgba(14, 15, 18, 0.72) 55%, rgba(14, 15, 18, 0.35) 100%),
    url('iconos/fondo-mi.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.sobre-mi__texto {
  margin: 0 0 10px;
  color: var(--subtexto);
  line-height: 1.5;
}

/* R-21: frase de cierre, con el color destacado de marca. */
.frase-cierre {
  margin: 0;
  color: var(--acento);
  font-weight: 700;
}

/* Banda 4 (011): "Sobre mí" deja de ser una franja baja aparte — pasa al */
/* tercer puesto de .contenido-series y hereda su tratamiento de altura   */
/* (.seccion--recuadro, height:100%, flex column) del bloque de escritorio */
/* de más arriba, que también fija la tipografía compacta y la frase de   */
/* cierre (R-21/R9) visible.                                              */

/* --- 016: pie de la portada con los enlaces legales --------------------- */
/* Fuera del reparto proporcional del panel en escritorio: ocupa solo su     */
/* línea (flex 0 0 auto) y no roba alto a identidad/embeds/series.           */
.pie {
  flex: 0 0 auto;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--tarjeta-borde);
  color: var(--subtexto);
  font-size: 0.85rem;
  text-align: center;
}

.pie p {
  margin: 2px 0;
}

.pie a {
  color: var(--subtexto);
}

.pie a:hover,
.pie a:focus-visible {
  color: var(--acento);
}

.pie__enlaces {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* 017: insignia oficial "Developed with YouTube" (sin modificar). El PNG   */
/* (700×250) trae su propio margen transparente: con 3rem de alto, el logo  */
/* y su texto visibles miden ~0.73rem, por debajo de la letra del pie       */
/* (0.85rem), así que no es el elemento más destacado. Ancho automático     */
/* para no deformarla; margen propio como espacio libre alrededor.          */
.pie__youtube {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.insignia-youtube {
  display: block;
  height: 3rem;
  width: auto;
  margin: 0 8px;
}

/* --- 016: páginas legales (Privacidad y Condiciones) ------------------- */
/* Español arriba y la misma información en inglés debajo, en el mismo      */
/* estilo que la portada (fondo, tipografía y recuadro de tarjeta).         */
.legal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  padding: 24px 0 48px;
  line-height: 1.6;
}

.legal__volver {
  color: var(--subtexto);
}

.legal__volver:hover,
.legal__volver:focus-visible {
  color: var(--acento);
}

.legal__idioma {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 14px;
}

.legal h1 {
  font-size: 1.6rem;
}

.legal h2 {
  margin: 24px 0 6px;
  font-size: 1.1rem;
}

.legal p,
.legal li {
  color: var(--subtexto);
}

.legal a {
  color: var(--acento);
}

.legal__fecha {
  font-size: 0.9rem;
}