/* Animed Latino — hoja de estilos única del sitio.
   Sin dependencias externas: todo el diseño vive aquí.
   Los colores salen del logotipo: letras amarillas con contorno negro, mascota de
   vestido morado. Fondo oscuro para que el amarillo resalte. */

:root {
    --fondo: #0d0f1a;
    --fondo-2: #141728;
    --fondo-3: #1c2036;
    --borde: #2a2f4a;
    --texto: #e8eaf6;
    --texto-suave: #a7adc7;
    --acento: #ffc21c;          /* amarillo del logotipo */
    --acento-2: #ff8a1e;        /* naranja de las letras */
    --acento-3: #7a4fb5;        /* morado del vestido de la mascota */
    --acento-texto: #1a1408;    /* texto oscuro para los botones amarillos */
    --ok: #2ecc9b;
    --alerta: #ffb020;
    --error: #ff5c5c;
    --radio: 12px;
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
    --ancho: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--acento); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
p { margin: 0 0 1em; }

.oculto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.salto-contenido {
    position: absolute; left: -999px; top: 0; background: var(--acento);
    color: #fff; padding: .6rem 1rem; z-index: 50;
}
.salto-contenido:focus { left: 0; }

.contenedor {
    width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px;
}

/* ---------------------------------------------------------------- cabecera */
.cabecera {
    position: sticky; top: 0; z-index: 20;
    background: rgba(13, 15, 26, .96);
    border-bottom: 1px solid var(--borde);
    backdrop-filter: blur(8px);
}
.cabecera__fila {
    display: flex; align-items: center; gap: 16px; padding: 10px 16px;
}
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.2rem; }
.marca__icono {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: var(--acento-texto); font-size: .9rem;
}
.marca__texto { white-space: nowrap; }

.buscador { flex: 1; display: flex; gap: 8px; min-width: 120px; }
.buscador input {
    flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto);
}
.buscador input:focus { outline: 2px solid var(--acento-2); outline-offset: 1px; }
.buscador button {
    padding: 10px 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: var(--acento-texto); font-weight: 600;
}
.menu-boton {
    display: none; background: var(--fondo-3); color: var(--texto);
    border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; cursor: pointer;
}

