:root{
/* ================================================= */
/* COLORES GENERALES */
/* ================================================= */
--card-bg:#89B690;
--title-color:#FCFDFC;
--subtitle-color:#FCFDFC;
--text-color:#FCFDFC;
--tag-bg:#DEFFD5;
--tag-text:#002A6C;
--button-bg:#FCFDFC;
--button-hover:#C0E0E5;
--button-text:#89B690;
/* ================================================= */
/* CONTENEDOR MAPA */
/* ================================================= */
--map-height:620px;
--map-radius:36px;
--map-shadow:
0 30px 80px rgba(0,0,0,.12);
--map-filter:
saturate(.95)
contrast(1.03);
/* ================================================= */
/* TARJETA */
/* ================================================= */
--card-width:340px;
--card-padding:36px;
--card-radius:30px;
--card-blur:18px;
--card-shadow:
0 18px 45px rgba(0,0,0,.10);
/* ================================================= */
/* ETIQUETA */
/* ================================================= */
--tag-radius:999px;
/* ================================================= */
/* BOTÓN */
/* ================================================= */
--button-radius:18px;
/* ================================================= */
/* EFECTOS */
/* ================================================= */
--card-hover-x:-8px;
--transition:.45s ease;
/* ================================================= */
/* POSICIONAMIENTO */
/* ================================================= */
--card-top:50%;
--card-right:40px;
}
/* ================================================= */
/* CONTENEDOR GENERAL */
/* ================================================= */
.map-wrapper{
position:relative;
width:100%;
height:var(--map-height);
overflow:hidden;
border-radius:var(--map-radius);
box-shadow:var(--map-shadow);
}
/* ================================================= */
/* MAPA */
/* ================================================= */
.map-wrapper iframe{
width:100%;
height:100%;
border:none;
filter:var(--map-filter);
}
/* ================================================= */
/* TARJETA */
/* ================================================= */
.map-card{
position:absolute;
top:var(--card-top);
right:var(--card-right);
transform:translateY(-50%);
width:var(--card-width);
padding:var(--card-padding);
background:var(--card-bg);
backdrop-filter:
blur(var(--card-blur));
border-radius:var(--card-radius);
box-shadow:var(--card-shadow);
transition:var(--transition);
z-index:5;
}
/* ================================================= */
/* HOVER TARJETA */
/* ================================================= */
.map-wrapper:hover .map-card{
transform:
translateY(-50%)
translateX(var(--card-hover-x));
}
/* ================================================= */
/* ETIQUETA */
/* ================================================= */
.tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:var(--tag-radius);
background:var(--tag-bg);
color:var(--tag-text);
font-size:13px;
font-weight:700;
margin-bottom:20px;
}
/* ================================================= */
/* TITULO */
/* ================================================= */
.map-card h2{
margin:0;
font-size:42px;
font-weight:800;
line-height:1.1;
color:var(--title-color);
}
/* ================================================= */
/* SUBTITULO */
/* ================================================= */
.map-card p{
margin:10px 0 28px;
line-height:1.6;
font-size:15px;
color:var(--subtitle-color);
}
/* ================================================= */
/* INFORMACIÓN */
/* ================================================= */
.map-info{
margin-bottom:18px;
line-height:1.8;
font-size:14px;
color:var(--text-color);
}
/* ================================================= */
/* BOTÓN */
/* ================================================= */
.map-btn{
display:flex;
align-items:center;
justify-content:center;
width:80%;
max-width:260px;
margin:0 auto;
padding:18px 24px;
text-decoration:none;
font-weight:700;
font-size:15px;
color:var(--button-text);
background:var(--button-bg);
border-radius:var(--button-radius);
transition:var(--transition);
}
.map-btn:hover{
background:var(--button-hover);
transform:translateY(-3px);
}
/* ================================================= */
/* ANIMACION SUAVE */
/* ================================================= */
.map-card{
animation:
floatCard 4s ease-in-out infinite;
}
@keyframes floatCard{
0%{
transform:
translateY(-50%);
}
50%{
transform:
translateY(calc(-50% - 6px));
}
100%{
transform:
translateY(-50%);
}
}
/* ================================================= */
/* RESPONSIVE TABLET */
/* ================================================= */
@media(max-width:900px){
.map-wrapper{
height:720px;
border-radius:28px;
}
/* TARJETA */
.map-card{
position:absolute;
left:14px;
right:14px;
bottom:14px;
top:auto;
width:auto;
padding:26px;
border-radius:28px 28px 22px 22px;
transform:none;
background:
rgba(202,195,174,.94);
backdrop-filter:
blur(22px);
animation:none;
}
/* DESACTIVAR HOVER */
.map-wrapper:hover .map-card{
transform:none;
}
/* TITULO */
.map-card h2{
font-size:34px;
line-height:1.1;
}
/* TEXTO */
.map-card p{
font-size:15px;
margin-bottom:22px;
}
/* INFO */
.map-info{
font-size:14px;
margin-bottom:14px;
line-height:1.6;
}
/* BOTON */
.map-btn{
padding:18px;
font-size:15px;
border-radius:16px;
}
/* ETIQUETA */
.tag{
font-size:12px;
padding:8px 14px;
}
/* MAPA */
.map-wrapper iframe{
filter:
saturate(1)
contrast(1.02);
}
}
/* ================================================= */
/* RESPONSIVE CELULAR */
/* ================================================= */
@media(max-width:500px){
.map-wrapper{
height:640px;
border-radius:22px;
}
/* TARJETA */
.map-card{
left:10px;
right:10px;
bottom:10px;
padding:22px;
border-radius:24px;
}
/* TITULO */
.map-card h2{
font-size:28px;
}
/* SUBTITULO */
.map-card p{
font-size:14px;
}
/* INFO */
.map-info{
font-size:13px;
}
/* BOTÓN */
.map-btn{
padding:16px;
font-size:14px;
}
}