@charset "utf-8";
/*
WEB: Caravantur
AUTOR: El Diario Vasco 
VERSION: 2.0
*/

/*--GENERALES--*/
:root {
  font-size:19px;
  --fontMax:clamp(3rem, 13vw, 8rem);
  --fontXXL:clamp(2.5rem, 10vw, 4.2rem);
  --fontXL:clamp(1.5rem, 3.7vw, 2.2rem);
  --fontL:clamp(1.2rem, 3vw, 1.5rem);
  --fontML:clamp(1rem, 2.3vw, 1.2rem);
  --fontM:clamp(0.9rem, 2vw, 1rem);
  --fontS:clamp(0.70rem, 1.8vw, 0.83rem);
  --fontXS:clamp(0.6rem, 0.7vw, 0.8rem);
  --colorPrimary: #00789B;
  --colorPrimaryL: #7FCEE5;
  --colorSecondary: #033D4E;
  --colorSpecial: #55BA1F;
  --colorSpecialL: #97E56D;
  --colorDark: #1e1d1d;
  --colorBright: #fff;
  --widthContent: 90svw;
  --bg: none;
  --bg-sc: rgba(6,91,116,0.9);
  --trans: 0.4s;
}
@view-transition {
  navigation: auto;
  types: slide;
}
@keyframes galeria-slide {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* El track se desplaza la mitad (el set original) */
        }
*{-webkit-box-sizing: border-box;box-sizing: border-box}
html {scroll-behavior: smooth;scroll-padding-top: 100px}
body{font:var(--fontM) "Solway", sans-serif;font-weight:300;margin: 0;padding: 0;background: #fff;line-height:1.3;color:var(--colorDark)}
input{font:1em 'Solway', serif}
div:not(.galeria) .content{width:var(--widthContent);margin:0 auto;max-width:1500px;padding:50px 0}
h2{font-size: var(--fontXL);text-transform: uppercase;font-weight: 800;letter-spacing: -0.03em;flex: 1 1 100%;text-align: center}
h3{font-size: calc(var(--fontML) + 0.08rem);text-transform: uppercase;font-weight: 700;letter-spacing: -0.03em;flex: 1 1 100%;}
li{margin-bottom:10px}
a{color:var(--colorPrimary);text-decoration: none}
a:hover{color:var(--colorPrimaryL);text-decoration: underline!important}

/*--HERO--*/
.hero{background: #2e2f04 url("../img/fondo-caravantur-autocaravana.jpg") no-repeat left -50px;background-size: cover;width:100%;height:auto;min-height:100vh;position: relative;display: flex;flex-flow: column;justify-content: flex-start;align-items: flex-end; color:var(--colorBright)}
.hero::before{content:"";position: absolute;background-color: var(--colorDark);opacity:0.3;width:100%;height:100%;z-index:1;top:0;left:0}
.hero>*{position: relative; z-index: 10}

nav{display: flex;height:90px;padding:15px 20px;width:100%;justify-content: space-between;align-items: center;position: fixed;  top: 0; background: var(--bg); transition: var(--trans); z-index: 1000;}
.interior nav {background: var(--colorPrimary);} 
nav.scrolled { background: var(--bg-sc); }
nav img{width:auto;height:50px}
nav img.logo-scroll{height: 45px; transition: var(--trans);display: none;}
nav.scrolled .logo-main, .interior nav .logo-main{margin-left:35px}
nav.scrolled .logo-scroll, .interior nav .logo-scroll { display: block; filter: brightness(0) invert(1);position: absolute;top: 10px;  left: 15px; }
nav a{color:var(--colorBright)}
nav ul{display: flex;gap:15px;list-style: none;font-weight: 500;margin:0;padding:0}
nav ul#mainNav { list-style: none; display: flex; gap: 15px; margin: 0; padding: 0; }
nav ul li.idioma{text-transform: uppercase;font-weight: 700}
nav ul li.idioma{border-left:1px solid var(--colorBright);padding-left:10px}
nav ul .destacado a{background-color: var(--colorSpecial);padding:4px 16px;color:var(--colorBright);font-weight: 700;border-radius: 15px;transition: all 500ms }
nav ul .destacado a:hover{background-color: var(--colorPrimary);text-decoration: none!important}

/* ICONO HAMBURGUESA (BEFORE/AFTER) */
.ham { width: 30px; height: 24px; position: relative; cursor: pointer; display: none; z-index: 1100; }
.ham-bar { position: absolute; top: 10px; width: 100%; height: 3px; background: white; transition: var(--trans); }
.ham-bar::before, .ham-bar::after { content: ''; position: absolute; width: 100%; height: 3px; background: white; transition: var(--trans); }
.ham-bar::before { top: -10px; } .ham-bar::after { top: 10px; }

.ham.active .ham-bar { background: transparent; }
.ham.active .ham-bar::before { transform: rotate(45deg) translate(7px, 7px); }
.ham.active .ham-bar::after { transform: rotate(-45deg) translate(7px, -7px); }

/* OVERLAY */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); visibility: hidden; opacity: 0; transition: var(--trans); z-index: 998;pointer-events: none; }

