/* Real AEG Metric webfont — the same metricweb-*.woff2 files served on
   aeg.bg (pulled 2026-08-13). Unlike the old locally-vendored Metric-*.woff2
   export, these actually carry (lowercase) Cyrillic glyphs, so Latin and
   Cyrillic finally render from the same typeface instead of two different
   ones glued together. AEG's own site tops out at semibold (600) — there is
   no real 700/800/900 face, so 600 is declared as a range to catch heavier
   requests (e.g. <b>/<strong>, which the UA defaults to weight 700) instead
   of leaving them unmatched and synthetically bolded.

   2026-08-13 follow-up: briefly tried restricting these faces' unicode-range
   to exclude Cyrillic entirely and moving ALL Cyrillic (incl. lowercase) to
   the Inter faces below, based on a canvas measureText() test that seemed to
   show metricweb-regular had zero Cyrillic coverage. Reverted — on real page
   content (not the isolated test string) this made Latin text render
   visibly thinner/smaller than before, i.e. worse, not better.

   2026-08-14 follow-up: revisited specifically for lowercase Cyrillic
   (а-я, U+0430-044F) — pixel-scanned ink-height measurements (canvas
   actualBoundingBox is too coarse to trust at real body-text sizes) showed
   this font's own Cyrillic 'о' draws ~3% taller than its Latin 'o' at the
   same font-size, and sits at 76.5% of this font's own cap-height vs
   Latin's 73.2%, i.e. closer to full-caps size — this is what made
   Cyrillic lowercase read as bigger and flattened the caps/lowercase
   contrast the real AEG site has. Excluded just that range here (same
   fix shape as the existing uppercase-Cyrillic gap below: unicode-range
   carves it out, Inter's already-scaled face below now also covers
   lowercase а-я instead of only caps). */
@font-face {
    font-family: 'metric';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('fonts/metricweb-light.woff2') format('woff2');
    unicode-range: U+0-42F, U+450-10FFFF;
}

@font-face {
    font-family: 'metric';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('fonts/metricweb-regular.woff2') format('woff2');
    unicode-range: U+0-42F, U+450-10FFFF;
}

@font-face {
    font-family: 'metric';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('fonts/metricweb-medium.woff2') format('woff2');
    unicode-range: U+0-42F, U+450-10FFFF;
}

@font-face {
    font-family: 'metric';
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
    src: url('fonts/metricweb-semibold.woff2') format('woff2');
    unicode-range: U+0-42F, U+450-10FFFF;
}

@font-face {
    font-family: 'metric-bold';
    src: url('fonts/Metric-Regular.eot') format('eot'),
        url('fonts/Metric-Regular.ttf') format('ttf'),
        url('fonts/Metric-Regular.woff') format('woff'),
        url('fonts/Metric-Regular.woff2') format('woff2');
}

/* AEG's real Metric webfont (above) does have Cyrillic glyphs, but only
   lowercase — it has NO uppercase Cyrillic (А-Я, U+0410-042F) at all.
   Confirmed 2026-08-13 by rendering "ДИЗАЙН"/"ФУНКЦИОНАЛНОСТ" in isolation
   with no fallback in the stack: every letter fell back to the browser's
   default serif. (An earlier version of this comment claimed Metric had no
   Cyrillic support whatsoever, based on document.fonts.check(), which gives
   false positives here — re-verified by actually rendering the glyphs.)
   These Inter faces now also cover lowercase Cyrillic а-я (U+0430-044F,
   added 2026-08-14 — see the note above Metric's own faces): measured
   raw (unscaled) Inter 'о' ink-height against Metric's own Latin 'o' at
   the same font-size and got the same ~0.82-0.84 ratio as the existing
   caps measurement below, so no separate size-adjust band was needed —
   the single 83% figure already covers both ranges of this face.

   Inter's own weight numbers render visibly heavier than Metric's at the
   same value, so each band is NOT a straight 1:1 weight match — the
   variation-setting was dialed down from its nominal CSS weight in an
   earlier pass, based on eyeballing screenshots taken in a browser session
   that kept freezing mid-measurement — the result rendered visibly too thin
   in practice (2026-08-13 follow-up report), so these now use the literal
   nominal weight with no down-tuning. Bands line up 1:1 with the four real
   Metric weights above (300/400/500/600+) instead of the old, coarser
   3-band grouping. If these ever look mismatched again, re-check visually
   against real page content (not just isolated test strings) before
   changing the numbers — "123" is the only glyph both this Inter subset and
   Metric actually share (no lowercase Latin in this subset), so Latin words
   are not a valid side-by-side comparison.

   `size-adjust: 83%` (2026-08-13): Inter's cap-height/x-height render
   noticeably TALLER than Metric's at the same declared font-size — e.g. the
   "AEG" in an all-caps heading like "ОТКРИЙ С AEG" visibly shrank next to
   the surrounding Cyrillic (Inter) letters despite an identical font-size.
   Measured via canvas actualBoundingBoxAscent+Descent at 200px: Metric caps
   ≈123px / Inter caps ≈146px (ratio ≈0.84), Metric 'o' ≈93px / Inter 'о'
   (Cyrillic) ≈114px (ratio ≈0.82) — consistent enough to use one scale
   factor. This shrinks Inter uniformly (weight, italics etc. unaffected) so
   Cyrillic glyphs visually match Metric's size instead of towering over it.
   Re-measure with the same technique if a different Inter subset file is
   ever swapped in — this number is specific to Inter-Cyrillic.woff2. */
