/*--------------------------------------------------------------------- 
File Name: style.css 
---------------------------------------------------------------------*/

/*--------------------------------------------------------------------- 
import Fonts 
---------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700,700i,800,800i&display=swap");

/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(font-awesome.min.css);
@import url(owl.carousel.min.css);

/*--------------------------------------------------------------------- 
basic 
---------------------------------------------------------------------*/

/* --- PATRÓN GLOBAL DE SCOOBYZ --- */
body {
  position: relative;
  background-color: #4e85bb; /* El azul base de toda la web */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ocupa el 100% de la pantalla */
}

body::before {
  content: "";
  position: fixed;
  /* EL TRUCO: Hacemos la capa más grande para que la rotación no deje huecos */
  top: -50%;
  left: -50%;
  width: 200vw;
  height: 200vh;

  background-image: url("../images/pla.png");
  background-repeat: repeat;
  background-size: 250px;

  opacity: 0.15;
  transform: rotate(-20deg); /* Ahora sí, rota sin miedo */

  z-index: -1;
  pointer-events: none;
}

/* --- AJUSTE DE SECCIONES --- */
/* Para que las huellas se vean, las secciones no deben tener fondos sólidos que las tapen */
.services,
.section,
.pet,
.testimonial,
.choose,
.contact {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Las tarjetas blancas de servicios sí deben mantener su fondo para ser legibles */
.service_text {
  background: #ffffff !important;
  z-index: 10;
}

a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0;
  font-weight: normal;
  position: relative;
  padding: 0;
  font-weight: normal;
  line-height: normal;
  color: #111111;
  margin: 0;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 13px;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #212121;
  text-decoration: none !important;
  opacity: 1;
}

button:focus {
  outline: none;
}

ul,
li,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  margin: 0px;
  padding: 0;
  color: #232222;
  font-weight: normal;
  font-size: 17px;
  line-height: 28px;
}

a {
  color: #222222;
  text-decoration: none;
  outline: none !important;
}

a,
.btn {
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
}

:focus {
  outline: 0;
}

.btn-custom {
  margin-top: 20px;
  background-color: transparent !important;
  border: 2px solid #ddd;
  padding: 12px 40px;
  font-size: 16px;
}

.lead {
  font-size: 18px;
  line-height: 30px;
  color: #767676;
  margin: 0;
  padding: 0;
}

.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-form input {
  border: none !important;
}

.badge {
  font-weight: 500;
}

