:root {
  --pmos-azul:        #1e5aa8;
  --pmos-azul-osc:    #154785;
  --pmos-azul-claro:  #e8f1fb;
  --pmos-tinta:       #1a2332;
  --pmos-acento:      #f5a623;
  --pmos-texto:       #4a5568;
  --pmos-borde:       #dce3ec;
  --pmos-error:       #dc2626;
  --pmos-blanco:      #ffffff;
  --pmos-negro:       #1c1c1c;
  --pmos-gris:        #f4f7fa;

  --pmos-container: 1180px;
  --pmos-gutter: clamp(1rem, 4vw, 2rem);
  --pmos-seccion: clamp(3rem, 5vw, 4.5rem);
}

.pmos-comp {
  box-sizing: border-box;
}

.pmos-comp *,
.pmos-comp *::before,
.pmos-comp *::after {
  box-sizing: inherit;
}

.pmos-comp {
  width: min(100% - 2 * var(--pmos-gutter), var(--pmos-container));
  margin-inline: auto;
  padding-block: var(--pmos-seccion);
}

.pmos-comp--full {
  width: 100%;
  padding-block: var(--pmos-seccion);
}

.pmos-comp--full__inner {
  width: min(100% - 2 * var(--pmos-gutter), var(--pmos-container));
  margin-inline: auto;
}

/* --- Full-bleed de las landings (body.pmos-landing) ---
   El hero pmos_cabecera lleva width:100%; para que llegue de borde a borde
   quitamos el max-width del contenedor de contenido (#page) y el padding
   lateral del artículo. El header y el pie van fuera de #page, así que
   conservan su ancho. Cada .pmos-comp se sigue centrando con su propio ancho,
   así que solo el hero (y cualquier bloque width:100%) sangra a pantalla
   completa. Nada de 100vw: no abre scroll horizontal. */
body.pmos-landing #page.grid-container {
  max-width: 100%;
}

body.pmos-landing .site-content,
body.pmos-landing .content-area,
body.pmos-landing .site-main {
  width: 100%;
}

body.pmos-landing .inside-article {
  padding-left: 0;
  padding-right: 0;
}

/* Contenido suelto de la página (intro, párrafos, listas) que no está dentro
   de un componente: le damos el mismo contenedor centrado que las secciones
   para que no toque los bordes al quitar el padding del artículo. */
body.pmos-landing .entry-content > :not(.pmos-comp):not(.pmos-cabecera):not([class*="pmos-comp--full"]):not(script):not(style) {
  width: min(100% - 2 * var(--pmos-gutter), var(--pmos-container));
  margin-inline: auto;
}

/* La intro que sigue al hero, con algo de aire y jerarquía. */
body.pmos-landing .entry-content > .wp-block-heading:first-of-type {
  margin-top: var(--pmos-seccion);
}

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select {
  border-color: var(--pmos-borde);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
  border-color: var(--pmos-azul);
  box-shadow: 0 0 0 3px rgba(30, 90, 168, 0.14);
  outline: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"],
a.button, a.wp-block-button__link:not(.has-background) {
  background-color: var(--pmos-azul);
  color: #ffffff;
}

button:hover, html input[type="button"]:hover, input[type="reset"]:hover,
input[type="submit"]:hover, a.button:hover, button:focus,
html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus,
a.button:focus, a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus {
  background-color: var(--pmos-azul-osc);
  color: #ffffff;
}