/* ====================== */
/* === VARIABLES CSS (Colores, sombras, etc.) === */
/* ====================== */
:root {
  /* Colores base */
  --color-primary: #5900ff; /* Morado principal */
  --color-secondary: #ff40a1; /* Rosa/fucsia secundario */
  --color-accent: #aa00ff; /* Morado usado para acentos y algunos botones */
  --color-accent-dark: #9400d3; /* Morado oscuro para hover */

  /* Gradiente globales */
  --grad-a:#5b9dff;
  --grad-b:#ff00cc;
  --grad-c:#7700ff;

  /* Colores de texto */
  --color-text-primary: #222;
  --color-text-secondary: #555;
  --color-text-light: #777;

  /* Colores de fondo */
  --color-background-body: #ffffff;
  --color-background-card: #fcfcff; /* Blanco muy suave para tarjetas */
  --color-background-footer: #f9f4ff; /* Malva claro para footer */

  /* Sombras */
  --shadow-small: 0 3px 10px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.08);
  --shadow-large: 0 10px 25px rgba(0, 0, 0, 0.12);
  /* Aliases para compatibilidad con secciones indexb */
  --fg: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --card: var(--color-background-card);
  --line: #e6e6f2;

  /* Terminal (Demo/Widget) */
  --terminal-bg-glass: rgba(255, 255, 255, 0.9); /* Cristal blanco esmerilado */
  --terminal-border: rgba(89, 0, 255, 0.1);
  --color-prompt: rgba(89, 0, 255, 0.7); /* Morado suave para el prompt */
  --border-radius-terminal: 15px;

  /* Layout: ancho seguro en vertical y horizontal (notch, barras del sistema) */
  --container-max: 1200px;
  --page-gutter: clamp(12px, 4vw, 24px);
}

/* ====================== */
/* === ESTILOS GENERALES === */
/* ====================== */

html {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Lo que queda bajo el footer (overscroll / cola del documento): mismo acabado que contacto o suscripción, no #0a051a plano */
@supports selector(:has(*)) {
  html:has(body.bg-brand:has(#deep-contacto)){
    background-color: #0a051a;
    background-image: linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)), url('image/tridente.webp');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  html:has(body.page-blog){
    background-color: #0a051a;
    background-image: linear-gradient(rgba(10,5,26,.45), rgba(10,5,26,.45)), url('image/sectores03.webp');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* El padding-top debe ser al menos la altura de tu header para que el contenido no se solape */
  padding-top: 60px; /* header más compacto */
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background-body);
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* Multimedia y SVG: nunca ensanchan el viewport */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Landing: grids no imponen ancho mínimo fantasma */
body.bg-brand .grid,
body.bg-brand .grid.services {
  min-width: 0;
}

.content-wrapper {
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

.container {
  text-align: center;
  animation: fadeIn 1.2s ease;
}

.title {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

.gradient {
  background: linear-gradient(90deg, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin: 0.4rem 0;
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid #ccc;
  font-size: 1rem;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

textarea:focus,
input:focus {
  outline: none;
  border-color: #9a6bff;
  box-shadow: 0 0 5px rgba(154, 107, 255, 0.4);
}

.oculto {
  display: none;
}

/* Accesibilidad: oculto visual, accesible para lectores */
.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==================================================== */
/* ===== Extraído de <style> en index.html (head) ===== */
/* ==================================================== */

/* Header logo (image) */
.main-header .logo{ display:flex; align-items:center; }
.main-header .logo a{ display:inline-flex; align-items:center; line-height:1; }
.main-header .logo img{
  height:36px;
  width:auto;
  display:block;
  vertical-align:middle;
  transition: transform .18s ease, filter .18s ease;
}
@media (max-width: 480px){ .main-header .logo img{ height:32px; } }
.main-header .logo img:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 6px rgba(180, 0, 255, .25));
}

/* Backdrop nav (móvil) */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 45;
}
.nav-backdrop.show{ opacity: 1; pointer-events: auto; }

/* LaraIA bot (hero) */
.hero-bot{
  position:relative;
  flex:0 0 clamp(280px, 24vw, 360px);
  max-width:420px;
  margin-inline:auto;
}
.hero-bot::before{
  content:"";
  position:absolute;
  inset:auto 4% 2% 4%;
  aspect-ratio:1/1;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0) 65%),
    radial-gradient(60% 60% at 50% 60%, rgba(0,220,255,.18), rgba(0,0,0,0) 70%),
    radial-gradient(55% 55% at 55% 40%, rgba(255,0,180,.14), rgba(0,0,0,0) 70%);
  filter: blur(12px);
}
@media (max-width: 900px){ .hero-bot{ order:2; margin-top:24px; } }

.laraia-bot{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  will-change: transform;
  animation: levitate 5s ease-in-out infinite;
}
.laraia-bot .frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  opacity:0;
  pointer-events:none;
  will-change: opacity;
  transition: opacity .4s ease;
  filter:
    drop-shadow(0 12px 26px rgba(0,0,0,.08))
    drop-shadow(0 0 22px rgba(255,0,160,.10))
    drop-shadow(0 0 28px rgba(0,220,255,.10));
}
.laraia-bot .frame:only-child{
  opacity: 1;
  animation: none !important;
}
.laraia-bot .frame{ animation: botFade 12s infinite ease-in-out; }
.laraia-bot .f1{ animation-delay: 0s; }
.laraia-bot .f2{ animation-delay: 2.4s; }
.laraia-bot .f3{ animation-delay: 4.8s; }
.laraia-bot .f4{ animation-delay: 7.2s; }
.laraia-bot .f5{ animation-delay: 9.6s; }

