/* =============================================================================
   Sistema de diseño de ibsoft.mx
   -----------------------------------------------------------------------------
   Reemplaza a la plantilla HeroBiz de BootstrapMade. Sin frameworks: rejilla con
   CSS Grid y una sola familia tipográfica.

   Orden del archivo:
     1. Tokens
     2. Reset y base
     3. Tipografía
     4. Layout (contenedor, secciones, rejillas)
     5. Componentes
     6. Encabezado y pie
     7. Utilidades
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Azul de la marca. El 700 es el del logotipo; el 600 es el de acción, más
       vivo, para que un botón no compita con el encabezado. */
    --ibs-azul-900: #0a2352;
    --ibs-azul-800: #0e3272;
    --ibs-azul-700: #13429a;
    --ibs-azul-600: #1c61e2;
    --ibs-azul-500: #3279fc;
    --ibs-azul-100: #e3ecfd;
    --ibs-azul-50: #f2f6fe;

    /* Neutros */
    --ibs-tinta: #131821;
    --ibs-gris-700: #39414f;
    --ibs-gris-500: #6b7483;
    --ibs-gris-300: #c9cfd9;
    --ibs-gris-200: #e4e8ee;
    --ibs-gris-100: #f1f4f8;
    --ibs-blanco: #ffffff;

    /* De estado */
    --ibs-exito: #0f7b4f;
    --ibs-exito-fondo: #e6f5ee;
    --ibs-aviso: #9a5b00;
    --ibs-aviso-fondo: #fdf3e2;
    --ibs-error: #b3261e;
    --ibs-error-fondo: #fdeceb;

    /* Roles: lo que usan los componentes. Cambiar estos, no los de arriba. */
    --fondo: var(--ibs-blanco);
    --fondo-alterno: var(--ibs-gris-100);
    --fondo-realce: var(--ibs-azul-50);
    --superficie: var(--ibs-blanco);
    --texto: var(--ibs-tinta);
    --texto-suave: var(--ibs-gris-500);
    --texto-inverso: var(--ibs-blanco);
    --borde: var(--ibs-gris-200);
    --acento: var(--ibs-azul-600);
    --acento-hover: var(--ibs-azul-700);
    --acento-suave: var(--ibs-azul-100);
    --oscuro: var(--ibs-azul-900);

    /* Tipografía */
    --fuente: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --texto-xs: 0.8125rem;
    --texto-sm: 0.9375rem;
    --texto-base: 1.0625rem;
    --texto-lg: 1.1875rem;
    --texto-xl: 1.375rem;
    --texto-2xl: 1.75rem;
    --texto-3xl: 2.25rem;
    --texto-4xl: 3rem;

    /* Espaciado: escala de 4px */
    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e6: 1.5rem;
    --e8: 2rem;
    --e12: 3rem;
    --e16: 4rem;
    --e24: 6rem;

    /* Forma */
    --radio-sm: 6px;
    --radio: 10px;
    --radio-lg: 16px;
    --radio-pill: 999px;

    --sombra-sm: 0 1px 2px rgba(19, 24, 33, .06), 0 1px 3px rgba(19, 24, 33, .08);
    --sombra: 0 4px 12px rgba(19, 24, 33, .07), 0 2px 4px rgba(19, 24, 33, .05);
    --sombra-lg: 0 18px 40px rgba(10, 35, 82, .12);

    --ancho-contenedor: 1180px;
    --transicion: 160ms ease;

    /* El portal va SIEMPRE en claro: es una pagina de venta, y asi el folleto, el
       listado de AppSource y el sitio se ven igual. Sin esto, un visitante con
       Windows en modo oscuro veria los campos y los desplegables en oscuro sobre
       un fondo blanco. */
    color-scheme: light;
}

/* -----------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* que el encabezado fijo no tape el ancla */
}

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

body {
    font-family: var(--fuente);
    font-size: var(--texto-base);
    line-height: 1.65;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}

/* -----------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, var(--texto-4xl)); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, var(--texto-3xl)); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p { text-wrap: pretty; }

.entradilla {
    font-size: var(--texto-lg);
    color: var(--texto-suave);
    max-width: 62ch;
}

.antetitulo {
    display: inline-block;
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--acento);
}

/* -----------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding-inline: var(--e4);
}

.seccion { padding-block: clamp(var(--e16), 8vw, var(--e24)); }
.seccion--alterna { background: var(--fondo-alterno); }
.seccion--oscura { background: var(--oscuro); color: var(--texto-inverso); }
.seccion--oscura .entradilla,
.seccion--oscura .seccion__titulo p { color: rgba(255, 255, 255, .78); }

.seccion__titulo { max-width: 46rem; margin-bottom: var(--e12); }
.seccion__titulo--centrado { margin-inline: auto; text-align: center; }
.seccion__titulo h2 { margin-block: var(--e2) var(--e3); }
.seccion__titulo p { color: var(--texto-suave); font-size: var(--texto-lg); }

.rejilla { display: grid; gap: var(--e6); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* -----------------------------------------------------------------------------
   5. Componentes
   -------------------------------------------------------------------------- */

