/* GTI: limpio y espacioso, con la identidad del grupo. Los acentos son los
   colores del logo (rojo y azul GTI), las etiquetas van en monoespaciada como
   en una hoja de especificaciones, y la esquina del logo firma las tarjetas.
   Claro u oscuro: según el sistema, o el que se elija con el botón de la barra. */
:root {
  --fondo: #ffffff;
  --fondo-2: #f4f4f2;
  --tarjeta: #ffffff;
  --texto: #18181b;
  --suave: #62626b;
  --tenue: #8a8a93;
  --linea: #dcdcd8;
  --rojo: #e5322e;
  --granate: #9e1922;
  --azul: #0355a1;
  --enlace: #0355a1;
  --logo: #0355a1;
  --barra: rgba(255,255,255,.78);
  --relato-apagado: #d4d4d0;
  --sombra: 0 10px 40px -12px rgba(0,0,0,.14);
  --negro: #0c0c0e;
  --negro-texto: #f4f4f2;
  --negro-suave: #9d9da6;
  --negro-linea: #2a2a2f;
  --radio: 26px;
  --ancho: 1080px;
  --ancho-grande: 1240px;
  --curva: cubic-bezier(.22, .61, .21, 1);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0b0b0d; --fondo-2: #131316; --tarjeta: #1a1a1e; --texto: #f2f2ef; --suave: #a3a3ab; --tenue: #74747c;
    --linea: #2a2a30; --rojo: #ff5a50; --granate: #d2434b; --azul: #5b9be6; --enlace: #7fb2f0; --logo: #f2f2ef; --barra: rgba(11,11,13,.75);
    --relato-apagado: #34343a; --sombra: 0 10px 40px -12px rgba(0,0,0,.6); --negro: #18181c; --negro-linea: #303036;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #0b0b0d; --fondo-2: #131316; --tarjeta: #1a1a1e; --texto: #f2f2ef; --suave: #a3a3ab; --tenue: #74747c;
  --linea: #2a2a30; --rojo: #ff5a50; --granate: #d2434b; --azul: #5b9be6; --enlace: #7fb2f0; --logo: #f2f2ef; --barra: rgba(11,11,13,.75);
  --relato-apagado: #34343a; --sombra: 0 10px 40px -12px rgba(0,0,0,.6); --negro: #18181c; --negro-linea: #303036;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.5; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background .4s var(--curva), color .4s var(--curva);
}
a { color: inherit; text-decoration: none; }
.envoltura { width: min(var(--ancho), 100% - 44px); margin-inline: auto; }
.envoltura.grande { width: min(var(--ancho-grande), 100% - 32px); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; font-weight: 500; }
.ceja { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); font-weight: 500; }
.ceja::before { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--rojo); border-right: 2px solid var(--rojo); }
.enlace { color: var(--enlace); font-size: 18px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.enlace::after { content: "→"; transition: transform .3s var(--curva); }
.enlace:hover::after { transform: translateX(4px); }

/* La esquina del logo como firma de las tarjetas */
.esquina { position: relative; }
.esquina::after { content: ""; position: absolute; top: 18px; right: 18px; width: 14px; height: 14px; border-top: 2.5px solid var(--rojo); border-right: 2.5px solid var(--rojo); opacity: .9; transition: transform .4s var(--curva); }
.esquina:hover::after { transform: translate(3px, -3px); }

/* ─── barra ─── */
.barra { position: sticky; top: 0; z-index: 50; background: var(--barra); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linea); }
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 56px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); }
.marca svg { height: 24px; width: auto; color: var(--logo); }
.marca span { font-size: 13px; color: var(--suave); }
.lado { display: flex; align-items: center; gap: 22px; }
.menu { display: flex; gap: 22px; font-size: 14px; color: var(--suave); }
.menu a { position: relative; padding: 4px 0; }
.menu a:hover, .menu a.activa { color: var(--texto); }
.menu a.activa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--rojo); border-radius: 2px; }
.tema { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--texto); display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .4s var(--curva); }
.tema:hover { background: var(--fondo-2); transform: rotate(-20deg); }
.tema svg { width: 16px; height: 16px; }
.tema .sol { display: none; }
:root[data-tema="oscuro"] .tema .sol { display: block; }
:root[data-tema="oscuro"] .tema .luna { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tema .sol { display: block; } :root:not([data-tema="claro"]) .tema .luna { display: none; } }
@media (max-width: 700px) { .marca span { display: none; } .menu { gap: 14px; font-size: 13px; } .lado { gap: 12px; } }

