:root{
    --navbar-background: #000000;
    --navbar-color: #ecf0f1;
    --primary-color: #cf1256;
    --secondary-color: #502434;
    --guinda: #69243C;
    --dark-guinda: #010100;
}
body{
    background-color: #f0f0f0;
    font-family: Montserrat, sans-serif;
    color: #333;
}
h1, h2, h3 {
    font-family: 'Anton', sans-serif;
    letter-spacing: 0;
}
h2{
    font-size: 7.2rem;
}
.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.pre-title {
    font-size: 2.5em;
}
footer {
    background: #622338;
    background: linear-gradient(0deg, #623238 0%, #441926 33%, #010100 66%, #010100 100%);
    color: #fff;
    text-align: center;
    padding-top: 4em;
    position: relative;

    h3 {
        font-size: 4.6rem;
    }
}
.dark-section {
    background-color: #000000;
    color: #fff;
    min-height: 100vh;
}
.section-quienes{
    /*
    * Created with https://www.css-gradient.com
    * Gradient link: https://www.css-gradient.com/?c1=2d1119&c2=000000&gt=l&gd=dbb

    background-image: linear-gradient(0deg,#000000, #531c2b, #000000), url('img/multiply80.webp');
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: multiply;*/
    --grid-gap: 15px;
    position: relative;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(54, 18, 31, 1) 25%, rgba(107, 37, 61, 1) 50%, rgba(49, 16, 26, 1) 75%, rgba(0, 0, 0, 1) 100%);
    color: #fff;
    min-height: 100vh         
}
.section-mision, .section-cuervos-mision{
    background-color: #000;
    background-image: url('/content/media/bg/bg-mision.jpg');
    background-size: auto 100%;
    background-position: center right;
    background-repeat: no-repeat;
    color: #fff;
    min-height: 100vh;
    position: relative;      
}
.section-cuervos-mision{
    background-image: url('/content/media/bg/bg-cuervos-mision.webp');
}
.section-vision, .section-cuervos-vision{
    background-color: #000;
    background-image: url('/content/media/bg/bg-vision.jpg');
    background-size: auto 100%;
    background-position: center left;
    background-repeat: no-repeat;
    color: #fff;
    min-height: 100vh;
    position: relative;      
}
.section-cuervos-vision{
    background-image: url('/content/media/bg/bg-cuervos-vision.webp');
}
.section-quehacemos, .section-porque-cuervos{
    background-image: url('/content/media/bg/bg-quehacemos.jpg');
    background-size: cover;
    background-position: center center;
    color: #fff;
    min-height: 100vh;
    position: relative;      
}
.section-porque-cuervos{
    background-image: url('/content/media/bg/bg-porquecuervos2.jpg');
}
.section-quotes{
    background-image: url('/content/media/bg/bg-quote.jpg');
    background-size: cover;
    background-position: center center;
    color: #fff;
    min-height: 100vh;
    position: relative;      
}
.big-quote {
    font-size: 3.5em;
    font-family: 'Anton', sans-serif;
    margin: 0 auto;
    text-align: left;
    line-height: 1.4;
    letter-spacing: .03em;
}
.author {
    font-size: 2em;
    font-style: italic;
    line-height: 1;
}
.hero, .cuervos-hero, .silversoccer-hero, .instalaciones-hero, .internacional-hero {
    position: relative;
    background-image: url('/content/media/bg/bg-hero.jpg');
    background-size: cover;
    background-position: center center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.cuervos-hero {
    background-image: url('/content/media/bg/minbg-cuervos2.jpg');
}
.silversoccer-hero{
    background-image: url('/content/media/bg/portada-servicios-50big.webp');
}
.instalaciones-hero{
    background-image: url('/content/media/bg/portada-instalaciones50.jpg');
}
.internacional-hero{
    background-image: url('/content/media/bg/portada-internacional40.jpg');
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #000000,#00000000 20%,#00000000 80%, #000000);
}
.overlay-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #000000,#00000000 20%);
}
.frontend {
    position: relative;
    z-index: 1;
}
.hero-logo {
    width: 150px;
    margin-bottom: 2em;
}
.big {
    font-size: 1.5em;
}
.big-declaration{
    font-size: 1.7em;
}
.button.secondary {
    background-color: var(--secondary-color);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    height: auto;
    transition: all .3s;
}
.button.secondary:hover {
    background-color: var(--primary-color);
}
.footer-logo{
    width: 150px;
}
.social-links {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 20px;
    margin-bottom: 1em;
    a{
        color: #fff;
        font-size: 3em;
        transition: color .3s;
        :hover{
            color: var(--primary-color);
        }
    }
}
footer .title{
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    margin:0;
    padding: 0;
    line-height: 1.5
}
footer p a{
    color: #ffffff88!important;
    text-decoration: none;
    transition: color .3s;
    :hover{
        color: #fff!important;
    }
}
footer p a:hover{
    color: #fff!important;
}
.copyright {
    line-height: 1.2;
}
.copyright a{
    white-space: nowrap;
}
.vertical-center {
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente, opcional */
    /*min-height: 100%; /* Asegura que el contenedor tenga altura suficiente */
}
.line-left{
    border-left: 4px solid #fff;
    padding-left: 1em;
    overflow: hidden;
}
.line-right{
    border-right: 4px solid #fff;
    padding-right: 1em;
    overflow: hidden;
}
.position-relative {
    position: relative;
}