/* Botones */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: var(--e3) var(--e6);
    border: 1px solid transparent;
    border-radius: var(--radio);
    font-size: var(--texto-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion);
}

.boton:hover { text-decoration: none; transform: translateY(-1px); }
.boton:active { transform: none; }

.boton--primario { background: var(--acento); color: var(--ibs-blanco); }
.boton--primario:hover { background: var(--acento-hover); color: var(--ibs-blanco); }

.boton--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton--secundario:hover { background: var(--fondo-alterno); color: var(--texto); border-color: var(--ibs-gris-300); }

.boton--fantasma { background: transparent; color: var(--acento); }
.boton--fantasma:hover { background: var(--acento-suave); color: var(--acento-hover); }

.boton--claro { background: var(--ibs-blanco); color: var(--ibs-azul-800); }
.boton--claro:hover { background: var(--ibs-azul-50); color: var(--ibs-azul-900); }

.boton--contorno-claro { background: transparent; color: var(--ibs-blanco); border-color: rgba(255, 255, 255, .45); }
.boton--contorno-claro:hover { background: rgba(255, 255, 255, .12); color: var(--ibs-blanco); }

.boton--grande { padding: var(--e4) var(--e8); font-size: var(--texto-base); }
.boton--bloque { width: 100%; }

.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Tarjetas */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: var(--e8);
    transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}

.tarjeta--enlace:hover { box-shadow: var(--sombra-lg); transform: translateY(-3px); border-color: var(--acento-suave); }
.tarjeta h3 { margin-bottom: var(--e2); }
.tarjeta p { color: var(--texto-suave); font-size: var(--texto-sm); }

.tarjeta__icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--e4);
    border-radius: var(--radio);
    background: var(--acento-suave);
    color: var(--acento);
}

.tarjeta__icono svg { width: 24px; height: 24px; }

/* Etiquetas */
.etiqueta {
    display: inline-block;
    padding: var(--e1) var(--e3);
    border-radius: var(--radio-pill);
    background: var(--acento-suave);
    color: var(--acento);
    font-size: var(--texto-xs);
    font-weight: 600;
}

.etiqueta--destacada { background: var(--acento); color: var(--ibs-blanco); }

