/*
Theme Name:     PTOS VENTA DV
Description:    Puntos de venta del periódico
Author:         El Diario Vasco
Version:        1.0.0
*/
@charset "utf-8";

/*--GENERALES--*/
:root {
  font-size:16px;
  --fontMax:clamp(3rem, 13vw, 8rem);
  --fontXXL:clamp(2.5rem, 10vw, 4.2rem);
  --fontXL:clamp(1.5rem, 4vw, 2.8rem);
  --fontL:clamp(1.2rem, 3.5vw, 1.8rem);
  --fontML:clamp(1rem, 2.5vw, 1.4rem);
  --fontM:clamp(0.95rem, 2.2vw, 1.2rem);
  --fontS:clamp(0.80rem, 1.9vw, 1rem);
  --fontXS:clamp(0.6rem, 0.7vw, 0.8rem);
  --colorPrimary: #171717;
  --colorSecondary: #154680;
  --colorInverse: #fff;
  --colorSpecial: #B30808;
  --widthContent: 85vw;	

}
@view-transition {
  navigation: auto;
  types: slide;
}
*{box-sizing: border-box}
html {scroll-behavior: smooth}
body{font:var(--fontM) "Raleway", Arial, sans-serif;font-weight:400;margin: 0;padding: 0;background: #fff;line-height:1.1;color:var(--colorPrimary)}
p{line-height:1.2;text-align: justify}
.destacado{color:var(--colorSecondary);font-weight: 800}
body>div,nav,footer{ width:100%}

.ptos-venta-dv,.ptos-venta-dv .content{width:100%;display: flex;flex-flow: column}
.ptos-venta-dv .content{display: flex;flex-flow: column}
.ptos-venta-dv .content.text{max-width: 1000px;margin: 60px auto 20px;text-align:center;padding:0 30px 10px}
.ptos-venta-dv .content.text header h1{position: relative;font-size:60px;font-weight: 900;display:inline-block;margin-left:-80px}
.ptos-venta-dv .content.text header h1 span{font:67px "Marck Script", cursive;color:var(--colorSecondary);letter-spacing: -0.03em;position: absolute;right:-84px;bottom:-49px;transform: rotate(-1deg);text-shadow:  2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff}
.ptos-venta-dv .content.text header p a{background-color: var(--colorSpecial);border-radius: 15px;padding:1px 10px 2px;color:var(--colorInverse);font-weight: 600;text-decoration: none;transition: all 0.2s ease-in-out;display: inline-block}
.ptos-venta-dv .content.text header p a:hover{background-color: #ff0000}


.ptos-venta-dv .content.map{height: 100%;min-height:500px;background: var(--colorSecondary) url("../img/fondo-bandera.png") no-repeat center -70px;color:var(--colorInverse);align-items: center;padding:160px 0 10px;position: relative;width:100%;}
.ptos-venta-dv .content.map::before{content: url("../img/copa-rey.png");position: absolute;right:15vw;top:100px;opacity: 0.2}
.ptos-venta-dv .content.map h2{font-size:var(--fontXL);font-weight: 700;margin:0;padding:0 20px}
.ptos-venta-dv .content.map p{font-size:var(--fontM);text-align: center;margin-bottom:30px;padding:0 20px}
.ptos-venta-dv .content.map .plano-ptos{display: flex;flex-flow: column;width:100%;position: relative;height:92vh}

/* filtros*/
.ptos-venta-dv .content.map .filters {display: flex;justify-content: center;gap:2px 10px; padding: 20px;flex-wrap: wrap;max-width:1100px;margin:0 auto;border-top: 1px solid #fff}
.ptos-venta-dv .content.map .filters label{font-size:var(--fontS);display: flex;align-items: center;gap:5px}
.ptos-venta-dv .content.map .filters label input[type="checkbox"]{cursor: pointer;width: 20px;height: 20px;border: 2px solid #fff; transition: background-color 0.3s ease-in-out;background-color: #000;/*appearance: none;*/}
.ptos-venta-dv .content.map .filters label:nth-child(1) input[type="checkbox"]:checked{accent-color: #1E88E5;}
.ptos-venta-dv .content.map .filters label:nth-child(2) input[type="checkbox"]:checked{accent-color: #E53935;}
.ptos-venta-dv .content.map .filters label:nth-child(3) input[type="checkbox"]:checked{accent-color: #43A047;}
.ptos-venta-dv .content.map .filters label:nth-child(4) input[type="checkbox"]:checked{accent-color: #8E24AA;}
.ptos-venta-dv .content.map .filters label:nth-child(5) input[type="checkbox"]:checked{accent-color: #D81B60;}
.ptos-venta-dv .content.map .filters label:nth-child(6) input[type="checkbox"]:checked{accent-color: #FB8C00;}
.ptos-venta-dv .content.map .filters label:nth-child(7) input[type="checkbox"]:checked{accent-color: #6D4C41;}

.ptos-venta-dv .content.map #map { flex: 1;width: 100%;}

.ptos-venta-dv .enlaces {width:100%;background-color: var(--colorSecondary)}
.ptos-venta-dv .enlaces .content{font-weight:300;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: row;flex-flow: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;max-width:1500px;margin:20px auto;width:100%;padding:0 20px}
.ptos-venta-dv .enlaces .content ul{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: row;flex-flow: row;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;list-style-type: none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.ptos-venta-dv .enlaces .content ul li{margin:2px 5px;font-size:0.9rem;color:var(--colorInverse)}
.ptos-venta-dv .enlaces .content ul li a{color:var(--colorInverse);text-decoration: none}
.ptos-venta-dv .enlaces .content ul li a:hover{color:#68aaf9}
    
/* Botón ubicación */
.ptos-venta-dv .content.map .location-btn {position: absolute;bottom: 30px;right: 80px;background: white; border: none;padding: 12px;border-radius: 50%;box-shadow: 0 2px 6px rgba(0,0,0,0.3);cursor: pointer;font-size: 18px}
.ptos-venta-dv .content.map .location-btn:hover {background: #eee}

@media (min-width:2000px){
	.ptos-venta-dv .content.map{background-size: 100%;}
}
@media (max-width:1300px){
	.ptos-venta-dv .content.map::before{right:8vw}
}
@media (max-width:1000px){
	.ptos-venta-dv .content.text header h1{transform: scale(0.9)}
	.ptos-venta-dv .content.map{background-size: 1500px;background-position:center -50px;padding-top:100px}
	.ptos-venta-dv .content.map::before{right:-50px;top:30px;transform: scale(0.8)}
}
@media (max-width:800px){
	.ptos-venta-dv .content.text header h1{transform: scale(0.8)}
	.ptos-venta-dv .content.map{background-size: 1000px;background-position:center -30px;padding-top:80px;overflow:hidden}
	.ptos-venta-dv .content.map::before{right:-150px;top:0px;transform: scale(0.7)}
}
@media (max-width:600px){
	p{text-align: left}
	.ptos-venta-dv .content.text{margin: 40px auto 20px}
	.ptos-venta-dv .content.text header h1{transform: scale(1);font-size: 43px;margin-left:-50px}
	.ptos-venta-dv .content.text header h1 span{font-size: 45px; bottom: -32px;right: -53px;}
	.ptos-venta-dv .content.map{background-size: 1200px;background-position:center -50px;padding-top:80px}
}
@media (max-width:450px){
	.ptos-venta-dv .content.text header h1{font-size: 35px;margin-left:-25px}
	.ptos-venta-dv .content.text header h1 span{font-size: 37px; bottom: -27px;right: -20px;}
}