/*
 * includes/hope.css - el material de la web: lo que no se puede hacer con clases utilitarias.
 *
 * ORDEN DE CARGA, en las 18 paginas: CDN de Tailwind -> includes/hope_tailwind.js -> este archivo.
 *
 * ESTE ARCHIVO NO ESCRIBE NINGUN COLOR. La paleta tiene un solo origen, includes/hope_tailwind.js,
 * que la publica como variables: var(--hopeGold) y, para las transparencias,
 * rgb(var(--hopeGold-rgb) / .34). Lo unico que no sale de ahi es el negro de las sombras,
 * rgb(0 0 0 / a), y transparent. Una prueba falla si aparece un hex o cualquier otro color.
 *
 * REGLA DE USO: el elemento que lleva una clase hope-* NO lleva utilidades de Tailwind para las
 * mismas propiedades. El CDN agrega su hoja al final del <head>, despues de esta: a igualdad de
 * especificidad gana la utilidad. Un elemento con "bg-black hope-boton" se queda con bg-black.
 * Por eso aca no se fijan tamanos de letra ni margenes: eso sigue siendo de las utilidades.
 * La unica caja que este archivo dimensiona es la de un icono (.hope-icono), y en em: sigue a la letra.
 *
 * Las fuentes se sirven desde includes/fuentes/ (mismo sitio; licencia SIL OFL 1.1, ver
 * includes/fuentes/LICENCIA_OFL.txt). Solo los pesos que se usan:
 *   Cinzel 900       titulares y marca            (clase font-display font-black)
 *   Cinzel 600       titulos de tarjeta y de modal (clase font-display font-semibold)
 *   EB Garamond 400  texto editorial largo        (clase font-lectura)
 *   EB Garamond 800  SOLO cirilico: Cinzel no lo tiene, y los titulares en ruso caen aca
 * Cada archivo se baja solo si la pagina usa una letra de su rango (unicode-range).
 */

/* ---------------------------------------------------------------- fuentes */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cinzel-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cinzel-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(fuentes/cinzel-latin-ext-900-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(fuentes/cinzel-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/eb-garamond-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/eb-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/eb-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/eb-garamond-cyrillic-800-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------------------------------------------------------------- el boton principal */
/* El verde y el oro de siempre. El relleno tiene tres paradas y dos sombras internas:
   una luz arriba y una oscuridad abajo. */
.hope-boton{
  background:linear-gradient(180deg,var(--hopeGreenLight) 0%,var(--hopeGreen) 52%,var(--hopeGreenHover) 100%);
  border:1px solid var(--hopeGoldHover);
  color:var(--hopeIvory);
  box-shadow:
    inset 0 1px 0 rgb(var(--hopeGold-rgb) / .34),
    inset 0 -3px 8px rgb(0 0 0 / .6),
    0 3px 14px rgb(0 0 0 / .55);
  transition:box-shadow .18s ease,border-color .18s ease;
}
.hope-boton:hover,.hope-boton:focus-visible{
  border-color:var(--hopeGold);
  box-shadow:
    inset 0 1px 0 rgb(var(--hopeGold-rgb) / .5),
    inset 0 -3px 8px rgb(0 0 0 / .5),
    0 4px 20px rgb(var(--hopeGold-rgb) / .2);
}

/* ---------------------------------------------------------------- el grano */
/* Fijo sobre toda la pagina, en un elemento propio y vacio: <div class="hope-grano" aria-hidden="true"> */
.hope-grano{
  position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- el filo dorado */
/* Cuatro paradas en vez de un borde plano de 1 px. El ancho lo pone la utilidad (w-24, w-full). */
.hope-filo{
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--hopeGoldHover) 18%,var(--hopeGold) 50%,var(--hopeGoldHover) 82%,transparent 100%);
  box-shadow:0 1px 6px rgb(var(--hopeGold-rgb) / .18);
}

/* ---------------------------------------------------------------- la portada */
/* El encabezado de index.html. De abajo hacia arriba: el fondo de pagina, la vineta (se ve
   mientras la foto carga, o si no carga), la foto, y encima de la foto el velo de ::after.
   El velo es radial: el centro respira (42 %) y los bordes se cierran (90 %), con un fundido
   corto abajo hacia el fondo de la pagina. El contenido va por encima del velo (su z-10). */
.hope-portada{
  background:
    url('../image-landing.jpg') center/cover no-repeat,
    radial-gradient(ellipse 120% 80% at 50% 38%,var(--vignetteCore) 0%,var(--vignetteMid) 42%,var(--darkBg) 78%),
    var(--darkBg);
}
.hope-portada::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 72%,var(--darkBg) 100%),
    radial-gradient(ellipse 85% 65% at 50% 42%,rgb(var(--darkBg-rgb) / .42) 0%,rgb(var(--darkBg-rgb) / .55) 45%,rgb(var(--darkBg-rgb) / .9) 100%);
}

