/* style.css — multitecua.com, redesigned 2026-09-05.
 *
 * One stylesheet, no framework. Bootstrap 3, jQuery and Owl Carousel are gone: every
 * layout below is CSS grid or flex, the press strip is scroll-snap, and the FAQ is
 * <details>. The structure follows the household design system
 * (quantumpc-management-agent/docs/design/tokens.css) and the identity is the Multitec
 * brandbook (docs/design/brand-multitec.css): every hex in this file is either on page
 * 20 of the brandbook or a transparent/alpha of one of those.
 *
 * What was deliberately KEPT from the 2016 site, because it is the identity people
 * recognise: Rojo #A30006 as the only accent, uppercase Ubuntu headings over a short red
 * rule, the association's own photographs, the dark events wheel (2026-08-31), and the
 * hexagon from the logo, which is the one decorative shape the brand allows.
 *
 * The legacy variable names (--main-color, --main-font, --second-font) are kept as
 * aliases because enlaces.css and 404.css still read them.
 */

/* ── webfonts: Ubuntu, self-hosted, latin + latin-ext ─────────────────────────
   The brand face (brandbook p.22). Three weights: 400 body, 500 UI, 700 headings.
   Lora, Poppins and Raleway were removed with the template that used them. */
@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; }
@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; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ubuntu-500-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; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ubuntu-500-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; }
@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; }
@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; }

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* brandbook p.20 */
    --mt-red:    #A30006;
    --mt-grey:   #BCBFBE;
    --mt-white:  #FFFFFF;
    --mt-red-1:  #FF3A41;
    --mt-red-4:  #630004;
    --mt-red-5:  #330002;
    --mt-grey-1: #F6F6F6;
    --mt-grey-2: #DEE5E5;
    --mt-grey-3: #7C8484;
    --mt-grey-4: #505353;
    --mt-grey-5: #1E2121;

    --ink:        var(--mt-grey-1);   /* page ground — tinted, never #fff */
    --ink-raised: var(--mt-white);    /* a panel that is genuinely lifted */
    --ink-sunken: var(--mt-grey-2);
    --line:       var(--mt-grey-2);
    --text:       var(--mt-grey-5);   /* 15.6:1 on Gris 1 */
    --text-dim:   var(--mt-grey-4);   /*  7.4:1 on Gris 1 */
    --accent:     var(--mt-red);      /*  8.6:1 on Gris 1; white on it is 8.6:1 too */
    --on-accent:  var(--mt-white);
    --dark:       var(--mt-grey-5);   /* the one dark band: the events wheel */
    --dark-accent: var(--mt-red-1);   /* Rojo on Gris 5 is 2.1:1; Rojo 1 is 5.4:1 */

    --font-ui: 'Ubuntu', ui-sans-serif, system-ui, sans-serif;
    /* legacy aliases, read by enlaces.css and 404.css */
    --main-color: var(--mt-red);
    --main-font: var(--font-ui);
    --second-font: var(--font-ui);

    /* type ramp — 1.25 between steps, nothing functional under 13px */
    --t-sm:   0.8125rem;   /* 13 */
    --t-base: 1rem;        /* 16 */
    --t-md:   1.25rem;     /* 20 */
    --t-lg:   1.625rem;    /* 26 */
    --t-xl:   2.125rem;    /* 34 */
    --t-2xl:  2.75rem;     /* 44 */
    --t-hero: clamp(2.125rem, 1.3rem + 4vw, 3.5rem);   /* 34 → 56 */
    --lh-body: 1.55;
    --lh-tight: 1.15;
    --measure: 68ch;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
    --tap: 44px;
    --r-sm: 3px; --r: 5px; --r-lg: 8px; --r-xl: 14px;
    --ease: cubic-bezier(.2, .6, .3, 1);
    --dur: 160ms;

    --wrap: 1180px;
    --gutter: clamp(16px, 4vw, 40px);
    --head-h: 68px;
}

/* ── base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--s4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
a:hover { color: var(--mt-red-4); }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Skip link: the first tab stop on the page. */
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: var(--s3) var(--s4); background: var(--accent); color: var(--on-accent); border-radius: var(--r); font-weight: 500; }
.skip:focus { top: var(--s4); outline-offset: 0; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(56px, 9vw, 104px); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }
.alt { background: var(--ink-raised); }

