@import url('fonts/fonts.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #F0F9F4; /* Vet Green Tint */
    color: #2D3748;
    line-height: 1.6;
}

h1, h2, h3 { font-family: 'Roboto Slab', serif; color: #276749; }

/* SKELETON A: SEMANTIC GRID AREAS */
main._cuadricula_maestra {
    display: grid;
    grid-template-areas: 
        "cabecera cabecera"
        "destacado destacado"
        "contenido lateral"
        "pie pie";
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 768px) {
    main._cuadricula_maestra {
        grid-template-areas: 
            "cabecera"
            "destacado"
            "contenido"
            "lateral"
            "pie";
        grid-template-columns: 1fr;
    }
}

/* Mapping Semantic Tags to Grid Areas */
nav._area_navegacion { grid-area: cabecera; }
header._area_portada { grid-area: destacado; }
article._area_servicios { grid-area: contenido; }
aside._area_formulario { grid-area: lateral; }
footer._area_legal { grid-area: pie; }

/* Styles */
nav._area_navegacion {
    background: #FFF; padding: 20px; border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
._logo_mascota { font-family: 'Roboto Slab', serif; font-size: 24px; font-weight: 700; color: #2F855A; }
._enlaces a { color: #4A5568; text-decoration: none; font-weight: 600; margin-left: 20px; text-transform: uppercase; font-size: 14px;}
._enlaces a:hover, ._enlaces a._activo { color: #38A169; }

header._area_portada {
    background: #FFF; padding: 40px; border-radius: 12px;
    display: flex; gap: 40px; align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
header._area_portada figure { flex: 1; margin: 0; }
header._area_portada img { width: 100%; border-radius: 8px; }
header._area_portada div { flex: 1; }
header._area_portada h1 { font-size: 38px; margin-bottom: 20px; }
header._area_portada p { font-size: 18px; color: #4A5568; margin-bottom: 20px; }
._boton_veterinario {
    display: inline-block; padding: 12px 24px; background: #E67E22; color: #FFF !important; text-decoration: none;
    border-radius: 6px; font-weight: bold; border: none; cursor: pointer;
}

article._area_servicios {
    background: #FFF; padding: 40px; border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
article._area_servicios h2 { margin-bottom: 20px; }
._tarjeta_perro {
    border-left: 4px solid #38A169; padding-left: 20px; margin-bottom: 30px;
}

aside._area_formulario {
    background: #2F855A; color: #FFF; padding: 40px; border-radius: 12px;
}
aside._area_formulario h2 { color: #FFF; margin-bottom: 20px; }
._form_vet input, ._form_vet textarea {
    width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 4px; border: none; font-family: 'Open Sans', sans-serif;
}

footer._area_legal {
    background: #2D3748; color: #A0AEC0; padding: 20px; border-radius: 12px; text-align: center;
}
footer._area_legal a { color: #FFF; text-decoration: none; margin: 0 10px; }

/* Inner Overrides */
._interna header._area_portada { flex-direction: column; text-align: center; padding: 60px; background: #2F855A; color: #FFF;}
._interna header._area_portada h1 { color: #FFF; }