@charset "utf-8";
/*
Theme Name: MABF27
Text Domain: mabf27
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
*/


/* Cassette (Displaay) — versión TRIAL: sustituir por la licencia definitiva antes de publicar */
@font-face {
    font-family: 'Cassette';
    src: url('css/fonts/cassette.woff2') format('woff2'),
         url('css/fonts/cassette.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {

    /* Colores */
    --primary:  #F3F2EF;
    --paper:    #F3F2EF;
    --glass:    #242424;
    --scan-cover: #141414;   /* tapa del escaneo de entrada, algo más oscura que el cristal */
    --ink:      #151515;
    --ink-light:#9C9C9C;
    --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: clamp(17px, 1.94vw, 44px);
    --fs-big:    32px;
    --fs-huge:   64px;

    /* Tipografía — line-height */
    --lh-small:  1.3;
    --lh-body:   1.5;
    --lh-medium: 1.33;
    --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:  'Cassette', 'Helvetica Neue', Helvetica, Arial, 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;
}

/* ============================================================
   ESCÁNER — tapa negra: manchas, trama de tela, zonas y polvo
   ============================================================ */

body {
    background-color: var(--glass);
}

.scanner {
    --edge: clamp(9px, 2.7vw, 43px);
    position: relative;
    height: var(--app-height, 100vh);
    overflow: hidden;
    background-color: var(--glass);
    background-image:
        /* Polvo blanco suelto, poco */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 22 0 0 0 -17.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),
        /* Bandas horizontales finas */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='700' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0015 0.32' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.26 0 0 0 -0.125'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),
        /* Trama de tela, sobre todo horizontal */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.95' numOctaves='2' seed='3' stitchTiles='stitch' result='h'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95 0.012' numOctaves='2' seed='7' stitchTiles='stitch' result='v'/%3E%3CfeComposite in='h' in2='v' operator='arithmetic' k1='0' k2='1' k3='0.3' k4='-0.1'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.34 0 0 0 -0.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),
        /* Zonas verticales con otro tono, como las pasadas del escáner */
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 0 14%,
            rgba(0, 0, 0, 0.12) 14.6% 52%,
            rgba(0, 0, 0, 0.06) 52.5% 81%,
            rgba(255, 255, 255, 0.025) 81.6%),
        /* Franja horizontal más oscura arriba */
        linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0 34%, transparent 46%),
        /* Manchas grandes, claras y oscuras */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.005' numOctaves='3' seed='21'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0 0 0 -0.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0012 0.0035' numOctaves='4' seed='12'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.35 0 0 0 -0.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E");
    background-size: 900px 900px, 100% 700px, 240px 240px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}


/* ============================================================
   PAPEL — el borde irregular lo recorta main.js (clip-path)
   ============================================================ */

/* Como mucho 800×1080, pegado arriba a la izquierda */
.paper {
    position: absolute;
    top: var(--edge);
    left: var(--edge);
    width: calc(100% - var(--edge) * 2);
    height: calc(100% - var(--edge) * 2);
    max-width: 800px;
    max-height: 1080px;
    container-type: size;
    background-color: var(--paper);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.16);
    transform: rotate(-0.45deg);
}

/* Grano y motas del papel */
.paper::before,
.paper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.paper::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.3 0 0 0 0.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

.paper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 0 0 0 -10.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
    background-size: 900px 900px;
    opacity: 0.55;
}


/* ============================================================
   ESCANEO DE ENTRADA — tapa oscura que se destapa en columnas, a trompicones (main.js)
   ============================================================ */

/* Tapa toda la pantalla; main.js le recorta el borde superior por columnas (clip-path) */
.scan-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    background: var(--scan-cover);
    pointer-events: none;
}

.scan-pending .scan-cover { display: block; }