.menu { border-top: 1px solid var(--borde); background: var(--fondo-2); }
.menu__fila { padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.menu__lista { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; }
.menu__lista a {
    display: inline-block; padding: 6px 10px; border-radius: 8px; font-weight: 500;
}
.menu__lista a:hover { background: var(--fondo-3); }
.menu__generos { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .86rem; color: var(--texto-suave); }
.menu__etiqueta { font-weight: 600; }
.menu__generos a { color: var(--texto-suave); }
.menu__generos a:hover { color: var(--acento); }
.menu__mas { font-weight: 600; color: var(--acento) !important; }

.principal { padding: 20px 16px 48px; }

/* ---------------------------------------------------------------- bloques */
.bloque { margin: 0 0 34px; }
.bloque__cabecera {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.bloque__cabecera h1, .bloque__cabecera h2 { margin: 0; }
.bloque__nota { color: var(--texto-suave); font-size: .9rem; margin: 0; }
.bloque__enlace { font-size: .9rem; color: var(--acento); font-weight: 600; }

.aviso {
    border-radius: var(--radio); padding: 12px 16px; margin: 0 0 16px;
    border: 1px solid var(--borde); background: var(--fondo-2);
}
.aviso--error { border-color: var(--error); color: #ffd7d7; }
.aviso--ok { border-color: var(--ok); color: #d6fff2; }

.destacadas {
    display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.destacada a { position: relative; display: block; border-radius: var(--radio); overflow: hidden; background: var(--fondo-3); }
.destacada img { aspect-ratio: 16 / 9; max-height: 300px; object-fit: cover; object-position: center 18%; width: 100%; opacity: .8; }
.destacada__texto {
    position: absolute; inset: auto 0 0 0; padding: 12px 14px;
    background: linear-gradient(transparent, rgba(8, 9, 16, .98) 70%);
    display: flex; flex-direction: column; gap: 4px;
}
.destacada__texto strong { font-size: 1.15rem; }

.rejilla {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.tarjeta { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tarjeta:hover { border-color: var(--acento-2); }
.tarjeta__enlace { display: flex; flex-direction: column; height: 100%; }
.tarjeta__marco { position: relative; display: block; background: var(--fondo-3); }
.tarjeta__imagen { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.tarjeta__etiqueta, .tarjeta__anio, .tarjeta__visto {
    position: absolute; font-size: .72rem; padding: 3px 7px; border-radius: 6px;
    background: rgba(8, 9, 16, .85);
}
.tarjeta__etiqueta { top: 8px; left: 8px; background: var(--acento); color: #fff; }
.tarjeta__anio { top: 8px; right: 8px; }
.tarjeta__visto { bottom: 8px; left: 8px; background: var(--ok); color: #04231a; font-weight: 700; }
.tarjeta__visto[hidden] { display: none; }
.tarjeta__cuerpo { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta__titulo { font-weight: 600; font-size: .95rem; }
.tarjeta__detalle { font-size: .78rem; color: var(--texto-suave); }

.lista-capitulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-capitulos--ancha { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lista-capitulos a {
    display: flex; align-items: center; gap: 12px; padding: 8px;
    background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio);
}
.lista-capitulos a:hover { border-color: var(--acento-2); }
.lista-capitulos img { width: 52px; border-radius: 8px; }
.lista-capitulos__texto { display: flex; flex-direction: column; min-width: 0; }
.lista-capitulos__texto strong { font-size: .95rem; }
.lista-capitulos__texto span { font-size: .8rem; color: var(--texto-suave); }
.lista-capitulos__fecha { margin-left: auto; font-size: .78rem; color: var(--texto-suave); white-space: nowrap; }

.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas a {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 999px; font-size: .88rem;
}
.etiquetas a:hover { border-color: var(--acento); color: var(--acento); }
.etiquetas--chicas a { padding: 4px 10px; font-size: .8rem; }
.etiquetas__total { font-size: .74rem; color: var(--texto-suave); }

.letras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.letras a, .letras__vacia {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
    background: var(--fondo-2); border: 1px solid var(--borde); font-size: .9rem;
}
.letras a:hover { border-color: var(--acento); color: var(--acento); }
.letras__vacia { opacity: .35; }

/* ---------------------------------------------------------------- migas */
.migas {
    display: flex; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--texto-suave);
    margin: 0 0 16px;
}

/* ---------------------------------------------------------------- ficha */
.ficha {
    position: relative; border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; margin-bottom: 30px; background: var(--fondo-2);
}
.ficha__fondo {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: blur(2px) brightness(.3);
}
.ficha__cuerpo {
    position: relative; display: flex; gap: 20px; padding: 20px; flex-wrap: wrap;
}
.ficha__portada { width: 190px; border-radius: 10px; box-shadow: var(--sombra); }
.ficha__datos { flex: 1; min-width: 240px; }
.ficha__alterno { color: var(--texto-suave); margin: -.4em 0 .6em; }
.ficha__meta { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; }
.ficha__meta strong { color: var(--texto-suave); font-weight: 600; }
.ficha__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.ficha__sinopsis { max-width: 70ch; color: #d7dbef; }

.boton {
    display: inline-block; padding: 11px 18px; border-radius: 10px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: var(--acento-texto); font-weight: 600;
}
.boton:hover { color: #fff; filter: brightness(1.08); }
.boton-suave {
    display: inline-block; padding: 10px 16px; border-radius: 10px; cursor: pointer;
    background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde); font-weight: 500;
}
.boton-suave:hover { border-color: var(--acento); color: var(--acento); }

.selector { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--texto-suave); }
select, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], textarea {
    background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde);
    border-radius: 8px; padding: 9px 10px; font: inherit;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--acento-2); outline-offset: 1px; }

.temporada { margin-bottom: 18px; }
.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lista-enlaces a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 10px;
}
.lista-enlaces a:hover { border-color: var(--acento-2); }
.lista-enlaces__numero {
    display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 8px;
    background: var(--fondo-3); font-weight: 700; font-size: .85rem;
}
.lista-enlaces__titulo { flex: 1; font-size: .92rem; }
.lista-enlaces__detalle { font-size: .76rem; color: var(--texto-suave); }
.lista-enlaces--compacta { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lista-enlaces li.actual a { border-color: var(--acento); background: var(--fondo-3); }

/* ---------------------------------------------------------------- reproductor */
.reproductor { margin-bottom: 30px; }
.reproductor__cuadro {
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
    border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.reproductor__cuadro iframe, .reproductor__cuadro video { width: 100%; height: 100%; border: 0; display: block; }
.reproductor__vacio {
    padding: 40px 20px; text-align: center; background: var(--fondo-2);
    border: 1px dashed var(--borde); border-radius: var(--radio);
}
.reproductor__nota { color: var(--texto-suave); font-size: .9rem; }
.reproductor__barra {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 0;
}
.reproductor__titulo h1 { font-size: 1.25rem; margin: 0; }
.reproductor__titulo p { margin: 2px 0 0; color: var(--texto-suave); font-size: .88rem; }
.reproductor__navegacion { display: flex; gap: 8px; flex-wrap: wrap; }

.servidores { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; background: var(--fondo-2); }
.servidores__grupo { margin-bottom: 10px; }
.servidores__etiqueta { margin: 0 0 6px; font-size: .82rem; color: var(--texto-suave); font-weight: 600; }
.servidores__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.servidor {
    padding: 8px 14px; border-radius: 8px; cursor: pointer; font: inherit;
    background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde);
}
.servidor:hover { border-color: var(--acento); }
.servidor--activo { background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: var(--acento-texto); border-color: transparent; }
.servidor__calidad { font-size: .74rem; opacity: .8; }
.servidores__ayuda { margin: 8px 0 0; font-size: .8rem; color: var(--texto-suave); }

.panel-capitulos {
    margin-top: 16px; padding: 16px; border: 1px solid var(--borde);
    border-radius: var(--radio); background: var(--fondo-2);
}
.panel-capitulos__temporada { font-weight: 700; margin: 0 0 8px; }
.panel-capitulos ul { margin-bottom: 18px; }

/* ---------------------------------------------------------------- formularios y comentarios */
.formulario { display: grid; gap: 12px; margin-bottom: 22px; }
.formulario__fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.formulario label { display: grid; gap: 4px; font-size: .88rem; }
.formulario__nota { font-size: .82rem; color: var(--texto-suave); margin: 0; }
.formulario--compacto { max-width: 760px; }

.filtros {
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end; padding: 16px; margin-bottom: 22px;
    background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio);
}
.filtros label { display: grid; gap: 4px; font-size: .82rem; color: var(--texto-suave); }
.filtros .boton { align-self: end; }

.comentarios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 860px; }
.comentario { padding: 12px 14px; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); }
.comentario__encabezado { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: .86rem; color: var(--texto-suave); }
.comentario__texto { margin: 0; }

.paginacion { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.paginacion a, .paginacion__actual {
    padding: 8px 13px; border-radius: 8px; border: 1px solid var(--borde); background: var(--fondo-2); font-size: .9rem;
}
.paginacion a:hover { border-color: var(--acento); color: var(--acento); }
.paginacion__actual { background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: var(--acento-texto); border-color: transparent; }

.pagina { max-width: 80ch; }
.pagina__intro { color: var(--texto-suave); }
.pagina h2 { margin-top: 1.6em; font-size: 1.15rem; }
.pagina ul, .pagina ol { padding-left: 1.2em; }
.pagina li { margin-bottom: .4em; }
.vacio { color: var(--texto-suave); padding: 20px; background: var(--fondo-2); border: 1px dashed var(--borde); border-radius: var(--radio); }
.texto { max-width: 80ch; color: #d7dbef; }

/* ---------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--borde); background: var(--fondo-2); margin-top: 30px; }
.pie__fila { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; padding: 26px 16px 12px; }
.pie__marca { font-weight: 700; margin: 0 0 6px; }
.pie__texto { color: var(--texto-suave); font-size: .88rem; max-width: 46ch; margin: 0; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: .88rem; }
.pie__legal { padding: 12px 16px 26px; color: var(--texto-suave); font-size: .8rem; border-top: 1px solid var(--borde); }
.pie__legal p { margin: 4px 0; }

/* ---------------------------------------------------------------- avisos del navegador */
.aviso-navegador {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin: 0 0 16px; border-radius: var(--radio);
    background: var(--fondo-2); border: 1px solid var(--alerta);
}
.aviso-navegador p { margin: 0; font-size: .9rem; }

/* ---------------------------------------------------------------- móvil */
@media (max-width: 760px) {
    h1 { font-size: 1.5rem; }
    .menu-boton { display: inline-block; }
    .menu { display: none; }
    .menu.abierto { display: block; }
    .cabecera__fila { flex-wrap: wrap; }
    /* El buscador pasa a su propio renglón, a todo lo ancho. */
    .buscador { order: 3; flex: 1 1 100%; width: 100%; min-width: 100%; }
    .buscador input { min-width: 0; }
    .ficha__portada { width: 130px; }
    .rejilla { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
    .lista-capitulos__fecha { display: none; }
    .reproductor__barra { flex-direction: column; align-items: flex-start; }
    .filtros { grid-template-columns: 1fr 1fr; }
    .bloque__nota { flex-basis: 100%; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- marca */
.marca { display: flex; align-items: center; gap: 10px; }
.marca__logo { height: 60px; width: auto; }
.marca__texto { font-weight: 800; font-size: 1.15rem; letter-spacing: .2px; }

/* ------------------------------------------------- últimos animes (como TioAnime) */
.ultimos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ultimo { display: flex; flex-direction: column; gap: 8px; }
.ultimo__marco { position: relative; display: block; border-radius: var(--radio); overflow: hidden; background: var(--fondo-3); }
.ultimo__insignia {
    position: absolute; top: 8px; left: 8px;
    background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: var(--acento-texto);
    font-weight: 800; font-size: .82rem; padding: 3px 9px; border-radius: 6px;
}
.ultimo__marco img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .25s ease; }
.ultimo:hover .ultimo__marco img { transform: scale(1.04); }
.ultimo__capitulo {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 6px;
    background: linear-gradient(transparent, rgba(8, 9, 16, .95));
    color: #fff; font-size: .78rem; text-align: right;
}
.ultimo__titulo { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.ultimo__fecha { font-size: .76rem; color: var(--texto-suave); }
.ultimo a:hover .ultimo__titulo { color: var(--acento); }

/* ------------------------------------------------- paginación con números y flechas */
.paginacion { align-items: center; gap: 8px; }
.paginacion__flecha, .paginacion__numero {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--borde); background: var(--fondo-2); font-size: .92rem;
}
.paginacion__numero--actual {
    background: linear-gradient(135deg, var(--acento), var(--acento-2));
    color: var(--acento-texto); border-color: transparent; font-weight: 700;
}
.paginacion__flecha[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.paginacion__flecha:hover, .paginacion__numero:hover { border-color: var(--acento); color: var(--acento); }
.paginacion__numero--actual:hover { color: var(--acento-texto); }
.paginacion__grupo { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------- capítulos en la ficha */
.episodios { display: grid; gap: 14px; }
.episodios__temporada { font-size: .95rem; font-weight: 700; color: var(--texto-suave); margin: 0; }
.episodios__caja {
    max-height: 430px;                 /* unos doce capítulos a la vista */
    overflow-y: auto;
    padding-right: 6px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo-2);
}
.episodios__caja .lista-enlaces { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px; }
.episodios__caja .lista-enlaces a { border-radius: 8px; }
.episodios__caja::-webkit-scrollbar { width: 10px; }
.episodios__caja::-webkit-scrollbar-track { background: var(--fondo-3); border-radius: 8px; }
.episodios__caja::-webkit-scrollbar-thumb { background: var(--acento-3); border-radius: 8px; }
.episodios__caja { scrollbar-color: var(--acento-3) var(--fondo-3); scrollbar-width: thin; }
.episodios__aviso { font-size: .8rem; color: var(--texto-suave); }

/* ------------------------------------------------- géneros en la ficha */
.ficha__generos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.ficha__generos a {
    font-size: .8rem; padding: 4px 10px; border-radius: 999px;
    background: var(--fondo-3); border: 1px solid var(--borde); color: var(--texto-suave);
}
.ficha__generos a:hover { border-color: var(--acento); color: var(--acento); }

@media (max-width: 760px) {
    .marca__logo { height: 44px; }
    .ultimos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .episodios__caja { max-height: 340px; }
    .paginacion__flecha, .paginacion__numero { min-width: 34px; height: 34px; }
}

/* ------------------------------------------------- lista de temporadas */
.temporadas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.temporadas-lista__boton {
    background: var(--fondo-2); border: 1px solid var(--borde); color: var(--texto);
    padding: 7px 14px; border-radius: 999px; font-size: .88rem; cursor: pointer; font-family: inherit;
}
.temporadas-lista__boton:hover { border-color: var(--acento); color: var(--acento); }
.temporadas-lista__boton[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--acento), var(--acento-2));
    color: var(--acento-texto); border-color: transparent; font-weight: 700;
}

/* ------------------------------------------------- secuencia, películas y OVAs */
.relacionadas { display: grid; gap: 14px; margin-top: 18px; }
.relacionadas__grupo h3 {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--acento); margin: 0 0 6px;
}
.relacionadas__grupo h3.peliculas { color: var(--acento-3); }
.relacionadas__grupo h3.ovas { color: var(--acento-2); }
.relacionadas__lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.relacionadas__lista a {
    border: 1px solid var(--borde); background: var(--fondo-2); border-radius: 8px;
    padding: 6px 12px; font-size: .9rem;
}
.relacionadas__lista a:hover { border-color: var(--acento); color: var(--acento); }
.relacionadas__paso { font-size: .8rem; color: var(--texto-suave); margin: 0 0 6px; }