/* 1. ESTILOS BASE */
        * {
            box-sizing: border-box; /* Evita que el padding rompa los tamaños */
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            background-color: #DCE8B4;
            color: #333;
        }

        /* 2. ENCABEZADO */
        header {
            background: #59a135;
background: linear-gradient(100deg, #59a135 0%, #3a7324 60%, #378518 100%);
            color: #DCE8B4;
            text-align: center;
            padding: 40px 20px;
            margin-bottom: 30px;
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
        }
        header p {
            margin: 10px;
            font-size: 1.2em;
        }
        h2{
            text-align: center;
            margin: 0;
            font-size: 1.9em;
            padding: 10px;
            margin-bottom: 15px;
            color: #3a7324;
        }

        /* 3. LA MAGIA DE LA GALERÍA (CSS GRID) */
        .contenedor-galeria {
            max-width: 1200px;
            margin: 0 auto; /* Centra la galería en la pantalla */
            padding: 0 20px;
            
            /* Aquí activamos la cuadrícula */
            display: grid; 
            /* Esta línea mágica hace que las tarjetas se acomoden solas dependiendo del tamaño de la pantalla */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
            gap: 27px; /* Espacio entre las tarjetas */
        }

        /* 4. DISEÑO DE CADA TARJETA (CARD) */
        .tarjeta {
            background-color: #cfffce6b;
            border-radius: 11px; /* Esquinas redondeadas */
            overflow: hidden; /* Corta lo que sobresalga de las esquinas redondeadas */
            box-shadow: 0 4px 12px #0000001a; /* Sombra suave */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Prepara la animación */
        }

        /* Efecto cuando el ratón pasa por encima de la tarjeta */
        .tarjeta:hover {
            transform: translateY(-10px); /* Sube la tarjeta un poco */
            box-shadow: 0 15px 20px #00000026; /* Hace la sombra más grande */
        }

        /* 5. IMAGEN DE LA TARJETA */
        .tarjeta img {
            width: 100%; /* La imagen ocupa todo el ancho de su tarjeta */
            height: 200px; /* Altura fija para que todas se vean parejas */
            object-fit: cover; /* Recorta la imagen sin deformarla para que llene el espacio */
        }

        /* 6. CONTENIDO DE LA TARJETA (Textos y botón) */
        .contenido-tarjeta {
            padding: 25px;
        }
        
        .contenido-tarjeta h3 {
            margin: 0;
            color: #2d3436;
        }

        .contenido-tarjeta p {
            color: #525a5d;
            font-weight: 500;
            line-height: 1.35; /* Espacio entre líneas para leer mejor */
        }

        /* Botón de la tarjeta */
        .boton {
            display: inline-block;
            background-color: #386641; /* Color verde agua */
            color: #DCE8B4;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            margin-top: 10px;
            transition: background-color 0.2s;
            font-weight: 700;
        }

        .boton:hover {
            background-color: #588136; /* Verde más oscuro al pasar el ratón */
            
        }

        /* 7. PIE DE PÁGINA */
        footer {
            background: #59a135;
background: linear-gradient(100deg, #59a135 0%, #3a7324 60%, #378518 100%);
            text-align: center;
            padding: 20px;
            margin-top: 50px;
            color: #DCE8B4;
            font-size: 1.6em;
            font-weight: 800;
        }
        .cont_bot{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .boton_2{
            font-size: 1.2em;
            display: inline-block;
            background-color: #143503; 
            color: #DCE8B4;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            margin-top: 26px;
            transition: background-color 0.2s;
            font-weight: 700;
            box-shadow: 0 10px 16px #00000026;
            transition: transform 0.3s ease
        }
        .boton_2:hover{
            background-color: #204910;
            transform: translateY(-5px);
        }