/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables */
:root {
    --primario: #0000ff;
    --black: #000;
    --gris-claro: #F6F6F6;
    --black33: rgba(0,0,0,0.33);
    --oro: #D9B950;
    --oro-light: #FAF2A6;
    --oro-dark: #987F37;
    --trans: ease-in-out all 0.25s;
    --br3: 3px;
    --linea: 0.7px solid rgba(0, 0, 0, .2);
}

/* ETIQUETAS ------ */
html {
    font-size: 62.5% !important; /* Definimos que 1rem = 10px */
    letter-spacing: 0.2px;
}

body {
    position: relative;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Definición de la tipografía principal */
    background-color: var(--gris-claro);
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}

footer {
    position: absolute;
    bottom: 30px;
    height: 30px;
    background-color: rgba(224, 224,	224, 0.0);
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
footer .bydedalo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    color: black;
}
footer .bydedalo img {
    width: 100%;
    max-width: 40px;
    margin-right: 5px;
}
footer .bydedalo small {
    font-weight: 600;
}
footer .bydedalo img, footer .bydedalo small {
    opacity: 0.18;
    transition: var(--trans);
}
footer .bydedalo:hover img, footer .bydedalo:hover small {
    opacity: 0.33;
}

ul, nav {list-style: none;}

ul li {display: inline;}

li {font-size: 1.33rem;}

p {font-size: 1.6rem;}

li, p {font-weight: 400;}

small {font-size: 1rem;}

a {
    text-decoration: none;
    display: inline;
    color: white;
}

h1 {
    font-size: 2.33rem;
    font-weight: 500;
}

h2 {
    font-weight: 500;
    font-size: 2rem;
}

/* --- Botones */
button {
    border: 0;
    background-color: transparent;
}

button a {
    border-radius: var(--br3);
    background-color: var(--primario);
    display: flex;
    padding: 12px 18px;
    font-size: 1.3rem;
    letter-spacing: 0.8px;
    transition: var(--trans);
}

button a:hover {
    background-color: black;
}

/* HEADER ------------------------------------------------------ */
.fancybox-active, .compensate-for-scrollbar {
    /* Evitamos que se muevan de su lugar los íconos del QR y Compartir al activar el Modal del botón QR */
    padding: 0 !important;
    margin: 0 !important;
}

header {
    position: fixed;
    width: 100%;
    /* max-width: 600px; */
    height: 70px;
    z-index: 999;
}

/* QR */
.fancybox-image {
    border-radius: 10px;
    width: 90% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block;
    position: relative !important;
}

/* Logo ------ */
#logo {
    left: 0; 
    right: 0; 
    margin-inline: auto; 
    width: fit-content;
    position: absolute;
    bottom: -23px;
    background-color: white;
    border-radius: 50%;
}

