/* Ajustes propios de Grupo 2000 sobre la plantilla (no editar style.css, está minificado) */

/* Design tokens: colores reales de marca ya usados en la plantilla, centralizados */
:root {
   --g2-primary: #516ca9;
   --g2-primary-dark: #3e5588;
   --g2-ink: #31404a;
   --g2-ink-soft: #4b5a66;
   --g2-muted: #8b98a3;
   --g2-border: #d9dee3;
   --g2-surface: #ffffff;
   --g2-accent-green: #0f7a3d;    /* verde accesible (AA) para badges, reemplaza #25d366 */
   --g2-danger: #f16583;
   --g2-shadow-card: 0 4px 20px rgba(49, 64, 74, .10);
   --g2-shadow-card-hover: 0 10px 28px rgba(49, 64, 74, .16);
   --g2-radius: 8px;
   --g2-transition: 200ms ease;
}

html { scroll-behavior: smooth; }
section[id], .page[id] { scroll-margin-top: 90px; }

/* Accesibilidad: respeta la preferencia de movimiento reducido del usuario */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
   }
}

/* Accesibilidad: foco visible para navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.rd-navbar-toggle:focus-visible,
.rd-navbar-collapse-toggle:focus-visible {
   outline: 3px solid var(--g2-primary);
   outline-offset: 2px;
}

/* Accesibilidad: enlace "saltar al contenido", visible solo con teclado */
.skip-link {
   position: absolute;
   top: -48px;
   left: 16px;
   z-index: 1100;
   padding: 12px 20px;
   background: var(--g2-ink);
   color: #fff;
   font-weight: 700;
   border-radius: 0 0 6px 6px;
   transition: top var(--g2-transition);
}
.skip-link:focus {
   top: 0;
   color: #fff;
}

/* Etiqueta "Nuevo" sobre el bot (el doble de tamaño) */
.badge-nuevo {
   display: inline-block;
   margin-bottom: 24px;
   padding: 8px 28px;
   border-radius: 40px;
   background: var(--g2-accent-green);
   color: #fff;
   font-size: 26px;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: 2px;
   text-transform: uppercase;
}

