/* ==========================================================================
   Fmetal — hoja de estilo del tema
   Valores de diseno extraidos del CSS aplicado en www.fmetal.es.
   Escrita desde cero: no contiene codigo del origen.
   ========================================================================== */

:root {
    /* Paleta — mapeada en flat-theme.json para que el cliente la cambie */
    --fm-azul:        #015a8b;
    --fm-azul-osc:    #01486f;
    --fm-negro:       #212121;
    --fm-tinta:       rgba(0, 0, 0, .8);
    --fm-oscuro:      #191817;
    --fm-blanco:      #ffffff;
    --fm-linea:       #e6e9eb;
    --fm-gris:        #f2f2f2;

    /* Tipografia */
    --fm-font:        'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Retícula: el origen centra el contenido en 1280px */
    --fm-ancho:       1280px;
    --fm-gutter:      40px;
    --fm-banda:       130px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fm-font);
    font-size: 16px;
    line-height: 1.4;
    color: var(--fm-tinta);
    background: var(--fm-blanco);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--fm-negro);
    letter-spacing: -.01em;
}

h1 { font-size: clamp(28px, 4.2vw, 45px); }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-size: clamp(24px, 3.4vw, 44px); }
h4 { font-size: clamp(20px, 2.4vw, 28px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--fm-azul); }

img { max-width: 100%; height: auto; display: block; }

/* Foco visible: el origen no lo tenia (ver CORRECCIONES_SEO) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--fm-azul);
    outline-offset: 3px;
}

.fm-salta {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    background: var(--fm-azul);
    color: #fff;
    font-weight: 700;
}
.fm-salta:focus { left: 0; color: #fff; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* --------------------------------------------------------------- retícula
   El origen dibuja una retícula de 3 columnas con filetes verticales de 1px
   que atraviesan toda la seccion. Se reproduce con borde en cada celda. */
.fm-wrap {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    padding: 0 var(--fm-gutter);
}

.fm-rej {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid var(--fm-linea);
}

.fm-celda {
    padding: 56px 40px;
    border-right: 1px solid var(--fm-linea);
    border-bottom: 1px solid var(--fm-linea);
    min-height: 180px;
}

.fm-celda--vacia { min-height: 0; }

/* El texto de cuerpo del origen va justificado */
.fm-just { text-align: justify; }

/* Antetitulo "/ Sectores" */
.fm-eyebrow {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: var(--fm-tinta);
    margin-bottom: 8px;
}
.fm-eyebrow::before { content: '/ '; }

/* ------------------------------------------------------------------ hero */
.fm-hero { position: relative; }

.fm-hero__media {
    position: relative;
    min-height: clamp(360px, 52vw, 640px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Si la imagen aun no esta en la biblioteca, el tema no emite el atributo
   style. Sin esta regla el bloque reservaria cientos de pixeles en blanco
   y la pagina pareceria rota. */
.fm-hero__media:not([style]),
.fm-sectores__foto:not([style]),
.fm-banda-cta__img:not([style]) {
    min-height: 0;
    aspect-ratio: auto;
    display: none;
}

.fm-hero__panel {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    padding: 64px var(--fm-gutter) 0;
    background: var(--fm-blanco);
}

/* El origen no limita el ancho del titular: ocupa el contenedor entero y
   cae en dos lineas. Con un max-width se partia en cuatro. */
.fm-hero__panel h1 { max-width: none; line-height: 1.1; }

.fm-hero__lead {
    font-size: 14px;
    margin-bottom: 18px;
    color: var(--fm-tinta);
}
.fm-hero__lead::before { content: '/ '; }

/* Boton sobre el borde inferior del panel, como en el origen */
.fm-hero__cta { display: flex; justify-content: flex-end; }

/* ----------------------------------------------------------------- boton */
.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 260px;
    padding: 22px 30px;
    background: var(--fm-oscuro);
    color: var(--fm-blanco);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .25s ease;
}
.fm-btn:hover { background: var(--fm-azul); color: var(--fm-blanco); }
.fm-btn::after { content: '→'; font-size: 16px; }

.fm-btn--link {
    min-width: 0;
    gap: 12px;
    padding: 0 0 6px;
    background: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
}
.fm-btn--link:hover { background: none; color: var(--fm-azul); }

.fm-btn--claro { background: var(--fm-blanco); color: var(--fm-negro); }
.fm-btn--claro:hover { background: var(--fm-azul); color: var(--fm-blanco); }

/* ------------------------------------------------------------- cabecera */
.fm-cab {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--fm-blanco);
    border-bottom: 1px solid var(--fm-linea);
}