/* ── the section signature: uppercase Ubuntu over a 40 × 4 red rule ──────── */
.kicker {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s3);
}
.title {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: var(--t-xl);
}
.title::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin-top: var(--s4);
    background: var(--accent);
    border-radius: 2px;
}
.title.centered { text-align: center; }
.title.centered::after { margin-inline: auto; }
.lede { font-size: var(--t-md); color: var(--text-dim); line-height: 1.45; }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .lede { margin-top: var(--s4); }
.section-head.centered { text-align: center; }
.section-head.centered .lede { margin-inline: auto; }
.dim { color: var(--text-dim); }
.small { font-size: var(--t-sm); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: var(--tap);
    padding: 0 var(--s5);
    border: 2px solid var(--accent);
    border-radius: var(--r);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--mt-red-4); border-color: var(--mt-red-4); color: var(--on-accent); }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover, .btn-quiet:focus-visible { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--text); background: transparent; color: var(--text); }
.btn-lg { min-height: 52px; padding-inline: var(--s6); font-size: var(--t-md); }
.btn .ic { width: 1.1em; height: 1.1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ── icons ───────────────────────────────────────────────────────────────── */
.ic, .ic-fa { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* ── header ──────────────────────────────────────────────────────────────── */
.site-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246, 246, 246, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--line); }
.head-bar {
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: var(--head-h);
}
.brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.brand img { width: auto; height: 30px; }
.nav { display: none; margin-left: auto; align-items: center; gap: var(--s1); }
.nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--s3);
    border-radius: var(--r);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
}
.nav a:hover, .nav a:focus-visible { color: var(--accent); background: var(--ink-sunken); }
.nav .btn { margin-left: var(--s2); color: var(--on-accent); }
.nav .btn:hover { background: var(--mt-red-4); }
.lang-link { gap: var(--s1); font-weight: 500; letter-spacing: .04em; }
.lang-link .ic { width: 16px; height: 16px; }

/* Phone: language + hamburger on the right, panel below the bar. */
.head-tools { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.head-tools .lang-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; }
.menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.menu .menu-icon-x { display: none; }
.menu.c .menu-icon-bars { display: none; }
.menu.c .menu-icon-x { display: block; }
.menu-item {
    display: none;
    border-top: 1px solid var(--line);
    padding: var(--s2) 0 var(--s4);
}
.menu-item.show-menu { display: block; }
.menu-item ul li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--gutter);
    color: var(--text);
    font-size: var(--t-md);
    font-weight: 500;
    text-decoration: none;
}
.menu-item ul li a:hover, .menu-item ul li a:focus-visible { background: var(--ink-sunken); color: var(--accent); }
.menu-item ul li a.menu-item-cta { margin: var(--s3) var(--gutter) 0; justify-content: center; background: var(--accent); color: var(--on-accent); border-radius: var(--r); }

@media (min-width: 996px) {
    .nav { display: flex; }
    .nav a { white-space: nowrap; }
    .head-tools { display: none; }
    .menu-item { display: none !important; }
    .brand img { height: 34px; }
}
/* Between the breakpoint and the full container the seven links plus the button share
   ~900px: tighter padding, and a hair smaller, so none of them wraps to two lines. */
@media (min-width: 996px) and (max-width: 1179px) {
    .nav a { padding: 0 var(--s2); font-size: 15px; }
    .nav .btn { padding: 0 var(--s4); }
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 88px);
}
.hero-grid {
    display: grid;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hero-copy { max-width: 620px; }
.hero h1 { text-transform: uppercase; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .sub { margin-top: var(--s4); font-size: var(--t-lg); font-weight: 500; line-height: 1.25; }
.hero .lede { margin-top: var(--s4); }
.hero .btn-row { margin-top: var(--s6); }
.hero-photo { position: relative; }
.hex-frame {
    /* The brand's own shape (brandbook p.24) — the one thing here that is decoration. */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio: 1;
    width: min(100%, 520px);
    margin-inline: auto;
    background: var(--accent);
}
.hex-frame img { width: 100%; height: 100%; object-fit: cover; }
.hex-mark {
    position: absolute;
    width: 22%;
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--accent);
    right: 2%;
    bottom: 8%;
    opacity: .92;
}
.hex-mark.two { width: 11%; right: -2%; bottom: 30%; background: var(--mt-grey); opacity: .8; }
.hero-caption { margin-top: var(--s3); text-align: center; font-size: var(--t-sm); color: var(--text-dim); }

.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s5);
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
}
.stat b { display: block; font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.stat span { display: block; margin-top: var(--s2); font-size: var(--t-sm); color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }

@media (min-width: 768px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ── about ───────────────────────────────────────────────────────────────── */
.about-grid { display: grid; gap: clamp(32px, 5vw, 72px); }
.about-text p + p { margin-top: var(--s4); }
/* The house motto. A big red opening mark rather than a left rule: the rule is the
   "side tab" the detector rejects, and the mark says "quotation" on its own. */
.quote {
    position: relative;
    margin: var(--s6) 0 0;
    padding: var(--s3) 0 0 var(--s7);
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 1.4;
}
.quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -0.1em;
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 700;
    color: var(--accent);
}
.quote cite { display: block; margin-top: var(--s2); font-size: var(--t-sm); font-style: normal; color: var(--text-dim); }
.pillars { display: grid; gap: var(--s5); }
.pillar { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); }
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar-n {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: var(--t-md);
}
.pillar h3 { text-transform: uppercase; letter-spacing: .04em; font-size: var(--t-base); }
.pillar p { margin-top: var(--s2); color: var(--text-dim); }
@media (min-width: 900px) {
    .about-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}

