/* ============================================================
   KONARTE — Páginas generales: Nosotros y Aviso de privacidad (diseño 2026)
   Sus secciones vienen como HTML en cada página (clases prod-seccion, container, pagina-texto,
   pagina-dato, pagina-galeria, prod-pasos); aquí toman la paleta y la tipografía de la home.
   La paleta, la cabecera, el pie y la portada interior están en sitio.css.
   ============================================================ */

/* ── Secciones del texto ── */
.prod-seccion { padding: var(--seccion) 0; }
.prod-seccion--crema { background: var(--color-fondo-alterno); }
.prod-seccion--blanca { background: var(--color-fondo); }
.prod-seccion .container { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 var(--margen-lateral); }
.pagina-texto { max-width: 820px; margin: 0 auto; }
.pagina-texto h2 { margin: 1.6em 0 0.5em; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.pagina-texto h2:first-child { margin-top: 0; }
.pagina-texto h3 { font-size: 1.5rem; margin: 1.6em 0 0.4em; }
.pagina-texto p, .pagina-texto li { font-size: 1.04rem; line-height: 1.8; color: var(--color-texto-lectura); }
.pagina-texto p { margin: 0 0 1.1em; }
.pagina-texto ul, .pagina-texto ol:not(.prod-pasos) { padding-left: 1.3em; margin: 0 0 1.4em; }
.pagina-texto li { margin-bottom: 0.45em; }
.pagina-texto li::marker { color: var(--color-acento-texto); }
.pagina-texto strong { color: var(--color-texto); font-weight: 600; }
.pagina-texto a { color: var(--color-enlace); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pagina-texto a:hover { color: var(--color-texto); }
.pagina-nota { font-size: 0.92rem !important; color: var(--color-texto-suave) !important; }

/* Datos destacados (+40 años, garantía…) */
.pagina-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1px; background: var(--color-linea); border: 1px solid var(--color-linea); margin: 2em 0 0.5em; }
.pagina-dato { background: var(--color-fondo); padding: 22px 20px; }
.prod-seccion--crema .pagina-dato { background: var(--color-fondo-alterno); }
.pagina-dato strong { display: block; font-family: var(--fuente-titulos); font-size: 1.7rem; font-weight: 600; line-height: 1.15; margin-bottom: 4px; }
.pagina-dato span { font-size: 0.88rem; color: var(--color-texto-suave); line-height: 1.5; }

/* Galería con pie de foto */
.pagina-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 28px; margin: 1.5em 0 0; }
.pagina-galeria figure { margin: 0; }
.pagina-galeria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-imagen-vacia); }
.pagina-galeria figcaption { font-size: 0.92rem; line-height: 1.6; color: var(--color-texto-suave); margin-top: 14px; }
.pagina-galeria figcaption strong { display: block; font-family: var(--fuente-titulos); font-size: 1.35rem; color: var(--color-texto); margin-bottom: 2px; }

/* ── Llamada a la acción ── */
.cta-pagina .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.cta-pagina h2 { max-width: 640px; }
.cta-pagina .bajada { color: var(--color-texto-claro-suave); max-width: 560px; margin-top: 16px; }

/* ── Celular ── */
@media (max-width: 640px) {
  .pagina-texto p, .pagina-texto li { font-size: 1rem; }
  .pagina-galeria { grid-template-columns: 1fr; gap: 28px; }
  .cta-pagina .boton { width: 100%; }
}