/* ============================================
   ESTILOS UNIFICADOS ATENTOBOT
   - Aplica a: index, servicios, precios, contacto
   - Pensado para trabajar con navbar-footer.js
   ============================================ */

/* ==============================
   1. RESET BÁSICO Y TOKENS
   ============================== */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  /* Paleta base AtentoBot */
  --primary-gradient: linear-gradient(135deg,#60A5FA 0%,#38BDF8 50%,#F9A8D4 100%);
  --secondary-gradient: linear-gradient(135deg,#0F0E1E 0%,#1B1F2F 100%);
  --card-gradient: linear-gradient(135deg,rgba(15,14,30,.95) 0%,rgba(27,31,47,.8) 100%);
  --accent-color:#60A5FA;
  --accent-light:#93C5FD;
  --accent-soft:#1E293B;

  --text-primary:#F1F5F9;
  --text-secondary:#94A3B8;
  --text-muted:#64748B;

  --border-color:rgba(148,163,184,.2);
  --border-subtle:rgba(148,163,184,.12);
  --border-strong:rgba(96,165,250,.5);

  --shadow-sm:0 4px 12px rgba(15,23,42,.35);
  --shadow-md:0 16px 40px rgba(15,23,42,.7);
  --shadow-glow:0 0 40px rgba(96,165,250,.35);

  --radius-card:20px;
  --radius-pill:999px;

  --section-padding-y:80px;
  --container-max:1200px;

  --nav-height:84px;
}

html{
  scroll-behavior:smooth;
  overflow-y:auto;
  -webkit-text-size-adjust:100%;
}

/* Cursor personalizado - Mouse pointer */
/* El hotspot (2 2) está ajustado para mejor alineación */
/* URL codificada: espacio=%20, paréntesis izquierdo=%28, paréntesis derecho=%29 */
* {
  cursor: url('../images/Iconos/mouse-pointer%20%281%29.svg') 2 2, auto;
}

/* Mantener cursor pointer en enlaces y botones */
a, button, .gjs-t-button, .gjs-link-box, .nav-links, .plan-cta, .contact-cta, 
input[type="submit"], input[type="button"], [role="button"], [onclick], 
.gjs-t-link, .contact-cta, .plan-cta {
  cursor: url('../images/Iconos/mouse-pointer%20%281%29.svg') 2 2, pointer;
}

/* Cursor text en inputs y textareas */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], 
input[type="number"], input[type="search"], textarea, [contenteditable="true"], 
.form-control, .form-label {
  cursor: url('../images/Iconos/mouse-pointer%20%281%29.svg') 2 2, text;
}

/* Cursor not-allowed en elementos deshabilitados */
button:disabled, input:disabled, a[aria-disabled="true"], .disabled {
  cursor: url('../images/Iconos/mouse-pointer%20%281%29.svg') 2 2, not-allowed;
}

/* Cursor move para elementos arrastrables */
[draggable="true"], .draggable {
  cursor: url('../images/Iconos/mouse-pointer%20%281%29.svg') 2 2, move;
}

body,
.gjs-t-body{
  min-height:100vh;
  min-height: calc(100vh - env(safe-area-inset-bottom));
  background:#030216;
  color:var(--text-secondary);
  font-family:'Lexend Deca',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  position:relative;
  padding-top:var(--nav-height);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Ocultar scroll horizontal por cualquier desborde */
html{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  position:relative;
  max-width:100vw;
}

/* ==============================
   CONTENCIÓN GLOBAL (todos los HTML del sitio)
   Evita que cualquier elemento se salga de la pantalla
   ============================== */
body > *,
body > section,
body > div,
.gjs-section,
.gjs-container,
section[id],
div[id^="i"],
main,
[role="main"],
.container,
.wrapper,
article {
  max-width:100% !important;
  box-sizing:border-box !important;
}
/* Contenedores con padding que no desborden */
.gjs-container,
#inavcnt,
#iherocnt,
#ifeature .gjs-container,
#iproc3cnt-2-2,
#iproc4cnt-2,
#ifootcnt,
#ictacnt {
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
}

/* Escritorio (pantalla completa): más separación de los bordes laterales */
@media (min-width: 1024px) {
  .gjs-container,
  #inavcnt,
  #iherocnt,
  #ifeature .gjs-container,
  #iproc3cnt-2-2,
  #iproc4cnt-2,
  #ifootcnt,
  #ictacnt {
    padding-left: max(72px, env(safe-area-inset-left)) !important;
    padding-right: max(72px, env(safe-area-inset-right)) !important;
  }
}
/* Tablas: scroll horizontal si son anchas */
table {
  max-width:100% !important;
}
table:not([style*="min-width"]) {
  min-width:0;
}
/* Pre y código no desbordan */
pre, code, .code-block {
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-wrap:break-word !important;
}
/* Texto largo que no rompa el layout */
p, h1, h2, h3, h4, h5, h6, li, td, th, label, span {
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
}
/* Imágenes y medios siempre contenidos (no desbordan) */
img, video, iframe, object, svg, canvas {
  max-width:100% !important;
  height:auto !important;
  vertical-align:middle;
}
video, iframe, object {
  height:auto !important;
  max-height:100vh;
}
/* Logos e iconos: no estirar ni agrandar; respetar tamaño (evitar que ocupen 100% del ancho) */
#inavcnt img,
#inavcnt svg,
#ifootcnt img,
#ifootcnt svg,
#ictacnt img,
#ictacnt svg,
#icta img,
#icta svg,
.navbar-brand img,
[class*="icon"] img,
[class*="icon"] svg,
.new-card-icon img,
.new-card-icon svg,
#ilogo img,
#ictasocial svg,
#ilogo svg {
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
}
#inavcnt img,
#inavcnt svg,
.navbar-brand img,
#ilogo img,
#ilogo svg {
  max-width:200px !important;
}
/* Footer / CTA: logo e iconos con tamaño fijo (contenedor real: #ictacnt, #ifoot-bottom) */
#ifootcnt img,
#ifootcnt svg,
#ictacnt img,
#ictacnt svg,
#icta img,
#icta svg,
#ifoot-bottom img,
#ifoot-social img,
#ifoot-social svg {
  max-width:180px !important;
}
#icta #ifoot-bottom img,
#ictacnt #ifoot-bottom img {
  max-width:120px !important;
  max-height:60px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
#ifoot-social img,
#ifoot-social svg,
#ictacnt #ifoot-social img,
#ictacnt #ifoot-social svg {
  max-width:24px !important;
  max-height:24px !important;
}
[class*="icon"] img,
[class*="icon"] svg,
.new-card-icon img,
.new-card-icon svg,
#ictasocial svg {
  max-width:48px !important;
  max-height:48px !important;
}
/* Solo la imagen hero se adapta al ancho en móvil (no logos/iconos) */
@media (max-width: 900px) {
  #iheroimg {
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
  }
}
@media (max-width: 768px) {
  .gjs-container,
  #inavcnt,
  #iherocnt,
  #ifootcnt {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}
@media (max-width: 480px) {
  .gjs-container,
  #inavcnt,
  #iherocnt,
  #ifootcnt,
  #cotizador-container,
  .login-card,
  .signup-card {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}

/* Links y botones */
a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  text-decoration:none;
}
/* Excepción: Los nav-links tienen su propio estilo, no heredar de a */
.navbar-menu-nav a,
.navbar-items-c a,
.nav-links,
#ilink1,#ilink2,#ilink3,#ilink4{
  color:inherit !important;
}
button{
  font:inherit;
}

/* ==============================
   2. CONTENEDORES Y SECCIONES
   ============================== */

