body{
    font-family: "Rubik", sans-serif;
}

.cabecera{
    background: #ff6101;
    text-align: center;
    color: white;
}
.cabecera h1{
    font-size: 70px;
}


.atencion{
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.atencion img{
    width: 50px;
}


.efecto{
    padding: 0;
}
.efecto img{
    width: 100%;
}


.linea{
    background: #045075;
    background: #ff6101;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 30px 0;
}


.azul{
    background: #045075;
    color: white;
    font-size:1.2rem;
    padding: 30px 30px 120px 30px;
}


@media screen and (max-width:1400px){

}

@media screen and (max-width:1200px){

}

@media screen and (max-width:992px){

}

@media screen and (max-width:768px){
    .atencion span{
        width: 100%;
        display: inline-block;
    }
}

@media screen and (max-width:576px){
    
}


.chat{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background: #24d366;
    font-weight: bold;
    font-size: 20px;
    color: white;
    padding: 6px 17px;
    border-radius: 20px;

    animation-name: pulse;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-iteration-count: 100;
}
@keyframes pulse {
    from,to {
        transform: scale3d(1,1,1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }
}

.pulse {
    animation-name: pulse
}



/* CSS */
.btn-orange{
    --btn-bg: #ff7a00;           /* Naranja base */
    --btn-bg-hover: #e86d00;     /* Más oscuro al hover */
    --btn-bg-active: #cc6000;    /* Aún más oscuro al presionar */
    --btn-shadow: rgba(255,122,0,.45);

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:.9rem 1.25rem;
    border-radius:999px;
    border:none;
    background: linear-gradient(180deg, var(--btn-bg), #ff6a00);
    color:#fff;
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    box-shadow:0 8px 18px var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
    will-change: transform;
}

/* Hover / enfoque */
.btn-orange:hover{
    background: linear-gradient(180deg, var(--btn-bg-hover), #f96200);
    box-shadow:0 10px 22px var(--btn-shadow);
    transform: translateY(-1px);
    filter: saturate(1.05);
}

/* Estado activo (clic) */
.btn-orange:active{
    background: linear-gradient(180deg, var(--btn-bg-active), #e85d00);
    transform: translateY(0);
    box-shadow:0 6px 14px rgba(204,96,0,.45);
}

/* Accesibilidad: foco visible con teclado */
.btn-orange:focus{
    outline:none;
}
.btn-orange:focus-visible{
    box-shadow:
        0 0 0 4px rgba(255,122,0,.25),
        0 8px 18px var(--btn-shadow);
}

/* Deshabilitado (si lo usas en <button disabled>) */
button.btn-orange:disabled,
a.btn-orange[aria-disabled="true"]{
    opacity:.6;
    cursor:not-allowed;
    filter:grayscale(.15);
    pointer-events:none;
}

/* Animación sutil para llamar la atención (opcional) */
@keyframes pulse-cta{
    0%,100%{ transform: translateY(0) scale(1); }
    50%{ transform: translateY(-1px) scale(1.02); }
}
.btn-orange.cta{
    animation: pulse-cta 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
    .btn-orange,
    .btn-orange.cta{
        transition:none;
        animation:none;
    }
}