/* ---------- Tokens ---------- */
:root {
    --bg: #F7F5F0;
    --bg-alt: #EFE9DE;
    --ink: #15140F;
    --muted: #75726A;
    --accent: #FF4B26;
    --line: rgba(21, 20, 15, 0.12);

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0 0 1em; }

.wrap {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.section--alt { background: var(--bg-alt); }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--ink);
    color: var(--bg);
    padding: 0.75em 1.25em;
    z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Header / nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(21, 20, 15, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(247, 245, 240, 0.12);
    color: var(--bg);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.25rem;
}
.logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.site-nav a {
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding-block: 0.25rem;
}
.site-nav a:not(.site-nav__cta)::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--accent);
    transition: right 0.3s var(--ease);
}
.site-nav a:not(.site-nav__cta):hover::after { right: 0; }
.site-nav a:not(.site-nav__cta):hover { color: var(--accent); }
.site-nav__cta {
    background: var(--bg);
    color: var(--ink);
    padding: 0.55em 1.2em;
    border-radius: 999px;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.site-nav__cta:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 0;
    width: 32px;
    height: 32px;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--bg);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

/* ---------- Slider de página: sistema genérico horizontal ---------- */
/* Base compartida por TODAS las páginas públicas (Home, Portfolio, Sobre mí,
   Contacto): cada página es un único Swiper horizontal (public_html/assets/
   js/page-slider.js inicializa cualquier .page-slider que encuentre), con
   un .page-slide por sección de contenido. Sin footer: cada página termina
   donde termina su último slide (la única excepción con contenido tipo
   "footer" — mail/redes/copyright — es /contacto, ver más abajo).
   --header-h se mide por JS (offsetHeight real del header, que es sticky y
   su alto depende de fuente/padding) para que el slider ocupe exactamente
   el resto del viewport, sin hardcodear un número en CSS. */
.page-slider {
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    --swiper-pagination-color: var(--accent);
    --swiper-pagination-bullet-inactive-color: var(--ink);
    --swiper-pagination-bullet-inactive-opacity: 0.3;
}
.page-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Padding horizontal más generoso que el vertical: deja aire respecto
       a las barras de navegación pegadas a cada borde (ver
       .swiper-button-prev/next más abajo) para que el contenido no quede
       tan pegado a ellas. El vertical usa vh (no solo vw) para achicarse
       en pantallas bajas — junto con el resto de los tamaños del hero
       (.hero__title, .hero__lead, etc., también mezclados con vh), la
       idea es que el contenido se adapte a la altura disponible en vez
       de necesitar el overflow-y:auto de acá abajo (que queda como red
       de seguridad, no como comportamiento esperado). */
    padding-block: clamp(1rem, 4vh, 2.5rem);
    padding-inline: clamp(2.5rem, 7vw, 5rem);
    /* overflow-x:hidden explícito a propósito: si solo se pone
       overflow-y (para el scroll vertical de emergencia), la spec de CSS
       hace que overflow-x compute como "auto" también (no se puede tener
       un eje visible y el otro no) — eso abría un scroll horizontal no
       intencional que cortaba el título del hero (reportado por el
       usuario con captura: el texto aparecía recortado, con partes de
       las palabras fuera de la pantalla). */
    overflow-x: hidden;
    overflow-y: auto;
}
/* Modificador para slides de texto en páginas con "peek"
   (data-slides-per-view, ver page-slider.js): pega el contenido a la
   izquierda en vez de centrarlo, para que el próximo slide asome de forma
   consistente en todas las páginas — Home (.hero), Portfolio
   (.portfolio-intro), Sobre mí y Contacto (sus slides de texto). Los
   slides de cierre (.cta-slide, .contact-info-slide) NO lo usan: esos se
   mantienen centrados en todas las páginas por igual. */