.gjs-section{
  padding:var(--section-padding-y) 0;
  position:relative;
  z-index:1;
}
/* Excepción para navbar - debe ser fixed, no relative */
#inav.gjs-section,
section#inav.gjs-section{
  position:fixed !important;
  z-index:9999 !important;
}

.gjs-container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}
@media (max-width: 768px){
  .gjs-container{ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
@media (max-width: 480px){
  .gjs-container{ padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
/* Imágenes y medios responsivos */
img, video, iframe{ max-width: 100%; height: auto; }
table{ width: 100%; border-collapse: collapse; }
@media (max-width: 768px){
  .gjs-section:not(#icta){ padding: 3rem 0; }
  #icta.gjs-section{ padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* Filas / columnas flex genéricas */
.gjs-plg-flex-row{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:stretch;
}

.gjs-plg-flex-column{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1 1 0;
  min-width:0;
}

/* Títulos y textos */
.gjs-t-h1{
  font-size:clamp(2.1rem,3.5vw,2.9rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--text-primary);
}
.gjs-t-h2{
  font-size:1.45rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--text-primary);
}

/* Botón genérico - Color del botón de paco widget */
.gjs-link-box.gjs-t-button,
.gjs-t-button,
#iherobtn1-2,
#iherobtn1-2-2,
#iherobtn1-5-2,
#iherobtn2-2-2,
button[class*="button"],
a[class*="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  border-radius:var(--radius-pill);
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, #4fc3f7, #0288d1) !important;
  color:#fff !important;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:none;
  box-shadow:0 8px 24px rgba(2,136,209,.28);
  transition:all .2s ease-out;
  white-space:nowrap;
}
.gjs-link-box.gjs-t-button:hover,
.gjs-t-button:hover,
#iherobtn1-2:hover,
#iherobtn1-2-2:hover,
#iherobtn1-5-2:hover,
#iherobtn2-2-2:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(2,136,209,.4);
}

/* Botón secundario (bordes) - Mantiene estilo original */
.gjs-link-box.gjs-t-button.secondary,
#iherobtn2{
  background:transparent !important;
  color:var(--accent-light);
  border:1px solid var(--border-strong);
  box-shadow:none;
}
.gjs-link-box.gjs-t-button.secondary:hover,
#iherobtn2:hover{
  background:rgba(15,23,42,.9);
}

/* ==============================
   3. NAVBAR
   ============================== */

/* ======= NAV SIEMPRE VISIBLE (robusto) ======= */
/* Barra fija con blur y transparencia */
#inav,
#inav.gjs-section,
section#inav,
body > section#inav,
body > #inav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:var(--nav-height);
  z-index:9999 !important;
  width:100% !important;
  background:rgba(3,2,22,.28) !important;
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transform:none !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}

/* Fallback si el navegador no soporta backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #inav,
  #inav.gjs-section,
  section#inav,
  body > section#inav,
  body > #inav{
    background:rgba(3,2,22,.7) !important;
  }
}

/* Contenedor navbar - Padding reducido como en backup */
section#inav div#inavcnt.gjs-container,
section#inav .gjs-container#inavcnt,
#inav.gjs-section #inavcnt.gjs-container,
#inav #inavcnt.gjs-container,
#inavcnt.gjs-container,
div#inavcnt.gjs-container{
  max-width:1320px !important;
  padding-top:18px !important;
  padding-bottom:30px !important;
  padding-left:5% !important;
  padding-right:5% !important;
  margin:0 auto !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Contenedor navbar */
.navbar{
  width:100%;
}
.navbar-cnt{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  min-height:auto !important;
}

/* Marca / logo */
.navbar-brand{
  display:flex;
  align-items:center;
  padding:0;
}
#ilogo{
  margin:0;
}
#ilogo img,
.navbar-brand img{
  display:block;
  width:auto;
  max-width:214px;
  height:40px;
  width:auto;
}

/* Navegación */
.navbar-items-c{
  display:flex;
  align-items:center;
  gap:20px;
}

/* Menú desktop */
.navbar-menu-nav{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Links del menú - Rosa mexicano claro */
.navbar-menu-nav .nav-links,
.navbar-items-c .nav-links,
.nav-links,
#ilink1,#ilink2,#ilink3,#ilink4{
  position:relative !important;
  font-size:.9rem !important;
  font-weight:500 !important;
  color:var(--text-secondary) !important;
  padding:8px 4px !important;
  transition:color .18s ease !important;
  text-decoration:none !important;
}
.navbar-menu-nav .nav-links::after,
.navbar-items-c .nav-links::after,
.nav-links::after,
#ilink1::after,#ilink2::after,#ilink3::after,#ilink4::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:0 !important;
  height:2px !important;
  border-radius:999px !important;
  background:#F48FB1 !important;
  transition:width .18s ease !important;
}
.navbar-menu-nav .nav-links:hover,
.navbar-items-c .nav-links:hover,
.nav-links:hover,
#ilink1:hover,#ilink2:hover,#ilink3:hover,#ilink4:hover{
  color:#F48FB1 !important;
  background:transparent !important;
}
.navbar-menu-nav .nav-links:hover::after,
.navbar-items-c .nav-links:hover::after,
.nav-links:hover::after,
#ilink1:hover::after,#ilink2:hover::after,#ilink3:hover::after,#ilink4:hover::after{
  width:100% !important;
}
.navbar-menu-nav .nav-links.active,
.navbar-items-c .nav-links.active,
.nav-links.active,
body.index-page #ilink1,
body.servicios-page #ilink2,
body.precios-page #ilink3,
body.contacto-page #ilink4{
  color:#F48FB1 !important;
}
.navbar-menu-nav .nav-links.active::after,
.navbar-items-c .nav-links.active::after,
.nav-links.active::after,
body.index-page #ilink1::after,
body.servicios-page #ilink2::after,
body.precios-page #ilink3::after,
body.contacto-page #ilink4::after{
  width:100% !important;
  background:#F48FB1 !important;
}

/* CTA en el menú (CloudBot) - Estilo de botón pero funciona como enlace normal */
/* Funciona exactamente igual que los otros nav-links, solo cambia el estilo visual */
.nav-button-cloudbot,
#iherobtn1-2.nav-button-cloudbot,
.nav-links.nav-button-cloudbot,
a#iherobtn1-2.nav-links.nav-button-cloudbot,
body.cloudbot-login-page #iherobtn1-2,
body.cloudbot-login-page a#iherobtn1-2.nav-links.nav-button-cloudbot,
body.cloudbot-dashboard-page #iherobtn1-2,
body.cloudbot-dashboard-page a#iherobtn1-2.nav-links.nav-button-cloudbot,
body.cloudbot-signup-page #iherobtn1-2,
body.cloudbot-signup-page a#iherobtn1-2.nav-links.nav-button-cloudbot{
  /* Estilo de botón - más grande como antes */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:14px 28px !important; /* Aumentado de 12px 24px */
  border-radius:var(--radius-pill) !important;
  border:none !important;
  cursor:pointer !important;
  background:linear-gradient(135deg, #4fc3f7, #0288d1) !important;
  color:#fff !important;
  font-size:1rem !important; /* Aumentado de .95rem */
  font-weight:700 !important;
  letter-spacing:.03em !important;
  text-transform:none !important;
  box-shadow:0 8px 24px rgba(2,136,209,.28) !important;
  transition:all .2s ease-out !important;
  white-space:nowrap !important;
  margin-left:12px !important;
  font-family:'Batangas Bold',serif !important;
  text-decoration:none !important;
  /* Funciona como enlace normal - sin target="_blank" */
}

