/* Relleno de marca para superficies sólidas: en oscuro la marca se aclara para usarse como texto,
   así que aquí se vuelve a un tono profundo con texto blanco encima (contraste AA en ambos temas). */
:root { --marca-relleno: var(--marca); --sobre-relleno: var(--marca-sobre); }
:root[data-tema="oscuro"] { --marca-relleno: color-mix(in srgb, var(--marca) 62%, #000); --sobre-relleno: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --marca-relleno: color-mix(in srgb, var(--marca) 62%, #000); --sobre-relleno: #fff; } }
/* Páginas públicas de las marcas: mismos tokens del sistema de diseño; cada marca cambia solo su color. */
.pagina-publica { background: var(--fondo); font-size: var(--t-md); line-height: 1.6; }
.pp-contenedor { width: min(1120px, 100% - 2 * var(--e-4)); margin-inline: auto; }
.pp-cabeza { background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; }
.pp-cabeza-fila { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.pp-marca { display: flex; align-items: center; gap: var(--e-2); font-family: var(--fuente-titulos); font-weight: var(--peso-titulos, 800); font-size: var(--t-lg); color: var(--texto); }
.pp-logo img { max-height: 40px; width: auto; display: block; }
.pp-bloque { padding: clamp(40px, 7vw, 88px) 0; }
.pp-bloque + .pp-bloque { border-top: 1px solid var(--borde); }
.pp-bloque h1 { font-size: clamp(32px, 5.4vw, 58px); line-height: 1.08; letter-spacing: -.02em; margin-bottom: var(--e-4); text-wrap: balance; }
.pp-bloque h2 { font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -.01em; margin-bottom: var(--e-4); text-wrap: balance; }
.pp-bloque h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.pp-bloque p { margin: 0 0 var(--e-3); }
.pp-sub, .pp-intro { color: var(--texto-2); font-size: clamp(16px, 1.6vw, 19px); max-width: 62ch; margin-bottom: var(--e-5); }

.pp-b-portada { background: linear-gradient(160deg, var(--marca-tenue), var(--fondo) 60%); }
.pp-portada-rejilla { display: grid; gap: var(--e-6); align-items: center; }
.pp-portada-rejilla.con-imagen { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pp-portada-imagen img { width: 100%; height: auto; border-radius: var(--radio-lg); box-shadow: var(--sombra-alta); display: block; }
.pp-boton { font-size: var(--t-md); padding: 12px 22px; border-radius: var(--radio-pildora); }

.pp-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--e-4); }
.pp-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--e-5); box-shadow: var(--sombra); margin: 0;
              transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva); }
@media (hover: hover) and (pointer: fine) { .pp-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-elevada); } }
.pp-tarjeta[data-marca] { border-top: 3px solid var(--marca); }
.pp-precio { color: var(--marca-fuerte); font-size: var(--t-md); }
.pp-precio strong { font-size: var(--t-xl); }
.pp-plan { display: flex; flex-direction: column; }
.pp-incluye { margin: var(--e-2) 0 0; padding-left: 20px; color: var(--texto-2); }
.pp-ejemplo-img { width: calc(100% + 2 * var(--e-5)); margin: calc(-1 * var(--e-5)) calc(-1 * var(--e-5)) var(--e-4); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-lg) var(--radio-lg) 0 0; display: block; }
.pp-testimonio blockquote { margin: 0 0 var(--e-3); font-size: var(--t-md); }
.pp-testimonio figcaption { font-weight: 600; color: var(--marca-fuerte); }
.pp-preguntas { display: flex; flex-direction: column; gap: var(--e-2); max-width: 820px; }
.pp-pregunta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-3) var(--e-4); }
.pp-pregunta summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.pp-pregunta[open] summary { margin-bottom: var(--e-2); color: var(--marca-fuerte); }
.pp-llamado-caja { background: var(--marca-relleno); color: var(--sobre-relleno); border-radius: var(--radio-lg); padding: clamp(28px, 5vw, 56px); text-align: center; }
.pp-llamado-caja h2 { color: inherit; }
.pp-llamado-caja p { max-width: 60ch; margin-inline: auto; opacity: .92; }
.pp-boton-claro { background: var(--sobre-relleno); color: var(--marca-relleno); border-color: var(--sobre-relleno); margin-top: var(--e-3); font-size: var(--t-md); padding: 12px 22px; border-radius: var(--radio-pildora); }
.pp-prosa { max-width: 70ch; }
.pp-pie { padding: var(--e-5) 0; color: var(--texto-2); font-size: var(--t-ch); border-top: 1px solid var(--borde); }
.pp-pie .pp-contenedor { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.banda-previa { background: var(--aviso); color: var(--blanco); text-align: center; padding: var(--e-2) var(--e-4); font-weight: 600; font-size: var(--t-ch); position: sticky; top: 0; z-index: 20; }

@media (max-width: 760px) {
  .pp-portada-rejilla.con-imagen { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .pp-tarjeta { transition: none; } .pp-tarjeta:hover { transform: none; } }

/* --- Diseño aprobado de la página de Impulso (plataforma de Tony), con los tokens de cada marca --- */
.pp-nav { display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-ch); font-weight: 500; }
.pp-nav a { color: var(--texto-2); text-decoration: none; }
.pp-nav a:hover { color: var(--marca-fuerte); }
.pp-nav .pp-entrar { padding: 8px 16px; border-radius: var(--radio-pildora); background: var(--marca-relleno); color: var(--sobre-relleno); font-weight: var(--peso-botones); }
.pp-b-encabezado { padding-top: var(--e-5); border-top: 0; }
.pp-heroe { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 40px); padding: clamp(28px, 4.5vw, 48px); border-radius: 24px;
  background: var(--marca-relleno); color: var(--sobre-relleno); box-shadow: 0 30px 60px color-mix(in srgb, var(--marca-relleno) 25%, transparent); }
