:root {
  --azul-oscuro: #0b1e3b;
  --verde-lima: #8dc63f;
  --verde-lima-profundo: #79b12f;
  --azul-intermedio: #1e3d6b;
  --blanco: #ffffff;
  --gris-claro: #f2f4f6;
  --gris-medio: #c6c9cd;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--blanco);
  color: var(--azul-oscuro);
  overflow-x: hidden;
}

/* ===== HEADER & NAVIGATION ===== */
header {
  background-color: var(--azul-oscuro);
  padding: 1rem 2rem;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 50px;
  width: auto;
  transition: transform 0.3s ease;
}

.logo:hover .logo-img {
  transform: scale(1.05);
}

.logo-text {
  color: var(--blanco);
  font-weight: 700;
  font-size: 1.5rem;
  margin-left: 10px;
  transition: color 0.3s ease;
}

.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
}

.nav-menu > li {
  margin-left: 1.5rem;
  position: relative;
}

.nav-menu a {
  color: var(--blanco);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
}

.nav-menu a:hover {
  color: var(--verde-lima);
}

.nav-menu a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--verde-lima);
  transition: width 0.3s ease;
}

.nav-menu a:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--verde-lima) !important;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--verde-lima);
}

.nav-link:hover {
  color: var(--verde-lima) !important;
  transform: translateY(-2px);
}

.has-submenu > a::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: 5px;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.nav-menu > li:hover .has-submenu > a::after {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--azul-intermedio);
  min-width: 220px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.nav-menu > li:hover .submenu,
.nav-menu > li.es-senalado .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ------------------------------------------------ Señalar un item del menú

   Lo pone js/senalar-menu.js cuando un botón de la página -"Ver
   calculadoras", por ejemplo- en vez de llevarte a otro sitio te enseña
   dónde está eso en la barra. Dura unos segundos y se va sola.

   El anillo va en un ::before y no en el borde del <li> para no mover ni un
   píxel del menú: cualquier cambio de caja empujaría los items de al lado. */

.nav-menu > li.es-senalado {
  position: relative;
}

.nav-menu > li.es-senalado::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  border: 2px solid var(--verde-lima);
  border-radius: 10px;
  pointer-events: none;
  animation: senalarLatido 1s ease-out 3;
}

.nav-menu > li.es-senalado > a {
  color: var(--verde-lima) !important;
}

.nav-menu > li.es-senalado > a::after {
  transform: rotate(180deg);
}

@keyframes senalarLatido {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(141, 198, 63, 0.5);
  }
  25% {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(141, 198, 63, 0);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(141, 198, 63, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu > li.es-senalado::before {
    animation: none;
    opacity: 1;
  }
}

.submenu li {
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenu li:last-child {
  border-bottom: none;
}

.submenu a {
  padding: 12px 20px;
  display: block;
  color: var(--blanco);
  transition: all 0.3s ease;
}

.submenu a:hover {
  background-color: var(--verde-lima);
  color: var(--azul-oscuro);
}

.submenu a::after {
  display: none;
}

/* ===== BUTTONS ===== */
.btn {
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--verde-lima);
  color: var(--blanco);
}

.btn-primary:hover {
  background-color: var(--blanco);
  color: var(--verde-lima);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  background-color: transparent;
  color: var(--blanco);
  border: 2px solid var(--verde-lima);
}

.btn-secondary:hover {
  background-color: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--verde-lima);
  color: var(--verde-lima);
  padding: 8px 15px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
}

.submit-btn {
  width: 100%;
  padding: 0.7rem;
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.8rem;
  position: relative;
  overflow: hidden;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(154, 205, 50, 0.4);
}

.submit-btn:active {
  transform: translateY(0);
}

.btn.loading {
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: buttonSpin 0.8s linear infinite;
}

.submit-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.submit-btn.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid var(--azul-oscuro);
  border-radius: 50%;
  animation: buttonSpin 1s linear infinite;
}

/* ===== HERO SECTION ===== */
.hero {
  background: linear-gradient(
    135deg,
    var(--azul-oscuro) 0%,
    var(--azul-intermedio) 100%
  );
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 2rem 2rem;
  position: relative;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.hero-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  transition: opacity 0.5s ease;
}

.hero:hover .hero-background video {
  opacity: 0.35;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--azul-oscuro) 0%,
    rgba(11, 30, 59, 0.9) 10%,
    rgba(11, 30, 59, 0.7) 20%,
    rgba(11, 30, 59, 0.5) 30%,
    rgba(11, 30, 59, 0.3) 40%,
    rgba(11, 30, 59, 0.1) 50%,
    transparent 70%
  );
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 3;
}

.hero-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(154, 205, 50, 0.3) 20%,
    rgba(154, 205, 50, 0.5) 50%,
    rgba(154, 205, 50, 0.3) 80%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

.hero-text {
  color: var(--blanco);
  animation: fadeInUp 1s ease;
  padding-right: 2rem;
  position: relative;
  z-index: 3;
}

.text-content {
  max-width: 600px;
  position: relative;
}

.text-content::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: -2rem;
  right: -2rem;
  bottom: -2rem;
  background: linear-gradient(
    90deg,
    rgba(11, 30, 59, 0.8) 0%,
    rgba(11, 30, 59, 0.4) 50%,
    transparent 100%
  );
  border-radius: 15px;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.hero-text h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--gris-claro);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInRight 1s ease;
}

.visual-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--blanco);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  animation: float 6s ease-in-out infinite;
  min-width: 120px;
}

.floating-card:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-card:nth-child(2) {
  top: 50%;
  right: 15%;
  animation-delay: 2s;
  transform: translateY(-50%);
}

.floating-card:nth-child(3) {
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.floating-card:hover {
  background: rgba(154, 205, 50, 0.2);
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 40px rgba(154, 205, 50, 0.3);
}

.floating-card i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
  color: var(--verde-lima);
}

.floating-card span {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
}

.hero-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(154, 205, 50, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 50%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(30, 61, 107, 0.1) 30%,
      transparent 100%
    );
  z-index: 2;
  pointer-events: none;
}

.video-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 4;
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero:hover .video-controls {
  opacity: 1;
}

.video-btn {
  background: rgba(11, 30, 59, 0.8);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-btn:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-2px);
}

.video-indicator {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 4;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-lima);
  animation: pulse 2s infinite;
}

/* ===== SECTION STYLES ===== */
.section-title {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--azul-oscuro);
  margin-bottom: 1rem;
}

.section-title p {
  color: var(--gris-medio);
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
}

.services,
.common-problems,
.faq,
.courses,
.platform,
.testimonials,
.evidence,
.diploma,
.cards-ecosystem,
.news-updates,
.tax-tips,
.fiscal-calendar,
.youtube-section,
.live-events,
.professional-events {
  padding: 6rem 2rem;
  position: relative;
}

/* ==================================================================
   SERVICIOS REITOR - layout bento
   Tarjeta destacada oscura + rejilla de servicios, con filtros por
   categoria. Las clases .service-card y .rs-card se conservan porque
   js/script.js las usa para el resaltado al llegar desde el submenu.
   ================================================================== */

.reitor-services {
  position: relative;
  padding: 5rem 2rem 5.5rem;
  background: #ffffff;
  overflow: hidden;
}

/* Halos verdes muy tenues en las esquinas */
.reitor-services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      circle at 0% 0%,
      rgba(141, 198, 63, 0.1) 0%,
      transparent 32%
    ),
    radial-gradient(circle at 100% 8%, rgba(141, 198, 63, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(30, 61, 107, 0.04) 0%, transparent 45%);
}

/* ---------------------------------------------------- Encabezado */

.rs-titleblock {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto 2.25rem;
  text-align: center;
}

/* Kicker con filetes a los lados */
.rs-titleblock .rs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--verde-lima-profundo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
}

.rs-titleblock .rs-kicker::before,
.rs-titleblock .rs-kicker::after {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--verde-lima);
  opacity: 0.75;
}

.reitor-services .section-title h2 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--azul-oscuro);
  line-height: 1.08;
  margin-bottom: 0.7rem;
}

.reitor-services .section-title > p {
  color: #64748b;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 620px;
}

/* ------------------------------------------------------- Filtros */

.rs-filtros {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.rs-filtro {
  padding: 0.58rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(141, 198, 63, 0.4);
  background: #ffffff;
  color: #43566b;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.rs-filtro:hover {
  border-color: var(--verde-lima);
  background: rgba(141, 198, 63, 0.07);
}

.rs-filtro.is-activa {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(141, 198, 63, 0.28);
}

.rs-filtro:focus-visible {
  outline: 3px solid var(--azul-intermedio);
  outline-offset: 2px;
}

/* -------------------------------------------------- Rejilla bento */

.rs-grid {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.82fr 0.82fr;
  gap: 1.15rem;
}

/* La tarjeta destacada ocupa la columna izquierda y las dos filas */
.rs-card-destacada {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* Al filtrar, las tarjetas ocultas salen del flujo */
.rs-card[hidden] {
  display: none !important;
}

/* Cuando la destacada se oculta, las demas reparten el ancho */
.rs-grid.sin-destacada {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Con un filtro activo el bento se deshace: las tarjetas fluyen solas
   para que no queden huecos ni columnas vacias */
.rs-grid.filtrando .rs-card-destacada {
  grid-column: auto;
  grid-row: auto;
}

/* ------------------------------------------- Tarjeta destacada */

.reitor-services .rs-card-destacada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.1rem 2rem;
  border-radius: 24px;
  background: linear-gradient(150deg, #12294a 0%, var(--azul-oscuro) 58%, #091729 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 22px 48px rgba(11, 30, 59, 0.26);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reitor-services .rs-card-destacada:hover,
.reitor-services .rs-card-destacada:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(11, 30, 59, 0.32);
}

/* Ilustracion de fondo, a la derecha */
.rs-ilustracion {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 41%;
  max-width: 226px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

.rs-destacada-contenido {
  position: relative;
  z-index: 1;
  max-width: 60%;
}

.rs-badge-destacada {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cfe3a7;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.reitor-services .rs-card-destacada h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 0.65rem;
}

.rs-card-destacada .rs-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.15rem;
}

/* Listado de la tarjeta destacada */
.rs-card-destacada .rs-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.35rem;
}

.rs-card-destacada .rs-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.52rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.93rem;
}

.rs-card-destacada .rs-points li:last-child {
  border-bottom: 0;
}

.rs-card-destacada .rs-points i {
  color: var(--verde-lima);
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Acciones de la destacada */
.rs-destacada-cta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rs-btn-verde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rs-btn-verde:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(141, 198, 63, 0.34);
  color: #ffffff;
}

/* Boton circular con flecha */
.rs-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rs-flecha:hover {
  transform: translateX(3px);
  box-shadow: 0 10px 22px rgba(141, 198, 63, 0.3);
  color: #ffffff;
}

/* -------------------------------------------- Tarjetas normales */

.reitor-services .rs-card:not(.rs-card-destacada) {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.2rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.08);
  box-shadow: 0 8px 24px rgba(11, 30, 59, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.reitor-services .rs-card:not(.rs-card-destacada):hover,
.reitor-services .rs-card:not(.rs-card-destacada):focus-within {
  transform: translateY(-5px);
  border-color: rgba(141, 198, 63, 0.38);
  box-shadow: 0 18px 38px rgba(11, 30, 59, 0.1);
}

/* Cabecera horizontal: icono a la izquierda, texto a la derecha */
.rs-card-top {
  display: flex;
  align-items: flex-start;
  gap: 1.05rem;
  margin-bottom: 1.1rem;
}

.rs-card-texto {
  min-width: 0;
  flex: 1 1 auto;
}

/* Tableta del icono */
.rs-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(150deg, #f1f8e6 0%, #e9f4d9 100%);
  border: 1px solid rgba(141, 198, 63, 0.18);
  transition: transform 0.3s ease;
}

.rs-icon i {
  font-size: 1.5rem;
  color: var(--verde-lima-profundo);
}

/* Iconos SVG propios de cada servicio */
.rs-icon img {
  width: 38px;
  height: 38px;
  display: block;
}

.reitor-services .rs-card:not(.rs-card-destacada):hover .rs-icon {
  transform: scale(1.05);
}

.rs-categoria {
  display: block;
  color: var(--verde-lima-profundo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.reitor-services .rs-card:not(.rs-card-destacada) h3 {
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.3;
  margin: 0 0 0.45rem;
}

.reitor-services .rs-card:not(.rs-card-destacada) .rs-desc {
  color: #6b7a8c;
  font-size: 0.87rem;
  line-height: 1.6;
  margin: 0;
}

/* Pie de la tarjeta: separador + flecha a la derecha */
.rs-card-pie {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

.rs-card-pie::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(11, 30, 59, 0.1);
}

.rs-flecha-suave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(141, 198, 63, 0.5);
  background: #ffffff;
  color: var(--verde-lima-profundo);
  text-decoration: none;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.rs-flecha-suave:hover {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: #ffffff;
  transform: translateX(3px);
}

.reitor-services a:focus-visible,
.rs-flecha:focus-visible,
.rs-flecha-suave:focus-visible {
  outline: 3px solid var(--azul-intermedio);
  outline-offset: 3px;
}

/* ------------------------------------------------- Pie de seccion */

.rs-pie {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 2.5rem auto 0;
  text-align: center;
}

.rs-ver-todos {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 2rem;
  border-radius: 12px;
  border: 1.5px solid rgba(141, 198, 63, 0.55);
  background: #ffffff;
  color: var(--azul-oscuro);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.rs-ver-todos i {
  color: var(--verde-lima-profundo);
  transition: transform 0.25s ease;
}

.rs-ver-todos:hover {
  transform: translateY(-2px);
  border-color: var(--verde-lima);
  box-shadow: 0 12px 26px rgba(141, 198, 63, 0.18);
  color: var(--azul-oscuro);
}

.rs-ver-todos:hover i {
  transform: translateX(3px);
}

.rs-valores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  color: #78889a;
  font-size: 0.88rem;
}

.rs-valores span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.rs-valores span:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde-lima);
}

/* -------------------- Resaltado al llegar desde el submenu */

.reitor-services .rs-card.flash-target {
  border-color: var(--verde-lima) !important;
  box-shadow:
    0 0 0 4px rgba(141, 198, 63, 0.2),
    0 18px 38px rgba(11, 30, 59, 0.12) !important;
  animation: rsFlash 2.3s ease;
}

@keyframes rsFlash {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(141, 198, 63, 0.2),
      0 18px 38px rgba(11, 30, 59, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 11px rgba(141, 198, 63, 0.07),
      0 18px 38px rgba(11, 30, 59, 0.12);
  }
}

/* ------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
  .rs-grid,
  .rs-grid.sin-destacada {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-card-destacada,
  .rs-grid.filtrando .rs-card-destacada {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .rs-destacada-contenido {
    max-width: 70%;
  }
}

@media (max-width: 720px) {
  .reitor-services {
    padding: 4rem 1rem 4.5rem;
  }

  .rs-grid,
  .rs-grid.sin-destacada {
    grid-template-columns: 1fr;
  }

  .reitor-services .rs-card-destacada {
    padding: 1.9rem 1.5rem;
  }

  .rs-destacada-contenido {
    max-width: 100%;
  }

  /* En movil la ilustracion estorba al texto */
  .rs-ilustracion {
    display: none;
  }

  .rs-destacada-cta .rs-btn-verde {
    flex: 1 1 auto;
  }

  .rs-filtros {
    gap: 0.45rem;
  }

  .rs-filtro {
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
  }

  .rs-valores {
    flex-direction: column;
    gap: 0.5rem;
  }

  .rs-valores span:not(:last-child)::after {
    display: none;
  }
}

/* ---------------------------------- Respeta reduccion de movimiento */

@media (prefers-reduced-motion: reduce) {
  .reitor-services .rs-card,
  .rs-icon,
  .rs-flecha,
  .rs-flecha-suave,
  .rs-btn-verde,
  .rs-ver-todos,
  .rs-ver-todos i,
  .rs-filtro {
    transition: none !important;
  }

  .reitor-services .rs-card:hover,
  .reitor-services .rs-card:focus-within,
  .rs-btn-verde:hover,
  .rs-ver-todos:hover,
  .rs-flecha:hover,
  .rs-flecha-suave:hover {
    transform: none;
  }

  .reitor-services .rs-card.flash-target {
    animation: none;
  }
}
/* ===== COMMON PROBLEMS SECTION ===== */
.common-problems {
  background-color: var(--gris-claro);
}

.problems-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.problems-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  color: var(--azul-oscuro);
}

.problems-text p {
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--gris-medio);
}

.problems-list {
  list-style: none;
}

.problems-list li {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: var(--blanco);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  animation: float 8s ease-in-out infinite;
}

.problems-list li:nth-child(2) {
  animation-delay: 1s;
}

.problems-list li:nth-child(3) {
  animation-delay: 2s;
}

.problems-list li:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.problem-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.problem-icon {
  width: 50px;
  height: 50px;
  background-color: var(--verde-lima);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: 1.2rem;
  margin-right: 1rem;
}

.problem-header h3 {
  font-size: 1.2rem;
  color: var(--azul-oscuro);
}

.problem-content p {
  margin-bottom: 0;
  color: var(--gris-medio);
}

/* ===== EFECTOS SÚTILES PARA LA IMAGEN DGII ===== */
.problems-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.problems-image img {
  max-width: 100%;
  border-radius: 15px;
  box-shadow:
    0 10px 30px rgba(154, 205, 50, 0.15),
    0 5px 15px rgba(154, 205, 50, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(154, 205, 50, 0.1);
}

.problems-image img:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(154, 205, 50, 0.25),
    0 10px 20px rgba(154, 205, 50, 0.15),
    0 0 0 1px rgba(154, 205, 50, 0.05);
}

/* Efecto sutil de brillo al hacer hover */
.problems-image img:hover {
  filter: brightness(1.05) contrast(1.02);
}

/* ===== FAQ SECTION ===== */
.faq {
  background-color: var(--blanco);
}

.faq-container {
  max-width: 1000px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  animation: float 10s ease-in-out infinite;
}

.faq-item:nth-child(2) {
  animation-delay: 1s;
}

.faq-item:nth-child(3) {
  animation-delay: 2s;
}

.faq-item:nth-child(4) {
  animation-delay: 3s;
}

.faq-item:nth-child(5) {
  animation-delay: 4s;
}

.faq-question {
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background-color: var(--azul-intermedio);
}

.faq-question h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

.faq-answer {
  background-color: var(--gris-claro);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-answer.active {
  padding: 1.5rem;
  max-height: 500px;
}

.faq-answer p {
  color: var(--gris-medio);
  line-height: 1.6;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* ===== ENHANCED COURSES SECTION - TAMAÑO COMPACTO ===== */
.courses-filters {
  display: flex;
  justify-content: center;
  gap: 1.2rem; /* Reducido */
  margin-bottom: 3rem; /* Reducido */
  flex-wrap: wrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem; /* Reducido */
  padding: 0.9rem 1.8rem; /* Reducido */
  border: 2px solid var(--verde-lima);
  background: transparent;
  color: var(--verde-lima);
  border-radius: 45px; /* Reducido */
  font-weight: 600;
  font-size: 0.95rem; /* Reducido */
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 55px; /* Reducido */
}

.filter-btn.active {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(154, 205, 50, 0.25); /* Reducido */
}

.filter-btn:not(.disabled):hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-2px);
}

