/* Fonts */

.frijole-regular { font-family: "Frijole", system-ui; font-weight: 400; font-style: normal; }
.barrio-regular { font-family: "Barrio", system-ui; font-weight: 400; font-style: normal; }
.square-peg-regular { font-family: "Square Peg", cursive; font-weight: 400; font-style: normal; }
.cause-text { font-family: "Cause", cursive; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
.barriecito-regular { font-family: "Barriecito", system-ui; font-weight: 400; font-style: normal; }
.doto-regular { font-family: "Doto", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "ROND" 0; }
.bitcount-grid-single-type {
    font-family: "Bitcount Grid Single", system-ui;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "slnt" 0, "CRSV" 0.5, "ELSH" 0, "ELXP" 0;
}

/* Email Octopus */

.btn {height: 40px;}

/* Page */
html, body { padding: 0; margin: 0; width: 100%; max-width: 100vw; overflow-x: hidden; }
body { background-color: #161617; color: #fff; position: relative; }

.green { color: #009246; }
.red { color: #F61313; }
.blue { color: #0158FF; }

/* Texts */
h1 { font-family: "Square Peg"; font-weight: 100; font-size: 3em; }
h2 { font-family: "Barrio"; font-weight: 100; }
h3 { font-family: "Barriecito", system-ui; font-weight: 100; margin: 0; }
h4 { font-family: "Bitcount Grid Single", system-ui; font-weight: 200; font-size: 4em; padding: 0; margin: 0; }
h5 { font-family: "Bitcount Grid Single", system-ui; font-weight: 200; font-size: 2em; padding: 0; margin: 0; }
p { font-family: "Cause"; }

/* Margins / widths */
.perc70 { margin: auto; width: 70vw; }

/* Elements */
.link1 { text-align: center; font-family: "Cause"; font-weight: 200; font-size: 1em; color: #0158FF; }

#logo {
    position: absolute;
    top:330px;
    bottom: 0vw;
    /*width: 32vw;*/
    height: 35%;
    z-index: 3;
}
#logo-footer {float:left; width: 18vw; }

#hero {
    position: relative;
    /*width: 100vw;*/
    min-height: 34vw;
    margin-top: 3%;
    clear: both;
}

#faq {background: url(/Originales/Imagenes/volantin_2.svg) no-repeat;
background-position: 50%;
background-size:contain;

background-position-x: 50%;
background-origin:content-box;}

#faq a {color: #fff; }
#faq p {line-height: 1.5em;}
.youbtn {width: 29px; margin-right: 10px; vertical-align: middle;}

.hero-bg-text {
    position: absolute;
    inset: 0;
    top:0px;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: flex-start;
    z-index: 1;
    pointer-events: none;
    text-align: center;
}

.led-line {
    font-family: "Bitcount Grid Single", system-ui;
    font-weight: 200;
    font-size: clamp(9rem, 6vw, 4rem);
    line-height: 1.1;
    text-align: left; 
}

.led-line2 {
    font-family: "Bitcount Grid Single", system-ui;
    font-weight: 150;
    font-size: clamp(9rem, 6vw, 4rem);
    /*line-height: 1.15;*/
    
}


.led-letter {
    display: inline-block;
    animation: ledCycle 2.4s linear infinite;
}
 
@keyframes ledCycle {
    0%, 32.99%  { color: #ffffff; }
    33%, 65.99% { color: #0158FF; }
    66%, 99.99% { color: #F61313; }
    100%        { color: #ffffff; }
}
/* Cada letra se envuelve en un span desde script.js para lograr el
   efecto "LED corriendo": mismo ciclo de color, desfasado por letra. 
.led-letter {
    display: inline-block;
    animation: ledCycle 2.4s linear infinite;
}

@keyframes ledCycle {
    0%   { color: #ffffff; }
    33%  { color: #0158FF; }
    66%  { color: #F61313; }
    100% { color: #ffffff; }
}*/

#caballocompleto {
    position: absolute;
    right: -25px;
    bottom:0;
    /*width: 62vw;*/
    height: 90%;
    z-index: 2;
}

/* ---------- FAQ (100% width container, 50% desktop / 70% mobile columns) ---------- */
#faq { width: 100%; margin-top:2%; margin-bottom:0; position: relative; display: flow-root; }

.faq-left, .faq-right {
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 5%;
}

.faq-left { float: left; clear: both; margin-left: 0; }
.faq-right { float: right; clear: both; margin-right: 0; }

.faq-left p, .faq-left .video {
    margin-left: 33%;
    margin-right: 5%;
    clear: both;
    font-size: 1.3em;
}

.faq-right p, .faq-right .video, .faq-right .eo-form-wrap {
    margin-right: 33%;
    margin-left: 5%;
    clear: both;
    font-size: 1.3em;
}

.slant-left h3, .slant-left2 h3 {
    padding-right: 8%;
    font-size: 2em;
    background-color: #0158FF;
    transform-origin: left center;
    text-align: right;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.slant-right h3, .slant-right2 h3 {
    padding-left: 8%;
    font-size: 2em;
    background-color: #F61313;
    transform-origin: right center;
    text-align: left;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.slant-left h3  { clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
.slant-left2 h3 { clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%); }
.slant-right h3  { clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); }
.slant-right2 h3 { clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%); }

/* .video: ligeramente más pequeño que el párrafo FAQ normal (1.3em) */
#faq .video { font-size: 1.05em; }
form input {
    background-color: #161617;
    color: #fff;
    font-family: "Cause";
    border: #0158FF solid 1px;
    border-radius: 7px;
    height: 25px;
    padding: 3px 5px;
}

form button {
    margin-left: 10px;
    background-color: green;
    border: none;
    border-radius: 7px;
    height: 25px;
    color: #fff;
    font-family: "Cause";
}
#intro {margin: auto 30%; }
#intro h1 { text-align: left; margin-left: -50px;  font-size: 5em; clear: both; }
#intro p {font-size:1.5em; text-wrap: inherit;}

#countdown {
    width: 40%;
    margin: 10% auto 7% auto;
    box-sizing: border-box;
    text-align: center;
    border: solid 10px #0158FF;
    clear: both;
}
#countdown h6 { color: #F61313; font-size: 2em; margin:0; padding:4% 0 1% 0;  }
#countdown h2 { color: #F61313; font-size: 5.5em; margin:0; padding:0 0 4% 0; }

#explainer { text-align: center; overflow: hidden; clear: both;}
#explainer h2 { font-size: 3rem; }

/* Stage: contenedor de proporción fija (misma proporción que la referencia,
   497:435) para poder posicionar todo por porcentaje y que escale igual
   en cualquier pantalla sin necesidad de media queries por elemento. */
.explainer-stage {
    position: relative;
    width: min(90vw, 600px);
    aspect-ratio: 497 / 435;
    margin: 3rem auto;
}

.explainer-stage img {
    position: absolute;
    width: auto;
    display: block;
}

/* Tarjeta chimpanzini (arriba a la izquierda) */
.chimpanzini {
    left: 6%;
    top: 14%;
    width: 38%;
    height:40%;
    z-index: 1;
    /* rotate se aplica desde script.js (anime.js necesita "poseer" la
       propiedad transform desde el principio, si no la pisa en el sway) */
}

/* Bandera Italia, sobre la esquina sup. izq. de chimpanzini, fuera de la tarjeta */
.italy-flag {
    left: 8%;
    top: 9%;
    width: 15%;
    height:9%;
    z-index: 2;
}

/* Texto/gráfico "Flamenco + Copihue", flotando en el espacio entre ambas tarjetas */
.flamenco {
    left: 47%;
    top: 7%;
    width: 26%;
    z-index: 2;
}

/* Tarjeta Flapihue (abajo a la derecha, más grande, por encima de chimpanzini) */
.flapihue {
    left: 37%;
    top: 35%;
    width: 50%;
    height:70%;
    z-index: 3;
    /* rotate se aplica desde script.js, mismo motivo que en .chimpanzini */
}

/* Bandera Chile, sobre la esquina sup. derecha de Flapihue, fuera de la tarjeta */
.chile-flag {
    left: 83%;
    top: 25%;
    width: 17%;
    height: 20%;
    z-index: 4;
}

/* Flecha curva de chimpanzini hacia Flapihue */
.arrow {
    left: 16%;
    top: 60%;
    width: 18%;
    z-index: 5;
}

/* Sello "Chilenizado" debajo de la flecha */
.chilenizado {
    left: 2%;
    top: 75%;
    width: 9%;
    height: 20%;
    z-index: 5;
}

.formula-result {
    font-size: clamp(6rem, 5vw, 4rem);
    text-align: center;
    margin: -2rem 0 0 20rem;
    z-index: 6;
}



#brand-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 50px;
    margin-bottom: 90px;
    padding-bottom: 40px;
    clear: both;
}
#logo-footer { float: none; width: 18vw; max-width: 220px; display: block; }
.footer-copy {
    float: none;
    position: static;
    color: #FFF;
    font-size: 1rem;
    line-height: 1.5;
    margin-left: 40px;
    top: 0;
}

.eo-form-wrap { margin-top: 1rem; overflow: visible; }
#eo-form-wrap { overflow: visible; }

/* MARQUEE */
.ribbon-marquee {
    width: 100%;
    background-color: #FFFFFF;
    border-top: clamp(8px, 2vw, 16px) solid #0033A0;
    border-bottom: clamp(8px, 2vw, 16px) solid #DA291C;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin-top: 0;
}

.marquee-track { display: inline-block; white-space: nowrap; }
.marquee-text {
    font-size: clamp(1rem, 1vw, 1rem);
    font-weight: 700;
    color: #000;
    display: inline-block;
}

/* ---------- Ribbons SVG cruzados ---------- */
.ribbon-svg-container {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 340px;
    margin-top: 35px;
    margin-bottom: 35px;
    overflow: hidden;
    z-index: 10;
}

.ribbon-img {
    position: absolute;
    top: 50%;
    left: 30%; /* El cruce está posicionado en el 30% izquierdo de la pantalla */
    width: 250vw;
    height: 32px;
    pointer-events: none;
    display: block;
}

.ribbon-img-1 {
    transform: translate(-50%, -50%) rotate(5.5deg);
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.75));
}

.ribbon-img-2 {
    transform: translate(-50%, -50%) rotate(-5.5deg);
    z-index: 1;
}

.ribbon-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- Initial hidden states (only applied once JS confirms it's running) ---------- */
.js .ribbon-marquee,
.js #logo,
.js .hero-bg-text,
.js #caballocompleto,
.js #countdown,
.js #intro h1,
.js #intro p,
.js #explainer h2,
.js .chimpanzini,
.js .italy-flag,
.js .flamenco,
.js .flapihue,
.js .chile-flag,
.js .arrow,
.js .chilenizado,
.js .formula-result,
.js .faq-left,
.js .faq-right,
.js #logo-footer,
.js .footer-copy {
    opacity: 0;
}

.js .slant-left h3,
.js .slant-left2 h3,
.js .slant-right h3,
.js .slant-right2 h3 {
    transform: scaleX(0);
}

.js .slant-left h3 span,
.js .slant-left2 h3 span,
.js .slant-right h3 span,
.js .slant-right2 h3 span {
    opacity: 0;
    display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1260px) {
    #faq {background: url(/Originales/Imagenes/volantin-small.svg) no-repeat;
background-position: 20%;
background-size:contain;
background-position-x: 50%;
background-position-y: top;
background-origin:content-box;}




@media (max-width: 768px) {
    .faq-left, .faq-right { max-width: 70%; }


#intro {width: 80%; margin:auto;}
    #intro h1 { font-size: 5em; margin-left: 0; text-align: center; }
    #intro p {font-size:1.2em; line-height: 1.3em;}
    h4 { font-size: 2.6em; }
    h5 { font-size: 1.3em; }
    #explainer h2 { font-size: 1.4rem; }

    #hero { min-height: 60vw; }
    #logo { width: 45vw; }
    #caballocompleto { width: 78vw; }
    .led-line { font-size: clamp(1.4rem, 8vw, 2.4rem); }

    #logo-footer { width: 55vw; margin: auto;  }
    #footer { width: 90vw; }
    #brand-footer { width: 90vw; }


    
#explainer { text-align: center; overflow: hidden; clear: both;}
#explainer h2 { font-size: 2rem; }

/* Stage: contenedor de proporción fija (misma proporción que la referencia,
   497:435) para poder posicionar todo por porcentaje y que escale igual
   en cualquier pantalla sin necesidad de media queries por elemento. */
.explainer-stage {
    position: relative;
    width: min(90vw, 600px);
    aspect-ratio: 497 / 435;
    margin: 3rem auto;
}

.explainer-stage img {
    position: absolute;
    width: auto;
    display: block;
}

/* Tarjeta chimpanzini (arriba a la izquierda) */
.chimpanzini {
    left: 3%;
    top: 12%;
    width: 38%;
    height: 40%;
    z-index: 1;
    /* rotate se aplica desde script.js (anime.js necesita "poseer" la
       propiedad transform desde el principio, si no la pisa en el sway) */
}

/* Bandera Italia, sobre la esquina sup. izq. de chimpanzini, fuera de la tarjeta */
.italy-flag {
    left: 0;
    top: 3%;
    width: 15%;
    height: 15%;
    z-index: 2;
}

/* Texto/gráfico "Flamenco + Copihue", flotando en el espacio entre ambas tarjetas */
.flamenco {
    left: 43%;
    top: 0;
    height: 30%;
    z-index: 2;
}



/* Tarjeta Flapihue (abajo a la derecha, más grande, por encima de chimpanzini) */
.flapihue {
    left: 30%;
    top: 36%;
    width: 50%;
    height: 65%;
    z-index: 3;
    /* rotate se aplica desde script.js, mismo motivo que en .chimpanzini */
}

/* Bandera Chile, sobre la esquina sup. derecha de Flapihue, fuera de la tarjeta */
.chile-flag {
    left: 65%;
    top: 25%;
    width: 17%;
    height: 27%;
    z-index: 4;
}

/* Flecha curva de chimpanzini hacia Flapihue */
.arrow {
    left: 16%;
    top: 55%;
    width: 18%;
    height: 20%;
    z-index: 5;
}

/* Sello "Chilenizado" debajo de la flecha */
.chilenizado {
    left: 0%;
    top: 64%;
    width: 9%;
    height: 20%;
    z-index: 5;
}

.formula-result {
    font-size: clamp(4rem, 5vw, 4rem);
    text-align: center;
    margin: -3.0rem auto 1rem;
    
}

.hero-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 2%;
    top:355px;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    font-size: 5em;
}

.led-line {
    font-family: "Bitcount Grid Single", system-ui;
    font-weight: 200;
    font-size: clamp(4rem, 6vw, 4rem);
    line-height: 1.15;
}

.led-line2 {
    font-family: "Bitcount Grid Single", system-ui;
    font-weight: 200;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.15;
}

#hero {
    position: relative;
    width: 100%;
    min-height: 130vw;
    overflow: hidden;
    margin-top: 3%;
    clear: both;
}
#logo {
    position: absolute;
    width: 75vw;
    height: auto;
    top:0;
    padding-top: 50px;
    left:3.1em;
    z-index: 3;
    
}

#caballocompleto {
    position: absolute;
    top:150px;
    width: 95%;
    height: auto;
    z-index: 2;
    left:0.5em;
    clear: both;
}

