/*
==================================================================
Theme Name: Carburantes ASC
Version: 2.0
Author: Neobrand®
Author URI: https://neobrand.com
==================================================================
*/

@import url('css/config.css');

/* General */

.grecaptcha-badge{
	display: none;
}

html,body {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.2;
	font-size: var(--size-400);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body figure {
	margin: 0;
}

h1,h2,h3,h4,h5 {
	width: 100%;
	margin: 0;
}

p,li {r
	width: 100%;
	margin: 0;
	line-height: 1.4;
	color: currentcolor;
}

a {
	color: #000;
	text-decoration: none;
	transition: all 280ms ease;
}

/* Contenido */

.contenido p, .contenido h1, , .contenido h2, .contenido h3, .contenido h4, .contenido h5{
	margin-bottom: 1.8em;
}

.contenido p:last-child{
	margin-bottom: 0;
}

.contenido ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.8em;
}

.contenido ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 10px;
}

.contenido ul li::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main);
}

.contenido .wp-block-cover blockquote p {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--main);
	color: white;
	margin: 0;
	padding: 15px 25px;
	border-radius: 0 30px 0 0;
	font-size: 22px !important;
	font-weight: bold;
}

.wp-block-advgb-container{
	width: 100%;
	max-width: var(--block-2)
}

.contenido .alignfull {
	margin: 0 calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.contenido .alignwide {
	margin: 0 calc(25% - 25vw);
	max-width: 100vw;
}

.contenido .alignfull .wp-block-cover__inner-container,
.contenido .alignwide .wp-block-cover__inner-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.contenido .wpcf7{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.contenido .wpcf7 form {
	transition: all 280ms ease;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.contenido .wpcf7 input:not(.wpcf7-submit),.contenido .wpcf7 select,.contenido .wpcf7 optgroup,.contenido .wpcf7 textarea {
  background-color: white;
  border: none;
  border-radius: 5px;
  width: 100%;
  font-size: 16px;
  font-weight: 100;
  padding: 10px 20px;
}

.contenido .wpcf7 .last{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 15px;
}

.contenido .wpcf7 textarea{
  max-height: 150px;
}

.contenido .wpcf7 form .last > p{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

.contenido .wpcf7 .wpcf7-form-control-wrap{
  width: 100%;
}

.contenido .wpcf7 form .wpcf7-acceptance > span{
  margin-left: 0;
}

.contenido .wpcf7 form .wpcf7-acceptance > span label {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  max-width: 230px;
}

.contenido .wpcf7 form .wpcf7-acceptance > span,
.contenido .wpcf7 form .wpcf7-acceptance > span label a{
  font-style: italic;
  color: white;
}

.contenido .wpcf7 form input[type="checkbox"]{
  width: 20px !important;
  height: 20px !important;
}

.contenido .wpcf7 form input[type="submit"]:hover{
	background-color: var(--alt);
	cursor: pointer;
}

.contenido .wpcf7 form input[type="submit"]:disabled{
  pointer-events: none;
  opacity: 0.5;
}

.contenido .wpcf7 form.submitting > p{
  opacity: 0.2;
}

.contenido .wpcf7 .wpcf7-spinner {
  position: absolute;
  width: 20px;
  height: 20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  margin: 0;
}

.contenido .wpcf7 form .wpcf7-response-output {
  background-color: white;
  color: white;
  margin: 25px 0 0 0;
  border: none;
  padding: 15px 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}

.contenido .wpcf7 form.sent .wpcf7-response-output {
	background-color: #DD020F;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	margin: 0;
}

.contenido .wpcf7 form.invalid .wpcf7-response-output {
  background-color: red;
}

.contenido .wpcf7 form .wpcf7-not-valid{
  background-color: #ffe6b6;
}

/* Fin contenido */

.arrow {
	width: 95px;
	height: 50px;
	background-image: url('images/arrow.svg');
	background-size: 95px 50px;
	transition: all 280ms ease;
}

.arrow.red {
	background-image: url('images/arrow-red.svg');
}

.arrow.small {
	width: 60px;
	height: 30px;
	background-size: 60px 30px;
}

.arrow:hover,
.arrow-parent:hover .arrow {
	transform: translateX(10px);
}

.arrow.small:hover,
.arrow-parent:hover .arrow.small {
	transform: translateX(5px);
}

.cta .panel {
	transform: skew(-17deg);
	left: -100px;
	right: 33%;
}

.cta .panel::before {
	content: '';
	height: 100%;
	width: 100%;
	background-color: var(--alt);
	position: absolute;
	top: 0;
	left: -30px;
	z-index: -1;
}

/* Header */

#header {
	height: 100px;
	box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
}

#header nav > div:first-child{
	margin-right: 100px;
}

#header nav > div:first-child::after {
	content: '';
	width: 1px;
	height: 140%;
	background-color: var(--grey-200);
	transform: skew(-17deg);
	position: absolute;
	top: -4px;
	right: -50px;
}

#header #locator i {
	width: 26px;
	height: 34px;
	background-image: url('images/location.svg');
	background-size: cover;
	transform: translateY(1px);
}