.filter-btn.disabled {
  border-color: var(--gris-medio);
  color: var(--gris-medio);
  cursor: not-allowed;
  opacity: 0.7;
  position: relative;
  overflow: visible;
}

.coming-soon-badge {
  position: absolute;
  top: -8px; /* Reducido */
  right: -8px; /* Reducido */
  background: var(--azul-intermedio);
  color: var(--blanco);
  padding: 4px 10px; /* Reducido */
  border-radius: 12px; /* Reducido */
  font-size: 0.7rem; /* Reducido */
  font-weight: 700;
  animation: pulse 2s infinite;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.courses-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem; /* Reducido */
  max-width: 1400px; /* Reducido */
  margin: 0 auto;
  padding: 0 2rem; /* Reducido */
}

.course-card-enhanced {
  position: relative;
  border-radius: 18px; /* Reducido */
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Reducido */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: var(--blanco);
  animation: floatCardEnhanced 6s ease-in-out infinite;
}

.course-card-enhanced:nth-child(2) {
  animation-delay: 1s;
}

.course-card-enhanced:nth-child(3) {
  animation-delay: 2s;
}

.course-card-enhanced:nth-child(4) {
  animation-delay: 3s;
}

.course-card-enhanced:nth-child(5) {
  animation-delay: 1.5s;
}

.course-card-enhanced:nth-child(6) {
  animation-delay: 2.5s;
}

@keyframes floatCardEnhanced {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  50% {
    transform: translateY(-8px) rotate(0.3deg); /* Reducido */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Reducido */
  }
}

.course-card-enhanced:hover {
  animation-play-state: paused;
  transform: translateY(-6px) scale(1.02); /* Reducido */
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25); /* Reducido */
}

.course-image-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Volvemos al cuadrado perfecto */
  overflow: hidden;
}

.course-image-enhanced {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease; /* Reducido */
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}

.course-card-enhanced:hover .course-image-enhanced {
  transform: scale(1.05); /* Reducido */
  filter: brightness(1.03); /* Reducido */
}

.course-overlay-enhanced {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(11, 30, 59, 0.95) 0%,
    rgba(11, 30, 59, 0.7) 50%,
    transparent 100%
  );
  padding: 1.8rem 1.5rem 1.5rem; /* Reducido */
  transform: translateY(100%);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Reducido */
  backdrop-filter: blur(10px); /* Reducido */
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-card-enhanced:hover .course-overlay-enhanced {
  transform: translateY(0);
}

.enroll-btn-enhanced {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem; /* Reducido */
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  padding: 0.9rem 1.8rem; /* Reducido */
  border-radius: 45px; /* Reducido */
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem; /* Reducido */
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(154, 205, 50, 0.3); /* Reducido */
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.enroll-btn-enhanced:hover {
  transform: translateY(-2px); /* Reducido */
  box-shadow: 0 6px 18px rgba(154, 205, 50, 0.35); /* Reducido */
  background: linear-gradient(
    135deg,
    var(--verde-lima-profundo) 0%,
    var(--verde-lima) 100%
  );
}

.course-badge-presencial {
  position: absolute;
  top: 1.2rem; /* Reducido */
  right: 1.2rem; /* Reducido */
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  padding: 0.6rem 1rem; /* Reducido */
  border-radius: 20px; /* Reducido */
  font-size: 0.75rem; /* Reducido */
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem; /* Reducido */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); /* Reducido */
  z-index: 10;
  backdrop-filter: blur(8px); /* Reducido */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.courses-cta {
  background: linear-gradient(
    135deg,
    var(--azul-oscuro) 0%,
    var(--azul-intermedio) 100%
  );
  border-radius: 18px; /* Reducido */
  padding: 2.5rem 2rem; /* Reducido */
  text-align: center;
  color: var(--blanco);
  max-width: 800px; /* Reducido */
  margin: 3rem auto 0; /* Reducido */
  border: 2px solid rgba(154, 205, 50, 0.3); /* Reducido */
}

.courses-cta h3 {
  font-size: 1.6rem; /* Reducido */
  margin-bottom: 1rem; /* Reducido */
  color: var(--verde-lima);
}

.courses-cta p {
  margin-bottom: 1.8rem; /* Reducido */
  opacity: 0.9;
  font-size: 1rem; /* Reducido */
}

.courses-cta .btn {
  padding: 0.9rem 1.8rem; /* Reducido */
  font-size: 0.95rem; /* Reducido */
}

/* Responsive Design Ajustado */
@media (max-width: 1200px) {
  .courses-grid-enhanced {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem; /* Reducido */
    max-width: 1000px; /* Reducido */
  }
}

@media (max-width: 768px) {
  .courses-grid-enhanced {
    grid-template-columns: 1fr;
    gap: 1.5rem; /* Reducido */
    max-width: 450px; /* Reducido */
    padding: 0 1.2rem; /* Reducido */
  }

  .courses-filters {
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.5rem; /* Reducido */
  }

  .filter-btn {
    width: 100%;
    max-width: 280px; /* Reducido */
    justify-content: center;
    padding: 0.8rem 1.5rem; /* Reducido */
    min-height: 50px; /* Reducido */
  }

  .course-overlay-enhanced {
    transform: translateY(0);
    padding: 1.2rem 1rem 1rem; /* Reducido */
  }
}

@media (max-width: 480px) {
  .courses-grid-enhanced {
    padding: 0 1rem;
  }

  .course-badge-presencial {
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 0.8rem; /* Reducido */
    font-size: 0.7rem; /* Reducido */
  }

  .enroll-btn-enhanced {
    padding: 0.8rem 1.5rem; /* Reducido */
    font-size: 0.9rem; /* Reducido */
  }

  .courses-cta {
    padding: 2rem 1.5rem; /* Reducido */
    margin: 2.5rem auto 0; /* Reducido */
  }

  .courses-cta h3 {
    font-size: 1.4rem; /* Reducido */
  }

  .courses-cta p {
    font-size: 0.95rem; /* Reducido */
  }
}

/* Ajustes para pantallas grandes - Más compacto */
@media (min-width: 1800px) {
  .courses-grid-enhanced {
    max-width: 1500px; /* Reducido */
    gap: 2.5rem; /* Reducido */
    padding: 0 3rem; /* Reducido */
  }
}

/* ===== PLATFORM SECTION ===== */
.platform {
  background-color: var(--azul-intermedio);
  color: var(--blanco);
}

.platform-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.platform-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.platform-text p {
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--gris-claro);
}

.platform-features {
  list-style: none;
}

.platform-features li {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.platform-features i {
  color: var(--verde-lima);
  margin-right: 10px;
  font-size: 1.2rem;
}

.platform-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* para pseudo-elemento decorativo */
}

.platform-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1; /* sobre la sombra elíptica */
  animation: floatSlight 10s ease-in-out infinite;
}

/* ===== PLATFORM NOTIFY POPOVER ===== */
.notify-wrapper {
  position: relative;
  display: inline-block;
}

.notify-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: min(320px, 92vw);
  background: #ffffff; /* fondo claro para máximo contraste */
  color: #0a2130; /* texto más oscuro para mejor legibilidad */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* borde un poco más marcado */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 14px;
  transform-origin: top left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  z-index: 10;
}

.notify-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.notify-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.notify-header h3 {
  font-size: 1rem;
  margin: 0;
  font-weight: 700;
  color: #0a2130;
}

.notify-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #3a5568;
}

.notify-label {
  display: block;
  font-size: 0.9rem;
  margin: 6px 0 6px;
  color: #0a2130; /* Etiqueta en color fuerte */
  font-weight: 600;
}

.notify-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.28); /* mayor contraste del borde */
  outline: none;
  font-size: 0.95rem;
  color: #0a2130; /* texto del input más oscuro */
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.notify-input:focus {
  border-color: var(--verde-lima);
  box-shadow: 0 0 0 3px rgba(173, 255, 47, 0.25);
}

/* Placeholder con contraste moderado */
.notify-input::placeholder {
  color: #6b7c8a;
}

.notify-hint {
  margin: 6px 0 10px;
  font-size: 0.85rem;
  color: #29465a; /* más contraste */
}

.notify-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.btn-small {
  padding: 8px 14px;
  font-size: 0.9rem;
}

/* Ajustes de color para el botón secundario dentro del popover (fondo blanco) */
.notify-popover .btn-secondary {
  color: #0b2b40;
  border-color: rgba(11, 43, 64, 0.25);
}

.notify-popover .btn-secondary:hover {
  background: rgba(11, 43, 64, 0.06);
  color: #0b2b40;
  transform: translateY(-2px);
}

.notify-feedback {
  margin-top: 8px;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .notify-popover {
    left: 0;
    right: auto;
    width: 92vw;
  }
}

/* Variante oscura del popover: se integra con la sección plataforma */
.notify-popover--dark {
  background: var(--azul-oscuro);
  color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.notify-popover--dark .notify-header h3,
.notify-popover--dark .notify-label {
  color: var(--blanco);
}

.notify-popover--dark .notify-hint {
  color: rgba(255, 255, 255, 0.8);
}

.notify-popover--dark .notify-close {
  color: #cbd5e1;
}

.notify-popover--dark .notify-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #f4f7fa;
}

.notify-popover--dark .notify-input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.notify-popover--dark .btn-secondary {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.35);
}

.notify-popover--dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco);
}

/* Sombra/halo elíptico bajo la imagen: suave y profesional */
.platform-image::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: clamp(160px, 70%, 560px);
  height: clamp(10px, 3.5vw, 22px);
  transform: translateX(-50%);
  background: radial-gradient(
    55% 60% at 50% 50%,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0) 75%
  );
  filter: blur(8px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  animation: shadowBreathe 8s ease-in-out infinite;
}

@keyframes floatSlight {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes shadowBreathe {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.82;
  }
  50% {
    transform: translateX(-50%) scaleX(1.06);
    opacity: 0.92;
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .platform-image img,
  .platform-image::after {
    animation: none !important;
  }
}

/* ==================================================================
   DIPLOMA DE CERTIFICACION
   Panel oscuro con el diploma a la izquierda y los beneficios
   a la derecha. Los iconos son SVG propios de la marca.
   ================================================================== */

.diploma {
  position: relative;
  padding: 5rem 2rem 5.5rem;
  background: #0a1c33;
  overflow: hidden;
}

/* Trama diagonal muy tenue de fondo */
.diploma::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      circle at 12% 8%,
      rgba(141, 198, 63, 0.07) 0%,
      transparent 38%
    ),
    radial-gradient(circle at 88% 92%, rgba(30, 61, 107, 0.5) 0%, transparent 45%);
}

/* Panel interior */
.diploma-panel {
  position: relative;
  z-index: 1;
  max-width: 1330px;
  margin: 0 auto;
  padding: 2.75rem 3rem;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(150deg, #102848 0%, var(--azul-oscuro) 55%, #091a30 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Hilera de puntos, esquina superior derecha */
.diploma-puntos {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  display: flex;
  gap: 0.62rem;
  pointer-events: none;
}

.diploma-puntos span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.diploma-puntos span:nth-child(1) { opacity: 0.35; }
.diploma-puntos span:nth-child(2) { opacity: 0.5; }
.diploma-puntos span:nth-child(3) { opacity: 0.65; }
.diploma-puntos span:nth-child(6) { background: var(--verde-lima); opacity: 0.8; }

/* ------------------------------------------------- Imagen del diploma */

.diploma-imagen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diploma-imagen img {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.45));
  transition: transform 0.4s ease;
}

.diploma-imagen:hover img {
  transform: translateY(-6px) scale(1.015);
}

/* ------------------------------------------------------- Contenido */

.diploma-contenido {
  min-width: 0;
}

.diploma-kicker {
  display: block;
  color: var(--verde-lima);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.diploma-contenido h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.05rem;
}

.diploma-intro {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
  max-width: 560px;
}

/* --------------------------------------------------- Beneficios */

.diploma-beneficios {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.7rem;
}

.diploma-beneficio {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Circulo verde de verificacion */
.diploma-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: block;
}

.diploma-beneficio-caja {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}

.diploma-beneficio:hover .diploma-beneficio-caja {
  border-color: rgba(141, 198, 63, 0.34);
  background: rgba(141, 198, 63, 0.06);
  transform: translateX(3px);
}

.diploma-beneficio-icono {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.diploma-beneficio-icono img {
  width: 26px;
  height: 26px;
  display: block;
}

.diploma-beneficio-texto {
  min-width: 0;
}

.diploma-beneficio-texto strong {
  display: block;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.16rem;
}

.diploma-beneficio-texto span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ------------------------------------------------------- Acciones */

.diploma-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.5rem;
}

.diploma-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  color: var(--azul-oscuro);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.diploma-btn img {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.diploma-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(141, 198, 63, 0.3);
  color: var(--azul-oscuro);
}

.diploma-btn:hover img {
  transform: translateX(3px);
}

.diploma-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 0.22rem;
  transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.diploma-enlace i {
  color: var(--verde-lima);
  transition: transform 0.25s ease;
}

.diploma-enlace:hover {
  color: var(--verde-lima);
  border-color: var(--verde-lima);
  gap: 0.8rem;
}

/* ------------------------------------------------- Franja inferior */

.diploma-franja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.93rem;
}

.diploma-franja span {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.diploma-franja span:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verde-lima);
}

/* Foco visible por teclado */
.diploma a:focus-visible {
  outline: 3px solid var(--verde-lima);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ------------------------------------------------------ Responsive */

@media (max-width: 1040px) {
  .diploma-panel {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 2rem;
  }

  .diploma-contenido {
    text-align: left;
  }

  .diploma-intro {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .diploma {
    padding: 3.5rem 1rem 4rem;
  }

  .diploma-panel {
    padding: 1.9rem 1.35rem;
    border-radius: 20px;
  }

  .diploma-puntos {
    display: none;
  }

  .diploma-beneficio-caja {
    padding: 0.8rem 0.9rem;
    gap: 0.8rem;
  }

  .diploma-beneficio-icono {
    width: 40px;
    height: 40px;
  }

  .diploma-acciones {
    gap: 1.1rem;
  }

  .diploma-btn {
    width: 100%;
    justify-content: center;
  }

  .diploma-franja {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .diploma-franja span:not(:last-child)::after {
    display: none;
  }
}

/* ---------------------------------- Respeta reduccion de movimiento */

@media (prefers-reduced-motion: reduce) {
  .diploma-imagen img,
  .diploma-beneficio-caja,
  .diploma-btn,
  .diploma-btn img,
  .diploma-enlace,
  .diploma-enlace i {
    transition: none !important;
  }

  .diploma-imagen:hover img,
  .diploma-beneficio:hover .diploma-beneficio-caja,
  .diploma-btn:hover,
  .diploma-btn:hover img {
    transform: none;
  }
}

/* ===== CARDS ECOSYSTEM ===== */
.cards-ecosystem {
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, #0a1a35 100%);
  position: relative;
  overflow: hidden;
}

.cards-ecosystem .section-title h2 {
  color: var(--verde-lima);
  text-shadow: 0 2px 20px rgba(154, 205, 50, 0.3);
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cards-ecosystem .section-title p {
  color: var(--blanco);
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.card-wrapper {
  perspective: 1000px;
  height: 400px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.card-wrapper:hover .card,
.card-wrapper.flipped .card {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
}

.card-front {
  background: linear-gradient(135deg, var(--azul-intermedio) 0%, #1e3d6b 100%);
  border: 3px solid rgba(154, 205, 50, 0.3);
  color: var(--blanco);
}

.card-front::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(154, 205, 50, 0.1) 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 20px;
}

.card-wrapper:hover .card-front::before,
.card-wrapper.flipped .card-front::before {
  opacity: 1;
  animation: shine 2s ease-in-out;
}

.card-icon {
  font-size: 3.5rem;
  color: var(--verde-lima);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.card-wrapper:hover .card-front .card-icon,
.card-wrapper.flipped .card-front .card-icon {
  transform: scale(1.1) rotate(5deg);
}

.card-front h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-front p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 2rem;
  font-style: italic;
}

.card-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--verde-lima);
  font-size: 0.9rem;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.card-hint i {
  animation: spinHint 3s linear infinite;
}

.card-wrapper:hover .card-hint,
.card-wrapper.flipped .card-hint {
  opacity: 0;
}

.card-back {
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, #0a1525 100%);
  border: 3px solid var(--verde-lima);
  transform: rotateY(180deg);
  color: var(--blanco);
  justify-content: flex-start;
  overflow-y: auto;
  padding: 2rem;
  scroll-behavior: smooth;
}

.card-back::-webkit-scrollbar {
  width: 8px;
}

.card-back::-webkit-scrollbar-track {
  background: rgba(154, 205, 50, 0.1);
  border-radius: 10px;
  margin: 5px 0;
}

.card-back::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  border-radius: 10px;
  border: 2px solid rgba(11, 30, 59, 0.3);
  transition: all 0.3s ease;
}

.card-back::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    135deg,
    var(--verde-lima-profundo) 0%,
    var(--verde-lima) 100%
  );
  transform: scale(1.1);
}

.card-back {
  scrollbar-width: thin;
  scrollbar-color: var(--verde-lima) rgba(154, 205, 50, 0.1);
}

.card-back-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-back h4 {
  color: var(--verde-lima);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.card-back > .card-back-content > p {
  color: var(--gris-claro);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  text-align: center;
}

.card-back ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.card-back li {
  color: var(--gris-claro);
  font-size: 0.85rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(154, 205, 50, 0.1);
  position: relative;
  padding-left: 1.5rem;
  text-align: left;
}

.card-back li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verde-lima);
  font-weight: bold;
}

.card-back li:last-child {
  border-bottom: none;
}

.card-stat {
  background: rgba(154, 205, 50, 0.1);
  border: 1px solid rgba(154, 205, 50, 0.2);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.card-stat strong {
  color: var(--verde-lima);
  font-size: 0.9rem;
}

.card-btn {
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(154, 205, 50, 0.4);
}

.cards-indicator {
  text-align: center;
  margin-top: 2rem;
  opacity: 0.8;
  animation: pulseIndicator 2s ease-in-out infinite;
}

.cards-indicator .indicator-content {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(154, 205, 50, 0.15);
  border: 1px solid rgba(154, 205, 50, 0.4);
  border-radius: 25px;
  padding: 1rem 2rem;
  color: var(--verde-lima);
}

.cards-indicator i {
  font-size: 1.3rem;
}

.cards-indicator p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.cards-ecosystem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(154, 205, 50, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(30, 61, 107, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}

/* ===== NEWS & UPDATES ===== */
.news-updates {
  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.news-updates::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--verde-lima) 25%,
    var(--azul-intermedio) 50%,
    var(--verde-lima) 75%,
    transparent 100%
  );
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(154, 205, 50, 0.3);
}

.news-updates::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  background:
    radial-gradient(circle, rgba(154, 205, 50, 0.1) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z' fill='%238DC63F' fill-opacity='0.1'/%3E%3C/svg%3E");
  opacity: 0.6;
  z-index: 0;
}

.news-updates {
  border: 1px solid transparent;
  background-clip: padding-box;
  border-image: linear-gradient(
      135deg,
      transparent 0%,
      rgba(154, 205, 50, 0.1) 25%,
      rgba(11, 30, 59, 0.05) 50%,
      rgba(154, 205, 50, 0.1) 75%,
      transparent 100%
    )
    1;
}

.news-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
  width: 100%;
  box-sizing: border-box;
}

