/*
 * base.css — Reset y estilos fundamentales
 * Depende de variables.css (se carga primero desde functions.php)
 */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ipg-font-primary);
    font-size: var(--ipg-text-base);
    line-height: var(--ipg-leading-normal);
    color: var(--ipg-color-text);
    /* Canvas gris de fondo: header, hero y footer flotan como tarjetas
       blancas/oscuras sobre este color (ver .site-shell en layout.css). */
    background-color: var(--ipg-color-surface);
    -webkit-font-smoothing: antialiased;
}

/* Red de seguridad contra el desplazamiento horizontal.

   Ninguna página debería poder moverse de lado, y la causa de fondo ya está
   corregida: la escala de espaciado de theme.json pasó de píxeles fijos a
   clamp(), así que un bloque con relleno lateral grande ya no se desborda en
   un teléfono. Esto es el cinturón además del tirante: basta que alguien
   arme una página con tres bloques anidados de relleno máximo para que el
   contenido vuelva a salirse, y esa página se vería descuadrada en móvil sin
   que nadie entienda por qué.

   Va SOLO en <html>, nunca también en <body>. Al declarar overflow en un eje,
   el otro eje pasa de `visible` a `auto`, y eso convertiría a <body> en su
   propio contenedor de desplazamiento: el header dejaría de quedarse pegado
   arriba al bajar, porque `position: sticky` se ancla al contenedor de
   desplazamiento más cercano. En el elemento raíz no pasa: su overflow se
   propaga al viewport, que es justamente donde el sticky tiene que anclarse.

   `clip` y no `hidden` por la misma razón, un nivel más abajo: hidden crea
   contenedor de desplazamiento, clip solo recorta. Se deja `hidden` antes
   como respaldo para navegadores sin clip — gana la última declaración que
   el navegador entienda. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* La animación de aparición al hacer scroll (.ipg-reveal) se retiró: partía
   de opacity:0 y dependía de que un IntersectionObserver agregara la clase
   .is-visible. En bloques más altos que la pantalla el observador no
   llegaba a dispararse y la sección quedaba invisible en el sitio publicado
   aunque se viera bien en el editor. El contenido ahora se muestra siempre,
   sin depender de JavaScript. */

/* Skip link — accesibilidad */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: var(--ipg-z-toast);
    padding: var(--ipg-space-3) var(--ipg-space-6);
    background: var(--ipg-color-primary);
    color: var(--ipg-color-text-inverted);
    font-weight: var(--ipg-weight-semibold);
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--ipg-weight-bold);
    line-height: var(--ipg-leading-tight);
    color: var(--ipg-color-text);
    margin-bottom: var(--ipg-space-4);
}
h1 { font-size: var(--ipg-text-4xl); }
h2 { font-size: var(--ipg-text-3xl); margin-bottom: 0.875rem; }
h3 { font-size: var(--ipg-text-2xl); margin-bottom: var(--ipg-space-3); }
h4, h5, h6 { font-weight: var(--ipg-weight-semibold); margin-bottom: var(--ipg-space-2); }
h4 { font-size: var(--ipg-text-xl); }
h5 { font-size: var(--ipg-text-lg); }
h6 { font-size: var(--ipg-text-base); }

p { margin-bottom: var(--ipg-space-4); }
p:last-child { margin-bottom: 0; }

/* Párrafo justificado desde el botón "Justificar" de la barra del editor
   (inc/parrafo-justificado.php). WordPress no trae estilo para esta clase.
   hyphens: auto parte palabras para que en columnas angostas no se abran
   huecos blancos entre ellas; funciona porque el sitio declara lang="es-CL". */
.has-text-align-justify {
    text-align: justify;
    hyphens: auto;
}

a {
    color: var(--ipg-color-primary);
    text-decoration: underline;
    transition: color var(--ipg-transition-fast);
}
a:hover { color: var(--ipg-color-primary-light); }

/* Listas */
ul, ol {
    padding-left: var(--ipg-space-6);
    margin-bottom: var(--ipg-space-4);
}
li { margin-bottom: 0.35rem; }

/* ── Elementos de contenido enriquecido (the_content) ─────────────────────
   Estos elementos ya tenían su estilo definido en editor.css (así se ven
   al editar), pero les faltaba el equivalente aquí en el frontend — por
   eso se veían "planos"/genéricos recién publicados aunque en el editor
   se vieran con la identidad del tema. Los valores están calcados de
   editor.css usando las variables de variables.css. */

/* Tablas (bloque Tabla) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--ipg-space-6);
    font-size: var(--ipg-text-sm);
}
th {
    background-color: var(--ipg-color-primary);
    color: var(--ipg-color-text-inverted);
    padding: var(--ipg-space-3) var(--ipg-space-4);
    text-align: left;
    font-weight: var(--ipg-weight-semibold);
}
td {
    padding: var(--ipg-space-2) var(--ipg-space-4);
    border-bottom: 1px solid var(--ipg-color-border);
    vertical-align: top;
}
tr:nth-child(even) td {
    background-color: var(--ipg-color-surface);
}

/* Citas (bloque Cita) */
blockquote,
.wp-block-quote {
    border-left: 4px solid var(--ipg-color-primary);
    padding: var(--ipg-space-4) var(--ipg-space-6);
    margin: var(--ipg-space-6) 0;
    background-color: var(--ipg-color-surface);
    border-radius: 0 var(--ipg-radius-sm) var(--ipg-radius-sm) 0;
}
blockquote p,
.wp-block-quote p {
    font-size: var(--ipg-text-lg);
    font-style: italic;
    color: #333;
    margin-bottom: var(--ipg-space-2);
}
.wp-block-quote cite,
.wp-block-quote footer {
    font-size: var(--ipg-text-sm);
    color: var(--ipg-color-text-muted);
    font-style: normal;
}

