/* pag-tickscan.css — piezas propias de tickscan/index.html (v4, 18/10/2026). Prefijo .tickscan-.
   Se carga después de site.css y no lo contradice: solo añade lo que el sistema no trae.
   Regla sin huecos: todo lo que va lado a lado vive dentro de una caja (tarjeta o panel). */

/* ---------- 1 · Cabecera de venta ---------- */
.tickscan-hero .contenedor{gap:22px}
.tickscan-hero__titulo{max-width:13em}
.tickscan-hero .tesela-logo-xl{box-shadow:0 26px 50px -26px rgba(48,40,140,.55)}

/* ---------- 2 · Tarjetas junto al vídeo (la última, oscura, con el botón) ---------- */
.tickscan-par{gap:12px;justify-content:center}
.tickscan-par-cta{justify-content:flex-start}
.tickscan-par-cta .tarjeta__pie{align-self:flex-start}
.tickscan-par-cta .llave-marca-agua{height:220%;right:-6%;bottom:-70%;opacity:.12}

/* ---------- 3 · El problema: número grande y apagado en cada tarjeta ---------- */
.tickscan-problema{gap:12px}
.tickscan-problema__num{font-family:var(--sans);font-size:clamp(40px,3.6vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;color:rgba(169,162,255,.42);margin-bottom:6px}

/* ---------- 4 · La solución: el móvil asoma por el borde de abajo de la tarjeta ---------- */
.tickscan-beneficio{padding-bottom:0;overflow:hidden;gap:24px}
.tickscan-beneficio__texto{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tickscan-beneficio__texto .chips{margin-top:2px}
/* El marco ocupa justo lo que se ve (sin nada que sobresalga de la tarjeta): sin borde ni esquinas abajo,
   y la captura encuadrada desde arriba con object-fit. La lupa del lightbox pasa arriba. */
.tickscan-asoma{
  flex:1 0 auto;align-self:center;width:min(270px,100%);height:clamp(300px,25vw,390px);max-height:500px;
  margin-top:auto;padding-top:6px;display:flex;flex-direction:column;
}
.tickscan-asoma .marco-movil{
  flex:1 1 auto;min-height:0;width:100%;margin:0;display:flex;flex-direction:column;
  padding-bottom:0;border-radius:var(--radio-movil) var(--radio-movil) 0 0;
}
.tickscan-asoma .marco-movil__pantalla{flex:1 1 auto;min-height:0;border-radius:31px 31px 0 0}
.tickscan-asoma a.ampliable{position:absolute;inset:0}
.tickscan-asoma img{width:100%;height:100%;object-fit:cover;object-position:top}
.tickscan-asoma a.ampliable::after{top:12px;bottom:auto}
.tickscan-asoma .marco-movil:hover{transform:none}

/* Cuarto beneficio a todo el ancho: el texto y la ventana del ordenador, que asoma por abajo */
.tickscan-ancha{
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;
  margin-top:var(--hueco);padding-bottom:0;overflow:hidden;
}
.tickscan-ancha__texto{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tickscan-ancha__visual{align-self:end;min-width:0;height:clamp(200px,29vw,430px);padding-top:6px;display:flex;flex-direction:column}
.tickscan-ancha__visual .marco-ventana{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:var(--radio-marco) var(--radio-marco) 0 0}
.tickscan-ancha__visual .marco-ventana__pantalla{flex:1 1 auto;min-height:0}
.tickscan-ancha__visual a.ampliable{position:absolute;inset:0}
.tickscan-ancha__visual img{width:100%;height:100%;object-fit:cover;object-position:top left}
.tickscan-ancha__visual a.ampliable::after{top:12px;bottom:auto}
.tickscan-ancha__visual .marco-ventana:hover{transform:none}
@media (min-width:1024px){
  .tickscan-ancha{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,3.6vw,64px)}
  .tickscan-ancha__texto{padding-bottom:clamp(24px,3vw,44px)}
  .tickscan-ancha__texto .cuerpo-p{font-size:17px;max-width:30em}
}

/* ---------- 5 · Cómo funciona: botón al formulario debajo de los puntos (solo con dos paneles) ---------- */
.tickscan-fijada-cta{align-self:flex-start;margin-top:4px}
@media (max-width:1023px){.tickscan-fijada-cta{display:none}}

/* ---------- 6 · Precios: la cifra grande con la unidad pequeña al lado ---------- */
.tickscan-plan{gap:16px}
.tickscan-precio{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  font-size:clamp(48px,4.6vw,68px);font-weight:750;letter-spacing:-.045em;line-height:1;
  color:var(--texto);font-variant-numeric:tabular-nums;
}
.tickscan-precio small{flex-basis:100%;font-size:16px;font-weight:600;letter-spacing:0;color:var(--texto-sec)}
.tickscan-plan .tarjeta__pie{width:100%}
/* Ofertas: precio tachado (lo que costaría mes a mes), sello de descuento y lo que se ahorra */
.tickscan-plan{position:relative}
.tickscan-antes{margin:0;min-height:24px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:14.5px;color:var(--texto-ter)}
.tickscan-antes s{font-size:20px;font-weight:700;color:var(--texto-sec);text-decoration-color:#E8457A;text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.tickscan-ahorro{align-self:flex-start;margin:0;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:14px;font-weight:700;background:var(--ok-tinte,#DEF4F0);color:var(--ok-texto,#00735D)}
.tickscan-ahorro::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tickscan-ahorro-vacio{background:var(--hundido,#F1F2F9);color:var(--texto-sec,#565A6C)}
.tickscan-ahorro-vacio::before{display:none}
.tickscan-oferta{position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13.5px;font-weight:800;letter-spacing:.01em;color:#1D1E20;background:#FAAA2F;box-shadow:0 10px 24px -12px rgba(250,170,47,.9)}
.tickscan-plan-destacado{box-shadow:0 0 0 2px var(--acento,#6C63FF),0 24px 50px -28px rgba(48,40,140,.55)}

/* ---------- 7 · Formulario central ----------
   Con dos columnas, el mensaje crece hasta la altura de «Qué pasa después» (la caja no queda medio vacía). */
.tickscan-form-caja .formulario{flex:1 1 auto}
@media (min-width:1024px){
  .tickscan-form-caja .formulario__campos{flex:1 1 auto;grid-template-rows:auto minmax(0,1fr)}
  .tickscan-form-caja .campo-f-ancho textarea{flex:1 1 auto}
}
/* WhatsApp como alternativa, al pie de «Qué pasa después» */
.tickscan-alternativa{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:12px}
.tickscan-alternativa .separador{background:rgba(255,255,255,.18)}

/* ---------- 9 · Cierre: halo lila detrás de la marca ---------- */
.tickscan-cierre{background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(108,99,255,.26),rgba(108,99,255,0) 70%),var(--noche)}
.tickscan-cierre .contenedor{gap:24px}
.tickscan-cierre .logo-app{height:clamp(80px,7vw,112px)}
.tickscan-cierre .h2{max-width:15em}

/* La barra CTA del móvil se esconde mientras se ve el formulario (pag-tickscan.js pone la clase en <body>) */

/* ---------- Móvil ---------- */
@media (max-width:759px){
  .tickscan-hero .tesela-logo-xl{width:112px;height:112px;padding:16px;border-radius:26px}
  .tickscan-asoma{height:300px}
  .tickscan-par-cta .tarjeta__pie{align-self:stretch}
}