@charset "utf-8";
/*
Theme Name: Pride
Author: Ricardo Juárez
Author URI: https://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later
Copyright: (c) 2026 Ricardo Juárez
*/


:root {

    /* Colores */
    --primary:  #FFFFFF;
    --contrast: #000000;
    --accent:   red;
    --grey:     #888888;

    /* Espaciados */
    --pad2: 10px;
    --pad:  20px;
    --padb: 60px;
    --padh: 120px;

    /* Tipografía — tamaños */
    --fs-small:  13px;
    --fs-body:   16px;
    --fs-medium: 20px;
    --fs-big:    32px;
    --fs-huge:   64px;

    /* Tipografía — line-height */
    --lh-small:  1.3;
    --lh-body:   1.5;
    --lh-medium: 1.3;
    --lh-big:    1.1;
    --lh-huge:   1.0;

    /* Tipografía — letter-spacing */
    --ls-small:  0;
    --ls-body:   0;
    --ls-medium: 0;
    --ls-big:    -0.02em;
    --ls-huge:   -0.03em;

    /* Fuentes */
    --sans:  'Folio Std', sans-serif;
    --serif: serif;

    /* Misc */
    --real100:   100vh;
    --radius:    4px;
    --transition: 0.3s ease;
}


/* ============================================================
   BASE BODY
   ============================================================ */

body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    font-weight: 400;
    color: var(--contrast);
    background-color: var(--primary);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}


/* ============================================================
   TIPOGRAFÍA — clases de tamaño
   ============================================================ */

.small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--ls-small);
}
.body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}
.medium {
    font-size: var(--fs-medium);
    line-height: var(--lh-medium);
    letter-spacing: var(--ls-medium);
}
.big {
    font-size: var(--fs-big);
    line-height: var(--lh-big);
    letter-spacing: var(--ls-big);
}
.huge {
    font-size: var(--fs-huge);
    line-height: var(--lh-huge);
    letter-spacing: var(--ls-huge);
}


/* ============================================================
   UTILIDADES TIPOGRÁFICAS
   ============================================================ */

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic     { font-style: italic; }
.bold       { font-weight: 700; }
.normal     { font-weight: 400; }
.nowrap     { white-space: nowrap; }
.strike     { text-decoration: line-through; }

.t-primary  { color: var(--primary); }
.t-contrast { color: var(--contrast); }
.t-accent   { color: var(--accent); }
.t-grey     { color: var(--grey); }

.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.alignright  { text-align: right; }


/* ============================================================
   POST CONTENT
   ============================================================ */

.post-content p,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content blockquote,
.post-content ol,
.post-content ul {
    margin-bottom: calc(var(--fs-body) * var(--lh-body));
}

.post-content *:last-child {
    margin-bottom: 0;
}

.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}

.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }

.post-content a {
    text-decoration: underline;
}

.post-content blockquote {
    padding-left: 1em;
    border-left: 2px solid var(--contrast);
    font-style: italic;
}

.post-content img {
    margin-top: calc(var(--fs-body) * var(--lh-body));
    margin-bottom: calc(var(--fs-body) * var(--lh-body));
}


/* ============================================================
   UTILIDADES DE LAYOUT
   ============================================================ */

.none  { display: none; }
.block { display: block; }
.flex  { display: flex; }
.clear { clear: both; }

.left  { float: left !important; }
.right { float: right !important; }

.rel    { position: relative; }
.abs    { position: absolute; }
.fixed  { position: fixed; }
.sticky { position: sticky; }

.overflow-hidden { overflow: hidden; }
.pointer         { cursor: pointer; }
.no-select       { user-select: none; -webkit-user-select: none; }

.mobile  { display: none; }
.desktop { display: block; }

.padded   { padding: var(--pad); }
.padded-v { padding: var(--pad) 0; }
.padded-h { padding: 0 var(--pad); }

