/* =========================================================
   PROYECTO : Hotel Cordobés
   ARCHIVO  : style.css
   VERSION  : 2026
   AUTOR    : Documentación Profesional IA

   DESCRIPCIÓN:
   Hoja de estilos principal para el sistema web
   de reservas del Hotel Cordobés.

   OBJETIVOS:
   - Diseño moderno y responsive
   - Compatibilidad móvil
   - Código organizado y mantenible
   - Optimización visual
   - Fácil escalabilidad

   SEGURIDAD:
   - Archivo limpio
   - Sin código malicioso
   - Sin imports externos peligrosos
   - Sin ejecución remota
========================================================= */


/* =========================================================
   RESET GENERAL
   Normaliza márgenes y comportamiento visual
========================================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;

    /* Fuente global del sistema */
    font-family:Arial, sans-serif;
}


/* =========================================================
   CONFIGURACIÓN GENERAL DEL BODY
========================================================= */
body{
    background:#FAFAFA;
    color:#333333;
}


/* =========================================================
   LOGO SUPERIOR FIJO
========================================================= */
.logo-superior{
    position:fixed;

    top:20px;
    left:20px;

    z-index:9999;

    background:#FFFFFF;

    padding:10px;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}


/* Tamaño del logo */
.logo-superior img{
    width:120px;
}


/* =========================================================
   HEADER PRINCIPAL
========================================================= */
header{
    height:90vh;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#FFFFFF;
    text-align:center;

    overflow:hidden;
}


/* =========================================================
   SLIDER PRINCIPAL
========================================================= */
.slider{
    position:absolute;

    width:100%;
    height:100%;

    z-index:-2;
}


/* Slide individual */
.slide{
    position:absolute;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center;

    opacity:0;

    transition:1s ease;
}


/* Slide activo */
.slide.active{
    opacity:1;
}


/* =========================================================
   CAPA OSCURA SOBRE EL SLIDER
========================================================= */
header::before{
    content:'';

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0.55);

    z-index:-1;
}


/* =========================================================
   OVERLAY / CAJA DE PRESENTACIÓN
========================================================= */
.overlay{
    position:absolute;

    right:60px;
    bottom:60px;

    background:rgba(255,255,255,0.25);

    color:#FFFFFF;

    /*
    ============================================
    CONTROL DE ESPACIADO INTERNO
    Primer valor  : arriba/abajo
    Segundo valor : izquierda/derecha
    ============================================
    */
    padding:20px 20px;

    border-radius:15px;

    /* Control del ancho máximo */
    max-width:500px;

    text-align:left;

    box-shadow:0 8px 25px rgba(0,0,0,0.35);
}


/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */
.overlay h1{
    color:#FFFFFF;

    font-size:42px;
    font-weight:bold;

    margin-bottom:10px;

    text-shadow:
        2px 2px 6px rgba(0,0,0,0.85),
        0 0 12px rgba(0,0,0,0.65);
}


/* =========================================================
   PÁRRAFOS DEL OVERLAY
========================================================= */
.overlay p{
    color:#FFFFFF;

    font-size:18px;

    /* Interlineado */
    line-height:1.45;

    margin-bottom:10px;

    text-shadow:
        2px 2px 5px rgba(0,0,0,0.90),
        0 0 8px rgba(0,0,0,0.70);
}


/* =========================================================
   BOTONES GENERALES
========================================================= */
.btn,
button{
    display:inline-block;

    background:#25D366;

    color:#FFFFFF;

    padding:14px 28px;

    border:none;

    border-radius:8px;

    font-size:1.1rem;

    cursor:pointer;

    margin-top:12px;

    text-decoration:none;

    transition:0.3s;
}


/* Hover de botones */
.btn:hover,
button:hover{
    background:#1EBE57;
}


/* =========================================================
   SECCIONES GENERALES
========================================================= */
section{
    padding:24px 20px;

    max-width:1200px;

    margin:auto;
}


/* =========================================================
   TÍTULOS H2
========================================================= */
h2{
    text-align:center;

    margin-bottom:18px;

    color:#1F3C88;
}


/* =========================================================
   GRID DE HABITACIONES
========================================================= */
.rooms{
    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap:22px;
}


/* =========================================================
   TARJETAS DE HABITACIONES
========================================================= */
.card{
    background:#FFFFFF;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,0.1);
}