/* Lista de palomas */
.lista-check { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: var(--e3); align-items: start; }
.lista-check li::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: var(--radio-pill);
    background: var(--acento-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231c61e2'%3E%3Cpath d='M8.1 13.5 5 10.4l1.2-1.2 1.9 1.9 5.7-5.7L15 6.6z'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* Precios */
.precio { display: flex; align-items: baseline; gap: var(--e1); margin-block: var(--e4) var(--e1); }
.precio__moneda { font-size: var(--texto-lg); font-weight: 600; color: var(--texto-suave); }
.precio__monto { font-size: var(--texto-3xl); font-weight: 700; letter-spacing: -0.03em; }
.precio__periodo { font-size: var(--texto-sm); color: var(--texto-suave); }

.tarjeta-plan { display: flex; flex-direction: column; }
.tarjeta-plan--destacada { border-color: var(--acento); box-shadow: var(--sombra-lg); position: relative; }
.tarjeta-plan .lista-check { margin-block: var(--e6); flex: 1; font-size: var(--texto-sm); }

/* Formularios */
.campo { display: grid; gap: var(--e2); }
.campo label { font-size: var(--texto-sm); font-weight: 600; }

.campo input, .campo textarea, .campo select {
    width: 100%;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo input:focus, .campo textarea:focus, .campo select:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}

.campo textarea { min-height: 150px; resize: vertical; }
.campo__error { color: var(--ibs-error); font-size: var(--texto-sm); }

.formulario { display: grid; gap: var(--e4); }
.formulario__fila { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Avisos */
.aviso {
    display: flex;
    gap: var(--e3);
    padding: var(--e4) var(--e6);
    border-radius: var(--radio);
    border: 1px solid transparent;
    font-size: var(--texto-sm);
}

.aviso--exito { background: var(--ibs-exito-fondo); border-color: var(--ibs-exito); color: var(--ibs-exito); }
.aviso--atencion { background: var(--ibs-aviso-fondo); border-color: var(--ibs-aviso); color: var(--ibs-aviso); }
.aviso--error { background: var(--ibs-error-fondo); border-color: var(--ibs-error); color: var(--ibs-error); }

/* Acordeón (preguntas frecuentes) */
.acordeon { display: grid; gap: var(--e3); }

.acordeon details {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: var(--e4) var(--e6);
}

.acordeon summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--e4);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.acordeon summary::-webkit-details-marker { display: none; }

.acordeon summary::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    transition: transform var(--transicion);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 13.2 4.4 7.6 5.6 6.4 10 10.8l4.4-4.4 1.2 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.acordeon details[open] summary::after { transform: rotate(180deg); }
.acordeon details[open] summary { color: var(--acento); }
.acordeon details p { margin-top: var(--e3); color: var(--texto-suave); }

/* Testimonios */
.testimonio { display: flex; flex-direction: column; gap: var(--e4); height: 100%; }
.testimonio blockquote { font-size: var(--texto-lg); line-height: 1.5; flex: 1; }
.testimonio blockquote::before { content: "\201C"; }
.testimonio blockquote::after { content: "\201D"; }
.testimonio figcaption { font-size: var(--texto-sm); }
.testimonio figcaption strong { display: block; }
.testimonio figcaption span { color: var(--texto-suave); }

/* Franja de cierre */
.franja-cta {
    background: linear-gradient(135deg, var(--ibs-azul-800), var(--ibs-azul-600));
    color: var(--ibs-blanco);
    border-radius: var(--radio-lg);
    padding: clamp(var(--e8), 5vw, var(--e16));
    text-align: center;
}

.franja-cta p { color: rgba(255, 255, 255, .85); margin-block: var(--e3) var(--e8); }
.franja-cta .grupo-botones { justify-content: center; }

/* -----------------------------------------------------------------------------
   6. Encabezado y pie
   -------------------------------------------------------------------------- */
.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--e3) var(--e6);
    background: var(--acento);
    color: var(--ibs-blanco);
    border-radius: 0 0 var(--radio) 0;
}

.saltar-al-contenido:focus { left: 0; top: 0; }

.encabezado {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde);
}

.encabezado__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e6);
    min-height: 68px;
}

.encabezado__logo img { height: 34px; width: auto; }

/* En escritorio el nav y sus acciones van en una sola línea; sin esto el botón
   de "Prueba gratis" caía debajo del menú. */
.nav-principal { display: flex; align-items: center; gap: var(--e8); }
.nav-principal ul { display: flex; align-items: center; gap: var(--e6); list-style: none; margin: 0; padding: 0; }
.nav-principal a { color: var(--texto); font-size: var(--texto-sm); font-weight: 500; }
.nav-principal a:hover, .nav-principal a[aria-current="page"] { color: var(--acento); text-decoration: none; }

.nav-principal__acciones { display: flex; align-items: center; gap: var(--e3); }

/* Submenú accesible sin JavaScript */
.submenu { position: relative; }
.submenu > button {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: var(--texto-sm);
    font-weight: 500;
    color: var(--texto);
}
.submenu > button:hover { color: var(--acento); }

.submenu__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    translate: -50% 0;
    display: grid;
    gap: var(--e1);
    min-width: 230px;
    padding: var(--e3);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicion), visibility var(--transicion);
}

.submenu:hover .submenu__panel,
.submenu:focus-within .submenu__panel { opacity: 1; visibility: visible; }

.submenu__panel a { padding: var(--e2) var(--e3); border-radius: var(--radio-sm); font-size: var(--texto-sm); }
.submenu__panel a:hover { background: var(--fondo-alterno); text-decoration: none; }

/* Menú de teléfono: casilla fuera de pantalla (no display:none, que la sacaría del
   orden de tabulación) y etiqueta como botón. Sin JavaScript. */
.menu-movil-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-movil-toggle:focus-visible + .encabezado__barra .menu-movil-boton {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}
.menu-movil-boton { display: none; }

.pie {
    background: var(--oscuro);
    color: rgba(255, 255, 255, .72);
    padding-block: var(--e16) var(--e8);
    font-size: var(--texto-sm);
}

.pie a { color: rgba(255, 255, 255, .72); }
.pie a:hover { color: var(--ibs-blanco); }
.pie h4 { color: var(--ibs-blanco); font-size: var(--texto-sm); margin-bottom: var(--e4); letter-spacing: .04em; text-transform: uppercase; }
.pie ul { list-style: none; padding: 0; display: grid; gap: var(--e2); }
/* El logotipo va tal cual sobre el azul del pie, sin recuadro detras (decision del
   usuario). Su linea inferior —"Intelligent Business Software", en azul— se lee
   con poco contraste; el nombre de la empresa queda completo en el bloque legal. */
