/* ===== PALETA BASE ===== */
:root {
  --color-primario: #1E88E5;
  --color-secundario: #6C63FF;
  --color-acento: #FFD54F;
  --color-acento2: #00E5FF;
  --color-fondo-claro: #F9FAFB;
  --color-fondo-oscuro: #1A1A1A;
  --color-cta: #F4A52C; /* Cian saturado */
  --color-cta-hover: #E6761E;
  --color-fondo-card: #FDFEFF;
}

/* Altura del header fija para compensar el scroll */
/* Por si tu header es más alto en desktop/móvil */
:root{ --header-h: 92px; }
@media (max-width: 991px){ :root{ --header-h: 60px; } }
.scroll-offset{ scroll-margin-top: var(--header-h); }


/* ===== HERO ===== */
/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  background: url("../img/hero-bg-electrico_v14.png") no-repeat center center / cover;
  display: flex;
  align-items: center;
}

.hero .container {
  padding-top: 2rem;
  padding-bottom: 0;
}

.hero .row {
  margin-top: -200px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-img {
  max-width: 120%;
  height: auto;
  float: left;
  margin-right: 2rem;
  margin-left: -3rem;
}

.hero-title {
  margin-left: -4rem;
  color: white;
  font-weight: bold;
}

.hero-title2 {
  margin-top: 2.2rem;
  color: white;
}
.hero-title2-light {
  margin-top: 2.2rem;
  color: #1F2937; /* gris casi negro */
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero-subtitle {
  margin-top: 2.2rem;
  margin-left: -4rem;
  color: white;
}

.pop-button.btn-register {
  margin-top: 1.2rem;
  margin-left: -4rem;
}

.hero-subtitle.small-note {
  margin-top: 0.2rem;
  margin-left: -4rem;
}

/* Resaltado dentro del título */
.hero-highlight {
  color: var(--color-acento);
}

.hero-highlight {
  color: var(--color-acento2);            /* aqua: mejor contraste que el amarillo */
  position: relative;
  display: inline-block;
}
.hero-highlight::after {                   /* subrayado degradado sutil */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primario), var(--color-secundario));
  opacity: .85;
}


.pop-button.btn-register {
  margin-top: 1.2rem;
  margin-left: -4rem;
  padding: 0.8rem 1.6rem;
  background: var(--color-cta);
  color: #000;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.pop-button.btn-register:hover {
  background: var(--color-cta-hover);
  color: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}


/* ===== BOTÓN FLOTANTE CHAT ===== */
#chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #2B32B2;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#chat-button img {
  max-height: 50px;
}

/* ===== WIDGET CHAT ===== */
#chat-box {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 420px;
  height: 580px;
  background: #FFFBF5;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: none;
  z-index: 10000;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
  border: 1px solid #cce0ed;
}

#chat-box iframe {
  border: none;
  width: 100%;
  height: 100%;
}

/* Encabezado del chat */
#chat-box .chat-header {
  background: #2B32B2;
  color: white;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

#chat-box .chat-header img {
  max-height: 40px;
}

#chat-box .chat-header .chat-close {
  cursor: pointer;
}

/* Seccion Synap*/
/* ===== SECCIÓN SYNAP ===== */
/* ===== SECCIÓN SYNAP ===== */
/* ===== SECCIÓN SYNAP ===== */

/* Fondo claro y espaciado general */
.section-synap {
  background-color: #F4F8FF;
  padding-top: 4rem;
  padding-bottom: 4rem;
}


/* 3. Fondo con microdetalles sutiles */
.section-synap {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background:
    radial-gradient(1000px 500px at 85% 90%, rgba(30,136,229,0.05), transparent 70%),
    radial-gradient(800px 400px at 10% 20%, rgba(108,99,255,0.04), transparent 70%),
    #F4F8FF;
}


/* Título nivel 3 para subtítulos principales */
.hero-title3 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #374151; /* gris oscuro */
  margin-bottom: 1rem;
}