/* Etiqueta chica del HERO 3 */
.badge-hero {
   margin-bottom: 16px;
   padding: 4px 14px;
   border-radius: 20px;
   background: var(--g2-accent-green);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

/* Barra superior: el e-mail con el mismo tamaño y estilo que el teléfono */
.rd-navbar .rd-navbar-aside .rd-navbar-info a,
.rd-navbar .rd-navbar-aside .list-lined.list-lined,
.rd-navbar .rd-navbar-aside .list-lined.list-lined a {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.2;
   text-transform: none;
}

/* Logo un 40% más grande en escritorio (120px -> 168px) */
.rd-navbar-transparent.rd-navbar-static .rd-navbar-brand img {
   max-width: 168px;
   max-height: 168px;
}

/* Menú: mayúsculas y +20% de tamaño (14px -> 16.8px) */
.rd-nav-link { text-transform: uppercase; }
.rd-navbar-static .rd-nav-link { font-size: 16.8px; }

/* Servicios: dos bloques a todo el ancho, cada uno con su fondo (grises provisorios) */
.svc-dev   { background: #eceff2; }
.svc-audio { background: #dde2e7; }
.svc-title { font-size: 28px; line-height: 1.2; }
@media (min-width: 576px) { .svc-title { font-size: 34px; } }
.svc-lead { margin-top: 16px; font-size: 19px; line-height: 1.45; color: var(--g2-ink); }
.svc-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .svc-list { grid-template-columns: 1fr 1fr; } }
.svc-list > li {
   position: relative;
   padding: 20px 20px 20px 24px;
   background: var(--g2-surface);
   border-radius: var(--g2-radius);
   box-shadow: var(--g2-shadow-card);
   transition: transform var(--g2-transition), box-shadow var(--g2-transition);
}
.svc-list > li::before {
   content: "";
   position: absolute;
   top: 16px; bottom: 16px; left: 0;
   width: 4px;
   border-radius: 0 4px 4px 0;
   background: var(--g2-primary);
}
.svc-list > li:hover,
.svc-list > li:focus-within {
   transform: translateY(-3px);
   box-shadow: var(--g2-shadow-card-hover);
}
.svc-list strong { display: block; font-size: 18px; line-height: 1.3; color: var(--g2-ink); }
.svc-list span { display: block; margin-top: 4px; line-height: 1.45; color: var(--g2-ink-soft); }

/* Sección del asistente con IA */
#bot h2 { margin-bottom: 14px; }
#bot h2 .bot-h2-sub { font-weight: 400; }
#bot .big { max-width: 720px; margin-left: auto; margin-right: auto; }
#bot .bot-lead {
   display: inline-block;
   margin-top: 6px;
   padding: 12px 26px;
   border-radius: 6px;
   background: #516ca9;
   color: #fff;
}
.bot-hook {
   margin: 22px auto 0;
   font-size: 26px;
   font-weight: 700;
   line-height: 1.25;
   color: #516ca9;
}
.bot-cols { margin-top: 30px; }
/* .bot-subtitle ahora es <h3> (antes <h5>, rompía la jerarquía de encabezados);
   se fija el tamaño visual original para no cambiar el diseño */
.bot-subtitle { margin-bottom: 18px; font-size: 24px; font-weight: 700; line-height: 1.35; }
.list-bot { font-weight: 400; font-size: 17px; }
.list-bot strong { font-weight: 700; }
.bot-trust {
   margin-top: 22px;
   padding: 12px 16px;
   border-left: 4px solid var(--g2-danger);
   background: #fff;
   font-size: 17px;
   font-weight: 700;
   color: var(--g2-ink);
}
.bot-card {
   height: 100%;
   padding: 28px 28px 24px;
   border-radius: var(--g2-radius);
   background: var(--g2-surface);
   box-shadow: var(--g2-shadow-card);
}
.bot-close { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--g2-border); }
/* .bot-close-title ahora es <h3> (antes <h4>, rompía la jerarquía); tamaño visual original */
.bot-close-title { margin-bottom: 10px; font-size: 28.6px; font-weight: 400; line-height: 1.3; }
.bot-close .group-wrap-2 { margin-top: 20px; }
.bot-close .big { font-size: 20px; color: var(--g2-ink); }

/* Contacto: la lista viene pensada para el pie de página, acá va más grande */
#contacto .contact-list { margin-top: 24px; font-size: 18px; }
#contacto .contact-list > li + li { margin-top: 14px; }
@media (max-width: 575px) {
   .bot-hook { font-size: 22px; }
}

/* Campo trampa anti-spam: fuera de pantalla, no display:none (algunos bots lo detectan) */
.form-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* Botones del cierre: separación cuando se apilan en móvil */
#bot .group-wrap-2 .button { margin-top: 10px; }

