/*
 * pages.css
 * ------------------------------------------------------------
 * Páginas internas del front público de Solumed. Se carga después de
 * site.css y solo usa tokens de base.css.
 *
 * Sistema: hero compacto petróleo (con foto y velo, o con trama técnica
 * si la página no tiene foto); debajo, papel y niebla con tarjetas.
 *
 *   Miga de pan ............ .crumbs
 *   Hero de página ......... components/page_hero.php
 *   Cuerpo CMS ............. <article class="page"> (bloques .page-intro,
 *                            .page-split, .page-quote, .timeline, .page-band
 *                            + .fact-list, .process, .gallery)
 *   Contacto ............... components/contact_page.php
 *   Legales ................ .legal
 *   Estado ................. components/status_page.php (/gracias y 404)
 *
 * Servicios, proyectos, experiencia y preguntas están en servicios.css.
 */

/* ==========================================================
   Miga de pan
   ========================================================== */
.crumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .65rem;
    font: 600 var(--fs-label)/1.4 var(--sm-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sm-gris-texto);
}
.crumbs__item { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; }
/* El separador cierra el ítem anterior (no abre el siguiente): si la miga
   pasa a dos líneas, ninguna empieza con «›». */
.crumbs__item:not(:last-child)::after {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
}
/* Objetivo táctil de 44 px sin mover la línea (el padding de un inline no
   cambia el alto de la línea). */
.crumbs a { padding-block: 14px; color: inherit; text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.crumbs a:hover { color: var(--sm-primario); text-decoration: underline; text-underline-offset: .3em; }
.crumbs [aria-current="page"] { color: var(--sm-tinta); }
.on-dark .crumbs__list { color: var(--sm-blanco-72); }
.on-dark .crumbs a:hover { color: #fff; }
.on-dark .crumbs [aria-current="page"] { color: #fff; }

/* En teléfono la miga completa repite el título de la página justo encima del
   H1 —y con nombres largos se va a dos líneas—. Con .crumbs--compact queda
   solo el nivel anterior, leído como «volver»: el resto sigue en el DOM para
   el lector de pantalla, oculto a la vista (no display:none, que lo sacaría
   también del árbol de accesibilidad). Sirve con dos o tres niveles. */
@media (max-width: 900px) {
    .crumbs--compact .crumbs__item {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .crumbs--compact .crumbs__item:nth-last-child(2) {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }
    .crumbs--compact .crumbs__item:nth-last-child(2)::after { content: none; }
    /* El «›» que separaba pasa a ser un «‹» delante del enlace que queda. */
    .crumbs--compact .crumbs__item:nth-last-child(2)::before {
        content: "";
        flex-shrink: 0;
        width: 5px;
        height: 5px;
        border-top: 1.5px solid currentColor;
        border-left: 1.5px solid currentColor;
        transform: rotate(-45deg);
        opacity: .7;
    }
}

/* ==========================================================
   Hero de página (components/page_hero.php)
   ----------------------------------------------------------
   Compacto: la foto no pasa de 500 px de alto. El velo petróleo es más
   denso a la izquierda (texto) y arriba (header transparente).
   ========================================================== */
.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 54vh, 500px);
    color: #fff;
    background: var(--sm-profundo);
    overflow: hidden;
    isolation: isolate;
}
.page-hero--short { min-height: clamp(280px, 40vh, 380px); }
.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    animation: ag-zoom 14s var(--ease-out) both;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(var(--sm-profundo-rgb), .6) 0%, rgba(var(--sm-profundo-rgb), 0) 34%),
        linear-gradient(0deg, rgba(var(--sm-profundo-rgb), .55) 0%, rgba(var(--sm-profundo-rgb), 0) 50%),
        linear-gradient(90deg, rgba(var(--sm-profundo-rgb), .88) 0%, rgba(var(--sm-profundo-rgb), .6) 48%, rgba(var(--sm-profundo-rgb), .3) 100%);
}
.page-hero--short::after {
    background: linear-gradient(90deg, rgba(var(--sm-profundo-rgb), .95) 0%, rgba(var(--sm-profundo-rgb), .84) 100%);
}
.page-hero__inner {
    position: relative;
    width: 100%;
    padding-top: calc(var(--sh-total) + clamp(1.75rem, 5vh, 3.25rem));
    padding-bottom: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
}
.page-hero__inner > * { animation: ag-rise .42s var(--ease-out-expo) both; }
.page-hero__inner > :nth-child(2) { animation-delay: .04s; }
.page-hero__inner > :nth-child(3) { animation-delay: .08s; }
.page-hero__inner > :nth-child(4) { animation-delay: .12s; }
.page-hero__crumbs { margin: 0 0 clamp(1.25rem, 3vh, 2rem); }
.page-hero__eyebrow { margin: 0 0 .85rem; }
.page-hero__title {
    max-width: 18ch;
    margin: 0;
    font: 800 var(--fs-h1)/1.05 var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    text-wrap: balance;
    color: #fff;
}
.page-hero__lead {
    max-width: 56ch;
    margin: 1.1rem 0 0;
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--sm-blanco-86);
}