.fm-cab__in {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 0 30px;
    min-height: 88px;
}

/* Medido en el origen: el logo son 250x83 y la cabecera 88px de alto */
.fm-logo img { max-height: 83px; width: auto; }

.fm-nav ul {
    display: flex;
    gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-nav a {
    display: block;
    padding: 26px 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--fm-negro);
    border-top: 3px solid transparent;
}
.fm-nav a:hover { color: var(--fm-azul); }

.fm-nav .current-menu-item > a,
.fm-nav .current_page_item > a,
.fm-nav .fm-activo > a {
    color: var(--fm-azul);
    border-top-color: var(--fm-azul);
}

/* El origen marca el padre cuando estas en la ficha hija */
.fm-nav .current-page-ancestor > a { color: var(--fm-azul); }

/* Submenus: el origen tiene un solo nivel visible. Los hijos se despliegan
   al pasar por encima o al tabular, no se pintan sueltos bajo el menu. */
.fm-nav li { position: relative; }

.fm-nav ul ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 280px;
    padding: 6px 0;
    margin: 0;
    background: var(--fm-blanco);
    border: 1px solid var(--fm-linea);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease;
}

.fm-nav li:hover > ul,
.fm-nav li:focus-within > ul { opacity: 1; visibility: visible; }

.fm-nav ul ul a {
    padding: 12px 18px;
    border-top: 0;
    font-size: 12px;
    letter-spacing: .05em;
    white-space: normal;
}

.fm-cab__fin {
    display: flex;
    align-items: stretch;
    align-self: stretch; /* sin esto el boton no tiene altura que ocupar */
    gap: 0;
}

/* Conmutador de idioma: sustituye a las banderas de GTranslate.
   Se usan codigos ES/EN y no banderas, porque una bandera es un pais,
   no un idioma. */
.fm-idiomas {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 22px;
}

.fm-idiomas__op {
    display: block;
    padding: 4px;
    line-height: 0;
    border: 1px solid transparent;
}
.fm-bandera {
    display: block;
    width: 24px;
    height: 12px;
    opacity: .55;
    transition: opacity .18s ease;
}
.fm-idiomas__op:hover .fm-bandera { opacity: 1; }
.fm-idiomas__op--on .fm-bandera { opacity: 1; }

.fm-burger {
    display: none;
    width: 60px;
    border: 0;
    background: none;
    color: var(--fm-negro);
    cursor: pointer;
    font-size: 20px;
    align-items: center;
    justify-content: center;
}

/* Lupa: despliega una barra de busqueda bajo la cabecera, como el origen */
.fm-lupa {
    width: 52px;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fm-lupa__i {
    display: block;
    width: 13px;
    height: 13px;
    border: 1.6px solid var(--fm-negro);
    border-radius: 50%;
    position: relative;
}
.fm-lupa__i::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 7px;
    height: 1.6px;
    background: var(--fm-negro);
    transform: rotate(45deg);
}
.fm-lupa:hover .fm-lupa__i { border-color: var(--fm-azul); }
.fm-lupa:hover .fm-lupa__i::after { background: var(--fm-azul); }

