/* ---------------------------------------------------------------------------
   Webfonts, self-hosted (audit item 2.8).

   They used to arrive as three @import rules against Google's font CSS endpoint, which
   meant: the browser had to download and parse this stylesheet before it even
   learned the font requests existed, every visitor's IP went to Google on every
   page view, and first paint waited on two extra DNS+TLS hops.

   These files are the exact faces those three @imports were delivering, byte for
   byte, taken from Google's font CDN and kept to the latin and latin-ext subsets
   (this site is Spanish and English; the cyrillic, greek, vietnamese and
   devanagari subsets were downloaded by nobody). The @font-face set is
   deliberately NOT "corrected":

     - Ubuntu now ships 400 AND 700. It shipped 400 only until 2026-08-29, and so
       did the three @imports before it: they asked for `Ubuntu:wght@400;700`, which
       is v2 syntax sent to the v1 css? endpoint, which ignores it and returns
       regular. Every uppercase Ubuntu heading on this site — and every heading is
       Ubuntu at font-weight:700 — was therefore drawn in the browser's SYNTHETIC
       bold, an algorithmic smear of the regular face, for years. The real 700 is
       here now; it is a designed weight and it is what the CSS has always asked
       for.
     - Poppins now ships 400 AND 700, for exactly the same reason and fixed on the
       same day. `.faq-question { font-weight: bold }` and every <strong> inside a
       `.faq-answer` ask Poppins for 700; only 400 was ever delivered, so all seven
       FAQ questions and all eleven bold benefit labels were synthetic too. 13,248 B
       for the pair. A request for 500 (.menu-btn, .link-button) still resolves to the
       400 face and is NOT synthesised — the browser picks the nearest real weight
       below 600 — so those are unchanged.
     - Lora and Raleway are variable files, so one woff2 covers all their weights.

   Fourteen files; a Spanish visitor downloads five of them (Ubuntu 400 + 700,
   Poppins 400 + 700, Lora latin = 118 KB) — the two extras are the bolds the
   browser used to fake.
   --------------------------------------------------------------------------- */
/* Ubuntu 400 normal, latin */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ubuntu-latin.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;
}
/* Ubuntu 400 normal, latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ubuntu-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Ubuntu 700 bold, latin */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ubuntu-700-latin.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;
}
/* Ubuntu 700 bold, latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ubuntu-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 400 normal, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin.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;
}
/* Poppins 400 normal, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 bold, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700-latin.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;
}
/* Poppins 700 bold, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 400 italic, latin */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-italic-latin.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;
}
/* Lora 400 italic, latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 400 normal, latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-latin.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;
}
/* Lora 400 normal, latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 700 normal, latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lora-latin.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;
}
/* Lora 700 normal, latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 300 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/raleway-latin.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;
}
/* Raleway 300 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 600 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/raleway-latin.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;
}
/* Raleway 600 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 700 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/raleway-latin.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;
}
/* Raleway 700 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 900 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/raleway-latin.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;
}
/* Raleway 900 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*Global Settings*/

:root {
    /*Colours*/
    --main-color: #a30006;
    /*Fonts*/
    --main-font: 'Ubuntu', sans-serif;
    --second-font: 'Poppins', sans-serif;
}

body {
    font-family: 'Lora', serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 700;
    color: #424242;
    margin-bottom: 35px;
    margin-top: 0;
}

h1 {
    font-size: 45px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 21px;
}

p {
    font-family: var(--second-font);
    font-size: 16px;
    color: #767676;
}

a {
    transition: all 0.3s ease-in-out;
}

section {
    text-align: center;
}

ul { 
    padding:0 
}

.blockquote p {
    font-size: 32px;
    line-height: 45px;
    padding-left: 30px;
    border-left: 3px solid #424242;
    color: #424242;
}

.title {
    position: relative;
    margin-bottom: 100px;
}

.subtitle {
    margin-top: 10px;
    font-weight: 100;
    text-transform: none;
    font-size: 15px;
}

.section-title{
    font-size: 32px;
    line-height: 1.42857143;
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 700;
    color: #424242;
    margin-bottom: 100px;
    margin-top: 0;
}

.text-title {
    font-family: var(--second-font);
    text-transform: none;
    color: #fff;
    margin-top: 10px;
    letter-spacing: 2px;
    font-weight: normal;
}

/* The hero subtitle is a <p>, not an <h2>: it is a line of prose under the h1,
   not a section of the document (audit item 2.6). These four declarations are
   what the <h2> was getting from the heading rules above, restated, so the swap
   moves nothing -- without them `.header p` would give it 32px/1.43 and 40px of
   padding-bottom and push the ¡ME APUNTO! button 15px down. */
.header .text-title {
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 35px;
    padding-bottom: 0;
}

/* Same idea for the two headings that gain a level: an <h1> on inscripcion.html
   is the page title and must still be drawn at the 32px section-title size, and
   the contact heading becomes an <h2> whose <p> line-height is restated so the
   section below it does not move up by 10px. */
h1.title {
    font-size: 32px;
}

.title:after {
    content: '';
    height: 5px;
    width: 40px;
    background-color: var(--main-color);
    position: absolute;
    top: 80px;
    left: calc(50% - 20px);
}

.association-logo {
    width: 25rem;
    height: auto;
}

.menu-logo {
    width: 180px;
    /* 180px inside a .col-xs-4, which at a 360px viewport is 120px wide — the wordmark
       has always overhung its own column by 60px and collided with whatever the right of
       the bar held. Measured on the build before this one: at a 320px viewport the
       document scrolled sideways to 353px and the word MENU sat on the letters "EC".
       The language switch made that collision start at 360px, the width of most Android
       phones, so it is now worth fixing rather than noting.

       min() and not a breakpoint, because the column is a percentage and so the clash
       is continuous: 40vw tracks it exactly. 180px at 450px and above, so every tablet
       and every desktop is the size it has always been; 156px at 390, 144 at 360, 128
       at 320. A browser that does not know min() drops this line and keeps the 180px
       above it, which is what it renders today. */
    width: min(180px, 40vw);
    height: auto;
    filter: brightness(90%);
}

.menu-logo::hover {
    width: 50px;
}



/*Bootstrap*/

.navbar-vira {
    background-image: none;
    background-color: transparent;
    margin-bottom: 0;
    border-radius: 0;
    border-color: transparent;
    transition: all 0.3s ease-in-out;
}

.form-control option {
    color: #424242;
}

.form-control {
    border-radius: 0;
    font-family: var(--second-font);
    padding: 25px;
    font-size: 18px;
    background-color: transparent;
    color: #424242;
    margin-bottom: 30px;
    border-color: var(--main-color);
}

.form-control:focus {
    border-color: var(--main-color);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(81, 194, 185, 0.6);
}

.form-control::-webkit-input-placeholder {
    color: #fff;
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
}

.form-control:-ms-input-placeholder {
    color: #fff;
}

.element .form-control::-webkit-input-placeholder {
    color: #424242;
}

.element .form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #424242;
}

.element .form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #424242;
}

