/* ==========================================================================
   PLANES DISEÑO WEB — Estilos del plugin
   --------------------------------------------------------------------------
   * Todas las clases usan el prefijo "pdw-" para no chocar con el tema.
   * Todo está anidado bajo .pdw-app: nada afecta al header/footer del sitio.
   * Paleta:
       --pdw-navy      Azul marino (títulos, CTA)
       --pdw-azul      Azul eléctrico (acentos, links)
       --pdw-naranja   Naranja (botones y destacados)
       --pdw-gris      Fondo gris claro
   ========================================================================== */

.pdw-app {
	/* Variables de color: edita aquí para cambiar toda la paleta. */
	--pdw-navy: #122a5c;
	--pdw-navy-oscuro: #0b1e46;
	--pdw-azul: #1b6df0;
	--pdw-azul-claro: #e8f0fe;
	--pdw-naranja: #f97316;
	--pdw-naranja-hover: #e2640a;
	--pdw-verde: #16a34a;
	--pdw-morado: #7c3aed;
	--pdw-gris: #f4f6fb;
	--pdw-gris-borde: #e6eaf2;
	--pdw-texto: #33415c;
	--pdw-sombra: 0 10px 30px rgba(18, 42, 92, .08);
	--pdw-radio: 18px;

	font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--pdw-texto);
	background: linear-gradient(180deg, #fbfcff 0%, var(--pdw-gris) 60%, #fff 100%);
	border-radius: 22px;
	padding: clamp(20px, 4vw, 48px);
	box-sizing: border-box;
	line-height: 1.5;
	overflow: hidden;
}

/* Reset ligero SOLO dentro del contenedor del plugin. */
.pdw-app *,
.pdw-app *::before,
.pdw-app *::after { box-sizing: border-box; }
.pdw-app h2, .pdw-app h3, .pdw-app p, .pdw-app ul { margin: 0; padding: 0; }
.pdw-app ul { list-style: none; }
.pdw-app a { text-decoration: none; }
.pdw-app svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   1) HERO
   ========================================================================== */
.pdw-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.pdw-hero-title { line-height: 1.02; letter-spacing: -.02em; }
.pdw-hero-title span { display: block; }
.pdw-hero-line1 { color: var(--pdw-navy); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; }
.pdw-hero-line2 { color: var(--pdw-naranja); font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; }
.pdw-hero-line3 { color: var(--pdw-navy); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 700; margin-top: .35rem; }

.pdw-hero-text {
	margin-top: 1rem;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	max-width: 34rem;
}

/* Banner CRM gratis */
.pdw-banner-crm {
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--pdw-gris-borde);
	border-left: 5px solid var(--pdw-naranja);
	border-radius: var(--pdw-radio);
	box-shadow: var(--pdw-sombra);
	padding: 16px 20px;
	max-width: 36rem;
}
.pdw-banner-icon {
	flex: 0 0 46px;
	width: 46px; height: 46px;
	padding: 9px;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(135deg, var(--pdw-azul), var(--pdw-navy));
}
.pdw-banner-crm p { font-weight: 700; color: var(--pdw-navy); font-size: .98rem; }
.pdw-banner-strong { color: var(--pdw-naranja); }

