/* ============================================================
   Exxalink · Capa de modernización (piloto en la portada)
   Se carga DESPUÉS del tema; solo refina estética, no estructura.
   ============================================================ */

:root{
  --exa-primary:#1877e6;
  --exa-primary-d:#0d5bc4;
  --exa-accent:#22d3ee;
  --exa-ink:#0f1b2d;
  --exa-muted:#5b6b7f;
  --exa-radius:18px;
  --exa-radius-sm:12px;
  --exa-shadow:0 18px 44px rgba(15,40,80,.12);
  --exa-shadow-sm:0 8px 24px rgba(15,40,80,.08);
  --exa-font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}

body{
  font-family:var(--exa-font);
  color:var(--exa-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Títulos de sección ---------- */
.row-title{
  font-weight:800 !important;
  letter-spacing:-.02em;
  color:var(--exa-ink) !important;
}
.row-subtitle{ color:var(--exa-muted) !important; }
/* pequeño acento bajo el título */
#services .row-title,#pricing .row-title,#features .row-title,
#more-features .row-title{ position:relative; }

/* ---------- Botones ---------- */
.ybtn{
  border-radius:999px !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  padding:14px 30px !important;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease !important;
  border:none !important;
}
.ybtn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.ybtn-header-color,.ybtn-accent-color{
  background-image:linear-gradient(135deg,var(--exa-primary),var(--exa-accent)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(24,119,230,.35) !important;
}
.ybtn-white{
  background:#fff !important;
  color:var(--exa-primary) !important;
  box-shadow:var(--exa-shadow-sm) !important;
}

/* ---------- Hero ---------- */
.big-title{
  font-weight:800 !important;
  letter-spacing:-.025em;
  line-height:1.08 !important;
}
/* Hero en móvil: el tema fija ~426px en el slider. Acotamos los elementos de
   texto con unidades de viewport (vw) para que nunca desborden, sin depender
   del contenedor del tema. */
@media (max-width:575px){
  body{ overflow-x:hidden; }
  #top-content .container{ padding-left:22px !important; padding-right:22px !important; }
  .big-title{ font-size:1.7rem !important; overflow-wrap:anywhere; max-width:88vw !important; }
  .big-title span{ font-size:1.7rem !important; }
  #top-content .slide p{ overflow-wrap:anywhere; max-width:86vw !important; }
  #top-content .btn-holder{ display:flex; flex-wrap:wrap; gap:12px; max-width:88vw !important; }
  #top-content .btn-holder .ybtn{ margin:0 !important; }
}
.big-title span{
  color:transparent !important;
  background:linear-gradient(120deg,#bff3ff,#ffffff) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
#top-content .noti .badge{
  background:rgba(255,255,255,.18) !important;
  border-radius:999px !important;
}

/* ---------- Tarjetas de servicios ---------- */
.service-box{
  background:#fff !important;
  border:1px solid #eef2f8 !important;
  border-radius:var(--exa-radius) !important;
  box-shadow:var(--exa-shadow-sm) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.service-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--exa-shadow) !important;
  border-color:rgba(24,119,230,.35) !important;
}
.service-title a{ color:var(--exa-ink) !important; font-weight:700 !important; }
.service-title a:hover{ color:var(--exa-primary) !important; }
.service-details p{ color:var(--exa-muted) !important; }

/* ---------- Precios ---------- */
.pricing-box{
  position:relative;
  border-radius:var(--exa-radius) !important;
  border:1px solid #e9eef6 !important;
  box-shadow:var(--exa-shadow-sm) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
  background:#fff !important;
}
.pricing-box:hover{ transform:translateY(-6px); box-shadow:var(--exa-shadow) !important; }
.pricing-unity .pricing-title{ font-weight:700 !important; color:var(--exa-ink) !important; }
/* Tarjetas de color (planes): título y precio en blanco sobre el gradiente */
.pricing-box.pricing-box-simple .pricing-content .pricing-title{ color:#ffffff !important; }
.pricing-box.pricing-box-simple .pricing-content .pricing-price{ color:#ffffff !important; }
.pricing-unity .price-title{ color:var(--exa-muted) !important; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem !important; }
.pricing-unity .pricing-price{ color:var(--exa-primary) !important; font-weight:800 !important; }
.pricing-unity .pricing-details p{ color:var(--exa-muted) !important; }

/* Plan destacado */
.pricing-box.featured{
  overflow:visible !important;
  margin-top:16px;
  border:2px solid transparent !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--exa-primary),var(--exa-accent)) border-box !important;
  box-shadow:0 24px 50px rgba(24,119,230,.22) !important;
  transform:translateY(-8px);
}
.pricing-box.featured:hover{ transform:translateY(-12px); }
.pricing-box.featured::before{
  content:"MÁS POPULAR";
  position:absolute; top:-12px; right:14px;
  background:linear-gradient(135deg,var(--exa-primary),var(--exa-accent));
  color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  padding:6px 13px; border-radius:999px;
  box-shadow:0 8px 18px rgba(24,119,230,.35);
  white-space:nowrap; z-index:3;
}

/* ---------- Promesa (more-features) ---------- */
.mfeature-box{
  background:#fff;
  border:1px solid #eef2f8;
  border-radius:var(--exa-radius);
  padding:34px 26px;
  box-shadow:var(--exa-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
  text-align:center;
}
.mfeature-box:hover{ transform:translateY(-6px); box-shadow:var(--exa-shadow); }
.mfeature-title{ font-weight:700 !important; color:var(--exa-ink) !important; }
.mfeature-details{ color:var(--exa-muted) !important; }

/* ---------- Banda CTA (tarjeta clara: texto oscuro legible) ----------
   Cubre TODAS las secciones .message-area (#message1, #message2, ...) que
   usan fondo claro (normal-bg), en todas las páginas. */
.message-area .text-other-color1{ color:var(--exa-muted) !important; font-weight:600 !important; }
.message-area .text-other-color2{ color:var(--exa-ink) !important; font-weight:800 !important; }

/* ---------- Navbar: botones ---------- */
.login-button{
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.5) !important;
  padding:8px 20px !important;
}
/* Botón Soporte: sólido para que resalte sobre la cabecera azul
   (antes su degradado empezaba en el mismo azul y se fundía con el fondo). */
.support-button{
  border-radius:999px !important;
  background:#ffffff !important;
  color:var(--exa-primary) !important;
  padding:8px 24px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.18) !important;
}
.support-button:hover{ background:#f2f7ff !important; color:var(--exa-primary-d) !important; }
/* Alinear "Soporte" con "Iniciar Sesión" (su contenedor lo empujaba abajo) */
#nav .support-button-holder{ margin-top:0 !important; padding-top:0 !important; }
#nav .login-button, #nav .support-button{ vertical-align:middle !important; margin-top:0 !important; }

/* ---------- Header simétrico: logo, menú y botones en una sola línea ----------
   (solo escritorio; en móvil se mantiene el menú colapsable de Bootstrap) */
@media (min-width:768px){
  #header-holder #nav .container-nav > .row{ display:flex !important; align-items:center !important; }
  #header-holder #nav .container-nav > .row > [class*="col-"]{
    display:flex !important; align-items:center !important; justify-content:space-between !important; width:100%;
  }
  #header-holder #nav .navbar-header{ float:none !important; margin:0 !important; display:flex; align-items:center; }
  #header-holder #nav .navbar-collapse{ float:none !important; padding:0 !important; height:auto !important; }
  #header-holder #nav .navbar-nav{ float:none !important; margin:0 !important; display:flex; align-items:center; }
  #header-holder #nav .navbar-nav > li{ float:none !important; display:flex; align-items:center; }
  /* Texto del menú más grande */
  #header-holder #nav .navbar-nav > li > a{ font-size:17px !important; }
}

/* ---------- Tarjetas de precios: paleta moderna y suave (todas las páginas) ----
   Reemplaza los gradientes saturados/oscuros del tema por tonos más claros y
   armónicos, con buen contraste para el texto blanco. */
.pricing-box.pricing-box-simple.pricing-color1 .pricing-content .pricing-head:before{ background-image:linear-gradient(120deg,#3aa0f2,#1f7fe0)!important; }
.pricing-box.pricing-box-simple.pricing-color1 .pricing-content .pricing-link a{ background-color:#1f86e6!important; }
.pricing-box.pricing-box-simple.pricing-color1 .pricing-content .pricing-link a:hover,
.pricing-box.pricing-box-simple.pricing-color1 .pricing-content .pricing-link a:focus{ background-color:#146fd0!important; }
.pricing-box.pricing-box-simple.pricing-color1 .pricing-content .pricing-details ul li:hover{ color:#1f86e6!important; }

.pricing-box.pricing-box-simple.pricing-color2 .pricing-content .pricing-head:before{ background-image:linear-gradient(120deg,#a78bfa,#7c6cf5)!important; }
.pricing-box.pricing-box-simple.pricing-color2 .pricing-content .pricing-link a{ background-color:#7c6cf5!important; }
.pricing-box.pricing-box-simple.pricing-color2 .pricing-content .pricing-link a:hover,
.pricing-box.pricing-box-simple.pricing-color2 .pricing-content .pricing-link a:focus{ background-color:#6355e6!important; }
.pricing-box.pricing-box-simple.pricing-color2 .pricing-content .pricing-details ul li:hover{ color:#7c6cf5!important; }

.pricing-box.pricing-box-simple.pricing-color3 .pricing-content .pricing-head:before{ background-image:linear-gradient(120deg,#2fd0a0,#10a98d)!important; }
.pricing-box.pricing-box-simple.pricing-color3 .pricing-content .pricing-link a{ background-color:#12a98d!important; }
.pricing-box.pricing-box-simple.pricing-color3 .pricing-content .pricing-link a:hover,
.pricing-box.pricing-box-simple.pricing-color3 .pricing-content .pricing-link a:focus{ background-color:#0d8f77!important; }
.pricing-box.pricing-box-simple.pricing-color3 .pricing-content .pricing-details ul li:hover{ color:#12a98d!important; }

.pricing-box.pricing-box-simple.pricing-color4 .pricing-content .pricing-head:before{ background-image:linear-gradient(120deg,#29c3e0,#159fc4)!important; }
.pricing-box.pricing-box-simple.pricing-color4 .pricing-content .pricing-link a{ background-color:#159fc4!important; }
.pricing-box.pricing-box-simple.pricing-color4 .pricing-content .pricing-link a:hover,
.pricing-box.pricing-box-simple.pricing-color4 .pricing-content .pricing-link a:focus{ background-color:#0f83a4!important; }
.pricing-box.pricing-box-simple.pricing-color4 .pricing-content .pricing-details ul li:hover{ color:#159fc4!important; }

.pricing-box.pricing-box-simple.pricing-color5 .pricing-content .pricing-head:before{ background-image:linear-gradient(120deg,#7c86f5,#5566e8)!important; }
.pricing-box.pricing-box-simple.pricing-color5 .pricing-content .pricing-link a{ background-color:#5566e8!important; }
.pricing-box.pricing-box-simple.pricing-color5 .pricing-content .pricing-link a:hover,
.pricing-box.pricing-box-simple.pricing-color5 .pricing-content .pricing-link a:focus{ background-color:#4453d4!important; }
.pricing-box.pricing-box-simple.pricing-color5 .pricing-content .pricing-details ul li:hover{ color:#5566e8!important; }

/* ---------- Filas de planes con más de 3 tarjetas ----------
   Con floats, las tarjetas que pasan a la 2ª fila se "enganchan" a la derecha
   por las alturas desiguales. Con flexbox fluyen siempre desde la izquierda. */
@media (min-width:768px){
  .plan-cards{ display:flex; flex-wrap:wrap; align-items:flex-start; }
}

/* ---------- Accesibilidad ---------- */
a:focus-visible,.ybtn:focus-visible,button:focus-visible{
  outline:3px solid rgba(34,211,238,.55);
  outline-offset:2px;
}
html{ scroll-behavior:smooth; }