@keyframes botFade{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes levitate{
  0%   { transform: translateY(0) rotate(-0.4deg) scale(1); }
  50%  { transform: translateY(-8px) rotate(0.4deg) scale(1.02); }
  100% { transform: translateY(0) rotate(-0.4deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .laraia-bot{ animation: none; }
  .laraia-bot .frame{ animation: none; opacity: 1; }
}

/* Rendimiento móvil: mantener solo frame neutro, sin animación ni blur */
@media (max-width: 768px){
  /* Ultra-lite hero: elimina decoraciones caras */
  .hero-bot::before{ display:none !important; }
  .laraia-bot{ animation: none; will-change: auto; }
  .laraia-bot .frame{
    animation: none !important;
    transition: none !important;
    will-change: auto;
    filter: none !important;
  }
  .laraia-bot .f1{ opacity: 1 !important; }
  .laraia-bot .f2,
  .laraia-bot .f3,
  .laraia-bot .f4,
  .laraia-bot .f5{ display: none !important; }

  /* Botones hero sin blur/sombras en móvil */
  .hero .cta-buttons .btn-primary-lara,
  .hero .cta-buttons .btn-secondary-lara,
  .hero .cta-buttons button.btn-primary-lara,
  .hero .cta-buttons button.btn-secondary-lara{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 800px){
  .hero__wrap{ gap:24px !important; }
}
.container.hero__wrap{ text-align:left !important; }
.container.hero__wrap > div:first-child,
.container.hero__wrap > .hero__copy{
  flex:1 1 56ch;
  min-width:420px;
}
/* Columna derecha del hero: tarjeta Copiloto + bot, centrados respecto a la columna texto */
.hero__visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(16px, 2.2vw, 24px);
  flex:0 0 clamp(280px, 26vw, 400px);
  max-width:min(440px, 100%);
  min-width:0;
}
@media (min-width: 981px){
  .hero .hero__wrap > .hero__visual{
    align-self:stretch;
    justify-content:center;
    margin-inline:auto;
  }
}
.hero__visual .lara-copilot-hero-wrap{
  width:100%;
  max-width:100%;
}
.hero__visual .hero-bot{
  flex:0 0 auto;
  width:100%;
  max-width:420px;
  margin-inline:auto;
  margin-top:0;
}
.hero-bot{ flex:0 0 320px; }
@media (max-width: 980px){
  .container.hero__wrap{ flex-wrap:wrap !important; justify-content:center; text-align:center !important; }
  .container.hero__wrap > div:first-child,
  .container.hero__wrap > .hero__copy{
    flex:1 1 100%;
    min-width:0;
  }
  .hero__visual{
    flex:1 1 100%;
    max-width:min(400px, 100%);
    margin-top:8px;
  }
  .hero-bot{ flex:0 1 360px; margin-top:20px; }
  .hero__visual .hero-bot{ flex:0 1 auto; margin-top:0; }
}
@media (min-width: 981px){
  .hero__visual .hero-bot{ margin-top:0; }
}
@media (min-width: 1400px){
  .hero-bot{ flex-basis:360px; }
  .hero__visual{ flex-basis:400px; }
}

/* Elevar el widget sin limitar su movimiento */
#laraia-chat-root{ z-index:11000; }


/* ==================================================== */
/* ========= BOTONES (Interfaz de Ingeniería) ========= */
/* ==================================================== */

.cta-buttons{
  display: flex;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* CTAs dentro de cards: centrados respecto a la card */
.card-ctas{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
}

/* Botón Principal (neón fucsia) */
.btn-primary-lara{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  background: rgba(89, 0, 255, 0.10);
  color: #ff40a1; /* base: texto fucsia */
  border: 1px solid #ff40a1;
  border-radius: 50px; /* mismo redondeado que “Contacto” */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 64, 161, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn-primary-lara:hover,
.btn-primary-lara:focus-visible{
  background: #ff40a1;
  color: #fff;
  box-shadow: 0 0 30px rgba(255, 64, 161, 0.6);
  transform: translateY(-2px);
  outline: none;
}

/* Botón Secundario (cristal blanco) */
.btn-secondary-lara{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  background: transparent;
  color: #ff40a1; /* base: texto fucsia */
  border: 1px solid rgba(255, 255, 255, 0.85); /* borde blanco */
  border-radius: 50px; /* mismo redondeado que “Contacto” */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn-secondary-lara:hover,
.btn-secondary-lara:focus-visible{
  border-color: #ff40a1;
  color: #fff;
  background: #ff40a1;
  outline: none;
}

/* Compat: si quedara algún botón antiguo en otras páginas, lo mapeamos a los nuevos */
.btn, .btn-primary, .btn--fill{ 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  background: rgba(89, 0, 255, 0.10);
  color: #ff40a1;
  border: 1px solid #ff40a1;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 64, 161, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn:hover, .btn:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible,
.btn--fill:hover, .btn--fill:focus-visible{
  background: #ff40a1;
  color: #fff;
  box-shadow: 0 0 30px rgba(255, 64, 161, 0.6);
  transform: translateY(-2px);
  outline: none;
}

.btn-secondary, .btn-glass, .btn-outline, .btn--ghost, .btn--glass{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  background: transparent;
  color: #ff40a1;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover, .btn-secondary:focus-visible,
.btn-glass:hover, .btn-glass:focus-visible,
.btn-outline:hover, .btn-outline:focus-visible,
.btn--ghost:hover, .btn--ghost:focus-visible,
.btn--glass:hover, .btn--glass:focus-visible{
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

/* ===================== */
/* === FIN BOTONES ==== */
/* ===================== */
/* ====================== */
/* === RESET === */
/* ====================== */
/* ====================== */
/* === LAYOUT === */
/* ====================== */
/* ====================== */
/* === HEADER === */
/* ====================== */
/* ====================== */
/* === FOOTER === */
/* ====================== */
/* ====================== */
/* === SECCIONES === */
/* ====================== */

/* ====================== */
/* === Bienvenida (index.html o home) === */
/* ====================== */
/* (WPO) Eliminado bloque legacy `dashboard-body`/`dashboard-content` (no usado en index/blog/artículos) */

/* ====================== */
/* === Header General === */
/* ====================== */
.main-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  height: 56px; /* compacto */
  padding: 8px 16px;
  background: transparent; /* sin base */
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 6px 18px rgba(16,12,40,.10);
  border-radius: 0 0 12px 12px;
  box-sizing: border-box;
}

.main-header::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:0 0 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}

.main-header .logo a {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

/* Logo como imagen en el header */
.main-header .logo img{ height:36px; width:auto; display:block; vertical-align:middle; }
@media (max-width:480px){ .main-header .logo img{ height:32px; } }

.main-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.main-nav .user-welcome {
  font-size: 1rem;
  font-weight: 600;
  margin-right: 0.5rem; /* Pequeño espacio extra antes del toggle */
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-nav .nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:1rem;
  position: static; width:auto; background: transparent; box-shadow:none;
  border-radius:0; overflow:visible; max-height:none; opacity:1; visibility:visible;
}

.main-nav .nav-list li {
  text-align: left;
  padding: 0.3rem 0.6rem; /* más compacto */
}

.main-nav .nav-list li a {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-weight: bold;
  display: block;
  transition: -webkit-text-fill-color 0.3s ease;
}

.main-nav .nav-list li a:hover {
  -webkit-text-fill-color: var(--color-text-primary);
  background: none;
}
/* Dropdown toggle con estilo de enlace (gradiente) */
.main-nav .nav-dropdown .dropdown-toggle{
  background: none; border: 0; padding: .25rem .5rem; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
/* Uso de gradiente como los anchors del menú */
.main-nav .nav-dropdown .dropdown-toggle.grad-text{
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: bold;
}
/* Hover consistente con los anchors */
.main-nav .nav-dropdown .dropdown-toggle.grad-text:hover{
  -webkit-text-fill-color: var(--color-text-primary);
  background: none !important; color: var(--color-text-primary);
}
/* Accesibilidad */
.main-nav .nav-dropdown .dropdown-toggle:focus{ outline:2px solid var(--color-secondary); outline-offset:2px; }
/* Ocultar caret si existe */
.main-nav .nav-dropdown .caret{ display:none !important; }
.main-nav .nav-list li a{ padding:.25rem .5rem; border-radius:10px; }

/* Menú móvil: botón tipo “desplegable” (sin icono hamburguesa) */
.menu-toggle{
  display:none; cursor:pointer; z-index:1100; line-height:1; padding:6px 12px;
  background: rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.5);
  border-radius: 999px; color: var(--color-text-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0; /* ocultamos el carácter ☰ */
}
.menu-toggle::before{ content:"Menú"; font-size:14px; font-weight:700; }
@media (max-width: 960px){
  .menu-toggle{ display:block; }

  /* Evitar scroll de fondo cuando el menú está abierto y crear backdrop sin HTML extra */
  body.menu-open{ overflow:hidden; }
  body.menu-open::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    z-index: 999; /* justo por debajo del panel */
  }

  /* Contenedor nav */
  .main-nav{ position: static; }

  /* Cajón lateral: overlay a pantalla completa, siempre entra hacia dentro */
  .main-nav .nav-list{
    list-style:none; margin:0;
    position:fixed; top:0; left:0; right:0; /* ocupa TODO el ancho del dispositivo */
    height:100vh; width:100vw; max-width:none;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-left:1px solid #e6e6f2;
    border-radius: 0;
    box-shadow: none;
    padding: 80px 16px 16px; /* espacio para el header + contenido */
    z-index: 1001;

    display:block !important;
    transform: translate3d(100%,0,0) !important; /* oculto fuera, a la derecha */
    transition: transform .28s ease;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .main-nav .nav-list.active{
    transform: translate3d(0,0,0) !important; /* entra completamente dentro */
  }

  /* Items verticales, enlaces en bloque */
  .main-nav .nav-list > li{ padding:.6rem .6rem; }
  .main-nav .nav-list a{ display:block; padding:12px 8px; }
}

/* ====================== */
/* === PÁGINA: index.html (antigua bienvenida) === */
/* ====================== */
.index-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--color-background-body);
  text-align: center;
  animation: fadeIn 1s ease;
}

.avatar-wrapper {
  margin-bottom: 2.5rem;
  animation: fadeIn 1s ease 0.5s both;
  display: flex;
  justify-content: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(154, 107, 255, 0.5);
  animation: gradientGlow 4s ease-in-out infinite;
  border: none;
}

/* ========================= */
/* === login.html y register.html === */
/* ========================= */
/* (WPO) Eliminado bloque legacy login/register */

/* ====================== */
/* === dashboard.html === */
/* ====================== */
/* (WPO) Eliminado bloque legacy dashboard.html */

/* ========================== */
/* === documentales.html === */
/* ========================== */
/* (WPO) Eliminado bloque legacy documentales.html */

/* ====================== */
/* === que_es_laraia.html === */
/* ====================== */
.que-es-section {
  background-color: var(--color-background-body);
  padding: 60px 20px 40px;
  text-align: center;
  margin-top: 2rem; /* Añadido margen superior para compensar el header fijo */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.que-es-section h2 {
  font-size: 2.5rem;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  text-align: center;
}

.que-es-section p {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.text-gradient {
  background: linear-gradient(to right, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ventajas-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.ventaja-box {
  background-color: var(--color-background-body);
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: var(--shadow-small);
  text-align: center;
  transition: transform 0.2s ease;
}

.ventaja-box:hover {
  transform: translateY(-5px);
}

.ventaja-box .icono {
  font-size: 2.2rem;
  margin-bottom: 15px;
  display: block;
}

.ventaja-box h3 {
  color: var(--color-accent); /* Usando la variable de color de acento */
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.ventaja-box p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ====================== */
/* === panel-usuario.html === */
/* ====================== */

.user-panel-section {
  background-color: var(--color-background-body);
  padding: 60px 20px 40px;
  text-align: center;
  margin-top: 2rem; /* Añadido margen superior para compensar el header fijo */
  max-width: 1200px; /* Limita el ancho del contenido */
  margin-left: auto;
  margin-right: auto; /* Centra la sección */
  box-sizing: border-box;
}

.user-panel-section h2 {
  font-size: 2.3rem;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.user-panel-section p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Estilos para el grid principal del panel */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  justify-content: center; /* Centra las cajas si no llenan todo el ancho */
}

/* Estilos para cada caja del panel */
.panel-box {
  background-color: var(--color-background-card);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-small);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Empuja el contenedor de acciones al final */
  align-items: flex-start;
  min-height: 250px; /* Altura mínima para que los botones se alineen */
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.panel-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.panel-box h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  color: var(--color-text-primary);
  font-size: 1.6rem;
}

/* Usamos p.descipcion para la descripción específica de las cajas */
.panel-box p.descripcion, .panel-box p.descipcion {
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Permite que la descripción ocupe el espacio disponible */
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Contenedor para los botones dentro de cada caja */
.box-actions {
  margin-top: auto; /* Empuja este contenedor al final del flexbox del panel-box */
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: 1rem;
}

.plan-label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.9rem;
  background-color: #e0cfff; /* Color específico para el label del plan */
  color: #6a00b4;
  padding: 4px 10px;
  border-radius: 6px;
}

.progress-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 1em 0;
}

.progress-info p {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.progress-circle {
  width: 80px;
  height: 80px; /* Altura explícita para el contenedor SVG */
  margin: 0 auto;
}

.progress-circle svg {
  width: 100%;
  height: 100%; /* SVG ocupa todo el contenedor */
}

.progress-circle .bg {
  fill: none;
  stroke: #eee;
  stroke-width: 2.8;
}

.progress-circle .progress {
  fill: none;
  stroke: var(--color-accent); /* Usar la variable de acento */
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.progress-circle .percentage {
  font-size: 0.35rem; /* Ajustar según el tamaño de tu SVG */
  fill: var(--color-accent);
  text-anchor: middle;
  dominant-baseline: middle;
}

.titulo-panel {
  display: inline-block;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

.titulo-panel::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), #e040fb);
}

/* === Secciones de "ajustes" y "guardar-btn" - ELIMINADAS como acordamos === */
/* Asegúrate de que no haya restos de estas reglas si ya no las usas en el HTML. */

/* ====================== */
/* === Footer General === */
/* ====================== */
footer.footer {
  background: var(--color-background-footer);
  border-top: 4px solid; border-image: linear-gradient(to right, #d300c5, #7700ff) 1;
  padding: 1rem 1rem .5rem;
  font-size: 14px; color: var(--color-text-primary);
  flex-shrink: 0; margin-top: auto; box-sizing: border-box;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.footer-left {
  text-align: left;
}

.footer-left strong {
  font-size: 1.2rem;
  color: var(--color-primary);
}

.footer-left .version {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex: 1;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  max-width: 140px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Agregado para asegurar que los iconos de Font Awesome se muestren correctamente */
.footer-social a i {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

.footer-social a {
  color: var(--color-primary);
  font-size: 1.4rem;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
  opacity: 0.8;
  color: var(--color-secondary);
}

/* ====================== */
/* === Animaciones suaves === */
/* ====================== */
.panel-box {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease forwards;
}

/* Se mantiene el delay para la aparición secuencial de las cajas */
.panel-box:nth-child(1) {
  animation-delay: 0.0s;
} /* Empieza inmediatamente */
.panel-box:nth-child(2) {
  animation-delay: 0.1s;
}
.panel-box:nth-child(3) {
  animation-delay: 0.2s;
}
.panel-box:nth-child(4) {
  animation-delay: 0.3s;
}
/* Si añades más cajas, sigue con el patrón nth-child(5), etc. */

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Si tienes gradientGlow para .avatar, asegúrate de que esté aquí */
/* @keyframes gradientGlow {
  0% { box-shadow: 0 0 20px rgba(154, 107, 255, 0.5); }
  50% { box-shadow: 0 0 30px rgba(234, 78, 207, 0.7); }
  100% { box-shadow: 0 0 20px rgba(154, 107, 255, 0.5); }
} */

/* ====================== */
/* === PÁGINA: FAQs (faqs.html) === */
/* ====================== */

/* Contenedor principal de FAQs */
.faqs-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 30px auto;
  background-color: var(--color-background-body);
  border-radius: 8px;
  box-shadow: var(--shadow-small);
  text-align: center;
  box-sizing: border-box;
}

.faqs-section h2 {
  font-size: 2.5em;
  color: var(--color-text-primary);
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
}

.faqs-section h2 .gradient {
  background: linear-gradient(90deg, #6a0dad 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* (Eliminado) FAQ legacy no usada en index.html */

/* ============================================== */
/* === ESTILOS PARA LA NUEVA LANDING PAGE (index.html) === */
/* ============================================== */

/* Body de la landing page */
body.landing-dashboard-body {
  margin: 0;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--color-background-body);
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

/* Ocultar header y footer en la landing */
body.landing-dashboard-body .main-header,
body.landing-dashboard-body footer.footer {
  display: none !important;
}

/* Sección principal de "héroe" (título, subtítulo, botón) */

.landing-title-text {
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.landing-tagline-text {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  margin: 0.5rem 0;
  line-height: 1.4;
  max-width: 500px;
}

/* Área del botón */
.landing-button-area {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* === SECCIÓN DE CARACTERÍSTICAS (ETIQUETAS) === */
.landing-features-section-dash {
  padding: 40px 20px 0;
  max-width: 1000px;
  margin: 0 auto 0;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.features-title-dash {
  font-size: 2.2rem;
  color: var(--color-text-primary);
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
}

.features-grid-dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-content: center;
}

.feature-card-dash {
  background-color: var(--color-background-body);
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: var(--shadow-medium);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card-dash:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-large);
}

.feature-card-dash .landing-icon-dash {
  font-size: 2.8rem;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-card-dash h3 {
  font-size: 1.4rem;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.feature-card-dash p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Media Queries para la landing page */
@media (max-width: 768px) {
  body.landing-dashboard-body {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .landing-hero-section {
    padding: 1.5rem 1rem;
    gap: 0.6rem;
    margin-bottom: 0;
  }
  .landing-button-area {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .landing-title-text {
    font-size: 2.5rem;
  }
  .landing-tagline-text {
    font-size: 1.1rem;
  }
  .btn.landing-access-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
  .landing-features-section-dash {
    padding: 30px 15px 0;
    margin: 0 auto 0;
  }
  .features-title-dash {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  .features-grid-dash {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .landing-title-text {
    font-size: 2rem;
  }
  .landing-tagline-text {
    font-size: 1rem;
  }
  .features-title-dash {
    font-size: 1.8rem;
  }
  .feature-card-dash {
    padding: 20px 15px;
  }
  .feature-card-dash .landing-icon-dash {
    font-size: 2.4rem;
  }
  .feature-card-dash h3 {
    font-size: 1.2rem;
  }
  .feature-card-dash p {
    font-size: 0.9rem;
  }
}
/* ============================================== */
/* === ESTILOS PARA MI PERFIL (mi-perfil.html) === */
/* ============================================== */
/* EJEMPLO DE ESTILO PARA TOGGLE SWITCH (Ajustar a tu gusto) */
.notification-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Para separar el label del toggle */
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

.notification-toggle label {
  flex-grow: 1; /* Permite que el label ocupe espacio */
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-right: 1rem;
}

.notification-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.notification-toggle .toggle-slider {
  position: relative;
  width: 48px; /* Ancho del switch */
  height: 28px; /* Alto del switch */
  background-color: #ccc;
  border-radius: 28px; /* Para forma redonda */
  cursor: pointer;
  transition: background-color 0.3s;
}

.notification-toggle .toggle-slider:before {
  content: "";
  position: absolute;
  height: 20px; /* Alto del "círculo" */
  width: 20px; /* Ancho del "círculo" */
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.notification-toggle input[type="checkbox"]:checked + .toggle-slider {
  background-color: var(--color-accent); /* Color cuando está activado */
}

.notification-toggle input[type="checkbox"]:checked + .toggle-slider:before {
  transform: translateX(20px); /* Mueve el círculo a la derecha */
}

/* ====================== */
/* === Media Queries para responsividad GENERAL === */
/* ====================== */
@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }
  .card {
    flex: 0 0 100%; /* Ajuste para que las tarjetas ocupen todo el ancho en móvil si es necesario */
  }
  .documental-wrapper, .dashboard-wrapper, .que-es-section, .user-panel-section {
    padding: 1rem;
    margin-top: 1rem; /* Ajuste para móviles si es necesario */
  }
  .panel-grid {
    grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    gap: 1.5rem;
  }
  .panel-box {
    min-height: auto; /* Deshacer la altura mínima para móviles si las cajas se hacen muy largas */
  }
  /* (Eliminado) FAQs legacy no usadas en index.html */
  /* Footer para móviles */
  footer .footer-container {
    flex-direction: column; /* Apilar elementos en columna */
    gap: 1rem;
    text-align: center;
  }
  .footer-links, .footer-social {
    justify-content: center; /* Centrar enlaces y iconos */
    width: 100%;
  }
  .footer-left {
    text-align: center; /* Centrar el texto LaraIA y versión */
  }
}

@media (max-width: 480px) {
  .faqs-section h2 {
    font-size: 1.8em;
  }
}

/* ====================== */
/* === Keyframes (animaciones) === */
/* ====================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Si tienes gradientGlow para .avatar, asegúrate de que esté aquí */
/* @keyframes gradientGlow {
  0% { box-shadow: 0 0 20px rgba(154, 107, 255, 0.5); }
  50% { box-shadow: 0 0 30px rgba(234, 78, 207, 0.7); }
  100% { box-shadow: 0 0 20px rgba(154, 107, 255, 0.5); }
} */

/* ============================================== */
/* === ESTILOS PARA MI PERFIL (mi-perfil.html) === */
/* ============================================== */
/* Contenedor principal de la página Mi Perfil */
.mi-perfil-wrapper {
  padding: 2rem; /* Espacio interno alrededor del contenido */
  background: var(--color-background-body); /* Fondo blanco */
  text-align: center;
  max-width: 800px; /* Ancho máximo para el contenido */
  margin: 0 auto; /* Centrar en la página */
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  margin-top: 2rem; /* Añadido margen superior para compensar el header fijo */
}

/* Encabezado del perfil */
.perfil-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.perfil-header p {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

/* Contenedor principal del formulario */
.perfil-form-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

/* Estilo para cada grupo de entrada (label + input) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.form-group input {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 5px rgba(170, 0, 255, 0.4);
}

/* Botón de guardar cambios */
.save-changes-btn {
  background-color: var(--color-accent);
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  align-self: center; /* Centrar el botón en el contenedor flex */
  width: 100%;
  max-width: 250px;
  margin-top: 1rem;
}

.save-changes-btn:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-2px);
}

/* ============================================== */
/* === ESTILOS ESPECÍFICOS PARA DEMOS (Final y completo) === */
/* ============================================== */


/* Contenedor del título y subtítulo para asegurar el centrado */
.landing-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra los hijos horizontalmente */
  text-align: center; /* Centra el texto dentro de los hijos */
  gap: 0.8rem;
  max-width: 700px;
  padding: 0 1rem;
  margin: 0 auto; /* Centra el contenedor en la página */
}

.landing-title-text {
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.landing-tagline-text {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  margin: 0.5rem 0;
  line-height: 1.4;
  max-width: 500px;
}

.features-title-dash {
  font-size: 2.2rem;
  color: var(--color-text-primary);
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
  text-align: center; /* Asegura que el título "Pruébalo ahora" esté centrado */
}

/* Estilo para el área de texto con borde degradado */
.demo-textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-top: 1rem;
  box-sizing: border-box;
  resize: vertical;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #ff00cc, #7700ff);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  border-radius: 14px;
  transition: all 0.2s ease-in-out;
}

.demo-textarea:focus {
  outline: none;
  background-image: linear-gradient(#f5f5f5, #f5f5f5), linear-gradient(90deg, #ff00cc, #7700ff);
}

/* Sección para el resultado de la IA con márgenes */
.resultado-section {
  max-width: 900px; /* Limita el ancho para que no ocupe toda la pantalla */
  margin: 2rem auto 4rem auto; /* Centra el contenedor y añade margen inferior */
  padding: 0 20px; /* Espaciado interno en los lados para móviles */
  box-sizing: border-box;
}

/* Cajón de resultado con borde degradado */
.resultado-box {
  background-color: var(--color-background-card);
  padding: 2rem;
  border-radius: 12px;
  text-align: left;
  line-height: 1.8;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  animation: fadeIn 1s ease;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #ff00cc, #7700ff);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}

.resultado-box p {
  margin: 0;
}

/* Media Queries para la landing page */
@media (max-width: 768px) {
  .landing-hero-section {
    padding: 1.5rem 1rem;
    gap: 0.6rem;
    margin-bottom: 0;
  }
  .landing-title-text {
    font-size: 2.5rem;
  }
  .landing-tagline-text {
    font-size: 1.1rem;
  }
  .features-title-dash {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  .resultado-section {
    padding: 0 15px;
    margin-bottom: 2rem;
  }
}

/* ===== Ideas Exprés: alineado y ritmo vertical ===== */

/* Contenedor consistente */
.content-wrapper .container { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Formulario */
.form.stack-md { display: grid; gap: 16px; }
.input-group { display: grid; gap: 8px; }
.input-group label { order: 0; margin: 0; font-weight: 600; }   /* fuerza el label arriba */
.input-group textarea,
.input-group .input-field,
.input-group select { width: 100%; }

/* Si algún estilo previo invierte el orden, garantizamos textarea debajo del label */
.input-group textarea { order: 1; }

/* Ayudas y mensajes */
.hint { margin: 0; opacity: .8; }

/* Grid para Tono/Idioma que no rompa el ancho */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* Ritmo general */
.documental-wrapper > *:first-child { margin-top: 0; }
.documental-wrapper h1 { margin-bottom: 8px; }
.actions { margin-top: 8px; text-align: center; }

/* Resultados y CTA */
.resultado { margin-top: 24px; padding: 16px; border-radius: 12px; background: rgba(0,0,0,.04); }
.cta-wrap { margin-top: 16px; text-align: center; }

/* Ajuste de labels a la izquierda y campos centrados visualmente */
.input-group label { text-align: left; }

/* ===== Ideas Exprés: landing minimal ===== */

/* Contenedor principal */
.content-wrapper .container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* Subtítulo (más fuerte y claro) */
.landing-tagline-text {
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 720px;
  margin-inline: auto;
}

/* Formulario */
.form.stack-md {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Input principal de idea estilo Google */
input.input-google {
  width: 70vw;
  max-width: 960px;
  min-width: 320px;
  height: 80px;
  padding: 0 1.8rem;
  font-size: 1.5rem;
  border-radius: 48px;
  background: white;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #ff00cc, #7700ff);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
  margin-bottom: 1rem;
}

input.input-google:focus {
  outline: none;
  background-image: linear-gradient(#fafafa, #fafafa), linear-gradient(90deg, #ff00cc, #7700ff);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Email */
input[type="email"] {
  width: 100%;
  max-width: 400px;
  padding: 1rem 1.3rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.8rem;
  background: #fff;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Botón */
.actions {
  margin-top: 1rem;
  text-align: center;
}

/* Resultado */
.resultado {
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 1rem;
  line-height: 1.6;
}

.resultado p {
  margin: 0;
}

/* CTA después del resultado gratuito */
.cta-wrap {
  margin-top: 1.5rem;
  text-align: center;
}

.idea-card {
  position: relative;
  border: 2px solid transparent; /* ← dejamos transparente para no solapar el ::before */
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  cursor: pointer;
  background: white;
  overflow: hidden;
}

.idea-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}


/* Tarjeta seleccionada con borde completo degradado animado */
.idea-card.selected {
  background: #faf7ff;
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
}

.idea-card.selected::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #ff00cc, #7700ff, #ff00cc);
  background-size: 300% 300%;
  animation: animateCardBorder 4s linear infinite;
  z-index: -1;
  border-radius: 14px;
  padding: 2px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@keyframes animateCardBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* =============================
   LaraIA – Asistente integrado
   (no flotante, dentro del flujo)
   ============================= */
   :root{ --header-h:68px; --chat-max:860px; --chat-h:620px; }

   /* Header transparente y contenido separado */
   .chat-embedded .main-header{ position:fixed; top:0; left:0; right:0; z-index:1000; background:transparent; border-bottom:0; padding:.75rem 1rem; }
   .chat-embedded .content-wrapper{ padding-top:var(--header-h); }
   
   /* Navegación responsive básica */
   .chat-embedded .menu-toggle{ cursor:pointer; display:none; }
   .chat-embedded .nav-list{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
   .chat-embedded .nav-list a{ text-decoration:none; font-weight:700 }
   @media(max-width:900px){
     .chat-embedded .menu-toggle{ display:block }
     .chat-embedded .nav-list{ position:absolute; top:var(--header-h); right:1rem; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 30px rgba(17,24,39,.08); padding:.5rem; display:none; flex-direction:column; min-width:220px; }
     .chat-embedded .nav-list.active{ display:flex }
     .chat-embedded .nav-list a{ padding:.4rem .6rem }
   }
   
   /* Hero */
   .hero-section{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
   .landing-button-area{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center }
   
   /* Asistente integrado (solo embebido; no el widget flotante — width:100% rompe el viewport en móvil) */
   .chat-embedded #laraia-chat-container{ width:100%; display:flex; justify-content:center; }
  .chat-embedded #laraia-chat-window.laraia-chat-window{ position:static; width:100%; max-width:var(--chat-max); height:var(--chat-h); margin:1rem auto 0; border:1px solid #e5e7eb; border-radius:16px; background:#fff; box-shadow:0 20px 50px rgba(2,6,23,.08); display:flex; flex-direction:column; overflow:hidden }
  .chat-embedded .laraia-chat-header{ padding:.75rem 1rem; border-bottom:1px solid #eef2f7; font-weight:800; display:flex; align-items:center; justify-content:space-between }
  .chat-embedded .laraia-chat-messages{ flex:1; overflow:auto; padding:1rem; scroll-behavior:smooth; background:linear-gradient(180deg,#fafbff 0,#fff 120px) }
  .chat-embedded .laraia-message{ max-width:85%; margin:.5rem 0; padding:.65rem .8rem; border-radius:12px; line-height:1.45; }
  .chat-embedded .laraia-message-laraia{ background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0 }
  .chat-embedded .laraia-message-user{ background:#EEF2FF; color:#111827; border:1px solid #e0e7ff; margin-left:auto }
   
   /* Input */
  .chat-embedded .laraia-chat-input-area{ display:flex; align-items:center; gap:.5rem; border-top:1px solid #eef2f7; padding:.6rem; background:#fff }
  .chat-embedded #laraia-chat-input{ flex:1; min-height:44px; max-height:180px; resize:none; border:1px solid #e5e7eb; border-radius:12px; padding:.65rem .75rem; font:inherit; outline:none }
  .chat-embedded #laraia-chat-input:focus{ border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(99,102,241,.15) }
  .chat-embedded #laraia-chat-send{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; cursor:pointer }
  .chat-embedded #laraia-chat-send:hover{ background:#f8fafc }
  .chat-embedded .laraia-send-icon-svg{ width:22px; height:22px }
   
   /* Chips rápidos */
  .chat-embedded .quick-chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem .6rem; border-top:1px dashed #e5e7eb; background:#fff }
  .chat-embedded .quick-chips .chip{ background:#f8fafc; border:1px solid #e5e7eb; font-weight:700; border-radius:999px; padding:.35rem .65rem; cursor:pointer }
  .chat-embedded .quick-chips .chip:hover{ background:#f1f5f9 }
   
   /* Responsive chat */
   @media(max-width:960px){
     :root{ --chat-max:100%; --chat-h:560px; }
     .hero-section{ padding-left:1rem; padding-right:1rem }
   }

   /* ====================== */
  /* === PÁGINA: indexb.html (futuri index permanente) === */
  /* ====================== */

  /* Fondo brand suave */
  .bg-brand{ background: transparent; }
  .bg-brand::before{ content:none; }
  
  @keyframes linesDrift{ 0%{background-position:0% 0%} 100%{background-position:100% 100%} }
  @keyframes waveShift{
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(2%, -3%, 0) scale(1.03); }
  }
  
  *{box-sizing:border-box}
a{color:inherit;text-decoration:none}

html, body{
  margin:0;
  color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  /* Fondo global: azul/negro profundo LaraIA */
  background: #0a051a;
}
  a{color:inherit;text-decoration:none}
  
  .container{
    width:100%;
    max-width:min(var(--container-max), 100%);
    margin-inline:auto;
    padding-left:max(var(--page-gutter), env(safe-area-inset-left, 0px));
    padding-right:max(var(--page-gutter), env(safe-area-inset-right, 0px));
    box-sizing:border-box;
    min-width:0;
  }

  /* Wrapper FAQ+contacto: nunca más ancho que el viewport */
  #deep-contacto{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  
  /* Botones unificados (ver bloque BOTONES al inicio del CSS) */
  
  .tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--card)}
  .grad-text{background:linear-gradient(90deg,var(--grad-b),var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
  .pill{border:1px solid var(--line);border-radius:14px;padding:10px 12px;color:var(--muted);background:var(--card)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
  
  .grid{display:grid;gap:20px}
  
  header._unused{position:sticky;top:0;background:color-mix(in oklab, var(--bg) 86%, transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);z-index:10}
  nav._unused{display:flex;align-items:center;justify-content:space-between;height:64px}
  nav._unused .menu{display:flex;gap:14px;align-items:center}
  .logo._unused{display:flex;align-items:center;gap:10px;font-weight:800}
  .logo__dot._unused{width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--grad-b),var(--grad-c))}
  
  .section{padding:72px 0}
  .section h2{font-size:36px;line-height:1.2;margin:0 0 10px}
  .section p.lead{color:var(--muted);max-width:720px}
  
  .hero__wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:72px 0}
  .hero h1{font-size:56px;line-height:1.05;margin:0 0 16px}
  .hero__badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
  .hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
  
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{padding:22px}
  .step .n{font-weight:900;font-size:28px;background:linear-gradient(90deg,var(--grad-b),var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent}
  
  .pricing{grid-template-columns:repeat(3,1fr)}
  .price{padding:24px;display:grid;gap:14px}
  .price h3{margin:0}
  .price ul{margin:0;padding-left:18px;color:var(--muted)}
  .price .num{font-size:42px;font-weight:900}
  
  .services{grid-template-columns:repeat(3,1fr)}
  .service{padding:24px;display:grid;gap:14px}
  .service h3{margin:0}
  .service ul{margin:0;padding-left:18px;color:var(--muted)}
  @media (max-width:960px){ .services{grid-template-columns:1fr} }
  
  .cta{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
  
  footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted)}
  
  @media (max-width:960px){
    .hero__wrap{grid-template-columns:1fr}
    .steps,.pricing{grid-template-columns:1fr}
    .cta{grid-template-columns:1fr}
  }
  
  /* DEMO embebida */
  #demo-messages{height:380px;background:var(--card);overflow:auto;padding:14px}
  .laraia-message{max-width:80%;}
  
  /* Widget flotante (burbuja) — touch-action solo en la burbuja (drag); el contenedor no bloquea scroll de página */
  #laraia-chat-container{position:fixed;bottom:max(20px, env(safe-area-inset-bottom, 0px));right:max(20px, env(safe-area-inset-right, 20px));z-index:2147483647;touch-action:auto;width:auto;max-width:none;left:auto;display:block}
  #laraia-chat-bubble.laraia-chat-bubble{ touch-action:none; }
  #laraia-chat-bubble{
    width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;border:3px solid transparent;box-shadow:0 6px 16px rgba(0,0,0,.2);
    background-image:linear-gradient(white,white),linear-gradient(90deg,#ff00cc,#7700ff);
    background-origin:padding-box,border-box;background-clip:padding-box,border-box
  }
  .laraia-chat-bubble-text{font-weight:800;background:linear-gradient(90deg,#ff00cc,#7700ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  
  /* Contacto */
  .contact{padding:72px 0}
  /* Más compacto (menos invasivo) en escritorio */
  .contact-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
  }
  .contact .card{padding:18px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-row{display:flex;flex-direction:column;gap:6px}
  .form-row.full{grid-column:1 / -1}
  .form-row label{font-size:14px;color:var(--muted)}
  .form-row input,.form-row textarea{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg)}
  .form-row input:focus,.form-row textarea:focus{outline:none;border-color:color-mix(in oklab, var(--grad-c) 40%, var(--line));box-shadow:0 0 0 4px color-mix(in oklab, var(--grad-c) 15%, transparent)}
  .form-row textarea{min-height:120px;resize:vertical}
  .form-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
  .form-note{color:var(--muted);font-size:13px}
  .alert{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);}
  @media (max-width:960px){
    .contact-grid{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
  }
  .badge{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}
  .contact .hint{font-size:13px;color:var(--muted);margin-top:8px}

  .contact-cta-row{
    display:flex;
    justify-content:center;
    margin-top: 16px;
  margin-bottom: 36px;
  }

/* Contacto: misma estética que pills Tridente */
#contacto .contact-card,
#contacto .contact-card .hint{
  color: rgba(10, 5, 26, 0.75);
}
  
  /* Accesibilidad (recomendado) */
  .btn:focus-visible, .pill:focus-visible, .tag:focus-visible {
    outline:3px solid color-mix(in oklab, var(--grad-c) 40%, transparent);
    outline-offset:2px;
  }

/* Floating CTA: Hablemos (izquierda, centrado vertical, compacto) */
.btn-float{
  position:fixed; left:14px; top:50%; transform:translateY(-50%);
  z-index:2147483646;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; margin:0; width:auto; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
@media (max-width: 600px){ .btn-float{ left:10px; top:auto; bottom:14px; transform:none; } }

/* WhatsApp flotante */
.whatsapp-float{
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  left: 20px; /* izquierda para no estorbar al bot/widget */
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover{
  transform: scale(1.1);
  background-color: #128c7e;
}

/* Móvil: WhatsApp encima del widget (derecha) para no tapar pills del hero; burbuja más compacta */
@media (max-width: 768px){
  .whatsapp-float{
    width: 50px;
    height: 50px;
    left: auto;
    right: max(14px, env(safe-area-inset-right, 14px));
    bottom: calc(102px + env(safe-area-inset-bottom, 0px));
    font-size: 26px;
  }
  .whatsapp-float svg{ width: 24px; height: 24px; }
  /* Mismos márgenes que .whatsapp-float respecto al borde (WhatsApp a la derecha en móvil; LaraIA espejo en el mismo eje) */
  #laraia-chat-container{
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    right: max(14px, env(safe-area-inset-right, 14px));
    width: auto !important;
    max-width: none !important;
    left: auto !important;
    display: block !important;
    touch-action: auto !important;
  }
  #laraia-chat-bubble.laraia-chat-bubble{
    width: 64px !important;
    height: 64px !important;
  }
  .laraia-chat-bubble-text{ font-size: 1.05em !important; }
  /* Reduce animaciones no compositables en móvil para mejorar estabilidad/CLS */
  footer.footer .brand-name{ animation: none !important; background-position: 50% 50%; }
}

.btn:focus-visible, .menu-toggle:focus-visible, .nav-list a:focus-visible{
  outline:3px solid rgba(119,0,255,.35);
  outline-offset:2px;
}
/* Botón estilo glass/liquid */
.btn--glass{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px; color:#111; font-weight:700;
  background: rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px rgba(16,12,40,.12);
  font-size:.95rem;
}
.btn--glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at -10% -10%, rgba(255,255,255,.65), transparent 35%),
              radial-gradient(140% 140% at 110% 10%, rgba(255,0,204,.25), transparent 45%),
              radial-gradient(140% 140% at 50% 120%, rgba(119,0,255,.18), transparent 50%);
}
.btn--glass:hover{ box-shadow: 0 10px 30px rgba(16,12,40,.16); transform: translateY(-1px); }
/* === Ajuste: botones glass en indexb (scope bg-brand) === */
.bg-brand .btn--fill{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px; font-weight:700;
  background: rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.55);
  color:#111;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px rgba(16,12,40,.12);
}
.bg-brand .btn--fill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at -10% -10%, rgba(255,255,255,.65), transparent 35%),
              radial-gradient(140% 140% at 110% 10%, rgba(255,0,204,.22), transparent 45%),
              radial-gradient(140% 140% at 50% 120%, rgba(119,0,255,.18), transparent 50%);
}
.bg-brand .btn--fill:hover{ box-shadow:0 10px 30px rgba(16,12,40,.16); transform:translateY(-1px); }
.bg-brand .btn--fill:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(16,12,40,.16); }

/* === Subtítulos centrados para Servicios y Contacto === */
#servicios .lead, #contacto .lead{ text-align:center; max-width:920px; margin:0 auto 10px auto; }

/* === Secciones centradas (títulos/subtítulos) === */
.section.container.centered h2,
.section.container.centered .lead{
  text-align:center;
  margin-left:auto; margin-right:auto;
}
.section.container.centered .lead{ max-width: 920px; }

/* Grid de 3 columnas en desktop + 4ª tarjeta centrada */
#asistente .grid.services,
#metodo .grid.services,
#servicios .grid.services,
#casos .grid.services,
#opiniones .grid.services,
#diferenciacion .grid.services{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 1024px){
  #asistente .grid.services,
  #metodo .grid.services,
  #servicios .grid.services,
  #casos .grid.services,
  #opiniones .grid.services,
  #diferenciacion .grid.services{
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    justify-items: stretch;
  }
  
  /* Centra la 4ª card en segunda fila */
  #asistente .grid.services > .card.service:nth-child(4),
  #metodo    .grid.services > .card.service:nth-child(4), 
  #servicios .grid.services > .card.service:nth-child(4),
  #casos     .grid.services > .card.service:nth-child(4),
  #opiniones .grid.services > .card.service:nth-child(4),
  #diferenciacion .grid.services > .card.service:nth-child(4){
    grid-column: 2;
  }
}

/* Acento degradado en palabras clave dentro de cards */
#metodo .card.service strong,
#casos .card.service strong{
  background: linear-gradient(90deg,var(--grad-b),var(--grad-c));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* ===== Override botón glass del héroe ===== */
.hero__wrap .hero__cta .btn-glass{
  /* tamaño consistente */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  font-weight:700;
  line-height:1.1;

  /* reset de herencias de .btn */
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none;
  border:2px solid transparent;

  /* glass + borde en gradiente SOLO en el filo */
  background:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) padding-box,
    linear-gradient(90deg, var(--grad-b), var(--grad-c)) border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);

  color:#6a00ff !important; /* texto morado */
}

.hero__wrap .hero__cta .btn-glass:hover{
  background:
    linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30)) padding-box,
    linear-gradient(90deg, var(--grad-b), var(--grad-c)) border-box !important;
}

/* === Glass-only fill + gradient border (mask technique) === */
.hero__wrap .hero__cta .btn-glass{
  position: relative;
  z-index: 0;
  border: none !important;                     /* no real border */
  background: rgba(255,255,255,.22) !important;/* translucent glass */
  color: #6a00ff !important;                   /* morado texto */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  box-shadow: 0 6px 14px rgba(16,12,40,.10), inset 0 1px 0 rgba(255,255,255,.35);
}
.hero__wrap .hero__cta .btn-glass::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;                                 /* grosor del borde */
  border-radius:14px;
  background: linear-gradient(90deg, var(--grad-b), var(--grad-c));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; /* Safari/WebKit */
  mask-composite: exclude;     /* Estándar */
  pointer-events:none;
  z-index:-1;
}
.hero__wrap .hero__cta .btn-glass:hover{
  background: rgba(255,255,255,.30) !important; /* un poco más luminosa al hover */
  box-shadow: 0 10px 18px rgba(16,12,40,.14), inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(-1px);
}
/* Alineación de botón Enviar en demo embebida */
#demo-chat #demo-send.btn-glass,
#demo-chat #demo-send{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; height:44px; padding:0 16px; border-radius:12px;
}
#demo-chat #demo-input{ display:block; }

/* === Nav dropdown (Área Creativa) === */
.main-nav .nav-dropdown{ position: relative; padding-bottom:8px; }
.main-nav .nav-dropdown::after{ /* puente invisible para que no haya “hueco” entre label y menú */
  content:""; position:absolute; left:0; right:0; top:100%; height:10px; /* puente */
}
.main-nav .dropdown-toggle{ cursor:pointer; background:transparent; border:0; padding:10px 14px; border-radius:12px; font:inherit; color: var(--color-text-primary); }
.main-nav .dropdown-toggle .caret{ display:inline-block; margin-left:6px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; transition:transform .2s ease; }
.main-nav .nav-dropdown.open .dropdown-toggle .caret{ transform:rotate(180deg); }

.main-nav .dropdown-menu{ position:absolute; top: calc(100% + 2px); left:0; min-width:200px; padding:8px; margin-top:0; list-style:none; border-radius:14px; border:1px solid #e6e6f2;
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:2000;
}
.main-nav .dropdown-menu li{ margin:0; }
.main-nav .dropdown-menu a{ display:block; padding:10px 12px; border-radius:10px; color: var(--color-text-primary); white-space:nowrap; }
.main-nav .dropdown-menu a:hover{ background:rgba(255,255,255,.15); }

/* Mostrar al abrir por CLICK (.open); Hover solo en desktop */
.main-nav .nav-dropdown.open > .dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (min-width: 961px){
  .main-nav .nav-dropdown:hover > .dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
}

/* Caret rota cuando abierto (asegurar presente) */
.main-nav .nav-dropdown.open .dropdown-toggle .caret{ transform:rotate(180deg); }

/* Mobile: submenú dentro del panel, columna 2, abre hacia la izquierda */
@media (max-width:960px){
  /* Mobile: submenú dentro del panel, columna 2; SIN hover, solo click */
  @media (max-width:960px){
    .main-nav .nav-dropdown{ width:100%; position:relative; }

    /* Forzar que el menú secundario viva DENTRO del cajón y no sea absoluto */
    .main-nav .nav-dropdown > .dropdown-menu{
      position: static !important;
      left: auto !important; right: auto !important; top: auto !important;
      /* sin grid en móvil: ocupa el ancho disponible */
      /* grid-column: 2;  ← eliminado */
      margin: 0; width: auto; min-width: 0; max-width: 100%;
      display: none; /* oculto por defecto */
      background: rgba(255,255,255,.96);
      border:1px solid #e6e6f2; border-radius:12px;
      box-shadow:0 8px 24px rgba(0,0,0,.12);
      overflow: visible; max-height: none;
      z-index: 2100;
    }
    .main-nav .nav-dropdown.open > .dropdown-menu{ display: block !important; }

    /* Desactivar apertura por hover en móvil por si alguna regla lo re-activa */
    .main-nav .nav-dropdown:hover > .dropdown-menu{ display: none !important; }

    /* Evitar que el texto fuerce el ancho hacia fuera */
    .main-nav .dropdown-menu a{ white-space: normal; }
  }
}


/* ===== BLOG – Ajustes de hero, filtros y cards consistentes ===== */

/* Centrado del subtítulo y botones superiores */
.blog-hero .lead{ text-align:center; max-width:920px; margin:0 auto 10px; }
.blog-hero .hero__cta{ display:flex; gap:12px; justify-content:center; align-items:center; }

/* Hero blog: velo oscuro para contraste (encima del gradiente base del .hero) */
.hero.blog-hero{
  background-image:
    linear-gradient(rgba(4, 2, 14, 0.78), rgba(10, 5, 26, 0.62)),
    linear-gradient(rgba(10, 5, 26, 0.35), rgba(10, 5, 26, 0.5)),
    url('image/hero-tablet.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed, fixed, fixed;
}
@media (min-width: 1920px){
  .hero.blog-hero{
    background-image:
      linear-gradient(rgba(4, 2, 14, 0.78), rgba(10, 5, 26, 0.62)),
      linear-gradient(rgba(10, 5, 26, 0.35), rgba(10, 5, 26, 0.5)),
      url('image/hero.webp');
  }
}
@media (max-width: 960px){
  .hero.blog-hero{
    background-attachment: scroll, scroll, scroll;
  }
}

/* Hero blog: una columna centrada (sin bot a la derecha) */
.hero.blog-hero .hero__wrap{
  justify-content: center;
  text-align: center;
}
.hero.blog-hero .hero__wrap > div{
  max-width: min(42rem, 100%);
  width: 100%;
  margin-inline: auto;
}
.hero.blog-hero .blog-hero__stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.35rem);
}
.hero.blog-hero .blog-hero__intro{
  margin-bottom: 0;
}
.hero.blog-hero .blog-hero__ctas{
  margin-top: 0.25rem;
}
.hero.blog-hero .cta-buttons{
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hero.blog-hero .blog-cats{
  margin-top: 0.35rem;
  max-width: 100%;
}
.hero.blog-hero #blogFilters{
  margin-top: 0;
}

/* Blog hero: captación — caja de intención + fila de CTAs */
.hero.blog-hero .hero-lead-box{
  width: 100%;
  max-width: min(36rem, 100%);
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 3vw, 1.5rem);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 5, 26, 0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}
.hero.blog-hero .hero-lead-box__q{
  margin: 0 0 0.85rem;
  font-size: clamp(1.06rem, 2.2vw, 1.22rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}
.hero.blog-hero .hero-lead-box__opts{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 540px){
  .hero.blog-hero .hero-lead-box__opts{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero.blog-hero .hero-lead-box__opts .btn-secondary-lara{
    flex: 1 1 calc(33.333% - 8px);
    min-width: 9.5rem;
    max-width: 100%;
    justify-content: center;
  }
}
.hero.blog-hero .hero-actions{
  width: 100%;
  justify-content: center;
}

/* Blog: grid de artículos — 4 columnas, filas hacia abajo */
.posts-grid{
  display:grid;
  gap: clamp(12px, 1.2vw, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width:100%;
  margin-top: 12px;
  align-items: stretch;
}
@media (max-width: 1320px){
  .posts-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .posts-grid{ grid-template-columns: 1fr; }
  #listado .post-card{ max-width: 680px; margin: 0 auto; }
}

#mobilePager{ display:none; margin-top:24px; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; }
@media (max-width:640px){
  #mobilePager{ display:flex; }
}

.laraia-chat-modal, #laraia-chat-modal{
  max-width:min(92vw,520px);
  max-height:85vh;
  width:auto;
  height:auto;
}
@media (max-width:640px){
  .laraia-chat-modal, #laraia-chat-modal{
    left:0 !important; right:0 !important; transform:none !important;
    width:100vw; max-width:100vw; height:82vh; border-radius:16px 16px 0 0;
  }
}

#suscribirse .blog-suscribe{
  padding:24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  max-width:min(1100px, 100%);
  margin-inline:auto;
  background: #e8e6ee !important;
  border: 1px solid rgba(10, 5, 26, 0.1) !important;
  box-shadow:
    0 20px 50px rgba(10, 5, 26, 0.12),
    0 8px 22px rgba(10, 5, 26, 0.07) !important;
}
#suscribirse .blog-suscribe__form{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}
#suscribirse .blog-suscribe__input{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--fg);
  min-width:min(100%, 260px);
}
@media (max-width: 900px){
  #suscribirse .blog-suscribe{
    grid-template-columns:1fr;
  }
  #suscribirse .blog-suscribe__form{
    justify-content:stretch;
  }
  #suscribirse .blog-suscribe__input{ width:100%; min-width:0; }
}

/* Selector de categorías: una sola fila (scroll horizontal si no cabe) */
.blog-cats{
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  box-sizing: border-box;
  padding-bottom: 2px;
}
.blog-cats::-webkit-scrollbar{
  height: 5px;
}
.blog-cats::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.blog-cats .btn-glass.btn-pill{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 520px){
  .blog-cats{
    justify-content: flex-start;
    gap: 5px;
    padding-inline: 2px;
  }
  .blog-cats .btn-glass.btn-pill{
    font-size: 0.78rem;
    padding: 0.38rem 0.62rem;
  }
}
.btn-glass.btn-pill{
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.1;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) padding-box,
    linear-gradient(90deg, var(--grad-b), var(--grad-c)) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  color:#6a00ff;
  box-shadow: 0 4px 10px rgba(16,12,40,.10);
}
.btn-glass.btn-pill:hover,
.btn-glass.btn-pill:focus-visible{
  background:
    linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30)) padding-box,
    linear-gradient(90deg, var(--grad-b), var(--grad-c)) border-box;
  transform: translateY(-1px);
}
.btn-glass.btn-pill.is-active{
  color:#fff;
  background:
    linear-gradient(90deg, var(--grad-b), var(--grad-c)) padding-box,
    linear-gradient(90deg, var(--grad-b), var(--grad-c)) border-box;
  box-shadow: 0 6px 14px rgba(119,0,255,.18);
}

/* Tarjetas del blog: tag, thumb, título, extracto, fecha, CTA */
#listado .card.post-card{
  display:grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 10px;
  padding: 14px;
  min-height: 100%;
}
#listado .post-tag{
  justify-self: start;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255, 64, 161, 0.35);
  color:#0a051a;
  padding:.35rem .6rem; border-radius:999px;
}
#listado .post-title{
  margin:0;
  line-height:1.18;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 3.45em;
}
#listado .post-title a{
  background:linear-gradient(90deg,var(--grad-b),var(--grad-c));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#listado .post-excerpt{
  margin:0; color:#1e293b;
  font-size: 0.88rem;
  line-height: 1.45;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 4.2em;
}
#listado .post-thumb{
  width: 100%;
  height: 128px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 640px){
  #listado .post-thumb{ height: 150px; }
}

#listado .post-meta{
  margin-top:0; color:#475569; font-size: 0.82rem;
}
#listado .post-actions{ margin-top:0; }
#listado .post-actions .btn-secondary-lara{ width:100%; justify-content:center; box-sizing:border-box; }

/* --- Página de artículo (/blog/articulo-*.html, plantilla n8n) --- */
#articulo .article-tag-wrap{
  display:flex;
  justify-content:center;
  margin-bottom: 14px;
}
#articulo .post-tag.pill{
  justify-self: start;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255, 64, 161, 0.35);
  color:#0a051a;
  padding:.35rem .6rem;
  border-radius:999px;
}
#articulo .article-title{
  text-align:center;
  margin:0 0 10px;
  font-size: clamp(1.35rem, 3.5vw, 2.25rem);
  line-height:1.15;
  font-weight: 800;
  color: #0a051a;
}
#articulo .article-meta{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  color:#475569;
  font-size:.92rem;
  margin-bottom: 22px;
}
#articulo .article-content{
  font-size: 1.05rem;
  line-height: 1.75;
  color: #0f172a;
}
#articulo .article-content h2{
  margin: 28px 0 8px;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: #0a051a;
}
#articulo .article-content h3{
  margin: 22px 0 6px;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: #0a051a;
}
#articulo .article-content p{ margin: 0 0 14px; }
#articulo .article-content ul,
#articulo .article-content ol{ margin: 10px 0 18px 1.25rem; }
#articulo .article-content a{ color: #6a00ff; text-decoration: underline; }
#articulo .article-content img{ max-width: 100%; height: auto; border-radius: 12px; }
#articulo .article-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 28px;
}
#articulo .article-shell{
  cursor: default;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 28px);
  text-align: left;
}
#articulo .article-shell:hover{
  transform: none;
}