/* ==========================================================
   Cuerpo CMS: grilla y ritmo
   ----------------------------------------------------------
   Tres anchos para los hijos directos de .page:
     prosa (p, h2, listas sin clase) ... columna de 40rem (~70 caracteres)
     bloques con clase ................. ancho del contenedor (1200)
     section, .page-band, .page-quote .. a sangre
   El margen superior sale del tipo de bloque (sin colapsos: es grid).
   ========================================================== */
.page,
.page-band {
    --page-cols:
        [full-start] minmax(0, 1fr)
        [wide-start] min(100% - 2 * var(--sm-gutter), var(--sm-wide) - 2 * var(--sm-gutter))
        [wide-end] minmax(0, 1fr) [full-end];
}
.page {
    --measure: 40rem;
    --flow-block: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);
    display: grid;
    grid-template-columns: var(--page-cols);
    padding-bottom: var(--sm-section);
    font-size: 1.0625rem;
    line-height: var(--lh-body);
    color: var(--sm-texto);
}
.page:has(> :is(section, .page-band, .page-quote):last-child) { padding-bottom: 0; }
.page > * { grid-column: wide; min-width: 0; margin-top: 0; margin-bottom: 0; }
.page > :is(p, h2, h3, h4, ul:not([class]), ol:not([class]), table, dl, .page-video) { max-width: var(--measure); }
.page > :is(section, .page-band, .page-quote) { grid-column: full; }

/* Ritmo */
.page > * + * { margin-top: 1.1rem; }
.page > h2 { margin-top: 3rem; }
.page > :is(.page-intro,
.page-split,
.timeline,
.page-gallery,
.page-video,
.process) { margin-top: var(--flow-block); }
.page > :is(.page-band, .page-quote) { margin-top: var(--flow-block); }
.page > section { margin-top: 0; }
.page > :is(section, .page-band, .page-quote) + :is(section, .page-band, .page-quote) { margin-top: 0; }
.page > :is(section, .page-band, .page-quote) + :not(section, .page-band, .page-quote) { margin-top: var(--sm-section); }
.page > :first-child { margin-top: var(--sm-section); }
.page > :is(section, .page-band, .page-quote):first-child { margin-top: 0; }
/* Una franja sin padding propio de sección (sellos) toma aire de bloque. */
.page > :not(section, .page-band, .page-quote) + section:not(.section) { margin-top: var(--flow-block); }
/* Un componente que sigue a un bloque del body no repite todo su aire. */
.page > :not(section, .page-band, .page-quote) + .section { padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Prosa */
.page > h2 {
    font: 800 clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem)/1.15 var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    color: var(--sm-primario);
}
.page > h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 1rem;
    background: var(--sm-primario);
}
.page > h3 { font: 700 1.25rem/1.3 var(--sm-display); color: var(--sm-tinta); }
.page-lead {
    font: 500 clamp(1.2rem, 1.02rem + .75vw, 1.5rem)/1.5 var(--sm-body);
    color: var(--sm-tinta);
}
.page-lead strong { font-weight: 700; color: var(--sm-primario); }