/* ─── portada ─── */
/* La portada ocupa la pantalla entera: al entrar solo se ve el titular. */
.portada { min-height: calc(100svh - 56px); display: flex; align-items: center; padding: 48px 0 64px; }
.portada > .envoltura { width: min(var(--ancho-grande), 100% - 32px); }
.escaparate-bloque { padding-bottom: 20px; }
.portada h1 { font-size: clamp(52px, 10vw, 132px); line-height: .95; letter-spacing: -.055em; font-weight: 700; margin: 26px 0 26px; }
/* Titular: cada línea sube desde detrás de una máscara al cargar. */
.titular-mascara .l { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.titular-mascara .l > span { display: inline-block; transform: translateY(108%); animation: subir 1.15s var(--curva) forwards; }
.titular-mascara .l:nth-child(2) > span { animation-delay: .12s; }
.titular-mascara .l:nth-child(3) > span { animation-delay: .24s; }
@keyframes subir { to { transform: none; } }
/* «Ahora mismo estamos con…», con el tema que va cambiando. */
.ahora { font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.03em; margin: 0 0 34px; color: var(--suave); line-height: 1.3; }
.rotor { display: inline-block; vertical-align: baseline; overflow: hidden; white-space: nowrap; color: var(--texto); padding-bottom: 6px; margin-bottom: calc(-6px - .24em); background: linear-gradient(var(--rojo), var(--rojo)) 0 100% / 100% 3px no-repeat; transition: width .55s var(--curva); max-width: 100%; }
.rotor-texto { display: inline-block; transition: transform .42s var(--curva), opacity .42s var(--curva); }
.rotor-texto.sale { transform: translateY(-110%); opacity: 0; }
.rotor-texto.entra { transform: translateY(110%); opacity: 0; transition: none; }
.rotor-medida { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; }
.portada h1 .punto { color: var(--rojo); }
.portada .fila-lema { display: grid; gap: 26px; align-items: end; }
@media (min-width: 860px) { .portada .fila-lema { grid-template-columns: 1fr auto; } }
.portada .lema { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--suave); margin: 0; max-width: 32ch; letter-spacing: -.02em; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 14px 30px; }

