/* ═══════════════════════════════════════════════════════════
   Comnic · Landing de captura (tráfico pago: Google e Instagram)

   MOBILE FIRST: los estilos base son los del teléfono y todas las
   media queries son `min-width`. Cada bloque va de menor a mayor:
   base → 520 → 600 → 760 → 1000. Si algo se ve mal en mobile, se
   corrige en el bloque base, no en una excepción.

   Hereda los tokens de marca de assets/css/styles.css pero es
   autónoma: nada de lo que se toque acá afecta al sitio principal.
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --blue-dark:   #130a2e;
  --blue:        #3b2ccc;
  --blue-mid:    #5540e8;
  --purple:      #7b35c8;
  --purple-mid:  #9b44d4;
  --purple-light:#c87fff;
  --orange:      #ffab2d;
  --orange-deep: #f47920;
  --green:       #25d366;
  --white:       #ffffff;
  --gray-light:  #ece8f8;
  --text-dark:   #0e0a2e;
  --text-gray:   #5a4e80;
  --line:        rgba(200,180,255,.35);
  --grad-hero:   linear-gradient(135deg, #130a2e 0%, #3b2ccc 40%, #7b35c8 75%, #c87fff 100%);
  --grad-section:linear-gradient(135deg, #3b2ccc 0%, #9b44d4 100%);
  --shadow:      0 20px 60px rgba(91,64,232,.18);
  --shadow-sm:   0 6px 20px rgba(91,64,232,.12);
  --radius:      1.1rem;
  --radius-lg:   1.6rem;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--gray-light);
  position: relative;
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

/* Fondo abstracto de Comnic al 30% detrás de las secciones lilas.
   Es un pseudo-elemento fijo (y no background-attachment: fixed)
   porque iOS ignora el fixed en fondos y lo estira. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('../img/lp/fondo-ondas.webp') center/cover no-repeat;
  opacity: .3;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── Layout ─────────────────────────────────────────────── */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1.15rem; }
.section { padding: 3.5rem 0; }

.label {
  font-size: .72rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--orange);   /* mismo naranja que la barra "/" */
  display: flex; align-items: center; gap: .45rem; margin-bottom: .9rem;
}
.label::before { content: '/'; color: var(--orange); font-size: 1.05rem; }
.label--center { justify-content: center; }
.label--light { color: var(--orange); }

h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.h-xl { font-size: clamp(2rem, 8.2vw, 3.9rem); font-weight: 900; line-height: 1.06; letter-spacing: -.03em; }
.h-lg { font-size: clamp(1.55rem, 5.6vw, 2.7rem); font-weight: 800; }
.h-md { font-size: clamp(1.08rem, 3.4vw, 1.4rem); font-weight: 700; }