.h2-with-logo {
    position: relative;
    text-align: center;
}

.h2-with-logo img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
}  


.red-card {
    background: #660B2C;
    background: linear-gradient(0deg, 
        rgba(102, 11, 44, 1) 0%, 
        rgba(102, 11, 44, .8) 40%, 
        rgba(102, 11, 44, 0.01) 100%);
    color: #fff;
    padding: 0 2em 1em;
    border-radius: 20px;
    text-align: center;
    margin: 0.5em;
    flex: 1;
    min-width: 200px;
    height: 265px;

    /* Habilitar Flexbox en la tarjeta */
    display: flex;
    flex-direction: column;

    /* Aseguramos que el contenido no desborde */
    overflow: hidden;
}

.red-card .card-icon img {
    width: 75px;
}

.red-card .card-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0.5em;
    line-height: 1;
    margin-bottom: .4em;
}

.red-card .card-description {
    font-size: .81em;
    font-weight: 200;
    line-height: 1.5;
    /* Opcional: limitar líneas si hay mucho texto */
    flex: 1; /* Ocupa el espacio disponible */
}

.red-card .card-link {
    margin-top: auto; /* Empuja el enlace hacia abajo */
}

.red-card .card-link a {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: .8em;
    transition: color .3s;
    background-color: #6b253d;
    padding: 5px 10px;
    border-radius: 25px;
}
.img-mascota{
    background: url(/content/media/bg/mascota-gradient2.webp) top center;
    background-size: cover;
    position: relative
}
.hero-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Tu overlay (sin cambios, pero aseguramos que esté encima del video) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #000000, #00000000, #00000000, #000000);
    z-index: 2; /* Debe estar encima del video (z-index:1) */
    pointer-events: none; /* Opcional: permite que eventos pasen a través del overlay */
}
.logo-bottom {
    position: absolute;
    bottom: 20px; /* Ajusta el margen inferior según necesites */
    left: 0;
    width: 100%;
    z-index: 10; /* Asegura que esté sobre el overlay si es necesario */
    pointer-events: none; /* Opcional: si no necesitas interacción */
}

.logo-bottom img {
    pointer-events: auto; /* Si quieres que el logo sea clickable, quita esta línea o ajusta */
    width: 130px;
    margin:0;
    opacity: 0.8;
}
.container-flex{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;            
}
.logo-top-right-container{
    text-align: right;
    right: 0;
    position: absolute;
    top: 20px;
    img{
        width: 130px;
        margin: 0;
        opacity: 0.8;
    }
}
footer .align-justify{
    hyphens: auto;
    width: 230px;
    margin: auto;
}

.img-responsive{
    width: 100%;
}

.dark-to-guinda {
    background: #69243C;
    background: linear-gradient(0deg, rgba(105, 36, 60, 1) 0%, rgba(1, 1, 0, 1) 80%);
}

.guinda-to-dark {
    background: #69243C;
    background: linear-gradient(180deg, rgba(105, 36, 60, 1) 0%, rgba(1, 1, 0, 1) 80%);
}

.bg-dark{
    background-color: #000;
}

.color-white {
    color: #fff;
}

@media (min-width: 900px) {
    .navbar{
        background: transparent;
        /*background: linear-gradient(180deg, #000000,#000000dd 80%, #00000000);*/
        z-index: 100;
    }
    .navbar .menu {
        max-height: none;
        display: flex;
        justify-content: center;
        float: none;
        gap: 20px;
        padding: 1em 0;
        background-color: transparent;
    }
    .navbar a{
        padding: 5px 16px;
        border: 3px solid white;
        border-radius: 25px;
        font-size: .9em;
        background: #000;
    }
    .menu a:hover, .navbar .menu-btn:hover,
    .menu .active {
        background-color: var(--primary-color);
        color: var(--navbar-color)
    }
    h1{
        font-size: 6.4rem;
    }
    
    .red-button {
        text-decoration: none;
        font-size: 21px;
        font-weight: 500;
        color: #fff !important;
        border-radius: 32px;
        padding: .5em 1.5em;
        background-color: #642239;
        transition: background-color 0.3s ease;
        cursor: pointer;
        border: none;
    }
    .red-button:hover {
        background-color: #cf1256;
    }
    
}
@media (max-width: 720px){
    html, body {
      overflow-x: hidden;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .menu a {
        padding: 10px 20px;
    }
    .menu a:last-child {
        margin-bottom: 20px;
    }
    .big {
        font-size: 1.3em;
    }
    h2 {
        font-size: 4.2rem;
    }
    .big-declaration {
        font-size: 1.4em;
    }
    .section-quienes, .section-mision, .section-vision{
        padding-bottom: 150px;
    }
    .section-mision .overlay, .section-vision .overlay {
        background: linear-gradient(180deg, #000000,#000000AA 20%,#000000AA 80%, #000000);
    }
    .big-quote{
        font-size: 1.8em;
    }
    .author{
        font-size: 1.3em;
    }
    .logo-bottom img{
        width: 100px;
    }
    .logo-top-right-container {
        right: 20px;
        top: 20px;
        img{
            width: 100px;
        }
    }
    .h2-with-logo img{
        display: none;
    }
    footer h3{
        margin-bottom: 0;
    }
}