.news-card {
  background: var(--blanco);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 6px rgba(11, 30, 59, 0.04),
    0 1px 3px rgba(11, 30, 59, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(154, 205, 50, 0.15);
  position: relative;
  animation: fadeInUp 0.6s ease-out;
}

.news-card:nth-child(1) {
  animation-delay: 0.1s;
}

.news-card:nth-child(2) {
  animation-delay: 0.2s;
}

.news-card:nth-child(3) {
  animation-delay: 0.3s;
}

.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--verde-lima), var(--azul-intermedio));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.news-card:hover::before {
  transform: scaleX(1);
}

.news-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(11, 30, 59, 0.12),
    0 8px 16px rgba(11, 30, 59, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.news-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(154, 205, 50, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.news-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.news-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, rgba(11, 30, 59, 0.1));
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.08);
}

.news-content {
  padding: 1.8rem;
  background: linear-gradient(to bottom, #ffffff, #fcfdfe);
}

.news-date {
  color: var(--verde-lima);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
  letter-spacing: 0.5px;
}

.news-content h3 {
  color: var(--azul-oscuro);
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}

.news-content p {
  color: var(--gris-medio);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 0.95rem;
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.tag {
  background: rgba(154, 205, 50, 0.12);
  color: var(--azul-oscuro);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(154, 205, 50, 0.2);
  transition: all 0.3s ease;
}

.tag:hover {
  background: rgba(154, 205, 50, 0.2);
  transform: translateY(-1px);
}

.news-link {
  color: var(--azul-oscuro);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  position: relative;
}

/* La tarjeta de noticia abre una ventana emergente en la misma pagina, no
   navega a ningun sitio: por eso el disparador es <button> y no <a>. Estas
   reglas le quitan la apariencia por defecto del navegador para que herede
   exactamente el aspecto que tenia el enlace. */
button.news-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: inherit;
  cursor: pointer;
}

.news-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--verde-lima);
  transition: width 0.3s ease;
}

.news-link:hover {
  color: var(--verde-lima);
  gap: 12px;
}

.news-link:hover::after {
  width: 100%;
}

.news-cta {
  background: linear-gradient(
    135deg,
    var(--azul-oscuro) 0%,
    var(--azul-intermedio) 100%
  );
  border-radius: 20px;
  padding: 2.4rem 1.6rem; /* más compacto */
  text-align: center;
  color: var(--blanco);
  max-width: 800px;
  margin: 4rem auto 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(154, 205, 50, 0.2);
  min-width: 0;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}
.news-cta .news-cta-content h3 {
  font-size: 1.6rem; /* antes 2rem */
  line-height: 1.2;
  margin: 0 0 0.5rem 0; /* reducir espacio inferior */
}

.news-cta .news-cta-content p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.1rem 0; /* más compacto */
}

.news-cta .newsletter-form {
  max-width: 800px; /* permite colocar el texto a la derecha */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.news-cta .newsletter-form .form-group {
  gap: 0.75rem;
  margin: 0; /* en línea con la nota */
  flex-wrap: nowrap;
  flex: 1 1 520px;
}

.news-cta .newsletter-form input {
  padding: 12px 14px;
  height: 44px;
}

.news-cta .newsletter-form .btn {
  padding: 12px 16px;
  height: 44px;
}

.news-cta .newsletter-form .form-note {
  flex: 0 1 260px; /* ocupa el lateral derecho */
  margin: 0; /* alineado a la derecha del grupo */
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.1px;
  text-align: left;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .news-cta {
    padding: 2rem 1rem;
  }
  .news-cta .news-cta-content h3 {
    font-size: 1.4rem;
  }
  .news-cta .news-cta-content p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  .news-cta .newsletter-form input,
  .news-cta .newsletter-form .btn {
    height: 42px;
  }
  .news-cta .newsletter-form {
    display: block;
    max-width: 100%;
  }
  .news-cta .newsletter-form .form-group {
    flex: none;
  }
  .news-cta .newsletter-form .form-note {
    font-size: 0.78rem;
    margin-top: 0.45rem;
    text-align: center;
  }
}

/* Contenedor interno exclusivo del CTA de noticias (aislado) */
.news-cta .news-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.news-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(
    circle,
    rgba(154, 205, 50, 0.1) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%) rotate(45deg);
}

.news-cta h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.news-cta p {
  margin-bottom: 2.5rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
}

.newsletter-form {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.newsletter-form .form-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  min-width: 0;
  flex-wrap: wrap; /* Evita desbordes en pantallas angostas */
  align-items: stretch;
}

.newsletter-form input {
  flex: auto;
  padding: 14px 18px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-width: 0; /* Permite encoger dentro del flex */
  height: 48px;
  box-sizing: border-box;
}

.newsletter-form input:focus {
  outline: none;
  background: var(--blanco);
  box-shadow: 0 4px 20px rgba(154, 205, 50, 0.3);
}

.newsletter-form .btn {
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(154, 205, 50, 0.4);
  white-space: nowrap;
  height: 48px; /* Igual altura que el input */
  align-self: stretch;
}

.newsletter-form .form-note {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0;
}

/* Responsivo: apilar input y botón para evitar desbordes */
@media (max-width: 768px) {
  .newsletter-form .form-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  .newsletter-form input,
  .newsletter-form .btn {
    width: 100%;
    height: 46px;
  }
}

.legend-color.dgii {
  background: var(--verde-lima);
}

.legend-color.tss {
  background: #ffd700;
}

/* ===== YOUTUBE SECTION ===== */
.youtube-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.youtube-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      circle at 20% 80%,
      rgba(154, 205, 50, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(30, 61, 107, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.youtube-section .section-title h2 {
  color: var(--blanco);
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.1);
}

.youtube-section .section-title p {
  color: var(--gris-claro);
}

.youtube-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.youtube-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--verde-lima) 0%, #7fbf00 100%);
  color: var(--blanco);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  animation: pulse-lime 2s infinite;
}

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  width: 100%;
  box-sizing: border-box;
}

.youtube-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.youtube-card:hover {
  transform: translateY(-10px);
  border-color: rgba(154, 205, 50, 0.35);
  box-shadow: 0 15px 30px rgba(154, 205, 50, 0.15);
}

.video-thumbnail {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--azul-oscuro);
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.youtube-card:hover .video-thumbnail img {
  transform: scale(1.05);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(154, 205, 50, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.youtube-card:hover .play-button {
  opacity: 1;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--blanco);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.video-content {
  padding: 1.5rem;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.video-date,
.video-views {
  color: var(--gris-medio);
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-content h4 {
  color: var(--blanco);
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.video-content p {
  color: var(--gris-claro);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.video-tag {
  background: rgba(154, 205, 50, 0.2);
  color: var(--verde-lima);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.podcast-tag {
  background: rgba(101, 78, 163, 0.2);
  color: #8a63d2;
}

.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--verde-lima) 0%, #7fbf00 100%);
  color: var(--blanco);
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.watch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(154, 205, 50, 0.35);
}

/* ===== TRUST OFFICE SECTION ===== */
.trust-office-section {
  position: relative;
  padding: 6rem 2rem;
  background:
    radial-gradient(
      circle at top left,
      rgba(141, 198, 63, 0.14),
      transparent 28%
    ),
    linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
  overflow: hidden;
}

.trust-office-shell {
  max-width: 1200px;
  margin: 0 auto;
}

.trust-office-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.trust-office-intro {
  max-width: 760px;
  margin-bottom: 0;
}

.trust-office-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(11, 30, 59, 0.08);
  color: var(--azul-intermedio);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.trust-office-intro h2 {
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--azul-oscuro);
  margin-bottom: 1rem;
}

.trust-office-intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #48617f;
}

.trust-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}

.trust-office-brand-visual {
  position: relative;
}

.trust-brand-card {
  position: relative;
  min-height: 370px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #10274b 0%, #0a1730 100%);
  border: 1px solid rgba(11, 30, 59, 0.08);
  box-shadow: 0 26px 60px rgba(11, 30, 59, 0.16);
}

.trust-brand-card::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 2;
  pointer-events: none;
}

.trust-brand-badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--azul-oscuro);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.trust-brand-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trust-brand-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(7, 18, 35, 0.05) 0%,
      rgba(7, 18, 35, 0.12) 35%,
      rgba(7, 18, 35, 0.34) 100%
    ),
    radial-gradient(
      circle at 75% 18%,
      rgba(141, 198, 63, 0.12),
      transparent 24%
    );
}

.trust-brand-copy {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  left: 1.2rem;
  z-index: 3;
  padding: 1.1rem 1.15rem;
  border-radius: 20px;
  background: rgba(8, 18, 35, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.trust-brand-copy strong {
  display: block;
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.trust-brand-copy span {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
  font-size: 0.92rem;
}

.trust-metric {
  padding: 1.1rem 1.15rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(11, 30, 59, 0.08);
  box-shadow: 0 18px 45px rgba(11, 30, 59, 0.08);
}

.trust-metric strong {
  display: block;
  color: var(--azul-oscuro);
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.trust-metric span {
  color: #58718f;
  font-size: 0.92rem;
  line-height: 1.5;
}

.trust-office-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 2rem;
  align-items: start;
}

.office-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.office-video-card,
.office-panel-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(11, 30, 59, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(11, 30, 59, 0.12);
}

.office-video-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.office-video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(11, 30, 59, 0.16);
}

.office-video-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #11294f 0%, #09152d 100%);
  overflow: hidden;
}

.office-video-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 14, 29, 0.08) 0%,
    rgba(6, 14, 29, 0.45) 100%
  );
  pointer-events: none;
}

.office-video-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.office-video-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--azul-oscuro);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(11, 30, 59, 0.16);
}

.office-video-content {
  padding: 1.35rem;
}

.office-video-content h3 {
  font-size: 1.15rem;
  color: var(--azul-oscuro);
  margin-bottom: 0.7rem;
}

.office-video-content p {
  color: #55708c;
  line-height: 1.65;
}

.office-panel-card {
  padding: 1.6rem;
  position: sticky;
  top: 110px;
}

.office-panel-label {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(141, 198, 63, 0.14);
  color: #4d7a15;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.office-panel-card h3 {
  font-size: 1.65rem;
  line-height: 1.2;
  color: var(--azul-oscuro);
  margin-bottom: 1rem;
}

.office-panel-card p {
  color: #53708d;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.office-trust-list {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.office-trust-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--azul-oscuro);
  line-height: 1.55;
}

.office-trust-list i {
  color: var(--verde-lima-profundo);
  margin-top: 0.15rem;
}

.trust-office-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.youtube-cta {
  background: linear-gradient(
    135deg,
    rgba(154, 205, 50, 0.12) 0%,
    rgba(30, 61, 107, 0.1) 100%
  );
  border: 2px solid rgba(154, 205, 50, 0.25);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  min-width: 0;
}

.youtube-cta .cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  gap: 2rem;
  min-width: 0;
}

.cta-icon {
  font-size: 3rem;
  color: var(--verde-lima);
  flex-shrink: 0;
}

.cta-text {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.cta-text h3 {
  color: var(--blanco);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  word-wrap: break-word;
}

.cta-text p {
  color: var(--gris-claro);
  margin: 0;
  line-height: 1.5;
}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--verde-lima);
  color: var(--blanco);
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.subscribe-btn:hover {
  background: #7fbf00;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(154, 205, 50, 0.35);
}
/* ===== YOUTUBE HEADER CONTAINER ===== */
.youtube-header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
  text-align: left;
}

.youtube-logo-side {
  flex: 0 0 auto;
}

.youtube-main-logo {
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.2));
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: floatLogo 6s ease-in-out infinite;
}

.youtube-main-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 8px 25px rgba(255, 255, 255, 0.3));
}

.youtube-content-side {
  flex: 1;
  max-width: 600px;
}

.youtube-content-side h3 {
  color: var(--blanco);
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.youtube-content-side p {
  color: var(--gris-claro);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

@keyframes floatLogo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .youtube-header-container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .youtube-main-logo {
    max-width: 220px;
  }

  .youtube-content-side h3 {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .youtube-header-container {
    padding: 0 1rem;
  }

  .youtube-main-logo {
    max-width: 200px;
  }

  .youtube-content-side h3 {
    font-size: 1.6rem;
  }

  .youtube-content-side p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .youtube-main-logo {
    max-width: 180px;
  }

  .youtube-content-side h3 {
    font-size: 1.4rem;
  }
}

@keyframes floatLogo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Responsive adjustments for logo */
@media (max-width: 768px) {
  .youtube-logo {
    max-width: 250px;
  }
}



.live-events .section-title h2 {
  color: var(--blanco);
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.1);
}

.live-events .section-title p {
  color: var(--gris-claro);
}





.event-date-large .day {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.event-date-large .month {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.event-date-large .year {
  display: block;
  font-size: 1rem;
  opacity: 0.8;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gris-claro);
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.meta-item i {
  color: var(--verde-lima);
  width: 20px;
}

.event-tag.fiscal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.event-tag.actualizacion {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.event-tag.dgii {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.event-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}



.timer-unit .number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--verde-lima);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.timer-unit .label {
  display: block;
  font-size: 0.8rem;
  color: var(--gris-claro);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.upcoming-events h3 {
  color: var(--blanco);
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.event-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.event-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

.event-card:hover::before {
  left: 100%;
}

.event-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.event-card.featured {
  border: 2px solid #ffd700;
  animation: featured-glow 3s ease-in-out infinite;
}

.event-date {
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  padding: 10px 15px;
  border-radius: 10px;
  text-align: center;
  min-width: 70px;
}

.event-date .day {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.event-date .month {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.event-badge.new {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
}

.event-card h4 {
  color: var(--blanco);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.event-card .event-time {
  color: var(--verde-lima);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-card .event-instructor {
  color: var(--gris-claro);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.event-card .event-description {
  color: var(--gris-claro);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.event-card .event-actions {
  display: flex;
  gap: 0.8rem;
}

.event-card .btn {
  flex: 1;
  padding: 8px 16px;
  font-size: 0.9rem;
  text-align: center;
}

.notification-bell {
  display: inline-block;
  margin-left: 8px;
  color: #ffd700;
  animation: ring 2s infinite;
}

/* ==================================================================
   EVENTOS Y SEMINARIOS - agenda Reitor
   Cabecera con navegador de meses, evento destacado y agenda proxima
   con tarjeta de suscripcion.
   ================================================================== */

.professional-events {
  position: relative;
  padding: 5rem 2rem 5.5rem;
  background: linear-gradient(180deg, #08192e 0%, var(--azul-oscuro) 55%, #071528 100%);
  overflow: hidden;
}

/* Trama de circulos y diagonales del diseno */
.professional-events::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(860px, 70%);
  height: 100%;
  background: url("../assets/images/eventos/patron-fondo-eventos.svg") no-repeat right top;
  background-size: cover;
  opacity: 0.9;
  pointer-events: none;
}

.eventos-shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------------------------------------------------- Cabecera */

.eventos-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.eventos-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--verde-lima);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.eventos-kicker::after {
  content: "";
  width: 62px;
  height: 2px;
  border-radius: 2px;
  background: var(--verde-lima);
  opacity: 0.6;
}

.professional-events .section-title {
  margin: 0;
  text-align: left;
  max-width: 620px;
}

.professional-events .section-title h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
}

.professional-events .section-title p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 430px;
}

/* Navegador de meses y acceso al calendario */
.eventos-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.eventos-meses {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.eventos-mes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.eventos-mes-btn img {
  width: 16px;
  height: 16px;
  display: block;
}

.eventos-mes-btn:hover:not(:disabled) {
  background: rgba(141, 198, 63, 0.16);
}

.eventos-mes-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.eventos-mes-actual {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  min-width: 200px;
  text-align: center;
}

.eventos-calendario-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.eventos-calendario-btn img {
  width: 18px;
  height: 18px;
}

.eventos-calendario-btn:hover {
  border-color: rgba(141, 198, 63, 0.5);
  background: rgba(141, 198, 63, 0.09);
  color: #ffffff;
}

/* ------------------------------------------- Evento destacado */

.evento-destacado {
  display: grid;
  grid-template-columns: 1.02fr 1.12fr;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3);
  margin-bottom: 3rem;
}

.evento-foto {
  position: relative;
  min-height: 380px;
  background: #12294a;
  overflow: hidden;
}

.evento-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.evento-etiqueta {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.evento-etiqueta img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(9%) sepia(35%) saturate(2200%) hue-rotate(190deg);
}

/* Cuerpo del evento destacado */
.evento-cuerpo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 1.75rem;
  padding: 2rem 2.1rem;
  align-content: start;
}

.evento-fecha {
  text-align: center;
  min-width: 96px;
}

.evento-fecha .dia {
  display: block;
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--azul-oscuro);
  line-height: 1;
  letter-spacing: -0.03em;
}

.evento-fecha .mes {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-oscuro);
}

.evento-titulo h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.25;
  margin: 0 0 0.55rem;
}

.evento-titulo p {
  color: #64748b;
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
}

/* Datos practicos y reserva */
.evento-detalle {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.evento-datos {
  border: 1px solid rgba(11, 30, 59, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.evento-dato {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  color: #35506d;
  font-size: 0.93rem;
}

.evento-dato + .evento-dato {
  border-top: 1px solid rgba(11, 30, 59, 0.09);
}

.evento-dato img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Columna de reserva */
.evento-reserva {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(11, 30, 59, 0.09);
}

.evento-cupos {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0 0 0.6rem;
}

.evento-cupos strong {
  display: block;
  color: var(--azul-oscuro);
  font-size: 1.05rem;
  font-weight: 700;
}

.evento-barra {
  height: 7px;
  border-radius: 999px;
  background: rgba(11, 30, 59, 0.1);
  overflow: hidden;
  margin-bottom: 1.15rem;
}

.evento-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-lima), var(--verde-lima-profundo));
}

.evento-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1.3rem;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.evento-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  transition: transform 0.25s ease;
}

.evento-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(141, 198, 63, 0.32);
  color: #ffffff;
}

.evento-btn:hover img {
  transform: translateX(3px);
}

.evento-detalles-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  color: var(--azul-oscuro);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.25s ease;
}

.evento-detalles-link i {
  color: var(--verde-lima-profundo);
}

.evento-detalles-link:hover {
  gap: 0.75rem;
  color: var(--verde-lima-profundo);
}

/* ------------------------------------------------ Agenda proxima */

.agenda-titulo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.agenda-titulo h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.agenda-titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--verde-lima), rgba(141, 198, 63, 0));
}