.page-video { position: relative; aspect-ratio: 16 / 9; }
.page-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Títulos de bloque (H2 dentro de split, galería, etc.): mismo tamaño que
   el H2 de sección (--fs-h2), así dos títulos seguidos nunca difieren. */
.page-intro__title,
.page-split__body h2,
.page-gallery__head h2 {
    margin: 0;
    font: 800 var(--fs-h2)/var(--lh-title) var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--sm-primario);
}

/* ==========================================================
   Intro: etiqueta y título a la izquierda, bajada a la derecha
   ========================================================== */
.page-intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.page-intro__head .eyebrow { margin-bottom: 1rem; }
.page-intro__body > * { max-width: var(--measure); margin: 0; }
.page-intro__body > * + * { margin-top: 1rem; }

/* ==========================================================
   Split: foto y texto alternados
   ----------------------------------------------------------
   La foto entra con máscara (data-reveal="mask") y un zoom que se asienta.
   Detrás, un bloque arena desplazado (eco del marco del home).
   --reverse: foto a la derecha · --cutout: recorte vertical sobre arena
   (espigas) · --seal: sello sobre blanco.
   ========================================================== */
.page-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem clamp(2.5rem, 7vw, 6.5rem);
    align-items: center;
}
.page-split__media {
    --offset: clamp(12px, 1.4vw, 20px);
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 4;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--sm-niebla);
    --offset-color: var(--sm-niebla);
    box-shadow: var(--offset) var(--offset) 0 0 var(--offset-color);
}
.page-split--reverse .page-split__media { order: 2; box-shadow: calc(var(--offset) * -1) var(--offset) 0 0 var(--offset-color); }
.page-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-6) var(--ease-out-expo);
}
.js-reveal .page-split__media[data-reveal="mask"]:not(.is-in) img { transform: scale(1.1); }
.page-split__body > * { margin: 0; }
.page-split__body > * + * { margin-top: 1rem; }
.page-split__body > .eyebrow + h2 { margin-top: 0; }
/* Etiqueta → título: los mismos 16 px que en .section__head y .page-intro
   (0,2,0 le gana al «> * { margin: 0 }» de arriba). */
.page-split__body > .eyebrow { margin-bottom: 1rem; }
.page-split__body > h2 + * { margin-top: 1.4rem; }
.page-split__body p { max-width: 36rem; }
.page-split__body .page-lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.3rem); }
.page-split__body .btn { margin-top: .5rem; }

/* El recorte ya va sobre un degradado niebla: el bloque desplazado se fundía
   con él (una sola forma con muescas). Aquí el eco es un tinte de la marca. */