.element .form-control:-ms-input-placeholder {
    color: #424242;
}


/*Helper class*/

.mt80 {
    margin-top: 80px;
}

.mb80 {
    margin-bottom: 80px;
}

.mr60 {
    margin-right: 60px;
}

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.bg-img div {
    z-index: 1;
    position: relative;
}

.bg-img:after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.section {
    padding: 100px 0;
}


/*Vira Card*/

.vira-card {
    text-align: center;
    /*margin-bottom: 45px;*/
}

.vira-card .vira-card-header {
    margin-bottom: 25px;
}

.vira-card .vira-card-header .card-icon {
    border: 1px solid var(--main-color);
    border-radius: 100%;
    display: inline-block;
    height: 120px;
    width: 120px;
    line-height: 120px;
    position: relative;
}

.vira-card .vira-card-header .card-icon .fa {
    margin-top: 45px;
    font-size: 30px;
}

.vira-card .vira-card-header .card-icon:after {
    content: '';
    height: 100px;
    width: 100px;
    background-color: var(--main-color);
    border-radius: 100%;
    position: absolute;
    top: 9px;
    left: 9px;
}

.vira-card .vira-card-header .card-icon span {
    color: #fff;
    font-size: 45px;
    position: relative;
    z-index: 1;
}

.vira-card .vira-card-content h3 {
    position: relative;
    margin-bottom: 10px;
}

.vira-card .vira-card-content h3>a {
    color: #1a1a1a;
}

.vira-card .vira-card-content p {
    font-size: 15px;
}

.news-newspaper {
    font-style: italic;
}

.vira-card .vira-card-content .social-icons {
    margin-top: 30px;
}


/*Button*/

