/* ============================================================
   TW POPUP — Suscripción
   Usa la paleta y la tipografía del tema Therapy Works.
   Si el tema no está activo, las variables tienen respaldo propio.
   ============================================================ */

.twpop{
	--p-burdeos:#7B2D5F;
	--p-burdeos-osc:#5E1F48;
	--p-ciruela:#9B4D7D;
	--p-acento:#F47A77;
	--p-acento-osc:#D85D5A;
	--p-acento-suave:#FDEAE9;
	--p-crema:#FFF9F5;
	--p-blanco:#FFFFFF;
	--p-tinta:#2D2A32;
	--p-texto:#5A5660;
	--p-tenue:#8A8690;
	--p-borde:#EFE0EA;
	--p-radio:24px;

	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
.twpop[hidden]{display:none}
.twpop *,.twpop *::before,.twpop *::after{box-sizing:border-box}

/* ------------------------------------------------------------
   Fondo
   ------------------------------------------------------------ */
.twpop-fondo{
	position:absolute;
	inset:0;
	background:rgba(45,25,40,.55);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	opacity:0;
	transition:opacity .4s ease;
}
.twpop.abierto .twpop-fondo{opacity:1}

/* La esquina y la barra no oscurecen la página: no bloquean la lectura. */
.twpop-esquina,.twpop-barra{pointer-events:none}
.twpop-esquina .twpop-caja,.twpop-barra .twpop-caja{pointer-events:auto}
.twpop-esquina .twpop-fondo,.twpop-barra .twpop-fondo{display:none}

/* ------------------------------------------------------------
   Caja
   ------------------------------------------------------------ */
.twpop-caja{
	position:relative;
	background:var(--p-blanco);
	border-radius:var(--p-radio);
	box-shadow:0 32px 90px rgba(60,20,45,.34),0 4px 14px rgba(60,20,45,.12);
	overflow:hidden;
	width:100%;
	max-height:calc(100vh - 40px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	opacity:0;
	transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}

/* --- Centrado --- */
.twpop-centro{align-items:center;justify-content:center;padding:20px}
.twpop-centro .twpop-caja{max-width:470px;transform:translateY(22px) scale(.96)}
.twpop-centro.twpop-con-img .twpop-caja{max-width:880px;display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%)}
.twpop-centro.abierto .twpop-caja{opacity:1;transform:translateY(0) scale(1)}

/* --- Esquina --- */
.twpop-esquina{align-items:flex-end;justify-content:flex-end;padding:22px}
.twpop-esquina .twpop-caja{max-width:378px;transform:translateY(26px);box-shadow:0 22px 56px rgba(60,20,45,.26)}
.twpop-esquina.abierto .twpop-caja{opacity:1;transform:translateY(0)}
/* Deja libre la esquina inferior derecha: ahí viven WhatsApp y el carrito. */
@media (min-width:769px){.twpop-esquina{padding-right:100px}}

/* --- Barra inferior --- */
.twpop-barra{align-items:flex-end;justify-content:center;padding:0}
.twpop-barra .twpop-caja{
	max-width:none;
	border-radius:22px 22px 0 0;
	transform:translateY(100%);
	box-shadow:0 -12px 44px rgba(60,20,45,.2);
}
.twpop-barra.abierto .twpop-caja{opacity:1;transform:translateY(0)}
.twpop-barra .twpop-img{display:none}
.twpop-barra .twpop-cuerpo{padding:26px 40px}
.twpop-barra .twpop-vista[data-twpop-vista="form"]{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(320px,420px);
	align-items:center;
	gap:34px;
	max-width:1180px;
	margin:0 auto;
}
.twpop-barra .twpop-titulo{font-size:1.32rem;margin-bottom:4px}
.twpop-barra .twpop-texto{margin-bottom:0}
.twpop-barra .twpop-form{margin-top:0}

/* ------------------------------------------------------------
   Panel de imagen
   ------------------------------------------------------------ */
.twpop-img{
	position:relative;
	background:var(--p-burdeos) center/cover no-repeat;
	min-height:260px;
}
.twpop-img::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(150deg,rgba(123,45,95,.42) 0%,rgba(123,45,95,.12) 45%,rgba(244,122,119,.34) 100%);
}

