/* Estilo general */
body{
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    background-color:#fff5f5;
    text-align:center;
}

/* Encabezado */
header{
    background-color:#c62828;
    color:white;
    padding:25px;
}

/* Barra del menú */
nav{
    background-color:#e53935;
    width:100%;
    padding:20px 0;
}

/* Lista del menú */
nav ul{
    list-style:none;
    padding:0;
    margin:0 auto;
    width: 140px;
}

/* Opciones */
nav ul li{
    margin:10px 0;
}

/* Links */
nav ul li a{
    
    
    display:block;
    padding:8px;
    color:white;
    text-decoration:none;
    font-weight:bold;
    border-radius:8px;
}

/* Hover */
nav ul li a:hover{
    background-color:#b71c1c;
}

/* Secciones */
section{
    padding:30px;
    margin:20px auto;
    width:70%;
    background:white;
    border-radius:10px;
    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
}

/* Títulos */
h2{
    color:#c62828;
}

/* Ubicación */
#ubicacion{
    text-align:center;
}

#ubicacion p{
    font-size:16px;
    margin:10px;
}

#ubicacion a{
    display:inline-block;
    margin:10px;
    padding:10px 20px;
    background-color:#c62828;
    color:white;
    text-decoration:none;
    border-radius:6px;
}

#ubicacion a:hover{
    background-color:#b71c1c;
}

/* Tabla */
table{
    margin:20px auto;
    border-collapse:collapse;
    width:350px;
}

th{
    background-color:#c62828;
    color:white;
    padding:10px;
}

td{
    padding:10px;
    text-align:center;
}

table, th, td{
    border:1px solid #ccc;
}

/* Imagen */
#ubicacion img{
    width:350px;
    border-radius:10px;
    margin:15px;
    cursor:pointer;
    box-shadow:0px 4px 10px rgba(0,0,0,0.2);
    display:block;
    margin:auto;
}

#ubicacion img:hover{
    transform:scale(1.05);
    transition:0.3s;
}

/* ========================= */
/* POSICIONAMIENTOS */
/* ========================= */

/* RELATIVO */
.relativo{
    position: relative;
    top: 10px;
    left: 10px;
    background-color: #ffcdd2;
    padding:10px;
}

/* ABSOLUTO (debe ir dentro de un contenedor relativo) */
.contenedor{
    position: relative;
    height:150px;
    background:#ffeaea;
}

.absoluto{
    position: absolute;
    top: 10px;
    right: 10px;
    background-color:#ef5350;
    color:white;
    padding:10px;
}

/* FIJO (permanece en pantalla) */
.fijo{
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color:#c62828;
    color:white;
    padding:10px;
    border-radius:8px;
}

/* STICKY (se pega al hacer scroll) */
.sticky{
    position: sticky;
    top: 0;
    background-color:#b71c1c;
    color:white;
    padding:10px;
}

/* FLOTANTE */
.flotante{
    float:left;
    margin-right:20px;
    margin-bottom:10px;
    background:none;
    padding:0;
}

/* IMAGEN DEL PASTEL */
.img-pastel{
    width:180px;
    height:auto;
    border-radius:10px;
    box-shadow:0px 4px 10px rgba(0,0,0,0.2);
}

/* SECCIÓN QUIÉNES SOMOS */
.quienes-somos{
    overflow:hidden;
}

.quienes-somos ul{
    list-style-position:inside;
}