.pie__marca img { height: 56px; width: auto; margin-bottom: var(--e4); }

.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e4);
    margin-top: var(--e12);
    padding-top: var(--e6);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--texto-xs);
}

.pie__legal ul { display: flex; flex-wrap: wrap; gap: var(--e6); }

/* -----------------------------------------------------------------------------
   7. Utilidades
   -------------------------------------------------------------------------- */
.centrado { text-align: center; }
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.apilado { display: grid; gap: var(--e4); }
.mt-8 { margin-top: var(--e8); }

/* -----------------------------------------------------------------------------
   Teléfono
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .menu-movil-boton {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        background: var(--superficie);
        cursor: pointer;
    }

    .nav-principal {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: var(--e4);
        background: var(--fondo);
        border-bottom: 1px solid var(--borde);
        box-shadow: var(--sombra);
    }

    .menu-movil-toggle:checked ~ .encabezado__barra .nav-principal { display: flex; flex-direction: column; align-items: stretch; }

    .nav-principal ul { flex-direction: column; align-items: stretch; gap: var(--e1); }
    .nav-principal a, .submenu > button { display: block; width: 100%; padding: var(--e3); border-radius: var(--radio-sm); }
    .nav-principal a:hover { background: var(--fondo-alterno); }

    .submenu__panel {
        position: static;
        translate: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: 0;
        padding-left: var(--e4);
    }

    .nav-principal__acciones { flex-direction: column; align-items: stretch; margin-top: var(--e3); }
    .nav-principal__acciones .boton { width: 100%; }
}

/* -----------------------------------------------------------------------------
   Tira de logotipos de clientes
   -------------------------------------------------------------------------- */
.tira-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--e6), 5vw, var(--e16));
}

/* Los logotipos vienen de fuentes distintas y con colores muy dispares. En escala de
   grises no compiten con la pagina; al pasar el raton recuperan su color. */
.tira-logos img {
    height: 42px;
    width: auto;
    filter: grayscale(1);
    opacity: .62;
    transition: filter var(--transicion), opacity var(--transicion);
}

.tira-logos img:hover { filter: none; opacity: 1; }

/* -----------------------------------------------------------------------------
   Documentos legales (aviso de privacidad, terminos, subencargados)
   -------------------------------------------------------------------------- */
.documento-legal { max-width: 820px; }

.documento-legal h1 { font-size: var(--texto-3xl); margin-bottom: var(--e4); }

.documento-legal h2 {
    font-size: var(--texto-xl);
    margin-top: var(--e12);
    margin-bottom: var(--e4);
}

.documento-legal p,
.documento-legal li { line-height: 1.7; }

.documento-legal p { margin-block: var(--e4); }

.documento-legal ul,
.documento-legal ol { padding-left: var(--e6); margin-block: var(--e4); }

.documento-legal li + li { margin-top: var(--e2); }

.documento-legal hr { border: 0; border-top: 1px solid var(--borde); margin-block: var(--e8); }

.documento-legal a { overflow-wrap: anywhere; }

.documento-legal__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding-bottom: var(--e6);
    margin-bottom: var(--e6);
    border-bottom: 1px solid var(--borde);
}

.documento-legal__version { margin: 0; color: var(--texto-suave); font-size: var(--texto-sm); }

/* En celular la tabla se desplaza dentro de su caja, sin empujar la pagina. */
.tabla-contenedor {
    overflow-x: auto;
    margin-block: var(--e6);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.documento-legal table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.documento-legal th,
.documento-legal td {
    padding: var(--e3) var(--e4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--borde);
}

.documento-legal th { background: var(--fondo-alterno); font-weight: 600; }

.documento-legal tbody tr:last-child td { border-bottom: 0; }

/* -----------------------------------------------------------------------------
   Aviso de actualizacion de documentos legales (temporal, 30 dias)
   -------------------------------------------------------------------------- */
.aviso-actualizacion {
    background: var(--ibs-azul-50);
    border-bottom: 1px solid var(--ibs-azul-100);
    font-size: var(--texto-sm);
}

.aviso-actualizacion__barra {
    display: flex;
    align-items: center;
    gap: var(--e4);
    padding-block: var(--e3);
}

.aviso-actualizacion__barra p { margin: 0; flex: 1; }

.aviso-actualizacion__cerrar {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radio-pill);
    background: transparent;
    color: var(--texto);
    font-size: var(--texto-xl);
    line-height: 1;
    cursor: pointer;
}

.aviso-actualizacion__cerrar:hover { background: var(--ibs-azul-100); }