/* Responsive: en móvil mantenemos la coherencia de alturas */
@media (max-width: 640px){
  #listado .post-title{ -webkit-line-clamp: 4; min-height: 4.8em; }
  #listado .post-excerpt{ -webkit-line-clamp: 5; min-height: 6em; }
}

/* === Cookie Banner === */
.cookie-banner{ position:fixed; left:12px; right:12px; bottom:12px; z-index:3000; }
.cookie-inner{
  display:grid; grid-template-columns: 1fr auto; gap:16px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.cookie-text p{ margin:.4rem 0 .6rem; color: var(--muted); }
.cookie-form{ display:grid; gap:10px; align-content:start; }
.cookie-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 12px; }
.cookie-actions{ display:flex; gap:10px; justify-content:flex-end; }
@media (max-width:720px){
  .cookie-inner{ grid-template-columns:1fr; }
  .cookie-actions{ justify-content:stretch; flex-wrap:wrap; }
}

/* Móvil: banner compacto por defecto, preferencias solo al “Configurar” */
@media (max-width: 768px){
  .cookie-banner{
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    border-radius: 16px;
  }
  .cookie-banner.cookie-compact{
    /* Altura fija para evitar CLS al aparecer */
    height: 92px;
  }
  .cookie-banner.cookie-compact .cookie-inner{
    height: 100%;
    padding: 12px 12px;
    gap: 10px;
    align-content: center;
    /* Móvil: sin blur/backdrop-filter ni sombra compleja */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    background: rgba(255,255,255,.96);
  }
  .cookie-banner.cookie-compact .cookie-text strong{ display:block; font-size: 0.95rem; }
  .cookie-banner.cookie-compact .cookie-text p{
    margin: .25rem 0 .5rem;
    font-size: 0.9rem;
    line-height: 1.25;
  }
  .cookie-banner.cookie-compact .cookie-row,
  .cookie-banner.cookie-compact .cookie-text a,
  .cookie-banner.cookie-compact #cookie-reject,
  .cookie-banner.cookie-compact button[type="submit"]{
    display:none !important;
  }
  .cookie-banner.cookie-compact .cookie-actions{
    display:flex;
    justify-content:stretch;
    gap:10px;
  }
  .cookie-banner.cookie-compact #cookie-accept,
  .cookie-banner.cookie-compact #cookie-config{
    flex:1 1 0;
    width:auto;
    padding: 12px 14px;
    letter-spacing: 1px;
    font-size: .78rem;
  }

  .cookie-banner.cookie-expanded .cookie-row,
  .cookie-banner.cookie-expanded #cookie-reject,
  .cookie-banner.cookie-expanded button[type="submit"]{
    display:flex;
  }
  .cookie-banner.cookie-expanded .cookie-inner{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
    background: rgba(255,255,255,.97);
  }
}