#header #mobile-locator {
	display: none;
}

#header .panel {
	transform: skew(-17deg);
	align-items: center;
  display: flex;
  justify-content: center;
  padding-right: 100px;
  margin-right: -100px;
}

#header .panel a{
	transform: skew(17deg);
}

#header .panel::before {
	content: '';
	height: 100%;
	width: 100%;
	background-color: var(--main);
	position: absolute;
	top: 0;
	left: 15px;
	z-index: -1;
}	

#mobile {
	width: 28px;
	height: 28px;
	transition: all 280ms ease;
	display: none;
}

#mobile .pix{position:absolute;width:6px;height:6px;background-color:var(--grey);border-radius:100%;transition:all 280ms ease}#mobile .pix:nth-of-type(1){transform:translate(0,0)}#mobile .pix:nth-of-type(2){transform:translate(10px,0)}#mobile .pix:nth-of-type(3){transform:translate(20px,0)}#mobile .pix:nth-of-type(4){transform:translate(0,10px)}#mobile .pix:nth-of-type(5){transform:translate(10px,10px)}#mobile .pix:nth-of-type(6){transform:translate(20px,10px)}#mobile .pix:nth-of-type(7){transform:translate(0,20px)}#mobile .pix:nth-of-type(8){transform:translate(10px,20px)}#mobile .pix:nth-of-type(9){transform:translate(20px,20px)}#mobile.active{transform:rotate(45deg)}#mobile.active .pix:nth-of-type(1){opacity:0;transform:translate(-6px,-6px)}#mobile.active .pix:nth-of-type(3){opacity:0;transform:translate(26px,-6px)}#mobile.active .pix:nth-of-type(7){opacity:0;transform:translate(-6px,26px)}#mobile.active .pix:nth-of-type(9){opacity:0;transform:translate(26px,26px)}

/* Main */

.home #hero {
	height: calc(100vh - 100px);
}

.home #hero #price-bar {
	height: 180px;
}

.home #hero #price-bar .panel {
	transform: skew(-17deg);
	left: -50px;
}

.home #hero #price-bar .panel::before {
	content: '';
	height: 100%;
	width: 100%;
	background-color: var(--main);
	position: absolute;
	top: 0;
	left: -15px;
	z-index: -1;
}

.home #hero #price-bar .swiper{
	padding-left: 600px;
	padding-right: 50px;
}

.home #news article figure::after {
	content: '';
	background: linear-gradient(to top, #00000080, transparent);
	position: absolute;
	inset: 0;
}

.home #news article figure figcaption::before {
	content: '';
	width: 40px;
	height: calc(100% + 6px);
	transform: skew(-17deg);
	background-color: var(--main);
	position: absolute;
	top: -4px;
	left: -10px;
}

#hero.interior {
	max-height: 300px;
	height: 100%;
}

#navigation {
	height: calc(100vh - 100px);
}

#navigation .listStation{
	width: 100%;
	max-width: 380px;
}

#navigation .listStation nav {
	overflow: auto;
}

#promotions article figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#timeline .timeline {
	margin-top: 200px;
	padding: 0 180px;
	position: relative;
}

#timeline .timeline::after {
	content: '';
	height: 7px;
	color: #fcdad9;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="%23fcdad9"><circle cx="5" cy="5" r="2" fill="%23fcdad9" /></svg>') repeat-x;
	position: absolute;
	left: 190px;
	right: 190px;
	top: 38px;
}

#timeline .timeline article i {
	font-size: 18px;
	transition: all 280ms ease;
	transform: translateY(30px) rotate(-90deg);
	opacity: 0;
}

#timeline .timeline article.active i {
	opacity: 1;
	transform: translateY(10px) rotate(-90deg);
}

#timeline .timeline article mark {
	width: 30px;
	height: 30px;
	border: 2px solid var(--main);
	border-radius: 5px;
	background-color: rgb(252, 218, 217);
	transform-origin: center;
	z-index: 2;
}

#timeline .timeline article mark::after {
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background-color: var(--main);
	transition: all 320ms ease;
}