.vira-btn {
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 700;
    letter-spacing: 3px;
    /* 80px of horizontal padding is 160px of chrome around the label. On the
       payment page that made GESTIONAR SUSCRIPCIÓN 419px wide inside a 390px
       viewport and the whole page scrolled sideways by 14px. clamp() keeps the
       desktop value exactly (8vw is over 80px from 1000px up) and lets the phone
       have 24-31px. Audit item 2.2. */
    padding: 15px clamp(24px, 8vw, 80px);
    margin-bottom: 30px;
    background-color: transparent;
    /* Bootstrap's .btn already reserves `border: 1px solid transparent`, so
       colouring it in costs zero layout: the ghost variant simply stops reading
       as a paragraph of red text. Audit item 2.3. */
    border-color: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.vira-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

.news-btn {
    font-family: var(--second-font);
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    /* The same defect Stage 2 fixed on .vira-btn (audit item 2.2), on the button it
       missed. MÁS INFORMACIÓN E INSCRIPCIÓN measures 323px at a 320px viewport and
       scrolls the whole homepage sideways to 353px — measured on this build and on the
       one before it, so it is not new. Bootstrap 3's .btn is white-space: nowrap, which
       is what turns a long label into horizontal overflow instead of a second line.
       max-width keeps it inside its column; normal lets it wrap when it has to. The
       desktop rendering does not move: at 1100px the label is 322px in a 458px column
       and never reaches either limit. */
    max-width: 100%;
    white-space: normal;
    padding: 5px 30px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    background-color: var(--main-color);
    margin-top: 20px;
}

.news-btn:hover {
    color: #fff;
    background-color: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.menu-btn {
    font-family: var(--second-font);
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 3px 10px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    background-color: var(--main-color);
}

.menu-btn:hover {
    color: #fff;
    background-color: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.ins-btn {
    font-family: var(--second-font);
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 5px 30px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    background-color: var(--main-color);
    margin-top: 20px;
}

.ins-btn:hover {
    color: #fff;
    background-color: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.solid {
    background-color: var(--main-color);
    color: #fff;
}

.solid:hover {
    background-color: #fff;
    color: var(--main-color);
}

.small-btn {
    padding: 10px 130px;
}


/*Element page*/

.element .navigation-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.element .navigation-bar a {
    color: #424242;
}

.element .dark-bar {
    background-color: #fff;
}

.element .menu:after {
    color: #424242;
}

.element .title:after {
    left: 0;
    top: 60px;
}

.headings p {
    margin-bottom: 80px;
}

.social-icons ul {
    text-align: center;
    padding-left: 0;
    display: inline-block;
}

/* The markup is now <ul><li><a><span>, the way HTML requires — it used to be
   <ul><a><li><span>, with <a> as a direct child of <ul>, which is invalid. The <li> keeps
   every box property it always had, so the pill is pixel-identical; the <a> is made a
   block so it fills that pill and inherits its colour instead of Bootstrap's link blue. */
.social-icons ul li {
    display: inline-block;
    list-style-type: none;
    border: 2px solid var(--main-color);
    background-color: var(--main-color);
    color: #fff;
    font-size: 18px;
    line-height: 32px;
    width: 36px;
    border-radius: 5rem;
}

.social-icons ul li a {
    display: block;
    color: inherit;
}

/* The inline SVG social marks (see the sprite at the top of index.html). Sized in em
   so the two existing font-size rules — 18px here, 18px on .social-icons-form — keep
   driving them exactly as they drove the icon-font glyph, and filled with currentColor
   so :hover inverting the pill still inverts the mark. */
.ic {
    /* 0.9em, not 1em: an icon-font glyph is drawn inside its em box with side bearings,
       so the Ionicons mark came out around 14px in the 36 x 32px pill. An SVG has no
       bearings and 1em filled the pill edge to edge. 0.9em of 18px is 16.2px — 45% of
       the pill across, 51% down — which is where the old row sat, only sharper. */
    width: 0.9em;
    height: 0.9em;
    fill: currentColor;
    vertical-align: -0.12em;
}

/* The Font Awesome card icons. Their source viewBoxes are not square — 0 0 640 512 for
   the gears, 0 0 448 512 for the calendar — and `width: auto` on an <svg> with no
   intrinsic size resolves to the CSS default 300px, not to the aspect ratio: the first
   build of this drew a 300 x 27px box and pushed every glyph out of its 120px circle,
   invisibly. So each <symbol> carries a viewBox padded out to a square centred on the
   original, exactly the way an icon font sits a glyph in a square em box, and these are
   square too. */
.ic-fa {
    /* 1.08em / -0.21em is measured, not guessed: at 0.9em the gem's ink came out 27x23px
       inside the 100px disc where the icon font drew it 33x27, and raising the box without
       lowering the baseline offset by half the growth would have floated it upwards.
       Measured after: within a pixel of the glyph it replaces, same centre. */
    width: 1.08em;
    height: 1.08em;
    fill: currentColor;
    vertical-align: -0.21em;
}

.social-icons-form ul li {
    display: inline-block;
    list-style-type: none;
    color: var(--main-color);
    font-size: 18px;
    line-height: 32px;
    width: 36px;
    margin-top: 30px;
}

.social-icons-form ul li a {
    display: block;
    color: inherit;
}

/* 36 x 32px is below every touch-target floor there is, and this is the row a
   thumb reaches for. Raised to 44 x 44 on the phone only: at 36px per icon the
   desktop row is a deliberate piece of the design and does not move. Audit
   item 2.5. */
@media only screen and (max-width: 995px) {
    .social-icons-form ul li {
        width: 44px;
    }

    .social-icons-form ul li a {
        min-height: 44px;
        line-height: 44px;
    }
}

.social-icons {
    margin-top: 30px;
}

.social-icons ul li:hover {
    color: var(--main-color);
    background-color: #fff;
}


/*Navigation*/

/* The mobile menu. Below 995px .menu-links is display:none and, until now, that
   was the whole story: a phone got the logo and nothing else -- no navigation
   and no INSCRÍBETE, on the page students arrive at from Instagram. The panel
   and the toggle were styled here and driven by script.js for years; only the
   markup was missing. Audit item 2.1. Nothing in this block applies above
   995px. */

#menu-item {
    /* Absolutely positioned under the bar rather than in flow: opening the menu
       must not push the hero down, and it means the open/shut animation is
       transform + opacity only. Nothing here animates a layout property -- the
       original `transition: all` over margin-top did, and it also slid the links
       up over the navigation bar instead of behind it. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}

/* Above the breakpoint the panel is not merely hidden, it does not exist: with a
   box on the page (even at opacity 0) it is a composited layer the desktop never
   needs, and the desktop is exactly what this change is not allowed to touch. */
@media only screen and (min-width: 996px) {
    #menu-item {
        display: none;
    }
}

.menu-item {
    background-color: #1a1a1a;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
}

.menu-item ul {
    padding-left: 0;
    margin-bottom: 0;
}

/* <ul><li><a> and not the template's <ul><a><li>, which is invalid HTML and
   which tests/verify.sh check 4 rejects. */
.menu-item ul li {
    list-style-type: none;
}

.menu-item ul li a {
    display: block;
    padding: 15px 0;
    min-height: 44px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-item ul li a:hover,
.menu-item ul li a:focus {
    color: var(--main-color);
    text-decoration: none;
}

/* The join button keeps its colour in the panel: it is the reason the menu is
   being restored at all. */
.menu-item ul li a.menu-item-cta,
.menu-item ul li a.menu-item-cta:hover,
.menu-item ul li a.menu-item-cta:focus {
    background-color: var(--main-color);
    color: #fff;
    border-bottom: none;
}

.menu-item ul li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Collapsed with max-height rather than the old margin-top: -377px, which was a
   magic number equal to the height of a panel that never existed and which slid
   the links up *over* the navigation bar instead of clipping them. visibility
   also takes the links out of the tab order while the panel is shut. */
/* Both selectors carry the id, because the rule that sets the shut state above
   does too: `.show-menu { opacity: 1 }` alone loses to `#menu-item { opacity: 0 }`
   and the panel toggles its class, animates nothing, and stays invisible.
   visibility and not just opacity: a transparent panel would still be in the tab
   order, and a keyboard user would fall into an invisible menu. */
#menu-item.hide-menu {
    visibility: hidden;
}

#menu-item.show-menu {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.dark-bar {
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: 0px 10px 40px -17px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 10px 40px -17px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 10px 40px -17px rgba(0, 0, 0, 0.5);
}

.navigation-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 0;
    font-size: 30px;
}

.navigation-bar a {
    color: #fff;
}

/* The toggle. It is hidden above 995px, where .menu-links is the navigation;
   the two are never on screen together. 44x44 because it is the single most
   important target on a phone. */
.menu-toggle-wrap {
    display: none;
}

@media only screen and (max-width: 995px) {
    .menu-toggle-wrap {
        /* flex, so the language switch and the toggle sit on one line and neither has
           to be positioned against the other. */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

.menu {
    /* A real <button>: it is a control, it opens and closes something on this
       page, and Space has to work as well as Enter without any script saying so. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    /* .navigation-bar a is white and this bar is white (.menu-container). */
    color: #1a1a1a;
}

.menu:hover,
.menu:focus {
    color: var(--main-color);
    text-decoration: none;
}

.menu:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}

/* The MENU label is drawn inside the button's own left padding.

   It used to be `left: -65px` — absolutely positioned OUTSIDE the button, over whatever
   happened to sit beside it. Nothing ever did, until the language switch moved into this
   bar and the label landed on top of it: measured on that build, the link was 60 x 44px
   and visible, and a click at its centre did not navigate, because the label was in
   front of it. Moving the label into the button's padding draws it in exactly the same
   place relative to the bars and stops it overlapping its neighbour. */
.menu {
    padding-left: 65px;
}

.menu:after {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 44px;
    color: #1a1a1a;
    font-size: 16px;
    font-family: var(--main-font);
    letter-spacing: 1px;
}

.menu:hover:after,
.menu:focus:after {
    color: var(--main-color);
}

/* The bars and the cross are one inline SVG and the class on the button picks
   which one is drawn. The template's ion-navicon would have been the obvious
   choice; the icon font it came from is gone from this site entirely now, and
   this is the pattern that replaced it everywhere. */
.menu .menu-icon-x,
.menu.c .menu-icon-bars {
    display: none;
}

.menu.c .menu-icon-x {
    display: inline;
}

.menu-container {
    background-color: #fff;
    color: #1a1a1a;
}

/* The row of desktop navigation links.

   The markup has carried `d-flex flex-row` since the template this site came from, and
   those are Bootstrap 4 class names — this project is on Bootstrap 3.3.7 and defines
   neither, so the row has always been inline anchors laid out by `text-align: right`.
   Making it the flex row it already says it is costs nothing to look at and buys back
   the collapsed inter-tag whitespace that six gaps between seven inline items were
   spending, which is what makes room for the language switch without pushing INSCRÍBETE
   onto a second line. Measured at 1200px: 7 items on one row before, 7 on one row after
   with the switch added.

   Below 995px the media query further down in this file sets .menu-links to display:
   none and the phone panel takes over, so nothing here applies to a phone. */
.menu-links {
    display: flex;
    /* wrap, not nowrap: between 995 and ~1160px the Spanish row does not fit and never
       has — on the build before this one INSCRÍBETE already sat on a second line at
       1100px. Wrapping keeps that behaviour (the overflow drops to a right-aligned
       second row) instead of squeezing "Sobre Nosotros" onto two lines inside its own
       item, which is what nowrap did. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    row-gap: 8px;
}

.menu-link {
    /* A navigation label never breaks mid-item. */
    white-space: nowrap;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 0.6em;
    color: #1a1a1a !important;
    margin-right: 15px;
}

.menu-link:hover {
    text-decoration: none;
    color: #a30006 !important;
}

.m:after {
    content: 'MENU';
}

/* ---------------------------------------------------------------------------
   The language switch. Spanish first, English one tap away.

   It is a plain <a> to the other language's copy of the page the visitor is on
   (/ <-> /en/), so: it works with JavaScript off, it survives being shared —
   the URL carries the language — and a crawler can follow it. There is no
   cookie and no Accept-Language negotiation on purpose: an unqualified visit to
   multitecua.com is Spanish, always, and the switch is right here for the
   exceptions.

   A globe and not a flag. A flag names a country; the English half of this site
   exists for the Erasmus student who could be from anywhere, and half of them
   would not recognise a Union Jack as "the language I read". The two-letter code
   beside it is the unambiguous part.

   Everything here is padding and colour: no min-height, no display change, so
   the anchor sits on the same line box as the six links beside it and the
   navigation row is exactly as tall as it was.
   --------------------------------------------------------------------------- */
.menu-link.lang-link {
    margin-left: 12px;
    margin-right: 0;
    padding: 4px 8px;
    flex: 0 0 auto;
    border: 1px solid rgba(26, 26, 26, 0.35);
    border-radius: 3px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.menu-link.lang-link:hover,
.menu-link.lang-link:focus {
    border-color: var(--main-color);
}

.menu-link.lang-link .ic-fa {
    /* 0.95em keeps the globe optically level with the two capitals beside it;
       the -0.15em is half the difference between that and the cap height, the
       same correction .ic-fa makes for the card icons. */
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.15em;
    margin-right: 4px;
}

/* The phone copy. There are two switches in the markup, exactly as there are two
   copies of the navigation links: one inside .menu-links, which is display:none below
   995px, and one inside .menu-toggle-wrap, which is display:none above it. At most one
   is ever on screen.

   The phone copy is in the BAR and not in the slide-down panel, and that is the whole
   point of it: the panel is opened by script, so a switch inside it is unreachable with
   JavaScript off — measured, on this build, before this rule existed. In the bar it is
   two taps from nothing: it is simply a link, sitting next to MENU, at every width.
   44px tall because it is a phone target. */
.menu-toggle-wrap .lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-right: 14px;
    vertical-align: middle;
    font-size: 16px;
}


.c:after {
    content: 'CLOSE';
}


/*Home page*/

.header {
    background-image: url(../images/multitec-banner.webp);
    height: 100vh;
    position: relative;
    min-height: 659px;
}

.intro-box {
    height: 100vh;
    display: table;
    text-align: center;
    width: 100%;
}

.intro {
    display: table-cell;
    vertical-align: middle;
}

.header h1 {
    margin: 0;
}

.header h1,
.header p {
    color: #fff;
    letter-spacing: 2px;
}

.header p {
    font-size: 32px;
    padding-top: 0;
    padding-bottom: 40px;
}

.header .vira-btn {
    background-color: var(--main-color);
    color: #fff;
}

.header .vira-btn:hover {
    background-color: #fff;
    color: #424242;
}

.about {
    background-color: #f8f8f8;
}

.about img {
    margin: 30px auto;
    display: block;
}

.about span {
    font-family: 'Raleway';
    font-weight: 600;
}

.expert {
    background-color: #f8f8f8;
}

.expert p {
    line-height: 200%;
}

.expert .bg-img {
    background-image: url(../images/multitec-inscripcion.webp);
    background-position-x: 85%;
    height: 100%;
}

/* ---------------------------------------------------------------------------
   #inscription is a split panel: a photograph on the left, text on the right.
   The photo column has no content of its own, so something has to give it a
   height, and that something used to be script.js:

       var h = $('.expert').height();
       $('.expert .col-sm-6 div').height(h);

   read once at DOM-ready. Below 768px the paragraph beside it is 8 lines in
   Poppins and 7 in the fallback face, at 32px a line, so the panel came out
   729px if the webfont had not arrived yet and 761px if it had -- a layout that
   depended on network timing, and the reason a Stage 1 with no visual change in
   it still moved a 32px band on a phone.

   Flex says the same thing at the layout level: side by side, the two columns
   are the same height by construction, with no measurement and nothing to race.
   Stacked, there is no second column to match, so the photo is a band sized in
   CSS. Audit item 2.0 / 1.12.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    #inscription .row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    #inscription .bg-img {
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    /* 90vh is 760px on the 390x844 phone this was measured on -- one pixel off
       the 761px the JavaScript produced when it won its own race, and the same
       number on every load. */
    #inscription .bg-img {
        height: 90vh;
        min-height: 320px;
        max-height: 760px;
    }
}

