/*
════════════════════════════════════════════════════════════
════════════════════════════════════════════════════════════
*/
/* ── 1. VARIABLES GLOBALES ─────────────────────────────────
:root es el elemento raíz del documento (equivale a ).
Las variables CSS se declaran con -- y se usan con var(). */
:root {
--color-fondo: #0e0b07;
--color-crema: #f5efe6;
--color-dorado: #c9973a;
--color-dorado-claro: #e8c06a;
--color-seccion: #18140e;
--color-linea: #3a2e1e;
--fuente-titulo: 'Playfair Display', serif;
--fuente-texto: 'Lato', sans-serif;
}
/* ── 2. RESET ──────────────────────────────────────────────*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ── 3. BODY ───────────────────────────────────────────────*/
body {
background-color: var(--color-fondo);
color: var(--color-crema);
font-family: var(--fuente-texto);
font-weight: 300;
line-height: 1.7;
scroll-behavior: smooth;
}
/* ── 4. NAVEGACIÓN ─────────────────────────────────────────
position: fixed → se queda pegada arriba al hacer scroll
z-index: 1000 → se dibuja por encima de todo lo demás */
nav {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(14, 11, 7, 0.97);
border-bottom: 1px solid var(--color-linea);
z-index: 1000;
padding: 0 5%;
}
.nav-contenedor {
display: flex; /* activa Flexbox */
justify-content: space-between; /* logo a la izq, menú a la der */
align-items: center; /* centra verticalmente */
height: 70px;
}
.nav-logo {
font-family: var(--fuente-titulo);
font-size: 1.8rem;
color: var(--color-dorado);
text-decoration: none;
letter-spacing: 4px;
}
.nav-menu{
display:flex;
align-items:center;
list-style:none;
gap:35px;
}
/* Todos los dentro del menú */
.nav-menu a {
text-decoration: none;
color: var(--color-crema);
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: color 0.3s, border-color 0.3s;
}
/* Al pasar el ratón */
.nav-menu a:hover {
color: var(--color-dorado);
}
/* Clase "activo" → se añade al enlace de la página actual
para que el usuario sepa en qué sección está. */
.nav-menu a.activo {
color: var(--color-dorado);
border-bottom-color: var(--color-dorado); /* línea dorada debajo */
}
/* ── 5. ESTILOS DE SECCIÓN GENERAL ────────────────────────*/
section, .pagina-contenido {
padding: 100px 5% 80px; /* arriba | lados | abajo */
}
.seccion-oscura { background-color: var(--color-fondo); }
.seccion-media { background-color: var(--color-seccion); }
/* Cabecera reutilizable para cada sección/página */
.seccion-cabecera {
text-align: center;
margin-bottom: 60px;
}
.etiqueta {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--color-dorado);
margin-bottom: 15px;
}
.titulo-seccion {
font-family: var(--fuente-titulo);
font-size: 2.5rem;
color: var(--color-crema);
margin-bottom: 15px;
}
/* Línea decorativa dorada centrada */
.linea-decorativa {
width: 50px;
height: 1px;
background-color: var(--color-dorado);
margin: 0 auto;
}
.texto-intro {
max-width: 550px;
margin: 20px auto 0;
text-align: center;
color: rgba(245,239,230,0.7);
font-size: 1rem;
}
/* ── 6. BOTONES ────────────────────────────────────────────*/
.btn-principal {
display: inline-block;
padding: 13px 38px;
border: 1px solid var(--color-dorado);
color: var(--color-dorado);
text-decoration: none;
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
transition: all 0.3s;
}
.btn-principal:hover {
background-color: var(--color-dorado);
color: var(--color-fondo);
}
.btn-enviar {
width: 100%;
padding: 14px;
background-color: var(--color-dorado);
color: var(--color-fondo);
border: none;
font-family: var(--fuente-texto);
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-enviar:hover {
background-color: var(--color-dorado-claro);
}
/* ── 7. FORMULARIO ─────────────────────────────────────────*/
.formulario {
display: flex;
flex-direction: column; /* apila los campos verticalmente */
gap: 15px;
}
.formulario input,
.formulario textarea,
.formulario select {
background-color: #1a1410;
border: 1px solid var(--color-linea);
color: var(--color-crema);
padding: 13px 17px;
font-family: var(--fuente-texto);
font-size: 0.9rem;
outline: none; /* quita el borde azul del navegador */
transition: border-color 0.3s;
width: 100%;
}
/* Al hacer clic (focus) en el campo */
.formulario input:focus,
.formulario textarea:focus,
.formulario select:focus {
border-color: var(--color-dorado);
}
.formulario select option {
background-color: #1a1410;
}
.formulario textarea {
height: 110px;
resize: vertical; /* solo se puede redimensionar ↕ */
}
/* ── 9. RESPONSIVE (celulares ≤ 768px) ─────────────────────
@media aplica estos estilos SOLO cuando la pantalla
sea de 768 píxeles o menos. */
@media (max-width: 768px) {
.nav-menu { display: none; } /* ocultamos menú en móvil (simplificado) */
.titulo-seccion { font-size: 2rem; }
.hero-titulo { font-size: 3rem !important; }
/* Grillas de 2 columnas → 1 columna */
.nosotros-grid,
.contacto-grid,
.menu-grid,
.servicios-grid {
grid-template-columns: 1fr !important;
}
}
.grid-platos{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1400px;
margin:60px auto;
}
.plato-card{
background:#111;
border:1px solid #7b5b1d;
border-radius:10px;
overflow:hidden;
text-align:center;
transition:.4s;
}
.plato-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 40px rgba(212,175,55,.25);
}
.plato-card img{
width:100%;
height:420px;
object-fit:cover;
display:block;
}
.plato-card h3{
color:#d4af37;
font-family:'Playfair Display',serif;
font-size:34px;
margin:30px 0 15px;
}
.plato-card p{
color:#d9d9d9;
font-size:18px;
line-height:1.8;
padding:0 25px 35px;
}
.plato-fila{
display: grid;
grid-template-columns: 160px 1fr 120px;
align-items: center;
gap: 25px;
padding: 25px 0;
border-bottom: 1px dashed var(--color-linea);
}
.plato-imagen{
width: 155px;
height: 110px;
object-fit: cover;
border-radius: 12px;
flex-shrink: 0;
display: block;
}
.plato-imagen:hover{
transform:scale(1.05);
}
.plato-nombre{
display: block;
font-size: 2rem;
margin-bottom: 5px;
font-family: var(--fuente-titulo);
color: #fff;
}
.plato-descripcion{
color: #a8a8a8;
line-height: 1.5;
margin: 0;
}
.plato-info{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 110px; /* Igual que la altura de la imagen */
}
.plato-precio{
min-width: 120px;
text-align: right;
font-size: 2rem;
color: var(--color-dorado);
font-family: var(--fuente-titulo);
}
.decoracion-titulo{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:25px;
}
.decoracion-titulo span{
width:180px;
height:2px;
background:#c79a3b;
}
.decoracion-titulo i{
color:#c79a3b;
font-size:40px;
font-style:normal;
}
.linea-plato{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin:18px 0;
}
.linea-plato span{
width:90px;
height:1px;
background:#c79a3b;
}
.linea-plato i{
color:#c79a3b;
font-size:18px;
font-style:normal;
}
.seccion-cabecera{
text-align:center;
margin-bottom:70px;
}
.etiqueta{
display:block;
color:#c79a3b;
font-size:14px;
letter-spacing:6px;
text-transform:uppercase;
margin-bottom:15px;
font-weight:600;
}
.titulo-seccion{
font-family:'Playfair Display',serif;
font-size:25px;
color:#f5efe6;
margin-bottom:25px;
font-weight:700;
}
.adorno-titulo{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
}
.adorno-titulo .linea{
width:170px;
height:1px;
background:#c79a3b;
opacity:.8;
}
.rombo{
width:14px;
height:14px;
border:2px solid #c79a3b;
transform:rotate(45deg);
}
/*==========================
CABECERA ESPECIALIDADES
==========================*/
.seccion-cabecera{
text-align:center;
margin-bottom:70px;
}
.etiqueta{
display:block;
color:#c89b3c;
letter-spacing:8px;
text-transform:uppercase;
font-size:18px;
font-weight:600;
margin-bottom:18px;
}
.titulo-seccion{
font-family:'Playfair Display',serif;
font-size:45px;
color:#f4efe6;
margin-bottom:30px;
font-weight:700;
}
.adorno{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
}
.linea{
width:180px;
height:1px;
background:#c89b3c;
}
/* FLOR CENTRAL */
.flor{
width:26px;
height:26px;
position:relative;
transform:rotate(45deg);
}
.flor span{
position:absolute;
width:10px;
height:10px;
background:#c89b3c;
}
.flor span:nth-child(1){
top:0;
left:8px;
}
.flor span:nth-child(2){
right:0;
top:8px;
}
.flor span:nth-child(3){
bottom:0;
left:8px;
}
.flor span:nth-child(4){
left:0;
top:8px;
}
/*==========================
TESTIMONIOS
==========================*/
.testimonios{
padding:120px 8%;
background:#0f0f0f;
}
.contenedor-testimonios{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
margin-top:70px;
}
.card-testimonio{
background:#171717;
border:1px solid rgba(201,155,60,.35);
border-radius:12px;
padding:45px 35px;
text-align:center;
transition:.4s;
}
.card-testimonio:hover{
transform:translateY(-12px);
border-color:#c89b3c;
box-shadow:0 15px 35px rgba(0,0,0,.45);
}
.comillas{
color:#c89b3c;
font-size:70px;
line-height:1;
margin-bottom:15px;
font-family:Georgia, serif;
}
.card-testimonio p{
color:#d9d9d9;
line-height:1.9;
font-size:16px;
margin-bottom:30px;
}
.estrellas{
color:#c89b3c;
font-size:22px;
letter-spacing:5px;
margin-bottom:20px;
}
.card-testimonio h3{
color:white;
font-size:20px;
font-family:'Playfair Display', serif;
}
.ver-mas-opiniones{
display:flex;
justify-content:center;
margin-top:60px;
}
.btn-opiniones{
display:inline-flex;
align-items:center;
gap:15px;
padding:18px 35px;
color:#c89b3c;
border:1px solid #c89b3c;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
transition:.3s;
}
.btn-opiniones:hover{
background:#c89b3c;
color:#111;
}
.flecha{
font-size:24px;
transition:.3s;
}
.btn-opiniones:hover .flecha{
transform:translateX(8px);
}
.cliente{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin-top:25px;
}
.cliente img{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
border:3px solid #c89b3c;
flex-shrink:0;
margin-top:-15px;
}
.info-cliente{
text-align:center;
}
.info-cliente h3{
margin:0;
color:#ffffff;
font-family:'Playfair Display', serif;
font-size:26px;
}
.info-cliente span{
display:block;
margin-top:6px;
color:#c89b3c;
text-transform:uppercase;
letter-spacing:2px;
font-size:13px;
}
/*==========================
CHEF PRINCIPAL
==========================*/
.chef-principal{
width:80%;
margin:120px auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;
}
.chef-imagen{
flex:1;
}
.chef-imagen img{
width:100%;
border-radius:25px;
display:block;
box-shadow:0 20px 45px rgba(0,0,0,.4);
}
.chef-info{
flex:1;
}
.chef-info h2{
font-family:var(--fuente-titulo);
color:var(--color-crema);
font-size:2.5rem;
margin:20px 0;
}
.linea-chef{
width:90px;
height:3px;
background:var(--color-dorado);
margin-bottom:25px;
text-align: justify;
}
.chef-info p{
color:rgba(245,239,230,.75);
line-height:1.9;
margin-bottom:45px;
text-align: justify;
}
.chef-datos{
display:flex;
gap:60px;
margin-bottom:80px;
}
.chef-datos div{
display:flex;
flex-direction:column;
}
.chef-datos strong{
color:var(--color-dorado);
font-size:3rem;
font-family:var(--fuente-titulo);
}
.chef-datos span{
color:rgba(245,239,230,.65);
font-size:.95rem;
}
.estadisticas{
width:100%;
padding:120px 8%;
background:#15120f;
}
.subtitulo-estadisticas{
text-align: center;
color:rgba(245,239,230,.65);
margin-top:15px;
margin-bottom:70px;
font-size:1rem;
}
.estadisticas-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
.estadistica-card{
background:#1b1714;
border:1px solid rgba(196,158,92,.35);
border-radius:18px;
padding:45px 30px;
text-align:center;
transition:.4s;
position:relative;
overflow:hidden;
}
.estadistica-card:hover{
transform:translateY(-10px);
border-color:var(--color-dorado);
box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.icono{
width:95px;
height:95px;
border:2px solid var(--color-dorado);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
margin-bottom:30px;
}
.icono i{
color:var(--color-dorado);
font-size:2.8rem;
transition:.4s;
}
.estadistica-card:hover .icono{
background:var(--color-dorado);
}
.estadistica-card:hover .icono i{
color:#111;
transform:scale(1.15);
}
}
.estadistica-card:hover .icono{
background:var(--color-dorado);
}
.estadistica-card:hover .icono i{
color:#111;
transform:scale(1.15);
}
}
.estadistica-card h2{
font-size:4rem;
font-family:var(--fuente-titulo);
color:var(--color-crema);
margin-bottom:10px;
}
.estadistica-card h3{
color:white;
text-transform:uppercase;
font-size:1rem;
letter-spacing:2px;
margin-bottom:18px;
}
.estadistica-card p{
color:rgba(245,239,230,.65);
line-height:1.8;
}
.estadistica-card::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:80px;
height:3px;
background:var(--color-dorado);
box-shadow:0 0 18px var(--color-dorado);
}
.estadistica-card::after{
content:"";
position:absolute;
top:-120px;
left:-120px;
width:250px;
height:250px;
background:rgba(201,167,92,.12);
border-radius:50%;
transition:.6s;
opacity:0;
}
.estadistica-card:hover::after{
opacity:1;
top:-60px;
left:-60px;
}
.estadistica-card{
opacity:0;
transform:translateY(50px);
animation:aparecer .8s forwards;
}
.estadistica-card:nth-child(2){
animation-delay:.2s;
}
.estadistica-card:nth-child(3){
animation-delay:.4s;
}
.estadistica-card:nth-child(4){
animation-delay:.6s;
}
@keyframes aparecer{
to{
opacity:1;
transform:translateY(0);
}
}
/*=====================================
GALERÍA CLIENTES
======================================*/
.galeria-clientes{
width:100%;
padding:120px 8%;
background:#0f0d0b;
}
.subtitulo-galeria{
text-align:center;
color:rgba(245,239,230,.65);
margin-top:20px;
margin-bottom:60px;
}
.grid-galeria{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:250px;
gap:20px;
}
}
.foto{
position:relative;
overflow:hidden;
border-radius:18px;
cursor:pointer;
}
.foto img{
width:100%;
height:320px;
object-fit:cover;
display:block;
transition:.6s;
}
.overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(0,0,0,.75),
rgba(0,0,0,.15));
display:flex;
justify-content:flex-end;
align-items:center;
flex-direction:column;
opacity:0;
transition:.5s;
padding-bottom:30px;
}
.overlay h3{
color:white;
font-family:var(--fuente-titulo);
font-size:1.3rem;
transform:translateY(25px);
transition:.5s;
}
.foto:hover img{
transform:scale(1.12);
}
.foto:hover .overlay{
opacity:1;
}
.foto:hover .overlay h3{
transform:translateY(0);
}
.foto:hover{
box-shadow:0 15px 40px rgba(201,167,92,.25);
}
/*==============================
ANIMACIÓN GALERÍA
==============================*/
.foto{
opacity:0;
transform:translateY(60px);
animation:mostrarGaleria .8s forwards;
}
.foto:nth-child(2){
animation-delay:.15s;
}
.foto:nth-child(3){
animation-delay:.30s;
}
.foto:nth-child(4){
animation-delay:.45s;
}
.foto:nth-child(5){
animation-delay:.60s;
}
.foto:nth-child(6){
animation-delay:.75s;
}
@keyframes mostrarGaleria{
to{
opacity:1;
transform:translateY(0);
}
}
.foto::before{
content:"";
position:absolute;
inset:0;
border:2px solid var(--color-dorado);
opacity:0;
transition:.4s;
border-radius:18px;
z-index:3;
}
.foto:hover::before{
opacity:1;
}
/*==============================
LIGHTBOX
==============================*/
.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.92);
display:flex;
justify-content:center;
align-items:center;
visibility:hidden;
opacity:0;
transition:.4s;
z-index:9999;
}
.lightbox img{
max-width:85%;
max-height:85%;
border-radius:15px;
box-shadow:0 0 40px rgba(0,0,0,.7);
}
.lightbox span{
position:absolute;
top:35px;
right:45px;
font-size:45px;
color:white;
cursor:pointer;
}
.lightbox.active{
visibility:visible;
opacity:1;
}
.foto1{
grid-column:span 2;
grid-row:span 2;
}
.foto2{
grid-row:span 2;
}
.foto3{
grid-row:span 1;
}
.foto4{
grid-column:span 2;
}
.foto5{
grid-row:span 1;
}
.foto6{
grid-column:span 2;
}
.foto{
position:relative;
overflow:hidden;
border-radius:18px;
}
.foto img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}
@media(max-width:992px){
.grid-galeria{
grid-template-columns:repeat(2,1fr);
}
.foto1,
.foto2,
.foto4,
.foto6{
grid-column:span 1;
grid-row:span 1;
}
}
@media(max-width:768px){
.grid-galeria{
grid-template-columns:1fr;
}
.foto{
height:300px;
}
}
/*=====================================
RESERVA
======================================*/
.reserva{
width:100%;
min-height:500px;
background:
linear-gradient(rgba(0,0,0,.65),
rgba(0,0,0,.65)),
url("../imagenes/instalaciones/fondo.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:100px 8%;
}
.reserva-contenido{
max-width:850px;
}
.reserva h2{
font-family:var(--fuente-titulo);
color:var(--color-crema);
font-size:2.5rem;
margin:25px 0;
}
.reserva p{
color:rgba(245,239,230,.82);
font-size:1.1rem;
line-height:2;
margin-bottom:40px;
}
.btn-reserva{
display:inline-flex;
align-items:center;
gap:12px;
padding:18px 45px;
border:2px solid var(--color-dorado);
color:var(--color-crema);
text-decoration:none;
border-radius:50px;
transition:.4s;
font-weight:600;
letter-spacing:1px;
font-size:1rem;
}
.btn-reserva i{
font-size:1.2rem;
}
.btn-reserva:hover{
background:var(--color-dorado);
color:#111;
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(199,165,90,.4);
}
.reserva-contenido{
animation:subir 1s ease;
}
@keyframes subir{
from{
opacity:0;
transform:translateY(50px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.footer{
background:#0b0907;
border-top:1px solid rgba(201,167,92,.2);
margin-top:80px;
}
.footer-contenido{
padding:70px 20px 50px;
text-align:center;
}
.footer-contenido h2{
font-family:var(--fuente-titulo);
font-size:2.8rem;
color:var(--color-dorado);
margin-bottom:18px;
}
.footer-contenido p{
color:rgba(245,239,230,.70);
font-size:1rem;
margin-bottom:35px;
}
.redes{
display:flex;
justify-content:center;
gap:20px;
}
.redes a{
width:50px;
height:50px;
border:1px solid rgba(201,167,92,.35);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:var(--color-crema);
text-decoration:none;
transition:.4s;
font-size:1.2rem;
}
.redes a:hover{
background:var(--color-dorado);
color:#111;
transform:translateY(-5px);
}
.footer-copy{
border-top:1px solid rgba(201,167,92,.15);
padding:20px;
text-align:center;
color:rgba(245,239,230,.55);
font-size:.9rem;
}
/*=====================================
WHATSAPP
======================================*/
.whatsapp{
position:fixed;
right:30px;
bottom:30px;
width:50px;
height:50px;
background:#25D366;
color:white;
border-radius:70%;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
font-size:1.5rem;
box-shadow:0 10px 25px rgba(0,0,0,.35);
transition:.4s;
z-index:999;
}
.whatsapp:hover{
transform:scale(1.12);
box-shadow:0 15px 35px rgba(37,211,102,.5);
}
/*=====================================
VOLVER ARRIBA
======================================*/
#subir{
position:fixed;
right:30px;
bottom:105px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:var(--color-dorado);
color:#111;
font-size:1.2rem;
cursor:pointer;
display:none;
justify-content:center;
align-items:center;
box-shadow:0 10px 25px rgba(0,0,0,.35);
transition:.4s;
z-index:998;
}
#subir:hover{
transform:translateY(-6px);
background:#d8b36a;
}
.horario-tabla tr:last-child{
border-bottom:none;
}
/*======== TÍTULO HORARIOS ========*/
.titulo-horarios{
font-family: var(--fuente-titulo);
font-size: 42px;
color: #caa25d;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 auto 40px;
display: block;
width: 100%;
position: relative;
}
.titulo-horarios::after{
content:"";
display:block;
width:180px;
height:2px;
background:#caa25d;
margin:15px auto 0;
}
/*======== TÍTULO HORARIOS ========*/
.titulo-horarios{
font-family: var(--fuente-titulo);
font-size: 42px;
color: #caa25d;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 40px;
position: relative;
}
.titulo-horarios::after{
content:"";
display:block;
width:180px;
height:2px;
background:#caa25d;
margin:18px auto 0;
}
.titulo-horarios::before{
content:"✦";
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
background:#111;
color:#caa25d;
padding:0 12px;
font-size:20px;
}
/*=========================
UBICACIÓN
==========================*/
.ubicacion{
padding:90px 8%;
background:#111;
}
.ubicacion-contenedor{
display:grid;
grid-template-columns:40% 60%;
gap:50px;
align-items:center;
}
.texto-ubicacion p{
color: #bdbdbd;
line-height: 2.8;
margin-top: 20px;
text-align: justify;
}
.datos-ubicacion{
margin-top:35px;
}
.datos-ubicacion p{
margin-bottom:20px;
color:white;
}
.datos-ubicacion strong{
color:#caa25d;
}
.contenedor-mapa{
border-radius:18px;
overflow:hidden;
border:2px solid #caa25d;
box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.contenedor-mapa iframe{
width:100%;
height:420px;
border:none;
filter:grayscale(100%) invert(92%) brightness(80%);
}
.horarios-box{
margin-top:40px;
padding:35px;
background:#16110d;
border:1px solid rgba(212,167,61,.35);
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.horarios-titulo{
font-family:var(--fuente-titulo);
font-size:2rem;
color:var(--color-crema);
text-align:center;
margin-bottom:30px;
letter-spacing:2px;
}
.horarios-titulo i{
color:var(--color-dorado);
margin-right:12px;
font-size:1.8rem;
}
.horario-tabla{
width:100%;
border-collapse:collapse;
}
.horario-tabla tr{
transition:.3s;
}
.horario-tabla tr:hover{
background:rgba(212,167,61,.08);
}
.horario-tabla td{
padding:18px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.horario-tabla td:first-child{
color:var(--color-crema);
font-size:1.05rem;
font-weight:500;
}
.horario-tabla td:last-child{
text-align:right;
color:var(--color-dorado);
font-weight:bold;
letter-spacing:1px;
}
.horario-tabla tr:last-child td{
border-bottom:none;
}
/*==============================
BOTÓN ACCEDER
==============================*/
.btn-acceso{
display:inline-flex;
align-items:center;
justify-content:center;
height:45px;
padding:0 18px;
gap:10px;
background: #8C6A3F;
color:#fff !important;
border-radius:70px;
text-decoration:none;
font-weight:600;
letter-spacing:2px;
transition:.3s;
}
.btn-acceso:hover{
background: #A67C52;
color:#111 !important;
transform:translateY(-2px);
}
.btn-acceso i{
font-size:18px;
line-height:1;
}
}