/* ---------------------------------------------------------------- titulares */
/* Va con font-display. El tamano y el interlineado los pone la utilidad (text-6xl/[1.05]). */
.hope-titular{text-transform:uppercase;letter-spacing:.015em;text-wrap:balance}

/* Los dos filetes de abajo del titular de la portada, desiguales:
   <div class="hope-filetes" aria-hidden="true"><span></span><span></span></div> */
.hope-filetes{display:flex;flex-direction:column;align-items:center;gap:6px}
.hope-filetes span:first-child{width:72px;height:2px;background:var(--hopeGold)}
.hope-filetes span:last-child{width:170px;height:1px;background:var(--hopeGold);opacity:.5}

/* ---------------------------------------------------------------- el enlace secundario */
/* La accion que acompana al boton principal sin competirle: subrayado fino, no un boton gemelo. */
.hope-enlace{
  text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:rgb(var(--hopeGold-rgb) / .6);
  transition:color .18s ease,text-decoration-color .18s ease;
}
.hope-enlace:hover,.hope-enlace:focus-visible{text-decoration-color:var(--hopeGold)}

/* ---------------------------------------------------------------- los iconos (etapa 2) */
/* Los 20 simbolos viven en includes/iconos.svg, que se GENERA (herramientas/generar.js), y cada sitio los
   pide con <use href="includes/iconos.svg?v=1#hope-escudo">. En PHP, hope_icono() de i18n.php.
   La caja mide 1,25em: sigue a la letra del rotulo, y es lo mas grande que no cambia el alto de
   ninguna fila. El color no se escribe: los simbolos usan currentColor y heredan el del rotulo.
   El elemento que lleva hope-icono no lleva utilidades de ancho, alto ni alineacion vertical. */
.hope-icono{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;flex:none}
/* Las cinco banderas. El circulo lo recorta ESTA regla y no la mascara que trae el simbolo: WebKit no
   resuelve esa mascara a traves de un <use> externo y las pinta cuadradas (medido el 06/10). */
.hope-bandera{border-radius:50%}

/* ---------------------------------------------------------------- tres pesos de contenedor (etapa 2) */
/* El reparto es de contenido y lo calcula foro.php de sus datos: con temas -> panel; sin temas y
   abierta -> pozo; sin temas y de solo lectura -> inerte.
   Los tres conservan un borde de 1 px en los cuatro lados (transparente donde no se ve), para que las
   columnas queden alineadas y ninguna fila cambie de alto. El filo dorado del panel son 2 px: uno es el
   borde de arriba y el otro una sombra interior, y debajo va la luz. */
.hope-panel{
  background:var(--cardBg);
  border:1px solid var(--panelEdge);border-top-color:var(--hopeGoldHover);
  box-shadow:
    inset 0 1px 0 var(--hopeGoldHover),
    inset 0 2px 0 rgb(var(--panelSheen-rgb) / .045),
    0 2px 10px rgb(0 0 0 / .4);
}
.hope-pozo{background:var(--wellBg);border:1px solid transparent;border-top-color:var(--panelEdge);box-shadow:none}
.hope-inerte{background:transparent;border:1px solid transparent;box-shadow:none;opacity:.72}

