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


/* ============================================================
   FUENTE — Monument Grotesk Heavy (único estilo)
   ============================================================ */
@font-face {
    font-family: 'Monument';
    src: url('fonts/MonumentGrotesk-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Monument';
    src: url('fonts/MonumentGrotesk-HeavyItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}


:root {

    /* Colores — blanco, negro y 25% negro */
    --primary:  #FFFFFF;
    --contrast: #000000;
    --grey:     #00000040;
    --accent:   #000000;

    /* Espaciados */
    --pad:  20px;
    --padm: 100px;
    --padb: 200px;
    --padh: 300px;

    /* Tope de las imágenes de la home: 500px, o el ancho útil si es menor */
    --thumb: min(500px, calc(100vw - var(--pad) * 2));

    /* Hueco entre proyectos en el scroll horizontal */
    --gap: 250px;

    /* Tipografía — único estilo */
    --font:   'Monument', Arial, sans-serif;
    --fs:      16px;
    --fs-big:  32px;
    --lh:      1.1;   /* 110% */
    --lh-big:  1.1;   /* big siempre a 110% */
    --ls:      0;

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


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

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

/* Único estilo tipográfico para todo */
h1, h2, h3, h4, h5, h6, p, a, span, li, div, button, input, textarea {
    font-size: var(--fs);
    line-height: var(--lh);
    letter-spacing: var(--ls);
    font-weight: 800;
}


/* Dos tamaños en todo el sitio: 16px (base) y 32px (.big) */
.big,
.big p {
    font-size: var(--fs-big);
    line-height: var(--lh-big);
    letter-spacing: var(--ls);
    vertical-align: middle;
}


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

.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) * 1.4);
    margin-bottom: calc(var(--fs) * 1.4);
}


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


/* 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;
    overflow-x: clip;   /* nada desborda en horizontal (sliders incluidos) */
}

html {
    margin-top: 0 !important;
    background-color: var(--primary);

    /* Safari/Chrome en iOS inflan por su cuenta el texto de los bloques
       anchos al girar el móvil (text autosizing): la intro salía gigante en
       apaisado por mucho que el CSS pidiera 14px. Con 100% se queda el
       tamaño que se pide, y a diferencia de `none` no rompe el zoom de
       accesibilidad del usuario. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@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: var(--grey);
}
/* Los estados hover viven en responsive.css, solo en desktop */
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); }



/* ============================================================
   HOME — composición a pantalla completa
   ============================================================ */

body.page-template-home,
body.single {
    background: var(--primary);
}

/* En HOME todo es fijo; el scroll vertical mueve los proyectos en horizontal.
   El spacer da la altura de scroll (lo calcula el JS). */
body.page-template-home #main { position: static; }

.home-spacer {
    width: 100%;
    height: 100vh; /* lo sobreescribe el JS con la longitud real de scroll */
    pointer-events: none;
}

/* --- Intro (arriba) ------------------------------------------------ */
.home-intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--pad);
    z-index: 40;

    /* Con viewport-fit=cover la página llega a los bordes físicos, así que el
       texto tiene que apartarse del notch. Los env() valen 0 donde no hay
       recorte, o sea que fuera del móvil apaisado esto no cambia nada. */
    padding-left:  max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
}
.home-intro .intro-inner { max-width: 100%; }

.home-intro .intro-toggle,
.home-intro .intro-email,
.home-intro .intro-ig {
    color: var(--grey);
    cursor: pointer;
}

.home-intro .intro-expanded {
    display: none;
}
.home-intro.is-open .intro-expanded { display: inline; }
.home-intro.is-open .intro-toggle    { display: none; }

/* --- Logo central (blend difference) ------------------------------ */
/* Mantiene el alto (100px arriba / 150px abajo) pero centrado verticalmente */
.home-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    height: calc(var(--real100) - 250px);
    transform: translate(-50%, -50%);
    z-index: 55;   /* por encima del footer, para que el difference lo pise */
    mix-blend-mode: difference;
    pointer-events: none;
}
.home-logo svg,
.home-logo img {
    height: 100%;
    width: auto;
    display: block;
}
.home-logo svg path { fill: #fff; } /* blanco → difference invierte sobre el fondo */

/* --- Proyectos (scroll horizontal) -------------------------------- */
.projects {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}
.projects-track {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    gap: var(--gap);
    will-change: transform;
    transform: translate(0, -50%);
}
/* El slot que reserva el flex = ancho VISUAL de la imagen ya girada (su alto).
   Lo calcula el JS por imagen; así el gap es el mismo hueco real entre todas,
   sea cual sea su orientación. La imagen va absoluta para poder desbordar el slot. */
/* La caja del item es el hueco que reserva el flex, no la foto (y girada 90º
   queda perpendicular a ella). El puntero solo lo capta la figura, que sí
   mide exactamente lo que la imagen. */
.project-item {
    position: relative;
    flex: 0 0 auto;
    height: 500px;
    will-change: transform;
    pointer-events: none;
}
.project-item .project-figure { pointer-events: auto; }
/* La figura se ajusta a la imagen y sale del flujo: así el slot lo marca el
   JS y el hover puede calcar el tamaño exacto de la foto. */
.project-item .project-figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
.project-item .project-media {
    max-width: var(--thumb);
    max-height: var(--thumb);
    width: auto;
    height: auto;
    display: block;
}

/* Hover: color de fondo del proyecto + «Título. Año.» */
.project-item .project-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    opacity: 0;
}
.project-item .project-label {
    color: var(--contrast);
    text-align: center;
    padding: 0 var(--pad);
}