.fm-buscador {
    border-top: 1px solid var(--fm-linea);
    padding: 22px 0;
    background: var(--fm-blanco);
}
.fm-buscador[hidden] { display: none; }
.fm-buscador input[type="search"],
.fm-buscador input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--fm-linea);
    font: inherit;
    font-size: 16px;
}
.fm-buscador label { display: block; }
.fm-buscador input[type="submit"],
.fm-buscador button[type="submit"] {
    margin-top: 10px;
    padding: 12px 24px;
    border: 0;
    background: var(--fm-oscuro);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
}

/* Boton azul de cuadricula, pegado al borde derecho como en el origen */
/* Cuadrado azul, a toda la altura de la cabecera */
.fm-rejilla {
    width: 88px;
    align-self: stretch;
    border: 0;
    background: var(--fm-azul);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.fm-rejilla:hover { background: var(--fm-azul-osc); }
.fm-rejilla__i {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 3px;
}
.fm-rejilla__i i {
    display: block;
    width: 4px;
    height: 4px;
    background: #fff;
}

/* Panel lateral */
.fm-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .45);
}
.fm-panel[hidden] { display: none; }

/* El panel del origen es blanco, con el isotipo y los datos de contacto */
.fm-panel__caja {
    position: absolute;
    top: 0;
    right: 0;
    width: min(585px, 94vw);
    height: 100%;
    overflow-y: auto;
    padding: 96px 76px 56px;
    background: var(--fm-blanco);
    color: var(--fm-negro);
}

.fm-panel__x {
    position: absolute;
    top: 40px;
    right: 56px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--fm-negro);
    background: none;
    color: var(--fm-negro);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.fm-panel__x:hover { border-color: var(--fm-azul); color: var(--fm-azul); }

.fm-panel__marca { margin: 24px 0 56px; }
.fm-panel__marca img { width: 230px; max-width: 60%; height: auto; }

.fm-panel__nombre {
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.1;
    margin-bottom: 34px;
}

.fm-panel__datos {
    font-size: 16px;
    line-height: 1.8;
    color: var(--fm-tinta);
}
.fm-panel__datos p { margin-bottom: 18px; }
.fm-panel__datos a:hover { color: var(--fm-azul); }

/* --------------------------------------------------------- bloque intro */
.fm-intro .fm-celda h2 { font-size: clamp(34px, 5vw, 50px); }

.fm-kicker {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fm-negro);
    line-height: 1.3;
}

/* ------------------------------------------------------------- sectores */
.fm-sectores__foto {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center;
}

.fm-sectores__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fm-sectores__lista li { margin-bottom: 14px; }
.fm-sectores__lista a {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fm-negro);
}
.fm-sectores__lista a:hover { color: var(--fm-azul); }

/* Banda de imagen con CTA superpuesto */
.fm-banda-cta {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
    min-height: 120px;
}
.fm-banda-cta__img {
    background-size: cover;
    background-position: center;
    min-height: 120px;
}
.fm-banda-cta .fm-btn { min-width: 0; height: 100%; }

/* ------------------------------------------------------- banda producto */
.fm-oscuro {
    background: var(--fm-oscuro);
    color: var(--fm-blanco);
    padding: var(--fm-banda) 0;
}
.fm-oscuro h2, .fm-oscuro h3, .fm-oscuro h4 { color: var(--fm-blanco); }
.fm-oscuro .fm-eyebrow { color: rgba(255, 255, 255, .7); }

.fm-oscuro__rej {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    padding: 0 var(--fm-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Acordeon propio: sustituye al widget del constructor del origen */
.fm-acc { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .25); }

.fm-acc__it { border-bottom: 1px solid rgba(255, 255, 255, .25); }

.fm-acc__bt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.fm-acc__bt::after { content: '+'; font-size: 22px; font-weight: 400; }
.fm-acc__bt[aria-expanded="true"]::after { content: '−'; }

.fm-acc__pan {
    padding: 0 0 24px;
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}
.fm-acc__pan[hidden] { display: none; }
.fm-acc__pan ul { margin: 0; padding-left: 20px; }
.fm-acc__pan li { margin-bottom: 10px; }

/* --------------------------------------------------------- fichas modelo */
.fm-modelo__nom {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fm-negro);
    margin-bottom: 14px;
}
.fm-modelo__esp { font-size: 15px; line-height: 1.7; }