.text-gradient {
  background: linear-gradient(90deg, var(--blue-mid), var(--purple-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-orange { color: var(--orange); }
.center { text-align: center; }
.lead-p { color: var(--text-gray); font-size: .98rem; max-width: 62ch; text-wrap: pretty; }
.lead-p--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ── Botones ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 50px; font-weight: 700; font-size: .95rem;
  border: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s;
  text-align: center; line-height: 1.2;
  min-height: 48px;                   /* objetivo táctil cómodo */
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(244,121,32,.28); }
.btn-wa { background: var(--green); color: #063d20; box-shadow: 0 8px 24px rgba(37,211,102,.3); }
.btn-ghost { background: transparent; border: 2px solid rgba(255,255,255,.42); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--blue-mid); color: var(--blue-mid); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }

@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(244,121,32,.45); }
  .btn-wa:hover      { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(37,211,102,.42); }
  .btn-ghost:hover   { background: rgba(255,255,255,.12); border-color: #fff; }
  .btn-outline:hover { background: var(--blue-mid); color: #fff; transform: translateY(-3px); }
}

/* ── Barra superior (sin menú: landing sin fugas) ───────── */
.topbar {
  /* flota sobre la placa violeta del hero, sin franja */
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
}
.topbar-inner { display: flex; align-items: center; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.topbar-logo img { height: 36px; width: auto; } /* marca en blanco, sobre violeta */

/* ── HERO ───────────────────────────────────────────────── */
/* Igual que el hero de la home (assets/css/styles.css → #hero):
   fondo abstracto + placa en degradé violeta + blobs + partículas. */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg,
      rgba(15,24,102,.82) 0%,
      rgba(30,53,200,.75) 38%,
      rgba(123,53,200,.72) 72%,
      rgba(200,127,255,.68) 100%
    ),
    url('../img/lp/fondo-ondas.webp') center/cover no-repeat;
  color: #fff;
  padding: 5.5rem 0 5rem;   /* arriba deja lugar a la marca */
}
.hero-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; animation: blobFloat 8s ease-in-out infinite; }
.hero-blob:nth-child(1) { width: 320px; height: 320px; background: #4a6bff; top: -100px; right: -100px; }
.hero-blob:nth-child(2) { width: 280px; height: 280px; background: #c040ff; bottom: -50px; left: -80px; animation-delay: 3s; }
.hero-blob:nth-child(3) { width: 220px; height: 220px; background: #f47920; top: 50%; left: 40%; animation-delay: 5s; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20px, -20px) scale(1.05); }
  66%      { transform: translate(-15px, 15px) scale(.95); }
}
/* Canvas de partículas: lo dibuja ../assets/js/particles.js (el mismo de la home). */
#heroParticles {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; width: 100%; height: 100%;
}

.hero-inner { position: relative; z-index: 2; }
/* Hero de una sola columna de texto. */
.hero-grid { display: flex; flex-direction: column; }

.hero-title { margin-bottom: 1rem; color: #fff; }
.hero-title .accent { color: var(--orange); }
.hero-sub { color: rgba(255,255,255,.84); font-size: 1rem; max-width: 56ch; margin-bottom: 1.7rem; text-wrap: pretty; }
.hero-sub strong { color: #fff; font-weight: 700; }

.hero-bullets { display: grid; gap: .65rem; margin-bottom: 1.8rem; }
.hero-bullets li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(255,255,255,.92); font-size: .93rem; }
.hero-bullets svg { width: 18px; height: 18px; color: var(--orange); margin-top: .17rem; flex-shrink: 0; }

.hero-actions { display: grid; gap: .7rem; margin-bottom: 2rem; }

.hero-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.3rem;
}
/* Números en blanco con un degradé suave a lila (sin el naranja),
   inline-block para que el degradé se ajuste al ancho del número. */
.trust-num {
  display: inline-block; font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 900; line-height: 1.05;
  background: linear-gradient(90deg, #ffffff, #e2c6ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.trust-lbl { font-size: .72rem; color: rgba(255,255,255,.66); margin-top: .3rem; line-height: 1.3; }

.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; display: block; z-index: 3; }

/* ── Formulario ─────────────────────────────────────────── */
.form-card {
  background: #fff; border-radius: var(--radius-lg); padding: 1.35rem 1.15rem;
  box-shadow: 0 24px 60px rgba(9,4,32,.34);
  color: var(--text-dark);
  position: relative;
}

.form-note { font-size: .72rem; color: var(--text-gray); text-align: center; }
.form-note strong { color: var(--text-dark); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ── Chat comercial (reemplaza al formulario) ───────────── */
.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.chat-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; background: var(--grad-section); color: #fff;
}
.chat-id { min-width: 0; flex: 1; }
.chat-name { font-weight: 800; font-size: .98rem; line-height: 1.2; }
.chat-status { font-size: .76rem; color: rgba(255,255,255,.78); }
.chat-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; flex-shrink: 0;
}
.chat-icon-btn[hidden] { display: none; }
.chat-icon-btn:hover { background: rgba(255,255,255,.28); }
.chat-icon-btn svg { width: 17px; height: 17px; }

.chat-log {
  height: 340px; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1rem .5rem; background: #f6f4fd;
  display: flex; flex-direction: column; gap: .5rem;
}
.chat-msg {
  max-width: 86%; padding: .62rem .85rem; border-radius: 1rem;
  font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere;
  animation: chatIn .25s ease-out both;
}
.chat-msg--bot { align-self: flex-start; background: #fff; color: var(--text-dark); border-bottom-left-radius: .3rem; box-shadow: 0 2px 8px rgba(91,64,232,.08); }
.chat-msg--user { align-self: flex-end; background: var(--blue-mid); color: #fff; border-bottom-right-radius: .3rem; }
@keyframes chatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chat-typing { display: inline-flex; gap: .28rem; padding: .8rem .9rem; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b3a8e6; animation: chatDot 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-summary {
  align-self: stretch; background: #fff; border: 1.5px solid #ded7f5; border-radius: 1rem;
  padding: .9rem; margin-top: .25rem; animation: chatIn .25s ease-out both;
}
.chat-summary__title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--blue-mid); margin-bottom: .55rem; }
.chat-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; font-size: .83rem; margin-bottom: .85rem; }
.chat-summary dt { color: var(--text-gray); }
.chat-summary dd { margin: 0; font-weight: 600; color: var(--text-dark); overflow-wrap: anywhere; }
.chat-wa { gap: .5rem; }

/* Las opciones se insertan dentro de .chat-log (ver lp.js): scrollean junto
   con la conversación en vez de tener una barra propia. */
/* Nada dentro de la conversación se achica: si no entra, scrollea el log
   entero (una sola barra). Sin esto, el flex column comprime las opciones. */
.chat-log > * { flex-shrink: 0; }
.chat-chips {
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .15rem 0 .35rem;
  max-height: none; overflow: visible;
}
.chat-chips:empty { display: none; }
.chat-chip {
  border: 1.5px solid var(--blue-mid); background: #fff; color: var(--blue-mid);
  border-radius: 999px; padding: .45rem .85rem; font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; min-height: 36px; text-align: left; line-height: 1.25;
  animation: chatIn .25s ease-out both;
}
.chat-chip:hover, .chat-chip:focus-visible { background: var(--blue-mid); color: #fff; outline: none; }

.chat-input {
  display: flex; gap: .5rem; align-items: center;
  padding: .7rem .8rem; border-top: 1px solid #ebe6fa; background: #fff; position: relative;
}
.chat-input input {
  flex: 1; min-width: 0; min-height: 44px;
  border: 1.5px solid #ded7f5; border-radius: 999px; padding: .6rem 1rem;
  /* 16px evita que iOS haga zoom al enfocar el campo */
  font-size: 16px; color: var(--text-dark); background: #fcfbff;
}
.chat-input input:focus { outline: none; border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(85,64,232,.13); background: #fff; }
.chat-input input:disabled { background: #f3f1f9; }
.chat-send {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--orange); color: #fff; display: grid; place-items: center;
}
.chat-send svg { width: 19px; height: 19px; }
.chat-send:disabled { background: #d9d4ea; cursor: default; }


/* ── Paula · asistente comercial flotante ────────────────── */
.paula-avatar {
  position: relative; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff; font-weight: 900; font-size: 1.15rem;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.7);
}
.paula-online {
  position: absolute; right: -1px; bottom: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); border: 2px solid #fff;
}

.paula {
  position: fixed; z-index: 970;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
  pointer-events: none;
}
.paula > * { pointer-events: auto; }

.paula-launcher {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--grad-section); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(59,44,204,.42);
  animation: paulaPop .4s cubic-bezier(.2,1.4,.4,1) both;
}
.paula-launcher[hidden] { display: none; }
.paula-launcher svg { width: 27px; height: 27px; grid-area: 1 / 1; transition: transform .25s, opacity .25s; }
.paula-launcher__close { opacity: 0; transform: rotate(-90deg); }
.paula.is-open .paula-launcher__chat { opacity: 0; transform: rotate(90deg); }
.paula.is-open .paula-launcher__close { opacity: 1; transform: none; }
.paula-launcher__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 21px; height: 21px; border-radius: 50%; padding: 0 5px;
  background: var(--orange-deep); color: #fff; font-size: .72rem; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff;
}
.paula.is-open .paula-launcher__badge,
.paula.was-opened .paula-launcher__badge { display: none; }

