html {
font-size: 14px;
font-family: 'Relaway',sans-serif;
height:100%;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
}
.h1{
color:red;
}
body {
/* margin-bottom: 60px; */
font-family: Raleway-Regular;
display: flex;
flex-direction: column;
min-height: 100vh; /* Usa la altura de la ventana */
margin: 0; /* Asegura que no haya márgenes externos */
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
li {
font-family: 'Raleway Custom', sans-serif;
font-weight:normal;
}
/* Busca reglas similares a estas en tu site.css o cualquier CSS personalizado */
.container {
width: 100% !important; /* ¡Esta es una causa común! */
max-width: none !important; /* También anula el límite de Bootstrap */
padding-left: 0 !important; /* A veces, si quitas padding, fuerzas el ancho completo */
padding-right: 0 !important;
}
/* O tal vez se aplica al main o al body: */
main {
width: 100vw; /* 100% del ancho del viewport */
}
body, html {
width: 100%; /* Si no hay un max-width en un contenedor intermedio, esto puede llevar al 100% del viewport */
overflow-x: visible; /* A veces se añade para ocultar barras de scroll horizontales, pero no es la causa del ancho */
}
#carouselExampleIndicators {
height: auto; /* Ajusta esta altura a tu preferencia (ej. 300px, 500px).
height: auto; Esta será la altura visual de tu carrusel. */ /* Muy importante para que no haya desbordamiento si la imagen es más grande */
z-index: 10;
margin-bottom: 5px;
clip-path: none;
margin-bottom: 0;
padding-bottom: 0;
overflow: visible;
width: 100%;
}
/* Asegura que el contenedor interno del carrusel también respete esa altura */
#carouselExampleIndicators .carousel-inner {
height: 100%;
margin-bottom: 0;
padding-bottom: 0;
overflow: hidden;
/* Ocupa el 100% de la altura de #carouselExampleIndicators */
}
/* Y lo más importante: cómo se ajusta la imagen */
#carouselExampleIndicators .carousel-item img {
height: 100%; /* La imagen ocupará el 100% de la altura de su carousel-item padre */
width: 100%; /* Y el 100% del ancho (ya lo tenías con w-100 en el HTML) */
object-fit: cover; /* ¡Esta es la propiedad clave! Escala la imagen para cubrir el área,
recortando los bordes si es necesario para evitar espacios vacíos y mantener la proporción. */
display: block; /* Asegura que la imagen se comporte como un bloque */
margin-bottom: 0 ;
padding-bottom: 0
}
/* Opcional: Ajusta la altura del carrusel para dispositivos móviles si lo necesitas */
/* Forzar que el contenedor wrapper no tenga espacios */
.carousel-wrapper {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Controlar el SVG que está justo después del carrusel */
.custom-shape-divider-top-1763557453 {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
height: 30px !important; /* Ajusta la altura mínima necesaria */
width: 100% !important;
}
.custom-shape-divider-top-1763557453 svg {
height: 30px !important;
width: 100% !important;
display: block;
}
/* Por si hay algún contenedor extra con margen/padding */
body, html, .container, .row {
margin: 0 !important;
padding: 0 !important;
}
/* --- ESTILOS DE CORRECCIÓN FINAL PARA MÓVIL --- */
/* ESTA MEDIA QUERY DEBE ESTAR AL FINAL DE TU ARCHIVO CSS */
@media (max-width: 768px) {
/* Objetivos: Contenedor y sus hijos */
#carouselExampleIndicators,
#carouselExampleIndicators .carousel-inner,
#carouselExampleIndicators .carousel-item {
/* Fuerza la eliminación de anchos fijos */
width: 100% !important;
max-width: 100% !important;
/* Fuerza la eliminación de alturas fijas */
height: auto !important;
min-height: 1px !important;
max-height: 350px !important; /* Límite de altura deseado en móvil */
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* La imagen: 100% de ancho, altura proporcional */
#carouselExampleIndicators .carousel-item img {
width: 100% !important;
height: auto !important;
display: block !important;
/* Si la imagen aparece cortada, usa 'contain'. Si quieres que rellene, usa 'cover'. */
object-fit: cover !important;
}
}
h2 {
font-family: 'Raleway', sans-serif;
font-size: 4em;
text-align: center;
background: #DD1C24;
color: white;
}
a {
font-family: Raleway-Regular, sans-serif;
}
p {
font-family: Raleway-Regular, sans-serif;
font-size: 20px;
text-align: justify;
}
.navbar-nav .nav-item:first-child {
margin-right: 0px !important; /* Asegura que no haya margen a la derecha */
/* Puedes probar con un valor pequeño si quieres un mínimo espacio, ej: 5px */
}
/* Ajusta el margen izquierdo del elemento "Inicio" */
.navbar-nav .nav-item:nth-child(2) { /* Selecciona el segundo li (el de Inicio) */
margin-left: 0px !important; /* Asegura que no haya margen a la izquierda */
/* Puedes probar con un valor pequeño y negativo si necesitas acercarlo aún más, ej: -5px */
}
/* Opcional: Usar gap con Flexbox si los li son elementos flexibles (lo son por las clases de Bootstrap) */
.navbar-nav {
gap: 0.5rem; /* Este valor crea un espacio uniforme entre los elementos li */
/* Si usas 'gap', podrías quitar las clases 'me-*' de los li en el HTML */
}
/* Ajuste específico para la imagen si el width: 10% la hace demasiado pequeña o grande */
.navbar-nav .nav-item img {
width: auto; /* Permite que el ancho se ajuste automáticamente */
height: 40px; /* Define una altura fija para la imagen, ajusta según necesites */
object-fit: contain; /* Asegura que la imagen se vea completa dentro de su espacio */
margin-right: 0px; /* Elimina cualquier margen residual en la imagen misma */
}
/* 1. Contenedor Envolvente (carrusel-con-separador) */
.carrusel-con-separador {
position: relative;
/* 🔑 AUMENTA ESTO HASTA 150px o 200px SI ES NECESARIO */
padding-bottom: 150px;
z-index: 20;
}
/* 2. El Contenedor del Carrusel (carouselExampleIndicators) */
#carouselExampleIndicators {
/* Si tienes una altura fija, esta puede ser la causa del problema */
/* Si la imagen sigue siendo cortada, reduce la altura de las imágenes aquí */
/* height: 600px; */
overflow: visible;
}
/* 3. El SVG Separador */
.separador-ola-inferior {
position: absolute !important;
bottom: 0px !important; /* Pégalo al final del padding */
left: 0 !important;
width: 100% !important;
/* 🔑 ALTURA DE LA OLA: Debe ser menor que el padding-bottom (ej: 80px) */
height: 80px !important;
display: block !important;
/* Coloca la ola detrás del contenido del carrusel */
z-index: 10 !important;
}
/* 🎨 FUERZA EL COLOR DE RELLENO */
.separador-ola-inferior path {
fill: #FFD700 !important; /* Color amarillo */
}
.divisor-irregular {
height: 10px; /* Altura de la sombra visible */
width: 100%;
/* 🔑 Sombra de caja múltiple para simular irregularidad */
box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.08), 0 8px 8px rgba(0,0,0,0.05), 0 16px 16px rgba(0,0,0,0.02);
margin-top: -10px; /* Súbelo ligeramente para que se vea */
position: relative;
z-index: 5; /* Asegura que esté por encima de la siguiente sección */
}
.seccion-info-cibao {
background-color: white; /* Asegura que el fondo sea blanco */
padding-bottom: 0; /* No debe tener padding extra al final */
/* 🔑 APLICA LA FORMA DE OLA USANDO CLIP-PATH */
clip-path: ellipse(50% 100% at 50% 100%);
/* Esta forma crea una onda suave en la parte inferior. */
/* Puedes ajustar '50% 100%' para cambiar la profundidad y el punto de la onda. */
/* O puedes usar una curva más específica con polygon (ejemplo, para una ola más "picuda") */
/* clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); */
position: relative; /* Importante para clip-path en algunos navegadores */
z-index: 2; /* Para que quede por encima de la siguiente sección si es necesario */
}
/* CLASE DE LA SECCIÓN INFERIOR (La sección amarilla) */
.section-top {
position: relative; /* Essential for absolute positioning of the divider */
/* Set background color for the section */
background-color: #007bff;
color: white;
}
.custom-shape-divider-top-1763557453 {
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1763557453 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 38px;
}
.custom-shape-divider-top-1763557453 .shape-fill {
/* fill: #DD1C24; */
}
.custom-shape-divider-bottom-1763560558 {
position: absolute; /* ya está */
bottom: 0; /* ⚠ importante: pegado al borde inferior del contenedor */
left: 0;
width: 100%;
height: 80px; /* ajusta la altura de la ola */
overflow: hidden;
z-index: 20;
}
.custom-shape-divider-bottom-1763560558 svg {
display: block;
width: 100%;
height: 100%;
}
.custom-shape-divider-bottom-1763560558 .shape-fill {
fill: #ffffff; /* cámbialo al color que quieras */
}
.carousel-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.shapedividers_com-3282 {
overflow: hidden;
position: relative;
}
.shapedividers_com-3282::before {
content: '';
font-family: 'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
background-size: 100% 90px;
background-position: 50% 0%;
background-image: url('data:image/svg+xml;charset=utf8, ');
}
@media (min-width:768px) {
.shapedividers_com-3282::before {
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:1025px) {
.shapedividers_com-3282::before {
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 90px;
background-position: 50% 0%;
}
}
@media (min-width:2100px) {
.shapedividers_com-3282::before {
background-size: 100% calc(2vw + 90px);
}
}
.contenedor-footer {
display: flex;
align-items: center; /* centra verticalmente */
justify-content: space-between; /* distribuye contenido */
}
.logo-footer {
height: 40px; /* ajusta según necesites */
width: auto; /* mantiene proporción */
}
.texto-container {
background: #f8f9fa;
border-left: 6px solid #d62828;
padding: 40px;
margin-left: 20px;
margin-right: 20px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.descripcion-donpollo {
font-family: Raleway-Regular, sans-serif;
font-size: 22px;
font-weight: 300;
line-height: 1.9;
color: #333;
margin: 0;
text-align:left;
}
.card-premium {
max-width: 480px;
border: 0;
box-shadow: 0 10px 35px rgba(0,0,0,0.15);
border-radius: 16px;
}
/* Opcional para un look más moderno */
.card img {
object-fit: cover;
}
.btn-primary {
/* Color de fondo: Un rojo intenso */
background-color: orange;
/* Color del borde: El mismo rojo */
border-color: orange;
/* Color del texto: Blanco */
color: #FFFFFF;
}
/* MUY IMPORTANTE: Definir el estilo al pasar el ratón (hover) */
.btn-primary:hover {
/* Ligeramente más oscuro para el efecto visual */
background-color: darkorange;
border-color: darkorange;
color: #FFFFFF;
}
/* Opcional: Estilo cuando está activo (presionado) */
.btn-primary:active,
.btn-primary:focus {
background-color: darkorange !important;
border-color: darkorange !important;
box-shadow: 0 0 0 0.25rem rgba(169, 50, 38, 0.5); /* Sombra de foco */
}
.seccionfondo {
background-image: url('../images/Seccion1.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
/* SOLUCIÓN CLAVE: Define una altura visible */
height: 800px; /* Ejemplo: 400 píxeles de altura */
min-height: 50vh; /* Ejemplo: Mínimo 50% de la altura de la ventana (responsive) */
padding-top: 50px;
padding-bottom: 50px;
position: relative; /* permite posicionar la imagen dentro */
z-index: 1;
overflow:visible;
}
.TextoFondoAzul {
font-family: Raleway-ExtraBold, sans-serif;
font-size: 60px;
color: white;
margin: 0;
padding-bottom: 5px;
text-align:left;
}
.carousel.carousel-fade .carousel-item {
opacity: 0;
transition: opacity .7s ease-in-out;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.carousel.carousel-fade .carousel-item.active {
opacity: 1;
position: relative;
}
.carousel.carousel-fade .carousel-inner {
position: relative;
overflow: hidden;
}
@font-face {
font-family: 'Raleway-ExtraBold';
src: url('../fonts/Raleway-ExtraBold.ttf') format('truetype'), url('/fonts/Raleway-ExtraBold.ttf') format('truetype');
font-weight: 800; /* ExtraBold suele ser 800 */
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway-Regular';
src: url('../fonts/Raleway-Regular.ttf') format('truetype'), url('/fonts/Raleway-Regular.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
.TextoNormal{
font-family:Raleway-Regular;
}
.TextoNegrita{
font-family:Raleway-ExtraBold,sans-serif;
}
.contenedor-texto-animado {
position: relative;
display: inline-block;
z-index: 1;
white-space: nowrap;
/* Ajusta el tamaño del contenedor para que encaje con el SVG */
padding: 0 10px; /* Pequeño padding para dar espacio al borde */
line-height: 1;
display: inline-flex; /* Permite que el contenedor se alinee en línea con el texto */
align-items: center;
}
/* 2. Estilos del SVG (Posicionamiento sobre la palabra) */
.linea-dibujada {
position: absolute;
top: 50%;
left: 50%;
/* Centrado del SVG */
transform: translate(-50%, -50%);
z-index: 0;
/* CRUCIAL: El tamaño del SVG debe coincidir con la palabra */
/* Ajusta estos valores para que el SVG se ajuste al tamaño de "NUEVOS" */
width: 300px;
height: 165px;
vertical-align: middle;
}
/* 3. Estilos de la Elipse (El elemento que se dibuja) */
.elipse-stroke {
fill: transparent; /* No rellenar el interior */
stroke: orange; /* Color de la línea */
stroke-width: 1; /* Grosor de la línea */
/* Configuración para la animación de dibujo (el largo de la línea) */
stroke-dasharray: 580; /* Longitud total de la elipse (ajusta si es necesario) */
stroke-dashoffset: 580; /* Comienza completamente invisible */
/* Aplicar la animación */
animation: dibujarYDesaparecer 20s infinite linear;
}
/* 4. Keyframes (La animación de dibujo y borrado) */
@keyframes dibujarYDesaparecer {
/* 0% a 50%: Dibujar la línea */
0% {
stroke-dashoffset: 400; /* Invisible (inicio) */
opacity: 1;
}
30% {
stroke-dashoffset: 0; /* Completamente dibujada */
opacity: 1;
}
50% {
stroke-dashoffset: 0; /* Se mantiene dibujada un momento */
opacity: 1;
}
/* 50% a 80%: Borrar la línea */
80% {
stroke-dashoffset: -400; /* La línea se borra completamente */
opacity: 0;
}
100% {
stroke-dashoffset: -400; /* Invisible (final) */
opacity: 0;
}
}
.palabra-a-dibujar {
position: relative;
z-index: 10; /* Asegura que el texto esté por encima de la línea SVG si se solapan */
}
.img-flotante {
position: absolute;
top: -40px; /* ajusta según necesidad */
left: -150px; /* esquina superior derecha */
width: 350px; /* ajusta tamaño */
z-index: 2; /* queda ENTRE la sección y el body */
pointer-events: none; /* evita que interfiera con clics */
overflow: visible;
transform: rotate(23deg);
height: auto;
}
.seccionfondo .carousel {
margin-top: -50px;
}
.seccionfondo .TextoFondoAzul{
margin-top: -50px;
}
@media (max-width: 992px) {
.img-flotante {
width: 30vw;
top: -8%;
left: -15%;
}
}
/* Ajustes para pantallas pequeñas móviles */
@media (max-width: 576px) {
.img-flotante {
width: 40vw;
top: -12%;
left: -20%;
}
}
.wrapper-imagen-flotante {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%); /* centrado horizontal y levantado hacia arriba */
z-index: 2;
pointer-events: none;
}
@media (max-width: 768px) {
#carouselExampleIndicators {
max-height: 300px;
}
}
@media (max-width: 576px) {
#carouselExampleIndicators {
max-height: 250px;
}
}
@media (max-width: 576px) {
.TextoNegrita {
font-size: 28px !important;
line-height: 1.2;
}
.descripcion-donpollo {
font-size: 16px;
}
.texto-container {
padding: 0 10px;
}
}
@media(max-width: 576px) {
/* Ajustar la sección para que nada se salga */
.seccionfondo {
position: relative;
overflow: hidden;
padding-top: 40px;
}
/* -------- TÍTULO PRINCIPAL -------- */
.TextoFondoAzul {
font-size: 25px !important;
line-height: 1.15 !important;
text-align: center !important;
display: block;
width: 100% !important;
padding: 0 12px;
margin: 0 auto;
word-break: break-word;
overflow-wrap: break-word;
}
/* Añade separación entre cada bloque del texto */
.TextoFondoAzul span {
display: block;
margin: 3px 0;
}
/* -------- TEXTO ANIMADO / SVG -------- */
.contenedor-texto-animado {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
/* SVG responsable del desbordamiento */
.linea-dibujada {
width: 90px !important;
height: auto !important;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -5px; /* mueve la línea debajo de NUEVOS */
z-index: -1;
}
.w-50 {
width: 100% !important; /* Botón full width en móvil */
}
/* -------- COLUMNA DEL TEXTO -------- */
.texto-col {
padding-left: 0.8rem !important;
padding-right: 0.8rem !important;
margin-top: 10px;
z-index:1;
}
/* -------- IMAGEN FLOTANTE (Pollito) -------- */
.img-flotante {
width: 80px;
position: relative;
display: block;
margin: 0 auto 20px auto;
top: -50px;
left: -200px;
z-index: 0;
opacity: 0.85;
height: auto;
transform: rotate(23deg);
}
}
@media (max-width: 576px) {
.btn.btn-primary.w-50 {
width: 100% !important; /* que ocupe todo el ancho */
padding-left: 0;
padding-right: 0;
font-size: 18px; /* tamaño legible */
display: block;
margin: 0 auto; /* centrado horizontal */
}
.text-lg-start.mt-3 {
text-align: center !important; /* centrar el contenedor */
}
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: invert(19%) sepia(93%) saturate(7460%) hue-rotate(356deg) brightness(95%) contrast(120%);
}
@media (max-width: 992px) {
.mobile-slide {
position: absolute;
top: 70px;
right: 0;
width: 60%;
background: white;
box-shadow: -3px 0 10px rgba(0,0,0,0.15);
padding: 20px;
border-radius: 10px 0 0 10px;
transform: translateX(100%);
transition: transform 0.35s ease-in-out;
z-index: 9999;
}
.mobile-slide.show {
transform: translateX(0);
}
.navbar-nav .nav-link {
padding: 10px 0;
font-size: 18px;
z-index: 9999;
}
}
/* En desktop el menú se ve normal */
@media (min-width: 992px) {
.mobile-slide {
position: static;
transform: none !important;
background: none;
box-shadow: none;
padding: 0;
}
}
@media (max-width: 576px) {
.toggle-header {
padding: 14px !important;
font-size: 18px;
}
.toggle-header span {
display: flex;
align-items: center;
}
.toggle-icon {
font-size: 28px !important;
margin-left: 10px;
}
.toggle-box {
width: 100%;
}
}
@media (max-width: 576px) {
.toggle-box {
padding-left: 15px;
padding-right: 15px;
}
}
.seccionfondo2 {
background-image: url('../images/FondoRojo.webp');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
/* SOLUCIÓN CLAVE: Define una altura visible */
height: 800px; /* Ejemplo: 400 píxeles de altura */
min-height: 50vh; /* Ejemplo: Mínimo 50% de la altura de la ventana (responsive) */
padding-top: 50px;
padding-bottom: 50px;
position: relative; /* permite posicionar la imagen dentro */
z-index: 1;
overflow: visible;
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 576px) {
table.table td, table.table th {
padding: 0.9rem;
font-size: 0.95rem;
}
}
.custom-thead {
background-color: #034693 !important; /* Azul oscuro de tu título */
color: white !important; /* Texto blanco */
/* Añadir font-family si es necesario, aunque thead suele ser negrita por defecto */
font-family: 'Raleway', sans-serif;
}
/* 1.2. Estilo para hacer las filas transparentes (tbody) */
.table-transparent-rows tr {
/* Hacemos el fondo transparente y usamos !important para anular 'table-striped' si se añade accidentalmente */
background-color: transparent !important;
}
/* Si quieres quitar el borde de las filas transparentes para un look más limpio, añade esto: */
.table-transparent-rows td {
border-color: transparent !important;
}
/* ===========================================
2. OTROS ESTILOS RELACIONADOS (Opcional)
=========================================== */
/* Asegúrate de que los colores de fondo de las celdas con rowspan sean consistentes */
.table-transparent-rows td[rowspan] {
/* Si las celdas de Región y Provincia tienen rowspan, su color de fondo también debe ser transparente */
background-color: transparent !important;
}
.carousel-item img {
/* Establece un ancho del 100% para que la imagen ocupe todo el ancho del contenedor */
width: 100%;
/* Establece una altura del 100% para que ocupe toda la altura del contenedor */
height: 100%;
/*
Asegura que la imagen cubra completamente el contenedor
sin distorsionarse, recortando el exceso si es necesario.
*/
object-fit: cover;
}
.seccionfondo3 {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
/* SOLUCIÓN CLAVE: Define una altura visible */
height: 800px; /* Ejemplo: 400 píxeles de altura */
min-height: 50vh; /* Ejemplo: Mínimo 50% de la altura de la ventana (responsive) */
padding-top: 50px;
padding-bottom: 50px;
position: relative; /* permite posicionar la imagen dentro */
z-index: 1;
overflow: visible;
padding-left: 15px;
padding-right: 15px;
}
.flex-grow-content {
/* Esta propiedad absorbe todo el espacio vertical extra */
flex-grow: 1 !important;
/* Asegura que el contenido mínimo sea 0 para que no limite el crecimiento */
min-height: 0 !important;
}
/* 3. Ajuste del Footer */
.footer {
flex-shrink: 0 !important; /* Evita que el footer se comprima */
position: relative !important; /* Anula cualquier posición fija/absoluta */
/* A veces el `pb-5` crea un problema de espacio; si es así, añade esta línea: */
/* margin-top: 0 !important; */
}
/* 4. ANULACIÓN ESPECÍFICA DE BOOTSTRAP: Quita el margen inferior al elemento que lo tenga */
/* Tu layout tiene el pb-5 dentro del main. Asegurémonos de que no interfiera. */
.pb-5 {
padding-bottom: 0 !important;
}
.bg-custom-pollo {
background-color: #F1B634; /* Ejemplo: Dorado/Amarillo */
}
.custom-card {
/* (Tus otros estilos de tarjeta aquí: border, box-shadow, etc.) */
height: 100%;
/* Recomendación: añade un padding interno para el contenido */
padding: 20px;
}
.TextoNormal ul {
list-style-position: inside;
/* Otros estilos específicos de lista si los necesitas */
}
.FondoFooter {
background-image: url('../images/Seccion1.webp');
}
.footer-relative {
position: relative;
}
.footer-custom-styles {
/* En móvil: apilamos */
display: flex;
flex-direction: column;
color: white;
font-family: 'Raleway', sans-serif;
background-image: url('../images/Seccion1.webp');
padding: 15px;
}
.footer-toggler-icon-custom {
/* Posicionamiento Absoluto para móvil/desktop */
position: absolute;
top: 15px;
right: 15px;
z-index: 1000;
/* Estilos visuales del botón */
background-color:white;
border-radius: 8px;
border: none !important;
padding: 6px 8px;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* 2. Estructura del Contenido (Header) */
.footer-header {
display: flex;
/* Reducimos el ancho para que no choque con el botón absoluto */
width: 100%;
justify-content:space-between;
align-items: center;
margin-right: 0; /* Empuja a la izquierda */
}
/* 3. Comportamiento en Desktop (lg y superior) */
@media (min-width: 992px) {
.footer-custom-styles {
/* Distribuimos en fila en desktop */
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.footer-header {
/* En desktop, el header se ajusta junto al botón */
width: 100%;
order: 1; /* Coloca el header primero */
}
.footer-toggler-icon-custom {
/* Mueve el botón para que esté en el orden deseado o déjalo en la esquina */
position: static; /* Quita el posicionamiento absoluto */
order: 3; /* Coloca el botón al final de la fila */
margin-left: 15px;
}
#footerMenuCollapse {
/* La lista de enlaces va en el medio */
order: 2;
/* Estilos de la lista en línea */
display: block !important;
}
.footer-links-list {
display: flex;
flex-direction: row;
gap: 20px;
}
.footer-link-item {
padding: 0;
}
}
.footer-header {
width: 100%;
flex-wrap: wrap;
justify-content: space-between; /* reparte espacio entre bloques */
align-items: center;
}
.footer-menu {
flex: 1 1 auto;
justify-content: flex-start;
margin-left: 20px;
}
.footer-siguenos-wrapper {
flex: 0 0 auto;
justify-content: center;
width: 100%;
margin: 10px 0; /* separación en móvil */
}
.footer-right {
flex: 1 1 auto;
justify-content: flex-end;
white-space: nowrap;
margin-right: 20px;
}
/* Desktop */
@media (min-width: 992px) {
.footer-siguenos-wrapper {
width: auto;
margin: 0;
}
.footer-menu {
justify-content: flex-start;
}
.footer-right {
justify-content: flex-end;
}
}
.custom-shape-divider-bottom-1764704229 {
position: relative;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
z-index:10;
}
.custom-shape-divider-bottom-1764704229 svg {
position: relative;
display: block;
width: calc(115% + 1.3px);
height: 49px;
}
.custom-shape-divider-bottom-1764704229 .shape-fill {
fill: #034693;
}
.Titulo{
color: red;
}
@media (max-width: 768px) {
.custom-shape-divider-top-1763557453 svg {
height: 60px; /* o menos si aún queda espacio */
}
}
@media (max-width: 767px) {
.navbar .container,
.navbar .container-fluid {
justify-content: center !important;
text-align: center;
}
.navbar-nav {
align-items: center;
}
}
/* Estilos solo para móvil */
@media (max-width: 768px) {
/* Botón hamburguesa */
.navbar-toggler {
width: 55px !important;
height: 55px !important;
padding: 8px !important;
border-width: 2px !important;
}
.navbar-toggler-icon {
width: 40px !important;
height: 40px !important;
background-size: 40px 40px !important;
}
/* Menú colapsado */
.navbar-collapse.mobile-slide {
background-color: white; /* para que se vea bien */
padding: 15px 0;
}
/* Lista de links vertical y centrada */
.navbar-collapse.mobile-slide .navbar-nav {
flex-direction: column !important;
align-items: center;
}
/* Links más grandes */
.navbar-collapse.mobile-slide .nav-link {
font-size: 22px !important; /* tamaño más grande */
padding: 12px 20px !important; /* más espacio para tocar */
}
/* Texto general de la página en móvil */
body {
font-size: 18px !important;
line-height: 1.6 !important;
}
p { font-size: 18px !important; }
h1 { font-size: 28px !important; }
h2 { font-size: 24px !important; }
}
.bg-custom-color {
background-color: #034693 !important; /* Color de fondo base */
color: white !important; /* Aseguramos texto blanco */
}
/* MUY IMPORTANTE: Anular el color de fondo cuando el botón está expandido */
.accordion-button:not(.collapsed).bg-custom-color {
background-color: #034693 !important;
/* Opcional: Si quieres un tono diferente al hacer clic, usa un color más claro o más oscuro aquí, por ejemplo: */
/* background-color: #0566d9 !important; */
color: white !important;
/* Anular el box-shadow azul que aparece al estar activo/abierto */
box-shadow: none !important;
}