/* Cita destacada (bloque Pullquote) */
.wp-block-pullquote {
    border-top: 3px solid var(--ipg-color-primary);
    border-bottom: 3px solid var(--ipg-color-primary);
    padding: var(--ipg-space-6);
    text-align: center;
}
.wp-block-pullquote blockquote p {
    font-size: var(--ipg-text-xl);
    font-weight: var(--ipg-weight-semibold);
    color: var(--ipg-color-primary);
}

/* Separador */
hr,
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--ipg-color-border);
    margin: var(--ipg-space-8) 0;
}

/* Código */
code {
    font-family: var(--ipg-font-mono);
    font-size: 0.875em;
    background-color: var(--ipg-color-surface);
    padding: 0.125rem 0.35rem;
    border-radius: 3px;
    border: 1px solid var(--ipg-color-border);
    color: var(--ipg-color-error);
}
pre {
    background-color: var(--ipg-color-text);
    color: var(--ipg-color-surface-2);
    padding: var(--ipg-space-5) var(--ipg-space-6);
    border-radius: 6px;
    overflow-x: auto;
    font-size: var(--ipg-text-sm);
    line-height: var(--ipg-leading-loose);
    margin-bottom: var(--ipg-space-6);
}
pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* Leyenda de imagen (figcaption) */
figcaption {
    font-size: var(--ipg-text-sm);
    color: var(--ipg-color-text-muted);
    text-align: center;
    margin-top: var(--ipg-space-2);
    font-style: italic;
}

/* Bloque Portada (cover) */
.wp-block-cover {
    border-radius: 6px;
    overflow: hidden;
}
.wp-block-cover__inner-container {
    padding: var(--ipg-space-12) var(--ipg-space-8);
}

/* Bloque Columnas — separación entre columnas */
.wp-block-columns {
    gap: var(--ipg-space-6);
}

/* Bloque Galería */
.wp-block-gallery {
    gap: var(--ipg-space-2);
}
.wp-block-gallery img {
    border-radius: var(--ipg-radius-sm);
}

/* Bloque Detalles (acordeón) */
.wp-block-details {
    border: 1px solid var(--ipg-color-border);
    border-radius: 6px;
    padding: var(--ipg-space-4) var(--ipg-space-5);
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ipg-space-2);
    padding: var(--ipg-space-3) var(--ipg-space-6);
    border: 2px solid transparent;
    border-radius: var(--ipg-radius-sm);
    font-family: var(--ipg-font-primary);
    font-size: var(--ipg-text-base);
    font-weight: var(--ipg-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ipg-transition-fast);
    white-space: nowrap;
    line-height: 1;
}
.btn--sm {
    padding: var(--ipg-space-2) var(--ipg-space-4);
    font-size: var(--ipg-text-sm);
}
.btn--primary {
    background-color: var(--ipg-color-primary);
    color: var(--ipg-color-text-inverted);
    border-color: var(--ipg-color-primary);
}
.btn--primary:hover {
    background-color: var(--ipg-color-primary-dark);
    border-color: var(--ipg-color-primary-dark);
    color: var(--ipg-color-text-inverted);
}
/* Texto en marino, no en blanco: sobre el celeste el blanco da 2.33:1 y el
   marino 6.88:1. Al pasar el acento de naranja a celeste, dejar el texto en
   blanco habria empeorado un contraste que ya estaba justo. */
.btn--accent {
    background-color: var(--ipg-color-accent);
    color: var(--ipg-color-primary);
    border-color: var(--ipg-color-accent);
}
.btn--accent:hover {
    background-color: var(--ipg-color-accent-dark);
    border-color: var(--ipg-color-accent-dark);
    color: var(--ipg-color-text-inverted);
}
.btn--outline {
    background-color: transparent;
    color: var(--ipg-color-primary);
    border-color: var(--ipg-color-primary);
}
.btn--outline:hover {
    background-color: var(--ipg-color-primary);
    color: var(--ipg-color-text-inverted);
}

/* Foco visible para accesibilidad */
:focus-visible {
    outline: 3px solid var(--ipg-color-accent);
    outline-offset: 2px;
}
/* ── Footer pegado al fondo ─────────────────────────────────────────────── */
html {
    height: 100%;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* body es flex-column con header / .site-shell / footer como hijos
   directos (ver layout.css): .site-shell es el único que crece
   (flex: 1), empujando el footer siempre al fondo aunque .site-shell
   (que envuelve <main>) tenga poco contenido. */
.site-shell {
    flex: 1;
}
.site-main {
    flex: 1;
}

/* Garantizar que los colores de la paleta de Gutenberg funcionen */
.has-white-color,
p.has-white-color,
h1.has-white-color, h2.has-white-color,
h3.has-white-color, h4.has-white-color,
li.has-white-color, span.has-white-color {
    color: #FFFFFF !important;
}

.has-primary-color,
p.has-primary-color, h1.has-primary-color,
h2.has-primary-color, h3.has-primary-color {
    color: var(--ipg-color-primary) !important;
}

/* El token y no el hex: escrito a mano, esta regla sobrevivia a un cambio de
   paleta y dejaba el color viejo aunque la paleta ya dijera otra cosa. */
.has-accent-color,
p.has-accent-color, h1.has-accent-color,
h2.has-accent-color, h3.has-accent-color {
    color: var(--ipg-color-accent) !important;
}

.has-text-muted-color { color: #555555 !important; }
.has-secondary-color { color: #2E7D32 !important; }