/*
 * Las páginas de la web pública con el estilo de la landing (AL-354, Carlo: «el mismo estilo, no
 * otro»). Con la portada fija encendida, web_publica/base.html carga landing.css tal cual (sus
 * tokens, su tipografía, sus botones, su cabecera y su pie) y esta hoja, que sólo viste con ella
 * los bloques del gestor: los mismos titulares, entradillas, antetítulos, tarjetas, campos,
 * preguntas y fondos que la portada. No repite nada de landing.css: usa sus variables.
 *
 * Va sobre Bootstrap y la capa de la marca (los bloques las siguen usando para su rejilla), así
 * que cada regla gana por ir detrás o por ser más concreta; lo que landing.css define para la
 * portada y aquí estorbaría (la tarjeta del carrusel, `.card`) se deshace al final.
 */

/* ===== La página ===== */
.lb-cuerpo--publica { background: var(--bg); color: var(--text); font-family: var(--font); }
.lb-cuerpo--publica .lb-contenido { padding-top: 0; }
.lb-cuerpo--publica .lb-web-bloque { padding-block: clamp(56px, 7vw, 104px); }
.lb-cuerpo--publica .lb-web-bloque:first-child { padding-top: clamp(56px, 8vw, 120px); }
.lb-cuerpo--publica .lb-web-fondo--suave { background: var(--surface-2); }
.lb-cuerpo--publica .lb-web-fondo--marca { background: var(--liquid); }
.lb-cuerpo--publica .lb-web-fondo--grafito { background: var(--g950); color: var(--on-dark); }
.lb-cuerpo--publica .lb-web-fondo--grafito :is(h1, h2, h3, .lb-pub-titular, .lb-pub-seccion__titulo) { color: var(--on-dark); }
.lb-cuerpo--publica .lb-web-fondo--grafito :is(p, .lb-pub-destacado, .lb-pub-seccion__entradilla) { color: var(--on-dark-2); }

/* ===== Titulares, antetítulos y entradillas: los de la landing ===== */
.lb-cuerpo--publica :is(h1, h2, h3, h4) { font-family: var(--font); color: inherit; }
.lb-cuerpo--publica .lb-pub-titular,
.lb-cuerpo--publica .lb-pub-seccion__titulo,
.lb-cuerpo--publica .lb-pub-cierre h2 {
  margin: 0; font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600;
  text-wrap: balance; color: var(--title-ink);
}
.lb-cuerpo--publica :is(.lb-pub-seccion__titulo, .lb-web-mitades__texto .lb-pub-seccion__titulo) { margin-bottom: 20px; }
.lb-cuerpo--publica .lb-pub-titular--grande { font-size: clamp(40px, 6vw, 88px); line-height: .98; letter-spacing: -0.045em; }
.lb-cuerpo--publica .lb-pub-contexto {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-family: var(--mono); font-size: 12.5px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.lb-cuerpo--publica .lb-pub-contexto::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.lb-cuerpo--publica :is(.lb-pub-destacado, .lb-pub-seccion__entradilla, .lb-pub-cierre__texto p) {
  margin: 22px 0 0; max-width: 60ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--text-2);
  text-wrap: pretty;
}
.lb-cuerpo--publica .lb-pub-portada { padding-block: 0; }
.lb-cuerpo--publica .lb-pub-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lb-cuerpo--publica .lb-web-rico { color: var(--text-2); font-size: 16.5px; line-height: 1.65; }
.lb-cuerpo--publica .lb-web-rico :is(h2, h3) { margin: 1.6em 0 .5em; color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
.lb-cuerpo--publica .lb-web-rico a, .lb-cuerpo--publica .lb-web-enlace { color: var(--accent-text); }
.lb-cuerpo--publica .lb-web-enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }

/* ===== Botones: los de la landing (`.btn` y `.btn-primary` ya los pone landing.css) ===== */
.lb-cuerpo--publica .btn { --bs-btn-hover-color: currentColor; }
.lb-cuerpo--publica .btn-primary:hover { color: var(--lb-blanco); }
.lb-cuerpo--publica .btn-secondary { background: transparent; border-color: var(--border-strong); color: var(--text); }
.lb-cuerpo--publica .btn-secondary:hover { background: var(--surface); border-color: var(--text-3); color: var(--text); }
.lb-cuerpo--publica .lb-web-fondo--grafito .btn-secondary { border-color: color-mix(in srgb, var(--on-dark) 26%, transparent); color: var(--on-dark); }
.lb-cuerpo--publica .btn-link { background: none; border-color: transparent; color: var(--accent-text); box-shadow: none; }
.lb-cuerpo--publica .btn-glass:hover { color: var(--on-dark); }