/* Imagen consistente */
.img-consistente,
.synap-img {
  max-width: 100%;
  height: auto;
}

/* Card base con más presencia y borde degradado elegante */
.pop-card {
  border-radius: 12px;
  padding: 1.5rem;
  transition: all .3s ease;
  /* interior */
  background:
    linear-gradient(var(--color-fondo-card, #FFFFFF), var(--color-fondo-card, #FFFFFF)) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.25), rgba(108,99,255,.25)) border-box; /* borde degradado */
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Marco adicional (lo dejamos por si se usa en otras secciones) */
.pop-frame { border: 2px solid transparent; }

/* Hover en cards: más elevación y leve realce del fondo */
.pop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  background:
    linear-gradient(#FAFBFF, #FAFBFF) padding-box,                      /* un punto más claro */
    linear-gradient(135deg, rgba(30,136,229,.45), rgba(108,99,255,.45)) border-box;
}

.pop-card i {
  transition: transform 0.3s ease, color 0.3s ease;
}
.pop-card:hover i {
  transform: scale(1.05);
  filter: brightness(1.1);
}


}
.pop-icon-yellow {
  color: #FFC93C; /* amarillo más cálido y vibrante */
}
.pop-icon-blue {
  color: var(--color-primario);
}
.pop-icon-purple {
  color: var(--color-secundario);
}

/* Utilidad scroll offset (si es para compensar sticky nav)
.scroll-offset {
  scroll-margin-top: 80px; /* ajusta al alto del header
}*/

/* ===== SECCIÓN: Módulos (expansión) ===== */
.section-modulos{
  position: relative;
  padding: 4rem 0;
  background:
    radial-gradient(900px 420px at 85% 15%, rgba(30,136,229,.05), transparent 70%),
    radial-gradient(700px 380px at 10% 85%, rgba(108,99,255,.05), transparent 70%),
    #F5F8FF;
  box-shadow: 0 -14px 30px rgba(30,136,229,.06) inset; /* “escalón” suave */
}
.section-modulos::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:56px;    /* más alto */
  background: linear-gradient(180deg, rgba(244,248,255,0) 0%, rgba(108,99,255,.14) 100%);
  mask: radial-gradient(60% 140% at 50% -40%, #000 72%, transparent 75%);
  -webkit-mask: radial-gradient(60% 140% at 50% -40%, #000 72%, transparent 75%);
}


/* ===== Cards mini (misma familia que .pop-card, más compactas) ===== */
.pop-card-mini{
  background: linear-gradient(var(--color-fondo-card,#fff),var(--color-fondo-card,#fff)) padding-box,
              linear-gradient(135deg, rgba(30,136,229,.18), rgba(108,99,255,.18)) border-box;
  border:2px solid transparent;
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition: all .25s ease;
}
.pop-card-mini:hover{
  transform: translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  background: linear-gradient(#FAFBFF,#FAFBFF) padding-box,
              linear-gradient(135deg, rgba(30,136,229,.38), rgba(108,99,255,.38)) border-box;
}
.pop-card-mini i{
  transition: transform .25s ease, filter .25s ease;
}
.pop-card-mini:hover i{
  transform: scale(1.06);
  filter: brightness(1.08);
}

/* ===== Panel ilustración derecha ===== */
.plataforma-art{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:12px;
  display:inline-block;
  max-width:100%;
}
.plataforma-art img{ display:block; width:100%; height:auto; }

/* ===== Utilidades de icono (para reemplazar estilos inline) ===== */
/* ===== Utilidades de icono (paleta extendida) ===== */
.icon-primario { color: var(--color-primario); }       /* azul principal */
.icon-secundario { color: var(--color-secundario); }   /* púrpura */
.icon-warn { color: #E6A600; }                         /* amarillo cálido #FFC93C*/
.icon-info { color: var(--color-acento2); }            /* aqua / cian */

.icon-orange { color: #FF6F00; }                       /* naranja intenso */
.icon-purple { color: #9C27B0; }                       /* púrpura fuerte */

/* ===== SECCIÓN CONSULTORÍA ===== */
/* ===== SECCIÓN CONSULTORÍA (transición suave y limpia) ===== */
.section-consultoria{
  position: relative;
  padding: 4rem 0;
  background:
    radial-gradient(900px 420px at 85% 15%, rgba(30,136,229,.05), transparent 70%),
    radial-gradient(700px 380px at 10% 85%, rgba(108,99,255,.05), transparent 70%),
    #F5F8FF;
  box-shadow: 0 -14px 30px rgba(30,136,229,.06) inset; /* “escalón” suave */
}
.section-consultoria::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:56px;    /* más alto */
  background: linear-gradient(180deg, rgba(244,248,255,0) 0%, rgba(108,99,255,.14) 100%);
  mask: radial-gradient(60% 140% at 50% -40%, #000 72%, transparent 75%);
  -webkit-mask: radial-gradient(60% 140% at 50% -40%, #000 72%, transparent 75%);
}
/* Sin transición inferior adicional: evitamos segunda banda visible */
.section-consultoria::after{ content: none; }


/* ===== TÍTULOS Y TEXTOS LOCALES ===== */
.section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1F2937; /* gris casi negro para fondo claro */
  margin-bottom: 1rem;
}
.section-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: #374151; /* gris oscuro */
  margin-bottom: 1.5rem;
}

/* ===== SOMBRA POP PARA ILUSTRACIÓN ===== */
.shadow-pop {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 12px;
  display: inline-block;
}

/* ===== COLOR DE ICONOS DE LISTA ===== */
.text-trans {
  color: var(--color-acento2); /* aqua/cian de la paleta */
}

/* ===== BOTÓN CONTORNO TRANSLÚCIDO ===== */

.btn-outline-trans {
  border: none;
  background: var(--color-acento2);
  color: #fff;
  padding: 0.9rem 1.8rem;
  font-size: 1.05rem;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.btn-outline-trans:hover {
  background: #00bcd4; /* tono más vivo del acento */
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

/* ===== SECCIÓN IA & AUTOMATIZACIÓN ===== */
.section-ia {
  position: relative;
  padding: 4.5rem 0;
  background:
    radial-gradient(900px 480px at 18% 20%, rgba(108,99,255,.05), transparent 70%),
    radial-gradient(900px 520px at 82% 80%, rgba(30,136,229,.05), transparent 70%),
    #F4F7FF; /* claro con matiz frío para diferenciar de consultoría */
}

/* Separador superior coherente (desde Consultoría → IA) */
.section-ia::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:56px;
  background: linear-gradient(180deg,
    #F6F4FF 0%,                       /* tono de sección anterior (consultoría) */
    rgba(244,247,255,.60) 55%,
    rgba(30,136,229,.12) 100%
  );
  mask: radial-gradient(60% 160% at 50% -45%, #000 74%, transparent 77%);
  -webkit-mask: radial-gradient(60% 160% at 50% -45%, #000 74%, transparent 77%);
  z-index:-1; pointer-events:none;
}

/* Título/subtítulo ya existen: .section-title y .section-subtitle */
/* Solo añadimos un acento morado para los checks y botón de contorno morado */

/* Checks en morado para diferenciar de consultoría (que usa aqua) */
.text-purple { color: var(--color-secundario); }

/* Botón contorno morado (coherente con .btn-outline-trans en aqua) */
.btn-outline-purple{
  border: none;
  color: #fff;
  background: var(--color-secundario);
  border-radius:10px;
  padding:.9rem 1.8rem;
  font-weight: 700;
  transition: all .3s ease;
  box-shadow: 0 3px 10px rgba(108,99,255,.12);
}

.btn-outline-purple:hover{
  background: #564FCC;
  color: #A7A1FF;
  box-shadow: 0 6px 18px rgba(108,99,255,.18);
}

/* Imagen con la misma estética de tarjeta (reusar .shadow-pop) */
/* ===== ¿POR QUÉ ELEGIR SYNAP? ===== */
.section-why{
  position: relative;
  /*padding: 4.5rem 0;*/
  padding-top: 1.55rem;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(30,136,229,.05), transparent 70%),
    radial-gradient(900px 520px at 88% 82%, rgba(108,99,255,.05), transparent 70%),
    #F4F8FF; /* mismo “azul casi blanco” del resto */
}
.section-why::before{
  height: 44px;
  content:"";
  position:absolute; top:0; left:0; width:100%; height:56px;
  background: linear-gradient(180deg,
    #F4F7FF 0%, rgba(244,247,255,.60) 55%, rgba(30,136,229,.10) 100%);
  mask: radial-gradient(60% 160% at 50% -45%, #000 74%, transparent 77%);
  -webkit-mask: radial-gradient(60% 160% at 50% -45%, #000 74%, transparent 77%);
  z-index:-1; pointer-events:none;
}

/* Títulos y subtítulos (reutilizamos tu sistema) */
.section-why .hero-title2-light{
/*margin-bottom:.5rem;*/
  margin-top: 0;                  /* quita el gap inicial */
  margin-bottom: .75rem;
}
.section-why .section-subtitle{ margin-bottom: .75rem; }

/* Video con estética consistente */
.video-embed{ border-radius: 14px; overflow: hidden; box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* Cards azules (las que pones a la derecha) */
/* Cards azules – más presencia de color */
.pop-card-blue{
  background:
    linear-gradient(180deg, #F8FBFF 0%, #F1F6FF 100%) padding-box,           /* azul muy claro dentro */
    linear-gradient(135deg, rgba(30,136,229,.32), rgba(108,99,255,.32)) border-box; /* borde más notorio */
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  padding: 1.25rem 1.5rem;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.pop-card-blue:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  background:
    linear-gradient(180deg, #F4F9FF 0%, #ECF3FF 100%) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.46), rgba(108,99,255,.46)) border-box;
}

/* Card con tinte neutro-elegante (ligero, pero visible) */
.pop-card-tint {
  background: linear-gradient(180deg, #F1F5FF 0%, #E4EBFF 100%) padding-box,
              linear-gradient(135deg, rgba(30,136,229,.38), rgba(108,99,255,.38)) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.pop-card-tint:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
  background: linear-gradient(180deg, #EAF0FF 0%, #DEE6FF 100%) padding-box,
              linear-gradient(135deg, rgba(30,136,229,.5), rgba(108,99,255,.5)) border-box;
}


/* Texto oscuro garantizado dentro de esas cards */
.text-contrast-dark{ color:#1F2937; } /* gris casi negro */

/* ===== SECCIÓN PLANES ===== */
.section-planes{
  position: relative;
  padding: 1.5rem 0;
  /*background:
    radial-gradient(1200px 700px at 15% 20%, rgba(0,229,255,.18), transparent 65%),
    radial-gradient(1100px 650px at 85% 80%, rgba(108,99,255,.18), transparent 65%),
    linear-gradient(180deg, #102534 0%, #0B1C27 100%); /* más claro que el anterior */
  background:
    radial-gradient(1100px 520px at 15% 10%, rgba(0,229,255,.08), transparent 70%),
    radial-gradient(1000px 520px at 85% 90%, rgba(108,99,255,.08), transparent 70%),
    linear-gradient(180deg, #0E3343 0%, #0B2734 100%); /* más claro que antes */
  /*background:
    radial-gradient(900px 520px at 14% 18%, rgba(30,136,229,.05), transparent 70%),
    radial-gradient(900px 520px at 86% 82%, rgba(108,99,255,.05), transparent 70%),
    #0D1B2A; /* fondo oscuro elegante que ya usas en esa sección */
}
.section-planes::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:48px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}

/* Grid: los .col ya los manejas con Bootstrap; igualamos alturas */
.plan-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.04) 100%) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.25), rgba(108,99,255,.25)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  padding: 1rem 1.1rem 1rem;
  display: flex;
  height: 100%;
  max-width: 420px; /* mantiene ancho agradable en desktop */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.plan-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}

.plan-card-content{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Icono y encabezado más compacto */
.plan-icon{ font-size: 2rem; line-height: 1; }
.plan-card h4{ margin: .25rem 0 .2rem; letter-spacing: .4px; }

/* Descripción y lista más apretadas */
.plan-card p.fst-italic{ margin-bottom: .35rem; }
.plan-card ul{ margin: 0; }
.plan-card ul li{
  line-height: 1.35;
  margin: .25rem 0;
}

/* Footer pegado al fondo para igualar alturas */
.plan-card-footer{
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px dashed rgba(255,255,255,.15);
}

/* Card destacada (opcional: aplica a Sales+ o Campaigns) */
.plan--featured{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.06) 100%) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.35), rgba(108,99,255,.45)) border-box;
  box-shadow: 0 18px 38px rgba(0,0,0,.30);
  position: relative;
}
.plan--featured::after{
  content: "Más elegido";
  position: absolute;
  top: 12px; right: 12px;
  background: linear-gradient(90deg, #00E5FF, #6C63FF);
  color: #00111a;
  font-weight: 800;
  font-size: .72rem;
  padding: .28rem .5rem;
  border-radius: 999px;
}

/* Botones dentro de planes (ya tienes .btn-outline-trans; ajustamos un tamaño) */
.plan-card .btn{ padding: .65rem 1.1rem; }

/* ==== PLAN BRAIN (compacto) ==== */
.plan-card-brain{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.07) 100%) padding-box,
    linear-gradient(135deg, rgba(255,215,0,.55), rgba(255,215,0,.15)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  padding: 1rem 1.1rem 1rem;
  display: flex; flex-direction: column;
  max-width: 900px; /* permite que sea más ancho si está solo en la fila */
}
.plan-card-brain ul{ line-height: 1.35; margin: .35rem auto .25rem; }

.plan-brain-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(90deg, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0.05) 100%);
  border: 2px solid rgba(255,215,0,0.5);
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.plan-brain-bar .plan-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.plan-brain-bar ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Hover con color más marcado */
.plan-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0,0,0,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.08) 100%) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.45), rgba(108,99,255,.45)) border-box;
  border-color: transparent; /* el gradiente del border se nota más */
}

.plan--featured:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.10) 100%) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.55), rgba(108,99,255,.55)) border-box;
}

/* Hover barra/Brain */
.plan-card-brain:hover,
.plan-brain-bar:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0,0,0,.34);
  background:
    linear-gradient(135deg, rgba(255,215,0,.28), rgba(255,215,0,.10)) padding-box,
    linear-gradient(135deg, rgba(255,215,0,.65), rgba(255,215,0,.25)) border-box;
  border-color: transparent;
}

