/*
 * Planes (planes.php). De diez versiones, Adiel eligió mezclar dos (2026-10-10): las tarjetas de la 2 (la cabecera de
 * cada plan rellena con su color, los botones alineados abajo) y la tabla comparativa de la 4 debajo.
 */

/* ---------- Colores de cada plan (los de app.bitacora.live/plans, como la escalera de la portada) ---------- */
.pl [data-plan="free"] { --a1: #b8c2d0; --a2: #8a96a8; --pbg: #12151b; }
.pl [data-plan="essential"] { --a1: #eef1f5; --a2: #a0b4ff; --pbg: radial-gradient(120% 60% at 20% 0%, rgba(160, 180, 255, 0.3), transparent 60%), radial-gradient(90% 55% at 90% 0%, rgba(120, 255, 220, 0.14), transparent 60%), #111319; }
.pl [data-plan="pro"] { --a1: #56cce6; --a2: #a8f06b; --pbg: radial-gradient(120% 60% at 15% 0%, rgba(86, 204, 230, 0.45), transparent 62%), radial-gradient(90% 55% at 95% 5%, rgba(170, 255, 120, 0.24), transparent 60%), #0d1418; }
.pl [data-plan="studio"] { --a1: #a35cff; --a2: #ff4fae; --pbg: radial-gradient(120% 60% at 15% 0%, rgba(160, 90, 255, 0.42), transparent 62%), radial-gradient(90% 55% at 95% 5%, rgba(255, 80, 170, 0.32), transparent 60%), #140f1a; }
.pl [data-plan="agency"] { --a1: #ffb347; --a2: #ff6f91; --pbg: radial-gradient(80% 90% at 0% 0%, rgba(255, 170, 60, 0.34), transparent 60%), radial-gradient(60% 90% at 60% 0%, rgba(255, 90, 120, 0.22), transparent 60%), #16110f; }
.pl [data-plan] { --ag: linear-gradient(90deg, var(--a1), var(--a2)); }

/* ---------- Base ---------- */
.pl-head .chapter-head { margin-bottom: clamp(36px, 4vw, 56px); }
.pl-why { list-style: none; display: grid; gap: var(--s-6) clamp(32px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1120px; margin: 0 auto; padding: 0; }
.pl-why li { padding-left: 18px; border-left: 2px solid var(--tone-a); }
.pl-why li:nth-child(2) { border-left-color: var(--tone-b); }
.pl-why li:nth-child(3) { border-left-color: var(--tone-c); }
.pl-why h3 { font-size: var(--t-lg); line-height: 1.3; margin-bottom: var(--s-2); }
.pl-why p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.6; }
.pl-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(20px, 2vw, 28px); border-radius: 22px; background: var(--pbg); border: 1px solid rgba(255, 255, 255, 0.09); overflow: hidden; }
.pl-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ag); }
.pl-top { display: flex; flex-direction: column; gap: 10px; }
.pl-name { order: 1; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.1; }
.pl-price { order: 2; display: flex; align-items: baseline; gap: 6px; }
.pl-price b { font-family: var(--f-head); font-size: clamp(34px, 3vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.pl-price small { color: var(--c-muted); font-size: var(--t-sm); }
.pl-ask { order: 3; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.45; }
.pl-cta { order: 4; align-self: flex-start; max-width: 100%; margin-top: 4px; white-space: normal; text-align: center; line-height: 1.25; }
.pl-badge { order: 0; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--ag); color: #081B21; font-size: var(--t-xs); font-weight: 700; }
.pl-legal { margin-top: clamp(28px, 3vw, 44px); text-align: center; }
.pl-faq .faq-wrap > .faq { position: relative; z-index: 1; margin-inline: auto; max-width: 820px; padding: 6px clamp(18px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 26px;
	background: linear-gradient(180deg, rgba(10, 26, 34, 0.82), rgba(10, 26, 34, 0.66)); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); }
.pl-compare { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pl-compare th, .pl-compare td { padding: 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
.pl-compare tbody th { text-align: left; font-weight: 600; color: var(--c-ink); }
.pl-compare thead th { font-family: var(--f-head); font-size: var(--t-md); color: var(--c-ink); border-bottom: 2px solid rgba(255, 255, 255, 0.12); }
.pl-compare thead th[data-plan] { box-shadow: inset 0 3px 0 var(--a1); }
.pl-compare thead small { display: block; color: var(--c-muted); font: 500 var(--t-xs) var(--f-body); }
.pl-compare td { color: #D5DEE2; }
.pl-yes { display: inline-grid; place-items: center; vertical-align: middle; }
.pl-yes .icon { width: 18px; height: 18px; color: #46C98C; }
.pl-no { color: rgba(255, 255, 255, 0.28); }
.pl-compare-wrap { overflow-x: auto; margin-top: clamp(48px, 5vw, 72px); }

/* ---------- Las tarjetas: cada una rellena con el color de su plan (versión 2), solo con lo esencial; lo que trae cada
   plan está en la tabla de debajo. Las cinco miden lo mismo y el botón va abajo, a todo el ancho. ---------- */
@media (min-width: 1080px) { .pl-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; } }
.pl-card { padding: 0; gap: 0; background: var(--ag); border: 0; }
.pl-card::before { content: none; }
.pl-top { flex: 1; padding: 22px 20px 20px; color: #081B21; }
.pl-top .pl-ask, .pl-top .pl-price small { color: rgba(8, 27, 33, 0.7); }
.pl-top .pl-ask { margin-bottom: 14px; }
.pl-badge { background: #081B21; color: #fff; }
.pl-top .pl-cta { align-self: stretch; width: 100%; margin-top: auto; min-height: 50px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
	white-space: nowrap; font-size: 14px; font-weight: 700; }
/* El botón, como una pegatina de cómic (versión 3 de diez, elegida por Adiel el 2026-10-10): blanco, contorno de tinta y
   sombra plana desplazada; se levanta al pasar el ratón y se hunde al pulsar. */
.pl-top .pl-cta, .pl-top .pl-cta:hover { background: #fff; color: #081B21; border: 2.5px solid #081B21; border-radius: 14px; box-shadow: 5px 5px 0 #081B21;
	transition: transform .15s ease, box-shadow .15s ease; }
.pl-top .pl-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #081B21; }
.pl-top .pl-cta:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #081B21; }

/* ---------- La comparativa, justo debajo de las tarjetas (versión 4), con todo lo que trae cada plan por grupos ---------- */
.pl-compare .pl-group th { padding: 26px 12px 10px; text-align: left; font-family: var(--f-head); font-size: var(--t-lg); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pl-compare tbody tr:not(.pl-group):hover { background: rgba(255, 255, 255, 0.025); }
.pl-compare td { font-size: 13.5px; }
.pl-studio-note { margin-top: 8px; }

/* La cabecera de la tabla, con los planes, se queda fija bajo la cabecera de la web mientras se recorre la tabla
   (pedido de Adiel, 2026-10-10). En ordenador la tabla cabe entera, así que su caja no se desplaza de lado y el sticky
   funciona; en móvil sí se desplaza de lado y la cabecera va con ella. */
@media (min-width: 900px) {
	.pl-compare-wrap { overflow: visible; }
	.pl-compare thead th { position: sticky; top: 68px; z-index: 2; background: rgba(6, 20, 30, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* ---------- Mensual o anual (pedido de Adiel, 2026-10-10): el texto de los precios y, a su derecha, el interruptor.
   Por defecto, mensual; en anual, .pl lleva .is-anual y se enseñan los .a en lugar de los .m. ---------- */
.pl .a { display: none; }
.pl.is-anual .a { display: revert; }
.pl.is-anual .m { display: none; }
/* Sin título visible (Adiel, 2026-10-10): la página abre con el texto de los precios y el interruptor. */
.pl-billing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.pl-billing-t { color: var(--c-muted); font-size: var(--t-sm); }
.pl-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 4px; border-radius: 999px; cursor: pointer;
	background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--c-muted); font: 600 var(--t-sm) var(--f-body); }
.pl-sw-opt { position: relative; z-index: 1; padding: 7px 16px; text-align: center; white-space: nowrap; transition: color .2s ease; }
.pl-sw-opt small { color: #46C98C; font-weight: 700; }
.pl-sw-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.pl-switch[aria-checked="false"] .m-opt, .pl-switch[aria-checked="true"] .a-opt { color: #081B21; }
.pl-switch[aria-checked="true"] .pl-sw-knob { transform: translateX(100%); }
.pl-switch[aria-checked="true"] .a-opt small { color: #1E8A5A; }
.pl-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(86, 204, 230, 0.35); }
/* En anual, encima del botón: que se paga el total del año de una vez. */
.pl-save { order: 4; margin-top: auto; color: rgba(8, 27, 33, 0.75); font-size: var(--t-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pl.is-anual .pl-save + .pl-cta { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .pl-sw-knob { transition: none; } }
.pl-dec { font-size: 0.55em; vertical-align: baseline; letter-spacing: 0; }