/* --> Rodamientos El Palomar Website <<<-----*/

/* -------> Colors <<<--------------*/

:root {
  --white:#FFFEFD;
  --black:#1D1E22;
  --green:#04FBA3;
  --blue:#0000FE;
  --light-blue:#0078B1;
  --light-grey:#EEEEEE;	
}

/* -------> Fonts <<<--------------*/


/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/montserrat-medium.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/montserrat-semibold.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------> Resets and overrides <<<------------*/

*{margin:0; padding:0;} 
body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, li, pre, blockquote, address, cite{ margin:0; padding:0;}
*, *:after, *:before {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html body {width:100%; height:100%;  background:var(--white);} 
html {overflow-x: hidden !important; scroll-behavior: smooth;}
body {font-family: "Montserrat", sans-serif; font-size:1.000em; color:var(--black); font-weight: 400; font-style: normal; }
.clearfix {clear:both; height:0px; font-size:1px;}
:focus {outline:0;}
img, iframe {border:none; text-decoration:none;}
ol, ul {list-style:none;}
a {text-decoration:none; font-display: swap;}
p {line-height: normal; font-display: swap;}
h1, h2, h3, h4, h5 { font-family: "Montserrat", sans-serif; font-size:1em; font-weight: 600; font-style: normal; font-display: swap;}
input, select, textarea { font-family: "Montserrat", sans-serif; font-size:1em; font-weight: 400; font-style: normal; font-display: swap;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display:block;}
input:invalid {box-shadow: none;}

[id] { scroll-margin-top: 100px;}

/*accessibility*/
a:focus-visible, button:focus-visible {outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 15px;}

/* --------> General <<<-------------*/

.center {width: 1280px; margin: 0 auto;}

.btn {border-radius: 50px; padding:12px 24px; font-weight: 500; font-size: 0.9375em; display: inline-block;}
.btn:hover {opacity: 0.8;}
.btn-green {color: var(--green); border: 1px solid var(--green);}
.btn-blue {color: var(--blue); border: 1px solid var(--blue);}
	
p.intro { font-size: 0.75em; font-weight: 500; text-transform: uppercase; opacity: 0.7;}
p {font-size: 0.9375em; line-height:1.625em; }
	

/*Nav*/
.navMenu ul {text-transform: uppercase; position: relative;}

/* Styles for the hamburger menu icon */
#hamburger {display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: absolute; top: 30px; right: 20px; z-index: 400;}
#hamburger div {width: 26px; height: 2px; background-color:var(--white); margin: 5px 0; transition: 0.5s;}
#hamburger {display: none;}
.logo {display:block; width: 232px; height:53px; }
/*.logo img {position: absolute;}*/
.logo .img-initial img {width: 262px; height: auto;}
.logo .img-initial {opacity:1;  transition: all 0.8s ease-out;} 
.logo .img-scroll {opacity:0; transition: all 0.15s ease-out;} 
.isotipo-mobile {display: none;}
.navMenu .nav-active a {color:var(--green); position: relative;}

header {position:fixed; left: 50%; transform: translateX(-50%); width: 100%;  z-index: 3000; }
header.scrolled { background: rgba(255,255,255,0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);}
header .logo-color {display: none;}
header .logo-mono {display: block;}

header.smaller {background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) ;}
header.smaller .logo-color {display: block;}
header.smaller .logo-mono {display: none;}


@media screen and (min-width: 1081px) {

	.logo {position: relative; margin:25px auto; }
    .navMenu {width: 100%; position: relative;}
    .navMenu ul {display: flex;}
	.navMenu ul.left {position: absolute; left:0; top:-70px;}
	.navMenu ul.left  li {margin-right: 25px;}
	.navMenu ul.right {position: absolute; right:0; top:-70px;}
	.navMenu ul.right  li {margin-left: 25px;}
    .navMenu ul a {color:var(--white); display:inline-block; text-align:center; transition: all 0.5s ease-out; padding: 12px 2px;}
    .navMenu ul a:hover {transition: all 0.5s ease-out; color:var(--green);}
    .logo-menu {display: none;} 
	.navMenu .nav-active a::after {content:""; display: block; background: var(--green); height:5px; width:5px; border-radius: 50%; position: absolute;left: 50%;  top:38px; }	
	
	header.smaller {box-shadow: 0 4px 12px rgba(0,0,0,0.04);
	border-bottom: 1px solid rgba(0,0,0,0.05);}
	header.smaller .logo {margin:15px auto; }
	header.smaller .navMenu ul.left {top:-62px;}
	header.smaller .navMenu ul.right {top:-62px;}
	
	.navMenu .social  {display: none;}
}