.expert .bg-img:after {
    display: none;
}

.expert .section {
    padding-left: 30px;
    padding-right: 30px;
}

.vira-quote {
    /*padding: 120px 0;*/
    color: #fff;
    font-style: italic;
}

.vira-quote p {
    font-size: 32px;
    color: #fff;
}

.vira-quote .quote {
    margin-bottom: 40px;
}

.vira-quote .author {
    font-size: 21px;
    margin-bottom: 40px;
}

.watch {
    font-size: 32px;
    color: #fff;
    padding: 150px 0;
}

.watch a {
    border: 2px solid #fff;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 70px;
    border-radius: 100%;
    width: 70px;
    height: 70px;
    padding: 0;
    font-size: 21px;
    color: #fff;
}

.watch a:hover,
.watch a:active,
.watch a:focus {
    background-color: #fff;
    color: #424242;
}

.subscribe {
    background-color: var(--main-color);
}

.subscribe .vira-btn {
    margin-bottom: 0;
    color: #424242;
    font-weight: 700;
    border-color: #fff;
    background-color: #fff;
}

.subscribe .vira-btn:hover {
    background-color: transparent;
    color: #fff;
}

.subscribe .form-control {
    width: 320px;
    margin-bottom: 0;
    border-color: #fff;
    color: #fff;
}

.contact .vira-card {
    background-color: #f8f8f8;
    padding: 35px 0;
    transition: all 0.3s ease-in-out;
    margin-bottom: 45px;
}

.faq-title{
    font-size: 32px;
    color: #fff;
    font-family: var(--main-font);
}

.faq-title:after{
    content: '';
    height: 5px;
    width: 40px;
    background-color: white;
    position: absolute;
    top: 81px;
    left: calc(50% - 20px);
}

.faq-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.faq-question {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    padding: 30px 20px;
    width: 60%;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: auto;
    text-transform: uppercase;
}

.faq-question:hover {
    font-size: 21px;
}

/* The questions are role="button" tabindex="0" now (audit item 2.4), so they
   have to show where the keyboard is. Only ever visible to a keyboard user. */
.faq-question:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -6px;
}


/* Audit item 4.2. The ten benefit bullets carried style="text-align: justify"
   inline, which is 20 of the 31 findings the detector had left on this site and,
   far more to the point, is at its worst exactly where this text lives: a 15px
   Poppins paragraph in a ~370px column on a phone, where justification has to
   stretch four or five words to fill a line and opens rivers of white down the
   block. The other six answers had no text-align at all and were inheriting
   `center` from `section`, so the FAQ was showing centred prose in one place and
   justified prose in another. One rule now, left, for all of them — which is
   also what every line of running text on this site wants. */
.faq-answer {
    font-family: var(--second-font);
    font-weight: 100;
    font-size: 15px;
    color: #fff;
    text-align: left;
    padding: 0 250px;
    overflow: hidden;
    display: block;

    animation-duration: 0.4s;
    animation-name: animate-fade;
    animation-fill-mode: backwards;
}


.faq-question:after {
    content: "+";
    font-size: 20px;
    color: #fff;
    float: right;
}

.faq-active:after {
    content: "-";
}

.contact .vira-card .vira-card-header {
    margin-bottom: 15px;
    font-size: 21px;
    color: var(--main-color);
}

.contact .vira-card .vira-card-content h3 {
    letter-spacing: 2px;
    margin-bottom: 45px;
}

.contact .vira-card .vira-card-content h3:after {
    top: 40px;
}

.contact .vira-card .vira-card-content p {
    font-size: 18px;
}

.contact-title{
    font-size: 21px;
    letter-spacing: 2px;
    margin-bottom: 45px;
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 700;
    color: #424242;
    margin-bottom: 35px;
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   FIND US — what replaced the Google Maps iframe on 2026-08-29.

   The iframe was not broken: rendered in a clean headless Chromium at 390px it drew
   the map and the marker perfectly. It failed on a real phone because that browser
   blocked a third-party frame, which is what tracking protection, privacy browsers and
   content blockers all do, and it is the same grey broken-content box in every one of
   them. That is the argument for removing it: a contact section that renders only for
   visitors who let Google run a frame is not a contact section, and every visitor who
   did let it was disclosed to Google before they had asked for anything. Three CDNs
   came out of this site today for exactly that reason; this was the fourth.

   Everything below is served from our own container and needs no network at all. The
   plate is inline SVG, deliberately an abstraction and not a copy of a map: it carries
   no street names and claims nothing it cannot back up. The address is the claim, and
   the button is the map — one tap, the visitor's own choice, and Google hears about it
   only then.

   It matches .contact .vira-card above it — same #f8f8f8, same radius — so the section
   reads as four panels, not as three panels and a gap where something used to be.
   ----------------------------------------------------------------------------- */
.find-us {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    background-color: #f8f8f8;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 45px;
    text-align: left;
}

.find-us-plate {
    flex: 1 1 260px;
    /* The plate keeps the 4:3 the iframe had, so the band is the same shape in the
       page it has always been. */
    max-width: 380px;
}

.find-us-plate svg {
    display: block;
    width: 100%;
    height: auto;
}

.fu-bg {
    fill: #ecebe9;
}

.fu-road {
    stroke: #fdfdfc;
    stroke-width: 9;
    fill: none;
}

.fu-road-main {
    stroke-width: 14;
}

.fu-block {
    fill: #dedbd7;
}

.fu-green {
    fill: #dfe7dc;
}

.fu-pin {
    fill: var(--main-color);
}

.fu-pin-dot {
    fill: #fff;
}

.find-us-body {
    flex: 1 1 260px;
}

.find-us-eyebrow {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* #8a8a8a on #f8f8f8 is 3.5:1 and this is 13px text. #6f6f6f is 5.1:1. */
    color: #6f6f6f;
    margin-bottom: 10px;
}

.find-us-place {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.find-us-address {
    font-family: var(--second-font);
    font-size: 16px;
    line-height: 1.6;
    /* <address> is italic in every UA stylesheet and this is not a signature block. */
    font-style: normal;
    color: #4a4a4a;
    margin-bottom: 22px;
}

.find-us-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 26px;
    font-family: var(--second-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
    background-color: var(--main-color);
    border-radius: 4px;
    max-width: 100%;
    white-space: normal;
    transition: all 0.3s ease-in-out;
}

.find-us-btn .ic-fa {
    width: 1.05em;
    height: 1.05em;
    margin-right: 10px;
    flex: 0 0 auto;
}

.find-us-btn:hover,
.find-us-btn:focus {
    color: var(--main-color);
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--main-color);
}

.find-us-note {
    font-family: var(--second-font);
    font-size: 13px;
    line-height: 1.6;
    /* Saying where the button goes before it is tapped. The old iframe went there
       without asking. */
    color: #6f6f6f;
    margin: 12px 0 0;
}

@media only screen and (max-width: 767px) {
    .find-us {
        padding: 24px;
        gap: 22px;
        text-align: center;
    }

    .find-us-plate {
        /* Centred and capped, so it is a plate and not a stretched banner on a phone. */
        margin: 0 auto;
        max-width: 300px;
        flex-basis: 100%;
    }

    .find-us-body {
        flex-basis: 100%;
    }

    .find-us-address {
        margin-bottom: 18px;
    }
}

.footer {
    background-color: #202020;
    text-align: center;
    padding: 30px 0;
}

.footer span {
    color: var(--main-color);
}

.footer a {
    color: #fff;
}

.footer-container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.footer-row {
    display: flex;
    justify-content: center!important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.footer-center{
    text-align: center!important;
}

.footer-nav-links{
    display: flex;
    justify-content: space-around;
    list-style:none;
    font-family: var(--second-font);
    padding: 0;
}

.footer-copy {
    font-size: 14px;
    font-family: var(--second-font);
    font-style: italic;
    color: #fff;
}

.footer-little{
    font-size: 14px;
    color: #fff;
}

/*animations*/

.vira-card .vira-card-header .card-icon:after {
    transition: all 0.3s ease-in-out;
}

.vira-card:hover .vira-card-header .card-icon:after {
    height: 120px;
    width: 120px;
    top: -1px;
    left: -1px;
}

.owl-theme .owl-dots .owl-dot span {
    background-color: var(--main-color);
    margin: 5px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--main-color);
    height: 14px;
    width: 14px;
    margin: 3px;
}

@media (max-width: 767px) {
    .vira-card {
        margin-bottom: 60px;
    }

    .maps{
        border-radius: 20px;
        width: 350px; 
        height: 225px;
    }
}

::-webkit-scrollbar {
    width: 1.4rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    width: 1rem;
    border-radius: 5px;
    border: 3px solid #fff;
}

.red_text {
    color: var(--main-color);
}

.telegram {
    color: var(--main-color);
    font-weight: bold;
}

.telegram:hover{
    text-decoration: underline;
    color: var(--main-color);
}

.youtube {
    -webkit-box-shadow: 10px 10px 61px -18px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 61px -18px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 61px -18px rgba(0, 0, 0, 0.75);
}

.video-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    
}

.video-container iframe,
.video-container object,
.video-container embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@keyframes animate-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media only screen and (max-width: 995px) {
    .menu-links {
        display: none;
    }

    .maps{
        border-radius: 20px;
        width: 400px; 
        height: 250px;
    }
    .faq-answer {
        padding: 0 10px;
    }

    .title:after {
        top: 100px;
    }
}

@media only screen and (max-width: 400px) {
    .maps{
        border-radius: 20px;
        width: 300px; 
        height: 200px;
    }

    .faq-answer {
        padding: 0 10px;
    }

    .title:after {
        top: 120px;
    }

    .title:after {
        top: 95px;
    }
}



