/*
Theme Name: Hydrogen Dialogue Chile
Theme URI: https://hydrogendialoguechile.cl/
Author: The HolyMonkey Team
Author URI: https://holymonkey.cl/
Description: Template a medida desarrollado exclusivamente para Hydrogen Dialogue Chile por HolyMonkey.
Version: b1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Hyd
*/

@charset "UTF-8";
/*********************** UTILITIES ***********************/
:root {
    --hd-green: #00FF00;
    --hd-dark-green: #005542;
    --hd-cyan: #00FFFF;
    --hd-dark: #181B1C;
    --hd-gray: #505456;
    --hd-light: #D9E5EC;
    --hd-white: #F4F7F9;
    --hd-white-80: #f4f7f9c0;
    --hd-gradient: linear-gradient(90deg, #00FFFF, #00FF00);
    --shadow-1: 0 11px 13px -6px rgba(0, 0, 0, 0.38);
    --shadow-2: 0 5px 13px -6px rgba(0, 0, 0, 0.38);
    --border: 9px;
    }

.bg-green { background-color: var(--hd-green); }
.bg-dark-green { background-color: var(--hd-dark-green); }
.bg-cyan { background-color: var(--hd-cyan); }
.bg-dark { background-color: var(--hd-dark); }
.bg-light { background-color: var(--hd-white); }
.hyd-bg-gradient { background: var(--hd-gradient) !important; }

.text-dark { color: var(--hd-dark); }
.text-gray { color: var(--hd-gray); }
.text-dark-green { color: var(--hd-dark-green); }
.text-green { color: var(--hd-green); }
.text-cyan { color: var(--hd-cyan); }
.hyd-text-light { color: var(--hd-light); }
.hyd-text-light-80 { color: var(--hd-white-80); }

.border-green { border-color: var(--hd-green); }
.border-dark-green { border-color: var(--hd-dark-green); }
.border-cyan { border-color: var(--hd-cyan); }
.border-dark { border-color: var(--hd-dark) !important; }
.border-light { border-color: var(--hd-white); }
/* .hyd-border-gradient { border-image: var(--hd-gradient); } */

.ft-text { font-family: "Istok Web", sans-serif; }
.ft-title { font-family: "Source Sans 3", sans-serif; text-transform: uppercase; font-weight: 720; }
em { font-size: 1.375rem; }

.hyd-shadow-xl { box-shadow: 5px 1rem 5rem -9px rgba(0, 0, 0, 0.15); }
/*********************** GENERALES ***********************/
* {
    padding: 0;
    margin: 0;
    font-family: "Istok Web", sans-serif;
    font-style: normal;
    color: var(--hd-dark);
    list-style: none;
}
nav {
    width: 90%;
    margin: 15px auto;
    border-radius: var(--border);
    z-index: 100;
}
li.menu-item a {
    text-decoration: none;
    margin: 1rem;
    font-size: 1rem;
    color: var(--hyd-gray);
    font-family: "Source Sans 3";
}
.nav--logo{
    width: 30%;
}
.button {
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}
.button--primary {
    background-color: var(--hd-white);
    border: 2px solid var(--hd-white);
    color: var(--hd-dark-green);
    box-shadow: var(--shadow-2);
}
.button--dark {
    background-color: var(--hd-dark-green);
    border: 2px solid var(--hd-dark-green);
    color: var(--hd-white);
}
.button--gradient {
    background: var(--hd-gradient);
    color: var(--hd-dark);
    box-shadow: var(--shadow-2);
}
.button--secondary {
    background: var(--hd-gradient);
    position: relative;
}
.button--secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hd-white);
    z-index: 0;
    margin: 2px;
}
.button--secondary span {
    position: relative;
    z-index: 2;
}
.button--terciary {
    color: var(--hd-dark-green);
    text-decoration: underline;
    text-decoration-thickness: 3px;
}
.button--primary:hover {
    border: 2px solid var(--hd-white);
    color: var(--hd-white);
}
.button--dark:hover {
    border: 2px solid var(--hd-dark-green);
    color: var(--hd-dark-green);
}
.button--primary:hover, .button--dark:hover {
    background-color: transparent;
}
.button--terciary:hover {
    color: var(--hd-dark);
    text-decoration-thickness: 4px;
}
.button--primary:hover, .button--secondary:hover, .button--gradient:hover {
    box-shadow: var(--shadow-1);
}
.img-cover {
    overflow: hidden;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    display: block;
}
.cta--primary {
    position: relative;
    z-index: 2;
}
.cta--primary_row, .home--header_counter, .track--card {
    border-radius: var(--border);
}
.cta--primary_img, .cta--secondary_img {
    height: 250px;
    border-radius: var(--border) var(--border) 0 0;
}
.cta--left {
    border-radius: 0 var(--border) var(--border) 0 !important;
}
.cta--primary_p h4{
    font-size: calc(1.275rem + .9vw);
}
.cta--secondary_item {
    display: block;
    /* list-style: none; */
}
.cta--secondary_item, .counter--text, .home--visitors_item p, .track--card_li, .track--card_title em, .location--card_name{
    font-size: 1rem;
    line-height: 1rem;
}
footer {
    background: url("img/PNG/footer-hydrogen-dialogue-chile-lithiumx-2025-antofagasta.png") no-repeat center/cover;
}
.collab-logo{
    width: 130px !important;
}
h2 span.text-green{
    font-family: "Source Sans 3", sans-serif;
}
/*********************** ANIMATION KEYFRAMES ***********************/

