/* Ajustes propios de GeneaStudio sobre Halcyonic */
#banner .button-big{margin:0 1em 1em 0}
.gs-form label{display:block;font-weight:bold;margin:1.2em 0 .3em}
.gs-form input[type=text],.gs-form input[type=email],.gs-form select,.gs-form textarea{width:100%;padding:.7em;border:1px solid #bbb;border-radius:4px;font:inherit}
.gs-form textarea{min-height:9em}
.gs-form button{margin-top:1.5em;padding:.8em 1.6em;font:inherit;border:0;border-radius:4px;background:#3B4346;color:#fff;cursor:pointer}
.gs-note{font-size:.9em;color:#666}
/* Menú principal: iluminación y bastardilla manteniendo la fuente de origen */
#header nav a:hover,
#header nav a:focus {
    color: #f6f8f8;
    font-family: inherit;
    font-style: italic;
}
#header nav a[aria-current="page"] { text-decoration: underline; }
#content a.button-big,
#content a.button-big:hover { color: #fff; text-shadow: none; }

/* Imagen de fondo de cabecera y banner (solo Inicio).
   Foto: PxHere, licencia CC0 (archivo original: book-wood-photography-vintage-old-portrait-46267-pxhere_com.jpg).
   Oscurecida al 50 % con la capa negra rgba(0,0,0,.5): subir o bajar el .5 para cambiarlo.
   El 52 % de la posición vertical mantiene visible el retrato central. */
body:not(.subpage) #header-wrapper {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
                url("../images/cabecera-1920.jpg") 50% 52% / cover no-repeat,
                #2b2420;
}
@media screen and (max-width: 736px) {
    body:not(.subpage) #header-wrapper {
        background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
                    url("../images/cabecera-800.jpg") 50% 52% / cover no-repeat,
                    #2b2420;
    }
}

/* Inicio, escritorio: el texto del banner se limita a la izquierda para no tapar el retrato central. */
@media screen and (min-width: 737px) {
    body:not(.subpage) #banner p { max-width: none; white-space: nowrap; }
}

/* Inicio, móvil: no hay hueco junto al texto, así que se deja espacio bajo los botones para que se vea el retrato central. */
@media screen and (max-width: 736px) {
    body:not(.subpage) #banner { padding-bottom: 170px; }
    body:not(.subpage) #header-wrapper {
        background-size: auto, auto 700px, auto;
        background-position: 0 0, 50% 0, 0 0;
    }
}

/* Logotipo «GeneaStudio»: Montserrat Light (licencia OFL, alojada en assets/fonts), sin conexión a terceros.
   Misma altura que antes (mismo tamaño de fuente) y un 50 % más de ancho, conseguido con espaciado entre letras (.206em).
   Si Montserrat no cargase, se usan Century Gothic, Futura o Trebuchet MS, si el equipo las tiene. */
@font-face {
    font-family: 'Montserrat';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2");
}
#header h1 a,
#titleBar .title {
    font-family: 'Montserrat', 'Century Gothic', 'Futura', 'Trebuchet MS', sans-serif;
    font-weight: 300;
    letter-spacing: .206em;
}
#header h1 a { margin-right: 0; }

/* Texto del banner del Inicio (slogan y subtítulo): Great Vibes (licencia OFL, alojada en assets/fonts).
   Para cambiar a Alex Brush basta con sustituir 'Great Vibes' por 'Alex Brush' en la regla de abajo (también está incluida).
   Bickham Script Pro es una fuente comercial de Adobe y no se puede incluir en la web. */
@font-face {
    font-family: 'Alex Brush';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/alex-brush-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: 'Great Vibes';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2");
}
#banner p {
    font-family: 'Great Vibes', 'Bickham Script Pro', 'Alex Brush', cursive;
    font-weight: 400;
    font-size: 3em;
    line-height: 1.15em;
}
@media screen and (min-width: 737px) and (max-width: 1200px) {
    #banner p { font-size: 3.9vw; }
}
@media screen and (max-width: 736px) {
    #banner p { font-size: 1.9em; }
}

/* Inicio, escritorio y tablet: el texto va en 2 líneas (slogan y subtítulo) y la foto se amplía y se desplaza a la derecha
   para que el retrato central siga visible a la derecha del texto. */
@media screen and (min-width: 737px) {
    body:not(.subpage) #header-wrapper {
        background-size: auto, 135% auto, auto;
        background-position: 0 0, 0% 52%, 0 0;
    }
}