/* ---------------------------------------------------------------- las tarjetas de la portada */
/* Las catorce tarjetas de index.html: como se ven quietas, y lo que pasa al pasar el raton.

   EL REPOSO: un solo fondo y un solo borde para las catorce, y los dos salen del verde de marca (--hopeGreen).
     el fondo   --hopeGreen en transparencia, de .25 arriba a .12 abajo, sobre el negro de la pagina (--darkBg).
                Es OPACO a proposito: con --darkBg debajo, el color es el mismo en las catorce, este la tarjeta
                sobre la pagina, sobre un panel o sobre una foto. Y el texto se lee igual en todas.
     el borde   --hopeGreen pleno.
   EL TECHO DEL VERDE ES EL TEXTO: el gris de los parrafos (gray-400) tiene que quedar por encima de 7 a 1 sobre
   el punto MAS CLARO del fondo, que es el de arriba. Medido en los pixeles: con el verde al .25 da 7,14 a 1,
   y al .30 ya baja de 7 (6,97). No subirlo sin medir.
   hope-tarjeta-destacada, la principal de su grupo, lleva el mismo verde y encima su velo dorado de siempre;
   su unico borde es el filo izquierdo, de oro.
   REGLA DE USO (la de este archivo): la tarjeta que lleva hope-tarjeta NO lleva utilidades de fondo (bg-*) ni
   de color de borde (border-gray-800...), ni utilidades hover: de borde, sombra o transform, ni de transicion.
   A igual especificidad ganaria la utilidad. Si lleva las de grosor de borde, relleno, radio y sombra.

   EL RATON: el efecto de .hope-boton:hover: el borde a oro pleno, la luz de arriba y el halo. Un solo efecto en
   tres intensidades, que son el alcance del halo (--tarjetaHalo):
     hope-tarjeta hope-tarjeta-contenida   Economia: tarjetas chicas y juntas, con una destacada que cuidar
     hope-tarjeta                          Ingenieria y Jefes Epicos: el halo del boton, tal cual
     hope-tarjeta hope-tarjeta-viva        Progresion: el halo mas largo, y ademas se eleva y le crece la cifra
   La destacada no tiene borde arriba, a la derecha ni abajo, asi que el contorno se lo dibujan tres sombras
   interiores (un borde le cambiaria el tamano), y su halo es mas fuerte.
   NADA de aca cambia el tamano de una tarjeta ni mueve a las vecinas: fondo, color, sombra y transform no ocupan lugar.
   EL ORDEN DE LAS SOMBRAS IMPORTA: las exteriores primero y las interiores al final. En reposo Tailwind deja
   hasta cuatro sombras exteriores (dos vacias, las del anillo, y las de shadow-md, shadow-xl o shadow-2xl), y
   una transicion de box-shadow solo es continua si en cada posicion se corresponden exterior con exterior. Por
   eso el halo va primero, lo siguen tres sombras vacias, y recien despues las interiores. */
