/* -----------------------------------------------------------
   ESTILOS GENERALES Y TIPOGRAFÍA
   ----------------------------------------------------------- */
@font-face { 
    font-family: 'Gelica'; 
    src: local('Gelica'); 
}

:root { 
    --vino-corp: #4e0404; 
    --vino-claro: #7a0c0c; 
    --beige-caja: #efe2d6; 
    --texto-cafe: #74341c; 
    --blanco: #ffffff;
    --gris-fondo: #f9f9f9;
}

body { 
    margin: 0; 
    font-family: 'Gelica', 'Segoe UI', serif; 
    background-color: var(--blanco); 
    color: #333; 
    overflow-x: hidden; 
}

/* -----------------------------------------------------------
   1️⃣ TOP SOCIAL & 2️⃣ HEADER
   ----------------------------------------------------------- */
.top-social { 
    padding: 5px 60px; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    background: #fff;
}

.follow-text { font-weight: bold; font-size: 14px; margin-right: 15px; }

.social-icons img { 
    height: 18px; 
    margin-left: 10px; 
    transition: 0.3s; 
}

.main-header { 
    background: var(--vino-corp); 
    color: #fff; 
    padding: 12px 60px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.main-nav a { 
    color: #fff; 
    text-decoration: none; 
    margin-left: 20px; 
    font-size: 13px; 
    transition: 0.3s;
}

.main-nav a:hover { opacity: 0.7; }

/* -----------------------------------------------------------
   3️⃣ HERO / CARRUSEL (CON LOGO FIX)
   ----------------------------------------------------------- */
.hero-container { 
    background: linear-gradient(135deg, #d4a017 0%, #800080 40%, #008080 100%); 
    padding: 20px 0; 
    display: flex; 
    justify-content: center; 
}

.hero { 
    position: relative; 
    width: 92%; 
    max-width: 1100px; 
    height: 500px; 
    border-radius: 12px; 
    overflow: hidden; 
}

/* El Logo ahora siempre visible sobre el carrusel */
.hero-logo { 
    position: absolute; 
    top: 25px; 
    right: 35px; 
    width: 125px; 
    z-index: 20; 
}

.hero-logo img { 
    width: 100%; 
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); 
}

.slide { 
    position: absolute; 
    inset: 0; 
    background-size: cover; 
    background-position: center; 
    opacity: 0; 
    transition: opacity 1.5s ease-in-out; 
}

.slide.active { 
    opacity: 1; 
    animation: kenburns 8s forwards; 
}

@keyframes kenburns { 
    from { transform: scale(1); } 
    to { transform: scale(1.08); } 
}

.hero-text { 
    position: absolute; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 10; 
    background: rgba(0,0,0,0.1); 
}

.hero-text h1 { 
    font-size: 70px; 
    color: #fff; 
    font-weight: 800; 
    text-shadow: 2px 2px 15px rgba(0,0,0,0.4); 
    margin: 0; 
}

.carousel-capsules { 
    position: absolute; 
    bottom: 25px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 10px; 
    z-index: 20; 
}

.capsule { 
    width: 35px; 
    height: 5px; 
    background: rgba(255,255,255,0.4); 
    border-radius: 10px; 
    cursor: pointer; 
}

.capsule.active { 
    background: #fff; 
    width: 55px; 
}

/* -----------------------------------------------------------
   4️⃣ BIENVENIDA
   ----------------------------------------------------------- */
.bienvenida { padding: 35px 60px; font-size: 22px; }
.text-accent { color: var(--texto-cafe); font-weight: 800; }
.divider { color: var(--texto-cafe); margin: 0 10px; opacity: 0.5; }

/* -----------------------------------------------------------
   5️⃣ CAJAS DE MENÚ (TAMAÑO Y ALINEACIÓN)
   ----------------------------------------------------------- */
.menu-cajas { 
    padding: 0 60px 50px; 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 18px; 
    max-width: 1150px; 
    margin: 0 auto; 
}

.caja { 
    background: var(--beige-caja); 
    border-radius: 10px; 
    padding: 20px 10px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    color: var(--texto-cafe); 
    transition: 0.3s;
    height: 110px; /* Tamaño controlado */
}

.caja:hover { 
    transform: translateY(-5px); 
    background: #fdf6f0; 
    box-shadow: 0 8px 20px rgba(116, 52, 28, 0.15); 
}

.caja img { 
    width: 42px; 
    margin-bottom: 8px; 
    display: block;
}

/* Fix específico para que la caja de Proyectos se vea centrada */
.img-proyectos { 
    width: 32px !important; 
    margin-left: auto;
    margin-right: auto;
}

.caja-title { 
    font-weight: bold; 
    font-size: 15px; 
    text-align: center; 
}

.visita { background: var(--vino-claro); color: #fff; }
.visita-main { font-size: 32px; font-weight: 900; line-height: 1; }
.visita-sub { font-size: 11px; }
.soon-text { font-size: 10px; opacity: 0.7; font-weight: normal; }

/* -----------------------------------------------------------
   6️⃣ EMERGENCIAS (FONDO IGUALADO Y BOTONES GRIS/VINO)
   ----------------------------------------------------------- */
.emergencias-section { 
    background: var(--blanco); /* Fondo igualado a las cajas de arriba */
    padding: 40px 60px 70px; 
    text-align: center; 
}

.emergencias-title { 
    font-size: 28px; 
    font-weight: 800; 
    margin-bottom: 35px; 
    color: var(--texto-cafe);
}

.emergencias-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    max-width: 1100px; 
    margin: 0 auto; 
}

.card-emergencia { 
    background: #f2f2f2; /* Gris claro para el "botón" */
    padding: 25px 15px; 
    border-radius: 12px; 
    display: flex; 
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center; 
    justify-content: center;
    gap: 15px; 
    text-decoration: none; 
    border: none; /* Quitamos borde para que se vea como botón sólido */
    transition: 0.3s ease;
}

.card-emergencia:hover { 
    transform: translateY(-5px); 
    background: #e8e8e8; /* Un gris apenas más oscuro al pasar el mouse */
    box-shadow: 0 8px 15px rgba(0,0,0,0.05);
}

.img-emergencia {
    width: 45px; /* Tamaño similar a los iconos de arriba */
    height: auto;
}

.card-emergencia .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.card-emergencia .label { 
    font-size: 16px; 
    color: var(--vino-corp); /* Letras Rojo Vino */
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-emergencia .number { 
    font-weight: 800; 
    color: var(--vino-corp); /* Números Rojo Vino */
    font-size: 18px; 
}

/* -----------------------------------------------------------
   7️⃣ SECCIÓN MAPA RESTAURADA
   ----------------------------------------------------------- */
.mapa-section { 
    padding: 70px 60px; 
    text-align: center; 
    background: #fff;
}

.mapa-title { 
    font-size: 28px; 
    font-weight: 800; 
    margin-bottom: 40px; 
}

.map-wrapper { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 350px 1fr; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

.map-info { 
    background: var(--beige-caja); 
    padding: 40px; 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    justify-content: center;
}

.info-item { display: flex; gap: 12px; align-items: flex-start; }
.info-icon { font-size: 18px; }

.map-info p { 
    margin: 0; 
    font-size: 14px; 
    color: var(--texto-cafe); 
    line-height: 1.4; 
}

.btn-ruta { 
    background: var(--vino-corp); 
    color: #fff; 
    padding: 12px; 
    border-radius: 6px; 
    text-decoration: none; 
    text-align: center; 
    font-weight: bold; 
    margin-top: 10px; 
    transition: 0.3s; 
}

.btn-ruta:hover { 
    background: var(--vino-claro); 
    transform: translateY(-2px);
}

.map-container { 
    height: 450px; 
    width: 100%;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* -----------------------------------------------------------
   8️⃣ FOOTER
   ----------------------------------------------------------- */
.main-footer { 
    background: var(--vino-corp); 
    color: #fff; 
    text-align: center; 
    padding: 25px; 
    font-size: 14px; 
}

/* -----------------------------------------------------------
   RESPONSIVE (TABLETS Y MÓVILES)
   ----------------------------------------------------------- */
@media (max-width: 900px) {
    .map-wrapper { grid-template-columns: 1fr; }
    .map-container { height: 300px; }
    .menu-cajas, .emergencias-grid { grid-template-columns: repeat(2, 1fr); }
    .main-header { flex-direction: column; gap: 10px; padding: 20px; }
    .hero-text h1 { font-size: 40px; }
}
/* Estilos para los nuevos iconos en la sección de mapa */
.info-item-new {
    display: flex;
    gap: 15px;
    align-items: center; /* Centra el icono verticalmente con el bloque de texto */
    margin-bottom: 5px;
}

.map-icon-img {
    width: 40px;  /* Tamaño similar a los de emergencias */
    height: 40px;
    object-fit: contain;
    /* Si tus imágenes no tienen el fondo gris integrado, descomenta la línea de abajo: */
    /* background-color: #f2f2f2; border-radius: 8px; padding: 5px; */
}

.info-item-new p {
    margin: 0;
    font-size: 14px;
    color: var(--texto-cafe);
    line-height: 1.4;
}

.info-item-new strong {
    color: var(--vino-corp); /* Usamos tu variable de rojo vino */
}