/**********************************************************************************************************************/
/* ========== PLANES – TARJETAS: GRID INTERNO PARA ALINEAR PIE ========== */
/* Estructuramos el contenido en 4 filas: icono+titulo, subtítulo, features (1fr), footer */
.plan-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.25), rgba(108,99,255,.25)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  padding: 1.1rem 1.2rem;
  display: flex;
  height: 100%;
  max-width: 520px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

   1) Icono  2) Título  3) Subtítulo  4) Features (1fr)  5) Footer  */
.plan-card-content{
  display: grid;
  grid-template-rows: auto auto auto 1fr auto; /* <- footer siempre a la misma altura */
  row-gap: .45rem;
  width: 100%;
  height: 100%; /* imprescindible para que el 1fr funcione a igualar alturas */
}

/* Subtítulo con altura mínima (2 líneas) para evitar saltos que desalineen */
.plan-card p.fst-italic{
  margin: 0 0 .25rem 0;
  min-height: 3rem;            /* ajusta a 2.4–3.0rem si usas otra fuente/tamaño */
  display: -webkit-box;          /* opcional: clamp a 2 líneas */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plan-icon{ font-size: 2rem; line-height: 1; }
.plan-card h4{ margin: .2rem 0 .15rem; letter-spacing: .4px; }

.plan-card p.fst-italic{ margin: 0 0 .25rem 0; }
.plan-card ul{ margin: 0; }
.plan-card ul li{ line-height: 1.35; margin: .25rem 0; }

/* Footer pegado al fondo y con separador uniforme en todas las cards */
.plan-card-footer{
  margin-top: 0; /* ya no dependemos de margin-top:auto */
}
.plan-card-footer::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.18), rgba(255,255,255,.10));
  margin: .75rem 0 1rem;
}