.hope-tarjeta{
  --tarjetaVerde:linear-gradient(180deg,rgb(var(--hopeGreen-rgb) / .25),rgb(var(--hopeGreen-rgb) / .12));
  --tarjetaHalo:0 4px 20px rgb(var(--hopeGold-rgb) / .2);
  background:var(--tarjetaVerde),var(--darkBg);
  border-color:var(--hopeGreen);
  transition:border-color .18s ease,box-shadow .18s ease,transform .3s cubic-bezier(.4,0,.2,1);
}
.hope-tarjeta-contenida{--tarjetaHalo:0 3px 14px rgb(var(--hopeGold-rgb) / .18)}
.hope-tarjeta-viva{--tarjetaHalo:0 6px 28px rgb(var(--hopeGold-rgb) / .3)}
.hope-tarjeta-destacada{
  --tarjetaHalo:0 4px 22px rgb(var(--hopeGold-rgb) / .32);
  background:linear-gradient(90deg,rgb(var(--hopeGold-rgb) / .1),transparent),var(--tarjetaVerde),var(--darkBg);
  border-color:var(--hopeGold);
}
.hope-tarjeta-cifra{transition:transform .15s cubic-bezier(.4,0,.2,1)}
/* any-hover: en un telefono no hay raton, y sin esto un toque dejaria la tarjeta encendida hasta tocar otra cosa. */
@media (any-hover:hover){
  .hope-tarjeta:hover{
    border-color:var(--hopeGold);
    box-shadow:
      var(--tarjetaHalo),
      0 0 transparent,0 0 transparent,0 0 transparent,
      inset 0 1px 0 rgb(var(--hopeGold-rgb) / .5);
  }
  .hope-tarjeta-destacada:hover{
    box-shadow:
      var(--tarjetaHalo),
      0 0 transparent,0 0 transparent,0 0 transparent,
      inset 0 1px 0 var(--hopeGold),inset -1px 0 0 var(--hopeGold),inset 0 -1px 0 var(--hopeGold);
  }
  /* La elevacion: 4 px, los de siempre. */
  .hope-tarjeta-viva:hover{transform:translateY(-4px);position:relative}
  /* Al subir, la tarjeta deja abajo una franja de 4 px donde el raton ya no la toca: se apagaba, bajaba,
     volvia a tocarla y volvia a subir. Esta franja invisible (los 4 px, mas 1 del borde) la mantiene tocada.
     Solo existe con el raton encima. */
  .hope-tarjeta-viva:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:5px}
  .hope-tarjeta:hover .hope-tarjeta-cifra{transform:scale(1.05)}
}

/* ---------------------------------------------------------------- sin movimiento */
@media (prefers-reduced-motion:reduce){
  .hope-boton,.hope-enlace,.hope-tarjeta,.hope-tarjeta-cifra{transition:none}
  /* en las tarjetas el color se queda y el movimiento no */
  .hope-tarjeta-viva:hover,.hope-tarjeta:hover .hope-tarjeta-cifra{transform:none}
  .hope-tarjeta-viva:hover::after{content:none}
}

/* ---------------------------------------------------------------- el foro: vista de hilo (2026-10-14) */
/* La estructura de un hilo de XenForo (ElmoreLab) con la paleta de marca. Todo color sale de las variables;
   los tamanos, rellenos y radios siguen siendo de las utilidades (regla de arriba). El elemento que lleva
   una clase foro-* no lleva utilidades de fondo, de color de borde ni de color de letra, salvo donde se dice.

   La tarjeta de mensaje. El inicial lleva el filo dorado de hope-panel; las respuestas, el mismo marco sin filo
   y un fondo mas bajo (la distincion de siempre, bg-cardBg/40 contra /20, hecha con material). */
.foro-post{background:rgb(var(--cardBg-rgb) / .55);border:1px solid var(--panelEdge);box-shadow:0 2px 8px rgb(0 0 0 / .3)}
.foro-post--inicial{
  background:var(--cardBg);border-top-color:var(--hopeGoldHover);
  box-shadow:inset 0 1px 0 var(--hopeGoldHover),inset 0 2px 0 rgb(var(--panelSheen-rgb) / .045),0 2px 10px rgb(0 0 0 / .4);
}
/* encabezado (fecha / #N) y pie de acciones */
.foro-post-cab{background:rgb(var(--panelSheen-rgb) / .03);border-bottom:1px solid var(--panelEdge)}
.foro-post-pie{background:rgb(0 0 0 / .18);border-top:1px solid var(--panelEdge)}