/* Logotipo: «Genea» en Montserrat Light (arriba) y «Studio» en Poppins Light cursiva (licencia OFL, alojada en assets/fonts).
   El espaciado de «Studio» (.234em) se calcula para que conserve exactamente el ancho que tenía con Montserrat,
   de modo que el logotipo sigue midiendo un 50 % más que el original. Si Poppins no cargase, se usan Century Gothic o Futura. */
@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/poppins-latin-300-italic.woff2") format("woff2");
}
.logo-studio {
    font-family: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
    font-style: italic;
    font-weight: 300;
    letter-spacing: .234em;
    margin-right: -.234em;
}

/* Inicio: conexión entre cada frase del banner y su botón (sin ocultar nada; los botones están siempre visibles).
   Par 1: «Tu ayer en tu presente.» + botón de antepasados.  Par 2: «Investigación genealógica...» + botón de herederos.
   Al pasar el cursor por una frase o un botón (o enfocar el botón con el teclado), el par activo se destaca y el otro baja al 65 %.
   Los efectos con cursor solo se aplican en dispositivos que tienen cursor; en móviles y tabletas los botones se ven y se pulsan sin más. */
.gs-frase, .gs-b1, .gs-b2 {
    transition: opacity .2s ease, color .2s ease, text-shadow .2s ease,
                transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .gs-frase, .gs-b1, .gs-b2 { transition: none; }
}
/* Enfoque con teclado (en cualquier dispositivo) */
#banner:has(.gs-b1:focus-visible) .gs-f2, #banner:has(.gs-b1:focus-visible) .gs-b2,
#banner:has(.gs-b2:focus-visible) .gs-f1, #banner:has(.gs-b2:focus-visible) .gs-b1 { opacity: .65; }
#banner:has(.gs-b1:focus-visible) .gs-f1, #banner:has(.gs-b2:focus-visible) .gs-f2 {
    color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .55);
}
.gs-b1:focus-visible, .gs-b2:focus-visible {
    background-image: linear-gradient(to bottom, #fd492b, #de2a10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .35);
    transform: translateY(-2px);
}
/* Cursor */
@media (hover: hover) and (pointer: fine) {
    #banner:has(.gs-f1:hover, .gs-b1:hover) .gs-f2, #banner:has(.gs-f1:hover, .gs-b1:hover) .gs-b2,
    #banner:has(.gs-f2:hover, .gs-b2:hover) .gs-f1, #banner:has(.gs-f2:hover, .gs-b2:hover) .gs-b1 { opacity: .65; }
    #banner:has(.gs-f1:hover, .gs-b1:hover) .gs-f1, #banner:has(.gs-f2:hover, .gs-b2:hover) .gs-f2 {
        color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .55);
    }
    #banner:has(.gs-f1:hover) .gs-b1, #banner:has(.gs-f2:hover) .gs-b2,
    .gs-b1:hover, .gs-b2:hover {
        background-image: linear-gradient(to bottom, #fd492b, #de2a10);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 4px 10px rgba(0, 0, 0, .35);
        transform: translateY(-2px);
    }
}

/* Bloques del Inicio: párrafos descriptivos en 3 líneas (sin títulos: el nombre del servicio lo da el botón del banner).
   Los párrafos de las dos columnas usan el mismo tamaño, calculado como porcentaje del ancho de la columna (3,2 %),
   para que ocupen 3 líneas en ambas cuando están una al lado de la otra (escritorio y tablet). En móvil las columnas van
   apiladas y se conserva el tamaño normal de lectura. */
.gs-bloque { container-type: inline-size; }
@media screen and (min-width: 737px) {
    #features .gs-bloque p { font-size: 3.2cqw; }
}

/* Los textos de los bloques emergen al pasar el cursor por su frase o su botón del banner (par 1: antepasados, par 2: herederos).
   Solo en pantallas con cursor y de más de 737 px: en móvil y tablet táctil los dos textos se ven siempre.
   --gs-reposo es la opacidad de los textos en reposo: .65 = apagados pero legibles (contraste calculado de 4,59:1 sobre el gris del bloque); 0 = totalmente ocultos. */
:root { --gs-reposo: .65; }
@media screen and (min-width: 737px) and (hover: hover) and (pointer: fine) {
    .gs-d1, .gs-d2 {
        opacity: var(--gs-reposo);
        transform: translateY(8px);
        transition: opacity .25s ease, transform .25s ease;
    }
    #page-wrapper:has(.gs-f1:hover, .gs-b1:hover, .gs-b1:focus-visible) .gs-d1,
    #page-wrapper:has(.gs-f2:hover, .gs-b2:hover, .gs-b2:focus-visible) .gs-d2 {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gs-d1, .gs-d2 { transition: none; transform: none; }
}

