/* ==========================================================================
   SUBACABUR — identidad visual del sitio publico.
   Se carga DESPUES de Bootstrap 5 para que la paleta del brief tenga prioridad.
   Escrita a mano: no es una copia ni un fork de ningun framework.

   Paleta del brief:
     azul marino #041B3B · azul medio #0F3A6B · dorado #C8A44D (tomados del logo)
     blanco        #FFFFFF   gris claro  #F5F5F5
   ========================================================================== */

:root {
    /* ─── Identidad, tomada del logo real ─────────────────────────────────
       El brief pedia verde, pero el logo que entrego el cliente es azul
       marino con rojo y dorado. Manda el logo: es lo que va en las tarjetas,
       en los camiones y en lo impreso, y un sitio de otro color no se asocia
       con la marca. Los valores salen de muestrear el arte, no de aproximar:
       #041B3B es el azul dominante del emblema y #ED3237 su rojo.

       Todos los pares se comprobaron contra WCAG antes de fijarlos:
         blanco sobre #041B3B ....... 17,14  AAA
         #041B3B sobre blanco ....... 17,14  AAA
         #C8A44D sobre #041B3B ......  7,24  AAA
         #96690F sobre blanco .......  4,86  AA
       Por eso hay DOS dorados: el claro solo funciona sobre azul (2,37 sobre
       blanco, insuficiente) y el oscuro solo sobre blanco (3,10 sobre azul).
       Usar uno solo obligaria a incumplir en la mitad de los sitios.        */
    --suba-azul-oscuro: #041B3B;
    --suba-azul-medio: #0F3A6B;
    /* El mas profundo de los tres. Solo lo usa el pie, que debe leerse como
       un cierre y no como otra franja de cabecera. Blanco al 72 % encima da
       9,89:1 y el dorado 7,90:1: los dos AAA. */
    --suba-azul-hondo: #02122A;
    --suba-dorado: #C8A44D;
    --suba-dorado-texto: #96690F;
    --suba-rojo-marca: #ED3237;
    --suba-blanco: #FFFFFF;
    --suba-gris-claro: #F4F6FA;

    /* Alias en desuso. Las hojas de modulo referencian estos nombres 218
       veces; apuntarlos al azul repinta todo sin tocar una sola de esas
       referencias y sin riesgo de olvidar ninguna. Se retiran cuando los
       usos migren a los nombres nuevos. */
    --suba-verde-oscuro: var(--suba-azul-oscuro);
    --suba-verde-medio: var(--suba-azul-medio);

    /* Neutros con sesgo azul: un gris puro al lado del marino se ve sucio. */
    --suba-tinta: #12192B;
    --suba-tinta-tenue: #4E5871;
    --suba-borde: #DCE1EA;

    --suba-radio: 10px;
    --suba-sombra: 0 1px 2px rgba(4, 27, 59, .07), 0 8px 24px rgba(4, 27, 59, .10);
    --suba-ancho: 1140px;

    --suba-tipo: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* --- Base ----------------------------------------------------------------- */

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

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

body.suba-cuerpo {
    margin: 0;
    font-family: var(--suba-tipo);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--suba-tinta);
    background: var(--suba-gris-claro);
}

/* EL :where() ES LO IMPORTANTE, no el color.
   Esto es el color POR OMISION de un enlace: lo que se ve cuando nadie dijo otra
   cosa. Escrito como `.suba-cuerpo a` pesaba (0,1,1), y con eso le ganaba a
   cualquier componente de UNA sola clase: `.suba-menu__enlace` (0,1,0),
   `.not-boton--principal`, etc. Un valor de reserva que le gana a lo especifico
   esta al reves, y el sintoma era grave: los enlaces del menu salian azul medio
   sobre la cabecera azul marino —contraste 1,50 frente al 4,5 exigido— y seis de
   los siete quedaban INVISIBLES al desplegar el menu en el telefono. Lo mismo le
   pasaba a los enlaces con forma de boton sobre fondo oscuro.
   `:where()` vale (0,0,0), asi que ahora cualquier regla con una clase manda,
   que es lo que se pretendia desde el principio.
   No lo trajo el repintado a azul: en la etapa verde el mismo choque daba verde
   medio sobre verde oscuro, 1,70. Solo estaba mejor escondido. */