/* ---- Mockup laptop + smartphone (100% CSS) ---- */
.pdw-hero-mockup { position: relative; min-height: 300px; }
.pdw-laptop { position: relative; width: 92%; }
.pdw-laptop-screen {
	background: #fff;
	border: 6px solid #1d2430;
	border-radius: 16px 16px 4px 4px;
	padding: 14px 16px 16px;
	box-shadow: var(--pdw-sombra);
}
.pdw-laptop-base {
	height: 14px;
	background: linear-gradient(180deg, #333d4d, #171d27);
	border-radius: 0 0 14px 14px;
	width: 108%;
	margin-left: -4%;
}
.pdw-mock-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pdw-mock-nav i { width: 18px; height: 18px; border-radius: 50%; background: var(--pdw-azul); }
.pdw-mock-nav b { width: 34px; height: 6px; border-radius: 3px; background: #d7deeb; }
.pdw-mock-nav em {
	margin-left: auto; font-style: normal; font-size: .55rem; font-weight: 700;
	color: #fff; background: var(--pdw-naranja); padding: 4px 8px; border-radius: 20px;
}
.pdw-mock-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; align-items: center; }
.pdw-mock-h { display: block; color: var(--pdw-navy); font-weight: 800; font-size: .82rem; line-height: 1.25; }
.pdw-mock-p { display: block; height: 6px; border-radius: 3px; background: #e2e8f3; margin-top: 8px; }
.pdw-mock-p--corta { width: 70%; }
.pdw-mock-btn {
	display: inline-block; margin-top: 10px; font-size: .58rem; font-weight: 700;
	color: #fff; background: var(--pdw-naranja); padding: 5px 12px; border-radius: 20px;
}
.pdw-mock-art { position: relative; height: 90px; }
.pdw-mock-card {
	position: absolute; inset: 8px 30% 22px 0;
	background: linear-gradient(135deg, var(--pdw-azul-claro), #cfe0ff);
	border-radius: 10px;
}
.pdw-mock-card--2 { inset: 24px 0 6px 34%; background: linear-gradient(135deg, var(--pdw-navy), var(--pdw-azul)); }
.pdw-mock-chips { display: flex; gap: 8px; margin-top: 12px; }
.pdw-mock-chips span {
	font-size: .55rem; font-weight: 600; color: var(--pdw-navy);
	background: var(--pdw-gris); border: 1px solid var(--pdw-gris-borde);
	padding: 4px 9px; border-radius: 20px;
}
.pdw-phone {
	position: absolute; right: -2%; bottom: -6%;
	width: 25%; min-width: 96px;
	background: #1d2430; border-radius: 20px; padding: 7px;
	box-shadow: 0 16px 34px rgba(18, 42, 92, .22);
}
.pdw-phone-screen { background: #fff; border-radius: 14px; padding: 12px 10px; }
.pdw-mock-h--mini { font-size: .6rem; }
.pdw-mock-btn--mini { font-size: .5rem; padding: 4px 9px; }
.pdw-mock-pill { display: block; height: 14px; border-radius: 7px; background: var(--pdw-azul-claro); margin-top: 7px; }

/* ==========================================================================
   2) BENEFICIOS DEL CRM
   ========================================================================== */
.pdw-crm-grid {
	margin-top: clamp(24px, 4vw, 40px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--pdw-gris-borde);
	border-radius: var(--pdw-radio);
	box-shadow: var(--pdw-sombra);
	overflow: hidden;
}
.pdw-crm-item {
	padding: 20px 18px;
	text-align: center;
	border-right: 1px solid var(--pdw-gris-borde);
}
.pdw-crm-item:last-child { border-right: 0; }
.pdw-crm-item p { font-size: .88rem; font-weight: 600; color: var(--pdw-navy); }
.pdw-crm-icon {
	display: inline-flex; width: 44px; height: 44px; padding: 10px;
	border-radius: 12px; margin-bottom: 10px;
}
.pdw-crm-icon--azul    { color: var(--pdw-azul);    background: var(--pdw-azul-claro); }
.pdw-crm-icon--verde   { color: var(--pdw-verde);   background: #e6f6ec; }
.pdw-crm-icon--morado  { color: var(--pdw-morado);  background: #f1eafd; }
.pdw-crm-icon--naranja { color: var(--pdw-naranja); background: #fef0e4; }

/* ==========================================================================
   3) TARJETAS DE PLANES
   --------------------------------------------------------------------------
   PC: 4 columnas · Tablet: 2 columnas · Smartphone: 1 columna
   ========================================================================== */
.pdw-planes { margin-top: clamp(28px, 4vw, 48px); }
.pdw-planes-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 24px);
	align-items: start;
}

.pdw-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--pdw-gris-borde);
	border-radius: var(--pdw-radio);
	box-shadow: var(--pdw-sombra);
	padding: 26px 22px 22px;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
.pdw-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(18, 42, 92, .14);
}

/* Tarjeta destacada (Tienda en Línea Básico) */
.pdw-card--destacada { border: 2px solid var(--pdw-naranja); }
.pdw-card-tag {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--pdw-naranja); color: #fff;
	font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	padding: 4px 14px; border-radius: 20px; white-space: nowrap;
}

.pdw-card-icon {
	display: inline-flex; width: 56px; height: 56px; padding: 13px;
	color: #fff; border-radius: 50%;
	background: linear-gradient(135deg, var(--pdw-azul), var(--pdw-navy));
	margin-bottom: 12px;
}
.pdw-card--destacada .pdw-card-icon { background: linear-gradient(135deg, var(--pdw-naranja), #fb923c); }

.pdw-card-title {
	color: var(--pdw-navy);
	font-size: 1.25rem; font-weight: 800; line-height: 1.2;
}

/* Precio */
.pdw-precio {
	display: flex; justify-content: center; align-items: flex-start;
	gap: 4px; margin-top: 12px; color: var(--pdw-navy);
}
.pdw-precio-signo { font-size: 1.5rem; font-weight: 800; margin-top: .4rem; }
.pdw-precio-monto { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pdw-precio-detalle { text-align: left; margin-top: .35rem; }
.pdw-precio-detalle b { display: block; font-size: .8rem; }
.pdw-precio-detalle small { display: block; font-size: .72rem; font-weight: 600; color: var(--pdw-texto); }
.pdw-precio-anual { margin-top: 8px; font-size: .85rem; font-weight: 600; }

/* 4) Botones */
.pdw-card-botones { display: grid; gap: 8px; margin: 16px 0 18px; }
.pdw-btn {
	display: inline-block;
	font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	border-radius: 30px; padding: 12px 18px;
	transition: background .2s ease, color .2s ease, transform .15s ease;
	cursor: pointer;
}
.pdw-btn:focus-visible { outline: 3px solid var(--pdw-azul); outline-offset: 2px; }
.pdw-btn--naranja { background: var(--pdw-naranja); color: #fff !important; }
.pdw-btn--naranja:hover { background: var(--pdw-naranja-hover); transform: translateY(-1px); }
.pdw-btn--contorno { background: #fff; color: var(--pdw-azul) !important; border: 2px solid var(--pdw-azul); }
.pdw-btn--contorno:hover { background: var(--pdw-azul); color: #fff !important; }
.pdw-btn--grande { font-size: .95rem; padding: 14px 28px; }

/* Lista de características */
.pdw-features { text-align: left; }
.pdw-features li {
	display: flex; gap: 8px; align-items: flex-start;
	font-size: .84rem; padding: 4px 0;
}
.pdw-features-heading {
	display: block !important;
	font-weight: 800; color: var(--pdw-navy);
	margin-top: 10px; padding-bottom: 2px !important;
	border-bottom: 1px dashed var(--pdw-gris-borde);
}
.pdw-check { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 3px; color: var(--pdw-naranja); }

/* Nota especial del plan (Editor con IA) */
.pdw-card-nota {
	display: flex; align-items: center; gap: 10px;
	margin: 16px -22px -22px;
	padding: 12px 18px;
	background: var(--pdw-navy);
	color: #fff;
	border-radius: 0 0 calc(var(--pdw-radio) - 2px) calc(var(--pdw-radio) - 2px);
	text-align: left;
}
.pdw-card-nota-ia {
	flex: 0 0 auto; font-size: .68rem; font-weight: 800;
	border: 1.5px solid #fff; border-radius: 8px; padding: 4px 7px;
}
.pdw-card-nota p { font-size: .78rem; font-weight: 600; line-height: 1.35; }

/* ==========================================================================
   5) FRANJA INFERIOR DE BENEFICIOS
   ========================================================================== */
.pdw-franja {
	margin-top: clamp(28px, 4vw, 48px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--pdw-gris-borde);
	border-radius: var(--pdw-radio);
	box-shadow: var(--pdw-sombra);
	overflow: hidden;
}
.pdw-franja-item {
	display: flex; align-items: center; gap: 12px;
	padding: 18px;
	border-right: 1px solid var(--pdw-gris-borde);
}
.pdw-franja-item:last-child { border-right: 0; }
.pdw-franja-icon {
	flex: 0 0 40px; width: 40px; height: 40px; padding: 9px;
	color: var(--pdw-azul); background: var(--pdw-azul-claro); border-radius: 10px;
}
.pdw-franja-item p { font-size: .85rem; font-weight: 700; color: var(--pdw-navy); }

/* ==========================================================================
   6) CTA FINAL
   ========================================================================== */
.pdw-cta {
	margin-top: clamp(24px, 3vw, 36px);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 20px;
	background: linear-gradient(100deg, var(--pdw-navy-oscuro), var(--pdw-navy) 55%, #143a86);
	border-radius: var(--pdw-radio);
	padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 40px);
	color: #fff;
}
.pdw-cta-copy { display: flex; align-items: center; gap: 18px; flex: 1 1 420px; }
.pdw-cta-icon {
	flex: 0 0 54px; width: 54px; height: 54px; padding: 12px;
	color: #fff; background: rgba(255, 255, 255, .12); border-radius: 14px;
}
.pdw-cta-title { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.25; }
.pdw-cta-sub { margin-top: 6px; font-size: .95rem; color: #cfe0ff; }
.pdw-cta-sub strong { color: #4ade80; }
.pdw-cta-derecha { display: flex; align-items: center; gap: 18px; }
.pdw-crm-sello {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	width: 92px; height: 92px; border-radius: 50%;
	background: #fff; color: var(--pdw-navy);
	font-weight: 800; font-size: 1.15rem; line-height: 1;
	border: 3px solid var(--pdw-azul);
}
.pdw-crm-sello small { font-size: .5rem; letter-spacing: .08em; margin-top: 2px; }
.pdw-crm-sello b {
	margin-top: 4px; font-size: .55rem; color: #fff;
	background: var(--pdw-verde); padding: 3px 8px; border-radius: 10px;
}

/* ==========================================================================
   ANIMACIÓN DE APARICIÓN (controlada por pdw-scripts.js)
   ========================================================================== */
.pdw-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.pdw-reveal.pdw-visible { opacity: 1; transform: none; }
/* Si JS no carga o el usuario prefiere menos movimiento, todo queda visible. */
.pdw-app.pdw-sin-js .pdw-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.pdw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.pdw-card { transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   ≤1024px (Tablet): planes y franjas a 2 columnas, hero apilado.
   ≤640px  (Smartphone): todo a 1 columna.
   ========================================================================== */
@media (max-width: 1024px) {
	.pdw-planes-grid,
	.pdw-crm-grid,
	.pdw-franja { grid-template-columns: repeat(2, 1fr); }

	.pdw-crm-item:nth-child(2n),
	.pdw-franja-item:nth-child(2n) { border-right: 0; }
	.pdw-crm-item:nth-child(-n+2),
	.pdw-franja-item:nth-child(-n+2) { border-bottom: 1px solid var(--pdw-gris-borde); }

	.pdw-hero-grid { grid-template-columns: 1fr; }
	.pdw-hero-mockup { max-width: 560px; margin: 0 auto; width: 100%; }
}

@media (max-width: 640px) {
	.pdw-planes-grid,
	.pdw-crm-grid,
	.pdw-franja { grid-template-columns: 1fr; }

	.pdw-crm-item,
	.pdw-franja-item { border-right: 0; border-bottom: 1px solid var(--pdw-gris-borde); }
	.pdw-crm-item:last-child,
	.pdw-franja-item:last-child { border-bottom: 0; }

	.pdw-cta { flex-direction: column; text-align: center; }
	.pdw-cta-copy { flex-direction: column; }
	.pdw-cta-derecha { flex-direction: column; }
	.pdw-phone { right: 0; }
}