/* Color del texto de los bloques: más claro que el de la plantilla (#a0a8ab) para mejorar el contraste.
   #dde1e2 sobre el gris #353D40: 8,4:1 al 100 % y 4,6:1 con el 65 % de reposo (cálculo propio con color plano). */
#features .gs-bloque p { color: #dde1e2; }

/* Inicio: franja breve de contacto (sustituye a la tarjeta «Cómo trabajo», ahora en Servicios) */
.gs-franja .row > div { display: flex !important; align-items: center; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; }
.gs-franja p { margin: 0; font-size: 1.15em; flex: 1 1 18em; }
.gs-franja .button-big { margin: 0; flex: 0 0 auto; }

/* Servicios: preguntas frecuentes (sin JavaScript, con teclado) */
.gs-faq { border-top: 1px solid #ddd; padding: .7em 0; }
.gs-faq:last-of-type { border-bottom: 1px solid #ddd; margin-bottom: 1.5em; }
.gs-faq summary { cursor: pointer; font-weight: bold; }
.gs-faq summary:focus-visible { outline: 2px solid #de2a10; outline-offset: 3px; }
.gs-faq p { margin: .6em 0 0 0; }

/* Inicio: la franja de contacto toma el mismo fondo (gris marengo con textura) que los bloques que tiene encima. */
body:not(.subpage) #content-wrapper {
    background: #353D40 url("images/bg02.jpg");
    border-top: 0;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .75);
}
body:not(.subpage) .gs-franja { background: none; box-shadow: none; }
body:not(.subpage) .gs-franja p { color: #dde1e2; }

/* Pie más compacto: letra más pequeña, menos interlineado y menos espacio vertical. */
#footer-wrapper { padding: 30px 0 30px 0; }
#footer { font-size: .85em; }
#footer p, #footer li { line-height: 1.45em; }
#footer h2 { font-size: 1.1em; margin: 0 0 .6em 0; }
#footer .link-list li { padding: .12em 0; }
#copyright { font-size: .8em; line-height: 1.4em; padding: 22px 0 36px 0; }


/* Contacto: formulario compacto. Fila de tres campos (tipo, nombre, correo), un solo cuadro de texto y el botón Enviar. */
.gs-form .gs-fila { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.2em; }
.gs-form label { margin: .8em 0 .25em 0; font-size: .9em; }
.gs-form input[type=text], .gs-form input[type=email], .gs-form select, .gs-form textarea { padding: .45em .65em; font-size: .9em; }
.gs-form textarea { min-height: 6.5em; resize: vertical; }
.gs-form button { margin-top: 1em; padding: .55em 1.5em; font-size: .95em; }
body.gs-contacto #content section > p:first-of-type { margin-bottom: .4em; }
@media screen and (max-width: 736px) {
    .gs-form .gs-fila { grid-template-columns: 1fr; }
}
.gs-form input[type=text], .gs-form input[type=email], .gs-form select { height: 2.5em; box-sizing: border-box; }

/* Textos del bloque, en claro para leerse sobre la foto */
body.gs-contacto #content h2 { color: #fff; }
body.gs-contacto #content h3 { color: #c3ced3; }
body.gs-contacto #content p { color: #dde1e2; }
body.gs-contacto #content a:not(.button-big) { color: #fff; }
.gs-form label { color: #fff; }
.gs-form input[type=text], .gs-form input[type=email], .gs-form select, .gs-form textarea {
    background: rgba(255, 255, 255, .93); color: #222; border: 1px solid rgba(255, 255, 255, .45);
}
.gs-form textarea::placeholder { color: #666; }
.gs-form button {
    background: linear-gradient(to bottom, #f0381b, #cc2308); color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.gs-form button:hover, .gs-form button:focus-visible { background: linear-gradient(to bottom, #fd492b, #de2a10); }

/* Contacto: una sola fotografía de fondo a pantalla completa, fija (no se desplaza con la página) y oscurecida.
   Foto: PxHere, licencia CC0 (archivo original: white-photography-vintage-antique-retro-old-277-pxhere_com.jpg).
   --gs-oscuro-contacto es la opacidad de la capa negra (.6 = 60 %): más alto, más oscuro y más contraste para el texto. */
:root { --gs-oscuro-contacto: .6; }
body.gs-contacto::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-contacto)), rgba(0, 0, 0, var(--gs-oscuro-contacto))),
                url("../images/cabecera-contacto-1920.jpg") 50% 50% / cover no-repeat,
                #1d2327;
}
@media screen and (max-width: 736px) {
    body.gs-contacto::before {
        background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-contacto)), rgba(0, 0, 0, var(--gs-oscuro-contacto))),
                    url("../images/cabecera-contacto-1200.jpg") 50% 50% / cover no-repeat,
                    #1d2327;
    }
}
/* Cabecera, zona de contenido y bloque del formulario, transparentes: sin marco ni tarjeta, se ve solo la foto. */
body.gs-contacto #header-wrapper { background: none; }
body.gs-contacto #content-wrapper { background: none; border: 0; }
body.gs-contacto #content section { background: none; box-shadow: none; }

