/* Atmósfera Creativa — estilos del sitio. Paleta: azul marino + fucsia + cian (ADR-003, ADR-007). */
:root {
  --base: #060918;
  --panel: #101838;
  --panel-oscuro: #0c1230;
  --borde: #1c2454;
  --borde-input: #262c5c;
  --texto: #e8eaf5;
  --texto-medio: #c7cae6;
  --texto-suave: #a3a8cc;
  --texto-tenue: #8f94b8;
  --placeholder: #6b7194;
  --fucsia: 255, 63, 164;
  --cian: 34, 211, 240;
  --violeta: 124, 58, 237;
  --glow: 1; /* intensidad del velo de color: 0.6 sutil · 1 marcado · 1.3 muy marcado */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--base);
  color: var(--texto);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: "Syne", "Work Sans", sans-serif; font-weight: 800; color: #fff; text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid rgb(var(--cian)); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #fff; color: #0a0e27; padding: 10px 16px; border-radius: 6px; font-weight: 700;
}
.saltar:focus { top: 12px; }

/* ---------- Fondo: canvas de puntos + velo de color (ADR-008) ---------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Recorta los velos en el borde de la página: sin esto se extienden bajo el pie y crean scroll de más.
   `clip` (no `hidden`) evita crear un contenedor de scroll. */
