/* ============================================================
   IndraMind Cybersecurity — CSS Base
   Tailwind maneja layout · Aquí: @font-face · vars · pseudo-elem · accordion
   ============================================================ */

/* ---- Fuente de marca ---- */
@font-face {
  font-family: 'ForFuture Sans';
  src: local('ForFuture Sans'),
       url('../fonts/ForFutureSans-Regular.woff2')   format('woff2'),
       url('../fonts/ForFutureSans-Regular.woff')    format('woff');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'ForFuture Sans';
  src: local('ForFuture Sans'),
       url('../fonts/ForFutureSans-SemiBold.woff2')  format('woff2'),
       url('../fonts/ForFutureSans-SemiBold.woff')   format('woff');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'ForFuture Sans';
  src: local('ForFuture Sans'),
       url('../fonts/ForFutureSans-Bold.woff2')      format('woff2'),
       url('../fonts/ForFutureSans-Bold.woff')       format('woff');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'ForFuture Sans';
  src: local('ForFuture Sans'),
       url('../fonts/ForFutureSans-ExtraBold.woff2') format('woff2'),
       url('../fonts/ForFutureSans-ExtraBold.woff')  format('woff');
  font-weight: 800; font-display: swap;
}

/* ---- Variables (usadas por magic-ui.js y main.js) ---- */
:root {
  --turquesa:       #00B0BD;
  --azul-oscuro:    #001923;
  --azul-amazonico: #004254;
  --gris-ceramica:  #E3E2DA;
  --blanco:         #FFFFFF;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'ForFuture Sans', 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  color: #001923;
  background: #fff;
}
a { text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
input, select, textarea {
  font-family: 'ForFuture Sans', 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
textarea { min-height: 120px; resize: vertical; }

/* ---- Menú móvil (CSS controla display; Tailwind gestiona desktop) ---- */
@media (max-width: 1023px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: #fff;
    padding: 14px 20px 22px;
    border-bottom: 1px solid rgba(0,25,35,0.10);
    box-shadow: 0 8px 24px rgba(0,25,35,0.08);
    z-index: 999;
    flex-direction: column;
    gap: 2px;
  }
  .nav-menu.open { display: flex; }
}

/* ---- Enlace Activo en Nav ---- */
.nav-menu a.active {
  color: #00B0BD !important; /* im-teal */
}

/* ---- Two-col flip: visual antes del texto en desktop ---- */
@media (min-width: 1024px) {
  .two-col.flip > *:first-child { order: 2; }
  .two-col.flip > *:last-child  { order: 1; }
}

/* ---- Overlay decorativo secciones oscuras ---- */
.hero, .page-hero, .cta-banner { position: relative; overflow: hidden; }

.hero::before, .page-hero::before, .cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 65% at 75% 45%, rgba(0,66,84,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(0,176,189,0.07) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

.hero::after, .page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}

.hero > *, .page-hero > *, .cta-banner > * { position: relative; z-index: 1; }

/* ---- Accordion ---- */
.accordion-body { display: none; overflow: hidden; }
.accordion-item.open .accordion-body { display: block; }

/* ---- Gradient text utilities ---- */
.stat-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #00B0BD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-grad-pos {
  background: linear-gradient(135deg, #004254 0%, #00B0BD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-grad-neg {
  background: linear-gradient(135deg, #00B0BD 0%, #7fdee5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title-accent {
  background: linear-gradient(90deg, #00B0BD 0%, #7fdee5 50%, #00B0BD 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: grad-shift 4s linear infinite;
}
@keyframes grad-shift {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

/* ---- Word rotate ---- */
[data-rotate] { display: inline-block; transition: transform 0.35s ease, opacity 0.35s ease; }

/* ---- Marquee ---- */
.mu-marquee-wrapper {
  overflow: hidden;
  margin-top: 32px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.mu-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.mu-marquee-wrapper:hover .mu-marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Filter pill active ---- */
.filter-pill.active {
  background-color: rgba(0,66,84,0.08) !important;
  border-color: #004254 !important;
  color: #004254 !important;
}

/* ---- Featured layout (actualidad) ---- */
.featured-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .featured-layout { grid-template-columns: 1fr; }
}
.side-list { display: flex; flex-direction: column; gap: 12px; }