/* Trayectoria: una sola fotografía de fondo a pantalla completa, fija y oscurecida, como en Contacto.
   Foto: PxHere, licencia CC0 (archivo original: watch-table-book-read-open-wood-674238-pxhere_com.jpg).
   --gs-oscuro-trayectoria es la opacidad de la capa negra (.6 = 60 %); --gs-pos-trayectoria, la parte de la foto que se ve. */
:root { --gs-oscuro-trayectoria: .6; --gs-pos-trayectoria: 50% 50%; }
body.gs-trayectoria::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-trayectoria)), rgba(0, 0, 0, var(--gs-oscuro-trayectoria))),
                url("../images/fondo-trayectoria-1920.jpg") var(--gs-pos-trayectoria) / cover no-repeat,
                #1d2327;
}
@media screen and (max-width: 736px) {
    body.gs-trayectoria::before {
        background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-trayectoria)), rgba(0, 0, 0, var(--gs-oscuro-trayectoria))),
                    url("../images/fondo-trayectoria-1200.jpg") var(--gs-pos-trayectoria) / cover no-repeat,
                    #1d2327;
    }
}
body.gs-trayectoria #header-wrapper { background: none; }
body.gs-trayectoria #content-wrapper { background: none; border: 0; }
body.gs-trayectoria #content section { background: none; box-shadow: none; }
body.gs-trayectoria #content h2 { color: #fff; }
body.gs-trayectoria #content h3 { color: #c3ced3; margin-top: 1.4em; }
body.gs-trayectoria #content header h3 { margin-top: 0; }
body.gs-trayectoria #content p, body.gs-trayectoria #content li { color: #dde1e2; }
body.gs-trayectoria #content a:not(.button-big) { color: #fff; }
body.gs-trayectoria #content .check-list li { border-top-color: rgba(255, 255, 255, .18); }
/* Trayectoria: listas con el mismo tamaño de letra que los párrafos, y subtítulos algo más contenidos */
body.gs-trayectoria #content li { font-size: 1em; line-height: 1.5em; }
body.gs-trayectoria #content section > h3 { font-size: 1.2em; }
body.gs-trayectoria #content header h3 { font-size: 1.3em; }
body.gs-trayectoria #content p { line-height: 1.6em; }
body.gs-trayectoria #content .check-list li { border-color: rgba(255, 255, 255, .2); }

/* Inicio: una sola fotografía continua detrás de la cabecera, el banner y los bloques.
   La capa negra va del 50 % arriba al 72 % abajo, para que los textos de los bloques se lean sobre la foto.
   Foto: PxHere, licencia CC0. Se amplía al 135 % y se pega a la izquierda para que el retrato quede a la derecha del texto. */
body:not(.subpage) .gs-foto-superior {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .72)),
                url("../images/cabecera-1920.jpg") 0% 60% / 135% auto no-repeat,
                #2b2420;
}
body:not(.subpage) .gs-foto-superior #header-wrapper { background: none; }
body:not(.subpage) .gs-foto-superior #features-wrapper { background: none; border: 0; }
/* Móvil: la foto cubre la cabecera y el banner (760 px) y se funde con el fondo oscuro, donde van los textos de los bloques. */
@media screen and (max-width: 736px) {
    body:not(.subpage) .gs-foto-superior {
        background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .72) 520px, #14181a 760px),
                    url("../images/cabecera-1200.jpg") 50% 0% / auto 760px no-repeat,
                    #14181a;
    }
    /* Margen lateral en el pie y la franja de contacto, que en móvil quedaban pegados al borde */
    #footer, #copyright, .gs-franja .container { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
}