.page-slide--left { justify-content: flex-start; }
.page-slide__content { width: 100%; max-width: 900px; opacity: 0; transform: translateY(24px); }
/* .swiper-slide-visible (no .swiper-slide-active): con slidesPerView >1
   (el "peek" de Home) el slide siguiente ya es parcialmente visible antes
   de ser el activo. Si el fade-in solo escuchara a .swiper-slide-active,
   ese slide que asoma se vería como un bloque de color sólido sin
   contenido (pasó de verdad: se reportó como "un bloque rojo"). watchSlidesProgress
   está prendido en page-slider.js para que Swiper mantenga esta clase
   actualizada — sin eso, .swiper-slide-visible nunca se aplica. */
.swiper-slide-visible .page-slide__content {
    animation: pageSlideIn 0.7s var(--ease) forwards;
}
@keyframes pageSlideIn {
    to { opacity: 1; transform: translateY(0); }
}

.page-slider .swiper-pagination-bullets {
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(21, 20, 15, 0.06);
}
/* Barras verticales de alto completo (no botones circulares flotando)
   pegadas a cada borde de la pantalla, con la flecha centrada adentro —
   pedido explícito del usuario. Se pisa el posicionamiento default de
   Swiper (que centra un botón chico a mitad de altura vía
   top:50%+margin-top negativo) estirando el propio elemento del botón de
   top:0 a height:100% — Swiper ya centra el ícono adentro con flex, así
   que no hace falta tocar esa parte. Fondo semi-opaco fijo (no solo al
   hover) para que la flecha se siga viendo tanto sobre slides claros
   (hero, proyectos con colores claros) como oscuros (.cta-slide,
   .contact-info-slide).
   Ojo si se vuelve a tocar el tamaño del ícono: Swiper 14 ya NO dibuja la
   flecha con un ::after + font-icon (por eso un font-size ahí no hacía
   nada, quedó un rato así por error) — inyecta un <svg> real, con
   width:100%;height:100% de su propio botón por default. Con la barra
   angosta pero alta, ese 100% de ancho hacía que la flecha se viera
   gigante. El tamaño real del ícono se controla achicando el <svg> mismo,
   no el ::after. */
.page-slider .swiper-button-next,
.page-slider .swiper-button-prev {
    top: 0;
    height: 100%;
    margin-top: 0;
    width: clamp(28px, 3vw, 40px);
    background: rgba(247, 245, 240, 0.35);
    border-radius: 0;
    color: var(--ink);
    box-shadow: none;
    transition: background 0.2s var(--ease);
}
.page-slider .swiper-button-prev { left: 0; }
.page-slider .swiper-button-next { right: 0; }
.page-slider .swiper-button-prev:hover,
.page-slider .swiper-button-next:hover {
    background: rgba(247, 245, 240, 0.85);
}
.page-slider .swiper-button-next svg,
.page-slider .swiper-button-prev svg {
    width: 12px !important;
    height: 12px !important;
}
.page-slider .swiper-button-disabled { opacity: 0.35; }

/* Fallback sin librería (CDN bloqueada) o sin JS (ver <noscript> en cada
   vista): page-slider.js le suma .is-fallback a cualquier .page-slider
   donde detecta que Swiper no cargó, para que el contenido no quede
   invisible — se apilan los slides en flujo normal, con scroll vertical. */
.page-slider.is-fallback { height: auto; overflow: visible; }
.page-slider.is-fallback .swiper-wrapper { display: block; transform: none !important; }
.page-slider.is-fallback .swiper-slide { height: auto; }
.page-slider.is-fallback .swiper-pagination,
.page-slider.is-fallback .swiper-button-next,
.page-slider.is-fallback .swiper-button-prev { display: none; }
.page-slider.is-fallback .page-slide__content { opacity: 1; transform: none; animation: none; }

/* ---------- Hero (primer slide del Home) ---------- */
/* Sin imagen/blob propia: el "peek" del siguiente slide (data-slides-per-view
   en #homeSlider, ver page-slider.js) es lo que le da interés visual a la
   derecha, como en monkis.uy — así que el hero quedó una sola columna de
   texto, angosta y pegada a la izquierda, en vez del grid de dos columnas
   con foto/blob que tenía antes. */