.page-split__media--cutout {
    --offset-color: color-mix(in srgb, var(--sm-primario) 14%, transparent);
    aspect-ratio: 4 / 5;
    background: radial-gradient(ellipse at 50% 70%, #fff 0%, var(--sm-niebla) 70%);
}
.page-split__media--cutout img {
    position: absolute;
    inset: 6% 0 0;
    width: 100%;
    height: 94%;
    object-fit: contain;
    object-position: 50% 100%;
}
.page-split__media--seal {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    background: #fff;
    border: 1px solid var(--sm-linea);
}
.page-split__media--seal img { width: 52%; height: auto; object-fit: contain; }

/* ==========================================================
   Cita a sangre (petróleo)
   ========================================================== */
.page-quote {
    position: relative;
    margin: 0;
    padding: clamp(3.5rem, 2rem + 6vw, 7rem) max(var(--sm-gutter), calc((100% - var(--sm-wide)) / 2 + var(--sm-gutter)));
    overflow: hidden;
    color: #fff;
    background: var(--sm-profundo);
    isolation: isolate;
}
.page-quote::before {
    content: "\201C";
    display: block;
    height: .5em;
    margin-bottom: .2em;
    font: 800 clamp(5rem, 3rem + 6vw, 8rem)/1 var(--sm-display);
    color: var(--sm-cian);
}
.page-quote p {
    max-width: 30ch;
    margin: 0;
    font: 700 clamp(1.5rem, 1rem + 2.1vw, 2.5rem)/1.28 var(--sm-display);
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* ==========================================================
   Línea de tiempo (hitos reales en orden)
   ========================================================== */
.timeline {
    list-style: none;
    position: relative;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem clamp(1.5rem, 3vw, 3rem);
}
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 1px;
    background: var(--sm-linea-fuerte);
}
.timeline__item { position: relative; padding-top: 2.25rem; }
.timeline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sm-papel);
    border: 2px solid var(--sm-primario);
}
.timeline__item:last-child::before { background: var(--sm-primario); }
.timeline__when {
    margin: 0 0 .6rem;
    font: 800 clamp(2.1rem, 1.5rem + 2.2vw, 3.25rem)/1 var(--sm-display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--sm-primario);
}
.timeline__title { margin: 0 0 .35rem; font: 700 1.125rem/1.3 var(--sm-display); color: var(--sm-tinta); }
.timeline__item > p:last-child { max-width: 32ch; margin: 0; font-size: var(--fs-sm); color: var(--sm-gris-texto); }

/* ==========================================================
   Franja de datos (niebla o petróleo) + lista de cifras
   ========================================================== */
.page-band {
    display: grid;
    grid-template-columns: var(--page-cols);
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
    background: var(--sm-niebla);
    color: var(--sm-texto);
}
.page-band > * { grid-column: wide; min-width: 0; }
.page-band--dark { --focus: #fff; background: var(--sm-profundo); color: var(--sm-blanco-86); }
.page-band__title {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 40rem;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    font: 800 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.2 var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    color: var(--sm-primario);
}
.page-band--dark .page-band__title { color: #fff; }

.page .fact-list,
.fact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: none;
    color: var(--sm-gris-texto);
    border-top: 1px solid var(--sm-linea-fuerte);
}
.fact-list > li {
    position: relative;
    padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 0;
    border-left: 1px solid var(--sm-linea);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.fact-list > li:first-child { padding-left: 0; border-left: 0; }
.fact-list__icon { display: block; width: 30px; height: 30px; margin-bottom: 1rem; color: var(--sm-primario); }
.fact-list strong {
    display: block;
    margin-bottom: .4rem;
    font: 800 var(--fs-stat-sm)/1.05 var(--sm-display);
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: var(--sm-tinta);
}
/* Número + unidad en una sola pieza, como la franja de cifras del home:
   la unidad (<small>, migración 033; el espacio va dentro, a su tamaño)
   más chica y en el color de acento. */
.fact-list strong small {
    font-size: .45em;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--sm-primario);
}
.page-band--dark .fact-list { color: var(--sm-blanco-72); border-top-color: var(--sm-linea-clara); }
.page-band--dark .fact-list > li { border-left-color: var(--sm-linea-clara); }
.page-band--dark .fact-list__icon { color: var(--sm-cian); }
.page-band--dark .fact-list strong { color: #fff; }
.page-band--dark .fact-list strong small { color: var(--sm-cian); }

/* ==========================================================
   Proceso en tarjetas (pasos en orden)
   ========================================================== */
.process {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.75rem, 1.6vw, 1.25rem);
    counter-reset: process;
}
.process__step {
    position: relative;
    padding: 1.5rem 1.4rem 1.6rem;
    background: #fff;
    border: 1px solid var(--sm-linea);
    border-radius: var(--r-md);
    counter-increment: process;
}
.process__step::after {
    content: counter(process, decimal-leading-zero);
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    font: 700 .8125rem/1 var(--sm-display);
    letter-spacing: .08em;
    color: var(--sm-gris-texto);
}
.process__icon { display: block; width: 36px; height: 36px; margin-bottom: 1.1rem; color: var(--sm-primario); }
.process__title { margin: 0 0 .35rem; font: 700 1.0625rem/1.3 var(--sm-display); color: var(--sm-tinta); }
.process__step p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--sm-gris-texto); }

