/* ========== RESET BÁSICO ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background-color: #121212; /* Fondo oscuro */
      color: #ffffff;
      line-height: 1.6;
    }

    /* ========== ENCABEZADO ========== */
    header {
        width: 100%;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 2rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }

    /* Logo */
    .logo img {
      height: 60px;
      width: auto;
    }

    /* Menú de navegación */
    nav ul {
      list-style: none;
      display: flex;
      gap: 1rem;
    }

    nav ul li {
      position: relative;
    }

    nav ul li a {
      text-decoration: none;
      color: #ffffff;
      font-weight: 700;
      transition: color 0.3s ease;
    }

    nav ul li a:hover {
      color: #00eaff; /* Color turquesa/azul al pasar el ratón */
    }

    /* ========== BOTÓN HAMBURGUESA (MÓVIL) ========== */
    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
    }

    .menu-toggle span {
      height: 3px;
      width: 25px;
      background-color: #ffffff;
      transition: 0.3s;
    }

    .video-section {
        padding: 0;
        max-width: none;
        margin: 0;
        position: relative;
        width: 100vw;
        height: 50vh;
        overflow: hidden;
    }

    .video-section video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        object-fit: cover; /* Asegura que el video cubra todo el contenedor */
        z-index: 1;
    }

    .logo-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;
    }

    .logo-overlay img {
         /* Ajusta el tamaño del logo según lo necesites */
        width: 100%;
        height: auto;
    }
    /* Estilos para la imagen de ancho completo */
    .fullwidth-image {
        padding: 0;
        max-width: none;
        margin: 0;
    }

    .fullwidth-image img {
        width: 100%;
        height: 40px;
        display: block; /* Elimina espacios indeseados debajo de la imagen */
    }

    .fullwidth-image::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Cubre toda la imagen */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
        pointer-events: none;
        z-index: 1;
      }


   

    /* ========== SECCIONES GENÉRICAS ========== */
    section {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    section h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      text-align: center;
      color: #00eaff; /* Color acento */
    }

    /* ========== SOBRE NOSOTROS ========== */
    .sobre-nosotros p {
      margin-bottom: 1rem;
    }

    /* ========== NUESTROS PERROS (EJEMPLO) ========== */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }

    .card {
      background-color: #1c1c1c;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
    }

    .card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .card h3 {
      margin: 1rem 0;
      font-size: 1.2rem;
      color: #00eaff;
    }

    .card p {
      padding: 0 1rem 1rem;
    }

    /* ========== GALERÍA (EJEMPLO) ========== */
    .galeria-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
    }

    .galeria-grid img {
      width: 100%;
      height: auto;
      border-radius: 5px;
    }

    /* Galería para pantallas de PC (por ejemplo, mayores a 1024px) */
    @media (min-width: 1024px) {
    .galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
    }

    /* ========== SECCIÓN CONTACTO ========== */
    .contacto-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 500px;
      margin: 0 auto;
    }

    .contacto-form input,
    .contacto-form textarea {
      width: 100%;
      padding: 0.8rem;
      border-radius: 5px;
      border: none;
      background-color: #2c2c2c;
      color: #fff;
    }

    .contacto-form button {
      padding: 0.8rem;
      border: none;
      border-radius: 5px;
      background-color: #00eaff;
      color: #000;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .contacto-form button:hover {
      background-color: #00c4cc;
    }

    /* ========== FOOTER ========== */
    footer {
      background-color: #1c1c1c;
      text-align: center;
      padding: 1rem;
    }

    footer p {
      font-size: 0.9rem;
      color: #999;
    }
    .whatsapp-float {
      position: fixed;
      width: 60px;
      height: 60px;
      bottom: 40px;
      right: 40px;
      background-color: #25d366;
      color: #FFF;
      border-radius: 50%;
      text-align: center;
      font-size: 30px;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
    }
    .whatsapp-float:hover {
      background-color: #128c7e;
    }
    .whatsapp-float img {
      width: 35px;
      height: 35px;
    }
    

    /* ========== RESPONSIVE DESIGN ========== */
    @media (max-width: 768px) {
      nav ul {
        position: absolute;
        top: 70px;
        right: 0;
        background-color: #1c1c1c;
        flex-direction: column;
        width: 200px;
        padding: 1rem;
        transform: translateX(100%);
        transition: transform 0.3s ease;
      }

      nav ul.show {
        transform: translateX(0);
      }

      .menu-toggle {
        display: flex;
      }
      .video-section {
        height: 38vh; /* Altura para pantallas móviles */
      }
    }
    @media (max-width: 600px) {
        
        .video-section {
          height: 27vh; /* Altura para pantallas móviles */
        }
      }