/* he.css — tema "enlinea" de HentaiEnLinea (oscuro + rojo, maqueta aprobada).
   Va después de hrd.css: redefine sus variables para que TODAS las páginas
   queden oscuras, y agrega los componentes propios (he-*) del inicio,
   la cabecera y el pie. Modo claro: clase he-claro en <html>. */

:root {
  --he-fondo: #0b0c0f;
  --he-fondo-2: #101217;
  --he-superficie: #15171c;
  --he-superficie-2: #1c1f26;
  --he-linea: #262a33;
  --he-texto: #f1f2f4;
  --he-texto-2: #9aa1ad;
  --he-rojo: #e3262c;
  --he-rojo-osc: #b81b20;
  --he-rojo-tinte: rgba(227, 38, 44, .14);
  --he-azul: #3b5bdb;
  --he-radio: 8px;
  --he-ancho: 1320px;
  --he-titulos: "Oswald", "Arial Narrow", sans-serif;
  --he-cuerpo: "Inter", system-ui, sans-serif;

  /* Variables de hrd.css: así el resto de las páginas usa el mismo tema */
  --hrd-negro: #050608;
  --hrd-negro-2: var(--he-superficie);
  --hrd-fondo: var(--he-fondo);
  --hrd-superficie: var(--he-superficie);
  --hrd-teal: var(--he-rojo);
  --hrd-teal-osc: var(--he-rojo-osc);
  --hrd-teal-tinte: var(--he-rojo-tinte);
  --hrd-texto: var(--he-texto);
  --hrd-texto-2: var(--he-texto-2);
  --hrd-linea: var(--he-linea);
  --hrd-chip: var(--he-superficie-2);
  --hrd-fuente: var(--he-cuerpo);
  --hrd-ancho: var(--he-ancho);
}
html.he-claro {
  --he-fondo: #eef0f3;
  --he-fondo-2: #e6e9ee;
  --he-superficie: #ffffff;
  --he-superficie-2: #f2f3f6;
  --he-linea: #dfe2e8;
  --he-texto: #15171c;
  --he-texto-2: #5a6170;
  --hrd-negro: #0b0c0f;
}