/* ==========================================================
   Galería (mosaico) + visor
   ----------------------------------------------------------
   4 columnas con flujo denso: --wide ocupa 2 columnas y --tall 2 filas.
   Sin JS cada foto abre el archivo; con JS (assets/js/pages.js) se abre
   en el visor (.lightbox, <dialog> nativo).
   ========================================================== */
.page-gallery__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-gallery__head .eyebrow { margin-bottom: 1rem; }
.page .gallery,
.gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 15vw, 230px);
    grid-auto-flow: dense;
    gap: clamp(.5rem, 1vw, .75rem);
    margin: 0;
}
.gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--sm-niebla);
}
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}
.gallery__item::after {
    content: "";
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316522d' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat;
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.05); }
.gallery__item:hover::after,
.gallery__item:focus-visible::after { opacity: 1; transform: none; }
.gallery__item:focus-visible { outline-offset: 2px; }

.lightbox {
    --focus: #fff;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #fff;
    background: var(--sm-profundo);
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgba(var(--sm-profundo-rgb), .6); }
.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem var(--sm-gutter);
}
.lightbox__count { font: 600 var(--fs-label)/1 var(--sm-display); letter-spacing: var(--tr-label); color: var(--sm-blanco-72); font-variant-numeric: tabular-nums; }
.lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    /* Nunca menos que margen + flecha + aire: la foto no queda bajo las
       flechas (a 768 px el clamp solo daba 56 px y cada flecha pisaba 23). */
    padding: 0 max(clamp(3.5rem, 7vw, 6rem), calc(var(--sm-gutter) + 48px + .75rem));
}
.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 9.5rem);
    max-height: calc(100dvh - 9.5rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-4);
}
.lightbox__caption { margin: 0; padding: .9rem var(--sm-gutter) 1.25rem; text-align: center; text-wrap: balance; font-size: var(--fs-sm); color: var(--sm-blanco-86); }
.lightbox__btn {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: #fff;
    background: rgba(var(--sm-profundo-rgb), .72);   /* contraste propio aunque quede sobre una foto clara */
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }
.lightbox__btn .icon { width: 20px; height: 20px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--sm-gutter); }
.lightbox__nav--prev .icon { transform: rotate(180deg); }
.lightbox__nav--next { right: var(--sm-gutter); }

/* ==========================================================
   Contacto (components/contact_page.php)
   ========================================================== */
.contact-page { padding: var(--sm-section-sm) 0 var(--sm-section); background: var(--sm-niebla); }
.contact-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
        "info form"
        "map  form";
    grid-template-rows: auto 1fr;
    gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}
.contact-page__info { grid-area: info; }
.contact-page__title {
    margin: 0;
    font: 800 var(--fs-h2)/var(--lh-title) var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--sm-primario);
}
.contact-page__intro { margin-top: 1.1rem; }
.contact-page__intro > * { margin: 0; }
.contact-page__intro .page-lead { font-size: var(--fs-lead); }
.contact-list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    border-top: 1px solid var(--sm-linea-fuerte);
}
.contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--sm-linea);
}
.contact-list__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--sm-primario);
    background: #fff;
}
.contact-list__icon .icon { width: 18px; height: 18px; }
.contact-list__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.contact-list__label {
    font: 600 var(--fs-label)/1.3 var(--sm-display);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--sm-gris-texto);
}
.contact-list__value { font-weight: 500; line-height: 1.5; color: var(--sm-tinta); overflow-wrap: anywhere; }
/* Teléfono y correo: objetivo táctil de 44 px sin cambiar el alto de la fila. */
a.contact-list__value {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 44px;
    margin-block: calc((1.5em - 44px) / 2);
    color: var(--sm-primario);
    text-decoration-color: rgba(10, 122, 140, .35);
}
a.contact-list__value:hover { color: var(--sm-oscuro); text-decoration-color: currentColor; }
.contact-page__assist { margin-top: 1.75rem; }
.contact-page__assist-text { max-width: 34rem; margin: 0 0 .9rem; font-size: var(--fs-sm); color: var(--sm-gris-texto); }
.contact-page__assist .btn { white-space: normal; }