.pagina { overflow: hidden; overflow: clip; }
.seccion { position: relative; padding: 110px 8vw; }
.seccion > .contenido { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.contenido.angosto { max-width: 760px; }

.seccion::before, .seccion::after {
  content: "";
  position: absolute;
  inset: -35% -15%;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  animation: deriva 34s ease-in-out infinite, cambio-a 28s ease-in-out infinite;
  animation-delay: var(--fase, 0s), var(--fase, 0s);
}
.seccion::before {
  background:
    radial-gradient(ellipse 1000px 720px at var(--p1), rgba(var(--fucsia),  calc(.85 * var(--glow))), transparent 66%),
    radial-gradient(ellipse 900px 680px at var(--p2),  rgba(var(--cian),    calc(.62 * var(--glow))), transparent 66%),
    radial-gradient(ellipse 900px 620px at var(--p3),  rgba(var(--violeta), calc(.70 * var(--glow))), transparent 68%);
}
.seccion::after {
  background:
    radial-gradient(ellipse 1000px 720px at var(--p1), rgba(var(--cian),    calc(.70 * var(--glow))), transparent 66%),
    radial-gradient(ellipse 900px 680px at var(--p2),  rgba(var(--violeta), calc(.80 * var(--glow))), transparent 66%),
    radial-gradient(ellipse 900px 620px at var(--p3),  rgba(var(--fucsia),  calc(.78 * var(--glow))), transparent 68%);
  animation-name: deriva-inversa, cambio-b;
  animation-duration: 41s, 28s;
}
.glow-a { --p1: 82% 8%;  --p2: 12% 40%; --p3: 55% 105%; --fase: 0s; }
.glow-b { --p1: 15% 8%;  --p2: 88% 50%; --p3: 35% 105%; --fase: -9s; }
.glow-c { --p1: 50% 0%;  --p2: 8% 85%;  --p3: 92% 85%;  --fase: -18s; }

@keyframes deriva {
  0%, 100% { transform: translate3d(-4%, -3%, 0) scale(1); }
  50%      { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes deriva-inversa {
  0%, 100% { transform: translate3d(4%, 3%, 0) scale(1.08); }
  50%      { transform: translate3d(-4%, -3%, 0) scale(1); }
}
@keyframes cambio-a { 0%, 100% { opacity: 1; }   50% { opacity: .12; } }
@keyframes cambio-b { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
.seccion.fuera::before, .seccion.fuera::after { visibility: hidden; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seccion::before, .seccion::after { animation: none; }
  .seccion::after { opacity: 0; }
}

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 8vw;
  background: rgba(6, 9, 24, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { height: 44px; width: auto; display: block; }
.marca-texto { font-family: "Syne", sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .04em; line-height: 1.1; color: #fff; }
.marca-texto small { display: block; font-size: 10px; letter-spacing: .34em; color: var(--texto-tenue); margin-top: 3px; font-weight: 700; }
.nav-links { display: flex; gap: 32px; font-size: 14px; color: var(--texto-tenue); }
.nav-links a {
  display: inline-block; padding: 6px 14px; margin: -6px -14px; border-radius: 999px;
  transition: background-color .25s ease, color .2s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a.activo { color: #fff; background: rgba(var(--fucsia), .14); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 4px; border: 1px solid transparent;
  font: 700 14px "Work Sans", sans-serif; cursor: pointer; text-align: center;
}
.btn-primario { background: linear-gradient(90deg, #ff3fa4, #ff5fc0); color: #0a0e27; }
.btn-primario:hover { filter: brightness(1.08); }
.btn-secundario { background: rgba(6, 9, 24, .45); color: var(--texto); border-color: var(--borde-input); font-weight: 600; }
.btn-secundario:hover { border-color: rgb(var(--cian)); }
.btn-grande { padding: 14px 26px; font-size: 15px; }
.btn-bloque { display: flex; width: 100%; }
.btn-whatsapp { background: #25d366; color: #06280f; border-radius: 6px; }
.btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.link-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-tenue); text-decoration: underline; cursor: pointer; }
.link-boton:hover { color: #fff; }

/* ---------- Tipografía base ---------- */
h1 { font-size: clamp(48px, 7.4vw, 82px); font-weight: 760; line-height: 1.10; max-width: 16ch; margin-bottom: 24px; }
.hero h1 { width: 760px; max-width: 100%; margin-left: auto; margin-right: auto; }
/* scaleY: letras más altas sin más ancho ni más separación entre ellas (pedido de Johanna,
   probado primero solo en "En qué puedo ayudarte"). El transform no empuja el contenido de
   abajo — por eso el margin-bottom subió de 16px a 40px, para que no se encime con el texto
   siguiente. */
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; margin-top: 20px; margin-bottom: 56px; transform: scaleY(1.41); transform-origin: center; }
h3 { font-size: 19px; }
.servicio h3 { transform: scaleY(1.25); transform-origin: center; margin: 6px 0; }
.acento {
  position: relative;
  color: #ff3fa4;
  text-shadow:
    0 0 3px rgba(255, 255, 255, .65), 0 0 9px rgba(255, 63, 164, .5), 0 0 22px rgba(255, 63, 164, .25),
    1px 1px 0 rgba(150, 31, 102, .9), 2px 2px 0 rgba(122, 25, 84, .85), 3px 3px 2px rgba(94, 19, 65, .8);
  animation: chispazo 3.6s ease-in-out infinite;
}
@keyframes chispazo {
  0%, 89%, 100% {
    opacity: 1;
    text-shadow:
      0 0 3px rgba(255, 255, 255, .65), 0 0 9px rgba(255, 63, 164, .5), 0 0 22px rgba(255, 63, 164, .25),
      1px 1px 0 rgba(150, 31, 102, .9), 2px 2px 0 rgba(122, 25, 84, .85), 3px 3px 2px rgba(94, 19, 65, .8);
  }
  90% { opacity: .82; text-shadow: none; }
  91% {
    opacity: 1;
    text-shadow:
      0 0 4px rgba(255, 255, 255, .8), 0 0 14px rgba(255, 63, 164, .7), 0 0 32px rgba(255, 63, 164, .4),
      1px 1px 0 rgba(150, 31, 102, .9), 2px 2px 0 rgba(122, 25, 84, .85), 3px 3px 2px rgba(94, 19, 65, .8);
  }
  92.5% { opacity: .78; text-shadow: none; }
  94% {
    opacity: 1;
    text-shadow:
      0 0 3px rgba(255, 255, 255, .65), 0 0 9px rgba(255, 63, 164, .5), 0 0 22px rgba(255, 63, 164, .25),
      1px 1px 0 rgba(150, 31, 102, .9), 2px 2px 0 rgba(122, 25, 84, .85), 3px 3px 2px rgba(94, 19, 65, .8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .acento { animation: none; }
}

/* Rayos alrededor de "eléctricas" (pedido de Johanna, referencia: efecto PSD "POWER"),
   con la paleta del sitio en vez de dorado. Sincronizados con el parpadeo de .acento
   (ventana 90-94% del ciclo de chispazo) para que crepiten junto con el destello del texto. */
.acento-caja { position: relative; display: inline-block; }
.rayos { position: absolute; left: -10%; top: -45%; width: 120%; height: 190%; overflow: visible; pointer-events: none; }
.rayo path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.rayo-a path, .rayo-b path { stroke: rgb(34, 211, 240); }
.rayo-c path { stroke: #ff3fa4; }
.rayo { opacity: 0; animation: rayo-crepita 3.6s ease-in-out infinite; }
.rayo-b { animation-delay: .12s; }
.rayo-c { animation-delay: .22s; }
@keyframes rayo-crepita {
  0%, 86%, 100% { opacity: 0; }
  88% { opacity: .9; }
  89.2% { opacity: .15; }
  90% { opacity: 1; }
  91.5% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rayo { animation: none; opacity: 0; }
}
.lead { font-size: 17px; line-height: 1.6; color: #fff; margin: 0 auto 40px; }
.hero .lead { width: 760px; max-width: 100%; }
.sublead { font-size: 16px; line-height: 1.6; color: #fff; max-width: 560px; margin: 0 auto 40px; }
.texto { font-size: 15.5px; line-height: 1.7; color: #fff; margin-bottom: 20px; }
/* font-family/line-height/max-width explícitos: ahora puede ir en un <h1> (en vez de <p>) y sin
   esto heredaría los estilos globales de h1 (Syne, line-height 1.10, max-width:16ch) y se vería
   distinto o se cortaría raro — con esto se ve igual que antes, solo cambia el tag semántico. */
.sobretitulo {
  font-family: "Work Sans", sans-serif; font-size: 12px; font-weight: 700; line-height: 1.55;
  letter-spacing: .06em; color: rgb(var(--cian)); margin-bottom: 14px; max-width: none;
}
/* Los dos h1 (antes sobretitulo en <p>) más grandes, y el h2 que los acompaña un poco más chico —
   pedido explícito de Johanna, solo en estas 2 secciones (no toca el resto de los h2 del sitio). */
h1.sobretitulo { font-size: 20px; margin-bottom: 64px; }
#asistente h2, #formulario h2 { font-size: clamp(26px, 3.4vw, 36px); }
.fila { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.encabezado-centrado { text-align: center; margin: 0 auto 48px; max-width: 620px; }
.encabezado-centrado .texto { margin-bottom: 0; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 10px; }
.etiquetas li { font-size: 12.5px; font-weight: 600; color: rgb(var(--cian)); background: rgba(var(--cian), .10); padding: 6px 14px; border-radius: 100px; }
.hero .fila { width: 760px; max-width: 100%; justify-content: center; margin-top: 32px; margin-left: auto; margin-right: auto; }
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Burbuja "?" en las tarjetas de servicio: al pasar el mouse (o enfocar con teclado) despliega
   un panel con el detalle de qué incluye cada servicio. */
.info-servicio { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; }
.texto-info { font-size: 12.5px; color: var(--texto-suave); }
.burbuja-info {
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(var(--cian), .45); background: rgba(var(--cian), .08);
  color: rgb(var(--cian)); font: 700 13px "Work Sans", sans-serif;
  cursor: help; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.burbuja-info:hover, .burbuja-info:focus-visible { background: rgba(var(--cian), .2); border-color: rgb(var(--cian)); }
.panel-info {
  position: absolute; bottom: calc(100% + 12px); left: 50%; width: 220px;
  padding: 14px 16px; border-radius: 10px; text-align: left;
  background: #0a0e27; border: 1px solid rgba(var(--cian), .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 20;
}
.panel-info::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #0a0e27;
}
.info-servicio:hover .panel-info, .info-servicio:focus-within .panel-info {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.panel-info ul { display: flex; flex-direction: column; gap: 7px; }
.panel-info li { font-size: 12.5px; line-height: 1.4; color: var(--texto-suave); padding-left: 14px; position: relative; }
.panel-info li::before { content: "•"; position: absolute; left: 0; color: rgb(var(--cian)); }

.etiquetas-iconos { width: 760px; max-width: 100%; justify-content: space-evenly; gap: 12px; }
.etiquetas-iconos li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 150px; background: none; padding: 0; border-radius: 0; }
.icono-etiqueta { display: flex; }
.texto-etiqueta { display: block; width: 100%; box-sizing: border-box; text-align: center; background: rgba(var(--cian), .10); padding: 6px 14px; border-radius: 100px; }

/* ---------- Secciones ---------- */
.hero { padding-top: 90px; padding-bottom: 110px; }
.hero .contenido { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Dentro de un flex container column, un hijo sin ancho propio queda con ancho indefinido:
   eso hace que el max-width:100% del h1/.lead (que llevan width:760px) no tenga contra qué
   resolverse y el navegador lo ignora, desbordando en pantallas angostas. */
.hero .grupo-titulo { width: 100%; }
.cintillo {
  position: relative; z-index: 3;
  display: flex; align-items: stretch;
  background: rgba(6, 9, 24, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: 13.5px; font-weight: 600; color: var(--texto-medio);
  overflow: hidden;
}
/* Pista en bucle: se duplica el contenido y se anima la mitad del ancho total,
   así el salto de vuelta al inicio queda invisible (loop sin costuras). */
.cintillo-pista-cont { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cintillo-pista { display: flex; width: max-content; animation: cintillo-desliza 42s linear infinite; }
.cintillo:hover .cintillo-pista, .cintillo:focus-within .cintillo-pista { animation-play-state: paused; }
.cintillo-item {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  white-space: nowrap; padding: 16px 28px;
  border-right: 1px solid rgba(255, 255, 255, .09);
}
@keyframes cintillo-desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.cintillo-cta {
  flex-shrink: 0; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; color: rgb(var(--cian));
  padding: 16px 8vw 16px 24px; background: rgba(6, 9, 24, .55);
  border-left: 1px solid rgba(255, 255, 255, .09);
}
@media (prefers-reduced-motion: reduce) {
  .cintillo-pista { animation: none; }
  .cintillo-pista-cont { overflow-x: auto; }
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Cajas de cristal: casi transparentes, para que el velo de color se vea a través de ellas */
.tarjeta {
  background: rgba(8, 12, 34, .26);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.servicio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px; }
.servicio p { font-size: 14px; line-height: 1.5; color: #fff; }
.icono-servicio {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(var(--fucsia), .12); border: 1px solid rgba(var(--fucsia), .3);
}

.grid-asistente { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.checks { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; }
.checks li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--texto-medio); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 8px;
  border-left: 2.2px solid #ff3fa4; border-bottom: 2.2px solid #ff3fa4; transform: rotate(-45deg);
}

/* Demo de chat de la sección + burbujas compartidas con el widget */
.chat-demo { background: rgba(8, 12, 34, .26); border: 1px solid rgba(255, 255, 255, .11); border-radius: 12px; overflow: hidden; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.chat-demo-cab { background: rgba(255, 255, 255, .04); border-bottom-color: rgba(255, 255, 255, .09); }
.chat-demo .burbuja.asis { background: rgba(255, 255, 255, .09); }
.chat-demo-cab, .asistente-cab { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--borde); background: rgba(12, 18, 48, .9); }
.chat-demo-cab strong, .asistente-cab strong { display: block; font-size: 13px; color: #fff; }
.chat-demo-cab small, .asistente-cab small { font-size: 11px; color: #6fe08f; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #ff3fa4, #22d3f0);
  display: flex; align-items: center; justify-content: center;
  font: 800 13px "Syne", sans-serif; color: #0a0e27;
}
.chat-demo-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; }
.burbuja { max-width: 82%; padding: 10px 14px; font-size: 13px; line-height: 1.5; border-radius: 12px; overflow-wrap: anywhere; }
.burbuja.asis { background: #182154; color: var(--texto); border-radius: 12px 12px 12px 2px; align-self: flex-start; }
.burbuja.yo { background: #ff3fa4; color: #0a0e27; font-weight: 600; border-radius: 12px 12px 2px 12px; align-self: flex-end; }
.reco { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: rgba(6, 9, 24, .3); border: 1px solid rgb(var(--cian)); border-radius: 10px; }
.reco small { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgb(var(--cian)); }
.reco strong { font-size: 14px; color: #fff; }
.reco span, .reco li { font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.reco ul { list-style: disc; padding-left: 18px; }

/* ---------- Formulario rápido y boceto ---------- */
/* Layout inspirado en el formulario de contacto de nexilo.cl: columna de intro + datos de
   contacto a la izquierda, tarjeta del formulario a la derecha. */
.grid-contacto { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.contacto-intro { padding-top: 4px; }
.contacto-datos { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.contacto-datos li { display: flex; align-items: center; gap: 14px; }
.contacto-icono {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ff3fa4; background: rgba(255, 63, 164, .1); border: 1px solid rgba(255, 63, 164, .35);
}
.contacto-etiqueta { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--cian)); margin-bottom: 2px; }
.contacto-datos a { font-size: 15px; font-weight: 600; color: var(--texto); }
.contacto-datos a:hover { color: #ff3fa4; }
.contacto-panel { display: flex; flex-direction: column; gap: 32px; }
.form-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ff3fa4; margin: 0 0 -4px; }
.form { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 10px; }
.campo { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo label, .campo legend { font-size: 12px; font-weight: 600; color: var(--texto-medio); padding: 0; margin-bottom: 2px; }
.nota { font-size: 11px; font-weight: 400; color: #5b6088; }
input[type="text"], textarea {
  width: 100%; font: 400 13.5px "Work Sans", sans-serif; color: var(--texto);
  padding: 12px 14px; border-radius: 6px;
  background: rgba(6, 9, 24, .4); border: 1px solid rgba(255, 255, 255, .16);
}
textarea { resize: vertical; min-height: 70px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type="text"][aria-invalid="true"] { border-color: #ff6b8b; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 10px 16px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-medio); border: 1px solid var(--borde-input);
}
.chip input:checked + span { background: #ff3fa4; border-color: #ff3fa4; color: #0a0e27; font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid rgb(var(--cian)); outline-offset: 2px; }
.precompletado {
  font-size: 11.5px; font-weight: 600; color: rgb(var(--cian));
  padding: 8px 12px; background: rgba(var(--cian), .08); border: 1px dashed rgb(var(--cian)); border-radius: 6px;
}
.error { font-size: 13px; color: #ff8fa8; }
.privacidad { font-size: 12px; color: var(--texto-tenue); }
.privacidad summary { cursor: pointer; color: var(--texto-medio); }
.privacidad p { margin-top: 10px; line-height: 1.6; }

.resultado { display: flex; flex-direction: column; gap: 16px; }
.resultado-titulo { font-size: 15px; font-weight: 700; color: #fff; }
.boceto-marco {
  display: flex; justify-content: center; align-items: center; min-height: 300px; padding: 28px;
  background: rgba(8, 12, 34, .26); border: 1px solid rgba(255, 255, 255, .11); border-radius: 10px;
}
.boceto-vacio, .boceto-pendiente { font-size: 13.5px; line-height: 1.6; color: #fff; text-align: center; max-width: 340px; }
.boceto-pendiente strong { display: block; color: #fff; font-size: 15px; margin-bottom: 6px; }
.pie-chico { font-size: 11.5px; color: #7a80a8; text-align: center; }

/* Bocetos generados (POL-002 / ND-004): una plantilla por Tipo y los colores de cada Estilo. Sin estilos en línea (CSP). */
.est-min  { --s: #f5f6fb; --s2: #e4e7f3; --tinta: #1b2150; --suave: #c3c8de; --ac: #1b2150; --ac2: #3b5bfd; --r: 4px; --hero: linear-gradient(135deg, #e4e7f3, #cfd6f0); }
.est-bold { --s: #0a0e27; --s2: #141c44; --tinta: #eef0ff; --suave: #4a5183; --ac: #ff3fa4; --ac2: #22d3f0; --r: 12px; --hero: linear-gradient(135deg, #ff3fa4, #22d3f0); }
.est-clas { --s: #ffffff; --s2: #e9edf6; --tinta: #16224f; --suave: #b7bfd6; --ac: #2f5fb3; --ac2: #e0ac1f; --r: 2px; --hero: linear-gradient(135deg, #16224f, #2f5fb3); }
.bx { width: 100%; max-width: 400px; background: var(--s); border: 1px solid var(--suave); border-radius: calc(var(--r) + 4px); overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.bx-barra { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--s2); }
.bx-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); }
.bx-url { flex: 1; height: 10px; margin-left: 8px; border-radius: 5px; background: var(--s); }
.bx-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.bx .l { display: block; height: 7px; border-radius: 3px; background: var(--suave); }
.bx .l.fuerte { height: 9px; background: var(--tinta); }
.bx .w45 { width: 45%; } .bx .w60 { width: 60%; } .bx .w70 { width: 70%; } .bx .w90 { width: 90%; }
.bx-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-logo { width: 18px; height: 18px; border-radius: var(--r); background: var(--ac); flex-shrink: 0; }
.bx-links { display: flex; gap: 8px; }
.bx-links i { width: 28px; height: 6px; border-radius: 3px; background: var(--suave); }
.bx-hero { display: flex; gap: 14px; align-items: stretch; }
.bx-hero-txt { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bx-hero-img { flex: 1; min-height: 84px; border-radius: var(--r); background: var(--hero); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.est-clas .bx-hero-img { border-bottom: 4px solid var(--ac2); }
.bx-boton { width: 64px; height: 16px; margin-top: 4px; border-radius: var(--r); background: var(--ac); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.bx-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bx-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--suave); border-radius: var(--r); background: var(--s); box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.bx-icono { width: 26px; height: 26px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--suave); flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.est-bold .bx-icono { border-color: var(--ac); }
.bx-app { display: flex; min-height: 230px; }
.bx-lateral { width: 54px; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--s2); }
.bx-item { width: 22px; height: 22px; border-radius: var(--r); background: var(--suave); }
.bx-item.activo { background: var(--ac); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.bx-panel { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bx-kpi { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--suave); border-radius: var(--r); box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.bx-grafico { display: flex; align-items: flex-end; gap: 8px; height: 80px; padding: 8px; border: 1px solid var(--suave); border-radius: var(--r); box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.bx-grafico b { flex: 1; border-radius: 2px 2px 0 0; background: var(--ac); }
.bx-grafico b:nth-child(even) { background: var(--ac2); }
.bx-grafico .h40 { height: 40%; } .bx-grafico .h50 { height: 50%; } .bx-grafico .h60 { height: 60%; }
.bx-grafico .h70 { height: 70%; } .bx-grafico .h80 { height: 80%; } .bx-grafico .h90 { height: 90%; }
.bx-fila { display: flex; align-items: center; gap: 10px; }
.bx-fila > .l { flex: 1; }
.bx-etiqueta { width: 32px; height: 12px; border-radius: 100px; background: var(--ac2); opacity: .8; }
.bx-textos { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bx-movil { width: 220px; border-width: 6px; border-radius: 28px; }
.bx-muesca { display: flex; justify-content: center; padding: 10px 0 2px; }
.bx-muesca i { width: 40px; height: 5px; border-radius: 3px; background: var(--suave); }
.bx-movil .bx-hero-img { flex: none; height: 96px; }
.bx-tabs { display: flex; justify-content: space-around; padding: 10px 16px 12px; background: var(--s2); }
.bx-tabs i { width: 22px; height: 6px; border-radius: 3px; background: var(--suave); }
.bx-tabs i.activo { background: var(--ac); }

/* Boceto app-movil--bold-con-color */
.telefono { width: 220px; border-radius: 28px; border: 6px solid #101838; background: #0a0e27; overflow: hidden; box-shadow: 0 0 0 1px var(--borde); }
.telefono-muesca { display: flex; justify-content: center; padding: 10px 0 4px; }
.telefono-muesca i { width: 40px; height: 5px; border-radius: 3px; background: #3a4180; }
.telefono-cuerpo { padding: 18px 16px 24px; }
.tel-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.tel-punto { width: 18px; height: 18px; border-radius: 50%; background: #ff3fa4; }
.tel-linea { width: 60px; height: 8px; border-radius: 3px; background: var(--texto); }
.tel-hero { height: 100px; border-radius: 10px; background: linear-gradient(135deg, #ff3fa4, #22d3f0); margin-bottom: 16px; box-shadow: 0 8px 20px rgba(255, 63, 164, .3); }
.tel-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tel-fila:last-child { margin-bottom: 0; }
.tel-icono { width: 32px; height: 32px; border-radius: 8px; background: #141c44; border: 1px solid #232b5c; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.tel-textos { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tel-textos i { display: block; height: 7px; border-radius: 3px; background: var(--texto); }
.tel-textos i + i { height: 6px; background: #5b6088; }
.tel-textos .w70 { width: 70%; }
.tel-textos .w45 { width: 45%; }
.tel-textos .w60 { width: 60%; }
.tel-textos .w38 { width: 38%; }

/* ---------- Proceso, portafolio, testimonios ---------- */
.pasos { display: flex; align-items: flex-start; gap: 32px; margin-top: 48px; }
/* Flechas neón que se encienden en cascada: 1→2 primero, luego 2→3, como un camino que se va revelando. */
.flujo-conector {
  position: absolute; left: -16px; top: 0; height: 52px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; pointer-events: none;
}
.flujo-flecha { width: 26px; height: 26px; opacity: .25; }
.flujo-flecha path { fill: none; stroke: #ff3fa4; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pasos li:nth-child(2) .flujo-flecha { animation: flujo-destello 2.4s ease-in-out infinite; }
.pasos li:nth-child(3) .flujo-flecha { animation: flujo-destello 2.4s ease-in-out infinite; }
.pasos li:nth-child(2) .flujo-flecha:nth-child(1) { animation-delay: 0s; }
.pasos li:nth-child(2) .flujo-flecha:nth-child(2) { animation-delay: .15s; }
.pasos li:nth-child(2) .flujo-flecha:nth-child(3) { animation-delay: .3s; }
.pasos li:nth-child(3) .flujo-flecha:nth-child(1) { animation-delay: 1.2s; }
.pasos li:nth-child(3) .flujo-flecha:nth-child(2) { animation-delay: 1.35s; }
.pasos li:nth-child(3) .flujo-flecha:nth-child(3) { animation-delay: 1.5s; }
@keyframes flujo-destello {
  0% { opacity: 1; filter: drop-shadow(0 0 6px #ff3fa4) drop-shadow(0 0 16px rgba(255, 63, 164, .9)); }
  15%, 100% { opacity: .25; filter: drop-shadow(0 0 0 rgba(255, 63, 164, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .pasos li:nth-child(2) .flujo-flecha, .pasos li:nth-child(3) .flujo-flecha { animation: none; opacity: .6; }
}
.pasos li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pasos li + li { position: relative; }
.pasos strong { font-size: 19px; color: var(--texto); }
.pasos p { font-size: 15.5px; color: #fff; max-width: 260px; line-height: 1.6; }
.num {
  position: relative; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #ff3fa4; color: #ff3fa4;
  display: flex; align-items: center; justify-content: center;
  font: 700 20px "Work Sans", sans-serif; /* Syne (fuente display) hacía los números poco legibles */
  background: rgba(6, 9, 24, .5);
}
.proyecto { display: flex; flex-direction: column; overflow: hidden; }
/* Portafolio: las tarjetas se centran (si hay menos de 3 no quedan pegadas a la izquierda) */
#portafolio .grid-3 { display: flex; flex-wrap: wrap; justify-content: center; }
#portafolio .proyecto { flex: 0 1 calc((100% - 40px) / 3); min-width: 280px; max-width: 460px; }
/* Igual que el portafolio: se centran en vez de dejar huecos de columna vacíos en el grid de 3. */
#testimonios .grid-3 { display: flex; flex-wrap: wrap; justify-content: center; }
#testimonios .testimonio { flex: 0 1 calc((100% - 40px) / 3); min-width: 280px; max-width: 460px; }
.captura {
  height: 180px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #101838, #101838 10px, #141c44 10px, #141c44 20px);
}
.captura span { font-size: 11px; color: #7a80a8; background: #0a0e27; padding: 5px 12px; border-radius: 4px; }
a.captura { overflow: hidden; }
.captura img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
a.captura:hover img { transform: scale(1.04); }
.insignia { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--cian)); border: 1px solid rgba(var(--cian), .45); border-radius: 100px; padding: 3px 10px; }
.proyecto-enlace { font-size: 12.5px; font-weight: 700; color: rgb(var(--cian)); margin-top: 4px; }
.proyecto-enlace:hover { text-decoration: underline; }
.proyecto-texto { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.proyecto-texto h3 { font-size: 15px; }
.proyecto-texto p { font-size: 13px; line-height: 1.5; color: #fff; }
.proyecto-texto small { font-size: 11px; color: rgb(var(--cian)); margin-top: 4px; }
.testimonio { margin: 0; padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.testimonio blockquote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--texto-medio); }
.testimonio figcaption strong { display: block; font-size: 13.5px; color: #fff; }
.testimonio figcaption span { font-size: 12px; color: var(--texto-tenue); }

.frases { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 28px 0; }
.frases li {
  width: fit-content; max-width: 100%;
  font: 700 15px "Syne", sans-serif; color: #fff; line-height: 1.4;
  padding: 10px 40px 10px 16px; border-left: 3px solid #ff3fa4;
  background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
}

/* ---------- Pie ---------- */
/* Pie sólido, igual que el encabezado: sin velo de color ni puntos detrás del contenido */
.pie { z-index: 3; padding-block: 32px; background: var(--base); border-top: 1px solid rgba(255, 255, 255, .07); }
.pie::before, .pie::after { display: none; }
.pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pie-logo { height: 76px; width: auto; }
.pie-contacto { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 13px; color: var(--texto-tenue); }
.pie-contacto a:hover { color: #fff; }
.pie-contacto-bloque { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pie-contacto-bloque .sobretitulo { font-size: 18px; margin-bottom: 0; }
.pie-contacto-iconos { gap: 18px; }
.pie-contacto-iconos a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s ease, color .2s ease; }
.pie-contacto-iconos svg { width: 26px; height: 26px; }
.pie-contacto-iconos a:hover { border-color: currentColor; }
.pie-contacto-iconos .pie-whatsapp:hover { color: #25d366; }
.pie-legal { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: #7a80a8; }
.pie-sello { color: #8f94b8; }
.pie-sello a { color: var(--texto-medio); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.pie-sello a:hover { color: #fff; text-decoration-color: currentColor; }

/* ---------- Burbuja flotante y banner de cookies ---------- */
.burbuja-flotante {
  position: fixed; right: 32px; bottom: 32px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff3fa4, #22d3f0);
  box-shadow: 0 4px 20px rgba(255, 63, 164, .35);
}
.burbuja-flotante:hover { transform: scale(1.06); }
.subir {
  position: fixed; right: 40px; bottom: 100px; z-index: 55;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 39, .85); color: var(--texto); border: 1px solid var(--borde-input);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.subir:hover { border-color: rgb(var(--cian)); color: rgb(var(--cian)); }
.banner-cookies {
  position: fixed; left: 24px; bottom: 24px; z-index: 70; max-width: 420px;
  display: flex; flex-direction: column; gap: 14px; padding: 18px 20px;
  background: rgba(10, 14, 39, .96); border: 1px solid var(--borde); border-radius: 12px;
  font-size: 13px; line-height: 1.5; color: var(--texto-medio);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.banner-cookies[hidden], [hidden] { display: none !important; }

/* ---------- Widget del Asistente (ADR-003) ---------- */
.asistente-panel {
  position: fixed; right: 24px; bottom: 100px; z-index: 80;
  width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #0d1333; border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.asistente-cab { justify-content: flex-start; }
.asistente-cab > div { flex: 1; }
.asistente-cerrar { background: none; border: 0; color: var(--texto-tenue); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.asistente-cerrar:hover { color: #fff; }
.asistente-mensajes { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.asistente-mensajes .burbuja { max-width: 88%; }
.asistente-escribiendo { color: var(--texto-tenue); font-size: 12px; }
.asistente-pie { padding: 12px 14px; border-top: 1px solid var(--borde); background: rgba(12, 18, 48, .9); }
.asistente-form { display: flex; gap: 8px; }
.asistente-form input[type="text"] { flex: 1; padding: 10px 12px; font-size: 13px; }
.asistente-form .btn { padding: 0 16px; background: rgb(var(--cian)); color: #0a0e27; border-radius: 6px; font-size: 12.5px; }
.asistente-lead { display: flex; flex-direction: column; gap: 8px; }
.asistente-lead .btn { border-radius: 6px; }
.asistente-nota { font-size: 11px; color: #7a80a8; line-height: 1.4; }
.asistente-nota a { text-decoration: underline; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .seccion { padding: 72px 8vw; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 8vw 20px;
    background: rgba(6, 9, 24, .97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav-links.abierto { display: flex; }
  .nav-links li { border-top: 1px solid rgba(255, 255, 255, .07); }
  .nav-links a { display: block; padding: 14px 0; margin: 0; border-radius: 0; font-size: 15px; }
  .nav-links a.activo { background: rgba(var(--fucsia), .1); }
  .grid-3, .grid-asistente, .grid-contacto { grid-template-columns: 1fr; }
  #portafolio .proyecto { flex-basis: 100%; }
  .grid-asistente { gap: 32px; }
  .pasos { flex-direction: column; align-items: stretch; gap: 72px; }
  .flujo-conector {
    left: 50%; top: -64px; height: 64px; flex-direction: column; gap: 3px;
  }
  .flujo-flecha { width: 18px; height: 18px; transform: rotate(90deg); }
  .pie-legal { align-items: flex-start; }
}
@media (max-width: 560px) {
  .seccion { padding: 56px 20px; }
  .nav { padding: 12px 20px; }
  .btn-nav { display: none; }
  .form { padding: 22px; }
  .burbuja-flotante { right: 16px; bottom: 16px; }
  .subir { right: 24px; bottom: 84px; }
  .banner-cookies { left: 12px; right: 12px; bottom: 84px; max-width: none; }
  .asistente-panel { right: 8px; left: 8px; width: auto; bottom: 84px; }
}