#logo img {
    display: flex;
    justify-self: center;
    align-self: center;
    padding: 3px;
    border-radius: 50%;
    height: 75px;
    width: 75px;
    object-fit: contain;
    box-shadow: 1px 13px 5px -9px rgba(0,0,0,0.15);
    -webkit-box-shadow: 1px 13px 5px -9px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 13px 5px -9px rgba(0,0,0,0.15);
    animation: shine-mask 7s infinite ease-in-out;
    -webkit-mask-image: linear-gradient(45deg, #000 15%, rgba(0,0,0,0.2) 50%, #000 75%);
    mask-image: linear-gradient(45deg, #000 15%, rgba(0,0,0,0.2) 50%, #000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
    animation-delay: 1.5s;
}

@keyframes shine-mask {
    0% { -webkit-mask-position: 0; mask-position: 0; }
    10% { -webkit-mask-position: 120%; mask-position: 120%; }
    100% { -webkit-mask-position: 120%; mask-position: 120%; }
}

/* Nav ------ */
nav {
    position: relative;
    background: url('../images/nav-bkgr.svg') no-repeat top center;
    /* background-size: cover;
    height: 130px;
    top: -25px; */
    background-size:cover;
    height: 100%;
    min-height: 133px;
    max-height: 133px;
    top: -33px;
    -webkit-filter: drop-shadow( 0 1px 18px rgba(0, 0, 0, .2));
    filter: drop-shadow( 0 1px 18px rgba(0, 0, 0, .2));
    box-sizing: border-box;
    /* backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px); */
}

nav ul {
    width: 100%;
    height: 83px;
    display: inline-flex;
    justify-content: space-between;
    align-items:flex-end;
    overflow: hidden;
    padding: 0 15px;
}

nav ul li a {
    padding: 0 10px;
    cursor: pointer;
}

nav ul li a img {
    width: 30px;
    object-fit: contain;
    height: auto;
    opacity: 100%;
    transition: var(--trans);
}
nav ul li a img:hover {
    opacity: 33%;
}

/* MENSAJE MODAL -------------------  */
/* inicia Mensaje modal */
.mensaje {
    position: absolute;
    z-index: 900;
    width: 50px;
    top: 30px;
}
.mensaje img {
    position: relative;
    max-width: 40px;
    z-index: 999;
    -webkit-filter: drop-shadow( -3px 3px 2px rgba(0, 0, 0, .22));
    filter: drop-shadow( -3px 3px 2px rgba(0, 0, 0, .22));
    right: -65px;
    top: -20px;
    cursor: pointer;
}

.mensaje p {
    display: none;
}

/* Estilos del modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999 !important; /* Siempre por encima de todo */    
    /* Para animación */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.33s ease-in-out, visibility 0.33s ease-in-out;
}

.modal-contenido {
    background: white;
    padding: 22px;
    border-radius: 6px;
    width: 80vw;
    max-width: 500px;
    max-height: 90vh;      /* limita la altura al 80% de la ventana */
    overflow-y: auto; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.modal-contenido p {
    font-size: 1.3rem;
    text-align: justify;
    text-justify: inter-word;
}
.modal-contenido p ~ p {
    margin: 14px 0;
}

/* Clases para mostrar el modal con transición */
.modal.active {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
}
/* termina Mensaje modal */


/* MAIN ------------------------------------------------------ */
main {
    /* background-color: darkgray; */
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 75vh 1fr auto auto;
    z-index: 1;
}

/* HERO --------------- */
#hero {
    /* background-color: var(--gris-claro); */
    background-color: transparent;
    display: grid;
    grid-template: 2fr 1fr / 1fr; /* filas / columnas */
    justify-content: center;
    text-align: center;
    padding: 0 32px;
}

#hero .circulos {
    display: grid;
    align-self: end;
    justify-content: center;
    margin-bottom: 30px;
}

#hero .circulos .circulo-gif {
    position: absolute;
    width: 100%;
    height: 70vh;
    background: 
    linear-gradient(to bottom, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 0) 59%, rgba(246, 246, 246, 0.65) 100%),
    url('../../../assets/images/ecard-gif.gif') no-repeat center center;
    background-size: cover;
    opacity: 0.13;
    top: 0px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: -1;
}

#hero .circulos .circulo-gris {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
    width: 175px;
    height: 175px;
    border-radius: 50%;

    background: linear-gradient(135deg, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%);
    mix-blend-mode: normal;
    opacity: 0.9;
    box-shadow: -16px 16px 32px rgba(222, 222, 222, 0.2), 16px -16px 32px rgba(222, 222, 222, 0.2), -16px -16px 32px rgba(255, 255, 255, 1), 16px 16px 40px rgba(222, 222, 222, 1), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(222, 222, 222, 0.5);
}

#hero .circulos .circulo-foto-perfil {
    position: absolute;
    width: 83%;
    height: 83%;
    background-color: gray;
    border-radius: 50%;
}

/* inicia Botón Video-Modal */
#hero .circulos .circulo-gris .video-modal-brillo {
    position: absolute;    
}

#hero .circulos .circulo-gris #btn-video {
    position: absolute;
    border-radius: 50%;
    background-color: white;
    width: 60px;
    height: 60px;
    bottom: -16px;
}