.contact-page__form {
    grid-area: form;
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    background: #fff;
    border: 1px solid var(--sm-linea);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}
.contact-page__form-title {
    margin: 0;
    font: 800 clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem)/1.15 var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    color: var(--sm-primario);
}
.contact-page__form-lead { max-width: 44ch; margin: .75rem 0 1.5rem; color: var(--sm-gris-texto); }
/* La tarjeta ya limita el ancho: el formulario la llena (sin franja vacía). */
.contact-page__form .lead-form { max-width: none; }

.contact-map { grid-area: map; margin: 0; }
.contact-map__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--sm-niebla-fuerte, #e2e9ec);
    border: 1px solid var(--sm-linea);
}
.contact-map__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.8); }
.contact-map__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-top: .6rem;
    font-size: var(--fs-sm);
    color: var(--sm-gris-texto);
}
.contact-map__caption > span { display: inline-flex; align-items: flex-start; gap: .4rem; }
.contact-map__pin { width: 16px; height: 16px; margin-top: .2rem; color: var(--sm-primario); }

/* ==========================================================
   Legales (términos, privacidad)
   ========================================================== */
.legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: 2.5rem clamp(2.5rem, 7vw, 7rem);
    align-items: start;
    padding-top: var(--sm-section-sm);
    padding-bottom: var(--sm-section);
}
.legal__body { max-width: 40rem; }
.prose { font-size: 1.0625rem; line-height: var(--lh-body); color: var(--sm-texto); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
    margin-top: 2.25rem;
    padding-top: 2rem;
    border-top: 1px solid var(--sm-linea);
    font: 700 1.25rem/1.3 var(--sm-display);
    letter-spacing: 0;
    text-transform: none;
    color: var(--sm-tinta);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h2 + * { margin-top: .75rem; }
.legal__aside {
    position: sticky;
    top: calc(var(--sh-h-compact) + 1.5rem);
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--sm-niebla);
    border-radius: var(--r-lg);
}
.legal__aside-title { margin: 0 0 .4rem; font: 700 1.0625rem/1.3 var(--sm-display); color: var(--sm-tinta); }
.legal__aside-text { margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--sm-gris-texto); }
.legal__aside-mail { margin: 0 0 .5rem; }
.legal__aside-mail a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; overflow-wrap: anywhere; }
.legal__aside-mail .icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================
   Estado: /gracias y 404 (components/status_page.php)
   ========================================================== */