/* ==========================================================================
   The events wheel  (#events)
   ==========================================================================
   A horizontal strip of identical cards, oldest on the left, that leans into a
   perspective as it scrolls so it reads as the rim of a big wheel turning past you
   rather than a row of boxes sliding sideways.

   Three facts about how it is built, because none of them are guessable from the CSS:

   1. Every card is the SAME card. That is not done here — it is done in
      i18n/events.json, where every field has a hard character range, and in
      i18n/events.py, which refuses to build the site when one is out of range. CSS can
      crop an image; it cannot make a 60-character summary fill the same box as a
      140-character one.

   2. The rotation is driven by ONE custom property per card, --t, which the script sets
      to where that card sits relative to the middle of the strip: -1 hard left, 0 dead
      centre, +1 hard right (and --a is its absolute value). Every transform below is a
      function of those two numbers. With JavaScript off both stay 0, which is a flat,
      perfectly usable row of cards — the wheel is the enhancement, not the mechanism.

   3. Past / next / the countdown are added by the script too, for a reason that is not
      laziness: src/*.html is generated and committed, and tests/verify.sh fails if
      regenerating it would change a byte. A page with "24 days to go" baked into it
      would be wrong the next morning and red in CI by lunchtime.

   The ground is dark on purpose. Grey-scaling a past event only reads as "this already
   happened" if there is colour to lose next to it, and #A30006 on a dark field is 2.2:1,
   so the accent here is Rojo 1 (#FF3A41) — the brandbook's own dark-scheme primary, not
   an invented hex. 5.05:1 on this ground. */