#hero .circulos .circulo-gris #btn-video svg {
    /* fill: var(--primario); */
    border: 3px solid white;
    border-radius: 50%;
    transition: var(--trans);
    box-shadow: 0px 16px 23px -4px rgba(0,0,0,0.34);
    -webkit-box-shadow: 0px 16px 23px -4px rgba(0,0,0,0.34);
    -moz-box-shadow: 0px 16px 23px -4px rgba(0,0,0,0.34);
}

#hero .circulos .circulo-gris #btn-video:hover svg {
    /* fill: black; */
    box-shadow: -16px 16px 32px rgba(222, 222, 222, 0.2), 16px -16px 32px rgba(222, 222, 222, 0.2), -16px -16px 32px rgba(255, 255, 255, 1), 16px 16px 40px rgba(222, 222, 222, 1), inset 1px 1px 2px rgba(255, 255, 255, 0.3), inset -1px -1px 2px rgba(222, 222, 222, 0.5);
}
/* termina Botón Video-Modal */

#hero .titulos {
    margin-bottom: 35px;
}

#hero .titulos h1 {
    margin-bottom: 6px;
    line-height: 3rem;
    margin-bottom: 10px;
}

#hero .titulos p {
    line-height: 2.3rem;
}

#hero .titulos .linea {
    display: block;
    /* position: relative; */
    margin: 10px auto;
    border-bottom: var(--linea);
    width: 50%;
}

#hero .titulos .titulo-empresa {
    font-size: 1.7rem;
    letter-spacing: 3.3px;
    text-transform: uppercase;
}

.google-comentarios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px auto;
    text-align: center;
}

.google-comentarios a small {
    margin-left: 8px;
}

.google-comentarios a {
    display: inline-flex;
    align-items: center;
    color: black;
    padding: 10px 17px;
    border: 1.5px solid black;
    border-radius: 50px;
    transition: var(--trans);
}

.google-comentarios a:hover {
    color: white;
    background-color: black;
}

.google-comentarios a img {
    width: 30px;
    height: auto;
    padding-right: 6px;
}

.google-comentarios .estrella {
    font-size: 1.6rem;
    padding-right: 3px;
}

/* Botones CTA ------ */
#botones-cta {
    position: relative;
    height: auto;
    display: flex;
    justify-content: center;
    margin-bottom: 33px;
    position: relative;
}

#botones-cta .botones-cta___container {
    /* position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 80px);
    justify-content: center;
    align-items: center;
    grid-gap: 48px 25px;
    box-sizing: border-box;
    padding-bottom: 20px; */
    position: relative;
    width: 85%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    grid-gap: 48px 0px;
    box-sizing: border-box;
    padding-bottom: 20px;
    z-index: 50;
}

#botones-cta .boton-cta img {
    /* filter: invert(); */
    padding: 18px;
    transition: var(--trans);
    height: 100%;
    object-fit: contain;
}
#botones-cta .boton-cta:hover img {
    filter:opacity(33%);
    }