/* Proyectos y casos: una sola fotografía de fondo a pantalla completa, fija y oscurecida (como Contacto y Trayectoria).
   Foto: PxHere, licencia CC0 (archivo original: writing-hand-old-portrait-letter-color-939259-pxhere_com.jpg).
   Los bloques son paneles oscuros translúcidos sobre la foto. */
:root { --gs-oscuro-proyectos: .62; --gs-pos-proyectos: 50% 50%; }
body.gs-proyectos::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-proyectos)), rgba(0, 0, 0, var(--gs-oscuro-proyectos))),
                url("../images/fondo-proyectos-1920.jpg") var(--gs-pos-proyectos) / cover no-repeat,
                #1d2327;
}
@media screen and (max-width: 736px) {
    body.gs-proyectos::before {
        background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-proyectos)), rgba(0, 0, 0, var(--gs-oscuro-proyectos))),
                    url("../images/fondo-proyectos-1200.jpg") var(--gs-pos-proyectos) / cover no-repeat,
                    #1d2327;
    }
}
body.gs-proyectos #header-wrapper { background: none; }
body.gs-proyectos #content-wrapper { background: none; border: 0; }
body.gs-proyectos #content section.gs-panel {
    background: rgba(10, 14, 16, .58);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    box-shadow: none;
    padding: 1.4em 1.6em;
    margin-bottom: 1.6em;
}
body.gs-proyectos #content h2, body.gs-proyectos #content h3 { color: #fff; }
body.gs-proyectos .gs-titulo-pagina { margin-bottom: 1.2em; }
body.gs-proyectos .gs-titulo-pagina h3 { color: #c3ced3; margin-top: .2em; }
body.gs-proyectos #content p, body.gs-proyectos #content dd, body.gs-proyectos #content li, body.gs-proyectos #content span { color: #dde1e2; }
body.gs-proyectos #content p.gs-etiqueta { color: #c3ced3; font-size: .9em; margin: -.2em 0 .7em 0; }
body.gs-proyectos #content a { color: #fff; }
.gs-esquema { display: block; width: 140px; max-width: 100%; height: auto; margin: 0 0 .9em 0; }
body.gs-proyectos #content section.gs-panel h3 { margin: 0 0 .5em 0; }

/* Cómo investigo: una sola fila de pasos numerados, unidos por una línea; en móvil, en vertical */
.gs-pasos { list-style: none; margin: .8em 0 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4em; counter-reset: paso; }
.gs-pasos li { position: relative; padding-top: 3.3em; counter-increment: paso; background: none; border: 0; }
.gs-pasos li::before {
    content: counter(paso);
    position: absolute; top: 0; left: 0;
    width: 2.4em; height: 2.4em; line-height: 2.4em; text-align: center;
    border: 2px solid #f0381b; border-radius: 50%; color: #fff; font-weight: bold;
}
.gs-pasos li:not(:last-child)::after {
    content: ""; position: absolute; top: 1.2em; left: 3em; right: -1.4em; height: 1px; background: rgba(255, 255, 255, .35);
}
.gs-pasos strong { display: block; color: #fff; margin-bottom: .2em; }
.gs-pasos span { display: block; font-size: .92em; line-height: 1.5em; }

/* Ficha del caso */
.gs-ficha { display: grid; grid-template-columns: 9em 1fr; gap: .3em 1.4em; margin: 0; }
.gs-ficha dt { color: #fff; font-weight: bold; padding: .5em 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.gs-ficha dd { margin: 0; padding: .5em 0; border-top: 1px solid rgba(255, 255, 255, .16); line-height: 1.55em; }
body.gs-proyectos .gs-faq { border-top-color: rgba(255, 255, 255, .16); }
body.gs-proyectos .gs-faq:last-of-type { border-bottom-color: rgba(255, 255, 255, .16); }
body.gs-proyectos .gs-faq summary { color: #fff; }
body.gs-proyectos .gs-cierre { margin-top: 1.2em; }
@media screen and (max-width: 736px) {
    .gs-pasos { grid-template-columns: 1fr; gap: 1.1em; }
    .gs-pasos li:not(:last-child)::after { top: 2.6em; left: 1.2em; right: auto; width: 1px; height: calc(100% - 1.4em + 1.1em); }
    .gs-pasos li { padding-top: 0; padding-left: 3.4em; min-height: 2.6em; }
    .gs-ficha { grid-template-columns: 1fr; gap: 0; }
    .gs-ficha dt { border-bottom: 0; padding-bottom: 0; }
    .gs-ficha dd { border-top: 0; padding-top: .1em; }
}

/* Proyectos y casos: las dos columnas superiores con la misma altura; ficha con línea continua */
body.gs-proyectos #content .row { display: flex; flex-wrap: wrap; }
body.gs-proyectos #content .row > div { float: none; }
body.gs-proyectos #content .row > div:not(.gs-titulo-pagina) { display: flex; }
body.gs-proyectos #content .row > div > section.gs-panel { flex: 1 1 auto; width: 100%; box-sizing: border-box; }
.gs-ficha { gap: 0; }
.gs-ficha dt { padding-right: 1.4em; }

/* Inicio: la misma fotografía (PxHere, CC0) pasa a ser un fondo fijo a pantalla completa y oscurecido, igual que en el resto
   de páginas, detrás de la cabecera, el banner, los bloques y la franja de contacto (solo el pie conserva su fondo).
   La foto se amplía al 135 % y se pega a la izquierda para que el retrato quede a la derecha del texto.
   --gs-oscuro-inicio es la opacidad de la capa negra (.70 = 70 %). */
:root { --gs-oscuro-inicio: .70; --gs-pos-inicio: 0% 75%; }
body:not(.subpage)::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-inicio)), rgba(0, 0, 0, var(--gs-oscuro-inicio))),
                url("../images/cabecera-1920.jpg") var(--gs-pos-inicio) / 135% auto no-repeat,
                #14181a;
}
@media screen and (max-width: 736px) {
    body:not(.subpage)::before {
        background: linear-gradient(rgba(0, 0, 0, var(--gs-oscuro-inicio)), rgba(0, 0, 0, var(--gs-oscuro-inicio))),
                    url("../images/cabecera-1200.jpg") 50% 50% / cover no-repeat,
                    #14181a;
    }
}
body:not(.subpage) .gs-foto-superior { background: none; }
body:not(.subpage) #header-wrapper { background: none; }
body:not(.subpage) #content-wrapper { background: none; border: 0; }
@media screen and (max-width: 736px) {
    body:not(.subpage) #banner { padding-bottom: 40px; }
}