.hero {
    position: relative;
    /* Opaco a propósito, blanco fijo — no depende de qué color haya
       quedado puesto en ningún project-slide vecino. */
    background: var(--bg);
}
.hero__inner { max-width: 620px; }
/* Íconos en vez de una lista de texto apilada (mail / Whatsapp / Instagram /
   LinkedIn): con la lista de texto quedaba casi calcada de monkis.uy, que
   tiene exactamente ese bloque arriba a la izquierda. Mismos SVG que
   .contact-info-slide de /contacto (ver contacto.php), para no inventar un
   segundo set de íconos. */
.hero__contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: clamp(1rem, 4vh, 2.5rem);
}
.hero__contact-email {
    font-size: 0.9rem;
    color: var(--muted);
    transition: color 0.2s var(--ease);
}
.hero__contact-email:hover { color: var(--accent); }
.hero__contact-social { display: flex; gap: 0.6rem; }
.hero__contact-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__contact-social a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hero__contact-icon { width: 16px; height: 16px; }

.hero__scroll-hint {
    position: absolute;
    right: clamp(1rem, 3vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hero__scroll-hint-line { width: 48px; height: 1px; background: var(--accent); }

.hero__title {
    /* Techo mucho más bajo que antes (era clamp hasta 7rem, después 6rem
       con vh sumado): con .hero__inner topeado a 620px de ancho, un
       tamaño que crece con vw sin un techo bajo termina siendo más ancho
       de lo que ese contenedor puede mostrar en una sola línea — "Contenido
       que" terminaba partiéndose en dos líneas solo, algo que no pasaba
       en el diseño original de 3 líneas. Achicado a pedido explícito del
       usuario ("está como enorme... que quede más discreto"), con un
       techo bajo (3.5rem) para que "Contenido que" siempre entre en una
       sola línea dentro de los 620px. */
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.hero__title span { display: block; }
.hero__title--accent { color: var(--accent); font-style: italic; }
.hero__lead {
    max-width: 40ch;
    margin-top: clamp(0.75rem, 3vh, 1.75rem);
    font-size: clamp(1rem, 1.5vw + 0.5vh, 1.25rem);
    color: var(--muted);
}
/* ---------- Page hero (slide de intro: Portfolio / Sobre mí / Contacto) ---------- */
.page-hero__eyebrow {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}
.page-hero__title {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}
.page-hero__lead {
    max-width: 50ch;
    margin-top: clamp(0.75rem, 3vh, 1.25rem);
    font-size: 1.15rem;
    color: var(--muted);
}

/* ---------- Project slide (Home y Portfolio comparten esta vista vía
   app/Views/partials/project_slide.php) ---------- */
/* transition acá (no un backdrop compartido aparte): initColorCrossfade()
   en page-slider.js precalcula, para cada proyecto, una versión clara
   ("pastel", mezclada con blanco) y la real de su propio color — nunca
   mezcla el color de un proyecto con el de otro. Mientras el slide no es
   el activo se ve la versión clara; al volverse el activo pasa a su color
   real, animado por este transition. Antes se probó un backdrop
   compartido detrás de todos los slides (mismo color para toda el área
   visible), pero mientras un proyecto todavía "espiaba" por el peek de
   Home, ese backdrop tenía el color del proyecto ANTERIOR puesto — un
   verde espiando sobre un fondo rojo/naranja daba un marrón feo, nada que
   ver con el tono real del proyecto. Con el color propio de cada slide
   (nunca mezclado con el de otro) eso no puede pasar. */
.project-slide { text-align: center; transition: background-color 0.6s var(--ease), color 0.6s var(--ease); }
/* Fade escalonado por pieza (número, imagen, categoría, cliente, links)
   en vez de un solo fade en bloque — pedido explícito del usuario para
   sumar más dinamismo al entrar cada slide en pantalla. Reemplaza, solo
   acá, el fade genérico de .page-slide__content (que sigue igual para el
   resto de los slides: hero, cta-slide, etc). Dispara con
   .swiper-slide-visible, no .swiper-slide-active, por lo mismo que el
   fade genérico: con el "peek" de Home el slide siguiente ya es
   parcialmente visible antes de ser el activo. */
.project-slide .page-slide__content { opacity: 1; transform: none; animation: none; }
.project-slide__order { transform: translateY(18px); }
.swiper-slide-visible .project-slide__order {
    animation: projectPieceRise 1s var(--ease) forwards;
}
@keyframes projectPieceRise {
    to { transform: translateY(0); }
}
.project-slide__order {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    opacity: 0.85;
}
.project-slide__image,
.project-slide__category,
.project-slide__client,
.project-slide__links {
    opacity: 0;
    transform: translateY(18px);
}
.swiper-slide-visible .project-slide__image {
    animation: pageSlideIn 1s var(--ease) 0.15s forwards;
}
.swiper-slide-visible .project-slide__category {
    animation: projectCategoryIn 1s var(--ease) 0.4s forwards;
}
@keyframes projectCategoryIn {
    to { opacity: 0.75; transform: translateY(0); }
}
.swiper-slide-visible .project-slide__client {
    animation: pageSlideIn 1s var(--ease) 0.55s forwards;
}
.swiper-slide-visible .project-slide__links {
    animation: pageSlideIn 1s var(--ease) 0.75s forwards;
}
.project-slide__image {
    width: 100%;
    max-width: 420px;
    /* max-height (no solo max-width): en una pantalla baja, una imagen
       4:3 topeada solo por ancho puede seguir siendo más alta de lo que
       entra — con las dos cotas juntas, el navegador respeta la que sea
       más chica y la imagen se achica en viewports bajos en vez de
       empujar el resto del contenido fuera del slide. */
    max-height: 30vh;
    aspect-ratio: 4 / 3;
    margin: clamp(0.75rem, 3vh, 1.5rem) auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-slide__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.project-slide__category {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.project-slide__client {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
    margin-top: 0.5rem;
}
.project-slide__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-top: clamp(0.75rem, 3vh, 1.5rem);
}
.project-slide__link {
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.15em;
}
.project-slide__link--externo {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.75;
    border-bottom-style: dashed;
}
.project-slide__empty { color: var(--muted); }

/* ---------- CTA slide (cierre oscuro: Home → /portfolio, Sobre mí → /contacto) ---------- */
.cta-slide { background: var(--ink); color: var(--bg); text-align: center; }
.cta-slide__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
}
.cta-slide__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: clamp(0.75rem, 3vh, 1.5rem);
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--bg);
    padding-bottom: 0.15em;
    transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.cta-slide__link:hover { gap: 1em; color: var(--accent); }

/* ---------- Case detail (/portfolio/{id}, página normal, sin slides) ---------- */
.case-detail { padding-block: clamp(2rem, 5vw, 3rem) clamp(4rem, 10vw, 6rem); }
.case-detail__back { color: var(--muted); font-weight: 500; }
.case-detail__back:hover { color: var(--accent); }
.case-detail__category {
    margin-top: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
}
.case-detail__title {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 0.5rem;
}
.case-detail__date { color: var(--muted); margin-top: 0.75rem; }
.case-detail__image {
    margin-top: 2.5rem;
    border-radius: 8px;
    overflow: hidden;
    max-height: 520px;
    display: flex;
    justify-content: center;
    background: var(--bg-alt);
}
.case-detail__image img {
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.case-detail__body {
    margin-top: 2.5rem;
    max-width: 65ch;
    font-size: 1.1rem;
}
.case-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-top: 3rem;
}
.case-detail__cta {
    display: inline-block;
    font-weight: 600;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.15em;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.case-detail__cta:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Sobre mí: slides ---------- */
.about-slide__inner { max-width: 60ch; margin-inline: auto; text-align: left; }
.about-slide__lead {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.3;
}
.about-slide p:not(.about-slide__lead) { color: var(--muted); font-size: 1.1rem; }
.about-slide__list-title { font-size: 1.3rem; margin-bottom: clamp(0.75rem, 3vh, 1.25rem); }
.about-slide__list { display: grid; gap: 0.4rem; }
.about-slide__list li {
    padding-block: clamp(0.4rem, 2vh, 0.75rem);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

/* ---------- Contacto: slides ---------- */
.contact-slide__inner { width: 100%; max-width: 640px; margin-inline: auto; text-align: left; }
.contact-form { width: 100%; }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: clamp(0.75rem, 2.5vh, 1.25rem); }
.field label { font-size: 0.9rem; font-weight: 600; }
.field input, .field textarea {
    font: inherit;
    padding: 0.7em 1em;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    resize: vertical;
    transition: border-color 0.2s var(--ease);
}
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.field__error { color: var(--accent); font-size: 0.85rem; }
.hp-field { position: absolute; left: -9999px; }

.btn-submit {
    background: var(--ink);
    color: var(--bg);
    border: 0;
    padding: 0.9em 2em;
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn-submit:hover { background: var(--accent); transform: translateY(-1px); }

.alert {
    padding: 0.85em 1.25em;
    border-radius: 6px;
    margin-bottom: clamp(0.75rem, 3vh, 1.5rem);
    font-size: 0.95rem;
}
.alert--ok { background: #E8F3E8; color: #2A5B2A; }
.alert--error { background: #FCE8E4; color: #8C2E17; }

/* Slide de contacto directo (mail/redes/copyright): único lugar del sitio
   donde vive este contenido — antes era un footer fijo en todas las
   páginas, ahora es el último slide de /contacto y nada más (decisión
   explícita del usuario al sacar el footer del resto del sitio). Mismo
   esquema oscuro que tenía el footer viejo. */
.contact-info-slide { background: var(--ink); color: var(--bg); text-align: center; }
.contact-info-slide__label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(247, 245, 240, 0.6);
    margin-top: clamp(1rem, 4vh, 2rem);
    margin-bottom: 0.5rem;
}
.contact-info-slide__label:first-child { margin-top: 0; }
.contact-info-slide__email {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-weight: 500;
    border-bottom: 1px solid rgba(247, 245, 240, 0.3);
    padding-bottom: 0.15em;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.contact-info-slide__email::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 1px;
    background: var(--accent);
    transition: right 0.35s var(--ease);
}
.contact-info-slide__email:hover { color: var(--accent); border-color: transparent; }
.contact-info-slide__email:hover::after { right: 0; }

.contact-info-slide__social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 0.5rem;
}
.contact-info-slide__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0.8;
    transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.contact-info-slide__social a:hover { opacity: 1; color: var(--accent); }
.contact-info-slide__icon { width: 18px; height: 18px; flex-shrink: 0; }

.contact-info-slide__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: clamp(1.25rem, 4vh, 2.5rem);
    padding-top: clamp(0.75rem, 3vh, 1.5rem);
    border-top: 1px solid rgba(247, 245, 240, 0.15);
    font-size: 0.85rem;
    color: rgba(247, 245, 240, 0.55);
}
.contact-info-slide__bottom a { color: inherit; transition: color 0.2s var(--ease); }
.contact-info-slide__bottom a:hover { color: var(--bg); }

/* ---------- Mobile nav ---------- */
/* El header entero se convierte en el panel de pantalla completa cuando el
   menú está abierto (clase .menu-open, puesta por main.js), en vez de un
   <nav> position:fixed anidado adentro de un header position:sticky —
   así no hay que calcular alturas a mano ni pelear con z-index entre
   hermanos: todo (logo, botón, links) vive en la misma caja, en el orden
   normal del documento. */
body.menu-open { overflow: hidden; }

@media (max-width: 719px) {
    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        width: 100%;
    }
    .site-header.menu-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        background: var(--ink);
    }
    .site-header.menu-open .site-header__inner {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .site-header.menu-open .site-nav {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 2.5rem;
    }
    .site-nav a { font-size: 1.5rem; }
    .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .page-slider .swiper-button-next,
    .page-slider .swiper-button-prev { display: none; }
}