.nav-button-cloudbot:hover,
#iherobtn1-2.nav-button-cloudbot:hover,
.nav-links.nav-button-cloudbot:hover,
a#iherobtn1-2.nav-links.nav-button-cloudbot:hover,
body.cloudbot-login-page #iherobtn1-2:hover,
body.cloudbot-login-page a#iherobtn1-2.nav-links.nav-button-cloudbot:hover,
body.cloudbot-dashboard-page #iherobtn1-2:hover,
body.cloudbot-dashboard-page a#iherobtn1-2.nav-links.nav-button-cloudbot:hover,
body.cloudbot-signup-page #iherobtn1-2:hover,
body.cloudbot-signup-page a#iherobtn1-2.nav-links.nav-button-cloudbot:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 30px rgba(2,136,209,.4) !important;
  text-decoration:none !important;
  color:#fff !important;
}

/* Estado activo para CloudBot - sin línea rosa */
.nav-button-cloudbot.active,
#iherobtn1-2.nav-button-cloudbot.active,
.nav-links.nav-button-cloudbot.active,
a#iherobtn1-2.nav-links.nav-button-cloudbot.active,
body.cloudbot-page #iherobtn1-2.nav-links.nav-button-cloudbot,
body.cloudbot-login-page #iherobtn1-2.nav-links.nav-button-cloudbot.active,
body.cloudbot-dashboard-page #iherobtn1-2.nav-links.nav-button-cloudbot.active,
body.cloudbot-signup-page #iherobtn1-2.nav-links.nav-button-cloudbot.active{
  background:linear-gradient(135deg, #60A5FA, #38BDF8) !important;
  box-shadow:0 12px 30px rgba(96,165,250,.4) !important;
  color:#fff !important;
  /* Asegurar que NO tenga la línea rosa del estado active */
}

/* Remover completamente el subrayado (::after) que tienen los nav-links normales */
.nav-button-cloudbot::after,
#iherobtn1-2.nav-button-cloudbot::after,
.nav-links.nav-button-cloudbot::after,
a#iherobtn1-2.nav-links.nav-button-cloudbot::after,
.nav-button-cloudbot.active::after,
#iherobtn1-2.nav-button-cloudbot.active::after,
.nav-links.nav-button-cloudbot.active::after,
a#iherobtn1-2.nav-links.nav-button-cloudbot.active::after,
body.cloudbot-page #iherobtn1-2.nav-links.nav-button-cloudbot::after,
body.cloudbot-login-page #iherobtn1-2.nav-links.nav-button-cloudbot::after,
body.cloudbot-dashboard-page #iherobtn1-2.nav-links.nav-button-cloudbot::after,
body.cloudbot-signup-page #iherobtn1-2.nav-links.nav-button-cloudbot::after{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
}

/* Burger móvil */
.navbar-menu-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.navbar-burger-line{
  width:24px;
  height:3px;
  border-radius:2px;
  background:#E5E7EB;
  transition:all 0.3s ease;
  display:block;
}
.navbar-burger{
  gap:6px !important;
  padding:8px;
  border-radius:8px;
  transition:background 0.2s ease;
}
.navbar-burger:hover{
  background:rgba(255,255,255,0.05);
}
.navbar-burger[aria-expanded="true"] .navbar-burger-line:nth-child(1){
  transform:rotate(45deg) translate(6px, 6px);
}
.navbar-burger[aria-expanded="true"] .navbar-burger-line:nth-child(2){
  opacity:0;
}
.navbar-burger[aria-expanded="true"] .navbar-burger-line:nth-child(3){
  transform:rotate(-45deg) translate(6px, -6px);
}

/* ==============================
   4. HERO GENÉRICO (#ihero)
   ============================== */

#index-page #ihero,
.servicios-page #ihero,
.contacto-page #ihero,
.gjs-t-body #ihero{
  background:var(--secondary-gradient);
}

#index-page #ihero,
.servicios-page #ihero,
.contacto-page #ihero{
  padding:110px 0 90px;
}

#iherocnt{
  max-width:var(--container-max);
}

#iherorow{
  align-items:center;
}

#iherocol1{
  flex:1.1 1 0;
  min-width:0;
}
#iherocol2{
  flex:1 1 0;
  min-width:260px;
  display:flex;
  justify-content:flex-end;
}

#iherotitle{
  margin-bottom:18px;
}
#iux4p{
  display:inline-block;
  color:var(--accent-light);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:12px;
}

#iherotext{
  display:block;
  font-size:1rem;
  line-height:1.75;
  color:var(--text-secondary);
  max-width:520px;
}

#iheroimg{
  max-width:420px;
  width:100%;
  border-radius:26px;
  box-shadow:var(--shadow-md);
  object-fit:cover;
}

/* Botones del hero */
#itvo1f{
  margin-top:24px;
}
#ia87z1{
  flex-direction:row;
  flex-wrap:wrap;
  gap:12px;
}
#iherobtn2{
  background:transparent;
  border:1px solid rgba(148,163,184,.5);
  color:var(--text-primary);
  box-shadow:none;
}
#iherobtn2:hover{
  background:rgba(15,23,42,.9);
}

/* ==============================
   5. SECCIÓN "QUÉ HACEMOS" (#ifeature)
   ============================== */

#ifeature{
  background:radial-gradient(circle at top,#111827,#020617 60%);
}

#ifeature .gjs-container{
  max-width:var(--container-max);
}

/* Intro */
#iftintro{
  margin-bottom:32px;
}
#iftcol{
  max-width:880px;
}

#iftlabel{
  font-size:.8rem;
  font-weight:700;
  color:var(--accent-light);
  letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-block !important;
  padding:.4rem .7rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.85);
  margin-bottom:12px;
  width:auto !important;
  max-width:none !important;
  min-width:auto !important;
  white-space:nowrap;
  box-sizing:border-box;
  flex:0 0 auto !important;
  flex-basis:auto !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  align-self:flex-start !important;
}

#ifttitle{
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
#iftintro-text{
  font-size:1rem;
  color:var(--text-secondary);
  max-width:720px;
  margin-top:10px;
}

/* GRID de tarjetas */
#iftcards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}

/* Soluciones (#ifeature): punto intermedio — en escritorio 4 columnas (2 filas: 4 + 3 tarjetas) */
@media (min-width: 768px) {
  .servicios-page #ifeature #iftcards,
  body.servicios-page #ifeature #iftcards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
  }
}
@media (min-width: 1024px) {
  .servicios-page #ifeature #iftcards,
  body.servicios-page #ifeature #iftcards {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* Paquetes y soluciones (#paquetes): siempre 3 columnas centradas en la página */
#paquetes #iftcards {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  #paquetes #iftcards {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* Tarjetas genéricas (soluciones / paquetes) */
#ifeature #iftcards .gjs-plg-flex-column,
#paquetes #iftcards .gjs-plg-flex-column,
#ift1,#ift2,#ift3,#ift4,#ift5,#ift6,#ift7{
  background:var(--card-gradient);
  border-radius:var(--radius-card);
  border:1px solid var(--border-subtle);
  padding:22px 22px 20px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  align-self:stretch;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
/* Barrita animada en hover */
#ift1::before,#ift2::before,#ift3::before,#ift4::before,#ift5::before,#ift6::before,#ift7::before,
#ipkg1::before,#ipkg2::before,#ipkg3::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:var(--primary-gradient);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
  z-index:1;
}
#ift1:hover::before,#ift2:hover::before,#ift3:hover::before,#ift4:hover::before,#ift5:hover::before,#ift6:hover::before,#ift7:hover::before,
#ipkg1:hover::before,#ipkg2:hover::before,#ipkg3:hover::before{
  transform:scaleX(1);
}
#ifeature #iftcards .gjs-plg-flex-column:hover,
#paquetes #iftcards .gjs-plg-flex-column:hover,
#ift1:hover,#ift2:hover,#ift3:hover,#ift4:hover,#ift5:hover,#ift6:hover,#ift7:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  background:linear-gradient(135deg, rgba(15,14,30,1) 0%, rgba(27,31,47,.9) 100%);
  box-shadow:var(--shadow-md),var(--shadow-glow);
}

