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

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #FAF5F0; /* Warm beige */
    color: #2D3748;
    line-height: 1.7;
}

h1, h2, h3 { font-family: 'Lora', serif; color: #1D4E56; /* Soothing Teal */ }

/* SKELETON A: SEMANTIC GRID AREAS */
main._terapia_grid {
    display: grid;
    grid-template-areas: 
        "cabecera cabecera"
        "destacado destacado"
        "contenido lateral"
        "pie pie";
    grid-template-columns: 1.8fr 1.2fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px;
}

@media (max-width: 800px) {
    main._terapia_grid {
        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: 25px; border-radius: 15px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 10px 25px rgba(29, 78, 86, 0.05);
}
._logo_terapia { font-family: 'Lora', serif; font-size: 26px; font-weight: 600; color: #1D4E56; }
._enlaces_psic a { color: #4A5568; text-decoration: none; font-weight: 500; margin-left: 25px; font-size: 15px;}
._enlaces_psic a:hover, ._enlaces_psic a._activo { color: #E07A5F; /* Soft Coral */ border-bottom: 2px solid #E07A5F; padding-bottom: 5px;}

header._area_portada {
    background: #1D4E56; padding: 50px; border-radius: 15px; color: #FFF;
    display: flex; gap: 50px; align-items: center;
    box-shadow: 0 10px 25px rgba(29, 78, 86, 0.1);
}
header._area_portada figure { flex: 1; margin: 0; }
header._area_portada img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
header._area_portada div { flex: 1.2; }
header._area_portada h1 { font-size: 42px; margin-bottom: 20px; color: #FFF; line-height: 1.2;}
header._area_portada p { font-size: 19px; color: #E2E8F0; margin-bottom: 30px; }
._btn_reserva {
    display: inline-block; padding: 15px 30px; background: #E07A5F; color: #FFF !important; text-decoration: none;
    border-radius: 8px; font-weight: 600; border: none; cursor: pointer; transition: 0.3s;
}
._btn_reserva:hover { background: #D16548; transform: translateY(-2px); }

article._area_servicios {
    background: #FFF; padding: 40px; border-radius: 15px;
    box-shadow: 0 10px 25px rgba(29, 78, 86, 0.05);
}
article._area_servicios h2 { margin-bottom: 25px; font-size: 32px;}
._tarjeta_problema {
    border-left: 5px solid #1D4E56; padding-left: 25px; margin-bottom: 35px;
}
._tarjeta_problema h3 { font-size: 22px; margin-bottom: 10px; color: #2D3748; font-family: 'Montserrat', sans-serif;}

aside._area_formulario {
    background: #FFF; padding: 40px; border-radius: 15px;
    box-shadow: 0 10px 25px rgba(29, 78, 86, 0.05); border-top: 5px solid #E07A5F;
}
aside._area_formulario h2 { color: #1D4E56; margin-bottom: 20px; font-size: 26px;}
._form_contacto input, ._form_contacto textarea {
    width: 100%; padding: 15px; margin-bottom: 20px; border-radius: 8px; border: 1px solid #E2E8F0; font-family: 'Montserrat', sans-serif; background: #FAF5F0;
}
._form_contacto input:focus, ._form_contacto textarea:focus { outline: none; border-color: #1D4E56; }

footer._area_legal {
    text-align: center; color: #718096; padding: 20px; font-size: 14px;
}
footer._area_legal a { color: #4A5568; text-decoration: none; margin: 0 15px; }

/* Inner Overrides */
._interna header._area_portada { flex-direction: column; text-align: center; padding: 60px; }
._interna header._area_portada h1 { color: #FFF; margin: 0;}
._interna header._area_portada p { margin-top: 15px; margin-bottom: 0;}