/* Pie: el slogan en dos líneas, sin separación visible entre ellas */
.gs-slogan-pie { line-height: 1.45em; }
@media screen and (min-width: 737px) { .gs-slogan-pie { white-space: nowrap; } }

/* Contacto: código QR del perfil de Instagram (el que genera la propia aplicación), arriba a la derecha del bloque.
   Solo en pantallas de más de 736 px: en el móvil nadie escanea su propia pantalla, y el enlace @geneastudio ya está en el texto. */
body.gs-contacto #content section { position: relative; }
.gs-qr { position: absolute; top: 0; right: 0; margin: 0; width: 160px; text-align: center; }
.gs-qr img { display: block; width: 160px; height: auto; border-radius: 10px; }
.gs-qr figcaption { font-size: .72em; line-height: 1.3em; margin-top: .5em; color: #dde1e2; }
@media screen and (min-width: 737px) { body.gs-contacto #content section > p:first-of-type { max-width: calc(100% - 190px); }
    body.gs-contacto .gs-form { margin-top: 1.6em; } }
@media screen and (max-width: 736px) { .gs-qr { display: none; } }
/* El QR mide 160 px porque con menos tamaño los lectores de código no lo reconocen desde una pantalla de ordenador (comprobado con 120 y 140 px). */

/* Formulario de Contacto: casilla de consentimiento y primera capa informativa de privacidad */
.gs-form label.gs-consent { display: flex; align-items: flex-start; gap: .6em; font-weight: normal; font-size: .85em; margin: 1em 0 .4em 0; }
.gs-form label.gs-consent input { flex: none; margin-top: .25em; }
.gs-form .gs-consent a { text-decoration: underline; }
body.gs-contacto #content p.gs-info-form { font-size: .75em; line-height: 1.4em; margin: 0 0 .4em 0; color: #c3ced3; }

/* Datos identificativos en imagen (Legal): el alto y la línea base coinciden con los de la letra, para que se lea como texto corrido */
img.gs-dato { height: 1.133em; width: auto; vertical-align: -.217em; display: inline; }

/* Campo trampa anti-spam del formulario: fuera de la vista de personas, visible para robots */
.gs-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }