/* ==========================================================================
   ARQSEO — Portada (20-10-2026). Solo se carga en «/» (HomeController, hojasExtra).
   Estilo elegido por Joan: «el SEO desde otra perspectiva». Claro con una franja oscura (mapa y seis vistas),
   y todo con su versión en el tema oscuro de la web ([data-theme="dark"]).
   Prefijo pt- para no chocar con main.css. Sin librerías ni fuentes nuevas (Inter local).
   ========================================================================== */

.pt {
    --pt-tinta: #0b1020;
    --pt-texto: #3d4559;
    --pt-tenue: #667085;
    --pt-fondo: #ffffff;
    --pt-fondo-suave: #f6f7fb;
    --pt-borde: #e4e7ef;
    --pt-tarjeta: #ffffff;
    --pt-violeta: #4a3af5;
    --pt-violeta-2: #6d4df6;
    --pt-violeta-suave: #eeecff;
    --pt-violeta-texto: #3b2bd8;
    --pt-oscuro: #0a0f22;
    --pt-oscuro-2: #121834;
    --pt-oscuro-borde: rgba(255, 255, 255, 0.09);
    --pt-oscuro-texto: #c7cbe0;
    --pt-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -12px rgba(16, 24, 40, .14);
    --pt-radio: 16px;
    --pt-radio-sm: 10px;
    --pt-ancho: 1200px;
    position: relative;
    z-index: 5;
    background: var(--pt-fondo);
    color: var(--pt-texto);
    overflow-x: clip;
}

[data-theme="dark"] .pt {
    --pt-tinta: #f2f3fa;
    --pt-texto: #c3c8da;
    --pt-tenue: #8b92ab;
    --pt-fondo: #0b1022;
    --pt-fondo-suave: #0f1530;
    --pt-borde: #222a48;
    --pt-tarjeta: #121834;
    --pt-violeta: #7c6cff;
    --pt-violeta-2: #9a8bff;
    --pt-violeta-suave: rgba(124, 108, 255, .14);
    --pt-violeta-texto: #b3a9ff;
    --pt-oscuro: #060a18;
    --pt-oscuro-2: #0e1430;
    --pt-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -16px rgba(0, 0, 0, .6);
}

