/* ============================================================
   JorgeVila — Tema base compartido (claro)
   Sin CSS Custom Properties (var()) a propósito: el validador CSS
   de NetBeans 8.2 no las reconoce y marca en rojo las líneas
   siguientes. Paleta de referencia:
     bg       #eef2f7      accent2  #2b6cb0
     surface  #ffffff      red      #c23636
     surface2 #f5f7fb      green    #2f9160
     border   rgba(15,23,42,0.10)
     accent   #e8a020      text     #1b2433
     accent-tx #a8710f     muted    #5b6472
   accent = relleno de botones/insignias (con texto oscuro encima,
   sin cambios respecto al tema oscuro). accent-tx = el mismo dorado
   pero usado como texto/icono directamente sobre fondo claro —
   más oscuro para que siga leyéndose bien.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #eef2f7;
  color: #1b2433;
  font-family: 'Source Sans 3', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

/* ── HEADER ─────────────────────────────────────────────── */
.jv-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.jv-header-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}
.jv-header-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}
.jv-header-title { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: #1b2433; }
.jv-header-sub {
  font-size: 0.78rem;
  color: #5b6472;
  margin-top: 1px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jv-header-nav {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.jv-header-nav a {
  text-decoration: none;
  color: #5b6472;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.jv-header-nav a:hover { color: #1b2433; }
.jv-header-nav a.active {
  color: #a8710f;
  background: rgba(232, 160, 32, 0.14);
  border-color: rgba(232, 160, 32, 0.35);
}

/* ── SELECTOR DE IDIOMA ─────────────────────────────────── */
.jv-lang-switch {
  display: flex;
  gap: 4px;
  margin-left: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 20px;
  padding: 3px;
}
.jv-lang-switch a {
  text-decoration: none;
  color: #5b6472;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 16px;
  transition: color .2s, background .2s;
}
.jv-lang-switch a:hover { color: #1b2433; }
.jv-lang-switch a.active {
  color: #1b2433;
  background: #e8a020;
}

/* ── MAIN / HERO ────────────────────────────────────────── */
.jv-main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 60px;
}
.jv-hero {
  position: relative;
  overflow: visible;
}
.jv-hero h1 {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin: 0 0 8px;
}
.jv-hero p {
  position: relative;
  z-index: 1;
  color: #5b6472;
  margin: 0 0 32px;
}

/* ── DECORACIÓN "CIENCIA" (péndulo + átomo + moléculas) ──────────────────
   Puramente decorativa (aria-hidden en el contenedor). Se incluye dentro
   de un .jv-hero vía WEB-INF/jsp/fragments/decoCiencia.jsp — cualquier
   vista puede sumarla sin tocar esta hoja. Generaliza la decoración que
   estrenó el menú de "Tabla periódica" (tablaPeriodica.css conserva su
   propia copia tp-hero-*, sin cambios, para no tocar esa vista). Solo
   SVG + CSS, cero imágenes. */
.jv-deco-ciencia {
  position: absolute;
  top: -14px;
  right: 0;
  width: 320px;
  height: 175px;
  pointer-events: none;
  z-index: 0;
}
.jv-deco-pendulo {
  position: absolute;
  top: 0;
  right: 20px;
  width: 210px;
  height: 140px;
}
.jv-deco-pendulo-bar { stroke: #1b2433; stroke-width: 4; stroke-linecap: round; opacity: 0.55; }
.jv-deco-pendulo-arm line { stroke: rgba(15, 23, 42, 0.35); stroke-width: 2; }
.jv-deco-pendulo-ball { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.jv-deco-pendulo-ball-1 { fill: #7ab0b8; }
.jv-deco-pendulo-ball-2 { fill: #3b8bd4; }
.jv-deco-pendulo-ball-3 { fill: #2f9160; }
.jv-deco-pendulo-ball-4 { fill: #1b2433; }
.jv-deco-pendulo-arm { transform-box: view-box; }
.jv-deco-pendulo-arm-1 { transform-origin: 35px 6px; }
.jv-deco-pendulo-arm-2 { transform-origin: 78px 6px; }
.jv-deco-pendulo-arm-3 { transform-origin: 122px 6px; }
.jv-deco-pendulo-arm-4 { transform-origin: 165px 6px; }

.jv-deco-atom { position: absolute; top: 70px; left: 0; width: 95px; height: 95px; opacity: 0.85; }
.jv-deco-atom-nucleus { fill: #e8a020; }
.jv-deco-atom-orbit { transform-box: view-box; transform-origin: 100px 100px; }
.jv-deco-atom-orbit ellipse { fill: none; stroke: rgba(232, 160, 32, 0.45); stroke-width: 2; }
.jv-deco-atom-orbit-1 { transform: rotate(0deg); }
.jv-deco-atom-orbit-2 { transform: rotate(60deg); }
.jv-deco-atom-orbit-3 { transform: rotate(120deg); }
.jv-deco-atom-electron-1 { fill: #3b8bd4; }
.jv-deco-atom-electron-2 { fill: #ff5470; }
.jv-deco-atom-electron-3 { fill: #3ddc84; }

.jv-deco-molecula { position: absolute; opacity: 0.35; }
.jv-deco-molecula line { stroke: #5b6472; stroke-width: 2; }
.jv-deco-molecula circle { fill: #3b8bd4; }
.jv-deco-molecula-1 { width: 30px; height: 30px; top: 138px; left: 75px; }
.jv-deco-molecula-2 { width: 24px; height: 24px; top: 18px; left: 60px; }

@media (max-width: 780px) {
  .jv-deco-ciencia { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes jv-pendulo-swing-1 { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
  @keyframes jv-pendulo-swing-2 { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
  @keyframes jv-pendulo-swing-3 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
  @keyframes jv-pendulo-swing-4 { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
  .jv-deco-pendulo-arm-1 { animation: jv-pendulo-swing-1 2.2s ease-in-out infinite; }
  .jv-deco-pendulo-arm-2 { animation: jv-pendulo-swing-2 2.6s ease-in-out infinite; }
  .jv-deco-pendulo-arm-3 { animation: jv-pendulo-swing-3 3s ease-in-out infinite; }
  .jv-deco-pendulo-arm-4 { animation: jv-pendulo-swing-4 3.4s ease-in-out infinite; }

  @keyframes jv-orbit-spin-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes jv-orbit-spin-2 { from { transform: rotate(60deg); } to { transform: rotate(420deg); } }
  @keyframes jv-orbit-spin-3 { from { transform: rotate(120deg); } to { transform: rotate(480deg); } }
  .jv-deco-atom-orbit-1 { animation: jv-orbit-spin-1 5s linear infinite; }
  .jv-deco-atom-orbit-2 { animation: jv-orbit-spin-2 7s linear infinite reverse; }
  .jv-deco-atom-orbit-3 { animation: jv-orbit-spin-3 6s linear infinite; }

  @keyframes jv-molecula-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .jv-deco-molecula-1 { animation: jv-molecula-flotar 4.5s ease-in-out infinite; }
  .jv-deco-molecula-2 { animation: jv-molecula-flotar 3.6s ease-in-out infinite .5s; }
}

/* ── CARD GRID (listado de simulaciones) ───────────────────── */
.jv-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.jv-sim-card, .jv-game-card, .jv-tool-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 22px 18px;
  text-decoration: none;
  color: #1b2433;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.jv-sim-card:hover, .jv-game-card:hover, .jv-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Barra inferior que crece al pasar por encima. El color lo pone cada
   sección más abajo; aquí solo va la mecánica. */
.jv-sim-card::after, .jv-game-card::after, .jv-tool-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.jv-sim-card:hover::after, .jv-game-card:hover::after, .jv-tool-card:hover::after {
  transform: scaleX(1);
}

/* Recuadro del icono. Antes esto era un emoji suelto con font-size; ahora
   es la caja de color que envuelve al SVG (ver fragments/iconos.jsp). */
.jv-sim-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: transform .15s ease;
}
.jv-sim-card:hover .jv-sim-icon, .jv-game-card:hover .jv-sim-icon, .jv-tool-card:hover .jv-sim-icon {
  transform: scale(1.08) rotate(-5deg);
}
.jv-sim-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.jv-sim-desc { font-size: 0.78rem; color: #5b6472; }

/* ── ICONOS SVG ─────────────────────────────────────────────────────────
   Sprite en WEB-INF/jsp/fragments/iconos.jsp, incluido desde navbar_home.
   Heredan currentColor: el color lo decide el contenedor, no el icono. */
.jv-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.jv-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── COLOR POR SECCIÓN ──────────────────────────────────────────────────
   Tres acentos, uno por sección, sacados de la paleta de la cabecera de
   este fichero (no son colores nuevos):

     Simulaciones  azul   #2b6cb0   (texto #1d4e80)
     Juegos        dorado #e8a020   (texto #a8710f)
     Herramientas  verde  #2f9160   (texto #256f4b)

   El dorado sigue siendo el color de marca (cabecera, botones), así que
   el acento de sección solo aparece DENTRO del contenido: cintillo del
   hero, subrayado del <h1>, icono y borde de la tarjeta. Así se distingue
   una sección de otra sin que la web parezca tres webs distintas.

   Sin var() a propósito, como el resto del proyecto. */

/* Simulaciones */
.jv-sim-card .jv-sim-icon { background: rgba(43, 108, 176, 0.10); color: #2b6cb0; }
.jv-sim-card::after { background: #2b6cb0; }
.jv-sim-card:hover { border-color: rgba(43, 108, 176, 0.45); }
.jv-sim-card:hover .jv-sim-icon { background: rgba(43, 108, 176, 0.16); }

/* Juegos */
.jv-game-card .jv-sim-icon { background: rgba(232, 160, 32, 0.14); color: #a8710f; }
.jv-game-card::after { background: #e8a020; }
.jv-game-card:hover { border-color: rgba(232, 160, 32, 0.50); }
.jv-game-card:hover .jv-sim-icon { background: rgba(232, 160, 32, 0.22); }

/* Herramientas */
.jv-tool-card .jv-sim-icon { background: rgba(47, 145, 96, 0.12); color: #2f9160; }
.jv-tool-card::after { background: #2f9160; }
.jv-tool-card:hover { border-color: rgba(47, 145, 96, 0.45); }
.jv-tool-card:hover .jv-sim-icon { background: rgba(47, 145, 96, 0.18); }

/* ── CINTILLO Y SUBRAYADO DEL HERO ──────────────────────────────────────
   El hero de cada sección lleva <span class="jv-hero-eyebrow"> con el
   nombre de la sección, y la clase jv-hero-<seccion> en el propio hero. */
.jv-hero-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.jv-hero-sim .jv-hero-eyebrow  { background: rgba(43, 108, 176, 0.12); color: #1d4e80; }
.jv-hero-game .jv-hero-eyebrow { background: rgba(232, 160, 32, 0.18); color: #a8710f; }
.jv-hero-tool .jv-hero-eyebrow { background: rgba(47, 145, 96, 0.13); color: #256f4b; }
.jv-hero-cont .jv-hero-eyebrow { background: rgba(15, 23, 42, 0.07); color: #5b6472; }

.jv-hero-sim h1::after,
.jv-hero-game h1::after,
.jv-hero-tool h1::after,
.jv-hero-cont h1::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  margin-top: 12px;
}
.jv-hero-sim h1::after  { background: #2b6cb0; }
.jv-hero-game h1::after { background: #e8a020; }
.jv-hero-tool h1::after { background: #2f9160; }
.jv-hero-cont h1::after { background: #5b6472; }

/* ── FOOTER ─────────────────────────────────────────────── */
.jv-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #5b6472;
}
.jv-footer-logo {
  height: 22px;
  width: auto;
}

/* ── FONDO DECORATIVO (moléculas sueltas, todo el sitio) ──────────────────
   Puramente decorativa (aria-hidden en el contenedor), incluida una sola
   vez desde navbar_home.jsp (fragments/decoFondoMoleculas.jsp) para que
   salga en todas las vistas. position:fixed + z-index:-1: queda "pegada"
   a la ventana al hacer scroll, detrás de cabecera/tarjetas/texto (que
   son contenido normal sin z-index negativo, así que se pintan encima
   solos) y sin interceptar clics. Solo SVG + CSS, cero imágenes. */
.jv-deco-fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.jv-deco-fondo-molecula { position: absolute; opacity: 0.14; }
.jv-deco-fondo-molecula line { stroke: #5b6472; stroke-width: 2; }
.jv-deco-fondo-molecula circle { fill: #3b8bd4; }
.jv-deco-fondo-m1 { width: 26px; height: 26px; top: 8vh;  left: 4vw; }
.jv-deco-fondo-m2 { width: 34px; height: 34px; top: 18vh; right: 6vw; }
.jv-deco-fondo-m3 { width: 20px; height: 20px; top: 46vh; left: 2vw; }
.jv-deco-fondo-m4 { width: 30px; height: 30px; top: 62vh; right: 3vw; }
.jv-deco-fondo-m5 { width: 18px; height: 18px; top: 80vh; left: 11vw; }
.jv-deco-fondo-m6 { width: 28px; height: 28px; top: 90vh; right: 15vw; }
.jv-deco-fondo-m7 { width: 22px; height: 22px; top: 32vh; right: 24vw; }

@media (max-width: 780px) {
  .jv-deco-fondo { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes jv-fondo-flotar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(6deg); }
  }
  .jv-deco-fondo-m1 { animation: jv-fondo-flotar 7s ease-in-out infinite; }
  .jv-deco-fondo-m2 { animation: jv-fondo-flotar 8.5s ease-in-out infinite .8s; }
  .jv-deco-fondo-m3 { animation: jv-fondo-flotar 6.5s ease-in-out infinite 1.6s; }
  .jv-deco-fondo-m4 { animation: jv-fondo-flotar 9s ease-in-out infinite .4s; }
  .jv-deco-fondo-m5 { animation: jv-fondo-flotar 7.5s ease-in-out infinite 2.2s; }
  .jv-deco-fondo-m6 { animation: jv-fondo-flotar 8s ease-in-out infinite 1.1s; }
  .jv-deco-fondo-m7 { animation: jv-fondo-flotar 6.8s ease-in-out infinite 2.8s; }
}

/* ── AVISO DE COOKIES ───────────────────────────────────────────────────
   Aviso propio, sin librería externa: el único cookie del sitio es
   jvLang (idioma, estrictamente necesaria), así que no hace falta un
   gestor de consentimiento -esto es solo un aviso informativo con botón
   "entendido"-. Lógica de mostrar/ocultar en footer.jsp. */
.jv-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 560px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  z-index: 50;
  font-size: 0.8rem;
}
.jv-cookie-banner[hidden] { display: none; }
.jv-cookie-banner p { margin: 0; color: #3a4452; flex: 1; min-width: 200px; }
.jv-cookie-banner button {
  background: linear-gradient(135deg, #e8a020, #c07010);
  color: #1b2433;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .jv-header-nav {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ── CABECERA CON FOTO ───────────────────────────────────────────────────
   Panel con fotografía de fondo y el texto encima. Sustituye a la
   decoración animada SÓLO donde hay foto: las dos juntas se estorban, la
   foto ya es la decoración. decoCiencia.jsp sigue usándose en las vistas
   sin fotografía (Contacto, y las que vengan).

   Las fotos están compuestas con el motivo a la DERECHA y el lado
   izquierdo casi vacío, justo para que el texto caiga encima sin taparlo.
   El degradado blanco de encima asegura el contraste del texto pase lo que
   pase con la foto.

   Sin var(), como el resto del proyecto. */
.jv-hero-foto {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  padding: 44px 38px;
  margin-bottom: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #eef2f7;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}
.jv-hero-foto p { margin-bottom: 0; }
.jv-hero-foto h1 { max-width: 16ch; }
.jv-hero-foto p  { max-width: 42ch; }

/* Portada: la más alta, es la primera impresión */
.jv-hero-inicio {
  min-height: 320px;
  background-image:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 32%,
      rgba(255, 255, 255, 0.20) 60%,
      rgba(255, 255, 255, 0.00) 78%),
    url('../img/home/hero-lab.jpg');
}
.jv-hero-inicio h1 { font-size: 2.5rem; }
.jv-hero-inicio p  { font-size: 1.05rem; }

/* Banda de sección: más baja, para no robarle sitio a las tarjetas */
.jv-hero-banda { min-height: 190px; padding: 32px 34px; }
.jv-hero-banda h1 { font-size: 1.9rem; }

.jv-hero-banda.jv-hero-sim {
  background-image:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.80) 34%,
      rgba(255, 255, 255, 0.15) 62%,
      rgba(255, 255, 255, 0.00) 80%),
    url('../img/secciones/cab-simulaciones.jpg');
}
.jv-hero-banda.jv-hero-game {
  background-image:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.80) 34%,
      rgba(255, 255, 255, 0.15) 62%,
      rgba(255, 255, 255, 0.00) 80%),
    url('../img/secciones/cab-juegos.jpg');
}
.jv-hero-banda.jv-hero-tool {
  background-image:
    linear-gradient(to right,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.80) 34%,
      rgba(255, 255, 255, 0.15) 62%,
      rgba(255, 255, 255, 0.00) 80%),
    url('../img/secciones/cab-herramientas.jpg');
}

/* Móvil: el motivo pasa a la parte de abajo y el texto al principio, que
   es donde queda el hueco en la versión cuadrada de la foto. */
@media (max-width: 700px) {
  .jv-hero-foto {
    justify-content: flex-start;
    padding: 32px 24px;
    background-position: center bottom;
  }
  .jv-hero-foto h1, .jv-hero-foto p { max-width: none; }

  .jv-hero-inicio {
    min-height: 400px;
    background-image:
      linear-gradient(to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.84) 34%,
        rgba(255, 255, 255, 0.22) 66%,
        rgba(255, 255, 255, 0.00) 88%),
      url('../img/home/hero-lab-movil.jpg');
  }
  .jv-hero-inicio h1 { font-size: 1.9rem; }
  .jv-hero-inicio p  { font-size: 0.98rem; }

  .jv-hero-banda { min-height: 165px; }
  .jv-hero-banda h1 { font-size: 1.6rem; }
  .jv-hero-banda.jv-hero-sim,
  .jv-hero-banda.jv-hero-game,
  .jv-hero-banda.jv-hero-tool { background-position: center right; }
}