/* ============================================================
   Sitio Enaex · tokens, base, layout y bloques del constructor.
   Este archivo también se inyecta al preview del backoffice
   (BlockPreview), por eso los estilos de bloques viven aquí.
   ============================================================ */

:root {
    --azul: #26407c;
    --azul-osc: #1b2c56;
    --naranja: #f5831f;
    --naranja-2: #d96c0a;
    --tinta: #232a33;
    --texto: #3c4654;
    --humo: #f3f5f8;
    --borde: #e3e8ef;
    --ancho: 1140px;
    --radio: 10px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", -apple-system, sans-serif; color: var(--texto); background: #fff; font-size: 16.5px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: "Archivo", sans-serif; color: var(--tinta); line-height: 1.12; letter-spacing: -0.015em; font-weight: 800; }
img { max-width: 100%; display: block; }
a { color: var(--naranja-2); }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 1.4rem; }

.etiqueta { font-family: "IBM Plex Mono", monospace; font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.franja { height: 4px; width: 52px; background: var(--naranja); border-radius: 2px; margin-top: .8rem; }

/* barra superior con fecha (como el sitio de referencia) */
.barra-fecha { background: var(--azul); color: #dbe3f2; }
.barra-fecha .wrap { display: flex; align-items: center; gap: .5rem; height: 38px; }

/* header blanco sticky */
.top { background: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--borde), 0 4px 18px rgba(28,44,86,.06); }
.top .wrap { display: flex; align-items: center; gap: 2rem; height: 72px; }
.marca { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.35rem; letter-spacing: .01em; color: var(--azul); text-decoration: none; display: flex; align-items: baseline; gap: .55rem; }
.marca b { color: var(--naranja); }
.marca small { font-family: "IBM Plex Mono", monospace; font-size: .64rem; font-weight: 500; letter-spacing: .12em; color: #8b96a6; text-transform: uppercase; }
nav.principal { margin-left: auto; display: flex; gap: .2rem; }
nav.principal a { color: var(--tinta); text-decoration: none; font-size: .95rem; font-weight: 600; padding: .5rem .9rem; border-radius: 8px; }
nav.principal a:hover { color: var(--azul); background: var(--humo); }
nav.principal a.activo { color: var(--azul); box-shadow: inset 0 -3px 0 var(--naranja); border-radius: 8px 8px 0 0; }

/* footer estilo referencia: claro, columnas, barra azul final */
footer.pie { background: var(--humo); margin-top: 5rem; border-top: 1px solid var(--borde); }
footer.pie .cols { max-width: var(--ancho); margin: 0 auto; padding: 3rem 1.4rem 2.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; }
footer.pie h4 { font-size: 1.05rem; }
footer.pie .franja { margin-top: .55rem; margin-bottom: 1rem; }
footer.pie a { color: var(--texto); text-decoration: none; display: block; padding: .34rem 0; border-bottom: 1px solid var(--borde); font-size: .95rem; }
footer.pie a:hover { color: var(--azul); }
footer.pie .marca { font-size: 1.5rem; }
.copy { background: var(--azul); color: #dbe3f2; text-align: center; font-size: .85rem; padding: .85rem 1rem; }

/* secciones de bloques */
.sec { padding: 3.4rem 0; }
.sec--compacto { padding: 1.2rem 0; }
.sec--gris { background: var(--humo); }
.sec--azul { background: var(--azul-osc); color: #dde4f0; }
.sec--azul h2, .sec--azul h3 { color: #fff; }
.b-full { width: 100vw; margin-left: calc(50% - 50vw); }

.boton { display: inline-block; background: var(--naranja); color: #fff !important; font-family: "Archivo", sans-serif; font-weight: 700; letter-spacing: .02em; text-decoration: none; padding: .8rem 1.7rem; border-radius: 6px; transition: background .15s ease, transform .15s ease; }
.boton:hover { background: var(--naranja-2); transform: translateY(-1px); }

/* Layout del Block Grid. Umbraco 17 ya no sirve umbraco-blockgridlayout.css
   (la ruta _content/... devuelve 404), así que las reglas viven aquí. */
.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(0, auto);
    column-gap: 1.5rem;
    row-gap: 1rem;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 1.4rem;
}
.umb-block-grid__layout-item {
    position: relative;
    grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}
.umb-block-grid__area-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 1.5rem;
    row-gap: 1rem;
}
.umb-block-grid__area {
    position: relative;
    grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

.rev { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rev.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rev { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}
@media (max-width: 720px) {
    body { font-size: 15.5px; }
    .top .wrap { gap: .7rem; height: 62px; }
    nav.principal a { padding: .4rem .5rem; font-size: .85rem; }
    .marca small { display: none; }
}

/* ============================================================
   Bloques del constructor de páginas
   ============================================================ */

/* Hero de pagina construida */
.b-hero { position: relative; background: var(--azul-osc); color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 420px; text-align: center; }
.b-hero img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.b-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,25,52,.75), rgba(15,25,52,.25)); }
.b-hero .inner { position: relative; z-index: 1; padding: 4rem 1.5rem; max-width: 780px; }
.b-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); }
.b-hero p { margin-top: 1rem; font-size: 1.18rem; color: #d4dcec; line-height: 1.55; }
.b-hero .franja { margin: 1.1rem auto 0; }

.b-texto { max-width: 780px; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; }
.b-texto p { margin-bottom: 1.1rem; }
.b-texto h2, .b-texto h3 { margin: 1.6rem 0 .7rem; }
.b-texto ul, .b-texto ol { margin: 0 0 1.1rem 1.4rem; }

.b-imagentexto { display: flex; gap: 2.6rem; align-items: center; flex-wrap: wrap; }
.b-imagentexto > div { flex: 1 1 320px; }
.b-imagentexto img { width: 100%; border-radius: var(--radio); box-shadow: 0 14px 34px rgba(28,44,86,.16); }
.b-imagentexto.derecha { flex-direction: row-reverse; }
.b-imagentexto h2 { margin-bottom: .8rem; }
.b-imagentexto .texto { line-height: 1.7; }

.b-galeria h2 { margin-bottom: .4rem; }
.b-galeria .fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.b-galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radio); transition: transform .25s ease; }
.b-galeria img:hover { transform: scale(1.02); }