#botones-cta .boton-cta {
    /* background-color: var(--gris-claro); */
    color: black;
    padding: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%);
    mix-blend-mode: normal;
    /* opacity: 0.9; */
    box-shadow: -7px 7px 14px rgba(234, 234, 234, 0.2), 7px -7px 14px rgba(234, 234, 234, 0.2), -7px -7px 14px rgba(254, 254, 254, 0.9), 7px 7px 18px rgba(234, 234, 234, 0.9), inset 1px 1px 2px rgba(254, 254, 254, 0.3), inset -1px -1px 2px rgba(234, 234, 234, 0.5);
    -webkit-box-shadow: -7px 7px 14px rgba(234, 234, 234, 0.2), 7px -7px 14px rgba(234, 234, 234, 0.2), -7px -7px 14px rgba(254, 254, 254, 0.9), 7px 7px 18px rgba(234, 234, 234, 0.9), inset 1px 1px 2px rgba(254, 254, 254, 0.3), inset -1px -1px 2px rgba(234, 234, 234, 0.5);
    -moz-box-shadow: -7px 7px 14px rgba(234, 234, 234, 0.2), 7px -7px 14px rgba(234, 234, 234, 0.2), -7px -7px 14px rgba(254, 254, 254, 0.9), 7px 7px 18px rgba(234, 234, 234, 0.9), inset 1px 1px 2px rgba(254, 254, 254, 0.3), inset -1px -1px 2px rgba(234, 234, 234, 0.5);
}
#botones-cta .boton-cta:hover {
        padding: 12px;  
        background: linear-gradient(80deg, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%);
        color: black;
        background-color: gray;

        border-radius: 150px;
        background: #f6f6f6;
        box-shadow: inset 4px 4px 7px #d6d6d6,
            inset -4px -4px 7px #ffffff;
    }

    #botones-cta .boton-cta small {
        margin-top: 115px;
        position: absolute;
        text-align: center;
        line-height: 1.3rem;
    }

/* Servicios ------ */
#servicios {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6% 0 10% 0;
    background-color: var(--gris-claro);
    border-radius: 0 0 35px 35px;
    z-index: 1;
    box-shadow: 0 50px 35px -50px black;
    border-radius: 0px 0px 25px 25px;
}

#servicios .servicios-container {
    width: 100%;
    margin-left: 33px;
    margin-right: 33px;
    padding: 33px 0;
    border-radius: 7px;
    text-align: center;
    box-shadow: -8px 8px 16px rgba(224, 224, 224, 0.2), 8px -8px 21px rgba(224, 224, 224, 0.26), -8px -8px 16px rgba(255, 255, 255, 0.95), 8px 8px 20px rgba(224, 224, 224, 0.9), inset 1px 1px 2px #FFFFFF, inset -1px -1px 2px rgba(224, 224, 224, 0.5);
    background: rgb(233,233,233);
    background: linear-gradient(135deg, rgba(233,233,233,1) 0%, rgba(255,255,255,1) 100%);
}

#servicios .listado {
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
}

#servicios .listado li {
    display: flex;
    padding: 0 25px 0 12px;
    border-bottom: var(--linea);
    box-sizing: border-box;
    transition: var(--trans);
}

#servicios .listado li::before {
    position: relative;
    top: 15px;
    margin-right: 6px;
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    transition: var(--trans);
    background: #f3f3f3;
    box-shadow: inset -3px 3px 6px rgba(219, 219, 219, 0.2), inset 3px -3px 6px rgba(219, 219, 219, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 8px rgba(219, 219, 219, 0.9);
    -webkit-box-shadow: inset -3px 3px 6px rgba(219, 219, 219, 0.2), inset 3px -3px 6px rgba(219, 219, 219, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 8px rgba(219, 219, 219, 0.9);
    -moz-box-shadow: inset -3px 3px 6px rgba(219, 219, 219, 0.2), inset 3px -3px 6px rgba(219, 219, 219, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 8px rgba(219, 219, 219, 0.9);
}
    #servicios .listado li:hover  {
        /* border-bottom: 1px solid white;
        background-color: rgba(0, 0, 0, .025); */
    }
    #servicios .listado li:hover::before {
        /* width: 13px;
        height: 13px;
        background: linear-gradient(145deg, #ffffff, #dddddd);
        box-shadow:  2px 2px 4px #cfcfcf, -2px -2px 4px #ffffff;
        -webkit-box-shadow:  2px 2px 4px #cfcfcf, -2px -2px 4px #ffffff;
        -moz-box-shadow:  2px 2px 4px #cfcfcf, -2px -2px 4px #ffffff; */
    }

#servicios .listado li .listado-item {
    color: black;
    text-align: left;
    width: 100%;
    padding: 12px 5px;
    transition: var(--trans);
    pointer-events: none; /* Deshabillita los botones */
}
    #servicios .listado li:hover .listado-item {
        /* color: var(--black33); */
    }