@font-face {
    font-family: 'metric';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    font-variation-settings: 'wght' 300;
    src: url('fonts/Inter-Cyrillic.woff2') format('woff2-variations'),
        url('fonts/Inter-Cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-042F, U+0430-044F, U+0490-0491, U+04B0-04B1, U+2116;
    size-adjust: 83%;
}

@font-face {
    font-family: 'metric';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    font-variation-settings: 'wght' 400;
    src: url('fonts/Inter-Cyrillic.woff2') format('woff2-variations'),
        url('fonts/Inter-Cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-042F, U+0430-044F, U+0490-0491, U+04B0-04B1, U+2116;
    size-adjust: 83%;
}

@font-face {
    font-family: 'metric';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-variation-settings: 'wght' 500;
    src: url('fonts/Inter-Cyrillic.woff2') format('woff2-variations'),
        url('fonts/Inter-Cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-042F, U+0430-044F, U+0490-0491, U+04B0-04B1, U+2116;
    size-adjust: 83%;
}

@font-face {
    font-family: 'metric';
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
    font-variation-settings: 'wght' 600;
    src: url('fonts/Inter-Cyrillic.woff2') format('woff2-variations'),
        url('fonts/Inter-Cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-042F, U+0430-044F, U+0490-0491, U+04B0-04B1, U+2116;
    size-adjust: 83%;
}

/* Var */
:root {
    --orange: #610B24;
    --white: #ffffff;
    --black: #131313;
    --grey: #2C2B29;
    --primary: #21201F;
    --segundary: #CF132F;
    --light-grey: #4C4C4C;
    --inactive: #a6848e;
    --red-dark: #99021e;
    --vine-dark: #370715;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input:-internal-autofill-selected {
    background-color: inherit !important;
}


html,
body {
    font-family: 'metric', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
    line-height: 1.7;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

b {
    font-family: 'metric', Arial, sans-serif;
}

h4 {
    font-family: "metric", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
}





/* Background */
.bg-orange {
    background-color: var(--orange);
}

.bg-black {
    background-color: var(--black);
}

.bg-grey {
    background-color: var(--grey);
}

.bg-segundary {
    background-color: var(--segundary);
}

.bg-vine-dark {
    background-color: var(--vine-dark);
}

.border-blue {
    border: 2px solid var(--orange);
}



/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--grey);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--segundary);
}

/* Goodyear */
.bg-arrow-1 {
    background: url(/img/goodyear/flecha-amarilla.png) no-repeat 0px 54%;
    background-size: cover;
}

.bg-arrow-2 {
    background: url(/img/goodyear/flecha-gris.png) no-repeat 0px 54%;
    background-size: cover;
}

.bg-arrow-1 p {
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 36px;
    padding-left: 0.5rem;
}

.bg-arrow-2 p {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    padding-left: 2.5rem;
}

.form-control:focus {
    box-shadow: none;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

::placeholder {
    color: #A7848F !important;

}

/* Inputs type="date" (p.ej. #project_date en /participate) van sobre fondo oscuro
   (.form-control es transparente con texto blanco, ver style.css). color-scheme:dark
   hace que Chrome/Edge/Safari pinten tanto el icono nativo del calendario como el
   propio desplegable en su variante clara-sobre-oscuro en vez de negro sobre negro.
   OJO: no añadir aquí un filter:invert() sobre ::-webkit-calendar-picker-indicator —
   color-scheme:dark ya vuelve blanco ese icono, e invertirlo lo devuelve a negro. */
input[type="date"] {
    color-scheme: dark;
}

.text-icon {
    height: 100%;
}

.text-segundary {
    color: var(--segundary);
}

/* WEB general end */


/* Navbar */
.nav-link:active {
    color: var(--segundary);
    text-decoration: underline;
}

.logo-gy {
    max-width: 150px;
}

.logo-norauto {
    max-width: 200px;
}


.navbar {
    padding: 0rem 1rem !important;
}


/* Navbar ends */

/* Hero */
.hero-text {
    text-transform: uppercase;
    display: block;
    font-size: calc(1.7vw + 2vh + 1vmin);
    letter-spacing: 0;
    line-height: 1.5;
    color: #131313;
    text-shadow: rgba(255, 255, 255, 0.51) 0px 0px 20px;
    top: calc(1vw + 2vh + 1vmin);
    position: relative;
}

.hero-text-m {
    display: none;
}

.hero-text-box {
    line-height: 0.6;
    display: flex;
    letter-spacing: 2px;
}

.hero-b-value {
    font-size: 7rem;
}

.hero-s-value {
    font-size: calc(0.4vw + 2vh + 1vmin);
    margin: 0 0.3rem;
}

.hero-s-value:first-of-type {
    font-weight: 200;
    margin: 0 0.3rem;
}

.hero-s-value:last-of-type {
    font-weight: 200;
    position: relative;
    top: 50px;
}

.main-section {
    min-height: 84vh;
    min-width: 100%;
}

.main-box {
    /* position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); */
    color: #FFF;
}

.main-box img {
    margin: 2rem 0 0 0;
    width: calc(13vw + 2vh + 1vmin);
}

.main-box-img img {
    position: absolute;
    right: -3rem;
    top: 20%;
    width: calc(35vw + 2vh + 1vmin);
}

/* Hero end */

/* Mechanics */

.grid_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.grid_3 div {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding: 1.5rem 3rem;
    position: relative;
}

.grid_3 img:first-of-type {
    left: 2px;
}

.grid_3 span:first-of-type {
    right: 2px;
    color: var(--orange);
    font-weight: 700;
    font-size: calc(6.5vw + 2vh + 1vmin);
    top: 35%;
}

.grid_3 span {
    color: #131313;
    font-family: "metric", Arial, sans-serif;
    font-size: calc(1.3vw + 1.5vh + 1vmin);
    margin-bottom: 0.5rem;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.grid_3 p {
    color: #131313;
    font-size: 1.2rem;
    letter-spacing: 0;
    line-height: 26px;
    margin-right: 2%;
}

.grid_3_1 {
    grid-area: 1 / 1 / 2 / 2;
}

.grid_3_2 {
    grid-area: 1 / 2 / 2 / 3;
}

.grid_3_3 {
    grid-area: 1 / 3 / 2 / 4;
}

.grid_9 {
    display: grid;
    grid-template-columns: repeat(50% 25% 25%);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    text-align: center;
    align-items: center;
    padding: 0 2rem;
}

.grid_9 span {
    font-family: "metric", Arial, sans-serif;
    color: var(--white);
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 2;
    padding: 1.5rem;
}

.grid_9_1 {
    grid-area: 1 / 1 / 2 / 2;
}

.grid_9_2 {
    grid-area: 1 / 2 / 2 / 3;
}

.grid_9_3 {
    grid-area: 1 / 3 / 2 / 4;
}

.grid_9_4 {
    grid-area: 2 / 1 / 3 / 2;
    text-align: left;
}

.grid_9_5 {
    grid-area: 2 / 2 / 3 / 3;
}

.grid_9_6 {
    grid-area: 2 / 3 / 3 / 4;
}

.grid_9_7 {
    grid-area: 3 / 1 / 4 / 2;
    text-align: left;
}

.grid_9_8 {
    grid-area: 3 / 2 / 4 / 3;
}

.grid_9_9 {
    grid-area: 3 / 3 / 4 / 4;
}

.grid_9_2,
.grid_9_3,
.grid_9_4,
.grid_9_7 {
    background-color: var(--orange);
}

.grid_9_5,
.grid_9_6,
.grid_9_8,
.grid_9_9 {
    background-color: var(--black);
}

/* Mechanics end */
/* Centers */
#map_canvas {
    height: 100vh;
    width: 100%;
}

.blockCenter {
    left: 12%;
    top: 10%;
    width: 35%;
    height: 60vh;
    z-index: 2;
    position: absolute;
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 12px;
    text-align: left;
}

/* Centes end */
/* Register */
#register {
    clear: both;
}

.grid_2 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
}

.grid_2_1 {
    grid-area: 1 / 1 / 2 / 2;
}

.grid_2_2 {
    grid-area: 1 / 2 / 2 / 3;
}

/* #register-completed,
#contact-completed {
    background: url('/assets/images/fondo/bg-black.jpg') no-repeat top center;
    background-size: cover;
} */

#register-completed h2,
#contact-completed h2 {
    font-family: 'metric', Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: 96px;
    text-align: center;
    color: #131313;
}