/* -------------------------------------------------------- paginas interiores
   El rotulo de las paginas interiores es mayor que el de la portada: medido
   24/28.8 en /fmetal/ y en /productos/, frente a 18/21.6 de la portada. */
.fm-cuerpo .fm-kicker { font-size: 24px; line-height: 1.2; }

/* --------------------------------------------------------- ficha de producto
   Medido en el origen: la ficha vive en la primera columna de la reticula,
   con el contenido en una caja de 250px centrada en la celda, 30px sobre la
   foto y un blanco de 77px bajo el texto. La flecha azul se solapa sobre la
   esquina inferior izquierda de la foto. */
.fm-rej .fm-celda--ficha { padding: 0; }

.fm-ficha {
    width: 250px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 0 77px;
}

.fm-ficha__foto {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.fm-ficha__flecha {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 93px;
    height: 59px;
    padding-right: 23px;
    background: var(--fm-blanco);
    color: var(--fm-azul);
    font-size: 15px;
    line-height: 1;
}
.fm-ficha__flecha::after { content: '→'; }

.fm-ficha__tit {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--fm-azul);
    margin-bottom: 15px;
}
.fm-ficha__tit a:hover { color: var(--fm-azul-osc); }

.fm-ficha__txt { font-size: 16px; line-height: 1.4; }

/* ------------------------------------------------------------ contenido */
.fm-cuerpo { padding: 72px 0 96px; }

.fm-prosa { max-width: 78ch; }
.fm-prosa h2 { margin: 1.8em 0 .6em; font-size: 24px; }
.fm-prosa h3 { margin: 1.6em 0 .5em; font-size: 20px; }
.fm-prosa h4 { margin: 1.5em 0 .5em; font-size: 17px; }
.fm-prosa h2:first-child,
.fm-prosa h3:first-child,
.fm-prosa h4:first-child { margin-top: 0; }
.fm-prosa ul, .fm-prosa ol { padding-left: 22px; }
.fm-prosa li { margin-bottom: 8px; }
.fm-prosa a { color: var(--fm-azul); text-decoration: underline; }
.fm-prosa table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.fm-prosa th, .fm-prosa td {
    padding: 12px 14px;
    border: 1px solid var(--fm-linea);
    text-align: left;
    font-size: 15px;
}
.fm-prosa th { background: var(--fm-gris); font-weight: 700; }

.fm-pag-tit { padding: 64px 0 0; }

/* ---------------------------------------------- banner de pagina interior
   Mismo patron que el hero de la portada: panel con antetitulo y titular,
   foto a sangre debajo y un boton blanco superpuesto a la derecha. */
.fm-banner__panel {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    padding: 56px var(--fm-gutter) 44px;
    background: var(--fm-blanco);
}

.fm-banner__panel h1 { max-width: 16ch; }

.fm-banner__intro {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    max-width: 900px;
}