/* Móvil: posiciones fijas ESTABLES (sin empujes dinámicos → menos CLS) */
@media (max-width: 768px){
  .whatsapp-float{
    bottom: calc(114px + 74px + env(safe-area-inset-bottom, 0px)) !important;
    right: max(14px, env(safe-area-inset-right, 14px)) !important;
    left: auto !important;
  }
}
/* =====================================
   FAQ (index.html) – acordeón sin imágenes
   Escopado por #faq para no chocar con .faqs-section
===================================== */
#faq { padding-top: 36px; padding-bottom: 24px; }
#faq h2 { margin: 0 0 10px; text-align: center; }
#faq .lead { color: rgba(255, 255, 255, 0.7); text-align: center; max-width: 820px; margin: 0 auto 24px; }

#faq .faq{ max-width: 1100px; margin: 0 auto; text-align: left; }
#faq .faq-item{
  background: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 64, 161, 0.55);
  border-radius: 20px;
  padding: 0;
  margin: 0 0 15px 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #0a051a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02);
  /* evita artefactos de borde con blur + radios */
  background-clip: padding-box;
  overflow: hidden;
}
#faq .faq-item:first-child{ border-top: none !important; }

#faq .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; align-items:start; }
#faq .faq-col{ display:flex; flex-direction:column; gap:0; }
#faq .faq-col .faq-item{ border-bottom: none !important; }
#faq .faq-col .faq-item:first-child{ border-top: none !important; }

/* Compacto: menos padding y flecha más pequeña */
#faq .faq-q{ padding:12px 36px 12px 16px; }
#faq .faq-q::after{ width:18px; height:18px; }

/* Responsive: a una columna en pantallas medianas/pequeñas */
@media (max-width: 960px){
  #faq .grid-2{ grid-template-columns: 1fr; gap: 0; }
}

#faq .faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding: 20px;
  cursor:pointer;
  font: inherit;
  color: #0a051a !important;
  position:relative;
  display:block;
}
#faq .faq-item:hover{
  background: rgba(255, 255, 255, 0.66) !important;
  border-color: rgba(255, 64, 161, 0.75);
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}
#faq .faq-item h3{ margin:0; }
#faq .faq-q .qtext{
  color: #0a051a !important;
  font-weight: 500;
  font-size: 1rem;
}
#faq .faq-q .qtext .kw{ background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight:800; }
#faq .faq-q:focus-visible{ outline:3px solid color-mix(in oklab, var(--grad-c) 40%, transparent); outline-offset:2px; border-radius:8px; }

/* Flecha (SVG como máscara) */
#faq .faq-q::after{
  content:"";
  position:absolute;
  right: 18px;
  top:50%;
  width:22px;
  height:22px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M7 10l5 5 5-5z\"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M7 10l5 5 5-5z\"/></svg>') center/contain no-repeat;
}
#faq .faq-q[aria-expanded="true"]::after{ transform: translateY(-50%) rotate(180deg); }

/* Panel */
#faq .faq-a{ overflow:hidden; max-height:0; transition:max-height .28s ease; }
#faq .faq-a > div{
  color: rgba(10, 5, 26, 0.75) !important;
  padding: 0 20px 20px 20px;
  line-height: 1.6;
}
#faq .faq-a p{ margin: 0 0 10px; }
#faq .faq-a strong{ font-weight:700; }
#faq .faq-a a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  #faq .faq-a{ transition: none; }
}
/* === Botón de cierre (X) del menú móvil === */
.laraia-menu-close{
  position:absolute;
  top:12px; left:12px;
  width:36px; height:36px;
  border:0; border-radius:50%;
  display:none; /* visible solo en móvil */
  align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800; line-height:1;
  cursor:pointer; z-index: 2002;
  color:#fff;
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c));
  box-shadow: 0 8px 20px rgba(16,12,40,.18);
  transition: transform .18s ease, opacity .18s ease;
}
.laraia-menu-close:hover{ transform: scale(1.05); opacity:.9; }

/* Mostrar solo cuando el panel está activo en móvil */
@media (max-width:960px){
  .main-nav .nav-list{ position:fixed; }
  .main-nav .nav-list.active .laraia-menu-close,
  .nav-capsule .nav-links.active .laraia-menu-close{ display:flex; }
}

/* =========================
   Tridente — misma pila que contacto (.landing-family--cierre):
   velo plano rgba(10,5,26,.48) + image/tridente.webp
   (sin viñetas multi-stop ni velos 0.26/0.56 mezclados)
   ========================= */
#tridente,
#servicios,
#asistente,
#listado,
#articulo,
#sectores,
#integraciones,
#metodo{
  position: relative;
  z-index: 0;
  background: none !important;
}

/* ============================================================
   FIX definitivo: Tridente full-bleed vía ::before (misma receta que contacto)
   ============================================================ */
#tridente,
#servicios,
#asistente,
#casos,
#listado,
#articulo,
#encaja-todo,
#metodo,
#deep-contacto{
  position: relative;
  z-index: 0;
  background: none !important;
}

#tridente::before,
#servicios::before,
#asistente::before,
#casos::before,
#listado::before,
#articulo::before,
#encaja-todo::before,
#metodo::before,
#deep-contacto::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  margin-left:-50vw;
  width:100vw;
  height:100%;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(10,5,26,0.48), rgba(10,5,26,0.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
}

/* FAQ + contacto: base igual al tridente de contacto (cierre la sustituye en #faq con sectores02) */
#faq,
#contacto{
  background:
    linear-gradient(rgba(10,5,26,0.48), rgba(10,5,26,0.48)),
    url('image/tridente.webp') !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
  border: none !important;
}

/* Blog (#listado, #articulo): imagen Tridente fija al viewport; el velo sigue el scroll */
#listado,
#articulo{
  isolation: isolate;
}
#listado::before,
#articulo::before{
  background-attachment: scroll, fixed;
}
@media (max-width: 960px){
  #listado::before,
  #articulo::before{
    background-attachment: scroll, scroll;
  }
}

/* Dentro del wrapper: las secciones no deben reintroducir fondo */
#deep-contacto #faq,
#deep-contacto #contacto{
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Texto fuera de cards en FAQ/Contacto sobre Tridente */
#deep-contacto #faq h2, #deep-contacto #faq .lead,
#deep-contacto #contacto h2, #deep-contacto #contacto .lead{
  color:#fff !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.38) !important;
}

/* ==========================================
   CONTACTO hasta el final + footer flotante
   (como Hero + cápsula nav)
   ========================================== */
#contacto{
  /* extiende la sección hasta el final visible */
  min-height: 100vh;
  padding-bottom: clamp(72px, 12vw, 128px);
}

/* Index: hueco extra bajo el contenido para el solape del footer (solo fondo visible en la franja) */
body.bg-brand:has(#deep-contacto) #contacto{
  padding-bottom: clamp(190px, 22vh, 280px);
}

/* El wrapper debe evitar que se vea el fondo oscuro del body debajo */
#deep-contacto{
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* Ajuste 4K/ultrawide: evita hueco excesivo antes del footer */
@media (min-width: 1920px){
  #contacto{
    min-height: auto;
    padding-bottom: clamp(64px, 8vw, 112px);
  }
  #deep-contacto{
    padding-bottom: 28px;
  }
  body.bg-brand:has(#deep-contacto) #contacto{
    padding-bottom: clamp(170px, 17vh, 230px);
  }
}

/* Más aire sobre el footer flotante en desktop */
@media (min-width: 1024px){
  #contacto{
    padding-top: 140px;
    padding-bottom: clamp(80px, 10vw, 140px);
  }
  body.bg-brand:has(#deep-contacto) #contacto{
    padding-bottom: clamp(210px, 20vh, 300px);
  }
}

/* SECTORES + INTEGRACIONES → fondo sectores con “ventana fija” (#metodo usa tridente vía FIX definitivo en index) */
#sectores::before,
#integraciones::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  margin-left:-50vw;
  width:100vw;
  height:100%;
  z-index:-1;
  pointer-events:none;
  background-image:
    /* sombreado suave en bordes (arriba/abajo) */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0px,
      rgba(10,5,26,0.00) 22px,
      rgba(10,5,26,0.00) calc(100% - 22px),
      rgba(0,0,0,0.55) 100%
    ),
    linear-gradient(rgba(10,5,26,0.45), rgba(10,5,26,0.45)),
    url('image/sectores.webp');
  background-attachment: fixed, fixed;
  background-size:cover;
  background-position:center;
}

/* =========================
   “Ventana fija” – sombra sutil en bordes
   Separa el contenido claro del fondo oscuro sin “cortes”.
   ========================= */