/* ------------------------------------------------------------
   Cuerpo
   ------------------------------------------------------------ */
.twpop-cuerpo{position:relative;padding:44px 42px 36px}
.twpop-esquina .twpop-cuerpo{padding:34px 30px 28px}

/* Halo suave detrás del contenido: da profundidad sin cargar. */
.twpop-cuerpo::before{
	content:'';
	position:absolute;
	top:-90px;
	right:-70px;
	width:230px;
	height:230px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(244,122,119,.16) 0%,rgba(244,122,119,0) 70%);
	pointer-events:none;
}

.twpop-vista[hidden]{display:none}

.twpop-eyebrow{
	display:inline-block;
	font-size:.7rem;
	font-weight:700;
	letter-spacing:2.4px;
	text-transform:uppercase;
	color:var(--p-burdeos);
	margin-bottom:12px;
}
.twpop-titulo{
	margin:0 0 12px;
	font-size:1.62rem;
	font-weight:800;
	line-height:1.22;
	color:var(--p-tinta);
	letter-spacing:-.01em;
	font-family:inherit;
}
.twpop-esquina .twpop-titulo{font-size:1.32rem}
.twpop-texto{
	margin:0 0 20px;
	font-size:.94rem;
	color:var(--p-texto);
	line-height:1.68;
}
.twpop-texto a{color:var(--p-burdeos);text-decoration:underline;text-underline-offset:2px}

.twpop-regalo{
	display:flex;
	align-items:center;
	gap:11px;
	margin:0 0 20px;
	padding:12px 16px;
	border-radius:14px;
	background:var(--p-acento-suave);
	border:1px solid rgba(244,122,119,.28);
	color:var(--p-burdeos-osc);
	font-size:.88rem;
	font-weight:600;
	line-height:1.45;
}
.twpop-regalo svg{width:19px;height:19px;flex-shrink:0;color:var(--p-acento-osc)}

/* ------------------------------------------------------------
   Formulario
   ------------------------------------------------------------ */
