/* ============================================================
   PORTADA «A» (noviembre de 2026): luz, aire y el producto de verdad.
   ============================================================
   Solo la cargan las cuatro portadas (bin/generar-portada.py), DESPUÉS de
   landing.css: de ahí hereda la paleta (--ink, --mist, --green…), los botones,
   la franja de oferta, el selector de idioma, el pie, el formulario de la
   prueba y las clases de estado que pinta consent.js (hx-producto-oferta,
   hx-oferta, hx-ahorro, hx-sin-pack). Aquí va solo lo que cambia: la cabecera
   en claro y las secciones nuevas (prefijo pa-). Las capturas son reales, de
   una instalación de Hourexa con los datos de ejemplo de la prueba.
   ============================================================ */

body.portada { --w: 1280px; --muted: #55606b; --mint: #e6fff3; background: var(--paper); font-size: 17px; }
body.portada .btn { border-radius: 999px; }
body.portada section { padding: 5rem 0; }
body.portada section[id] { scroll-margin-top: 88px; }
body.portada h1, body.portada h2, body.portada h3 { letter-spacing: -.025em; text-wrap: balance; margin: 0; }
body.portada h1 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); line-height: 1.1; font-weight: 700; }
body.portada h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; font-weight: 700; }
body.portada h3 { font-size: 1.22rem; line-height: 1.25; font-weight: 600; }
body.portada p { line-height: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La cabecera en claro vive ya en landing.css (tema claro, al final). */

/* ---------- Piezas comunes ---------- */
.pa-cejilla { display: inline-flex; align-items: center; gap: .55em; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 1rem; }
.pa-cejilla::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(0, 255, 143, .25); }
.pa-banda.pa-mist { background: var(--mist); }
.pa-nota { font-size: .85rem; color: var(--muted); }
.pa-marco { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0; box-shadow: 0 40px 70px -40px rgba(22, 24, 26, .45); }
.pa-barra { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--mist); }
.pa-barra i { width: 9px; height: 9px; border-radius: 50%; background: #cfd6dc; display: block; }
body.portada .pa-hero mark, body.portada .pa-hero .marcador {
  background: none; background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat;
  background-size: 100% 82%; background-position: 0 58%; padding: 0 .1em; border-radius: 0; font-weight: inherit; color: var(--ink);
}

/* ---------- Hero ---------- */
.pa-hero { padding: 4.6rem 0 0 !important; text-align: center; }
.pa-in { max-width: 800px; margin: 0 auto; display: grid; gap: 1.4rem; justify-items: center; }
.pa-sub { font-size: 1.2rem; color: var(--muted); max-width: 60ch; margin: 0; }
.pa-ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: .3rem; }
body.portada .precio-antes { font-size: .86em; font-weight: 500; opacity: .6; margin-left: .25em; text-decoration-thickness: 2px; }
.pa-oferta-nota { display: none; margin: .2rem 0 0; font-size: .95rem; color: var(--ink); max-width: 60ch; }
body.hx-producto-oferta .pa-oferta-nota { display: block; }
.pa-oferta-nota .pa-bf { margin-right: .5em; vertical-align: middle; }
.pa-bf { display: inline-block; line-height: 1.3; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #0b0c0d; color: #ffd84d; padding: .4em .75em; border-radius: 999px; white-space: nowrap; }
.pa-puntos { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center; color: var(--muted); font-size: .92rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.pa-puntos li::before { content: "✓"; color: var(--green-ink); font-weight: 700; margin-right: .4em; }
.pa-escenario { position: relative; margin: 3.4rem 0 -110px; z-index: 2; }
.pa-escenario .pa-marco { margin: 0 auto; width: min(100%, 1040px); }
.pa-movil { position: absolute; right: clamp(4px, 4%, 64px); bottom: -28px; width: clamp(120px, 17vw, 230px); border: 6px solid #1d1f22; border-radius: 30px; overflow: hidden; background: #1d1f22; box-shadow: 0 30px 60px -30px rgba(22, 24, 26, .45); }
.pa-movil img { border-radius: 24px; }

/* ---------- Banda oscura: las tres diferencias ---------- */
.pa-tres { background: linear-gradient(180deg, var(--color-brand) 0%, #2b2b2b 100%); color: var(--paper); padding-top: calc(5rem + 110px) !important; }
.pa-tres .pa-cejilla { color: var(--green); }
.pa-tres h2, .pa-tres h3 { color: var(--paper); }
.pa-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.4rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.pa-grid3 > div { display: grid; gap: .6rem; align-content: start; padding: 2rem 2rem 0 0; }
.pa-grid3 > div + div { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 2rem; }
.pa-n { font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; color: var(--green); line-height: 1; }
.pa-tres p { margin: 0; color: #cfd6dc; }

/* ---------- Características: capturas recortadas a lo que importa ---------- */
.pa-cabecera { max-width: 700px; margin-bottom: 1rem; }
.pa-rasgo { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: center; padding: 3.2rem 0; }
.pa-rasgo:nth-of-type(even) .pa-texto { order: 2; }
.pa-texto { display: grid; gap: .8rem; max-width: 44ch; }
.pa-etiqueta { display: inline-flex; align-items: center; gap: .5em; justify-self: start; background: var(--mint); color: var(--green-ink); font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; padding: .45em .85em; border-radius: 999px; }
.pa-etiqueta svg { width: 16px; height: 16px; }
.pa-texto p { margin: 0; color: var(--muted); font-size: 1.06rem; }
.pa-texto ul, .pa-sino ul, .pa-plan ul, .pa-incluido ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; font-size: .97rem; }
.pa-texto ul { margin-top: .3rem; }
.pa-texto li, .pa-sino li { display: block; position: relative; padding-left: 1.9em; }
.pa-texto li::before, .pa-si li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.3em; height: 1.3em; border-radius: 6px; background: var(--green); color: var(--on-green); font-size: .75em; font-weight: 800; display: grid; place-items: center; margin-top: .25em; }
.pa-zoom { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(22, 24, 26, .35); }
.pa-zoom img { position: absolute; max-width: none; height: auto; }
/* Cada recorte, con sus medidas en la hoja: la CSP de la web no admite estilos en línea. */
.pa-zoom-tiempo img { width: 121%; left: -20.2%; top: 0; } /* toda la pantalla menos el menú lateral: la columna «Historial» entera */
.pa-zoom-proyecto img { width: 180%; left: -31.25%; top: -23.3%; }
.pa-zoom-informe img { width: 126.3%; left: -13.2%; top: -11.7%; }

/* ---------- Además ---------- */
.pa-ademas { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
.pa-ademas ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.pa-ademas li { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: start; }
.pa-ademas li svg { grid-row: span 2; width: 26px; height: 26px; color: var(--green-ink); background: var(--mint); border-radius: 10px; padding: 6px; box-sizing: content-box; }
.pa-ademas li strong { font-weight: 600; }
.pa-ademas li span { color: var(--muted); font-size: .95rem; }

/* ---------- Cómo funciona ---------- */
.pa-pasos ol { counter-reset: paso; list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pa-pasos li { counter-increment: paso; display: grid; gap: .6rem; align-content: start; }
.pa-pasos li::before { content: counter(paso, decimal-leading-zero); font-weight: 800; font-size: .85rem; letter-spacing: .1em; color: var(--on-green); background: var(--green); padding: .45em .7em; border-radius: 8px; justify-self: start; }
.pa-pasos li p { margin: 0; color: var(--muted); }
.pa-req { margin: 2.2rem 0 0; padding: 1rem 1.2rem; border: 1px dashed #cfd6dc; border-radius: 14px; }
.pa-req a { color: var(--green-ink); font-weight: 600; }

/* ---------- Para quién ---------- */
.pa-grid3c { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.2rem; }
.pa-grid3c > div, .pa-sino > div { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; display: grid; gap: .5rem; align-content: start; }
.pa-grid3c p { margin: 0; color: var(--muted); }
.pa-sino { margin-top: 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.pa-sino > div { gap: .8rem; }
.pa-sino h3 { font-size: 1.05rem; }
.pa-no li::before { content: "✕"; position: absolute; left: 0; top: 0; width: 1.3em; height: 1.3em; border-radius: 6px; background: #f3e4e4; color: #8a2b2b; font-size: .75em; font-weight: 800; display: grid; place-items: center; margin-top: .25em; }

/* ---------- Precio ---------- */
.pa-intro { max-width: 60ch; color: var(--muted); font-size: 1.08rem; margin: .7rem 0 0; }
.pa-bf-aviso { display: none; margin-top: 2rem; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; background: #0b0c0d; color: var(--paper); border-radius: 14px; padding: .95rem 1.3rem; border-left: 5px solid #ffd84d; }
body.hx-producto-oferta .pa-bf-aviso { display: flex; }
.pa-bf-aviso .pa-et { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd84d; white-space: nowrap; }
.pa-bf-aviso p { margin: 0; font-weight: 500; }
/* Lleva la clase p2-zona solo porque consent.js la busca para pintar el pack;
   landing.css la estrecha a 620 px (era la zona de la pregunta) y aquí no. */
.pa-planes { display: grid; grid-template-columns: 1.08fr 1fr; gap: 1.4rem; margin: 1.6rem 0 0; max-width: none; align-items: start; }
.pa-plan { position: relative; border: 1px solid var(--line); border-radius: 24px; padding: 2rem; display: grid; gap: 1.3rem; background: var(--paper); }
.pa-plan.pa-reco { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 40px 70px -40px rgba(22, 24, 26, .6); }
.pa-chip { position: absolute; top: 1.3rem; right: 1.3rem; background: var(--green); color: var(--on-green); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .4em .75em; border-radius: 999px; }
.pa-plan header h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.pa-reco header h3 { padding-right: 7.5rem; } /* solo el título esquiva la chapa «Recomendado»; el párrafo va debajo y puede ir a todo el ancho */
.pa-plan header p { margin: .3rem 0 0; color: var(--muted); }
.pa-reco header p, .pa-reco .pa-cond { color: #cfd6dc; }
.pa-reco h3 { color: var(--paper); }
.pa-plan .pa-bf { display: none; justify-self: start; }
.pricing.hx-oferta .pa-bf-pack { display: inline-block; background: #ffd84d; color: #2a1500; }
body.hx-producto-oferta .pa-bf-prod { display: inline-block; }
.pa-precio-bloque { display: grid; gap: .3rem; }
.pa-antes { display: none; font-size: 1.3rem; line-height: 1.2; color: var(--muted); text-decoration-thickness: 2px; }
.pa-reco .pa-antes { color: #aab3bb; }
.pricing.hx-ahorro .pa-antes-pack { display: block; }
body.hx-producto-oferta .pa-antes-prod { display: block; }
.pa-precio .pa-ahora { margin: 0; font-size: 4.2rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; display: flex; align-items: baseline; gap: .12em; } /* con .pa-precio delante para ganar a «.pricing p» de landing.css, que le metía 1.6 de interlineado y separaba el precio del tachado */
.pa-ahora small { font-size: 1.7rem; font-weight: 600; letter-spacing: 0; }
.pa-cond { margin: 0; color: var(--muted); font-size: .95rem; }
.pa-precio .pa-cond { line-height: 1.4; }
.pa-plan .btn { justify-self: stretch; }
.pa-dif { margin: .2rem 0 -.6rem; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pa-reco .pa-dif { color: #aab3bb; }
.pa-plan li { display: block; position: relative; padding-left: 1.4em; }
.pa-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--green-ink); }
.pa-reco li::before { color: var(--green); }
.pricing.hx-sin-pack .pa-reco, .pricing.hx-sin-pack .pa-honesta { display: none; }
.pricing.hx-sin-pack .pa-planes { grid-template-columns: minmax(0, 560px); }
.pa-incluido { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem 2rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: start; }
.pa-incluido h3 { font-size: 1.05rem; white-space: nowrap; }
.pa-incluido ul { grid-template-columns: repeat(3, 1fr); gap: .6rem 1.5rem; font-size: .95rem; }
.pa-incluido li { display: block; position: relative; padding-left: 1.4em; }
.pa-incluido li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-ink); font-weight: 800; }
.pa-honesta { display: none; margin: 1.2rem 0 0; background: var(--mist); border-radius: 14px; padding: .9rem 1.2rem; font-size: .95rem; color: var(--muted); }
.pricing.hx-oferta .pa-honesta { display: block; }
.pa-prueba-fila { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.pa-prueba-fila p { margin: 0; }
.pa-finas { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); max-width: 90ch; }
.pa-finas a { color: var(--green-ink); font-weight: 600; }

/* ---------- Preguntas ---------- */
.pa-faq { padding-top: 5rem; } /* el mismo aire por arriba que el resto de secciones */
.pa-in-faq { max-width: 780px; margin: 0 auto; text-align: center; } /* el bloque centrado en la página, con el título centrado */
.pa-faq h2 { text-wrap: balance; }
/* El hueco entre el título y la primera pregunta va en la LISTA, no en el margen del
   h2: una regla de landing.css con más peso lo dejaba a cero y la lista salía pegada
   al título (lo cazó Albert dos veces). */
.pa-faq .pa-faq-lista { text-align: left; padding-top: 2.6rem; }
.pa-faq-lista details { border-top: 1px solid var(--line); padding: .2rem 0; }
.pa-faq-lista details:last-of-type { border-bottom: 1px solid var(--line); }
.pa-faq-lista summary { cursor: pointer; font-weight: 600; padding: .95rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pa-faq-lista summary::-webkit-details-marker { display: none; }
.pa-faq-lista summary::after { content: "+"; color: var(--muted); font-weight: 500; }
.pa-faq-lista details[open] summary::after { content: "–"; }
.pa-faq-lista .faq-body { padding: 0 0 .4rem; color: var(--muted); max-width: 65ch; }
.pa-faq-lista .faq-body p { margin: 0 0 1rem; }

/* ---------- Cierre en verde de marca ---------- */
.pa-cierre { background: var(--green); color: var(--on-green); text-align: center; }
.pa-cierre .wrap { display: grid; gap: 1rem; justify-items: center; }
.pa-cierre h2 { color: var(--on-green); }
.pa-cierre p { margin: 0; color: #0b3d2a; max-width: 52ch; font-size: 1.08rem; }
.pa-cierre .cta-mail { font-size: .92rem; margin-top: .6rem; }
.pa-cierre .cta-mail a { color: var(--on-green); }
.pa-btn-linea { border-color: var(--on-green); color: var(--on-green); }
.pa-btn-linea:hover { background: var(--on-green); color: var(--paper); }
body.portada .site-footer { border-top: 0; }

/* ---------- Estrecho ---------- */
@media (max-width: 1000px) { .pa-rasgo { gap: 2.4rem; } }
@media (max-width: 860px) {
  .pa-rasgo { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.4rem 0; }
  .pa-rasgo:nth-of-type(even) .pa-texto { order: 0; }
  .pa-ademas { grid-template-columns: 1fr; gap: 1.6rem; }
  .pa-ademas ul { grid-template-columns: 1fr; }
  .pa-planes { grid-template-columns: 1fr; }
  .pa-incluido { grid-template-columns: 1fr; gap: .8rem; }
  .pa-incluido ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pa-grid3 { grid-template-columns: 1fr; }
  .pa-grid3 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .pa-pasos ol, .pa-grid3c, .pa-sino { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .pa-chip { position: static; justify-self: start; margin-bottom: -.4rem; } }
@media (max-width: 560px) {
  .pa-incluido ul { grid-template-columns: 1fr; }
  .pa-ahora { font-size: 3.4rem; }
  .pa-plan { padding: 1.5rem; }
  .pa-ctas .btn { flex: 1 1 100%; }
}

/* ---------- «Se paga una vez» (elegido por Albert el 2026-11-02) ----------
   A: el «al mes» tachado y «una sola vez» en verde, junto al importe de las
   tarjetas y en pequeño bajo los botones del hero. C: lo que cuesta en tres
   años frente a Toggl, con las cifras de la comparativa, debajo de las tarjetas. */
.pa-ahora { flex-wrap: wrap; gap: .12em; }
.pa-mes { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; color: var(--muted); text-decoration: line-through; text-decoration-color: #dc2626; text-decoration-thickness: 3px; align-self: center; margin-left: .45em; }
.pa-reco .pa-mes { color: #aab3bb; }
.pa-vez { font-size: .95rem; font-weight: 700; letter-spacing: 0; background: var(--green); color: var(--on-green); padding: .25em .6em; border-radius: 8px; align-self: center; white-space: nowrap; margin-left: .35em; }
.pa-unico { margin: 0; font-size: .95rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .45em; }
.pa-unico b { font-weight: 700; color: var(--ink); }
.pa-unico .pa-mes { font-size: .95rem; text-decoration-thickness: 2px; }
.pa-unico .pa-vez { font-size: .78rem; }
.pa-anos { margin-top: 1.4rem; border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem 2rem; display: grid; gap: 1rem; }
.pa-anos h3 { font-size: 1.05rem; }
.pa-fila { display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 1rem; }
.pa-q { font-weight: 600; font-size: .95rem; }
.pa-q small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.pa-coste-barra { height: 22px; border-radius: 6px; background: var(--line); position: relative; overflow: hidden; }
.pa-coste-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--color-brand); }
.pa-coste-barra.pa-coste-h i { background: var(--green); }
.pa-coste-toggl i { width: 100%; }
.pa-coste-hx i { width: 9.2%; }
.pa-cifra { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-leyenda { margin: 0; font-size: .85rem; color: var(--muted); }
.pa-leyenda a { color: var(--green-ink); font-weight: 600; }
@media (max-width: 640px) { .pa-fila { grid-template-columns: 1fr; gap: .3rem; } .pa-anos { padding: 1.2rem 1.3rem; } }

/* El botón de la prueba en la cabecera (como en la maqueta). En estrecho sobra: el hero ya lo lleva. */