.agenda-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.45fr) minmax(300px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.agenda-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  min-width: 0;
}

/* Linea de tiempo con puntos sobre las tarjetas */
.agenda-linea {
  position: relative;
  grid-column: 1 / -1;
  height: 12px;
  margin-bottom: 0.9rem;
}

.agenda-linea::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(141, 198, 63, 0.5), rgba(141, 198, 63, 0.12));
}

.agenda-linea {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.agenda-linea span {
  justify-self: center;
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--azul-oscuro);
  border: 2px solid var(--verde-lima);
}

.agenda-card {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  padding: 1.05rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
}

.agenda-card:hover,
.agenda-card:focus-within {
  border-color: rgba(141, 198, 63, 0.4);
  background: rgba(141, 198, 63, 0.07);
  transform: translateY(-3px);
}

.agenda-fecha {
  flex-shrink: 0;
  text-align: center;
  padding-right: 0.85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 54px;
}

.agenda-fecha .dia {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.agenda-fecha .mes {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--verde-lima);
}

.agenda-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.agenda-categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--verde-lima);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.agenda-categoria img {
  width: 16px;
  height: 16px;
}

.agenda-info h4 {
  font-size: 0.94rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.32;
  margin: 0 0 0.8rem;
}

.agenda-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
}

.agenda-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.agenda-meta img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.agenda-meta .separador {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--verde-lima);
  opacity: 0.7;
}

.agenda-pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
}

.agenda-pie .agenda-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.agenda-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(141, 198, 63, 0.45);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.agenda-flecha img {
  width: 15px;
  height: 15px;
}

.agenda-flecha:hover {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  transform: translateX(3px);
}

.agenda-flecha:hover img {
  filter: brightness(0) invert(1);
}

/* ------------------------------------------ Tarjeta de suscripcion */

.agenda-suscripcion {
  padding: 1.75rem 1.6rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.agenda-suscripcion-cabecera {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

.agenda-suscripcion-icono {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul-oscuro);
}

.agenda-suscripcion-icono img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.agenda-suscripcion h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.3;
  margin: 0;
}

.agenda-suscripcion .newsletter-form {
  display: block;
  max-width: none;
  margin: 0;
}

.agenda-suscripcion .form-group {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0;
  flex-wrap: nowrap;
}

.agenda-suscripcion input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(11, 30, 59, 0.14);
  background: #ffffff;
  color: var(--azul-oscuro);
  font-family: inherit;
  font-size: 0.93rem;
}

.agenda-suscripcion input[type="email"]:focus {
  outline: none;
  border-color: rgba(141, 198, 63, 0.7);
  box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.13);
}

.agenda-suscripcion button {
  flex-shrink: 0;
  padding: 0.75rem 1.35rem;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.agenda-suscripcion button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(141, 198, 63, 0.3);
}

.agenda-suscripcion .form-note {
  margin: 0.85rem 0 0;
  color: #7b8a9c;
  font-size: 0.84rem;
}

.agenda-suscripcion .reitor-form-msg {
  font-size: 0.86rem;
}

/* Foco visible por teclado */
.professional-events a:focus-visible,
.professional-events button:focus-visible,
.professional-events input:focus-visible {
  outline: 3px solid var(--verde-lima);
  outline-offset: 3px;
}

/* --------------------- Resaltado al llegar desde la campana */

.notification-target-highlight {
  animation: notificationTargetPulse 2s ease;
}

@keyframes notificationTargetPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(141, 198, 63, 0.45);
    transform: scale(1);
  }
  40% {
    box-shadow: 0 0 0 12px rgba(141, 198, 63, 0);
    transform: scale(1.01);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(141, 198, 63, 0);
    transform: scale(1);
  }
}

/* ------------------------------------------------------ Responsive */

@media (max-width: 1100px) {
  .evento-destacado {
    grid-template-columns: 1fr;
  }

  .evento-foto {
    min-height: 280px;
  }

  .agenda-grid {
    grid-template-columns: 1fr;
  }

  .agenda-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .agenda-lista {
    grid-template-columns: 1fr;
  }

  .agenda-linea {
    display: none;
  }

  .evento-detalle {
    grid-template-columns: 1fr;
  }

  .evento-reserva {
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: 0;
    border-top: 1px solid rgba(11, 30, 59, 0.09);
  }
}

@media (max-width: 640px) {
  .professional-events {
    padding: 3.5rem 1rem 4rem;
  }

  .eventos-cabecera {
    flex-direction: column;
  }

  .eventos-controles {
    width: 100%;
  }

  .eventos-meses {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .eventos-mes-actual {
    min-width: 0;
  }

  .evento-cuerpo {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
    gap: 1.1rem;
  }

  .evento-fecha {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    text-align: left;
  }

  .evento-fecha .dia {
    font-size: 2.5rem;
  }

  .agenda-suscripcion .form-group {
    flex-direction: column;
  }

  .agenda-suscripcion button {
    width: 100%;
  }
}

/* ---------------------------------- Respeta reduccion de movimiento */

@media (prefers-reduced-motion: reduce) {
  .agenda-card,
  .agenda-flecha,
  .evento-btn,
  .evento-btn img,
  .agenda-suscripcion button,
  .eventos-calendario-btn {
    transition: none !important;
  }

  .agenda-card:hover,
  .agenda-flecha:hover,
  .evento-btn:hover,
  .agenda-suscripcion button:hover {
    transform: none;
  }

  .notification-target-highlight {
    animation: none;
  }
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===== Fallback AOS para sección TEAM (solo scope team) ===== */
.reitor-team [data-aos] {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  filter: blur(6px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 700ms ease;
  will-change: opacity, transform, filter;
}

.reitor-team .aos-animate {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.login-modal.active {
  opacity: 1;
  visibility: visible;
}

.login-modal.active .login-container {
  transform: scale(1) translateY(0);
}

.login-tab.active {
  color: var(--azul-oscuro);
  background: var(--blanco);
  box-shadow: 0 2px 8px rgba(154, 205, 50, 0.3);
}

.login-tab:hover:not(.active) {
  color: var(--azul-oscuro);
  background: rgba(154, 205, 50, 0.1);
}

.form-group {
  margin-bottom: 0.8rem;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: var(--azul-oscuro);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--gris-medio);
  border-radius: 6px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  background-color: var(--blanco);
}

.form-control:focus {
  outline: none;
  border-color: var(--verde-lima);
  box-shadow: 0 0 0 3px rgba(154, 205, 50, 0.15);
  transform: translateY(-1px);
}

#loginForm,
#registerForm {
  animation: slideIn 0.4s ease;
}

/* ===== REITOR CHATBOT ===== */
.reitor-chatbot {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 1200;
  width: 72px;
  height: 72px;
}

.reitor-chatbot-bubble {
  position: relative;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f2c52 0%, #1a4677 100%);
  box-shadow:
    0 18px 34px rgba(11, 30, 59, 0.18),
    0 0 0 4px rgba(26, 70, 119, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.reitor-chatbot-bubble:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 22px 40px rgba(11, 30, 59, 0.22),
    0 0 0 4px rgba(26, 70, 119, 0.28);
}



.reitor-chatbot-teaser {
  position: absolute;
  right: 78px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #102c52 0%, #1a4677 100%);
  color: var(--blanco);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.79rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(11, 30, 59, 0.18);
}

.reitor-chatbot-teaser::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #1a4677;
  transform: translateY(-50%) rotate(45deg);
}

.reitor-chatbot.active .reitor-chatbot-teaser {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(12px);
}

.reitor-chatbot-panel {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  width: min(360px, calc(100vw - 120px));
  height: min(520px, calc(100vh - 132px));
  min-height: 430px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  border: 1px solid rgba(15, 54, 99, 0.1);
  border-radius: 24px;
  box-shadow: 0 28px 62px rgba(11, 30, 59, 0.2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease;
  pointer-events: none;
}

.reitor-chatbot.active .reitor-chatbot-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.reitor-guided-focus {
  animation: reitorGuidedFocus 2.2s ease;
}

@keyframes reitorGuidedFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 70, 119, 0);
  }
  20% {
    box-shadow: 0 0 0 6px rgba(26, 70, 119, 0.16);
  }
  65% {
    box-shadow: 0 0 0 14px rgba(26, 70, 119, 0.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 70, 119, 0);
  }
}

.reitor-chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background:
    radial-gradient(
      circle at top right,
      rgba(154, 205, 50, 0.18),
      transparent 38%
    ),
    linear-gradient(135deg, #0f2c52 0%, #173f70 100%);
  color: var(--blanco);
}

.reitor-chatbot-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reitor-chatbot-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.reitor-chatbot-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  padding: 5px;
  object-fit: contain;
}

.reitor-chatbot-status-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #5fd37c;
  border: 2px solid #173f70;
}

.reitor-chatbot-agent-meta {
  min-width: 0;
}

.reitor-chatbot-agent-meta strong {
  display: block;
  font-size: 0.96rem;
  text-transform: lowercase;
}

.reitor-chatbot-agent-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.82);
}

.reitor-chatbot-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reitor-chatbot-control {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.24s ease,
    transform 0.24s ease;
}

.reitor-chatbot-control:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.reitor-chatbot-body {
  padding: 14px;
  min-height: 0;
}

.reitor-chatbot-messages {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
}

.reitor-chatbot-message {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 10px 24px rgba(11, 30, 59, 0.07);
}

.reitor-chatbot-message.bot {
  align-self: flex-start;
  background: #ecf3fb;
  color: #16314f;
  border-top-left-radius: 6px;
}

.reitor-chatbot-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #dff0b5 0%, #cce88e 100%);
  color: #18314b;
  border-top-right-radius: 6px;
  font-weight: 600;
}

.reitor-chatbot-message.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
}

.reitor-chatbot-message p {
  margin: 0;
}

.reitor-chatbot-message p + p {
  margin-top: 8px;
}

.reitor-chatbot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(23, 63, 112, 0.56);
  animation: reitorChatTyping 1.1s infinite ease-in-out;
}

.reitor-chatbot-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.reitor-chatbot-dot:nth-child(3) {
  animation-delay: 0.3s;
}

.reitor-chatbot-quick-questions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.reitor-chatbot-chip {
  border: 1px solid rgba(15, 54, 99, 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: #17314e;
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 0.79rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11, 30, 59, 0.04);
  transition:
    border-color 0.24s ease,
    transform 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease;
}

.reitor-chatbot-chip:hover:not(:disabled) {
  border-color: var(--verde-lima);
  background: rgba(154, 205, 50, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 30, 59, 0.08);
}

.reitor-chatbot-chip:disabled {
  opacity: 0.55;
  cursor: default;
}

.reitor-chatbot-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(15, 54, 99, 0.08);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(15, 44, 82, 0.72);
  font-size: 0.73rem;
  font-weight: 600;
}

@keyframes reitorChatTyping {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1000;
  transition:
    opacity 0.28s ease,
    transform 0.32s ease,
    filter 0.32s ease,
    visibility 0.32s ease;
}

.whatsapp-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  transition: all 0.3s ease;
  position: relative;
  animation: pulse-whatsapp 2s infinite;
}

.whatsapp-link:hover {
  background-color: #128c7e;
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.7);
}

.whatsapp-link:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(-10px);
}

.whatsapp-link i {
  color: white;
  font-size: 1.8rem;
}

.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background-color: var(--azul-oscuro);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border-left: 5px solid var(--azul-oscuro);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.whatsapp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 30, 59, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.whatsapp-modal.active {
  opacity: 1;
  visibility: visible;
}

.whatsapp-modal-content {
  background-color: var(--blanco);
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.4s ease;
}

.whatsapp-modal.active .whatsapp-modal-content {
  transform: scale(1);
}

.whatsapp-modal-header {
  background-color: #25d366;
  color: var(--blanco);
  padding: 1.5rem;
  text-align: center;
  position: relative;
}

.whatsapp-modal-header h3 {
  font-size: 1.5rem;
  margin: 0;
}

.close-whatsapp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-whatsapp:hover {
  color: var(--azul-oscuro);
}

.whatsapp-modal-body {
  padding: 1.5rem;
}

.whatsapp-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--gris-claro);
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.whatsapp-option:hover {
  border-color: #25d366;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.1);
}

.whatsapp-option i {
  font-size: 2rem;
  color: #25d366;
  margin-right: 1rem;
}

.whatsapp-info {
  flex: 1;
}

.whatsapp-info h4 {
  margin: 0 0 0.3rem 0;
  color: var(--azul-oscuro);
  font-size: 1rem;
}

.whatsapp-info p {
  margin: 0;
  color: var(--gris-medio);
  font-size: 0.8rem;
}

.btn-whatsapp {
  background-color: #25d366;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #128c7e;
  transform: translateY(-2px);
}

.whatsapp-modal-footer {
  background-color: var(--gris-claro);
  padding: 1rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--gris-medio);
}

.whatsapp-modal-footer p {
  margin: 0;
  color: var(--gris-medio);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

@media (max-width: 768px) {
  .reitor-chatbot {
    right: 18px;
    bottom: 84px;
    width: 66px;
    height: 66px;
  }

  .reitor-chatbot-bubble {
    width: 66px;
    height: 66px;
  }

  

  .reitor-chatbot-teaser {
    right: 72px;
    max-width: 170px;
    padding: 8px 11px;
    font-size: 0.73rem;
  }

  .reitor-chatbot-panel {
    width: min(320px, calc(100vw - 108px));
    height: min(500px, calc(100vh - 120px));
    min-height: 410px;
  }
}

@media (max-width: 480px) {
  .reitor-chatbot {
    right: 14px;
    bottom: 80px;
    width: 62px;
    height: 62px;
  }

  .reitor-chatbot-bubble {
    width: 62px;
    height: 62px;
  }

  

  .reitor-chatbot-teaser {
    display: none;
  }

  .reitor-chatbot-panel {
    width: min(280px, calc(100vw - 96px));
    height: min(470px, calc(100vh - 108px));
    min-height: 390px;
    border-radius: 20px;
  }

  .reitor-chatbot-header {
    padding: 14px 14px 12px;
  }

  .reitor-chatbot-body {
    padding: 12px;
  }

  .reitor-chatbot-message {
    max-width: 92%;
    font-size: 0.82rem;
  }

  .reitor-chatbot-chip {
    font-size: 0.76rem;
  }
}

/* ===== SPECIAL ELEMENTS ===== */
.nav-new-badge {
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: var(--azul-oscuro);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse-green 2s infinite;
  display: inline-block;
  line-height: 1;
  margin-left: 8px;
}

/* ===== DASHBOARD STYLES ===== */
.dashboard-page {
  padding-top: 80px;
}

.dashboard-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(
    135deg,
    var(--azul-oscuro) 0%,
    var(--azul-intermedio) 100%
  );
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--verde-lima);
}

.user-menu .submenu {
  min-width: 200px;
  right: 0;
  left: auto;
}

.user-menu .submenu li.divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 5px 0;
}

.dashboard-hero {
  background: linear-gradient(
    135deg,
    var(--azul-oscuro) 0%,
    var(--azul-intermedio) 100%
  );
  color: var(--blanco);
  padding: 2rem 2rem 3rem;
  margin-top: 0;
}

.dashboard-hero .hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: center;
}

.welcome-message h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.user-highlight {
  color: var(--verde-lima);
}

.learning-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card i {
  font-size: 2rem;
  color: var(--verde-lima);
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--verde-lima);
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.progress-chart {
  text-align: center;
}

.circular-progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--verde-lima) 270deg,
    rgba(255, 255, 255, 0.1) 0deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
}

.circular-progress::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: var(--azul-intermedio);
  border-radius: 50%;
}

.progress-value {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blanco);
}

.active-courses,
.completed-courses,
.upcoming-events {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  scroll-margin-top: 100px;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.2rem;
  color: var(--azul-oscuro);
  margin-bottom: 0.5rem;
}

.section-header p {
  color: var(--gris-medio);
  font-size: 1.1rem;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.course-card.active {
  background: var(--blanco);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.course-card.active:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.course-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 2;
}

.course-image {
  height: 150px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: var(--blanco);
  font-weight: 600;
  font-size: 1.1rem;
}

.course-progress {
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  margin-bottom: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--verde-lima);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.course-progress span {
  font-size: 0.8rem;
  opacity: 0.9;
}

.course-content {
  padding: 1.5rem;
}

.course-content h3 {
  color: var(--azul-oscuro);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.course-description {
  color: var(--gris-medio);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.course-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gris-medio);
  font-size: 0.9rem;
}

.meta-item i {
  color: var(--verde-lima);
}

.course-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.course-actions .btn {
  flex: 1;
  padding: 10px;
  font-size: 0.9rem;
}

/* Mejorar legibilidad del botón Detalles (dashboard) */
.dashboard-page .course-actions .btn-secondary {
  background: transparent;
  color: var(--verde-lima);
  border-color: var(--verde-lima);
}

.dashboard-page .course-actions .btn-secondary:hover,
.dashboard-page .course-actions .btn-secondary:focus {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
}

.next-lesson {
  background: rgba(154, 205, 50, 0.1);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--azul-oscuro);
  border-left: 3px solid var(--verde-lima);
}

