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

html, body{
    height: 100%;
    margin: 0;
    padding: 0; 
    overflow: hidden; 
    box-sizing: border-box;
    color: #7A7A7A;
    font-family: 'Montserrat', sans-serif;
}


.container {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: 100vh;
    padding: 0;
}

.container-background {  
    background: url('../imagenes/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 20px;
    width: 65%;
    height: 100%;
    overflow: auto;
}

.sidebar {
    width: 35%;
    height: 100%;
    overflow: auto; 
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

h2{
    color: #d00606;
    font-weight: bold;
    font-size: 22px;
    font-weight: 700;
    line-height: 20px;
}

@media (max-width: 1024px) {
    html, body { overflow: auto; }

   .container {
        position: relative;
        height: auto; 
        min-height: 100vh; 
        justify-content: center;
        padding: 20px 0 80px;
        display: block; 
    }

    .container-background {
        display: none;
    }
    body{
        background-image: url('../imagenes/fondo.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 25px;

    }

    .sidebar {
        position: relative; 
        left: auto; 
        top: auto; 
        transform: none; 
        width: calc(100% - 80px); 
        max-width: 600px;
        max-height: none; 
        height: auto;
        overflow: visible; 
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
        z-index: 2;
        background: #fff; 
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 auto; 
    }
    .section-image img { height: auto; max-width: 100%; }
}

@media (max-width: 600px) {
    .container { height: auto; padding: 20px 0 80px; }
    .container-background { height: auto; min-height: 24vh; }
    .sidebar {
        width: calc(100% - 48px); 
        max-width: 480px;
    }
    .section-banner-top { height: auto; align-items: center; }
}

.proximamente {
  font-size: 36px;
  font-weight: 700;
  color: #b30000; 
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  text-align: center;
  border-radius: 12px;
  padding: 30px 50px;
  margin: 20px auto;
  width: fit-content;
  animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Boton flotante de Telegram */
/* Colapsado es un circulo; la etiqueta se despliega al hover/foco. */
.telegram-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;
    display: flex;
    /*
     * row-reverse: el icono queda pegado al borde derecho, que es el unico
     * que no se mueve (el boton esta anclado a right y crece hacia la
     * izquierda). Con el icono a la izquierda, cada hover lo arrastraba.
     */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 56px;
    height: 56px;
    padding: 0 14px;
    /*
     * 28px = la mitad de los 56 de alto, o sea circulo exacto en reposo.
     *
     * Es importante que sea 28 y no 999: al interpolar desde 999 el radio
     * efectivo se recorta a 28 durante casi todo el recorrido (cualquier
     * valor mayor al alto/2 se ve igual), asi que la caja se ensanchaba con
     * las puntas todavia redondas del todo. Eso era la pastilla. Partiendo
     * de 28 el radio baja de verdad desde el primer frame.
     */
    border-radius: 28px;
    background-color: #279ad1;
    background-image: linear-gradient(180deg, #38aeeb 0%, #279ad1 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    /*
     * Curva pareja (arranca y termina despacio). La anterior salia disparada
     * en los primeros milisegundos, que es lo que hacia sentir el gesto
     * brusco. Se hereda al span de la etiqueta.
     */
    --tg-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --tg-dur: 0.55s;
    /*
     * El transform se arma con variables en vez de transicionarse: la
     * animacion corre sobre --tg-breath, no sobre transform, asi no compiten
     * por la misma propiedad y el levante del hover sigue funcionando.
     */
    transform: translateY(var(--tg-lift))
               scale(calc(1 + var(--tg-amp) * var(--tg-breath) * 0.06));
    animation: tg-breath 2.6s ease-in-out infinite;
    /*
     * El radio se escribe en longhand para poder darle un retardo distinto al
     * salir: al entrar baja enseguida (se adelanta al ensanchado), y al salir
     * espera a que la caja se cierre antes de volver a circulo. Sin ese
     * retardo, al salir el radio llegaba a 28 con la caja aun ancha y volvia
     * a verse la pastilla.
     */
    transition-property: background-color, box-shadow, --tg-lift, --tg-amp,
                         border-radius;
    transition-duration: 0.45s, 0.45s, 0.45s, 0.7s, 0.25s;
    transition-timing-function: var(--tg-ease);
    transition-delay: 0s, 0s, 0s, 0s, 0.3s;
}

/*
 * Oscurecido del hover. Un degradado no interpola con transition, asi que
 * el fondo queda fijo y lo que se funde es esta capa. Con z-index -1 pinta
 * por encima del fondo del boton pero por debajo del texto y el avion.
 */
.telegram-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.16);
    opacity: 0;
    transition: opacity 0.45s var(--tg-ease);
    pointer-events: none;
}

.telegram-float:hover::after,
.telegram-float:focus-visible::after {
    opacity: 1;
}

/* Halo que acompaña la respiracion. La sombra exterior no se pinta debajo
   del boton, asi que el verde no le ensucia el fondo. */
.telegram-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.5);
    pointer-events: none;
    transform: scale(calc(1 + var(--tg-amp) * var(--tg-breath) * 0.26));
    opacity: calc(var(--tg-amp) * (1 - var(--tg-breath) * 0.85));
}