.b-cta { position: relative; background: var(--azul); color: #fff; overflow: hidden; text-align: left; border-radius: var(--radio); padding: 3rem; }
.b-cta img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.b-cta .inner { position: relative; z-index: 1; max-width: 560px; }
.b-cta h2 { color: #fff; font-size: 1.9rem; }
.b-cta p { margin: .7rem 0 1.4rem; color: #d4dcec; font-size: 1.05rem; }
.b-cta.banda { border-radius: 0; padding: 4rem 1.5rem; }
.b-cta.banda .inner { max-width: var(--ancho); margin: 0 auto; }

.b-video h2 { margin-bottom: 1rem; }
.b-video .marco { position: relative; padding-top: 56.25%; border-radius: var(--radio); overflow: hidden; background: #000; box-shadow: 0 14px 34px rgba(28,44,86,.18); }
.b-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.b-tarjeta { background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--naranja); border-radius: var(--radio); padding: 1.6rem; height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.b-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(28,44,86,.12); }
.b-tarjeta h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.b-tarjeta p { font-size: .95rem; line-height: 1.6; }
.sec--azul .b-tarjeta { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.sec--azul .b-tarjeta h3 { color: #fff; }

.b-cifra { text-align: center; padding: 1rem .5rem; }
.b-cifra .numero { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--azul); line-height: 1; }
.b-cifra .numero small { color: var(--naranja); font-size: .6em; }
.b-cifra .etiqueta { color: var(--texto); margin-top: .5rem; display: block; }
.sec--azul .b-cifra .numero { color: #fff; }
.sec--azul .b-cifra .etiqueta { color: #b9c6e2; }

.b-cita { max-width: 720px; margin: 0 auto; text-align: center; padding: 1rem 0; }
.b-cita p.frase { font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.7rem); color: var(--tinta); line-height: 1.35; }
.b-cita p.frase::before { content: "\201C"; color: var(--naranja); }
.b-cita p.frase::after { content: "\201D"; color: var(--naranja); }
.b-cita .autor { margin-top: 1rem; }
.sec--azul .b-cita p.frase { color: #fff; }

.b-faq { max-width: 780px; margin: 0 auto; }
.b-faq details { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; margin-bottom: .7rem; overflow: hidden; }
.b-faq summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--tinta); padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.b-faq summary::after { content: "+"; font-family: "Archivo", sans-serif; font-weight: 800; color: var(--naranja); font-size: 1.3rem; transition: transform .2s ease; }
.b-faq details[open] summary::after { transform: rotate(45deg); }
.b-faq .resp { padding: 0 1.2rem 1.1rem; line-height: 1.65; }

/* --- V3: equipo --- */
.b-persona { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.8rem 1.4rem; text-align: center; height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.b-persona:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(28,44,86,.12); }
.b-persona img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 3px solid var(--humo); box-shadow: 0 0 0 2px var(--naranja); }
.b-persona .sinfoto { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 1rem; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2rem; border: 3px solid var(--humo); box-shadow: 0 0 0 2px var(--naranja); }
.b-persona h3 { font-size: 1.1rem; }
.b-persona .cargo { color: var(--naranja-2); margin-top: .3rem; display: block; }
.b-persona p.bio { font-size: .92rem; line-height: 1.55; margin-top: .7rem; }

/* --- V3: logos / aliados --- */
.b-logos { text-align: center; }
.b-logos h2 { font-size: 1.15rem; color: var(--texto); font-weight: 700; margin-bottom: 1.6rem; }
.b-logos .fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.6rem 3.4rem; }
.b-logos img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .55; transition: filter .2s ease, opacity .2s ease; }
.b-logos img:hover { filter: none; opacity: 1; }

/* --- V3: timeline / hito --- */
.b-hito { position: relative; max-width: 780px; margin: 0 auto; padding: 0 0 1.8rem 2.2rem; border-left: 2px solid var(--borde); }
.b-hito::before { content: ""; position: absolute; left: -8px; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--borde); }
.b-hito .fecha { color: var(--naranja-2); display: block; margin-bottom: .25rem; }
.b-hito h3 { font-size: 1.15rem; }
.b-hito p { margin-top: .4rem; line-height: 1.6; }
.sec--gris .b-hito::before { box-shadow: 0 0 0 4px var(--humo), 0 0 0 5px var(--borde); }

/* --- V3: beneficio / lista con icono --- */
.b-beneficio { display: flex; gap: 1rem; align-items: flex-start; height: 100%; }
.b-beneficio .icono { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: rgba(245,131,31,.12); color: var(--naranja-2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.b-beneficio .icono svg { width: 22px; height: 22px; }
.b-beneficio h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.b-beneficio p { font-size: .95rem; line-height: 1.6; }
.sec--azul .b-beneficio .icono { background: rgba(255,255,255,.1); color: var(--naranja); }
.sec--azul .b-beneficio h3 { color: #fff; }

/* --- V3: descarga --- */
.b-descarga { display: flex; gap: 1.1rem; align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem 1.4rem; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; height: 100%; }
.b-descarga:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28,44,86,.12); }
.b-descarga .doc { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; }
.b-descarga .doc svg { width: 24px; height: 24px; }
.b-descarga h3 { font-size: 1.02rem; }
.b-descarga p { font-size: .88rem; line-height: 1.5; margin-top: .15rem; }
.b-descarga .ext { font-family: "IBM Plex Mono", monospace; font-size: .7rem; color: var(--naranja-2); text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; display: block; }

/* --- V3: contenedores de columnas --- */
.b-columnas { height: 100%; }
.b-columnas .umb-block-grid__area-container { gap: 2rem; }