/* Hover más marcado (fondo un poco más claro + glow sutil) */
.plan-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(0,0,0,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.35), rgba(108,99,255,.35)) border-box;
  border-color: rgba(255,255,255,.20);
}

/* Destacada (Sales+) sigue funcionando, solo afinamos el badge */
.plan--featured{
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,.32);
}
.plan--featured::after{
  content: "Más elegido";
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(90deg, #00E5FF, #6C63FF);
  color: #00111a;
  font-weight: 800;
  font-size: .72rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  letter-spacing: .2px;
}


/* Bloque “¿Cómo se calcula?” colapsable */
.calc-note{
  max-width: 760px;
  margin: 0 auto 1rem;
  color: #D7E1F2;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: .65rem .9rem;
}
.calc-note > summary{
  cursor: pointer;
  font-weight: 700;
  color: #00E5FF;
  list-style: none;
}
.calc-note > summary::-webkit-details-marker{ display: none; }
.calc-note[open]{ box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.calc-note .calc-body{ margin-top: .5rem; font-size: .95rem; }

.texto-planes-titulo {
  color: var(--color-acento2); /* Aqua elegante */
  font-weight: 700;
}

.texto-planes-subtitulo {
  color: #EAEAEA; /* Gris muy claro sobre fondo oscuro */
}

/* ========== BRAIN con la misma estética que las demás ========== */
.plan-card-brain{
  /* hereda look base y lo tiñe con dorado */
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.05) 100%) padding-box,
    linear-gradient(135deg, rgba(255,215,0,.55), rgba(255,215,0,.18)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  padding: 1.1rem 1.2rem;
  display: flex;
  height: 100%;
  max-width: 520px; /* mismo ancho que las demás */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.plan-card-brain .plan-card-content{
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: .45rem;
}
.plan-card-brain .plan-card-footer::before{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg, rgba(255,215,0,.22), rgba(255,215,0,.45), rgba(255,215,0,.22));
  margin: .75rem 0 1rem;
}
.plan-card-brain:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(0,0,0,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.07) 100%) padding-box,
    linear-gradient(135deg, rgba(255,215,0,.70), rgba(255,215,0,.28)) border-box;
  border-color: rgba(255,215,0,.45);
}
/* ===== CONTACTO ===== */