/* Iconito circular arriba - Con animación mejorada */
.new-card-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:rgba(96,165,250,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  margin-bottom:1.2rem;
  filter:drop-shadow(0 4px 12px rgba(96,165,250,.4));
  transition:all .28s ease;
}
.new-card-icon img,
.new-card-icon svg{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Animación de iconos en hover - Escala y rotación */
#ift1:hover .new-card-icon,
#ift2:hover .new-card-icon,
#ift3:hover .new-card-icon,
#ift4:hover .new-card-icon,
#ift5:hover .new-card-icon,
#ift6:hover .new-card-icon,
#ift7:hover .new-card-icon,
#ipkg1:hover .new-card-icon,
#ipkg2:hover .new-card-icon,
#ipkg3:hover .new-card-icon{
  transform:scale(1.12) rotate(4deg);
  background:rgba(96,165,250,.2);
  filter:drop-shadow(0 8px 16px rgba(96,165,250,.6));
}

/* Títulos y texto de tarjetas */
#ift1title,#ift2title,#ift3title,#ift4title,#ift5title,#ift6title,#ift7title-2,
#ipkg1title,#ipkg2title,#ipkg3title{
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-primary);
  margin:6px 0 8px;
}
#ift1text,#ift2text,#ift3text,#ift4text,#ift5text,#ift6text,#ift7text-2,
#ipkg1text,#ipkg2text,#ipkg3text{
  font-size:.98rem;
  color:var(--text-secondary);
  line-height:1.7;
}

/* Lista de bullets de features */
.feature-list{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
}
.feature-item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin:0 0 .8rem 0;
  padding:.55rem 0;
  border-radius:8px;
  transition:all .25s ease;
}
.feature-item:hover{
  transform:translateX(6px);
  background:rgba(96,165,250,.05);
  padding-left:.4rem;
}
.feature-item img{
  width:24px;
  height:24px;
  margin-top:2px;
  flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(96,165,250,.4));
}
.feature-item span{
  color:#E2E8F0;
  font-size:1rem;
  line-height:1.65;
  display:block;
}

/* Imágenes de cabecera en Servicios - Ocupan todo el ancho del contenedor (full-bleed) */
.servicios-page #ifeature #iftcards .gjs-plg-flex-column > img:first-child,
#ift1 > img:first-child,
#ift2 > img:first-child,
#ift3 > img:first-child,
#ift4 > img:first-child,
#ift5 > img:first-child,
#ift6 > img:first-child,
#ift7 > img:first-child{
  width:calc(100% + 44px) !important;
  max-width:none !important;
  height:180px !important;
  object-fit:cover;
  border-radius:12px 12px 0 0;
  margin:-22px -22px 14px -22px !important;
  display:block;
  position:relative;
  z-index:0;
  box-sizing:content-box;
}

/* ==============================
   6. PROCESO / SOBRE ATENTOBOT (#iprocess-2)
   ============================== */

#iprocess-2{
  background:radial-gradient(circle at top,#0B1020,#020617 55%);
}

#iproccnt-2{
  max-width:var(--container-max);
}

/* Fila principal - Layout horizontal: texto a la izquierda, imagen a la derecha */
#iproc3row-2-2{
  display:flex !important;
  flex-direction:row !important;
  gap:3rem;
  align-items:center;
  margin-bottom:40px;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}

/* Asegurar layout horizontal en index.html */
body.index-page #iproc3row-2-2{
  flex-direction:row !important;
  align-items:flex-start;
  flex-wrap:nowrap !important;
}

/* Asegurar que la clase gjs-plg-flex-row no interfiera en index.html */
body.index-page #iproc3row-2-2.gjs-plg-flex-row{
  flex-direction:row !important;
  display:flex !important;
  flex-wrap:nowrap !important;
}

/* Columna texto */
#iproc3col1-2-2{
  flex:1;
  min-width:0;
  gap:12px;
}
#iproc3title-2-2{
  margin:0;
}
#ifMWv-2{
  color:#D9D6FE;
}
#iproc3text-2-2{
  font-size:1rem;
  color:var(--text-secondary);
  line-height:1.75;
  max-width:none;
}
#iherobtn1-5-2{
  margin-top:12px;
}

/* Columna imagen / timeline */
#iproc3col2-2-2{
  flex:1;
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Columna imagen específica para index.html (cuando hay imagen, no timeline) */
body.index-page #iproc3col2-2-2{
  flex:0 0 auto;
  max-width:430px;
}

/* Imagen en home */
#iproc3img-2-2{
  width:100%;
  max-width:430px;
  max-height:430px;
  aspect-ratio:1;
  border-radius:24px;
  box-shadow:var(--shadow-md);
  object-fit:cover;
  margin:0;
}

/* Asegurar que la imagen no exceda por debajo del botón en index.html - recortada desde abajo */
body.index-page #iproc3img-2-2{
  width:350px !important;
  height:320px !important;
  max-width:350px !important;
  max-height:320px !important;
  min-width:350px !important;
  min-height:320px !important;
  aspect-ratio:1.09 !important;
  object-fit:cover !important;
  object-position:center 30% !important;
}

/* Cards "Modelo híbrido / Plataforma propia" en index */
#iproc4cards-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:14px;
}
#iproc4cards-2 .gjs-plg-flex-column{
  background:var(--card-gradient);
  border-radius:var(--radius-card);
  border:1px solid var(--border-subtle);
  padding:18px 18px 14px;
  gap:10px;
}
#iproc4cards-2 img{
  border-radius:14px;
  margin-top:10px;
}

/* Timeline en Servicios - Diseño de línea del tiempo mejorado */
#iproc4cards-timeline{
  display:flex !important;
  gap:2rem;
  position:relative;
  padding:1rem 0 2rem 0;
  align-items:flex-start;
  overflow:visible;
  width:100%;
  max-width:100%;
  margin-top:0;
  box-sizing:border-box;
}
/* Línea conectora horizontal - Alineada con el centro de los números (no iconos) */
#iproc4cards-timeline::before{
  content:'';
  position:absolute;
  /* Cálculo para alinear con el centro de los números:
     padding-top timeline (16px) + contenedor margin-bottom (16px) + icono (32px) + icono margin-bottom (4px) + gap (8px) + mitad número (25px) = 101px */
  /* Si el valor anterior (117px) estaba alineado con los iconos, para números sumamos: icono completo (32px) + margin (4px) + gap (8px) + mitad número (25px) = 69px más */
  top:101px;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, rgba(96,165,250,0.3) 0%, rgba(96,165,250,0.5) 50%, rgba(96,165,250,0.3) 100%);
  z-index:0;
  transform:translateY(-1.5px);
}
#iproc4cards-timeline .gjs-plg-flex-column,
#iproc4card1-2,#iproc4card2-2,#iproc4card3-2,#iproc4card4-2{
  flex:1;
  position:relative;
  z-index:1;
  text-align:center;
  padding:0;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
