/* 1. Reseteo básico (Recomendado para evitar márgenes raros) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

body {
    font-family: sans-serif;
	background: #e0f2f1;
    padding: 20px;
	margin-top: 60px;
}

/* 2. Estilos de la Sección Responsive */
.responsive-section {
    display: grid;
    /* Crea columnas automáticas de mínimo 280px y máximo 1 fracción del espacio total */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; /* Espacio entre las tarjetas */
    max-width: 800px; /* Evita que se estire infinitamente en pantallas gigantes */
    margin: 0 auto; /* Centra la sección en la pantalla */
}

/* 3. Estilos de los elementos internos (Tarjetas) */
.card {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card h1 { 
    margin: 0;
	color: #00796b; 
	font-size: 24px;
}

.temp {
	font-size: 48px; 
	font-weight: bold; 
	color: #333; 
	margin: 10px 0;
}

.hora {
	font-size: 14px;
	color: #333; 
	margin: 5px 0;
}

.posc {
	font-size: 10px;
	font-weight: bold;
	color: #333;
	margin: 10px 0;
}

.desc {
	font-size: 12px;
	color: #666;
	font-style: italic;
	margin-bottom: 20px
}

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; 
	gap: 10px; 
	border-top: 1px solid #eee; 
	padding-top: 15px; 
}

.info-item {
	font-size: 14px;
	color: #555;
}

.info-val {
	font-weight: bold;
	color: #00796b;
	display: block;
	font-size: 16px; 
}