/* ═══════════════════════════════════════════════════════════
   IMPULZA360 · Firma visual "heatmap" (2026-11-05)
   1. Lente de mapa de calor en el hero
   2. Capas de calor en "Antes y después"
   3. Redes sociales visibles
   4. Contraste de textos secundarios
   ═══════════════════════════════════════════════════════════ */

/* 4. Contraste: --txt-muted pasaba de 2.7:1 a ~5:1 sobre el azul marino */
:root {
  --txt-muted: #8296B6;
  /* closest-side: cada mancha se desvanece dentro de su caja, sin bordes rectos */
  --heat: radial-gradient(closest-side, rgba(255,36,0,.95) 0%, rgba(255,140,0,.85) 22%, rgba(255,226,0,.7) 42%, rgba(64,220,120,.5) 64%, rgba(0,140,255,.3) 84%, rgba(0,90,255,0) 100%);
}

/* Posición del foco: registrada para poder animarla en el modo "escaneo" */
@property --hx { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --hy { syntax: "<percentage>"; inherits: true; initial-value: 55%; }
@property --hr { syntax: "<length>";     inherits: true; initial-value: 0px; }

/* ── 1. LENTE DE MAPA DE CALOR ─────────────────────────────── */
.heatlens { width: 100%; max-width: 520px; margin: 0; position: relative; }

.hl-window {
  position: relative; overflow: hidden;
  border-radius: 16px;
  background: #F4F6FA;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  aspect-ratio: 520 / 380;
  cursor: crosshair;
  touch-action: pan-y;
}
.hl-chrome {
  height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: #E3E8F0; border-bottom: 1px solid #D5DBE6;
}
.hl-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #C3CBD8; }
.hl-chrome i:nth-child(1) { background: #F2685A; }
.hl-chrome i:nth-child(2) { background: #F5BE4F; }
.hl-chrome i:nth-child(3) { background: #5BC860; }
.hl-url {
  margin-left: 10px; flex: 1; max-width: 220px; height: 18px; border-radius: 9px;
  background: #fff; color: #7A8597; font-size: 10px; line-height: 18px; padding: 0 10px;
  font-family: 'Inter', 'Outfit', sans-serif;
}

/* Página de ejemplo (gris, sin marca: el protagonista es el calor) */
.hl-page { position: absolute; inset: 30px 0 0; padding: 4.5% 6%; }
.hl-nav { display: flex; align-items: center; gap: 8%; height: 8%; }
.hl-nav b { width: 16%; height: 60%; border-radius: 4px; background: #1D2D50; }
.hl-nav span { width: 9%; height: 26%; border-radius: 3px; background: #C6CEDA; }
.hl-nav span:last-child { margin-left: auto; width: 13%; height: 46%; border-radius: 6px; background: #D7DDE7; }
.hl-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6%; height: 52%; margin-top: 5%; }
.hl-copy { display: flex; flex-direction: column; justify-content: center; gap: 7%; }
.hl-h { height: 11%; border-radius: 4px; background: #24324F; }
.hl-h.s { width: 72%; }
.hl-p { height: 5%; border-radius: 3px; background: #C6CEDA; }
.hl-p.s { width: 64%; }
.hl-cta {
  align-self: flex-start; margin-top: 5%;
  padding: 7px 14px; border-radius: 8px;
  background: var(--orange, #F05A28); color: #fff;
  font: 700 11px/1.2 'Outfit', sans-serif; white-space: nowrap;
}
.hl-img { border-radius: 10px; background: linear-gradient(135deg, #C9D3E3, #E4E9F1); position: relative; }
.hl-img::after {
  content: ''; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%;
  border-radius: 50%; background: #B3BFD3;
}
.hl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; height: 22%; margin-top: 5%; }
.hl-cards div { border-radius: 8px; background: #fff; box-shadow: 0 1px 0 #DCE2EC, 0 0 0 1px #E6EAF1; }

/* Capa de calor: manchas sobre título, botón, imagen y tarjetas */
.hl-heat {
  position: absolute; inset: 30px 0 0; pointer-events: none;
  background-image: var(--heat), var(--heat), var(--heat), var(--heat), var(--heat), var(--heat);
  background-repeat: no-repeat;
  background-size: 46% 62%, 34% 46%, 40% 52%, 22% 30%, 26% 34%, 20% 28%;
  background-position: 0% 66%, 4% 22%, 92% 34%, 2% 0%, 4% 98%, 50% 98%;
  mix-blend-mode: multiply;
  filter: saturate(1.15) blur(2px);
  opacity: .9;
  /* Foco circular que sigue al cursor */
  -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) * .55), transparent var(--hr));
          mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) * .55), transparent var(--hr));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: --hr .35s ease-out;
}

/* Etiqueta fija sobre el punto más caliente (el botón) */
.hl-tag {
  position: absolute; left: 34%; top: 66%;
  padding: 5px 10px; border-radius: 999px;
  background: #0F1A2E; color: #fff; font: 600 11px/1.2 'Outfit', sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  pointer-events: none; white-space: nowrap;
  opacity: 0; translate: 0 6px; transition: opacity .3s, translate .3s;
}
.hl-tag::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #FF2400; margin-right: 6px; vertical-align: 1px; }

/* Estados */
.heatlens.is-active .hl-heat { --hr: 130px; }
.heatlens.is-active .hl-tag,
.heatlens.is-full .hl-tag { opacity: 1; translate: 0 0; }
.heatlens.is-full .hl-heat { -webkit-mask-image: none; mask-image: none; opacity: .85; }

/* Sin interacción: el foco "escanea" la página solo (si el usuario acepta movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .heatlens.is-scanning .hl-heat {
    --hr: 110px;
    animation: hl-scan 9s ease-in-out infinite;
  }
}
@keyframes hl-scan {
  0%   { --hx: 14%; --hy: 14%; }
  22%  { --hx: 28%; --hy: 44%; }
  45%  { --hx: 22%; --hy: 72%; }
  62%  { --hx: 72%; --hy: 46%; }
  82%  { --hx: 50%; --hy: 90%; }
  100% { --hx: 14%; --hy: 14%; }
}

/* Movimiento reducido o sin máscara: se ve el mapa completo, quieto */
@media (prefers-reduced-motion: reduce) {
  .hl-heat { -webkit-mask-image: none; mask-image: none; transition: none; opacity: .8; }
  .hl-tag { opacity: 1; translate: 0 0; transition: none; }
}
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .hl-heat { opacity: .8; }
}

/* Pie de la lente: leyenda y ayuda */
.hl-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13px; color: var(--txt-sec);
}
.hl-caption strong { color: var(--txt); font-weight: 600; }
.hl-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-sec); }
.hl-legend i {
  width: 90px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #005AFF, #40DC78, #FFE200, #FF8C00, #FF2400);
}
.hl-hint-touch { display: none; }
@media (hover: none) {
  .hl-hint-mouse { display: none; }
  .hl-hint-touch { display: inline; }
}

/* ── 2. "ANTES Y DESPUÉS" CON CALOR ─────────────────────────── */
.compare-card { position: relative; overflow: hidden; isolation: isolate; }
.cmp-heat {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-repeat: no-repeat;
  mix-blend-mode: screen; opacity: .78;
  transition: opacity .4s ease;
}
/* Antes: la atención se pierde en la imagen y el título; el botón queda frío */
.cmp-heat-before {
  background-image: var(--heat), var(--heat), radial-gradient(closest-side, rgba(0,110,255,.45) 0%, rgba(0,90,255,0) 100%);
  background-size: 80% 46%, 60% 26%, 48% 22%;
  background-position: 50% 42%, 20% 0%, 30% 80%;
}
/* Después: el botón concentra la atención */
.cmp-heat-after {
  background-image: var(--heat), var(--heat), radial-gradient(closest-side, rgba(64,220,120,.5) 0%, rgba(0,90,255,0) 100%);
  background-size: 92% 34%, 50% 22%, 70% 30%;
  background-position: 20% 0%, 70% 4%, 50% 58%;
}
.compare-grid.heat-off .cmp-heat { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cmp-heat { transition: none; } }

.cmp-heat-bar {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 28px; font-size: 13px; color: var(--txt-sec);
}
.cmp-heat-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; min-height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--txt); font: 600 13px/1 'Outfit', sans-serif;
}
.cmp-heat-toggle .sw {
  width: 32px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.18); position: relative;
  transition: background .2s;
}
.cmp-heat-toggle .sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: translate .2s;
}
.cmp-heat-toggle[aria-pressed="true"] .sw { background: var(--orange); }
.cmp-heat-toggle[aria-pressed="true"] .sw::after { translate: 14px 0; }
.cmp-heat-toggle:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }

/* ── 3. REDES SOCIALES ──────────────────────────────────────── */
.social-link {
  width: 44px; height: 44px; border-radius: 12px;
  color: #C9D4E6; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12);
  transition: background .2s, color .2s, border-color .2s, translate .2s;
}
.social-link svg { width: 20px; height: 20px; }
.social-link:hover, .social-link:focus-visible { color: #fff; border-color: transparent; translate: 0 -2px; }
.social-link:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }
.social-ig:hover, .social-ig:focus-visible { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.social-fb:hover, .social-fb:focus-visible { background: #1877F2; }
.social-li:hover, .social-li:focus-visible { background: #0A66C2; }
@media (prefers-reduced-motion: reduce) { .social-link:hover, .social-link:focus-visible { translate: none; } }

/* Fila de redes en Contacto, con el usuario visible */
.contact-social { margin-top: 4px; }
.contact-social-title { font-size: 13px; font-weight: 600; color: var(--txt-sec); margin-bottom: 10px; }
.contact-social-list { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-social-list a {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px 8px 8px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--txt); font-size: 14px; font-weight: 500;
  transition: border-color .2s, background .2s;
}
.contact-social-list a .ico {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff;
}
.contact-social-list a .ico svg { width: 17px; height: 17px; }
.contact-social-list .social-ig .ico { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.contact-social-list .social-fb .ico { background: #1877F2; }
.contact-social-list .social-li .ico { background: #0A66C2; }
.contact-social-list a:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); translate: none; }
.contact-social-list a:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }

/* ── 5. FORMULARIO: verificación, estado y confirmación ─────── */
.form-captcha { margin: 4px 0 10px; min-height: 65px; }
.form-status { min-height: 1.4em; margin: 0 0 10px; font-size: 14px; color: var(--txt-sec); }
.form-status.is-error { color: #FF9C7A; }
.form-done {
  text-align: center; padding: 40px 28px; border-radius: var(--radius-lg, 20px);
  background: rgba(42,157,143,.08); border: 1px solid rgba(77,217,192,.25);
}
.form-done-ico {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--teal, #2A9D8F);
}
.form-done-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--txt); }
.form-done-text { color: var(--txt-sec); margin-bottom: 20px; max-width: 42ch; margin-inline: auto; }
.form-dialog {
  margin: auto; width: min(92vw, 420px); padding: 36px 28px 28px; text-align: center;
  border: 1px solid rgba(77,217,192,.3); border-radius: 20px;
  background: #13213A; color: var(--txt);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.form-dialog::backdrop { background: rgba(5,10,20,.7); backdrop-filter: blur(4px); }
.form-dialog h3 { font-size: 22px; margin-bottom: 8px; }
.form-dialog p { color: var(--txt-sec); margin-bottom: 22px; }
.form-dialog form { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .form-dialog[open] { animation: fd-in .25s ease-out; }
  @keyframes fd-in { from { opacity: 0; translate: 0 12px; } }
}