/* ==========================================================================
   REBRAND2026-TOGGLE — identidad arteba 2026
   ==========================================================================

   Hoja ADITIVA. Se carga DESPUÉS de styles2023.css / styles.css y sólo cuando
   el flag está activo (ver config/rebrand.php y Rebrand2026 middleware).

   Dos candados a propósito:

     1. El <link> se emite sólo si el flag está prendido, así el HTML público
        queda byte a byte igual al de hoy hasta el cutoff.
     2. TODOS los selectores cuelgan de body.rebrand2026, así que aunque el
        archivo se cargara por error (cache, copy/paste), sin esa clase en el
        body no pinta nada.

   Por qué una hoja aparte y no editar styles2023.css: ese archivo tiene un
   gemelo byte-idéntico (styles.css) que hay que mantener sincronizado, y los
   dos se sirven desde S3, donde pisar el objeto es instantáneamente público y
   sin vuelta atrás. Un archivo nuevo se puede subir días antes sin que se vea.

   ¡OJO! El sitio NO sirve el CSS desde la EC2: ASSET_URL apunta a
   https://assets.arteba.org/feria — este archivo tiene que subirse a S3 o no
   cambia nada. Ver docs/REBRAND2026-TEARDOWN.md

   Paleta:  fondo #000000 · texto #FFFFFF · acento #CAFF00
            tarjetas de notas #FFFFFF con texto #000000
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tipografías
   --------------------------------------------------------------------------
   Subset latino (ES/EN/FR) en WOFF2: entre 38 y 53 KB por corte, contra ~6 MB
   de cada OTF original. Los .otf quedan archivados como fuente, no se sirven.

   Los cinco cortes que mandó Sofía: Display Bold (títulos y botones) y la
   familia Text completa (Regular, Bold, Italic, Bold Italic).

   Con los cuatro cortes de Text declarados acá, el navegador elige solo: <strong>
   computa font-weight:700 y toma Bold, <em> computa font-style:italic y toma
   Italic, y los dos juntos toman Bold Italic. Por eso NO hay reglas de
   font-family para strong/b/em: alcanza con que exista el @font-face. Es
   importante que siga así — en este sitio <i> son iconos de FontAwesome, y una
   regla body.rebrand2026 i {} le ganaría en especificidad a .fas y rompería
   todos los iconos.

   Display sólo tiene Bold: no hay cursiva. Un <em> adentro de un título sale
   sintetizado. Son casos contados y el fallback es aceptable.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "SF Pro Display";
  src: url(../fonts/SFProDisplay-Bold-v2.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url(../fonts/SFProText-Regular-v2.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url(../fonts/SFProText-Bold-v1.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url(../fonts/SFProText-Italic-v1.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url(../fonts/SFProText-BoldItalic-v1.woff2) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Base — fondo negro, texto blanco
   --------------------------------------------------------------------------
   styles2023.css:500-504 define color:#000 pero NINGÚN background-color: el
   fondo blanco de hoy es el default del navegador. Por eso acá hay que
   pintarlo explícitamente en html y body.
   -------------------------------------------------------------------------- */

/* El fondo del body se propaga al canvas de la página porque html no declara
   background propio, así que con pintar body alcanza para toda la ventana. */
body.rebrand2026 {
  background-color: #000;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  color: #fff;
}

body.rebrand2026 main,
body.rebrand2026 section,
body.rebrand2026 .container,
body.rebrand2026 .container-fluid {
  background-color: transparent;
}

/* Enlaces — styles2023.css:357-365 los pone negros con hover #666 */
body.rebrand2026 a {
  color: #fff;
}

body.rebrand2026 a:hover,
body.rebrand2026 a:focus {
  color: #caff00;
}


/* --------------------------------------------------------------------------
   3. Escala tipográfica
   --------------------------------------------------------------------------
   Criterio de Sofía (07/08): "Display Bold para títulos y botones; Pro Text
   para cuerpos de texto".

   SF Pro viene en dos tamaños ópticos: Text está dibujada para cuerpos chicos
   y Display para títulos grandes (~20pt para arriba). Por eso el corte de la
   escala no es arbitrario: .type100-.type400 (11-21px) van con Text y
   .type500-.type900 (28-105px) con Display.
   -------------------------------------------------------------------------- */