.completed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.completed-card {
  background: var(--blanco);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.certificate-badge {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  min-width: 120px;
}

.certificate-badge i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.course-info {
  flex: 1;
}

.course-info h4 {
  color: var(--azul-oscuro);
  margin-bottom: 0.5rem;
}

.completion-date {
  color: var(--gris-medio);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.final-grade .grade {
  background: rgba(154, 205, 50, 0.1);
  color: var(--verde-lima);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.event-card {
  background: var(--blanco);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--verde-lima);
}

.event-date {
  text-align: center;
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 10px;
  border-radius: 8px;
  min-width: 60px;
}

.event-date .day {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

.event-date .month {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.event-info {
  flex: 1;
}

.event-info h4 {
  color: var(--azul-oscuro);
  margin-bottom: 0.5rem;
}

.event-time,
.event-instructor {
  color: var(--gris-medio);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.event-time i,
.event-instructor i {
  margin-right: 5px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes floatService {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(-4px);
  }
  75% {
    transform: translateY(-6px);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 15px rgba(154, 205, 50, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(154, 205, 50, 0.6);
  }
  100% {
    box-shadow: 0 4px 15px rgba(154, 205, 50, 0.3);
  }
}

@keyframes buttonSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes borderProgressive {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  25% {
    clip-path: polygon(0 0, 25% 0, 25% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  }
  75% {
    clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes borderGlow {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes spinHint {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseIndicator {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  }
  50% {
    box-shadow: 0 4px 25px rgba(37, 211, 102, 0.8);
  }
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse-red {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
}

/* Variante verde lima para badges/botones de YouTube */
@keyframes pulse-lime {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(154, 205, 50, 0.45);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(154, 205, 50, 0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
  }
  to {
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.3);
  }
}

@keyframes pulse-timer {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes featured-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
}

@keyframes ring {
  0%,
  100% {
    transform: rotate(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-10deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(10deg);
  }
}

@keyframes subtle-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes pulse-green {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(154, 205, 50, 0.4);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(154, 205, 50, 0);
  }
}

/* ===== FOOTER ===== */
footer {
  background-color: var(--azul-oscuro);
  color: var(--gris-claro);
  padding: 3rem 2rem 1.4rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2.2rem;
}

.footer-col h3 {
  color: var(--blanco);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 50px;
  height: 2px;
  background-color: var(--verde-lima);
}

.footer-col p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: var(--gris-claro);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--verde-lima);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--azul-intermedio);
  border-radius: 50%;
  color: var(--blanco);
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--verde-lima);
  transform: translateY(-3px);
}

.copyright {
  text-align: center;
  margin-top: 2.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--azul-intermedio);
  color: var(--gris-medio);
  font-size: 0.84rem;
}

.footer-author-card {
  width: fit-content;
  max-width: 100%;
  margin: 1.35rem 0 0 auto;
  padding: 0.72rem 0.9rem;
  border-radius: 14px;
  position: relative;
  overflow: visible;
  z-index: 3;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.footer-author-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.7rem;
  cursor: default;
}

.footer-author-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(154, 205, 50, 0.05), transparent 26%);
  pointer-events: none;
}

.footer-author-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(154, 205, 50, 0.15),
    rgba(154, 205, 50, 0.65),
    rgba(154, 205, 50, 0.15)
  );
  pointer-events: none;
}

.footer-author-content,
.footer-author-links,
.footer-author-indicator {
  position: relative;
  z-index: 1;
}

.footer-author-kicker {
  display: inline-block;
  margin-bottom: 0.1rem;
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.footer-author-content h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 600;
  text-align: right;
}

.footer-author-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: rgba(154, 205, 50, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(154, 205, 50, 0.14);
}

.footer-author-indicator i {
  font-size: 0.72rem;
  animation: footerAuthorArrow 1.2s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.footer-author-links {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.45rem;
  min-width: 0;
  width: max-content;
  max-width: min(86vw, 320px);
  padding: 0.15rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.24s ease,
    transform 0.32s ease,
    visibility 0.32s ease;
}

.footer-author-card:hover .footer-author-links,
.footer-author-card:focus-within .footer-author-links {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.footer-author-card:hover .footer-author-indicator i,
.footer-author-card:focus-within .footer-author-indicator i {
  transform: rotate(180deg);
  animation: none;
}

body:has(.footer-author-card:hover) .whatsapp-float,
body:has(.footer-author-card:focus-within) .whatsapp-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(10px);
  transform: translateY(12px) scale(0.92);
}

.reitor-chatbot.hidden-by-author {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(10px);
  transform: translateY(12px) scale(0.92);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}

.footer-author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.footer-author-link i {
  color: rgba(154, 205, 50, 0.88);
}

.footer-author-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(154, 205, 50, 0.16);
  color: var(--blanco);
}

@keyframes footerAuthorArrow {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-author-link,
  .footer-author-links,
  .footer-author-indicator i,
  .whatsapp-float {
    transition: none;
  }

  .footer-author-indicator i {
    animation: none;
  }
}

/* ===== RESPONSIVE DESIGN ===== */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 1.5rem;
  cursor: pointer;
}

/* WhatsApp Fix */
.whatsapp-float a,
.whatsapp-float a:focus,
.whatsapp-float a:active,
.whatsapp-float a:hover {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.whatsapp-link i {
  outline: none !important;
  border: none !important;
}

.whatsapp-modal .btn-whatsapp,
.whatsapp-modal .btn-whatsapp:focus,
.whatsapp-modal .btn-whatsapp:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

@keyframes lockShake {
  0%,
  100% {
    transform: translateY(-50%) rotate(0);
  }
  25% {
    transform: translateY(-50%) rotate(-10deg);
  }
  75% {
    transform: translateY(-50%) rotate(10deg);
  }
}

/* Performance Optimizations */
.news-updates,
.youtube-section,
.news-cta,
.youtube-cta {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== CLIENTES (Trusted By) ===== */
.clients {
  background: linear-gradient(180deg, #f8fafc 0%, var(--blanco) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.clients-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.clients-header {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
}

.clients-header::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    rgba(11, 30, 59, 0),
    rgba(11, 30, 59, 0.28),
    rgba(11, 30, 59, 0)
  );
}

.clients-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--verde-lima);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(154, 205, 50, 0.1);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 205, 50, 0.25);
  box-shadow: inset 0 0 0 1px rgba(154, 205, 50, 0.1);
}

.clients-kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--verde-lima);
  box-shadow: 0 0 0 2px rgba(154, 205, 50, 0.2);
}

.clients h2 {
  margin: 8px 0 8px;
  font-size: 2.2rem;
  letter-spacing: 0.2px;
  background: linear-gradient(
    90deg,
    var(--azul-oscuro) 0%,
    #1b365d 50%,
    var(--verde-lima) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.clients-subtitle {
  color: #4b5563;
  font-size: 1rem;
  font-weight: 500;
  max-width: 820px;
  margin: 0 auto;
  padding-left: 0;
}

/* Marquee container */
.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

/* Fade edges */
.clients-marquee::before,
.clients-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.clients-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #f8fafc 0%, transparent 100%);
}

.clients-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--blanco) 0%, transparent 100%);
}

/* Scrolling track */
.clients-marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: clientsScroll 30s linear infinite;
}

.clients-marquee:hover .clients-marquee-track {
  animation-play-state: paused;
}

@keyframes clientsScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Client cards - marquee version */
.client-card {
  flex-shrink: 0;
  width: 200px;
  height: 110px;
  background: var(--blanco);
  border: 1px solid rgba(11, 30, 59, 0.06);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(11, 30, 59, 0.04);
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease;
}

.client-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 12px 32px rgba(11, 30, 59, 0.1),
    0 0 0 1px rgba(154, 205, 50, 0.2);
  border-color: rgba(154, 205, 50, 0.4);
}

.client-logo {
  max-width: 160px;
  max-height: 70px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.05) brightness(0.92);
  opacity: 0.7;
  transition:
    filter 0.4s ease,
    opacity 0.4s ease;
}

.client-card:hover .client-logo {
  filter: grayscale(0%) contrast(1.05) brightness(1);
  opacity: 1;
}

.clients-footnote {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6b7280;
  font-size: 0.92rem;
}

.clients-footnote i {
  color: var(--verde-lima);
}

@media (max-width: 992px) {
  .clients-marquee::before,
  .clients-marquee::after {
    width: 60px;
  }

  .client-card {
    width: 170px;
    height: 95px;
    padding: 16px 18px;
  }

  .clients-marquee-track {
    gap: 20px;
    animation-duration: 25s;
  }
}

@media (max-width: 520px) {
  .clients {
    padding: 52px 0;
  }

  .clients-container {
    padding: 0 1.25rem;
  }

  .clients-marquee::before,
  .clients-marquee::after {
    width: 40px;
  }

  .client-card {
    width: 140px;
    height: 80px;
    padding: 12px 14px;
  }

  .client-logo {
    max-width: 120px;
    max-height: 55px;
  }

  .clients-marquee-track {
    gap: 16px;
    animation-duration: 20s;
  }
}

.cta-content,
.newsletter-form .form-group,
.youtube-cta .cta-content {
  flex-shrink: 0;
}

.cta-text h3,
.news-cta h3,
.youtube-header h3,
.section-title h2 {
  overflow-wrap: break-word;
  word-break: break-word;
}

.news-image img,
.video-thumbnail img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
  .news-grid,
  .youtube-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--azul-oscuro);
    flex-direction: column;
    padding: 1rem 0;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu > li {
    margin: 0;
    width: 100%;
  }

  .nav-menu a {
    padding: 1rem 2rem;
    width: 100%;
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: var(--azul-intermedio);
    width: 100%;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-text {
    padding-right: 0;
    text-align: center;
  }

  .text-content::before {
    display: none;
  }

  .hero-text h1 {
    font-size: 2.5rem;
  }

  .problems-container,
  .platform-content,
  .diploma-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  

  .event-item {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }

  .event-date {
    margin: 0 auto;
  }

  .event-actions {
    justify-content: center;
  }

  .news-updates,
  .youtube-section {
    padding: 4rem 1rem;
  }

  .news-cta,
  .youtube-cta {
    margin: 3rem auto 0;
    padding: 2.5rem 1.5rem;
  }

  .news-cta h3,
  .youtube-header h3 {
    font-size: 1.6rem;
  }

  .youtube-cta .cta-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .cta-text {
    text-align: center;
  }

  .newsletter-form .form-group {
    flex-direction: column;
    gap: 1rem;
  }

  .newsletter-form input {
    min-width: auto;
    width: 100%;
  }

  .professional-events {
    padding: 4rem 1rem;
  }

  .main-event {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .section-title h2 {
    font-size: 1.8rem;
  }

  .news-grid,
  .youtube-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .news-cta,
  .youtube-cta {
    padding: 2rem 1rem;
    border-radius: 15px;
  }

  .news-cta h3 {
    font-size: 1.4rem;
  }

  .youtube-header p,
  .news-cta p {
    font-size: 1rem;
  }

  .event-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn,
  .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}
/* ===== NOTIFICACIONES MEJORADAS - SIN EFECTOS NO DESEADOS ===== */
.nav-notifications {
  position: relative;
  margin-left: 15px;
}

.notification-bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.notification-bell:hover {
  background: var(--verde-lima);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(154, 205, 50, 0.3);
}

.notification-bell:hover i {
  color: var(--azul-oscuro) !important;
}

.notification-bell i {
  font-size: 1.1rem;
  color: var(--texto-claro);
  transition: all 0.3s ease;
}

/* BADGE CON PULSO SOLO PARA NOTIFICACIONES */
.nav-notifications .notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(
    135deg,
    var(--verde-lima),
    var(--verde-lima-profundo)
  );
  color: var(--azul-oscuro);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--azul-oscuro);
  animation: notification-pulse 2s infinite;
}

/* Sin esto, el atributo hidden no sirve de nada aqui.
   [hidden] solo aporta un "display: none" de la hoja del navegador, de
   especificidad casi cero; el "display: flex" de arriba le gana. El
   resultado era una insignia verde con un 0 dentro cuando no habia nada
   nuevo: justo lo contrario de lo que pide un contador. */
.nav-notifications .notification-badge[hidden] {
  display: none;
}

/* PULSO ESPECÍFICO SOLO PARA NOTIFICACIONES */
@keyframes notification-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* ELIMINAR CUALQUIER PULSO GLOBAL QUE AFECTE OTROS ELEMENTOS */
.login-btn,
.btn-primary,
.btn-secondary,
.mobile-menu-btn {
  animation: none !important;
}

/* Dropdown de Notificaciones - Estilo Profesional */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--azul-oscuro);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 10px;
}

.notification-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.notification-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: var(--azul-oscuro);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
}

/* Header del Dropdown */
.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 30, 59, 0.95);
  border-radius: 12px 12px 0 0;
}

.notification-header h4 {
  margin: 0;
  color: var(--verde-lima);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Panel de Novedades/Anuncios (contenido dentro del dropdown) */
#announcementContent.announcement-panel {
  padding: 1rem 1.25rem 1.25rem;
  display: grid;
  gap: 12px; /* separa visualmente las tarjetas de anuncios */
}
#announcementContent.announcement-panel.scrollable {
  max-height: 280px;
  overflow-y: auto;
}
.announcement-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.08);
  border-radius: 12px;
}
.announcement-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(154, 205, 50, 0.15);
  border: 1px solid rgba(154, 205, 50, 0.35);
  color: var(--azul-oscuro);
}
.announcement-title {
  margin: 0 0 4px;
  font-weight: 800;
  color: var(--azul-oscuro);
  font-size: 0.98rem;
}
.announcement-text {
  margin: 0 0 10px;
  color: var(--gris-medio);
  font-size: 0.9rem;
}
.announcement-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gris-medio);
  font-size: 0.85rem;
}
.announcement-cta {
  margin-left: auto;
  background: var(--verde-lima);
  border: 1px solid var(--verde-lima);
  color: var(--azul-oscuro);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.announcement-cta:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(154, 205, 50, 0.25);
}

/* Asegurar legibilidad del CTA dentro del dropdown en todos los estados */
.notification-dropdown .announcement-cta,
.notification-dropdown .announcement-cta:hover,
.notification-dropdown .announcement-cta:focus,
.notification-dropdown .announcement-cta:focus-visible,
.notification-dropdown .announcement-cta:active,
.notification-dropdown .announcement-cta:visited {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: var(--azul-oscuro);
  text-decoration: none;
}

.announcement-empty {
  padding: 1.25rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.announcement-cta:focus-visible {
  outline: 3px solid rgba(154, 205, 50, 0.45);
  outline-offset: 2px;
}

.notification-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--texto-claro);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-close:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: rotate(90deg);
}

/* Items de Notificación */
.notification-item {
  display: flex;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: rgba(154, 205, 50, 0.1);
}

.notification-item.unread {
  background: rgba(154, 205, 50, 0.05);
  border-left: 3px solid var(--verde-lima);
}

.notification-item.unread::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--verde-lima);
  border-radius: 50%;
  animation: notification-blink 2s infinite;
}

@keyframes notification-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.3;
  }
}

.notification-content {
  flex: 1;
  min-width: 0;
}
*/

/* Efectos de animación para nuevos items */
@keyframes notification-slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification-item {
  animation: notification-slideIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
  .notification-dropdown {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }

  .notification-dropdown::before {
    right: auto;
    left: 20px;
  }

  .nav-notifications {
    margin-left: 10px;
  }
}
/* ESTILOS DEL BOTÓN SUBIR */
.scroll-to-top {
  position: fixed;
  bottom: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    var(--azul-oscuro, #0b1e3b) 0%,
    var(--azul-medio, #1e3d6b) 100%
  );
  border: 2px solid var(--verde-lima, #8dc63f);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(11, 30, 59, 0.3);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: linear-gradient(
    135deg,
    var(--verde-lima, #8dc63f) 0%,
    var(--verde-lima-profundo, #79b12f) 100%
  );
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 25px rgba(154, 205, 50, 0.4);
  border-color: var(--azul-oscuro, #0b1e3b);
}

.scroll-to-top:hover i {
  color: var(--azul-oscuro, #0b1e3b);
  transform: translateY(-2px);
}

.scroll-to-top i {
  color: var(--verde-lima, #8dc63f);
  font-size: 1.4rem;
  transition: all 0.3s ease;
}

/* Efecto de pulso sutil */
@keyframes subtle-pulse {
  0% {
    box-shadow: 0 4px 20px rgba(11, 30, 59, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(11, 30, 59, 0.5);
  }
  100% {
    box-shadow: 0 4px 20px rgba(11, 30, 59, 0.3);
  }
}

.scroll-to-top.visible {
  animation: subtle-pulse 3s infinite;
}

/* Responsive */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
  }

  .scroll-to-top i {
    font-size: 1.2rem;
  }
}

/* Variables de color (si no las tienes definidas) */
:root {
  --azul-oscuro: #0b1e3b;
  --azul-medio: #1e3d6b;
  --verde-lima: #8dc63f;
  --verde-lima-profundo: #79b12f;
  --texto-claro: #ffffff;
}

/* Aqui habia un bloque rotulado "Estilos de ejemplo para probar el scroll":
   codigo de una prueba que se quedo dentro y se aplicaba a TODO el sitio.

     body { height: 200vh; background: <degradado>; font-family: Poppins }
     .content { padding: 50px; text-align: center }

   El height: 200vh es el que hacia dano. Con overflow-x: hidden en el body
   -que si es intencionado, unas lineas mas arriba-, el navegador convertia
   el body en un contenedor con scroll propio de alto fijo. Ademas pisaba el
   background-color de la marca con un degradado gris de una maqueta.

   La tipografia ya la declara la regla body de arriba; .content no lo usa
   ninguna pagina. */
/* ===== BOTONES DE ACCIÓN DEL CURSO ===== */
.course-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.zoom-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.15);
  color: var(--blanco);
  padding: 0.9rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 45px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(10px);
  justify-content: center;
}

.zoom-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* ===== MODAL DE ZOOM DE IMAGEN ===== */
.image-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 30, 59, 0.98);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.image-zoom-modal.active {
  opacity: 1;
  visibility: visible;
}

.zoom-modal-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-zoom-modal.active .zoom-modal-container {
  transform: scale(1);
}

.zoom-image-wrapper {
  position: relative;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border: 3px solid var(--verde-lima);
}

.zoom-image {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

.zoom-controls {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.zoom-close-btn {
  background: rgba(11, 30, 59, 0.9);
  color: var(--blanco);
  border: 2px solid var(--verde-lima);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
  backdrop-filter: blur(10px);
}

.zoom-close-btn:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: rotate(90deg) scale(1.1);
}

.zoom-download-btn {
  background: rgba(11, 30, 59, 0.9);
  color: var(--blanco);
  border: 2px solid var(--verde-lima);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  text-decoration: none;
}

.zoom-download-btn:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-2px);
}

/* Efectos de entrada para el modal */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.image-zoom-modal.active .zoom-modal-container {
  animation: zoomIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Responsive para el modal de zoom */
@media (max-width: 768px) {
  .image-zoom-modal {
    padding: 1rem;
  }

  .zoom-modal-container {
    max-width: 95%;
  }

  .zoom-controls {
    top: 1rem;
    right: 1rem;
    flex-direction: column;
  }

  .zoom-close-btn {
    width: 45px;
    height: 45px;
  }

  .zoom-download-btn {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .zoom-image-wrapper {
    border-radius: 15px;
    border-width: 2px;
  }

  .zoom-controls {
    top: 0.5rem;
    right: 0.5rem;
  }
}
/* ===== LOADER DE TRANSICION =====
   El loader vive por completo en css/loader.css. Aqui habia una segunda
   definicion de .page-transition-loader que competia con aquella y, sobre
   todo, una regla ".page-transition-loader * { animation-duration: 2s
   !important }" que forzaba a 2 segundos TODAS las animaciones del loader,
   ignorando las duraciones declaradas en loader.css. Se elimino para que
   haya un unico dueno de estos estilos. No volver a declararlo aqui. */

/* ===== ELIMINAR EFECTO BLANCO AL CARGAR ===== */

/* Eliminar transiciones globales que causan el efecto blanco */
body,
html,
.hero,
.hero-background,
.hero-content,
.container,
.main-content {
  transition: none !important;
  animation: none !important;
}

/* Forzar que la página cargue instantáneamente sin efectos */
body {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Eliminar cualquier fade-in global */
.fade-in,
.fadeIn,
.fade-in-up,
.fadeInUp {
  animation: none !important;
  opacity: 1 !important;
}

/* Prevenir efectos de carga en elementos específicos */
.hero,
.header-container,
.services,
.courses {
  animation: none !important;
  transition: none !important;
}
/* ===== SOLUCIÓN PARA CTA SECTION CENTRADO ===== */

.courses-grid-enhanced {
  display: grid;
  /* min(350px, 100%) y no 350px a secas.
     ------------------------------------------------------------------
     minmax(350px, 1fr) obliga a la columna a medir 350px AUNQUE el
     contenedor sea mas estrecho, y entonces la tarjeta se sale por la
     derecha: 9px de desbordamiento horizontal en un movil de 390 y 39px
     en uno de 360, medidos.

     El min() deja que la columna baje hasta el ancho disponible cuando no
     caben los 350, que es justo lo que hace falta en telefono.

     Ojo ademas con esta regla: vive mucho mas abajo que el bloque de
     .courses-grid-enhanced de la linea 1599 y sus media queries, asi que
     las pisa todas por orden de aparicion. Lo que se ve en pantalla lo
     manda esta, no aquellas. */
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  /* Forzar que los elementos se centren cuando no llenan la fila */
  justify-items: center;
}

/* Contenedor especial para el CTA */
.courses-cta {
  grid-column: 1 / -1; /* Ocupa todas las columnas */
  justify-self: center; /* Se centra horizontalmente */
  width: 100%;
  max-width: 800px;
  margin: 3rem auto 0;
  text-align: center;
}

/* Asegurar que los cursos se comporten correctamente */
.course-card-enhanced {
  width: 100%;
  max-width: 400px; /* Ancho máximo consistente */
}
/* ===== REITOR STORIES SYSTEM - CORREGIDO ===== */
.logo-stories-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.stories-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* ANILLO MÁS FINO Y DISCRETO */
/* ANILLO SIMPLE ALREDEDOR DEL LOGO - NO TAPA NADA */
.stories-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--verde-lima);
  border-radius: 50%;
  animation: storiesPulse 2s ease-in-out infinite;
  opacity: 0;
  transition: all 0.3s ease;
}
.stories-indicator.has-stories .stories-ring {
  opacity: 0.8;
}

/* Estado cuando las stories han sido vistas */
.stories-indicator.stories-seen .stories-ring {
  background: var(--gris-medio);
  animation: none;
  opacity: 0.6;
}

.stories-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--azul-oscuro);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.stories-indicator:hover .stories-logo {
  transform: scale(1.05);
}

/* Stories Modal - LAYOUT CORREGIDO */
.stories-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stories-modal.active {
  opacity: 1;
  visibility: visible;
}

.stories-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 30, 59, 0.95);
  backdrop-filter: blur(5px);
}