.paula-teaser {
  position: relative; max-width: 290px;
  animation: paulaPop .45s cubic-bezier(.2,1.2,.4,1) both;
}
.paula-teaser[hidden] { display: none; }
.paula-teaser__body {
  display: flex; align-items: center; gap: .7rem; text-align: left;
  background: #fff; border: none; cursor: pointer;
  padding: .85rem 1.1rem .85rem .85rem; border-radius: 1.1rem 1.1rem .35rem 1.1rem;
  box-shadow: 0 14px 40px rgba(19,10,46,.2);
  font: inherit; color: var(--text-dark);
}
.paula-teaser__txt { font-size: .92rem; line-height: 1.35; }
.paula-teaser__txt strong { display: block; font-size: .74rem; color: var(--blue-mid); margin-bottom: .1rem; }
.paula-teaser__close {
  position: absolute; top: -9px; left: -9px;
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--blue-dark); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(19,10,46,.25);
}
.paula-teaser__close svg { width: 12px; height: 12px; }

@keyframes paulaPop {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* Panel del chat. En mobile es una hoja que sube desde abajo. */
.paula-panel {
  position: fixed; z-index: 980;
  left: 0; right: 0; bottom: 0;
  height: min(88dvh, 640px);
  background: #fff; border-radius: 1.4rem 1.4rem 0 0;
  box-shadow: 0 -10px 50px rgba(19,10,46,.3);
  animation: paulaPop .3s ease-out both;
}
.paula-panel[hidden] { display: none; }
.paula-panel .chat-log { height: auto; flex: 1 1 auto; min-height: 0; }
.paula-panel .chat-input { padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
/* En mobile el panel ya tiene su botón de cerrar: el lanzador estorba. */
.paula.is-open .paula-launcher { display: none; }

/* Tarjeta de la sección final que invita a hablar con Paula */
.paula-card { padding: 1.6rem 1.4rem; }
.paula-card__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.paula-card .paula-avatar { width: 52px; height: 52px; font-size: 1.35rem; }
.paula-card__name { font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.paula-card__role { font-size: .82rem; color: var(--text-gray); }
.paula-card__msg {
  background: #f6f4fd; border-radius: 1rem; border-top-left-radius: .3rem;
  padding: .9rem 1rem; font-size: .93rem; color: var(--text-dark); margin-bottom: 1.2rem;
}
.paula-card .form-note { margin-top: .8rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Franja de logos ────────────────────────────────────── */
.logos { background: #fff; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.logos-title {
  text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-gray); margin-bottom: 1.4rem;
}
/* Carrusel infinito: dos listas idénticas que se desplazan juntas; cuando
   la primera sale entera, la segunda ocupa exactamente su lugar. */
/* Ojo: los PNG de clientes son lienzos CUADRADOS de 200x200 con mucho
   margen transparente, así que la marca visible ocupa bastante menos que
   la caja. Por eso las alturas de acá son más grandes de lo que parecería
   razonable: si se bajan, los logos se vuelven ilegibles. */
.logos-marquee {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos-track {
  display: flex; flex-shrink: 0;
  animation: logosScroll 38s linear infinite;
}
.logos-track li {
  flex: 0 0 auto; width: 150px; height: 104px; padding: 0 .9rem;
  display: flex; align-items: center; justify-content: center;
}
.logos-track img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.12); opacity: .85; transition: filter .3s, opacity .3s;
}
@keyframes logosScroll { to { transform: translateX(-100%); } }
.logos-marquee:hover .logos-track { animation-play-state: paused; }
@media (hover: hover) { .logos-track img:hover { filter: grayscale(0); opacity: 1; } }

/* ── Dolores: foto + lista con íconos ───────────────────── */
.pain-layout { display: grid; gap: 1.5rem; margin-top: 2rem; align-items: center; }
.pain-photo { position: relative; margin: 0; }
.pain-photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
/* Etiquetas flotantes sobre la foto: dan contexto sin sumar párrafos */
.pain-float {
  position: absolute; display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; color: var(--text-dark); font-size: .78rem; font-weight: 700;
  padding: .5rem .8rem; border-radius: 999px; box-shadow: 0 10px 28px rgba(19,10,46,.18);
  animation: floatTag 5s ease-in-out infinite;
}
.pain-float svg { width: 15px; height: 15px; color: #e2475a; flex-shrink: 0; }
.pain-float--a { top: 1rem; left: .8rem; }
.pain-float--b { bottom: 1rem; right: .8rem; animation-delay: -2.5s; }
.pain-float--b svg { color: var(--orange-deep); }
@keyframes floatTag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.pain-list { display: grid; gap: .75rem; }
.pain-item {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem;
}
.pain-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: #fdeaec; color: #e2475a; display: grid; place-items: center;
}
.pain-icon svg { width: 20px; height: 20px; }
.pain-item p { font-size: .9rem; color: var(--text-gray); text-wrap: pretty; }
.pain-item strong { display: block; color: var(--text-dark); font-size: .95rem; margin-bottom: .1rem; }
.pain-answer {
  margin-top: 1.6rem; background: var(--grad-section); color: #fff;
  border-radius: var(--radius-lg); padding: 1.6rem 1.3rem; text-align: center;
}
.pain-answer p { font-size: 1rem; max-width: 70ch; margin: 0 auto; text-wrap: pretty; }
.pain-answer strong { color: var(--orange); }

/* ── Servicios: foto + frase + etiquetas ────────────────── */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2rem; }
.svc-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.svc-media { position: relative; }
.svc-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(19,10,46,.35));
}
.svc-icon {
  position: absolute; left: 1.1rem; bottom: -22px; z-index: 1;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--grad-section); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(59,44,204,.35); border: 3px solid #fff;
}
.svc-icon svg { width: 22px; height: 22px; }
.svc-body { padding: 2rem 1.2rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .35rem; }
.svc-body > p { color: var(--text-gray); font-size: .92rem; margin-bottom: 1rem; text-wrap: pretty; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.svc-tags li {
  font-size: .76rem; font-weight: 700; color: var(--blue-mid);
  background: rgba(85,64,232,.08); border-radius: 999px; padding: .32rem .7rem;
}

/* ── Bloque IA (el diferencial) ─────────────────────────── */
.ai { position: relative; background: var(--blue-dark); color: #fff; overflow: hidden; padding: 3.75rem 0; }
.ai::before {
  content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,53,200,.55), transparent 68%);
  top: -160px; right: -120px; pointer-events: none;
}
.ai::after {
  content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(85,64,232,.42), transparent 68%);
  bottom: -160px; left: -120px; pointer-events: none;
}
.ai .container { position: relative; z-index: 2; }
.ai h2 { color: #fff; }
.ai-intro { max-width: 62ch; color: rgba(255,255,255,.78); font-size: .98rem; margin-top: .9rem; text-wrap: pretty; }
.ai-layout { display: grid; gap: 1.4rem; margin-top: 2rem; align-items: center; }

/* Diagrama de una automatización (ejemplo visual, hecho en HTML) */
.flow {
  background: #fff; color: var(--text-dark); border-radius: var(--radius-lg);
  padding: 1.2rem; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.flow-head {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 800; color: var(--text-gray); margin-bottom: 1rem;
}
.flow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(37,211,102,.18); }
.flow-badge {
  margin-left: auto; background: var(--grad-section); color: #fff;
  font-size: .7rem; padding: .2rem .55rem; border-radius: 999px;
}
.flow-steps { list-style: none; display: grid; gap: 1.1rem; position: relative; }
/* línea punteada que une los pasos, con un "pulso" que la recorre */
.flow-steps::before {
  content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px;
  background: repeating-linear-gradient(180deg, #d9d2f5 0 5px, transparent 5px 10px);
}
.flow-steps::after {
  content: ''; position: absolute; left: 18px; top: 22px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--purple-mid); box-shadow: 0 0 10px var(--purple-light);
  animation: flowPulse 3.2s ease-in-out infinite;
}
@keyframes flowPulse {
  0% { top: 22px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 30px); opacity: 0; }
}
.flow-step { display: flex; gap: .85rem; align-items: flex-start; position: relative; }
.flow-node {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1;
  display: grid; place-items: center; color: #fff; border: 3px solid #fff;
}
.flow-node svg { width: 20px; height: 20px; }
.flow-node--wa  { background: var(--green); }
.flow-node--ai  { background: var(--grad-section); }
.flow-node--cal { background: var(--orange-deep); }
.flow-title { font-weight: 800; font-size: .92rem; margin: .15rem 0 .35rem; }
.flow-bubble {
  display: inline-block; background: #e9fbe9; border-radius: .9rem .9rem .9rem .25rem;
  padding: .45rem .7rem; font-size: .84rem;
}
.flow-bubble span { font-size: .68rem; color: var(--text-gray); margin-left: .35rem; }
.flow-tag {
  display: inline-block; font-size: .78rem; font-weight: 700; color: var(--blue-mid);
  background: rgba(85,64,232,.08); border-radius: 999px; padding: .25rem .65rem;
}
.flow-foot { margin-top: 1rem; font-size: .8rem; color: var(--text-gray); text-align: center; }

