/* MAS_INFO.CSS */
/*
 * PÁGINA: Hoja de Estilos de Más Información y Reseñas (Mas Info CSS) - As Tech Computer
 * PROPÓSITO: Establecer y centralizar la presentación visual para la sección de contacto y las reseñas de clientes obtenidas a través de Google Maps, garantizando un diseño minimalista, moderno y coherente con la identidad corporativa.
 * FUNCIONALIDADES:
 * - Declaración de variables CSS base (:root) para estandarizar la paleta de colores (naranja, gris de fondo, textos) y las sombras en todo el documento.
 * - Estructuración del bloque de resumen general de calificaciones, resaltando visualmente la puntuación promedio y las estrellas (Score).
 * - Implementación de un sistema de cuadrícula (CSS Grid) adaptativo y fluido para alinear armónicamente las tarjetas de comentarios de los usuarios.
 * - Diseño interactivo de las tarjetas de testimonios, incorporando un efecto de elevación espacial (translateY) y acentuación de sombra al momento de interactuar con el puntero (Hover).
 * - Formateo gráfico de contingencia (alerta vacía) en caso de que la conexión con la API falle o no existan reseñas por mostrar.
 */

/* ==========================================
   1. VARIABLES BASE Y CONFIGURACIÓN GLOBAL
   ========================================== */
/**
 * El sistema define la paleta de colores corporativa y variables base 
 * para sombras en la raíz del documento (:root), asegurando consistencia 
 * visual y facilitando un mantenimiento rápido del código.
 */
:root {
    --color-naranja: #e17203;
    --color-texto: #333333;
    --color-gris-fondo: #f9f9fb;
    --color-blanco: #ffffff;
    --sombra: 0 8px 24px rgba(0, 0, 0, 0.06);
}

body {
    background-color: var(--color-gris-fondo);
    font-family: 'Lato', sans-serif;
}

/* ==========================================
   2. ESTRUCTURA DEL CONTENEDOR PRINCIPAL
   ========================================== */
/**
 * Establece los límites máximos de anchura y el centrado automático 
 * del contenedor maestro, previniendo que el contenido se desborde 
 * en pantallas ultra anchas.
 */
.contenedor-principal-resenas {
    max-width: 1200px;
    margin: 120px auto 50px auto;
    padding: 0 20px;
    flex-grow: 1;
}

/* ==========================================
   3. ENCABEZADO Y TÍTULOS DE LA SECCIÓN
   ========================================== */
/**
 * Configura la jerarquía tipográfica (h1/h3), los grosores de fuente 
 * (font-weight: 900) y posiciona el separador temático naranja justo 
 * debajo del título de la sección.
 */
.encabezado {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-seccion {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-texto);
    margin-bottom: 12px;
}

.separador {
    width: 60px;
    height: 4px;
    background-color: var(--color-naranja);
    margin: 0 auto 15px auto;
    border-radius: 2px;
}

.subtitulo-resenas {
    color: #666;
    font-size: 1.1rem;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================
   4. ESTILOS DEL RESUMEN DE CALIFICACIÓN (GOOGLE)
   ========================================== */
/**
 * Formatea visualmente el bloque de estadísticas generales extraídas 
 * desde Google Maps, destacando el promedio numérico general y alineando 
 * los íconos de estrellas (Score) mediante flexbox.
 */
.contenedor-resumen-general {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    max-width: 400px;
    margin: 20px auto 30px auto;
    border: 1px solid #eee;
}

.puntuacion-numero {
    font-size: 3.5rem;
    font-weight: 900;
    color: #1d1d1f;
    line-height: 1;
}

.estrellas-grandes {
    color: #fbbc04;
    font-size: 3rem;
    margin-bottom: 5px;
}

.conteo-opiniones {
    font-size: 0.9rem;
    color: #6e6e73;
    margin: 0;
}

/* ==========================================
   5. DISEÑO EN CUADRÍCULA (GRID) PARA RESEÑAS
   ========================================== */
/**
 * Implementa CSS Grid con auto-fit y dimensiones mínimas de 300px 
 * para adaptar las tarjetas automáticamente dependiendo de la 
 * resolución del dispositivo (Responsive Design).
 */
.grid-resenas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 20px 8%;
}

/* ==========================================
   6. ESTILOS INDIVIDUALES DE LA TARJETA
   ========================================== */
/**
 * Construye el diseño base de las tarjetas individuales (Cards), 
 * aplicando bordes redondeados y un efecto de elevación suave 
 * (translateY) al ser sobrevoladas por el puntero.
 */
.tarjeta-resena {
    background: white;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.tarjeta-resena:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ==========================================
   7. INFORMACIÓN Y PERFIL DEL CLIENTE
   ========================================== */
/**
 * Modela la estructura de la cabecera de cada tarjeta, perfilando la 
 * fotografía del usuario (border-radius: 50%) y coloreando 
 * dinámicamente las estrellas de valoración individual.
 */
.perfil-resena {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.perfil-resena img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-gris-fondo);
}

.perfil-resena h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-texto);
}

.estrellas {
    color: #FFD700;
    font-size: 0.9rem;
}

/* ==========================================
   8. CONTENIDO Y FECHA DE LA RESEÑA
   ========================================== */
/**
 * Define el formato tipográfico (cursiva, color de fuente y altura de línea) 
 * para el cuerpo principal del testimonio y la marca de tiempo (fecha).
 */
.texto-resena {
    font-size: 1rem;
    color: #555555;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 20px;
    flex-grow: 1;
}

.fecha-resena {
    font-size: 0.85rem;
    color: #a0a0a0;
    font-weight: 400;
}

/* ==========================================
   9. ALERTA PARA RESULTADOS VACÍOS O ERRORES
   ========================================== */
/**
 * El sistema estiliza una tarjeta de retroalimentación gráfica que ocupa 
 * todas las columnas disponibles (grid-column: 1 / -1) en caso de no 
 * recibir datos desde la API de Google Places.
 */
.alerta-vacia {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    background: var(--color-blanco);
    border-radius: 12px;
    color: #666;
    box-shadow: var(--sombra);
}

.alerta-vacia i {
    font-size: 2.5rem;
    color: var(--color-naranja);
    margin-bottom: 15px;
}