/* Contenido interno */
.card-content{
    padding:16px;
}


/* Precio */
.price{
    color:#25D366;

    font-weight:bold;

    margin-top:8px;
}


/* =========================================================
   SLIDER DE HABITACIONES
========================================================= */
.room-slider{
    position:relative;

    width:100%;
    height:220px;

    overflow:hidden;

    border-radius:12px;
}


/* Contenedor de imágenes */
.slides{
    position:relative;

    width:100%;
    height:100%;
}


/* Imágenes */
.slides img{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    opacity:0;

    transition:opacity 0.5s ease;
}


/* Imagen activa */
.slides img.active{
    opacity:1;
}


/* =========================================================
   BOTONES DEL SLIDER
========================================================= */
.room-slider button{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(0,0,0,0.45);

    color:#FFFFFF;

    border:none;

    padding:8px 12px;

    cursor:pointer;

    z-index:5;

    border-radius:6px;
}


/* Posicionamiento */
.room-slider .prev{
    left:8px;
}

.room-slider .next{
    right:8px;
}


/* =========================================================
   FORMULARIO
========================================================= */
form{
    background:#FFFFFF;

    padding:24px;

    border-radius:15px;

    max-width:700px;

    margin:auto;

    box-shadow:0 8px 20px rgba(0,0,0,0.1);
}


/* Campos generales */
input,
select,
textarea{
    width:100%;

    padding:10px;

    margin:6px 0 14px;

    border:1px solid #CCCCCC;

    border-radius:8px;
}


/* =========================================================
   FILAS FLEXIBLES
========================================================= */
.form-row{
    display:flex;

    gap:20px;

    flex-wrap:wrap;
}


/* Grupo individual */
.form-group{
    flex:1;

    min-width:250px;
}


/* =========================================================
   FECHAS
========================================================= */
.fechas-row{
    display:flex;

    flex-wrap:nowrap;

    gap:20px;

    width:100%;

    margin-bottom:14px;
}


/* Campo fecha */
.campo-fecha{
    flex:1 1 0;

    min-width:0;

    display:flex;

    flex-direction:column;
}


/* Input fecha */
.campo-fecha input{
    width:100%;

    margin:6px 0 0;
}


/* =========================================================
   MENSAJE DE RESERVA
========================================================= */
.mensaje-reserva{
    color:red;

    font-size:16px;
}


/* =========================================================
   MAPA GOOGLE MAPS
========================================================= */
.map-container iframe{
    width:100%;

    height:380px;

    border:0;

    border-radius:15px;
}


/* =========================================================
   FOOTER
========================================================= */
footer{
    background:#212121;

    color:#FFFFFF;

    text-align:center;

    padding:14px;
}


/* =========================================================
   SERVICIOS
========================================================= */
.servicios{
    padding:28px 20px;

    max-width:1200px;

    margin:auto;

    text-align:center;
}


/* Grid de servicios */
.servicios-grid{
    display:flex;

    justify-content:space-between;

    gap:16px;

    flex-wrap:wrap;
}


/* Item individual */
.servicio-item{
    flex:1;

    min-width:240px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:12px;

    padding:14px 16px;

    background:#FFFFFF;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,0.08);

    transition:0.3s ease;

    text-align:left;
}


/* Hover */
.servicio-item:hover{
    transform:translateY(-3px);
}


/* Imagen */
.servicio-item img{
    width:45px;
    height:45px;

    object-fit:contain;

    flex-shrink:0;
}


/* Texto */
.servicio-texto{
    display:flex;

    flex-direction:column;

    text-align:left;
}


/* Título */
.servicio-texto strong{
    font-size:15px;

    color:#1F3C88;
}


/* Descripción */
.servicio-texto small{
    color:#666666;

    font-size:12px;
}


/* =========================================================
   RESPONSIVE DESIGN
   Adaptación para móviles y tablets
========================================================= */
@media (max-width:768px){

    /* Caja overlay */
    .overlay{
        right:15px;
        left:15px;

        bottom:15px;

        padding:18px;

        text-align:center;
    }

    /* Logo */
    .logo-superior{
        top:10px;
        left:10px;

        padding:8px;
    }

    /* Imagen logo */
    .logo-superior img{
        width:90px;
    }

    /* Servicios verticales */
    .servicios-grid{
        flex-direction:column;
    }
}