/* Transición desde fondo oscuro (planes) hacia claro */
.section-contacto {
  position: relative;
  padding: 0.5rem 0;
  background: linear-gradient(
      to bottom,
      #0B2734 0%, /*#0d2b38 0%,          /* mismo oscuro de “planes” */
      #f7faff 100%         /* mismo claro que usas en esta sección */
  );
  /*background:
    radial-gradient(900px 520px at 18% 20%, rgba(108,99,255,.06), transparent 70%),
    radial-gradient(900px 520px at 82% 80%, rgba(0,229,255,.06), transparent 70%),
    #F6FAFF; /* claro con matiz frío */
}
.section-contacto::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:54px;
  background: linear-gradient(180deg,
    rgba(11,39,52,1) 0%,             /* color superior que “viene” de planes */
    rgba(246,250,255,.65) 55%,
    rgba(108,99,255,.10) 100%
  );
  mask: radial-gradient(60% 160% at 50% -45%, #000 74%, transparent 77%);
  -webkit-mask: radial-gradient(60% 160% at 50% -45%, #000 74%, transparent 77%);
  pointer-events:none;
  z-index:0;
}

/* Elimina el pseudo‑elemento que generaba la curva */
.section-contacto::before{
  content: none;
}


/* Título y subtítulo */
.section-contacto .cta-heading{
  font-weight: 800;
  color: #0F2B3A;
}
.section-contacto .lead{
  color: #284457;
}

/* Card/formulario con borde degradado en tu lenguaje visual */
.contact-card,
.cta-card {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.22), rgba(108,99,255,.22)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: 1.25rem;
}