.pt-contenedor {
    width: 100%;
    max-width: var(--pt-ancho);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Textos comunes ─────────────────────────────────────────────────────── */
.pt-antetitulo {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pt-violeta-texto);
}
.pt-antetitulo--claro { color: #b3a9ff; }
.pt-titulo {
    margin: 0 0 .9rem;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--pt-tinta);
}
.pt-titulo--claro { color: #fff; }
.pt-entradilla {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--pt-texto);
    max-width: 62ch;
}
.pt-entradilla--claro { color: var(--pt-oscuro-texto); }
.pt-entradilla a { color: var(--pt-violeta-texto); }
.pt-realce { color: var(--pt-violeta); }
.pt-realce--claro { color: #a99cff; }

.pt-cabecera { margin-bottom: 2.5rem; }
.pt-cabecera--centro { text-align: center; }
.pt-cabecera--centro .pt-entradilla { margin: 0 auto; }

.pt-enlace {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.1rem;
    font-weight: 600;
    color: var(--pt-violeta-texto);
    text-decoration: none;
}
.pt-enlace svg { width: 16px; height: 16px; transition: transform .2s; }
.pt-enlace:hover svg { transform: translateX(3px); }
.pt-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.pt-enlace--claro { color: #c9c1ff; }

.pt-etiqueta {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    color: var(--pt-violeta-texto);
    background: var(--pt-violeta-suave);
    white-space: nowrap;
    vertical-align: middle;
}
.pt-etiqueta--beta { color: #8a4b00; background: #fff1d6; }
[data-theme="dark"] .pt-etiqueta--beta { color: #ffd38a; background: rgba(255, 184, 77, .14); }
.pt-etiqueta--oferta { color: #0f6b47; background: #dcf7ea; white-space: normal; text-align: right; }
[data-theme="dark"] .pt-etiqueta--oferta { color: #7ee2b4; background: rgba(46, 204, 138, .14); }

.pt-icono {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--pt-violeta);
    background: var(--pt-violeta-suave);
}
.pt-icono svg { width: 20px; height: 20px; }
.pt-icono--grande { width: 52px; height: 52px; border-radius: 14px; }
.pt-icono--grande svg { width: 26px; height: 26px; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.pt-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 1.3rem;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.pt-boton svg { width: 18px; height: 18px; }
.pt-boton--primario { color: #fff; background: var(--pt-violeta); box-shadow: 0 8px 20px -10px rgba(74, 58, 245, .7); }
.pt-boton--primario:hover { background: #3b2be0; transform: translateY(-1px); }
[data-theme="dark"] .pt-boton--primario { background: #5b4bff; }
/* Los botones de color, siempre con el texto blanco (en oscuro un color de enlace general lo pisaba: 2,96:1) */
.pt a.pt-boton--primario, .pt a.pt-boton--primario:visited, [data-theme="dark"] .pt a.pt-boton--primario { color: #fff; }
[data-theme="dark"] .pt-boton--primario:hover { background: #6d5eff; }
.pt-boton--secundario { color: var(--pt-tinta); background: var(--pt-tarjeta); border-color: var(--pt-borde); }
.pt-boton--secundario:hover { border-color: var(--pt-violeta); color: var(--pt-violeta-texto); }
.pt-boton--blanco { color: #2a1ec2; background: #fff; }
.pt-boton--blanco:hover { background: #f1efff; }
.pt-boton--apagado { color: var(--pt-tenue); background: var(--pt-fondo-suave); border-color: var(--pt-borde); cursor: default; box-shadow: none; }
.pt-boton--bloque { width: 100%; }
.pt-boton:focus-visible,
.pt-url__campo:focus-visible,
.pt-faq__item summary:focus-visible,
.pt-enlace:focus-visible {
    outline: 3px solid #8f84ff;
    outline-offset: 2px;
}

/* ── Arranque ───────────────────────────────────────────────────────────── */
.pt-hero {
    position: relative;
    padding: calc(var(--header-height, 72px) + 3.5rem) 0 2.5rem;
    overflow: hidden;
    background: var(--pt-fondo);
}
.pt-hero__fondo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 85% 35%, rgba(109, 77, 246, .13), transparent 70%),
        radial-gradient(40% 50% at 10% 0%, rgba(74, 58, 245, .06), transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .pt-hero__fondo {
    background:
        radial-gradient(60% 70% at 85% 35%, rgba(124, 108, 255, .22), transparent 70%),
        radial-gradient(40% 50% at 10% 0%, rgba(74, 58, 245, .12), transparent 70%);
}
.pt-hero__rejilla {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
.pt-hero__titulo {
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 5.6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--pt-tinta);
}
/* Como la referencia: el titular en tres líneas («Tu web, / desde otra / perspectiva.») deja sitio al montaje */
@media (min-width: 1100px) { .pt-hero__titulo { max-width: 6.2em; } }
@media (min-width: 961px) and (max-width: 1599px) { .pt-hero .pt-hero__rueda { width: min(92%, 580px); justify-self: end; } }
/* La cabecera de la portada es la única de la web (transparente arriba del todo con header--transparente):
   sus estilos están en main.css, «Cabecera y pie únicos» (20-10-2026). */
.pt-hero__sub {
    margin: 0 0 1.75rem;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    max-width: 34rem;
}

/* Campo de URL (arranque y llamada final) */
.pt-url {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 36rem;
    padding: .4rem;
    border: 1.5px solid var(--pt-borde);
    border-radius: 16px;
    background: var(--pt-tarjeta);
    box-shadow: var(--pt-sombra);
    transition: border-color .2s, box-shadow .2s;
}
.pt-url:focus-within { border-color: var(--pt-violeta); box-shadow: 0 0 0 4px rgba(74, 58, 245, .14), var(--pt-sombra); }
.pt-url__icono { display: inline-grid; place-items: center; width: 34px; color: var(--pt-tenue); }
.pt-url__icono svg { width: 18px; height: 18px; }
.pt .pt-url__campo {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 .25rem;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    background: transparent;
    color: var(--pt-tinta);
    font: inherit;
    font-size: 1rem;
}
.pt-url__campo::placeholder { color: var(--pt-tenue); }
.pt-url__campo:focus { outline: none; }
.pt-url__boton { flex: 0 0 auto; }
.pt-url__nota { margin: .8rem 0 0; font-size: .875rem; color: var(--pt-tenue); }
.pt-url__nota a { color: var(--pt-violeta-texto); font-weight: 600; text-decoration: none; }
.pt-url__nota a:hover { text-decoration: underline; }

.pt-cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 34rem;
    margin: 2.25rem 0 0;
    padding: 0;
}
.pt-cifras__item { padding: 0 1.25rem; border-left: 1px solid var(--pt-borde); }
.pt-cifras__item:first-child { padding-left: 0; border-left: 0; }
.pt-cifras__num { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; color: var(--pt-violeta); line-height: 1.1; }
.pt-cifras dd { margin: .2rem 0 0; font-size: .85rem; line-height: 1.35; color: var(--pt-tenue); }
.pt-hero__reales { margin: 1.4rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--pt-tenue); }
.pt-hero__reales svg { width: 16px; height: 16px; margin-right: .3rem; vertical-align: -3px; color: #16a34a; }
.pt-hero__reales strong { color: var(--pt-tinta); font-weight: 700; }

/* La Rueda gigante a la derecha */
/* Montaje (Joan, 20-10-2026): MEDIDO en su referencia «ARQSEO_ el SEO desde otra perspectiva» (783 px de ancho,
   x 2,452 = 1920): disco blanco con centro en (1314, 490) y radio 441; arcos de colores de la Rueda, radio 365
   (anillo blanco de 76 px); círculo morado de radio 571 con el centro 86 px a la derecha y 154 px más arriba que
   el blanco. En % del ancho de la imagen de la Rueda (W, los arcos llegan al 45 %): disco 109 % centrado; morado
   141,2 % con el centro +10,6 % W a la derecha y −19 % W arriba. Lo que asoma del morado: una media luna gruesa a
   la izquierda y arriba, que sube por detrás de la cabecera, y un borde que baja por la derecha.
   Solo CSS: sin imágenes ni peso, capas absolutas que no mueven nada (sin CLS); el LCP sigue siendo el titular. */
.pt-hero__rueda { position: relative; margin: 0; justify-self: center; width: min(100%, 600px); isolation: isolate; }
.pt-hero__rueda::before {
    content: ""; position: absolute; z-index: -2; pointer-events: none; border-radius: 50%;
    top: 0; left: -10%; width: 141.2%; aspect-ratio: 1; margin-top: -39.6%;
    background: conic-gradient(from 0deg, #f1edff 0deg, #ddd2ff 45deg, #b39cfb 95deg, #8b5cf6 140deg, #6d5cf6 185deg,
                               #5b4ff0 235deg, #4f46e5 275deg, #5b5bf0 305deg, #a99bf7 335deg, #f1edff 360deg);
}
.pt-hero__disco {
    position: absolute; z-index: -1;
    top: 0; left: -4.5%; width: 109%; aspect-ratio: 1; margin-top: -4.5%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 36px 80px -46px rgba(49, 36, 160, .32), 0 8px 24px -16px rgba(74, 58, 245, .16);
}
[data-theme="dark"] .pt-hero__rueda::before {
    background: conic-gradient(from 0deg, #2a2560 0deg, #4b3fb0 45deg, #8b72ff 95deg, #a78bfa 140deg, #8f7cff 185deg,
                               #6d63ff 235deg, #5b5bf0 275deg, #6f6cff 305deg, #4a3f9a 335deg, #2a2560 360deg);
}
[data-theme="dark"] .pt-hero__disco {
    background: #0f1533;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, .16) inset, 0 40px 100px -40px rgba(0, 0, 0, .75), 0 0 60px -24px rgba(139, 114, 255, .5);
}
.pt-hero__img { position: relative; }
.pt-hero__img img { display: block; width: 100%; height: auto; }
/* La Rueda da vueltas muy despacio (Joan, 20-10-2026): una vuelta cada 170 s, solo transform (capa compuesta, sin
   CLS). Empieza cuando la página ya está pintada (clase pt-gira, la pone el script) y se para fuera de la vista
   (pt-quieta) y con «reducir movimiento». Solo gira la imagen: el disco y el círculo morado se quedan quietos. */
@keyframes pt-giro { to { transform: rotate(360deg); } }
.pt-gira .pt-hero__img img { animation: pt-giro 170s linear infinite; will-change: transform; }
.pt-gira.pt-quieta .pt-hero__img img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pt-gira .pt-hero__img img { animation: none; will-change: auto; } }
.pt-hero__img--oscuro { display: none; }
[data-theme="dark"] .pt-hero__img--claro { display: none; }
[data-theme="dark"] .pt-hero__img--oscuro { display: block; }
/* El pie de foto no se ve (como en la referencia; caería sobre el círculo morado): queda para los lectores de
   pantalla, junto al texto alternativo de la imagen. */
.pt-hero__pie { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Secciones ──────────────────────────────────────────────────────────── */
.pt-seccion { padding: 5.5rem 0; background: var(--pt-fondo); }
.pt-seccion--suave { background: var(--pt-fondo-suave); }
.pt-seccion--estrecha { padding: 3rem 0; }

/* Captura del panel en un marco de navegador */
.pt-panel {
    max-width: 1180px;
    margin: 0 auto;
    border: 1px solid var(--pt-borde);
    border-radius: var(--pt-radio);
    background: var(--pt-tarjeta);
    box-shadow: 0 40px 90px -40px rgba(16, 24, 40, .35), var(--pt-sombra);
    overflow: hidden;
}
.pt-panel__barra {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pt-borde);
    background: var(--pt-fondo-suave);
}
.pt-panel__barra span { width: 10px; height: 10px; border-radius: 50%; background: #d7dbe6; }
[data-theme="dark"] .pt-panel__barra span { background: #2b3356; }
.pt-panel__barra em { margin-left: 12px; font-style: normal; font-size: .75rem; color: var(--pt-tenue); }
.pt-panel__img img { display: block; width: 100%; height: auto; }
.pt-panel__vista--oscuro { display: none; }
[data-theme="dark"] .pt-panel__vista--claro:has(+ .pt-panel__vista--oscuro) { display: none; }
[data-theme="dark"] .pt-panel__vista--oscuro { display: block; }

.pt-ventajas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1180px;
    margin: 2.5rem auto 0;
    padding: 0;
    list-style: none;
}
.pt-ventajas li { display: flex; gap: .9rem; align-items: flex-start; }
.pt-ventajas h3 { margin: .1rem 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--pt-tinta); }
.pt-ventajas p { margin: 0; font-size: .925rem; line-height: 1.55; }

/* Qué revisa: lista 01-06 */
.pt-revisa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: start; }
.pt-revisa .pt-cabecera { position: sticky; top: calc(var(--header-height, 72px) + 2rem); margin-bottom: 0; }
.pt-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.pt-lista__item { display: flex; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--pt-borde); }
.pt-lista__num { flex: 0 0 auto; width: 2.4rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--pt-violeta); font-variant-numeric: tabular-nums; line-height: 1.2; }
.pt-lista h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; color: var(--pt-tinta); }
.pt-lista p, .pt-utilidades p { margin: 0; font-size: .925rem; line-height: 1.55; color: #4b5565; } /* contraste AA de sobra (axe) */
[data-theme="dark"] .pt-lista p, [data-theme="dark"] .pt-utilidades p { color: #b8bfd3; }
/* Enlaces dentro de un párrafo: subrayados, que no dependan solo del color (axe: link-in-text-block) */
.pt p a:not([class]), .pt-entradilla a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ── Franja oscura: mapa y seis vistas ──────────────────────────────────── */
.pt-oscura {
    padding: 5.5rem 0;
    background:
        radial-gradient(50% 40% at 15% 10%, rgba(91, 75, 255, .22), transparent 70%),
        radial-gradient(40% 35% at 90% 60%, rgba(160, 80, 255, .12), transparent 70%),
        var(--pt-oscuro);
    color: var(--pt-oscuro-texto);
}
.pt-mapa {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
}
.pt-mapa__img {
    border: 1px solid var(--pt-oscuro-borde);
    border-radius: var(--pt-radio);
    overflow: hidden;
    background: #0a0f22;
    box-shadow: 0 40px 100px -40px rgba(91, 75, 255, .55);
}
.pt-mapa__img img { display: block; width: 100%; height: auto; }
.pt-mapa__texto .pt-entradilla { margin-bottom: 1.75rem; }
.pt-vistas__cabecera { margin-bottom: 2rem; }
.pt-vistas__pie { margin: 1.5rem 0 0; text-align: center; }

/* Galería en oscuro: el mismo marco, el mismo redondeo y el mismo fondo para las seis */
.pt .mg-rejilla--oscura { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pt .mg-rejilla--oscura .mg-tarjeta {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid var(--pt-oscuro-borde);
    border-radius: var(--pt-radio);
    background: var(--pt-oscuro-2);
    overflow: hidden;
    box-shadow: none;
    transition: border-color .2s, transform .2s;
}
.pt .mg-rejilla--oscura .mg-tarjeta:hover { border-color: rgba(169, 156, 255, .45); transform: translateY(-2px); }
.pt .mg-rejilla--oscura .mg-tarjeta__img {
    aspect-ratio: 16 / 10;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--pt-oscuro-borde);
    border-radius: 0;
    background: #0a0f22;
    overflow: hidden;
}
.pt .mg-rejilla--oscura .mg-tarjeta__img picture,
.pt .mg-rejilla--oscura .mg-tarjeta__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pt .mg-rejilla--oscura .mg-tarjeta__texto { display: flex; flex-direction: column; flex: 1 1 auto; gap: .5rem; padding: 1.1rem 1.2rem 1.25rem; }
.pt .mg-rejilla--oscura .mg-tarjeta__nombre { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.pt .mg-rejilla--oscura .mg-tarjeta__nombre svg { width: 18px; height: 18px; color: #a99cff; }
.pt .mg-rejilla--oscura .mg-tarjeta__pregunta { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--pt-oscuro-texto); }
.pt .mg-rejilla--oscura .mg-tarjeta__acciones { margin-top: auto; padding-top: .5rem; }
.pt .mg-rejilla--oscura .mg-probar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .5rem .95rem;
    border: 1px solid rgba(169, 156, 255, .4);
    border-radius: 10px;
    background: rgba(124, 108, 255, .14);
    color: #e7e3ff;
    font: inherit;
    font-size: .875rem;
    font-weight: 650;
    cursor: pointer;
}
.pt .mg-rejilla--oscura .mg-probar:hover { background: rgba(124, 108, 255, .28); }
.pt .mg-rejilla--oscura .mg-probar svg { width: 15px; height: 15px; }
.pt .mg-rejilla--oscura .mg-tarjeta__ancha { color: var(--pt-oscuro-texto); }
.pt .mg-rejilla--oscura .mg-enlace { color: #c9c1ff; }

/* ── Estratega ──────────────────────────────────────────────────────────── */
.pt-franja {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border: 1px solid var(--pt-borde);
    border-radius: var(--pt-radio);
    background: var(--pt-tarjeta);
    box-shadow: var(--pt-sombra);
}
.pt-franja__texto { flex: 1 1 auto; }
.pt-franja h2 { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 750; color: var(--pt-tinta); }
.pt-franja p { margin: 0; font-size: .95rem; line-height: 1.55; }
.pt-franja .pt-boton { flex: 0 0 auto; }

/* ── Cómo funciona ──────────────────────────────────────────────────────── */
.pt-funciona { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.pt-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pt-pasos li { padding: 1.4rem; border: 1px solid var(--pt-borde); border-radius: var(--pt-radio); background: var(--pt-tarjeta); }
.pt-pasos__num { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: .9rem; border-radius: 50%; background: var(--pt-violeta); color: #fff; font-weight: 800; }
.pt-pasos h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--pt-tinta); }
.pt-pasos p { margin: 0; font-size: .9rem; line-height: 1.55; }
.pt-utilidades { padding: 1.6rem; border-radius: var(--pt-radio); background: var(--pt-fondo-suave); border: 1px solid var(--pt-borde); }
.pt-utilidades__titulo { margin: 0 0 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-violeta-texto); }
.pt-utilidades ul { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.pt-utilidades li { display: flex; gap: .85rem; align-items: flex-start; }
.pt-utilidades h4 { margin: .1rem 0 .2rem; font-size: .975rem; font-weight: 700; color: var(--pt-tinta); }
.pt-utilidades p { margin: 0; font-size: .875rem; line-height: 1.5; }
.pt-utilidades a { color: var(--pt-violeta-texto); }

/* ── Planes ─────────────────────────────────────────────────────────────── */
.pt-aviso {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    max-width: 52rem;
    margin: -1rem auto 2rem;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: var(--pt-violeta-suave);
    color: var(--pt-tinta);
    font-size: .9rem;
    line-height: 1.5;
}
.pt-aviso svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--pt-violeta); }
.pt-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.pt-plan {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--pt-borde);
    border-radius: var(--pt-radio);
    background: var(--pt-tarjeta);
    box-shadow: var(--pt-sombra);
}
.pt-plan--destacado { border: 2px solid var(--pt-violeta); }
.pt-plan__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-height: 1.9rem; }
.pt-plan__nombre { margin: 0; font-size: 1.1rem; font-weight: 750; color: var(--pt-tinta); }
.pt-plan__precio { display: flex; align-items: baseline; gap: .25rem; margin: .9rem 0 .3rem; }
.pt-plan__precio strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--pt-tinta); line-height: 1; }
.pt-plan__precio span { color: var(--pt-tenue); font-size: .95rem; }
.pt-plan__para { margin: 0 0 1.25rem; font-size: .9rem; color: var(--pt-tenue); }
/* Precio de fundador (20-10-2026): el normal tachado al lado, el anual debajo y las ofertas de su ventana */
.pt-plan__precio s { margin-left: .35rem; color: var(--pt-tenue); font-size: 1rem; }
.pt-plan__anual { margin: 0 0 .5rem; font-size: .85rem; color: var(--pt-tenue); }
.pt-plan__oferta { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; color: var(--pt-marca, #4a3af5); }
.pt-plan__fundador { display: inline-block; width: max-content; max-width: 100%; margin: .6rem 0 0; text-align: left; }
.pt-plan__lista { display: grid; gap: .6rem; align-content: start; margin: 0 0 1.5rem; padding: 0; list-style: none; flex: 1 1 auto; }
.pt-plan__lista li { display: flex; align-items: center; gap: .5rem; font-size: .925rem; color: var(--pt-texto); }
.pt-plan__lista svg { flex: 0 0 auto; width: 16px; height: 16px; color: #16a34a; }
[data-theme="dark"] .pt-plan__lista svg { color: #4ade80; }
.pt-planes__pie { margin: 1.5rem 0 0; text-align: center; font-size: .9rem; color: var(--pt-tenue); }
.pt-planes__pie .pt-enlace { margin-top: 0; margin-left: .35rem; }

/* ── Preguntas frecuentes ───────────────────────────────────────────────── */
.pt-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; max-width: 1080px; margin: 0 auto; align-items: start; }
.pt-faq__item { border-bottom: 1px solid var(--pt-borde); }
.pt-faq__col .pt-faq__item:first-child { border-top: 1px solid var(--pt-borde); }
.pt-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: .9rem .25rem;
    cursor: pointer;
    list-style: none;
}
.pt-faq__item summary::-webkit-details-marker { display: none; }
.pt-faq__item summary h3 { margin: 0; font-size: 1rem; font-weight: 650; color: var(--pt-tinta); }
.pt-faq__item summary svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pt-violeta); transition: transform .2s; }
.pt-faq__item[open] summary svg { transform: rotate(45deg); }
.pt-faq__item p { margin: 0 0 1.1rem; padding: 0 .25rem; font-size: .95rem; line-height: 1.6; }

/* ── Llamada final ──────────────────────────────────────────────────────── */
.pt-final { padding: 0 0 5.5rem; background: var(--pt-fondo); }
.pt-final__caja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 3rem;
    border-radius: 24px;
    background: #3b2be0;
    color: #e9e6ff;
    max-width: calc(var(--pt-ancho) - 48px);
}
[data-theme="dark"] .pt-final__caja { background: #2d22b0; }
.pt-final h2 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: #fff; }
/* Texto claro de verdad sobre el azul (Joan, 20-10-2026): blanco y 18 px; contraste de más de 7:1 en claro y en oscuro */
.pt-final p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: #fff; }
.pt-url--final { max-width: none; border-color: transparent; background: rgba(255, 255, 255, .12); box-shadow: none; }
.pt-url--final .pt-url__campo { color: #fff; }
.pt-url--final .pt-url__campo::placeholder { color: #dcd8ff; }
.pt-url--final .pt-url__icono { color: #dcd8ff; }
.pt-url--final:focus-within { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.pt-final__nota { margin-top: .75rem !important; font-size: .9375rem !important; color: #f1efff !important; }
.pt-final__nota a { color: #fff; font-weight: 600; }

/* ── Puntos de navegación (los de siempre, más discretos) ───────────────── */
.pt-puntos { opacity: .85; }

/* ── Animación de entrada ───────────────────────────────────────────────
   Todo se ve por defecto (sin JS, robots, vistas previas, capturas sin desplazar). Solo se esconde lo que aún no
   se ha visto cuando el JS de la portada ha arrancado (clase pt-js en <html>), y un temporizador lo enseña todo
   a los 2,5 s pase lo que pase. Sin animación si la persona pide menos movimiento. */
.pt .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    html.pt-js .pt .rv:not(.show) { opacity: 0; transform: translateY(16px); }
    html.pt-js .pt .rv { transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .pt-boton, .pt .mg-tarjeta { transition: none; }
}

/* ── Pantallas medianas y móvil ─────────────────────────────────────────── */
@media (max-width: 1080px) {
    .pt-funciona { grid-template-columns: 1fr; }
    .pt-revisa { grid-template-columns: 1fr; gap: 1.5rem; }
    .pt-revisa .pt-cabecera { position: static; }
}
@media (max-width: 960px) {
    .pt-hero { padding-top: calc(var(--header-height, 72px) + 2rem); padding-bottom: 3rem; }
    .pt-hero__rejilla { grid-template-columns: 1fr; gap: 2rem; }
    /* Móvil: las mismas proporciones, con sitio arriba para la media luna (no tapa las cifras) */
    .pt-hero__rueda { width: min(72vw, 420px); order: 2; margin-top: min(30vw, 10rem); justify-self: center; }
    .pt-mapa { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; }
    .pt .mg-rejilla--oscura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-planes { grid-template-columns: 1fr; max-width: 30rem; }
    .pt-final__caja { grid-template-columns: 1fr; padding: 2rem; }
    .pt-scroll-oculto, .pt-puntos { display: none; }
}
@media (max-width: 720px) {
    .pt-seccion, .pt-oscura { padding: 3.75rem 0; }
    .pt-contenedor { padding: 0 16px; }
    .pt-ventajas { grid-template-columns: 1fr; gap: 1.1rem; }
    .pt-lista { grid-template-columns: 1fr; }
    .pt-pasos { grid-template-columns: 1fr; }
    .pt-faq { grid-template-columns: 1fr; }
    .pt-faq__col + .pt-faq__col .pt-faq__item:first-child { border-top: 0; }
    .pt .mg-rejilla--oscura { grid-template-columns: 1fr; }
    .pt-franja { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
    .pt-final { padding-bottom: 3.75rem; }
    .pt-final__caja { margin: 0 16px; width: auto; padding: 1.75rem 1.25rem; border-radius: 20px; }
    .pt-panel__barra em { display: none; }
}
@media (max-width: 560px) {
    .pt-url { flex-wrap: wrap; padding: .5rem; }
    .pt-url__icono { display: none; }
    .pt .pt-url__campo { flex-basis: 100%; height: 48px; padding: 0 .6rem; }
    .pt-url__boton { width: 100%; }
    .pt-cifras__item { padding: 0 .75rem; }
    .pt-cifras__num { font-size: 1.5rem; }
    .pt-hero__titulo { font-size: 2.45rem; }
}

/* ── Full HD (Joan, 20-10-2026): aprovechar el ancho con criterio, sin líneas larguísimas ───────────── */
@media (min-width: 1600px) {
    .pt { --pt-ancho: 1440px; }
    .pt-hero { padding-top: calc(var(--header-height, 72px) + 4.5rem); }
    .pt-hero__rejilla { gap: 5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pt-hero__titulo { font-size: 4.5rem; }
    .pt-hero__sub { font-size: 1.3rem; max-width: 36rem; }
    /* La Rueda donde la pone la referencia: centro al 68,4 % del ancho y a 490/1920 del alto; W = 42,1 vw (809 px) */
    .pt-hero { min-height: 50vw; }
    .pt-hero__rejilla { position: static; grid-template-columns: minmax(0, 36rem); }
    .pt-hero .pt-hero__rueda { position: absolute; width: 42.1vw; left: 47.4vw; top: 4.45vw; margin: 0; }
    .pt-url { max-width: 36rem; }
    .pt-titulo { font-size: 2.9rem; }
    .pt-panel, .pt-ventajas { max-width: 1320px; }
    .pt-planes, .pt-faq { max-width: 1200px; }
    .pt-final__caja { max-width: calc(var(--pt-ancho) - 48px); padding: 3.5rem 4rem; }
}