.hero header{max-width:43svw;padding:60px 0 50px;display: flex;flex-flow: column;gap:20px;margin:100px 80px 0 0}
.hero header .logo{position: relative}
.hero header .logo::before{content: url("../img/icons/ic-10-anios.png");position: absolute;top:-17px;left:-51px}
.eu .hero header .logo::before{content: url("../img/icons/ic-10-anios-eu.png");}
.fr .hero header .logo::before{content: url("../img/icons/ic-10-anios-fr.png");}
.hero header img{margin-bottom:10px;width:30vw;height:auto;max-width:435px}
.hero header h1,.hero header p{display: inline;font-size: var(--fontM);font-weight: 300}
.hero header strong{font-weight: 600;color:var(--colorSpecialL)}
.hero header .sorteo{position: absolute;top:0;right:0;background-color: var(--colorSpecial);border-radius: 50%;display: flex;justify-content: center;align-items: center;aspect-ratio: 1 / 1;max-width:170px;padding:30px;text-align: center;font-weight: 900;font-size: var(--fontML);line-height:0.9;color:var(--colorBright);overflow: hidden}
.hero header .sorteo::before{content: url("../img/icons/ic-tarta.svg");position: absolute;bottom:-20px;left:-30px;z-index:0}
.hero header .sorteo span{font-size: var(--fontXL);letter-spacing: -0.05em}
.hero header .sorteo a,.hero header .sorteo a:hover{color:var(--colorBright);text-decoration: none!important;z-index:10}

.hero .puntos-clave{display:flex;padding:30px 0 0;width:100%;background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.70) 100%);margin-top:auto}
.hero .puntos-clave .punto{flex:1 1 25%;padding:20px 2.5vw 40px;position: relative;overflow: hidden}
.hero .puntos-clave .punto h3{margin:0 0 10px}
.hero .puntos-clave .punto a{background-color: var(--colorSpecial) ;padding: 5px 16px;display:block;width:100%;border-radius: 15px;font-weight: 600;color:var(--colorBright);font-size: var(--fontS);position: relative;transition: all 500ms}
.hero .puntos-clave .punto strong{color:var(--colorPrimaryL);font-weight: 600;}
.hero .puntos-clave .punto a::before{content: url("../img/icons/ic-fechas.svg");position:  absolute;right: 10px;top:6px}
.hero .puntos-clave .punto a:hover{background-color: var(--colorPrimary);text-decoration: none!important}
.hero .puntos-clave .punto:not(:first-child){border-left:1px solid var(--colorBright)}
.hero .puntos-clave .punto::before{position: absolute;z-index:-1;opacity: 0.3}
.hero .puntos-clave .punto.pernoctacion::before{content:url("../img/icons/ic-cama.png");bottom:-10px;left:0}
.hero .puntos-clave .punto.entrada::before{content:url("../img/icons/ic-entrada.png");bottom:-70px;left:-70px}
.hero .puntos-clave .punto.gastro::before{content:url("../img/icons/ic-cubiertos.png");bottom:-50px;left:-30px}
.hero .puntos-clave .punto.pet::before{content:url("../img/icons/ic-pet.png");bottom:-50px;left:-30px}
.hero .puntos-clave .punto.entrada ul{display: flex;flex-flow: column; justify-content: space-around;list-style-image: url("../img/icons/ic-reloj.svg");font-size: var(--fontS);gap:5px;margin:10px;padding:0 0 0 10px }
.hero .puntos-clave .punto.entrada ul strong{font-size: var(--fontM)}
.hero .puntos-clave .punto.entrada ul li{margin:0}