/* ── what we do: the flagship activities ─────────────────────────────────── */
.tiles { display: grid; gap: var(--s4); }
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--dark);
    color: var(--mt-white);
    text-decoration: none;
    isolation: isolate;
}
/* The photograph is .tile-photo, not a bare image tag: the family mark in the corner is an
   image too, and a selector on the tag stretched a 120 × 24 logo over the whole tile. */
.tile .tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 600ms var(--ease); }
.tile::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(30, 33, 33, .08) 0%, rgba(30, 33, 33, .55) 40%, rgba(30, 33, 33, .94) 100%);
}
.tile:hover .tile-photo, .tile:focus-visible .tile-photo { transform: scale(1.04); }
.tile-body { margin-top: auto; padding: var(--s5); }
.tile-kicker { font-size: var(--t-sm); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-grey); }
.tile h3 { margin-top: var(--s2); font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .02em; color: var(--mt-white); text-shadow: 0 1px 2px rgba(30, 33, 33, .6); }
.tile p { margin-top: var(--s2); color: var(--mt-grey-2); font-size: var(--t-base); text-shadow: 0 1px 2px rgba(30, 33, 33, .6); }
.tile-mark { position: absolute; top: var(--s4); right: var(--s4); height: 26px; width: auto; opacity: .9; }
.tile.wide { min-height: 360px; }
/* Five tiles, three of them wide. Two columns on a tablet (a wide tile takes both), a
   12-column grid on a desktop: wide = 6, plain = 3, so both rows fill exactly. */
@media (min-width: 640px) {
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile.wide { grid-column: span 2; }
}
@media (min-width: 1000px) {
    .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .tile { grid-column: span 3; }
    .tile.wide { grid-column: span 6; }
}

/* ── the Multicasa ───────────────────────────────────────────────────────── */
.casa-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.casa-photo { border-radius: var(--r-xl); overflow: hidden; }
.casa-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.casa-photo figcaption { padding: var(--s3) 0 0; font-size: var(--t-sm); color: var(--text-dim); }
.casa-list { display: grid; gap: var(--s3) var(--s4); margin-top: var(--s5); }
@media (min-width: 640px) { .casa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.casa-list li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-base); }
.casa-list li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .45em; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--accent); }
.casa-note { margin-top: var(--s5); font-size: var(--t-sm); color: var(--text-dim); }
@media (min-width: 900px) {
    .casa-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
    .casa-grid.flip .casa-photo { order: 2; }
}

