body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  overflow-x: hidden; /* <<< esto bloquea el scroll horizontal */
}

.hero {
  min-height: 100vh;
  padding-top: 80px; /* 🔹 Empuja hacia abajo el contenido para que no se esconda detrás de la barra */
  background-image: url('/static/img/hero_fondo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
}

.barra-superior {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgba(155, 210, 255, 0.199); /* fondo blanco translúcido */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 1000;
  backdrop-filter: blur(6px); /* efecto de vidrio esmerilado */
  box-shadow: 0 2px 10px rgba(78, 190, 255, 0.05); /* sombra sutil para que flote */
}



.logo-grande {
    height: 60px;
    width: auto;

}


.logo img {
  height: 50px;
  margin: 0;
}

.menu a {
  color: #ffffff; /* ✅ blanco para contraste */
  margin-left: 20px;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* ✅ sombra para visibilidad */
}

.menu a:hover {
  text-decoration: underline;
}

/* Ya no necesitas transform/position en contenido-hero */
.contenido-hero {
  z-index: 1;
  padding: 20px;
}

.contenido-hero h1,
.contenido-hero p {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

.contenido-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #ffffff;
  background-color: rgba(141, 196, 255, 0.75);
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.contenido-hero p {
  font-size: 1.2rem;
  color: #eaeaea;
  margin: 15px 0 25px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.boton {
  background: linear-gradient(to right, #0052cc, #007bff);
  color: white;
  font-size: 1.1rem;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.boton:hover {
  background: linear-gradient(to right, #003eaa, #0066cc);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;        /* Aumenta el espacio entre enlaces */
  padding-right: 60px; /* Despega del borde derecho */
}


.menu a {
  white-space: nowrap;
}


/* SECCIONES */
.seccion {
  padding: 60px 20px;
  text-align: center;
}

.grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

/* Solo estiliza las cards del bloque "Información del servicio",
   no todas las cards del sitio */
.cuadros-servicio .card {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 250px;
}

/* Para el resto de las cards (ej. Póliza de Mascotas) deja el ancho libre */
.card { width: auto; }

/* <!-- INFORMACIÓN DEL SERVICIO --> */
.cuadros-servicio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 30px;
}

.cuadro {
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 25px;
  width: 260px;
  text-align: left;
  transition: transform 0.3s ease;
}

.cuadro:hover {
  transform: translateY(-5px);
}

.cuadro h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #174c85;
}

.cuadro p {
  font-size: 0.95rem;
  color: #333;
}
/*Documentacion necesaria*/
.lista-documentos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.item-doc {
  background: white;
  border-left: 6px solid #002852;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.item-doc:hover {
  transform: translateX(5px);
}

.item-doc h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #174c85;
}

.item-doc p {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: #444;
}
.documentos-section {
    padding: 60px 20px;
    background: linear-gradient(to bottom right, #f0f4f8, #dfeaf1);
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

.documentos-section h2 {
    font-size: 32px;
    color: #1a237e;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.documentos-contenedor {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.documentos-col {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    max-width: 400px;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.documentos-col:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.documentos-col h3 {
    font-size: 22px;
    color: #0d47a1;
    margin-bottom: 20px;
    border-bottom: 2px solid #1976d2;
    padding-bottom: 10px;
}

.documentos-col ul {
    list-style: none;
    padding-left: 0;
}

.documentos-col li {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    padding-left: 10px;
    position: relative;
}

.documentos-col li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #1976d2;
    font-weight: bold;
}
/* Botón con animación tipo primary para documentos */
.doc-btn-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.btn-doc {
  position: relative;
  color: #fff;
  border: 0;
  background: linear-gradient(90deg, #0d6efd 0%, #3a86ff 60%, #66a6ff 100%);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-doc:hover,
.btn-doc:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(13,110,253,.35);
  filter: brightness(1.03);
  color: #fff;
  text-decoration: none;
}

.btn-doc:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(13,110,253,.28);
}

/* Ajustes visuales de las columnas para que el botón se “sienta” parte de la tarjeta */
.documentos-col {
  background: #fff;
  border: 1px solid rgba(13,110,253,.12);
  border-radius: 14px;
  padding: 20px 20px 26px;
  box-shadow: 0 8px 26px rgba(16,24,40,.06);
}
.documentos-col h3 {
  border-bottom: 2px solid rgba(13,110,253,.2);
  padding-bottom: 8px;
  margin-bottom: 14px;
}


/*    <!-- POR QUÉ CONTRATARNOS -->*/
.contenedor-central {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
}

.porque-wrap {
  display: flex;
  width: 100%;
  background-color: #ddd;
  margin: 60px 0;
  position: relative;
  overflow: visible;
  flex-wrap: nowrap;
  border-radius: 0;
}

.porque-img {
  flex: 0 0 500px;
  position: relative;
  z-index: 1;
  margin-left: -80px; /* esto hará que la imagen sobresalga */
}

.porque-img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.porque-texto {
  flex: 1;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.porque-texto h2 {
  font-size: 2rem;               /* Más grande */
  margin-bottom: 25px;
  font-weight: 700;              /* Más grueso */
  color: #4e4949;                /* Más oscuro */
  text-align: left;
}


.porque-texto ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.porque-texto li {
  font-size: 1rem;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
}

/* FAQ */
details {
  margin: 10px auto;
  max-width: 600px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* FORMULARIO */
form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input, textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

button {
  background-color: #28A745;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}
/*BOTONES FLOTANTES*/
.botones-flotantes {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
}

.boton-flotante {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.15);
  color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 22px;
  backdrop-filter: blur(10px);
  border: 1.2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(80, 80, 80, 0.3);
  transition: all 0.3s ease;
}

.boton-flotante:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 16px rgba(50, 50, 50, 0.4);
}

/* Botón de WhatsApp con tono plateado elegante */
.boton-flotante.whatsapp {
  background: linear-gradient(135deg, #d8d8d8, #b0b0b0);
  color: #111;
  border: 1.2px solid #e0e0e0;
}

/* Botón de llamada más sobrio y elegante */
.boton-flotante.llamar {
  background: linear-gradient(135deg, #c5c4c4, #6d6c6c);
  color: #ffffff;
  border: 1.2px solid #999;
}

/* FOOTER */
footer {
  background-color: #222;
  color: white;
  text-align: center;
  padding: 20px;
}
/*Logo combinados*/
.logos-combinados {
  display: flex;
  align-items: center;
  gap: 0px;
}

.logos-combinados img {
  height: 50px;
  object-fit: contain;
}

/*Logo fondo*/
.fondo-mosaico {
  background-image: url('/static/img/img_fondo.png');
  background-repeat: repeat;
  background-size: 150px;
  background-position: center;
  background-color: #f5f5f5; /* gris claro de base */
  position: relative;
  z-index: 1;
}
.fondo-mosaico::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/static/img/img_fondo.png');
  background-repeat: repeat;
  background-size: 150px;
  opacity: 0.005; /* más tenue aún */
  z-index: 0;
  pointer-events: none;
}
.fondo-mosaico > * {
  position: relative;
  z-index: 1;
}
.fondo-marca {
  position: relative;
  background-color: #f5f5f5;
  z-index: 1;
  overflow: hidden;
}

.fondo-marca::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/static/img/img_fondo.png');
  background-repeat: repeat;
  background-size: 300px; /* menos repeticiones = más limpio */
  background-position: center;
  opacity: 0.025; /* marca de agua tenue, puedes subirlo a 0.05 si deseas más visible */
  z-index: 0;
  pointer-events: none;
}


.fondo-marca > * {
  position: relative;
  z-index: 1;
}

/*PAQUETES*/
.titulo-seccion {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #1a1a1a;
  font-weight: 700;
}

.paquetes-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.paquete {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 30px;
  max-width: 320px;
  width: 100%;
  transition: transform 0.3s ease;
}

.paquete:hover {
  transform: translateY(-5px);
}

.paquete h3 {
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: #004080;
}

.paquete ul {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.paquete ul li {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #333;
}

.boton-paquete {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.boton-paquete:hover {
  background-color: #0056b3;
}


.paquete.destacado {
  border: 2px solid #007bff;
}
.ubicacion-contacto {
  padding: 2rem 1rem;
  min-height: auto;
  overflow: visible;
}


.contenedor-ubicacion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.telefono p {
  font-size: 1.1rem;
  color: #222;
  background: #ffffffdd;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: inline-block;
}
.telefono a {
  color: #000;
  text-decoration: none;
}

.telefono a:hover {
  text-decoration: underline;
}
/*contacto*/
.formulario-contacto {
  max-width: 600px;
  margin: 120px auto 60px;
  background-color: #ffffffcc;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  text-align: center;
}

.formulario-contacto h1 {
  font-size: 2rem;
  color: #003366;
  margin-bottom: 10px;
}

.formulario-contacto p {
  margin-bottom: 30px;
  color: #555;
}

.formulario-contacto .campo {
  margin-bottom: 20px;
  text-align: left;
}

.formulario-contacto label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #222;
}

.formulario-contacto input,
.formulario-contacto textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}

.formulario-contacto .boton {
  background: linear-gradient(to right, #0052cc, #007bff);
  color: white;
  padding: 14px 30px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.formulario-contacto .boton:hover {
  background: linear-gradient(to right, #003eaa, #0066cc);
  transform: scale(1.03);
}
/*Privacidad*/
.politica-privacidad {
  padding-top: 100px;  /* Espacio para que no tape la barra */
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


.politica-privacidad h1 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: #003366;
}

.politica-privacidad h2 {
  margin-top: 30px;
  font-size: 1.4rem;
  color: #004080;
}

.politica-privacidad p,
.politica-privacidad li {
  font-size: 1rem;
  line-height: 1.6;
}
html, body {
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
}

  /* Títulos más delgados en la página de políticas */
  .politica-box h1 { 
    font-weight: 600 !important;              /* antes 800 */
    font-size: clamp(1.8rem, 3vw, 2.1rem);
    letter-spacing: .1px;
  }
  .politica-box h2 { 
    font-weight: 500 !important;              /* antes 700 */
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  }

/*BOTON PRINCIPAL*/
.btn-principal {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.btn-principal:hover {
  background-color: #0056b3;
}

/*RESPONSIVE*/

/* RESPONSIVO: apila en pantallas pequeñas */


  .porque-img {
    justify-content: center;
  }

  .porque-img img {
    transform: none;
    max-width: 90%;
  }

  .porque-texto {
    padding: 30px 20px;
    text-align: center;
  }

  .porque-texto h2 {
    text-align: center;
  }




/* RESPONSIVE: se apila solo en pantallas pequeñas */
@media (max-width: 768px) {
  .contenedor-porque {
    flex-direction: column;
    text-align: center;
  }

  .texto-porque {
    padding: 20px;
  }
}


@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .paquetes-contenedor {
    flex-direction: column;
    align-items: center;
  }

  .formulario-contacto,
  .paquete {
    width: 90%;
    max-width: 100%;
  }

  .hero {
    height: auto;
    text-align: center;
  }

  .contenido-hero h1 {
    font-size: 1.8rem;
  }

  .boton,
  .boton-paquete {
    width: 100%;
    text-align: center;
  }
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background: rgba(0, 0, 0, 0.4);   /* 🔹 Esto evita el fondo blanco */
  color: white;
  z-index: 1000;
  backdrop-filter: blur(10px);     /* opcional: efecto visual */
}


.menu-icon {
  font-size: 28px;
  cursor: pointer;
  display: none;
  color: white;
}

.menu-links {
  display: flex;
  gap: 20px;
}

.menu-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  .menu-links {
    display: none;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    padding: 10px 0;
    z-index: 1000;
  }

  .menu-links.show {
    display: flex;
  }

  .menu-links a {
    padding: 10px 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
}
@media (max-width: 768px) {
  .porque-img {
    margin-left: 0;  /* ← Añadir esto */
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .porque-img img {
    max-width: 90%;
    height: auto;
    transform: none;
  }
}

.seccion.ubicacion-contacto {
  padding: 2rem 1rem;
  min-height: auto; /* Asegura que crezca con el contenido */
  overflow: visible; /* Evita que se corte */
}
@media (max-width: 768px) {
  .barra-superior {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 15px;
    height: auto;
    flex-wrap: wrap;
  }

  .logos-combinados img {
    height: 45px;
  }

  .menu-icon {
    display: block;
    margin-left: auto;
    padding: 10px;
  }

  .menu-links {
    width: 100%;
    text-align: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px 0;
  }

  .menu-links a {
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    color: #003366;
  }
}

/* BLOQUE RESPONSIVE ACTUALIZADO */

@media (max-width: 768px) {
  .barra-superior {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 15px;
    height: auto;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }

  .logos-combinados img {
    height: 45px;
  }

  .menu-icon {
    display: block;
    margin-left: auto;
    padding: 10px;
    color: #003366;
  }

  .menu-links {
    display: none;
    width: 100%;
    text-align: center;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px 0;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 1000;
  }

  .menu-links.show {
    display: flex;
  }

  .menu-links a {
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    color: #003366;
    font-weight: bold;
  }

  .hero {
    height: auto;
    text-align: center;
  }

  .contenido-hero h1 {
    font-size: 1.8rem;
  }

  .boton,
  .boton-paquete {
    width: 100%;
    text-align: center;
  }
}


/* BLOQUE RESPONSIVE PARA .porque-wrap */

@media (max-width: 768px) {
  .porque-wrap {
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
  }

  .porque-img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: 0;
  }

  .porque-img img {
    max-width: 90%;
    height: auto;
    transform: none;
    border-radius: 12px;
  }

  .porque-texto {
    width: 100%;
    padding: 10px;
    text-align: center;
  }

  .porque-texto h2 {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .porque-wrap {
    padding: 20px;
  }

  .contenedor-central {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }

  .porque-img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: 0;
  }

  .porque-img img {
    max-width: 90%;
    height: auto;
    border-radius: 12px;
  }

  .porque-texto {
    width: 100%;
    padding: 10px;
    text-align: center;
  }

  .porque-texto h2 {
    text-align: center;
  }
}

/* ====== Documentos (formulario unificado) ====== */
:root { --navbar-h: 80px; }

/* Barra fija sólida (sólo en páginas con header.solid) */
.barra-superior.solid{
  position: fixed; top:0; left:0; right:0;
  height: var(--navbar-h);
  display:flex; align-items:center; gap:14px; padding:0 24px;
  background: rgba(15,23,42,.9);
  backdrop-filter: blur(6px);
  z-index:1000; box-shadow:0 2px 14px rgba(0,0,0,.12);
}
.barra-superior .menu-links a{
  color:#fff; font-weight:600; padding:8px 14px; border-radius:999px; opacity:.95;
}
.barra-superior .menu-links a:hover{
  opacity:1; background:rgba(255,255,255,.14); text-decoration:none;
}

/* Empuje para que la barra no tape el contenido */


/* Grid / tarjetas de documentos */
.doc-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px;
}
.doc-card{
  border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.doc-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.06); }

.doc-emoji{
  font-size:34px; width:48px; height:48px; display:grid; place-items:center;
  border-radius:12px; background:#f1f5f9; margin-bottom:8px;
}
.doc-title{ font-weight:600; margin:6px 0 10px; }
.doc-status{ display:flex; align-items:center; gap:8px; font-size:.95rem; color:#6b7280; }
.doc-dot{ width:12px; height:12px; border-radius:50%; background:#e5e7eb; border:2px solid #d1d5db; }
.doc-card.ok .doc-dot{ background:#16a34a; border-color:#16a34a; }
.doc-card.ok .doc-status{ color:#059669; }

/* Upload “bonito” + nombre del archivo */
.doc-upload input[type="file"]{ display:none; }
.doc-upload label{
  display:inline-block; padding:8px 12px; border-radius:10px;
  border:1px dashed #cbd5e1; cursor:pointer; user-select:none;
}
.doc-upload label:hover{ background:#f8fafc; }
.doc-file{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* Formularios dentro de esta página: sin limitar ancho ni forzar flex */
.page-docs form{ max-width:100%; }

/* Botón deshabilitado */
button[disabled]{ opacity:.6; cursor:not-allowed; }

@media (max-width: 576px){
  .barra-superior.solid{ padding:0 16px; }
}


/* ==== AEPRA Styles (clean rebuild) ====
   Nota: no sobreescribimos clases .btn de Bootstrap.
   Solo agregamos utilidades y componentes específicos.
===================================================== */

:root{
  --brand:#0d6efd;           /* Bootstrap primary */
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#f6f7fb;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
}

/* Base */
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}

/* Header transparente fijo */
.barra-superior{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.barra-superior .nav-link{ color:#0b1324; font-weight:600 }
.barra-superior .nav-link:hover{ color:var(--brand) }

/* Hero */
.hero{
  min-height:68vh; display:grid; place-items:center;
  background: center/cover no-repeat url('/static/img/hero_fondo.jpg');
  position:relative;
}
.hero::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.35);
}
.contenido-hero{ position:relative; z-index:1; text-align:center; padding:56px 16px }
.contenido-hero h1{
  color:#fff; font-size:clamp(28px, 5vw, 56px); line-height:1.1; margin:0 0 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.contenido-hero .sub{
  color:#e5e7eb; font-size:clamp(15px, 2.2vw, 20px); max-width:900px; margin:0 auto 18px;
}

/* ===== Sección: ¿Qué documentos necesito? ===== */
.documentos-section{ padding:64px 16px }
.documentos-section h2{
  text-align:center; font-weight:800; letter-spacing:.4px; margin-bottom:28px;
}
.documentos-contenedor{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  max-width:1100px; margin:0 auto;
}
.documentos-col{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 20px; border:1px solid rgba(13,110,253,.10);
}
.documentos-col h3{ margin:0 0 12px; font-weight:700 }
.documentos-col ul{ padding-left:0; margin:0 0 12px; list-style:none }
.documentos-col li{ padding:.38rem .25rem; display:flex; gap:.5rem; align-items:flex-start }
.documentos-col li::before{ content:"✓"; color:var(--brand); font-weight:800; margin-top: 1px }

/* Enlace que luce como botón (no rompe Bootstrap) */
.link-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  text-decoration:none; background:var(--brand); color:#fff!important; border-radius:999px;
  padding:.6rem 1rem; box-shadow: 0 6px 16px rgba(13,110,253,.25);
}
.link-btn:hover{ filter:brightness(.95) }
.link-btn .ico{ font-size:1.1rem; }

/* ===== Tarjeta: Póliza para Mascotas ===== */
.pets-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:1100px; margin:0 auto 40px; padding:0 16px }
.poliza-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; border:1px solid rgba(0,0,0,.06);
}
.poliza-card h3{ margin:0 0 8px; font-weight:800 }
.poliza-card p{ color:var(--muted); margin:0 0 14px }
.badge-pill{ display:inline-block; background:#eef2ff; color:#3730a3; border-radius:999px; padding:.25rem .65rem; font-weight:700; font-size:.78rem; border:1px solid #c7d2fe }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap }
.card-actions .btn{ border-radius:999px; padding:.6rem 1rem }

/* ===== Página de carga de documentos ===== */
.page-docs{ padding:42px 16px }
.doc-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.doc-card{
  background:var(--card); border-radius:14px; box-shadow:var(--shadow);
  padding:14px; border:1px solid rgba(13,110,253,.12)
}
.doc-card .title{ font-weight:700; margin:0 0 4px }
.doc-status{ display:flex; align-items:center; gap:.5rem }
.doc-status small{ color:var(--muted) }
.doc-upload{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; border:1px dashed #cbd5e1 }
.doc-upload input[type="file"]{ display:none }
.doc-upload label{ cursor:pointer; padding:.45rem .8rem; border-radius:10px; border:1px solid #dbeafe; background:#eff6ff; font-weight:600 }
.doc-file{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }

/* Utilidades */
.shadow-soft{ box-shadow:var(--shadow) }
.rounded-xl{ border-radius:var(--radius) }
.text-muted-2{ color:var(--muted) }

@media (max-width:576px){
  .barra-superior{ padding:0 14px }
}

/* === FIX: Hero como en la foto 1 === */
.hero{
  min-height: 100vh;
  padding-top: 80px;
  background-image: url('/static/img/hero_fondo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.contenido-hero{
  position: relative;
  z-index: 1;
  text-align: center;
}

/* El título vuelve a ser una “pastilla” azul, no a todo lo ancho */
.contenido-hero h1{
  display: inline-block;          /* <- clave: ya no ocupa el 100% */
  width: auto;                    /* <- por si alguna regla le puso 100% */
  max-width: 1100px;              /* evita que sea demasiado largo */
  margin: 0 auto 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background-color: rgba(141,196,255,.75);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  font-size: clamp(26px, 3.2vw, 42px);  /* tamaño como en la foto 1 */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.137);
}

/* Subtítulo */
.contenido-hero p{
  color: #eaeaea;
  font-size: 1rem;
  margin-bottom: 16px;
}

/* Botón del hero (si usas la clase .boton) */
.boton{
  display: inline-block;
  background: #0d6dfd0a;
  color: #fff;
  border: 0;
  padding: .55rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(13,110,253,.25);
}
.boton:hover{ filter: brightness(.95); }

:root{ --header-h:72px; }  /* se ajustará con JS */

.barra-superior{
  position: fixed;           /* saca la barra del flujo */
  top: 0; left: 0; right: 0;
  background: transparent !important;   /* totalmente transparente */
  border: 0; box-shadow: none;
  z-index: 1000;
  padding: 8px 24px;
}
.barra-superior .nav-link,
.barra-superior a{
  color: #fff !important;                /* enlaces blancos sobre la foto */
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  font-weight: 600;
}
.barra-superior .nav-link:hover{ color:#e6f0ff !important; }

.logos-combinados img{
  height: 60px; 
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* Hero: la imagen debe empezar desde arriba */
.hero{
  min-height: 100vh;
  padding: 0;                             /* <- importante: sin padding arriba */
  background: center/cover no-repeat url('/static/img/hero_fondo.jpg');
  position: relative;
}
.contenido-hero{
  position: relative; z-index: 1; text-align: center;
  padding-top: calc(var(--header-h) + 8px); /* empuja SOLO el texto, no la imagen */
}

/* pastilla del título (como ya lo dejamos) */
.contenido-hero h1{
  display:inline-block; width:auto; max-width:1100px;
  margin:0 auto 10px; padding:8px 14px; border-radius:10px;
  background-color: rgba(141,196,255,.75);
  color:#fff; font-weight:800; line-height:1.2;
  font-size: clamp(26px, 3.2vw, 42px);
  text-shadow: 2px 2px 6px rgba(0,0,0,.4);
}


/* === FIX: doble barra de scroll (solo el body scrollea) === */
html, body { height: auto; min-height: 100%; }
html { overflow-y: auto; }
body { overflow-y: auto; overflow-x: hidden; }

/* Evitar scroll interno en wrappers/secciones */
.page-docs,
.seccion,
.documentos-section,
.pets-grid,
.container,
.card.full,
.doc-grid,
.navbar {
  overflow: visible !important;
}

/* Quita cualquier alto forzado de viewport en wrappers que pueda generar scroll anidado */
.page-docs,
.seccion,
.documentos-section {
  height: auto !important;
  min-height: 0 !important;
}

/* Si tienes algo como .hero con min-height:100vh está bien; evita overflow en padres */

/* === FIX Formularios documentos: tarjetas a todo el ancho === */
.page-docs .card{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Si tienes un override a .container, neutralízalo aquí solo para estas páginas */
.page-docs .container,
.page-docs .container-xl,
.page-docs .container-xxl{
  max-width: 1140px !important;  /* o 1320px si quieres aún más ancho */
  padding-left: 12px;
  padding-right: 12px;
}

/* --- PATCH: formularios de Documentos a ancho completo --- */
.page-docs form { max-width: 100% !important; width: 100% !important; }
.page-docs .card { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.page-docs .container, .page-docs .container-xl, .page-docs .container-xxl { max-width: 1140px !important; padding-left: 12px; padding-right: 12px; }

/* === FIX navbar descuadrado en páginas de documentos === */
/* 1) No toques el container del navbar */
.page-docs nav.navbar .container,
.page-docs nav.navbar .container-xl,
.page-docs nav.navbar .container-xxl {
  max-width: 1320px !important;                 /* valor Bootstrap para xxl */
  padding-left: var(--bs-gutter-x, .75rem) !important;
  padding-right: var(--bs-gutter-x, .75rem) !important;
}

/* 2) Aplica el ancho extra SOLO al contenido (dentro de <main>) */
.page-docs main .container,
.page-docs main .container-xl,
.page-docs main .container-xxl {
  max-width: 1140px !important;                 /* usa 1320px si quieres más ancho */
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 3) Mantén tarjetas y formularios a ancho completo en contenido */
.page-docs main .card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-docs main form {
  max-width: 100% !important;
  width: 100% !important;
}

/* === NAVFIX Propietario === */
/* No tocar el ancho del container dentro del navbar */
.page-docs nav.navbar .container,
.page-docs nav.navbar .container-xl,
.page-docs nav.navbar .container-xxl {
  max-width: 1320px !important; /* valor xxl de Bootstrap */
  padding-left: var(--bs-gutter-x, .75rem) !important;
  padding-right: var(--bs-gutter-x, .75rem) !important;
}

/* Aplicar el ancho mayor solo al contenido de la página */
.page-docs main .container,
.page-docs main .container-xl,
.page-docs main .container-xxl {
  max-width: 1140px !important;  /* súbelo a 1320px si quieres aún más amplio */
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Tarjetas y formulario a ancho completo solo dentro del contenido */
.page-docs main .card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-docs main form { max-width: 100% !important; width: 100% !important; }

/* Navbar normal en páginas de documentos (no fija, no especial) */
.page-docs .navbar {
  position: static !important;
  height: auto !important;
  padding: .5rem 1rem !important;
  background: #212529 !important; /* equivalente a bg-dark */
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ====== NAVBAR FIX para páginas de documentos ====== */
/* Asegura navbar normal de Bootstrap (no fija, sin alto forzado) */
.page-docs .navbar{
  position: static !important;
  height: auto !important;
  padding: .5rem 1rem !important;
  background: #212529 !important;  /* bg-dark */
  backdrop-filter: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* El container del navbar debe ser flex y con ancho Bootstrap normal */
.page-docs nav.navbar .container{
  display: flex !important;
  align-items: center !important;
  max-width: 1320px !important; /* valor xxl de Bootstrap */
  padding-left: var(--bs-gutter-x,.75rem) !important;
  padding-right: var(--bs-gutter-x,.75rem) !important;
}

/* Quita centrado forzado de la marca; deja los enlaces a la derecha */
.page-docs .navbar .navbar-brand{ margin: 0 !important; }
.page-docs .navbar .navbar-nav{ margin-left: auto !important; }

/* Si alguna página dejó padding para una barra fija, anúlalo */
.page-docs{ padding-top: 0 !important; }


/* ===== Docs pages: quitar desplazamiento y ocultar la barra de portada ===== */
body.page-docs { padding-top: 0 !important; }                 /* si el sitio tenía body con padding-top */
body.page-docs .barra-superior { display: none !important; }  /* oculta la barra translúcida de portada */

/* Navbar normal en documentos (no fija, sin alto forzado, sin margen arriba) */
body.page-docs .navbar{
  position: static !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: .5rem 1rem !important;
  background: #212529 !important; /* bg-dark */
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* El container del navbar sigue con el ancho de Bootstrap (no xxl) */
body.page-docs nav.navbar .container{
  display: flex !important;
  align-items: center !important;
  max-width: 1320px !important;  /* valor xxl de Bootstrap */
  padding-left: var(--bs-gutter-x,.75rem) !important;
  padding-right: var(--bs-gutter-x,.75rem) !important;
}

/* El contenido sí puede ser ancho dentro de <main> */
body.page-docs main .container,
body.page-docs main .container-xl,
body.page-docs main .container-xxl{
  max-width: 1140px !important;  /* súbelo a 1320px si quieres más ancho */
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Cartas y formularios a ancho completo solo en el contenido */
body.page-docs main .card{ width:100% !important; max-width:none !important; margin:0 !important; }
body.page-docs main form{ width:100% !important; max-width:100% !important; }

/* Docs: sin desplazamiento superior */
body.page-docs { margin-top: 0 !important; padding-top: 0 !important; }

/* === Quitar bordes laterales en la barra superior (solo páginas de documentos) === */
body.page-docs {
  margin: 0 !important;                 /* anula cualquier margen global del body */
  padding-left: 0 !important;           /* por si algún reset agrega padding lateral */
  padding-right: 0 !important;
}

/* Navbar a todo lo ancho, sin esquinas redondeadas ni margen lateral */
body.page-docs .navbar{
  position: static !important;
  background: #212529 !important;       /* bg-dark */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;                  /* <-- elimina los “bordes” blancos */
  border: 0 !important;
  border-radius: 0 !important;           /* evita esquinas con fondo de la página */
  box-shadow: none !important;
  padding: .5rem 1rem !important;
}

/* El contenedor INTERNO del nav se mantiene con el ancho Bootstrap y sin márgenes raros */
body.page-docs nav.navbar > .container{
  display: flex !important;
  align-items: center !important;
  max-width: 1320px !important;
  padding-left: var(--bs-gutter-x, .75rem) !important;
  padding-right: var(--bs-gutter-x, .75rem) !important;
}

/* === DOCS: normalizar inputs file dentro de tarjetas === */
body.page-docs .doc-card { overflow: hidden; }
body.page-docs .doc-card input[type="file"]{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0;
}


  /* === DOCS: normalizar inputs file dentro de tarjetas === */
body.page-docs .doc-card { overflow: hidden; }               /* recorta cualquier desborde visual */
body.page-docs .doc-card input[type="file"]{
  display: block;                                            /* no inline */
  width: 100% !important;                                    /* ocupa el ancho de la tarjeta */
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0;                                                 /* quita márgenes raros del UA */
}

/* --- Fix: cards encogidas en "¿Qué incluye nuestro servicio?" --- */
.cards-servicio .card {
  width: 100% !important;          /* ocupar toda su columna */
  max-width: none !important;
  height: 100%;
  border-radius: 16px;
}

.cards-servicio .card-body {
  padding: 1.25rem 1.25rem;        /* respirito */
}

.cards-servicio .card-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.cards-servicio .card-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Si en algún lugar dejaste un ancho fijo global para .card, neutralízalo aquí */
.card { max-width: 100%; }
/* y por si hubiera un width duro en otro lado… */
.card[style*="width"] { width: 100% !important; }

@media (min-width: 992px) {
  .cards-servicio .col { display: flex; }
  .cards-servicio .card { display: flex; }
  .cards-servicio .card-body { display: flex; flex-direction: column; }
}