/*
 * Marketing: planes, confianza, idioma, consentimiento y prueba.
 *
 * Hereda los tokens del tema (`--poc-*`) y declara respaldos: esta hoja se
 * carga en TODA la parte pública, también en páginas que no sean del tema, y
 * una variable que no existe deja el componente sin color en vez de sin
 * maquetar.
 */

.poc-mk-products,
.poc-mk-trust,
.poc-mk-skins {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Productos ─────────────────────────────────────────────────────── */

.poc-mk-products {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.poc-mk-product h3 {
	margin: 0 0 .25rem;
	font-size: 1.15rem;
}

.poc-mk-product p {
	margin: 0;
	color: var(--poc-muted, #5b6b80);
}

/* ── Planes ────────────────────────────────────────────────────────── */

.poc-mk-plans {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 1.5rem 0;
}
/* A-77: «Para ti» lleva tres planes (combo, de por vida y anual). Tres en
   fila o una columna: con auto-fit salían dos y uno huérfano en tableta. */
.poc-mk-plans.poc-mk-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
	.poc-mk-plans.poc-mk-plans--3 { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

.poc-mk-plan {
	border: 1px solid var(--poc-line, #e4e8ee);
	border-radius: var(--poc-radius-md, 12px);
	padding: 1.25rem;
	background: var(--poc-surface, #ffffff);
}

.poc-mk-plan h3 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.poc-mk-price {
	margin: 0 0 1rem;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
}

.poc-mk-cadence {
	display: block;
	font-size: .85rem;
	font-weight: 400;
	color: var(--poc-muted, #5b6b80);
}

.poc-mk-cta {
	margin: 0;
}

/* Planes por audiencia (`09` §1.3): «para ti» y «para tu equipo» no compiten. */
.poc-mk-audience {
	margin: 2rem 0;
}

.poc-mk-audience__title {
	margin: 0 0 .25rem;
	font-size: 1.25rem;
}

.poc-mk-plan h4 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.poc-mk-plan--featured {
	border-color: var(--poc-accent, #d4af37);
	box-shadow: var(--poc-shadow-md, 0 6px 20px rgba(13, 27, 42, .08));
}

.poc-mk-badge {
	display: inline-block;
	margin-bottom: .5rem;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--poc-accent-soft, #fbf5e2);
	color: var(--poc-accent-ink, #1e1600);
	font-size: .78rem;
	font-weight: 700;
}

.poc-mk-save {
	/* Con aire: iba pegado al precio (docs/39, P1-3). */
	margin: .5rem 0 .25rem;
	font-weight: 700;
	/* Tinta, no `--poc-accent-ink`: esa es para escribir SOBRE oro, y en
	   oscuro sobre la superficie daba 1,03:1 (docs/39, P1-6). */
	color: var(--poc-ink);
}

.poc-mk-includes {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}

.poc-mk-includes li::before {
	content: "✓";
	margin-right: .4rem;
	color: var(--poc-accent, #d4af37);
	font-weight: 700;
}

.poc-mk-preorder,
.poc-mk-alt {
	margin: 0 0 1rem;
	font-size: .88rem;
	color: var(--poc-muted, #5b6b80);
}

/* ── Confianza ─────────────────────────────────────────────────────── */

/* Cada señal con su marca propia y no con un separador: el «· » delante de
   cada una dejaba un punto suelto al principio de la fila y, al envolver,
   cuatro líneas que empezaban por «·» (docs/39, P1-4). Con aire arriba y
   abajo: iba pegada al título siguiente. */
.poc-mk-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: var(--poc-space-3, 1.5rem) 0 var(--poc-space-4, 2.5rem) !important;
	font-size: .9rem;
	color: var(--poc-muted, #55627a);
}

.poc-mk-trust li {
	display: inline-flex;
	align-items: baseline;
	gap: .4rem;
}

.poc-mk-trust li::before {
	content: "✓";
	color: var(--poc-accent, #d4af37);
	font-weight: 700;
}

/* ── Diseños ───────────────────────────────────────────────────────── */

.poc-mk-skins {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.poc-mk-skin a {
	display: block;
	text-align: center;
	text-decoration: none;
}

.poc-mk-skin img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--poc-radius-md, 12px);
}

.poc-mk-skin span {
	display: block;
	margin-top: .5rem;
	font-size: .85rem;
}

/* ── Lead y prueba ─────────────────────────────────────────────────── */

.poc-mk-lead,
.poc-trial-form {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: flex-end;
	margin: 1rem 0;
}

.poc-mk-lead label {
	display: block;
	font-size: .9rem;
}

.poc-mk-lead input[type="email"] {
	/* 16px o iOS hace zoom al enfocar y descoloca la página entera. */
	font-size: 16px;
	padding: .6rem .75rem;
	min-height: 44px;
	border: 1px solid var(--poc-line, #e4e8ee);
	border-radius: var(--poc-radius-sm, 8px);
}

/* El señuelo se esconde con CSS y no con `type=hidden`: un campo oculto no lo
 * rellena un robot que mira el DOM, y uno con `display:none` sí. */
.poc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.poc-mk-lead-msg,
.poc-trial-msg {
	flex: 1 0 100%;
	margin: .25rem 0 0;
	font-size: .9rem;
}

/* ── FAQ y cookies ─────────────────────────────────────────────────── */

.poc-mk-faq dt {
	margin-top: 1rem;
	font-weight: 600;
}

.poc-mk-faq dd {
	margin: .25rem 0 0;
	color: var(--poc-muted, #5b6b80);
}

.poc-mk-cookies {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.poc-mk-cookies th,
.poc-mk-cookies td {
	text-align: left;
	padding: .5rem;
	border-bottom: 1px solid var(--poc-line, #e4e8ee);
	vertical-align: top;
}

/*
 * En un teléfono la fila se apila y se lee como una ficha.
 *
 * Cinco columnas no caben en 390 px: la tabla medía 602 y arrastraba de lado
 * al documento entero. Un `overflow-x: auto` habría quitado el desplazamiento
 * de la página, pero deja una tabla que se arrastra con el dedo en la página
 * que explica qué se guarda del visitante — que es de las pocas que alguien
 * lee entera.
 *
 * El título de cada columna vive en el `data-label` de la celda, que lo pone
 * el atajo. Sin él, apilar deja cinco valores sueltos sin decir de qué son.
 */
@media (max-width: 40rem) {
	.poc-mk-cookies,
	.poc-mk-cookies tbody,
	.poc-mk-cookies tr,
	.poc-mk-cookies td {
		display: block;
		width: 100%;
	}

	/* La cabecera se va: cada celda ya lleva su título al lado. */
	.poc-mk-cookies thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.poc-mk-cookies tr {
		margin: 0 0 .75rem;
		border: 1px solid var(--poc-line, #e4e8ee);
		border-radius: 10px;
		padding: .25rem .5rem;
	}

	.poc-mk-cookies td {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: .75rem;
		padding: .4rem .25rem;
		border-bottom: 0;
	}

	.poc-mk-cookies tr td + td {
		border-top: 1px solid var(--poc-line, #e4e8ee);
	}

	.poc-mk-cookies td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--poc-muted, #5b6b80);
	}

	/* El nombre técnico es largo y no puede partir la rejilla. */
	.poc-mk-cookies td code {
		overflow-wrap: anywhere;
	}
}

/* Una frase legal sin decidir tiene que doler a la vista. */
.poc-mk-legal--open {
	padding: .75rem 1rem;
	border-left: 4px solid #b45309;
	background: #fffbeb;
	color: #7c2d12;
}

/* ── Idioma ────────────────────────────────────────────────────────── */

/*
 * Los cuatro idiomas medían 19 px de alto: por debajo del mínimo de 24×24 que
 * pide WCAG 2.2 AA (2.5.8), y muy por debajo de lo que acierta un pulgar. Se
 * agranda la ZONA, no la letra: el texto sigue en .9rem y lo que crece es el
 * área pulsable, que es lo que se falla.
 */
.poc-lang ul {
	display: flex;
	gap: .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .9rem;
}

.poc-lang a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 2px;
}

@media (pointer: coarse) {
	.poc-lang a {
		min-height: 44px;
	}
}

.poc-lang a[aria-current="true"] {
	font-weight: 600;
	text-decoration: none;
}

.poc-lang-hint {
	position: fixed;
	inset-inline: 1rem;
	bottom: 1rem;
	z-index: 40;
	max-width: 26rem;
	margin-inline: auto;
	padding: 1rem;
	border: 1px solid var(--poc-line, #e4e8ee);
	border-radius: var(--poc-radius-md, 12px);
	background: var(--poc-surface, #ffffff);
	box-shadow: var(--poc-shadow-md, 0 4px 16px rgba(16, 24, 40, 0.08));
}

.poc-lang-hint p {
	margin: 0 0 .5rem;
}

/* ── Consentimiento ────────────────────────────────────────────────── */

.poc-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1rem clamp(1rem, 4vw, 2rem);
	border-top: 1px solid var(--poc-line, #e4e8ee);
	background: var(--poc-surface, #ffffff);
}

.poc-consent__text {
	flex: 1 1 20rem;
	margin: 0;
	font-size: .95rem;
}

.poc-consent__actions {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

/* `hidden` tiene que ganar a `display:flex` y al `inline-flex` del botón: el
   aviso se decide en el navegador y nace oculto (`09-2`). Sin esto se veía a
   todo el mundo antes de decidir, y el botón del otro modo también. */
.poc-consent[hidden],
.poc-consent [hidden],
.poc-lang-hint[hidden] {
	display: none !important;
}

/* ── Soporte: el lanzador ──────────────────────────────────────────── */

/*
 * Un cuadrado abajo a la IZQUIERDA (Alex, 2026-10-07; referencia: kommo.com)
 * que al pulsarlo se vuelve una «X» y despliega a su derecha un cuadrado por
 * canal. 56 px: pasa de sobra el mínimo táctil y es el tamaño que la
 * referencia usa. Solo icono: la píldora con etiqueta que hubo antes tapaba
 * una línea del párrafo del hero a 390 px (medido el 2026-09-19).
 *
 * Colores por token: el bloque oscuro invierte `--poc-brand` y
 * `--poc-brand-ink` a la vez. El único fijo es el verde de WhatsApp, que es
 * de un tercero y va con su propio blanco: #128c7e daba 4,13:1 (docs/39,
 * P2-3), un punto más oscuro pasa AA.
 */
.poc-support {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 30;
	display: flex;
	align-items: flex-end;
	gap: .625rem;
	transition: opacity .2s ease, visibility .2s;
}

.poc-support--away {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.poc-support__toggle,
.poc-support__item {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	margin: 0;
	border: 2px solid transparent;
	border-radius: var(--poc-radius-lg, 18px);
	background: var(--poc-brand, #0d1b2a);
	color: var(--poc-brand-ink, #ffffff);
	box-shadow: var(--poc-shadow-md, 0 4px 16px rgba(16, 24, 40, 0.08));
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}

.poc-support__toggle:hover,
.poc-support__item:hover {
	transform: translateY(-1px);
}

.poc-support__ico {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Abierto: el mismo cuadrado, en fantasma, con la «X». */
.poc-support__ico--close,
.poc-support__toggle[aria-expanded="true"] .poc-support__ico--open {
	display: none;
}

.poc-support__toggle[aria-expanded="true"] {
	background: var(--poc-surface, #ffffff);
	color: var(--poc-brand, #0d1b2a);
	border-color: var(--poc-brand, #0d1b2a);
}

.poc-support__toggle[aria-expanded="true"] .poc-support__ico--close {
	display: block;
}

/* Hasta nueve canales. En un teléfono no caben en una fila: se parten en
   filas de cuatro que crecen hacia ARRIBA (`wrap-reverse`), con el primero
   abajo a la izquierda, pegado al lanzador. 4 × 56 + 3 huecos = 254 px, que
   cabe a la derecha del lanzador incluso a 360 px. */
.poc-support__menu {
	display: flex;
	flex-wrap: wrap-reverse;
	align-items: flex-end;
	gap: .625rem;
	max-width: calc(4 * 56px + 3 * .625rem);
}

@media (min-width: 760px) {
	.poc-support__menu {
		flex-wrap: nowrap;
		max-width: none;
	}
}

/* `hidden` tiene que ganar al `display: flex`, como en el aviso de cookies. */
.poc-support__menu[hidden] {
	display: none !important;
}

.poc-support__item--whatsapp {
	background: #0e7568;
	color: #fff;
}

/* La etiqueta: siempre en el árbol de accesibilidad, visible al pasar el
   ratón o al llegar con el teclado. En táctil no hay «pasar el ratón»: ahí
   el icono y el nombre accesible hacen el trabajo, como en la referencia. */
.poc-support__label {
	position: absolute;
	bottom: calc(100% + .5rem);
	left: 50%;
	transform: translateX(-50%);
	padding: .3rem .65rem;
	border-radius: 999px;
	background: var(--poc-brand, #0d1b2a);
	color: var(--poc-brand-ink, #ffffff);
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.poc-support__item:hover .poc-support__label,
.poc-support__item:focus-visible .poc-support__label {
	opacity: 1;
}

/* Una etiqueta cada vez: con un canal enfocado por teclado y otro bajo el
   ratón salían las dos y se pisaban (medido en Chrome a 1366 el 2026-10-07). */
.poc-support__menu:hover .poc-support__item:not(:hover) .poc-support__label {
	opacity: 0;
}

/* Los canales entran de uno en uno desde el lanzador. */
@keyframes poc-support-in {
	from {
		opacity: 0;
		transform: translateX(-10px) scale(.9);
	}
}

.poc-support__menu:not([hidden]) .poc-support__item {
	animation: poc-support-in .2s ease both;
}

.poc-support__menu:not([hidden]) .poc-support__item:nth-child(2) { animation-delay: 0.04s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(3) { animation-delay: 0.08s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(4) { animation-delay: 0.12s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(5) { animation-delay: 0.16s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(6) { animation-delay: 0.2s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(7) { animation-delay: 0.24s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(8) { animation-delay: 0.28s; }
.poc-support__menu:not([hidden]) .poc-support__item:nth-child(9) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.poc-support__menu:not([hidden]) .poc-support__item {
		animation: none;
	}

	.poc-support__toggle:hover,
	.poc-support__item:hover {
		transform: none;
	}
}

/* En un teléfono la sugerencia de idioma ocupa el borde inferior entero y
   taparía el lanzador: mientras esté a la vista, el lanzador se aparta. La
   sugerencia se pinta antes en el DOM (prioridad 10 frente a 15). */
@media (max-width: 600px) {
	.poc-lang-hint:not([hidden]) ~ .poc-support {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ── Volver arriba ─────────────────────────────────────────────────── */

/* Abajo a la DERECHA, fantasma, 48 px: no compite con el botón dorado ni con
   el lanzador de la izquierda. Nace con `hidden` y el script lo enseña
   pasadas dos pantallas en una página de más de cuatro. `.poc-totop` y no
   `.poc-top`: esa es la barra superior de la cuenta, y esta hoja también
   carga en `/app/` (2026-10-07, la dejaba en un cuadrado de 48 px). */
.poc-totop {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 30;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--poc-line, #e1e6ee);
	border-radius: var(--poc-radius-lg, 18px);
	background: var(--poc-surface, #ffffff);
	color: var(--poc-ink, #0d1b2a);
	box-shadow: var(--poc-shadow-md, 0 4px 16px rgba(16, 24, 40, 0.08));
	transition: opacity .2s ease, visibility .2s, transform .15s ease;
}

.poc-totop:hover {
	border-color: var(--poc-brand, #0d1b2a);
	transform: translateY(-1px);
}

.poc-totop[hidden] {
	display: none !important;
}

.poc-totop--away {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.poc-totop__ico {
	width: 24px;
	height: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.poc-totop:hover {
		transform: none;
	}
}

/* ── Botones ───────────────────────────────────────────────────────── */

/*
 * `.poc-btn` y `.poc-btn--ghost` los declara el TEMA, en `theme.css`. Aquí solo
 * vive el modificador que el marketing añade. Redefinir el botón sería empezar
 * la segunda familia de estilos, que es exactamente cómo Mi-Contacto acabó con
 * doce familias de color y nueve radios.
 */
.poc-btn--small {
	min-height: 36px;
	padding: .4rem .8rem;
	font-size: .9rem;
}

@media (max-width: 480px) {
	.poc-consent {
		flex-direction: column;
		align-items: stretch;
	}

	/* En columna, `flex-basis: 20rem` del texto se volvía 320 px de ALTO vacío. */
	.poc-consent__text {
		flex: 0 0 auto;
	}

	.poc-consent__actions .poc-btn {
		flex: 1;
	}
}

/* «Preferencias de cookies» en el pie: un botón que se lee como un enlace más. */
.poc-legal-links .poc-link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}