: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:#89B690;

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;

}

}