#iproc4cards-timeline h3,
#iproc4title1-2,#iproc4title2-2,#iproc4title3-2,#iproc4title4-2{
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-primary);
  margin:.1rem 0 .5rem 0;
  text-align:center;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
#iproc4cards-timeline span,
#iproc4text1-2,#iproc4text2-2,#iproc4text3-2,#iproc4text4-2{
  font-size:1rem;
  color:var(--text-secondary);
  line-height:1.7;
  text-align:center;
  display:block;
  word-wrap:break-word;
  overflow-wrap:break-word;
  max-width:100%;
}

/* Clases del timeline (Soluciones): escritorio centrado, móvil fila con contenido apilado */
.process-timeline__icon-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  margin-bottom:1rem;
}
.process-timeline__num{
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--primary-gradient);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(96,165,250,0.4);
  font-weight:800;
  font-size:1.25rem;
  color:#fff;
  flex-shrink:0;
}
.process-timeline__content{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  text-align:center;
}
.process-timeline__content h3{
  margin:0 0 .25rem 0;
}
.process-timeline__content span{
  margin:0;
}

/* ==============================
   7. TESTIMONIOS (#itestimonial)
   ============================== */

#itestimonial{
  background:#020617;
}

#itmcnt{
  max-width:var(--container-max);
}

#itmintro{
  margin-bottom:32px;
}
#itmtitle{
  max-width:780px;
}

/* Contenedor swiper */
#ibu1pj.swiper{
  padding-bottom:40px;
}

/* Slide */
#ibu1pj .swiper-slide{
  height:auto;
}

/* Card testimonial */
#ibu1pj .swiper-slide > div:first-child{
  background:var(--card-gradient);
  border-radius:var(--radius-card);
  border:1px solid var(--border-subtle);
  padding:20px 20px 16px;
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.7;
  box-shadow:var(--shadow-sm);
}

#ibu1pj .swiper-slide [id^="itm1author"],
#ibu1pj .swiper-slide [id^="itm1author-"]{
  margin-top:12px;
  align-items:center;
  gap:10px;
}
#ibu1pj img[id^="itm1img"]{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit:cover;
}
#ibu1pj strong[id^="itm1name"]{
  color:var(--text-primary);
  font-size:.95rem;
}
#ibu1pj span[id^="itm1role"]{
  color:var(--text-secondary);
  font-size:.85rem;
}

/* Paginación swiper */
#i6duf3.swiper-pagination-bullets{
  position:static;
  margin-top:16px;
}
#i6duf3 .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:#475569;
  opacity:1;
}
#i6duf3 .swiper-pagination-bullet-active{
  width:22px;
  border-radius:999px;
  background:var(--accent-color);
}

/* ==============================
   8. PAQUETES (#paquetes)
   ============================== */

#paquetes{
  background:radial-gradient(circle at top,#020617,#020617 50%,#030712 100%);
}

#paquetes #iftintro{
  margin-bottom:28px;
}
#paquetes #iftintro #iftintro-text{
  font-size:.98rem;
  color:var(--text-secondary);
}

/* Nota de personalización (bloque al final) ya trae estilos inline en HTML,
   solo aseguramos que no desborde */
#paquetes [style*="max-width:800px"]{
  max-width:800px;
}

/* ==============================
   9. PRECIOS (clases genéricas)
   ============================== */

/* Las tarjetas y grids de precios ya están definidas en precios.html.
   Aquí solo unificamos secciones / contenedor para que respete el layout. */

.precios-page .gjs-section{
  padding:70px 0;
}
.precios-page .gjs-container{
  max-width:var(--container-max);
  padding:0 24px;
}

/* ==============================
   10. CONTACTO (formulario)
   ============================== */

.contacto-page #ihero{
  background:radial-gradient(circle at top,#020617,#020617 55%,#020617 100%);
}
.contacto-page #iherotitle{
  margin-bottom:10px;
}
.contacto-page #iherotext{
  max-width:480px;
}

/* Contenedor sección formulario */
.contacto-page #ifeature{
  background:#020617;
}

/* Formulario */
.new-form{
  width:100%;
  background:var(--card-gradient);
  border-radius:var(--radius-card);
  border:1px solid var(--border-subtle);
  padding:24px 24px 20px;
  box-shadow:var(--shadow-sm);
}
.form-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:12px;
}
.form-group{
  flex:1 1 0;
  min-width:180px;
  display:flex;
  flex-direction:column;
}
.form-label{
  font-size:.86rem;
  color:var(--text-secondary);
  margin-bottom:6px;
}
.form-control{
  background-color:#020617;
  border:1px solid #1E293B;
  color:#F1F5F9;
  border-radius:10px;
  padding:10px 12px;
  font-size:.92rem;
}
.form-control:focus{
  outline:none;
  border-color:var(--border-strong);
  box-shadow:0 0 0 1px rgba(96,165,250,.6);
}
.form-control::placeholder{
  color:#64748B;
}
textarea.form-control{
  resize:vertical;
  min-height:140px;
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.new-note{
  font-size:.9rem;
  color:#94A3B8;
}
.new-accent{
  color:var(--accent-light);
}

/* Botón enviar del form hereda estilos de .gjs-t-button en HTML */

/* ==============================
   11. FOOTER / CTA (#icta)
   ============================== */

#icta{
  background:radial-gradient(circle at top,#020617,#020617 60%,#020617 100%);
  border-top:1px solid rgba(15,23,42,.9);
}
/* Evitar que #icta herede padding de .gjs-section (80px); footer siempre compacto */
#icta.gjs-section{
  padding:1.5rem 0;
}
#ictacnt,
.footer-cta-inner{
  max-width:var(--container-max);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.footer-cta-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.75rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border-subtle);
}

/* Fila principal */
#ifootrow{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
}

/* Columna principal CTA */
#ifootcol2{
  flex:1.1 1 260px;
  gap:14px;
}
#ifooth1{
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  font-weight:800;
  color:var(--text-primary);
}
#ipp4e4-2{
  font-size:.98rem;
  color:var(--text-secondary);
  max-width:440px;
}
#iherobtn2-2-2{
  margin-top:6px;
  padding:10px 20px;
}

/* Columna enlaces producto */
#ifootcol2-2{
  flex:0.8 1 220px;
  gap:8px;
}
#ifooth1-2{
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:4px;
}
.gjs-t-link{
  font-size:.9rem;
  color:var(--text-secondary);
}
.gjs-t-link:hover{
  color:var(--accent-light);
}

/* Columna redes / pagos */
#ifootcol4{
  flex:0.9 1 260px;
  gap:12px;
}
#ifooth3{
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
}
#ictasocial .gjs-link-box{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .18s ease;
}
#ictasocial .gjs-link-box:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:0 8px 20px rgba(15,23,42,.7);
}
#ictasocial svg{
  width:19px;
  height:19px;
  color:#E5E7EB;
}

/* Lista de métodos de pago */
#i0duux{
  margin-top:8px;
}
#ikv327{
  gap:4px;
}
#ifootlink7,#ifootlink8,#ifootlink9{
  font-size:.85rem;
  color:var(--text-secondary);
}