.stories-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 85vh; /* Reducido para asegurar que quepa */
  margin: 5vh auto;
  background: var(--azul-oscuro);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

/* Header fijo */
.stories-header {
  position: relative;
  z-index: 10;
  padding: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(11, 30, 59, 0.95) 0%,
    transparent 100%
  );
  flex-shrink: 0;
}

.stories-progress-container {
  margin-bottom: 0.8rem;
}

.progress-bar {
  width: 100%;
  display: flex;
  gap: 0.35rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--verde-lima),
    var(--verde-lima-profundo)
  );
  border-radius: 1px;
  width: 0%;
  transition: width 0.1s linear;
}

.progress-step {
  flex: 1;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  cursor: pointer;
}

.progress-step-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--verde-lima),
    var(--verde-lima-profundo)
  );
  transition: width 0.12s linear;
}

.progress-step.is-complete .progress-step-fill {
  width: 100%;
}

.progress-step.is-active {
  box-shadow: 0 0 0 1px rgba(154, 205, 50, 0.25);
}

.stories-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-user {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--verde-lima);
  overflow: hidden;
  background: var(--azul-intermedio);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.85rem;
}

.stories-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--blanco);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
}

.stories-close:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: rotate(90deg);
}

/* Contenido principal - ÁREA FLEXIBLE */
.stories-content {
  position: relative;
  flex: 1;
  min-height: 0; /* Importante para flexbox */
  overflow: hidden;
}

.stories-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}

.story-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul-intermedio);
  position: relative;
}

.story-content-video {
  overflow: hidden;
}

.story-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.story-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(4, 12, 24, 0.18) 0%,
      rgba(4, 12, 24, 0.72) 100%
    ),
    radial-gradient(
      circle at top right,
      rgba(141, 198, 63, 0.22),
      transparent 26%
    );
}

.story-text-content {
  padding: 2rem;
  color: var(--blanco);
  text-align: center;
  max-width: 90%;
  background: rgba(11, 30, 59, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.story-text-content-video {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: none;
  text-align: left;
  background: rgba(11, 30, 59, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.story-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(141, 198, 63, 0.18);
  color: #d9f3ad;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.story-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--verde-lima);
}

.story-description {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.story-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.story-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(154, 205, 50, 0.4);
}

/* Controles de navegación */
.stories-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.story-prev,
.story-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--blanco);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: all;
  backdrop-filter: blur(10px);
  font-size: 0.8rem;
}

.story-prev {
  left: 0.5rem;
}

.story-next {
  right: 0.5rem;
}

.story-prev:hover,
.story-next:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: translateY(-50%) scale(1.1);
}

/* Footer fijo en la parte inferior */
.stories-footer {
  position: relative;
  padding: 1rem;
  background: linear-gradient(
    to top,
    rgba(11, 30, 59, 0.9) 0%,
    transparent 100%
  );
  flex-shrink: 0;
  z-index: 10;
}

.story-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--blanco);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
}

.action-btn:hover {
  background: var(--verde-lima);
  color: var(--azul-oscuro);
  transform: scale(1.1);
}

/* Animaciones más suaves */
@keyframes storiesPulse {
  0%,
  100% {
    opacity: 0.6;
    background-position: 0% 50%;
  }
  50% {
    opacity: 0.9;
    background-position: 100% 50%;
  }
}

@keyframes tutorialSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive Design Mejorado */
@media (max-width: 768px) {
  .stories-container {
    margin: 2vh auto;
    max-height: 90vh;
    border-radius: 15px;
    max-width: 95%;
  }

  .story-prev,
  .story-next {
    width: 35px;
    height: 35px;
  }

  .stories-header {
    padding: 0.8rem;
  }

  .stories-footer {
    padding: 0.8rem;
  }
}

@media (max-width: 480px) {
  .stories-container {
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    max-width: 100%;
  }

  .story-text-content {
    padding: 1.5rem;
  }

  .story-text-content-video {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  .story-title {
    font-size: 1.1rem;
  }

  .story-description {
    font-size: 0.85rem;
  }
}

/* Tooltip mejorado */
.stories-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--verde-lima);
}

.stories-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--azul-oscuro);
}

.logo:hover .stories-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(5px);
}
/* ===== TUTORIAL MODAL (reemplazo completo) ===== */
.tutorial-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10001;
  background: rgba(11, 30, 59, 0.96);
  backdrop-filter: blur(4px);
}
.tutorial-modal.active {
  display: flex;
}

.tutorial-container {
  width: min(92vw, 480px);
  max-height: min(82vh, 620px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(154, 205, 50, 0.35);
  background: linear-gradient(
    135deg,
    var(--azul-oscuro) 0%,
    var(--azul-intermedio) 100%
  );
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: tutorialSlideIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tutorial-content {
  padding: 20px;
  color: var(--blanco);
}
.tutorial-header h2 {
  color: var(--verde-lima);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin: 0 0 0.35rem;
}
.tutorial-header p {
  opacity: 0.9;
  margin: 0 0 1rem;
}

.tutorial-steps {
  display: grid;
  gap: 14px;
  margin: 12px 0 18px;
}
.tutorial-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}
.tutorial-step .step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--verde-lima);
  background: rgba(154, 205, 50, 0.2);
  border: 1px solid rgba(154, 205, 50, 0.25);
}
.tutorial-step .step-content h4 {
  color: var(--verde-lima);
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
}
.tutorial-step .step-content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gris-claro);
}

.tutorial-actions {
  display: grid;
  gap: 10px;
}
.tutorial-option {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Spotlight para guiar al usuario al logo/notificaciones */
.spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  pointer-events: auto;
  background: radial-gradient(
    130px 130px at var(--sx, 50%) var(--sy, 20%),
    transparent 0,
    transparent 120px,
    rgba(11, 30, 59, 0.72) 121px
  );
  transition: opacity 0.2s ease;
}
.spotlight-overlay.fade-out {
  opacity: 0;
}

.spotlight-callout {
  position: fixed;
  z-index: 10003;
  max-width: 280px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  color: var(--azul-oscuro);
  border: 1px solid rgba(154, 205, 50, 0.35);
  border-left: 4px solid var(--verde-lima);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow:
    0 10px 24px rgba(11, 30, 59, 0.18),
    0 0 0 3px rgba(154, 205, 50, 0.1);
}
.spotlight-callout.right::after,
.spotlight-callout.left::after {
  content: "";
  position: absolute;
  top: 14px;
  border: 8px solid transparent;
}
.spotlight-callout.right::after {
  left: -8px;
  border-right-color: rgba(154, 205, 50, 0.35);
}
.spotlight-callout.left::after {
  right: -8px;
  border-left-color: rgba(154, 205, 50, 0.35);
}

@media (max-width: 480px) {
  .tutorial-container {
    width: 94vw;
    max-height: 88vh;
  }
}
/* ===== WhatsApp: hint sutil ===== */
.wa-hint {
  position: fixed;
  right: 88px;
  bottom: 32px;
  z-index: 1200;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  color: var(--azul-oscuro);
  border: 1px solid rgba(154, 205, 50, 0.35);
  border-left: 4px solid var(--verde-lima);
  box-shadow:
    0 10px 24px rgba(11, 30, 59, 0.12),
    0 0 0 3px rgba(154, 205, 50, 0.1);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  animation: waHintIn 0.28s ease-out both;
}
.wa-hint::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 12px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid rgba(154, 205, 50, 0.35);
  border-bottom: 1px solid rgba(154, 205, 50, 0.35);
  transform: rotate(45deg);
}
.wa-hint.hide {
  animation: waHintOut 0.25s ease both;
}

@keyframes waHintIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes waHintOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 480px) {
  .wa-hint {
    right: 72px;
    bottom: 24px;
    font-size: 0.85rem;
  }
}

/* Spotlight/Tutorial: que el spotlight oscurezca, no el modal */
.tutorial-modal {
  background: transparent !important; /* sin scrim global */
  backdrop-filter: none !important; /* sin blur global */
  z-index: 10001; /* el contenido del modal queda arriba */
}

/* Overlay del spotlight debajo del modal y sin bloquear clicks */
.spotlight-overlay {
  z-index: 9990 !important;
  pointer-events: none !important;
  /* agujero más nítido y grande por defecto */
  background: radial-gradient(
    140px 140px at var(--sx, 50%) var(--sy, 20%),
    transparent 0,
    transparent 125px,
    rgba(11, 30, 59, 0.72) 126px
  ) !important;
  transition: opacity 0.2s ease;
}

/* El callout no bloquea el modal */
.spotlight-callout {
  z-index: 10002 !important;
  pointer-events: none !important;
}
/* ==================================================================
   EQUIPO EXPERTO - layout bento
   Ficha destacada a la izquierda + rejilla 2x2 y banner de contacto.
   Se conservan las clases .team-modal-trigger y los data-member
   porque js/script.js abre con ellas el modal de cada perfil.
   ================================================================== */

.reitor-team {
  position: relative;
  padding: 5.5rem 2rem 6rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  overflow: hidden;
}

/* El logo de REITOR, grande y tenue, arriba a la izquierda.
   Sustituye a unos arcos concentricos genericos: con el logo la seccion
   tiene firma propia.
   Es una imagen ya teñida (logo-marca-agua.png: la silueta del logo en el
   verde palido de los arcos) y no una mascara CSS sobre el logo normal: las
   mascaras con imagen no se pintan al abrir la pagina como archivo local
   (file://), y la seccion se quedaba vacia. */
.reitor-team::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -100px;
  width: 420px;
  height: 420px;
  background: url("../assets/images/logo-marca-agua.png") center / contain no-repeat;
  transform: rotate(-10deg);
  pointer-events: none;
}

/* En telefono, mas pequeno: a 420px ocuparia todo el ancho tras el titulo. */
@media (max-width: 768px) {
  .reitor-team::before {
    top: -24px;
    left: -70px;
    width: 230px;
    height: 230px;
  }
}

/* Trama de puntos abajo a la derecha */
.reitor-team::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 60px;
  width: 210px;
  height: 210px;
  background-image: radial-gradient(rgba(11, 30, 59, 0.11) 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  opacity: 0.65;
  pointer-events: none;
}

.reitor-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------------------------------------------------- Encabezado */

.reitor-section-header {
  max-width: 780px;
  margin: 0 auto 2.75rem;
  text-align: center;
}

.reitor-kicker {
  display: inline-block;
  color: var(--verde-lima-profundo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
}

.reitor-section-header h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--azul-oscuro);
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.reitor-highlight {
  color: var(--azul-oscuro);
}

.reitor-section-header p {
  color: #64748b;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 620px;
}

/* ------------------------------------------------ Rejilla general */

.equipo-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.6fr;
  gap: 1.4rem;
  align-items: stretch;
}

.equipo-lado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Las dos filas de fichas reparten la altura por igual y el banner
     conserva la suya: asi la columna iguala a la ficha destacada. */
  grid-template-rows: 1fr 1fr auto;
  gap: 1.25rem;
}

/* ---------------------------------------------- Ficha destacada */

.equipo-destacado {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--azul-oscuro);
  box-shadow: 0 18px 42px rgba(11, 30, 59, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipo-destacado:hover,
.equipo-destacado:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(11, 30, 59, 0.2);
}

.equipo-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #dfe4e9;
}

.equipo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Filete verde vertical en el borde izquierdo de la foto */
.equipo-foto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7px;
  background: var(--verde-lima);
  z-index: 2;
}

/* Distintivo de anos de experiencia */
.equipo-anios {
  position: absolute;
  top: 1.1rem;
  left: 1.6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(11, 30, 59, 0.08);
  box-shadow: 0 6px 16px rgba(11, 30, 59, 0.12);
}

.equipo-anios i {
  color: var(--verde-lima-profundo);
  font-size: 1.05rem;
}

.equipo-anios strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.15;
}

.equipo-anios span {
  display: block;
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.15;
}

/* Panel oscuro inferior */
.equipo-destacado-info {
  padding: 1.6rem 1.75rem 1.75rem;
  background: linear-gradient(160deg, #0f2744 0%, var(--azul-oscuro) 100%);
}

.equipo-destacado-info::before {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 2px;
  background: var(--verde-lima);
  margin-bottom: 1rem;
}

.equipo-destacado-info h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 0.4rem;
}

.equipo-destacado-rol {
  color: var(--verde-lima);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 1.15rem;
}

/* Pastillas de especialidad */
.equipo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.equipo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 500;
}

.equipo-tag i {
  color: var(--verde-lima);
  font-size: 0.68rem;
}

.equipo-destacado-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.equipo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.equipo-btn i {
  transition: transform 0.25s ease;
}

.equipo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(141, 198, 63, 0.32);
  color: #ffffff;
}

.equipo-btn:hover i {
  transform: translateX(3px);
}

/* Marca de LinkedIn */
.equipo-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

a.equipo-in:hover {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: #ffffff;
}

/* Sin URL configurada no es un enlace: no debe parecer pulsable */
span.equipo-in {
  opacity: 0.45;
  cursor: default;
}

/* ------------------------------------------- Tarjetas pequenas */

.equipo-mini {
  display: flex;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.07);
  box-shadow: 0 8px 24px rgba(11, 30, 59, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.equipo-mini:hover,
.equipo-mini:focus-within {
  transform: translateY(-5px);
  border-color: rgba(141, 198, 63, 0.35);
  box-shadow: 0 18px 38px rgba(11, 30, 59, 0.1);
}

.equipo-mini-foto {
  position: relative;
  flex: 0 0 42%;
  min-height: 210px;
  background: #dfe4e9;
  overflow: hidden;
}

.equipo-mini-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.equipo-mini-info {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.3rem 1.15rem;
  min-width: 0;
}

/* Marca de LinkedIn en la esquina */
.equipo-mini-in {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.4px solid var(--azul-oscuro);
  color: var(--azul-oscuro);
  font-size: 0.78rem;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

a.equipo-mini-in:hover {
  background: var(--azul-oscuro);
  color: #ffffff;
}

span.equipo-mini-in {
  opacity: 0.35;
  cursor: default;
}

.equipo-mini-cat {
  display: block;
  color: var(--verde-lima-profundo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  padding-right: 2.2rem;
}

.equipo-mini-info h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.25;
  margin: 0 0 0.35rem;
  padding-right: 2.2rem;
}

.equipo-mini-rol {
  color: #7c8b9c;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

/* Filete verde corto */
.equipo-mini-info::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: var(--verde-lima);
  margin-top: auto;
}

.equipo-mini-pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

.equipo-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(141, 198, 63, 0.5);
  background: #ffffff;
  color: var(--verde-lima-profundo);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.equipo-flecha:hover {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
  color: #ffffff;
  transform: translateX(3px);
}

/* --------------------------------------------- Banner de contacto */

.equipo-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.9rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f2744 0%, var(--azul-oscuro) 100%);
  box-shadow: 0 14px 34px rgba(11, 30, 59, 0.18);
}

.equipo-cta-icono {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1.5px solid rgba(141, 198, 63, 0.4);
  background: rgba(141, 198, 63, 0.09);
  color: var(--verde-lima);
  font-size: 1.5rem;
}

.equipo-cta-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.equipo-cta-texto h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.3rem;
  line-height: 1.3;
}

.equipo-cta-texto p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.93rem;
  margin: 0;
  line-height: 1.55;
}

.equipo-cta .equipo-btn {
  flex-shrink: 0;
}

/* ------------------------------------------ Perfil unico (2026-11) */

.perfil-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--azul-oscuro);
  box-shadow: 0 18px 42px rgba(11, 30, 59, 0.14);
}

.perfil-foto {
  position: relative;
  min-height: 100%;
  background: #dfe4e9;
  overflow: hidden;
}

.perfil-foto picture,
.perfil-foto img {
  display: block;
  width: 100%;
  height: 100%;
}

.perfil-foto img {
  object-fit: cover;
  object-position: center 30%;
  aspect-ratio: 3 / 2;
}

.perfil-foto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7px;
  background: var(--verde-lima);
  z-index: 2;
}

.perfil-identidad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4rem 2.4rem 2.2rem;
  background: linear-gradient(160deg, #0f2744 0%, var(--azul-oscuro) 100%);
}

.perfil-identidad::before {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  border-radius: 2px;
  background: var(--verde-lima);
  margin-bottom: 1.1rem;
}

.perfil-cargo-top {
  color: var(--verde-lima);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.perfil-identidad h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.12;
  margin: 0 0 1.1rem;
}

.perfil-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.perfil-roles li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 500;
}