#sectores,
#integraciones,
#metodo,
#opiniones,
#diferenciacion,
#cta-final,
#deep-contacto{
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 44px rgba(0,0,0,.18);
}

/* Integraciones: quita la “línea” de separación inferior */
#integraciones{
  box-shadow: none;
}

/* Reduce el espacio visual entre Integraciones y la siguiente sección */
#integraciones{ padding-bottom: 56px; }
#asistente{ padding-top: 56px; }

/* CTA final: quita la “línea” de separación superior/inferior */
#cta-final{
  box-shadow: none;
}

/* Reduce el espacio visual entre Opiniones / diferenciación y CTA final */
#opiniones,
#diferenciacion{ padding-bottom: 56px; }
#cta-final{ padding-top: 56px; }

#suscribirse{
  padding: 72px 0 160px;
}

/* Blog: main sin crecimiento fantasma; footer menos agresivo que en la landing larga */
body.page-blog main,
body.page-article main{
  flex: 1 0 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}

/* --- Blog / artículo: fondo continuo (Tridente) también en body, bajo el footer y sin huecos ---
   No forzar min-height en main: creaba una franja vacía con color plano debajo de #suscribirse. */
/* Listado blog: sectores (continuidad con #suscribirse y html). Artículo: Tridente como #articulo */
body.page-blog:not(.page-article){
  background-color: #0a051a;
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.35) 0px,
      rgba(10,5,26,0.00) 18px,
      rgba(10,5,26,0.00) calc(100% - 18px),
      rgba(0,0,0,0.35) 100%
    ),
    linear-gradient(rgba(10,5,26,.45), rgba(10,5,26,.45)),
    url('image/sectores03.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  background-repeat: no-repeat;
}
body.page-article{
  background-color: #0a051a;
  background-image: linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)), url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  background-repeat: no-repeat;
}
body.page-blog #listado,
body.page-article #articulo{
  /* Altura mínima explícita: el % del pseudo no bastaba con solo altura del contenido */
  min-height: calc(100dvh - 60px);
  min-height: calc(100vh - 60px);
}
body.page-blog #listado::before,
body.page-article #articulo::before{
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 100%;
}
body.page-blog footer.footer,
body.page-article footer.footer{
  margin-top: 0;
  padding-bottom: clamp(24px, 4vw, 40px);
}

/* Páginas legales (privacidad, términos): mismo entorno visual que blog */
body.page-legal{
  background-color: #0a051a;
}
body.page-legal main{
  flex: 1 0 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-height: calc(100dvh - 60px);
  min-height: calc(100vh - 60px);
}
body.page-legal #legal{
  min-height: calc(100dvh - 60px);
  min-height: calc(100vh - 60px);
}
body.page-legal #legal::before{
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 100%;
}
body.page-legal footer.footer{
  margin-top: -80px;
  padding-bottom: 32px;
}
.legal-hero-tight{
  padding-bottom: clamp(24px, 5vw, 40px);
}
.legal-hero-tight .blog-hero__stack{
  gap: 12px;
}
h1.legal-h1{
  font-size: clamp(1.35rem, 4.2vw, 2rem);
  line-height: 1.2;
  margin: 0;
}
.legal-page{
  max-width: 52rem;
  margin: 0 auto;
  text-align: left;
  padding-top: clamp(48px, 9vw, 88px);
  padding-bottom: clamp(48px, 10vw, 96px);
}
.legal-page .legal-card{
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 64, 161, 0.4);
  border-radius: 18px;
  padding: clamp(1.25rem, 4vw, 2rem);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.legal-page .legal-updated{
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.82);
}
.legal-page h2{
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.75rem 0 0.65rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.legal-page h2:first-of-type{
  margin-top: 0.5rem;
}
.legal-page p{
  margin: 0 0 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
}
.legal-page ul{
  margin: 0.35rem 0 1rem 1.15rem;
  padding: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
}
.legal-page li{
  margin-bottom: 0.45rem;
}
.legal-page a{
  color: #ff79c6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-page a:hover{
  color: #ffa8dc;
}
.legal-page .legal-cross{
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 0;
}

#sectores h2, #sectores .lead,
#integraciones h2, #integraciones .lead,
#metodo h2, #metodo .lead,
#metodo .method-highlight__txt{
  color:#fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

/* Cards sobre fondo Tridente: borde rosa SIEMPRE + glass sutil */
#tridente .card.service,
#servicios .card.service,
#asistente .card.service,
#listado .card.service.post-card,
#articulo .card.service.article-shell{
  border-color: rgba(255, 64, 161, 0.55) !important;
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02);
}

footer.footer{
  background: transparent !important;
  /* recorta el margen inferior para igualar el nav (top: 25px) */
  padding: 40px 0 25px 0;
  display: flex;
  justify-content: center;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 20;
  /* flota sobre la última sección (sin duplicar fondo) */
  margin-top: -140px;
}

/*
 * Index (#deep-contacto): footer “flotante” sobre el FONDO Tridente del cierre
 * (misma idea que margin-top:-140 global), no sobre el contenido del formulario.
 */
body.bg-brand:has(#deep-contacto) footer.footer{
  margin-top: -118px;
  padding-top: clamp(36px, 5vw, 52px);
  padding-bottom: clamp(40px, 5.5vw, 56px);
}

footer.footer .footer-capsule{
  width: calc(100% - 48px); /* casi a los bordes (margen como containers) */
  max-width: 1600px;
  height: 80px;
  background: rgba(10, 5, 26, 0.85) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 64, 161, 0.3);
  border-radius: 100px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* centro absoluto */
  align-items: center;
  padding: 0 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Alineación de elementos en una sola línea */
footer.footer .footer-brand,
footer.footer .footer-links,
footer.footer .footer-social{
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}

/* Centro perfecto: links centrados independientemente de brand/rrss */
footer.footer .footer-brand{ justify-self: start; }
footer.footer .footer-social{ justify-self: end; justify-content:flex-end; }
footer.footer .footer-links{ justify-self: center; justify-content: center; }

footer.footer .brand-name{
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 2px;
  /* bucle perfecto: degradado repetible + desplazamiento continuo */
  background-image: repeating-linear-gradient(
    90deg,
    var(--grad-c) 0%,
    var(--grad-b) 25%,
    var(--grad-c) 50%,
    var(--grad-b) 75%,
    var(--grad-c) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  animation: footerBrandShift 9.0s linear infinite;
}

@keyframes footerBrandShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; } /* vuelve al mismo patrón */
}

footer.footer .tagline{
  font-size: 0.7rem;
  opacity: 0.5;
  margin: 0;
  color: rgba(255,255,255,.85);
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 15px;
  white-space: nowrap;
}

footer.footer .footer-links{
  list-style: none;
  padding: 0;
}
footer.footer .footer-links li{ margin: 0; }
footer.footer .footer-links a{
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.3s;
  white-space: nowrap;
}
footer.footer .footer-links a:hover{ color: #ff40a1; }

footer.footer .social-icon{
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  opacity: 1;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
footer.footer .social-icon:hover{
  opacity: 1;
  color: #ff40a1;
  transform: translateY(-3px);
}

/* Footer: en móvil la cápsula de 3 columnas rompe el ancho — apilar y centrar */
@media (max-width: 768px){
  footer.footer{
    margin-top: -80px;
    padding: 28px 0 20px;
  }
  footer.footer .footer-capsule{
    width: min(92vw, 100%);
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 20px;
    border-radius: 28px;
    justify-items: center;
  }
  footer.footer .footer-brand,
  footer.footer .footer-links,
  footer.footer .footer-social{
    justify-self: center !important;
    justify-content: center;
    flex-wrap: wrap;
  }
  footer.footer .footer-links{
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  footer.footer .tagline{
    border-left: none;
    padding-left: 0;
    white-space: normal;
    text-align: center;
  }
  body.bg-brand:has(#deep-contacto) footer.footer{
    margin-top: -70px;
    padding-top: clamp(26px, 5vw, 38px);
    padding-bottom: clamp(22px, 5vw, 34px);
  }
  body.bg-brand:has(#deep-contacto) #contacto{
    padding-bottom: clamp(165px, 32vw, 240px);
  }
}

/* Contacto: formulario no fuerza ancho en móvil */
@media (max-width: 768px){
  #contacto .contact-grid,
  #contacto .contact-card{
    min-width: 0;
    max-width: 100%;
  }
}

/* =========================
   HERO – Fondo hero.png (ventana fija)
   ========================= */
.hero{
  position: relative;
  z-index: 0;
  /* 1) AJUSTE CONTENEDOR HERO */
  /* Compensa el padding-top global del body (navbar fixed),
     para que el hero llegue hasta arriba */
  margin-top: -60px;
  min-height: calc(100vh + 60px);
  min-height: calc(100dvh + 60px);
  display: flex;
  align-items: center;
  justify-content: center;

  /* 4) COMPATIBILIDAD NAV */
  padding-top: 60px; /* altura nav actual (body padding-top) */
  padding-bottom: 0;

  /* 2) FONDO HERO — escritorio: hero-tablet (~60 KiB) mejora LCP; hero.webp solo en pantallas muy anchas */
  background-image:
    linear-gradient(rgba(10,5,26,0.34), rgba(10,5,26,0.34)),
    url('image/hero-tablet.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat;
}
@media (min-width: 1920px){
  .hero{
    background-image:
      linear-gradient(rgba(10,5,26,0.34), rgba(10,5,26,0.34)),
      url('image/hero.webp');
  }
}
@media (max-width: 960px){
  .hero{
    padding-top: 60px;
    /* fixed + iOS: evita recortes y “saltos” del fondo */
    background-attachment: scroll, scroll;
  }
}

/* Home: hero + autoridad + tres capas + demo comparten una sola capa de fondo (asistente / hero-tablet) */
.home-hero-stack{
  --laraia-stack-gap: var(--laraia-section-pad-y, clamp(40px, 7vw, 72px));
  position: relative;
  z-index: 0;
  margin-top: -60px;
  background-image:
    linear-gradient(rgba(10,5,26,0.34), rgba(10,5,26,0.34)),
    url('image/hero-tablet.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat;
}
@media (min-width: 1920px){
  .home-hero-stack{
    background-image:
      linear-gradient(rgba(10,5,26,0.34), rgba(10,5,26,0.34)),
      url('image/hero.webp');
  }
}
@media (max-width: 960px){
  .home-hero-stack{
    background-attachment: scroll, scroll;
  }
}
.home-hero-stack .hero{
  margin-top: 0;
  background: none !important;
}
/* Ritmo vertical unificado dentro del stack (≈ espacio entre bloques de la landing) */
.home-hero-stack > .section:not(.home-hero-stack__authority){
  padding-top: calc(var(--laraia-stack-gap) * 0.5) !important;
  padding-bottom: calc(var(--laraia-stack-gap) * 0.5) !important;
}
.home-hero-stack > .home-hero-stack__authority.section{
  padding-top: clamp(14px, 2.5vw, 28px) !important;
  padding-bottom: calc(var(--laraia-stack-gap) * 0.5) !important;
}
.home-hero-stack > #demo.home-hero-stack__demo{
  padding-top: calc(var(--laraia-stack-gap) * 0.45) !important;
  padding-bottom: calc(var(--laraia-stack-gap) * 0.55) !important;
  position: relative;
  z-index: 1;
}

/* Banda tridente específica entre hero y demo (sin ventana) */
.home-tridente-band{
  position: relative;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.home-tridente-band > .section{
  background: transparent !important;
}

/* Terminal: se mantiene visible al bajar por hero+demo; al entrar #servicios cambia el fondo (bloque siguiente) */
.home-hero-stack #demo-chat.demo-terminal{
  position: sticky;
  top: max(96px, calc(env(safe-area-inset-top, 0px) + 72px));
  z-index: 6;
  margin-top: clamp(12px, 3vw, 28px);
  margin-bottom: clamp(28px, 6vw, 56px);
}
@media (max-width: 960px){
  .home-hero-stack #demo-chat.demo-terminal{
    top: max(88px, calc(env(safe-area-inset-top, 0px) + 64px));
  }
}

/* el contenido sí necesita respirar bajo la navbar fixed */
.hero .hero__wrap{
  /* 3) CONTENIDO */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  width: min(90%, 100%);
  max-width: min(var(--container-max), 100%);
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}
@media (min-width: 981px){
  .hero .hero__wrap{ flex-wrap: nowrap; }
}
@media (max-width: 960px){
  .hero .hero__wrap{ width: min(92vw, 100%); }
}

/* texto del hero sin sombras inventadas */
.hero h1,
.hero .lead{ color:#fff; text-shadow:none; }

/* Hero móvil / tablet estrecha: título bajo la cápsula, CTAs apilados, aire para FABs */
@media (max-width: 768px){
  .main-header{ top: 10px; z-index:1100; }
  .home-hero-stack{
    background-image: linear-gradient(rgba(10,5,26,.78), rgba(10,5,26,.92));
    background-attachment: scroll;
  }
  .hero{
    padding-top: calc(clamp(92px, 26vw, 120px) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    min-height: auto;
    align-items: flex-start;
    /* Ultra-lite móvil: sin imagen de fondo (reduce LCP) */
    background-image: linear-gradient(rgba(10,5,26,.78), rgba(10,5,26,.92));
    background-attachment: scroll;
  }
  .home-hero-stack .hero{
    background: none !important;
  }
  .hero h1{
    font-size: clamp(1.65rem, 5.4vw, 2.15rem);
    line-height: 1.14;
    margin: 0 0 12px;
  }
  .hero .lead{ font-size: 0.98rem; }
  .hero .hero__wrap{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding-top: 4px;
  }
  .hero .hero__wrap > div:first-child,
  .hero .hero__wrap > .hero__copy{
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
  }
  .container.hero__wrap{ text-align: center !important; }
  .hero .hero__badges{
    justify-content: center;
    margin: 10px 0;
    min-height: 3.5rem;
    align-items: center;
  }
  .hero .hero__badges:first-of-type{ margin-top: 0; }
  .cta-buttons{
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }
  .hero .cta-buttons .btn-primary-lara,
  .hero .cta-buttons .btn-secondary-lara,
  .hero .cta-buttons button.btn-primary-lara,
  .hero .cta-buttons button.btn-secondary-lara{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 0.82rem;
    letter-spacing: 1.2px;
  }
  .hero-bot{
    order: 2;
    margin-top: 8px;
    max-width: min(260px, 72vw);
    flex: 0 1 auto !important;
  }
}

@media (max-width: 380px){
  .hero h1{ font-size: 1.5rem; }
}

/* Legado: pantallas muy estrechas */
@media (max-width: 640px){
  .hero .hero__wrap{ gap: 16px !important; }
}

/* Botones/pastillas: volver al look original (sin glass nuevo) */
.hero .tag,
.hero .pill{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.18);
  background: rgba(90, 0, 255, .22); /* tinte morado suave */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* (Eliminado) HERO CTAs legacy (.hero__cta) ya no existen en index.html */

/* =========================
   Floating Capsule Nav (unificada con logo dentro)
   ========================= */
.main-header{
  position: fixed;
  top: 25px;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  display: flex;
  justify-content: center;
  pointer-events: none;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.main-header::before{ display:none; }

.nav-capsule{
  pointer-events: auto;
  background: rgba(10, 5, 26, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 64, 161, 0.4);
  border-radius: 60px;
  padding: 8px 15px 8px 25px;
  display: flex;
  align-items: center;
  gap: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.nav-capsule .logo img{
  height: 28px;
  display: block;
  filter: drop-shadow(0 0 5px rgba(255, 64, 161, 0.3));
}

.nav-capsule .nav-links{
  display: flex;
  align-items: center;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-capsule .nav-links a{
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.nav-capsule .nav-links a:not(.nav-cta):hover{
  color: #ff40a1;
  text-shadow: 0 0 8px rgba(255, 64, 161, 0.6);
}

.nav-capsule .nav-links a.nav-cta,
.nav-capsule .nav-links button.nav-cta{
  background: transparent;
  border: 1px solid rgba(255, 64, 161, 0.55);
  padding: 10px 22px;
  border-radius: 50px;
  color: #ff40a1 !important;
  box-shadow: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-capsule .nav-links a.nav-cta:hover,
.nav-capsule .nav-links button.nav-cta:hover{
  background: #ff40a1;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 64, 161, 0.5);
}

@media (max-width:960px){
  .nav-capsule{ gap: 12px; padding: 10px 14px; border-radius: 26px; max-width: 95vw; }
  .nav-capsule .nav-links{
    position: fixed;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 420px);
    max-height: min(82vh, calc(100vh - 96px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(10, 5, 26, 0.92);
    border: 1px solid rgba(255, 64, 161, 0.25);
    border-radius: 18px;
    /* Espacio para la X (.laraia-menu-close) + contenido + safe area iOS */
    padding: 52px 14px max(16px, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
  }
  .nav-capsule .nav-links.active{ display: flex; }
  /* Misma zona táctil para enlaces y CTA (WCAG ~44px) */
  .nav-capsule .nav-links > li > a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    min-height: 44px;
    border-radius: 12px;
    box-sizing: border-box;
  }
  .nav-capsule .nav-links > li > button.nav-cta{
    width: 100%;
    padding: 14px 12px;
    min-height: 44px;
    box-sizing: border-box;
  }
  /* Copiloto al pie del panel: separado, centrado, sin solaparse con el scroll */
  .nav-capsule .nav-links > .nav-copilot-item{
    justify-content: center;
    margin-top: 8px;
    padding-top: 14px;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 64, 161, 0.22);
    flex-shrink: 0;
  }
  .nav-capsule .nav-links > .nav-copilot-item .nav-copilot__label{
    min-height: 44px;
    padding: 4px 10px;
    box-sizing: border-box;
    justify-content: center;
  }
}

/* Modo Copiloto en barra (todas las páginas; un solo #copilot-switch) */
.nav-copilot{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Copiloto al final del menú: control global visualmente diferenciado */
.nav-capsule .nav-links > .nav-copilot-item{
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  position: relative;
}
@media (min-width: 961px){
  .nav-capsule .nav-links > .nav-copilot-item{
    padding-left: 12px;
    margin-left: 8px;
  }
  .nav-capsule .nav-links > .nav-copilot-item::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,64,161,.0), rgba(255,64,161,.42), rgba(124,60,255,.0));
  }
}
.nav-copilot__label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  user-select: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.nav-copilot__kicker{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.93);
  white-space: nowrap;
}
.nav-copilot__label:hover{
  border-color: rgba(255,120,200,.5);
  background: rgba(255,255,255,.1);
}
.nav-copilot__label:focus-within{
  border-color: rgba(255,120,200,.65);
  box-shadow: 0 0 0 2px rgba(255,120,200,.2);
}
.nav-copilot__label.is-on{
  border-color: rgba(255,160,220,.62);
  background: linear-gradient(145deg, rgba(89,0,255,.24), rgba(255,64,161,.2));
  box-shadow: 0 0 18px rgba(255,64,161,.2), 0 0 22px rgba(89,0,255,.18);
}
@media (max-width: 520px){
  .nav-copilot__kicker{ display: none; }
}
.nav-copilot .v02-copilot-switch{
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.nav-copilot .v02-copilot-switch input{
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.nav-copilot .v02-copilot-slider{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 120, 200, 0.5);
  box-shadow: 0 0 14px rgba(255, 64, 161, 0.14) inset, 0 0 16px rgba(89,0,255,.08);
  transition: background 0.22s ease, box-shadow 0.22s ease, border-color .22s ease;
}
.nav-copilot .v02-copilot-slider::before{
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26), 0 0 8px rgba(255,255,255,.4);
  transition: transform 0.22s ease;
}
.nav-copilot .v02-copilot-switch input:checked + .v02-copilot-slider{
  background: linear-gradient(90deg, rgba(89, 0, 255, 0.9), rgba(255, 64, 161, 0.82));
  border-color: rgba(255,160,220,.7);
  box-shadow: 0 0 18px rgba(139, 80, 255, 0.4) inset, 0 0 18px rgba(255,64,161,.25);
}
.nav-copilot .v02-copilot-switch input:checked + .v02-copilot-slider::before{
  transform: translate(20px, -50%);
}
.nav-copilot .v02-copilot-switch input:focus-visible + .v02-copilot-slider{
  outline: 2px solid rgba(255,255,255,.96);
  outline-offset: 2px;
}

.v02-copilot-invite{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  text-align: left;
}

/* =========================
   CASOS — mismo Tridente global; solo filo en cards + tipografía alineada al resto
   ========================= */
#casos .card.service{
  border: 1px solid rgba(255, 64, 161, 0.55);
}

/* =========================
   Textos fuera de cards sobre fondos (blanco + halo sutil)
   ========================= */
#tridente h2, #tridente .lead,
#servicios h2, #servicios .lead,
#asistente h2, #asistente .lead,
#listado > h2, #listado > .lead,
#autoridad-laraia .lead,
#que-hace-laraia h2, #que-hace-laraia .lead,
#desarrollo-web-home h2, #desarrollo-web-home .lead,
#automatizacion-home h2, #automatizacion-home .lead,
#encaja-todo h2, #encaja-todo .lead,
#sectores h2, #sectores .lead,
#integraciones h2, #integraciones .lead,
#metodo h2, #metodo .lead,
#metodo .method-highlight__txt,
#casos h2, #casos .lead,
#faq h2, #faq .lead,
#contacto h2, #contacto .lead{
  color:#fff;
  /* halo blanco muy sutil + separación mínima */
  text-shadow:
    0 0 10px rgba(255,255,255,.14),
    0 8px 18px rgba(0,0,0,.22);
}

/* Fondos TRIDENTE: sombra NEGRA muy leve (sin halo blanco) */
#tridente h2, #tridente .lead,
#servicios h2, #servicios .lead,
#asistente h2, #asistente .lead,
#listado > h2, #listado > .lead,
#autoridad-laraia .lead,
#que-hace-laraia h2, #que-hace-laraia .lead,
#desarrollo-web-home h2, #desarrollo-web-home .lead,
#automatizacion-home h2, #automatizacion-home .lead,
#encaja-todo h2, #encaja-todo .lead,
#casos h2, #casos .lead{
  text-shadow: 0 10px 22px rgba(0,0,0,.38);
}

/* Fondos TRIDENTE: textos blancos en negrita (fuera de cards) */
#tridente h2, #tridente .lead,
#servicios h2, #servicios .lead,
#asistente h2, #asistente .lead,
#listado > h2, #listado > .lead,
#autoridad-laraia .lead,
#que-hace-laraia h2, #que-hace-laraia .lead,
#desarrollo-web-home h2, #desarrollo-web-home .lead,
#automatizacion-home h2, #automatizacion-home .lead,
#encaja-todo h2, #encaja-todo .lead,
#casos h2, #casos .lead{
  font-weight: 700;
}

/* =========================
   INTEGRACIONES – recuperar mini cards con iconos
   ========================= */
#integraciones .integrations{
  display:flex;
  gap:12px;
  flex-wrap:nowrap; /* una sola fila */
  justify-content:center;
  margin-top: 18px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px;
  max-width: 100%;
  box-sizing: border-box;
}
#integraciones .integration{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255, 64, 161, 0.60);
  background: rgba(255,255,255,.10);
  color:#fff;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  min-width: 132px;
  justify-content: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  flex: 0 0 auto;
}
#integraciones .integration i{
  font-size: 1.1rem;
  line-height: 1;
  color:#fff;
}
#integraciones .integration span{ font-weight:700; }
#integraciones .integration--n8n .integration__mark{
  font-weight:900;
  letter-spacing:.02em;
  padding:.18rem .5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}