/* La ficha del autor: un panel propio a la izquierda del mensaje, hundido como un pozo. */
.foro-ficha{
  background:linear-gradient(180deg,rgb(var(--panelSheen-rgb) / .03),transparent 45%),var(--wellBg);
  border-right:1px solid var(--panelEdge);
  box-shadow:inset -1px 0 0 rgb(0 0 0 / .45);
}
.foro-ficha-sep{border-top:1px solid var(--panelEdge)}
/* El marco del avatar. Hoy lleva un monograma; manana un <img> adentro, sin tocar el marco:
     <div class="foro-avatar w-16 h-16 rounded-lg ..."><img src="avatar.php?u=..." alt=""></div>
   El tinte del rango (fondo y borde) lo ponen utilidades que arma foro.php a partir del color del rango. */
.foro-avatar{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 0 1px 0 rgb(var(--panelSheen-rgb) / .06),0 2px 8px rgb(0 0 0 / .5);
}
.foro-avatar > img{display:block;width:100%;height:100%;object-fit:cover}

/* La cita: borde izquierdo dorado y encabezado "<usuario> escribio:", como XenForo. La misma pieza sirve al
   aviso de cita del compositor. */
.foro-cita{background:rgb(var(--hopeGold-rgb) / .06);border-left:3px solid var(--hopeGold)}
.foro-cita-cab{color:var(--hopeGold)}

/* Las pildoras de prefijo. La neutra (categoria, tipo) y las tres de estado. */
.foro-pildora{display:inline-flex;align-items:center;border:1px solid var(--panelEdge);background:var(--wellBg);color:rgb(var(--panelSheen-rgb) / .78)}
.foro-pildora--abierto{background:var(--hopeGreen);border-color:var(--hopeGreenLight);color:var(--hopeIvory)}
.foro-pildora--vendido{background:rgb(var(--hopeGold-rgb) / .1);border-color:rgb(var(--hopeGold-rgb) / .35);color:rgb(var(--hopeGold-rgb) / .9)}
.foro-pildora--cerrado{background:var(--wellBg);border-color:var(--panelEdge);color:rgb(var(--panelSheen-rgb) / .6)}

/* Los botones de reaccion. */
.foro-reaccion{border:1px solid var(--panelEdge);background:var(--wellBg);color:rgb(var(--panelSheen-rgb) / .78);transition:border-color .15s ease,color .15s ease}
.foro-reaccion:hover,.foro-reaccion:focus-visible{border-color:rgb(var(--hopeGold-rgb) / .5);color:var(--panelSheen)}
.foro-reaccion--activa{border-color:rgb(var(--hopeGold-rgb) / .45);background:rgb(var(--hopeGold-rgb) / .12);color:var(--hopeGold)}

/* La paginacion: < 1 2 3 ... N >, con la pagina activa en oro. */
.foro-pagina{border:1px solid var(--panelEdge);background:var(--wellBg);color:rgb(var(--panelSheen-rgb) / .78);transition:border-color .15s ease,color .15s ease}
.foro-pagina:hover,.foro-pagina:focus-visible{border-color:var(--hopeGold);color:var(--panelSheen)}
.foro-pagina--activa{border-color:var(--hopeGold);background:rgb(var(--hopeGold-rgb) / .12);color:var(--hopeGold)}

/* El compositor de respuesta y su campo. */
.foro-compositor{background:var(--wellBg);border:1px solid var(--panelEdge);box-shadow:inset 0 1px 0 rgb(var(--panelSheen-rgb) / .04)}
.foro-campo{background:var(--darkBg);border:1px solid var(--panelEdge);transition:border-color .15s ease,box-shadow .15s ease}
.foro-campo:focus{border-color:var(--hopeGold);box-shadow:0 0 0 1px rgb(var(--hopeGold-rgb) / .25)}

@media (prefers-reduced-motion:reduce){
  .foro-reaccion,.foro-pagina,.foro-campo{transition:none}
}

/* ---------------------------------------------------------------- el foro: indice agrupado (2026-10-16) */
/* La raiz de foro.php: un bloque por grupo (.foro-grupo) con su cabecera verde de filo dorado
   (.foro-grupo-cab, el mismo relleno de tres paradas de .hope-boton) y una fila por categoria (.foro-cat).
   Portado de l2hope_mockup.html con los colores de la marca: ningun valor de color sale de aca.
   .foro-cat lleva su propia grilla (el elemento no lleva utilidades grid-*): icono | nombre | numeros | ultimo
   hilo. En el telefono queda icono | nombre y las otras dos columnas se ocultan. */