.header-light .navMenu ul a, header.smaller .navMenu ul a {color:var(--black);}
.header-light .navMenu .nav-active a, header.smaller .navMenu .nav-active a {color:var(--blue); position: relative;}
.header-light .navMenu .nav-active a::after, header.smaller .navMenu .nav-active a::after{background: var(--blue);}
.header-light .navMenu ul a:hover, header.smaller .navMenu ul a:hover {transition: all 0.5s ease-out; color:var(--blue);}
.header-light #hamburger div, header.smaller #hamburger div {background-color:var(--black);}


/*Footer*/
footer {background:var(--light-grey); padding: 40px 0;}
footer .center .content {display: flex; justify-content:space-between; align-items:center;}
footer .center .content div {width: 30%;}
footer .center .content ul {display: flex; gap: 20px; justify-content:center;}
footer .center .copy {font-size:0.875em; opacity: 0.7; margin-top: 20px; }

#myBtn {display: none; background: url(../images/up.svg) no-repeat; width:50px; height: 50px; position:fixed; bottom:80px; right:16px; z-index:2000; text-indent: -9999px; border-radius: 20px; cursor: pointer;}

.whatsapp-button {background: url("../images/btn-whatsapp.svg") no-repeat 0 0; width:50px; height: 50px; display: block;  position:fixed; bottom:16px; right:16px; z-index:1500;}

.prefooter {background: url("../images/back-prefooter.webp") top / cover no-repeat;  width: 100%;  display: flex; flex-direction: column; justify-content:center; align-items:center; color:var(--white); text-align: center; padding: 80px 0;}
.prefooter h4 {color:var(--white); font-size: 1.5em; line-height: 1.6em; text-wrap: balance; }
.prefooter .center {width: 680px;}
.prefooter .btn {margin-top:20px;}
.prefooter p {margin-top:10px;}
#productos .prefooter h3 {color:var(--white); font-size: 1.5em; line-height: 1.6em; text-wrap: balance;}
#servicios .prefooter h3 {color:var(--white); font-size: 1.5em; line-height: 1.6em; text-wrap: balance;}

/*Home page*/

.hero {background: url("../images/hero-image.webp") center / cover no-repeat; height: 75vh; min-height: 420px; width: 100%; padding: 0 6vw; display: flex; flex-direction: column; justify-content: center; align-items:center; color:var(--white); text-align: center;}
.hero h1 {font-size: 2.3125em; margin-bottom: 20px; max-width: 720px; text-wrap: balance; margin-top: 35vh;}