/* Colores de marca para los logos */
#integraciones .integration[aria-label="WhatsApp"] i{ color:#25D366; }
#integraciones .integration[aria-label="Telegram"] i{ color:#229ED9; }
#integraciones .integration[aria-label="Google Calendar"] i{ color:#4285F4; }
#integraciones .integration[aria-label="Google Sheets"] i{ color:#34A853; }
#integraciones .integration[aria-label="Stripe"] i{ color:#635BFF; }
#integraciones .integration[aria-label="PayPal"] i{ color:#0070BA; }
#integraciones .integration--n8n .integration__mark{
  background: linear-gradient(90deg, var(--grad-b), var(--grad-c));
  border-color: rgba(255,255,255,.22);
  color:#fff;
}

/* Hover motion (como otras secciones) */
#integraciones .integration:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255, 64, 161, 0.85);
  background: rgba(255,255,255,.14);
  box-shadow:
    0 12px 26px rgba(0,0,0,.28),
    0 0 18px rgba(255, 64, 161, .18);
}

@media (max-width: 860px){
  #integraciones .integrations{ justify-content:flex-start; }
  #integraciones .integration{
    min-width: 124px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  #integraciones .integration span{ font-size: .92rem; }
}

/* Móvil: evita fila infinita que ensancha el layout; rejilla compacta */
@media (max-width: 640px){
  #integraciones .integrations{
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding-inline: 4px;
  }
  #integraciones .integration{
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    max-width: 200px;
  }
}

/* =========================
   MÉTODO – separación y centrado
   ========================= */
#metodo .lead{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  max-width: 980px;
  margin-bottom: 14px;
}
#metodo .method-highlight{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  margin: 18px auto 24px;
  max-width: 980px;
}
#metodo .method-highlight__txt{
  display:block;
  text-align:center;
  max-width: 820px;
  margin: 0 auto;
}
#metodo .method-highlight__badge,
#metodo .method-highlight__txt{
  text-shadow: none !important;
}
#metodo .grid.services.method{
  margin-top: 10px;
}

/* =========================
   DEMO – Fondo tipo Sectores (sectores03)
   Nota: si añades `image/sectores03.png`, cámbialo aquí.
   ========================= */
#demo{
  position: relative;
  z-index: 0;
  background: none !important;
  padding-top: 72px;
  padding-bottom: 72px;
}
#demo::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  margin-left:-50vw;
  width:100vw;
  height:100%;
  z-index:-1;
  pointer-events:none;
  background-image:
    /* sombreado suave en bordes (arriba/abajo) */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0px,
      rgba(10,5,26,0.00) 22px,
      rgba(10,5,26,0.00) calc(100% - 22px),
      rgba(0,0,0,0.55) 100%
    ),
    linear-gradient(rgba(10,5,26,0.45), rgba(10,5,26,0.45)),
    url('image/sectores.webp');
  background-attachment: fixed, fixed;
  background-size: cover;
  background-position: center;
}
/* Home: demo va sobre el fondo hero del stack (sin capa sectores) */
.home-hero-stack #demo::before{
  content: none !important;
  display: none !important;
  background-image: none !important;
}
#demo h2,
#demo .lead{
  color:#fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.38);
}
@media (min-width: 769px){
  #demo h2{
    font-size: 40px;
    line-height: 1.2;
  }
}

/* =========================
   OPINIONES + CTA FINAL – fondo Sectores03 (mismo para ambos)
   Nota: cuando exista `image/sectores03.png`, cambia la URL aquí.
   ========================= */
#opiniones,
#diferenciacion,
#cta-final,
#suscribirse{
  position: relative;
  z-index: 0;
  background: none !important;
}

#opiniones::before,
#diferenciacion::before,
#cta-final::before,
#suscribirse::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  margin-left:-50vw;
  width:100vw;
  height:100%;
  z-index:-1;
  pointer-events:none;
  background-image:
    /* sombreado suave en bordes (arriba/abajo) */
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0px,
      rgba(10,5,26,0.00) 22px,
      rgba(10,5,26,0.00) calc(100% - 22px),
      rgba(0,0,0,0.55) 100%
    ),
    linear-gradient(rgba(10,5,26,0.45), rgba(10,5,26,0.45)),
    url('image/sectores03.webp');
  background-attachment: fixed, fixed;
  background-size: cover;
  background-position: center;
}

/* iOS/Android: fondos fixed + 100vw suelen provocar ancho “raro” y scroll horizontal */
@media (max-width: 768px){
  #sectores::before,
  #integraciones::before,
  #metodo::before,
  #demo::before,
  #opiniones::before,
  #diferenciacion::before,
  #cta-final::before,
  #suscribirse::before{
    background-attachment: scroll, scroll !important;
  }
}

/* Texto fuera de cards en Opiniones / diferenciación + suscripción blog */
#opiniones h2,
#opiniones .lead,
#diferenciacion h2,
#diferenciacion .lead,
#suscribirse h2,
#suscribirse .lead{
  color:#fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.38);
}

/* Blog: tarjeta blanca — título y subtítulo en oscuro (el h2 global #suscribirse es blanco para fondos oscuros) */
#suscribirse .blog-suscribe h2{
  color: rgba(26, 20, 40, 0.92) !important;
  text-shadow: none !important;
}
#suscribirse .blog-suscribe .lead{
  color: #0a051a !important;
  text-shadow: none !important;
}

/* =========================
   DEMO – Terminal de Precisión (maduro)
   ========================= */
.demo-terminal {
  max-width: 850px;
  margin: 40px auto;
  background: #0a051a; /* Negro profundo sólido para evitar ruido con el fondo fijo */
  border: 1px solid rgba(255, 64, 161, 0.3);
  border-radius: 10px;
  /* Neon glow trasero (sin recorte por overflow) */
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.8),
    0 0 26px rgba(89, 0, 255, 0.18),
    0 0 46px rgba(255, 64, 161, 0.28);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", "Fira Code", "Courier New", monospace;
  position: relative;
}

.terminal-header {
  background: #150b2e;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 64, 161, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terminal-header .status-text {
  color: #ff40a1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.terminal-body {
  height: 380px;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Diferenciación Clara de Mensajes */
.message {
  padding: 12px 15px;
  border-radius: 6px;
  max-width: 90%;
  line-height: 1.4;
  font-size: 0.9rem;
}

.terminal-prefix {
  display: block;
  font-weight: 800;
  font-size: 0.75rem;
  margin-bottom: 5px;
  text-transform: uppercase;
}

/* Estilo IA: Minimalista y Neon */
.message.ai {
  align-self: flex-start;
  background: rgba(89, 0, 255, 0.05);
  border: 1px solid rgba(89, 0, 255, 0.2);
  color: #fff;
}
.message.ai .terminal-prefix { color: #ff40a1; }

/* Estilo Usuario: Diferenciado */
.message.user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}
.message.user .terminal-prefix { color: #5b9dff; }
.message.user .terminal-prefix{ text-align:right; }

.message p { margin: 0; }
.message ol { margin: 10px 0 0 18px; padding: 0; }
.message li { margin: 6px 0; }

/* Barra de Entrada */
.terminal-input-bar {
  background: #05020d;
  padding: 15px 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(255, 64, 161, 0.2);
}

.terminal-input-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  font-family: inherit;
  margin: 0;
  max-width: none;
}

/* Botón demo unificado: usa .btn.btn-primary en el HTML */
#demo-send.btn{
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: 800;
}

.text-white{ color: #ffffff; }
.text-light{ color: rgba(255,255,255,0.92); }
.text-shadow-deep{ text-shadow: 0 4px 15px rgba(0,0,0,0.9); }

/* =================================================================
   Orientación landscape en móvil/tablet: poca altura útil (teclado, notch)
   ================================================================= */
@media (orientation: landscape) and (max-height: 520px){
  body{
    padding-top: 48px;
  }
  .main-header{
    top: 6px;
  }
  .hero{
    margin-top: -48px;
    min-height: auto !important;
    padding-top: max(64px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)) !important;
    background-attachment: scroll, scroll;
  }
  .hero .hero__wrap{
    width: min(96vw, 100%) !important;
    max-width: min(var(--container-max), 100%) !important;
  }
  #contacto{
    min-height: auto;
    padding-bottom: 120px;
  }
  footer.footer{
    margin-top: -60px;
  }
}

/* Tarjetas y celdas flex/grid en landing: min-width 0 evita desbordes */
body.bg-brand .card.service,
body.bg-brand .integration,
body.bg-brand .contact-card{
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
  CLS (móvil/hero): evitar que el header/nav cambie al cargar
  ========================================================= */
body.bg-brand .main-header{
  position: fixed;
  top: 25px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  height: auto;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.bg-brand .main-header::before{ display:none !important; }

/* =========================================================
   Landing: familias visuales por GRUPOS (no por sección)
   Secuencia narrativa: oscuro -> claro -> oscuro -> claro -> oscuro
   ========================================================= */
.landing-family{ position: relative; }

/* Ritmo vertical unificado: home + landing + servicios + blog (mismo token) */
body.bg-brand{
  --laraia-section-pad-y: clamp(40px, 7vw, 72px);
}

/* Claro: conversión (mismo velo Tridente que contacto / cierre) */
body.bg-brand .landing-family--conversion{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Oscuro: validación (ventana fija) */
body.bg-brand .landing-family--validacion{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores03.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Claro técnico: sistema/detalle (mismo velo Tridente que contacto) */
body.bg-brand .landing-family--sistema{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Oscuro final: cierre (ventana fija tipo sectores) */
body.bg-brand .landing-family--cierre{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Aire bajo «Agendar»; el solape del footer ocupa solo la franja inferior (fondo Tridente) */
body.bg-brand .landing-family--cierre #contacto .contact-cta-row{
  margin-bottom: clamp(56px, 9vw, 104px);
}

/* En móvil, evita attachment fixed para estabilidad */
@media (max-width: 768px){
  body.bg-brand .landing-family--validacion,
  body.bg-brand .landing-family--cierre{
    background-attachment: scroll;
  }
}

/* Evita "costuras" al unir secciones dentro de familias visuales (incl. #deep-contacto) */
body.bg-brand .landing-family section.section{
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Mismo padding vertical en todas las secciones .section de cada familia */
body.bg-brand .landing-family .section{
  padding-top: calc(var(--laraia-section-pad-y) * 0.5) !important;
  padding-bottom: calc(var(--laraia-section-pad-y) * 0.5) !important;
}

/* Blog: listado y suscripción (fuera de .landing-family) */
body.page-blog.bg-brand main > .section{
  padding-top: calc(var(--laraia-section-pad-y) * 0.5) !important;
  padding-bottom: calc(var(--laraia-section-pad-y) * 0.5) !important;
}

/* Suscripción blog: mismo aire arriba y abajo (el bloque anterior lo igualaba en exceso y el footer -80px lo comía) */
body.page-blog.bg-brand main > #suscribirse.section{
  padding-top: clamp(56px, 9vw, 104px) !important;
  padding-bottom: clamp(88px, 13vw, 148px) !important;
}

/* Quitar fondos individuales para que mande el wrapper */
body.bg-brand .home-hero-stack #problema,
body.bg-brand .home-hero-stack #sistema-laraia,
body.bg-brand .home-hero-stack #como-funciona,
body.bg-brand .home-hero-stack #autoridad-laraia,
body.bg-brand .home-hero-stack #demo,
body.bg-brand .home-hero-stack #que-hace-laraia,
body.bg-brand .home-hero-stack #desarrollo-web-home,
body.bg-brand .home-hero-stack #automatizacion-home,
body.bg-brand .landing-family--conversion #encaja-todo,
body.bg-brand .landing-family--conversion #servicios,
body.bg-brand .landing-family--conversion #beneficios-resultados,
body.bg-brand .landing-family--conversion #teaser-copiloto,
body.bg-brand .landing-family--validacion #sectores,
body.bg-brand .landing-family--validacion #diferenciacion,
body.bg-brand .landing-family--validacion #cta-final,
body.bg-brand .landing-family--sistema #integraciones,
body.bg-brand .landing-family--cierre #faq,
body.bg-brand .landing-family--cierre #contacto,
body.bg-brand .landing-family--cierre #deep-contacto{
  background: transparent !important;
}

/* FAQ con fondo sectores02 (ventana fija en desktop) */
body.bg-brand .landing-family--cierre #faq{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores02.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
@media (max-width: 768px){
  body.bg-brand .landing-family--cierre #faq{
    background-attachment: scroll !important;
  }
}

body.bg-brand .home-hero-stack #problema::before,
body.bg-brand .home-hero-stack #sistema-laraia::before,
body.bg-brand .home-hero-stack #como-funciona::before,
body.bg-brand .home-hero-stack #autoridad-laraia::before,
body.bg-brand .home-hero-stack #demo::before,
body.bg-brand .home-hero-stack #que-hace-laraia::before,
body.bg-brand .home-hero-stack #desarrollo-web-home::before,
body.bg-brand .home-hero-stack #automatizacion-home::before,
body.bg-brand .landing-family--conversion #encaja-todo::before,
body.bg-brand .landing-family--conversion #servicios::before,
body.bg-brand .landing-family--conversion #beneficios-resultados::before,
body.bg-brand .landing-family--conversion #teaser-copiloto::before,
body.bg-brand .landing-family--validacion #sectores::before,
body.bg-brand .landing-family--validacion #diferenciacion::before,
body.bg-brand .landing-family--validacion #cta-final::before,
body.bg-brand .landing-family--sistema #integraciones::before,
body.bg-brand .landing-family--cierre #faq::before,
body.bg-brand .landing-family--cierre #contacto::before,
body.bg-brand .landing-family--cierre #deep-contacto::before{
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* FAQ: fondo propio sectores02 con ventana fija (desktop) */
body.bg-brand .landing-family--cierre #faq{
  position: relative;
  z-index: 0;
  background: transparent !important;
}
body.bg-brand .landing-family--cierre #faq::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores02.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed, fixed !important;
}
@media (max-width: 768px){
  body.bg-brand .landing-family--cierre #faq::before{
    background-attachment: scroll, scroll !important;
  }
}