:where(.suba-cuerpo a) { color: var(--suba-azul-medio); }
:where(.suba-cuerpo a:hover),
:where(.suba-cuerpo a:focus-visible) { color: var(--suba-azul-oscuro); }

.suba-cuerpo :focus-visible {
    outline: 3px solid var(--suba-dorado);
    outline-offset: 2px;
}

.suba-cuerpo code {
    font-family: "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: .92em;
    background: rgba(4, 27, 59, .10);
    border-radius: 4px;
    padding: .1em .4em;
}

.suba-contenedor {
    width: 100%;
    max-width: var(--suba-ancho);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.suba-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--suba-dorado);
    color: var(--suba-verde-oscuro);
    padding: .6rem 1rem;
    font-weight: 700;
    z-index: 10;
}
.suba-saltar:focus { left: 0; }

/* --- Encabezado ----------------------------------------------------------- */

.suba-encabezado {
    background: var(--suba-verde-oscuro);
    border-bottom: 3px solid var(--suba-dorado);
}

.suba-encabezado__fila {
    /* Ancla de los dos paneles que cuelgan de la cabecera: el del menu en movil
       y el de «Ingresar». Sin esto se posicionarian contra el <body>. */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /* 1rem y no 1,5. Con el hueco anterior la fila sumaba 1.103 px en los 1.100
       disponibles y el grupo de la derecha se caia a una segunda linea. Fallaba
       por TRES pixeles, que es una holgura que no aguanta un rotulo mas largo ni
       otra fuente. */
    gap: .75rem 1rem;
    padding-block: .9rem;
}

/* El grupo de la derecha NO se encoge ni se cae de linea: es el ultimo que debe
   ceder. Quien cede es el menu, que ademas puede repartir sus enlaces. */
.suba-encabezado__acciones { flex: 0 0 auto; }

.suba-menu { min-width: 0; }

.suba-marca {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.15;
}

