/* ==========================================================================
PAGINA: detalle_servicio.css
se encarga de los estilos para la pagina de detalle servicio, aqui puedes controlar tamaños, colores y posicionamiento


/* ==========================================================================
   1. RESETEO Y ESTILOS BASE
   Define la configuración global para asegurar que el diseño se vea igual
   en todos los navegadores, eliminando márgenes por defecto y fijando la fuente.
   ========================================================================== */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

body{
    background: #f5f6fa;
    color: #333;
}

/* ==========================================================================
   2. ESTRUCTURA Y ENCABEZADO DE DETALLES
   Controla el contenedor principal y la sección superior donde aparece
   la imagen del servicio, el título, el precio y la descripción breve.
   ========================================================================== */
.detalle-container{
    max-width: 1100px;
    margin: 80px auto;
    padding: 20px;
}

.detalle-header{
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.detalle-img{
    width: 350px;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.detalle-info h1{
    font-size: 32px;
    margin-bottom: 10px;
}

.detalle-info .precio{
    font-size: 22px;
    color:  #e17203; 
    font-weight: bold;
    margin-bottom: 15px;
}

.detalle-info .descripcion{
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
}

/* ==========================================================================
   3. SISTEMA DE REJILLA FLEXIBLE (Tarjetas de información)
   Configura las secciones informativas adicionales (Misión, Indicaciones, etc.)
   usando Flexbox para que se organicen automáticamente en filas y columnas.
   ========================================================================== */
.detalle-flex-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    align-items: stretch; 
}

.detalle-seccion {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
    flex: 1 1 calc(45% - 20px); 
    min-width: 300px; 
    margin-bottom: 0; 
}

.detalle-seccion.full-width {
    flex: 1 1 100%;
}

.detalle-seccion:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* ==========================================================================
   4. TIPOGRAFÍA E ICONOS DENTRO DE SECCIONES
   Ajusta el interlineado, colores y márgenes de los textos, títulos 
   e iconos dentro de cada tarjeta informativa.
   ========================================================================== */
.indicaciones {
    margin-top: 0; 
    grid-column: auto; 
}

.detalle-seccion p {
    line-height: 1.6;
    font-size: 15px;
    color: #444444;
    word-wrap: break-word; 
}

.detalle-seccion h2{
    color:#e17203;
    margin-bottom: 20px;
}

.detalle-seccion i{
    margin-right: 10px;
}

/* Correcciones específicas de espaciado interno */
.detalle-seccion p br {
    margin-bottom: 5px;
    display: block;
    content: "";
}

/* ==========================================================================
   5. COMPONENTES ADICIONALES (Listas y Botones)
   Estiliza las listas de servicios/pagos y el botón de llamada a la acción (CTA)
   con efectos de transición al pasar el mouse.
   ========================================================================== */
.detalle-seccion ul {
    list-style: none;
    padding: 0;
}

.detalle-seccion li {
    background: #f9f9f9;
    margin-bottom: -10px;
    padding: 10px;
    border-radius: 5px;
}

.btn-agendar{
    display: inline-block;
    background:  #e17203;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-agendar:hover{
    background: #52073a;
    transform: scale(1.05);
}

/* ==========================================================================
   6. DISEÑO RESPONSIVO (Media Queries)
   Ajusta la interfaz para dispositivos móviles y tablets, cambiando el 
   orden del flexbox a columnas y centrando los textos para pantallas pequeñas.
   ========================================================================== */
@media (max-width: 768px) {
    .detalle-seccion {
        flex: 1 1 100%;
    }

    .detalle-flex-row {
        flex-direction: column;
    }

    .detalle-header{
        flex-direction: column;
        text-align: center;
    }

    .detalle-img{
        width: 100%;
        height: auto;
    }
}
/* ==========================================================================
   RESPONSIVE DESIGN - DETALLE SERVICIO
   ========================================================================== */

/* =========================
   TABLETS GRANDES
   ========================= */
@media (max-width: 1024px){

    .detalle-container{
        padding: 25px;
        margin: 60px auto;
    }

    .detalle-header{
        gap: 20px;
    }

    .detalle-img{
        width: 320px;
        height: 230px;
    }

    .detalle-info h1{
        font-size: 28px;
    }

    .detalle-info .precio{
        font-size: 20px;
    }

    .detalle-info .descripcion{
        font-size: 15px;
    }
}


/* =========================
   TABLETS Y MOVILES
   ========================= */
@media (max-width: 768px){

    .detalle-container{
        width: 100%;
        padding: 15px;
        margin: 40px auto;
    }

    /* HEADER */
    .detalle-header{
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 20px;
    }

    .detalle-img{
        width: 100%;
        max-width: 500px;
        height: auto;
        border-radius: 12px;
    }

    .detalle-info{
        width: 100%;
    }

    .detalle-info h1{
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .detalle-info .precio{
        font-size: 1.3rem;
    }

    .detalle-info .descripcion{
        font-size: 0.95rem;
        line-height: 1.7;
        text-align: justify;
    }

    /* GRID FLEX */
    .detalle-flex-row{
        flex-direction: column;
        gap: 15px;
    }

    .detalle-seccion{
        width: 100%;
        min-width: unset;
        flex: 1 1 100%;
        padding: 20px;
        border-radius: 12px;
    }

    .detalle-seccion h2{
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .detalle-seccion p{
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .detalle-seccion li{
        font-size: 0.9rem;
        padding: 12px;
        margin-bottom: 10px;
    }

    .btn-agendar{
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 1rem;
        border-radius: 12px;
    }
}


/* =========================
   MOVILES PEQUEÑOS
   ========================= */
@media (max-width: 480px){

    body{
        overflow-x: hidden;
    }

    .detalle-container{
        padding: 10px;
        margin-top: 25px;
    }

    .detalle-header{
        gap: 15px;
    }

    .detalle-img{
        width: 100%;
        border-radius: 10px;
    }

    .detalle-info h1{
        font-size: 1.5rem;
    }

    .detalle-info .precio{
        font-size: 1.1rem;
    }

    .detalle-info .descripcion{
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .detalle-seccion{
        padding: 15px;
    }

    .detalle-seccion h2{
        font-size: 1rem;
    }

    .detalle-seccion p{
        font-size: 0.82rem;
    }

    .detalle-seccion li{
        font-size: 0.8rem;
        padding: 10px;
    }

    .btn-agendar{
        font-size: 0.9rem;
        padding: 12px;
    }
}


/* =========================
   EXTRA PEQUEÑOS
   ========================= */
@media (max-width: 320px){

    .detalle-info h1{
        font-size: 1.3rem;
    }

    .detalle-info .precio{
        font-size: 1rem;
    }

    .detalle-seccion{
        padding: 12px;
    }

    .detalle-seccion p{
        font-size: 0.75rem;
    }

    .btn-agendar{
        font-size: 0.8rem;
    }
}