/* ===== Tarjetas, puntos y cifras: superficie, borde y sombra de la landing ===== */
.lb-cuerpo--publica .lb-web-rejilla { gap: 20px; }
.lb-cuerpo--publica .lb-web-tarjeta,
.lb-cuerpo--publica .lb-pub-puntos > li,
.lb-cuerpo--publica .lb-web-cifra,
.lb-cuerpo--publica .lb-web-testimonio,
.lb-cuerpo--publica .lb-pub-cierre {
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow);
  color: var(--text);
}
.lb-cuerpo--publica :is(.lb-web-tarjeta, .lb-pub-puntos > li) { padding: 28px 26px 30px; }
.lb-cuerpo--publica .lb-web-tarjeta__titulo, .lb-cuerpo--publica .lb-pub-puntos__titulo {
  margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.lb-cuerpo--publica :is(.lb-web-tarjeta, .lb-pub-puntos > li) p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.lb-cuerpo--publica .lb-web-icono { color: var(--violeta); }
.lb-cuerpo--publica .lb-web-tarjeta__imagen, .lb-cuerpo--publica .lb-web-mitades__imagen img,
.lb-cuerpo--publica .lb-web-imagen img { border-radius: var(--r-xl); }
.lb-cuerpo--publica .lb-pub-cierre { padding: clamp(28px, 4vw, 56px); background: var(--g950); color: var(--on-dark); }
.lb-cuerpo--publica .lb-pub-cierre h2 { color: var(--on-dark); }
.lb-cuerpo--publica .lb-pub-cierre__texto p { color: var(--on-dark-2); }
.lb-cuerpo--publica .lb-pub-cierre .btn-secondary { border-color: color-mix(in srgb, var(--on-dark) 26%, transparent); color: var(--on-dark); }

/* La tarjeta del carrusel de la portada (`.card` en landing.css) no es la de los bloques. */
.lb-cuerpo--publica .card.lb-web-tarjeta { display: flex; flex-direction: column; clip-path: none; transition: none; }

/* ===== Preguntas: las de la landing ===== */
.lb-cuerpo--publica .lb-pub-preguntas { border-top: 1px solid var(--border); }
.lb-cuerpo--publica .lb-pub-preguntas details { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
.lb-cuerpo--publica .lb-pub-preguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer;
  list-style: none; font-size: clamp(17px, 1.35vw, 20px); font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.lb-cuerpo--publica .lb-pub-preguntas summary::-webkit-details-marker { display: none; }
.lb-cuerpo--publica .lb-pub-preguntas__respuesta { padding: 0 48px 26px 0; color: var(--text-2); }

/* ===== Campos: los del embudo ===== */
.lb-cuerpo--publica :is(.form-control, .form-select) {
  min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border-strong); background-color: var(--bg);
  color: var(--text); font-size: 16px;
}
.lb-cuerpo--publica :is(.form-control, .form-select):focus {
  border-color: var(--violeta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violeta) 18%, transparent);
}
.lb-cuerpo--publica .form-label { font-size: 14px; font-weight: 500; color: var(--text-2); }
.lb-cuerpo--publica .form-check-input:checked { background-color: var(--violeta); border-color: var(--violeta); }
.lb-cuerpo--publica .lb-web-contacto { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--surface); box-shadow: var(--shadow); }

/* ===== El blog: listado, artículo y paginación ===== */
.lb-cuerpo--publica .lb-web-articulo__meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--text-3); }
.lb-cuerpo--publica .lb-web-articulo .lb-web-rico { max-width: 70ch; font-size: 17.5px; }
.lb-cuerpo--publica .page-link { border-radius: 999px; border-color: var(--border); background: var(--surface); color: var(--text); }
.lb-cuerpo--publica .active > .page-link { background: var(--violeta); border-color: var(--violeta); color: var(--lb-blanco); }