/* ----- Footer responsivo (.site-footer) ----- */
.site-footer,
footer#icta.site-footer,
#icta.site-footer{
  background:radial-gradient(circle at top,#020617,#020617 60%,#020617 100%);
  border-top:1px solid rgba(15,23,42,.9);
  padding:clamp(1rem, 4vw, 1.5rem) 0 !important;
  padding-left:max(1rem, env(safe-area-inset-left)) !important;
  padding-right:max(1rem, env(safe-area-inset-right)) !important;
}
.site-footer__inner{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(1rem, 3vw, 1.5rem);
  padding-left:max(1.25rem, env(safe-area-inset-left));
  padding-right:max(1.25rem, env(safe-area-inset-right));
}
.site-footer__nav{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem, 3vw, 1.5rem);
  margin:0;
  padding:0;
}
@media (min-width:400px){
  .site-footer__nav{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (min-width:640px){
  .site-footer__nav{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    gap:clamp(1.5rem, 4vw, 2.5rem);
  }
}
.site-footer__block{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  min-width:0;
}
.site-footer__title{
  font-size:clamp(0.9rem, 2vw, 1rem);
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 0.25rem 0;
}
.site-footer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.site-footer__link{
  display:inline-block;
  font-size:clamp(0.875rem, 1.8vw, 0.95rem);
  color:var(--text-secondary);
  padding:0.35em 0;
  min-height:44px;
  line-height:1.4;
  box-sizing:border-box;
  text-decoration:none;
  transition:color .2s ease;
}
.site-footer__link:hover{
  color:var(--accent-light);
}
.site-footer__bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(0.75rem, 2vw, 1rem);
  padding-top:clamp(0.75rem, 2vw, 1.25rem);
  border-top:1px solid var(--border-subtle);
  text-align:center;
}
@media (min-width:480px){
  .site-footer__bottom{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(1rem, 3vw, 1.5rem);
  }
}
.site-footer__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
}
.site-footer__logo img{
  height:clamp(40px, 10vw, 50px);
  width:auto;
  max-height:60px;
  object-fit:contain;
}
.site-footer__copy{
  color:var(--text-secondary);
  font-size:clamp(0.8rem, 1.8vw, 0.9rem);
  margin:0;
}
.site-footer__social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(0.75rem, 2vw, 1rem);
}
.site-footer__social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  background:rgba(96,165,250,.12);
  border:1px solid var(--border-subtle);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-footer__social-link:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:0 6px 16px rgba(15,23,42,.5);
}
.site-footer__social-link img{
  width:20px;
  height:20px;
  object-fit:contain;
}

/* Footer en móvil: reducir separación entre bloques de enlaces y zona inferior (logo/copyright/redes) */
@media (max-width:768px){
  .site-footer__inner,
  #icta.site-footer .site-footer__inner,
  footer#icta .site-footer__inner{
    gap:0.5rem !important;
  }
  .site-footer__nav{
    gap:0.6rem !important;
  }
  .site-footer__bottom,
  #icta.site-footer .site-footer__bottom,
  footer#icta .site-footer__bottom{
    padding-top:0.5rem !important;
    gap:0.5rem !important;
  }
}
@media (max-width:480px){
  .site-footer__inner,
  #icta.site-footer .site-footer__inner,
  footer#icta .site-footer__inner{
    gap:0.35rem !important;
  }
  .site-footer__nav{
    gap:0.4rem !important;
  }
  .site-footer__bottom,
  #icta.site-footer .site-footer__bottom,
  footer#icta .site-footer__bottom{
    padding-top:0.4rem !important;
    gap:0.4rem !important;
  }
  .site-footer,
  #icta.site-footer,
  footer#icta.site-footer{
    padding:0.6rem 0 !important;
  }
}

/* ==============================
   12. UTILIDADES
   ============================== */

.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.mt-0{margin-top:0;}
.mt-1{margin-top:.25rem;}
.mt-2{margin-top:.5rem;}
.mt-3{margin-top:1rem;}

/* ==============================
   13. RESPONSIVE
   ============================== */

/* <= 1024px */
@media (max-width:1024px){

  .gjs-section{
    padding:64px 0;
  }

  #iherorow{
    gap:32px;
  }

  #iproc3row-2-2{
    flex-direction:column;
    gap:28px;
  }

  /* En index.html, mantener layout horizontal hasta pantallas más pequeñas (768px) */
  body.index-page #iproc3row-2-2{
    flex-direction:row !important;
    align-items:flex-start;
  }

  #iproc3col2-2-2{
    order:-1;
    align-items:flex-start;
  }

  /* En index.html, no cambiar el orden de la imagen */
  body.index-page #iproc3col2-2-2{
    order:0;
  }

  #iproc3img-2-2{
    margin:0 auto;
  }

  #iproc4cards-timeline{
    flex-direction:column;
    gap:2rem;
    padding:2rem 0;
  }
  #iproc4cards-timeline::before{
    top:0;
    /* Alineado con el centro del número en modo tablet: icono (32px) + gap (8px) + mitad número (25px) = 65px desde el inicio del contenedor del icono/número */
    left:65px;
    width:3px;
    height:100%;
    background:linear-gradient(180deg, rgba(96,165,250,0.3) 0%, rgba(96,165,250,0.5) 50%, rgba(96,165,250,0.3) 100%);
    transform:none;
  }
  #iproc4card1-2,#iproc4card2-2,#iproc4card3-2,#iproc4card4-2{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:1rem;
    text-align:left !important;
    padding:0;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    min-width:0;
  }
  .process-timeline__icon-wrap{
    flex-direction:row;
    margin-bottom:0;
    gap:0.5rem;
    align-items:center;
    min-width:72px;
    flex-shrink:0;
  }
  .process-timeline__icon-wrap img{
    width:28px;
    height:28px;
    flex-shrink:0;
  }
  .process-timeline__num{
    width:44px;
    height:44px;
    font-size:1.1rem;
  }
  .process-timeline__content{
    flex:1;
    min-width:0;
    text-align:left !important;
  }
  .process-timeline__content h3,
  #iproc4title1-2,#iproc4title2-2,#iproc4title3-2,#iproc4title4-2{
    text-align:left !important;
    margin:0 0 .35rem 0;
    font-size:1.1rem;
  }
  .process-timeline__content span,
  #iproc4text1-2,#iproc4text2-2,#iproc4text3-2,#iproc4text4-2{
    text-align:left !important;
    font-size:0.95rem;
    line-height:1.55;
  }
}

