/* Popup de captación de leads — piel del template Popup Lead.dc.html (estilos inline → clases).
   El bloque lo pinta views/v3/blocks/popup-lead.php y lo gobierna modules/popuplead.js.
   Se carga en Home, en las landings y —por la variante .pl--inline— en el artículo del blog. */

@keyframes plFade{from{opacity:0}to{opacity:1}}
@keyframes plPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes plMarcas{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* overlay (Popup Lead.dc.html:31) — el propio .pl es el fondo clicable que cierra */
.pl{position:fixed;inset:0;background:rgba(23,36,28,.55);backdrop-filter:blur(4px);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;animation:plFade .2s ease}
.pl[hidden]{display:none}

/* tarjeta (línea 32); en móvil solo la columna del formulario, como el conPanel del template */
.pl__card{position:relative;width:min(760px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--c-white);border-radius:24px;box-shadow:0 34px 80px rgba(23,49,31,.35);display:grid;grid-template-columns:minmax(0,1fr);animation:plPop .26s ease}

.pl__x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:0;background:#f2f5f3;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#5c6b62;transition:all .15s;z-index:2;font-family:inherit}
.pl__x:hover{background:#e7f3ec;color:var(--c-green-text)}
.pl__x i{font-size:14px;line-height:1}

/* ---------- panel izquierdo (líneas 37-59) ---------- */
.pl__panel{display:none;position:relative;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(160deg,#17311f,#2e8b57);background-size:22px 22px,auto;background-repeat:repeat,no-repeat;padding:30px 28px;flex-direction:column;gap:18px;overflow:hidden;min-width:0}
.pl__claim{margin:0;font-family:var(--font-heading);font-size:clamp(22px,2.6vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--c-white);text-wrap:balance}
.pl__grad{background:linear-gradient(120deg,#7fd6a3,#cfeedd);-webkit-background-clip:text;background-clip:text;color:transparent}

.pl__puntos{display:flex;flex-direction:column;gap:9px}
.pl__punto{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#cfe8d9;cursor:help;align-self:flex-start}
.pl__punto i{font-size:13px;line-height:1;color:#9fe0bb}
.pl__punto-texto{border-bottom:1px dotted rgba(207,232,217,.55);padding-bottom:1px}

/* carrusel de recortes (líneas 44-50): pista arrastrable, tarjetas 142×182 con hueco de 13 */
.pl__prensa{margin:auto -28px 0;overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y}
.pl__prensa.is-drag{cursor:grabbing}
.pl__prensa-pista{display:flex;gap:13px;padding:0 28px;transition:transform .35s ease}
.pl__prensa.is-drag .pl__prensa-pista{transition:none}
.pl__prensa-card{width:142px;height:182px;border-radius:14px;overflow:hidden;flex:none;object-fit:cover;display:block;background-color:#17311f;box-shadow:0 14px 28px rgba(8,20,12,.4);pointer-events:none}

.pl__prensa-nav{display:flex;align-items:center;gap:10px}
.pl__flecha{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-white);transition:all .15s;font-family:inherit}
.pl__flecha:hover{background:rgba(255,255,255,.12)}
.pl__flecha[disabled]{opacity:.35;pointer-events:none}
.pl__flecha i{font-size:13px;line-height:1}
.pl__dots{display:flex;align-items:center;gap:5px;margin-left:auto}
.pl__dot{width:6px;height:6px;border-radius:4px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:all .25s}
.pl__dot.is-active{width:20px;background:#5fc98e}

/* ---------- columna del formulario (líneas 63-99) ---------- */
.pl__col{padding:clamp(26px,4vw,34px);display:flex;flex-direction:column;gap:16px;justify-content:center;min-width:0;background:linear-gradient(180deg,#fff 42%,#eaf5ee 100%)}

.pl__ok{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:22px 0}
.pl__ok[hidden]{display:none}
.pl__ok-badge{width:54px;height:54px;border-radius:50%;background:#e7f3ec;display:flex;align-items:center;justify-content:center}
.pl__ok-titulo{margin:0;font-family:var(--font-heading);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--c-ink)}
.pl__ok-texto{margin:0;font-size:14px;line-height:1.55;color:#5c6b62;max-width:300px}

.pl__form{display:flex;flex-direction:column;gap:10px}
.pl__form[hidden]{display:none}
.pl__head{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.pl__titulo{margin:0;font-family:var(--font-heading);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--c-ink);text-wrap:balance}
.pl__sub{margin:0;font-size:14px;line-height:1.55;color:#5c6b62}

.pl__input{width:100%;box-sizing:border-box;border:1px solid #d5dbd6;border-radius:12px;padding:13px 15px;font-size:14px;font-family:var(--font-body);color:var(--c-ink);outline:none;transition:border-color .15s,background .15s;background:#fbfcfb}
.pl__input::placeholder{color:#a7b2ab}
.pl__input:focus{border-color:var(--c-brand);background:var(--c-white)}
.pl__input.is-invalid{border-color:#c0392b}

/* ---------- teléfono con intl-tel-input (el mismo vendor y piel que Contacto) ----------
   Las reglas .iti__* genéricas son COPIA EXACTA de pages/contact.css:60-74 (allí se explica por
   qué van sin scope: el desplegable en móvil se monta como popup en el body, fuera de .pl). En
   bienvenida conviven las dos hojas sin conflicto porque los valores son idénticos; lo único
   propio del popup va scoped a .pl__tel (el radio de sus inputs es 12px, no var(--r-btn)). */
.pl__tel{display:flex}
.pl__tel .iti{width:100%;--iti-border-color:#d5dbd6;--iti-hover-color:#f4f8f5;--iti-country-selector-bg:var(--c-white)}
.iti__selected-country{color:var(--c-ink);border-radius:calc(var(--r-btn) - 2px) 0 0 calc(var(--r-btn) - 2px);overflow:hidden}
.iti__selected-dial-code{font-size:14px;font-weight:600;color:var(--c-ink);margin-left:2px}
.iti__selected-country-primary{padding-right:3px}
.iti__arrow{border-top-color:var(--c-muted)}
.iti__flag{border-radius:2px}
.iti--inline-country-selector .iti__country-selector{border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 12px 32px rgba(23,36,28,.14)}
.iti__search-input{font-family:inherit;font-size:13px;padding-top:10px;padding-bottom:10px;outline:none;color:var(--c-ink)}
.iti__country{font-size:13px;color:var(--c-ink);padding-top:9px;padding-bottom:9px}
.iti__country .iti__dial-code{font-size:12.5px;color:var(--c-muted)}
.iti--fullscreen-popup .iti__country-selector{border-radius:var(--r-sub)}
.pl__tel .iti__selected-country{border-radius:10px 0 0 10px}

.pl__captcha:empty{display:none}
.pl__error{margin:0;font-size:12.5px;line-height:1.5;color:#c0392b}

.pl__btn{display:block;cursor:pointer;border:0;background:linear-gradient(180deg,#35a065,#297a4d);color:var(--c-white);text-align:center;border-radius:12px;padding:15px;font-size:15px;font-weight:600;font-family:inherit;box-shadow:0 5px 16px rgba(46,139,87,.3);transition:transform .15s,box-shadow .15s;margin-top:4px}
.pl__btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(46,139,87,.4)}
.pl__btn:active{transform:scale(.98)}
.pl__btn[disabled]{opacity:.6;pointer-events:none}
.pl__btn span{margin-left:8px;font-weight:700}
/* Estado de envío: el texto se apaga y un aro girando ocupa el centro; se mantiene hasta que
   la navegación a Precios se lleva la página (no hay pantalla de gracias). */
.pl__btn{position:relative}
.pl__btn.is-cargando{color:transparent;pointer-events:none}
.pl__btn.is-cargando::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:plGira .7s linear infinite}
@keyframes plGira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.pl__btn.is-cargando::after{animation-duration:1.4s}}

.pl__nota{margin:2px 0 0;font-size:11px;line-height:1.5;color:#a7b2ab;text-align:center}
.pl__nota a{color:#8a978f;text-decoration:underline}
.pl__nota a:hover{color:var(--c-green-text)}

/* marquesina de clientes reales (líneas 83-99): los logos de la tira legacy vía _v3_marcas()
   (SVG monocromos de alto 40); pausa en hover como allí (assets/css/style.css:211) */
.pl__marcas{display:flex;flex-direction:column;gap:9px;border-top:1px solid #eef0ee;padding-top:14px}
.pl__marcas-titulo{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a7b2ab;text-align:center}
.pl__marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pl__marquee:hover .pl__marquee-pista{animation-play-state:paused}
.pl__marquee-pista{display:flex;width:max-content;animation:plMarcas 18s linear infinite}
.pl__marquee-grupo{display:flex;align-items:center;gap:24px;padding-right:24px}
.pl__marca{white-space:nowrap;opacity:.75}
.pl__marca img{display:block;height:16px;width:auto}

/* caja de los tooltips de los tres puntos (modules/tooltip.js) — copia de pricing.css:349-352
   con el z-index por encima del overlay del popup (.pl va a 80; el de precios, 70, quedaría
   debajo). Solo pisa a la de precios donde esta hoja se carga, que no es la página de precios. */
.pc-tooltip{position:absolute;z-index:90;max-width:280px;background:var(--c-ink);color:var(--c-white);font-family:var(--font-body);font-size:11.5px;font-weight:500;line-height:1.45;border-radius:var(--r-check);padding:6px 10px;pointer-events:none;animation:dcPop .12s ease}
.pc-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--c-ink);transform:rotate(45deg)}
.pc-tooltip--top .pc-tooltip__arrow{bottom:-4px}
.pc-tooltip--bottom .pc-tooltip__arrow{top:-4px}

@media (prefers-reduced-motion: reduce){
  .pl,.pl__card{animation:none}
  /* la marquesina vuelve a fila estática que se envuelve, sin el grupo clonado */
  .pl__marquee{mask-image:none;-webkit-mask-image:none}
  .pl__marquee-pista{width:100%;animation:none}
  .pl__marquee-grupo{flex-wrap:wrap;justify-content:center;gap:12px 24px;width:100%;padding-right:0}
  .pl__marquee-grupo[aria-hidden]{display:none}
}

/* ≥700px: entra el panel izquierdo (conPanel del template, renderVals línea 138-140) */
@media (min-width:700px){
  .pl__card{grid-template-columns:1fr 1.1fr}
  .pl__panel{display:flex}
  .pl__x{background:rgba(255,255,255,.92)}
}

/* ---------- variante inline: CTA dentro del artículo del blog ---------- */
/* El dc-import inline del template (Blog - Articulo.dc.html:230 + Popup Lead.dc.html:122-132):
   sin velo ni blur ni X, la tarjeta fluye con el contenido y lleva la sombra suave. El envoltorio
   .art-cta (blog-article.css) pone el aire vertical del template. */
.pl--inline{position:static;background:transparent;backdrop-filter:none;z-index:auto;padding:0;display:block;animation:none}
.pl--inline .pl__card{max-height:none;overflow:hidden;margin:0 auto;box-shadow:0 18px 44px rgba(15,31,20,.18);animation:none}
/* sin el carrusel de recortes, claim y puntos quedan centrados en el alto del panel */
.pl--inline .pl__panel{justify-content:center}