/* ============================================================
   PIME — Landing del producto (solo se carga en el producto PIME).
   Tokens y Button del design system "Sumale MKT Academia"
   (Claude Design), acotados a .pime para no afectar al resto del sitio.
   ============================================================ */

/* —— Fuentes locales (OFL), solo los pesos usados. Subconjunto latin (mismo que servía Google Fonts). —— */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 700; /* archivo variable: cubre 400, 600 y 700 */
	font-display: swap;
	src: url('fonts/montserrat-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/poppins-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/poppins-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/poppins-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldo de sistema con métricas ajustadas: mientras carga la fuente, el texto ocupa casi lo mismo (evita saltos). */
@font-face {
	font-family: 'Poppins Fallback';
	src: local('Arial');
	ascent-override: 92.33%;
	descent-override: 30.78%;
	line-gap-override: 8.79%;
	size-adjust: 113.73%;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* fuera de este rango (ej. ≠) usa la fuente del sistema, como con Google Fonts */
}
@font-face {
	font-family: 'Montserrat Fallback';
	src: local('Arial');
	ascent-override: 85.79%;
	descent-override: 22.25%;
	line-gap-override: 0%;
	size-adjust: 112.83%;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pime {
	/* —— Colores —— */
	--white: #ffffff;
	--coral-50: #fff1f4;
	--coral-100: #ffe0e7;
	--coral-200: #ffbccb;
	--coral-300: #ff8ba3;
	--coral-400: #ff6080;
	--coral-500: #ff3d65;
	--coral-600: #ed2453;
	--coral-700: #c91843;
	--orange-50: #fff3ec;
	--orange-100: #ffe3d3;
	--orange-200: #ffc3a4;
	--orange-300: #fb9b6e;
	--orange-400: #f8763f;
	--orange-500: #f55b23;
	--orange-600: #e2470f;
	--orange-700: #bd3a0c;
	--ink-900: #31303f;
	--ink-800: #3d3c4d;
	--ink-700: #4f4e60;
	--ink-600: #6a6979;
	--ink-500: #8b8a98;
	--ink-400: #adacb7;
	--gray-50: #f7f7f8;
	--gray-100: #f1f1f3;
	--gray-200: #e6e6e9;
	--gray-300: #d9d9d9;
	--gray-400: #c4c4c8;
	--brand-gradient: linear-gradient(90deg, #f55b23 0%, #ff3d65 100%);

	/* —— Tipografía —— */
	--font-display: 'Poppins', 'Poppins Fallback', system-ui, sans-serif; /* sustituto de Cocogoose */
	--font-body: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* —— Radios y sombras —— */
	--radius-xs: 7px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 19px;
	--radius-xl: 28px;
	--radius-2xl: 40px;
	--radius-3xl: 52px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 10px rgba(49, 48, 63, .08);
	--shadow-card: 0 6px 20px rgba(49, 48, 63, .10);
	--shadow-md: 0 10px 30px rgba(49, 48, 63, .12);
	--shadow-lg: 0 18px 48px rgba(49, 48, 63, .16);
	--shadow-coral: 0 12px 28px rgba(255, 61, 101, .30);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--focus-ring: 0 0 0 3px rgba(255, 61, 101, .35);

	/* Base del design system (equivale a su estilo de body) */
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* —— Página limpia: el body lo controla la landing —— */
body.pime-landing {
	margin: 0;
	background: #fff;
}

/* —— Reset acotado (neutraliza estilos de Astra/Elementor) —— */
.pime *,
.pime *::before,
.pime *::after { box-sizing: border-box; }

.pime img { max-width: none; border: 0; }

.pime h1, .pime h2, .pime h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	clear: none;
	padding: 0;
}

.pime p { padding: 0; }

.pime a { color: var(--coral-500); text-decoration: none; }
.pime a:hover { color: var(--coral-600); }

.pime :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

::selection { background: var(--coral-200); color: var(--ink-900); }

/* —— Button (design system) —— */
.pime .su-btn {
	font-family: var(--font-body);
	font-weight: 700;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius-lg);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	transition: transform 140ms var(--ease-out), background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), color 220ms var(--ease-out);
}
.pime .su-btn:active { transform: scale(0.97); }
.pime .su-btn--lg { font-size: 18px; padding: 18px 38px; }
.pime .su-btn--primary,
.pime .su-btn--primary:visited { background: var(--coral-500); color: var(--white); box-shadow: var(--shadow-coral); }
.pime .su-btn--primary:hover,
.pime .su-btn--primary:focus { background: var(--coral-600); color: var(--white); }
.pime .su-btn--primary:focus-visible { box-shadow: var(--shadow-coral), var(--focus-ring); }

/* —— Header: sticky (deja lugar a la barra de admin si está logueado) —— */
.pime .pime-header { top: 0; }
.admin-bar .pime .pime-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .pime .pime-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .pime .pime-header { top: 0; }
}