/* Grid para los 4 campos de cabecera */
.cta-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
@media (max-width: 768px){
  .cta-grid{ grid-template-columns: 1fr; }
}

/* Inputs glass, legibles */
.cta-input,
.cta-textarea,
.section-contacto .form-control{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(30,136,229,.18);
  color: #0F2B3A;
  border-radius: 10px;
  padding: .75rem .9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.02);
}
.section-contacto .form-control::placeholder{ color:#7B8A96; }
.section-contacto .form-control:focus{
  outline: none;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(108,99,255,.15);
}

/* ===== Chips de servicios ===== */
.cta-servicios-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .6rem;
}
@media (max-width: 992px){ .cta-servicios-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 576px){ .cta-servicios-grid{ grid-template-columns: 1fr; } }

.cta-servicios-grid label{
  display:block;
  cursor:pointer;
}
.cta-serv-checkbox{ display:none; }

.cta-servicio-option{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.65rem .8rem;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing:.2px;
  color:#0F2B3A;
  background:
    linear-gradient(#FDFEFF,#FDFEFF) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.22), rgba(108,99,255,.22)) border-box;
  border:1px solid transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.cta-servicio-option:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

/* estado seleccionado (checkbox marcado) */
.cta-serv-checkbox:checked + .cta-servicio-option{
  background:
    linear-gradient(#EAF3FF,#EAF3FF) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.38), rgba(108,99,255,.38)) border-box;
  border-color: rgba(30,136,229,.45);
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* Colores por chip (de la paleta) */
.cta-serv-prospector{ color:#0E3A5A; }
.cta-serv-sales{ color:#15396A; }
.cta-serv-projects{ color:#17385E; }
.cta-serv-brain{ color:#4A3B00; }


/* Estado activo (sin JS) */
#servProspector:checked + .cta-servicio-option{
  background:
    linear-gradient(#E9F6FF,#E9F6FF) padding-box,
    linear-gradient(135deg, rgba(0,229,255,.55), rgba(30,136,229,.45)) border-box;
}
#servSales:checked + .cta-servicio-option{
  background:
    linear-gradient(#EFEFFF,#EFEFFF) padding-box,
    linear-gradient(135deg, rgba(108,99,255,.55), rgba(0,229,255,.35)) border-box;
}
#servProjects:checked + .cta-servicio-option{
  background:
    linear-gradient(#F0F7FF,#F0F7FF) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.48), rgba(108,99,255,.35)) border-box;
}
#servBrain:checked + .cta-servicio-option{
  background:
    linear-gradient(#FFF9E6,#FFF9E6) padding-box,
    linear-gradient(135deg, rgba(255,215,0,.60), rgba(108,99,255,.25)) border-box;
}

/* Textarea */
.cta-textarea{ min-height: 160px; resize: vertical; }

/* CTA botón (coherente con btn-outline/trans que ya usas) */
.cta-btn{
  border:none;
  background: var(--color-cta);
  color:#0F0F0F;
  font-weight:800;
  padding: .95rem 1.4rem;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.cta-btn:hover{
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

/* Mensaje de confianza */
.cta-reassurance{
  text-align:center;
  color:#36566C;
  margin: .25rem 0 0;
  font-size:.95rem;
}
.cta-reassurance i{ color: var(--color-secundario); margin-right:.35rem; }

/* Utilidad: ancho máximo del formulario si quieres envolverlo en .cta-card */
.section-contacto form{ position: relative; z-index: 1; }

/* Asegurar centrado y colores de los encabezados en contacto */
.section-contacto .texto-planes-titulo,
.section-contacto .texto-planes-subtitulo{
  text-align: center !important;
  display: block;
}

.section-contacto .texto-planes-titulo{
  color: #00E5FF;                 /* usa tu acento si prefieres */
}

.section-contacto .texto-planes-subtitulo{
  color: #ffffff;                 /* subtítulo en blanco */
  opacity: .95;
}

/* Por si algo debajo tenía z-index encima del degradado */
.section-contacto .container{ position: relative; z-index: 1; }

/* === QUIÉNES SOMOS =============================== */

/* Fondo claro con micro‑degradado sutil (continúa el de Contacto) */
.about-section-bg{
  position: relative;
  padding: 0rem;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(30,136,229,.04), transparent 70%),
    radial-gradient(900px 520px at 85% 80%, rgba(108,99,255,.04), transparent 70%),
    linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
}

/* Tarjeta base con borde degradado (misma familia .pop-card) */
.about-block{
  background:
    linear-gradient(#FFFFFF,#FFFFFF) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.22), rgba(108,99,255,.22)) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 1rem 1.2rem;
  margin-bottom: 1.1rem;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.about-block:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  background:
    linear-gradient(#FAFBFF,#FAFBFF) padding-box,
    linear-gradient(135deg, rgba(30,136,229,.38), rgba(108,99,255,.38)) border-box;
}

/* Icono grande al inicio del bloque */
.about-icon{
  font-size: 1.4rem;
  color: var(--color-primario, #1E88E5);
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Tipografía interna del bloque */
.about-block h5{ color:#0F2B3A; margin-bottom:.25rem; }
.about-block p{ color:#17385E; line-height:1.5; margin:0; }

/* ---------- “Contacto directo” dentro del bloque ---------- */
/* Afecta solo a los i dentro de la fila de contactos (los otros bloques no tienen .row) */
.about-block .row i{
  width: 1.1rem;
  text-align: center;
  color: #7B8A96;
}
.about-block .row a{
  color: #0F3D63;
  font-weight: 600;
  text-decoration: none;
}
.about-block .row a:hover{
  text-decoration: underline;
}

/* Alineación limpia de las dos columnas de contacto */
.about-block .row .col-12{
  display: flex;
}
.about-block .row .col-12 p{
  margin: 0;
}

/* En pantallas medianas, que respiren igual */
@media (max-width: 768px){
  .about-block .row .col-12{
    margin-bottom: .5rem;
  }
}

/* ---------- CTA final centrado y consistente ---------- */
.about-section-bg .text-center .btn{
  display: inline-flex;
  margin: 0 auto;
}
.about-section-bg .btn.pop-button.btn-register{
  padding: .9rem 1.6rem;
  background: var(--color-cta, #F4A52C);
  color: #0F0F0F;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.about-section-bg .btn.pop-button.btn-register:hover{
  background: var(--color-cta-hover, #E6761E);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

/* Título principal centrado y con peso (por si algo externo lo pisa) */
#nosotros h2{
  text-align:center;
  font-weight: 800;
  color:#0F2B3A;
  margin-bottom: 1.25rem;
}
/* ===== Modificador para el bloque de contacto ===== */
.about-block.about-contact{
  display: block;              /* apila encabezado y fila; evita el flex horizontal */
  padding: 0.1rem 1.2rem;
}

/* Encabezado del card de contacto */
.about-contact .about-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*gap: .75rem;*/
  margin-bottom: .5rem;
}
.about-contact .about-head img{
  max-height: 64px;            /* 80px también va, ajusta si quieres */
  height: auto;
}

/* Alineación limpia de las dos columnas e iconos */
.about-contact .row{ --bs-gutter-x: 1rem; }
.about-contact .row .col-12{ display: block; }         /* cada columna se comporta como bloque */
.about-contact .row p{ margin: 0; }

.about-contact .row i{
  width: 1.1rem;               /* ancho fijo para alinear los textos */
  text-align: center;
  color: #7B8A96;
}

/* En móviles, respirito entre columnas */
@media (max-width: 768px){
  .about-contact .row .col-12{ margin-bottom: .5rem; }
}