.margined  { margin-bottom: var(--pad); }
.marginedb { margin-bottom: var(--padb); }
.marginedh { margin-bottom: var(--padh); }


/* Menu overlay */
.menu-hover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--primary);
}

.menu-hover.appear {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.menu-open {
    overflow: hidden;
}

/* ============================================================
   INPUTS — reset
   ============================================================ */

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--grey);
    opacity: 1;
}

input[type="submit"],
button[type="submit"] {
    cursor: pointer;
}

textarea {
    resize: none;
}


/* ============================================================
   SWIPER
   ============================================================ */

.swiper-slide {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* ============================================================
   RESET
   ============================================================ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figure, figcaption,
hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
}

article, aside, canvas, figure, figcaption,
hgroup, section, audio, video { display: block; }

html, body {
    width: 100%;
    overscroll-behavior: none;
}

html {
    margin-top: 0 !important;
    background-color: var(--primary);
}
@media screen and (max-width: 782px) {
    html { margin-top: 0 !important; }
}

table  { border-collapse: collapse; }
li     { list-style: none; }
abbr   { text-decoration: none; }
button { outline: none; cursor: pointer; }
p      { margin-bottom: 0; }

a {
    text-decoration: none;
    outline: none;
    color: inherit;
}
a img { border: none !important; }

figure     { position: relative; }
figure img { width: 100%; }

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

img::selection      { background: transparent; }
img::-moz-selection { background: transparent; }

::selection      { background: var(--contrast); color: var(--primary); }
::-moz-selection { background: var(--contrast); color: var(--primary); }



/* ============================================================
   PROYECTO — tokens
   ============================================================ */

:root {
    --grey: #CCCCCC;

    /* Medidas tomadas del Figma (canvas 1440) */
    --page-pad:   20px;
    --logo-w:     950px;
    --badge-w:    170px;
    --card-w:     280px;
    --card-gap:   1px;
    --card-radius: 15px;

    /* El logo y la chapa forman un bloque de 1123px que escala en proporción */
    --top-w:      1123px;
    --logo-pc:    84.594%;
    --badge-pc:   15.138%;
    --badge-x:    83.081%;
    --badge-y:    23.810%;

    /* Tamaño del bodycopy: lo comparten la intro y el label de descargas */
    --fs-copy: 16px;

    /* Degradados del hover, uno por idioma. La posición ya no se anima
       sola: la mueve el cursor (ver --grad-x en main.js), así que basta
       con un único paso de color, tal cual. */
    --grad-en: linear-gradient(270deg, #EFBBCB 0%, #EFBBCB 10%, #46BDA0 50%, #8EC8E9 100%);
    --grad-es: linear-gradient(90deg,  #06A14B 0%, #FCEE0F 50%, #6ECCDF 100%);
    --grad-ca: linear-gradient(270deg, #ED1C25 0%, #F0B41E 30%, #F0B41E 70%, #6ECCDF 100%);
}


/* ============================================================
   UTILIDADES
   ============================================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   LANDING
   ============================================================ */

.landing {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--page-pad);
    font-weight: 700;
    /* Eje X del degradado: lo escribe main.js siguiendo al cursor.
       Sin JS (o antes del primer movimiento) se queda centrado.
       background-size al 100% (el valor por defecto) hace que el
       degradado rellene siempre la caja entera de punta a punta — mover
       background-position no revela nada distinto porque no sobra
       imagen que desplazar. Con 200% de ancho sí hay margen: cada mitad
       de la pantalla enseña una mitad distinta del degradado. */
    background-size: 200% 100%;
    background-position: var(--grad-x, 50%) 50%;
}

.landing--en { --grad: var(--grad-en); }
.landing--es { --grad: var(--grad-es); }
.landing--ca { --grad: var(--grad-ca); }


/* --- Hover: el degradado tiñe la pantalla, no el botón --------- */
/* Lo activa main.js con la clase .is-hovering (mouseenter/mouseleave),
   no :hover ni :has(): así funciona igual en cualquier navegador y no
   depende de qué soporte :has(), y --grad lo fija el propio JS según el
   idioma del elemento (el de la chapa es el de la página; el de cada
   tarjeta, el suyo — pueden no coincidir). */

.landing.is-hovering { background-image: var(--grad); }


/* --- Selector de idioma ------------------------------------ */

.lang {
    position: absolute;
    top: var(--page-pad);
    right: var(--page-pad);
    display: flex;
    gap: 6px;
    font-size: 13px;
    line-height: 1.2;
}

/* Inactivo translúcido: sobre el degradado se tiñe con el fondo */
.lang__item { color: rgba(0, 0, 0, 0.2); }

.lang__item:hover,
.lang__item.is-current { color: var(--contrast); }


/* --- Logotipo + chapa -------------------------------------- */

.landing__top {
    position: relative;
    width: var(--top-w);
    max-width: 100%;
}

.landing__logo {
    width: var(--logo-pc);
    margin: 0;
}

.landing__logo svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--contrast);
}

