/* @COMPACT_EN_PRODUCCION 

  OJO! CODIGO NECESARIO.

   cuando esditamos  los snippets desde tinycme, los estiulos no puede ser "inline"
   la unica manera es  importar este fichero css al tinyCme

   IGUALMENTE, cuando renderizacmos snippet el en real  necestiamos sus estilos que son includos
   desde el /views/layouts/bot5/page_render.php

*/


/* Estilos CSS de funcion go_next_container()
================================ */
.go_next_container_scroll_icon {
    position: absolute;
    left: 50%;
    /* top:80%; */
    transform: translateX(-50%);
    cursor: pointer;
    font-size: 2rem;
    color: #fff;
    transition: transform 0.3s ease;
    animation: pulse 1s infinite ease-in-out;
    z-index: 1000;
}
.go_next_container_scroll_icon:hover {
    transform: translateX(-50%) scale(1.1);
}
@keyframes pulse {
0% {
    transform: translateX(-50%) scale(1);
}
50% {
    transform: translateX(-50%) scale(2);
}
100% {
    transform: translateX(-50%) scale(1);
}
}

/* SnippetsMeetTeam_1
================================ */
.elhtml-twpi-img-container {
    height: 300px; /* Altura fija */
    overflow: hidden; /* Para manejar el desbordamiento */
    margin-left: auto;
    margin-right: auto;
}
.elhtml-twpi-img-container img {
    width: auto; /* Ancho automático para mantener proporción */
    height: 100%; /* Altura completa del contenedor */
    object-fit: cover; /* Mantiene la relación de aspecto sin deformación */
}

/* SnippetsMeetTeam_2 
================================ */
.elhtml-mt2-img-container {
    height: auto;
    width: 100%;
    overflow: hidden; /* Para manejar el desbordamiento */
    margin-left: auto;
    margin-right: auto;

}
.elhtml-mt2-img-container img {
    width: auto; /* Ancho automático para mantener proporción */
    height: 100%; /* Altura completa del contenedor */
    object-fit: cover; /* Mantiene la relación de aspecto sin deformación */
}

/*
SnippetsHeroImage
================================ */
.elhtml-hero-image img {
    width: 100%; /* Ancho completo del contenedor */
    height: auto; /* Altura automática para mantener proporción */
    object-fit: cover; /* Mantiene la relación de aspecto sin deformación */
}

/* SnippetsHeroBoton 
================================ */
 .hero-boton {
    background: url('tu-imagen.jpg') no-repeat center center/cover;
    height: 100vh;
    position: relative;
    color: white;
}
.hero-boton ::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); /* oscurecer un poco para legibilidad */
}
.hero-boton-content {
    position: relative;
    z-index: 1;
}

.hero-boton-social-icons {
    position: absolute !important;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 11 !important;
}
.hero-boton-social-icons a {
    color: white;
    font-size: 1.2rem;
    transition: color 0.3s;
}
.hero-boton-social-icons a:hover {
    color: #0dcaf0;
}
.btn-outline-light {
    border: 1px solid white;
    padding: 10px 30px;
}
.btn-outline-light {
    border: 1px solid white;
    padding: 10px 30px;
}

/* SnippetsImageTarjetaDesplazada
================================ */
.sitd-card-img-box {
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}
.sitd-card-img-box img {
    max-width: 60%;
    height: 400px;
    
    display: block;
    
}
.sitd-card-overlay {
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    background: #fff;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 70%;
    opacity: 0.9;
    }

.sitd-card-overlay h2 {
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.sitd-card-overlay p {
    color: #6c757d;
}
.sitd-btn-outline-dark {
    border-radius: 0;
    padding: 0.5rem 1.5rem;
}


/*
SnippetsFormularioContacto
================================ */
:root{
	  --brand:#0f4f72;
	  --brand-dark:#0c3e5a;
	}

/* Tarjeta superpuesta del lado izquierdo */
.form-contacto-overlay-card{
    position: absolute;
    left: clamp(12px, 8%, 72px);
    right: clamp(12px, 8%, 72px);
    bottom: -28px;
    padding: clamp(1rem, 2.5vw, 2rem);
    border-radius: .5rem;
    transform: translateY(-90%);
    opacity: 0.8;
    margin-right: 10%;
}

.form-contacto-bg-brand{ background-color: var(--brand); }
.form-contacto-btn-brand{
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    color:#fff;
}

/* Ajustes responsivos para la tarjeta superpuesta */
@media (max-width: 991.98px){
    .form-contacto-overlay-card{
    position: static;
    margin-top: 1rem;
    }
}

/* Sutiles mejoras visuales */
.form-contacto-form-label{ font-weight: 600; }
.form-contacto-link-body-emphasis{ text-decoration: underline; }

/* Utilidad para asegurar el cover si tu navegador no soporta object-fit bien */
.object-fit-cover{ object-fit: cover; }