/* <= 768px */
@media (max-width:768px){

  .gjs-section{
    padding:54px 0;
  }

  .gjs-container{
    padding:0 18px;
  }

  /* NAV: modo móvil - Padding reducido como en backup */
  section#inav div#inavcnt.gjs-container,
  section#inav .gjs-container#inavcnt,
  #inav.gjs-section #inavcnt.gjs-container,
  #inav #inavcnt.gjs-container,
  #inavcnt.gjs-container{
    padding-top:18px !important;
    padding-bottom:18px !important;
    padding-left:4% !important;
    padding-right:4% !important;
  }

  /* NAV: modo móvil */
  .navbar-cnt{
    align-items:flex-start;
  }
  .navbar-menu-toggle{
    display:inline-flex;
  }
  /* Menú móvil desplegable cuando el nav es fixed (ocupa la pantalla) */
  .navbar-items-c{
    position:fixed;
    top:var(--nav-height);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:8px;
    padding:14px;
    background:rgba(5,4,24,.96);
    border-top:1px solid rgba(217,214,254,.16);
    max-height:calc(100vh - var(--nav-height));
    overflow:auto;
    z-index:9999;
    width:100%;
    margin-top:0;
    justify-content:flex-start;
  }
  .navbar-items-c.is-open{
    display:flex;
  }
  .navbar-menu-nav{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    padding:12px 14px;
    border-radius:16px;
    background:transparent;
    border:none;
    box-shadow:none;
    gap:4px;
  }
  #iherobtn1-2,
  #iherobtn1-2.nav-button-cloudbot,
  a#iherobtn1-2.nav-links.nav-button-cloudbot{
    margin-top:6px;
    padding:14px 28px !important; /* Mantener tamaño grande en móvil */
    font-size:1rem !important; /* Mantener tamaño grande en móvil */
  }

  /* HERO */
  #ihero{
    padding:90px 0 70px;
  }
  #iherorow{
    flex-direction:column;
  }
  #iherocol1,#iherocol2{
    flex-basis:100%;
  }
  #iheroimg{
    max-width:360px;
    margin:0 auto;
  }
  #iherotext{
    max-width:none;
  }

  /* Soluciones / paquetes */
  #iftcards{
    grid-template-columns:1fr;
  }

  /* Timeline: móvil más compacto, línea alineada al centro del número */
  #iproc4cards-timeline{
    flex-direction:column;
    gap:1.5rem;
    padding:0.75rem 0;
  }
  #iproc4cards-timeline::before{
    top:0;
    left:50px;
    width:3px;
    height:100%;
    background:linear-gradient(180deg, rgba(96,165,250,0.3) 0%, rgba(96,165,250,0.5) 50%, rgba(96,165,250,0.3) 100%);
    transform:none;
  }
  #iproc4card1-2,#iproc4card2-2,#iproc4card3-2,#iproc4card4-2{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:0.75rem;
    padding:0;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    min-width:0;
  }
  .process-timeline__icon-wrap{
    min-width:56px;
    gap:0.35rem;
  }
  .process-timeline__icon-wrap img{
    width:26px;
    height:26px;
  }
  .process-timeline__num{
    width:38px;
    height:38px;
    font-size:1rem;
  }
  .process-timeline__content h3,
  #iproc4title1-2,#iproc4title2-2,#iproc4title3-2,#iproc4title4-2{
    font-size:1.05rem;
  }
  .process-timeline__content span,
  #iproc4text1-2,#iproc4text2-2,#iproc4text3-2,#iproc4text4-2{
    font-size:0.9rem;
    line-height:1.5;
  }

  /* Testimonios */
  #ibu1pj.swiper{
    padding-inline:0;
  }

/* Pantallas muy estrechas: timeline en columna (icono+número arriba, texto abajo) para mejor lectura */
@media (max-width:380px){
  #iproc4cards-timeline{
    gap:1.25rem;
    padding-left:0;
  }
  #iproc4cards-timeline::before{
    left:28px;
  }
  #iproc4card1-2,#iproc4card2-2,#iproc4card3-2,#iproc4card4-2{
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
    padding-left:56px;
    position:relative;
  }
  .process-timeline__icon-wrap{
    position:absolute;
    left:0;
    top:0;
    flex-direction:row;
    min-width:auto;
    gap:0.4rem;
  }
  .process-timeline__num{
    width:36px;
    height:36px;
    font-size:0.95rem;
  }
  .process-timeline__icon-wrap img{
    width:24px;
    height:24px;
  }
  .process-timeline__content{
    width:100%;
    padding-top:0;
  }
  .process-timeline__content h3,
  #iproc4title1-2,#iproc4title2-2,#iproc4title3-2,#iproc4title4-2{
    font-size:1rem;
  }
  .process-timeline__content span,
  #iproc4text1-2,#iproc4text2-2,#iproc4text3-2,#iproc4text4-2{
    font-size:0.875rem;
  }
}

  /* Contacto form */
  .form-row{
    flex-direction:column;
  }

  /* Footer: muy compacto en tablet/móvil (poca separación entre filas) */
  #icta.footer-cta,
  .footer-cta,
  #icta.gjs-section{
    padding-top:0.75rem !important;
    padding-bottom:0.75rem !important;
  }
  #ifootrow,
  section#icta #ifootrow{
    flex-direction:column;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #ifootcol2-2,
  #ifootcol4{
    gap:4px !important;
  }
  #ictacnt,
  .footer-cta-inner,
  section#icta #ictacnt,
  section#icta .footer-cta-inner{
    gap:6px !important;
  }
  #ifoot-bottom,
  .footer-cta-bottom,
  section#icta #ifoot-bottom,
  section#icta .footer-cta-bottom{
    padding-top:6px !important;
    gap:6px !important;
    margin:0 !important;
  }
}

/* <= 480px */
@media (max-width:480px){

  .gjs-container{
    padding:0 14px;
  }

  #iherotitle{
    font-size:2rem;
  }
  #ifooth1{
    font-size:1.45rem;
  }

  #iherobtn1-2-2,
  #iherobtn2{
    width:100%;
    justify-content:center;
  }

  /* Footer: mínimo espacio en móvil entre las 3 filas (Producto, Legal, logo/copyright/redes) */
  #icta.footer-cta,
  #icta.gjs-section{
    padding-top:0.5rem !important;
    padding-bottom:0.5rem !important;
  }
  #ictacnt,
  .footer-cta-inner,
  section#icta #ictacnt,
  section#icta .footer-cta-inner{
    gap:4px !important;
  }
  #ifootrow,
  section#icta #ifootrow{
    gap:4px !important;
    margin:0 !important;
    padding:0 !important;
  }
  #ifootcol2-2,
  #ifootcol4{
    gap:2px !important;
    margin:0 !important;
  }
  #icta #ifooth1-2,
  #icta #ifooth3{
    margin:0 0 2px 0 !important;
  }
  #ifoot-bottom,
  .footer-cta-bottom,
  section#icta #ifoot-bottom,
  section#icta .footer-cta-bottom{
    padding-top:4px !important;
    gap:4px !important;
    margin:0 !important;
    margin-top:0 !important;
  }
}

/* ==============================
   14. RESPONSIVE GLOBAL (sitio completo)
   ============================== */

/* Base: evitar desbordes y mejorar toques */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img, video, iframe, object{
  max-width:100%;
  height:auto;
}
table{
  width:100%;
  border-collapse:collapse;
}