.perfil-cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.7rem;
}

.perfil-cifra {
  padding: 0.85rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(141, 198, 63, 0.22);
}

.perfil-cifra strong {
  display: block;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.perfil-cifra span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.74rem;
  line-height: 1.35;
}

.perfil-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}

.perfil-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.perfil-enlace:hover {
  color: var(--verde-lima);
  border-color: var(--verde-lima);
}

/* Biografia */
.perfil-bio {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.4rem;
  margin-top: 1.4rem;
  scroll-margin-top: 110px;
}

.perfil-texto {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.perfil-bloque,
.perfil-tarjeta {
  padding: 1.6rem 1.75rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.07);
  box-shadow: 0 8px 24px rgba(11, 30, 59, 0.05);
}

.perfil-bloque h4,
.perfil-tarjeta h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--azul-oscuro);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.9rem;
  line-height: 1.3;
}

.perfil-bloque h4 i,
.perfil-tarjeta h4 i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(141, 198, 63, 0.12);
  color: var(--verde-lima-profundo);
  font-size: 0.9rem;
}

.perfil-bloque p,
.perfil-tarjeta p {
  color: #4a5b6e;
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 0.8rem;
}

.perfil-bloque p:last-child,
.perfil-tarjeta p:last-child {
  margin-bottom: 0;
}

.perfil-dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.perfil-bloque--destacado {
  border-top: 4px solid var(--verde-lima);
}

.perfil-lateral {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.perfil-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.perfil-lista li {
  position: relative;
  padding-left: 1.6rem;
  color: #4a5b6e;
  font-size: 0.9rem;
  line-height: 1.55;
}

.perfil-lista li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--verde-lima-profundo);
  font-size: 0.85rem;
}

.perfil-tarjeta--oscura {
  background: linear-gradient(135deg, #0f2744 0%, var(--azul-oscuro) 100%);
  border-color: transparent;
}

.perfil-tarjeta--oscura h4 {
  color: #ffffff;
}

.perfil-tarjeta--oscura p {
  color: rgba(255, 255, 255, 0.72);
}

.perfil-principios {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.perfil-principios li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(141, 198, 63, 0.4);
  background: rgba(141, 198, 63, 0.1);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
}

.perfil-principios i {
  color: var(--verde-lima);
}

.perfil-bio + .equipo-cta {
  margin-top: 1.4rem;
}

@media (max-width: 1080px) {
  .perfil-hero,
  .perfil-bio {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .perfil-identidad {
    padding: 1.7rem 1.35rem 1.6rem;
  }

  .perfil-cifras {
    grid-template-columns: 1fr 1fr;
  }

  .perfil-cifra:last-child {
    grid-column: 1 / -1;
  }

  .perfil-dupla {
    grid-template-columns: 1fr;
  }

  .perfil-bloque,
  .perfil-tarjeta {
    padding: 1.35rem 1.2rem;
  }

  .perfil-acciones .equipo-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Foco visible por teclado */
.reitor-team a:focus-visible,
.reitor-team button:focus-visible {
  outline: 3px solid var(--verde-lima);
  outline-offset: 3px;
}

/* ------------------------------------------------------ Responsive */

@media (max-width: 1080px) {
  .equipo-grid {
    grid-template-columns: 1fr;
  }

  .equipo-destacado {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .reitor-team {
    padding: 4rem 1rem 4.5rem;
  }

  .reitor-team::after {
    display: none;
  }

  .equipo-lado {
    grid-template-columns: 1fr;
  }

  .equipo-mini {
    flex-direction: column;
  }

  .equipo-mini-foto {
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .equipo-cta {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
  }

  .equipo-cta .equipo-btn {
    width: 100%;
    justify-content: center;
  }

  .equipo-destacado-acciones {
    flex-wrap: wrap;
  }

  .equipo-destacado-acciones .equipo-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------------------------------- Respeta reduccion de movimiento */

@media (prefers-reduced-motion: reduce) {
  .equipo-destacado,
  .equipo-mini,
  .equipo-btn,
  .equipo-btn i,
  .equipo-flecha,
  .equipo-in,
  .equipo-mini-in {
    transition: none !important;
  }

  .equipo-destacado:hover,
  .equipo-mini:hover,
  .equipo-btn:hover,
  .equipo-flecha:hover {
    transform: none;
  }

  .equipo-btn:hover i {
    transform: none;
  }
}
/* ============================================================================
   FICHA DEL EQUIPO EXPERTO  -  modal de biografia
   ----------------------------------------------------------------------------
   El marcado lo construye createModalContent() en js/script.js a partir de
   js/autores.js. Los iconos son <use href="#eq-*"> contra el sprite embebido
   al principio de #teamModal en index.html.

   Colores: los del paquete de iconos, que son los de la maqueta aprobada.
   Se declaran aqui como tokens locales y no se tocan las variables globales
   del sitio, que gobiernan el resto de la pagina.
   ============================================================================ */

.reitor-team-modal {
  --eq-navy: #0a2447;
  --eq-navy-alto: #0d2c56;
  --eq-lima: #8bcb28;
  --eq-verde: #18b56b;
  --eq-tinta: #16233a;
  --eq-suave: #5a6b83;
  --eq-linea: #e3e9f0;
  --eq-papel: #f6f8fb;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.reitor-team-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      1200px 800px at 20% 20%,
      rgba(139, 203, 40, 0.08),
      rgba(139, 203, 40, 0) 60%
    ),
    rgba(10, 36, 71, 0.92);
  backdrop-filter: blur(5px);
}

.modal-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 1020px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  /* El panel azul llega hasta el borde: nada de relleno aqui. */
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(4, 16, 34, 0.45);
  transform: translateY(24px) scale(0.97);
  transition:
    transform 0.4s cubic-bezier(0.16, 0.86, 0.26, 1),
    opacity 0.4s ease;
  opacity: 0;
}

.reitor-team-modal.active .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------- Cerrar */

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  /* 44px y no 40: css/movil.css impone ese minimo a todo [class*="close"]
     y es la medida tactil recomendada. Se declara aqui para que el diseno
     y aquella regla digan lo mismo en vez de pelearse. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--eq-lima);
  border-radius: 50%;
  background: #fff;
  color: var(--eq-navy);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--eq-lima);
  color: #fff;
  transform: rotate(90deg);
}

.modal-body {
  padding: 0;
}

/* ============================================================== Rejilla */

.eq-ficha {
  display: grid;
  grid-template-columns: 316px 1fr;
}

/* Las dos columnas se colocan solas en la primera fila y el pie, que abarca
   de lado a lado, cae en la segunda. NO se les pone grid-row: 1: con una sola
   columna declarada -el caso del movil- eso obliga a la rejilla a inventarse
   una segunda columna implicita para el segundo hijo, y el diseno se queda en
   dos columnas de 208 y 263 px por mucho que el media query diga 1fr. */
.eq-lado {
  padding: 38px 30px 34px;
  background:
    radial-gradient(
      420px 320px at 80% 0%,
      rgba(139, 203, 40, 0.16),
      rgba(139, 203, 40, 0) 70%
    ),
    var(--eq-navy);
  color: #fff;
  border-radius: 22px 0 0 0;
  text-align: center;
}

.eq-cuerpo {
  padding: 38px 40px 32px;
}

.eq-pie {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 40px;
  border-top: 1px solid var(--eq-linea);
  background: var(--eq-papel);
  border-radius: 0 0 22px 22px;
}

/* ------------------------------------------------------------- Retrato */

.eq-avatar {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
}

.eq-avatar picture,
.eq-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.eq-avatar img {
  border: 4px solid rgba(255, 255, 255, 0.92);
  background: #e8edf3;
}

.eq-iniciales {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(160deg, #f2f5f8 0%, #dfe6ee 100%);
  color: var(--eq-navy);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* La insignia de especialista, abajo a la derecha del circulo */
.eq-sello {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--eq-navy);
  background: var(--eq-verde);
  color: #fff;
}

.eq-sello-icono {
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------- Identidad */

.eq-nombre {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
}

.eq-cargo {
  margin: 0;
  color: var(--eq-lima);
  font-size: 0.98rem;
  font-weight: 600;
}

.eq-lema {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: left;
}

.eq-lema-icono {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--eq-lima);
}

/* ------------------------------------------------------------- Cifras */

.eq-cifras {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.eq-cifra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: var(--eq-navy-alto);
  text-align: left;
}

.eq-cifra-icono {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--eq-lima);
}

.eq-cifra-valor {
  display: block;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
}

.eq-cifra-rotulo {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------- Contenido */

.eq-bloque {
  margin-bottom: 26px;
}

.eq-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 9px;
  color: var(--eq-navy);
  font-size: 1.12rem;
  font-weight: 700;
}

/* El filete corto y lima de debajo del titulo */
.eq-titulo {
  position: relative;
}

.eq-titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--eq-lima);
}

.eq-titulo svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--eq-lima);
}

.eq-titulo--chico {
  font-size: 0.98rem;
}

.eq-titulo--chico svg {
  width: 20px;
  height: 20px;
}

.eq-bio {
  margin: 0;
  color: var(--eq-tinta);
  font-size: 0.97rem;
  line-height: 1.7;
}

/* -------------------------------------------------------------- Pills */

.eq-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eq-pill {
  padding: 8px 15px;
  border: 1.5px solid rgba(139, 203, 40, 0.55);
  border-radius: 999px;
  background: rgba(139, 203, 40, 0.06);
  color: var(--eq-navy);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ------------------------------------------------------- Credenciales */

.eq-dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}

.eq-tarjeta {
  padding: 18px 20px;
  border: 1px solid var(--eq-linea);
  border-radius: 14px;
  background: var(--eq-papel);
}

.eq-tarjeta p {
  margin: 0;
  color: var(--eq-tinta);
  font-size: 0.9rem;
  line-height: 1.55;
}

.eq-certs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.eq-certs li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--eq-tinta);
  font-size: 0.9rem;
  line-height: 1.45;
}

.eq-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--eq-verde);
}

/* ----------------------------------------------------------- Pie */

.eq-disponible {
  display: flex;
  align-items: center;
  gap: 11px;
}

.eq-punto {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--eq-verde);
}

.eq-disponible-estado {
  display: block;
  color: var(--eq-navy);
  font-size: 0.94rem;
  font-weight: 600;
}

.eq-disponible-detalle {
  display: block;
  color: var(--eq-suave);
  font-size: 0.82rem;
}

.eq-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.eq-boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--eq-lima);
  color: var(--eq-navy);
  font-size: 0.96rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.eq-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(139, 203, 40, 0.38);
}

.eq-boton--suave {
  background: transparent;
  border-color: rgba(10, 36, 71, 0.2);
  color: var(--eq-navy);
}

.eq-boton--suave:hover {
  border-color: var(--eq-navy);
  box-shadow: 0 12px 26px rgba(10, 36, 71, 0.12);
}

.eq-boton-icono {
  width: 20px;
  height: 20px;
}

/* -------------------------------------------------------- Scrollbar */

.modal-content::-webkit-scrollbar {
  width: 10px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(10, 36, 71, 0.04);
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(10, 36, 71, 0.15);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* ========================================================== Responsive */

/* Por debajo de 860px la columna azul deja de caber al lado: pasa arriba,
   en horizontal, para no comerse toda la primera pantalla del telefono. */
@media (max-width: 860px) {
  .modal-container {
    padding: 14px;
  }

  .modal-content {
    max-height: calc(100vh - 28px);
  }

  .eq-ficha {
    grid-template-columns: 1fr;
  }

  .eq-lado {
    border-radius: 22px 22px 0 0;
    padding: 30px 24px 26px;
  }

  /* Aqui la X queda sobre el panel azul, no sobre el blanco: se mete un poco
     mas adentro para no montarse en la esquina redondeada, y lleva sombra
     para despegarse del fondo oscuro. */
  .modal-close {
    top: 14px;
    right: 14px;
    box-shadow: 0 6px 16px rgba(4, 16, 34, 0.45);
  }

  .eq-cuerpo {
    padding: 28px 24px 24px;
  }

  .eq-pie {
    padding: 18px 24px;
    justify-content: center;
    text-align: center;
  }

  .eq-avatar {
    width: 118px;
    height: 118px;
  }

  .eq-sello {
    width: 36px;
    height: 36px;
  }

  .eq-iniciales {
    font-size: 2.6rem;
  }

  .eq-cifras {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .eq-lema {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .eq-acciones {
    width: 100%;
    flex-direction: column;
  }

  .eq-boton {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-content,
  .eq-boton,
  .modal-close {
    transition: none;
  }

  .modal-close:hover {
    transform: none;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .cta-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .cta-text {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .reitor-team {
    padding: 60px 15px;
  }

  .reitor-section-header h2 {
    font-size: 2.2rem;
  }

  .reitor-btn {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }

  .modal-body {
    padding: 30px 20px;
  }
}

@media (max-width: 480px) {
  .reitor-section-header h2 {
    font-size: 1.8rem;
  }
}

/* ===== CALCULADORAS ===== */
.calculators-hub {
  position: relative;
  padding: 5.5rem 2rem 6rem;
  background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
  overflow: hidden;
}

.calculators-hub::before,
.calculators-hub::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.calculators-hub::before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--verde-lima) 25%,
    var(--azul-intermedio) 50%,
    var(--verde-lima) 75%,
    transparent 100%
  );
  box-shadow: 0 2px 10px rgba(141, 198, 63, 0.22);
}

.calculators-hub::after {
  top: 30px;
  right: 28px;
  width: 86px;
  height: 86px;
  background:
    radial-gradient(circle, rgba(141, 198, 63, 0.1) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z' fill='%238DC63F' fill-opacity='0.12'/%3E%3C/svg%3E");
  opacity: 0.7;
}

.calculators-title {
  position: relative;
  max-width: 760px;
  margin: 0 auto 2rem;
  z-index: 1;
}

.calculators-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(141, 198, 63, 0.14),
    rgba(121, 177, 47, 0.08)
  );
  border: 1px solid rgba(141, 198, 63, 0.18);
  color: var(--azul-oscuro);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.calculators-shell {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}







.calculator-nav-btn:hover,
.calculator-nav-btn.active {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    rgba(141, 198, 63, 0.14),
    rgba(255, 255, 255, 1)
  );
  border-color: rgba(141, 198, 63, 0.4);
  color: var(--azul-oscuro);
  box-shadow: 0 10px 22px rgba(141, 198, 63, 0.12);
}

.calculators-panels {
  min-width: 0;
}

.calculator-panel {
  display: none;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 251, 253, 0.98)
  );
  border: 1px solid rgba(11, 30, 59, 0.08);
  border-radius: 26px;
  padding: 2rem;
  box-shadow:
    0 18px 38px rgba(11, 30, 59, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.calculator-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--verde-lima), var(--azul-intermedio));
}

.calculator-panel.active {
  display: block;
  animation: calculatorPanelReveal 0.32s ease;
}

.calculator-panel-header {
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(11, 30, 59, 0.08);
}

.calculator-panel-header h3 {
  font-size: 1.55rem;
  color: var(--azul-oscuro);
  margin-bottom: 0.45rem;
}

.calculator-panel-header p {
  color: #526274;
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 760px;
}

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.calculator-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculator-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.calculator-field-full {
  grid-column: 1 / -1;
}

.calculator-field span {
  font-size: 0.88rem;
  font-weight: 600;
  color: #4a5d75;
}

.calculator-field input,
.calculator-field select {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(11, 30, 59, 0.1);
  background: #ffffff;
  color: var(--azul-oscuro);
  padding: 0.9rem 1rem;
  font-size: 0.98rem;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  box-shadow: inset 0 1px 2px rgba(11, 30, 59, 0.03);
}

.calculator-field input:focus,
.calculator-field select:focus {
  outline: none;
  border-color: rgba(141, 198, 63, 0.7);
  box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.13);
}

.checkbox-field {
  justify-content: center;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(11, 30, 59, 0.08);
  background: rgba(11, 30, 59, 0.03);
}

.checkbox-field input {
  width: 22px;
  min-height: 22px;
  padding: 0;
  accent-color: var(--verde-lima);
  box-shadow: none;
}

.checkbox-field span {
  margin-bottom: 0.35rem;
}

.calculator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(11, 30, 59, 0.06);
}

.calculator-actions .btn {
  min-width: 190px;
  justify-content: center;
}

.calculator-results {
  margin-top: 1.5rem;
}

.calculator-placeholder,
.calculator-warning,
.calculator-result-card {
  border-radius: 24px;
  padding: 1.25rem;
}

.calculator-placeholder {
  border: 1px dashed rgba(11, 30, 59, 0.14);
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.96),
    rgba(255, 255, 255, 0.98)
  );
  color: #66758a;
}

.calculator-warning {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #991b1b;
}

.calculator-result-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6faf5 100%);
  border: 1px solid rgba(141, 198, 63, 0.16);
  box-shadow:
    0 12px 26px rgba(11, 30, 59, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.calculator-result-card h4 {
  font-size: 1rem;
  color: var(--azul-oscuro);
  margin-bottom: 1rem;
}

.calculator-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.calculator-result-item {
  background: rgba(11, 30, 59, 0.035);
  border-radius: 16px;
  padding: 0.95rem 1rem;
}

.calculator-result-item strong {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.3rem;
}

.calculator-result-item span {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--azul-oscuro);
}

.calculator-result-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(11, 30, 59, 0.08);
  color: #526274;
  line-height: 1.68;
  font-size: 0.95rem;
}







@keyframes calculatorPanelReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



@media (max-width: 768px) {
  .calculators-hub {
    padding: 4.5rem 1rem;
  }

  

  

  .calculator-panel {
    padding: 1.4rem;
    border-radius: 24px;
  }

  .calculator-grid,
  .calculator-grid-three,
  .calculator-result-grid {
    grid-template-columns: 1fr;
  }

  .calculator-actions .btn {
    width: 100%;
  }
}

/* Animaciones AOS personalizadas */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos].aos-animate {
  opacity: 1;
}

[data-aos="fade-up"] {
  transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
}