@keyframes animate-in-and-out {
	entry 0%  {
		opacity: 0; transform: translateY(100%);
	}
	entry 100%  {
		opacity: 1; transform: translateY(0);
	}

	exit 0% {
		opacity: 1; transform: translateY(0);
	}
	exit 100% {
		opacity: 0; transform: translateY(-100%);
	}
}
@keyframes animate-in {
	entry 0%  {
		opacity: 0; transform: translateY(100%);
	}
	entry 100%  {
		opacity: 1; transform: translateY(0);
	}

	exit 0% {
		opacity: 1; transform: translateY(0);
	}
	exit 100% {
		opacity: 1; transform: translateY(-10%);
	}
}
@keyframes animate-follow {
	entry 0%  {
		transform: translateY(-40vh);
	}
	entry 100%  {
		transform: translateY(-35vh);
	}

	exit 0% {
		transform: translateY(-28vh);
	}
	exit 100% {
		transform: translateY(-2vh);
	}
}
/*********************** HOMEPAGE ***********************/
.home--header {
    transform: translateY(-12rem);
}
.home--header_slider{
    height: 74vh;
    z-index: -3;
    position: relative;
    overflow: hidden;
}
img.slider--img {
    height: 45vh;
}
.home--header_slider::before {
    content: '';
    background: url('img/SVG/after-slider.svg') no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 35.4rem;
    z-index: 2;
}
.home--header_slider::after {
    content: '';
    background: url('img/SVG/before-slider-2.svg') no-repeat;
    background-position: right center;
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 14rem;
    z-index: 2;
}
.home--header_container {
    position:relative;
    transform: translateY(-29vh);
    animation: linear animate-follow;
	animation-timeline: view(y);
}
.home--header_counter {
    transform: translateY(1rem);
}
.home--header_card img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.counter--card_left {
    border-bottom-left-radius: var(--border);
}
.counter--card_right {
    border-bottom-right-radius: var(--border);
}
.counter--title, .counter--text {
    font-weight: 600;
}
.counter--number, .opportunity--card_subtitle, em {
    font-weight: 700;
}
.counter--title, .track--card_title {
    border-top-left-radius: var(--border);
    border-top-right-radius: var(--border);
}
.counter--number {
    font-size: calc(1.375rem + 2.3vw);
}
.counter--text {
    line-height: 0.6;
}
.home--value{
    margin-top: -41vh;
}
.home--speakers {
    margin-top: 37vh;
}
.home--opportunity {
    background: url("img/SVG/bg-opportunity-vertical.svg") no-repeat center 24vh/50%;
}
.cta--secondary_item , .home--opportunity_card{
    text-align: center;
}
.home--opportunity_card{
    animation: linear animate-in;
	animation-timeline: view();
}
.opportunity--card_img, .speakers--card_img, .location--card_img, .home--visitors_icon, .cta--secondary_icon {
    border-radius: 50%;
}
.opportunity--card_img {
    height: 200px;
    width: 200px;
    border: 2px solid var(--hd-white);
}
.home--visitors_item {
    display: flex;
    gap: 10px;
    align-items: center;
}
.home--visitors_icon, .cta--secondary_icon {
    padding: 5px;
    font-size: 0.75rem;
    background: var(--hd-gradient);
    display: inline-flex;
    justify-content: center;
}
.home--visitors_item p , .track--card_li{
    margin: 0;
}
.home--counters {
    background: url("img/SVG/bg-counters.svg") no-repeat center/contain;
}
.home--counters_card {
    background-color: var(--hd-white);
    animation: linear animate-in-and-out;
	animation-timeline: view();
}