.status-page {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--sh-total) - 4rem);
    padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) 0;
    overflow: hidden;
    background: var(--sm-niebla);
    isolation: isolate;
}
.status-page__inner { max-width: 46rem; text-align: center; }
.status-page__code {
    margin: 0 0 .5rem;
    font: 800 clamp(5.5rem, 3.5rem + 9vw, 10rem)/.9 var(--sm-display);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--sm-primario-100);
    user-select: none;
}
.status-page__seal {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    color: #fff;
    background: var(--sm-primario);
    box-shadow: var(--sh-2);
}
.status-page__check { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.status-page__ring { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.status-page__tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: pg-draw 700ms var(--ease-out-expo) 300ms forwards; }
@keyframes pg-draw { to { stroke-dashoffset: 0; } }
.status-page__eyebrow { justify-content: center; }
.status-page__title {
    margin: 0;
    font: 800 clamp(1.9rem, 1.3rem + 2.6vw, 3rem)/1.08 var(--sm-display);
    letter-spacing: var(--tr-title);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--sm-primario);
}
.status-page__text { max-width: 44ch; margin: 1.25rem auto 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--sm-texto); text-wrap: balance; }
.status-page__text p { margin: 0; }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; margin-top: 2rem; }
.status-page__links { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--sm-linea-fuerte); }
.status-page__links-title {
    margin: 0;
    font: 600 var(--fs-label)/1.3 var(--sm-display);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--sm-gris-texto);
}
.status-page__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.75rem; margin: .5rem 0 0; padding: 0; }
.status-page__note { max-width: 44ch; margin: 2rem auto 0; font-size: var(--fs-sm); color: var(--sm-gris-texto); }
.status-page__note-text { margin: 0; text-wrap: balance; }
.status-page__contacts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; margin: .35rem 0 0; padding: 0; }
/* Correo y teléfono: enlaces con objetivo táctil de 44 px, como en /contacto. */
.status-page__contact {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-weight: 500;
    color: var(--sm-primario);
    text-decoration-color: rgba(10, 122, 140, .35);
    overflow-wrap: anywhere;
}
.status-page__contact:hover { color: var(--sm-oscuro); text-decoration-color: currentColor; }
.status-page__contact-icon { width: 16px; height: 16px; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
    .fact-list strong { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem); }
}

@media (max-width: 900px) {
    .page-intro,
.page-split { grid-template-columns: minmax(0, 1fr); }
    .page-split--reverse .page-split__media { order: 0; }
    .page-split__media { --offset: 12px; }
    .page-split--reverse .page-split__media { box-shadow: var(--offset) var(--offset) 0 0 var(--offset-color); }
    .page-split__media--cutout { aspect-ratio: 4 / 3; }

    .fact-list,
    .page .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact-list > li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .fact-list > li:nth-child(n+3) { margin-top: 1.5rem; border-top: 1px solid var(--sm-linea); }
    .page-band--dark .fact-list > li:nth-child(n+3) { border-top-color: var(--sm-linea-clara); }

    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }

       /* mismos 24rem que en escritorio */

    .gallery,
    .page .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 30vw, 220px); }


    .contact-page__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "form" "map"; grid-template-rows: none; }

    .legal { grid-template-columns: minmax(0, 1fr); }
    .legal__aside { position: static; }
}

@media (max-width: 720px) {
    .timeline { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-left: 2rem; }
    .timeline::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
    .timeline__item { padding-top: 0; }
    .timeline__item::before { left: -2rem; top: .45rem; }
}

@media (max-width: 560px) {
    .process { grid-template-columns: minmax(0, 1fr); }
    .process__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .2rem 1rem; padding: 1.15rem 3rem 1.2rem 1.1rem; }
    .process__step::after { top: 1.25rem; right: 1.1rem; }
    .process__icon { grid-row: span 2; width: 32px; height: 32px; margin: 0; }
    /* A 320 px «Descargar ficha técnica (PDF)» no entra en una línea y el
       botón se salía de la pantalla (.btn viene con white-space: nowrap). */
    .lightbox__stage { padding: 0 .5rem; }
    .lightbox__nav { top: auto; bottom: -3.5rem; transform: none; }
    /* Las flechas bajan a la fila de la leyenda: la leyenda queda centrada
       entre las dos, sin pasar por debajo de ninguna. */
    .lightbox__caption {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(48px + 1.25rem);
        padding-inline: calc(var(--sm-gutter) + 48px + .75rem);
    }
}

@media (max-width: 420px) {
    .fact-list strong { font-size: 1.5rem; }
    .fact-list > li { padding-right: .75rem; padding-left: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero__bg { animation: none; }
}