/* Demo: continuidad con el fondo hero del stack (capa única en .home-hero-stack) */
body.bg-brand .home-hero-stack #demo{
  position: relative;
  z-index: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: none;
  background: transparent !important;
}
/* Menos aire entre automatización y demo */
body.bg-brand .home-hero-stack #automatizacion-home + #demo{
  padding-top: clamp(28px, 4.5vw, 48px) !important;
}

/* LaraIA scoped slots: variante clara para respetar patrón visual por familia */
.laraia-slots-wrap[data-theme="light"] .laraia-slot:not(:empty){
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(10, 5, 26, 0.14);
  box-shadow: 0 8px 24px rgba(10, 5, 26, 0.08);
}
.laraia-slots-wrap[data-theme="light"] .lara-block{
  color: rgba(10, 5, 26, 0.92);
}
.laraia-slots-wrap[data-theme="light"] .lara-block p,
.laraia-slots-wrap[data-theme="light"] .lara-block li,
.laraia-slots-wrap[data-theme="light"] .lara-block h3{
  color: inherit;
}
.laraia-slots-wrap[data-theme="light"] .lara-block button{
  border: 1px solid rgba(10, 5, 26, 0.18);
  background: rgba(255, 255, 255, 0.95);
  color: rgba(10, 5, 26, 0.95);
}
.lara-block-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.lara-block-btn{
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.lara-pack-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.lara-pack-card{
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
}
.laraia-slots-wrap[data-theme="light"] .lara-pack-card{
  border-color: rgba(10, 5, 26, 0.14);
  background: rgba(255, 255, 255, 0.86);
}
body.bg-brand .home-hero-stack #demo .demo-content,
body.bg-brand .home-hero-stack #demo #demo-chat{
  margin-left: auto;
  margin-right: auto;
}

/* Asegura visibilidad del logo en la cápsula de navegación */
.nav-capsule .logo img{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Servicios: compactar tarjetas para igualar el bloque "Casos de uso" */
body.bg-brand #servicios .card.service,
body.bg-brand #que-hace-laraia .card.service,
body.bg-brand #encaja-todo .card.service{
  border: 1px solid rgba(255, 64, 161, 0.55) !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 20px;
  gap: 10px;
}
body.bg-brand #servicios .card.service h3,
body.bg-brand #que-hace-laraia .card.service h3,
body.bg-brand #encaja-todo .card.service h3{
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.25;
}
body.bg-brand #servicios .card.service p,
body.bg-brand #que-hace-laraia .card.service p,
body.bg-brand #encaja-todo .card.service p{
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.45;
}
body.bg-brand #servicios .card-ctas,
body.bg-brand #que-hace-laraia .card-ctas{
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
body.bg-brand #servicios .card-ctas .btn-primary-lara,
body.bg-brand #servicios .card-ctas .btn-secondary-lara,
body.bg-brand #que-hace-laraia .card-ctas .btn-primary-lara,
body.bg-brand #que-hace-laraia .card-ctas .btn-secondary-lara{
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 0.76rem;
  letter-spacing: .08em;
}

/* Enlaces en leads sobre fondo hero del stack (home) */
body.bg-brand .home-hero-stack #desarrollo-web-home .lead a,
body.bg-brand .home-hero-stack #automatizacion-home .lead a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Recuperar tono gris en cards de Validación */
body.bg-brand #sectores .card.service,
body.bg-brand #opiniones .card.service,
body.bg-brand #diferenciacion .card.service,
body.bg-brand #cta-final .card.cta{
  background: rgba(236, 236, 241, 0.94) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Sectores: recuperar fondo por card (inmobiliarias/clinicas/hosteleria) */
body.bg-brand #sectores .card.service.sectores-card{
  position: relative;
  overflow: hidden;
  background-image: var(--sector-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body.bg-brand #sectores .card.service.sectores-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(245,245,250,0.60);
  animation: sectorImageReveal 7.5s ease-in-out infinite alternate;
}
body.bg-brand #sectores .card.service.sectores-card > *{
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.78),
    0 1px 8px rgba(0,0,0,.25);
}
@keyframes sectorImageReveal{
  0%{ background: rgba(245,245,250,0.68); }
  100%{ background: rgba(245,245,250,0.34); }
}

/* Aparición suave al hacer scroll */
[data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}
@media (max-width: 768px){
  [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Accesibilidad móvil: mejora de contraste en CTAs sobre cards claras */
  body.bg-brand #servicios .card.service .btn-primary-lara,
  body.bg-brand #casos .card.service .btn-primary-lara,
  body.bg-brand #contacto .contact-card .btn-primary-lara{
    color: #8f0050 !important;
    border-color: #c21874 !important;
    background: rgba(255, 64, 161, 0.14) !important;
    text-shadow: none !important;
  }
  body.bg-brand #servicios .card.service .btn-secondary-lara,
  body.bg-brand #casos .card.service .btn-secondary-lara{
    color: #8f0050 !important;
    border-color: #c21874 !important;
    background: rgba(255, 64, 161, 0.06) !important;
    text-shadow: none !important;
  }
  body.bg-brand #servicios .card.service p,
  body.bg-brand #casos .card.service p,
  body.bg-brand #contacto .contact-card,
  body.bg-brand #contacto .contact-card .hint,
  body.bg-brand #contacto .contact-card label{
    color: #2a223f !important;
  }
}

/* Home — método LaraIA / sistema: iconos Font Awesome en degradado corporativo */
#metodo .service__icon .fa-solid,
#sistema-laraia .service__icon .fa-solid{
  display: inline-block;
  background-image: linear-gradient(135deg, var(--grad-b), var(--grad-c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Micro-agrande en cards */
@media (min-width: 769px){
  body.bg-brand .grid.services > .card.service,
  body.bg-brand .grid.services.sectors > .card.service,
  body.bg-brand #opiniones .card.service,
  body.bg-brand #diferenciacion .card.service,
  body.bg-brand #metodo .card.service{
    transition: transform .22s ease, box-shadow .22s ease;
    transform: translateY(0) scale(1);
  }
  body.bg-brand .grid.services > .card.service:hover,
  body.bg-brand .grid.services.sectors > .card.service:hover,
  body.bg-brand #opiniones .card.service:hover,
  body.bg-brand #diferenciacion .card.service:hover,
  body.bg-brand #metodo .card.service:hover{
    transform: translateY(-3px) scale(1.018);
  }
  body.bg-brand #sectores .card.service.sectores-card:hover::before{
    background: rgba(245,245,250,0.28);
  }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  body.bg-brand #sectores .card.service.sectores-card::before{ animation:none; }
}

/* CLS móvil: desactivar animaciones no compuestas en elementos interactivos */
@media (max-width: 768px){
  .btn-primary-lara,
  .btn-secondary-lara,
  .btn, .btn-primary, .btn--fill,
  .btn-secondary, .btn-glass, .btn-outline, .btn--ghost, .btn--glass,
  .nav-capsule .nav-links a,
  footer.footer .footer-links a,
  footer.footer .social-icon,
  .whatsapp-float,
  #cookie-banner .btn-primary-lara,
  #cookie-banner .btn-secondary-lara{
    transition: none !important;
  }

  .btn-primary-lara:hover,
  .btn-primary-lara:focus-visible,
  .btn-secondary-lara:hover,
  .btn-secondary-lara:focus-visible,
  .whatsapp-float:hover,
  footer.footer .social-icon:hover{
    transform: none !important;
    box-shadow: inherit;
  }

  .nav-capsule .logo img{
    filter: none !important;
  }

  /* Evita animación de degradado en móvil (reportada como no compuesta) */
  .laraia-chat-bubble-text,
  footer.footer .brand-name{
    animation: none !important;
    background-position: 50% 50% !important;
  }
}

/* Todas las cards de la landing con filo rosa */
body.bg-brand .card.service,
body.bg-brand .card.cta,
body.bg-brand .contact-card{
  border: 1px solid rgba(255, 64, 161, 0.55) !important;
}

/* Cierre: sin recorte redondeado ni marco en el wrapper */
body.bg-brand #deep-contacto{
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ========== Página servicio: Asistente IA para web (asistente-ia-web.html) ========== */
.page-svc-asistente{
  --svc-minicard-bg: rgba(48, 44, 62, 0.82);
}
.page-svc-asistente h1 .grad-text,
.page-svc-asistente h2 .grad-text{
  color: transparent !important;
  background: linear-gradient(90deg, var(--grad-b), var(--grad-c));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
/* Mismo compensación que .hero en index: el hero llega al borde superior del viewport (sin franja #0a051a) */
.page-svc-asistente main{
  margin-top: -60px;
  padding-top: 0;
  overflow-x: clip;
}

/* Hero + micro + “qué es”: misma ventana que index (#que-es-asistente + hero) */
.page-svc-asistente .svc-hero-stack{
  position: relative;
  z-index: 0;
  padding-top: 60px;
  background-image:
    linear-gradient(rgba(10,5,26,0.34), rgba(10,5,26,0.34)),
    url('image/hero-tablet.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (min-width: 1920px){
  .page-svc-asistente .svc-hero-stack{
    background-image:
      linear-gradient(rgba(10,5,26,0.34), rgba(10,5,26,0.34)),
      url('image/hero.webp');
  }
}
@media (max-width: 768px){
  .page-svc-asistente .svc-hero-stack{
    background-image: linear-gradient(rgba(10,5,26,.78), rgba(10,5,26,.92));
    background-attachment: scroll;
  }
}

.page-svc-asistente .svc-page-hero{
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: clamp(28px, 6vw, 72px);
  padding-bottom: calc(var(--laraia-section-pad-y) * 0.5);
  background: transparent !important;
  min-height: calc(100dvh - 60px);
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.page-svc-asistente .svc-page-hero .svc-hero-inner{
  width: 100%;
  max-width: min(920px, 100%);
  margin: 0 auto;
  text-align: center;
}
.page-svc-asistente .svc-page-hero h1{
  color: #fff;
  font-size: clamp(1.65rem, 4.2vw, 2.75rem);
  line-height: 1.12;
  margin: 0 0 18px;
}
.page-svc-asistente .svc-page-hero .lead{
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 2.1vw, 1.12rem);
  line-height: 1.55;
  max-width: 52rem;
  margin: 0 auto 28px;
}
/* Promesa de impacto (automatización y desarrollo web) */
.page-svc-automatizacion .svc-page-hero .svc-hero-promise,
.page-svc-desarrollo-web .svc-page-hero .svc-hero-promise{
  font-weight: 600;
  font-size: clamp(1.05rem, 2.25vw, 1.18rem);
  line-height: 1.5;
  color: rgba(255,255,255,.93);
  max-width: 46rem;
  margin: 0 auto 14px;
}
.page-svc-asistente .svc-page-hero .cta-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

/* Banda intermedia: capa morada opaca (~#2e1a47) + destellos rosa en los lados + filetes rosa */
.page-svc-asistente .svc-micro-impact{
  padding: calc(var(--laraia-section-pad-y) * 0.5) 0;
  border-top: 1px solid rgba(255, 64, 161, 0.45);
  border-bottom: 1px solid rgba(255, 64, 161, 0.32);
  background-color: #2e1a47;
  background-image:
    linear-gradient(180deg, rgba(5, 0, 12, 0.55) 0%, transparent 40%),
    radial-gradient(ellipse 52% 210% at 0% 50%, rgba(255, 45, 160, 0.5) 0%, transparent 56%),
    radial-gradient(ellipse 52% 210% at 100% 50%, rgba(255, 45, 160, 0.5) 0%, transparent 56%);
  background-size: 100% 100%, 50% 100%, 50% 100%;
  background-position: center top, left center, right center;
  background-repeat: no-repeat;
}
.page-svc-asistente .svc-micro-impact-inner{
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}
.page-svc-asistente .svc-micro-line{
  margin: 0 0 10px;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.45;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.page-svc-asistente .svc-micro-line:last-child{ margin-bottom: 0; }

.page-svc-asistente .svc-hero-stack #que-es.svc-que-es{
  padding-top: calc(var(--laraia-section-pad-y) * 0.5);
  padding-bottom: calc(var(--laraia-section-pad-y) * 0.5);
}
.page-svc-asistente .svc-hero-stack #que-es h2{
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.38);
  max-width: min(48rem, 100%);
  margin-left: auto;
  margin-right: auto;
}
.page-svc-asistente .svc-hero-stack #que-es .lead{
  color: rgba(255,255,255,.88);
  text-shadow: 0 10px 22px rgba(0,0,0,.38);
}