.escaparate { margin: 0 auto; width: min(var(--ancho-grande), 100% - 32px); border-radius: var(--radio); background: var(--negro); color: var(--negro-texto); overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.escaparate .dentro { padding: clamp(40px, 7vw, 84px) clamp(24px, 6vw, 72px); display: grid; gap: 44px; }
@media (min-width: 900px) { .escaparate .dentro { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.escaparate .ceja { color: var(--negro-suave); }
.escaparate h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.045em; margin: 16px 0 18px; font-weight: 700; }
.escaparate p { color: var(--negro-suave); font-size: clamp(17px, 1.6vw, 20px); margin: 0 0 24px; max-width: 36ch; }
.escaparate .enlace { color: #8fb8ff; }
.antenas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--negro-linea); }
.antenas div { padding: 22px 16px 0 0; }
.antenas div + div { border-left: 1px solid var(--negro-linea); padding-left: 18px; }
.antenas b { display: block; white-space: nowrap; font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.04em; font-weight: 700; line-height: 1; }
.antenas small { color: var(--negro-suave); display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }

/* ─── secciones ─── */
section.bloque { padding: clamp(80px, 11vw, 140px) 0; }
section.gris { background: var(--fondo-2); }
section.oscuro { background: var(--negro); color: var(--negro-texto); --suave: var(--negro-suave); --linea: var(--negro-linea); }
.cabeza { margin-bottom: clamp(40px, 6vw, 64px); display: grid; gap: 18px; }
@media (min-width: 900px) { .cabeza.lado-a-lado { grid-template-columns: 1fr 1fr; align-items: end; } }
.cabeza h2 { font-size: clamp(40px, 6.2vw, 78px); line-height: 1.02; letter-spacing: -.05em; font-weight: 700; margin: 0; max-width: 15ch; }
.cabeza p { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.45; color: var(--suave); margin: 0; max-width: 42ch; }

/* ─── cifras ─── */
.baldosas { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.baldosa { background: var(--tarjeta); border-radius: var(--radio); padding: 28px 28px 26px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.baldosa:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.baldosa.ancha { grid-column: span 2; }
@media (min-width: 860px) { .baldosas { grid-template-columns: repeat(6, 1fr); } .baldosa { grid-column: span 2; } .baldosa.ancha { grid-column: span 3; } }
.baldosa .etq { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.baldosa strong { font-size: clamp(52px, 6.6vw, 92px); letter-spacing: -.06em; line-height: .95; font-weight: 700; }
.baldosa strong small { font-size: .42em; letter-spacing: -.02em; margin-left: .12em; color: var(--suave); }
.baldosa.negra { background: var(--negro); color: var(--negro-texto); }
.baldosa.negra .etq, .baldosa.negra strong small { color: var(--negro-suave); }
.baldosa.roja strong { color: var(--rojo); }

/* ─── relato que se enciende ─── */
.relato { padding: clamp(100px, 14vw, 180px) 0; }
.relato p { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; margin: 0; max-width: 21ch; }
.relato p span { color: var(--relato-apagado); transition: color .4s var(--curva); }
.relato p span.on { color: var(--texto); }
.relato p span.on.clave { color: var(--rojo); }

/* ─── áreas ─── */
.area-fila { display: grid; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (min-width: 900px) { .area-fila { grid-template-columns: 1fr 1fr; } }
.area-fila p { font-size: clamp(18px, 1.7vw, 21px); color: var(--suave); margin: 0; max-width: 40ch; }
.temas { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); counter-reset: tema; }
.temas li { counter-increment: tema; display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--linea); font-size: 19px; font-weight: 600; letter-spacing: -.02em; transition: padding .3s var(--curva); }
.temas li:hover { padding-left: 8px; }
.temas li::before { content: counter(tema, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--rojo); font-weight: 500; }
.temas li span { font-family: var(--mono); color: var(--tenue); font-weight: 400; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.lineas-portal { margin-top: 48px; font-size: 14px; color: var(--suave); }
.lineas-portal b { color: var(--texto); font-weight: 600; }

/* ─── carrusel ─── */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 400px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(22px, (100vw - var(--ancho)) / 2); padding: 6px max(22px, (100vw - var(--ancho)) / 2) 30px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.tarjeta { scroll-snap-align: start; background: var(--tarjeta); border-radius: var(--radio); padding: 30px 28px; min-height: 480px; display: flex; flex-direction: column; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.tarjeta.negra { background: var(--negro); color: var(--negro-texto); }
.tarjeta .etq { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); padding-right: 30px; }
.tarjeta.negra .etq, .tarjeta.negra p, .tarjeta.negra .grande small { color: var(--negro-suave); }
.tarjeta h3 { font-size: 27px; line-height: 1.12; letter-spacing: -.035em; font-weight: 700; margin: 14px 0 12px; }
.tarjeta p { color: var(--suave); margin: 0; font-size: 16px; }
.tarjeta .grande { margin-top: auto; font-size: clamp(54px, 6vw, 70px); font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.tarjeta .grande small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; color: var(--suave); margin-top: 10px; }
.flechas { display: flex; justify-content: flex-end; gap: 10px; }
.flechas button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: var(--tarjeta); color: var(--texto); font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.flechas button:hover { border-color: var(--texto); }
.flechas button:disabled { opacity: .35; cursor: default; border-color: var(--linea); }

/* ─── financiación ─── */
.grafico { background: var(--fondo-2); border-radius: var(--radio); padding: clamp(24px, 4vw, 48px); }
.barras { display: flex; align-items: flex-end; gap: clamp(4px, .9vw, 12px); height: 300px; }
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.col .b { width: 100%; border-radius: 4px 4px 0 0; background: var(--texto); opacity: .16; transform-origin: bottom; transform: scaleY(0); transition: transform 1.2s var(--curva), opacity .2s; transition-delay: calc(var(--i, 0) * 50ms), 0s; min-height: 3px; }
.col.pico .b { background: var(--rojo); opacity: 1; }
.visible .col .b { transform: scaleY(1); }
.col:hover .b { opacity: .45; }
.col.pico:hover .b { opacity: .85; }
.col .t { font-family: var(--mono); font-size: 10.5px; color: var(--tenue); white-space: nowrap; margin-bottom: 8px; }
.col.pico .t { color: var(--rojo); font-weight: 600; }
.col .a { font-family: var(--mono); font-size: 10.5px; color: var(--tenue); margin-top: 10px; }
@media (max-width: 859px) { .col .t { display: none; } .col.pico .t { display: block; } .barras { height: 240px; } .col .a { font-size: 9px; } }
.pie-grafico { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; font-size: 13px; color: var(--tenue); }
.lista { margin-top: 44px; border-top: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: 60px 1fr auto; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--linea); align-items: baseline; font-size: 16.5px; }
.fila .y { font-family: var(--mono); color: var(--tenue); font-size: 12.5px; }
.fila .imp { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ver-mas { display: inline-flex; gap: 6px; margin-top: 30px; color: var(--enlace); font-size: 18px; font-weight: 500; }
.ver-mas::after { content: "→"; transition: transform .3s var(--curva); }
.ver-mas:hover::after { transform: translateX(4px); }

/* ─── noticias ─── */
.noticias { display: grid; gap: 16px; }
@media (min-width: 740px) { .noticias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .noticias { grid-template-columns: repeat(3, 1fr); } .noticia.grande { grid-column: span 2; } }
.noticia { display: flex; flex-direction: column; background: var(--tarjeta); border-radius: 20px; padding: 28px; min-height: 260px; transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.noticia:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.noticia .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--rojo); padding-right: 30px; }
.noticia h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.03em; font-weight: 700; margin: 12px 0 12px; }
.noticia.grande h3 { font-size: clamp(26px, 2.8vw, 36px); }
.noticia p { color: var(--suave); font-size: 15px; margin: 0 0 20px; }
.noticia .pie { margin-top: auto; font-size: 13px; color: var(--tenue); display: flex; justify-content: space-between; gap: 12px; }

/* ─── publicaciones ─── */
.pubs { border-top: 1px solid var(--linea); }
.pub { display: grid; gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--linea); transition: padding .3s var(--curva); }
@media (min-width: 860px) { .pub { grid-template-columns: 70px 1fr; } }
.pub .y { font-family: var(--mono); color: var(--tenue); font-size: 12.5px; padding-top: 4px; }
.pub h4 { margin: 0 0 4px; font-size: 18.5px; line-height: 1.32; font-weight: 600; letter-spacing: -.02em; }
.pub small { color: var(--suave); font-size: 14px; }

/* ─── equipo ─── */
.nivel { margin-top: 44px; }
.nivel h3, .nivel-pagina h2 { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); margin: 0 0 16px; display: flex; gap: 10px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.nivel h3 span, .nivel-pagina h2 span { color: var(--rojo); }
.equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 24px; }
.persona { display: flex; gap: 14px; align-items: center; padding: 10px 0; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; font-size: 15px; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--linea); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar:has(img) { overflow: hidden; padding: 0; border: 0; }
.persona.resp .avatar, .ficha.resp .avatar, .hoja .quien.resp .avatar { background: var(--rojo); color: #fff; border-color: transparent; }
.persona b { display: block; font-weight: 600; font-size: 16px; line-height: 1.25; transition: color .2s; }
.persona small { color: var(--suave); font-size: 13px; }
.persona:hover b { color: var(--enlace); }
.r { color: var(--rojo); }

/* ─── cierre y pie ─── */
.cierre h2 { font-size: clamp(48px, 8vw, 104px); letter-spacing: -.055em; line-height: .98; font-weight: 700; margin: 0 0 24px; max-width: 12ch; }
.cierre h2 .punto { color: var(--rojo); }
.cierre p { font-size: clamp(19px, 2vw, 23px); color: var(--suave); margin: 0 0 34px; max-width: 34ch; }
.boton { display: inline-flex; align-items: center; gap: 10px; background: var(--texto); color: var(--fondo); border-radius: 999px; padding: 15px 26px; font-size: 17px; font-weight: 600; transition: transform .3s var(--curva), background .2s; }
.boton:hover { transform: translateY(-2px); background: var(--rojo); color: #fff; }
footer { background: var(--fondo-2); padding: 26px 0 44px; color: var(--suave); font-size: 13px; border-top: 1px solid var(--linea); }
footer .envoltura { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
footer a { color: var(--texto); }
footer a:hover { color: var(--enlace); }

/* ─── páginas interiores ─── */
.cabecera-pagina { padding: clamp(56px, 9vw, 100px) 0 40px; }
.cabecera-pagina h1 { font-size: clamp(48px, 8vw, 104px); letter-spacing: -.055em; line-height: .98; font-weight: 700; margin: 18px 0 20px; }
.cabecera-pagina p { color: var(--suave); max-width: 44ch; margin: 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.45; }
.resumen-pagina { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: 15px; color: var(--suave); }
.resumen-pagina b { color: var(--texto); font-weight: 600; }
.herramientas { position: sticky; top: 56px; z-index: 20; background: var(--barra); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linea); border-top: 1px solid var(--linea); padding: 12px 0; }
.herramientas .envoltura { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.deslizable { display: contents; }
.campo { background: var(--fondo-2); border: 1px solid transparent; color: var(--texto); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 15px; }
.campo:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 18%, transparent); }
input.campo { flex: 1 1 260px; min-width: 0; }
.contador { font-family: var(--mono); font-size: 12px; color: var(--suave); margin-left: auto; text-transform: uppercase; letter-spacing: .03em; }
.anio-grupo { display: grid; padding-top: 44px; }
@media (min-width: 860px) { .anio-grupo { grid-template-columns: 150px 1fr; } }
.anio-grupo > h2 { font-size: 44px; letter-spacing: -.055em; font-weight: 700; margin: 0 0 10px; position: sticky; top: 130px; align-self: start; }
.anio-grupo > h2 small { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; font-weight: 400; color: var(--tenue); margin-top: 6px; text-transform: uppercase; }
.item { display: block; padding: 18px 0; border-bottom: 1px solid var(--linea); transition: padding .3s var(--curva); }
.item h3 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 7px; letter-spacing: -.02em; }
.item .linea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; color: var(--suave); }
.item .imp { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.pastilla { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--fondo-2); color: var(--suave); }
.pastilla.doi { color: var(--azul); background: color-mix(in srgb, var(--azul) 12%, transparent); }
.pastilla.actual { color: #1f9d55; background: color-mix(in srgb, #1f9d55 14%, transparent); }
.vacio { padding: 80px 0; text-align: center; color: var(--suave); }
.nivel-pagina { padding-top: 48px; }
.fichas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ficha { background: var(--fondo-2); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 150px; transition: box-shadow .3s; }
.ficha:target { box-shadow: 0 0 0 2px var(--rojo); }
.ficha .top { display: flex; gap: 14px; align-items: center; }
.ficha .avatar { width: 56px; height: 56px; font-size: 18px; border-radius: 15px; }
.ficha h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.ficha .cat { color: var(--suave); font-size: 14px; }
.ficha .contacto { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha .contacto a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--texto); overflow-wrap: anywhere; transition: border-color .2s, color .2s; }
.ficha .contacto a svg { width: 16px; height: 16px; flex: none; color: var(--rojo); }
.ficha .contacto a:hover { border-color: var(--texto); }
.ficha .num-proy { display: flex; flex-wrap: wrap; gap: 12px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.ficha .num-proy b { display: block; white-space: nowrap; font-family: "Inter", sans-serif; font-size: 22px; color: var(--texto); font-weight: 700; letter-spacing: -.04em; text-transform: none; }
.ficha ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ficha li { font-size: 14px; line-height: 1.38; padding-left: 16px; position: relative; }
.ficha li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-top: 1.5px solid var(--rojo); border-right: 1.5px solid var(--rojo); }
.ficha li span { color: var(--tenue); }