#timeline .timeline article.active mark::after {
	width: 23px;
	height: 23px;
	border-radius: 3px;
}

#timeline .timeline article .content {
	width: 370px;
	border: 1px solid var(--main);
	border-radius: 10px;
	opacity: 0;
	pointer-events: none;
	transition: all 560ms ease;
	background-color: white;
	bottom: 80px;
	z-index: 3;
}

#timeline .timeline article .content figure {
	min-width: 140px;
	max-width: 140px;
}

#timeline .timeline article .content figure img {
	width: 100%;
	border-radius: 10px 0 0 10px;
	object-fit: cover;
}

#timeline .timeline article .content p {
	line-height: 1.2;
	font-size: 14px;
}

#timeline .timeline article.active .content {
	opacity: 1;
	pointer-events: all;
}

/*Página cambiar precios*/

#contrasena {
	float: left;
	width: 100%;
	text-align: center;
	padding: 100px 0;
}

#contrasena form{
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	justify-content: center;
}

#contrasena form label{
	width: 100%;
}

#contrasena form input {
	margin-top: 10px;
	font-size: 15px;
	width: 100%;
	background-color: white;
	padding: 10px 20px;
	text-align: center;
}

#contrasena form > p{
	display: flex;
	flex-direction: column;
	max-width: 500px;
	justify-content: center;
	gap: 20px;
}

#cambiarPrecios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 50px;
    width: 100%;
    margin-bottom: 100px;
}

#cambiarPrecios .gasolinera {
    display: flex;
    flex-direction: column;
}

#cambiarPrecios .gasolinera form {
	background-color: #f4f4f4;
	width: 100%;
	display: inline-block;
	padding: 20px;
}

#cambiarPrecios .gasolinera form > .acf-fields{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

#cambiarPrecios .gasolinera h4 {
	width: 100%;
	padding: 10px 0;
	text-align: center;
	background-color: #d80018;
	color: #fff;
	font-weight: 700;
	float: left;
	position: relative;
	margin: 0;
}

#cambiarPrecios .acf-form-submit {
	float: left;
	width: 100%;
	text-align: center;
	margin: 0;
}

#cambiarPrecios input[type=submit] {
	border: 2px solid #d80018;
	border-radius: 5px;
	padding: 8px 10px;
	font-weight: 600;
	background-color: transparent;
	color: #d80018;
	cursor: pointer;
	transition: all 280ms all;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	z-index: 1;
}

#cambiarPrecios input[type=submit]:hover {
	color: #fff;
	background-color: #d80018;
}

#cambiarPrecios .gasolinera:last-child input[type=submit] {
	display: block;
}

#cambiarPrecios #message {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 999;
	animation: fadeOut 3s forwards;
}

#cambiarPrecios #message p {
	font-size: 22px;
	color: #fff;
	width: 100%;
	float: left;
	margin: 0;
	padding: 10px 10px;
	text-align: center;
	background-color: #A7D996;
	top: 90px;
	position: absolute;
	left: 0;
}

#cambiarPrecios label {
	font-size: 12px;
	color: #A9A9A4;
	margin-top: 15px;
	width: 100px;
}			

#cambiarPrecios div.acf-field.acf-field-text {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 5px;
	border: none;
	padding: 0;
}

#cambiarPrecios div.acf-field.acf-field-text > div,
#cambiarPrecios div.acf-field.acf-field-text > div label {
	margin: 0;
}

#map .leaflet-marker-icon{
	transition: all 280ms ease;
}

#map .leaflet-marker-icon:hover{
	top: -10px;
}

#map .marker-cluster {
	background-color: transparent;
	padding: 2px;
	border: 2px solid var(--main);
	display: flex;
	border-radius: 100px;
}

#map .marker-cluster > div{
	background-color: var(--main);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	border-radius: 100px;
}

#geoButton{
	right: 5px;
	top: 5px;
	border-radius: 100px;
	height: 50px;
	width: 50px;
	position: absolute;
	background-color: var(--blue);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	color: white;
	appearance: none;
	border: none;
}

/* Popup */

.popup{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 20px;
	display: none;
}

.popup .close{
	position: absolute;
	right: 20px;
	top: 20px;
}

.popup .content {
	position: relative;
	width: 100%;
	max-width: 560px;
	padding: 50px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	background-color: white;
	gap: 30px;
	box-shadow: 0 0 100px rgb(0, 0, 0);
	max-height: calc(100vh - 20%);
	overflow-x: scroll;
}

/*Contacto*/

