/*  
Theme Name: Piles
Description: Un tema desarrollado para LaBase
Author: W. Wallace
Version: 1.25
*/
@font-face {
    font-family: 'Chillow';
    src: url('https://elsomriuredepiles.com//wp-content/themes/piles/fuentes/chillow.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

    html, body {padding: 0; margin: 0; color: #054944; font-family: Arial, Helvetica, sans-serif;}
    img {display: block;}
    a {text-decoration: none; color: inherit;}
    p {font-size: 16px; line-height: 24px;}
    h1 {font-size: 90px; line-height: 90px; font-family: 'Chillow', Arial, Helvetica, sans-serif;}
    h2 {font-size: 60px; line-height: 70px; font-family: 'Chillow', Arial, Helvetica, sans-serif;}
    h3 {font-size: 36px; line-height: 36px; font-family: 'Chillow', Arial, Helvetica, sans-serif; padding-top: 0px; margin-top: 0; padding-bottom: 0px; margin-bottom: 0;}
    h4 {font-size: 50px; line-height: 50px; font-family: 'Chillow', Arial, Helvetica, sans-serif; padding-top: 8px; margin-top: 0; padding-bottom: 8px; margin-bottom: 0;}
    .header {font-family: 'Chillow', Arial, Helvetica, sans-serif; font-size: 25px; line-height: 25px;}

    .header-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr max-content 1fr; column-gap: 32px; text-align: center; padding-top: 32px; padding-bottom: 16px; align-content: center; align-items: center;}
    .header-content img { width: 100%; height: 65px; width: 154px;}
    .header-content > div:nth-of-type(2) {
        display: grid;
        justify-self: auto;
        text-align: -webkit-center;
    }
    .header-content > div:first-of-type {text-align: left;}
    .header-content > div:last-of-type {text-align: right;}
    .header a {text-decoration: none; color: inherit;}
    .menu-main ul {list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: center;}

.current-menu-item a {  color: #054944;}
.menu-main ul li {  color: #83a4a1;}
    .hero {background-color: #BBECFF; }
    .hero-content {width: 90%; max-width: 1600px; margin: 0 auto; min-height: calc(100vh - 113px); display: grid; align-content: center; padding-bottom: 48px; box-sizing: border-box;}
    .hero-content img { width:  100%; }
    .texto-content p {font-size: 22px; line-height: 30px;}
    .texto {}
    .texto-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; padding-top: 32px; padding-bottom: 50px; padding-top: 100px; }
    .texto-content p {grid-column: span 6;}
    .involucrat {}
    .involucrat-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; padding-top: 32px; padding-top: 50px; }
    .involucrat-content p {grid-column: span 12;}
    .lanzadera {}
    .lanzadera-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; padding-bottom: 100px; }
    .lanzadera-content > div {grid-column: span 4; align-items: flex-end; height: 100%;}
    .lanzadera-content img {width: 100%; padding-bottom: 8px; }

    .lanzadera-content div {
    position: relative;
    display: inline-block;
}

.lanzadera-content .original {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.4s ease-in-out; /* Transición suave */
}

.lanzadera-content .alternativa {
    display: block; /* Siempre visible debajo */
    width: 100%;
}

.lanzadera-content div:hover .original {
    opacity: 0;
}

.footer { color: #898989; }

.footer-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: max-content max-content; align-content: flex-end; padding-bottom: 48px; padding-top: 150px; box-sizing: border-box; column-gap: 32px; align-content: flex-end; align-items: flex-end;}
.footer-content > div {display: grid; grid-auto-flow: column; column-gap: 32px;  align-content: flex-end; align-items: flex-end;}
.titulo {}
.titulo-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; padding-top: 32px; padding-bottom: 32px;}
.titulo-content h1 {grid-column: span 12;}
.phone::before {content: url(https://elsomriuredepiles.com//wp-content/themes/piles/imagenes/phone.svg); margin-right: 16px;}
.whats::before {content: url(https://elsomriuredepiles.com//wp-content/themes/piles/imagenes/whats.svg); margin-right: 16px;}
.horario::before {content: url(https://elsomriuredepiles.com//wp-content/themes/piles/imagenes/horario.svg); margin-right: 16px;}
.map::before {content: url(https://elsomriuredepiles.com//wp-content/themes/piles/imagenes/map.svg); margin-right: 16px;}
.llistat {}
.llistat-content{width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px;}
.comerc {grid-column: span 12; display: grid; grid-template-columns: 3fr 4fr 5fr; column-gap: 32px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 48px; padding-bottom: 48px;}
.comerc p {font-size: 20px; line-height: 24px; font-family: 'Chillow', Arial, Helvetica, sans-serif; margin: 0;}
p.phone, p.whats, p.horario, p.map {font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; margin: unset; padding-bottom: 8px; display: flex;}
.comerc { opacity: 0.5;    transition: opacity 0.4s ease-in-out; /* Transición suave */}
.comerc:hover {opacity: 1;}
.comerc a {text-decoration: none; color: inherit;}
.comerc img {margin-bottom: 16px;}
.banner {}
.banner-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; padding-top: 0; padding-bottom: 0;}
.banner-content div {grid-column: span 12;}
.banner-content img {width: 100%;}
@media (max-width: 1024px) {
    .comerc { grid-template-columns: 1fr;}
    .comerc > div:last-of-type {margin-top: 24px;}
    .footer-content {grid-template-columns: 1fr;}
    .footer-content > div {grid-auto-flow: unset;}
    .footer-content > div:last-of-type p {margin-top:0; margin-bottom: 8px;}
    .footer-content > div:first-of-type {order: 2; padding-top: 32px;}
    .texto-content p {
        grid-column: span 12;
    }
    .lanzadera-content > div {
        grid-column: span 12;
        align-items: flex-end;
        height: 100%;

    }

    .lanzadera-content {row-gap: 50px; max-width: 480px; justify-content: center; justify-items: center; column-gap: unset;}
}
@media (max-width: 980px) {
    .header-content > div:first-of-type {

        display: none;
    }
    .header-content > div:last-of-type {

        display: none;
    }
    .header-content {grid-template-columns: 1fr;}
    .hero-content {


    }
}