/* ===== MODAL DE INSCRIPCIÓN A CURSOS ===== */
.enroll-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.enroll-modal.active {
  display: flex;
}
.enroll-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 30, 59, 0.75);
  backdrop-filter: blur(4px);
  animation: enrollFadeIn 0.3s ease;
}
.enroll-modal-container {
  position: relative;
  background: var(--blanco);
  border-radius: 16px;
  width: 94%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: enrollSlideUp 0.35s ease;
}
.enroll-modal-header {
  background: linear-gradient(
    135deg,
    var(--azul-oscuro),
    var(--azul-intermedio)
  );
  color: var(--blanco);
  padding: 28px 32px 20px;
  text-align: center;
  border-radius: 16px 16px 0 0;
  position: relative;
}
.enroll-modal-icon {
  width: 56px;
  height: 56px;
  background: var(--verde-lima);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.5rem;
  color: var(--azul-oscuro);
}
.enroll-modal-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.enroll-course-name {
  font-size: 0.95rem;
  opacity: 0.9;
  background: rgba(141, 198, 63, 0.2);
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(141, 198, 63, 0.4);
  margin-top: 6px;
}
.enroll-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: var(--blanco);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.enroll-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}
.enroll-form {
  padding: 28px 32px 24px;
}
.enroll-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.enroll-form-group {
  margin-bottom: 18px;
}
.enroll-form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--azul-oscuro);
  margin-bottom: 6px;
}
.enroll-form-group label i {
  color: var(--verde-lima-profundo);
  margin-right: 6px;
  width: 16px;
}
.enroll-form-group input,
.enroll-form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--gris-medio);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  background: var(--gris-claro);
}
.enroll-form-group input:focus,
.enroll-form-group select:focus {
  outline: none;
  border-color: var(--verde-lima);
  box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.15);
  background: var(--blanco);
}
.enroll-form-group input::placeholder {
  color: var(--gris-medio);
}
.enroll-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(
    135deg,
    var(--verde-lima),
    var(--verde-lima-profundo)
  );
  color: var(--blanco);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.enroll-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(141, 198, 63, 0.4);
}
.enroll-submit-btn:active {
  transform: translateY(0);
}
.enroll-form-note {
  text-align: center;
  font-size: 0.78rem;
  color: #888;
  margin-top: 14px;
}
.enroll-form-note i {
  color: var(--verde-lima-profundo);
  margin-right: 4px;
}

/* Éxito */
.enroll-success {
  padding: 40px 32px;
  text-align: center;
}
.enroll-success-icon {
  font-size: 3.5rem;
  color: var(--verde-lima);
  margin-bottom: 16px;
}
.enroll-success h3 {
  font-size: 1.4rem;
  color: var(--azul-oscuro);
  margin-bottom: 8px;
}
.enroll-success p {
  color: #666;
  margin-bottom: 6px;
}
.enroll-success strong {
  display: block;
  color: var(--azul-oscuro);
  font-size: 1.05rem;
  margin: 8px 0 16px;
  background: var(--gris-claro);
  padding: 8px 16px;
  border-radius: 8px;
}
.enroll-success .enroll-submit-btn {
  margin-top: 12px;
}

/* Animaciones */
@keyframes enrollFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes enrollSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 576px) {
  .enroll-form-row {
    grid-template-columns: 1fr;
  }
  .enroll-modal-container {
    width: 96%;
    border-radius: 12px;
  }
  .enroll-modal-header {
    padding: 22px 20px 16px;
    border-radius: 12px 12px 0 0;
  }
  .enroll-form {
    padding: 20px;
  }
}

/* Botón enroll como button (hereda estilos de .enroll-btn-enhanced) */
button.enroll-btn-enhanced {
  border: none;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
}

/* ===== Barra de progreso de lectura ===== */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--verde-lima),
    #c5e84b,
    var(--verde-lima)
  );
  background-size: 200% 100%;
  z-index: 10000;
  pointer-events: none;
  box-shadow:
    0 0 12px rgba(141, 198, 63, 0.6),
    0 0 4px rgba(141, 198, 63, 0.3);
  transition: width 0.12s linear;
}

.reading-progress::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
  border-radius: 0 2px 2px 0;
}

/* ==================================================================
   BANCO DE HERRAMIENTAS - complementos
   Sello de vigencia, acciones de resultado, foco accesible e impresion
   ================================================================== */

/* Sello con el ano de los parametros fiscales */
.calculators-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(11, 30, 59, 0.05);
  border: 1px solid rgba(11, 30, 59, 0.1);
  color: #45566c;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.calculators-stamp i {
  color: var(--verde-lima);
}

/* Foco visible por teclado en las pestanas */
.calculator-nav-btn:focus-visible,
.calculator-chip:focus-visible,
.calculator-panel:focus-visible {
  outline: 3px solid var(--azul-intermedio);
  outline-offset: 3px;
}

.calculator-panel:focus-visible {
  outline-offset: -3px;
}

/* Dato destacado dentro de la tarjeta de resultado */
.calculator-result-item.is-highlight {
  background: linear-gradient(
    135deg,
    rgba(141, 198, 63, 0.16),
    rgba(141, 198, 63, 0.06)
  );
  border: 1px solid rgba(141, 198, 63, 0.28);
}

.calculator-result-item.is-highlight span {
  color: var(--azul-oscuro);
  font-size: 1.18rem;
}

/* Barra de acciones: copiar, PDF, WhatsApp */
.calculator-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(11, 30, 59, 0.08);
}

.calculator-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 30, 59, 0.12);
  background: #ffffff;
  color: #35506d;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.calculator-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 198, 63, 0.45);
  box-shadow: 0 8px 18px rgba(11, 30, 59, 0.08);
  color: var(--azul-oscuro);
}

.calculator-chip i {
  color: var(--verde-lima);
}

.calculator-chip-accent {
  background: linear-gradient(135deg, var(--verde-lima) 0%, var(--verde-lima-profundo) 100%);
  border-color: transparent;
  color: #ffffff;
}

.calculator-chip-accent i,
.calculator-chip-accent:hover {
  color: #ffffff;
}

/* Aviso legal al pie de cada resultado */
.calculator-result-legal {
  margin-top: 1rem;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #77869a;
}

.calculator-warning i {
  margin-right: 0.4rem;
}



/* Respeta a quien pidio menos movimiento en el sistema */
@media (prefers-reduced-motion: reduce) {
  .calculator-panel.active {
    animation: none;
  }

  .calculator-nav-btn,
  .calculator-chip {
    transition: none;
  }

  .calculator-nav-btn:hover,
  .calculator-nav-btn.active,
  .calculator-chip:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .calculator-result-actions .calculator-chip {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Impresion: al guardar en PDF solo sale la herramienta usada */
/* ==================================================================
   EL INFORME IMPRESO DE UNA CALCULADORA
   ------------------------------------------------------------------
   Antes se imprimia el panel escondiendo el formulario, y salia un papel
   con el resultado pero sin los datos que lo produjeron. Ahora
   js/calculators.js arma un documento aparte (#calcInforme) al pulsar
   "Guardar PDF", y aqui se manda imprimir solo eso.

   El informe no se ve en pantalla: nace oculto y solo existe mientras
   dura la impresion.
   ================================================================== */

.calc-informe {
  display: none;
}

@media print {
  body > *:not(.calc-informe) {
    display: none !important;
  }

  .calc-informe {
    display: block !important;
    padding: 0;
    color: #16202e;
    font-family: "Poppins", system-ui, sans-serif;
  }

  .calc-informe-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 3px solid #8dc63f;
  }

  .calc-informe-marca strong {
    display: block;
    font-size: 1.15rem;
    color: #0b1e3b;
  }

  .calc-informe-marca span {
    font-size: 0.78rem;
    color: #5b6b7d;
  }

  .calc-informe-sello {
    padding: 0.25rem 0.6rem;
    border: 1px solid #8dc63f;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #4f7a12;
    white-space: nowrap;
  }

  .calc-informe h1 {
    margin: 1.3rem 0 0.3rem;
    font-size: 1.5rem;
    color: #0b1e3b;
  }

  .calc-informe-fecha {
    margin: 0 0 1.6rem;
    font-size: 0.82rem;
    color: #5b6b7d;
  }

  .calc-informe h2 {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4f7a12;
  }

  .calc-informe-bloque {
    margin-bottom: 1.6rem;
    page-break-inside: avoid;
  }

  .calc-informe-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e6ebf1;
    font-size: 0.9rem;
  }

  .calc-informe-fila span {
    color: #5b6b7d;
  }

  .calc-informe-fila strong {
    color: #0b1e3b;
    text-align: right;
  }

  .calc-informe-nota {
    margin: -1rem 0 1.6rem;
    font-size: 0.84rem;
    color: #3d4f66;
  }

  .calc-informe-legal {
    padding-top: 0.9rem;
    border-top: 1px solid #e6ebf1;
    page-break-inside: avoid;
  }

  .calc-informe-legal p {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: #5b6b7d;
  }

  .calc-informe-pie {
    color: #8a97a6 !important;
  }
}

/* ==================================================================
   FORMULARIOS Y CONSENTIMIENTO
   Mensajes de estado, banner de cookies y formulario de contacto
   ================================================================== */

/* ------------------------------------------- Mensajes de formulario */

.reitor-form-msg {
  margin: 0.85rem 0 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 0;
  transition: color 0.2s ease;
}

.reitor-form-msg:empty {
  margin: 0;
}

.reitor-form-msg.is-exito {
  color: #2f7a1f;
  font-weight: 600;
}

.reitor-form-msg.is-error {
  color: #b91c1c;
  font-weight: 600;
}

.reitor-form-msg.is-aviso {
  color: #7a5a12;
  font-weight: 500;
}

/* Campo con error de validación */
[aria-invalid="true"] {
  border-color: rgba(185, 28, 28, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1) !important;
}

/* ------------------------------------------ Banner de consentimiento */

.reitor-consent {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 9999;
  width: min(920px, calc(100% - 2rem));
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.36s ease, opacity 0.36s ease;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.1);
  box-shadow: 0 20px 48px rgba(11, 30, 59, 0.18);
}

.reitor-consent.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.reitor-consent-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 1.4rem;
}

.reitor-consent-text {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1 1 auto;
}

.reitor-consent-text i {
  color: var(--verde-lima);
  font-size: 1.2rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.reitor-consent-text p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #455468;
}

.reitor-consent-text a {
  color: var(--azul-intermedio);
  font-weight: 600;
  text-decoration: underline;
}

.reitor-consent-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.reitor-consent-btn {
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.reitor-consent-reject {
  background: #ffffff;
  border-color: rgba(11, 30, 59, 0.16);
  color: #4a5d75;
}

.reitor-consent-reject:hover {
  background: rgba(11, 30, 59, 0.04);
}

.reitor-consent-accept {
  background: linear-gradient(
    135deg,
    var(--verde-lima) 0%,
    var(--verde-lima-profundo) 100%
  );
  color: #ffffff;
}

.reitor-consent-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(141, 198, 63, 0.3);
}

.reitor-consent-btn:focus-visible {
  outline: 3px solid var(--azul-intermedio);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .reitor-consent-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .reitor-consent-actions {
    flex-direction: column-reverse;
  }

  .reitor-consent-btn {
    width: 100%;
    padding: 0.8rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reitor-consent {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }

  .reitor-consent-accept:hover {
    transform: none;
  }
}

/* --------------------------------------- Sección de contacto directo */

.contacto-directo {
  position: relative;
  padding: 5.5rem 2rem 6rem;
  background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
  overflow: hidden;
}

.contacto-directo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--verde-lima) 25%,
    var(--azul-intermedio) 50%,
    var(--verde-lima) 75%,
    transparent 100%
  );
}

.contacto-shell {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
}

.contacto-intro .rs-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(141, 198, 63, 0.14),
    rgba(121, 177, 47, 0.08)
  );
  border: 1px solid rgba(141, 198, 63, 0.18);
  color: var(--azul-oscuro);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.contacto-intro h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--azul-oscuro);
  line-height: 1.22;
  margin-bottom: 0.9rem;
}

.contacto-intro > p {
  color: #526274;
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.contacto-vias {
  display: grid;
  gap: 0.9rem;
}

.contacto-via {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.08);
  color: #3f5266;
  text-decoration: none;
  font-size: 0.94rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.contacto-via:hover {
  transform: translateY(-2px);
  border-color: rgba(141, 198, 63, 0.4);
  box-shadow: 0 10px 22px rgba(11, 30, 59, 0.07);
}

.contacto-via i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-intermedio));
  color: var(--verde-lima);
  flex-shrink: 0;
}

.contacto-via strong {
  display: block;
  color: var(--azul-oscuro);
  font-size: 0.9rem;
}

.contacto-via span {
  font-size: 0.86rem;
  color: #66758a;
}

/* Tarjeta del formulario */
.contacto-card {
  background: #ffffff;
  border: 1px solid rgba(11, 30, 59, 0.08);
  border-radius: 26px;
  padding: 2rem;
  box-shadow: 0 18px 38px rgba(11, 30, 59, 0.07);
}

.contacto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contacto-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.contacto-field-full {
  grid-column: 1 / -1;
}

.contacto-field label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #4a5d75;
}

.contacto-field input,
.contacto-field select,
.contacto-field textarea {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(11, 30, 59, 0.1);
  background: #ffffff;
  color: var(--azul-oscuro);
  padding: 0.9rem 1rem;
  font-size: 0.98rem;
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(11, 30, 59, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contacto-field textarea {
  min-height: 120px;
  resize: vertical;
}

.contacto-field input:focus,
.contacto-field select:focus,
.contacto-field textarea:focus {
  outline: none;
  border-color: rgba(141, 198, 63, 0.7);
  box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.13);
}

.contacto-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #66758a;
}

.contacto-consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--verde-lima);
  flex-shrink: 0;
}

.contacto-consent a {
  color: var(--azul-intermedio);
  font-weight: 600;
  text-decoration: underline;
}

.contacto-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  .contacto-shell {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .contacto-directo {
    padding: 4.5rem 1rem 5rem;
  }

  .contacto-card {
    padding: 1.5rem;
    border-radius: 22px;
  }

  .contacto-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   REJILLA DE CALCULADORAS EN LA PORTADA
   ------------------------------------------------------------------
   La portada ya no lleva las nueve herramientas dentro. Presenta y
   reparte: cada tarjeta lleva a /calculadoras/<slug>.html, donde esta
   el formulario con la explicacion del calculo y su base legal.
   El marcado lo escribe generar-seo.py desde js/calculadoras.js.
   ================================================================== */

.calc-botones {
  display: grid;
  /* 320px da tres columnas en escritorio y nueve tarjetas en 3x3.
     Con 280 salian cuatro y el texto se partia en demasiadas lineas. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.calc-boton {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(11, 30, 59, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(11, 30, 59, 0.05);
  text-decoration: none;
  transition: transform 0.24s ease, border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.calc-boton:hover {
  transform: translateY(-3px);
  border-color: var(--verde-lima, #8dc63f);
  box-shadow: 0 16px 32px rgba(11, 30, 59, 0.1);
}

.calc-boton-icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(141, 198, 63, 0.16);
  color: var(--verde-lima-profundo, #79b12f);
  font-size: 1.1rem;
}

.calc-boton-texto {
  flex: 1;
  min-width: 0;
}

.calc-boton-texto strong {
  display: block;
  color: var(--azul-oscuro, #0b1e3b);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.calc-boton-texto small {
  display: block;
  margin-top: 0.2rem;
  color: #65758b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.calc-boton-flecha {
  flex-shrink: 0;
  color: var(--verde-lima-profundo, #79b12f);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.calc-boton:hover .calc-boton-flecha {
  opacity: 1;
  transform: none;
}

@media (max-width: 600px) {
  .calc-boton {
    padding: 1rem;
    gap: 0.8rem;
  }

  /* En telefono la flecha se ve siempre: no hay hover que la revele */
  .calc-boton-flecha {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-boton,
  .calc-boton-flecha {
    transition: none;
  }

  .calc-boton:hover {
    transform: none;
  }
}

/* El "Calculadoras" de la barra no navega, solo despliega. Sin href el
   navegador no le pone el cursor de enlace, asi que se pone a mano. */
.nav-menu > li.has-submenu > a[role="button"] {
  cursor: pointer;
}

/* Sin eventos futuros: lo escribe generar-contenido.py en lugar del destacado. */
.agenda-vacia {
  margin: 0 0 2rem;
  padding: 2rem 2.25rem;
  border-radius: 20px;
  border: 1px dashed rgba(141, 198, 63, 0.45);
  background: rgba(255, 255, 255, 0.04);
  color: #dbe5f2;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

/* Solo hay un evento futuro (el destacado): la agenda lo dice en vez de quedar vacía. */
.agenda-sin-mas {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  border: 1px dashed rgba(141, 198, 63, 0.4);
  background: rgba(255, 255, 255, 0.04);
  color: #c9d6e8;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Sin ningún evento futuro (generar-contenido.py pone .agenda-sin-eventos):
   fuera el título y la lista vacía; la suscripción queda sola y centrada. */
.agenda-titulo:has(+ .agenda-grid .agenda-sin-eventos),
.agenda-lista:has(.agenda-sin-eventos) {
  display: none;
}

.agenda-grid:has(.agenda-sin-eventos) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

/* ==================================================================
   NOTICIAS: CABECERA "BOLETÍN FISCAL REITOR" (.nb-*)
   ------------------------------------------------------------------
   La pinta js/noticias.js. Identidad propia, distinta de las fichas de
   cursos (que usan foto y los arcos de los afiches): aquí es un boletín
   impreso. Papel rayado, mancheta con logo y fecha sobre doble filete,
   un sello circular con el tema y la etiqueta de la noticia en grande.
   ================================================================== */

.nb-cab {
  position: relative;
  height: 200px;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(255, 255, 255, 0.035) 21px 22px),
    linear-gradient(150deg, #0b1e3b 0%, #12305a 100%);
}

.nb-cab[data-tono="1"] {
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(255, 255, 255, 0.035) 21px 22px),
    linear-gradient(150deg, #0b1e3b 0%, #0f3a4f 100%);
}

.nb-cab[data-tono="2"] {
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(255, 255, 255, 0.035) 21px 22px),
    linear-gradient(150deg, #0d2140 0%, #1e3d6b 100%);
}

/* Margen rojo... en lima: la línea vertical de un cuaderno de notas */
.nb-cab::before {
  content: "";
  position: absolute;
  top: 58px;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: linear-gradient(180deg, rgba(141, 198, 63, 0.55), rgba(141, 198, 63, 0));
  z-index: -1;
}

/* Logo REITOR de marca de agua, abajo a la derecha */
.nb-cab::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -40px;
  width: 190px;
  height: 190px;
  background: url("../assets/images/logo-marca-agua-blanca.png") center / contain no-repeat;
  transform: rotate(-8deg);
  z-index: -1;
  pointer-events: none;
}

.nb-mancheta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 3px double rgba(255, 255, 255, 0.22);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9d6e8;
}

.nb-mancheta img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.nb-mancheta b {
  font-family: "Orbitron", "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #fff;
}

.nb-mancheta time {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(141, 198, 63, 0.16);
  color: #8dc63f;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* El sello del tema: circular, punteado e inclinado, como un timbre */
.nb-sello {
  position: absolute;
  top: 64px;
  right: 22px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px dashed rgba(141, 198, 63, 0.7);
  display: grid;
  place-items: center;
  color: #8dc63f;
  transform: rotate(-12deg);
}

.nb-sello::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(141, 198, 63, 0.35);
}

.nb-sello svg {
  width: 26px;
  height: 26px;
}

.nb-tema {
  margin-top: auto;
  padding-left: 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8dc63f;
}

.nb-titular {
  padding-left: 14px;
  max-width: 78%;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}

.news-card:hover .nb-sello {
  transform: rotate(0deg);
  transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .news-card:hover .nb-sello {
    transform: rotate(-12deg);
  }
}