.container .forowrap{
     max-width: 1200px;
     margin: 0 auto;
     color: #0d4a7e !important;
     padding-top: 15px;
 }
 /* Inicio Estilos Bienestar Animal BCR:2025*/
 .stepper {
     display: flex;
     height: 60px;
     margin-bottom: 30px;
     position: relative;
 }
 
 .step {
     position: relative;
     flex: 1;
     padding: 0 30px;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #004d80;
     margin: -10px;
 }
 
 /* Capa del borde azul (más grande) */
 .step::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #004d80;
     clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
     z-index: 1;
 }
 
 /* Capa del fondo interno (gris o azul si está activo) */
 .step::after {
     content: '';
     position: absolute;
     top: 2px;
     left: 2px;
     width: calc(100% - 4px);
     height: calc(100% - 4px);
     background-color: #fff;
     clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
     z-index: 2;
 }
 
 .step.active::after {
     background-color: #004d80;
 }
 
 .textop {
     color: #fff !important;        
     font-size: 17px !important;
     line-height: 19px !important;
 }
 
 /* Texto encima */
 .step > span {
     position: relative;
     z-index: 3;
     color: inherit;
 }
 
 .step.active > span {
     color: white;
 }
 
 /* Primer paso - sin punta izquierda */
 .step:first-child::before,
 .step:first-child::after {
     clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
 }
 
 .step:first-child {
     padding-left: 20px;
 }
 
 /* Último paso - sin punta derecha */
 .step:first-child:last-child {
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     padding: 0 20px;
 }
 
 .step:last-child {
     padding-right: 20px;
 }
 
 /* Caso único */
 .step:first-child:last-child::before,
 .step:first-child:last-child::after {
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
 
 .step:first-child:last-child {
     padding: 0 20px;
 }
 
 /* Hover */
 .step:hover:not(.active)::after {
     background-color: #E1EFF0;
 }
 
 /* Secciones (sin cambios) */
 .section {
     display: none;
 }
 
 .section.active {
     display: block;
 }
 
 .section-content {
     display: flex;
     gap: 30px;
     align-items: flex-start;
 }
 
 .text-content {
     flex: 1;
 }
 
 .image-content img {
     width: 100%;
     height: auto;
     display: block;
 }
 
 /* Scoped styles para evitar que el CSS general del sitio los sobreescriba */
 .forowrap .textogeneral {
     color: #575756 !important;
     font-size: 16px !important;
     line-height: 1.8 !important;
     margin-bottom: 1rem !important;
     text-align: justify;
     margin-top: 0em !important;
 }
 
 /* Estilos para las tarjetas info (texto blanco dentro de cuadros azules) */
 .forowrap .info-card > div {
     color: #ffffff !important;
     font-size: 14px !important;
 }
 
 .forowrap .info-card strong {
     color: #ffffff !important;
     font-weight: 700 !important;
 }
 
 /* Iconos forzados (tamaño y fondo) */
 .forowrap .info-card i {
     font-size: 50px !important;
     width: 44px !important;
     height: 44px !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     color: #fff !important;
     border-radius: 0 !important;
     flex: 0 0 44px !important;
 }
 
 /* Asegurar que el contenedor de las tarjetas mantenga color y separación */
 .forowrap .info-cards {
     background: #004d80 !important;
 }
 
 /* Franja: ahora cada tarjeta es una caja azul contigua (imagen 2) */
 .info-wrapper {
     margin-top: 20px;
 }
 
 /* contenedor con fondo y radio; las tarjetas serán bloques dentro de él */
 .info-cards {
     display: flex;
     width: 100%;
     background: #004d80;
     border-radius: 0; /* esquinas cuadradas según pedido */
     overflow: hidden;
 }
 
 .info-card {
         flex: 1 1 0;
         color: #fff;
         display: flex;
         align-items: center;
         gap: 14px;
         padding: 0px 0px 0px 30px;
         margin-top: -13px;
         margin-bottom: -25px;
 }
 
 /* separador entre tarjetas: línea vertical clara pero sutil */
 .info-card + .info-card {
     border-left: 3px solid rgba(255,255,255,255); /* separador más grueso */
 }
 
 /* icono: caja pequeña (se ve más consistente con la referencia) */
 .info-card i {
     font-size: 20px;
     width: 44px;
     height: 44px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     border-radius: 0; /* caja del icono cuadrada */
     flex: 0 0 44px;
 }
 
 /* texto dentro de la tarjeta (título + detalle) */
 .info-card > div {
     line-height: 1.3;
 }
 
 .info-card strong {
     display: block;
 }
 
 .contact-button {
     background-color: #004d80;
     color: white;
     padding: 15px;
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
     text-decoration: none;
     font-weight: bold;
 }
 
 .contact-button:hover {
     background-color: #003a66;
 }
 
 #pre-registro-title {
     color: #29ABE2 !important; /* Azul claro como en la imagen */
     font-weight: bold !important;
     letter-spacing: 1px !important; /* Opcional: un poco de espacio entre letras */
     text-align: center !important; /* Centrado */
     padding-bottom: 8px !important; /* Espacio entre texto y línea */
     border-bottom: 2px solid #29ABE2 !important; /* Línea subrayada */
     display: inline-block !important; /* Para que el borde solo cubra el texto, no todo el ancho */
 }
 
 
 #h3general {
    color: #0d4a7e !important;
    margin-bottom: 20px;
    margin-top: 1px !important;
}
 
 /* Mejoras generales de responsividad */
 .img-fluid {
     max-width: 100%;
     height: auto;
     border-radius: 8px;
 }
 
 /* Asegurar que las imágenes no se desborden */
 .image-content {
     width: 100%;
     overflow: hidden;
 }
 
 .image-content img {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 8px;
 }