/* ─── movimiento ─── */
@view-transition { navigation: auto; }
.aparece { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--curva), transform 1s var(--curva); }
.aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .aparece { opacity: 1; transform: none; }
  .col .b { transform: none; }
  .relato p span { color: var(--texto); }
  .escaparate { transform: none !important; }
  .titular-mascara .l > span { transform: none; }
}

/* Autores del grupo y publicaciones en las fichas */
.del-grupo { color: var(--texto); }
.del-grupo [data-ir] { border-bottom: 1px solid var(--linea); cursor: pointer; transition: border-color .2s, color .2s; }
.del-grupo [data-ir]:hover { color: var(--rojo); border-color: var(--rojo); }
.ficha h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); font-weight: 500; margin: 0 0 8px; }
.ficha li a:hover { color: var(--enlace); }
.ficha .todas { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--enlace); }

/* Ficha compacta del equipo */
.ficha { gap: 14px; padding: 22px; }
.ficha .min-w-0 { min-width: 0; }
.ficha .correo { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: var(--enlace); overflow-wrap: anywhere; }
.ficha .correo svg { width: 15px; height: 15px; flex: none; color: var(--rojo); }
.ficha .correo:hover { text-decoration: underline; }
.datos-ficha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--suave); }
.datos-ficha b { color: var(--texto); font-weight: 700; }
.datos-ficha a:hover, .datos-ficha a:hover b { color: var(--enlace); }
.datos-ficha .portal { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linea); color: var(--suave); flex: none; }
.datos-ficha .portal svg { width: 15px; height: 15px; }
.datos-ficha .portal:hover { color: var(--texto); border-color: var(--texto); }

