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

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: #F9FDF9; /* Soft Zen Greenish-White */
    color: #2D3748;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Lora', serif; color: #276749; /* Earthy Green */ }

/* GRID SCRAMBLER */
._contenedor_grid {
    display: grid;
    grid-template-columns: 100%;
    /* Scrambling the visual display order vs HTML DOM order */
    /* Visual Order: Nav, Hero, Services, About, Contact, Footer */
}

._navegacion_principal { grid-row: 1; }
._seccion_portada { grid-row: 2; }
._clases_servicios { grid-row: 3; }
._sobre_nosotros_zen { grid-row: 4; }
._contacto_reserva { grid-row: 5; }
._pie_de_pagina_legal { grid-row: 6; }

/* Styling Sections */
._navegacion_principal {
    background-color: #FFFFFF;
    padding: 20px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
._logo_zen { font-family: 'Lora', serif; font-size: 24px; font-weight: 700; color: #276749; }
._enlaces_menu { display: flex; gap: 30px; }
._enlaces_menu a { color: #4A5568; font-weight: 500; text-decoration: none; text-transform: uppercase; font-size: 14px; letter-spacing: 1px;}
._enlaces_menu a:hover, ._enlaces_menu a._activo { color: #38A169; }

._seccion_portada {
    padding: 80px 10%;
    display: flex;
    align-items: center;
    gap: 50px;
    background-color: #F0FFF4;
}
._texto_portada { flex: 1; }
._texto_portada h1 { font-size: 48px; line-height: 1.2; margin-bottom: 20px; color: #22543D;}
._texto_portada p { font-size: 18px; color: #4A5568; margin-bottom: 30px; }

._boton_natural {
    display: inline-block;
    padding: 15px 35px;
    background-color: #38A169;
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}
._boton_natural:hover { background-color: #276749; transform: translateY(-2px); }

._imagen_portada { flex: 1; text-align: right;}
._imagen_portada img { width: 100%; max-width: 550px; border-radius: 20px; box-shadow: 0 20px 40px rgba(39, 103, 73, 0.15); }

._seccion_comun { padding: 80px 10%; text-align: center; }
._seccion_comun h2 { font-size: 36px; margin-bottom: 20px; }
._seccion_comun > p { max-width: 700px; margin: 0 auto 50px; font-size: 18px; color: #718096; }

._grid_tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
._tarjeta_zen {
    background: #FFFFFF;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    text-align: left;
    transition: 0.3s;
    border: 1px solid #E2E8F0;
}
._tarjeta_zen:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(56, 161, 105, 0.1); border-color: #38A169; }
._tarjeta_zen h3 { font-size: 22px; margin-bottom: 15px; color: #276749; }

._formulario_reserva { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; text-align: left;}
._formulario_reserva input, ._formulario_reserva textarea {
    padding: 15px; border: 1px solid #CBD5E0; border-radius: 8px; font-family: 'Outfit', sans-serif; background-color: #F9FDF9;
}
._formulario_reserva input:focus, ._formulario_reserva textarea:focus { outline: none; border-color: #38A169; }

._pie_de_pagina_legal { background-color: #22543D; color: #C6F6D5; text-align: center; padding: 40px; font-size: 14px;}
._pie_de_pagina_legal a { color: #FFFFFF; text-decoration: none; margin: 0 15px; }

/* Internal Pages */
._pagina_interna ._seccion_portada { padding: 60px 10%; text-align: center; justify-content: center; background-color: #276749; color: #FFFFFF;}
._pagina_interna ._seccion_portada h1 { color: #FFFFFF; margin-bottom: 0; }
._texto_lectura { max-width: 800px; margin: 0 auto; text-align: left; font-size: 18px; color: #4A5568;}
._texto_lectura p { margin-bottom: 20px;}
._texto_lectura h2 { margin: 40px 0 20px; }

@media (max-width: 768px) {
    ._seccion_portada { flex-direction: column; text-align: center; padding: 40px 5%; }
    ._navegacion_principal { flex-direction: column; gap: 15px; }
}