.pp-heroe h1 { color: inherit; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.05; margin-bottom: var(--e-4); }
.pp-heroe h1 em { display: block; font-style: normal; color: var(--pp-acento, #ffe477); }
.pp-heroe .pp-antetitulo { color: color-mix(in srgb, var(--sobre-relleno) 88%, transparent); }
.pp-heroe-descripcion { font-size: clamp(16px, 1.5vw, 19px); opacity: .95; max-width: 56ch; }
.pp-heroe-frase { margin-top: var(--e-3); }
.pp-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
.pp-boton-blanco { background: #fff; color: var(--marca-relleno); border-color: #fff; }
.pp-boton-contorno { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--sobre-relleno) 45%, transparent); }
.pp-heroe-lateral { padding: 26px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--marca-sobre) 28%, transparent);
  background: color-mix(in srgb, #000 8%, transparent); align-self: stretch; }
.pp-heroe-lateral h2 { color: var(--pp-acento, #ffe477); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; margin: 0 0 var(--e-5); }
.pp-heroe-lateral p { border-left: 2px solid var(--pp-acento, #ffe477); padding-left: 16px; margin: 0 0 var(--e-5); font-size: 15px; line-height: 1.7; }
.pp-heroe-lateral p:last-child { margin-bottom: 0; }
.pp-heroe-lateral strong { display: block; color: var(--pp-acento, #ffe477); margin-bottom: 2px; }
.pp-antetitulo { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--e-3); }
.pp-antetitulo-marca { color: var(--marca-fuerte); }
.pp-seccion-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4); margin-bottom: var(--e-4); }
.pp-seccion-cabeza h2 { margin: 0; }
.pp-enlace { display: inline-flex; align-items: center; gap: 4px; color: var(--marca-fuerte); font-weight: 600; text-decoration: none; }

.pp-necesidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-2); margin-bottom: var(--e-4); }
.pp-necesidad { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--radio-lg); cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: 600 var(--t-base) var(--fuente-texto); text-align: left;
  transition: border-color var(--rapido), box-shadow var(--rapido), background var(--rapido); }
.pp-necesidad:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); }
.pp-necesidad.activa { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-tenue); color: var(--marca-fuerte); }
.pp-necesidad-simbolo.marca-logo-img { width: 36px; height: 36px; padding: 2px; background: transparent; box-shadow: none; }
.pp-solucion { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 35px); padding: clamp(20px, 3vw, 30px);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); }
.pp-solucion h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin-bottom: var(--e-3); }
.pp-pasos-cortos { margin: var(--e-3) 0 var(--e-4); padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.pp-pasos-cortos li::marker { color: var(--marca-fuerte); font-weight: 700; }
.pp-sugerido { padding: var(--e-2) var(--e-3); border-radius: var(--radio); background: var(--marca-tenue); color: var(--marca-fuerte); display: inline-block; }
.pp-nota { font-size: var(--t-ch); margin-top: var(--e-3); }
.pp-muestra { align-self: start; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borde); padding: var(--e-4); font-size: var(--t-ch); }
.pp-muestra-cabeza { display: flex; justify-content: space-between; gap: var(--e-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding-bottom: var(--e-3); margin-bottom: var(--e-3); border-bottom: 1px solid var(--borde); }
.pp-muestra-cabeza strong { color: color-mix(in srgb, var(--marca-fuerte) 65%, var(--texto)); }
.pp-muestra-cabeza span { color: var(--texto-2); }
.pp-muestra p { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); background: var(--superficie); }
.pp-muestra p strong { display: block; color: var(--texto); }
.pp-muestra .pp-muestra-pie { background: transparent; padding: 0; color: var(--texto-2); font-size: 11px; margin: 0; }
.pp-nota-explorador { margin-top: var(--e-4); }