.line-color {width: 100%; height: 10px; display: block; background: linear-gradient(90deg, #04FBA3 0%, #0078B1 50.96%, #0000FE 100%);}

#home .nosotros .center {width: 1100px; display: flex; justify-content:space-between; padding: 80px 0;}
#home h2 {font-size: 2.25em; margin: 5px 0 15px;}
#home .nosotros .text {padding-left: 40px; margin-top: 100px;}
#home .nosotros .btn {margin-top: 20px;}

.productos {background: url("../images/back-productos.webp") top / cover no-repeat #0b0d13;}
.productos .center {padding: 80px 0;}
.productos p.intro  {color:var(--white); margin-bottom: 60px; text-align: center; opacity: 1;}
.productos ul {display: flex; justify-content:space-between; width: 100%; flex-wrap: wrap;}
.productos ul li {width: 30%;}
.productos ul li h3 {font-size: 1.5em; color:var(--white);}
.productos ul li p {color:var(--white); margin: 10px 0 20px; font-weight: 500;}
.productos ul li .text {margin: 20px 0 60px 0;}

#home .servicios .center {width: 1100px;  padding: 80px 0; text-align: center;}
#home .servicios h2 {text-align: center;} 
#home .servicios .bajada {text-align: center; text-wrap: balance; width:600px; margin:0 auto 20px auto;}
#home .servicios .content {display: flex; justify-content:space-between; align-items:center; margin-bottom: 30px;}
#home .servicios ul {width: 30%; display: flex; flex-direction:column;  justify-content:space-around; height: 240px; }
#home .servicios ul li {position: relative; font-size: 0.9375em;}
#home .servicios .left {text-align: right;}
#home .servicios .left li::before {content:""; display: block; width:12px; height:12px; background: var(--blue); border-radius:50%; position: absolute; right: 0; top:4px;}
#home .servicios .left li {padding-right: 20px;}
#home .servicios .left li:nth-child(2) {margin-right: 20px;}
#home .servicios .right {text-align: left;}
#home .servicios .right li::before {content:""; display: block; width:12px; height:12px; background: var(--blue); border-radius:50%; position: absolute; left: 0; top:4px;}
#home .servicios .right li {padding-left: 20px;}
#home .servicios .right li:nth-child(2) {margin-left: 20px;}

#home .empresas {padding: 60px 0;}
#home .empresas h3 {color:var(--blue); font-size:0.875em; text-transform: uppercase; margin-bottom: 20px;}
#home .empresas .logos {display: flex; justify-content:space-between;}


/*Productos*/

.hero-small {background: url("../images/back-page-productos.webp") center / cover no-repeat; min-height: 340px; width: 100%;  display: flex; flex-direction: column; justify-content:flex-end; align-items:left; color:var(--white); text-align: left;}
.hero-small h1 {font-size: 2.3125em; margin-bottom: 20px; max-width: 720px; text-wrap: balance; color:var(--green);}
.hero-small p {width: 60%; margin-bottom: 40px;}

#productos .productos {background-image:none; background:var(--white); }
#productos .productos p {color:var(--black); }
#productos .productos ul li h3   {color:var(--black); margin-bottom: 10px; }

.hero-product {min-height: 260px;}
.hero-product h1 {margin-bottom: 40px;}

.section .center {display: flex; justify-content:space-between; align-items:flex-start; padding: 80px 0 0; flex-direction:row-reverse;}
.section h2 {font-size: 2.25em; margin: 5px 0 15px;}
.section .text {padding-left: 100px; width: 50%;}
.section .text ul {margin-bottom: 20px;}
.section .text li {position: relative; margin-bottom: 8px; font-size: 0.9375em; line-height: 1.625em;}
.section .text li::before {content:""; display: block; width:5px; height:5px; background: var(--blue); border-radius:50%; position: absolute; left: 0; top:8px;}
.section .text li {padding-left: 20px;}
.section .btn {margin-top: 20px;}
.section img {margin-top: 10px;}

.s-right .center {flex-direction:row;}
.s-right  .text {padding-left:0; padding-right:100px;}

.product-detail .section:last-child {margin-bottom: 80px;}
.product-detail .section h2 {font-size: 1.5em; color: var(--blue);}


/*Servicios*/

#servicios .detail {padding-top: 80px;}
#servicios h1 {font-size: 2.3125em; color:var(--black); margin-bottom:14px;}
#servicios h2  {font-size: 1.5em; margin: 5px 0 15px; color:var(--blue);}

#servicios .detail .section:nth-child(4) {margin-bottom: 80px;}
#servicios .detail .section:nth-child(4) .center { align-items:center;}

.section-list {padding: 80px 0; background: url("../images/hero-image.webp") bottom / cover no-repeat; color:var(--white);}
.section-list .center {display: flex; justify-content:space-between; align-items:flex-start;}
.section-list h2 {color:var(--green)!important;}
.section-list li {display: flex; justify-content:space-between; align-items:flex-start;}
.section-list li span {padding:2px 10px 0 0;}
.section-list .col-2 {margin-top: 44px; width: 48%;}
.section-list .col-1 {width: 44%;}


/*Contacto*/

#contacto .detail {padding: 80px 0;}
#contacto h2 {font-size: 2.3125em; color:var(--black); margin-bottom:14px;}
#contacto h1  {font-size: 1.5em; margin: 5px 0 5px; color:var(--light-blue);}

#contacto .section li {display: flex; justify-content:flex-start; align-items:flex-start; padding-bottom:12px;}
#contacto .section li span {padding:0 10px 0 0;}
#contacto .section li::before {content:none;}
#contacto .section .text li {padding-left: 0;}
#contacto .section img {margin-top: 0;}


/*Nosotros*/

#nosotros .detail {padding: 80px 0 0;}
#nosotros h2 {font-size: 2.3125em; color:var(--black); margin-bottom:14px;}
#nosotros h1  {font-size: 1.5em; margin: 5px 0 5px; color:var(--light-blue);}
#nosotros . .center {width: 1100px; }
#nosotros .s-right .text {padding-right:40px; }

.section-3col {padding: 80px 0; margin-top: 80px; background-color: var(--light-grey); text-align: center;}
.section-3col h2 {font-size: 2.3125em; color:var(--black); margin-bottom:14px;}
.section-3col p {font-size: 1.1em;}

.section-3col li p {font-size:0.875em;}
.section-3col ul {display: flex; justify-content:space-between; align-items:flex-start; margin-top: 40px;}
.section-3col li {width: 28%;}
.section-3col li h3 {color:var(--blue); margin: 10px 0;}