/* Rebanadas desplazadas: el glitch va antes que la tinta */
.paper-ink.is-glitching {
    filter: url(#xerox-glitch) url(#xerox-ink);
}

/* Hover de enlaces: un golpe corto de glitch y se queda descolocado hasta salir */
@media (hover: hover) and (pointer: fine) {
    .footer-contact a:hover {
        animation: link-glitch 0.35s steps(1) forwards;
    }
}

@keyframes link-glitch {
    0%   { filter: url(#xerox-glitch-hover); translate: -2px 0; }
    25%  { filter: url(#xerox-glitch-hover); translate: 1px 0; }
    50%  { filter: none; translate: 0 0; }
    70%  { filter: url(#xerox-glitch-hover); translate: 2px 0; }
    100% { filter: url(#xerox-glitch-hold); translate: 1px 0; }
}

/* Rayas que deja el escáner al fallar; se quedan medio marcadas */
.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    animation: scan-line-fade 1.6s ease-out forwards;
}

.scan-line.is-thin  {
    height: 1px;
    background: rgba(0, 0, 0, 0.45);
}

.scan-line.is-smear {
    height: 9px;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
}

@keyframes scan-line-fade {
    to { opacity: 0.22; }
}


/* ============================================================
   TINTA — todo lo impreso, con el filtro xerox (templates/xerox-filters.php)
   ============================================================ */

.paper-ink {
    /* Unidad del póster: 1u ≈ 1% del ancho del papel, sin pasarse en pantallas apaisadas */
    --u: min(1cqw, 1.3cqh);
    position: absolute;
    inset: 0;
    z-index: 1;
    color: var(--ink);
    filter: url(#xerox-ink);
}

/* Estirados tipo fotocopia: cada pieza lleva su scale() y main.js compensa
   el ancho para que lo que viene detrás no se monte ni deje hueco */
.header-title span,
.line > span,
.organized-label span,
.footer-contact a {
    display: inline-block;
    transform-origin: left bottom;
    white-space: nowrap;
}

.xerox-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* ============================================================
   HEADER
   ============================================================ */

#header {
    position: absolute;
    top: calc(var(--u) * 1.1);
    left: calc(var(--u) * 3);
    right: calc(var(--u) * 1.4);
}

.header-title {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--u) * 2.8);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.header-title span {
    transform: scale(1.28, 1);
}


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

.landing {
    position: absolute;
    top: 27.5%;
    left: 0;
    right: 0;
    text-align: center;
}

.line-save {
    font-size: calc(var(--u) * 3.7);
    line-height: 1.1;
    word-spacing: 0.45em;
}
.line-save > span { transform: scale(1.12, 1); } /* main.js lo ajusta al ancho de la fecha */

.line-date {
    font-size: calc(var(--u) * 6);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.line-date > span { transform: scale(0.74, 1.12); }

.line-call {
    margin-top: calc(var(--u) * 1.2);
    font-size: calc(var(--u) * 5.6);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink-light);
}
.line-call > span { transform: scale(0.62, 1.06); }

.line-call .line-call-date {
    margin-left: calc(var(--u) * 1.2);
    font-size: 0.7em;
    transform: scale(0.8, 1.06);
}


/* ============================================================
   PÁGINAS Y 404 — mismo sitio que el bloque de la landing
   ============================================================ */

#main > article {
    position: absolute;
    top: 27.5%;
    left: 33.7%;
    right: calc(var(--u) * 6);
}

.page-title {
    font-size: calc(var(--u) * 6);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: calc(var(--u) * 3.7);
    line-height: 1.1;
}

.page-content {
    max-width: 60ch;
    margin-top: calc(var(--u) * 2);
    font-size: calc(var(--u) * 2.2);
    line-height: 1.3;
}

.page-content .error-404-volver {
    display: inline-block;
}


/* ============================================================
   FOOTER — contacto a la izquierda, organizadores a la derecha
   ============================================================ */

.footer-contact {
    position: absolute;
    left: calc(var(--u) * 4.3);
    bottom: calc(var(--u) * 5.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: calc(var(--u) * 2.6);
    line-height: 1.2;
    letter-spacing: -0.04em;
    font-weight: 500;
}

.footer-contact a {
    display: table;
    transform: scale(0.96, 1.05);
}

.footer-organized {
    position: absolute;
    right: calc(var(--u) * 4.3);
    bottom: calc(var(--u) * 4.6);
}

.organized-label {
    margin: 0 0 calc(var(--u) * 3.4) calc(var(--u) * 9.6);
    font-size: calc(var(--u) * 2.4);
    line-height: 1;
}
.organized-label span { transform: scale(1.3, 1); }

.organized-logos {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2.3);
}

.logo svg,
.logo img {
    display: block;
    width: auto;
    height: 100%;
}
.logo-mutantes { height: calc(var(--u) * 8.3); }
.logo-lce      { height: calc(var(--u) * 4.6); }

/* Logos provisionales en texto, hasta tener los SVG */
.logo-text {
    display: inline-block;
    transform-origin: left center;
    white-space: nowrap;
}
.logo-mutantes .logo-text {
    font-size: calc(var(--u) * 2.6);
    line-height: 1;
    letter-spacing: -0.03em;
    transform: scale(0.72, 1.12);
}
.logo-lce .logo-text {
    font-size: calc(var(--u) * 2.2);
    line-height: 1;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.04em;
}


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