.suba-marca__nombre {
    color: var(--suba-blanco);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.suba-marca__lema {
    color: var(--suba-dorado);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.suba-menu__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Blanco al 92 % sobre la cabecera azul marino: 15,2:1, muy por encima del 4,5
   exigido. Esta regla NO PINTABA hasta que el color por omision de los enlaces
   —mas arriba— paso a `:where()`; el porque esta en aquel comentario. */
.suba-menu__enlace {
    display: inline-block;
    /* .65rem y no .8rem a los lados. Son siete enlaces: cada 0,15rem que se
       recorta a cada lado devuelve 34 px a la fila, y esa es la diferencia
       entre que la barra quepa con 47 px de margen o por los pelos. En movil
       este relleno se reemplaza por .9rem, asi que ahi no cambia nada. */
    padding: .45rem .65rem;
    border-radius: var(--suba-radio);
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
}

.suba-menu__enlace:hover,
.suba-menu__enlace:focus-visible {
    background: var(--suba-verde-medio);
    color: var(--suba-blanco);
}

.suba-menu__enlace.es-vigente {
    background: var(--suba-dorado);
    color: var(--suba-verde-oscuro);
}

/* --- Acceso (cabecera) ----------------------------------------------------
   Un boton en pastilla que abre un panel con las dos puertas de entrada. El
   boton es DORADO sobre la cabecera azul: es la unica accion de la barra, y
   compitiendo en blanco con siete enlaces de navegacion no se veria. Texto azul
   marino sobre el dorado da 7,24:1 (AAA).
   -------------------------------------------------------------------------- */

/* Visible para un lector de pantalla, invisible para el resto. */
.suba-fuera-de-pantalla {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Acceso y boton de menu viajan juntos a la derecha de la barra. */
.suba-encabezado__acciones { display: flex; align-items: center; gap: .5rem; }

/* Ya no hay panel: el acceso es UN enlace con forma de boton. Se conserva la
   pastilla dorada porque es la unica accion de la barra —compitiendo en blanco
   con seis enlaces de navegacion no se veria— y el azul marino encima da
   7,24:1 (AAA). */
.suba-acceso__boton {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* 44 px de alto: es un objetivo tactil como cualquier otro. */
    min-height: 44px;
    padding: .4rem .95rem .4rem .5rem;
    border: 0;
    border-radius: 999px;
    background: var(--suba-dorado);
    color: var(--suba-azul-oscuro);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease;
}

.suba-acceso__boton:hover,
.suba-acceso__boton:focus-visible {
    background: #D9B761;
    color: var(--suba-azul-oscuro);
    text-decoration: none;
}

.suba-acceso__llave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Disco oscuro con el candado claro: el emblema sobre la cabecera,
       invertido. Contraste del dibujo 7,24:1. */
    background: var(--suba-azul-oscuro);
    color: var(--suba-dorado);
}

/* --- Avisos de sesion ----------------------------------------------------- */

.suba-avisos { padding-top: 1rem; }

.suba-aviso {
    margin: 0 0 .75rem;
    padding: .8rem 1rem;
    border-radius: var(--suba-radio);
    border-left: 5px solid var(--suba-verde-medio);
    background: var(--suba-blanco);
    box-shadow: var(--suba-sombra);
}

.suba-aviso--exito       { border-left-color: var(--suba-verde-medio); }
.suba-aviso--error       { border-left-color: #B23B2E; }
.suba-aviso--advertencia { border-left-color: var(--suba-dorado); }
.suba-aviso--info        { border-left-color: #2F6F8F; }

/* --- Portada -------------------------------------------------------------- */

.suba-principal { display: block; }

.suba-portada {
    background: linear-gradient(150deg, var(--suba-verde-oscuro), var(--suba-verde-medio));
    color: var(--suba-blanco);
    padding-block: 3.5rem;
}

.suba-portada__antetitulo {
    margin: 0 0 .4rem;
    color: var(--suba-dorado);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.suba-portada__titulo {
    margin: 0 0 .6rem;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    font-weight: 800;
    letter-spacing: .04em;
}

.suba-portada__bajada {
    margin: 0;
    max-width: 46rem;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, .92);
}

.suba-etiqueta {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
}

.suba-etiqueta--dorada {
    background: var(--suba-dorado);
    color: var(--suba-verde-oscuro);
}

.suba-etiqueta--dorada code { background: rgba(4, 27, 59, .16); }

/* --- Secciones ------------------------------------------------------------ */

.suba-seccion { padding-block: 3rem; }
.suba-seccion--tenue { background: var(--suba-blanco); border-top: 1px solid var(--suba-borde); }

.suba-seccion__titulo {
    margin: 0 0 .35rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
}

.suba-seccion__intro {
    margin: 0 0 1.75rem;
    max-width: 44rem;
    color: var(--suba-tinta-tenue);
}

.suba-rejilla {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.suba-tarjeta {
    background: var(--suba-blanco);
    border: 1px solid var(--suba-borde);
    border-top: 4px solid var(--suba-verde-medio);
    border-radius: var(--suba-radio);
    box-shadow: var(--suba-sombra);
    padding: 1.25rem;
}

.suba-tarjeta--alerta { border-top-color: #B23B2E; }

.suba-tarjeta__titulo {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--suba-verde-oscuro);
}

.suba-datos {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .9rem;
    font-size: .94rem;
}

.suba-datos dt {
    color: var(--suba-tinta-tenue);
    font-weight: 600;
}

.suba-datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.suba-indicador {
    margin: 0 0 .8rem;
    display: inline-block;
    padding: .28rem .75rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.suba-indicador--bien { background: rgba(15, 58, 107, .14); color: var(--suba-verde-oscuro); }
.suba-indicador--mal  { background: rgba(178, 59, 46, .12); color: #8E2C22; }

.suba-reloj {
    margin: 0 0 .8rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--suba-verde-oscuro);
    font-variant-numeric: tabular-nums;
}

.suba-nota {
    margin: .9rem 0 0;
    font-size: .84rem;
    color: var(--suba-tinta-tenue);
}

.suba-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suba-enlaces a {
    display: inline-block;
    padding: .5rem 1rem;
    border: 1px solid var(--suba-borde);
    border-radius: var(--suba-radio);
    background: var(--suba-gris-claro);
    text-decoration: none;
    font-weight: 600;
}

.suba-enlaces a:hover,
.suba-enlaces a:focus-visible {
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
    color: var(--suba-blanco);
}

/* --- Pie ------------------------------------------------------------------ */

/* --- Pie del sitio -------------------------------------------------------
   Estructura: una columna de marca ancha + tres columnas de enlaces, una regla
   fina, y una barra inferior con la firma a un lado y el origen al otro.

   El fondo es el azul MAS PROFUNDO de la marca, no el de la cabecera: si los
   dos fueran #041B3B el pie pareceria una segunda cabecera pegada abajo. La
   regla dorada de 3 px se conserva —es la firma visual del sitio y ademas
   separa el pie del gris claro del cuerpo—.
   ------------------------------------------------------------------------- */

.suba-pie {
    background: var(--suba-azul-hondo);
    color: rgba(255, 255, 255, .72);
    border-top: 3px solid var(--suba-dorado);
    margin-top: 3rem;
}

.suba-pie__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem 1.5rem;
    padding-block: 3rem 2.25rem;
}

/* Dos saltos, no uno. A 640 px las tres columnas de enlaces ya caben en fila y
   la marca se pone encima a todo lo ancho; a 1000 px la marca se mete al lado y
   se llega a la maqueta del diseno. Sin el paso intermedio, entre 640 y 1000 se
   veria una unica columna larguisima. */
@media (min-width: 640px) {
    .suba-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .suba-pie__marca   { grid-column: 1 / -1; }
}

@media (min-width: 820px) {
    .suba-pie__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    /* Cuatro columnas de enlaces, no tres: al separar «Contenido» del catalogo
       cada una queda corta y se lee de un vistazo, que es justo lo que se le
       pide a un pie. La de marca cede ancho (1,3 y no 1,6) para que las cuatro
       quepan sin apretarse. */
    .suba-pie__rejilla { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
    .suba-pie__marca   { grid-column: auto; padding-right: 1.5rem; }
}

/* --- Columna de marca --- */

.suba-pie__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

.suba-pie__logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

/* El emblema es azul marino sobre transparente y el pie tambien es azul: sin
   el disco blanco detras, desaparece. */
.suba-pie__emblema {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--suba-blanco);
    padding: 3px;
}

.suba-pie__nombre {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--suba-blanco);
}

.suba-pie__descripcion {
    margin: 0;
    max-width: 30rem;
    font-size: .93rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

/* Tarjeta de atencion directa. Ocupa el lugar que en el diseno de referencia
   tiene el credito de la empresa matriz; aqui no hay matriz que acreditar, y
   ese hueco rinde mucho mas con la accion que de verdad genera negocio. */
.suba-pie__tarjeta {
    /* `flex` y no `inline-flex`, con ancho completo: la tarjeta ocupa toda la
       columna en vez de encogerse a su contenido. Asi el texto dispone de los
       246 px de la columna y no de los 222 a los que se encogia. */
    display: flex;
    width: 100%;
    align-items: center;
    gap: .7rem;
    padding: .7rem .95rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--suba-radio);
    background: rgba(255, 255, 255, .05);
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.suba-pie__tarjeta:hover,
.suba-pie__tarjeta:focus-visible {
    border-color: var(--suba-dorado);
    background: rgba(255, 255, 255, .09);
    text-decoration: none;
}

.suba-pie__tarjeta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: var(--suba-blanco);
}

/* `min-width: 0` deja que el bloque se encoja por debajo de su contenido en
   lugar de desbordar la tarjeta, que es lo que hace por omision un elemento
   flexible. Sin esto, un numero mas largo empujaria fuera del borde. */
.suba-pie__tarjeta-texto { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.suba-pie__tarjeta-rotulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.suba-pie__tarjeta-valor { font-size: .95rem; font-weight: 700; color: var(--suba-blanco); }

/* --- Redes --- */

.suba-pie__redes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.suba-pie__red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44x44 es el minimo tactil; el icono dentro mide 18. */
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.suba-pie__red:hover,
.suba-pie__red:focus-visible { background: rgba(255, 255, 255, .14); color: var(--suba-blanco); }

/* --- Columnas de enlaces --- */

.suba-pie__titulo {
    margin: 0 0 .9rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* Dorado sobre el azul profundo: 7,90:1, AAA. */
    color: var(--suba-dorado);
}

.suba-pie__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.suba-pie__enlace,
.suba-pie__dato {
    display: block;
    /* Blanco al 72 % sobre #02122A: 9,89:1, AAA. Y el relleno vertical deja el
       area pulsable en 40 px, que en una lista con separacion propia cumple. */
    color: rgba(255, 255, 255, .72);
    font-size: .93rem;
    line-height: 1.5;
    padding-block: .5rem;
    text-decoration: none;
    transition: color .18s ease;
}

.suba-pie__enlace:hover,
.suba-pie__enlace:focus-visible { color: var(--suba-blanco); text-decoration: underline; }

/* --- Barra inferior --- */

.suba-pie__cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    padding-block: 1.35rem 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.suba-pie__firma,
.suba-pie__origen { margin: 0; font-size: .86rem; color: rgba(255, 255, 255, .62); }

/* El COLOR es obligatorio, no decorativo: sin el, este enlace hereda el azul
   medio del color por omision y sobre el fondo del pie da 1,64 de contraste
   —invisible—. Blanco al 86 % da 13,88:1, AAA.
   Y va subrayado a proposito. Es el unico enlace metido DENTRO de una frase, y
   distinguirlo solo por el color o por la negrita incumpliria la regla de no
   apoyarse en el color para identificar un enlace. El subrayado arranca tenue
   y se enciende al pasar por encima o al recibir el foco. */
.suba-pie__credito {
    color: rgba(255, 255, 255, .86);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-underline-offset: .18em;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.suba-pie__credito:hover,
.suba-pie__credito:focus-visible {
    color: var(--suba-blanco);
    text-decoration-color: currentColor;
}

/* La puerta al panel. Discreta, NO invisible: sigue siendo un enlace de verdad,
   con foco visible, area pulsable propia y un `title` que dice a donde va. Un
   enlace que nadie puede ver ni tabular no es discreto, es un fallo.
   50 % y no 45: al 45 el contraste sale 4,49 y el minimo es 4,5 —falla por una
   centesima, que sigue siendo fallar—. Al 50 da 5,23. */
.suba-pie__puerta {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .3rem;
    border-radius: 4px;
    color: rgba(255, 255, 255, .5);
    font-size: .8rem;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.suba-pie__puerta:hover,
.suba-pie__puerta:focus-visible {
    color: var(--suba-dorado);
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
}

.suba-pie__servicio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suba-pie__servicio .suba-pie__enlace { font-size: .86rem; padding-block: .25rem; }

/* En telefono el cierre se apila alineado a la izquierda: centrar tres lineas
   de largos distintos deja un bloque irregular. */
@media (max-width: 560px) {
    .suba-pie__cierre { flex-direction: column; align-items: flex-start; }
}

/* --- Paginas de error ----------------------------------------------------- */

.suba-cuerpo--error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--suba-gris-claro);
}

.suba-error {
    width: 100%;
    max-width: 38rem;
    margin: 2rem 1.25rem;
    padding: 2.5rem 2rem;
    background: var(--suba-blanco);
    border-top: 6px solid var(--suba-dorado);
    border-radius: var(--suba-radio);
    box-shadow: var(--suba-sombra);
    text-align: center;
}

.suba-error__codigo {
    margin: 0;
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--suba-verde-oscuro);
}

.suba-error__titulo {
    margin: .5rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--suba-verde-oscuro);
}

.suba-error__texto { margin: 0 0 .7rem; }
.suba-error__texto--tenue { color: var(--suba-tinta-tenue); font-size: .94rem; }

.suba-error__referencia {
    margin: 1.2rem 0 0;
    font-size: .88rem;
    color: var(--suba-tinta-tenue);
}

.suba-error__enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.suba-error__enlaces a {
    display: inline-block;
    padding: .45rem .95rem;
    border: 1px solid var(--suba-borde);
    border-radius: var(--suba-radio);
    text-decoration: none;
    font-weight: 600;
}

.suba-error__enlaces a:hover,
.suba-error__enlaces a:focus-visible {
    background: var(--suba-verde-oscuro);
    border-color: var(--suba-verde-oscuro);
    color: var(--suba-blanco);
}

/* --- Preferencias del visitante ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .suba-encabezado, .suba-pie, .suba-saltar { display: none; }
    body.suba-cuerpo { background: #FFF; color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Ergonomía táctil en móvil
   ═══════════════════════════════════════════════════════════════════════

   Añadido tras medir el sitio con emulación real de dispositivo a 375 px.
   Dos defectos concretos, ninguno visible en escritorio:

   1. Los controles de formulario salían a 15,2 px (.95rem). En iOS, TODO
      campo por debajo de 16 px dispara zoom automático al tocarlo: la
      página pega un tirón y hay que volver a alejarla a mano. En el
      buscador de ganado son doce campos, o sea doce tirones seguidos.
      No es cosmético: es la pantalla que más va a usar un ganadero con el
      teléfono en la mano, en una finca.

   2. Los siete enlaces del menú medían 39 px de alto y las migas de pan
      18 px. El mínimo táctil es 44 px (Apple HIG) / 48 dp (Material).
      Con dedos y sin precisión, 18 px es un objetivo que se falla.

   POR QUE VA AQUI Y NO EN CADA MODULO: esta hoja la carga toda pagina del
   sitio. Ponerlo en ganado.css obligaria a repetirlo en fincas, maquinaria,
   noticias, home, paginas, busqueda, categorias y faq — y a acordarse en el
   siguiente modulo que se escriba. Aqui se aplica solo, tambien a lo que
   todavia no existe.

   POR QUE EL PREFIJO «.suba-cuerpo»: las hojas de modulo se cargan DESPUES
   de esta, y sus reglas de clase (0,1,0) le ganarian a un selector de
   elemento (0,0,1) por mucho que este mas abajo. Con el prefijo sube a
   (0,1,1) y manda, sin necesidad de !important.                            */

@media (max-width: 768px) {

    /* 16 px exactos: el umbral por debajo del cual iOS hace zoom solo. */
    .suba-cuerpo input:not([type="hidden"]),
    .suba-cuerpo select,
    .suba-cuerpo textarea {
        font-size: 16px;
    }

    /* Altura tactil comoda sin cambiar el aspecto del control. */
    .suba-cuerpo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .suba-cuerpo select {
        min-height: 44px;
    }

    /* Casillas y opciones: se agranda el area, no el dibujo. */
    .suba-cuerpo input[type="checkbox"],
    .suba-cuerpo input[type="radio"] {
        width: 22px;
        height: 22px;
    }

    /* Pie: los enlaces salian a 38 px y el logotipo a 40. En el pie se pulsa
       tanto como en la cabecera —telefono, correo, WhatsApp— y ahi fallar el
       toque manda al usuario a otra pagina. Se agranda el AREA, no la letra. */
    .suba-pie__enlace,
    .suba-pie__dato {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: .35rem;
    }

    .suba-pie__logo { padding-block: 2px; }

    /* Acceso: en un telefono conviven marca, este boton y la hamburguesa en
       375 px. El rotulo se retira y queda el candado, que es reconocible por si
       solo; el nombre sigue estando para el lector de pantalla. */
    .suba-acceso__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

    .suba-acceso__boton { padding: .4rem .5rem; gap: .2rem; }

    /* Menu principal: de 39 px a 44 px sin tocar el tamano de la letra. */
    .suba-menu__enlace {
        padding-top: .62rem;
        padding-bottom: .62rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Migas de pan de todos los modulos: comparten el sufijo «-migas». */
    .suba-cuerpo [class*="-migas"] a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-inline: .15rem;
    }

    /* La marca del encabezado tambien es un enlace, y medía 39 px.
       OJO CON LA DIRECCION: cuando se escribio esta regla la marca era solo
       texto (nombre sobre lema) y `column` era lo correcto. Al anadir el
       emblema dejo de serlo, y como este selector tiene mas especificidad
       (0,2,0) que `.suba-marca` (0,1,0), imponia el apilado y la marca pasaba
       de 44 px a 73. Va en fila: emblema a la izquierda, texto a la derecha. */
    .suba-cuerpo .suba-marca {
        min-height: 44px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Menú plegable en móvil
   ═══════════════════════════════════════════════════════════════════════

   El problema, medido a 375 px antes de esto: los siete enlaces del menú se
   repartían en DOS líneas por «flex-wrap», y la cabecera acababa midiendo
   179 px en una pantalla de 812 — el 22 % del teléfono, en todas las páginas,
   antes de ver una palabra del contenido.

   Ni una sola regla de `min-width` había en esta hoja: los módulos (home,
   ganado, fincas…) sí son móvil-primero, pero la cabecera y el pie, que se
   pintan en TODAS las páginas, nunca tuvieron tratamiento móvil.

   MEJORA PROGRESIVA: nada se pliega hasta que nav.js marca <html> con
   «js-nav». Sin JavaScript el menú se ve entero, que es el comportamiento
   actual; plegar por CSS y depender del JS para abrir dejaría a ese visitante
   sin navegación ninguna.                                                    */

/* En escritorio el botón no existe. */
.suba-menu__boton { display: none; }

/* 1050 px y no 768.
   El corte estaba en 768 cuando la barra solo llevaba marca y menu. Al entrar
   el boton de «Ingresar», entre 769 y ~1050 la fila ya no cabe en una linea:
   medido, a 885 px la cabecera pasaba de 76 a 132 px y a 785 px a 182, con el
   grupo de la derecha caido a una segunda fila. El punto de corte de un menu no
   es una cifra redonda, es el ancho en el que DEJA DE CABER, y ese ancho cambia
   cuando cambia lo que hay en la barra.
   Ojo: el bloque de ergonomia tactil sigue en 768, que es otra cosa —tiene que
   ver con el dedo, no con el espacio— y no debe moverse con este. */
@media (max-width: 1100px) {

    .js-nav .suba-menu__boton {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 44px;
        padding: .5rem .85rem;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: var(--suba-radio);
        background: transparent;
        color: #FFFFFF;
        font: inherit;
        font-size: .95rem;
        font-weight: 600;
        cursor: pointer;
    }

    .js-nav .suba-menu__boton:hover { background: rgba(255, 255, 255, .12); }

    /* Las tres barras, dibujadas en CSS: ni imagen, ni fuente de iconos,
       ni emoji. La del medio es el propio elemento; las otras dos, sus
       pseudoelementos. */
    .suba-menu__barras,
    .suba-menu__barras::before,
    .suba-menu__barras::after {
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    .suba-menu__barras {
        position: relative;
    }

    .suba-menu__barras::before,
    .suba-menu__barras::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .suba-menu__barras::before { top: -6px; }
    .suba-menu__barras::after  { top:  6px; }

    /* Abierto: la barra del medio desaparece y las otras dos cruzan. */
    .js-nav [aria-expanded="true"] .suba-menu__barras { background: transparent; }
    .js-nav [aria-expanded="true"] .suba-menu__barras::before { top: 0; transform: rotate(45deg); }
    .js-nav [aria-expanded="true"] .suba-menu__barras::after  { top: 0; transform: rotate(-45deg); }

    .js-nav .suba-menu__barras::before,
    .js-nav .suba-menu__barras::after {
        transition: transform .18s ease, top .18s ease;
    }

    /* La lista pasa de barra horizontal a panel vertical, y solo se ve
       cuando el botón la abre.
       El `flex-basis: 100%` solo se aplica CON el panel abierto: si fuera fijo,
       el <nav> vacío seguiría forzando una fila entera y un hueco de 12 px en la
       cabecera aunque no se viera nada. */
    .js-nav .suba-menu { flex-basis: auto; }

    .js-nav .suba-menu__lista { display: none; }

    /* El menu abierto FLOTA, ya no ocupa sitio en la fila.
       Antes crecia a `flex-basis: 100%` dentro de la fila de la cabecera. Eso
       funcionaba mientras el menu era el ultimo elemento; al entrar el control
       de acceso, un elemento a 100 % en medio empujaba a la tercera linea todo
       lo que viniera detras. Sacarlo del flujo lo arregla de raiz y ademas se ve
       mejor: el menu se despliega ENCIMA en vez de estirar la pagina hacia
       abajo. El `z-index` lo pone por delante del hero. */
    .js-nav .suba-menu__lista[data-abierto] {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        position: absolute;
        top: calc(100% + .55rem);
        left: 0;
        right: 0;
        z-index: 60;
        padding: .5rem;
        border-radius: var(--suba-radio);
        background: var(--suba-azul-hondo);
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 18px 40px rgba(2, 8, 20, .45);
    }

    .js-nav .suba-menu__lista[data-abierto] .suba-menu__enlace {
        display: flex;
        width: 100%;
        padding-inline: .9rem;
    }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
    .js-nav .suba-menu__barras::before,
    .js-nav .suba-menu__barras::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Emblema de la marca en la cabecera
   ═══════════════════════════════════════════════════════════════════════

   El logo es un emblema circular que YA contiene el nombre y el lema a 700 px.
   A 44 px ese texto es ilegible, asi que la imagen aporta el brahman y el
   martillo —que es lo que se reconoce de un vistazo— y el nombre lo sigue
   llevando el texto de al lado, que ademas es lo que lee un buscador y un
   lector de pantalla. Por eso el `alt` de la imagen va VACIO: repetir el
   nombre seria anunciarlo dos veces.                                        */

.suba-marca {
    display: inline-flex;
    /* `flex-direction: row` NO es redundante: la regla original de la linea 96
       declara `column` para apilar nombre sobre lema, y como esta regla tiene la
       misma especificidad, solo se sobreescriben las propiedades que se repiten.
       Sin esta linea el emblema se apila ENCIMA del texto y la marca pasa de
       38 px a 73, que era el 60 % del exceso de altura de la cabecera. */
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}

.suba-marca__emblema {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    /* El emblema es azul marino sobre fondo transparente y la cabecera es
       verde oscuro: un disco blanco lo separa y respeta el arte original,
       que trae su propio anillo exterior. */
    background: #FFFFFF;
    border-radius: 50%;
    padding: 1px;
}

.suba-marca__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 768px) {
    /* En movil el emblema se achica y el lema desaparece: en 375 px compite
       con el nombre y con el boton del menu por la misma linea. */
    .suba-marca__emblema { width: 38px; height: 38px; }
    .suba-marca__lema { display: none; }

    /* La fila se aprieta. Medido en 375 px: marca 200 + acciones 164 + huecos
       32 = 396 sobre 335 disponibles, y el grupo se caia a una segunda linea,
       lo que ademas mandaba el panel de acceso fuera de la pantalla por la
       izquierda. Se recorta por los tres lados. */
    .suba-encabezado__fila { gap: .5rem; }

    /* El rotulo del boton de menu se retira y queda la hamburguesa: 44 px de
       objetivo tactil se conservan, y el nombre sigue ahi para el lector de
       pantalla. */
    .js-nav .suba-menu__boton-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .js-nav .suba-menu__boton { padding-inline: .7rem; }
}

@media (max-width: 420px) {
    /* Telefonos estrechos: el nombre baja un punto para no rozar los botones. */
    .suba-marca__nombre { font-size: 1.15rem; letter-spacing: .04em; }
    .suba-marca__emblema { width: 34px; height: 34px; }
}