/* Carrusel ------ */
#carrusel {
    position: relative;
    top: -30px;
    height: calc(100% + 30px);
    background: linear-gradient(180deg, #6F6F6F 0%, #E0E0E0 100%), linear-gradient(0deg, #0000FF, #0000FF), #6F6F6F;
    padding: 80px 0 60px 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    width: 100vw;
    max-width: 600px;
}

#carrusel .card {
    position: relative;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 100%) !important; */
}

#carrusel .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none; /* Para que no interfiera con la interacción del usuario */
    border-radius: 8px;
}

.card small {
    position: absolute;
    bottom: 10px;
    font-size: 1.2rem;
    width: inherit;
    text-align: center;
    padding: 0 8px;
    z-index: 2;
    white-space: normal; /* Permite saltos de línea */
    word-wrap: break-word; /* Corta palabras largas */
    overflow-wrap: break-word; /* Soporte adicional para cortar palabras largas */
}

#carrusel .card .icono-zoom {
    position: absolute;
    background: url('../../assets/images/icono-zoom.svg') no-repeat center center;
    background-size: cover;
    width: 35px;
    height: 35px;
    z-index: 999;
    left: 15px;
    top: 15px;
    pointer-events: none;
    -webkit-box-shadow: 0px 0px 75px 7px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 75px 7px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 75px 7px rgba(0,0,0,0.45);
    border-radius: 50%;
}

.wrapper{
    display: flex;
    max-width: 600px;
    position: relative;
    width: inherit;
  }

  /* Quitamos las flechas */
        .wrapper i{
            display: none; /* Quité las flechas izquierda y derecha */
            top: 50%;
            height: 44px;
            width: 44px;
            color: #343F4F;
            cursor: pointer;
            font-size: 1.15rem;
            position: absolute;
            text-align: center;
            line-height: 44px;
            background: #fff;
            border-radius: 50%;
            transform: translateY(-50%);
            transition: transform 0.1s linear;
        }
        .wrapper i:active{
            transform: translateY(-50%) scale(0.9);
        }
        .wrapper i:hover{
            background: #f2f2f2;
        }
        .wrapper i:first-child{
            left: -22px;
            display: none;
        }
        .wrapper i:last-child{
            right: -22px;
        }
/* Quitamos las flechas */

.wrapper .carousel{
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    /* margin: 0 10px; */
  }
  .carousel.dragging{
    cursor: grab;
    scroll-behavior: auto;
  }
  .carousel.dragging img{
    pointer-events: none;
  }
  .carousel img{
    height: 340px;
    object-fit: cover;
    user-select: none;
    margin-left: 14px;
    width: calc(100% / 1.33);
    transition: var(--trans);
    opacity: 0.9;
  }
  .carousel img:hover {
    opacity: 1;
  }
  .carousel img:first-child{
    margin-left: 0px;
  }

/* -------------------- */
/* WHATSAPP/MESSENGER botón flotante ---------------------------- */
/* -------------------- */
/* Estilos generales del botón flotante */
.whatsapp-float, .messenger-float {
    position: fixed;
    bottom: 25px; /* Distancia desde la parte inferior */
    right: 25px;  /* Distancia desde la parte derecha */
    z-index: 1000; /* Para asegurarse de que esté encima de otros elementos */
}

