:root {
    --sitio-verde: #15803d;
    --sitio-verde-oscuro: #166534;
    --sitio-azul: #071827;
    --sitio-texto: #0f172a;
    --sitio-secundario: #526176;
    --sitio-borde: #e2e8f0;
    --sitio-fondo-suave: #f7f9fc;
    --sitio-contenedor: 1500px;
    /* La columna de contenido: una sola banda de 1500 px con este
       tinte, centrada sobre la página blanca. */
    --sitio-columna: #f6f8fb;
    --sitio-aire: 30px;   /* margen interior de la columna */
    --sitio-sombra: 0 18px 50px rgba(15, 23, 42, 0.10);
}

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

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--sitio-texto);
    background: #ffffff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

img,
video {
    max-width: 100%;
}

.salto-contenido {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 3000;
    padding: 10px 14px;
    color: #ffffff;
    background: #0f172a;
    border-radius: 8px;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform .2s ease;
}

.salto-contenido:focus {
    transform: translateY(0);
}

/* Una sola columna continua, de arriba abajo, sobre página blanca. Las
   secciones de dentro ya no pintan su propio fondo a todo lo ancho: se
   apoyan en esta banda, que es lo que da la estructura. */
.contenido-principal {
    width: 100%;
    max-width: var(--sitio-contenedor);
    min-height: 60vh;
    margin-inline: auto;
    background: var(--sitio-columna);
}

/* Dentro de la columna los contenedores ya no se centran solos: ocupan
   todo el ancho disponible menos el aire de los lados. */
.contenido-principal .pagina-contenedor,
.contenido-principal .seccion-contenedor,
.contenido-principal .slider-contenedor,
.contenido-principal .pt-ancho,
.contenido-principal .mapa-ancho,
.contenido-principal .enlaces-interes-contenedor,
.contenido-principal .redes-publicas-contenedor,
.contenido-principal .blog-contenedor {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--sitio-aire);
}

/* Los fondos que antes iban a todo lo ancho se apagan: si cada sección
   pintase el suyo, la columna se rompería en franjas. Las que tienen un
   color propio a propósito —la llamada a la acción, el blog— se respetan
   más abajo. */
.contenido-principal .mapa,
.contenido-principal .redes-publicas,
.contenido-principal .enlaces-interes,
.contenido-principal .blog-listado,
.contenido-principal .pt-hero-slider {
    background: transparent;
    border-top: 0;
}

/* Un filo finísimo a los lados: separa la columna del blanco de la página
   sin llegar a dibujar una caja. */
.contenido-principal {
    border-inline: 1px solid #e8edf3;
}

/* A sangre: rompe la columna y ocupa el ancho entero de la pantalla. Es
   para la portada, que pide imagen de borde a borde. El truco de los
   márgenes negativos no necesita sacar el bloque de su sitio en el HTML,
   así que el orden de lectura no cambia. */
.a-sangre {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

@media (max-width: 760px) {
    :root { --sitio-aire: 16px; }
}

.pagina-contenedor,
.seccion-contenedor,
.slider-contenedor {
    width: min(var(--sitio-contenedor), calc(100% - 40px));
    margin: 0 auto;
}

.pagina-interior {
    padding: clamp(64px, 8vw, 110px) 0;
}

.pagina-interior h1 {
    max-width: 900px;
    margin: 0 0 22px;
    font-size: clamp(38px, 5.5vw, 70px);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.pagina-interior p,
.contenido-editor {
    max-width: 880px;
    color: var(--sitio-secundario);
    font-size: 18px;
}

.boton-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 24px;
    padding: 11px 22px;
    color: #ffffff;
    background: var(--sitio-verde);
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.boton-principal:hover {
    background: var(--sitio-verde-oscuro);
    box-shadow: 0 12px 24px rgba(21, 128, 61, .22);
    transform: translateY(-1px);
}

:focus-visible {
    outline: 3px solid rgba(21, 128, 61, .25);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    body { font-size: 15px; }
    .pagina-contenedor,
    .seccion-contenedor,
    .slider-contenedor {
        width: min(100% - 24px, var(--sitio-contenedor));
    }
}

/* Marca corporativa ADMICONTA: azul oscuro + marrón. */
:root {
    --sitio-verde: var(--marca-marron, #6b1e2e);
    --sitio-verde-oscuro: #531824;
    --sitio-azul: var(--marca-azul, #102a43);
}
.boton-principal { background: var(--marca-marron, #6b1e2e); }
.boton-principal:hover { background: #531824; box-shadow: 0 12px 24px rgba(107,30,46,.22); }
:focus-visible { outline-color: rgba(107,30,46,.28); }


/* ==========================================================================
   TEXTO JUSTIFICADO
   --------------------------------------------------------------------------
   Los párrafos de todo el sitio van con las dos márgenes alineadas, como un
   documento impreso. Justificar solo afecta a las líneas que no son la
   última, así que los textos de una sola línea —rótulos, pies, botones— se
   ven exactamente igual que antes.

   Va acompañado de partición de palabras: sin guiones, en las columnas
   estrechas la justificación abre ríos blancos entre las palabras. El
   idioma para partir sale del lang="es" del documento.
   ========================================================================== */

p,
li,
dd,
blockquote {
    text-align: justify;
    /* La última línea no se estira: termina donde termine. */
    text-align-last: start;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* Lo que estaba centrado sigue centrado: el acuse de una postulación es un
   mensaje corto dentro de una tarjeta, no un texto corrido. */
.postulacion-confirmacion p {
    text-align: center;
    text-align-last: center;
}

/* En los bloques centrados —las entradillas de la portada, la cabecera de
   las páginas legales, el acuse del libro de reclamaciones— el párrafo se
   justifica igual, pero la última línea se queda centrada: colgada a la
   izquierda bajo un titular centrado quedaba descuadrada. */
.pt-centro p,
.legal-cabecera p,
.lrc-tarjeta p {
    text-align-last: center;
}