.ai-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ai-tile {
  display: flex; flex-direction: column; gap: .6rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(200,180,255,.18);
  border-radius: var(--radius); padding: 1rem; font-size: .88rem; font-weight: 700; line-height: 1.3;
  transition: background .3s, border-color .3s, transform .3s;
}
.ai-tile__icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,171,45,.14); color: var(--orange);
}
.ai-tile__icon svg { width: 19px; height: 19px; }

.tools { margin-top: 2rem; text-align: center; }
.tools-title { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .9rem; }
.tools-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem;
}
.tools-row li {
  background: #fff; border-radius: 999px; height: 50px; padding: 0 1.1rem;
  display: flex; align-items: center;
}
.tools-row img { height: 24px; width: auto; max-width: 110px; object-fit: contain; }

.ai-proof {
  margin-top: 1.8rem; border-radius: var(--radius-lg); padding: 1.4rem 1.25rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(200,180,255,.2);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.ai-proof-txt .h-md { margin-bottom: .4rem; }
.ai-proof p { color: rgba(255,255,255,.8); font-size: .92rem; text-wrap: pretty; }
.ai-proof strong { color: var(--orange); }
.ai-proof .btn { align-self: stretch; }

/* ── Ventajas ───────────────────────────────────────────── */
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 2rem; }
.adv-card {
  background: #fff; border-radius: var(--radius); padding: 1.15rem;
  border: 1px solid var(--line); transition: transform .3s, box-shadow .3s;
}
.adv-icon {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: .8rem;
  background: var(--grad-section); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(59,44,204,.25);
}
.adv-icon svg { width: 21px; height: 21px; }
.adv-card h3 { font-size: .95rem; font-weight: 800; margin-bottom: .3rem; }
.adv-card p { font-size: .84rem; color: var(--text-gray); text-wrap: pretty; }