/* ── join ────────────────────────────────────────────────────────────────── */
.join-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s3);
    margin-top: var(--s5);
}
.price b { font-size: var(--t-2xl); line-height: 1; color: var(--accent); letter-spacing: -0.02em; }
.price span { font-size: var(--t-md); color: var(--text-dim); }
.steps { counter-reset: step; display: grid; gap: var(--s4); margin-top: var(--s6); }
.steps li { position: relative; padding-left: 52px; counter-increment: step; }
.steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--accent); color: var(--on-accent);
    font-weight: 700;
}
.steps li b { display: block; font-weight: 700; }
.steps li span { color: var(--text-dim); }
.perks { display: grid; gap: var(--s3); }
.perks li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.perks li:first-child { border-top: 0; padding-top: 0; }
.perks .ic { width: 22px; height: 22px; color: var(--accent); margin-top: .1em; }
.perks li b { font-weight: 700; }
.perks li span { color: var(--text-dim); }
.join .btn-row { margin-top: var(--s6); }
.social-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.social-row a {
    display: inline-grid; place-items: center;
    width: var(--tap); height: var(--tap); min-height: 44px;
    border: 1px solid var(--line); border-radius: var(--r);
    color: var(--text);
}
.social-row a:hover, .social-row a:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (min-width: 900px) {
    .join-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* ── members' area ───────────────────────────────────────────────────────── */
.members-grid { display: grid; gap: var(--s4); }
.members-panel {
    display: flex;
    flex-direction: column;
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--ink-raised);
}
.members-head { display: flex; align-items: center; gap: var(--s3); }
.members-mark { display: grid; place-items: center; width: 44px; height: 44px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--accent); color: var(--on-accent); }
.members-mark .ic-fa { width: 22px; height: 22px; }
.members-eyebrow { font-size: var(--t-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.members-name { font-size: var(--t-md); }
.members-body { margin-top: var(--s4); }
.members-list { display: grid; gap: var(--s2); margin-top: var(--s4); color: var(--text-dim); }
.members-list li { display: flex; gap: var(--s3); }
.members-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--accent); }
.members-panel .btn { margin-top: var(--s5); align-self: flex-start; }
.members-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); }
.members-foot { margin-top: var(--s6); }
.members-foot p + p { margin-top: var(--s2); }
@media (min-width: 768px) {
    .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .members-panel .btn { margin-top: auto; padding-top: 0; }
    .members-panel .members-note { margin-top: var(--s3); }
    .members-panel .btn { margin-top: var(--s5); }
}