/*
 * El avion viene del diseno (Figma 78:25), dibujado sobre un lienzo de
 * 56x56 que es el propio circulo del boton. La caja aporta 28 al flex
 * (14+28+14 = 56) y el viewBox recorta los 28 centrales del lienzo;
 * overflow:visible deja asomar el resto del trazo, que cae exactamente
 * donde lo ubico el diseno. El centrado optico ya viene resuelto ahi.
 */
.telegram-float-plane {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    overflow: visible;
}

/*
 * Globo a la izquierda del circulo, no un bloque que ensancha el boton.
 *
 * Antes la etiqueta era un hijo en flujo con max-width animado: como el boton
 * esta anclado a right y crecia hacia la izquierda, el borde izquierdo
 * arrastraba al icono (-161px) y al texto (-149px) en cada hover. Sacandola
 * del flujo con position:absolute, el circulo no cambia de tamano y no se
 * mueve nada; solo entra el globo con fade y 8px de deslizamiento.
 */
.telegram-float-label {
    /*
     * Grid de una columna para tener las dos cosas a la vez:
     *
     *   grid-template-columns: max-content  la columna mide lo que la linea
     *       mas ancha (el numero) y no cambia cuando la caja se abre.
     *   justify-content: end                la columna se apoya en el borde
     *       derecho, que es el fijo: por eso el texto no se desliza.
     *   justify-items: start                las dos lineas comparten su borde
     *       izquierdo, o sea el label queda alineado a la izquierda.
     */
    display: grid;
    grid-template-columns: max-content;
    justify-content: end;
    justify-items: start;
    text-align: left;
    line-height: 1.15;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    /*
     * Solo se anima max-width, que mueve el borde izquierdo. El derecho queda
     * fijo junto al icono y el texto esta anclado ahi, asi que no se desplaza.
     */
    transition: max-width var(--tg-dur) var(--tg-ease),
                opacity 0.4s var(--tg-ease) 0.08s;
}

/* El aire hacia el icono va aca y no como margin animado: dentro de la caja
   recortada no ocupa nada mientras el boton esta colapsado. */
.telegram-float-caption,
.telegram-float-handle {
    padding-right: 12px;
}

/* Label chico arriba; el numero abajo, protagonista. */
.telegram-float-caption {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.telegram-float-handle {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Solo donde existe hover real: en tactil queda siempre el circulo. */
@media (hover: hover) {
    .telegram-float:hover {
        border-radius: 12px;
        transition-delay: 0s, 0s, 0s, 0s, 0s;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
        /* No se pausa la animacion: se le baja la amplitud a cero, que es lo
           que da la frenada suave. Pausarla la cortaria en seco. */
        --tg-amp: 0;
        --tg-lift: -2px;
    }

    .telegram-float:hover .telegram-float-label {
        max-width: 15rem;
        opacity: 1;
    }
}

/* El teclado despliega el numero en cualquier dispositivo. */
.telegram-float:focus-visible {
    border-radius: 12px;
    transition-delay: 0s, 0s, 0s, 0s, 0s;
    outline: 3px solid #fff;
    outline-offset: 2px;
    --tg-amp: 0;
}

.telegram-float:focus-visible .telegram-float-label {
    max-width: 15rem;
    opacity: 1;
}

/*
 * En tactil no hay hover, asi que la etiqueta va SIEMPRE visible y por fuera:
 * un globo a la izquierda del circulo. Sigue dentro del <a>, asi que tocarla
 * tambien abre Telegram. Se quita el scale de la respiracion del boton (no del
 * halo) para que el globo no vibre ni se desplace; el anillo sigue latiendo.
 */
@media (hover: none) {
    /*
     * En tactil queda solo el circulo flotando. La etiqueta se despliega con
     * el hover, que aca no existe, asi que se oculta del todo: display:none
     * la saca tambien del arbol de accesibilidad, y el nombre del boton lo
     * sigue dando su aria-label.
     */
    .telegram-float-label {
        display: none;
    }

    /* Sin etiqueta el boton nunca se ensancha: el ancho fijo evita que el
       padding lateral lo estire y lo deja en 56 exactos. */
    .telegram-float {
        width: 56px;
        padding: 0;
        transform: translateY(var(--tg-lift));
    }
}

@media (max-width: 480px) {
    .telegram-float {
        right: 16px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .telegram-float,
    .telegram-float-label {
        transition: none;
    }

    .telegram-float {
        animation: none;
        transform: none;
    }

    .telegram-float::before {
        display: none;
    }
}