/* ═══════════════════════════════ azul GTI */
/* Las cifras, sobre un azul tinta profundo sacado del azul del logo, con su
   resplandor en una esquina: el color de la marca sin gritar. */
section.azul-gti {
  color: #f4f6fa; --suave: rgba(226,234,246,.66); --linea: rgba(255,255,255,.1); --rojo: #ff6b62;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(3,85,161,.55), transparent 62%),
    radial-gradient(700px 420px at 0% 110%, rgba(3,85,161,.22), transparent 60%),
    #06142a;
}
.azul-gti .baldosa { background: rgba(255,255,255,.035); color: #f4f6fa; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(6px); }
.azul-gti .baldosa .etq, .azul-gti .baldosa strong small { color: rgba(226,234,246,.6); }
.azul-gti .baldosa.negra { background: linear-gradient(140deg, #0a63b8 0%, #0355a1 45%, #023b72 100%); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -30px rgba(3,85,161,.8); }
.azul-gti .baldosa.negra .etq, .azul-gti .baldosa.negra strong small { color: rgba(255,255,255,.72); }
.azul-gti .baldosa.roja strong { color: #ff6b62; }
.azul-gti .baldosa:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }

/* El gráfico, en azul; el pico, en rojo. */
.col .b { background: var(--azul); opacity: .55; }
.col:hover .b { opacity: .9; }
/* Los números de las listas de temas, alternando los colores del logo. */
.temas li:nth-child(even)::before { color: var(--azul); }
.oscuro .temas li:nth-child(even)::before { color: #6ea6ea; }

/* ═══════════════════════════════ nube de puntos de la portada */
/* El logo de puntos es el fondo de la portada: grande, a sangre por la derecha, y
   fundido hacia la izquierda para que el titular quede limpio encima. */
.portada { position: relative; overflow: hidden; }
.portada > .envoltura { position: relative; z-index: 1; }
#nube { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 64vw; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 48%); }
@media (max-width: 899px) {
  #nube { right: -30vw; width: 130vw; opacity: .55; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 760px) {
  /* En el teléfono, la nube ocupa el hueco de arriba y el titular queda limpio debajo. */
  .portada { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-top: 12px; }
  #nube { position: relative; inset: auto; flex: 1 1 0; min-height: 150px; max-height: 360px; width: 100%; height: auto; opacity: 1; margin-bottom: 8px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
}

/* ═══════════════════════════════ filas enlazadas (proyectos y publicaciones) */
/* Al pasar por encima: crece una barra con los colores del logo, el contenido se desliza
   (con transform: el texto no se recoloca, da igual lo largo que sea), la fila se tiñe,
   cada línea del título se subraya a la vez y aparece la flecha. */
a.item, a.pub { position: relative; border-radius: 12px; padding-right: 44px;
  transition: background-color .3s var(--curva); }
a.item > *, a.pub > * { transition: transform .32s var(--curva); }
a.item::before, a.pub::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--azul), var(--rojo)); transform: scaleY(0); transition: transform .32s var(--curva); }
a.item::after, a.pub::after { content: "↗"; position: absolute; right: 14px; top: 16px; font-size: 16px; color: var(--azul);
  opacity: 0; transform: translate(-6px, 6px); transition: opacity .25s var(--curva), transform .32s var(--curva); }
a.item h3, a.pub h4 { display: inline; padding-bottom: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .35s var(--curva), color .25s var(--curva); }
a.item .linea-meta, a.pub small { display: flex; margin-top: 7px; }
@media (hover: hover) {
  a.item:hover, a.pub:hover { background-color: color-mix(in srgb, var(--azul) 6%, transparent); }
  a.item:hover > *, a.pub:hover > * { transform: translateX(16px); }
  a.item:hover::before, a.pub:hover::before { transform: scaleY(1); }
  a.item:hover::after, a.pub:hover::after { opacity: 1; transform: none; }
  a.item:hover h3, a.pub:hover h4 { color: var(--enlace); background-size: 100% 1.5px; }
}
a.item:focus-visible, a.pub:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.item > *, a.pub > *, a.item::before, a.pub::before { transition: none; } }