/* Anclas: compensan el header fijo */
.pime section[id] { scroll-margin-top: 72px; }

/* —— Selector de moneda (shortcode del plugin multimoneda), discreto —— */
.pime .pime-currency .woocommerce-multi-currency.wmc-shortcode { font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.pime .pime-currency .wmc-currency-wrapper { position: relative; }
.pime .pime-currency .wmc-current-currency {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--ink-800);
	cursor: pointer;
	line-height: 1;
}
.pime .pime-currency .wmc-sub-currency {
	right: 0;
	left: auto;
	min-width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	background: var(--white);
}
.pime .pime-currency .wmc-sub-currency a {
	display: block;
	padding: 8px 14px;
	color: var(--ink-800);
	font-size: 13px;
	font-weight: 600;
	background: var(--white);
}
.pime .pime-currency .wmc-sub-currency a:hover { background: var(--coral-50); color: var(--coral-600); }

/* "Volver arriba" de Astra: sin su CSS/JS en esta landing, no se muestra. */
.pime-landing #ast-scroll-top { display: none !important; }

/* El selector flotante global del plugin no se muestra en esta landing (queda el del header). */
.pime-landing .woocommerce-multi-currency.wmc-sidebar { display: none !important; }

/* —— Precio WooCommerce dentro del bloque de compra —— */
.pime .pime-price .woocommerce-Price-amount,
.pime .pime-price bdi { color: inherit; font: inherit; }
.pime .pime-price del { font-size: .5em; opacity: .5; margin-right: .2em; vertical-align: middle; }
.pime .pime-price ins { text-decoration: none; background: none; }

/* —— Hero: la imagen es el único visual; protagonista sin desbordar —— */
.pime .pime-hero-media { max-width: 520px; }
@media (max-width: 767px) {
	.pime .pime-hero-media { max-width: 440px; }
}

/* —— Testimonios compactos: 40/60 + grilla 2×2 (mobile: 1 por fila) —— */
.pime .pime-testis { grid-template-columns: 1fr; }
.pime .pime-testis__grid { grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.pime .pime-testis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.pime .pime-testis { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* —— Escenario del Manual: scroll horizontal sin barra (mobile) —— */
.pime .pime-manual-track::-webkit-scrollbar { display: none; }

/* —— Objeción: palabras largas ("Automatizaciones") no desbordan los chips de 140px —— */
.pime [data-screen-label="12 No hace falta todo"] span { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }

/* —— FAQ —— */
.pime .pime-faq summary::-webkit-details-marker { display: none; }
.pime .pime-faq summary::marker { content: ''; }
.pime .pime-faq__icon { transition: transform 220ms var(--ease-out); }
.pime .pime-faq[open] .pime-faq__icon { transform: rotate(45deg); }

/* —— Avisos de WooCommerce (si los hubiera) dentro del contenedor del diseño —— */
.pime .pime-notices:not(:empty) { max-width: 1200px; margin: 16px auto 0; padding: 0 clamp(20px, 4vw, 56px); }

@media (prefers-reduced-motion: reduce) {
	.pime .su-btn,
	.pime .pime-faq__icon { transition: none; }
	html { scroll-behavior: auto; }
}