.pp-plan-nombre { align-self: flex-start; font: var(--peso-titulos) 13px var(--fuente-titulos); padding: 4px 12px; border-radius: var(--radio-pildora);
  background: var(--marca-tenue); color: var(--marca-fuerte); margin-bottom: var(--e-3); }
.pp-plan h3 { font-size: var(--t-lg); line-height: 1.35; }
.pp-incluye-detalle { margin: var(--e-2) 0 var(--e-4); font-size: var(--t-ch); }
.pp-incluye-detalle summary { cursor: pointer; font-weight: 600; color: var(--marca-fuerte); }
.pp-incluye-detalle p { margin: var(--e-2) 0 0; }
.pp-plan-boton { margin-top: auto; align-self: flex-start; }
.pp-mas { color: var(--texto-2); margin: 0 4px; }

.pp-recomendador { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.pp-recomendador-form { display: flex; flex-direction: column; gap: var(--e-3); max-width: 440px; }
.pp-recomendacion { padding: clamp(20px, 3vw, 32px); border-radius: 18px; background: var(--superficie); border: 1px solid var(--borde);
  border-top: 4px solid var(--marca); box-shadow: var(--sombra); }
.pp-recomendacion h3 { font-size: clamp(24px, 2.6vw, 30px); }
.pp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.pp-pasos { margin: var(--e-3) 0 var(--e-4); padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: var(--e-3); }
.pp-pasos li { counter-increment: paso; display: grid; grid-template-columns: 36px 1fr; column-gap: var(--e-3); }
.pp-pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--marca-relleno); color: var(--sobre-relleno); font-weight: 700; }
.pp-pasos span { color: var(--texto-2); font-size: var(--t-ch); }
.pp-nota-caja { padding: var(--e-3); border-radius: var(--radio); background: var(--marca-tenue); font-size: var(--t-ch); }

.pp-contacto { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.pp-contacto-form { display: flex; flex-direction: column; gap: var(--e-3); }
.pp-contacto-form .btn { align-self: flex-start; }
.pp-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pp-contacto-exito { border-top: 4px solid var(--ok); }
.pp-cursos-portada h1 { margin-bottom: var(--e-3); }
.pp-filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pp-filtros a { padding: 6px 14px; border-radius: var(--radio-pildora); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); text-decoration: none; font-size: var(--t-ch); }
.pp-filtros a.activo { background: var(--marca); color: var(--marca-sobre); border-color: var(--marca); }
.pp-filtros .pp-filtro-hija { font-size: var(--t-xs); }
.pp-etiqueta { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--marca-fuerte); margin-bottom: var(--e-2); }
.pp-angosto { max-width: 680px; }
.pp-leyenda { margin-top: var(--e-5); }
.constancia { text-align: center; padding: clamp(28px, 6vw, 64px); background: var(--superficie); border: 1px solid var(--borde); border-top: 6px solid var(--marca); border-radius: 18px; }
.constancia-valida { color: var(--ok-texto); font-weight: 700; }

@media (max-width: 860px) {
  .pp-heroe, .pp-solucion, .pp-recomendador, .pp-dos, .pp-contacto { grid-template-columns: minmax(0, 1fr); }
  .pp-heroe { padding: 26px 20px; border-radius: 18px; }
  .pp-nav a:not(.pp-entrar) { display: none; }
  .pp-necesidades { grid-template-columns: 1fr 1fr; }
  .pp-necesidad { padding: var(--e-2) var(--e-3); font-size: var(--t-ch); }
  .pp-seccion-cabeza { flex-direction: column; align-items: flex-start; }
}
@media print { .pp-cabeza, .pp-pie, .btn { display: none; } }