.btn-agenda {
            background-color: #0d3b66;
            color: white;
            border-radius: 50px;
            padding: 10px 25px;
            font-weight: bold;
            text-transform: uppercase;
            border: none;
        }
        .btn-agenda:hover {
            background-color: #0a2a4d;
            color: white;
        }
 
 /* Espaciado mejorado entre secciones */
 .section {
     margin-bottom: 2rem;
 }
 
 /* Mejorar la lista en móviles */
 .textogeneral ul {
     padding-left: 1.2rem;
 }
 
 .textogeneral li {
     margin-bottom: 0.5rem;
 }

 .background-container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        .background {
            position: absolute;
            top: 25px;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
        }
        .background-1 {
            background-image: url('/media/images/Enmascarar_grupo_7.original.jpg');
            animation: fadeOut 3s ease-in-out forwards;
            z-index: 2;
        }
        .background-2 {
            background-image: url('/media/images/Enmascarar_grupo_7s.original.jpg');
            z-index: 1;
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
 
 /* RESPONSIVE DESIGN - MEDIA QUERIES */
 @media (max-width: 1280px) {
     .container .forowrap {
         padding: 0 15px;
     }
     
     .stepper {
         height: 50px;
         margin-bottom: 20px;
     }
     
     .step {
         font-size: 14px;
         padding: 0 20px;
     }
     
     .textogeneral {
         font-size: 15px !important;
     }
     
     .info-card {
         /* padding: 15px 20px;*/
         gap: 10px;
     }

     .background-container {
        position: relative;
        /* width: 100vw; */
        height: 107vh;
        margin-top: 33px;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }
 }
 /* Tablets y pantallas medianas (768px a 1024px) */
 @media (max-width: 1024px) {
     .container .forowrap {
         padding: 0 15px;
     }
     
     .stepper {
         height: 50px;
         margin-bottom: 20px;
     }
     
     .step {
         font-size: 14px;
         padding: 0 20px;
     }
     
     .textogeneral {
         font-size: 15px !important;
     }
     
     .info-card {
         padding: 15px 20px;
         gap: 10px;
     }

     .background-container {
        position: relative;
        width: 100vw;
        height: 80vh;
        margin-top: 60px;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }
 }
 
  /* Tablets y pantallas medianas (853px a 1280px) */
 @media (max-width: 853px) {
     .container .forowrap {
         padding: 0 15px;
     }
     
     .stepper {
         height: 50px;
         margin-bottom: 20px;
     }
     
     .step {
         font-size: 14px;
         padding: 0 20px;
     }
     
     .textogeneral {
         font-size: 15px !important;
     }
     
     .info-card {
         padding: 15px 20px;
         gap: 10px;
     }

     .background-container {
        position: relative;
        width: 100vw;
        height: 36vh;
        margin-top: 60px;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }
 }

 /* Tablets pequeñas y móviles grandes (768px hacia abajo) */
 @media (max-width: 768px) {
     body {
         padding: 10px;
     }
     
     .stepper {
         height: auto;
         flex-direction: column;
         gap: 10px;
         margin-bottom: 20px;
     }
     
     .step {
         margin: 0;
         padding: 15px 20px;
         border-radius: 8px;
         background-color: #f8f9fa !important;
         border: 2px solid #004d80;
     }
     
     .step::before,
     .step::after {
         display: none;
     }
     
     .step.active {
         background-color: #004d80 !important;
     }
     
     .step > span {
         font-size: 14px;
         font-weight: 600;
         text-align: center;
     }
     
     .step.active > span {
         color: white !important;
     }
     
     .section-content {
         flex-direction: column;
     }
     
     .info-cards {
         flex-direction: column;
         border-radius: 8px;
     }
     
     .info-card {
         padding: 20px;
         border-left: none !important;
         border-bottom: 1px solid rgba(255,255,255,0.3);
     }
     
     .info-card:last-child {
         border-bottom: none;
     }
     
     .info-card i {
         font-size: 24px;
         width: 50px;
         height: 50px;
     }
     
     .textogeneral {
         font-size: 16px !important;
         text-align: left;
         margin-bottom: 1.5rem !important;
     }
     
     .contact-button {
         display: block;
         text-align: center;
         padding: 20px;
         font-size: 16px;
     }
     
     #pre-registro-title {
         font-size: 18px !important;
         margin-bottom: 20px;
     }

    .background-container {
        position: relative;
        width: 100vw;
        height: 36vh;
        margin-top: 60px;
        left: -10px;
        right: 0;
        box-sizing: border-box;
    }
     
 }

 @media (max-width: 600px) {

     .background-container {
        position: relative;
        width: 100vw;
        height: 36vh;
        margin-top: 60px;
        left: -10px;
        right: 0;
        box-sizing: border-box;
    }
 }

 @media (max-width: 500px) {

     .background-container {
        position: relative;
        width: 100%;
        height: 28vh;
    }
 }
 
 /* Móviles pequeños (480px hacia abajo) */
 @media (max-width: 480px) {
     body {
         padding: 5px;
     }
     
     .container .forowrap {
         max-width: 100%;
         padding: 0 10px;
     }
     
     .stepper {
         gap: 8px;
     }
     
     .step {
         padding: 12px 15px;
         font-size: 12px;
     }
     
     .step > span {
         font-size: 12px;
         line-height: 1.2;
     }
     
     .info-card {
         padding: 15px;
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }
     
     .info-card i {
         align-self: center;
         padding-top: 63px;
     }
     
     .textogeneral {
         font-size: 14px !important;
         line-height: 1.6 !important;
     }
     
     .textop {
         font-size: 14px !important;
         line-height: 16px !important;
     }
     
     .contact-button {
         padding: 15px;
         font-size: 14px;
         flex-direction: column;
         gap: 10px;
     }
     
     .contact-button span img {
         width: 24px;
         height: auto;
     }
     
     #pre-registro-title {
         font-size: 16px !important;
     }
     
     /* Hacer el iframe del formulario más pequeño en móviles */
     div[data-fillout-id] {
         height: 1200px !important;
     }

     .background-container {
        position: relative;
        width: 100vw; /* Ancho total de la ventana */
        height: 24vh;
        margin-top: 60px;
        left: -5px; /* Alinea a la izquierda */
        right: 0; /* Opcional, si usas position:absolute */
        box-sizing: border-box;
    }
 }

 /* Móviles pequeños (412px hacia abajo) */
 @media (max-width: 412px) {
     body {
         padding: 5px;
     }
     
     .container .forowrap {
         max-width: 100%;
         padding: 0 10px;
     }
     
     .stepper {
         gap: 8px;
     }
     
     .step {
         padding: 12px 15px;
         font-size: 12px;
     }
     
     .step > span {
         font-size: 12px;
         line-height: 1.2;
     }
     
     .info-card {
         padding: 15px;
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }
     
     .info-card i {
         align-self: center;
     }
     
     .textogeneral {
         font-size: 14px !important;
         line-height: 1.6 !important;
     }
     
     .textop {
         font-size: 14px !important;
         line-height: 16px !important;
     }
     
     .contact-button {
         padding: 15px;
         font-size: 14px;
         flex-direction: column;
         gap: 10px;
     }
     
     .contact-button span img {
         width: 24px;
         height: auto;
     }
     
     #pre-registro-title {
         font-size: 16px !important;
     }
     
     /* Hacer el iframe del formulario más pequeño en móviles */
     div[data-fillout-id] {
         height: 1200px !important;
     }

     .background-container {
        position: relative;
        width: 100vw;
        height: 27vh;
        margin-top: 75px;
        left: -5px;
        right: 0;
        box-sizing: border-box;
    }
 }

  /* Móviles muy pequeños (320px hacia abajo) */
 @media (max-width: 344px) {

    .background-container {
        position: relative;
        width: 100vw;
        height: 19vh;
        margin-top: 60px;
        left: -5px;
        right: 0;
        box-sizing: border-box;
    }
 }
 
 /* Móviles muy pequeños (320px hacia abajo) */
 @media (max-width: 320px) {
     .step {
         padding: 10px 12px;
         font-size: 11px;
     }
     
     .step > span {
         font-size: 11px;
     }
     
     .info-card {
         padding: 12px;
     }
     
     .info-card i {
         font-size: 20px;
         width: 40px;
         height: 40px;
     }
     
     .textogeneral {
         font-size: 13px !important;
     }
     
     .textop {
         font-size: 13px !important;
         line-height: 15px !important;
     }
     
     div[data-fillout-id] {
         height: 350px !important;
     }

          .background-container {
        position: relative;
        width: 100%;
        height: 15vh;
    }
 }
 
 /* Mejoras adicionales para pantallas grandes */
 @media (min-width: 1400px) {
     .container .forowrap {
         max-width: 1600px;
     }
     
     .textogeneral {
         font-size: 17px !important;
     }
     
     .stepper {
         height: 70px;
     }
     
     .step {
         font-size: 18px;
     }
.image-content img {
        width: 64%;
        max-width: 500px;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        display: block;
        margin: 0 auto;
    }
    .background-container {
    position: relative;
    width: 100%;
    height: 100vh;
}
 }
 /* Fin Estilos Bienestar Animal */