.fm-banner__media {
    position: relative;
    min-height: clamp(240px, 26vw, 330px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fm-banner__media:not([style]) { min-height: 0; display: none; }

/* Boton blanco pegado al borde superior de la foto, alineado a la derecha */
.fm-banner__cta {
    position: absolute;
    top: 0;
    right: max(calc((100% - var(--fm-ancho)) / 2), 0px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-width: 320px;
    padding: 20px 28px;
    background: var(--fm-blanco);
    color: var(--fm-negro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fm-banner__cta::after { content: '\2198'; font-size: 15px; }
.fm-banner__cta:hover { background: var(--fm-azul); color: var(--fm-blanco); }

@media (max-width: 680px) {
    .fm-banner__intro { grid-template-columns: 1fr; gap: 0; }
    .fm-banner__cta { position: static; min-width: 0; width: 100%; }
}

/* ------------------------------------------------- pestanas verticales
   Medido en la ficha GBM del origen: el rotulo ocupa una columna de 397px
   a la izquierda y el panel se abre a su derecha. La pestana activa va en
   azul y con filete por tres lados, abierta hacia el panel. */
.fm-tabs {
    display: grid;
    grid-template-columns: 397px minmax(0, 1fr);
    align-items: start;
}

.fm-tabs__nav {
    display: block;
    margin: 0 -1px 0 0;
    padding: 0;
    list-style: none;
}

.fm-tabs__nav button {
    display: block;
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: 1px solid transparent;
    font: inherit;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
    color: var(--fm-negro);
    cursor: pointer;
}
.fm-tabs__nav button[aria-selected="true"] {
    color: var(--fm-azul);
    border-color: var(--fm-linea);
    border-right-color: transparent;
    background: var(--fm-blanco);
}

.fm-tabs__pan { padding: 20px; color: var(--fm-negro); }
.fm-tabs__pan[hidden] { display: none; }
.fm-tabs__pan ul { padding-left: 20px; }
.fm-tabs__pan li { margin-bottom: 10px; }

/* ---------------------------------------------------- ficha GBM-SHUTTLE
   El origen usa aqui un gris mas claro que el --fm-gris del resto, asi que
   lleva su propio token en vez de forzar el existente. */
:root { --fm-gris-claro: #f7f7f7; }

/* Fila de entrada: dos parrafos y la foto sobre el gris. Medido: texto a
   +100 del borde de la fila, foto de 366x255 a +30. */
.fm-rej--gris .fm-celda {
    background: var(--fm-gris-claro);
    padding: 100px 30px 56px;
}
.fm-rej--gris .fm-celda--foto { padding: 30px; }

/* El origen parte esta fila en 1/3 + 2/3: no hay filete a los dos tercios.
   La fila mide 334px y el titular va centrado en ella (medido: cae a +130). */
.fm-rej--33-66 { grid-template-columns: 1fr 2fr; }
.fm-rej--33-66 .fm-celda {
    min-height: 334px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Titular de caracteristicas: 38/41.8 medido */
.fm-gbm__h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }

/* Banda inferior: foto a la izquierda, panel gris a la derecha y el boton
   pegado a la esquina inferior derecha del panel (426x68 medidos). */
.fm-gbm__banda {
    max-width: var(--fm-ancho);
    margin: 72px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(520px, 42vw, 812px);
}

.fm-gbm__foto {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fm-gbm__foto:not([style]) { display: none; }

.fm-gbm__panel {
    display: flex;
    flex-direction: column;
    padding: 121px 0 0;
    background: var(--fm-gris-claro);
}
.fm-gbm__panel > *:not(.fm-btn) { margin-left: 102px; margin-right: 102px; }
.fm-gbm__panel h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.2; }
.fm-gbm__panel h2 + p { margin-top: 40px; }

.fm-gbm__lista {
    margin: 21px 102px 0;
    padding: 0;
    list-style: none;
}
.fm-gbm__lista li {
    margin-bottom: 14px;
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 1.4;
    text-transform: uppercase;
}
.fm-gbm__lista li:last-child { margin-bottom: 0; padding-bottom: 0; }

.fm-gbm__panel .fm-btn {
    width: 426px;
    max-width: 100%;
    margin-top: auto;
    align-self: flex-end;
}

@media (max-width: 1024px) {
    .fm-tabs { grid-template-columns: 1fr; }
    .fm-tabs__nav { margin: 0; }
    .fm-gbm__banda { grid-template-columns: 1fr; min-height: 0; }
    .fm-gbm__foto { min-height: clamp(220px, 40vw, 380px); }
    .fm-gbm__panel { padding-top: 56px; padding-bottom: 0; }
    .fm-gbm__panel > *:not(.fm-btn),
    .fm-gbm__lista { margin-left: 28px; margin-right: 28px; }
    .fm-rej--33-66 { grid-template-columns: 1fr; }
    .fm-rej--33-66 .fm-celda { min-height: 0; }
    .fm-rej--gris .fm-celda { padding: 56px 28px; }
}

/* ------------------------------------------------------------- contacto
   Medido en el origen: el formulario ocupa dos tercios y la foto el tercio
   restante, 365x550, con 30px de margen dentro de su columna y a la misma
   altura que el formulario. */
.fm-cont__banda {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
}

.fm-cont__banda .fm-form { padding: 0 var(--fm-gutter); }

.fm-cont__foto {
    margin: 0 30px;
    min-height: clamp(320px, 29vw, 550px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fm-cont__foto:not([style]) { display: none; }

@media (max-width: 1024px) {
    .fm-cont__banda { grid-template-columns: 1fr; }
    .fm-cont__foto {
        margin: 36px var(--fm-gutter) 0;
        min-height: clamp(220px, 40vw, 380px);
    }
}

/* ------------------------------------------------------------ formulario */
.fm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fm-form p { margin: 0; }
.fm-form__ancho { grid-column: 1 / -1; }

.fm-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fm-negro);
}

.fm-form input,
.fm-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--fm-linea);
    background: var(--fm-blanco);
    font: inherit;
    font-size: 15px;
    color: var(--fm-tinta);
}
.fm-form textarea { min-height: 150px; resize: vertical; }
.fm-form input:focus, .fm-form textarea:focus { border-color: var(--fm-azul); }

.fm-aviso {
    padding: 14px 16px;
    margin-bottom: 20px;
    border-left: 3px solid var(--fm-azul);
    background: var(--fm-gris);
    font-size: 15px;
}
.fm-aviso--error { border-left-color: #b3261e; }

/* ------------------------------------------------------------------- pie */
.fm-pie {
    background: #000;
    color: var(--fm-blanco);
    padding: 96px 0 0;
}
.fm-pie h2 { color: var(--fm-blanco); max-width: 22ch; }

.fm-pie__sup {
    max-width: var(--fm-ancho);
    margin: 0 auto 56px;
    padding: 0 var(--fm-gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.fm-pie__sellos { display: grid; gap: 18px; justify-items: start; }
.fm-pie__sellos img { max-height: 62px; width: auto; }

.fm-pie__datos {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255, 255, 255, .25);
}
.fm-pie__datos > * {
    padding: 42px 30px;
    border-right: 1px solid rgba(255, 255, 255, .25);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fm-blanco);
}
.fm-pie__datos > *:last-child { border-right: 0; }
.fm-pie__datos a:hover { color: var(--fm-azul); }

.fm-pie__bajo {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    padding: 34px var(--fm-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}
.fm-pie__bajo ul {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.fm-pie__bajo a:hover { color: var(--fm-azul); }

/* ------------------------------------------------------------------- 404 */
.fm-404 { padding: 120px 0; text-align: center; }
.fm-404 h1 { margin-bottom: 18px; }
.fm-404 p { max-width: 60ch; margin: 0 auto 28px; }
.fm-404__enl {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    list-style: none;
    padding: 0;
}

/* --------------------------------------------------------------- animar
   El contenido NUNCA se oculta por defecto. Solo se anima cuando el propio
   script ha marcado el documento con .fm-js, de modo que si el JavaScript
   falla, no carga o el observer no dispara, el texto se ve igualmente. */
/* El origen usa fadeIn y fadeInDown con retardos de 300-400ms.
   fadeIn es el de serie; fadeInDown entra desde arriba. */
.fm-js .fm-rev { opacity: 0; }
.fm-js .fm-rev--down { transform: translateY(-20px); }
.fm-js .fm-rev.fm-visto {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s ease;
}
.fm-js .fm-rev--d300.fm-visto { transition-delay: .3s; }
.fm-js .fm-rev--d400.fm-visto { transition-delay: .4s; }

/* Iconos de linea, equivalentes propios a los de la fuente del origen.
   Medido: 80px de alto y azul corporativo. */
.fm-icono {
    display: block;
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
    color: var(--fm-azul);
}

/* Tipografia de la fila de cifras, medida en el origen:
   cifra 70/77 en negrita, etiqueta 16 tambien en negrita. */
.fm-rej--escalon .fm-celda h2 {
    font-size: clamp(44px, 4.6vw, 70px);
    line-height: 1.1;
}
.fm-rej--escalon .fm-celda > p:not(.fm-eyebrow) {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* Titular de valores: 50/60 */
.fm-rej--valores .fm-celda h2 {
    font-size: clamp(34px, 3.4vw, 50px);
    line-height: 1.2;
}

/* Fichas de valores: titulo 18/21.6 en negrita, texto 14/19.6 normal */
.fm-cuerpo .fm-rej .fm-celda h3 { font-size: 18px; line-height: 1.2; }
.fm-cuerpo .fm-rej .fm-celda h3 + p { font-size: 14px; line-height: 1.4; }

/* Escalonado de columnas, medido en el origen: la fila son 478px y el
   contenido arranca en -152, +50 y +213 respecto al borde de la fila.
   La primera sube sobre la banda de foto; el fondo blanco la recorta. */
.fm-rej--escalon .fm-celda {
    min-height: 478px;
    padding: 0 40px 56px;
    align-self: start;
}
/* El margen sube 196 y el padding baja 44: el contenido sigue cayendo en
   los -152 medidos, pero la caja blanca respira por arriba. */
.fm-rej--escalon .fm-celda--a {
    margin-top: -196px;
    padding-top: 44px;
    background: var(--fm-blanco);
}
.fm-rej--escalon .fm-celda--b { padding-top: 50px; }
.fm-rej--escalon .fm-celda--c { padding-top: 213px; }

@media (max-width: 1024px) {
    .fm-rej--escalon .fm-celda {
        min-height: 0;
        margin-top: 0;
        padding: 36px 24px;
    }
    .fm-rej--escalon .fm-celda--b,
    .fm-rej--escalon .fm-celda--c { padding-top: 36px; }
}

/* Banda de imagen a sangre dentro del cuerpo de una pagina */
.fm-banda-foto {
    min-height: clamp(280px, 31vw, 587px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fm-banda-foto:not([style]) { min-height: 0; display: none; }

@media (prefers-reduced-motion: reduce) {
    .fm-js .fm-rev,
    .fm-js .fm-rev.fm-visto { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
    :root { --fm-banda: 80px; --fm-gutter: 28px; }

    .fm-rej { grid-template-columns: repeat(2, 1fr); }
    .fm-oscuro__rej { grid-template-columns: 1fr; gap: 40px; }
    .fm-pie__sup { grid-template-columns: 1fr; }
    .fm-pie__datos { grid-template-columns: 1fr; }
    .fm-pie__datos > * { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .25); }
    .fm-pie__datos > *:last-child { border-bottom: 0; }

    .fm-burger { display: flex; }

    .fm-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--fm-blanco);
        border-bottom: 1px solid var(--fm-linea);
        display: none;
    }
    .fm-nav.fm-abierto { display: block; }
    .fm-nav ul { flex-direction: column; gap: 0; padding: 8px 28px 20px; }
    .fm-nav a { padding: 14px 0; border-top: 0; }

    /* En movil el submenu va en linea, no flotando */
    .fm-nav ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding: 0 0 0 16px;
        border: 0;
        border-left: 1px solid var(--fm-linea);
    }
    .fm-nav ul ul a { padding: 10px 0; }
}

@media (max-width: 680px) {
    :root { --fm-gutter: 20px; }

    .fm-rej { grid-template-columns: 1fr; }
    .fm-celda { padding: 36px 24px; min-height: 0; }
    .fm-form { grid-template-columns: 1fr; }
    .fm-banda-cta { grid-template-columns: 1fr; }
    .fm-hero__cta { justify-content: stretch; }
    .fm-hero__cta .fm-btn { width: 100%; }
    .fm-just { text-align: left; }
    .fm-pie__bajo ul { margin-left: 0; gap: 16px; }
}