/* ── Comparativa ────────────────────────────────────────────
   En mobile NO es una tabla con scroll lateral (se perdía la
   columna de la derecha): cada fila se vuelve una tarjeta con
   las dos posturas una debajo de la otra. A partir de 760px
   se restituye la tabla real.
   ──────────────────────────────────────────────────────── */
.compare-wrap { margin-top: 2rem; }
.compare { width: 100%; display: block; border-collapse: collapse; }
.compare thead { display: none; }
.compare tbody { display: grid; gap: .8rem; }
.compare tr {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.compare td, .compare tbody th { display: block; width: 100%; text-align: left; }
.compare tbody th {
  background: #f4f1fd; color: var(--text-gray);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem 1.1rem;
}
.compare .cell-us, .compare .cell-them { padding: .85rem 1.1rem; font-size: .92rem; }
.compare .cell-us { font-weight: 600; }
.compare .cell-them { color: var(--text-gray); border-top: 1px solid rgba(200,180,255,.28); }
/* Etiqueta de quién es cada postura (en desktop la da el <thead>) */
.compare .cell-us::before, .compare .cell-them::before {
  display: block; margin-bottom: .3rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.compare .cell-us::before   { content: 'Comnic'; color: var(--blue-mid); }
.compare .cell-them::before { content: 'Agencia tradicional'; color: #a99cc9; }
.compare .mark { display: inline-flex; align-items: flex-start; gap: .45rem; }
.compare .mark svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .22rem; }
.compare .mark--yes svg { color: #2fae74; }
.compare .mark--no svg { color: #c6b8e8; }

/* ── Proceso: foto + pasos con ícono ────────────────────── */
.process { display: grid; gap: 1.5rem; margin-top: 2rem; align-items: center; }
.process-photo { margin: 0; }
.process-photo img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.steps { list-style: none; display: grid; gap: .75rem; }
.step {
  display: flex; gap: .9rem; align-items: center;
  background: #fff; border-radius: var(--radius); padding: 1rem 1.1rem; border: 1px solid var(--line);
}
.step-icon {
  position: relative; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: rgba(85,64,232,.1); color: var(--blue-mid); display: grid; place-items: center;
}
.step-icon svg { width: 21px; height: 21px; }
.step-n {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-section); color: #fff; font-size: .72rem; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff;
}
.step h3 { font-size: .98rem; font-weight: 800; margin-bottom: .15rem; }
.step p { font-size: .86rem; color: var(--text-gray); text-wrap: pretty; }

/* ── Casos ──────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.case {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.case-head { padding: 1.5rem 1.3rem; background-size: cover; background-position: center; color: #fff; }
.case-head .tag { font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); }
.case-head h3 { font-size: 1.14rem; font-weight: 800; margin-top: .25rem; }
.case-body { padding: 1.2rem 1.3rem; flex: 1; }
.case-body .what { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--purple-mid); margin-bottom: .45rem; }
.case-body p { font-size: .87rem; color: var(--text-gray); text-wrap: pretty; }

.quote-band {
  margin-top: 2rem; background: #fff; border-radius: var(--radius-lg);
  padding: 1.7rem 1.3rem; border: 1px solid var(--line); text-align: center;
}
.quote-band blockquote { font-size: clamp(1rem, 3.6vw, 1.5rem); font-weight: 600; line-height: 1.42; text-wrap: pretty; }
.quote-band .who { margin-top: 1rem; font-size: .82rem; color: var(--text-gray); }
.quote-band .who strong { color: var(--text-dark); display: block; font-size: .93rem; }

/* ── Sección del formulario final ───────────────────────── */
.cta-section { position: relative; background: var(--grad-hero); color: #fff; padding: 3.5rem 0; overflow: hidden; }
.cta-section .container { position: relative; z-index: 2; }
.cta-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.cta-copy h2 { color: #fff; }
.cta-copy > p { color: rgba(255,255,255,.82); margin-top: .9rem; font-size: .98rem; text-wrap: pretty; }
.cta-points { display: grid; gap: .7rem; margin-top: 1.5rem; }
.cta-points li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; color: rgba(255,255,255,.9); }
.cta-points svg { width: 19px; height: 19px; color: var(--orange); flex-shrink: 0; margin-top: .17rem; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list { max-width: 820px; margin: 2rem auto 0; display: grid; gap: .7rem; }
.faq-item { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.faq-item summary {
  cursor: pointer; padding: 1rem 1.15rem; font-weight: 700; font-size: .93rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .8rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.35rem; font-weight: 400; color: var(--purple-mid); line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item p { padding: 0 1.15rem 1.15rem; color: var(--text-gray); font-size: .89rem; text-wrap: pretty; }

/* ── Footer ─────────────────────────────────────────────── */
.foot { background: var(--blue-dark); color: rgba(255,255,255,.6); padding: 2rem 0; }
.foot-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.foot img { height: 26px; width: auto; opacity: .8; }
.foot p { font-size: .78rem; }
.foot-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.foot-links a { font-size: .8rem; }

/* ── Scroll reveal ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }


/* ═══════════════════════════════════════════════════════════
   ≥ 520px — teléfonos grandes
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 520px) {
  .container { padding: 0 1.4rem; }
  .form-card:not(.chat-card) { padding: 1.6rem 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   ≥ 600px — tablets chicas
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .section { padding: 4.5rem 0; }
  .hero { padding: 6rem 0 5.5rem; }
  .hero-wave { height: 80px; }

  .logos { padding: 2.4rem 0; }
  .logos-title { font-size: .74rem; letter-spacing: .14em; }

  .ai { padding: 4.5rem 0; }
  .ai-tiles { grid-template-columns: repeat(3, 1fr); }
  .cta-section { padding: 4.5rem 0; }

  /* En tablet el formulario ocupa todo el ancho: lo acotamos para que
     los campos no queden desproporcionadamente largos. */
  .form-card { max-width: 620px; margin-left: auto; margin-right: auto; }

  .ai-proof { flex-direction: row; align-items: center; gap: 1.4rem; padding: 1.7rem 1.8rem; }
  .ai-proof-txt { flex: 1 1 320px; }
  .ai-proof .btn { align-self: center; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════
   ≥ 760px — la comparativa vuelve a ser una tabla
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  .process { grid-template-columns: 1.1fr 1fr; gap: 2rem; }
  .pain-layout { grid-template-columns: .9fr 1.1fr; gap: 2rem; }
  .pain-photo img { aspect-ratio: 1 / 1; }


  .compare-wrap { margin-top: 2.6rem; }
  .compare {
    display: table; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .compare thead { display: table-header-group; }
  .compare tbody { display: table-row-group; }
  .compare tr { display: table-row; background: none; border: none; border-radius: 0; }
  .compare th, .compare td {
    display: table-cell; width: auto; vertical-align: middle;
    padding: 1rem 1.2rem; text-align: left; font-size: .92rem;
    border-bottom: 1px solid var(--line); border-top: none;
  }
  .compare thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
  .compare thead th:first-child { background: #f7f5ff; color: var(--text-gray); }
  .compare thead th.col-us { background: var(--grad-section); color: #fff; }
  .compare thead th.col-them { background: #f2eefb; color: var(--text-gray); }
  .compare tbody th {
    display: table-cell;   /* le gana a la regla mobile (.compare tbody th → block) */
    font-size: .92rem; font-weight: 700; color: var(--text-dark); background: #fbfaff;
    width: 28%; letter-spacing: normal; text-transform: none; padding: 1rem 1.2rem;
  }
  .compare .cell-us { background: rgba(85,64,232,.05); color: var(--text-dark); }
  .compare .cell-us::before, .compare .cell-them::before { content: none; }
  .compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: none; }
  .compare .mark { align-items: center; }
  .compare .mark svg { margin-top: 0; }

  .cases { grid-template-columns: repeat(3, 1fr); }
  .quote-band { padding: 2.2rem; margin-top: 2.6rem; }

  .foot-inner { flex-direction: row; justify-content: space-between; text-align: left; gap: 1.4rem; flex-wrap: wrap; }
  .foot-links { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   ≥ 1000px — desktop
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .container { padding: 0 1.5rem; }
  .section { padding: 5.5rem 0; }

  .topbar-inner { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .topbar-logo img { height: 46px; }

  /* Hero de una sola columna: el chat vive en la burbuja de Paula. */
  .hero { padding: 8.5rem 0 8.5rem; }
  .hero-grid { max-width: 800px; }
  .hero-title   { margin-bottom: 1.4rem; }
  .hero-sub     { font-size: 1.15rem; margin-bottom: 2rem; }
  .hero-bullets { margin-bottom: 2.2rem; gap: .7rem; }
  .hero-bullets li { font-size: 1rem; }
  .hero-actions { display: flex; flex-wrap: wrap; margin-bottom: 2.6rem; }
  .hero-trust   { display: flex; gap: 2.8rem; padding-top: 1.6rem; }
  .hero-trust > div { min-width: 0; }
  .trust-lbl { font-size: .8rem; }
  .hero-wave { height: 110px; }
  .hero-blob:nth-child(1) { width: 500px; height: 500px; }
  .hero-blob:nth-child(2) { width: 400px; height: 400px; }
  .hero-blob:nth-child(3) { width: 300px; height: 300px; }

  .logos-track li { width: 190px; height: 110px; padding: 0 1.2rem; }

  .pain-layout { margin-top: 3rem; gap: 3rem; }
  .pain-item { padding: 1.2rem 1.3rem; }
  .pain-answer { margin-top: 2.2rem; padding: 2.2rem; }
  .pain-answer p { font-size: 1.1rem; }

  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 3rem; }
  .svc-body { padding: 2.1rem 1.5rem 1.6rem; }

  .ai { padding: 6rem 0; }
  .ai::before { width: 560px; height: 560px; top: -220px; right: -160px; }
  .ai::after { width: 460px; height: 460px; bottom: -220px; left: -160px; }
  .ai-layout { grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 3rem; }
  .flow { padding: 1.6rem; }
  .ai-tiles { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .ai-tile { padding: 1.2rem; font-size: .95rem; }
  .tools { margin-top: 3rem; }
  .ai-proof { margin-top: 2.6rem; padding: 1.8rem 2rem; }

  .adv-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
  .adv-card { padding: 1.6rem; }

  .process { margin-top: 3rem; gap: 3rem; }
  .step { padding: 1.2rem 1.3rem; }

  .cases { gap: 1.3rem; margin-top: 3rem; }
  .case-head { padding: 1.8rem 1.5rem; }
  .quote-band { padding: 2.4rem; margin-top: 3rem; }

  .cta-section { padding: 5.5rem 0; }
  .cta-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .cta-copy > p { font-size: 1.05rem; }
  .cta-section .form-card { max-width: none; }

  .faq-list { margin-top: 2.8rem; gap: .8rem; }
  .faq-item summary { padding: 1.15rem 1.4rem; font-size: .98rem; }
  .faq-item p { padding: 0 1.4rem 1.3rem; font-size: .92rem; }

  .foot { padding: 2.6rem 0; }
  .foot img { height: 30px; width: auto; }

  .paula { right: 24px; bottom: 24px; }
  .paula-panel {
    left: auto; right: 24px; bottom: 100px;
    width: 380px; height: min(600px, calc(100vh - 130px));
    border-radius: 1.4rem;
    box-shadow: 0 24px 70px rgba(19,10,46,.32);
  }
  .paula.is-open .paula-launcher { display: grid; }

  .svc-card:hover  { transform: translateY(-6px); box-shadow: var(--shadow); }
  .adv-card:hover  { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
  .case:hover      { transform: translateY(-5px); box-shadow: var(--shadow); }
  .ai-tile:hover   { background: rgba(255,255,255,.1); border-color: rgba(200,180,255,.4); transform: translateY(-4px); }
}

/* ── Accesibilidad ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .logos-marquee { overflow-x: auto; }
  .logos-track { animation: none; }
  .logos-track[aria-hidden="true"] { display: none; }
}