#countdown {
    width: 96%;
    margin: 5% auto;
    box-sizing: border-box;
    text-align: center;
    border: solid 10px #0158FF;
    clear: both;
}
#countdown h6 { color: #F61313; font-size: 1.5em; margin: 0; padding: 5% 0; }
#countdown h2 { color: #F61313; font-size: 3em; margin: 0; padding: 5% 0; }

#mailing {
    float: none !important;
    width: 85% !important;
    margin: 0 auto 20% auto !important;
    clear: both;
    text-align: center;
}

#mailing p { orphans: 0; widows: 0; width: 100%; text-align: center; margin-left: 0; }
#mailing .eo-form-wrap { margin-left: 0; overflow: visible; }

#faq {  margin-top:15%; margin-bottom:0; background: none;}

.faq-left {
    width: 92%;
    float: left;
    clear: both;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 12%;
}

.faq-right {
    width: 92%;
    float: right;
    clear: both;
    margin-right: 0;
    margin-left: auto;
    margin-bottom: 12%;
}

.faq-left p, .faq-left .video {
    margin-left: 8%;
    margin-right: 4%;
    font-size: 1.1em;
}

.faq-right p, .faq-right .video, .faq-right .eo-form-wrap {
    margin-right: 8%;
    margin-left: 4%;
    font-size: 1.1em;
}

.ribbon-svg-container {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    height: 90px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ribbon-img {
    left: 30%;
    width: 250vw;
    height: 22px;
}

.ribbon-img-1 {
    transform: translate(-50%, -50%) rotate(6.5deg);
}

.ribbon-img-2 {
    transform: translate(-50%, -50%) rotate(-6.5deg);
}
.slant-right h3, .slant-left h3, .slant-right2 h3 {font-size: 1.2em;}
.video {font-size: 0.7em;}
.slant-left2 h3 {font-size: 1.1em;}
.slant-right2 h3 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); padding-left: 5%; padding-right: 5%; text-align: center; }

#brand-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 90vw;
    margin-top: 30px;
    margin-bottom: 70px;
    padding-bottom: 40px;
}
#logo-footer { width: 40vw; max-width: 180px; margin: 0 auto 15px auto; float: none; display: block; }
.footer-copy { position: static; float: none; margin: 0; font-size: 0.75rem; line-height: 1.4; text-align: center; }



 }
}