.foro-grupo{background:var(--cardBg);border:1px solid var(--panelEdge);overflow:hidden;box-shadow:0 8px 30px rgb(0 0 0 / .45)}
.foro-grupo-cab{
  background:linear-gradient(180deg,var(--hopeGreenLight) 0%,var(--hopeGreen) 52%,var(--hopeGreenHover) 100%);
  border-bottom:1px solid var(--hopeGoldHover);
  box-shadow:inset 0 1px 0 rgb(var(--hopeGold-rgb) / .34),inset 0 -8px 20px rgb(0 0 0 / .25);
}
.foro-grupo-tit{color:var(--hopeIvory)}
.foro-grupo-sub{color:rgb(var(--panelSheen-rgb) / .7)}
.foro-cat{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;border-top:1px solid rgb(var(--panelSheen-rgb) / .05);transition:background-color .15s ease}
.foro-grupo-cab + .foro-cat{border-top-color:transparent}
.foro-cat:hover{background:rgb(var(--hopeGreen-rgb) / .1)}
.foro-cat-stats,.foro-cat-last{display:none}
@media (min-width:721px){
  .foro-cat{grid-template-columns:52px minmax(0,1fr) 120px minmax(0,1.3fr)}
  .foro-cat-stats{display:block}
  .foro-cat-last{display:flex}
}
.foro-cat-ico{background:var(--wellBg);border:1px solid var(--panelEdge);border-top-color:rgb(var(--hopeGold-rgb) / .4);color:var(--hopeGold)}
.foro-cat-nom{color:var(--panelSheen)}
.foro-cat-candado{color:var(--hopeGold);border:1px solid rgb(var(--hopeGold-rgb) / .35)}
.foro-cat-ult{color:rgb(var(--hopeGold-rgb) / .9)}
.foro-cat-ult:hover{color:var(--hopeGold)}

@media (prefers-reduced-motion:reduce){
  .foro-cat{transition:none}
}

/* ---------------------------------------------------------------- la cuenta: menu lateral (2026-10-16) */
/* Las paginas de la cuenta (perfil.php propio, privacidad.php, olimpiadas.php) en dos columnas:
   [menu | contenido]. .perfil-shell lleva su propia grilla (el elemento no lleva utilidades grid-*); en el
   telefono queda una sola columna, con el menu arriba. El menu es includes/aside_perfil.php: las recetas
   de estado de sus enlaces son las de cabecera_panel.php (utilidades); aca va solo el material.
   El contenido va en un .hope-panel (el filo dorado de siempre). */
.perfil-shell{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:768px){
  .perfil-shell{grid-template-columns:230px minmax(0,1fr)}
}
.perfil-aside{background:var(--cardBg);border:1px solid var(--panelEdge)}
.perfil-aside-tit{color:var(--hopeGold);background:rgb(var(--hopeGreen-rgb) / .14);border-bottom:1px solid var(--panelEdge)}
.perfil-aside-sep{height:1px;background:var(--panelEdge)}
.perfil-aside-nuevo{color:var(--hopeIvory);background:var(--hopeGreen);border:1px solid var(--hopeGreenLight)}
/* Una fila del formulario: rotulo a la izquierda, campo a la derecha; en el telefono, uno arriba del otro. */
.perfil-fila{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;border-top:1px solid rgb(var(--panelSheen-rgb) / .05)}
.perfil-fila--primera{border-top-color:transparent}   /* la primera fila de un panel, debajo del titulo */
@media (min-width:560px){
  .perfil-fila{grid-template-columns:150px minmax(0,1fr)}
  .perfil-fila > .perfil-rotulo{text-align:right}
}
.perfil-campo{background:var(--fieldBg);border:1px solid var(--panelEdge);color:var(--panelSheen);transition:border-color .15s ease,box-shadow .15s ease}
.perfil-campo:focus{outline:none;border-color:var(--hopeGold);box-shadow:0 0 0 1px rgb(var(--hopeGold-rgb) / .25)}
.perfil-campo:disabled{color:rgb(var(--panelSheen-rgb) / .55)}
.perfil-opcion{accent-color:var(--hopeGreen)}