.whatsapp-float a, .messenger-float a {
    display: block;
    width: 75px;
    height: 75px;
    padding: 5px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255,255,255,0.6);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float a:hover, .messenger-float a:hover {
    transform: scale(1.1);
    background-color: var(--orodedalo);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

/* Estilo del SVG dentro del botón */
.whatsapp-float .whatsapp-icon {
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
    content: url("../images/whatsapp-icon.svg");
}

/* Cambiar la imagen en hover */
.whatsapp-float a:hover .whatsapp-icon {
    content: url("../images/whatsapp-icon-hover.svg");
    opacity: 0.9; /* Leve transparencia al hover */
}


/* Estilo del SVG dentro del botón */
.messenger-float .messenger-icon {
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
    content: url("../images/messenger-icon.svg");
}

/* Cambiar la imagen en hover */
.messenger-float a:hover .messenger-icon {
    content: url("../images/messenger-icon-hover.svg");
    opacity: 0.9; /* Leve transparencia al hover */
}

/* TOOLTIP */
[data-tooltip] {
    position: relative;
    pointer: cursor;
  }
  [data-tooltip]::before,
  [data-tooltip]::after {
    text-transform: none;
    font-size: .9em;
    line-height: 1;
    position: absolute;
    display: none;
    opacity: 0;
  }
  [data-tooltip]::before {
    content: '';
    border: 6px solid transparent;
    z-index: 101;
  }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 10px;
    border-radius: 3px;
    background: #333333;
    color: #FFFFFF;
    z-index: 100;
  }
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    display: block;
  }
  [data-tooltip='']::before,
  [data-tooltip='']::after {
    display: none !important;
  }
  [data-tooltip]:not([data-flow])::before,
  [data-tooltip][data-flow^="top"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333333;
  }
  [data-tooltip]:not([data-flow])::after,
  [data-tooltip][data-flow^="top"]::after {
    bottom: calc(100% + 5px);
  }
  [data-tooltip]:not([data-flow])::before,
  [data-tooltip]:not([data-flow])::after,
  [data-tooltip][data-flow^="top"]::before,
  [data-tooltip][data-flow^="top"]::after {
    left: 50%;
    transform: translate(-50%, -.4em);
  }
  [data-tooltip][data-flow^="bottom"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333333;
  }
  [data-tooltip][data-flow^="bottom"]::after {
    top: calc(100% + 5px);
  }
  [data-tooltip][data-flow^="bottom"]::before,
  [data-tooltip][data-flow^="bottom"]::after {
    left: 50%;
    transform: translate(-50%, .4em);
  }
  [data-tooltip][data-flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
  }
  [data-tooltip][data-flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.4em, -50%);
  }
  [data-tooltip][data-flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333333;
    right: calc(0em - 7px);
    transform: translate(.4em, -50%);
  }
  [data-tooltip][data-flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
  }
  @keyframes tooltip-vert {
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
  @keyframes tooltip-horz {
    to {
      opacity: 1;
      transform: translate(0, -50%);
    }
  }
  [data-tooltip]:not([data-flow]):hover::before,
  [data-tooltip]:not([data-flow]):hover::after,
  [data-tooltip][data-flow^="top"]:hover::before,
  [data-tooltip][data-flow^="top"]:hover::after,
  [data-tooltip][data-flow^="bottom"]:hover::before,
  [data-tooltip][data-flow^="bottom"]:hover::after {
    animation: tooltip-vert .5s ease-out forwards;
  }
  [data-tooltip][data-flow^="left"]:hover::before,
  [data-tooltip][data-flow^="left"]:hover::after,
  [data-tooltip][data-flow^="right"]:hover::before,
  [data-tooltip][data-flow^="right"]:hover::after {
    animation: tooltip-horz .5s ease-out forwards;
  }
  


  
  @media screen and (max-width: 900px) {
    .carousel img{
      width: calc(100% / 1.33);
    }

    #hero .circulos .circulo-gif {
        background: 
        linear-gradient(to bottom, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 0) 59%, rgba(246, 246, 246, 0.65) 100%),
        url('../../../assets/images/ecard-gif.gif') center center;
        background-size: cover;
        background-repeat: repeat-x;
    }
  }
  
  @media screen and (max-width: 550px) {
    .mensaje {
        top: 35px;
        position: absolute;
    }

    .mensaje img {
        right: -73px;
    }

    .carousel img{
      width: 100%;
    }
  }

  @media only screen and (orientation: landscape) {
    main {
        grid-template-rows: 1fr auto auto auto;
    }

    #hero {
        grid-template: 350px 1fr / 1fr; /* filas / columnas */
    }

    #hero .circulos .circulo-gif {
        height: 450px;
    }

    #botones-cta {
        margin-top: 23px;
    }
}