/* ============================================  REACCIONA — Global Styles  ============================================  Sistema de diseño compartido para toda la web.  Incluir en cada página: <link rel='stylesheet' href='css/styles.css'>  ============================================*/  :root {  --azul: #0072BC;  --azul-oscuro: #005a96;  --azul-claro: #e6f2fa;  --verde: #00A651;  --verde-oscuro: #008c44;  --naranja: #F7941D;  --naranja-oscuro: #d97d0f;  --gris-oscuro: #1a1a2e;  --gris-medio: #4a4a5a;  --gris-claro: #f5f7fa;  --blanco: #ffffff;  --sombra: 0 10px 40px rgba(0,0,0,0.1);  --sombra-hover: 0 20px 60px rgba(0,0,0,0.15);  --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }  * { margin: 0; padding: 0; box-sizing: border-box; }  html { scroll-behavior: smooth; }  body {  font-family: 'Open Sans', sans-serif;  color: var(--gris-oscuro);  line-height: 1.7;  overflow-x: hidden;  background: var(--blanco); }  h1, h2, h3, h4, h5, h6 {  font-family: 'Montserrat', sans-serif;  font-weight: 700;  line-height: 1.2; }  a { text-decoration: none; color: inherit; }  img { max-width: 100%; height: auto; display: block; }  ul { list-style: none; }  /* ============================================  NAVBAR  ============================================*/  .navbar {  position: fixed;  top: 0; left: 0;  width: 100%;  z-index: 1000;  padding: 15px 0;  transition: var(--transicion);  background: transparent; }  .navbar.scrolled {  background: rgba(255,255,255,0.98);  backdrop-filter: blur(20px);  box-shadow: 0 2px 20px rgba(0,0,0,0.08);  padding: 10px 0; }  .nav-container {  max-width: 1200px;  margin: 0 auto;  padding: 0 30px;  display: flex;  justify-content: space-between;  align-items: center; }  .nav-logo {  display: flex;  align-items: center;  gap: 12px; }  .nav-logo img { height: 46px; width: auto; transition: var(--transicion); }  .nav-logo-text {  font-family: 'Montserrat', sans-serif;  font-weight: 800;  font-size: 1.35rem;  color: var(--blanco);  letter-spacing: 1px;  transition: var(--transicion); }  .navbar.scrolled .nav-logo-text { color: var(--azul); }  .nav-links {  display: flex;  gap: 30px;  list-style: none;  align-items: center; }  .nav-links a {  font-family: 'Montserrat', sans-serif;  font-weight: 600;  font-size: 0.8rem;  text-transform: uppercase;  letter-spacing: 0.5px;  color: rgba(255,255,255,0.9);  transition: var(--transicion);  position: relative; }  .navbar.scrolled .nav-links a { color: var(--gris-oscuro); }  .nav-links a::after {  content: '';  position: absolute;  bottom: -5px; left: 0;  width: 0; height: 2px;  background: var(--naranja);  transition: var(--transicion); }  .nav-links a:hover::after { width: 100%; }  .nav-links a:hover { color: var(--naranja); }  .nav-cta {  background: var(--naranja);  color: var(--blanco) !important;  padding: 10px 22px;  border-radius: 30px;  transition: var(--transicion); }  .nav-cta::after { display: none !important; }  .nav-cta:hover {  background: var(--naranja-oscuro);  transform: translateY(-2px);  box-shadow: 0 5px 20px rgba(247,148,29,0.4); }  .menu-toggle {  display: none;  flex-direction: column;  gap: 5px;  cursor: pointer;  z-index: 1001; }  .menu-toggle span {  width: 28px; height: 3px;  background: var(--blanco);  transition: var(--transicion);  border-radius: 2px; }  .navbar.scrolled .menu-toggle span { background: var(--gris-oscuro); }  /* ============================================  BOTONES  ============================================*/  .btn {  display: inline-flex;  align-items: center;  gap: 10px;  padding: 14px 32px;  border-radius: 50px;  font-family: 'Montserrat', sans-serif;  font-weight: 700;  font-size: 0.95rem;  transition: var(--transicion);  cursor: pointer;  border: none; }  .btn-primary {  background: linear-gradient(135deg, var(--azul), var(--verde));  color: var(--blanco);  box-shadow: 0 10px 30px rgba(0,114,188,0.3); }  .btn-primary:hover {  transform: translateY(-3px);  box-shadow: 0 15px 40px rgba(0,114,188,0.4); }  .btn-secondary {  background: transparent;  color: var(--blanco);  border: 2px solid rgba(255,255,255,0.3); }  .btn-secondary:hover {  background: rgba(255,255,255,0.1);  border-color: var(--naranja);  color: var(--naranja); }  .btn-white {  background: var(--blanco);  color: var(--azul);  padding: 14px 32px;  border-radius: 50px;  font-family: 'Montserrat', sans-serif;  font-weight: 700;  font-size: 0.95rem;  transition: var(--transicion);  box-shadow: 0 10px 30px rgba(0,0,0,0.2); }  .btn-white:hover {  transform: translateY(-3px);  box-shadow: 0 15px 40px rgba(0,0,0,0.3); }  .btn-naranja {  background: var(--naranja);  color: var(--blanco);  box-shadow: 0 10px 30px rgba(247,148,29,0.3); }  .btn-naranja:hover {  background: var(--naranja-oscuro);  transform: translateY(-3px);  box-shadow: 0 15px 40px rgba(247,148,29,0.4); }  .btn-outline-dark {  background: transparent;  color: var(--gris-oscuro);  border: 2px solid var(--gris-oscuro); }  .btn-outline-dark:hover {  background: var(--gris-oscuro);  color: var(--blanco); }  /* ============================================  SECCIONES COMUNES  ============================================*/  section { padding: 100px 30px; }  .container { max-width: 1200px; margin: 0 auto; }  .section-header { text-align: center; margin-bottom: 60px; }  .section-tag {  display: inline-block;  background: var(--azul-claro);  color: var(--azul);  padding: 6px 20px;  border-radius: 50px;  font-family: 'Montserrat', sans-serif;  font-weight: 700;  font-size: 0.8rem;  text-transform: uppercase;  letter-spacing: 1px;  margin-bottom: 15px; }  .section-tag-light {  background: rgba(0,114,188,0.2);  color: var(--azul-claro); }  .section-title {  font-size: clamp(1.8rem, 4vw, 2.8rem);  color: var(--gris-oscuro);  margin-bottom: 15px; }  .section-subtitle {  color: var(--gris-medio);  font-size: 1.1rem;  max-width: 700px;  margin: 0 auto; }  .section-title-light { color: var(--blanco); }  .section-subtitle-light { color: rgba(255,255,255,0.7); }  /* ============================================  CARDS  ============================================*/  .card-grid {  display: grid;  gap: 30px;  margin-top: 50px; }  .card-grid-2 { grid-template-columns: repeat(2, 1fr); }  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }  .card-grid-4 { grid-template-columns: repeat(4, 1fr); }  .card {  background: var(--gris-claro);  border-radius: 20px;  padding: 40px 30px;  transition: var(--transicion);  border: 2px solid transparent;  position: relative;  overflow: hidden; }  .card::before {  content: '';  position: absolute;  top: 0; left: 0;  width: 100%; height: 4px;  background: linear-gradient(90deg, var(--azul), var(--verde));  transform: scaleX(0);  transition: var(--transicion); }  .card:hover::before { transform: scaleX(1); }  .card:hover {  transform: translateY(-8px);  box-shadow: var(--sombra-hover);  border-color: var(--azul-claro); }  .card-icon {  font-size: 2.2rem;  margin-bottom: 18px; }  .card h3 { font-size: 1.2rem; margin-bottom: 12px; }  .card p {  color: var(--gris-medio);  font-size: 0.95rem;  line-height: 1.7; }  .card-tag {  display: inline-block;  background: var(--azul-claro);  color: var(--azul);  padding: 4px 12px;  border-radius: 50px;  font-size: 0.75rem;  font-weight: 700;  text-transform: uppercase;  margin-top: 15px; }  /* ============================================  CTA BOX  ============================================*/  .cta-box {  background: linear-gradient(135deg, var(--azul), var(--verde));  color: var(--blanco);  padding: 40px 35px;  border-radius: 16px;  text-align: center;  margin: 50px 0; }  .cta-box h3 {  font-size: 1.4rem;  color: var(--blanco);  margin-bottom: 15px; }  .cta-box p {  color: rgba(255,255,255,0.9);  margin-bottom: 25px;  font-size: 1.05rem; }  /* ============================================  HIGHLIGHT BOX  ============================================*/  .highlight-box {  background: var(--azul-claro);  border-left: 4px solid var(--azul);  padding: 25px 30px;  border-radius: 0 12px 12px 0;  margin: 30px 0; }  .highlight-box p {  margin: 0;  color: var(--gris-oscuro);  font-size: 1.05rem;  font-style: italic; }  /* ============================================  FOOTER  ============================================*/  .footer {  background: var(--gris-oscuro);  color: var(--blanco);  padding: 70px 30px 30px; }  .footer-grid {  display: grid;  grid-template-columns: 2fr 1fr 1fr 1.5fr;  gap: 50px;  margin-bottom: 50px;  max-width: 1200px;  margin: 0 auto 50px; }  .footer-brand img { height: 50px; margin-bottom: 18px; }  .footer-brand p {  color: rgba(255,255,255,0.7);  line-height: 1.8;  font-size: 0.9rem;  margin-bottom: 18px; }  .footer-social { display: flex; gap: 12px; }  .footer-social a {  width: 40px; height: 40px;  border-radius: 50%;  background: rgba(255,255,255,0.1);  display: flex;  align-items: center;  justify-content: center;  color: var(--blanco);  transition: var(--transicion); }  .footer-social a:hover {  background: var(--azul);  transform: translateY(-3px); }  .footer-column h4 {  font-size: 1rem;  margin-bottom: 20px;  color: var(--blanco);  position: relative;  padding-bottom: 10px; }  .footer-column h4::after {  content: '';  position: absolute;  bottom: 0; left: 0;  width: 40px; height: 3px;  background: var(--naranja);  border-radius: 2px; }  .footer-column ul li { margin-bottom: 10px; }  .footer-column ul li a {  color: rgba(255,255,255,0.7);  transition: var(--transicion);  display: flex;  align-items: center;  gap: 8px;  font-size: 0.9rem; }  .footer-column ul li a:hover {  color: var(--naranja);  padding-left: 5px; }  .footer-contact p {  color: rgba(255,255,255,0.7);  margin-bottom: 12px;  display: flex;  align-items: flex-start;  gap: 12px;  font-size: 0.9rem; }  .footer-contact i { color: var(--naranja); margin-top: 5px; }  .footer-bottom {  border-top: 1px solid rgba(255,255,255,0.1);  padding-top: 25px;  text-align: center;  color: rgba(255,255,255,0.5);  font-size: 0.85rem;  max-width: 1200px;  margin: 0 auto; }  /* ============================================  UTILIDADES  ============================================*/  .reveal {  opacity: 0;  transform: translateY(40px);  transition: all 0.8s ease-out; }  .reveal.active {  opacity: 1;  transform: translateY(0); }  .text-center { text-align: center; }  .mt-20 { margin-top: 20px; }  .mt-30 { margin-top: 30px; }  .mb-20 { margin-bottom: 20px; }  .gradient-text {  background: linear-gradient(135deg, var(--azul), var(--verde));  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text; }  /* ============================================  RESPONSIVE  ============================================*/  @media (max-width: 992px) {  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr 1fr; }  .footer-grid { grid-template-columns: 1fr 1fr; } }  @media (max-width: 768px) {  .nav-links {  position: fixed;  top: 0; right: -100%;  width: 80%; max-width: 350px;  height: 100vh;  background: var(--blanco);  flex-direction: column;  padding: 100px 40px 40px;  transition: var(--transicion);  box-shadow: -10px 0 30px rgba(0,0,0,0.1); }  .nav-links.active { right: 0; }  .nav-links a { color: var(--gris-oscuro) !important; font-size: 1.05rem; }  .menu-toggle { display: flex; }  .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); background: var(--gris-oscuro); }  .menu-toggle.active span:nth-child(2) { opacity: 0; }  .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); background: var(--gris-oscuro); }  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }  .footer-grid { grid-template-columns: 1fr; gap: 40px; }  section { padding: 60px 20px; }  .btn { width: 100%; justify-content: center; } }  ::-webkit-scrollbar { width: 8px; }  ::-webkit-scrollbar-track { background: var(--gris-claro); }  ::-webkit-scrollbar-thumb { background: var(--azul); border-radius: 4px; }