.home--speakers, .home--sponsors {
    background: url("img/PNG/bg-blobs@2x.png") no-repeat center/cover;
    margin-top: -15rem;
}
.home--speakers_row, .home--sponsors_row {
    padding-top: 24rem;
}
.speakers--card {
    position: relative;
}
.speakers--card img {
    height: 7rem;   
    width: 7rem;
}
.speakers--card img, .location--card img{
    margin: auto;
}
.speakers--card::before {
    content: "";
    background: url("img/PNG/blob-speaker.png") no-repeat center/cover;
    display: block;
    z-index: -1;
    position: absolute;
    top: 7px;
    left: calc(50% - 56px);
    width: 118px;
    height: 118px;
}
.home--tracks {
    background: url("img/SVG/bg-temas.svg") no-repeat bottom center/contain;
}
.track--card_list {
    /* list-style: none; */
    padding: 0 12px;
}
.track--card_li {
    text-align: left;
    line-height: 1.09rem;
    padding: 9px 15px 9px 35px;
    border-bottom: 1px solid var(--hd-green);
}
.track--card:last-child > article > ul > li.track--card_li{
    text-align: center;
}
.home--tracks_card:nth-child(2) > article > ul > li {
    border-bottom-color: var(--hd-cyan);
}
.track--card_li:last-child,
.home--tracks_card:nth-child(2) > article > ul > li.track--card_li:last-child {
    border-bottom: none;
}
.home--location_items {
    margin-top: -3rem;
}
.location--card img {
    height: 4rem;
    width: 4rem;
}
/*********************** AJUSTES POR PANTALLA ***********************/ 
/*********************** MD > 768PX ***********************/ 
@media (min-width: 768px) {
    .home--header_slider::before {
    width: 100%;
    top: 33rem;
    }
    .home--header_slider::after {
    background-position: right center;
    width: 100%;
    height: 60%;
    bottom: 11rem;
    }
    .home--value_img, .home--location_img {
        border-radius: 0 35px 35px 0;
    }
    .home--value_img {
        height: 100%;
    }
    .home--location_img {
        height: 450px;
    }
    .home--speakers_img, .home--sponsors_img {
        border-radius: 35px 0 0 35px;
        height: 40vh;
    }
    .speakers--card img {
        height: 9rem;
        width: 9rem;
    }
    .speakers--card::before {
        left: calc(50% - 76px);
        width: calc(60% + 20px);
        height: calc(49% + 16px);
    }
    .home--opportunity {
        background: url("img/SVG/bg-opportunity.svg") no-repeat center 25vh/120%;
    }
    .cta--primary_img {
        height: 280px;
        border-radius: var(--border) 0 0 var(--border);
    }
}
/*********************** LG > 992PX ***********************/ 
@media (min-width: 992px) {
    .home--header_slider::after {
        height: 26%;
        bottom: 15rem;
    }
    .home--header_counter {
        transform: translateY(7rem);
    }
    .home--value {
        margin-top: -42vh;
    }
    .home--opportunity {
        background-size: cover;
    }
    .cta--secondary_img {
        height: 305px;
        clip-path: circle(56% at 50% 50%);
        overflow-y: hidden;
    }
    .cta--secondary_p {
        margin-left: -36px;
        z-index: 2;
        font-size: 1rem;
    }
    .cta--secondary_item:first-child {
        margin-left: -8px;
    }
}
/*********************** XL > 1200PX ***********************/ 
@media (min-width: 1200px) {
    .cta--primary_p h4 {
        font-size: 2rem;
    }
    .counter--number {
        font-size: 2.9rem;
    }
    .counter--text {
        font-size: 1.2rem;
    }
    .speakers--card::before {
        left: calc(50% - 73px);
        width: calc(48% + 23px);
        height: calc(49% + 16px);
    }
}
/*********************** XXL > 1400PX ***********************/ 
@media (min-width: 1400px) {
    .home--header_slider::before {
    top: 30rem;
    }
    .home--header_slider::after {
    height: 35%;
    bottom: 13rem;
    }
    .speakers--card::before {
        width: calc(67% + 20px);
        height: calc(43% + 24px);
    }
    .cta--secondary_p {
        margin-left: -110px;
    }
    .cta--secondary_item {
        font-size: 1.24rem;
    }
}
/*********************** SPECIAL BREAKPOINTS < 424PX ***********************/
@media (max-width: 424px) {
    .home--header_slider::after {
        height: 17%;
        bottom: 17rem;
    }
}
/*********************** SPECIAL BREAKPOINTS > 1600PX ***********************/
@media (min-width: 1600px) {
    img.slider--img {
        height: 76vh;
    }
    .home--header_slider {
        height: 90vh;
    }
    .home--header_slider::before {
        top: 55rem;
    }
        .home--header_slider::after {
        bottom: 0rem;
    }
}
/*********************** SPECIAL BREAKPOINTS > 2000PX ***********************/
@media (min-width: 2000px) {
    .home--header_slider::before {
        top: 50rem;
    }
    .home--header_slider::after {
        height: 50%;
    }
}