.rojo { color:crimson; }


/*LINEA QUE SE DESLIZA*/
/* Línea animada */

.dipi-text-highlight-svg{
    display:block;
    width:100%;
    max-width:420px;
    margin: -65px auto 15px auto;
}

.dipi-text-highlight-svg svg{
    width:100%;
    height:60px;
    overflow:visible;
}

.dipi-text-highlight-svg path{
    fill:none;
    stroke:#f6c21a;/* AMARILLO chillante */
    stroke-width:6;
    stroke-linecap:round;
    stroke-dasharray:1200;
    stroke-dashoffset:1200;

    animation: dibujarLinea 2.5s ease infinite;

}

/* pequeños retrasos entre líneas */

.dipi-text-highlight-svg path:nth-child(2){
    animation-delay:0.25s;
}

.dipi-text-highlight-svg path:nth-child(3){
    animation-delay:0.5s;
}

@keyframes dibujarLinea{
    to{
        stroke-dashoffset:0;
    }
}

/* WHATSAPP */

#whatsapp-container{
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 9999;
    font-family: Arial, sans-serif;
    width: auto;
    height: auto;
    pointer-events: none;
}

/* BOTÓN */

#whatsapp-btn{
    width: 65px;
    height: 65px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    pointer-events: auto;
}

#whatsapp-btn img{
    width: 35px;
}

/* CHAT */

#chat-box{
    position: absolute;
    right: 0;
    bottom: 75px;
    width: 300px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    display: none;
    overflow: hidden;
    pointer-events: auto;
}

.chat-header{
    background: #7A1C1C;
    color: white;
    padding: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-body{
    padding: 15px;
    background: #f2f2f2;
    font-size: 14px;
}

.chat-footer{
    display: flex;
    padding: 10px;
    background: white;
}

.chat-footer input{
    flex: 1;
    min-width: 0;
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 8px 12px;
    outline: none;
}

.chat-footer button{
    margin-left: 8px;
    background: #7A1C1C;
    color: white;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

#closeChat{
    cursor: pointer;
    font-size: 18px;
}

.sombra_blanca{
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 1), -2px -2px 6px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.95);
}

.sombra_negra{
    text-shadow:
    4px 4px 0 rgba(0,0,0,0.8),
    4px 4px 8px rgba(0,0,0,0.45);
}

.cafe{ color:#620101;}
.naranja{ color:#ef6f3f;}
.rosa{ color:#ff3366;}


.titulo_grande { font-size:4rem; font-weight: bold;}

.logo_chico img{
    float: left;
        padding: 10px;
        width: 100px;
}
.bkg_naranja{
    background-color: #ff7a00 !important; 
    padding: 5px 10px; 
    color: #fff;
    border-radius: 20px 0;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.22), 12px 12px 30px rgba(0,0,0,0.18);
    overflow: hidden;
}

.bkg_turquesa{    
    background-color: #00cfc1 !important; 
    padding: 5px 10px; 
    color: #fff;
    border-radius: 20px 0;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.22), 12px 12px 30px rgba(0,0,0,0.18);
   overflow: hidden;
}

.bkg_rosa{    
    background-color: #ff3366 !important; 
    padding: 18px 28px; 
    color: #fff;
    border-radius: 20px 0;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.22), 12px 12px 30px rgba(0,0,0,0.18);
   overflow: hidden;

}

.hero-slide{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;

    filter:
    brightness(.72)
    contrast(1.1)
    saturate(1.05);

    transform:scale(1.03);
}

/* OVERLAY */
.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,.72),
        rgba(0,0,0,.30)
    ),
    linear-gradient(
        to top,
        rgba(0,0,0,.60),
        rgba(0,0,0,.08)
    );

    z-index:1;
}

/* CONTENIDO */
.hero-content{
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;    
    text-align:center;
    padding:0 2rem;
}

/* TITULO */
.hero-content h1{
    font-size: 4rem;
    font-weight:800;
    line-height:.95;
    margin-bottom:.5rem;
    text-shadow: 0 4px 12px rgba(0,0,0,.45);
    padding-top: 1rem !important;
}

/* SUBTITULO */
.hero-content h2{
    font-size:2.2rem;
    font-weight:300;
    margin-bottom:2rem;
    color:#f5f5f5;
    text-shadow:
    0 3px 10px rgba(0,0,0,.4);
}