/* Contacto: "Contacto" y "Escribinos" mismo tamaño y grosor; el segundo en color más claro */
.contact-heading { font-size: 32px; font-weight: 700; line-height: 1.2; }
.contact-heading-light { margin-bottom: 24px; color: #8b98a3; }
@media (min-width: 992px) {
   .contact-heading { font-size: 40px; }
}

/* Menú fijo al hacer scroll: fondo casi opaco y links oscuros (sobre secciones claras los blancos no se leían) */
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-main-inner,
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-clone .rd-navbar-main-inner {
   background-color: rgba(255, 255, 255, .95) !important;
}
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-stuck .rd-nav-link,
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-clone .rd-nav-link {
   color: #31404a;
}
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-stuck .rd-nav-item.active .rd-nav-link,
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-stuck .rd-nav-link:hover,
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-clone .rd-nav-item.active .rd-nav-link,
.rd-navbar-transparent.rd-navbar-static.rd-navbar--is-clone .rd-nav-link:hover {
   color: #516ca9;
   border-bottom-color: #516ca9;
}

/* HERO: degradé de marca sobre la imagen (reemplaza el negro plano) para más contraste
   del lado del texto y una lectura de marca más consistente con el resto del sitio */
.swiper-slider-1 .swiper-slide::before {
   content: "";
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   background: linear-gradient(100deg, rgba(23, 31, 42, .82) 0%, rgba(49, 64, 74, .64) 45%, rgba(81, 108, 169, .38) 100%);
   z-index: 0;
}
.swiper-slider-1 .swiper-slide-caption { position: relative; z-index: 1; }

/* Título de los slides 2 y 3: antes también <h1> (varios <h1> confundían a lectores de
   pantalla y SEO); ahora <p class="hero-title"> con el mismo tamaño visual que el <h1> real */
.hero-title {
   font-size: 41.6px;
   font-weight: 900;
   line-height: 1.2;
}
@media (max-width: 767px) {
   .hero-title { font-size: 32px; line-height: 1.25; }
}

/* HERO: flechas anterior/siguiente */
.swiper-slider-1 .swiper-button-prev,
.swiper-slider-1 .swiper-button-next { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
@media (max-width: 767px) {
   .swiper-slider-1 .swiper-button-prev,
   .swiper-slider-1 .swiper-button-next { font-size: 36px; }
   .swiper-slider-1 .swiper-button-prev { left: 8px; }
   .swiper-slider-1 .swiper-button-next { right: 8px; }
}

/* Formulario: campos con borde suave (se ven bien en monitores muy brillantes) y mensaje a la mitad de alto */
.rd-mailform .form-wrap .form-input { border: 1px solid #d0d7de; transition: border-color var(--g2-transition), box-shadow var(--g2-transition); }
.rd-mailform textarea.form-input { height: 167px; }

/* Formulario: foco de marca más visible que el outline por defecto del navegador */
.rd-mailform .form-wrap .form-input:focus {
   border-color: var(--g2-primary);
   box-shadow: 0 0 0 3px rgba(81, 108, 169, .25);
   outline: none;
}

/* Utilidad: oculta visualmente pero deja disponible para lectores de pantalla */
.visually-hidden {
   position: absolute;
   width: 1px; height: 1px;
   margin: -1px; padding: 0; border: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
}


/* ============================================================
   Página /bot (detalle del Asistente Virtual + precios)
   ============================================================ */

/* Hero estático (sin slider) para subpáginas, mismo tratamiento visual que el hero de inicio */
.page-hero {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 520px;
   padding: 160px 0 64px;
   background-size: cover;
   background-position: center;
   color: #fff;
}
.page-hero::before {
   content: "";
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   background: linear-gradient(100deg, rgba(23, 31, 42, .85) 0%, rgba(49, 64, 74, .68) 45%, rgba(81, 108, 169, .40) 100%);
   z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin-top: 16px; font-size: 41.6px; font-weight: 900; line-height: 1.2; }
@media (max-width: 767px) {
   .page-hero { min-height: 420px; padding: 140px 0 48px; }
   .page-hero h1 { font-size: 32px; line-height: 1.25; }
}
.page-hero .lead { margin-top: 18px; font-weight: 700; }
.page-hero .hero-intro { max-width: 640px; margin-top: 14px; color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.6; }
.page-hero .button-wrap-default { margin-top: 28px; }

/* Caja destacada dentro de una lista (ej. detalle de la API oficial de WhatsApp) */
.info-card {
   margin-top: 20px;
   padding: 24px;
   border-radius: var(--g2-radius);
   background: var(--g2-surface);
   box-shadow: var(--g2-shadow-card);
}
.info-card-title { margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--g2-ink); }
.info-card .list-bot { font-size: 15px; }

/* "Cómo funciona": pasos numerados */
.step-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 24px;
   margin-top: 30px;
}
@media (min-width: 768px) {
   .step-list { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.step-item { text-align: left; }
.step-number {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px; height: 40px;
   margin-bottom: 14px;
   border-radius: 50%;
   background: var(--g2-primary);
   color: #fff;
   font-weight: 700;
   font-size: 18px;
}
.step-item p { margin: 0; color: var(--g2-ink-soft); line-height: 1.5; }

/* Beneficios: reutiliza el look de tarjeta de .svc-list en un grid 2x2 */
.benefit-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
@media (min-width: 768px) { .benefit-list { grid-template-columns: 1fr 1fr; } }
.benefit-list > li {
   position: relative;
   padding: 20px 20px 20px 24px;
   background: var(--g2-surface);
   border-radius: var(--g2-radius);
   box-shadow: var(--g2-shadow-card);
}
.benefit-list > li::before {
   content: "";
   position: absolute;
   top: 16px; bottom: 16px; left: 0;
   width: 4px;
   border-radius: 0 4px 4px 0;
   background: var(--g2-accent-green);
}
.benefit-list > li strong { display: block; font-size: 17px; line-height: 1.4; color: var(--g2-ink); }

/* Tabla de precios */
.pricing-wrap { margin-top: 36px; overflow-x: auto; }
.pricing-table {
   width: 100%;
   min-width: 640px;
   border-collapse: separate;
   border-spacing: 0;
   background: var(--g2-surface);
   border-radius: var(--g2-radius);
   overflow: hidden;
   box-shadow: var(--g2-shadow-card);
}
.pricing-table caption { margin-bottom: 14px; font-size: 15px; color: var(--g2-ink-soft); text-align: left; caption-side: top; }
.pricing-table th, .pricing-table td {
   padding: 14px 18px;
   border-bottom: 1px solid var(--g2-border);
   text-align: center;
   vertical-align: middle;
   font-size: 15px;
   color: var(--g2-ink);
}
.pricing-table thead th {
   background: var(--g2-ink);
   color: #fff;
   font-size: 16px;
}
.pricing-table th[scope="row"] {
   text-align: left;
   font-weight: 700;
   background: #f6f8fa;
}
.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table .cell-check { color: var(--g2-accent-green); font-weight: 700; font-size: 18px; }
.pricing-table .cell-dash { color: var(--g2-muted); }
.pricing-table .price-old { display: block; color: var(--g2-muted); text-decoration: line-through; font-size: 13px; }
.pricing-table .price-new { display: block; font-weight: 700; font-size: 17px; color: var(--g2-primary); }
.pricing-table .price-flat { font-weight: 700; font-size: 16px; }
.launch-badge {
   display: inline-block;
   margin-bottom: 6px;
   padding: 2px 10px;
   border-radius: 20px;
   background: var(--g2-accent-green);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
}
.pricing-note { max-width: 640px; margin: 18px auto 0; text-align: center; color: var(--g2-ink-soft); font-size: 15px; line-height: 1.6; }
.pricing-note strong { color: var(--g2-ink); }

/* Detalle del setup inicial: un bloque por nivel (Web / +WhatsApp / +Instagram y Messenger),
   para que se lea como trabajo real que se va sumando, no como una lista suelta */
.setup-tier {
   margin-top: 24px;
   padding: 28px;
   background: var(--g2-surface);
   border-radius: var(--g2-radius);
   box-shadow: var(--g2-shadow-card);
}
.setup-tier-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px;
}
.setup-tier-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--g2-ink); }
.setup-tier-badge {
   display: inline-block;
   padding: 4px 14px;
   border-radius: 20px;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .4px;
   text-transform: uppercase;
}
.setup-tier-badge--all { background: var(--g2-primary); }
.setup-tier-badge--whatsapp { background: var(--g2-accent-green); }
.setup-tier-badge--full { background: var(--g2-ink); }
.setup-groups { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) {
   .setup-groups { grid-template-columns: repeat(3, 1fr); }
}
.setup-group-title {
   margin-bottom: 10px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .4px;
   text-transform: uppercase;
   color: var(--g2-ink-soft);
}
.setup-tier .list-bot { font-size: 15px; }