.twpop-form{margin:0}
.twpop-campo{margin:0 0 11px}
.twpop-form input[type=text],
.twpop-form input[type=email],
.twpop-form input[type=tel]{
	width:100%;
	padding:14px 18px;
	border:1.6px solid var(--p-borde);
	border-radius:14px;
	font-size:.95rem;
	font-family:inherit;
	color:var(--p-tinta);
	background:#fff;
	transition:border-color .2s,box-shadow .2s;
	-webkit-appearance:none;
	appearance:none;
}
.twpop-form input::placeholder{color:#b3aab0}
.twpop-form input:focus{
	outline:none;
	border-color:var(--p-ciruela);
	box-shadow:0 0 0 3.5px rgba(155,77,125,.14);
}
.twpop-form input[aria-invalid="true"]{
	border-color:#E0475F;
	box-shadow:0 0 0 3.5px rgba(224,71,95,.12);
}

/* Trampa para robots: fuera de la vista pero no display:none. */
.twpop-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.twpop-privacidad{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:14px 0 16px;
	font-size:.79rem;
	color:var(--p-tenue);
	line-height:1.55;
	cursor:pointer;
}
.twpop-privacidad input[type=checkbox]{
	flex-shrink:0;
	width:17px;
	height:17px;
	margin:1px 0 0;
	accent-color:var(--p-acento);
	cursor:pointer;
}
.twpop-privacidad a{color:var(--p-burdeos);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.twpop-btn{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	width:100%;
	min-height:52px;
	padding:15px 28px;
	border:none;
	border-radius:50px;
	background:linear-gradient(135deg,var(--p-acento) 0%,var(--p-acento-osc) 100%);
	color:#fff;
	font-family:inherit;
	font-size:.97rem;
	font-weight:700;
	letter-spacing:.015em;
	cursor:pointer;
	overflow:hidden;
	box-shadow:0 8px 24px rgba(244,122,119,.34);
	transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,filter .22s;
}
.twpop-btn::after{
	content:'';
	position:absolute;
	top:-50%;
	left:-75%;
	width:50%;
	height:200%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
	transform:skewX(-25deg);
}
.twpop-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(244,122,119,.44)}
.twpop-btn:hover::after{animation:twpopBrillo .65s ease forwards}
.twpop-btn:active{transform:translateY(0)}
.twpop-btn:focus-visible{outline:3px solid rgba(155,77,125,.45);outline-offset:2px}
@keyframes twpopBrillo{0%{left:-75%}100%{left:125%}}

.twpop-btn[disabled]{cursor:wait;filter:saturate(.7);transform:none}
.twpop-btn.cargando .twpop-btn-txt{opacity:.35}
.twpop-spinner{display:none;position:absolute;width:19px;height:19px;border:2.4px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:twpopGirar .7s linear infinite}
.twpop-btn.cargando .twpop-spinner{display:block}
@keyframes twpopGirar{to{transform:rotate(360deg)}}

.twpop-btn-suave{
	background:var(--p-crema);
	color:var(--p-burdeos);
	border:1.6px solid var(--p-borde);
	box-shadow:none;
	margin-top:8px;
}
.twpop-btn-suave:hover{background:#fbf2f7;box-shadow:none;transform:translateY(-1px)}
.twpop-btn-suave::after{display:none}

.twpop-error{
	margin:12px 0 0;
	padding:11px 15px;
	border-radius:12px;
	background:#FEF2F2;
	border:1px solid #FCA5A5;
	color:#B91C1C;
	font-size:.83rem;
	font-weight:600;
	line-height:1.5;
	animation:twpopEntra .28s ease both;
}
.twpop-error[hidden]{display:none}
@keyframes twpopEntra{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.twpop-nota{
	margin:14px 0 0;
	text-align:center;
	font-size:.75rem;
	color:var(--p-tenue);
}

/* ------------------------------------------------------------
   Éxito
   ------------------------------------------------------------ */
.twpop-exito{text-align:center;padding:8px 0}
.twpop-check{
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	margin:0 auto 20px;
	border-radius:50%;
	background:linear-gradient(135deg,#6FCF97,#3EAE72);
	color:#fff;
	box-shadow:0 10px 26px rgba(62,174,114,.32);
	animation:twpopLatido .55s cubic-bezier(.34,1.56,.64,1) both;
}
.twpop-check svg{width:31px;height:31px}
@keyframes twpopLatido{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.twpop-exito .twpop-texto{margin-bottom:18px}

/* ------------------------------------------------------------
   Cerrar
   ------------------------------------------------------------ */
.twpop-cerrar{
	position:absolute;
	top:14px;
	right:14px;
	z-index:3;
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	padding:0;
	border:none;
	border-radius:50%;
	background:rgba(255,255,255,.86);
	color:var(--p-burdeos);
	cursor:pointer;
	box-shadow:0 2px 10px rgba(60,20,45,.14);
	transition:background .2s,transform .2s,color .2s;
}
.twpop-cerrar svg{width:17px;height:17px}
.twpop-cerrar:hover{background:#fff;transform:rotate(90deg);color:var(--p-acento-osc)}
.twpop-cerrar:focus-visible{outline:3px solid rgba(155,77,125,.45);outline-offset:2px}

/* ------------------------------------------------------------
   Paletas
   ------------------------------------------------------------ */
/* marca — degradado burdeos → rosa en la cabecera del cuerpo */
.twpop-pal-marca .twpop-cuerpo{background:linear-gradient(178deg,#FFF6FA 0%,#FFFFFF 38%)}
.twpop-pal-marca .twpop-eyebrow{color:var(--p-burdeos)}

/* rosa — el acento manda */
.twpop-pal-rosa .twpop-cuerpo{background:linear-gradient(178deg,#FFF2F1 0%,#FFFFFF 40%)}
.twpop-pal-rosa .twpop-eyebrow{color:var(--p-acento-osc)}

/* crema — cálida y sobria */
.twpop-pal-crema .twpop-cuerpo{background:var(--p-crema)}
.twpop-pal-crema .twpop-form input{background:#fff}
.twpop-pal-crema .twpop-btn{background:linear-gradient(135deg,var(--p-burdeos),var(--p-ciruela));box-shadow:0 8px 24px rgba(123,45,95,.3)}
.twpop-pal-crema .twpop-btn:hover{box-shadow:0 12px 30px rgba(123,45,95,.4)}

/* oscuro — burdeos profundo, alto contraste */
.twpop-pal-oscuro .twpop-caja{background:#3B1730}
.twpop-pal-oscuro .twpop-cuerpo{background:linear-gradient(160deg,#4A1C3C 0%,#33132A 100%)}
.twpop-pal-oscuro .twpop-cuerpo::before{background:radial-gradient(circle,rgba(244,122,119,.22) 0%,rgba(244,122,119,0) 70%)}
.twpop-pal-oscuro .twpop-titulo{color:#fff}
.twpop-pal-oscuro .twpop-texto{color:rgba(255,255,255,.82)}
.twpop-pal-oscuro .twpop-texto a{color:#FFD3D2}
.twpop-pal-oscuro .twpop-eyebrow{color:#FFB3B1}
.twpop-pal-oscuro .twpop-nota,.twpop-pal-oscuro .twpop-privacidad{color:rgba(255,255,255,.6)}
.twpop-pal-oscuro .twpop-privacidad a{color:#FFD3D2}
.twpop-pal-oscuro .twpop-form input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.twpop-pal-oscuro .twpop-form input::placeholder{color:rgba(255,255,255,.45)}
.twpop-pal-oscuro .twpop-form input:focus{border-color:#FFB3B1;box-shadow:0 0 0 3.5px rgba(244,122,119,.2)}
.twpop-pal-oscuro .twpop-regalo{background:rgba(244,122,119,.14);border-color:rgba(244,122,119,.3);color:#FFD3D2}
.twpop-pal-oscuro .twpop-cerrar{background:rgba(255,255,255,.14);color:#fff}
.twpop-pal-oscuro .twpop-cerrar:hover{background:rgba(255,255,255,.24)}
.twpop-pal-oscuro .twpop-btn-suave{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* ------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------ */
.twpop .screen-reader-text{
	position:absolute!important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
	.twpop-caja,.twpop-fondo{transition:opacity .01ms!important;transform:none!important}
	.twpop-check,.twpop-error{animation:none!important}
	.twpop-btn::after{display:none}
	.twpop-cerrar:hover{transform:none}
}

/* ------------------------------------------------------------
   Móvil
   ------------------------------------------------------------ */
@media (max-width:860px){
	.twpop-centro.twpop-con-img .twpop-caja{grid-template-columns:1fr}
	.twpop-centro.twpop-con-img .twpop-img{min-height:150px}
	.twpop-barra .twpop-vista[data-twpop-vista="form"]{grid-template-columns:1fr;gap:16px;text-align:center}
	.twpop-barra .twpop-cuerpo{padding:24px}
}

@media (max-width:600px){
	.twpop-centro,.twpop-esquina{align-items:flex-end;justify-content:center;padding:0}
	.twpop-centro .twpop-caja,.twpop-esquina .twpop-caja{
		max-width:none;
		border-radius:26px 26px 0 0;
		transform:translateY(100%);
		max-height:92vh;
	}
	.twpop-centro.abierto .twpop-caja,.twpop-esquina.abierto .twpop-caja{transform:translateY(0)}
	.twpop-esquina .twpop-fondo{display:block}
	.twpop-esquina{pointer-events:auto}
	.twpop-cuerpo,.twpop-esquina .twpop-cuerpo{padding:32px 24px 26px}
	.twpop-titulo,.twpop-esquina .twpop-titulo{font-size:1.36rem}
	.twpop-texto{font-size:.9rem}
	.twpop-centro.twpop-con-img .twpop-img{min-height:120px}

	/* Barra de arrastre: sugiere que se puede cerrar deslizando. */
	.twpop-caja::before{
		content:'';
		position:absolute;
		top:9px;left:50%;
		width:42px;height:4px;
		margin-left:-21px;
		border-radius:4px;
		background:rgba(123,45,95,.18);
		z-index:2;
	}
	.twpop-pal-oscuro .twpop-caja::before{background:rgba(255,255,255,.25)}
	.twpop-con-img .twpop-caja::before{background:rgba(255,255,255,.55)}
}

/* Pantallas bajas: el popup nunca debe dejar el botón fuera de la vista. */
@media (max-height:620px){
	.twpop-cuerpo{padding:28px 34px 24px}
	.twpop-titulo{font-size:1.34rem;margin-bottom:8px}
	.twpop-texto{margin-bottom:14px;font-size:.89rem}
	.twpop-centro.twpop-con-img .twpop-img{min-height:0}
}