/* --- Cookies (abajo izquierda) ------------------------------------ */
.cookie-notice {
    position: fixed;
    left:   max(var(--pad), env(safe-area-inset-left));
    bottom: max(var(--pad), env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    gap: 0.6em;
    align-items: baseline;
}
.cookie-notice.is-hidden { display: none; }
.cookie-notice .cookie-label { color: var(--contrast); }
.cookie-notice button {
    color: var(--grey);
    cursor: pointer;
    padding: 0;
}

/* --- Footer -------------------------------------------------------- */
/* En HOME queda por debajo del viewport: hay que scrollear hasta el final
   para verlo. Sin fondo: el logo pasa por encima. */
#footer {
    position: relative;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--pad);
    padding-left:  max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
    gap: var(--pad);
}
#footer .footer-nav ul {
    display: flex;
    gap: 1.6em;
    flex-wrap: wrap;
}


/* ============================================================
   SINGLE — proyecto
   ============================================================ */

/* --- Intro --------------------------------------------------------- */
.single-intro {
    max-width: 1200px;
    padding: var(--pad) var(--pad) var(--padb);
}

/* --- Bloque imagen — siempre a pantalla completa -------------------- */
.block-image {
    width: 100%;
    height: 100vh;
}
.block-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
}
.block-image.is-fulled  img { object-fit: cover; }
.block-image.is-contain img { object-fit: contain; }

/* --- Bloque texto -------------------------------------------------- */
.block-text {
    margin: var(--padb) auto;
    max-width: 760px;
    padding: 0 var(--pad);
    text-align: left;
}

/* --- Bloque slider ------------------------------------------------- */
/* El pie de foto y el botón van absolutos, así el margen inferior se
   mide desde la imagen y no desde el texto. */
.block-slider {
    position: relative;
    margin: var(--padm) 0;
}
/* clip (y no hidden) permite que el pie de foto sobresalga por abajo
   sin generar scroll horizontal */
.block-slider .swiper {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}
.block-slider .swiper-slide {
    position: relative;
    width: auto;
    height: 70vh;
}
.block-slider .swiper-slide img {
    width: auto;
    height: 100%;
    max-width: calc(100vw - var(--pad) * 2);
    object-fit: cover;
}

/* Cada foto lleva su propio pie. En desktop se oculta y sale en hover. */
.block-slider .slide-caption {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 10px;
    color: var(--contrast);
    white-space: nowrap;
}

/* Por encima del pie: con nowrap un pie largo llega hasta el botón */
.block-slider .slider-next {
    position: absolute;
    z-index: 2;
    top: 100%;
    right: var(--pad);
    padding-top: 10px;
    color: var(--grey);
    cursor: pointer;
    white-space: nowrap;
}
.block-slider .slider-next.is-disabled { opacity: 0; pointer-events: none; }

/* --- Bloque vídeo -------------------------------------------------- */
/* Una pantalla de alto con 100px de aire a los lados. */
.block-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--real100);
    padding: 0 var(--padm);
}

/* La caja se ciñe a la proporción del vídeo (--rw/--rh, que pone la
   plantilla con la portada y corrige el JS con el vídeo ya cargado): se ve
   siempre entero y play/pause cae en SU esquina, no en la del bloque.
   El ancho es el menor entre el hueco disponible y el que tendría el vídeo
   si llenara el alto — eso es exactamente un «contain». */
.block-video-inner {
    position: relative;
    aspect-ratio: var(--rw) / var(--rh);
    width: min(100%, var(--real100) * var(--rw) / var(--rh));
    max-height: 100%;
}
.block-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* red de seguridad si portada y vídeo no coinciden */
    cursor: pointer;       /* toda la superficie alterna play / pause */
}

/* Fuera del vídeo, pegado a su esquina, y en desktop escondido hasta el
   hover: mismos 10px y mismo sitio que el pie del slider. */
.block-video .video-toggle {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px 0 0;
    background: none;
    border: 0;
    color: var(--contrast);
    white-space: nowrap;
}

/* ============================================================
   PÁGINAS — legales y secundarias
   ============================================================ */
.page-content {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--pad);
}


/* --- Volver al inicio ---------------------------------------------- */
.back-home {
    position: fixed;
    left: var(--pad);
    bottom: var(--pad);
    z-index: 60;
}