html, body.he { background: var(--he-fondo); color: var(--he-texto); }
body.he { font-family: var(--he-cuerpo); margin: 0; }
.he a { color: inherit; text-decoration: none; }
.he img { max-width: 100%; }
.he :focus-visible { outline: 2px solid var(--he-rojo); outline-offset: 2px; }
.he-contenedor { max-width: var(--he-ancho); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.he .hrd-contenedor { max-width: var(--he-ancho); }

/* ---------- Botones ---------- */
.he-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; font: 700 15px/1 var(--he-cuerpo); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.he-btn:hover { transform: translateY(-1px); }
.he-btn-rojo { background: var(--he-rojo); color: #fff !important; box-shadow: 0 8px 24px rgba(227, 38, 44, .35); }
.he-btn-rojo:hover { background: #f0353b; }
.he-btn-borde { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff !important; }
.he-btn-borde:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.he-btn-azul { width: 100%; background: var(--he-azul); color: #fff !important; }
.he-btn-azul:hover { background: #4a69e8; }

/* ---------- Cabecera ---------- */
.he-cabecera.hrd-cabecera { position: sticky; top: 0; z-index: 30; background: rgba(5, 6, 8, .96); border-bottom: 2px solid var(--he-rojo); backdrop-filter: blur(8px); }
.he-cab { display: flex; align-items: center; gap: 28px; max-width: var(--he-ancho); height: 64px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
/* Logo de siempre de HentaiEnLinea: HE en cuadro rojo + HENTAI/ENLINEA en dos líneas, letra con serifa */
.he-logo { display: inline-flex; align-items: stretch; gap: 0; flex: none; color: #fff !important; }
.he-logo-he { display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; height: 42px; background: #e8141b; font: 700 27px/1 "Roboto Slab", Georgia, serif; }
.he-logo-txt { display: flex; flex-direction: column; justify-content: center; padding-left: 7px; font: 700 18px/1 "Roboto Slab", Georgia, serif; letter-spacing: .04em; }
.he-logo-txt > span { display: block; }
.he-nav.hrd-nav { display: flex; align-items: stretch; gap: 4px; height: 100%; margin: 0; }
.he-nav a { position: relative; display: flex; align-items: center; padding: 0 12px; color: #c9ccd3 !important; font: 600 13px/1 var(--he-cuerpo); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.he-nav a:hover { color: #fff !important; }
.he-nav a[aria-current="page"] { color: #fff !important; }
.he-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--he-rojo); }
.he-buscador.hrd-buscador { position: relative; display: flex; align-items: center; flex: 0 1 300px; margin-left: auto; height: 40px; border: 1px solid #2c3038; border-radius: 6px; background: #121419; }
.he-buscador label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 0 0 12px; color: #8b919c; }
.he-buscador input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: 14px var(--he-cuerpo); outline: none; }
.he-buscador input::placeholder { color: #747a85; }
.he-buscar-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; border: 0; border-radius: 0 5px 5px 0; background: var(--he-rojo); color: #fff; cursor: pointer; }
.he-acciones { display: flex; align-items: center; gap: 6px; }
.he-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #d7d9de !important; cursor: pointer; }
.he-icono:hover { background: rgba(255, 255, 255, .08); color: #fff !important; }
.he-acciones .hrd-entrar { min-height: 38px; padding: 0 16px; border-radius: 6px; background: var(--he-rojo); color: #fff !important; font-weight: 700; }
.he-acciones .hrd-usuario summary { color: #fff; }
.he .hrd-sugerencias { background: var(--he-superficie); border: 1px solid var(--he-linea); color: var(--he-texto); }

/* ---------- Carrusel ---------- */
/* --he-margen: distancia del borde de la pantalla al borde del contenido de abajo */
.he-hero { --he-margen: max(20px, calc((100% - var(--he-ancho)) / 2 + 20px)); position: relative; height: 470px; overflow: hidden; background: #050608; }
.he-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.he-slide.is-activo { opacity: 1; visibility: visible; }
.he-slide-fondo { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) saturate(1.4) brightness(.45); transform: scale(1.1); }
.he-slide-arte { position: absolute; top: 0; right: calc(var(--he-margen) + 90px); height: 100%; width: auto; max-width: 62%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 85%, transparent 100%); }
.he-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 8, .96) 0%, rgba(5, 6, 8, .78) 38%, rgba(5, 6, 8, .1) 70%, rgba(5, 6, 8, .55) 100%), linear-gradient(0deg, var(--he-fondo) 0%, transparent 30%); pointer-events: none; }
.he-slide-texto { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: var(--he-ancho); height: 100%; margin: 0 auto; padding: 0 20px 40px; box-sizing: border-box; }
.he-slide-texto > * { max-width: 560px; }
.he-etiqueta { align-self: flex-start; padding: 5px 10px; border-radius: 3px; background: var(--he-rojo); color: #fff; font: 700 12px/1 var(--he-cuerpo); letter-spacing: .06em; text-transform: uppercase; }
.he-slide-titulo { margin: 0; font: 900 clamp(36px, 5vw, 64px)/1.02 "Montserrat", var(--he-cuerpo); letter-spacing: -.02em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.he-slide-titulo a { color: #fff !important; }
.he-slide-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.he-slide-datos li { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 600 13px/1 var(--he-cuerpo); }
.he-slide-datos li:empty { display: none; }
.he-slide-datos .he-slide-generos { display: contents; }
.he-slide-generos .he-chip { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 600 13px/1 var(--he-cuerpo); }
.he-slide-sinopsis { margin: 0; color: #d6d8dd; font-size: 15px; line-height: 1.55; }
.he-slide-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.he-hero-control { position: absolute; left: 50%; bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 12px; width: calc(min(var(--he-ancho), 100%) - 40px); transform: translateX(-50%); }
.he-hero-flecha { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; cursor: pointer; }
.he-hero-puntos { display: flex; gap: 8px; }
.he-punto { width: 22px; height: 5px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .3s, background .3s; }
.he-punto.is-activo { width: 44px; background: var(--he-rojo); }
.he-hero-minis { position: absolute; top: 50%; right: var(--he-margen); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 94px; padding: 8px 0; border-radius: 10px; background: rgba(0, 0, 0, .55); transform: translateY(-50%); box-sizing: border-box; }
.he-mini { width: 74px; height: 74px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: #111; cursor: pointer; opacity: .65; transition: opacity .2s, border-color .2s; }
.he-mini img { width: 100%; height: 100%; object-fit: cover; }
.he-mini.is-activo, .he-mini:hover { opacity: 1; border-color: var(--he-rojo); }
.he-minis-flecha { border: 0; background: transparent; color: #fff; cursor: pointer; }

/* ---------- Géneros ---------- */
.he-generos { display: flex; gap: 10px; margin-top: 18px !important; margin-bottom: 8px !important; overflow-x: auto; scrollbar-width: none; }
.he-generos::-webkit-scrollbar { display: none; }
.he-genero { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 16px; border: 1px solid var(--he-linea); border-radius: 6px; background: var(--he-superficie); color: var(--he-texto) !important; font: 500 13px/1 var(--he-cuerpo); white-space: nowrap; }
.he-genero:hover { border-color: var(--he-rojo); }
.he-genero-ico { width: 16px; height: 16px; border-radius: 4px; background: var(--c, var(--he-rojo)); -webkit-mask: radial-gradient(circle at 50% 50%, #000 45%, transparent 47%); mask: radial-gradient(circle at 50% 50%, #000 45%, transparent 47%); }
.he-genero--1 { --c: #ff4d4f; } .he-genero--2 { --c: #f5a524; } .he-genero--3 { --c: #ffd43b; } .he-genero--4 { --c: #4dabf7; }
.he-genero--5 { --c: #b197fc; } .he-genero--6 { --c: #ff6b9a; } .he-genero--7 { --c: #8ce99a; } .he-genero--8 { --c: #da77f2; } .he-genero--9 { --c: #63e6be; }
.he-genero--mas span { letter-spacing: 2px; }

/* ---------- Columnas y secciones ---------- */
.he-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding-top: 18px; padding-bottom: 40px; }
.he-principal { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.he-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.he-titulo h2 { position: relative; margin: 0; padding-left: 14px; color: var(--he-texto); font: 700 24px/1.1 var(--he-titulos); letter-spacing: .02em; text-transform: uppercase; }
.he-titulo h2::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px; border-radius: 2px; background: var(--he-rojo); }
.he-titulo--chico h2 { font-size: 19px; }
.he-ver { color: var(--he-texto-2) !important; font: 600 12px/1 var(--he-cuerpo); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.he-ver:hover { color: #fff !important; }

/* Últimos capítulos */
.he-fila { position: relative; }
.he-fila-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.he-fila-pista::-webkit-scrollbar { display: none; }
.he-cap { scroll-snap-align: start; min-width: 0; }
.he-cap-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--he-radio); background: var(--he-superficie-2); }
.he-cap-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.he-cap:hover .he-cap-img img { transform: scale(1.06); }
.he-epi { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 3px; background: var(--he-rojo); color: #fff; font: 700 12px/1 var(--he-cuerpo); }
.he-play { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--he-rojo); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.he-cap h3, .he-poster h3 { margin: 10px 0 2px; overflow: hidden; color: var(--he-texto); font: 600 14px/1.3 var(--he-cuerpo); text-overflow: ellipsis; white-space: nowrap; }
.he-cap p { margin: 0; color: var(--he-texto-2); font-size: 13px; }
.he-fila-flecha { position: absolute; top: calc((100% - 50px) / 2); right: -14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--he-linea); border-radius: 50%; background: var(--he-superficie); color: var(--he-texto); cursor: pointer; transform: translateY(-50%); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.he-fila-flecha--izq { right: auto; left: -14px; }
.he-fila--inicio .he-fila-flecha--izq, .he-fila--fin .he-fila-flecha:not(.he-fila-flecha--izq) { display: none; }

/* Pósters */
.he-grilla { display: grid; gap: 14px; }
.he-grilla--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.he-grilla--6 > .he-poster:nth-child(n+7) { display: none; }
.he-poster { min-width: 0; padding: 0 0 10px; border-radius: var(--he-radio); background: var(--he-superficie); transition: background .2s; }
.he-poster:hover { background: var(--he-superficie-2); }
.he-poster-img { position: relative; aspect-ratio: 225 / 314; overflow: hidden; border-radius: var(--he-radio) var(--he-radio) 0 0; background: var(--he-superficie-2); }
.he-poster-img--ancha { aspect-ratio: 1 / 1.05; }
.he-poster-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.he-poster:hover .he-poster-img img { transform: scale(1.05); }
.he-mas { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font: 600 18px/1 var(--he-cuerpo); }
.he-poster h3 { padding: 0 8px; }
.he-meta { margin: 0 8px 6px; color: var(--he-texto-2); font-size: 12px; }
.he-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 8px; }
.he-chip { padding: 3px 8px; border-radius: 4px; background: var(--he-superficie-2); color: var(--he-texto-2); font: 500 11px/1.2 var(--he-cuerpo); }
.he-poster:hover .he-chip { background: var(--he-fondo-2); }

/* Tendencias */
.he-tendencias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.he-tendencias a { position: relative; display: flex; align-items: flex-end; height: 104px; }
.he-tend-num { position: relative; z-index: 2; margin-right: -14px; color: var(--he-fondo); font: 700 104px/.82 var(--he-titulos); -webkit-text-stroke: 2px #e8e9ec; }
.he-tend-img { position: relative; flex: 1; height: 100%; overflow: hidden; border-radius: var(--he-radio); }
.he-tend-img img { width: 100%; height: 100%; object-fit: cover; }
.he-tend-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent 60%); }
.he-tend-img b { position: absolute; left: 10px; right: 8px; bottom: 7px; z-index: 1; overflow: hidden; color: #fff; font: 600 13px/1.2 var(--he-cuerpo); text-overflow: ellipsis; white-space: nowrap; }
.he-tendencias a:hover .he-tend-num { -webkit-text-stroke-color: var(--he-rojo); }

/* ---------- Lateral ---------- */
.he-lateral { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.he-tarjeta { padding: 16px; border: 1px solid var(--he-linea); border-radius: 10px; background: var(--he-superficie); }
.he-proximos, .he-top { margin: 0; padding: 0; list-style: none; }
.he-proximos li + li, .he-top li + li { border-top: 1px solid var(--he-linea); }
.he-proximos li:nth-child(n+5) { display: none; }
.he-proximos a { display: grid; grid-template-columns: 46px 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 0; }
.he-fecha { display: grid; justify-items: center; padding: 6px 0; border-radius: 6px; background: var(--he-superficie-2); line-height: 1; }
.he-fecha small { color: var(--he-texto-2); font: 600 11px var(--he-cuerpo); }
.he-fecha b { margin-top: 3px; color: var(--he-texto); font: 700 20px var(--he-titulos); }
.he-proximos img { width: 40px; height: 52px; border-radius: 4px; object-fit: cover; }
.he-prox-txt { display: grid; gap: 5px; min-width: 0; }
.he-prox-txt b { overflow: hidden; color: var(--he-texto); font: 600 13px/1.25 var(--he-cuerpo); text-overflow: ellipsis; white-space: nowrap; }
.he-prox-txt .he-chips { margin: 0; }
.he-top a { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; }
.he-top-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--he-linea); border-radius: 4px; color: var(--he-texto); font: 700 13px var(--he-cuerpo); }
.he-top-num.is-primero { border-color: var(--he-rojo); background: var(--he-rojo); color: #fff; }
.he-top img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; }
.he-top b { overflow: hidden; color: var(--he-texto); font: 600 13px/1.25 var(--he-cuerpo); text-overflow: ellipsis; white-space: nowrap; }
.he-top a:hover b, .he-proximos a:hover b { color: var(--he-rojo); }
.he-comunidad { background: linear-gradient(160deg, #1a2140, var(--he-superficie) 70%); }
.he-comunidad-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.he-comunidad-ico { color: #7c93ff; }
.he-comunidad h2, .he-manga h2 { margin: 0; color: var(--he-texto); font: 700 19px/1.15 var(--he-titulos); text-transform: uppercase; }
.he-comunidad p, .he-manga p { margin: 0 0 14px; color: var(--he-texto-2); font-size: 13px; line-height: 1.5; }
.he-manga { position: relative; min-height: 150px; overflow: hidden; padding-right: 40%; }
.he-manga-arte { position: absolute; top: 0; right: 0; width: 45%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); filter: grayscale(1) contrast(1.1); }
.he-manga-arte ~ .he-manga-arte { display: none; }
.he-manga h2, .he-manga p, .he-manga .he-btn { position: relative; }
.he-manga .he-btn { min-height: 38px; padding: 0 18px; font-size: 14px; }

/* ---------- Pie ---------- */
.he-pie { margin-top: 20px; border-top: 2px solid var(--he-rojo); background: #050608; color: #c9ccd3; }
.he-pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 18px; flex-wrap: wrap; }
.he-pie-marca p { margin: 10px 0 0; color: #9aa1ad; font-size: 14px; }
.he-pie-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.he-pie-nav a { color: #c9ccd3 !important; font-size: 14px; }
.he-pie-nav a:hover { color: #fff !important; }
.he-pie-redes { display: flex; align-items: center; gap: 6px; }
.he-arriba { border: 1px solid #2c3038; }
.he-pie-legal { padding-bottom: 22px; color: #6d7380; font-size: 12px; }

/* ---------- Otras páginas (componentes de hrd.css sobre fondo oscuro) ---------- */
.he .hrd { color: var(--he-texto); }
.he .hrd-caja { border: 1px solid var(--he-linea); background: var(--he-superficie); }
.he .hrd-btn-secundario { border-color: var(--he-linea); background: var(--he-superficie-2); color: var(--he-texto); }
.he .hrd-btn-primario { background: var(--he-rojo); color: #fff; }
.he .hrd-chip, .he .hrd-segmentado button { color: var(--he-texto-2); }
.he .hrd-titulo-seccion h1, .he .hrd-titulo-seccion h2, .he h1, .he h2, .he h3 { color: var(--he-texto); }
.he .hrd-titulo-seccion h1, .he .hrd-titulo-seccion h2:not(.hrd-neutro) { font-family: var(--he-titulos); text-transform: uppercase; letter-spacing: .02em; }
.he input, .he select, .he textarea { color: var(--he-texto); background-color: var(--he-superficie-2); border-color: var(--he-linea); }
.he .hrd-tabla th { color: var(--he-texto-2); }
.he .hrd-tabla td { border-color: var(--he-linea); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .he-nav a { padding: 0 8px; }
  .he-cab { gap: 16px; }
  .he-grilla--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .he-grilla--6 > .he-poster:nth-child(n+5) { display: none; }
}
@media (max-width: 1000px) {
  .he-columnas { grid-template-columns: minmax(0, 1fr); }
  .he-lateral { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-hero-minis { display: none; }
  .he-slide-arte { right: 0; max-width: 75%; }
  .he-fila-pista { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
  .he-tendencias { grid-auto-flow: column; grid-auto-columns: 210px; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 860px) {
  .he-cab { height: 56px; gap: 10px; }
  .he-nav.hrd-nav { position: absolute; top: 56px; left: 0; right: 0; display: none; flex-direction: column; height: auto; padding: 8px 0; background: #050608; border-bottom: 2px solid var(--he-rojo); }
  .he-nav.hrd-nav.hrd-abierto { display: flex; }
  .he-nav a { padding: 14px 20px; }
  .he-nav a[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .he-buscador.hrd-buscador { display: none; }
  .he-acciones { margin-left: auto; }
  .he-logo-he { height: 36px; font-size: 23px; }
  .he-logo-txt { font-size: 15px; }
  .he-hero { height: 520px; }
  .he-slide-arte { top: 0; right: 0; height: 58%; max-width: 100%; width: 100%; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%); mask-image: linear-gradient(0deg, transparent 0, #000 40%); }
  .he-slide::after { background: linear-gradient(0deg, var(--he-fondo) 0%, rgba(5, 6, 8, .85) 45%, rgba(5, 6, 8, .1) 75%); }
  .he-slide-texto { justify-content: flex-end; padding-bottom: 70px; gap: 10px; }
  .he-slide-sinopsis { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  .he-lateral { grid-template-columns: minmax(0, 1fr); }
  .he-grilla--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .he-grilla--6 > .he-poster:nth-child(n+5) { display: block; }
  .he-grilla--6 > .he-poster:nth-child(n+7) { display: none; }
}
@media (max-width: 560px) {
  .he-contenedor, .he-cab { padding: 0 14px; }
  .he-fila-pista { grid-auto-columns: 72%; }
  .he-grilla--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .he-titulo h2 { font-size: 20px; }
  .he-fila-flecha { display: none; }
  .he-pie-fila { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .he-slide, .he-cap-img img, .he-poster-img img, .he-btn { transition: none; }
}

/* ---------- Ajustes sobre hrd.css ---------- */
.he .he-icono.hrd-solo-movil { display: none; }
.he-buscador svg { position: static; color: inherit; }
.he-btn { box-sizing: border-box; }
.he-hero { max-width: 100%; }
.he-buscador input[type="search"] { padding: 0; border: 0; background: transparent !important; box-shadow: none; }
body.he { overflow-x: hidden; }
@media (max-width: 860px) {
  .he .he-icono.hrd-solo-movil { display: inline-flex; }
}

/* Textos y botones de hrd.css con colores fijos pensados para fondo claro */
.he .hrd-sinopsis, .he .hrd-sinopsis-ep p { color: #c3c7cf; }
.he .hrd-opciones { background: var(--he-superficie-2); }
.he .hrd-opciones .hrd-opcion-aportar { background: transparent; color: #ff6b70; border-color: var(--he-rojo); }
.he .hrd-opciones .hrd-opcion-aportar:hover { background: var(--he-rojo-tinte); }
.he .hrd-aporte-sello, .he .hrd-opciones .hrd-opcion-votacion { background: rgba(245, 165, 36, .14); color: #f5b84a; }
.he .hrd-aporte-voto--no, .he .hrd-alerta-error { background: rgba(227, 38, 44, .12); color: #ff8a8e; }
.he .hrd-aportes-servidores--marcar, .he .hrd-aportes-aviso { background: var(--he-rojo-tinte); color: #ffb3b6; }
html.he-claro .he .hrd-sinopsis, html.he-claro .he .hrd-sinopsis-ep p { color: #3a3f48; }
@media (max-width: 560px) {
  .he-acciones { gap: 0; }
  .he-acciones a.he-icono[href*="proximos"] { display: none; }
  .he-acciones .hrd-entrar { padding: 0 12px; font-size: 14px; }
  .he-logo-txt { font-size: 14px; }
}

/* ---------- Página de episodio (hev-*) ----------
   Distinta a hentaird a propósito: escenario de cine con la portada
   desenfocada, episodios al lado del video y, justo debajo, la app y la
   comunidad (lo que se quiere promocionar) antes que la ficha. */
.he-btn-blanco { background: #fff; color: #b81b20 !important; }
.he-btn-blanco:hover { background: #ffe9ea; }
.hev .he-contenedor { width: 100%; }

.hev-escenario { position: relative; overflow: hidden; padding: 18px 0 30px; background: #050608; isolation: isolate; }
.hev-escenario::before { content: ""; position: absolute; inset: -60px; z-index: -2; background: var(--hev-fondo) center 30% / cover no-repeat; filter: blur(48px) saturate(1.5) brightness(.42); transform: scale(1.1); }
.hev-escenario::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 0, transparent 0, rgba(5, 6, 8, .55) 70%), linear-gradient(0deg, var(--he-fondo) 0, transparent 120px); }
.hev .hev-migas, .hev .hev-migas a { color: rgba(255, 255, 255, .7) !important; }
.hev .hev-migas a:hover { color: #fff !important; }
.hev-cabeza { display: flex; align-items: center; gap: 14px; margin: 10px 0 16px; min-width: 0; }
.hev-cabeza h1 { margin: 0; min-width: 0; overflow: hidden; color: #fff !important; font: 700 clamp(22px, 3vw, 34px)/1.1 var(--he-titulos); letter-spacing: .01em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.hev-cabeza h1 a { color: inherit !important; }
.hev-cabeza .he-etiqueta { flex: none; }

.hev-sala { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.hev-pantalla { min-width: 0; }
.hev .hrd-reproductor-video { border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); }
.hev .hev-barra { margin-top: 14px; }
.hev .hev-barra .hrd-opciones { flex-wrap: wrap; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .08); }

.hev-eps { display: flex; flex-direction: column; min-width: 0; max-height: 520px; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(10, 11, 14, .6); backdrop-filter: blur(8px); box-sizing: border-box; }
.hev-eps h2 { margin: 0 0 10px; color: #fff !important; font: 600 15px/1 var(--he-titulos); letter-spacing: .08em; text-transform: uppercase; }
.hev-eps-lista { display: grid; align-content: start; gap: 6px; flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
/* En escritorio la caja mide lo mismo que el video: la lista se desplaza adentro */
@media (min-width: 1001px) {
  .hev-sala { align-items: stretch; }
  .hev-eps { max-height: none; min-height: 260px; contain: size; }
}
.hev-eps-app { display: none; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 8px; background: linear-gradient(120deg, #8e1015, #e3262c); color: #fff !important; }
.hev-eps-app[data-app="1"] { display: flex; }
.hev-eps-app .hev-tel-icono { width: 36px; height: 36px; flex: none; background: rgba(0, 0, 0, .25); }
.hev-eps-app b { display: block; font-size: 13px; }
.hev-eps-app small { display: block; color: rgba(255, 255, 255, .85); font-size: 12px; }
.hev-eps-app:hover { filter: brightness(1.1); }
.hev-eps-lista a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 7px; color: #e6e7ea !important; }
.hev-eps-lista a:hover { background: rgba(255, 255, 255, .07); }
.hev-eps-lista a[aria-current="page"] { background: var(--he-rojo); color: #fff !important; }
.hev-eps-lista a[aria-current="page"] small { color: rgba(255, 255, 255, .85); }
.hev-eps-img { flex: 0 0 92px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; background: #000; }
.hev-eps-img img { width: 100%; height: 100%; object-fit: cover; }
.hev-eps-lista b { display: block; font-size: 14px; }
.hev-eps-lista small { display: block; color: var(--he-texto-2); font-size: 12px; }

/* La app y la comunidad */
.hev-promo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 4px; margin-bottom: 30px; }
.hev-promo[data-app=""] { grid-template-columns: minmax(0, 1fr); }
.hev-promo[data-app=""] .hev-promo-app { display: none; }
.hev-promo-app, .hev-promo-comu { position: relative; display: flex; align-items: center; gap: 20px; min-width: 0; padding: 22px 24px; overflow: hidden; border-radius: 14px; color: #fff !important; transition: transform .2s; }
.hev-promo-app:hover, .hev-promo-comu:hover { transform: translateY(-2px); }
.hev-promo-app { background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18), transparent 45%), linear-gradient(120deg, #8e1015, #e3262c 60%, #ff5a3c); box-shadow: 0 18px 40px rgba(227, 38, 44, .25); }
.hev-promo-comu { background: radial-gradient(circle at 90% 10%, rgba(124, 147, 255, .35), transparent 50%), linear-gradient(120deg, #161b33, #26306b); border: 1px solid rgba(124, 147, 255, .25); }
.hev-promo-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hev-promo-sobre { color: rgba(255, 255, 255, .75); font: 700 11px/1 var(--he-cuerpo); letter-spacing: .14em; text-transform: uppercase; }
.hev-promo-txt strong { font: 700 22px/1.15 var(--he-titulos); text-transform: uppercase; letter-spacing: .01em; }
.hev-promo-bajada { color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hev-promo-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.hev-promo-pie .he-btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.hev-promo-pie .he-btn-azul { width: auto; }
.hev-promo-pie small { color: rgba(255, 255, 255, .8); font-size: 12px; }
/* Teléfono dibujado: muestra la captura de la app si el admin la subió */
.hev-tel { flex: none; width: 92px; height: 170px; padding: 6px; border-radius: 18px; background: #0b0c0f; box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .15); transform: rotate(-8deg); }
.hev-tel-pantalla { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; border-radius: 13px; background: linear-gradient(160deg, #2a0d10, #0b0c0f); }
.hev-tel-pantalla > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hev-tel-icono { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 11px; background: var(--he-rojo); overflow: hidden; }
.hev-tel-pantalla > img ~ .hev-tel-icono { display: none; }
.hev-tel-icono img { width: 100%; height: 100%; object-fit: cover; }
.hev-caras { flex: none; display: flex; }
.hev-caras i { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-left: -12px; border: 3px solid #1d2450; border-radius: 50%; color: #fff; font: 700 17px/1 var(--he-cuerpo); font-style: normal; }
.hev-caras i:first-child { margin-left: 0; background: #e3262c; }
.hev-caras i:nth-child(2) { background: #7c5cff; }
.hev-caras i:nth-child(3) { background: #12b886; }
.hev-caras i:nth-child(4) { background: #3b5bdb; }

/* Cuerpo: ficha, descargas, aportes */
.hev-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; padding-bottom: 40px; }
.hev-principal { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.hev-lateral { display: grid; gap: 18px; min-width: 0; position: sticky; top: 84px; }
.hev-ficha { display: flex; gap: 22px; align-items: flex-start; }
.hev-poster { flex: 0 0 150px; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.hev-poster img { width: 100%; height: 100%; object-fit: cover; }
.hev-ficha-txt { flex: 1 1 auto; min-width: 0; }
.hev-ficha .hrd-datos { margin-top: 0; }
.hev-ficha .hrd-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.hev-descargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hev-descarga { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--he-linea); border-radius: 10px; background: var(--he-superficie); color: var(--he-texto) !important; transition: border-color .15s, background .15s; }
.hev-descarga:hover { border-color: var(--he-rojo); background: var(--he-superficie-2); }
.hev-descarga > svg { flex: none; margin-left: auto; color: var(--he-rojo); }
.hev-descarga-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--he-rojo-tinte); color: #ff6b70; font: 700 15px/1 var(--he-titulos); }
.hev-descarga-txt { min-width: 0; }
.hev-descarga-txt b { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.hev-descarga-txt small { color: var(--he-texto-2); font-size: 12px; }

html.he-claro .hev-descarga-num { color: var(--he-rojo); }

@media (max-width: 1000px) {
  .hev-sala, .hev-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .hev-eps { max-height: none; padding: 12px 0 0; border: 0; background: transparent; backdrop-filter: none; }
  .hev-eps-lista { flex: none; grid-auto-flow: column; grid-auto-columns: 170px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .hev-eps-lista a { flex-direction: column; align-items: stretch; gap: 6px; background: rgba(255, 255, 255, .05); }
  .hev-eps-img { flex: none; width: 100%; }
  .hev-lateral { position: static; }
}
@media (max-width: 760px) {
  .hev-promo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hev-promo-app, .hev-promo-comu { padding: 18px; gap: 16px; }
  .hev-promo-txt strong { font-size: 19px; }
  .hev-tel { width: 70px; height: 130px; border-radius: 14px; }
  .hev-caras i { width: 38px; height: 38px; font-size: 15px; }
}
@media (max-width: 560px) {
  .hev-escenario { padding-top: 12px; }
  .hev-escenario > .he-contenedor { padding: 0; }
  .hev-migas, .hev-cabeza, .hev-eps { padding-left: 14px !important; padding-right: 14px !important; }
  .hev .hrd-reproductor-video { border-radius: 0; }
  .hev-cabeza { flex-wrap: wrap; gap: 8px; }
  .hev-cabeza h1 { white-space: normal; }
  .hev-ficha { flex-direction: column; }
  .hev-poster { display: none; }
  .hev-caras { display: none; }
  .hev-descargas { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hev-promo-app, .hev-promo-comu { transition: none; }
}

/* ======================================================================
   Menú, app, géneros y ficha (diseño propio, no el de hentaird)
   ====================================================================== */

/* Menú: "Mi lista" va como ícono en escritorio y dentro del menú en el celular */
.he-nav .he-nav-lista { display: none; }
.he-app-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border: 1px solid rgba(61, 220, 132, .55); border-radius: 999px; background: linear-gradient(135deg, rgba(61, 220, 132, .18), rgba(61, 220, 132, .04)); color: #c9f7dc !important; font: 600 13px/1 var(--he-cuerpo); white-space: nowrap; transition: background .2s, border-color .2s; }
.he-app-btn svg { color: #3ddc84; }
.he-app-btn b { color: #3ddc84; }
.he-app-btn:hover { border-color: #3ddc84; background: rgba(61, 220, 132, .22); }
.he-app-btn[href=""] { display: none; }

/* Tarjeta de la app (app-promo.css) con los colores del sitio */
.he .app-card { border: 1px solid rgba(61, 220, 132, .35); border-radius: 10px; background: linear-gradient(160deg, #0f2a1d, var(--he-superficie) 65%); box-shadow: none; }
.he .app-card-hero { background: radial-gradient(circle at 70% 20%, rgba(61, 220, 132, .35), transparent 60%), #0b1a13; }
.he .app-card-head strong { color: var(--he-texto); font-family: var(--he-titulos); font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.he .app-card-head small, .he .app-card-body p { color: var(--he-texto-2); }
.he .app-icono { color: #3ddc84; }
.he .app-btn { background: #3ddc84; color: #06140c !important; font-weight: 700; }
.he .app-btn:hover { background: #5be79a; }

/* Encabezado de página */
.he-pagina { padding-bottom: 40px; }
.he-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--he-texto-2); font-size: 13px; }
.he-migas a { color: var(--he-texto-2) !important; }
.he-migas a:hover { color: var(--he-texto) !important; }
.he-migas > span:last-child { overflow: hidden; color: var(--he-texto); text-overflow: ellipsis; white-space: nowrap; }
.he-encabezado { padding-top: 26px; padding-bottom: 6px; }
.he-encabezado-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.he-h1 { margin: 0; color: var(--he-texto); font: 700 clamp(30px, 4vw, 46px)/1.05 var(--he-titulos); letter-spacing: .01em; text-transform: uppercase; }
.he-bajada { margin: 8px 0 0; color: var(--he-texto-2); font-size: 15px; }
.he-bajada b { color: var(--he-texto); }
.he-bajada--info:empty { display: none; }
.he-bajada--info { max-width: 720px; font-size: 14px; line-height: 1.55; }
.he-filtro { display: flex; align-items: center; gap: 10px; width: min(340px, 100%); height: 46px; padding: 0 16px; border: 1px solid var(--he-linea); border-radius: 999px; background: var(--he-superficie); color: var(--he-texto-2); }
.he-filtro:focus-within { border-color: var(--he-rojo); }
.he-filtro input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent !important; color: var(--he-texto); font: 500 15px var(--he-cuerpo); outline: none; box-shadow: none; }
.he-titulo-extra { margin-left: auto; color: var(--he-texto-2); font-size: 13px; white-space: nowrap; }
.he-titulo .he-titulo-extra + .he-btn-chico { margin-left: 0; }
.he-seccion { margin-top: 26px; }
.he-vacio { margin: 10px 0; padding: 22px; border: 1px dashed var(--he-linea); border-radius: 10px; color: var(--he-texto-2); text-align: center; }
.he-vacio[hidden] { display: none; }
.he-sc { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 3px; background: var(--he-rojo); color: #fff; font: 700 10px/1.2 var(--he-cuerpo); letter-spacing: .04em; text-transform: uppercase; }

/* Géneros: populares con portada */
.he-gen-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.he-gen-card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--he-superficie-2); isolation: isolate; }
.he-gen-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .4s; z-index: -1; }
.he-gen-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 6, 8, .95) 8%, rgba(5, 6, 8, .25) 60%, rgba(227, 38, 44, .15)); }
.he-gen-card:hover img { transform: scale(1.07); }
.he-gen-card:hover { outline: 2px solid var(--he-rojo); outline-offset: -2px; }
.he-gen-puesto { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; background: var(--he-rojo); color: #fff; font: 700 12px/1 var(--he-cuerpo); }
.he-gen-pie { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 4px; }
.he-gen-pie b { color: #fff; font: 700 24px/1.05 var(--he-titulos); text-transform: uppercase; letter-spacing: .02em; }
.he-gen-pie small { color: #d0d3da; font-size: 13px; }

/* Géneros: todos A-Z */
.he-gen-todos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.he-gen-todo[hidden] { display: none; }
.he-gen-todo a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--he-linea); border-radius: 10px; background: var(--he-superficie); transition: border-color .2s, background .2s; }
.he-gen-todo a:hover { border-color: var(--he-rojo); background: var(--he-superficie-2); }
.he-gen-todo img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.he-gen-todo b { overflow: hidden; color: var(--he-texto); font: 600 14px/1.2 var(--he-cuerpo); text-overflow: ellipsis; white-space: nowrap; }
.he-gen-todo small { padding: 3px 8px; border-radius: 999px; background: var(--he-superficie-2); color: var(--he-texto-2); font: 600 11px/1.2 var(--he-cuerpo); }

/* Página de un género */
.he-encabezado--arte { position: relative; overflow: hidden; padding: 30px 0 34px; background: #050608; isolation: isolate; }
.he-encabezado-fondo { position: absolute; inset: -30px; z-index: -1; background-size: cover; background-position: center 30%; filter: blur(26px) brightness(.4) saturate(1.3); }
.he-encabezado--arte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--he-fondo), transparent 70%); }
.he-encabezado--arte .he-etiqueta { display: inline-block; margin-bottom: 10px; }
.he-encabezado--arte .he-h1, .he-encabezado--arte .he-migas > span:last-child { color: #fff; }
.he-encabezado--arte .he-bajada { color: #c3c7cf; }
.he-encabezado--arte .he-bajada b { color: #fff; }
.he-grilla--lista > .he-poster { display: block !important; }
.he-grilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.he-paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 26px; }
.he-paginacion a, .he-paginacion span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--he-linea); border-radius: 8px; background: var(--he-superficie); color: var(--he-texto) !important; font-weight: 600; }
.he-paginacion a:hover { border-color: var(--he-rojo); }
.he-paginacion [aria-current="page"] { border-color: var(--he-rojo); background: var(--he-rojo); color: #fff !important; }

/* Botones extra */
.he-btn-oscuro { border: 1px solid rgba(255, 255, 255, .14); background: rgba(21, 23, 28, .85); color: #fff !important; }
.he-btn-oscuro:hover { border-color: rgba(255, 255, 255, .35); background: rgba(40, 43, 52, .9); }
.he-btn-grande { padding: 0 26px; box-shadow: 0 8px 24px rgba(227, 38, 44, .35); }
.he-btn-chico { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--he-linea); border-radius: 6px; background: var(--he-superficie-2); color: var(--he-texto); font: 600 13px/1 var(--he-cuerpo); cursor: pointer; }
.he-btn-chico:hover { border-color: var(--he-rojo); }
.he-btn-chico-rojo { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- Ficha ---------- */
.he-ficha-pagina { position: relative; }
.he-ficha-fondo { position: absolute; top: 0; left: 0; right: 0; height: 640px; overflow: hidden; z-index: 0; pointer-events: none; }
.he-ficha-fondo img { position: absolute; top: 0; right: 0; width: 72%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 40%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 45%), linear-gradient(0deg, transparent, #000 40%); mask-composite: intersect; }
.he-ficha-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--he-fondo) 18%, transparent 70%), linear-gradient(0deg, var(--he-fondo), transparent 45%); }
.he-ficha-wrap { position: relative; z-index: 1; padding-top: 22px; }
.he-ficha { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; max-width: 900px; padding: 18px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(13, 14, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.he-ficha-poster img { display: block; width: 100%; height: auto; aspect-ratio: 230 / 322; border-radius: 10px; object-fit: cover; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.he-ficha-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.he-ficha-info h1 { margin: 0; color: #fff; font: 800 clamp(26px, 3.2vw, 38px)/1.1 "Montserrat", var(--he-cuerpo); letter-spacing: -.01em; }
.he-ficha-info .hrd-alt { margin: -8px 0 0; color: var(--he-texto-2); font-size: 13px; }
.he-ficha-datos { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; color: #c9ccd3; font-size: 14px; }
.he-ficha-datos li { display: inline-flex; align-items: center; gap: 6px; }
.he-ficha-datos li + li::before { content: ""; width: 1px; height: 14px; margin: 0 12px; background: rgba(255, 255, 255, .2); }
.he-ficha-datos b { color: #fff; }
.he-cs { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #6d7380; vertical-align: 1px; }
.he-cs--s { background: var(--he-rojo); }
.he-ficha-generos { display: flex; flex-wrap: wrap; gap: 8px; }
.he .he-ficha-generos .hrd-chip { padding: 7px 14px; border: 1px solid rgba(227, 38, 44, .35); border-radius: 999px; background: rgba(227, 38, 44, .14); color: #ffd6d7 !important; font: 500 13px/1 var(--he-cuerpo); }
.he .he-ficha-generos .hrd-chip:hover { background: rgba(227, 38, 44, .3); }
.he-ficha-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.he-ficha-botones .he-btn { min-height: 48px; }
.he .he-ficha-botones .hrd-lista-boton .hrd-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(21, 23, 28, .85); color: #fff; font: 600 15px/1 var(--he-cuerpo); }
.he .he-ficha-botones .hrd-lista-boton .hrd-btn:hover { border-color: rgba(255, 255, 255, .35); }
.he-ficha-sinopsis { margin: 0; color: #d6d8dd; font-size: 15px; line-height: 1.6; }
.he-ficha-cuadros { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.he-ficha-cuadros li { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; background: rgba(21, 23, 28, .8); }
.he-dato-ico { display: flex; color: var(--he-rojo); }
.he-ficha-cuadros small { display: block; color: var(--he-texto-2); font-size: 11px; }
.he-ficha-cuadros b { display: block; color: #fff; font: 600 13px/1.3 var(--he-cuerpo); }
.he-ficha-cuerpo { position: relative; z-index: 1; }
.he-admin { display: flex; flex-wrap: wrap; gap: 10px; }

/* Episodios */
.he-episodios .he-titulo { flex-wrap: wrap; }
.he-episodios .he-titulo h2 { font-size: 20px; }
.he-eps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.he-ep { display: block; min-width: 0; padding-bottom: 10px; border: 1px solid var(--he-linea); border-radius: 10px; background: var(--he-superficie-2); overflow: hidden; transition: border-color .2s; }
.he-ep:hover { border-color: var(--he-rojo); }
.he-ep-img { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--he-fondo-2); }
.he-ep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.he-ep:hover .he-ep-img img { transform: scale(1.06); }
.he-ep .he-play { left: 10px; right: auto; top: 50%; bottom: auto; width: 34px; height: 34px; background: var(--he-rojo); color: #fff; transform: translateY(-50%); opacity: .9; }
.he-ep b { display: block; margin: 8px 10px 2px; color: var(--he-texto); font: 600 14px/1.3 var(--he-cuerpo); }
.he-ep small { display: block; margin: 0 10px; overflow: hidden; color: var(--he-texto-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.he-subtitulo { margin: 18px 0 10px; color: var(--he-texto); font: 600 16px var(--he-cuerpo); }
.he-chips--texto { color: var(--he-texto-2); font-size: 12px; }

/* Lateral de la ficha */
.he-recientes { margin: 0; padding: 0; list-style: none; }
.he-recientes li + li { border-top: 1px solid var(--he-linea); }
.he-recientes a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 9px 0; }
.he-recientes img { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; }
.he-recientes a > span { display: grid; gap: 4px; min-width: 0; }
.he-recientes b { overflow: hidden; color: var(--he-texto); font: 600 13px/1.25 var(--he-cuerpo); text-overflow: ellipsis; white-space: nowrap; }
.he-recientes .he-chips { margin: 0; }
.he-recientes small { color: var(--he-texto-2); font-size: 11px; }
.he-recientes a:hover b { color: var(--he-rojo); }
.he-nosabes { position: relative; overflow: hidden; isolation: isolate; }
.he-nosabes-fondo { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .28; filter: blur(2px); }
.he-nosabes::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--he-superficie) 30%, rgba(21, 23, 28, .6)); }
.he-nosabes-cuerpo { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
.he-nosabes-cuerpo img { width: 80px; height: 112px; border-radius: 6px; object-fit: cover; }
.he-nosabes-cuerpo > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.he-nosabes-cuerpo b { color: var(--he-texto); font: 700 15px/1.2 var(--he-cuerpo); }
.he-nosabes .he-sc { position: static; }
.he-nosabes .he-chips { margin: 0; }
.he-nosabes p { margin: 0; color: var(--he-texto-2); font-size: 12px; line-height: 1.45; }

/* Modo claro: la ficha mantiene su cabecera oscura sobre el arte */
html.he-claro .he-ficha { background: rgba(13, 14, 18, .82); }

@media (max-width: 1180px) {
  .he-app-btn span { display: none; }
  .he-app-btn { padding: 0 10px; }
  .he-gen-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .he-eps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .he-grilla--lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .he-grilla--5 > .he-poster:nth-child(5) { display: none; }
  .he-grilla--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .he-nav .he-nav-lista { display: block; }
  .he-solo-escritorio { display: none !important; }
  .he-gen-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-grilla--lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .he-ficha { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .he-ficha-fondo img { width: 100%; }
  .he-eps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .he-ficha { grid-template-columns: minmax(0, 1fr); }
  .he-ficha-poster { width: 150px; margin: 0 auto; }
  .he-ficha-info h1 { text-align: center; }
  .he-ficha-datos, .he-ficha-generos, .he-ficha-botones { justify-content: center; }
  .he-ficha-botones .he-btn, .he .he-ficha-botones .hrd-lista-boton, .he .he-ficha-botones .hrd-lista-boton .hrd-btn { flex: 1 1 100%; justify-content: center; }
  .he-gen-pie b { font-size: 19px; }
  .he-gen-todos { grid-template-columns: minmax(0, 1fr); }
  .he-grilla--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-grilla--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-grilla--5 > .he-poster:nth-child(5) { display: none; }
  .he-encabezado-fila { align-items: stretch; }
  .he-filtro { width: 100%; }
}
/* Ajustes ficha: la tarjeta ocupa lo mismo que la columna principal; títulos del lateral en una línea */
.he-ficha { max-width: calc(100% - 324px); }
.he-lateral .he-titulo--chico h2 { font-size: 16px; white-space: nowrap; }
.he-chips--texto { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1000px) { .he-ficha { max-width: none; } }
.he-ficha { box-sizing: border-box; }
.he-lateral .he-titulo--chico { gap: 8px; }
.he-lateral .he-titulo--chico h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.he-lateral .he-ver { flex: none; font-size: 11px; letter-spacing: .04em; }
@media (max-width: 560px) {
  .he-ficha-datos { gap: 4px 14px; }
  .he-ficha-datos li + li::before { display: none; }
}
/* La ficha va dentro de la columna principal: el lateral arranca a su altura y no queda hueco */
.he-ficha { max-width: none; }
.he-ficha-cuerpo { padding-top: 0; }
.he-ficha-wrap { padding-top: 22px; }
.he-ficha-wrap .he-migas { margin-bottom: 14px; }
/* Cabecera: el buscador cede lugar para que entren la app y Entrar */
.he-buscador.hrd-buscador { min-width: 150px; flex: 1 1 300px; max-width: 300px; }
.he-cab { min-width: 0; }
.he-app-btn span { color: #3ddc84; font-weight: 700; }
@media (max-width: 1180px) { .he-app-btn span { display: inline; } }
@media (max-width: 1000px) { .he-app-btn span { display: none; } }
/* Pantallas medianas: el menú pasa al botón de tres rayas para que entren buscador, app y Entrar */
@media (max-width: 1300px) {
  .he .he-icono.hrd-solo-movil[data-hrd-menu] { display: inline-flex; }
  .he-cab { position: relative; }
  .he-nav.hrd-nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; display: none; flex-direction: column; height: auto; padding: 8px 0; background: #050608; border-bottom: 2px solid var(--he-rojo); }
  .he-nav.hrd-nav.hrd-abierto { display: flex; }
  .he-nav a { padding: 14px 20px; }
  .he-nav a[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .he-nav .he-nav-lista { display: block; }
  .he-buscador.hrd-buscador { max-width: 420px; }
}
@media (max-width: 400px) {
  .he-cab { gap: 6px; padding: 0 10px; }
  .he-acciones .he-icono { width: 34px; }
  .he-app-btn { height: 34px; padding: 0 8px; }
  .he-logo-he { height: 32px; font-size: 20px; padding: 0 5px; }
  .he-logo-txt { font-size: 12px; padding-left: 5px; }
  .he-acciones .hrd-entrar { padding: 0 10px; }
}
@media (max-width: 340px) { .he-acciones [data-he-tema] { display: none; } }

/* ---------- Censura escrita en la portada ----------
   En vez del cuadradito con la letra (S/C) de hentaird: una cinta con el
   texto, pegada al borde izquierdo. "Sin censura" en rojo (es lo que se
   busca), "Con censura" en vidrio oscuro para que no compita. */
.he .hrd-portada .hrd-censura { left: 0; top: 10px; z-index: 2; width: auto; height: auto; padding: 6px 10px 5px 9px; border-radius: 0 4px 4px 0; font: 600 11px/1 var(--he-titulos); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.he .hrd-portada .hrd-censura.hrd-s { background: var(--he-rojo); color: #fff; }
.he .hrd-portada .hrd-censura.hrd-c { background: rgba(8, 9, 12, .78); color: #c9ccd3; border-left: 3px solid #6d7380; padding-left: 7px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* En la ficha va al lado del texto: solo un punto de color */
.he .hrd-censura-texto { width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; font-size: 0; vertical-align: 1px; }
.he .hrd-censura-texto.hrd-s { background: var(--he-rojo); }
.he .hrd-censura-texto.hrd-c { background: #6d7380; }

/* ---------- Carrusel con fondo ancho ----------
   Detrás va una imagen horizontal: la propia del destacado (panel > Slider > Fondo)
   o la del tema. La portada del título flota a la derecha como tarjeta. */
.he-slide-fondo { inset: 0; background-position: center; background-size: cover; filter: none; transform: none; }
.he-slide::after { background: linear-gradient(90deg, rgba(5, 6, 8, .94) 0%, rgba(5, 6, 8, .72) 32%, rgba(5, 6, 8, .15) 62%, rgba(5, 6, 8, .35) 100%), linear-gradient(0deg, var(--he-fondo) 0%, transparent 28%); }
.he-slide-arte { top: 50%; right: calc(var(--he-margen) + 140px); z-index: 1; display: block; width: auto; max-width: none; height: 74%; aspect-ratio: 225 / 314; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 6px rgba(227, 38, 44, .12); transform: translateY(-54%) rotate(2deg); -webkit-mask-image: none; mask-image: none; transition: transform .5s ease; }
.he-slide-arte img { width: 100%; height: 100%; object-fit: cover; }
.he-slide.is-activo .he-slide-arte { transform: translateY(-54%) rotate(0deg); }
.he-slide--propio .he-slide-arte { display: none; }
.he-slide--propio::after { background: linear-gradient(90deg, rgba(5, 6, 8, .92) 0%, rgba(5, 6, 8, .6) 35%, rgba(5, 6, 8, 0) 65%), linear-gradient(0deg, var(--he-fondo) 0%, transparent 28%); }
@media (max-width: 1000px) {
  .he-slide-arte { right: calc(var(--he-margen) + 10px); height: 66%; }
}
@media (max-width: 860px) {
  .he-slide-fondo { background-position: 65% center; }
  .he-slide-arte { top: 18px; right: 16px; height: 150px; transform: rotate(2deg); }
  .he-slide.is-activo .he-slide-arte { transform: none; }
  .he-slide::after { background: linear-gradient(0deg, var(--he-fondo) 0%, rgba(5, 6, 8, .82) 45%, rgba(5, 6, 8, .2) 80%); }
}
/* ---------- Fondos del carrusel (panel > Fondos del carrusel) ----------
   propio: imagen del destacado sola · biblioteca: fondo decorativo + portada flotante
   clásico (sin biblioteca): la portada desenfocada de fondo + portada flotante */
.he-slide-arte { display: block; }
.he-slide--propio .he-slide-arte, .he-slide--sin-portada .he-slide-arte { display: none; }
.he-slide-fondo { background-position: 70% center; background-repeat: no-repeat; }
.he-capa--arriba { background-position-y: 12%; }
.he-capa--abajo { background-position-y: 88%; }
.he-capa--espejo { transform: scaleX(-1); }
.he-capa--tinte::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 100% at 65% 40%, rgba(227, 38, 44, .08), rgba(100, 6, 12, .55) 85%); }
.he-slide--clasico .he-slide-fondo { inset: -40px; background-size: cover; filter: blur(36px) saturate(1.5) brightness(.5); }
/* Encuadre "entera a la derecha": la imagen completa entre el texto y las miniaturas,
   con los bordes fundidos al negro (margen en vw: en background-position el % se mide distinto) */
.he-hero { --he-margen-vw: max(20px, calc((100vw - var(--he-ancho)) / 2 + 20px)); }
.he-capa--derecha { background-color: #050608; background-size: auto 128%; background-position: right calc(var(--he-margen-vw) + 170px) top 18%; }
.he-capa--derecha.he-capa--espejo { background-position: left calc(var(--he-margen-vw) + 170px) top 18%; }
.he-capa--derecha.he-capa--arriba { background-position-y: 6%; }
.he-capa--derecha.he-capa--abajo { background-position-y: 60%; }
.he-slide--biblioteca .he-capa--derecha::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #050608 0, #050608 calc(100% - var(--he-margen-vw) - 170px - 64vh), transparent calc(100% - var(--he-margen-vw) - 170px - 40vh)), linear-gradient(270deg, #050608 0, #050608 calc(var(--he-margen-vw) + 172px), transparent calc(var(--he-margen-vw) + 290px)); }
.he-capa--derecha.he-capa--espejo::before { transform: scaleX(-1); }
@media (max-width: 1000px) {
  .he-capa--derecha { background-position: right -40px top 18%; }
  .he-capa--derecha.he-capa--espejo { background-position: left -40px top 18%; }
}
@media (max-width: 860px) {
  .he-capa--derecha, .he-capa--derecha.he-capa--espejo { background-size: cover; background-position: 85% 10%; }
  .he-capa--derecha.he-capa--espejo { background-position: 15% 10%; }
  .he-slide--biblioteca .he-capa--derecha::before { display: none; }
}
/* Movimiento: el fondo se acerca despacio mientras el destacado está activo
   (scale/translate sueltos para no pisar el espejado de transform) */
@keyframes he-fondo-mover { from { scale: 1.14; translate: 2% 0; } to { scale: 1.02; translate: 0 0; } }
@keyframes he-arte-entrar { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
.he-slide.is-activo .he-slide-fondo { animation: he-fondo-mover 9s cubic-bezier(.2, .6, .3, 1) both; }
.he-slide.is-activo .he-slide-arte { animation: he-arte-entrar .8s .15s cubic-bezier(.2, .7, .3, 1) both; }
.he-slide.is-activo .he-slide-texto > * { animation: he-arte-entrar .6s cubic-bezier(.2, .7, .3, 1) both; }
.he-slide.is-activo .he-slide-texto > :nth-child(2) { animation-delay: .06s; }
.he-slide.is-activo .he-slide-texto > :nth-child(3) { animation-delay: .12s; }
.he-slide.is-activo .he-slide-texto > :nth-child(4) { animation-delay: .18s; }
.he-slide.is-activo .he-slide-texto > :nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .he-slide.is-activo .he-slide-fondo, .he-slide.is-activo .he-slide-arte, .he-slide.is-activo .he-slide-texto > * { animation: none; }
}
@media (max-width: 860px) {
  .he-slide-fondo { background-position: 80% center; }
  .he-capa--arriba { background-position-y: 10%; }
}

/* ---------- Texto para Google al pie de la portada ("Sobre HentaiEnLinea") ---------- */
.he-seo { padding-bottom: 10px; }
.he-seo-caja { position: relative; overflow: hidden; padding: 30px 32px 22px; border: 1px solid var(--he-linea); border-radius: 14px; background: radial-gradient(ellipse 60% 120% at 100% 0, rgba(227, 38, 44, .12), transparent 60%), var(--he-superficie); }
.he-seo-cab { max-width: 820px; }
.he-seo-cab .he-etiqueta { display: inline-block; margin-bottom: 12px; }
.he-seo h1 { margin: 0 0 12px; color: var(--he-texto); font: 700 clamp(26px, 3vw, 36px)/1.1 var(--he-titulos); text-transform: uppercase; letter-spacing: .01em; }
.he-seo-intro { margin: 0; color: var(--he-texto-2); font-size: 15px; line-height: 1.65; }
.he-seo-ventajas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; padding: 0; list-style: none; }
.he-seo-ventajas li { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--he-linea); border-radius: 10px; background: var(--he-superficie-2); }
.he-seo-ico { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--he-rojo-tinte); color: var(--he-rojo); }
.he-seo-ventajas b { color: var(--he-texto); font: 700 15px/1.2 var(--he-cuerpo); }
.he-seo-ventajas small { color: var(--he-texto-2); font-size: 12px; line-height: 1.35; }
.he-seo-texto { position: relative; max-height: 150px; overflow: hidden; transition: max-height .5s ease; }
.he-seo-texto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, var(--he-superficie), transparent); pointer-events: none; transition: opacity .3s; }
.he-seo-caja.is-abierto .he-seo-texto { max-height: 4000px; }
.he-seo-caja.is-abierto .he-seo-texto::after { opacity: 0; }
.he-seo-texto h2 { position: relative; margin: 26px 0 10px; padding-left: 14px; color: var(--he-texto); font: 700 21px/1.15 var(--he-titulos); text-transform: uppercase; letter-spacing: .02em; }
.he-seo-texto h2::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--he-rojo); }
.he-seo-texto h3 { margin: 16px 0 4px; font: 600 16px/1.3 var(--he-cuerpo); }
.he-seo-texto h3 a { color: var(--he-texto) !important; }
.he-seo-texto h3 a:hover, .he-seo-top a:hover { color: var(--he-rojo) !important; }
.he-seo-texto p { margin: 0 0 10px; color: var(--he-texto-2); font-size: 14px; line-height: 1.7; }
.he-seo-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.he-seo-cats a { display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--he-linea); border-radius: 10px; background: var(--he-superficie-2); transition: border-color .2s, transform .2s; }
.he-seo-cats a:hover { border-color: var(--he-rojo); transform: translateY(-2px); }
.he-seo-cats b { color: var(--he-texto); font: 700 14px/1.2 var(--he-cuerpo); }
.he-seo-cats b::after { content: " →"; color: var(--he-rojo); }
.he-seo-cats span { color: var(--he-texto-2); font-size: 12.5px; line-height: 1.5; }
.he-seo-dos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.he-seo-top { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: he-seo; }
.he-seo-top li { counter-increment: he-seo; }
.he-seo-top a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--he-linea); border-radius: 8px; background: var(--he-superficie-2); color: var(--he-texto) !important; font: 600 14px/1.3 var(--he-cuerpo); }
.he-seo-top a::before { content: counter(he-seo); display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--he-rojo); color: #fff; font: 700 13px var(--he-cuerpo); }
.he-seo-mas { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--he-rojo); font: 700 14px var(--he-cuerpo); cursor: pointer; }
.he-seo-mas svg { transition: transform .3s; }
.he-seo-caja.is-abierto .he-seo-mas svg { transform: rotate(180deg); }
@media (max-width: 1000px) {
  .he-seo-ventajas, .he-seo-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-seo-dos { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .he-seo-caja { padding: 22px 16px 16px; }
  .he-seo-ventajas { grid-template-columns: minmax(0, 1fr); }
  .he-seo-cats { grid-template-columns: minmax(0, 1fr); }
}

/* Comentarios de la comunidad (iframe) */
.he-comentarios { margin-top: 18px; }
.he-comentarios iframe { border-radius: 8px; }