body.rebrand2026 h1,
body.rebrand2026 h2,
body.rebrand2026 h3,
body.rebrand2026 h4,
body.rebrand2026 h5,
body.rebrand2026 h6,
body.rebrand2026 .type500,
body.rebrand2026 .type600,
body.rebrand2026 .type700,
body.rebrand2026 .type800,
body.rebrand2026 .type900,
body.rebrand2026 .btn {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

body.rebrand2026 .type200,
body.rebrand2026 .type300,
body.rebrand2026 .type400 {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

/* .type100 son las píldoras de tag, 11px en mayúsculas. Era el único uso de
   Dapper-Bold del sitio. A ese tamaño corresponde Text, no Display. */
body.rebrand2026 .type100 {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.8px;
}


/* --------------------------------------------------------------------------
   4. Negritas y cursivas — sin reglas, a propósito
   --------------------------------------------------------------------------
   El sitio tiene 109 <strong>, 17 <b>, 7 .font-weight-bold y 22 <em>. Hasta el
   10/08 faltaban los cortes y las negritas se forzaban a Display Bold para
   evitar la negrita sintética. Sofía mandó Text Bold, Italic y Bold Italic el
   10/08 a la noche, así que ese parche se borró: los @font-face del bloque 1
   resuelven los cuatro casos solos y el navegador elige el archivo correcto.

   Este bloque queda vacío adrede, como respuesta a "¿dónde están las reglas de
   negrita?". Agregar selectores acá es justamente lo que hay que NO hacer.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   5. Header, marquee y navegación
   --------------------------------------------------------------------------
   styles2023.css:512-534 pinta el header con un degradado BLANCO. Hay que
   invertirlo o el logo lima queda sobre blanco.
   -------------------------------------------------------------------------- */

body.rebrand2026 .header {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* El marquee ya era negro con texto blanco (styles2023.css:538-550): se deja.
   Se le pone el acento sólo al borde inferior para separarlo del fondo. */
body.rebrand2026 .marquee {
  border-bottom: 1px solid #1a1a1a;
}

/* Menú off-canvas. La CSS base (styles2023.css:655-751) YA lo tenía negro con
   links blancos; lo que lo rompía era el <style> inline que genera
   base/header.blade.php:3-5 (fondo blanco + .link-secondary gris). Eso ahora
   está apagado por el flag. Estas reglas son el cinturón por si algo queda. */
body.rebrand2026 .navigation-body {
  background-color: #000;
}

body.rebrand2026 .navigation-link,
body.rebrand2026 .navigation-body a {
  color: #fff;
}

body.rebrand2026 .navigation-link:hover,
body.rebrand2026 .navigation-body a:hover {
  color: #caff00;
}

body.rebrand2026 .navigation-body li.nav-icons a svg path {
  fill: #fff;
}

body.rebrand2026 .navigation-header li a {
  color: #fff;
}

/* Botón de menú (las 3 líneas que reemplazan la palabra "menú") */
body.rebrand2026 .navigation-button-toggler svg {
  display: inline-block;
  vertical-align: middle;
}

body.rebrand2026 .navigation-button-toggler svg rect {
  fill: #fff;
}

body.rebrand2026 .navigation-button-toggler:hover svg rect {
  fill: #caff00;
}


/* --------------------------------------------------------------------------
   6. Logo
   --------------------------------------------------------------------------
   El logo viejo era un <svg> inline de 6 paths sin fill, coloreado por CSS
   (incluido styles2023.css:1774, que lo pinta blanco en layout-search).
   El nuevo es un PNG lima sobre transparente: se lee sobre negro en todos
   lados, así que aquel truco ya no hace falta.

   Se dimensiona por ALTO y width:auto, replicando los breakpoints del svg
   viejo (styles2023.css:562, 566, 1067, 1081, 1130-1131, 1767). El PNG es de
   1838x467, o sea que cubre el hero de 500x130 incluso en pantallas 3x.
   -------------------------------------------------------------------------- */

body.rebrand2026 .brand img.rebrand-brand-img {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
  transition: height 0.35s ease;
}

body.rebrand2026.index .brand img.rebrand-brand-img,
body.rebrand2026 .index .brand img.rebrand-brand-img {
  height: 130px;
}

body.rebrand2026 .header.scrolling .brand img.rebrand-brand-img {
  height: 40px;
}

@media (max-width: 1199px) {
  body.rebrand2026.index .brand img.rebrand-brand-img,
  body.rebrand2026 .index .brand img.rebrand-brand-img {
    height: 100px;
  }
}

@media (max-width: 991px) {
  body.rebrand2026.index .brand img.rebrand-brand-img,
  body.rebrand2026 .index .brand img.rebrand-brand-img {
    height: 70px;
  }
}

@media (max-width: 767px) {
  body.rebrand2026 .brand img.rebrand-brand-img,
  body.rebrand2026.index .brand img.rebrand-brand-img,
  body.rebrand2026 .index .brand img.rebrand-brand-img {
    height: 40px;
  }
}


/* --------------------------------------------------------------------------
   7. Botones y badges
   -------------------------------------------------------------------------- */

body.rebrand2026 .btn {
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
}

body.rebrand2026 .btn:hover,
body.rebrand2026 .btn:focus {
  color: #000;
  background-color: #caff00;
  border-color: #caff00;
}

body.rebrand2026 .btn-primary,
body.rebrand2026 .btn-dark {
  color: #000;
  background-color: #caff00;
  border-color: #caff00;
}

body.rebrand2026 .btn-primary:hover,
body.rebrand2026 .btn-dark:hover {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}

body.rebrand2026 .badge,
body.rebrand2026 a.badge {
  color: #fff;
  border: 1px solid #fff;
}


/* --------------------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------------------
   styles2023.css:925-934 lo tenía blanco; el de layout-search (:1749-1760) ya
   era negro con degradado negro, así que ese queda como está.
   -------------------------------------------------------------------------- */

body.rebrand2026 footer {
  background-color: #000;
  color: #fff;
}

body.rebrand2026 footer a {
  color: #fff;
}

body.rebrand2026 footer a:hover {
  color: #caff00;
}


/* --------------------------------------------------------------------------
   9. Íconos SVG que venían en negro
   --------------------------------------------------------------------------
   styles2023.css:1878 y :2022 los cargan como background-image negro.
   -------------------------------------------------------------------------- */

body.rebrand2026 .navigation-button-close,
body.rebrand2026 [class*="icon-close"] {
  background-image: url(../assets/icon-close-white-v2.svg);
}

body.rebrand2026 .accordion-toggle,
body.rebrand2026 [class*="icon-chevron"] {
  background-image: url(../assets/icon-chevron-white-v2.svg);
}


/* --------------------------------------------------------------------------
   10. Estilos inline — el bloque que hace posible no tocar 29 vistas
   --------------------------------------------------------------------------
   Unas 29 vistas traen style="background-color: ..." escrito en el HTML
   (conexion-arteba-2025 x15, home x10, schedule x8, article x6,
   institucional.blade.php:4 con #CDECE8 fijo...), más TODOS los pasteles que
   inyecta el shuffle de web2023-helper.php, más los colores que vienen de la
   base en el JSON de institucional.

   Una declaración con !important en una hoja le gana a un style="" inline que
   no tenga !important. Eso permite apagarlos todos desde acá, sin editar las
   vistas dos días antes del lanzamiento.

   El ORDEN importa: este bloque va ANTES del de tarjetas, que necesita ganarle.
   -------------------------------------------------------------------------- */

body.rebrand2026 [style*="background-color"],
body.rebrand2026 [style*="background:"] {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
}

/* La tarjeta falsa de Instagram del home fuerza Arial (home.blade.php:215) */
body.rebrand2026 [style*="font-family"] {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
}


/* --------------------------------------------------------------------------
   11. Tarjetas de notas — requisito explícito de Sofía
   --------------------------------------------------------------------------
   "Desactivar el efecto de cambio de color cuando das F5 en las
    noticias/artículos. Quedan todos los recuadros blancos #FFFFFF con texto
    en negro #000000".

   El efecto vive en web2023-helper.php:3 (shuffle() de 7 pasteles, del lado
   del servidor, en cada request). No se toca ese archivo ahora: el servidor
   sigue barajando, pero nadie lo ve. Sacarlo de verdad implica tocar ~20
   vistas y va en el teardown, después del lanzamiento.

   Selectores con [style] para ganarle por especificidad al bloque 10, sin
   depender del orden.
   -------------------------------------------------------------------------- */

body.rebrand2026 .card,
body.rebrand2026 .card[style],
body.rebrand2026 .card [style*="background-color"],
body.rebrand2026 .card [style*="background:"] {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
}

body.rebrand2026 .card,
body.rebrand2026 .card a,
body.rebrand2026 .card h1,
body.rebrand2026 .card h2,
body.rebrand2026 .card h3,
body.rebrand2026 .card h4,
body.rebrand2026 .card h5,
body.rebrand2026 .card h6,
body.rebrand2026 .card p,
body.rebrand2026 .card span,
body.rebrand2026 .card .card-title {
  color: #000 !important;
}

body.rebrand2026 .card a:hover {
  color: #000 !important;
  text-decoration: underline;
}

body.rebrand2026 .card .badge,
body.rebrand2026 .card a.badge,
body.rebrand2026 .card .type100 {
  color: #000 !important;
  border-color: #000 !important;
}


/* --------------------------------------------------------------------------
   12. Banners del home
   --------------------------------------------------------------------------
   Pedido de Sofía: 2400x1371 px y que en DESKTOP se vea la imagen completa
   "sin necesidad de scrollear". Mobile "puede quedar como está".

   A 2400x1371 la relación es ~1.75:1. Con el .w-100 de hoy, dentro del
   .container (tope ~1140px), la imagen mide ~651px de alto; sumado al header
   fijo de 200px y al padding-top:140px de main (styles2023.css:855-867), no
   entra en una pantalla de 1366x768.

   Por eso se limita por ALTO en desktop y se centra. En pantallas bajas la
   imagen se ve completa pero más angosta que la columna (letterbox lateral):
   es la única forma de cumplir "completa y sin scroll" sin recortarla.

   La media query arranca en 992px, así que abajo de eso mobile no se toca.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  body.rebrand2026 .rebrand-banner {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 260px);
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}


/* --------------------------------------------------------------------------
   13. Formularios y varios
   -------------------------------------------------------------------------- */

body.rebrand2026 input,
body.rebrand2026 textarea,
body.rebrand2026 select {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

body.rebrand2026 input::placeholder,
body.rebrand2026 textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

body.rebrand2026 hr {
  border-color: #333;
}

body.rebrand2026 .accordion .card,
body.rebrand2026 .accordion .card[style] {
  border-color: #333 !important;
}

/* --------------------------------------------------------------------------
   14. Flechas de los botones y aire entre secciones del home
   --------------------------------------------------------------------------
   Las flechas de los botones tipo "Ver imágenes" / "Descargar logos" son SVG
   inline cuyo <path> NO trae atributo fill. El default de SVG es negro, así que
   sobre el fondo nuevo desaparecían. Con currentColor la flecha sigue al color
   del texto del botón: blanca sobre negro, y negra si algún día el botón pasa a
   ser lima con texto negro. El <rect class="cls-1"> queda en fill:none, que es
   lo que corresponde: el selector apunta solo a <path>.

   Esto arregla de una sola vez todas las apariciones, incluidas las que viven en
   la BASE de convocatoria (la página de Prensa es contenido de static_pages, no
   de este repo) y no se podrían tocar editando blades.
   -------------------------------------------------------------------------- */

body.rebrand2026 .btn svg path,
body.rebrand2026 a.btn svg path {
  fill: currentColor;
}

/* Aire entre la última fila de notas y el bloque de Instagram/redes del home.
   El separador vive en home.blade.php sin alto: acá se le da el alto, así que
   fuera del rebranding el home queda exactamente como estaba. */
body.rebrand2026 .home-articles-gap {
  height: 3rem;
}

@media (max-width: 991px) {
  body.rebrand2026 .home-articles-gap {
    height: 1.5rem;
  }
}


/* --------------------------------------------------------------------------
   15. Proporciones — el logo y los banners nunca se deforman
   --------------------------------------------------------------------------
   Reporte de Sofía (12/08): el logo del encabezado se veía deformado en
   mobile, y los banners del inicio en pantallas de 13".

   Son dos causas distintas, las dos por mezclar una medida fija con una
   restricción en el otro eje:

   LOGO. <a class="brand"> es flex-item de <header> (flex: 0 1 auto) y el único
   otro hijo es <nav class="navigation">, que ya está en su ancho mínimo
   (scrollWidth == width). Al no entrar los 157px del logo, el navegador
   achicaba la CAJA a lo ancho mientras el height:40px del bloque 6 seguía
   clavado: el PNG se estiraba. Medido en producción antes del arreglo, la
   proporción real es 3.936 y quedaba en 2.66 (360px), 2.73 (390px),
   3.22 (768px) y 3.48 (1280px) — o sea que estaba mal en TODAS las medidas,
   no sólo en mobile.

   Se arregla por los dos lados. Acá, flex-shrink:0 para que la caja conserve
   el ancho intrínseco; y en header.blade.php, sacando "Expositores" del
   encabezado en mobile y metiéndolo dentro del menú, que es lo que libera el
   ancho para que el logo entre entero (a 360px el hueco era de 106px contra
   los 157px que necesita). Sin ese cambio de markup, flex-shrink:0 solo
   desbordaba el encabezado.

   object-fit:contain queda de red de seguridad: si algún día otra regla vuelve
   a apretar la caja, el bitmap se dibuja proporcional en vez de estirarse.

   BANNERS. El bloque 12 pone width:auto + max-height para que la imagen entre
   entera sin scrollear, pero los <img> traen la clase .w-100 de Bootstrap,
   que es width:100% !important y le gana. Con el ancho clavado al 100% y el
   alto recortado por max-height, la imagen se aplastaba en cuanto la pantalla
   era baja: 2.17 a 1280x800, 2.00 a 1536x864, 1.83 a 1440x900, contra 1.7505
   real. En 1920x1080 el max-height no llegaba a morder y por eso se veía bien
   — exactamente lo que reportó Sofía ("yo tengo monitor grande y lo veo bien").
   Con width:auto !important vuelve a mandar el algoritmo de max-width +
   max-height, que respeta la proporción.
   -------------------------------------------------------------------------- */

body.rebrand2026 .brand {
  flex-shrink: 0;
}

body.rebrand2026 .brand img.rebrand-brand-img {
  object-fit: contain;
}

@media (min-width: 992px) {
  body.rebrand2026 .rebrand-banner {
    width: auto !important;
    object-fit: contain;
  }
}


/* --------------------------------------------------------------------------
   16. Acordeón de Institucional — pedido de Sofía
   --------------------------------------------------------------------------
   Las solapas (consejo de administración, círculo de presidentes, comité
   internacional, staff, memoria institucional) quedaban como cinco barras
   BLANCAS con texto negro sobre el fondo negro: .card de Bootstrap trae
   background-color:#fff y el bloque 10 no las agarra, porque el style inline
   de la tarjeta es sólo "border: none" — no menciona background.

   Van en lima con texto negro, que es la misma regla que el resto de los
   botones del sitio (sobre lima el texto SIEMPRE va en negro: blanco sobre
   lima da 1.19:1 y es ilegible; negro da 16.6:1).

   El cuerpo desplegado no se toca: los pasteles que vienen del JSON de la base
   ya los apaga el bloque 10.
   -------------------------------------------------------------------------- */

/* OJO CON EL SELECTOR: tiene que ser el hijo DIRECTO, no `.accordion .card`.
   Adentro de cada panel hay otra tanda de `.card` (las fichas de cada persona
   del consejo, del círculo y del staff: 55 en total contra 5 solapas). Con el
   selector descendiente quedaban las 60 en lima. La estructura real es
   .accordion .container-fluid > .card > .card-header (ver
   institucional.blade.php). */
body.rebrand2026 .accordion .container-fluid > .card,
body.rebrand2026 .accordion .container-fluid > .card[style] {
  background-color: #CAFF00 !important;
}

body.rebrand2026 .accordion .container-fluid > .card > .card-header,
body.rebrand2026 .accordion .container-fluid > .card > .card-header[style] {
  background-color: #CAFF00 !important;
  border-bottom-color: #000 !important;
}

body.rebrand2026 .accordion .container-fluid > .card > .card-header button,
body.rebrand2026 .accordion .container-fluid > .card > .card-header button[style] {
  background-color: transparent !important;
  color: #000 !important;
}

/* El cuerpo desplegado vuelve a ser negro: la regla de arriba pintó la tarjeta
   entera de lima y .collapse es hijo de la tarjeta, no del header. */
body.rebrand2026 .accordion .container-fluid > .card > .collapse,
body.rebrand2026 .accordion .container-fluid > .card > .collapsing {
  background-color: #000 !important;
}


/* --------------------------------------------------------------------------
   17. Logos del pie de Prensa — misma altura en desktop
   --------------------------------------------------------------------------
   Los dos logos ("declarada como interés cultural por") salen del HTML que
   vive en la base de convocatoria, los dos con width="60%", pero tienen
   proporciones muy distintas: Ministerio 886x296 (2.9932) y Mecenazgo 333x216
   (1.5417). Al mismo ANCHO, el de Mecenazgo quedaba casi al doble de alto
   (178.6px contra 92px a 1920).

   El width="60%" del HTML es un "presentational hint": lo pisa cualquier regla
   de autor, y el porcentaje se resuelve contra el mismo bloque contenedor. Así
   que alcanza con recalcularlo:

       60% x (1.5417 / 2.9932) = 30.9%

   Con eso el alto renderizado de los dos coincide exactamente y sigue siendo
   fluido (no hay ni un px fijo): 92px a 1920, 95.2px a 1440.

   Sólo de 992px para arriba, que es donde el col-lg-6 los pone lado a lado.
   Abajo de eso quedan apilados y se dejan como estaban — pedido explícito.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  body.rebrand2026 .press img[src*="logo-mecenazgo-blanco-2026"] {
    width: 30.9%;
    height: auto;
    /* El style inline del HTML le mete margin-top:18px. Con el logo grande
       casi no se notaba; ahora que los dos miden lo mismo de alto, esos 18px
       los dejaban desalineados. Sólo se anula en desktop: apilados (mobile) el
       margen sigue haciendo falta para separarlos. */
    margin-top: 0 !important;
  }
}