/* ── press ───────────────────────────────────────────────────────────────── */
.press-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--s1) var(--gutter) var(--s4);
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: thin;
    scrollbar-color: var(--mt-grey) transparent;
}
.press-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink-raised);
    border: 1px solid var(--line);
}
.press-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.press-body { padding: var(--s4); }
.press-outlet { font-size: var(--t-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.press-card h3 { margin-top: var(--s2); font-size: var(--t-base); line-height: 1.35; }
.press-card h3 a { color: var(--text); text-decoration: none; }
.press-card h3 a::after { content: ""; position: absolute; inset: 0; }
.press-card { position: relative; }
.press-card:hover h3 a, .press-card:focus-within h3 a { color: var(--accent); }
.press-hint { margin-top: var(--s2); font-size: var(--t-sm); color: var(--text-dim); }
@media (min-width: 1000px) {
    .press-strip { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; padding: 0; margin: 0; }
    .press-hint { display: none; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-list { max-width: 820px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: 56px;
    padding: var(--s3) 0;
    cursor: pointer;
    list-style: none;
    font-size: var(--t-md);
    font-weight: 500;
    line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex: none;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--accent);
    font-weight: 400;
    font-size: var(--t-md);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-item[open] summary::after { content: "–"; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }
.faq-body { padding: 0 0 var(--s5); color: var(--text-dim); }
.faq-body p + p, .faq-body ul + p, .faq-body p + ul { margin-top: var(--s3); }
.faq-body ul { display: grid; gap: var(--s2); }
.faq-body li { padding-left: var(--s5); position: relative; }
.faq-body li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--accent); }
.faq-body li b { color: var(--text); }
.faq-body ul ul { margin-top: var(--s2); }
.faq-body ul ul li::before { background: var(--mt-grey); }

/* ── contact ─────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: clamp(28px, 5vw, 64px); }
.contact-list { display: grid; gap: var(--s4); }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s4); align-items: start; padding-top: var(--s4); border-top: 1px solid var(--line); }
.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-ic { display: grid; place-items: center; width: 44px; height: 44px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--accent); color: var(--on-accent); }
.contact-ic .ic-fa { width: 20px; height: 20px; }
.contact-label { font-size: var(--t-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.contact-list li p { margin-top: var(--s1); }
.contact-list a { font-weight: 500; }
.contact-list .social-row { margin-top: var(--s2); }

.find-us {
    display: grid;
    gap: var(--s5);
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--ink-raised);
}
.find-us-plate svg { width: 100%; height: auto; border-radius: var(--r-lg); }
.fu-bg { fill: var(--mt-grey-2); }
.fu-road { stroke: var(--mt-white); stroke-width: 10; fill: none; }
.fu-road-main { stroke-width: 16; }
.fu-block { fill: var(--mt-grey); opacity: .55; }
.fu-green { fill: var(--mt-grey-3); opacity: .5; }   /* the campus green, in the brand's grey: the plate is a diagram, not a map */
.fu-pin { fill: var(--accent); }
.fu-pin-dot { fill: var(--mt-white); }
.find-us-place { font-size: var(--t-md); font-weight: 700; }
.find-us-address { color: var(--text-dim); }
.find-us .btn { margin-top: var(--s4); }
.find-us-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); }
@media (min-width: 640px) {
    .find-us { grid-template-columns: 200px 1fr; align-items: center; }
}
@media (min-width: 900px) {
    .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* ── the closing band: the one place the whole ground is red ─────────────── */
.band {
    background: var(--accent);
    color: var(--on-accent);
}
.band .wrap { display: grid; gap: var(--s5); align-items: center; }
.band h2 { text-transform: uppercase; font-size: var(--t-xl); }
.band p { margin-top: var(--s3); color: var(--mt-grey-2); }
.band .btn { background: var(--mt-white); border-color: var(--mt-white); color: var(--accent); }
.band .btn:hover, .band .btn:focus-visible { background: var(--mt-grey-1); border-color: var(--mt-grey-1); color: var(--mt-red-4); }
.band .btn-quiet { background: transparent; color: var(--on-accent); border-color: rgba(255, 255, 255, .6); }
.band .btn-quiet:hover, .band .btn-quiet:focus-visible { background: rgba(255, 255, 255, .12); border-color: var(--mt-white); color: var(--on-accent); }
.band :focus-visible { outline-color: var(--mt-white); }
@media (min-width: 900px) {
    .band .wrap { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-foot { background: var(--dark); color: var(--mt-grey); padding-block: var(--s7) var(--s6); }
.foot-partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); }
.foot-partners p { flex-basis: 100%; font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-grey); }
.foot-partners img { height: 56px; width: auto; opacity: .9; }
@media (min-width: 768px) { .foot-partners img { height: 72px; } }
.foot-partners a:hover img { opacity: 1; }
.foot-grid { display: grid; gap: var(--s5); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--mt-grey-4); }
.foot-grid a { color: var(--mt-grey-1); }
.foot-grid a:hover { color: var(--dark-accent); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot-nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-weight: 500; }
.site-foot .social-row a { border-color: var(--mt-grey-4); color: var(--mt-grey-1); }
.site-foot .social-row a:hover, .site-foot .social-row a:focus-visible { border-color: var(--dark-accent); color: var(--dark-accent); }
.site-foot .social-row { margin-top: 0; }
.foot-copy { font-size: var(--t-sm); color: var(--mt-grey); }
.site-foot :focus-visible { outline-color: var(--dark-accent); }
@media (min-width: 768px) {
    .foot-partners p { flex-basis: auto; margin-right: var(--s3); }
    .foot-grid { grid-template-columns: 1fr auto; align-items: center; }
    .foot-copy { grid-column: 1 / -1; }
}

/* ── inscripcion.html ────────────────────────────────────────────────────── */
.insc-hero { padding-block: clamp(40px, 6vw, 72px) 0; }
.insc-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.price-card {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--ink-raised);
}
.price-card .price { margin-top: var(--s2); }
.price-card .btn-row { margin-top: var(--s5); }
.price-card .btn { flex: 1 1 220px; white-space: normal; }
.price-card .small { margin-top: var(--s4); }
.approval {
    margin-top: var(--s5);
    padding: var(--s4) var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--ink);
}
.approval h2 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: .06em; }
.approval p { margin-top: var(--s2); color: var(--text-dim); }
@media (min-width: 900px) {
    .insc-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================================
   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;
}

.events .title::after {
    background-color: var(--ev-accent);
}

.events-intro {
    color: #bcbfbe;          /* Gris, 9.66:1 on the ground */
    font-family: var(--font-ui);
    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(--font-ui);
    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(--font-ui);
    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(--font-ui);
    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(--font-ui);
    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(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    margin: 0 0 12px;
}

.ev-where {
    font-family: var(--font-ui);
    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(--font-ui);
    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 {
    max-width: none;
    text-align: center;
    color: #bcbfbe;
    font-family: var(--font-ui);
    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; }
}