.page-svc-asistente .svc-band{
  padding: calc(var(--laraia-section-pad-y) * 0.5) 0;
}
/* Oscuro con ventana (sectores03), alineado con landing-family--validacion */
.page-svc-asistente .svc-band--dark{
  color: rgba(255,255,255,.92);
}
.page-svc-asistente .svc-band--dark:not(.svc-window){
  background: linear-gradient(180deg, #07030f 0%, #0a051a 40%, #0d0820 100%);
}
.page-svc-asistente .svc-band--dark.svc-window{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores03.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 768px){
  .page-svc-asistente .svc-band--dark.svc-window{
    background-attachment: scroll;
  }
}
.page-svc-asistente .svc-band--dark .lead{
  color: rgba(255,255,255,.82);
}
.page-svc-asistente .svc-band--dark h2{
  color: #fff;
}
/* Tridente: mismo velo que contacto / landing (0.48 + tridente.webp) */
.page-svc-asistente .svc-band--tridente{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: #fff;
}
.page-svc-asistente .svc-band--tridente .lead{
  color: rgba(255,255,255,.88);
  text-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.page-svc-asistente .svc-band--tridente h2{
  color: #fff;
  text-shadow: 0 8px 22px rgba(0,0,0,.3);
}

/* Bloque narrativo oscuro continuo (realidad → beneficios) */
.page-svc-asistente .svc-landing-dark.svc-window{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores03.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 768px){
  .page-svc-asistente .svc-landing-dark.svc-window{
    background-attachment: scroll;
  }
}
.page-svc-asistente .svc-landing-dark section{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.page-svc-asistente .svc-landing-dark h2{
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.38);
}
.page-svc-asistente .svc-landing-dark .lead{
  color: rgba(255,255,255,.88);
  text-shadow: 0 8px 20px rgba(0,0,0,.32);
}
.page-svc-asistente .svc-beneficio--wide{
  grid-column: 1 / -1;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-svc-asistente .svc-card-dark{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255, 64, 161, 0.38);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.page-svc-asistente .svc-card-dark h3{
  margin: 0 0 10px;
  font-size: 1.08rem;
  line-height: 1.28;
  color: #fff;
}
.page-svc-asistente .svc-card-dark p{
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}
.page-svc-asistente .svc-band--tridente .svc-grid-2{
  justify-items: center;
}
.page-svc-asistente .svc-band--tridente .svc-card-dark{
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid rgba(255, 64, 161, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 36px rgba(10,5,26,.12);
  text-align: center;
}
.page-svc-asistente .svc-band--tridente .svc-card-dark h3{
  color: #0a051a;
}
.page-svc-asistente .svc-band--tridente .svc-card-dark p{
  color: #0a051a;
}
.page-svc-asistente .svc-grid-2{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .page-svc-asistente .svc-grid-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.page-svc-asistente .svc-grid-3{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .page-svc-asistente .svc-grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-svc-asistente .svc-sol-card{
  height: 100%;
}
.page-svc-asistente #solucion .svc-sol-card.card.service{
  border: 1px solid rgba(255, 64, 161, 0.55) !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 28px rgba(10,5,26,.08);
}
.page-svc-asistente #solucion .svc-sol-card.card.service h3{
  color: var(--fg);
}
.page-svc-asistente #solucion .svc-sol-card.card.service p{
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}
.page-svc-asistente #solucion .svc-sol-grid{
  display: grid !important;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  justify-items: center;
}
.page-svc-asistente #solucion .svc-sol-grid .svc-sol-card{
  width: 100%;
  max-width: 420px;
  text-align: center;
}
@media (min-width: 960px){
  .page-svc-asistente #solucion .svc-sol-grid{
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    justify-items: stretch;
  }
  .page-svc-asistente #solucion .svc-sol-grid .svc-sol-card:nth-child(1){ grid-column: 1 / 5; max-width: none; }
  .page-svc-asistente #solucion .svc-sol-grid .svc-sol-card:nth-child(2){ grid-column: 5 / 9; max-width: none; }
  .page-svc-asistente #solucion .svc-sol-grid .svc-sol-card:nth-child(3){ grid-column: 9 / 13; max-width: none; }
  .page-svc-asistente #solucion .svc-sol-grid .svc-sol-card:nth-child(4){ grid-column: 3 / 7 !important; max-width: none; }
  .page-svc-asistente #solucion .svc-sol-grid .svc-sol-card:nth-child(5){ grid-column: 7 / 11 !important; max-width: none; }
}
/* #casos también en index: layout 3+2 solo en esta página (sin max-width que rompe columnas) */
.page-svc-asistente section#casos.svc-casos .svc-casos-grid.grid.services{
  display: grid !important;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  justify-items: stretch;
}
.page-svc-asistente section#casos.svc-casos .svc-casos-grid > .card.service:nth-child(4){
  grid-column: auto !important;
}
.page-svc-asistente .svc-casos .card.service{
  height: 100%;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 64, 161, 0.55) !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center;
}
@media (max-width: 959px){
  .page-svc-asistente .svc-casos .card.service{
    max-width: min(420px, 100%);
    justify-self: center;
  }
}
.page-svc-asistente .svc-casos .card.service h3{
  color: #0a051a;
}
.page-svc-asistente .svc-casos .card.service p{
  margin: 0;
  color: #0a051a;
  font-size: 0.94rem;
  line-height: 1.45;
}
.page-svc-asistente .svc-casos-lead{
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 26px;
}
@media (min-width: 960px){
  .page-svc-asistente section#casos.svc-casos .svc-casos-grid.grid.services{
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    justify-items: stretch;
  }
  /* Anula reglas del index #casos (3 col + 4ª centrada) en esta página */
  .page-svc-asistente section#casos.svc-casos .svc-casos-grid > .card.service:nth-child(4){
    grid-column: 3 / 7 !important;
  }
  .page-svc-asistente section#casos.svc-casos .svc-casos-grid > .card.service:nth-child(5){
    grid-column: 7 / 11 !important;
  }
  .page-svc-asistente section#casos.svc-casos .svc-casos-grid .card:nth-child(1){ grid-column: 1 / 5 !important; }
  .page-svc-asistente section#casos.svc-casos .svc-casos-grid .card:nth-child(2){ grid-column: 5 / 9 !important; }
  .page-svc-asistente section#casos.svc-casos .svc-casos-grid .card:nth-child(3){ grid-column: 9 / 13 !important; }
}
.page-svc-asistente .svc-landing-dark .svc-integracion{
  width: fit-content;
  max-width: min(640px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.page-svc-asistente .svc-integracion{
  border-radius: 20px;
  border: 1px solid rgba(255, 64, 161, 0.22);
  background: linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(245,242,255,.98) 100%);
  padding: clamp(22px, 4vw, 36px);
}
.page-svc-asistente .svc-integracion ul{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  text-align: left;
}
.page-svc-asistente .svc-integracion li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--fg);
}
.page-svc-asistente .svc-integracion li::before{
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c));
}
.page-svc-asistente .svc-beneficio{
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--grad-b), var(--grad-c)) 1;
  padding: 16px 18px 16px 20px;
  background: rgba(255,255,255,.92);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 8px 28px rgba(10,5,26,.06);
}
.page-svc-asistente .svc-beneficio h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.page-svc-asistente .svc-beneficio p{
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--muted);
}
.page-svc-asistente .svc-band--tridente .svc-paso{
  text-align: center;
  padding: 24px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 64, 161, 0.55);
  background: #fff;
  backdrop-filter: none;
  box-shadow: 0 12px 36px rgba(10,5,26,.12);
}
.page-svc-asistente .svc-band--tridente .svc-paso .n{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c));
  color: #fff;
}
.page-svc-asistente .svc-band--tridente .svc-paso h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--fg);
}
.page-svc-asistente .svc-band--tridente .svc-paso p{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}
.page-svc-asistente .svc-faq h2{
  text-align: center;
  margin-bottom: 10px;
}
.page-svc-asistente .svc-faq-inner{
  max-width: 720px;
  margin: 20px auto 0;
  text-align: left;
}
.page-svc-asistente .svc-faq details{
  border: 1px solid rgba(255, 64, 161, 0.38);
  border-radius: 14px;
  background: var(--svc-minicard-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.page-svc-asistente .svc-faq summary{
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 0.98rem;
  list-style: none;
  color: rgba(255,255,255,.95);
}
.page-svc-asistente .svc-faq summary::-webkit-details-marker{ display: none; }
.page-svc-asistente .svc-faq details[open] summary{
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.page-svc-asistente .svc-faq .svc-faq-a{
  padding: 0 18px 16px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.page-svc-asistente .svc-cta-final{
  text-align: center;
  padding: calc(var(--laraia-section-pad-y) * 0.5) 0;
  background:
    linear-gradient(rgba(10,5,26,0.48), rgba(10,5,26,0.48)),
    url('image/tridente.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
.page-svc-asistente .svc-cta-final .container{
  padding-bottom: 8px;
}
.page-svc-asistente .svc-cta-final h2{
  color: #fff;
  max-width: 38rem;
  margin: 0 auto 14px;
}
.page-svc-asistente .svc-cta-final .lead{
  color: rgba(255,255,255,.82);
  max-width: 40rem;
  margin: 0 auto 24px;
}
.page-svc-asistente .svc-cta-final .cta-buttons{
  justify-content: center;
  margin-top: 0;
}

.page-svc-asistente .svc-reality .svc-mini-caso{
  margin-top: 18px;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 64, 161, 0.22);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,245,255,.98));
  box-shadow: 0 10px 32px rgba(10,5,26,.06);
}
.page-svc-asistente .svc-reality .svc-mini-caso p{
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.page-svc-asistente .svc-reality .svc-mini-caso p:first-child{
  color: var(--fg);
}
.page-svc-asistente .svc-reality .svc-mini-caso p:last-child{ margin-bottom: 0; }
.page-svc-asistente .svc-mini-caso-note{
  font-size: 0.9rem !important;
  font-style: italic;
  color: var(--muted) !important;
}

.page-svc-asistente .svc-compare{
  margin: 22px auto 8px;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-svc-asistente .svc-compare-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10,5,26,.04);
  border: 1px solid rgba(10,5,26,.08);
}
.page-svc-asistente .svc-compare-label{
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.35;
}
.page-svc-asistente .svc-compare-vs{
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(10,5,26,.35);
}
.page-svc-asistente .svc-compare-highlight{
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fg);
  text-align: right;
}
@media (max-width: 560px){
  .page-svc-asistente .svc-compare-row{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .page-svc-asistente .svc-compare-vs{ display: none; }
  .page-svc-asistente .svc-compare-highlight{ text-align: center; }
}

/* Comparativa sobre bloque oscuro (tras reglas genéricas .svc-compare) */
.page-svc-asistente .svc-landing-dark .svc-compare{
  max-width: 100%;
  align-items: center;
}
.page-svc-asistente .svc-landing-dark .svc-compare-row{
  background: var(--svc-minicard-bg);
  border: 1px solid rgba(255, 64, 161, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: fit-content;
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.page-svc-asistente .svc-landing-dark .svc-compare-label{
  color: rgba(255,255,255,.78);
}
.page-svc-asistente .svc-landing-dark .svc-compare-vs{
  color: rgba(255,255,255,.45);
}
.page-svc-asistente .svc-landing-dark .svc-compare-highlight{
  color: #fff;
}
@media (max-width: 560px){
  .page-svc-asistente .svc-landing-dark .svc-compare-row{
    width: 100%;
  }
}

/* ========== Home remodelada (page-home): hero valor, flujo, teaser copiloto ========== */
body.page-home .home-hero-value-card{
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: min(400px, 100%);
  margin-inline: auto;
  padding: 16px 18px 18px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(150deg, rgba(28,14,52,.74), rgba(8,4,20,.88));
  border: 1px solid rgba(255,100,180,.42);
  box-shadow:
    0 0 0 1px rgba(120,70,255,.22) inset,
    0 4px 24px rgba(89,0,255,.12),
    0 16px 48px rgba(0,0,0,.38);
  text-align: left;
}
body.page-home .home-hero-value-card__head{
  margin-bottom: 12px;
}
body.page-home .home-hero-value-card__badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(92deg,#ff40a1 0%,#7c3cff 55%,#5900ff 100%);
  box-shadow: 0 2px 14px rgba(255,64,161,.35);
  margin-bottom: 8px;
}
body.page-home .home-hero-value-card__title{
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.93);
  margin: 0;
  line-height: 1.35;
}
body.page-home .home-hero-value-card__list{
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255,255,255,.88);
}
body.page-home .home-hero-value-card__list li{ margin-bottom: 6px; }
body.page-home .home-hero-value-card__note{
  margin: 12px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255,255,255,.65);
}

body.page-home #como-funciona .home-flow{
  list-style: none;
  margin: 1.25rem auto 0;
  padding: 0;
  max-width: min(720px, 100%);
  text-align: left;
}
body.page-home .home-flow__step{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
body.page-home .home-flow__n{
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c));
}
body.page-home .home-flow__txt{
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
}
body.page-home #como-funciona .lead a{
  color: rgba(180,200,255,.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-home #teaser-copiloto.home-copiloto-teaser .card.cta{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(236,236,241,.94) !important;
  border: 1px solid rgba(255,64,161,.55) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 28px rgba(89,0,255,.1);
  text-align: center;
  padding: clamp(18px, 3.2vw, 34px) !important;
}
body.page-home #teaser-copiloto .home-copiloto-teaser__content{
  max-width: min(900px, 100%);
  margin: 0 auto;
}
body.page-home #teaser-copiloto .home-copiloto-teaser__actions{
  justify-content: center;
  margin-top: 6px;
}
body.page-home #teaser-copiloto .lead{
  color: #2a223f;
  text-shadow: none;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
body.page-home #teaser-copiloto h2{
  color: #17112b;
  text-shadow: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 24ch;
}

body.page-home #servicios .grid.services{
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  body.page-home #servicios .grid.services{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-home main#contenido-principal{
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Página Modo Copiloto */
body.page-copiloto .svc-copilot-hero-note{
  font-size: 0.95rem;
  color: rgba(255,255,255,.82);
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
body.page-copiloto .svc-hero-stack #que-es-copiloto{
  background: transparent !important;
}
body.page-copiloto #que-es-copiloto h2,
body.page-copiloto #que-es-copiloto > p.lead{
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}
body.page-copiloto #que-es-copiloto .grid.services{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  justify-items: center;
  align-items: stretch;
  gap: 16px;
}
@media (max-width: 900px){
  body.page-copiloto #que-es-copiloto .grid.services{
    grid-template-columns: 1fr;
  }
}
body.page-copiloto #que-es-copiloto .grid.services > .card.service{
  width: min(100%, 430px);
  margin: 0 auto;
}
body.page-copiloto .page-copiloto-window{
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores03.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 768px){
  body.page-copiloto .page-copiloto-window{
    background-attachment: scroll;
  }
}
body.page-copiloto .page-copiloto-window section{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
body.page-copiloto #problemas-copiloto h2,
body.page-copiloto #comparativa-chatbot h2,
body.page-copiloto #problemas-copiloto > div > p.lead,
body.page-copiloto #comparativa-chatbot > p.lead{
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}
body.page-copiloto #problemas-copiloto .svc-sol-card,
body.page-copiloto #comparativa-chatbot .svc-copilot-compare-col{
  background: rgba(236,236,241,.96);
  border: 1px solid rgba(255,64,161,.45);
  color: #17112b;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  width: min(100%, 430px);
  margin-left: auto;
  margin-right: auto;
}
body.page-copiloto #problemas-copiloto .svc-sol-grid{
  justify-items: center;
}

/* Filas incompletas centradas (cuando hay mas de 3 cards) */
@media (min-width: 901px){
  body.page-home #problema .grid.services,
  body.page-home #beneficios-resultados .grid.services,
  body.page-home #diferenciacion .grid.services,
  body.page-copiloto #problemas-copiloto .svc-sol-grid{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  body.page-home #problema .grid.services > .card.service,
  body.page-home #beneficios-resultados .grid.services > .card.service,
  body.page-home #diferenciacion .grid.services > .card.service,
  body.page-copiloto #problemas-copiloto .svc-sol-grid > .svc-sol-card{
    flex: 0 1 calc((100% - 40px) / 3);
    max-width: 430px;
  }
}

/* Copiloto: centrar filas incompletas en secciones de 5 cards */
@media (min-width: 901px){
  body.page-copiloto #problemas-copiloto .svc-sol-grid{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 20px !important;
    justify-items: center;
  }
  body.page-copiloto #problemas-copiloto .svc-sol-grid > .svc-sol-card{
    width: 100%;
    max-width: none;
    grid-column: span 2;
  }
  body.page-copiloto #problemas-copiloto .svc-sol-grid > .svc-sol-card:nth-child(4){
    grid-column: 2 / span 2;
  }
  body.page-copiloto #problemas-copiloto .svc-sol-grid > .svc-sol-card:nth-child(5){
    grid-column: 4 / span 2;
  }

  body.page-copiloto #casos-uso-copiloto .svc-grid-2{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    justify-items: center;
  }
  body.page-copiloto #casos-uso-copiloto .svc-grid-2 > .svc-card-dark{
    width: min(100%, 430px);
  }
  body.page-copiloto #casos-uso-copiloto .svc-grid-2 > .svc-card-dark:nth-child(5){
    grid-column: 1 / -1;
  }
}
body.page-copiloto #problemas-copiloto .svc-sol-card p,
body.page-copiloto #comparativa-chatbot .svc-copilot-compare-col li{
  color: #2a223f;
}
body.page-copiloto #comparativa-chatbot .svc-copilot-compare-col h3{
  color: #17112b;
}
body.page-copiloto #beneficios-copiloto.svc-window-sectores02{
  position: relative;
  z-index: 0;
  background: transparent !important;
}
body.page-copiloto #beneficios-copiloto.svc-window-sectores02::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10,5,26,.48), rgba(10,5,26,.48)),
    url('image/sectores02.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
}
@media (max-width: 768px){
  body.page-copiloto #beneficios-copiloto.svc-window-sectores02::before{
    background-attachment: scroll, scroll;
  }
}
body.page-copiloto #beneficios-copiloto h2,
body.page-copiloto #beneficios-copiloto > p.lead{
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}
body.page-copiloto .svc-copilot-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: min(900px, 100%);
  margin: 1.5rem auto 0;
  text-align: left;
  justify-items: center;
}
@media (max-width: 700px){
  body.page-copiloto .svc-copilot-compare{
    grid-template-columns: 1fr;
  }
}
body.page-copiloto .svc-copilot-compare-col{
  padding: 16px 18px;
  border-radius: 16px;
  width: min(100%, 430px);
  background: rgba(236,236,241,.96);
  border: 1px solid rgba(255,64,161,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
body.page-copiloto .svc-copilot-compare-col h3{
  margin-top: 0;
  font-size: 1rem;
  color: #17112b;
}
body.page-copiloto .svc-copilot-compare-col ul{
  margin: 0;
  padding-left: 1.15rem;
  color: #2a223f;
}

/* =========================================================
   Normalizacion cromatica (HOME + MODO COPILOTO)
   Regla unica:
   - Fuera de cards: texto blanco (salvo grad-text)
   - Dentro de cards: texto oscuro (salvo grad-text)
   ========================================================= */
body.page-home main#contenido-principal section:not(#demo) > h2,
body.page-home main#contenido-principal section:not(#demo) > h3,
body.page-home main#contenido-principal section:not(#demo) > p,
body.page-home main#contenido-principal section:not(#demo) > p.lead,
body.page-copiloto main section > h2,
body.page-copiloto main section > h3,
body.page-copiloto main section > p,
body.page-copiloto main section > p.lead{
  color: #fff !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

body.page-home main#contenido-principal section:not(#demo) .card h2,
body.page-home main#contenido-principal section:not(#demo) .card h3,
body.page-home main#contenido-principal section:not(#demo) .card p,
body.page-home main#contenido-principal section:not(#demo) .card li,
body.page-home main#contenido-principal section:not(#demo) .card strong,
body.page-copiloto main section .card h2,
body.page-copiloto main section .card h3,
body.page-copiloto main section .card p,
body.page-copiloto main section .card li,
body.page-copiloto main section .card strong,
body.page-copiloto main section .svc-copilot-compare-col h2,
body.page-copiloto main section .svc-copilot-compare-col h3,
body.page-copiloto main section .svc-copilot-compare-col p,
body.page-copiloto main section .svc-copilot-compare-col li,
body.page-copiloto main section .svc-beneficio h2,
body.page-copiloto main section .svc-beneficio h3,
body.page-copiloto main section .svc-beneficio p{
  color: #17112b !important;
  text-shadow: none !important;
}

body.page-home main#contenido-principal section:not(#demo) .card p.lead,
body.page-home main#contenido-principal section:not(#demo) .card li,
body.page-copiloto main section .card p.lead,
body.page-copiloto main section .card li{
  color: #2a223f !important;
}

/* Mantener gradientes y botones fuera de la normalizacion */
body.page-home main#contenido-principal .grad-text,
body.page-copiloto main .grad-text{
  color: transparent !important;
  text-shadow: none !important;
}
body.page-home main#contenido-principal .btn-primary-lara,
body.page-home main#contenido-principal .btn-secondary-lara,
body.page-copiloto main .btn-primary-lara,
body.page-copiloto main .btn-secondary-lara{
  text-shadow: none !important;
}

/* Cierre de index: igualar remate visual con el resto (sin hueco excesivo antes del footer) */
body.page-home.bg-brand:has(#deep-contacto) #contacto{
  min-height: auto !important;
  padding-top: clamp(72px, 8vw, 110px) !important;
  padding-bottom: clamp(132px, 14vw, 188px) !important;
}
body.page-home.bg-brand:has(#deep-contacto) #deep-contacto{
  padding-bottom: clamp(34px, 4.4vw, 56px) !important;
}
body.page-home.bg-brand:has(#deep-contacto) .landing-family--cierre #contacto .contact-cta-row{
  margin-bottom: clamp(38px, 5.2vw, 72px) !important;
}
body.page-home.bg-brand:has(#deep-contacto) footer.footer{
  margin-top: -118px !important;
  padding-top: 0 !important;
  padding-bottom: clamp(26px, 4vw, 42px) !important;
}

/* Demo: mantener estilo previo intacto (excluida de normalizacion) */