#formulario input:not(.wpcf7-submit),#formulario select,#formulario optgroup,#formulario textarea {
  background-color: transparent;
  border-left: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid black;
  width: 100%;
  font-size: 16px;
  font-weight: 100;
  color: black;
}

#formulario{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#formulario .last{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

#formulario textarea{
  max-height: 150px;
}

#formulario .wpcf7{
  max-width: 450px;
  color: black;
}

#formulario form {
	transition: all 280ms ease;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	justify-content: center;
}

#formulario form > p{
  transition: all 280ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#formulario form .last > p{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

#formulario .wpcf7-form-control-wrap{
  width: 100%;
}

#formulario form .wpcf7-acceptance > span{
  margin-left: 0;
}

#formulario form .wpcf7-acceptance > span label {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  max-width: 230px;
}

#formulario form .wpcf7-acceptance > span,
#formulario form .wpcf7-acceptance > span label a{
  font-style: italic;
  color: black;
}

#formulario form input[type="checkbox"]{
  width: 20px !important;
  height: 20px !important;
}

#formulario form input[type="submit"]{
	border: none;
}

#formulario form input[type="submit"]:disabled{
  pointer-events: none;
  opacity: 0.5;
}

#formulario form.submitting > p{
  opacity: 0.2;
}

#formulario .wpcf7-spinner {
  position: absolute;
  width: 20px;
  height: 20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  margin: 0;
}

#formulario form .wpcf7-response-output {
  background-color: white;
  color: white;
  margin: 25px 0 0 0;
  border: none;
  padding: 15px 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
}

#formulario form.sent .wpcf7-response-output {
  background-color: var(--green);
}

#formulario form.invalid .wpcf7-response-output {
  background-color: red;
}

.wpcf7-not-valid{
  border-color: red !important;
}

.wpcf7-not-valid-tip{
  display: none !important;
}


/*Formulario landing 25años*/
.grupo-contenedor-pasos{
		position: relative;
}
.pasos {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.pasos input:not(.wpcf7-submit),
.pasos select,
.pasos optgroup,
.pasos textarea {
  background-color: transparent;
  border: 1px solid grey !important;
  width: 100%;
  font-size: 16px;
  font-weight: 100;
  color: black;
  border-radius: 20px !important;
  padding: 15px 30px !important;
}

.pasos input[type="submit"], .pasos .btn{
	background-color: var(--main) ;
	color: white;
	padding: 15px 30px;
	border: none;
	border-radius: 25px;
}

.pasos .btn {
	margin-left: auto;
	grid-column: 3;
}

.paso-1{
	display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.paso-2 {
    display: none;
    position: fixed;
    gap: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1000; 
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 700px; 
}

.paso-2 input:not(.wpcf7-submit){
	margin: 10px 0 ;
}

.pasos .wpcf7-list-item label{
	color: black;
}
.pasos .wpcf7-list-item-label a{
	color: #b21d1b !important;
}

.popup-formulario {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999;
}

.cerrar-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    color: black;
}

.msg-error-custom {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background-color: #fff8e5; 
    color: #333;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
}

/*Paginación*/

.pagination{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.pagination > span, .pagination > a{
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	border: 1px solid black;
	font-size: 14px;
	font-weight: 600;
}

.pagination > a:hover{
	color: var(--main);
	border: 1px solid var(--main);
}

.pagination .current{
	color: white;
	background-color: var(--main);
	border: 1px solid var(--main);
}

/* Footer */

.title_dotted {
	border-bottom: 1px dotted var(--grey);
}

#footer .social a {
	width: 32px;
	height: 32px;
	border: 2px solid black;
}

#footer a {
	width: fit-content;
}

#footer a:hover {
	padding-left: 5px;
}

/* Animation */

.animate{
  opacity: 0;
  transition: all 860ms ease;
}

.animate.animate-active{
  opacity: 1;
}

.animate-scale{
  transform: scale(0.9);
}

.animate-scale.animate-active{
  transform: scale(1);
}

.animate-invert.animate-active {
  filter: invert(100%);
}

.animate-start{
  transform: translateX(-80px);
}

.animate-end{
  transform: translateX(80px);
}

.animate-top{
  transform: translateY(-80px);
}

.animate-bottom{
  transform: translateY(80px);
}

.animate-start.animate-active,
.animate-end.animate-active{
  transform: translateX(0);
}

.animate-top.animate-active,
.animate-bottom.animate-active{
  transform: translateY(0);
}

.animate-rotate {
  animation: rotar 4s linear infinite;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes rotar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*404*/

.error-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
    padding: 0 var(--padding-lateral);
}