/* styles.css */
/* ESTO RESUELVE EL PROBLEMA INMEDIATAMENTE */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* Asegura que todos los elementos se mantengan dentro del ancho */
* {
box-sizing: border-box;
}
/* Definir la fuente Blacksword */
@font-face {
font-family: 'Blacksword';
src: url('./fonts/Blacksword.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
.logo {
width: 20%;
height: auto;
/* ✅ mejor que usar porcentaje fijo en altura */
}
.text-justify-custom {
text-align: justify;
}
#entrenamientos .card-img-top {
width: 100%;
height: 250px;
/* ajusta este valor según el alto que quieras */
object-fit: cover;
border-radius: 8px;
/* opcional, para bordes redondeados */
}
/* Sombra global para todas las secciones, navbar y footer */
section,
nav,
footer {
box-shadow: 0 10px 40px -1px rgba(0, 0, 0, 0.2);
}
.section-full {
min-height: 100vh;
}
/* Estilos para el carrusel hero */
#heroCarousel {
z-index: 1;
}
#heroCarousel .carousel-item {
transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
}
#heroCarousel .carousel-item video,
#heroCarousel .carousel-item img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* Asegura que el contenido del hero esté por encima del carrusel */
.hero-text {
z-index: 2;
position: relative;
left: 20px;
}
/* Efecto de superposición para mejor legibilidad del texto */
#hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
#heroCarousel img {
object-fit: cover;
height: 100vh;
}
#hero .container {
z-index: 2;
}
/* Fondo ajustado al texto y alineado a la izquierda */
.hero-text {
left: 5%;
background-color: rgba(122, 12, 29, 0.85);
/* fondo rojo oscuro semitransparente */
padding: 20px;
/* espacio interno */
border-radius: 15px;
/* bordes redondeados */
width: 50%;
padding-left: 10px;
}
.close-expand {
background: none;
/* sin fondo */
border: none;
/* sin borde */
color: #fff;
/* flecha blanca */
font-size: 1.5rem;
/* tamaño flecha */
line-height: 1;
/* altura compacta */
cursor: pointer;
padding: 5px;
}
/* ✅ Navbar delgada con logo más grande */
.navbar {
background-color: #7A0C1D !important;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
padding-top: 0.2rem;
padding-bottom: 0.2rem;
min-height: 55px;
max-width: 100vw;
/* Evita desbordamiento horizontal */
/* overflow-x: hidden; */
/* Previene scroll horizontal */
}
/* Separación del 5% desde el borde superior para la barra de navegación fija */
.navbar.fixed-top {
top: 0.5% !important;
}
/* ==========================
Light mode overrides
- Add `light-mode` class to to switch to light theme
========================== */
/* Links compactos */
.navbar .nav-link {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
font-size: 0.9rem;
}
/* Logo más grande sin deformar */
.navbar .logo {
height: 60px;
width: auto;
max-width: 150px;
/* Límite máximo para el logo */
}
/* Eliminamos la transparencia y scroll effect */
.transparent-navbar,
.transparent-navbar.scrolled {
background-color: #7A0C1D !important;
}
/* Estilos para el dropdown del navbar */
.navbar .dropdown-menu {
background-color: #7A0C1D;
border: none;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
min-width: 200px;
/* O el ancho que necesites */
white-space: nowrap;
min-width: 200px !important;
/* Ancho mínimo adecuado */
width: auto !important;
/* Que se ajuste al contenido */
white-space: nowrap;
/* Evitar salto de línea */
left: auto !important;
/* Posicionamiento correcto */
right: auto !important;
}
.navbar .dropdown-item {
color: white;
padding: 10px 20px;
transition: all 0.3s ease;
white-space: nowrap;
/* Texto en una sola línea */
overflow: visible;
}
.navbar .dropdown-item:hover {
/* background-color: #EC2023; */
color: #7A0C1D;
}
/* Estado activo/seleccionado del dropdown en vino (reemplaza el azul por defecto) */
.navbar .dropdown-item:active,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
background-color: #7A0C1D !important;
color: #fff !important;
}
.navbar .dropdown-divider {
border-color: rgba(255, 255, 255, 0.2);
}
/* Mejorar la apariencia del dropdown en hover */
.navbar .nav-item.dropdown:hover .dropdown-menu {
display: block;
}
/* Ajustes para mobile */
@media (max-width: 991px) {
.navbar .dropdown-menu {
background-color: transparent;
border: none;
box-shadow: none;
}
.navbar .dropdown-item {
padding-left: 30px;
}
.navbar-collapse {
background-color: #7A0C1D;
margin-top: 10px;
border-radius: 8px;
padding: 10px;
max-height: 80vh;
overflow-y: auto;
}
.navbar-toggler {
padding: 4px 8px;
font-size: 0.9rem;
}
/* Items del menú en móvil */
.navbar-nav {
text-align: center;
}
.navbar-nav .nav-link {
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-nav .nav-link:last-child {
border-bottom: none;
}
.navbar .dropdown-menu {
background-color: rgba(255, 255, 255, 0.1);
border: none;
box-shadow: none;
text-align: center;
}
.navbar .dropdown-item {
color: white;
padding: 8px 15px;
}
.navbar .dropdown-divider {
border-color: rgba(255, 255, 255, 0.2);
}
}
.gen-img {
width: 700px;
/* Ancho fijo */
height: 500px;
/* Alto fijo */
object-fit: cover;
/* Ajusta sin deformar */
border-radius: 12px;
}
.carousel-control-prev {
color: black;
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Cambiar color de todos los botones primarios */
.btn-primary {
background-color: #7A0C1D;
border-color: #7A0C1D;
}
.btn-primary:hover {
background-color: #7A0C1D;
border-color: #7A0C1D;
}
/* Outline primary buttons (ej. 'Conoce...') en color vino */
.btn-outline-primary {
color: #7A0C1D !important;
border-color: #7A0C1D !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
color: #fff !important;
background-color: #7A0C1D !important;
border-color: #7A0C1D !important;
}
/* Estado inicial */
.animate-on-scroll {
opacity: 0;
transform: translateY(50px);
transition: all 1s ease-out;
}
/* Estado final cuando entra en viewport */
.animate-on-scroll.show {
opacity: 1;
transform: translateY(0);
}
/*entrenamientos*/
/* ==========================
Tarjetas originales
========================== */
.custom-card {
background-color: #7A0C1D;
border: none;
border-radius: 10px;
transition: transform 0.0s ease-in-out;
padding: 20px;
position: relative;
cursor: pointer;
z-index: 1;
}
.custom-card:hover {
transform: translateY(-5px);
}
/* Imagen pequeña dentro de la tarjeta */
.custom-img {
width: 50%;
margin: 0 auto 15px auto;
border-radius: 8px;
display: block;
}
/* ==========================
Contenido expandido
========================== */
.expandable-content {
width: 70%;
max-width: 1200px;
background-color: #7A0C1D;
color: #fff;
padding: 30px;
border-radius: 12px;
text-align: center;
z-index: 1000;
overflow-y: auto;
max-height: 90vh;
box-sizing: border-box;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Imagen grande dentro del contenido expandido */
.expandable-content .expanded-img {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 15px;
}
/* Tarjeta activa al expandirse */
.custom-card.active {
transform: scale(1.5);
z-index: 101;
}
/* Muestra el contenido expandido cuando la tarjeta está activa */
.custom-card.active .expandable-content {
display: block;
}
/* Botón Cerrar */
.close-expand {
margin-top: 15px;
}
/* generaciones graduadas */
/* Controles del carrusel en color negro */
#genCarousel .carousel-control-prev,
#genCarousel .carousel-control-next {
filter: invert(1);
/* Convierte el color blanco a negro */
}
#genCarousel .carousel-control-prev {
justify-content: flex-start;
}
#genCarousel .carousel-control-next {
justify-content: flex-end;
}
/* Ajustar tamaño y posición en dispositivos móviles */
@media (max-width: 768px) {
#genCarousel .carousel-control-prev,
#genCarousel .carousel-control-next {
width: 15%;
}
#genCarousel .carousel-control-prev {
left: -5px;
}
#genCarousel .carousel-control-next {
right: -5px;
}
}
/* Efecto hover para mejor interactividad */
#genCarousel .carousel-control-prev:hover,
#genCarousel .carousel-control-next:hover {
opacity: 0.8;
}
#generaciones .carousel-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.gen-img {
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
border-radius: 12px;
}
/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
.gen-img {
max-height: 60vh;
width: 95%;
margin: 0 auto;
}
#generaciones .carousel-control-prev,
#generaciones .carousel-control-next {
width: 15%;
}
}
/* Ajustes para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
.gen-img {
max-height: 70vh;
}
}
/* labor social */
/* .collage {
animation: fade 10s infinite alternate;
} */
.collage {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 5px;
max-width: 1200px;
height: 600px;
margin: 0 auto;
}
.slot {
position: relative;
overflow: hidden;
}
.slot img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
/* Comienza invisible */
transition: opacity 0.8s ease-in-out;
/* Transición suave de 0.8 segundos */
}
.slot img.active {
opacity: 1;
/* Se vuelve completamente visible */
}
/* forma tipo rompecabezas */
.slot1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.slot2 {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
}
.slot3 {
grid-column: 4 / span 1;
grid-row: 1 / span 1;
}
.slot4 {
grid-column: 4 / span 1;
grid-row: 2 / span 1;
}
.slot5 {
grid-column: 1 / span 4;
grid-row: 3 / span 2;
}
/* carrucel */
/* Separar controles del contenido */
#gradCarousel .carousel-control-prev,
#gradCarousel .carousel-control-next {
top: 50%;
/* posición vertical centrada */
transform: translateY(-50%) translateX(0);
/* centrado exacto y sin tocar horizontal */
width: 50px;
/* opcional: ancho clickeable */
height: 50px;
/* opcional: alto clickeable */
}
/* Ajuste extra: aumentar separación horizontal */
#gradCarousel .carousel-control-prev {
left: -60px;
/* aleja el botón izquierdo del carrusel */
}
#gradCarousel .carousel-control-next {
right: -60px;
/* aleja el botón derecho del carrusel */
}
/* comentario */
/* Ajustar tamaño y dar aire a las fotos de perfil */
#gradCarousel .carousel-item .col-md-4 img {
width: 120px;
/* tamaño fijo más controlado */
height: 120px;
/* cuadrado */
object-fit: cover;
/* que no se deforme */
margin-bottom: 15px;
/* separa la foto del nombre */
margin-top: 15px;
/* separa la foto del borde superior */
}
/* Dar más espacio entre cada testimonio */
#gradCarousel .carousel-item .col-md-4 {
padding: 30px 15px;
/* más espacio vertical y horizontal */
}
/* contactanos */
.seccion-dividida {
position: relative;
/* necesario para que el rectángulo se posicione relativo a la sección */
display: flex;
flex-direction: column;
height: 100vh;
}
.mitad {
flex: 1;
}
.arriba {
background: url('/img/mapa late.png') no-repeat center center;
background-size: cover;
}
.abajo {
background: #7A0C1D;
}
/* El rectángulo centrado */
.rectangulo {
position: absolute;
top: 50%;
left: 15%;
transform: translate(-50%, -50%);
width: 400px;
/* ajusta tamaño */
padding: 30px;
background: white;
/* color del rectángulo */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-radius: 10px;
z-index: 10;
/* asegura que quede al frente */
text-align: center;
}
/* Force black text inside the white contact rectangle so it's readable in dark mode */
.rectangulo,
.rectangulo * {
color: #000 !important;
}
/* iconos externos */
.iconos-externos {
position: absolute;
left: 15%;
transform: translateX(-50%);
bottom: calc(50% + 120px);
/* quedan arriba del rectángulo, ajusta */
display: flex;
gap: 20px;
z-index: 10;
}
.iconos-externos a {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
/* antes 50px */
height: 70px;
/* antes 50px */
background: white;
border-radius: 50%;
color: #7A0C1D;
font-size: 34px;
/* antes 24px */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
transition: background 0.3s, color 0.3s;
}
.iconos-externos a:hover {
background: #7A0C1D;
/* cambia el fondo al pasar */
color: white;
/* y el ícono se vuelve blanco */
}
/* Estilos para controles del carrusel de testimonios */
/* Alternativa más simple - usando filter */
#gradCarousel .carousel-control-prev,
#gradCarousel .carousel-control-next {
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: none;
border: none;
opacity: 0.8;
transition: opacity 0.3s ease;
}
#gradCarousel .carousel-control-prev {
left: -60px;
}
#gradCarousel .carousel-control-next {
right: -60px;
}
/* Convierte las flechas blancas a negras usando filter */
#gradCarousel .carousel-control-prev-icon,
#gradCarousel .carousel-control-next-icon {
filter: invert(1);
/* Convierte blanco a negro */
width: 30px;
height: 30px;
}
#gradCarousel .carousel-control-prev:hover,
#gradCarousel .carousel-control-next:hover {
opacity: 1;
background: none;
}
/* Responsive */
@media (max-width: 768px) {
#gradCarousel .carousel-control-prev {
left: -30px;
}
#gradCarousel .carousel-control-next {
right: -30px;
}
}
/* ==========================
Responsivo
========================== */
/* popup en desktop */
@media (min-width: 992px) {
.expandable-content {
width: 70%;
/* mucho más ancho */
max-width: 1200px;
/* no dejes en none, ponle un límite */
}
.custom-card.active {
transform: none;
/* sin escalado extra */
}
}
/*responsivo*/
@media (min-width: 992px) {
.hero-text {
width: 30%;
}
}
iframe {
border-radius: 20px;
}
@media (max-width: 768px) {
.rectangulo {
width: 80%;
/* 80 % de la pantalla */
/* pegado a la derecha */
left: 5%;
/* quitamos centrado */
transform: translateY(-50%);
/* solo centrado vertical */
text-align: right;
/* contenido alineado a la derecha */
}
.iconos-externos {
/* quitamos centrado */
transform: none;
/* sin translate */
justify-content: flex-end;
/* iconos a la derecha */
}
}
/* Responsive fix: center contact rectangle and place icons above it on small screens */
@media (max-width: 768px) {
.rectangulo {
width: 90% !important;
left: 50% !important;
top: 60% !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
padding: 20px !important;
box-sizing: border-box !important;
z-index: 20 !important;
}
.rectangulo p,
.rectangulo strong,
.rectangulo a {
display: block !important;
text-align: center !important;
color: #000 !important;
}
.iconos-externos {
position: absolute !important;
left: 50% !important;
top: calc(50% - 170px) !important;
transform: translateX(-50%) !important;
bottom: auto !important;
z-index: 30 !important;
justify-content: center !important;
gap: 18px !important;
}
.iconos-externos a {
width: 60px !important;
height: 60px !important;
font-size: 26px !important;
}
}
/* animacion hero */
#heroVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
/* Ensures video covers the area without stretching */
z-index: 1;
/* Keeps the video behind your content */
}
.hero-video.active {
opacity: 1;
}
#hero {
position: relative;
overflow: hidden;
background-color: #000;
}
/* logo */
/* Estilos para el logo en el hero */
.custom-logo {
/* Ajusta estos valores según el tamaño deseado para tu logo */
width: 150px;
height: auto;
margin: 0 auto;
}
.logo-hero {
width: 100%;
height: auto;
display: block;
}
/* Técnica para ocultar texto visualmente pero mantenerlo accesible */
.custom-logo {
position: relative;
overflow: hidden;
}
.custom-logo::after {
content: 'Late Por México';
/* Texto original como respaldo */
position: absolute;
left: -10000px;
/* Oculta el texto fuera de pantalla */
top: 0;
height: 0;
overflow: hidden;
}
/* imagenes de filosofia */
/* Estilos adicionales para las imágenes */
.filosofia-img {
width: 650px;
height: 400px;
object-fit: cover;
max-width: 100%;
}
@media (max-width: 768px) {
.filosofia-img {
width: 100%;
height: auto;
max-height: 300px;
}
}
.equipo-nombre {
font-family: 'Blacksword', cursive, serif;
/* You can add other properties like font-size or color if needed */
}
.equipo-cargo {
font-style: italic;
}
/* Colores específicos para cada red social */
.iconos-externos a[href*="facebook"] i {
color: #3b5998 !important;
/* Azul de Facebook */
}
.iconos-externos a[href*="instagram"] i {
/* Gradiente de Instagram */
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.iconos-externos a[href*="maps"] i {
color: #ea4335 !important;
/* Rojo de Google Maps */
}
.iconos-externos a i {
transition: all 0.3s ease-in-out;
}
.iconos-externos a:hover i {
transform: scale(1.1);
}
#contacto a {
text-decoration: none;
}
/* ==========================
AJUSTES DE ESPACIADO PARA MÓVIL
========================== */
@media (max-width: 768px) {
/* Ajusta el espaciado entre secciones */
.section-full {
padding: 40px 0 !important;
min-height: auto !important;
}
/* Espaciado específico para cada sección */
#conocenos {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
#conocenos {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
#entrenamientos {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
#generaciones {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
#labor {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
#graduados {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
#faq {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
/* Ajusta los títulos */
h1,
h2,
h3 {
margin-top: 0 !important;
margin-bottom: 25px !important;
padding-top: 10px;
}
/* Espacio después de los títulos principales */
h1.fw-bold,
h2.fw-bold {
margin-bottom: 30px !important;
}
/* Mejora el espaciado de textos */
p,
.text-justify-custom {
margin-bottom: 20px !important;
line-height: 1.6;
}
/* Espaciado para botones */
.btn {
margin-top: 15px !important;
margin-bottom: 15px !important;
padding: 12px 25px !important;
}
/* Ajuste específico para botones en conocenos */
#conocenos .btn {
margin-bottom: 10px !important;
}
/* Espaciado para cards */
.custom-card {
margin-bottom: 25px !important;
padding: 20px 15px !important;
}
/* Mejor espaciado en carruseles */
.carousel {
margin-top: 20px !important;
margin-bottom: 30px !important;
}
/* Ajuste para el collage de labor social */
.collage {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
/* Espaciado para accordion */
.accordion-item {
margin-bottom: 15px !important;
}
.accordion-body {
padding: 20px !important;
}
/* Ajuste para testimonios */
#gradCarousel .carousel-item .col-md-4 {
padding: 20px 10px !important;
margin-bottom: 15px !important;
}
/* Espacio entre elementos de formulario */
.form-control,
.form-select {
margin-bottom: 15px !important;
}
/* Ajuste para el hero */
#hero .container {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
/* Navbar spacing */
/* .navbar {
padding-top: 10px !important;
padding-bottom: 10px !important;
} */
}
/* SOLUCIÓN ALTERNATIVA RÁPIDA */
@media (max-width: 768px) {
#hero {
height: 100vh !important;
min-height: 100vh !important;
position: relative !important;
overflow: hidden !important;
}
/* Reset completo de estilos conflictivos */
#hero>* {
height: 100vh !important;
min-height: 100vh !important;
}
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
height: 100vh !important;
min-height: 100vh !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
}
/* Posiciona el texto en el centro */
#hero .container {
position: absolute !important;
top: 45% !important;
transform: translateY(-50%) !important;
}
#hero .container {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 1000;
width: 90% !important;
height: auto !important;
/* ¡IMPORTANTE! Que no ocupe toda la altura */
min-height: auto !important;
max-height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* AJUSTE ESPECÍFICO DEL CUADRO DE TEXTO */
.hero-text {
width: 100% !important;
height: auto !important;
/* Que se ajuste al contenido */
min-height: auto !important;
max-height: 80vh !important;
/* Límite máximo */
left: 0 !important;
position: relative !important;
background-color: rgba(122, 12, 29, 0.9) !important;
padding: 25px 20px !important;
border-radius: 15px;
margin: 0 auto !important;
display: block !important;
overflow: hidden !important;
}
/* Ajusta el contenido interno para que no ocupe espacio innecesario */
.hero-text .display-3 {
margin-bottom: 15px !important;
height: auto !important;
}
.hero-text .lead {
margin-bottom: 10px !important;
line-height: 1.4 !important;
}
/* Asegura que el logo no ocupe espacio excesivo */
.logo-hero {
max-width: 180px !important;
height: auto !important;
margin: 0 auto 15px auto !important;
}
#hero .hero-text .btn {
width: fit-content;
/* Ancho se ajusta al texto */
min-width: auto;
/* Elimina cualquier ancho mínimo */
margin: 15px auto 5px;
/* Centra el botón y añade espacio */
padding: 12px 30px;
/* Espacio interno cómodo */
display: block;
/* Asegura que ocupe su propia línea */
}
}
/* ==========================
AJUSTE DINÁMICO DE SECCIÓN AL EXPANDIR
========================== */
@media (max-width: 768px) {
/* CONTENEDOR EXPANDIDO - POSICIÓN RELATIVA PARA NO SALIR DE LA SECCIÓN */
.expandable-content {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
/* TAMAÑO OPTIMIZADO */
width: 85vw !important;
max-width: 85vw !important;
height: auto !important;
max-height: 70vh !important;
/* SCROLL SI ES NECESARIO */
overflow-y: auto !important;
overflow-x: hidden !important;
/* ESPACIADO */
padding: 20px 15px !important;
margin: 0 !important;
/* ESTILOS */
background: #7A0C1D !important;
border-radius: 12px !important;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4) !important;
z-index: 100 !important;
box-sizing: border-box !important;
}
/* SECCIÓN ENTRENAMIENTOS - AJUSTE DINÁMICO */
#entrenamientos {
position: relative !important;
min-height: 100vh !important;
transition: min-height 0.3s ease !important;
overflow: visible !important;
}
/* CUANDO UN CARD ESTÁ ACTIVO, LA SECCIÓN SE EXPANDE */
#entrenamientos.has-expanded-card {
min-height: 150vh !important;
padding-bottom: 100px !important;
}
/* CONTENEDOR PRINCIPAL - PERMITIR CRECIMIENTO */
#entrenamientos .container {
position: relative !important;
overflow: visible !important;
}
/* CARDS - POSICIÓN RELATIVA PARA EL CONTENIDO EXPANDIDO */
.expandable-card {
position: relative !important;
margin-bottom: 15px !important;
}
/* CUANDO UN CARD ESTÁ ACTIVO, SE MUEVE ARRIBA PARA VISIBILIDAD */
.expandable-card.active {
z-index: 101 !important;
transform: translateY(-50px) !important;
transition: transform 0.3s ease !important;
}
/* OVERLAY DE FONDO DENTRO DE LA SECCIÓN */
#entrenamientos::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 99 !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
pointer-events: none !important;
}
#entrenamientos.has-expanded-card::after {
opacity: 1 !important;
}
/* TEXTO CON FUENTE MÁS PEQUEÑA */
.expandable-content p {
font-size: 18px !important;
line-height: 1.4 !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
text-align: justify !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
}
}
/* ==========================
SECCIONES: FONDO OSCURO Y AJUSTES
Aplicado a: conocenos, entrenamientos,
generaciones, labor, graduados, faq
========================== */
#conocenos,
#entrenamientos,
#generaciones,
#labor,
#graduados,
#faq {
background-color: #000 !important;
color: #fff !important;
box-shadow: none !important;
position: relative;
padding-bottom: 30px; /* espacio para el separador centrado */
}
/* Páginas individuales (filosofia, coaches) en fondo oscuro */
body.dark-page {
background-color: #000;
color: #fff;
}
/* Forzar textos y enlaces que no sean botones a blanco en páginas oscuras */
body.dark-page, body.dark-page .container, body.dark-page .section-full {
color: #fff;
}
body.dark-page a:not(.btn) {
color: #fff !important;
}
/* Separación extra para los botones antes del footer */
.page-buttons {
margin-bottom: 80px;
}
/* Evitar que la navbar fixed-top oculte los títulos en pantallas pequeñas
- Aumenta padding-top de las secciones y añade scroll-margin-top a los títulos
*/
@media (max-width: 991px) {
.section-full {
padding-top: 140px !important; /* espacio superior suficiente para navbar expandida */
}
/* Asegura que los encabezados desplazados por anclas queden visibles */
.section-full h1,
.section-full h2,
.section-full h3 {
scroll-margin-top: 130px;
}
}
/* Texto principal dentro de las secciones (excluye botones y cards para no alterar sus colores) */
#conocenos h1,#conocenos h2,#conocenos h3,#conocenos h4,#conocenos h5,#conocenos h6,
#conocenos p,#conocenos li,#conocenos span,#conocenos a:not(.btn),
#entrenamientos h1,#entrenamientos h2,#entrenamientos h3,#entrenamientos h4,#entrenamientos h5,#entrenamientos h6,
#entrenamientos p,#entrenamientos li,#entrenamientos span,#entrenamientos a:not(.btn),
#generaciones h1,#generaciones h2,#generaciones h3,#generaciones h4,#generaciones h5,#generaciones h6,
#generaciones p,#generaciones li,#generaciones span,#generaciones a:not(.btn),
#labor h1,#labor h2,#labor h3,#labor h4,#labor h5,#labor h6,
#labor p,#labor li,#labor span,#labor a:not(.btn),
#graduados h1,#graduados h2,#graduados h3,#graduados h4,#graduados h5,#graduados h6,
#graduados p,#graduados li,#graduados span,#graduados a:not(.btn),
#faq h1,#faq h2,#faq h3,#faq h4,#faq h5,#faq h6,
#faq p,#faq li,#faq span,#faq a:not(.btn) {
color: #fff !important;
}
/* Mantener colores originales de las cards y botones dentro de estas secciones */
#conocenos .custom-card,
#entrenamientos .custom-card,
#generaciones .custom-card,
#labor .custom-card,
#graduados .custom-card,
#faq .custom-card {
background-color: #7A0C1D; /* mantiene el color vino */
box-shadow: none;
}
#conocenos .btn,
#entrenamientos .btn,
#generaciones .btn,
#labor .btn,
#graduados .btn,
#faq .btn {
/* No alterar botones: dejar sus estilos definidos por .btn */
color: inherit;
}
/* Flechas de carrusel blancas dentro de estas secciones */
#conocenos .carousel-control-prev,
#conocenos .carousel-control-next,
#entrenamientos .carousel-control-prev,
#entrenamientos .carousel-control-next,
#generaciones .carousel-control-prev,
#generaciones .carousel-control-next,
#labor .carousel-control-prev,
#labor .carousel-control-next,
#graduados .carousel-control-prev,
#graduados .carousel-control-next,
#faq .carousel-control-prev,
#faq .carousel-control-next {
color: #fff !important;
}
#conocenos .carousel-control-prev-icon,
#conocenos .carousel-control-next-icon,
#entrenamientos .carousel-control-prev-icon,
#entrenamientos .carousel-control-next-icon,
#generaciones .carousel-control-prev-icon,
#generaciones .carousel-control-next-icon,
#labor .carousel-control-prev-icon,
#labor .carousel-control-next-icon,
#graduados .carousel-control-prev-icon,
#graduados .carousel-control-next-icon,
#faq .carousel-control-prev-icon,
#faq .carousel-control-next-icon {
filter: invert(1) !important; /* fuerza iconos en blanco */
}
/* Acordeón FAQ en color vino con texto blanco */
#faq .accordion,
#faq .accordion-item,
#faq .accordion-button,
#faq .accordion-body {
background-color: #7A0C1D !important;
color: #fff !important;
border: none !important;
}
#faq .accordion-button {
box-shadow: none !important;
}
/* Asegurar que el indicador/caret sea visible (blanco) */
#faq .accordion-button::after {
filter: invert(1) !important;
}
#faq .accordion-button:not(.collapsed) {
background-color: #7A0C1D !important;
color: #fff !important;
}
#faq .accordion-body {
border-top: none !important;
}
/* Aplicar color vino a las tarjetas genéricas (.card) */
.card {
background-color: #7A0C1D !important;
color: #fff !important;
border: none;
}
.card .card-body,
.card .card-title,
.card .card-text {
color: inherit;
}
/* Línea separadora centrada y al 50% de ancho para las secciones objetivo */
#conocenos::before,
#entrenamientos::before,
#generaciones::before,
#labor::before,
#graduados::before,
#faq::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 50%;
height: 1px;
background: #fff;
}
/* Keep cards readable in light mode: cards remain white text on wine background */
body.light-mode .card,
body.light-mode .custom-card,
body.light-mode .expandable-content {
color: #fff !important;
}
body.light-mode .card .card-body,
body.light-mode .card .card-title,
body.light-mode .card .card-text {
color: inherit !important;
}
/* Note: removed `body.dark-page.light-mode` exceptions so light-mode can override page text colors */
/* ==========================
Light mode overrides
- Add `light-mode` class to to switch to light theme
- Sections -> white background, black text
- Section separators -> wine (#7A0C1D)
- Carousel arrows/icons -> reset to dark (remove invert)
- Small inline
separators -> wine
========================== */
body.light-mode {
background-color: #fff;
color: #000;
}
body.light-mode #conocenos,
body.light-mode #entrenamientos,
body.light-mode #generaciones,
body.light-mode #labor,
body.light-mode #graduados,
body.light-mode #faq {
background-color: #fff !important;
color: #000 !important;
}
/* Ensure text inside those sections becomes dark (but keep buttons/cards colors) */
body.light-mode #conocenos h1,
body.light-mode #conocenos h2,
body.light-mode #conocenos p,
body.light-mode #conocenos a:not(.btn),
body.light-mode #entrenamientos h1,
body.light-mode #entrenamientos h2,
body.light-mode #entrenamientos p,
body.light-mode #entrenamientos a:not(.btn),
body.light-mode #generaciones h1,
body.light-mode #generaciones p,
body.light-mode #labor h1,
body.light-mode #labor p,
body.light-mode #graduados h1,
body.light-mode #graduados p,
body.light-mode #faq h1,
body.light-mode #faq p {
color: #000 !important;
}
/* Section separators become wine in light mode */
body.light-mode #conocenos::before,
body.light-mode #entrenamientos::before,
body.light-mode #generaciones::before,
body.light-mode #labor::before,
body.light-mode #graduados::before,
body.light-mode #faq::before {
background: #7A0C1D !important;
}
/* Carousel icons: remove invert so they render dark on light backgrounds */
body.light-mode .carousel-control-prev-icon,
body.light-mode .carousel-control-next-icon {
filter: none !important;
}
/* Small inline separators (hr) should be wine in light mode */
body.light-mode hr {
border-top-color: #7A0C1D !important;
}
/* Strong overrides to ensure correct colors after theme toggle */
/* 1) Force card text white in light-mode (but preserve button styles) */
body.light-mode .card,
body.light-mode .custom-card,
body.light-mode .expandable-content {
color: #fff !important;
}
body.light-mode .card .card-body,
body.light-mode .card .card-title,
body.light-mode .card .card-text,
body.light-mode .custom-card .card-body,
body.light-mode .custom-card .card-title,
body.light-mode .custom-card .card-text {
color: #fff !important;
}
/* Do not override actual button text/colors inside cards (buttons are more specific) */
body.light-mode .card .btn,
body.light-mode .custom-card .btn {
color: inherit !important;
}
/* 2) Ensure pages explicitly marked dark-page keep white text even if light-mode is toggled */
body.dark-page.light-mode .container h1,
body.dark-page.light-mode .container h2,
body.dark-page.light-mode .container h3,
body.dark-page.light-mode .container p,
body.dark-page.light-mode .container li,
body.dark-page.light-mode .container a:not(.btn) {
color: #fff !important;
}
body.dark-page.light-mode .section-full h1,
body.dark-page.light-mode .section-full h2,
body.dark-page.light-mode .section-full h3,
body.dark-page.light-mode .section-full p,
body.dark-page.light-mode .section-full a:not(.btn) {
color: #fff !important;
}
/* 3) Carousel arrows: make them black in light mode, white otherwise.
Use selectors including the carousel IDs to override earlier rules. */
body.light-mode #gradCarousel .carousel-control-prev-icon,
body.light-mode #gradCarousel .carousel-control-next-icon,
body.light-mode #genCarousel .carousel-control-prev-icon,
body.light-mode #genCarousel .carousel-control-next-icon,
body.light-mode #heroCarousel .carousel-control-prev-icon,
body.light-mode #heroCarousel .carousel-control-next-icon {
filter: invert(1) !important; /* black */
}
body:not(.light-mode) #gradCarousel .carousel-control-prev-icon,
body:not(.light-mode) #gradCarousel .carousel-control-next-icon,
body:not(.light-mode) #genCarousel .carousel-control-prev-icon,
body:not(.light-mode) #genCarousel .carousel-control-next-icon,
body:not(.light-mode) #heroCarousel .carousel-control-prev-icon,
body:not(.light-mode) #heroCarousel .carousel-control-next-icon {
filter: none !important; /* white */
}
/* ==========================
Final strong overrides to resolve remaining theme issues
- Make most section text black in light-mode
- Preserve white text inside cards and on pages explicitly marked `dark-page`
- Ensure carousel icons/buttons contrast correctly
========================== */
/* Make general section text dark in light-mode */
body.light-mode .section-full h1,
body.light-mode .section-full h2,
body.light-mode .section-full h3,
body.light-mode .section-full p,
body.light-mode .section-full li,
body.light-mode .section-full a:not(.btn) {
color: #000 !important;
}
/* But keep text inside cards white */
body.light-mode .card,
body.light-mode .custom-card,
body.light-mode .expandable-content {
color: #fff !important;
}
body.light-mode .card p,
body.light-mode .card h5,
body.light-mode .card .card-title,
body.light-mode .card .card-text,
body.light-mode .custom-card p,
body.light-mode .custom-card .card-title,
body.light-mode .custom-card .card-text,
body.light-mode .expandable-content p {
color: #fff !important;
}
/* Ensure buttons (outline-light) become dark and visible in light-mode */
body.light-mode .btn-outline-light {
color: #000 !important;
border-color: #000 !important;
}
body.light-mode .btn-outline-light:hover,
body.light-mode .btn-outline-light:focus {
background: #000 !important;
color: #fff !important;
}
/* Carousel icons: explicitly black in light-mode, white otherwise */
body.light-mode #gradCarousel .carousel-control-prev-icon,
body.light-mode #gradCarousel .carousel-control-next-icon,
body.light-mode #genCarousel .carousel-control-prev-icon,
body.light-mode #genCarousel .carousel-control-next-icon,
body.light-mode #heroCarousel .carousel-control-prev-icon,
body.light-mode #heroCarousel .carousel-control-next-icon {
filter: invert(1) !important; /* black */
}
body:not(.light-mode) #gradCarousel .carousel-control-prev-icon,
body:not(.light-mode) #gradCarousel .carousel-control-next-icon,
body:not(.light-mode) #genCarousel .carousel-control-prev-icon,
body:not(.light-mode) #genCarousel .carousel-control-next-icon,
body:not(.light-mode) #heroCarousel .carousel-control-prev-icon,
body:not(.light-mode) #heroCarousel .carousel-control-next-icon {
filter: none !important; /* white */
}
/* Removed dark-page.light-mode hard overrides so theme toggle controls colors on all pages */
/* Final override: set most section text black in light-mode (broad rule),
then explicitly restore white inside .card and for pages forced dark-page. */
body.light-mode .section-full * {
color: #000 !important;
}
/* Restore white text for cards and custom-card contents */
body.light-mode .card,
body.light-mode .card *,
body.light-mode .custom-card,
body.light-mode .custom-card *,
body.light-mode .expandable-content,
body.light-mode .expandable-content * {
color: #fff !important;
}
/* Ensure buttons keep their intended colors (don't inherit card white unless button is inside card intentionally) */
body.light-mode .card .btn,
body.light-mode .custom-card .btn,
body.light-mode .expandable-content .btn {
color: inherit !important;
}
/* Carousel arrows: use explicit SVG data-URIs to guarantee color in each theme. */
body.light-mode .carousel-control-prev-icon,
body.light-mode .carousel-control-next-icon {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
}
/* For next icon use mirrored path */
body.light-mode .carousel-control-next-icon {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Dark mode arrows (default) - white */
body:not(.light-mode) .carousel-control-prev-icon,
body:not(.light-mode) .carousel-control-next-icon {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% 100% !important;
}
body:not(.light-mode) .carousel-control-next-icon {
background-image: url("data:image/svg+xml;utf8,") !important;
}