/* ═══════════════════════════════ equipo: la ficha completa en un panel lateral */
.ficha .ver { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--suave); transition: color .2s; }
.ficha .ver::after { content: "→"; font-size: 14px; color: var(--rojo); transition: transform .3s var(--curva); }
.ficha .ver:hover { color: var(--texto); }
.ficha .ver:hover::after { transform: translateX(4px); }

dialog.hoja { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0;
  border: 0; padding: 0; background: var(--fondo); color: var(--texto); box-shadow: -40px 0 90px -30px rgba(0,0,0,.35);
  overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%);
  transition: transform .42s var(--curva), overlay .42s allow-discrete, display .42s allow-discrete; }
dialog.hoja[open] { transform: none; }
@starting-style { dialog.hoja[open] { transform: translateX(100%); } }
dialog.hoja::backdrop { background: rgba(6,20,42,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .42s var(--curva), backdrop-filter .42s var(--curva), overlay .42s allow-discrete, display .42s allow-discrete; }
dialog.hoja[open]::backdrop { background: rgba(6,20,42,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@starting-style { dialog.hoja[open]::backdrop { background: rgba(6,20,42,0); backdrop-filter: blur(0); } }
html:has(dialog.hoja[open]) { overflow: hidden; }
.hoja .dentro { min-height: 100%; box-sizing: border-box; padding: 28px 30px 40px; display: flex; flex-direction: column; gap: 22px; }
.hoja .cerrar { position: sticky; top: 0; margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--fondo); color: var(--texto); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: transform .3s var(--curva), border-color .2s; }
.hoja .cerrar:hover { border-color: var(--texto); transform: rotate(90deg); }
.hoja .quien { display: flex; flex-direction: column; gap: 14px; margin-top: -14px; }
.hoja .avatar { width: 84px; height: 84px; font-size: 26px; border-radius: 22px; }
.hoja h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.hoja .cat { color: var(--suave); font-size: 15px; margin-top: 6px; }
.hoja .cat .r { color: var(--rojo); }
.hoja .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hoja .cifras a, .hoja .cifras span { display: block; padding: 16px; border-radius: 16px; background: var(--fondo-2); color: var(--suave); font-size: 13px; transition: background .2s; }
.hoja .cifras b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.04em; color: var(--texto); line-height: 1.1; }
.hoja .cifras a:hover { background: color-mix(in srgb, var(--azul) 10%, var(--fondo-2)); }
.hoja .contacto { display: flex; flex-wrap: wrap; gap: 8px; }
.hoja .contacto a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--linea); color: var(--texto); overflow-wrap: anywhere; transition: border-color .2s; }
.hoja .contacto a:hover { border-color: var(--texto); }
.hoja .contacto svg { width: 16px; height: 16px; flex: none; color: var(--rojo); }
.hoja h3 { margin: 0 0 4px; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.hoja ol { list-style: none; margin: 0; padding: 0; }
.hoja li { padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.4; }
.hoja li small { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--tenue); margin-bottom: 4px; }
.hoja li a:hover { color: var(--enlace); }
/* Lo de dentro entra escalonado detrás del panel. */
.hoja[open] .dentro > * { animation: entra-hoja .5s var(--curva) both; }
.hoja[open] .dentro > :nth-child(2) { animation-delay: .06s; }
.hoja[open] .dentro > :nth-child(3) { animation-delay: .1s; }
.hoja[open] .dentro > :nth-child(4) { animation-delay: .14s; }
.hoja[open] .dentro > :nth-child(n+5) { animation-delay: .18s; }
@keyframes entra-hoja { from { opacity: 0; transform: translateX(24px); } }
/* En el móvil, sube desde abajo. */
@media (max-width: 640px) {
  dialog.hoja { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88dvh; border-radius: 26px 26px 0 0; transform: translateY(100%); }
  @starting-style { dialog.hoja[open] { transform: translateY(100%); } }
  .hoja[open] .dentro > * { animation-name: sube-hoja; }
  @keyframes sube-hoja { from { opacity: 0; transform: translateY(16px); } }
}
@media (prefers-reduced-motion: reduce) {
  dialog.hoja, dialog.hoja::backdrop { transition: none; }
  .hoja[open] .dentro > * { animation: none; }
}
/* Toda la ficha abre el panel: se levanta un poco al pasar por encima. */
.ficha.abre { cursor: pointer; transition: box-shadow .3s var(--curva), transform .3s var(--curva); }
@media (hover: hover) { .ficha.abre:hover { transform: translateY(-3px); box-shadow: var(--sombra); } }

