* {margin: 0; padding: 0; box-sizing: border-box;}
        body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #1a1a1a;}
        .cabeza{display:flex; flex-wrap:wrap; width: 100%; margin: 0 auto; background: #fff;}
        .fotoperro{width:100%; margin:0px auto; min-width:300px; align-item:center; text-align:center; padding: 0 20px;}
        .encabezado{width:100%; margin:0 auto; text-align:center; line_height:0px; padding: 0 20px;}
        .encabezado a{width:100%;} 
        .container {max-width: 1100px; margin: 0 auto; padding: 0 20px;}
        .btn {display: inline-block; background: #16a34a; color: white; padding: 16px 32px; border-radius: 12px; font-size: 18px; font-weight: bold; text-decoration: none; text-align: center; border: none; cursor: pointer;}
        .btn:hover {background: #15803d;}
        .section {padding: 10px 0;}
        h1, h2, h3 {margin-bottom: 16px; line-height: 1.2;}
        h1 {font-size: 44px;}
        h2 {font-size: 32px; text-align: center; margin-bottom: 40px;}
        
        
        
        /* HERO CON IMAGEN DE FONDO url('../img/si me pierdo.jpeg') */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),;
            background-size: cover;
            background-position: center;
            padding: 120px 0;
            color: white;
            text-align: center;
        }
        .hero h1 {color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
        .hero p {font-size: 20px; margin: 20px auto 30px; max-width: 600px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
        .hero small {display: block; margin-top: 12px; opacity: 0.9;}
        .hero .btn {box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);}
        
        /* Buscador */
        .finder {background: #fff; border: 2px solid #e5e7eb; border-radius: 16px; padding: 32px; margin: -60px auto 60px; max-width: 700px; text-align: left; box-shadow: 0 10px 15px rgba(0,0,0,0.1); position: relative; z-index: 10; width:60%; display:flex; flex-wrap:wrap; justify-content: space-between;}
        
        .form-group1 {margin-bottom: 16px;}
       .form-group1 label {display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px;}
       .form-group1 input {width: 100%; padding: 12px; border: 2px solid #d1d5db; border-radius: 8px; font-size: 16px;}
        /* Pasos */
        .steps {display: flex; gap: 24px; text-align: center; flex-wrap: wrap;}
        .step {flex: 1; min-width: 250px; padding: 24px;}
        .step-icon {font-size: 48px; margin-bottom: 16px;}
        
        /* Beneficios */
        .benefits {background: #f9fafb;}
        .benefits-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;}
        .benefit {background: white; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb;}
        
        /* CTA Final */
        .final-cta {background: #16a34a; color: white; text-align: center; border-radius: 16px; padding: 60px 20px;}
        .final-cta h2 {color: white;}
        .final-cta .btn {background: #15803d; color:white;}
        .final-cta .btn:hover {background: white; color: #16a34a;}
        
        /* Footer */
        footer {background: #111827; color: #9ca3af; padding: 40px 0; font-size: 14px;}
        footer .grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin-bottom: 32px;}
        footer h4 {color: white; margin-bottom: 12px;}
        footer a {color: #9ca3af; text-decoration: none; display: block; margin-bottom: 8px;}
        .footer-bottom {border-top: 1px solid #374151; padding-top: 20px; text-align: center;}
        
        /* WhatsApp flotante */
        .whatsapp-float {position: fixed; bottom: 20px; right: 20px; background: #25D366; color: white; padding: 14px; border-radius: 50px; font-size: 24px; text-decoration: none; z-index: 100; box-shadow: 0 4px 8px rgba(0,0,0,0.2);}

        /* Modal añadir mascota */
       .modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; padding: 20px;}
       .modal-content {background: white; border-radius: 16px; padding: 24px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;}
       .modal-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
       .close-modal {font-size: 28px; cursor: pointer; color: #6b7280;}
       .form-group {margin-bottom: 16px;}
       .form-group label {display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px;}
       .form-group input {width: 100%; padding: 12px; border: 2px solid #d1d5db; border-radius: 8px; font-size: 16px;}

        
        @media (max-width: 768px) {
            h1 {font-size: 32px;}
            .hero {padding: 80px 0;}
            .finder {width: 100%;} 
            .finder input {width: 100%; margin: 0 0 12px 0;} 
            .finder .btn {width: 100%;}
            .steps {flex-direction: column;}
             
        }

       @media (min-width: 768px) {
         .finder{margin-top:10px;}  
         .encabezado{width :65%; }
         .encabezado a{width :80%;} 
         .fotoperro {width :35%;}



      }
      @media (min-width: 1024px) {
           
         .encabezado{width :60%; padding-top:50px;}
  

      }
    @media(min-width:1200px){
       .finder{margin-top:-40px; }  
        

     }