#contact-completed h2 {
    font-size: 60px;
    font-weight: 200;
}

#register-completed span,
#register-completed h2 span,
#contact-completed span,
#contact-completed h2 span {
    color: #131313;
    font-weight: 700;
}

#register-completed p,
#contact-completed p {
    font-family: 'metric', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: #131313;
    text-align: center;
}

/* Register ends */



/* Media queries */

@media only screen and (max-width: 767px) {

    /* Hero 767px */
    .fs-7 {
        font-size: 13px;
    }

    .hero-m-log {
        position: relative;
        background: #1d1d1b;
        bottom: 0;
    }

    .hero-m-log img {
        width: calc(51vw + 2vh + 1vmin) !important;
        margin: 0 !important;
        position: unset !important;
        padding: 1rem;
    }

    .main-section {

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-position-y: -5rem;
        min-height: 86vh;
    }

    .main-box {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0%, 0%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 85vh;
    }

    .main-box img {
        margin: 2rem 0 0 0;
        /* width: calc(42vw + 2vh + 1vmin); */
        width: 100%;
        position: relative;
        bottom: -5px;
        align-self: center;
    }

    .hero-text {
        display: none;
    }

    .hero-m img {
        position: absolute;
        top: 65px;
        right: -15%;
        z-index: 0;
        width: 52%;
        bottom: auto;
        rotate: 30deg;
    }

    .hero-text-m {
        text-transform: uppercase;
        display: block;
        font-size: calc(1.7vw + 2vh + 1vmin);
        letter-spacing: 0;
        line-height: 1.5;
        color: #131313;
        text-shadow: rgba(255, 255, 255, 0.51) 0px 0px 20px;
        top: calc(1vw + 2vh + 1vmin);
        position: relative;
        /* font-size: 2rem; */
        letter-spacing: 0;
    }

    .bg-arrow-1 p {

        font-size: 1.3em;
    }

    .bg-arrow-2 p {
        font-size: 13px;
    }

    /* grids */

    .grid_2 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 20px;
    }

    .grid_2_1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .grid_2_2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .box-center {
        height: auto;
    }

    .grid_3 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 20px;
    }

    .grid_3 div {
        padding: 1rem;
        justify-content: center;
    }

    .grid_3 span {
        font-size: calc(5vw + 1.5vh + 1vmin);
        margin-bottom: 0.5srem;
    }

    .grid_3 span:first-of-type {
        right: 17%;
        color: var(--orange);
        font-weight: 700;
        font-size: calc(30vw + 2vh + 1vmin);
        top: 26%;
    }

    .grid_3_1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .grid_3_2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .grid_3_3 {
        grid-area: 3 / 1 / 4 / 2;
    }

    .grid_9 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        text-align: center;
        width: 100%;
        align-items: center;
        padding: 0;
    }

    .grid_9 span {
        font-size: calc(0.2vw + 2vh + 1vmin);
        line-height: 2;
        padding: 0.5rem;
    }

    /* contact */
    #contact-completed h2 {
        font-size: 30px;
        line-height: 1.5;
        text-align: center !important;

    }

    #map_canvas {
        height: 100vh;
        width: 100%;
        display: none;
    }

    .blockCenter {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
    }

}

.center_list {
    display: none;
    padding: 10px;
    background-color: #fff;
}

.center_list ul {
    padding: 0;
    list-style: none;
    outline: 0;
    margin: 0;
}

.center_list li {
    padding: 5px 10px;
    padding-bottom: 2px;
    cursor: pointer;
    margin: 0;
    border: 1px solid #fff;
}

.center_list li:hover {
    border: 1px solid #003eff;
    background: #007fff;
    color: #fff;
}