/* ═══════════════════════════════ cambiar de página */
/* Al pasar de Inicio a Proyectos, Publicaciones o Equipo: la barra se queda quieta, el subrayado
   rojo viaja hasta la pestaña nueva y la página sale y entra con un fundido que sube un poco. */
@view-transition { navigation: auto; }
.barra { view-transition-name: barra; }
.menu .raya { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--rojo); border-radius: 2px; view-transition-name: pestana; }
.menu a.activa:has(.raya)::after { display: none; }
::view-transition-group(pestana) { animation-duration: .45s; animation-timing-function: var(--curva); }
::view-transition-old(root) { animation: pagina-sale .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: pagina-entra .5s var(--curva) .08s both; }
@keyframes pagina-sale { to { opacity: 0; transform: translateY(-10px) scale(.995); filter: blur(2px); } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(18px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ═══════════════════════════════ menú del móvil */
.hamburguesa { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--texto); cursor: pointer; position: relative; }
.hamburguesa i { position: absolute; left: 11px; right: 11px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .4s var(--curva), top .4s var(--curva); }
.hamburguesa i:first-child { top: 15px; }
.hamburguesa i:last-child { top: 21px; }
.menu-abierto .hamburguesa i:first-child { top: 18px; transform: rotate(45deg); }
.menu-abierto .hamburguesa i:last-child { top: 18px; transform: rotate(-45deg); }
.menu-movil { position: fixed; inset: 56px 0 0; z-index: 49; background: var(--fondo); padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--curva), opacity .3s var(--curva), visibility 0s .55s; }
.menu-abierto .menu-movil { visibility: visible; opacity: 1; clip-path: inset(0); transition: clip-path .55s var(--curva), opacity .2s var(--curva); }
.menu-movil a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea);
  font-size: clamp(34px, 10vw, 44px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; color: var(--suave);
  opacity: 0; transform: translateY(22px); transition: opacity .3s var(--curva), transform .3s var(--curva), color .2s; }