@media (prefers-reduced-motion:reduce){
  .perfil-campo{transition:none}
}

/* Ficha de la lista de hilos (vista de categoria): tarjeta definida sobre el negro,
   con el realce verde/dorado del indice al pasar el cursor. */
.foro-item{background:var(--cardBg);border:1px solid var(--panelEdge);box-shadow:0 2px 10px rgb(0 0 0 / .35);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.foro-item:hover,.foro-item:focus-visible{border-color:var(--hopeGold);background:linear-gradient(90deg,rgb(var(--hopeGreen-rgb) / .12),transparent 60%),var(--cardBg);box-shadow:0 4px 18px rgb(0 0 0 / .45),inset 0 1px 0 rgb(var(--hopeGold-rgb) / .18)}
@media (prefers-reduced-motion: reduce){.foro-item{transition:none}}

/* ---------------------------------------------------------------- aparicion al entrar (2026-10-20) */
/* La nueva direccion de la portada: cada bloque entra una sola vez al cruzar el viewport, desde un
   reposo visible. Si el JS no corre (no hay .js) se ve igual, quieto. Lo activa un IntersectionObserver
   que agrega .visible; .js lo pone el mismo script. La curva es la de salida larga. Color: no toca ninguno. */
.js .hope-aparece{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}
.js .hope-aparece.visible{opacity:1;transform:none;filter:none}
.js .hope-aparece-2{transition-delay:.1s}
.js .hope-aparece-3{transition-delay:.2s}
.js .hope-aparece-4{transition-delay:.3s}

/* La entrada del hero: la misma idea, disparada a la carga (no al scroll) y escalonada. El JS agrega
   .lista a .hope-portada en el primer frame; sin JS, .hope-entra no se oculta. */
.js .hope-portada .hope-entra{opacity:0;transform:translateY(32px);filter:blur(8px)}
.js .hope-portada.lista .hope-entra{opacity:1;transform:none;filter:none;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1)}
.js .hope-portada.lista .hope-entra-2{transition-delay:.15s}
.js .hope-portada.lista .hope-entra-3{transition-delay:.3s}
.js .hope-portada.lista .hope-entra-4{transition-delay:.45s}
.js .hope-portada.lista .hope-entra-5{transition-delay:.6s}

@media (prefers-reduced-motion:reduce){
  .js .hope-aparece,.js .hope-portada .hope-entra{opacity:1;transform:none;filter:none;transition:none}
}

/* ---------------------------------------------------------------- selector de idioma desplegable (2026-10-20) */
/* Reemplaza la fila de cinco banderas por un boton (bandera activa + nombre + flecha) que abre una lista
   vertical. Mantiene los button[data-lang] con su onclick: changeLanguage() de la portada no cambia.
   El relleno, el ancho minimo y el radio van por utilidades en el HTML; aca solo color y estructura. */
.hope-lang{position:relative}
.hope-lang-btn{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:rgb(var(--hopeGreen-rgb) / .14);border:1px solid rgb(var(--hopeGold-rgb) / .22);
  color:var(--panelSheen);transition:border-color .18s ease,background-color .18s ease}
.hope-lang-btn:hover,.hope-lang-btn:focus-visible{border-color:var(--hopeGold);background:rgb(var(--hopeGreen-rgb) / .28)}
.hope-lang-chevron{transition:transform .25s ease}
.hope-lang-btn[aria-expanded="true"] .hope-lang-chevron{transform:rotate(180deg)}
.hope-lang-menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;
  background:rgb(var(--cardBg-rgb) / .98);border:1px solid var(--panelEdge);border-top-color:var(--hopeGoldHover);
  box-shadow:0 20px 50px rgb(0 0 0 / .7),inset 0 1px 0 rgb(var(--hopeGold-rgb) / .2);overflow:hidden}