/* La chapa va calada: el SVG hace de máscara y el fondo se ve por los huecos */
.badge {
    position: absolute;
    left: var(--badge-x);
    top: var(--badge-y);
    width: var(--badge-pc);
    aspect-ratio: 1;
    background-color: var(--contrast);
    -webkit-mask: url(images/badge-candidate.svg) center / contain no-repeat;
            mask: url(images/badge-candidate.svg) center / contain no-repeat;
}


/* --- Intro ------------------------------------------------- */

.landing__intro {
    --line-height: 18px;
    max-width: var(--logo-w);
    margin-top: 20px;
    font-size: var(--fs-copy);
    line-height: var(--line-height);
}

.landing__intro p,
.landing__intro h2,
.landing__intro h3,
.landing__intro ul,
.landing__intro ol,
.landing__intro blockquote {
    margin-bottom: var(--line-height);
}
.landing__intro *:last-child { margin-bottom: 0; }


/* --- Descargas --------------------------------------------- */

.landing__downloads {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 47px;
}

.landing__label {
    margin: 0 0 14px;
    font-size: var(--fs-copy);
    line-height: 1.2;
    font-weight: 700;
}

/* Los botones ocupan el ancho de la caja de texto y crecen hasta el borde inferior */
.cards {
    display: flex;
    flex: 1;
    gap: var(--card-gap);
    width: var(--logo-w);
    max-width: 100%;
    min-height: 160px;
    margin: 0;
    padding: 0;
}

.cards__item {
    flex: 1 1 0;
    min-width: 0;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: var(--card-radius);
    background-color: var(--contrast);
    color: var(--primary);
    text-align: center;

    /* El texto va calado: en multiply el negro tapa y el blanco deja pasar el fondo */
    mix-blend-mode: multiply;
}

/* Mientras se mantiene pulsado (mousedown→mouseup, vía main.js): se
   invierte a blanco sólido, sin degradado ni calado, como feedback del
   clic. Al soltar vuelve a su estado normal. */
.card.is-pressed {
    background-color: var(--primary);
    background-image: none;
    color: var(--contrast);
    mix-blend-mode: normal;
}

.card__label {
    font-size: 22px;
    line-height: 25px;
}


/* --- Pie: tras el scroll, siempre sobre blanco -------------- */

.site-foot {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 35px var(--page-pad) 15px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    background-color: var(--primary);
}

/* Las dos filas de logos (Proposed by / Supported by) van agrupadas; en
   escritorio comparten fila con el crédito, empujado a la derecha. En
   móvil (responsive.css) todo pasa a columna y el crédito baja debajo. */
.site-foot__logos {
    display: flex;
    align-items: center;
    gap: 100px;
}

.logos-block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logos-block__label { margin: 0; }

.logos {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.logos__item img {
    width: auto;
    height: var(--logo-h, 30px);
}

.site-foot__credit {
    margin: 0 0 0 auto;
    color: var(--grey);
}