.menu-movil a small { font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--rojo); min-width: 22px; }
.menu-movil a.activa { color: var(--texto); }
.menu-abierto .menu-movil a { opacity: 1; transform: none; transition: opacity .5s var(--curva), transform .6s var(--curva), color .2s; transition-delay: calc(.08s + var(--i) * .05s); }
.menu-movil .pie-menu { margin-top: auto; font-size: 14px; color: var(--suave); opacity: 0; transition: opacity .4s var(--curva) .3s; }
.menu-abierto .menu-movil .pie-menu { opacity: 1; }
.menu-abierto, .menu-abierto body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu-movil, .menu-movil a { transition: none !important; } }

/* ═══════════════════════════════ teléfono */
@media (max-width: 760px) {
  .menu { display: none; }
  .hamburguesa { display: block; }
  .lado { gap: 10px; }
  .tema { width: 38px; height: 38px; }
  .envoltura { width: min(var(--ancho), 100% - 40px); }
  .envoltura.grande, .portada > .envoltura, .escaparate { width: min(var(--ancho-grande), 100% - 40px); }

  /* Portada */
  .portada { min-height: calc(100svh - 56px); align-items: flex-end; padding: 32px 0 44px; }
  .portada h1 { font-size: clamp(44px, 13.5vw, 64px); margin: 18px 0 22px; letter-spacing: -.05em; }
  .ahora { font-size: 21px; margin-bottom: 24px; }
  .portada .lema { font-size: 18px; }
  .portada .acciones { gap: 12px 26px; }
  .escaparate { border-radius: 22px; }
  .escaparate .dentro { padding: 36px 22px 28px; gap: 32px; }
  .antenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .antenas div { padding-right: 8px; }
  .antenas div + div { padding-left: 12px; }
  .antenas b { font-size: 24px; }
  .antenas small { font-size: 9.5px; }
  section.bloque { padding: 72px 0; }
  .cabeza { margin-bottom: 32px; }
  .cabeza h2 { font-size: clamp(36px, 10.5vw, 46px); }
  .temas li { grid-template-columns: 32px 1fr; font-size: 17px; }
  .temas li span { grid-column: 2; }
  .tarjeta { min-height: 400px; padding: 26px 24px; }
  .tarjeta h3 { font-size: 24px; }
  .grafico { padding: 22px 16px; border-radius: 20px; }
  .barras { height: 200px; gap: 3px; }
  .col .a { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; margin-top: 6px; }
  /* Proyectos de la portada: año e importe encima, el título debajo con todo el ancho. */
  .fila { grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15.5px; line-height: 1.4; }
  .fila > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .noticia { padding: 24px; min-height: 0; }
  .cierre h2 { font-size: clamp(38px, 11vw, 52px); }

  /* Páginas interiores */
  .cabecera-pagina { padding: 44px 0 28px; }
  .cabecera-pagina h1 { font-size: clamp(46px, 14vw, 64px); margin: 14px 0 16px; }
  .cabecera-pagina p { font-size: 17px; }
  .resumen-pagina { gap: 6px 20px; margin-top: 22px; font-size: 14.5px; }
  /* Filtros: el buscador entero y, debajo, los desplegables en una sola fila que se desliza. */
  .herramientas { padding: 10px 0; }
  .herramientas .envoltura { gap: 8px; }
  .herramientas input.campo { flex: 1 1 100%; }
  .deslizable { display: flex; gap: 8px; align-items: center; width: calc(100% + 20px); margin-right: -20px; padding-right: 28px;
    overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .deslizable::-webkit-scrollbar { display: none; }
  .deslizable > * { flex: none; }
  .campo { font-size: 16px; padding: 10px 13px; }
  select.campo { font-size: 14px; padding: 8px 12px; border-radius: 999px; }
  .contador { align-self: center; margin-left: 4px; white-space: nowrap; font-size: 11px; }
  .anio-grupo { padding-top: 32px; }
  .anio-grupo > h2 { position: static; font-size: 36px; margin-bottom: 4px; }
  .item h3, .pub h4 { font-size: 17px; }
  a.item, a.pub { padding-right: 0; }
  a.item::after, a.pub::after { display: none; }
  .item .linea-meta { gap: 6px 12px; font-size: 13.5px; }
  .ficha { padding: 20px; border-radius: 20px; }
  .ficha.abre:active { transform: scale(.985); }
  footer .envoltura { flex-direction: column; }
}