.hope-lang-menu[hidden]{display:none}
.js .hope-lang-menu:not([hidden]){animation:hope-lang-abre .22s cubic-bezier(.16,1,.3,1)}
@keyframes hope-lang-abre{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.hope-lang-opcion{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;color:rgb(var(--panelSheen-rgb) / .78);
  transition:background-color .15s ease,color .15s ease}
.hope-lang-opcion:hover,.hope-lang-opcion:focus-visible{background:rgb(var(--hopeGreen-rgb) / .3);color:var(--panelSheen);opacity:1}
.hope-lang-opcion[aria-current="true"]{color:var(--hopeGold);opacity:1}

@media (prefers-reduced-motion:reduce){
  .hope-lang-btn,.hope-lang-chevron,.hope-lang-opcion{transition:none}
  .js .hope-lang-menu:not([hidden]){animation:none}
}

/* ---------------------------------------------------------------- Cormorant Garamond (2026-10-21) */
/* Solo para titulares/entradas dramaticas de la portada (clase font-editorial). Auto-hospedada en
   includes/fuentes/, mismo sitio, como Cinzel y EB Garamond. No trae cirilico: el ruso cae a EB Garamond. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/cormorant-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/cormorant-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fuentes/cormorant-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fuentes/cormorant-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-ext-600-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- hero con video (2026-10-21) */
/* El video va de fondo de .hope-portada, debajo del velo (::after) y del contenido (z-10). Si no carga o
   el navegador no lo reproduce, queda la foto de fondo de .hope-portada y su vineta. Con reduce-motion se oculta. */
.hope-portada-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hope-portada::after{z-index:1}
@media (prefers-reduced-motion:reduce){.hope-portada-video{display:none}}

/* ---------------------------------------------------------------- particulas de fondo (2026-10-21) */
/* Canvas fijo DETRAS del contenido (z-index -1): se ve a traves de las secciones sin fondo propio.
   Las motas de oro las dibuja el JS de la portada. Con reduce-motion no se pinta. */
#hope-particulas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:reduce){#hope-particulas{display:none}}

/* ---------------------------------------------------------------- hover del menu superior (2026-10-21) */
/* Un filete dorado (el mismo degradado de .hope-filo) que crece desde el centro al pasar el cursor.
   El color del texto a oro lo sigue poniendo la utilidad hover:text-hopeGold; aca va solo el filete. */
.hope-nav-enlace{position:relative}
.hope-nav-enlace::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hopeGold),transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hope-nav-enlace:hover::after,.hope-nav-enlace:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.hope-nav-enlace::after{transition:none}}

/* superficies del navegador + parallax en movil (2026-10-21) */
::selection{background:rgb(var(--hopeGold-rgb) / .3);color:var(--hopeIvory)}
:focus-visible{outline:2px solid var(--hopeGold);outline-offset:2px}
html{scrollbar-color:var(--hopeGreen) var(--darkBg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--darkBg)}
::-webkit-scrollbar-thumb{background:var(--hopeGreen);border:3px solid var(--darkBg);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--hopeGreenLight)}
@media (max-width:768px){[style*="background-attachment:fixed"]{background-attachment:scroll !important}}

.hope-portada-video{background:var(--darkBg)}

/* ---------------------------------------------------------------- nav responsive con hamburguesa (2026-10-21) */
#nav-menu{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
@media (max-width:767px){
  #nav-menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:.9rem;
    padding:1.25rem 1.5rem;background:rgb(0 0 0 / .97);border-bottom:1px solid rgb(var(--hopeGold-rgb) / .2);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  #nav-menu[hidden]{display:none}
  #nav-menu .hope-lang{margin-top:.4rem}
}
.hope-ilus{will-change:transform}
@media (prefers-reduced-motion:reduce){.hope-ilus{transform:none!important}}