/* FRASE */
.hero-frase{
    display:inline-block;
    background: linear-gradient( 135deg, #ff7b00, #ff9500  );
    padding: 1.2rem 2rem;
    border-radius:  22px 22px 22px 0;
    font-size:2rem;
    font-weight:700;
    line-height:1.2;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    
    margin-bottom:1.5rem;
}

/* TEXTO */
.hero-content p{
    font-size:1.5rem;
    letter-spacing:1px;
    opacity:.92;
    margin-bottom:1rem;
}

/* BOTON */
.btn-hero{
    display:inline-block;
    background:#fff;
    color:#111;
    padding:     16px 34px;
    border-radius:50px;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
    box-shadow:    0 10px 25px rgba(0,0,0,.35);
    text-align:center;
}

.btn-hero:hover{
    transform:translateY(-3px);
    background:#ff8c00;
    color:#fff;
}

/* =========================
   TABLET
========================= */
@media(max-width:991px){

    .hero-content{
        width:100%;
        max-width:100%;
        padding:0 2rem;
    }

    .hero-title{
        font-size:3rem !important;
        line-height:1;
    }

    .hero-subtitle{
        font-size:1.5rem;
    }

    .hero-frase{
        font-size:1.4rem;
        padding:1rem 1.5rem;
        max-width:90%;
    }
    .hero-texto{
        font-size:.1rem !important;
        line-height:1.2 !important;
    }

}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){

    .hero-slide{
        height:85vh;
    }

    .hero-content{
        padding:0 1.2rem;
    }

    .hero-title{
        font-size:2.4rem;
        line-height:1;
        margin-bottom:.5rem;
    }

    .hero-subtitle{
        font-size:1.1rem;
        margin-bottom:1.2rem;
    }

    .hero-frase{
        font-size:1rem;
        line-height:1.3;
        padding: .9rem 1rem;
        border-radius: 18px 18px 18px 0;
        max-width:100%;
    }

    .hero-texto{
        font-size:.95rem !important;
        line-height:1.2;
    }

    .btn-hero{
        padding:12px 24px !important;
        font-size:.9rem !important;
    }

}

/* =========================
   MOBILE PEQUEÑO
========================= */
@media(max-width:480px){
    .hero-title{ font-size:2rem;  }
    .hero-subtitle{font-size:1rem; }
    .hero-frase{ font-size:.92rem;  }
}

.texto-inline{
    display:inline-block;
}

/* CONTENEDOR */
.ens-header .social-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap: 0.5rem;
}

/* CÍRCULO */
.ens-header .soc-item{
    display:flex;
    justify-content:center;
    align-items:center;
    height:45px;
    width:45px;
    border-radius:50%;
    background:#ff7730;
    transition:.3s;
}

.ens-header .soc-item{
    display:flex;
    justify-content:center;
    align-items:center;
    width:45px;
    height:45px;
    border-radius:50%;
    background:#ff7730;
    transition:.3s;
}

/* ICONO */
.ens-header .soc-item a{
    color:#fff;
    font-size:22px;
    margin-left: 0px !important;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    text-decoration:none;
}

/* HOVER CORRECTO */
.ens-header .soc-item:hover{
    background:#fff;
    border:2px solid #ff7730;
}

/* COLOR ICONO */
.ens-header .soc-item:hover a{
    color:#ff7730;
}

/* =========================
   TOP LINKS
========================= */

.top-links{
    display:flex;
    align-items:center;
    gap:2rem;
}

/* =========================
   TELÉFONOS
========================= */

.phones-box{
    display:flex;
    align-items:center;
   /* gap:1rem;*/
}

/* ICONO GRANDE */
.phone-main-icon{
    width:50px;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#ff7730;
    font-size:1.5rem;
}

/* CONTENIDO */
.phones-content{
    display:flex;
    flex-direction:column;
    gap:.2rem;
}

/* LÍNEAS */
.phone-line{
    display:flex;
    align-items:center;
    gap:.45rem;
    font-size:1rem;
    line-height:1.1;
}

/* LINKS */
.phone-line a{
    color:#31445c;
    text-decoration:none;

    transition:.25s;
}

.phone-line a:hover{
    color:#ff7730;
}

/* SEPARADOR */
.phone-line span{
    color:#d6a11d;
    font-size:.7rem;
    font-weight:700;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

    .top-links{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem;
    }

}

/* MOBILE */

@media(max-width:768px){

    .phones-box{
        justify-content:center;
    }

    .phones-content{
        align-items:center;
    }

    .phone-line{
        flex-wrap:wrap;
        justify-content:center;
    }

}


/* =========================
   REDES
========================= */

.social-row{
    display:grid;
    grid-template-columns:repeat(2, 38px);
    gap:.7rem;
}

.soc-item{
    width:38px;
    height:38px;

    border-radius:50%;

    background:#ff7730;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.soc-item a{
    width:100%;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    text-decoration:none;

    font-size:1rem;
}

.soc-item:hover{
    background:#fff;
    border:2px solid #ff7730;

    transform:translateY(-2px);
}

.soc-item:hover a{
    color:#ff7730;
}



/* WHATSAPP */

.soc-item.whatsapp{
    background:#1faa59;
}

.soc-item.whatsapp:hover{
    background:#fff;
    border:2px solid #1faa59;
}

.soc-item.whatsapp:hover a{
    color:#1faa59;
}