blockquote {
  margin: 20px 0 20px;
  padding: 30px;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.full {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.titlepage {
  padding-bottom: 60px;
}

.titlepage h2 {
  font-size: 50px;
  font-weight: bold;
  line-height: 55px;
  color: #2e2e2e;
  position: relative;
  z-index: 99;
}

.read_more {
  display: inline-block;
  background: #1c89bd;
  color: #fff;
  max-width: 271px;
  height: 57px;
  line-height: 57px;
  width: 100%;
  font-size: 17px;
  text-align: center;
  font-weight: 500;
  transition: ease-in all 0.5s;
}

.read_more:hover {
  background: #e5341d;
  color: #fff;
  transition: ease-in all 0.5s;
}

.img_responsive {
  max-width: 100%;
}

.text_align_center {
  text-align: center;
}

.text_align_left {
  text-align: left;
}

.text_align_right {
  text-align: right;
}

.d_flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.container {
  max-width: 1170px;
}

/*---------------------------- 
loader  
----------------------------*/

.loader_bg {
  position: fixed;
  z-index: 9999999;
  background: #fff;
  width: 100%;
  height: 100%;
}

.loader {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 280px;
}

/*--------------------------------------------------------------------- 
header 
---------------------------------------------------------------------*/

/* --- HEADER GENERAL --- */
/* --- CONFIGURACIÓN BASE DEL HEADER --- */
header {
  background: transparent;
  width: 100%;
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
}

/* --- BARRA SUPERIOR (AZUL OSCURO) --- */
.head_top {
  background: #1a2e44;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.head_top .row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Corregido */
}

/* Columna 2: Nombre PELUDITOS (Centro) */
.nombre_header_central {
  color: #ffffff;
  text-align: center;
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  font-size: 24px;
  text-transform: uppercase;
}

/* --- BOTÓN WHATSAPP (Estilo Cápsula) --- */
.whatsapp-top-link {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.whatsapp-top-link:hover {
  background: #ffffff;
  color: #1a2e44 !important;
}

/* --- REDES SOCIALES (Derecha) --- */
.social_top {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  justify-content: flex-end;
}

.social_top li a i {
  color: #ffffff !important;
  font-size: 20px;
  transition: 0.3s ease;
}

.social_top li a:hover i {
  color: #25d366 !important; /* Verde WhatsApp */
  transform: scale(1.2);
}

/* --- BARRA INFERIOR (BOTÓN MENÚ) --- */
.head_bottom {
  padding: 20px 0;
}

.header_flex {
  display: flex;
  justify-content: flex-end; /* Lo empuja a la derecha */
  align-items: center;
}

/* BOTÓN MENÚ ESTILO PÍLDORA BLANCA */
.openbtn {
  background: #ffffff;
  border: none;
  padding: 10px 25px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.openbtn:hover {
  background: #25d366;
  transform: translateY(-2px);
}

.openbtn img {
  width: 22px;
  /* Al ser fondo blanco, el icono debe ser oscuro (negro/azul) */
  filter: brightness(0);
}

.menu_text {
  font-weight: 800;
  color: #1a2e44;
  font-size: 14px;
  letter-spacing: 1px;
}

.openbtn:hover .menu_text {
  color: #ffffff;
}

.openbtn:hover img {
  filter: brightness(0) invert(1); /* Icono blanco cuando el fondo es verde */
}

/* --- SIDEPANEL (MENÚ LATERAL) --- */
.sidepanel {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #1a2e44; /* Azul oscuro para combinar */
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidepanel a {
  padding: 12px 32px;
  text-decoration: none;
  font-size: 22px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
  font-weight: 600;
}

.sidepanel a:hover {
  color: #25d366;
  padding-left: 45px;
}

.sidepanel .closebtn {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 45px;
}
.sidepanel ul {
  list-style: none; /* Quita los puntos negros */
  padding: 0;
  margin: 0;
}

.sidepanel li {
  padding: 0;
  margin: 0;
}

/** end header **/

/** banner_main **/
/* Reseteo y Contenedor Principal */
.hero_peluditos {
  background: #ffffff; /* Fondo limpio */
  min-height: 80vh; /* Ocupa el 80% de la pantalla */
  display: flex;
  align-items: center;
  padding: 40px 0;
  overflow: hidden;
  margin: 15px;
  border-radius: 40px;
  position: relative;
  margin-top: 30px;
}

.container_hero {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  gap: 50px;
  padding: 0 20px;
}

/* --- TEXTO --- */
.hero_text {
  flex: 1;
}

.brand_box {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.hero_logo {
  width: 120px;
  margin-top: 30px;
  height: auto;
}

.hero_tag {
  background: #eef5ff;
  color: #5c91c8;
  padding: 5px 15px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 30px;
  margin: 10px;
}

.hero_title {
  font-size: 3.5rem;
  color: #2d3748;
  line-height: 1.1;
  font-weight: 900;
  margin-bottom: 20px;
}

.hero_title span {
  color: #5c91c8; /* Tu Azul */
}

.hero_p {
  font-size: 1.2rem;
  color: #718096;
  margin-bottom: 35px;
  max-width: 500px;
}

/* --- BOTONES --- */
.hero_btns {
  display: flex;
  gap: 15px;
}

.btn_primary {
  background: #5c91c8;
  color: white;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.btn_secondary {
  background: #25d366; /* Tu Verde */
  color: white;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.btn_primary:hover,
.btn_secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  color: white;
}

/* --- IMAGEN --- */
.hero_image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.image_wrapper {
  position: relative;
  width: 100%;
  max-width: 450px;
}

.image_wrapper img {
  width: 100%;
  border-radius: 30px;
  box-shadow: 20px 20px 0px #f0f4f8; /* Detalle estético azul claro */
}

.experience_badge {
  position: absolute;
  bottom: 20px;
  left: -20px;
  background: white;
  padding: 15px 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.experience_badge strong {
  display: block;
  font-size: 1.5rem;
  color: #25d366;
}

.experience_badge span {
  font-size: 0.8rem;
  color: #718096;
}

/* Responsive para Celulares */
/* RESPONSIVE HEADER Y BANNER */

/* Estilos para el logo en responsive */
.responsive-logo {
  max-height: 45px; /* Ajusta según el alto de tu barra de menú */
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .hero_peluditos {
    padding: 40px 0 20px 0;
    min-height: auto; /* Dejamos que el contenido mande el alto */
  }

  .container_hero {
    flex-direction: column; /* Apilamos texto arriba e imagen abajo */
    text-align: center;
    gap: 30px;
  }

  /* --- TEXTO MÓVIL --- */
  .hero_text {
    order: 1; /* Asegura que el texto vaya primero */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .brand_box {
    justify-content: center;
    margin-bottom: 15px;
  }

  .hero_logo {
    width: 50px;
    margin-top: 0; /* Quitamos el margen extra en móvil */
  }

  .hero_tag {
    margin-top: 0;
  }

  .hero_title {
    font-size: 2.2rem; /* Tamaño manejable para celular */
    margin-bottom: 15px;
  }

  .hero_p {
    font-size: 1rem;
    margin-bottom: 25px;
    padding: 0 10px;
  }

  /* --- BOTONES MÓVIL --- */
  .hero_btns {
    flex-direction: column; /* Botones uno sobre otro */
    width: 100%;
    max-width: 300px; /* Para que no sean gigantes de lado a lado */
    gap: 12px;
  }

  .btn_primary,
  .btn_secondary {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }

  /* --- IMAGEN MÓVIL --- */
  .hero_image {
    order: 2; /* Imagen debajo de los botones */
    width: 100%;
    margin-top: 20px;
  }

  .image_wrapper {
    max-width: 320px; /* Evita que la imagen se vea enorme */
  }

  .image_wrapper img {
    box-shadow: 10px 10px 0px #f0f4f8; /* Sombra más pequeña para móvil */
  }

  .experience_badge {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%); /* Centramos la medalla en móvil */
    padding: 10px 15px;
    width: 140px;
  }

  .experience_badge strong {
    font-size: 1.2rem;
  }
}
/**end banner main**/

/** services **/

/* --- SECCIÓN SERVICES ACTUALIZADA --- */

/* 1. Mantenemos tu base de .services pero añadimos z-index y overflow */
.services {
  padding-top: 90px;
  padding-bottom: 90px;
  background: #4e85bb;
  position: relative;
  z-index: 1; /* Establece el contexto de capas */
  overflow: hidden; /* ¡Importante! Para que no se vean los bordes de las huellas rotadas */
}

/* --- TUS ESTILOS DE TARJETAS (Se mantienen igual) --- */
.service_text {
  text-align: center;
  margin-top: 30px;
  background: #fff;
  padding: 40px 25px;
  position: relative;
  z-index: 99; /* Asegura que estén por encima de todo */

  border-radius: 15px;
  border: 1px solid #e1e1e1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

/* ... El resto de tu código (hover, h3, p, títulos) se queda exactamente igual ... */

/* Efecto de elevación al pasar el mouse */
.service_text:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: #003366; /* Azul oscuro de Peluditos */
}

.service_text i img {
  max-width: 80px; /* Controlamos el tamaño del icono */
  margin: 0 auto;
}

.service_text h3 {
  color: #232222;
  font-size: 20px; /* Un poco más grande para que resalte */
  line-height: 24px;
  padding-top: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.service_text p {
  padding-top: 15px;
  padding-bottom: 10px;
  color: #555;
  font-size: 15px;
  line-height: 2;
}

.titulo_de_servicios {
  text-align: center; /* Centra el texto del h2 y el p */
  width: 100%;
  margin-bottom: 40px;
}

.titulo_de_servicios h2 {
  color: #ffffff !important; /* Forzamos el blanco puro */
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
}

.titulo_de_servicios p {
  color: #ffffff !important; /* También el párrafo en blanco para que se lea bien */
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.9; /* Un toque de transparencia para que no sea tan chillón */
  margin: 0 auto; /* Centra el bloque del párrafo */
  max-width: 700px; /* Evita que el texto se estire demasiado */
}

/* Contenedor para centrar */
.pb-button-container {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical (si el contenedor tiene altura) */
  padding: 30px 0; /* Espaciado superior e inferior */
  width: 100%;
}

/* Estilo del Botón */
.btn-peluditos-main {
  display: inline-block;
  background-color: #5c91c8; /* Azul institucional de Peluditos */
  color: #ffffff;
  padding: 15px 35px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px; /* Forma ovalada */
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(92, 145, 200, 0.3);
  border: none;
}

/* Efectos al pasar el mouse */
.btn-peluditos-main:hover {
  background-color: #4a7aa8; /* Un tono más oscuro al pasar el cursor */
  transform: translateY(-3px); /* Pequeño salto hacia arriba */
  box-shadow: 0 8px 20px rgba(92, 145, 200, 0.4);
  color: #ffffff;
}

/**services page**/
/* Contenedor Principal */
.pb-services-section {
  padding: 80px 40px;
  padding-top: 100px; /* Aumentamos el espacio interno superior */
  background: #ffffff;
  border-radius: 40px;
  position: relative;
  margin-top: 30px; /* Esto hace que la curva se monte elegantemente sobre el azul */
  z-index: 10;
  box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.05);
  margin: 10px;
}

.pb-tag {
  color: #25d366;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 20px;
}

.pb-subtitle {
  color: #718096;
  max-width: 600px;
  margin: 10px auto 40px;
}

/* Grid de 4 Columnas para pantallas grandes */
.pb-services-grid {
  display: grid;
  /* En PC se verán 4, en tablet 2, en móvil 1 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

/* Tarjeta Individual */
.pb-service-card {
  background: #ffffff !important; /* Forzamos el blanco */
  padding: 40px 30px;
  border-radius: 35px;
  border: 1px solid #edf2f7;
  position: relative; /* CLAVE: Para que el z-index funcione */
  z-index: 5; /* Por encima de las huellas decorativas */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pb-service-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 50px rgba(92, 145, 200, 0.15);
  border-color: #5c91c8;
}

/* Iconos circulares (Punto de inicio Azul) */
.pb-service-icon {
  width: 85px;
  height: 85px;
  background: #5c91c8; /* Tu azul institucional */
  color: #ffffff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  margin: 0 auto 25px;
  /* Animación de giro */
  transition: 0.5s ease;
}

/* RECUPERAMOS LA ANIMACIÓN VERDE */
.pb-service-card:hover .pb-service-icon {
  background: #25d366; /* Verde institucional */
  color: white;
  transform: rotateY(180deg); /* El giro 3D que te gusta */
}

.pb-service-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #2d3748;
  margin-bottom: 12px;
}

/* Listado de características */
.pb-service-features {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  text-align: left;
}

.pb-service-features li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #4a5568;
  display: flex;
  align-items: center;
}

.pb-service-features i {
  color: #25d366;
  margin-right: 12px;
  font-size: 16px;
}

/* Estilo General de la Tabla */
.pb-pricing-section {
  padding: 60px 40px;
  background: #ffffff;
  border-radius: 40px;
  margin: 10px;
}

.table-responsive {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.pb-custom-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.pb-custom-table thead th {
  background: #5c91c8; /* Tu azul institucional */
  color: white;
  padding: 20px;
  border: none;
  text-align: center;
  font-weight: 700;
}

.pb-custom-table tbody td {
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f1f1f1;
  color: #4a5568;
}

.pb-custom-table tbody tr:last-child td {
  border-bottom: none;
}

/* Fila de Promociones Destacada */
.highlight-promo-row {
  background-color: #f1fdf6; /* Fondo verde muy suave */
}

.highlight-promo-row td {
  color: #25d366 !important; /* Texto verde */
  font-weight: 700;
}

.highlight-promo-row td:first-child {
  color: #2d3748 !important;
}

/* Notas del pie */
.pricing-footer-notes p {
  font-size: 14px;
  color: #fc1d1d;
  margin-bottom: 10px;
}

.pricing-footer-notes i {
  color: #e61717;
  margin-right: 8px;
  width: 20px;
}
/* Subtítulos de tablas */
.table-sub-title {
  font-size: 1.4rem;
  color: #004d40;
  margin-bottom: 20px;
  font-weight: 700;
}

.table-sub-title i {
  color: #25d366;
  margin-right: 10px;
}

/* Caja de Ventaja Mensual (Sutil pero efectiva) */
.monthly-advantage-box {
  background: linear-gradient(90deg, #f1fdf6 0%, #ffffff 100%);
  border-left: 5px solid #25d366;
  padding: 25px;
  border-radius: 15px;
  margin: 30px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.advantage-icon {
  font-size: 2rem;
  color: #25d366;
}

.advantage-text strong {
  display: block;
  font-size: 1.1rem;
  color: #2d3748;
}

.advantage-text p {
  margin: 0;
  color: #718096;
  font-size: 0.95rem;
}

/* Estilo de tablas */
.main-pricing thead th {
  background-color: #5c91c8; /* Tu azul principal */
}

.hourly-pricing thead th {
  background-color: #a0aec0; /* Un gris profesional para los esporádicos */
}

.pb-custom-table thead th {
  background-color: #5c91c8;
  color: white;
  text-align: center;
  font-size: 0.95rem;
  padding: 15px 10px;
}

.pb-custom-table tbody td {
  text-align: center;
  font-size: 0.9rem;
  padding: 15px 10px;
}

/* Columna de nombres de servicios alineada a la izquierda */
.pb-custom-table tbody td:first-child {
  text-align: left;
  font-weight: bold;
  background-color: #f8fafc;
}

.highlight-promo-row {
  background-color: #f1fdf6 !important;
  font-weight: bold;
  color: #25d366;
}

.table-sub-title {
  color: #2d3748;
  font-weight: 800;
  border-bottom: 3px solid #25d366;
  display: inline-block;
  padding-bottom: 5px;
}

.pb-cat-care-section {
  padding: 60px 40px;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #ffffff 100%
  ); /* Un crema suave */
  border-radius: 40px;
  margin-top: 40px;
  margin: 50px;
}

/* Badge de Precio */
.cat-image-container {
  position: relative;
  padding: 40px;
}

.cat-main-icon {
  font-size: 120px;
  color: #ffffff; /* Color naranja gatuno */
  filter: drop-shadow(0 10px 15px rgba(255, 255, 255, 0.3));
}

/* Contenedor de la Imagen */
.cat-image-wrapper {
  position: relative; /* Esto es el ancla para el precio de $5.000 */
  padding: 10px;
  display: inline-block;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Ajuste del badge para que no se pierda */
.cat-price-badge-floating {
  position: absolute;
  bottom: 10px;
  right: -10px;
  background: #25d366;
  color: white;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 1rem;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
  z-index: 10;
}

/* Estilo de la imagen gato.png */
.img-cat-photo {
  width: 100%;
  max-width: 320px; /* Tamaño máximo para que no se vea gigante */
  border-radius: 25px; /* Bordes redondeados sutiles */
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cat-image-wrapper:hover .img-cat-photo {
  transform: scale(1.03); /* Pequeño efecto al pasar el mouse */
}

/* Badge de Precio Flotante (Recuperado) */
.cat-price-badge-floating {
  position: absolute;
  bottom: -20px; /* Sobresale un poco hacia abajo */
  right: -20px; /* Sobresale un poco hacia la derecha */
  background: #25d366; /* Verde institucional */
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  font-size: 1.1rem;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
  transform: rotate(5deg);
  z-index: 2;
}

.cat-price-badge-floating strong {
  font-weight: 900;
}

.cat-price-badge-floating span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 400;
}

/* Ajustes de la lista para usar checkmarks en lugar de huellas (más profesional) */
.cat-service-list li i {
  color: #25d366; /* Verde institucional */
  margin-right: 12px;
}

.cat-price-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #25d366;
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
  transform: rotate(5deg);
}

.cat-price-badge span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 400;
}

/* Lista de tareas */
.cat-service-list {
  list-style: none;
  padding: 0;
  margin-top: 25px;
}

.cat-service-list li {
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: #4a5568;
  display: flex;
  align-items: center;
}

.cat-service-list i {
  color: #f6ad55;
  margin-right: 15px;
  font-size: 1.2rem;
}

/* Botón Verde */
.btn-peluditos-verde {
  display: inline-block;
  background-color: #25d366;
  color: white;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.btn-peluditos-verde:hover {
  background-color: #1ebe57;
  transform: scale(1.05);
  color: white;
}

.pb-nursery-section {
  padding: 60px 40px;
  background-color: #ffffff;
  border-radius: 40px;
  margin: 20px;
}

.nursery-card {
  padding: 30px;
  border-radius: 25px;
  text-align: center;
  height: 100%;
  transition: 0.3s;
  border: 2px solid transparent;
}

.small-breed {
  background-color: #f0f9ff; /* Azul muy claro */
  border-color: #5c91c8;
}

.large-breed {
  background-color: #fff9f0; /* Naranja muy claro */
  border-color: #f6ad55;
}

.nursery-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.nursery-type {
  font-weight: 800;
  margin-bottom: 20px;
  color: #2d3748;
}

.nursery-price-list {
  list-style: none;
  padding: 0;
}

.nursery-price-list li {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
}

.nursery-price-list li:last-child {
  border-bottom: none;
}

.pack-discount-info {
  background: #f1fdf6;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid #25d366;
}

.nursery-footer p {
  font-size: 0.9rem;
  text-align: center;
}

/* SECCIÓN ADIESTRAMIENTO (Oscura y Profesional) */
/* Contenedor base blanco */
.pb-service-white {
  background-color: #ffffff;
  padding: 50px 40px;
  border-radius: 35px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  margin: 50px;
  height: auto;
}

/* Etiquetas de color */
.pb-tag-blue {
  background-color: #5c91c8; /* Tu azul */
  color: white;
  padding: 5px 15px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
}

.pb-tag-green {
  background-color: #25d366; /* Tu verde */
  color: white;
  padding: 3px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Mini tarjetas de entrenamiento */
.training-grid {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.training-card-mini {
  background-color: #f8fbff;
  padding: 15px;
  border-radius: 15px;
  border-top: 4px solid #5c91c8;
  flex: 1;
}

.price-text {
  color: #5c91c8;
  font-weight: 800;
  font-size: 1.1rem;
}

/* Lista de etología */
.etology-check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.etology-check-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.etology-check-list i {
  color: #25d366;
}

/* Imágenes con borde redondeado profesional */
.img-service-branded {
  width: 100%;
  max-width: 350px;
  border-radius: 30px;
  border: 5px solid #f8fbff;
}

/* Botón Verde */
.btn-peluditos-green {
  display: inline-block;
  background-color: #25d366;
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}
/* Responsividad para móviles */
@media (max-width: 768px) {
  .pb-custom-table {
    font-size: 13px;
  }
  .pb-custom-table thead th,
  .pb-custom-table tbody td {
    padding: 12px 8px;
  }
}

@media (max-width: 768px) {
  .pb-custom-table {
    display: block;
    width: 100%;
    overflow-x: auto; /* Permite scroll lateral si la tabla es muy ancha */
  }
  .pb-pricing-section {
    padding: 40px 15px; /* Menos espacio en los lados para ganar área de lectura */
  }
}
/* end services */

/** pet **/

/* --- SECCIÓN PET CORREGIDA (IMAGEN FIJA) --- */
.pet {
  /* 1. Recuperamos y fijamos la imagen en su lugar original */
  background-image: url("../images/pet.jpg") !important; /* Forzamos la imagen */
  background-position: center center !important; /* Centrado perfecto y fijo */
  background-size: cover !important; /* Cubre todo el área sin deformar */
  background-repeat: no-repeat !important; /* No se repite */

  padding: 90px 0;
  margin-top: 90px;
  position: relative;

  /* 2. Establecemos el contexto de capas */
  z-index: 1; /* Esto asegura que el fondo global de huellas no la tape */
}

/* --- REPARACIÓN DE ADORNOS (ESQUINAS BLANCAS) --- */

/* El adorno de la DERECHA (bottom) */
.pet::before {
  content: "";
  position: absolute;

  /* Posición exacta original */
  bottom: 0px !important;
  right: 10px !important;

  /* Dimensiones originales */
  width: 143px !important;
  height: 83px !important;

  /* Imagen del adorno */
  background-image: url("../images/right.png") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important; /* Asegura que el pico blanco quede abajo */

  /* Capas: Por encima de la foto del perro */
  z-index: 2;

  /* Para que los pseudo-elementos funcionen */
  display: block;
}

/* El adorno de la IZQUIERDA (top) */
.pet::after {
  content: "";
  position: absolute;

  /* Posición exacta original */
  top: 0px !important;
  left: 10px !important;

  /* Dimensiones originales */
  width: 143px !important;
  height: 84px !important;

  /* Imagen del adorno */
  background-image: url("../images/lefi.png") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important; /* Asegura que el pico blanco quede arriba */

  /* Capas: Por encima de la foto del perro */
  z-index: 2;

  /* Para que los pseudo-elementos funcionen */
  display: block;
}

/* --- AJUSTE DE TEXTO --- */
.pet .titlepage h2 {
  color: #ffffff; /* Mantenemos el blanco */
  font-size: 40px; /* Asegura un buen tamaño */
  font-weight: bold;
  text-align: center;
  line-height: 1.2;

  /* --- ESTO ES LO IMPORTANTE PARA EL CONTRASTE --- */
  /* Añade una sombra suave para "levantarlo" de las nubes */
  text-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.4),
    /* Sombra principal: suave y difuminada */ 0px 1px 1px rgba(0, 0, 0, 0.2);
}

.pet .titlepage span {
  line-height: 30px;
  padding-bottom: 25px;
  font-size: 18px; /* Lo subí un punto para que se lea mejor */
  font-weight: 500; /* Un poco más de cuerpo para la fuente */

  /* Nuevo color: Un gris carbón muy profesional */
  color: #2c3e50;

  display: block; /* Asegura que el padding-bottom funcione bien */
  text-align: center; /* Mantiene el centrado que logramos antes */
}

/* --- BOTÓN CONTACTANOS CON FUERZA VISUAL --- */
.pet .read_more {
  display: table; /* O inline-block con text-align: center en el padre */
  margin: 0 auto; /* Centra horizontalmente */

  /* Mantén el resto de tu código igual... */
  background-color: #4e85bb;
  color: #ffffff !important;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 40px;
  border-radius: 50px; /* Forma de cápsula */
  transition: all 0.3s ease-in-out;
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para dar relieve */
  text-decoration: none;
}

/* Efecto al pasar el mouse (Hover) */
.pet .read_more:hover {
  background-color: #2ecc71; /* Cambia a verde al pasar el mouse */
  color: #ffffff !important;
  transform: scale(1.1); /* Crece un poquito */
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4); /* Sombra verde */
  border-color: #ffffff;
}

/* Ajuste de espacio para que no choque con el texto */
.pet .titlepage h2 {
  padding-bottom: 30px !important; /* Reducimos un poco el espacio del h2 */
}
/** end pet **/

/** testimonial **/

.testimonial_section {
  /* Esto crea una capa blanca semitransparente sobre el fondo del body */
  background-color: transparent;
  padding: 100px 0;
  position: relative;
  backdrop-filter: blur(
    3px
  ); /* Opcional: desenfoca un poco las huellas atrás */
}

.titlepage h2 span {
  color: #ffffff; /* Tu azul */
}

.sub_title {
  color: #25d366; /* Tu verde */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Ajuste específico para la sección de testimonios si es necesario */
.title-container {
  background: #ffffff;
  max-width: 600px; /* Un poco más estrecho para testimonios se ve mejor */
  margin: 0 auto 50px;
  padding: 35px;
  border-radius: 30px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2; /* Para que siempre esté por encima de las huellas */
}

/* Estilo para el h2 dentro de testimonios */
.title-container h2 {
  color: #0d1b2a !important;
  font-weight: 800;
  font-size: 35px;
}

.title-container .highlight {
  color: #4e85bb; /* El azul de tu logo */
}

/* Tarjeta Estilo Burbuja */
.test_card {
  background: #ffffff;
  max-width: 850px;
  margin: 0 auto;
  padding: 60px;
  border-radius: 40px;
  /* Sombra más marcada para que las huellas no distraigan */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 10;
}

.test_card::before {
  content: "🐾"; /* O una imagen de huellita */
  position: absolute;
  top: -20px;
  left: -20px;
  font-size: 40px;
  transform: rotate(-15deg);
  opacity: 0.2;
}

.quote_icon {
  font-size: 40px;
  color: rgba(92, 145, 200, 0.2);
  margin-bottom: 20px;
}

.testimonial_text {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #4a5568;
  font-style: italic;
  margin-bottom: 30px;
}

/* Info del Usuario */
.user_info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-top: 1px solid #ffffff;
  padding-top: 25px;
}

.user_img img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #5c91c8;
  object-fit: cover;
}

.user_details h4 {
  margin: 0;
  font-weight: 800;
  color: #2d3748;
}

.user_details span {
  color: #718096;
  font-size: 0.9rem;
}

.stars {
  color: #ffc107; /* Color oro para las estrellas */
  font-size: 0.8rem;
  margin-top: 5px;
}

/* Flechas de Navegación */
.nav_btn {
  background: #ffffff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  transition: 0.3s;
}

.nav_btn:hover {
  background: #25d366;
  transform: scale(1.1);
}
/** end testimonial **/

/** choose **/

/* --- Sección Principal --- */
.choose.pb-section-impact {
  background: #4e85bb url("ruta-de-tus-huellas.png") repeat; /* Mantén el fondo de huellas */
  padding: 100px 0;
  position: relative;
}

/* --- Título con Estilo --- */
/* --- El Nuevo Contenedor Blanco --- */
.titlepage.title-container {
  background: #ffffff; /* Fondo blanco puro */
  max-width: 650px; /* Ancho máximo para que no ocupe toda la pantalla */
  margin: 0 auto 60px; /* Centrado y con aire abajo antes de las tarjetas */
  padding: 40px 30px; /* Espacio interno generoso */
  border-radius: 30px; /* Bordes redondeados tipo burbuja */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
  position: relative; /* Para la decoración */
  border: 1px solid rgba(0, 0, 0, 0.03); /* Borde sutil */
}

/* --- Título H2 (Ahora dentro del contenedor blanco) --- */
.titlepage.title-container h2 {
  color: #0d1b2a !important; /* Texto oscuro para legibilidad sobre blanco */
  font-size: 38px;
  font-weight: 800;
  margin: 0;
}

/* --- Resaltado del nombre "Peluditos" (Azul de marca) --- */
.titlepage.title-container .highlight {
  color: #4e85bb;
}

/* --- Etiqueta "Excelencia Canina" (Verde de marca) --- */
.excelencia-tag {
  color: #25d366;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  display: block;
  margin-bottom: 10px;
}

/* --- Línea Divisoria Verde --- */
.divider-verde {
  width: 60px;
  height: 4px;
  background: #25d366;
  margin: 15px auto 0;
  border-radius: 2px;
}

/* --- Tarjetas de Impacto --- */
.teab_box {
  margin-top: 40px;
  background: #ffffff;
  padding: 50px 25px;
  border-radius: 30px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border-bottom: 5px solid transparent;
}

/* El número flotante */
.box-number {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 40px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05);
  transition: 0.4s;
}

/* El círculo del icono */
.icon-wrap {
  width: 85px;
  height: 85px;
  background: #f8f9fa;
  color: #1c89bd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 25px;
  font-size: 32px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
  transition: 0.4s;
}

.teab_box h3 {
  color: #0d1b2a;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.teab_box p {
  color: #555555;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Efecto Hover (Impacto Total) --- */
.teab_box:hover {
  transform: translateY(-15px);
  background: #1c89bd;
  border-bottom: 5px solid #25d366; /* Línea verde de éxito al activar */
}

.teab_box:hover .icon-wrap {
  background: #ffffff;
  color: #25d366;
  transform: rotateY(360deg);
}

.teab_box:hover h3,
.teab_box:hover p {
  color: #ffffff;
}

.teab_box:hover .box-number {
  color: rgba(255, 255, 255, 0.2);
  transform: scale(1.2);
}
/* Contenedor principal para centrar y dar aire */
.pb-history-cta {
  text-align: center;
  padding: 60px 0 20px;
  position: relative;
  z-index: 5;
}

/* El Botón con estilo moderno */
.btn-history {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #25d366; /* Verde vibrante para resaltar sobre el azul */
  color: white;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
  transition: all 0.4s ease;
  border: 2px solid transparent;
}

.btn-history:hover {
  background: #ffffff;
  color: #4e85bb;
  border-color: #25d366;
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Texto pequeño debajo para "llenar" visualmente */
.cta-note {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 20px;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 1px;
}

/* Decoración sutil detrás del botón para que no se vea vacío */
.cta-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  z-index: -1;
  filter: blur(30px);
}

@media (max-width: 768px) {
  /* 1. Ajuste del contenedor general */
  .titlepage {
    padding: 40px 15px !important;
    background: transparent !important; /* Quitamos el recuadro azul sólido si lo tiene */
    width: 100% !important;
  }

  .title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* 2. El Tag de Excelencia (el texto verde) */
  .excelencia-tag {
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #25d366 !important; /* Verde vibrante */
    margin-bottom: 10px;
    display: block;
    font-weight: 800;
  }

  /* 3. Título Principal */
  .titlepage h2 {
    font-size: 28px !important; /* Tamaño más cómodo para móvil */
    color: #ffffff !important; /* Blanco para que resalte sobre el fondo de huellas */
    line-height: 1.2 !important;
    font-weight: 800;
    margin: 0 auto 15px auto;
    max-width: 90%;
  }

  /* 4. El Span de "Peluditos" (Resaltado) */
  .titlepage h2 .highlight {
    color: #ffffff !important; /* O puedes usar el azul claro si prefieres */
    display: block; /* Hace que "Peluditos?" baje a la siguiente línea si es necesario */
  }

  /* 5. El divisor verde centrado */
  .divider-verde {
    width: 60px !important;
    height: 4px !important;
    background-color: #25d366 !important;
    margin: 0 auto !important;
    border-radius: 10px;
  }
}

/* end choose */

/** contact **/

/* Contenedor Principal */
.cta-final {
  padding: 100px 0; /* Bajamos un poco el padding para dar aire */
  background: linear-gradient(135deg, #4a90e2 0%, #2a5298 100%);
  position: relative;
  overflow: visible; /* CAMBIO CLAVE: Permite que el logo "respire" */
  z-index: 1;
}

/* Título Impactante */
.cta-title {
  font-size: 52px !important;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 15px;
}

.cta-title span {
  color: #ffcc00; /* Amarillo para resaltar "servicio" */
  display: block;
}

.divider-left {
  width: 80px;
  height: 5px;
  background: #ffcc00;
  margin-bottom: 30px;
  border-radius: 10px;
}

.cta-text {
  font-size: 22px;
  color: #f0f0f0;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Botón con Brillo (Glow) */
.btn-whatsapp-glow {
  display: inline-block;
  padding: 18px 35px;
  background-color: #25d366;
  color: white !important;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
  border: 2px solid transparent;
}

.btn-whatsapp-glow:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
  background-color: #1ebe57;
  border-color: #ffffff;
}

.btn-whatsapp-glow i {
  margin-right: 10px;
  font-size: 24px;
}

/* Animación del Logo */
.cta-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-logo img {
  max-width: 450px;
  width: 100%;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Ajustes para Móviles */
@media (max-width: 768px) {
  .cta-title {
    font-size: 38px !important;
    text-align: center;
  }
  .cta-text {
    text-align: center;
    font-size: 18px;
  }
  .btn-whatsapp-glow {
    width: 100%;
    text-align: center;
  }
  .divider-left {
    margin: 0 auto 30px auto;
  }
  .floating-logo img {
    max-width: 300px;
    margin-top: 40px;
  }
}

/**contact page **/

/* --- Contenedor General (Mantenemos el fondo de huellas aquí si está en el body o parent) --- */
.contact-section {
  padding: 80px 0; /* Aumentamos el padding para dar aire */
}

/* --- ESTILO DE LAS NUEVAS CAJITAS --- */
.info-card-box {
  position: relative;
  overflow: hidden; /* Esto evita que las imágenes se salgan de los bordes redondeados */
  background-color: #ffffff;
  border-radius: 40px;
  padding: 60px; /* Aumentamos el padding para que el texto no toque las imágenes */
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
  margin-bottom: 50px;
  border: 1px solid #e0e0e0;
}

/* Estilo general para las imágenes de las esquinas */
.esquina-img {
  position: absolute;
  width: 50px; /* Ajusta el tamaño según qué tan grande sea tu pla.png */
  height: auto;
  /* Un poco de transparencia para que no distraiga mucho */
  pointer-events: none; /* Para que no interfieran si alguien intenta hacer clic cerca */
}

/* Posicionamiento específico */
.top-left {
  top: 15px;
  left: 15px;
  transform: rotate(-15deg); /* Un toque inclinado se ve más dinámico */
}

.top-right {
  top: 15px;
  right: 15px;
  transform: rotate(15deg);
}

.bottom-left {
  bottom: 15px;
  left: 15px;
  transform: rotate(-165deg);
}

.bottom-right {
  bottom: 15px;
  right: 15px;
  transform: rotate(165deg);
}

/* Ajustes para el texto dentro de las cajitas para que resalte más */
.contact-title,
.nav-text {
  font-size: 36px; /* Un poco más grande para los títulos principales */
  font-weight: 800;
  color: #333;
  margin-bottom: 10px;
}

.contact-subtitle,
.nav-description {
  font-size: 18px;
  color: #555; /* Un gris un poco más oscuro para mejor lectura */
  max-width: 650px;
  margin: 0 auto 30px auto;
}

/* --- Botón WhatsApp Principal --- */
.btn-whatsapp {
  background-color: #25d366;
  color: #fff !important;
  padding: 18px 40px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50px;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0px 8px 20px rgba(37, 211, 102, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 0px; /* Ya no necesita margen inferior, lo da la cajita */
}

.btn-whatsapp:hover {
  transform: translateY(-3px); /* Efecto de levitación */
  box-shadow: 0px 10px 25px rgba(37, 211, 102, 0.4);
}

/* --- Sección Navegación (Estilo Frutería) --- */
.navigation-links {
  margin-top: 0px; /* Ya no necesita margen superior */
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 25px; /* Un poco más de espacio entre botones */
  flex-wrap: wrap;
  margin-bottom: 0px; /* Ya no necesita margen inferior */
  margin-top: 30px; /* Espacio con la descripción */
}

.btn-nav {
  background-color: #004d40; /* Verde oscuro estilo frutería */
  color: #fff !important;
  padding: 15px 35px; /* Un poco más de padding vertical */
  font-size: 20px; /* Ajuste de tamaño de fuente */
  font-weight: bold;
  border-radius: 50px; /* Bordes redondeados completos */
  text-decoration: none;
  min-width: 200px; /* Un poco más estrechos para móvil */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.btn-nav:hover {
  background-color: #002e27;
  transform: translateY(-3px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
}

/* Colores de los iconos internos */
.btn-google i {
  color: #ea4335;
  font-size: 24px;
} /* Rojo Google */
.btn-waze i {
  color: #33ccff;
  font-size: 24px;
} /* Celeste Waze */

.gallery-row {
  display: flex;
  justify-content: center; /* Centra la fila de imágenes */
  gap: 20px; /* Espacio entre las imágenes */
  margin-top: 20px; /* Separación con la caja de arriba */
  margin-bottom: 50px; /* Separación con el logo final */
  flex-wrap: wrap; /* Permite que se acomoden en móviles */
}

.gallery-item {
  flex: 1; /* Distribuye el espacio equitativamente */
  max-width: 300px; /* Ancho máximo para cada imagen, estilo vertical */
}

.img-test {
  width: 100%; /* Ocupa todo el ancho de su contenedor */
  height: 400px; /* Altura fija para efecto vertical como el ejemplo */
  object-fit: cover; /* Recorta la imagen para que llene el espacio sin deformarse */
  border-radius: 30px; /* Bordes redondeados como las cajas */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
  transition: transform 0.3s ease; /* Efecto suave para el hover */
}

/* Efecto hover opcional para las fotos */
.img-test:hover {
  transform: scale(1.03); /* Se agranda ligeramente */
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15); /* Sombra más fuerte al hover */
}

/* Contenedor principal del testimonio (usa la base de tus otras cajas) */
.testimonial-box {
  padding: 60px 40px;
  margin: 50px auto;
  max-width: 900px; /* Para que no sea tan ancha como las otras y se vea más íntima */
  transition: transform 0.3s ease;
}

/* Icono de comillas */
.icon-quote {
  font-size: 35px;
  color: #25d366; /* Verde WhatsApp */
  margin-bottom: 20px;
}

/* Texto del testimonio */
/* Contenedor flexible para alinear logo y texto */
.testimonial-flex {
  display: flex;
  align-items: center; /* Centra verticalmente el logo con el texto */
  gap: 40px; /* Espacio entre el logo y el texto */
  text-align: left; /* El texto se ve mejor alineado a la izquierda si el logo está al lado */
}

.testimonial-text2 {
  font-size: 1.2rem;
}
/* Tamaño del logo dentro del testimonio */
.logo-testimonio {
  max-width: 180px; /* Ajusta este tamaño según prefieras */
  height: auto;
  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1));
}

.testimonial-logo-side {
  flex-shrink: 0; /* Evita que el logo se encoja */
}

.testimonial-content-side {
  flex-grow: 1;
}

/* --- Imagen del Mapa (Fuera de las cajitas para efecto de profundidad) --- */
.map-figure img {
  border-radius: 30px; /* Bordes redondeados para el mapa también */
  box-shadow: 0px 20px 45px rgba(0, 0, 0, 0.15); /* Sombra más fuerte para profundidad */
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}
/* --- Estilo base del logo (Mantenemos tamaño original) --- */
.logo-hover {
  /* Mantenemos el tamaño que ya tenía tu logo, no lo cambiamos */
  max-width: 100%; /* O el tamaño específico que uses, ej. 200px */
  height: auto;

  /* Transición suave para el efecto */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Movimiento elástico */
  cursor: pointer;

  /* Sombra inicial sutil (efecto de suelo) */
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
}

/* --- Efecto al pasar el mouse (Hover) --- */
.logo-hover:hover {
  /* Levitación: Sube 15px (puedes ajustar este valor) */
  transform: translateY(-15px);

  /* NO USAMOS SCALE PARA MANTENER EL TAMAÑO IGUAL */

  /* Sombra de altura: Se aleja y se difumina, dando efecto de elevación */
  filter: drop-shadow(0px 20px 30px rgba(0, 0, 0, 0.25));
}

/* --- Opcional: Pequeño "pulso" al hacer clic --- */
.logo-hover:active {
  transform: translateY(-15px) scale(0.98); /* Mantiene la altura pero se encoge un pelín */
}

.logo-link {
  text-decoration: none;
  display: inline-block; /* Importante para que el enlace tome el tamaño de la imagen */
  outline: none;
}

/* Contenedor de la fila */
.beneficios-row {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 60px 0;
  flex-wrap: wrap; /* Para que en celular se pongan uno abajo del otro */
}

/* Estilo de la Cajita Individual */
.cajita-beneficio {
  background-color: white;
  padding: 30px 20px;
  border-radius: 30px; /* Bordes redondeados como el resto de la web */
  width: 280px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease; /* Suavidad para el hover */
  border: 2px solid transparent; /* Para que no salte al ponerle borde en hover */
}

/* Estilos de Iconos y Texto */
.cajita-beneficio i {
  font-size: 45px;
  color: #004d40; /* Verde oscuro estilo frutería */
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.cajita-beneficio h4 {
  font-weight: 800;
  color: #333;
  margin-bottom: 10px;
}

.cajita-beneficio p {
  color: #666;
  font-size: 15px;
  line-height: 1.4;
}

/* --- EFECTO HOVER --- */
.cajita-beneficio:hover {
  transform: translateY(-15px); /* Se eleva */
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
  border-color: #25d366; /* Borde verde brillante al resaltar */
}

.cajita-beneficio:hover i {
  transform: scale(1.2); /* El icono crece un poco */
  color: #25d366; /* El icono cambia a verde WhatsApp */
}

.testimonio-simple {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 25px;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
  font-style: italic;
  border-left: 5px solid #25d366;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-card-box,
.gallery-item {
  animation: fadeInUp 0.8s ease-out forwards;
}
/** end contact **/

/**PQR**/

/* ── Contenedor principal (todo scoped aquí) ── */
/* ==========================================
   DESKTOP FIRST (Estilos principales para PC)
   ========================================== */
.wrap {
  max-width: 800px; /* Ampliado para que luzca imponente y equilibrado en monitores */
  margin: 3rem auto;
  background: #ffffff;
  border-radius: 16px; /* Bordes un poco más suaves y modernos */
  border: 1px solid #e0e0e0;
  padding: 2.5rem 3rem; /* Más aire y espacio interno para respirar en PC */
  font-family: "Segoe UI", Arial, sans-serif;
  color: #222;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante para que resalte del fondo de huellas */
}

.wrap *,
.wrap *::before,
.wrap *::after {
  box-sizing: border-box;
}

/* ── Header ── */
.wrap .header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
}

.wrap .paw {
  width: 56px; /* Icono un poco más grande y visible en PC */
  height: 56px;
  border-radius: 50%;
  background-color: #2db742;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  color: #fff;
}

.wrap .header-text h2 {
  font-size: 22px; /* Tipografía más imponente para escritorio */
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  margin: 0;
}

.wrap .header-text p {
  font-size: 14px;
  color: #666;
  margin: 4px 0 0;
}

/* ── Labels y separadores ── */
.wrap .section-label {
  font-size: 12px;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  margin-top: 0.5rem;
}

.wrap .divider {
  height: 1px;
  background: #eeeeee;
  margin: 1.5rem 0;
}

/* ── Tipo de solicitud ── */
.wrap .tipo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; /* Más espacio entre opciones */
  margin-bottom: 1.5rem;
}

.wrap .tipo-btn {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px 10px; /* Clics más cómodos usando el puntero del mouse */
  cursor: pointer;
  text-align: center;
  background: #fff;
  transition: all 0.2s ease;
}

.wrap .tipo-btn:hover {
  background: #f9f9f9;
  border-color: #bbb;
  transform: translateY(-2px); /* Efecto sutil de flotado interactivo para PC */
}

.wrap .tipo-btn.active {
  border-color: #2db742;
  background: #f0faf1;
  transform: none;
  box-shadow: 0 4px 12px rgba(45, 183, 66, 0.15);
}

.wrap .tipo-btn.active .tipo-icon {
  color: #2db742;
}

.wrap .tipo-btn.active .tipo-label {
  color: #1a7a2a;
  font-weight: 600;
}

.wrap .tipo-icon {
  font-size: 26px;
  color: #888;
  display: block;
  margin-bottom: 6px;
}

.wrap .tipo-label {
  font-size: 13px;
  color: #555;
}

/* ── Campos del formulario ── */
.wrap .field {
  margin-bottom: 1.25rem;
}

.wrap .field label {
  display: block;
  font-size: 14px;
  color: #444;
  margin-bottom: 8px;
  font-weight: 500;
}

.wrap .field input,
.wrap .field select,
.wrap .field textarea {
  width: 100%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 11px 14px; /* Inputs con mejor área de escritura en PC */
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #222;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.wrap .field input:focus,
.wrap .field select:focus,
.wrap .field textarea:focus {
  border-color: #2db742;
  box-shadow: 0 0 0 4px rgba(45, 183, 66, 0.12);
}

.wrap .field textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

/* Distribución elegante en 2 columnas en PC */
.wrap .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Prioridad ── */
.wrap .prioridad-row {
  display: flex;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.wrap .prio-btn {
  flex: 1;
  padding: 12px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  color: #555;
}

.wrap .prio-btn:hover {
  background: #f9f9f9;
  border-color: #bbb;
}

.wrap .prio-btn.baja.active {
  background: #eaf3de;
  border-color: #639922;
  color: #3b6d11;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(99, 153, 34, 0.1);
}

.wrap .prio-btn.media.active {
  background: #faeeda;
  border-color: #ba7517;
  color: #633806;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(186, 117, 23, 0.1);
}

.wrap .prio-btn.alta.active {
  background: #fcebeb;
  border-color: #a32d2d;
  color: #791f1f;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(163, 45, 45, 0.1);
}

/* ── Botón enviar ── */
.wrap .send-btn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: none;
  background: #25d366;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  margin-top: 1.5rem;
}

.wrap .send-btn:hover {
  background: #1eb856;
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.25);
}

.wrap .send-btn i {
  font-size: 22px;
}

.wrap .nota {
  font-size: 13px;
  color: #777;
  text-align: center;
  margin-top: 12px;
}

/* ==========================================
   MOBILE SECOND (Ajustes adaptativos para Celulares)
   ========================================== */
@media (max-width: 768px) {
  .wrap {
    max-width: 100%;
    margin: 1rem;
    padding: 1.75rem 1.25rem;
    border-radius: 12px;
    box-shadow: none; /* Simplificado para móviles */
  }

  .wrap .header {
    gap: 12px;
    margin-bottom: 1.5rem;
  }

  .wrap .paw {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .wrap .header-text h2 {
    font-size: 18px;
  }

  .wrap .row {
    grid-template-columns: 1fr; /* Los campos en paralelo pasan a apilarse verticalmente en el celular */
    gap: 0;
  }

  .wrap .tipo-grid {
    gap: 6px;
  }

  .wrap .tipo-btn {
    padding: 10px 4px;
  }

  .wrap .tipo-icon {
    font-size: 20px;
  }

  .wrap .tipo-label {
    font-size: 11px;
  }

  .wrap .prio-btn {
    padding: 10px 4px;
    font-size: 12px;
  }
}
/**about**/

.founders-gallery-section {
  padding: 80px 40px;
  background: #ffffff;
  border-radius: 40px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);
}

.pb-pre-title {
  display: block;
  color: #1c89bd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 5px;
  font-size: 20px;
}

/* El Canvas de la Imagen */
.founders-main-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.founder-highlight-card {
  max-width: 600px;
  position: relative;
}

.founder-image-canvas {
  position: relative;
  padding: 15px;
  z-index: 1;
}

/* Marco decorativo que sobresale */
.photo-decoration-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
  border: 8px solid #f1fdf6;
  border-radius: 30px;
  z-index: -1;
  transform: translate(-15px, -15px);
}

.img-founder-main {
  width: 100%;
  border-radius: 25px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 5px solid white;
  transition: transform 0.5s ease;
}

/* Badge Flotante */
.founder-badge {
  position: absolute;
  top: 40px;
  right: -20px;
  background: #004d40;
  color: #1c89bd;
  padding: 12px 20px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transform: rotate(5deg);
}

/* Detalles del Texto */
.founder-details-premium {
  margin-top: -40px; /* Sube para solaparse un poco con la foto */
  background: white;
  padding: 40px;
  border-radius: 25px;
  position: relative;
  z-index: 2;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.founder-name {
  font-size: 28px;
  color: #1a202c;
  font-weight: 800;
  margin-bottom: 5px;
}

.founder-role-tag {
  color: #1c89bd;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.founder-signature-divider {
  width: 50px;
  height: 4px;
  background: #e2e8f0;
  margin: 20px auto;
  border-radius: 10px;
}

.founder-quote {
  font-style: italic;
  color: #718096;
  font-size: 18px;
}

/* Efecto Hover */
.founder-highlight-card:hover .img-founder-main {
  transform: translateY(-10px) scale(1.02);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.stat-item {
  background: #f8f9fa;
  padding: 10px 15px;
  border-radius: 15px;
  font-weight: bold;
  color: #004d40;
  border-left: 4px solid #1c89bd;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-item i {
  color: #1c89bd;
}

/* Ajuste para el bloque de expansión final */
.expansion-box {
  padding: 60px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

/* Estilo de Letra Capital para el inicio de la historia */
.history-content-styled p:first-of-type::first-letter {
  font-size: 55px;
  font-weight: 900;
  color: #1c89bd;
  float: left;
  margin-right: 12px;
  line-height: 1;
  font-family: "Arial Black", sans-serif;
}

/* Banner de Estadísticas (Llena el espacio vacío) */
.stats-banner {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 25px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  flex: 1;
  min-width: 150px;
  max-width: 220px;
  border-bottom: 5px solid #1c89bd;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-10px);
}

.stat-card i {
  font-size: 30px;
  color: #1c89bd;
  margin-bottom: 10px;
}

.stat-card h3 {
  font-size: 28px;
  color: #004d40;
  margin: 5px 0;
}

.stat-card p {
  font-size: 14px;
  color: #666;
  font-weight: bold;
  text-transform: uppercase;
}

/* Ajustes de espaciado general */
.history-content-styled p {
  font-size: 19px;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #444;
}

.futuro-p {
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 20px;
}

.logo-final {
  max-width: 150px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
}

/* Responsive para celulares */
@media (max-width: 768px) {
  .stats-banner {
    gap: 15px;
  }
  .stat-card {
    min-width: 130px;
  }
}

/* Contenedor principal */
.equipo-impact-section {
  padding: 60px 50px;
  overflow: hidden;
}

.equipo-container {
  display: flex;
  align-items: center;
  gap: 50px;
}

/* Imagen con efectos */
.equipo-main-image {
  flex: 1.2;
  position: relative;
}

.img-full-impact {
  width: 100%;
  border-radius: 30px;
  box-shadow: 20px 20px 0px #1c89bd; /* Sello de color verde detrás */
  transition: transform 0.4s ease;
}

.equipo-main-image:hover .img-full-impact {
  transform: scale(1.02);
}

/* Badge flotante sobre la foto */
.badge-profesional {
  position: absolute;
  bottom: -20px;
  right: 20px;
  background: #004d40;
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Estilo del Texto */
.equipo-copy {
  flex: 1;
  text-align: left;
}

.subtitle-upper {
  display: block;
  color: #1c89bd;
  font-weight: 800;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.text-upper {
  display: block;
  color: #0f5808;
  font-weight: 50px;
  margin-bottom: 10px;
  font-size: 20px;
}

.text-upper-2 {
  display: block;
  color: #0f5808;
  font-weight: 70px;
  margin-bottom: 10px;
  font-size: 30px;
}

.lead-text {
  font-size: 20px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Etiquetas de especialidad */
.team-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}

.feature-tag {
  background: #f0fdf4;
  padding: 12px 20px;
  border-radius: 15px;
  color: #004d40;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 15px;
  border-left: 5px solid #1c89bd;
}

/* Responsive */
@media (max-width: 992px) {
  .equipo-container {
    flex-direction: column;
  }
  .img-full-impact {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  }
}

/* Contenedor principal de la sección */
.expansion-box {
  padding: 70px 50px;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f1fdf6 100%
  ); /* Un sutil degradado a verde */
}

/* Diseño flexible para integrar logo y texto */
.futuro-layout-container {
  display: flex;
  align-items: center; /* Centra verticalmente */
  gap: 50px; /* Espacio entre el logo y el texto */
  text-align: left; /* Alineación para el bloque de texto */
}

/* Contenedor y efectos para el Logo */
.logo-expansion-container {
  flex: 1; /* Ocupa espacio proporcional */
  position: relative; /* Para el badge flotante */
  display: flex;
  justify-content: center;
}

.logo-exp-img {
  max-width: 250px; /* Tamaño del logo en esta sección */
  height: auto;
  filter: drop-shadow(
    0px 10px 15px rgba(0, 0, 0, 0.15)
  ); /* Sombra para profundidad */
  transition: transform 0.4s ease;
}

.logo-expansion-container:hover .logo-exp-img {
  transform: rotate(3deg) scale(1.05); /* Sutil giro al pasar el mouse */
}

/* Sello de expansión nacional */
.badge-exp {
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: #1c89bd; /* Verde institucional */
  color: white;
  padding: 10px 15px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Contenedor del Texto */
.futuro-text-container {
  flex: 1.5; /* Ocupa más espacio para el texto */
}

.lead-text {
  font-size: 21px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 15px;
}

.sub-text {
  font-size: 16px;
  color: #004d40;
  font-style: italic;
  opacity: 0.8;
}

/* --- RESPONSIVE: En celulares se apilan --- */
@media (max-width: 992px) {
  /* Tablets/Laptops pequeñas */
  .futuro-layout-container {
    flex-direction: column-reverse; /* Primero texto, luego logo abajo */
    text-align: center;
  }
  .logo-exp-img {
    max-width: 200px;
    margin-top: 30px;
  }
  .badge-exp {
    bottom: 10px;
    right: 10px;
  }
}

/* Sección Sedes */
.sede-card {
  background: #ffffff;
  border-radius: 30px;
  padding: 40px 30px;
  text-align: center;
  position: relative;
  border: 1px solid #f0f0f0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  height: 100%;
  transition: transform 0.3s ease;
}

.sede-card:hover {
  transform: translateY(-10px);
}

.sede-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.badge-green {
  background-color: #25d366;
}
.badge-blue {
  background-color: #5c91c8;
}

.sede-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.active-sede .sede-icon {
  color: #25d366;
}
.expansion-sede .sede-icon {
  color: #5c91c8;
}

.sede-info-list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 20px 0;
}

.sede-info-list li {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-sede-blue {
  display: block;
  background-color: #5c91c8;
  color: white;
  padding: 12px;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 10px;
}

/* Estilo para Sede en Expansión */
.expansion-sede {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 2px dashed #5c91c8;
}

.expansion-label {
  background: #eef5ff;
  color: #5c91c8;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 15px 0;
}
/**footer- about**/
/* --- Contenedor Principal --- */
.pb-main-footer {
  background-color: #0d1b2a; /* Azul oscuro profundo para elegancia */
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  padding: 0;
  overflow: hidden;
}

.pb-footer-inner {
  padding: 70px 0 50px; /* Espaciado interno generoso */
}

/* --- Títulos de las Columnas --- */
.Informa h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

/* Línea decorativa bajo títulos */
.Informa h3::after {
  content: "";
  display: block;
  width: 35px;
  height: 3px;
  background: #1c89bd; /* Azul acento de Peluditos */
  margin-top: 8px;
  border-radius: 2px;
}

/* --- Textos y Listas de Contacto --- */
.footer_description {
  font-size: 14.5px;
  line-height: 1.7;
  color: #adb5bd;
  margin-bottom: 20px;
}

ul.conta,
ul.footer_menu,
ul.horarios_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.conta li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #e9ecef;
  font-size: 14px;
}

ul.conta li i {
  color: #1c89bd;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* --- Menú de Navegación --- */
.footer_menu li {
  margin-bottom: 10px;
}

.footer_menu li a {
  color: #adb5bd;
  text-decoration: none;
  font-size: 14.5px;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer_menu li a:hover {
  color: #ffffff;
  transform: translateX(8px); /* Pequeña animación lateral */
}

/* --- Redes Sociales (Alineación Horizontal) --- */
.social_icon {
  display: flex;
  gap: 15px;
  padding: 20px 0 0;
  margin: 0;
  list-style: none;
}

.social_icon li a {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  transition: all 0.4s ease;
}

/**end footer-about**/
/**end about**/

/* PASO C: El contenedor de contenido toma TODO el espacio sobrante */
main,
.main-wrapper {
  flex: 1 0 auto !important; /* Esto es lo que realmente empuja */
}

/* PASO D: El footer se queda al final */
.site-footer {
  flex-shrink: 0 !important;
  background-color: #0d1b2a !important;
  width: 100%;
}
.spacer {
  flex: 1; /* Esto obliga al div a estirarse y ocupar todo el espacio vacío */
}
.site-footer {
  margin-top: auto !important; /* Fuerza al footer a buscar el fondo */
  background-color: #0d1b2a;
  width: 100%;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  padding-top: 60px;
}

/* --- CONTENIDO DE LAS COLUMNAS --- */
.footer-container {
  padding-bottom: 40px;
}

.footer-widget h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
}

/* Línea decorativa verde */
.footer-widget h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #25d366;
  margin-top: 10px;
  border-radius: 2px;
}

.footer-about,
.footer-contact-info li,
.footer-links li a {
  font-size: 15px;
  color: #cbd5e0;
  line-height: 1.8;
}

/* --- LISTAS Y ENLACES --- */
.footer-links,
.footer-contact-info {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links li a {
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-links li a:hover {
  color: #25d366;
  transform: translateX(5px);
}

.footer-contact-info li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-contact-info i {
  color: #25d366;
  width: 20px;
}

/* --- REDES SOCIALES --- */
.footer-social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-icon {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.4s ease;
}

.social-icon:hover {
  background: #25d366;
  transform: translateY(-5px);
}

/* --- BARRA DE COPYRIGHT --- */
.footer-bottom-bar {
  background: #08121c;
  padding: 25px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.copyright-text {
  margin: 0;
  font-size: 14px;
  color: #718096;
}

.whatsapp-float {
  position: fixed; /* Lo mantiene fijo en la pantalla */
  bottom: 40px; /* Distancia desde abajo */
  right: 40px; /* Distancia desde la derecha */
  z-index: 1000; /* Se asegura de que esté por encima de todo */
  text-decoration: none;
  transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
}

/* Color verde de la imagen */
.whatsapp-bg {
  color: #25d366;
  /* Sombra para que resalte como en los diseños modernos */
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
}

/* Efecto visual al poner el mouse encima */
.whatsapp-float:hover {
  transform: scale(1.1);
}

/*vacante*/
.vacantes-section {
  padding: 60px 20px;
  background-color: #0f172a; /* Azul oscuro como tu header/footer */
  color: white;
  text-align: center;
  margin: auto;
  height: auto;
}

.titulo-principal {
  padding: 10px;
  font-size: 2.5rem;
  color: #22c55e; /* Verde brillante */
  margin-bottom: 10px;
}

.subtitulo {
  margin-bottom: 40px;
  opacity: 0.8;
}

.grid-vacantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 50px auto;
}

.card-vacante {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  transition: transform 0.3s ease;
}

.card-vacante:hover {
  transform: translateY(-10px);
  border-color: #22c55e;
}

.icon-v {
  font-size: 2.5rem;
  color: #22c55e;
  margin-bottom: 15px;
}

.contacto-vacantes {
  background: #1e293b;
  padding: 40px;
  border-radius: 20px;
  display: inline-block;
}

.btn-correo {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 25px;
  background-color: #22c55e;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1.1rem;
}

.btn-correo:hover {
  background-color: #16a34a;
}

.nota {
  margin-top: 15px;
  font-size: 0.9rem;
  opacity: 0.6;
}

/* --- NUEVA ESTÉTICA DE VACANTES (SIMILAR A SERVICIOS) --- */

.vacantes-section {
  padding: 60px 20px;
  background-color: #ffffff; /* FONDO BLANCO COMO SERVICIOS */
  color: #333333; /* TEXTO NEGRO */
  text-align: center;
}

/* Títulos en negro, como en servicios */
.titulo-principal {
  font-size: 2.5rem;
  color: #1e293b; /* Un azul muy oscuro o negro */
  margin-bottom: 10px;
  font-weight: 700;
}

.subtitulo {
  color: #4b5563; /* Gris para el subtítulo */
  margin-bottom: 50px;
  font-size: 1.1rem;
}

/* --- ESTILO DE TARJETAS (IGUAL A SERVICIOS) --- */
.grid-vacantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto 60px auto;
}

.card-vacante {
  background: #ffffff; /* FONDO BLANCO */
  padding: 40px;
  border-radius: 25px; /* Bordes muy redondeados */
  /* El mismo color de borde sutil y sombra de servicios */
  border: 1px solid rgba(191, 219, 254, 0.4);
  box-shadow: 0 10px 30px -10px rgba(191, 219, 254, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-vacante:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px -10px rgba(37, 211, 102, 0.3); /* Un toque verde suave al hover */
}

/* El cuadro azul que contiene el icono */
.icon-v-container {
  background-color: rgba(96, 165, 250, 0.2); /* Azul muy suave y transparente */
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

/* El icono azul, más oscuro */
.icon-v {
  font-size: 2.2rem;
  color: #4f46e5; /* El azul índigo de tus iconos en servicios */
}

/* Texto de la vacante */
.card-vacante h3 {
  font-size: 1.5rem;
  color: #1e293b;
  margin-bottom: 15px;
  font-weight: 600;
}

.card-vacante p {
  color: #4b5563;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* --- ESTILO DEL BOTÓN DE CONTACTO (Mismo estilo verde profesional) --- */
.contacto-vacantes {
  text-align: center;
}

.contacto-vacantes h3 {
  color: #1e293b;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.contacto-vacantes p {
  color: #4b5563;
}

.btn-correo {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 30px;
  background-color: #25d366; /* EL VERDE WHATSAPP QUE YA USAS */
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
}

.btn-correo:hover {
  background-color: #16a34a;
}

.contacto-vacantes {
  margin-top: 50px;
  padding: 60px 20px;
  background-color: #f8fafc; /* Un gris muy claro para diferenciarlo del blanco puro */
  border-radius: 30px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.contacto-vacantes h3 {
  font-size: 2rem;
  color: #1e293b;
  margin-bottom: 15px;
  font-weight: 700;
}

.contacto-vacantes p {
  color: #64748b;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 30px auto;
}

/* Estilo del botón verde */
.btn-correo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 35px;
  background-color: #25d366; /* Verde Peluditos */
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.2rem;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
  transition: all 0.3s ease;
}

.btn-correo:hover {
  background-color: #16a34a;
  transform: translateY(-3px);
  box-shadow: 0 15px 25px rgba(37, 211, 102, 0.3);
}

.btn-correo i {
  font-size: 1.4rem;
}

.nota-asunto {
  margin-top: 25px !important;
  font-size: 0.9rem !important;
  font-style: italic;
  opacity: 0.8;
}

.footer-payments {
  display: flex;
  gap: 20px; /* Un poco más de espacio entre ellos */
  margin-top: 25px;
  align-items: center;
  flex-wrap: wrap;
}

.floating-breb,
.floating-banco {
  margin: 0;
  background-color: white;
  padding: 12px; /* Más espacio interno para que el logo no toque los bordes */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Aumentamos el tamaño aquí */
  height: 65px; /* Antes era 50px */
  width: 130px; /* Antes era 100px */

  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

/* Efecto opcional: que crezcan un poquito al pasar el mouse */
.floating-breb:hover,
.floating-banco:hover {
  transform: scale(1.05);
}

.floating-breb img,
.floating-banco img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   Responsividad para la sección de Vacantes
   ========================================================================== */

/* Para Tablets y dispositivos medianos (menos de 992px) */
@media (max-width: 992px) {
  .grid-vacantes {
    grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablets */
    gap: 20px;
  }

  .titulo-principal {
    font-size: 2.2rem;
  }
}

/* Para Celulares (menos de 768px) */
@media (max-width: 768px) {
  .vacantes-section {
    padding: 40px 15px; /* Menos espacio arriba y abajo */
  }

  .titulo-principal {
    font-size: 1.8rem; /* Título un poco más pequeño */
  }

  .subtitulo {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .grid-vacantes {
    grid-template-columns: 1fr; /* Una sola columna: tarjetas una debajo de otra */
  }

  .card-vacante {
    padding: 25px; /* Menos espacio interno en la tarjeta */
  }

  .icon-v-container {
    width: 70px; /* Iconos un poquito más pequeños */
    height: 70px;
    margin-bottom: 15px;
  }

  .contacto-vacantes {
    padding: 30px 15px;
    margin-top: 30px;
  }

  .contacto-vacantes h3 {
    font-size: 1.5rem;
  }

  .btn-correo {
    font-size: 1rem;
    padding: 12px 20px;
    width: 100%; /* El botón ocupa todo el ancho del celular */
    justify-content: center;
  }

  /* Romper el texto del correo si es muy largo para la pantalla */
  .btn-correo i {
    margin-right: 8px;
  }
}
/*end vacante*/