.events {
    --ev-accent: #ff3a41;   /* Rojo 1, brandbook p.20 — 5.05:1 on the ground below */
    --ev-ground: #17171a;
    --ev-card-w: 300px;
    --ev-gap: 28px;          /* used by .ev-track's gap AND by the rail spacers' width */
    background: radial-gradient(115% 75% at 50% 0%, #2c2c30 0%, #1d1d21 55%, var(--ev-ground) 100%);
    color: #fff;
    /* The cards arc outwards in 3D. Without this the page itself scrolls sideways at
       the far end of the wheel — audit item 2.2, and the reason group 16 exists. */
    overflow: hidden;
    padding-bottom: 60px;
}

.events .title {
    color: #fff;
    margin-bottom: 30px;
}

/* The site's section rule is an absolutely positioned :after at a hard `top`, and three
   media queries move that top to 100px, 95px and 120px at narrower widths. Every one of
   those was tuned for a heading with 100px of space under it and nothing in between; this
   heading has a standfirst under it, so at 390px the rule landed in the middle of the
   sentence. Taking it out of the absolute flow makes it a block that sits under the
   heading and pushes the paragraph down, at every width, with no offset to keep in step. */
.events .title:after {
    position: static;
    display: block;
    top: auto;
    left: auto;
    margin: 22px auto 0;
    background-color: var(--ev-accent);
}

.events-intro {
    color: #bcbfbe;          /* Gris, 9.66:1 on the ground */
    font-family: var(--second-font);
    font-size: 15px;
    max-width: 46em;
    margin: 0 auto;
    text-align: center;
}

/* ---- the wheel and its rail ------------------------------------------------ */

.ev-wheel {
    position: relative;
    margin-top: 30px;
}

.ev-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    /* The whole illusion is here: one shared vanishing point, above the middle of the
       strip, so the far cards fall away from the same place. perspective-origin at 44%
       puts the eye slightly above the cards, which is what makes the arc read as a wheel
       lying flat rather than a fan standing up. */
    perspective: 1400px;
    perspective-origin: 50% 44%;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 46px 0 40px;
    /* A visible scrollbar under a 3D carousel reads as a bug. The strip is still
       scrollable by wheel, drag, arrow key and the two buttons. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ev-scroller::-webkit-scrollbar { display: none; }

.ev-scroller:focus-visible {
    outline: 3px solid var(--ev-accent);
    outline-offset: -3px;
}

.ev-track {
    display: flex;
    align-items: stretch;
    gap: var(--ev-gap);
    list-style: none;
    margin: 0;
    transform-style: preserve-3d;
}

/* The trailing half of the rail, as a box rather than as space.
   Neither the track's padding-right nor the last card's margin-right is included in
   Chrome's scrollable overflow for a flex container — both measured at 543px declared and
   63px of scrollWidth delivered, which left the last event 480px short of the middle. A
   pseudo-element is a real flex item, so its width is ordinary layout and does count. It
   is not a .ev-card, so the script's card list is unaffected. */
/* The two halves of the rail, as BOXES rather than as space, so the first and the last
   event can each reach the middle of the wheel.

   Three things were measured to arrive at this, and each ruled out something simpler:
     - the track's `padding-right` is not part of Chrome's scrollable overflow for a flex
       container: 543px declared, 63px of scrollWidth delivered;
     - nor is a `margin-right` on the last card: same 63px;
     - and while the leading half was `padding-left`, every percentage inside the track
       resolved against the track's CONTENT box (1386 − 543 = 843) rather than against the
       rail, so a spacer asking for `50% − 150px` got 271.5px.
   With no padding on the track, its content box IS the rail, both percentages resolve to
   the same 543px, and both are real flex items whose width is ordinary layout. Neither is
   a .ev-card, so the script's card list is untouched. */
.ev-track:before,
.ev-track:after {
    content: "";
    flex: none;
    /* minus the gap, because the spacers are flex items and the track's gap applies
       between them and the first/last card too — measured: the first card sat 28px past
       the middle until this term was subtracted. */
    width: max(16px, calc(50% - var(--ev-card-w) / 2 - var(--ev-gap)));
}

/* ---- one card -------------------------------------------------------------- */

.ev-card {
    --t: 0;        /* signed distance from the centre of the rail, -1 .. +1 */
    --a: 0;        /* its absolute value, 0 at the centre, 1 at the edges    */
    --boost: 1;    /* the next event nudges this up; see .is-next below      */
    flex: 0 0 var(--ev-card-w);
    /* The snap TARGET, and deliberately untransformed. Chrome computes a snap area from
       the transformed border box, so while the 3D lived here the snap points were the
       positions of rotated, receded cards rather than the positions of the cards — the
       rail settled anywhere, the arrows drifted, and nothing ended up in the middle.
       That was Sergio's "se queda como desvirtuado y no se ve qué tarjeta está
       seleccionada". The wheel moved one level in, to .ev-inner, and the snap points went
       back to being where the cards actually are. */
    scroll-snap-align: center;
    transform-style: preserve-3d;
}

.ev-card .ev-inner {
    /* Read outwards: turn away from the viewer, sink backwards, drop along the rim, and
       tilt with it. The rotate() is what stops it looking like a flat fan — a card on
       the rim of a wheel is not upright. */
    transform:
        rotateY(calc(var(--t) * -32deg))
        translateZ(calc(var(--a) * -140px))
        translateY(calc(var(--a) * 26px))
        rotate(calc(var(--t) * 3.4deg));
    /* The selected card's 8% is the independent `scale` property, NOT part of the
       transform above. Inside the shorthand it could not be eased separately from the
       wheel's rotation — and the rotation must follow the scroll frame by frame, while the
       selection handover wants a short ease so the card grows into place instead of
       popping. */
    scale: var(--boost);
    opacity: calc(1 - var(--a) * 0.45);
    transition: scale .24s cubic-bezier(.22, .61, .36, 1),
                filter .45s ease, background .45s ease, box-shadow .3s ease;
    will-change: transform, scale;
}

.ev-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 452px;      /* every card the same height even before the text agrees */
    background: #fff;
    color: #1a1a1a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}

.ev-media {
    position: relative;
    flex: none;
}

/* Fixed height plus cover, not aspect-ratio: the source images are 4:3, 3:2 and 16:9 and
   they all have to end up as the same window. i18n/events.py refuses anything narrower
   than 1.2:1, which is the point where cropping to this window starts throwing the
   subject away. */
.ev-media img {
    display: block;
    width: 100%;
    height: 176px;
    object-fit: cover;
}

/* A logo is NOT a photograph and must not be dressed up as one. Sergio, 2026-08-31, about
   an event whose poster does not exist yet: "usa, a lo mejor, solo el logotipo, no pongas
   una foto que no es." So it is contained rather than cropped, sits on the section's own
   ground rather than on a fake white studio, and gets a little breathing room — which
   between them read as a mark, not as a picture of the event. The card keeps its exact
   height either way, which is what stops the row going ragged. */
.ev-media img.ev-img-logo,
.ev-media img.ev-img-illustration {
    object-fit: contain;
    box-sizing: border-box;
    padding: 26px 40px;
    background: radial-gradient(80% 120% at 50% 40%, #24242a 0%, #17171a 100%);
}

/* A poster is the event's own artwork: never cropped either, but it fills the window
   because it was designed to be looked at whole. */
.ev-media img.ev-img-poster {
    object-fit: contain;
    box-sizing: border-box;
    background: #17171a;
}

/* "aprox." next to a date that is our best information rather than a promise. Quiet on
   purpose -- the date is the message, this is the caveat. */
.ev-approx {
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #ececee;
    color: #5a5a5a;              /* 6.5:1 on #ececee */
    font-family: var(--second-font);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: none;
    vertical-align: 1px;
}

.ev-cat,
.ev-pill {
    position: absolute;
    bottom: 12px;
    margin: 0;
    font-family: var(--main-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
}

.ev-cat {
    left: 12px;
    background: rgba(23, 23, 26, .86);
    color: #fff;
}

.ev-pill {
    right: 12px;
    background: var(--main-color);   /* #A30006 on white text — 8.2:1 */
    color: #fff;
}

/* ---- what the association actually did here ---------------------------------
   Sergio, 2026-08-31: the card has to say whether "es una colaboración, es una
   organización o si simplemente hemos asistido". Three weights, loudest first, because
   that is also the honest order: the events we run are ours to shout about, the ones we
   help with are somebody else's with our name on them, and the ones we merely attended
   are not ours at all. Colour is never the only signal — each one carries its own word. */

.ev-role {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
    font-family: var(--main-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.ev-role-organiza {
    background: var(--main-color);
    color: #fff;                        /* 8.2:1 */
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.ev-role-colabora {
    background: rgba(255, 255, 255, .92);
    color: var(--main-color);           /* 8.2:1 on the white pill */
    box-shadow: inset 0 0 0 1px rgba(163, 0, 6, .35);
}

.ev-role-asiste {
    background: rgba(23, 23, 26, .78);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.ev-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 16px;
    text-align: left;
}

.ev-when {
    font-family: var(--main-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--main-color);
    margin: 0 0 6px;
}

.ev-time {
    color: #5a5a5a;             /* 6.9:1 on white */
    font-weight: 400;
    letter-spacing: 1px;
}

.ev-time:before {
    content: " · ";
    color: #9a9a9a;
}

.ev-title {
    font-size: 19px;
    line-height: 1.25;
    margin: 0 0 8px;
    /* Two lines exactly. The 28-character ceiling in events.json is what keeps a title
       from needing a third, and this is the belt to that pair of braces. */
    min-height: 2.5em;
}

.ev-title a {
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 2px solid rgba(163, 0, 6, .28);
}

.ev-title a:hover,
.ev-title a:focus-visible {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
}

.ev-summary {
    font-family: var(--second-font);
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0 0 12px;
}

.ev-where {
    font-family: var(--second-font);
    font-size: 13px;
    color: #5a5a5a;                     /* 6.9:1 */
    margin: 0;
    /* Venue and audience share this line so that it is never empty: several real events
       have no venue recorded anywhere, and a card with a missing row is a ragged card.
       See OPTIONAL in i18n/events.py. Two lines are always reserved because the longest
       pair -- "Parque Científico de Alicante · Abierto a todos" -- needs them, and a row
       that is one line on some cards and two on others is the ragged fence again. */
    line-height: 1.4;
    min-height: 2.8em;
}

.ev-where:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #bcbfbe;
    vertical-align: middle;
}

/* ---- the card's foot: state on the left, family mark on the right ------------
   Sergio, 2026-08-31: a recurring event has to be identifiable as part of its family at a
   glance — "aunque sea en chiquitín, en translúcido… a lo mejor en la propia tarjeta
   abajo, no encima de la foto porque ya tiene demasiada sobrecarga". So the mark gets its
   own strip rather than another badge on an already busy photograph.

   The strip is DARK, and that is not decoration either: the institutions' marks that go in
   it — the UA, the EPS, the Parque Científico — exist as white-on-transparent files, which
   is what the association already uses in the partners band further down this page. A dark
   strip means those files are used as their owners published them instead of being
   recoloured, which is not a liberty to take with somebody else's logo. */

.ev-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;               /* pins the strip to the bottom of every card */
    padding: 11px 20px;
    background: #1d1d21;
    min-height: 46px;
}

.ev-emblem {
    /* margin-left:auto instead of justify-content:space-between on the parent. With
       space-between, a card whose state line was empty left the mark as the only child
       and it slid to the LEFT — so the marks were on the right on some cards and the left
       on others. Sergio: "quiero que estén todos siempre en el mismo sitio, y deje ese
       espacio para texto, aunque no exista." auto margin pins it right regardless. */
    margin-left: auto;
    flex: none;
    height: 22px;
    width: auto;
    /* Quiet, as he asked — present enough to be recognised, not loud enough to compete
       with the title. It comes up to full strength when the card is hovered or focused. */
    opacity: .62;
    transition: opacity .25s ease;
}

/* An illustration is drawn edge to edge on purpose — it IS the picture, not a mark
   floating in a panel — so it gets no padding and fills the window. */
.ev-media img.ev-img-illustration {
    padding: 0;
}

.ev-card:hover .ev-emblem,
.ev-card:focus-within .ev-emblem {
    opacity: 1;
}

/* The countdown, now on the dark strip. #A30006 is 2.2:1 there, so the accent in this one
   place is Rojo 1 — the brandbook's own dark-scheme primary, 5.4:1 on #1d1d21. */
.ev-state {
    /* auto, not a fixed gap: it is what puts the countdown on the SAME baseline on all
       eight cards no matter how the summary above it wrapped. Without it the line sits
       wherever the paragraph left it and the row of cards reads as eight different
       cards, which is the one thing this whole section is built not to be. */
    margin: 0;
    font-family: var(--main-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #bcbfbe;                 /* Gris, 9.3:1 on #1d1d21 */
}

/* ---- the two states ---------------------------------------------------------
   Past is grey and quiet but still there — the association's history is worth showing,
   it is just not worth shouting. Hovering or tabbing to one brings the colour back,
   which is the cheapest possible way to say "there is a real photograph under this". */

/* Grey-scale the PHOTOGRAPH, not the card. The first cut put the filter on .ev-inner and
   it swallowed everything inside it -- including the red ORGANIZAMOS chip, which is the
   one thing on a past card that still has to be readable, and which is the whole reason
   the chip exists. A CSS filter cannot be undone by a child, so it has to be applied to
   the element that should actually lose its colour and nowhere else. */
.ev-card.is-past .ev-media img {
    filter: grayscale(1) contrast(.94);
}

/* Stand-ins go grey too, and the earlier exemption here was wrong. It reasoned that a
   mark has no colour to lose in a way that reads as "archived" — but the rule it wrote
   also caught the drawn illustrations, and a colour card sitting in a row of grey ones
   does not read as a considered exception, it reads as a bug. Sergio, on seeing the
   camping illustration in full colour between two grey cards: "las imágenes vectoriales
   no se están poniendo en blanco y negro, corrígelo."
   So a stand-in follows exactly the same rule as a photograph — a drawing IS this card's
   picture — and only the opacity is lifted a little, because a mark carries less ink than
   a photograph and goes muddy at the same value. */
.ev-card.is-past img.ev-img-logo,
.ev-card.is-past img.ev-img-illustration {
    opacity: .72;
}

/* What says "this already happened" on the rest of the card: a card that is no longer
   white, a shallower shadow so it sits back, and the CELEBRADO pill. No opacity —
   opacity on the parent would dim the chip again by another route. */
.ev-card.is-past .ev-inner {
    background: #ececed;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
}

.ev-card.is-past .ev-media img,
.ev-card.is-past .ev-inner {
    transition: filter .45s ease, background .45s ease, box-shadow .3s ease;
}

/* Hovering or tabbing to one brings the photograph back, which is the cheapest possible
   way to say "there is a real picture of this under here". */
.ev-card.is-past:hover .ev-media img,
.ev-card.is-past:focus-within .ev-media img {
    filter: grayscale(.05);
}

.ev-card.is-past:hover .ev-inner,
.ev-card.is-past:focus-within .ev-inner {
    background: #fff;
}

.ev-card.is-past .ev-when { color: #5a5a5a; }

/* The CELEBRADO pill has to keep working on a grey card, so it is a neutral rather than
   the red used by PRÓXIMO — two states, two colours, and neither of them relies on the
   photograph's saturation to be legible. */
.ev-card.is-past .ev-pill {
    background: rgba(23, 23, 26, .86);
}

/* Two different states, and they stack.

   `is-next` is a fact about the CALENDAR: this is the first event that has not happened.
   It says so with a hairline ring in the accent and the PRÓXIMO pill.

   `is-centred` is a fact about the STRIP: this is the card you are looking at. The script
   marks whichever one is nearest the middle, always exactly one, so there is no
   in-between state — stopping between two cards used to leave nothing selected and the
   wheel read as broken. It says so with scale, a deeper shadow and a full-strength
   family mark, and it never borrows the accent, so "selected" and "next" stay
   distinguishable when they are not the same card. */
.ev-card.is-next {
    --boost: 1.03;
    z-index: 2;
}

.ev-card.is-centred {
    --boost: 1.08;
    z-index: 4;
}

.ev-card.is-centred .ev-inner {
    box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .16);
}

.ev-card.is-centred .ev-emblem {
    opacity: 1;
}

/* Selected AND next: the ring has to survive the selected card's own outline, so it is
   restated here rather than being overridden by source order. */
.ev-card.is-centred.is-next {
    --boost: 1.11;
}

.ev-card.is-centred.is-next .ev-inner,
.ev-card.is-centred.is-running .ev-inner {
    box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 0 2px var(--ev-accent);
}

/* A past card that is the one being looked at gets its photograph back: it is the card
   under the cursor in all but name, and a grey selected card looks like a mistake. */
.ev-card.is-centred.is-past .ev-media img {
    filter: grayscale(.15);
}

.ev-card.is-centred.is-past .ev-inner {
    background: #fff;
}

.ev-card.is-next .ev-inner {
    box-shadow: 0 26px 60px rgba(0, 0, 0, .58), 0 0 0 2px var(--ev-accent);
}

.ev-card.is-next .ev-state,
.ev-card.is-running .ev-state {
    color: var(--ev-accent);        /* Rojo 1, 5.4:1 on the strip */
}

.ev-card.is-running .ev-inner {
    box-shadow: 0 26px 60px rgba(0, 0, 0, .58), 0 0 0 2px var(--ev-accent);
}

/* ---- the rail controls ------------------------------------------------------ */

.ev-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;             /* 48px: a thumb target, not a cursor target */
    height: 48px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(23, 23, 26, .72);
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.ev-nav:hover,
.ev-nav:focus-visible {
    background: var(--main-color);
    border-color: var(--ev-accent);
}

.ev-nav[disabled] {
    opacity: .3;
    cursor: default;
}

.ev-nav .ic-fa {
    width: 16px;
    height: 16px;
    fill: currentColor;
    vertical-align: middle;
}

.ev-prev { left: 14px; }
.ev-prev .ic-fa { transform: rotate(180deg); }
.ev-next { right: 14px; }

.ev-hint {
    text-align: center;
    color: #bcbfbe;
    font-family: var(--second-font);
    font-size: 13px;
    letter-spacing: .4px;
    margin: 6px 0 0;
}

/* ---- narrow screens ---------------------------------------------------------
   The wheel is shallower on a phone: at 300px wide the neighbours are barely on screen,
   so a 32-degree turn just hides them. The arrows go too — a thumb already has the
   better gesture. */

@media only screen and (max-width: 767px) {
    .events { --ev-card-w: 272px; --ev-gap: 20px; }

    .ev-card .ev-inner {
        transform:
            rotateY(calc(var(--t) * -22deg))
            translateZ(calc(var(--a) * -90px))
            translateY(calc(var(--a) * 16px))
            rotate(calc(var(--t) * 2deg));
    }

    .ev-scroller { perspective: 1000px; padding: 34px 0 30px; }
    .ev-nav { display: none; }
    .ev-inner { min-height: 430px; }
}

/* ---- when motion is unwelcome ------------------------------------------------
   Not a smaller wheel: no wheel. A rotating, receding, arcing strip is exactly the class
   of movement this setting exists to switch off, and the flat row underneath is a
   complete, ordered, perfectly readable calendar. */

@media (prefers-reduced-motion: reduce) {
    .ev-card .ev-inner {
        transform: none;
        opacity: 1;
        transition: none;
    }

    .ev-scroller {
        perspective: none;
        scroll-behavior: auto;
    }

    .ev-inner { transition: none; }
}