/*--PARTICIPANTES--*/
.participantes{--participantes:5;--gapHor:1% ;--gapVert:20px;--participante:calc(100% / var(--participantes));--participanteReal:calc(var(--participante) - var(--gapHor));width:100%}
.participantes .content{display:flex;flex-wrap:wrap;gap:var(--gapVert) var(--gapHor)}
.participantes .content h2{color: var(--colorPrimary)}
.participantes .content div{display: flex;justify-content: center;align-items: center;flex:0 1 
var(--participanteReal);padding:5px}

/*--EXPOSITOR FORM--*/
.participa{background-color: var(--colorPrimary);color: var(--colorBright);width:100%}
.interior .participa{padding-top:80px;background-color: var(--colorBright);color: var(--colorDark);width:100%}
.participa .content{display:flex;flex-wrap:wrap;flex-flow: column}
.participa .content h2{color: var(--colorSpecialL);margin-bottom:10px}
.interior .participa .content h2{color: var(--colorPrimary);text-align: left}
.interior .participa .content p strong{color: var(--colorPrimary);font-weight: 700}
.participa .content .errores{color:var(--colorBright);background-color: #9E0204;margin:10px 0;padding:20px}
.participa .content form{width:100%;padding:30px 0 40px;display: flex;flex-wrap: wrap;gap:20px;justify-content: center}
.participa .content form>div{display: flex;flex-flow: column;flex:1 1 23%;gap:5px}
.participa .content form>div:nth-child(6){flex:1 1 100%}
.interior .participa .content form>div,.interior .participa .content form>div:nth-child(6){flex:1 1 30%;}
.interior .pernocta .content form>div:nth-child(7),.interior .pernocta .content form>div:nth-child(8){flex:1 1 100%;flex-flow: row;align-items: center;font-size: var(--fontML);font-weight: 500}
.interior .pernocta .content form>div:nth-child(7) label,.interior .pernocta .content form>div:nth-child(8) label{font-size: var(--fontM);font-weight: 300}
.interior .participa .content form>div:nth-child(7) p,.interior .participa .content form>div:nth-child(8) p{margin:0}
.interior .participa .content>ol> li{margin-bottom:25px}

.participa .content form div:not(.clausulado,.captcha) label{font-size: var(--fontML);font-weight: 500}
.participa .content form input,.participa .content form textarea{border-radius: 2px;border:none;padding:5px 10px}
.interior .participa .content form input,.participa .content form textarea{border:1px solid var(--colorDark)}
.participa .content form textarea{height:100px}
.participa .content form .clausulado{flex:1 1 100%!important;margin-top:20px}
.participa .content form .clausulado a{color:var(--colorBright)}
.interior .participa .content form .clausulado a{color:var(--colorDark)}
.participa .content form .clausulado label,.participa .content form .clausulado p{font: var(--fontXS) Arial, sans-serif}
.participa .content form input[type="submit"]{background: var(--colorSpecialL) url("../img/icons/ic-envio.svg") no-repeat 20px 50%;color:var(--colorPrimary);font-weight: 800;font-size: var(--fontL);text-transform: uppercase;border:none;border-radius: 50px;padding:20px 25px 20px 70px;cursor:pointer}

/*--GALERÍA--*/
.galeria{--slide-altura:55vh;--slide-velocidad:50s;width:100%;height: var(--slide-altura); overflow: hidden;position: relative;}
.galeria .content{display: flex;gap:2px;width: max-content;animation: galeria-slide var(--slide-velocidad) linear infinite;}
.galeria:hover .content{animation-play-state: paused;}
.galeria div img{height: var(--slide-altura);width:auto;display: block}

/*--CONTACTO--*/
.contacto .content{display:flex;flex-flow: row;gap:5svw;justify-content: center;align-items: flex-start}
.contacto .content h2{color:var(--colorPrimary);flex:0 1 auto;margin: 0 0 20px }
.contacto .content p{margin-top:0}
.contacto .content p strong{color:var(--colorPrimary);font-weight: 600}
.contacto .content>div{position: relative;padding:5px 0 0 50px}
.contacto .content>div::before{position: absolute;top:5px;left:0}
.contacto .content .ubicacion::before{content: url("../img/icons/ic-posicion.svg")}
.contacto .content .info{padding-left:60px}
.contacto .content .info::before{content: url("../img/icons/ic-sobre.svg")}

/*--FOOTER--*/

.footer .content{padding:15px 20px 5px; display:flex;justify-content: flex-start;flex-flow:row;width:var(--widthContent);margin:0 auto;flex-wrap: wrap;gap:30px}
.footer .content div{display:flex;align-items: flex-start;gap:10px;flex-wrap: wrap}
.footer .content div.partners{flex:1 1 100%;margin-bottom:15px;border-top:1px solid #ccc;padding-top:15px}
.footer .content p{font-size:var(--fontXS);color:var(--colorDark);opacity: 0.8;margin:0}
.footer .content img{padding:0 20px 0 5px;max-height:70px;width:auto}
.footer .content div.partners img{padding:0 10px 0 5px;transform: scale(0.8)}
.footer .content ul{flex:1 1 100%;display: flex;justify-content: center;list-style: none;gap:20px;font-size: var(--fontS);margin:30px 0;padding:0;flex-wrap: wrap}
.footer .content a{color:var(--colorPrimary);text-decoration: none}

@media (max-width:1400px){
	.hero{background-size: 1400px;background-position: left top;align-items: flex-start}
	.hero header {max-width: unset;margin-left:735px}
	.hero header .sorteo{transform: scale(0.9)}
}
@media (max-width:1200px){
	.ham { display: block; }
	.hero{background-position: -200px top}
	nav{flex-wrap:wrap}
	nav ul#mainNav {position: fixed; top: 0; right: -100%; width: 300px;background: var(--colorPrimary); flex-direction: row; padding: 100px 40px!important; transition: var(--trans); z-index: 1050; flex-wrap:wrap;align-items: flex-start; border-left:1px solid #fff; border-bottom:1px solid #fff}
	nav ul#mainNav li{flex:1 1 100%}
	nav.scrolled ul#mainNav { background: var(--colorPrimary)}
    nav ul#mainNav.active { right: 0; }
	nav ul li.idioma{border-top:1px solid var(--colorBright);border-left:none;padding-left:0;padding-top:10px}
	nav ul .destacado{margin-bottom:10px}
    .overlay.active { visibility: visible; opacity: 1;pointer-events: auto }
	.hero header {margin-left:535px;margin-right:50px}
	.hero header .sorteo{transform: scale(0.8)}
	.interior .pernocta .content form > div:nth-child(7){flex-wrap: wrap;gap:10px}
	.interior .pernocta .content form > div:nth-child(7) p{flex:1 1 100%}
	.footer .content p{flex:1 1 100%;margin-top:20px}
}
@media (max-width:1100px){
	.hero{background-size: 1200px;background-position: left top;justify-content: flex-end}
	nav{margin-bottom:auto}
	nav .logo-main{margin-left:35px}
	nav .logo-scroll{ display: block!important; filter: brightness(0) invert(1);position: absolute;
  top: 10px;  left: 15px; }
	.hero header {margin:0 auto;width:90vw;position:unset;padding:0 0 20px}
	.hero header .logo{display: none}
	.hero header .sorteo{top:100px;right:50px;transform: scale(1)}
	.hero .puntos-clave{margin-top:unset}
	.hero .puntos-clave {flex-wrap: wrap}
	.hero .puntos-clave .punto{flex:1 1 50%}
	.participantes{--participantes:4}
	.hero .puntos-clave .punto:nth-child(n+3){border-top:1px solid var(--colorBright)}
	.galeria{--slide-altura:35vh;--slide-velocidad:50s}
	.contacto .content{flex-flow: column;gap:0}
}
@media (max-width:800px){
	.hero{background-size: 1000px;height:auto}
	.hero header {margin-top:400px}
	.hero header .sorteo{width:130px}
	.hero .puntos-clave .punto{flex:1 1 100%;padding:20px;}
	.hero .puntos-clave .punto::before{content:""!important}
	.hero .puntos-clave .punto:nth-child(n+2){border-top:1px solid var(--colorBright);border-left:none}
	.participantes{--participantes:3}
	.participantes div img,.participantes div a{width:100%;height:auto;max-width:145px}
}
@media (max-width:600px){
	nav img {height: 40px;}
	.hero{background-position: -200px top}
	.hero header .sorteo{right:20px;transform: scale(0.9)}
	.interior .participa .content form > div:nth-child(7),	.interior .participa .content form > div:nth-child(8){flex-flow: column;align-items: flex-start}
}