/* Safe area para dispositivos con notch / barra de estado */
@supports (padding: max(0px)) {
  body{
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  .gjs-container{
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}

/* Tablet: contenedor un poco más de padding */
@media (max-width: 900px){
  .gjs-container{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* Móvil: contenedor reducido y safe-area */
@media (max-width: 768px){
  body{
    padding-top: var(--nav-height);
  }
  .gjs-container{
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* Móvil pequeño */
@media (max-width: 480px){
  .gjs-container{
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .gjs-t-h1{
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .gjs-t-h2{
    font-size: 1.25rem;
  }
}

/* Tablas responsivas: scroll horizontal si hace falta */
.table-responsive,
[class*="table-wrap"],
.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.table-responsive table,
[class*="table-wrap"] table,
.table-scroll table{
  min-width: 400px;
}

/* Formularios: inputs y botones no desborden */
@media (max-width: 768px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="time"],
  input[type="date"],
  select,
  textarea,
  .form-input,
  .form-control{
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ==============================
   15. RESPONSIVE GLOBAL (escritorio + móvil)
   Evita que cualquier elemento se salga de pantalla en todo el sitio
   ============================== */

/* Evitar scroll horizontal en todo el sitio */
html {
  overflow-x: hidden !important;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden !important;
  max-width: 100vw;
  padding-left: max(0px, env(safe-area-inset-left)) !important;
  padding-right: max(0px, env(safe-area-inset-right)) !important;
  padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
}

/* Todos los contenedores y secciones no pueden exceder el ancho de la pantalla */
body > *,
main,
main > *,
[role="main"],
[role="main"] > *,
.gjs-section,
.gjs-container,
.gjs-container .gjs-container,
.gjs-row,
.gjs-plg-flex-row,
.gjs-plg-flex-column,
section,
article,
header,
footer,
aside,
nav,
div[class*="container"],
div[class*="wrapper"],
.dashboard-container,
.container,
.wrapper,
#iherorow,
#iherocnt,
#ifeature .gjs-container,
#iproc3row-2-2,
#iproc4cards-timeline,
#iftcards,
#ifootrow,
#inavcnt {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Flex hijos pueden reducirse en móvil para no desbordar */
.gjs-row,
.gjs-plg-flex-row,
[class*="flex"] {
  min-width: 0;
}
@media (max-width: 768px) {
  .gjs-row,
  .gjs-plg-flex-row,
  #iherorow,
  #iproc3row-2-2,
  #ifootrow {
    flex-wrap: wrap;
  }
}

/* Imágenes y medios nunca desbordan */
img, video, iframe, object, svg, canvas {
  max-width: 100% !important;
  height: auto !important;
  vertical-align: middle;
}
iframe {
  max-width: 100%;
}

/* Logos e iconos: no crecer en escritorio ni móvil (excepción a la regla anterior) */
#inavcnt img, #inavcnt svg, .navbar-brand img, #ilogo img, #ilogo svg {
  max-width: 200px !important;
  width: auto !important;
}
#icta img, #ictacnt img, #icta svg, #ictacnt svg {
  max-width: 180px !important;
  width: auto !important;
}
#icta #ifoot-bottom img, #ictacnt #ifoot-bottom img {
  max-width: 120px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
#ifoot-social img, #ifoot-social svg, #ictacnt #ifoot-social img, #ictacnt #ifoot-social svg {
  max-width: 24px !important;
  max-height: 24px !important;
  width: auto !important;
  height: auto !important;
}

/* Texto largo: que rompa palabra y no desborde (sin forzar max-width para no romper layouts) */
p, li, td, th, span, h1, h2, h3, h4, h5, h6, label, .gjs-t-body,
a:not(.btn):not(.nav-links):not(.plan-cta):not(.contact-cta) {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
pre, code, .gjs-t-code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Enlaces y botones que no fuercen ancho */
a, button, .btn, .gjs-t-button, .nav-links, .plan-cta, .contact-cta {
  max-width: 100%;
}
@media (max-width: 768px) {
  a, button, .btn {
    white-space: normal;
    text-align: center;
  }
}

/* Tablas: no desbordar; si es necesario scroll horizontal, el padre debe tener overflow-x: auto */
table {
  max-width: 100%;
  table-layout: fixed;
}
@media (max-width: 768px) {
  table {
    table-layout: auto;
  }
}

/* Tablas: contenedor con scroll horizontal en móvil */
.table-responsive,
.table-wrap-responsive,
.table-wrap,
[class*="table-wrap"],
.table-scroll,
.table-wrap-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.table-responsive table,
.table-wrap-responsive table,
[class*="table-wrap"] table,
.table-scroll table {
  min-width: 280px;
  width: 100%;
}

/* Formularios: campos y botones al 100% en móvil */
@media (max-width: 768px) {
  .form-group,
  .form-row,
  .calendar-form-grid {
    width: 100%;
  }
  .form-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .calendar-form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Botones y enlaces táctiles (mínimo 44px) */
  .btn,
  button:not([style*="padding"]),
  a.btn,
  .nav-links,
  .plan-cta,
  .contact-cta {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
  }
  select.form-input,
  select.form-control {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .gjs-section:not(#icta) {
    padding: 2.5rem 0;
  }
  /* Footer: sin padding grande (no usa el de .gjs-section) */
  #icta.gjs-section {
    padding: 0.35rem 0 !important;
  }
  .dashboard-header h1,
  .gjs-t-h1 {
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1.2;
  }
  .dashboard-header p,
  .gjs-t-body p {
    font-size: 0.95rem;
  }
  .btn {
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
  }
}

/* Grids que colapsan a una columna */
@media (max-width: 768px) {
  .plans-grid-container,
  [class*="grid-container"],
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Login / Signup: card adaptable */
@media (max-width: 480px) {
  .login-card,
  .signup-card,
  .cloudbot-login-container .login-card,
  .cloudbot-signup-container .signup-card {
    margin: 0 0.75rem;
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
  }
  .cloudbot-login-container,
  .cloudbot-signup-container {
    padding: 1rem 0.75rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* Dashboard: contenido principal con padding seguro */
@media (max-width: 768px) {
  body.cloudbot-dashboard-page .dashboard-container,
  body.cloudbot-dashboard-page main {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}
@media (max-width: 480px) {
  body.cloudbot-dashboard-page .dashboard-container,
  body.cloudbot-dashboard-page main {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* Footer móvil: forzar espaciado mínimo entre Legal/Políticas y logo/copyright */
@media (max-width: 768px) {
  section#icta.footer-cta.gjs-section,
  section#icta.gjs-section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  section#icta #ictacnt.footer-cta-inner,
  section#icta #ictacnt,
  section#icta .footer-cta-inner {
    gap: 6px !important;
  }
  section#icta #ifootrow {
    margin: 0 !important;
  }
  section#icta #ifoot-bottom.footer-cta-bottom,
  section#icta #ifoot-bottom,
  section#icta .footer-cta-bottom {
    padding-top: 6px !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 480px) {
  section#icta.footer-cta.gjs-section,
  section#icta.gjs-section {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  section#icta #ictacnt.footer-cta-inner,
  section#icta #ictacnt,
  section#icta .footer-cta-inner {
    gap: 4px !important;
  }
  section#icta #ifootrow {
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  section#icta #ifoot-bottom.footer-cta-bottom,
  section#icta #ifoot-bottom,
  section#icta .footer-cta-bottom {
    padding-top: 4px !important;
    gap: 4px !important;
    margin-top: 0 !important;
  }
}

/* ==============================
   Personalización del Chat (Webchat) – compacto + vista previa
   ============================== */
.chat-customization-wrap {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.chat-customization-form {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chat-customization-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chat-customization-row label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  min-width: 6rem;
}
.chat-customization-row label i {
  margin-right: 0.35rem;
  opacity: 0.85;
}
.chat-color-picker {
  width: 36px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.chat-color-text {
  max-width: 140px;
  font-family: monospace;
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
}
.chat-opacity-range {
  width: 70px;
  flex-shrink: 0;
}
.chat-opacity-value {
  color: var(--text-secondary);
  font-size: 0.8rem;
  min-width: 32px;
}
.chat-customization-row-multiline {
  flex-direction: column;
  align-items: stretch;
}
.chat-customization-row-multiline textarea {
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  min-height: 52px;
}
.chat-customization-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.chat-customization-actions .btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
}
.chat-customization-msg {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.chat-customization-preview {
  flex-shrink: 0;
  width: 200px;
}
.chat-preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.mini-chat-preview {
  border-radius: 12px;
  overflow: hidden;
  height: 180px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.mini-chat-preview .mini-chat-preview-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 32px;
}
.mini-chat-preview .mini-chat-preview-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft, #1E293B);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-color);
}
.mini-chat-preview .mini-chat-preview-name {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-chat-preview .mini-chat-messages {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.mini-chat-preview .mini-bubble {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.3;
  max-width: 85%;
}
.mini-chat-preview .mini-bubble-bot {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.mini-chat-preview .mini-bubble-user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.mini-chat-preview .mini-chat-input-wrap {
  padding: 6px 8px;
  border-top: 1px solid var(--border-subtle);
}
.mini-chat-preview .mini-chat-input {
  height: 28px;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 11px;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .chat-customization-wrap {
    flex-direction: column;
  }
  .chat-customization-preview {
    width: 100%;
    max-width: 260px;
  }
  .mini-chat-preview {
    height: 160px;
  }
}