/* ===========================================================
   Transferido desde la maqueta aprobada (Maqueta_Malba/style/default.css)
   =========================================================== */

/***GLOBAL VARIABLES
*****************************************************/
:root {
    /***TEXT***/
    /*--fontSize: clamp(1rem, 1.25vw, 1.5rem);*/
    /* Tamaño agregado por la maqueta del 2026-09-10 (default.css:6). No estaba
     * en la entrega anterior, con la que se armó este theme: la clase
     * .font_size_xxsmall se usaba en el markup y no existía en el CSS, así que
     * el texto salía al tamaño heredado. */
    --fontSizeXXSmall: 0.75rem;
    --fontSizeXSmall: 1rem;
    --fontSizeSmall: 1.3rem;
    --fontSizeMedium: 1.75rem;
    --fontSizeLarge: 3.6rem;
    --fontSizeXLarge: 5.5rem;
    --fontSizeLogo: 1.6rem;
    --fontWeight: 400;
    --letterSpacing: 0.01em;
    --wordSpacing: 0em;
    --lineHeightHigh: 1.4;
    --lineHeightNatural: 1.2;
    --lineHeightLow: 1;
    /***FONTS***/
    --Arial: Arial, Helvetica, sans-serif;
    --LatinxBlack: "Latinx Black", Arial, Helvetica, sans-serif;
    --LatinxTextRegular: "Latinx Text Regular", Arial, Helvetica, sans-serif;
    --LatinxTextRegularOblique: "Latinx Text Regular Oblique", Arial, Helvetica, sans-serif;
    --LatinxTextBold: "Latinx Text Bold", Arial, Helvetica, sans-serif;
    --LatinxTextBoldOblique: "Latinx Text Bold Oblique", Arial, Helvetica, sans-serif;
    --SwissMediumItalic: "Swiss 721 Medium Italic", Arial, Helvetica, sans-serif;
    /***SPACES***/
    --spaceY: var(--fontSizeSmall);
    --spaceX: calc(var(--fontSizeMedium) * var(--lineHeightHigh));
    --bodySpaces: 0;
    --rowGutterXSmall: calc(var(--fontSizeXSmall) * var(--lineHeightHigh));
    --rowGutterSmall: calc(var(--fontSizeSmall) * var(--lineHeightHigh));
    --rowGutterMedium: calc(var(--fontSizeMedium) * var(--lineHeightHigh));
    --rowGutterLarge: calc(var(--fontSizeLarge) * var(--lineHeightLow));
    --rowGutterLogo: calc(var(--fontSizeLogo) * var(--lineHeightLow));
    --rowGutterBetweenSections: calc(var(--rowGutterMedium) * 3);
    --colGutter: calc(var(--spaceX)*0.33);
    --mainTopSpace: var(--headerHeight);
    --mainBottomSpace: calc(var(--rowGutterMedium) * 3);
    /***SIZES***/
    --headerHeight: calc(var(--spaceY)*2 + var(--rowGutterLogo));
    --headerHeightXSmall: calc(var(--spaceY)*2 + var(--rowGutterXSmall));
    --headerHeightSmall: calc(var(--spaceY)*2 + var(--rowGutterSmall));
    --headerHeightMedium: calc(var(--spaceY)*2 + var(--rowGutterMedium));
    --headerHeightLarge: calc(var(--spaceY)*2 + var(--rowGutterLarge));
    --headerHeightXLarge: calc(var(--spaceY)*2 + var(--rowGutterXLarge));
    --footerHeight: calc(var(--spaceY)*2 + var(--rowGutterSmall));
    --mainWidth: 1800px;
    --mainHeight: calc(100vh - var(--headerHeight) - var(--mainBottomSpace) - var(--footerHeight));
    --colWidth: calc((100vw - var(--spaceX)*2 - var(--colGutter)*var(--gridGutters)) / var(--gridColumns));
     --tagHeight: calc(var(--rowGutterXSmall) + var(--fontSizeXSmall)*1.1);

    /***GRIDS***/
    --gridColumns: 12;
    --gridGutters: calc(var(--gridColumns) - 1);
    --gridTemplate: repeat(var(--gridColumns), 1fr);
    --gridTemplateInner: repeat(9, 1fr);
    --gridGap: calc(var(--rowGutterMedium)*2) var(--colGutter);
    /***COLOR***/
    --paletteWhite: #FFFFFF;
    --paletteGray: #999999;
    --paletteBlack: #000000;
    --paletteViolet: mediumslateblue;
    --paletteAlpha: transparent;
    --backColor: var(--paletteWhite);
    --textColor: var(--paletteBlack);
    --linkColor: var(--paletteBlack);
    --hoverColor: var(--paletteGray);
    /***DECORATION***/
    --linkDeco: underline;
    --borderWidth: 1px;
    --borderLine: var(--borderWidth) solid var(--textColor);
    /***TRANSITION***/
    --transitionDuration: 0.15s;
    --transitionDurationSlow: 0.3s;
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
    display: none;
}
::-webkit-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::-moz-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::-ms-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::-o-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
img::-webkit-selectio {
    color: transparent;
    background-color: transparent;
}
img::-moz-selection {
    color: transparent;
    background-color: transparent;
}
img::-ms-selection {
    color: transparent;
    background-color: transparent;
}
img::-o-selection {
    color: transparent;
    background-color: transparent;
}
img::selection {
    color: transparent;
    background-color: transparent;
}
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    /*color-scheme: light dark;*/
    scroll-behavior: smooth;
}
body {
    position: relative;
    margin: var(--bodySpaces);
    color: var(--textColor);
    background: var(--backColor);
}
ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
li {
  display: inline;
}
a {
    color: var(--linkColor);
    text-decoration: none;
    transition-property: color;
    transition-duration: var(--transitionDuration);
}
a:hover {
    color: var(--hoverColor);
    transition-property: color;
    transition-duration: var(--transitionDuration);
}
h1, h2, h3 {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding: 0;
    font-size: var(--fontSizeMedium);
    font-style: normal;
    font-weight: 400;
}
p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
span {
    display: inline;
}
form, input, textarea, submit, button,
iframe, embed, audio {
    margin: 0;
    padding: 0;
    color: var(--textColor);
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: inherit;
}
button {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
input:focus, textarea:focus {
    outline: none;
}
input[name="submit"] {
	cursor: pointer;
}
:-webkit-input-placeholder {
	/*internet explorer*/
	color: var(--textColor);
}
::-moz-input-placeholder {
	/*mozilla edge*/
    color: var(--textColor);
}
::-ms-input-placeholder {
	/*microsoft edge*/
    color: var(--textColor);
}
::-o-input-placeholder {
	/*microsoft edge*/
    color: var(--textColor);
}
::placeholder {
	/*chrome, firefox, opera, safari*/
    color: var(--textColor);
}
img, video {
    vertical-align: middle;
}
img.lazy,
video.lazy {
    opacity: 0;
    transition: opacity var(--transitionDuration);
}
img.lazy.loaded,
video.lazy.loaded {
    opacity: 1;
}

/***FONTS
*****************************************************/
* {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
	text-size-adjust: 100%;
    -webkit-font-smoothing: smooth;
	-moz-font-smoothing: smooth;
    -moz-osx-font-smoothing: smooth;
	-ms-font-smoothing: smooth;
    -o-font-smoothing: smooth;
    text-rendering: geometricPrecision;
}
.font_size_xxsmall {
    font-size: var(--fontSizeXXSmall);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeightNatural);
}
.font_size_xsmall {
    font-size: var(--fontSizeXSmall);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeightHigh);
}
.font_size_small {
    font-size: var(--fontSizeSmall);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeightHigh);
}
.font_size_medium {
    font-size: var(--fontSizeMedium);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeightHigh);
}
.font_size_large {
    font-size: var(--fontSizeLarge);
    letter-spacing: 0px;
    line-height: var(--lineHeightLow);
}
.font_size_xlarge {
    font-size: var(--fontSizeXLarge);
    letter-spacing: 0px;
    line-height: var(--lineHeightLow);
}
.font_size_logo {
    font-size: var(--fontSizeLogo);
    letter-spacing: 0px;
    line-height: var(--lineHeightLow);
}
.font_style_black {
    font-family: var(--LatinxBlack);
}
.font_style_regular {
    font-family: var(--LatinxTextRegular);
}
.font_style_regular_oblique {
    font-family: var(--LatinxTextRegularOblique);
}
.font_style_bold {
    font-family: var(--LatinxTextBold);
}
.font_style_bold_oblique {
    font-family: var(--LatinxTextBoldOblique);
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.lowercase {
    text-transform: lowercase;
}

/***HEADER AND MENU
*****************************************************/
header {
    width: 100%;
    height: var(--headerHeight);
    position: fixed;
    top: 0;
    padding: var(--spaceY) var(--spaceX);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition-property: background;
    transition-duration: var(--transitionDurationSlow);
}
header:not(.alpha) {
    background: var(--backColor);
}
header.alpha {
    background: transparent;
}
header.alpha.on,
header.on {
    background: var(--paletteBlack);
    color: var(--paletteWhite);
}
header.alpha.on a,
header.on a {
    color: var(--paletteWhite);
}
header.alpha.on a:hover,
header.on a:hover {
    color: var(--paletteGray);
}
nav.header_menu ul {
    display: flex;
    justify-content: space-between;
    gap: var(--colGutter);
    width: calc(var(--colWidth)*6 + var(--colGutter)*5);
}
header .lang_button {
    transition-property: opacity;
    transition-duration: var(--transitionDurationSlow);
}
header:not(.on) .lang_button {
    opacity: 0;
    pointer-events: none;
}
header.on .lang_button {
    opacity: 1;
}
header.alpha .lang_button a:hover {
    color: var(--paletteGray);
}
nav.header_menu ul .menu_button {
    display: flex;
    align-items: center;
    gap: calc(var(--fontSizeMedium) * 0.33);
    cursor: pointer;
}
nav.header_menu ul .menu_button svg.burger_icon {
    width: auto;
    height: var(--fontSizeXSmall);
    margin-top: 1px;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: butt;
    transition-property: stroke;
    transition-duration: var(--transitionDurationSlow);
}
header:not(.on) nav.header_menu ul .menu_button svg.burger_icon {
    stroke: var(--textColor);
}
header.on nav.header_menu ul .menu_button svg.burger_icon {
    stroke: var(--paletteWhite);
}
nav.header_menu .menu_button svg.burger_icon line {
    vector-effect: non-scaling-stroke;
}
nav.header_menu .menu_button svg.burger_icon line {
    transition-property: opacity;
    transition-duration: var(--transitionDurationSlow);
}
header.on nav.header_menu .menu_button svg.burger_icon line.line_top,
header.on nav.header_menu .menu_button svg.burger_icon line.line_bottom {
    opacity: 0;
}
.main_nav {
    position: fixed;
    top: var(--headerHeight);
    z-index: 300;
    display: flex;
    gap: var(--rowGutterLarge) var(--colGutter);
    width: 100vw;
    height: calc(100vh - var(--headerHeight));
    padding: var(--mainTopSpace) var(--spaceX) calc(var(--spaceY)*3);
    color: var(--paletteWhite);
    background: var(--paletteBlack);
    transition-property: opacity, visibility;
    transition-duration: var(--transitionDurationSlow), 0s;
}
.main_nav:not(.on) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition-delay: 0s, var(--transitionDurationSlow);
}
.main_nav.on {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s, 0s;
}
.main_nav > * {
    flex: 1;
    width: 50%;
}
.main_nav a {
    color: var(--paletteWhite);
}
.main_nav a:hover {
    color: var(--paletteGray);
}
.main_nav .nav_contact  {
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.main_nav .nav_contact .contact_data {
    display: flex;
    column-gap: var(--colGutter);
}
.main_nav .nav_contact .contact_data .data_item {
    width: calc(var(--colWidth) * 3 + var(--colGutter) * 2);
}
.main_nav nav.menu  {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main_nav nav.menu ul {
    line-height: var(--lineHeightNatural);
}
.main_nav nav.menu ul li {
    display: block;
}
.main_nav .menu_search {
    position: relative;
    padding-bottom: calc(var(--spaceY)*0.25);
    border-bottom: 1px solid var(--paletteWhite);
}
.main_nav .menu_search form {
    display: contents;
}
.main_nav .menu_search input,
.main_nav .menu_search input::placeholder {
    color: var(--paletteWhite);
}
.main_nav .menu_search input {
    width: 100%;
}
.menu_search .action_button {
    position: absolute;
    right: 0;
    bottom: calc(var(--spaceY)*0.5);
}
.menu_search .action_button .button_icon {
    margin-right: calc(var(--latinxTextSmall) * 0.5);
    align-self: center;
    width: calc(var(--fontSizeLarge) * 0.75);
    height: calc(var(--fontSizeLarge) * 0.75);
    fill: none;
    stroke: var(--paletteWhite);
    stroke-width: 2px;
    stroke-linecap: butt;
}

/***MAIN TEMPLATE
*****************************************************/
main.content {
    position: relative;
    margin-inline: auto;
    margin-bottom: var(--mainBottomSpace);
    max-width: auto;
    min-height: var(--mainHeight);
}
body:not(#index) main.content {
    margin-top: var(--mainTopSpace);
}
body#index main.content {
    margin-bottom: 0;
}
body#acerca main.content section {
    padding-top: var(--spaceY);
}
body:not(#acerca) section:not(:first-child) {
    margin-top: var(--rowGutterBetweenSections);
}

/***FOOTER***/
footer {
    width: 100%;
    min-height: var(--footerHeight);
    padding-inline: var(--spaceX);
}
footer .footer_content {
    padding-block: var(--spaceY) calc(var(--spaceY)*3);
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    border-top: var(--borderLine);
}
footer .footer_logo {
    grid-column: 7/13;
    text-align: right;
}
footer .footer_data {
    grid-column: 1/7;
    display: flex;
    column-gap: var(--colGutter);
}
footer .footer_data .data_item {
    width: calc(var(--colWidth) * 3 + var(--colGutter) * 2);
}

/***RESPONSIVE (mobile nav)
*****************************************************/
@media (max-width: 1023px) {
    :root {
        --viewportHeight: calc(var(--vh, 1vh) * 100);
    }
    body {
        height: 100vh;
        height: var(--viewportHeight);
    }
}
@media (max-width: 480px) {
    body.scroll_less {
        overflow: hidden;
    }
    nav.menu:not(.on) {
       display: none;
    }
    nav.menu.on {
        display: inline-block;
    }
}

/***SECIONS***/
section .section_header,
section:not(.artwork_text) .text,
section .grid .grid_stack,
section .list {
    padding-inline: var(--spaceX);
}
section .section_header {
    display: flex;
    column-gap: var(--colGutter);
    justify-content: space-between;
    align-items: center;
    padding-block: var(--spaceY);
    background: var(--paletteWhite);
}
section .section_header.dark {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
section .section_header .header_nav {
    display: flex;
    justify-content: start;
    column-gap: var(--spaceX);
}
section .section_header .header_nav a {
    color: var(--paletteGray);
}
section .section_header .header_nav a.active,
section .section_header .header_nav a:hover {
    color: var(--paletteBlack);
}
section .section_header .header_actions,
section .section_sub_header .sub_header_actions,
section .section_footer .footer_actions {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: calc(var(--colGutter) * 0.75);
}
section .section_header .header_actions .action_button,
section .section_sub_header .sub_header_actions .action_button,
section .section_footer .footer_actions .action_button,
.sheet .sheet_data .data_action .action_button {
    position: relative;
    border: 1px solid var(--textColor);
    padding: calc(var(--fontSizeXSmall)*0.3) calc(var(--fontSizeXSmall)*1) calc(var(--fontSizeXSmall)*0.35);
    background: var(--paletteWhite);
    border-radius: 2px;
    cursor: pointer;
    transition-property: color, background, border-color, padding;
    transition-duration: var(--transitionDuration);
}
section .section_header .header_actions .action_button:hover,
section .section_sub_header .sub_header_actions .action_button:hover,
section .section_footer .footer_actions .action_button:hover,
.sheet .sheet_data .data_action .action_button:hover {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
/* Flechas de mover los carruseles (pedido del cliente, CSV "Botones"): sin
   recuadro. Son un control de navegación, no un botón de acción como
   "Más obras" o "Mostrar filtros", que sí conservan la caja del diseño.

   El borde se vuelve transparente en vez de sacarse: así conservan el mismo
   padding y la misma caja que el resto de los botones de la fila, y siguen
   alineadas con "Más obras". Con `border: none` + `padding: 0` la flecha se
   encogía y quedaba descolgada.

   El hover pasa la flecha de negro a gris, sin tocar el fondo — invertir a
   fondo negro solo tiene sentido cuando hay recuadro que invertir. */
section .section_header .header_actions .action_button.button_left,
section .section_header .header_actions .action_button.button_right {
    border-color: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
section .section_header .header_actions .action_button.button_left svg,
section .section_header .header_actions .action_button.button_right svg {
    display: block;
    width: 16px;
    height: 16px;
}
section .section_header .header_actions .action_button.button_left:hover,
section .section_header .header_actions .action_button.button_right:hover {
    color: var(--paletteGray);
    background: var(--paletteWhite);
}
section .section_header.dark .header_actions .action_button {
    border: 1px solid var(--paletteWhite);
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
section .section_header.dark .header_actions .action_button:hover {
    color: var(--paletteBlack);
    background: var(--paletteWhite);
}
section .section_header .header_actions a.action_button:hover,
section .section_sub_header .sub_header_actions a.action_button:hover,
section .section_footer .footer_actions a.action_button:hover,
.sheet .sheet_data .data_action a.action_button:hover {
    padding-right: calc(var(--fontSizeXSmall) * 2.25);
}
.sheet .sheet_data .data_action {
    margin-top: calc(var(--spaceY)*2);
}
section .section_header .header_actions .action_button .arrow,
section .section_sub_header .sub_header_actions .action_button .arrow,
section .section_footer .footer_actions .action_button .arrow,
.sheet .sheet_data .data_action .action_button .arrow {
    position: absolute;
    margin-left: calc(var(--fontSizeXSmall) * 0.5);
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: var(--transitionDuration);
    transition-delay: 0;
}
.sheet .sheet_data .data_action .action_button .arrow {
    margin-top: calc(var(--fontSizeXSmall) * 0.35);
}
section .section_header .header_actions .action_button:hover .arrow,
section .section_sub_header .sub_header_actions .action_button:hover .arrow,
section .section_footer .footer_actions .action_button:hover .arrow,
.sheet .sheet_data .data_action .action_button:hover .arrow {
    opacity: 1;
    transition-delay: 0.15s;
}
section .section_footer {
    margin-top: var(--spaceY);
    text-align: center;
}
/* "Cargar más" al final de los resultados: centrado (el resto de los
   .footer_actions alinean a la derecha, pero acá el botón cierra el listado y
   el propio .section_footer ya declara text-align: center), y con el mismo
   crecimiento del padding en hover que los <a class="action_button">, para que
   la flecha tenga lugar donde aparecer. */
/* El selector lleva "section" y ".section_footer" porque la regla que alinea a
   la derecha es "section .section_footer .footer_actions" (0,2,1): con
   ".load-more-wrapper .footer_actions" (0,2,0) perdía y el botón quedaba
   pegado al borde derecho. */
section .section_footer.load-more-wrapper .footer_actions {
    justify-content: center;
}
section .section_footer .footer_actions button.action_button:hover {
    padding-right: calc(var(--fontSizeXSmall) * 2.25);
}

/***TAGS***/
.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: calc(var(--spaceY)*0.5) calc(var(--colGutter)*0.75);
}
.tags .tag_button {
    display: inline-block;
    border: 1px solid var(--textColor);
    padding: calc(var(--fontSizeXSmall)*0.5) calc(var(--fontSizeXSmall)*1) calc(var(--fontSizeXSmall)*0.6);
    background: var(--paletteWhite);
    border-radius: 2px;
    cursor: pointer;
    transition-property: color, background;
    transition-duration: var(--transitionDuration);
}
.tags .tag_button:hover {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
    border-radius: 3px;
}
.dark .tags .tag_button {
    border: 1px solid var(--paletteWhite);
    color: var(--paletteWhite);
    background: transparent;
}
.dark .tags .tag_button:hover {
    color: var(--paletteBlack);
    background: var(--paletteWhite);
    border-radius: 3px;
}

/***ARTWORK SHEET***/
.artwork_sheet .sheet {
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    align-items: start;
    padding-inline: var(--spaceX);
}
.sheet .sheet_data {
    grid-column: 1/7;
    height: 100%;
}
.sheet .sheet_data .data_main {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterMedium);
    justify-content: space-between;
    height: 100%;
}
body#artwork .sheet .sheet_data .data_main {
    height: calc(100vh - var(--headerHeight) - var(--spaceY) - var(--headerHeightXSmall)*2);
}
/* --- "Obra destacada" del home. Las tres primeras reglas vienen tal cual de
   la maqueta (Maqueta_Malba/style/default.css), que las tenía y no se habían
   transferido porque el bloque todavía no existía. --- */
body#index .sheet .sheet_data .data_main {
    height: 100%;
}
body#index .artwork_sheet .sheet.dark {
    padding-block: calc(var(--spaceY)*2);
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
.sheet .sheet_data .data_main .main_header .main_text {
    width: calc(var(--colWidth) * 4.5 + var(--colGutter) * 3.5);
}
/* De las obras que se renderizan, se ve solo la que el JS marca como visible
   (o la primera, si el JS no corre). */
.featured_work {
    margin-top: var(--rowGutterBetweenSections);
    background: var(--paletteBlack);
}
.featured_work .featured_item {
    display: none;
}
.featured_work .featured_item.visible {
    display: block;
}
/* El texto se corta a 4 renglones; "Leer más" lleva a la ficha y lo muestra el
   JS solo cuando el texto quedó efectivamente cortado. */
.featured_work .main_text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.featured_work .main_more {
    display: none;
    position: relative;
    margin-top: calc(var(--rowGutterXSmall) * 0.5);
    border: 1px solid var(--paletteWhite);
    padding: calc(var(--fontSizeXSmall)*0.3) calc(var(--fontSizeXSmall)*1) calc(var(--fontSizeXSmall)*0.35);
    color: var(--paletteWhite);
    background: transparent;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition-property: color, background, border-color, padding;
    transition-duration: var(--transitionDuration);
}
.featured_work .main_more.visible {
    display: inline-block;
}
.featured_work .main_more .arrow {
    position: absolute;
    margin-left: calc(var(--fontSizeXSmall) * 0.5);
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--transitionDuration);
    transition-delay: 0;
}
.featured_work .main_more:hover {
    color: var(--paletteBlack);
    background: var(--paletteWhite);
    padding-right: calc(var(--fontSizeXSmall) * 2.25);
}
.featured_work .main_more:hover .arrow {
    opacity: 1;
    transition-delay: 0.15s;
}
.featured_work .sheet_media img {
    width: 100%;
    height: auto;
}
body#artwork .sheet .sheet_data .data_main .main_header {
    position: sticky;
    top: var(--headerHeight);
    margin-bottom: calc(var(--tagHeight) + var(--rowGutterMedium));
}
.sheet .sheet_data .data_info {
     margin-top: calc(var(--headerHeightXSmall) + var(--spaceY));
}
.sheet_data .data_info .info_row:first-child {
    border-top: var(--borderLine);
}
.sheet_data .data_info .info_row {
    padding-block: calc(var(--spaceY)*0.6);
    border-bottom: var(--borderLine);
}
.data_info .info_row .row_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}
.info_row .row_title svg.plus_cross {
    height: var(--rowGutterXSmall);
    transform-origin: center;
    transition-property: transform;
    transition-duration: var(--transitionDurationSlow);
}
.info_row:not(.open) .row_title svg.plus_cross {
    transform: rotate(0deg);
}
.info_row.open .row_title svg.plus_cross {
    transform: rotate(45deg);
}
.info_row .row_title .plus_cross line,
.media_footer .footer_actions svg.plus_cross line {
    fill: none;
    stroke: var(--paletteBlack);
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
}
.data_info .info_row .row_content {
    display: grid;
    transition-property: padding-block, grid-template-rows, opacity;
    transition-duration: var(--transitionDurationSlow);
}
.data_info .info_row .row_content:not(.row_text) {
    padding-inline: calc(var(--colWidth)*2 + var(--colGutter)*2) var(--spaceX);
}
.data_info .info_row .row_content.row_text {
    padding-inline: 0 var(--spaceX);
}
.data_info .info_row:not(.open) .row_content {
    grid-template-rows: 0fr;
    padding-block: 0;
    opacity: 0;
}
.data_info .info_row.open .row_content {
    grid-template-rows: 1fr;
    padding-block: var(--spaceY);
    opacity: 1;
}
.data_info .info_row .row_content > .content_stack {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterXSmall);
}
.info_row .row_content > .content_stack .stack_item .item_label {
    line-height: var(--lineHeightNatural);
}
body#artwork .sheet .sheet_media {
    position: sticky;
    top: var(--headerHeight);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - var(--headerHeight) - var(--spaceY) - var(--headerHeightXSmall) * 2);
}
.sheet .sheet_media {
    grid-column: 7/13;
    /* El indicador de carga se centra sobre `.media_marco`, que es quien tiene
     * el ancho de la imagen; acá queda `relative` igual por la ficha de
     * artista, que no usa marco. No afecta al lightbox, que va anidado adentro:
     * `position: fixed` solo se ancla a un ancestro si ese ancestro tiene
     * transform/filter/perspective, no por `relative`. */
    position: relative;
}
/* El `>` es imprescindible y se había perdido al transferir la regla desde la
 * maqueta (default.css:1168). Sin él, esta regla —especificidad 0,3,1— también
 * alcanza a la imagen del lightbox, que va anidada dentro de .sheet_media, y
 * le gana a `.media_zoom img` (0,1,1): la imagen ampliada quedaba con
 * `height: auto` y el max-height de la ficha, cubriendo 734 de 950 px de alto
 * y dejando ver la página por debajo. */
/* Marco de la imagen de obra: se encoge al ancho de la imagen y se pega a la
 * derecha, arrastrando al pie de créditos.
 *
 * Reemplaza al `object-fit: contain` + `object-position: top right` que había
 * antes. Aquello pintaba bien la imagen pero su CAJA seguía midiendo el 100%
 * de la columna: con una obra más alta que ancha se pintaban 525 px de 674, y
 * el `.media_footer` —que se alinea con la caja— arrancaba 150 px más a la
 * izquierda que la imagen. Medido en producción con la obra 7 (700x979).
 *
 * Ahora la imagen se dimensiona sola: `width/height: auto` con los dos
 * máximos. Para un elemento reemplazado eso conserva la proporción y, cuando
 * la altura toca el tope, el ancho baja con ella. Así la caja del <img> ES lo
 * que se ve, y el marco (fit-content) queda de ese ancho. */
.sheet .sheet_media .media_marco {
    /* El ancho del marco es el MENOR entre el ancho de la columna y el ancho
     * que va a tener la imagen cuando su altura toque el tope. Ese segundo
     * valor sale de la proporción real de la obra, que la vista inyecta como
     * `--proporcionObra` (ver template_default.tmpl/viewer.php).
     *
     * POR QUÉ NO ALCANZA `width: fit-content`, que es lo primero que uno
     * prueba: el marco contiene también el pie de créditos, y fit-content mide
     * el contenido MÁS ancho. El aviso legal es un párrafo largo, así que el
     * marco se quedaba con los 674 px de la columna y el pie seguía
     * desalineado. Medido.
     *
     * `align-self` y no `margin-left: auto`: `.sheet_media` es un flex en
     * columna y estira a sus hijos a todo el ancho (`align-items: stretch` por
     * defecto), lo que anulaba cualquier ancho que le pusiéramos. `flex-end`
     * cancela el estirado y de paso lo pega a la derecha, como en la maqueta. */
    --altoMaxObra: calc(100vh - var(--headerHeight) - var(--spaceY) - var(--headerHeightXSmall)*2);
    width: min(100%, calc(var(--altoMaxObra) * var(--proporcionObra, 99)));
    align-self: flex-end;
    position: relative;  /* referencia del indicador de carga */
}
.sheet .sheet_media .media_marco > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--altoMaxObra);
}
/* Ficha de ARTISTA: la foto no pasa por `.media_marco` —no hace falta, su pie
 * va oculto— y además la envolvemos en un <a>. La maqueta la deja suelta y la
 * dimensiona con `.sheet .sheet_media > img`, selector que con el <a> en el
 * medio no la alcanza: la imagen se dibujaba a su tamaño natural, 700px, que
 * desbordaban la columna y metían scroll horizontal en TODA la página, en
 * escritorio incluido (medido a 1400, 1024 y 768px). Mismo tratamiento que le
 * da la maqueta a su `> img`. */
.sheet .sheet_media > a > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--headerHeight) - var(--spaceY) - var(--headerHeightXSmall)*2);
    object-fit: contain;
    object-position: top right;
}
.sheet_media .media_footer {
    position: relative;
}
/* Ficha de artista: el bloque de créditos de la imagen queda oculto (pedido del
 * cliente, "sacar el + de la foto del artista"). El markup se conserva porque
 * está pendiente definir si va a haber créditos y con qué formato. */
.media_footer.media_footer_oculto {
    display: none;
}
/* Pie de la imagen: aviso de derechos a la izquierda, "+" a la derecha.
 * Transferido de la maqueta (default.css:1177-1186). Antes iba todo alineado
 * a la derecha porque el texto era un rótulo corto ("Créditos de la imagen");
 * desde que ahí va el aviso legal completo, la maqueta lo reparte con
 * `space-between`. */
.sheet_media .media_footer .footer_actions .credits_button > span {
    text-align: right;
    display: inline-block;
}
.sheet_media .media_footer .footer_actions {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: var(--spaceX);
    margin-top: var(--spaceY);
}
.media_footer .footer_actions svg.plus_cross {
    height: var(--rowGutterXSmall);
    transform-origin: center;
    transition-property: transform;
    transition-duration: var(--transitionDurationSlow);
    border: 1px solid var(--paletteBlack);
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;   /* que el texto largo no lo achique */
}
.media_footer .credits {
    position: absolute;
    top: calc((var(--fontSizeXSmall) + var(--rowGutterXSmall)) * -1);
    right: 0;
    width: 100%;
    padding: var(--fontSizeXSmall) 0 var(--fontSizeXSmall) var(--fontSizeXSmall);
    text-align: right;
    background: var(--paletteWhite);
}
.artwork_text {
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    align-items: start;
    padding-inline: var(--spaceX);
}
.artwork_text .text {
    grid-column: 1/7;
}

/***VIDEO PLAYER (ficha de obra)***/
.artwork_video {
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    align-items: start;
    padding-block: calc(var(--rowGutterMedium) * 2) calc(var(--spaceY) * 2);
    padding-inline: var(--spaceX);
    background: var(--paletteBlack);
    color: var(--paletteWhite);
}
.artwork_video .video_container {
    grid-column: 3/11;
}
.artwork_video .video_slide {
    display: none;
}
.artwork_video .video_slide.active {
    display: block;
}
.artwork_video .video_footer {
    grid-column: 3/11;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.artwork_video .video_label {
    display: none;
}
.artwork_video .video_label.active {
    display: block;
}
.artwork_video .header_actions {
    display: flex;
    gap: var(--gridGap);
}
.artwork_video .header_actions .action_button {
    cursor: pointer;
    color: var(--paletteWhite);
}
.media_marco_video .video-responsive {
    width: 100%;
}

/***PLYR OVERRIDES***/
.plyr {
    --plyr-color-main: #000;
    --plyr-range-fill-background: #fff;
    --plyr-range-thumb-background: #000;
    --plyr-video-progress-buffered-background: rgba(255,255,255,.35);
    --plyr-range-track-height: 5px;
}
.plyr__control--overlaid {
    border: 2px solid #fff;
}
.plyr input[type="range"]::-webkit-slider-thumb {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
}
.plyr input[type="range"]::-moz-range-thumb {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
}
.plyr input[type="range"]::-webkit-slider-runnable-track {
    border: 1px solid #fff;
    border-radius: 0;
}
.plyr input[type="range"]::-moz-range-track {
    border: 1px solid #fff;
    border-radius: 0;
}
.plyr__progress__buffer {
    border-radius: 0;
}
.plyr__progress input[type="range"],
.plyr__volume input[type="range"] {
    border-radius: 0;
}

/***INTRO MULTIMEDIA (home)***/
section#intro_media {
    width: 100%;
    height: 100vh;
    position: relative;
}
section#intro_media img,
section#intro_media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/***TEXT (home "La Colección")***/
#intro_text .text p {
    grid-column: 4/13;
    column-count: 2;
    column-gap: var(--colGutter);
}

/***DETAIL NAV (anterior/siguiente de la ficha)***
   La maqueta no lo tiene —su ficha solo lleva el "← Obras"—, así que se les da
   el mismo tratamiento que a las flechas de los carruseles del home: sin
   recuadro, negras, gris en hover. Van dentro del .header_actions de la ficha,
   agrupadas a la derecha. */
/* Sin acotar a .header_actions: navigation.php lo comparten también las fichas
   de colección (template_archivo), que no tienen ese contenedor. */
.detail_nav {
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: calc(var(--colGutter) * 0.75);
}
.detail_nav a {
    display: flex;
    align-items: center;
    color: var(--paletteBlack);
}
.detail_nav a:hover {
    color: var(--paletteGray);
}
.detail_nav a svg {
    display: block;
}
.header_title a svg {
    vertical-align: -0.15em;
}

/***SEARCH BAR***/
/* 14-sep-2026, REPUESTA el 16-sep: el selector tiene que estar ACOTADO. Sin acotar alcanza a otros dos
   elementos que tambien llevan la clase .search y no son esta barra:
     - el desplegable de busqueda de efc-2026, que es un <nav class="search">: quedaba fijo, 711 px de alto,
       como un hueco en blanco bajo la cabecera;
     - el contenedor de resultados, que es <div class="... search results">: quedaba pegajoso y con relleno
       lateral de 39 px, corriendo la seccion y dejando la pagina con scroll horizontal (1606 px de documento
       contra 1298 de ventana, medido el 16-sep en EFC antes de reponer esto).
   Se limita a un <div> que NO sea el de resultados. */
div.search:not(.results) {
    position: sticky;
    top: var(--headerHeight);
    z-index: 100;
    display: flex;
    column-gap: var(--colGutter);
    justify-content: space-between;
    align-items: center;
    padding-block: var(--spaceY);
    padding-inline: var(--spaceX);
    background: var(--paletteWhite);
}
.search .search_nav {
    display: flex;
    justify-content: start;
    column-gap: var(--spaceX);
    width: calc(var(--colWidth) * 6 + var(--colGutter) * 5);
}
.search .search_nav a.inactive {
    color: var(--paletteGray);
}
.search .search_nav a.inactive:hover {
    color: var(--paletteBlack);
}
.search .search_actions {
    position: relative;
    display: flex;
    justify-content: end;
    column-gap: var(--spaceX);
    width: calc(var(--colWidth) * 6 + var(--colGutter) * 5);
}
.search .search_actions form {
    /* la maqueta no tiene <form>, es input/submit sueltos como hijos
       directos de .search_actions (flex). Acá sí hace falta <form> por la
       acción real de búsqueda — display:contents lo saca del layout para
       que .action_input/.action_button sigan siendo hijos flex directos. */
    display: contents;
}
.search .search_actions .action_input {
    padding-bottom: calc(var(--spaceY)*0.3);
    border-bottom: 1px solid var(--textColor);
    flex-grow: 1;
}
.search .search_actions .action_button {
    position: absolute;
    top: 3px;
    z-index: 100;
    cursor: pointer;
}
.search_actions .action_button .button_icon {
    align-self: center;
    transform: scaleX(-1);
    fill: none;
    stroke: var(--textColor);
    stroke-width: 2px;
    stroke-linecap: butt;
}

/***FILTERS***/
.section_sub_header {
    margin-top: calc(var(--rowGutterMedium)*2);
    padding-block: var(--spaceY);
    padding-inline: var(--spaceX);
    display: flex;
    column-gap: var(--colGutter);
    justify-content: space-between;
    align-items: center;
}
.section_sub_header .sub_header_actions {
    display: flex;
    column-gap: var(--spaceX);
    justify-content: end;
    align-items: center;
    min-width: calc(var(--colWidth)*6 + var(--colGutter)*5)
}
.checkbox {
    cursor: pointer;
}
.checkbox:before {
    content: "";
    display: inline-block;
    margin-right: calc(var(--fontSizeXSmall)*0.5);
    width: calc(var(--fontSizeXSmall)*0.75);
    height: calc(var(--fontSizeXSmall)*0.75);
    border: var(--borderLine);
    border-radius: 50%;
    transition-property: color, background;
    transition-duration: var(--transitionDuration);
}
.checkbox:hover:before {
    background: var(--paletteBlack)
}
/* Filtro aplicado. Mismo lenguaje que el resto del sitio —negro es el estado
   activo, gris el de reposo— y coincide con el hover, que ya llenaba el
   círculo. Los tres filtros rápidos son enlaces, así que además funcionan
   como toggle: si está activo, el enlace lo quita. */
.filters_toggle a.checkbox {
    color: inherit;
}
.checkbox.active:before {
    background: var(--paletteBlack);
}
.filterable {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* clip y no hidden: "overflow-x: hidden" convierte a .filterable en
       contenedor de scroll (el navegador calcula overflow-y: auto), y eso
       anula cualquier position: sticky de adentro — era lo que impedía pegar
       la columna de filtros. "clip" recorta igual en horizontal sin crear
       contenedor de scroll. */
    overflow-x: clip;
    transition-property: right;
    transition-duration: var(--transitionDurationSlow);
}
.artworks > .tags,
.artists > .tags {
    padding-inline: var(--spaceX);
    padding-block: 0 var(--spaceY);
}
.artworks > .tags .tag_button svg.plus_cross,
.artists > .tags .tag_button svg.plus_cross {
    display: inline-block;
    height: calc(var(--rowGutterXSmall)*0.6);
    transform-origin: center;
    transition-property: transform;
    transition-duration: var(--transitionDurationSlow);
    transform: rotate(45deg) translate(25%, -5%);
}
.artworks > .tags .tag_button svg.plus_cross line,
.artists > .tags .tag_button svg.plus_cross line {
    fill: none;
    stroke: var(--paletteBlack);
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
}
/* Conteo + orden juntos a la izquierda. Van agrupados porque
   .section_sub_header reparte con space-between: con tres hijos sueltos el
   del medio se iba al centro. */
.section_sub_header .sub_header_left {
    display: flex;
    align-items: center;
    column-gap: var(--spaceX);
}
/* Control de orden de resultados (solo en Obras). Mismo lenguaje que el
   abecedario: gris de base, negro el activo y en hover. No lleva recuadro
   a propósito — el recuadro en este diseño es para acciones ("Mostrar
   filtros"), no para el estado del listado. */
.section_sub_header .sub_header_left .sort_options {
    /* OCULTO POR PEDIDO DEL CLIENTE (2026-09-10), no eliminado: puede volver.
     * El orden por defecto —relevancia descendente— queda igual, lo define la
     * primera clave de `sortBy` en browse.conf; esto solo saca los botones de
     * la vista. Para reponerlo, cambiar este `display` por `flex`: el resto de
     * las reglas de abajo, incluidas las de responsive, siguen en pie. */
    display: none;

    align-items: center;
    column-gap: calc(var(--colGutter) * 1.5);
}
.sub_header_left .sort_options .sort_label,
.sub_header_left .sort_options a.sort_button {
    color: var(--paletteGray);
    white-space: nowrap;
}
.sub_header_left .sort_options a.sort_button:hover,
.sub_header_left .sort_options a.sort_button.active {
    color: var(--paletteBlack);
}
/* Por debajo de 1024 no entran en la misma línea el conteo, el orden y
   "Mostrar filtros": .sub_header_actions arrastra un min-width de 6 columnas y
   el botón terminaba saliéndose del ancho de la página (medido: a 768px el
   borde derecho caía en 826). Se deja bajar el botón a una segunda línea.
   1023 es un corte que el theme ya usa. */
@media (max-width: 1023px) {
    .section_sub_header:has(.sort_options) {
        flex-wrap: wrap;
        row-gap: calc(var(--spaceY) * 0.5);
    }
    .section_sub_header:has(.sort_options) .sub_header_left,
    .section_sub_header:has(.sort_options) .sub_header_actions {
        min-width: 100%;
    }
}
/* Más angosto todavía (celular): tampoco entran el conteo y el orden juntos,
   así que el orden se queda con su propia línea. */
@media (max-width: 520px) {
    .section_sub_header .sub_header_left:has(.sort_options) {
        flex-wrap: wrap;
        row-gap: calc(var(--spaceY) * 0.4);
    }
    .section_sub_header .sub_header_left .sort_options {
        min-width: 100%;
    }
}
.artists > .alphabet {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spaceY)*0.5) calc(var(--spaceX)*0.5);
    padding-inline: var(--spaceX);
    padding-block: 0 var(--spaceY);
}
.artists > .alphabet a.alphabet_button {
    color: var(--paletteGray);
}
.artists > .alphabet a.alphabet_button:hover {
    color: var(--paletteBlack);
}
/* La maqueta es estática y no tiene estado activo. Se usa el mismo negro del
   hover para la letra filtrada, que es el contraste que ya define el diseño.
   La flecha de volver va en negro por el mismo motivo: es la acción disponible
   mientras hay un filtro puesto. */
.artists > .alphabet a.alphabet_button.active,
.artists > .alphabet a.alphabet_button.alphabet_back {
    color: var(--paletteBlack);
}
.filterable .filters {
    position: relative;
    width: calc(var(--colWidth)*3 + var(--colGutter)*3 - var(--spaceX));
    flex-shrink: 0;
    /* se estira a todo el alto de .filterable (comportamiento por defecto de un
       flex item) y ese alto es el recorrido que necesita el sticky de adentro */
    align-self: stretch;
}
/* Columna de filtros pegajosa. El `top` lo maneja el JS (filters.js) según el
   sentido del scroll: si la columna entra en la pantalla se pega arriba, y si
   es más alta se pega por abajo mientras se baja y vuelve a subir apenas se
   sube. Este valor es el de arranque y el que queda si el JS no corre. */
.filterable .filters .filters_sticky {
    position: sticky;
    /* header + barra del buscador (que también es sticky y va por encima) más
       un poco de aire; el JS recalcula este mismo valor y lo ajusta según el
       sentido del scroll. */
    top: calc(var(--headerHeight) + var(--headerHeightSmall) + 20px);
}
/* .browse-results-col es el hijo directo real de .filterable (envuelve a
   .grid/.list) — el desplazamiento/ancho fijo tiene que aplicarse acá, no en
   .grid/.list, que están anidados un nivel más adentro y no participan del
   flex layout directamente. */
.filterable > .browse-results-col {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    flex-shrink: 0;
}
.filterable > .browse-results-col,
.filterable .filters {
    transition-property: right;
    transition-duration: var(--transitionDurationSlow);
}
.filterable:not(.filters_on) > .browse-results-col {
    right: 0;
}
/* Cerrado, el panel NO se saca del layout: queda apoyado justo afuera del borde
 * derecho —es el flex item que sigue a la columna de resultados, que mide el
 * 100%— y lo recorta el `overflow-x: clip` de .filterable. Así funciona la
 * maqueta y así tiene que ser para que la animación se vea bien: los dos
 * bloques animan `right` a la vez y se leen como una sola pieza más ancha que
 * la pantalla, que corre hacia la izquierda mostrando los filtros.
 *
 * Con `display: none` —que es como estaba hasta el 2026-09-14— el panel no
 * existía mientras estaba cerrado, así que no tenía desde dónde desplazarse:
 * aparecía de golpe, ya en su lugar, encimándose por un instante con las obras
 * que todavía se estaban moviendo.
 *
 * `visibility` sí se apaga, pero con la transición demorada: saca al panel
 * cerrado del recorrido del tabulador y de los lectores de pantalla, y como el
 * retardo es igual a lo que dura el movimiento, al cerrar se apaga recién
 * cuando terminó de salir. Al abrir no hay retardo, así que está visible desde
 * el primer cuadro. */
.filterable:not(.filters_on) .filters {
    right: 0;
    visibility: hidden;
    transition-property: right, visibility;
    transition-duration: var(--transitionDurationSlow), 0s;
    transition-delay: 0s, var(--transitionDurationSlow);
}
.filterable.filters_on .filters {
    visibility: visible;
}
.filterable.filters_on > .browse-results-col,
.filterable.filters_on .filters {
    right: calc(var(--colWidth)*3 + var(--colGutter)*3);
}
.filterable .filters .filters_toggle {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--rowGutterXSmall) * 0.3);
    margin-bottom: calc(var(--spaceY) * 1 + var(--rowGutterXSmall));
    padding-top: calc(var(--spaceY) * 0.5);
    border-top: var(--borderLine);
}
.filterable .filters .filters_row {
    padding-block: calc(var(--spaceY) * 0.5);
    border-top: var(--borderLine);
}
.filterable .filters .filters_row:last-child {
    border-bottom: var(--borderLine);
}
.filters .filters_row .row_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
}
.filters_row .row_title svg.plus_cross {
    height: calc(var(--rowGutterXSmall)*0.6);
    transform-origin: center;
    transition-property: transform;
    transition-duration: var(--transitionDurationSlow);
}
.filters_row.open .row_title svg.plus_cross {
    transform: rotate(45deg);
}
/* Los valores de la faceta se piden por AJAX y tardan un instante, en el que
 * antes no pasaba nada: se abría el panel vacío y el visitante no sabía si
 * había pasado algo. Ahora el mismo ícono hace de indicador — gira mientras
 * carga y queda en "×" al terminar—, así que no hace falta agregar un elemento
 * nuevo ni mover nada de lugar.
 *
 * El giro va de 45° a 405° y no de 0° a 360°: 45° es el ángulo de la "×", así
 * que cada vuelta empieza y termina justo donde el ícono tiene que quedarse.
 * La clase la pone y la saca filters.js, con el mismo nombre (`cargando`) que
 * ya usa el lightbox de la ficha de obra. */
.filters_row.cargando .row_title svg.plus_cross {
    animation: girando_cruz 1s linear infinite;
}
@keyframes girando_cruz {
    from { transform: rotate(45deg); }
    to   { transform: rotate(405deg); }
}
.filters_row .row_title .plus_cross line {
    fill: none;
    stroke: var(--paletteBlack);
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
}
.filters .filters_row .row_list {
    display: grid;
    padding-top: calc(var(--rowGutterXSmall)*0.5);
    padding-bottom: calc(var(--spaceY) * 0.5 + var(--rowGutterXSmall));
    transition-property: padding-bottom, grid-template-rows, opacity;
    transition-duration: var(--transitionDurationSlow);
}
.filters .filters_row:not(.open) .row_list {
    grid-template-rows: 0fr;
    padding-block: 0;
    opacity: 0;
}
.filters .filters_row .row_list > .list_stack {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--rowGutterXSmall)*0.3);
}

/***PANEL DE VALORES DE FACETA (#bMorePanel, cargado por AJAX)***/
#bMorePanel {
    padding-block: calc(var(--spaceY) * 0.5);
}
#bMorePanel:not(.open) {
    display: none;
}
#bMorePanel #bMorePanelClose {
    /* CollectiveAccess ya trae un link de cierre acá — el estado de
       abierto/cerrado lo maneja filters.js a través de la fila (ícono +/x),
       tener dos mecanismos de cierre distintos confunde, así que se oculta. */
    display: none;
}
#bMorePanel .list_stack {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--rowGutterXSmall) * 0.3);
}
#bMorePanel #bLetterBar {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(var(--spaceY) * 0.5);
    row-gap: calc(var(--rowGutterXSmall) * 0.3);
    margin-bottom: calc(var(--spaceY) * 0.5);
    padding-bottom: calc(var(--spaceY) * 0.3);
    border-bottom: var(--borderLine);
}
#bMorePanel #bLetterBar a {
    font-size: var(--fontSizeXSmall);
    color: var(--paletteGray);
}
#bMorePanel #bLetterBar a:hover {
    color: var(--paletteBlack);
}
#bMorePanel #scrollWrapper {
    max-height: 240px;
    overflow-y: auto;
}
#bMorePanel #bScrollList {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--rowGutterXSmall) * 0.3);
    font-size: var(--fontSizeXSmall);
}
#bMorePanel .facet-letter-anchor {
    margin-top: calc(var(--spaceY) * 0.3);
    font-size: var(--fontSizeXSmall);
    color: var(--paletteGray);
}

/***THUMBS GRID***/
/* main.css (theme base) le pone `margin-top: 3rem` a .grid.images, que en la
   grilla de obras metía 48px de aire entre el sub-header y la primera obra. La
   maqueta no tiene esa separación —medido: 0px contra 48px—, así que se anula.
   Se anula acá y no se edita main.css porque ese archivo todavía es idéntico,
   byte a byte, al del theme `custom`: dejarlo intacto evita tener que
   fusionarlo a mano si algún día se actualiza la base. custom.css se carga
   después (201 contra 100 en assets.conf), así que gana. */
.grid.images {
    margin-top: 0;
}
.grid {
    position: relative;
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    width: 100%;
    flex: 0 0 100%;
    padding-inline: var(--spaceX);
    flex-shrink: 0;
}
.grid .grid_item {
    grid-column: span 3;
}
.grid .grid_item .item_media {
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid .grid_item .item_media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.grid .grid_item .item_data {
    padding-top: calc(var(--spaceY)*0.5);
}

/***THUMBS SLIDER (imperdibles / adquisiciones / relacionadas)***/
.flexible {
    display: flex;
    grid-gap: var(--gridGap);
    padding-inline: var(--spaceX);
    overflow-x: scroll;
    cursor: grab;
    scroll-behavior: smooth;
}
.flexible.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}
.flexible.dragging .flex_item,
.flexible.dragging .grid_item {
    pointer-events: none;
}
/* Ancho fijo y alto libre: cada obra conserva su proporción, igual que en la
   maqueta (default.css, ".flexible .flex_item .item_media"). El carrusel queda
   tan alto como la obra más alta que le toque, y eso es lo buscado.
   NO poner acá `aspect-ratio: 1/1` + `overflow: hidden` + `object-fit: cover`:
   recorta las obras a un cuadrado. En la maqueta esta sección se ve cuadrada
   solo porque sus placeholders son imágenes de 10x10 (los cuadrados grises
   salen de `#acquisitions .item_media { background }` + `img { opacity: 0 }`),
   no porque haya un recorte. */
/* El browse (multirelated de artistas) mete varias capas de wrapper entre
   .flexible y los .grid_item reales. Hay que anularlas todas para que los
   items participen directamente del flex horizontal del carrusel. */
.flexible .browse-results-col,
.flexible .browse-results-col > form,
.flexible .browse-results-col [id^="browseResultsContainer"],
.flexible .grid {
    display: contents;
}
.flexible .browse-results-col ~ script,
.flexible .browse-results-col .load-more-wrapper,
.flexible .browse-results-col .page-load-status {
    display: none;
}
.flexible .grid_item {
    flex-shrink: 0;
    width: calc(var(--colWidth)*3 + var(--colGutter)*2);
}
.flexible .grid_item .item_data {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flexible .flex_item .item_media,
.flexible .grid_item .item_media {
    width: calc(var(--colWidth)*3 + var(--colGutter)*2);
}
.flexible .flex_item .item_media img,
.flexible .grid_item .item_media img {
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-drag: none;
}
.flexible .item_data {
    padding-top: calc(var(--spaceY)*0.5);
}

/***THUMBS TAGS***/
.flex_item .tags,
.grid_item .tags {
    margin-top: var(--spaceY);
}

/***LIST***/
.list {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    flex-shrink: 0;
}
.list .list_header {
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    padding-block: calc(var(--spaceY) * 0.75);
}
.list .list_row {
    border-top: var(--borderLine);
    padding-block: calc(var(--spaceY)*0.75);
}
.list .list_row .row_link {
    grid-column: 1/13;
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
}
.list_row .row_link .row_media {
    grid-column: 1/2;
}
.list_row .row_link .row_media img {
    width: 100%;
    height: auto;
}
.list .list_header .header_title,
.list_row .row_link .row_title {
    grid-column: 4/7;
}
.list .list_header .header_location,
.list_row .row_link .row_location {
    grid-column: 7/10;
}
.list .list_header .header_date,
.list_row .row_link .row_date {
    grid-column: 10/11;
}
.list .list_header .header_count,
.list_row .row_link .row_count {
    grid-column: 11/13;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/***PAGINACIÓN (navigation_bar) — estilo acorde a los controles de los
  sliders del home: flechas SVG con outline, números con borde***/
nav[aria-label] .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--colGutter)*0.25);
    list-style: none;
    padding-inline: var(--spaceX);
    padding-block: var(--spaceY);
    margin-top: var(--spaceY);
    font-size: var(--fontSizeXSmall);
}
nav[aria-label] .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    height: 2.2em;
    padding: 0.2em 0.5em;
    border: 1px solid var(--paletteBlack);
    border-radius: 2px;
    color: var(--textColor);
    transition: color var(--transitionDuration), background var(--transitionDuration);
}
nav[aria-label] .page-link:hover {
    background: var(--paletteBlack);
    color: var(--paletteWhite);
}
nav[aria-label] .page-item.active .page-link {
    font-weight: 700;
    background: var(--paletteBlack);
    color: var(--paletteWhite);
}
nav[aria-label] .page-item.disabled .page-link {
    color: var(--paletteGray);
    border-color: var(--paletteGray);
    pointer-events: none;
}
nav[aria-label] .page-arrow .page-link {
    border: none;
    min-width: auto;
    padding: 0;
    background: none;
    color: var(--paletteBlack);
    margin-inline: calc(var(--colGutter) * 0.35);
}
nav[aria-label] .page-arrow .page-link:hover {
    background: none;
    color: var(--paletteGray);
}
nav[aria-label] .page-arrow .page-link svg {
    display: block;
}
nav[aria-label] .page-arrow.disabled .page-link {
    border: none;
    background: none;
}

/***LOGIN
*****************************************************/
.login_page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--mainHeight);
    padding-inline: var(--spaceX);
}
.login_page.login_page_overlay {
    position: relative;
    min-height: auto;
    padding: calc(var(--spaceY)*2) var(--spaceX);
    background: var(--backColor);
}
.login_overlay_close {
    position: absolute;
    top: var(--spaceY);
    right: var(--spaceX);
    font-size: var(--fontSizeMedium);
    line-height: 1;
    cursor: pointer;
}
.login_box {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding: calc(var(--spaceY)*1.5) var(--spaceY);
    border: var(--borderLine);
    border-radius: 2px;
}
.login_box h1 {
    margin-bottom: var(--rowGutterMedium);
}
.login_message {
    margin-bottom: var(--rowGutterSmall);
    padding: calc(var(--spaceY)*0.5) var(--spaceY);
    border: var(--borderLine);
    font-size: var(--fontSizeXSmall);
}
.login_form {
    display: flex;
    flex-direction: column;
    row-gap: var(--rowGutterSmall);
}
.login_field {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spaceY)*0.3);
}
.login_field label {
    color: var(--paletteGray);
}
.login_input {
    padding: calc(var(--fontSizeXSmall)*0.6) calc(var(--fontSizeXSmall)*0.8);
    border: var(--borderLine);
    border-radius: 2px;
    background: var(--backColor);
    color: var(--textColor);
    transition-property: border-color;
    transition-duration: var(--transitionDuration);
}
.login_input:focus {
    border-color: var(--paletteGray);
}
.login_submit {
    align-self: flex-start;
    position: relative;
    margin-top: calc(var(--spaceY)*0.5);
    border: 1px solid var(--textColor);
    padding: calc(var(--fontSizeXSmall)*0.5) calc(var(--fontSizeXSmall)*1.5);
    background: var(--paletteWhite);
    border-radius: 2px;
    cursor: pointer;
    transition-property: color, background, border-color;
    transition-duration: var(--transitionDuration);
}
.login_submit:hover {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
.login_links {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spaceY)*0.3);
    margin-top: var(--spaceY);
}
.login_links a {
    text-decoration: var(--linkDeco);
}
.login_links a:hover {
    color: var(--paletteGray);
}

/***SEARCH RESULTS
*****************************************************/
.search_results {
}
/* Padding elemento por elemento, no en .search_results entero — el
   div "list table" de los resultados (mismo que usa Browse Artists) ya
   trae su propio padding-inline via la regla "section .list", así que
   duplicarlo acá en el contenedor padre lo corría el doble hacia
   adentro y desalineaba con el resto. */
.search_results h1,
.multisearch-sub-header {
    padding-inline: var(--spaceX);
}
.search_results h1 {
    margin-bottom: var(--rowGutterMedium);
}
/* .search_results_nav reutiliza .search (sticky, flex, search_nav/search_actions)
   — solo se agregan las reglas propias de las pestañas */
.search_results_nav .search_results_tab {
    cursor: pointer;
}
.search_results_nav .search_results_tab.inactive {
    color: var(--paletteGray);
}
.search_results_nav .search_results_tab.inactive:hover {
    color: var(--paletteBlack);
}
.multisearch-sub-header {
    margin-bottom: var(--rowGutterSmall);
}
.search_results_panel.hidden {
    display: none;
}

/***AVISOS DEL SISTEMA (login, errores, advertencias)***
   El markup lo arma views/pageFormat/notifications.php. Antes venía con clases
   de Bootstrap, que este theme no carga, así que el aviso salía como texto
   suelto y sin forma de cerrarlo.

   Posición: `fixed` y no `absolute`. La prueba original usaba
   `position: absolute; top: -47px`, que depende de que algún ancestro esté
   posicionado — y el contenedor del contenido no lo está, así que el aviso se
   iba fuera de la pantalla. Con `fixed` queda anclado a la ventana, debajo del
   header (que también es fixed) y alineado al margen de la página. */
.avisos {
    position: fixed;
    top: calc(var(--headerHeight) + var(--spaceY) * 0.5);
    right: var(--spaceX);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spaceY) * 0.4);
    max-width: 400px;
}
.avisos .aviso {
    display: flex;
    align-items: baseline;
    column-gap: calc(var(--colGutter) * 0.75);
    padding: 3px 14px;
    background: var(--paletteWhite);
    border: 1px solid currentColor;
    transition-property: opacity, transform;
    transition-duration: var(--transitionDurationSlow);
}
.avisos .aviso.yendose {
    opacity: 0;
    transform: translateY(-6px);
}
/* Verde de éxito: se probó `lightgreen` (#90EE90), pero sobre blanco da un
   contraste de 1,6:1 — ilegible. Este verde mantiene la misma familia y llega
   a 4,6:1, que pasa el mínimo de accesibilidad para texto chico. */
.avisos .aviso_ok       { color: #2e7d32; }
.avisos .aviso_atencion { color: #b26a00; }
.avisos .aviso_error    { color: #b3261e; }

.avisos .aviso_cerrar {
    flex-shrink: 0;
    align-self: center;
    padding: 0;
    background: none;
    border: 0;
    line-height: 0;
    cursor: pointer;
    color: inherit;
}
.avisos .aviso_cerrar svg.plus_cross {
    height: calc(var(--rowGutterXSmall) * 0.55);
    transform: rotate(45deg);
}
.avisos .aviso_cerrar svg.plus_cross line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1px;
    stroke-linecap: butt;
    vector-effect: non-scaling-stroke;
}
.avisos .aviso_cerrar:hover {
    opacity: 0.6;
}

/***ABOUT / LA COLECCIÓN***/
/* Transferido de Maqueta_Malba/style/default.css:880-904. No estaba en el
 * theme porque hasta 2026-09-04 Malba no tenía esta página: /About/Index caía
 * a la vista Lorem Ipsum de themes/default y nadie había mirado su CSS.
 *
 * El layout es de dos columnas —título a la izquierda, texto a la derecha—
 * sobre la misma grilla que el resto del sitio.
 *
 * El `.section_anchor` se levanta el alto del header con translateY(-100%)
 * para que, al saltar a #acquisitions desde el home, el título no quede
 * tapado por el encabezado fijo. */
.about_text {
    position: relative;
    padding-inline: var(--spaceX);
}
.about_text .section_anchor {
    position: absolute;
    transform: translateY(-100%);
    top: 0;
    height: var(--headerHeight);
}
.about_text .section_content {
    display: grid;
    grid-template-columns: var(--gridTemplate);
    grid-gap: var(--gridGap);
    padding-bottom: calc(var(--mainTopSpace) + var(--spaceY));
}
.about_text:not(:last-child) .section_content {
    border-bottom: var(--borderLine);
}
.about_text .section_content .content_title {
    grid-column: 1/7;
}
.about_text .section_content .content_text {
    grid-column: 7/13;
}

/***LIGHTBOX DE LA IMAGEN DE OBRA***/
/* Transferido de Maqueta_Malba/style/default.css:1215-1253.
 *
 * Es un lightbox propio y no el visor del core (caMediaPanel): acá no hay
 * tiles ni zoom continuo, se muestra UNA imagen en mayor resolución y se
 * cierra. Decidido con el usuario el 2026-09-10.
 *
 * El bloque está siempre en el HTML y se muestra agregándole la clase `on`
 * desde js/lightbox.js. Se oculta con opacity + pointer-events y no con
 * `display: none` para que la transición funcione. */
.media_zoom {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    /* El fondo va acá y no solo en la imagen. La maqueta lo pone en el `img`,
     * que alcanza cuando la imagen está siempre presente; con el indicador de
     * carga la imagen arranca en `opacity: 0` y, si el blanco viajara con
     * ella, durante la carga se vería la página por detrás. */
    background: var(--paletteWhite);
    transition: opacity var(--transitionDuration);
}
.media_zoom:not(.on) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.media_zoom.on {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}
.media_zoom img {
    width: 100%;
    height: 100%;
    padding: var(--headerHeight) var(--spaceX);
    object-fit: contain;
    background: var(--paletteWhite);
}
.media_zoom .zoom_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--headerHeight);
    padding-inline: var(--spaceX);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zoom_in_button,
.zoom_out_button,
.zoom_prev_button,
.zoom_next_button {
    cursor: pointer;
}
.zoom_nav {
    display: flex;
    gap: calc(var(--spaceX) * 0.75);
    align-items: center;
    flex-shrink: 0;
}

/* Indicador de carga.
 *
 * La imagen del lightbox puede pesar varios MB y se pide recién al abrir, así
 * que durante un rato se ve cómo se dibuja de arriba hacia abajo. Con esto,
 * mientras carga se muestra el indicador y la imagen queda oculta; cuando
 * termina, lightbox.js le saca la clase `cargando` al contenedor y aparece
 * entera, con una transición corta.
 *
 * El indicador es el mismo `plus_cross` del sitio girando, y no un GIF ni una
 * librería: no suma un archivo más y usa el vocabulario gráfico que ya está. */
/* Lo usan los DOS lugares donde una imagen puede tardar: la imagen principal
 * de la ficha y la del lightbox. Se centra sobre su contenedor, que por eso
 * tiene que ser `position: relative` (o fixed, como .media_zoom). */
.spinner_carga {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--rowGutterMedium);
    height: var(--rowGutterMedium);
    margin: calc(var(--rowGutterMedium) / -2);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transitionDuration);
}
.cargando > .spinner_carga {
    opacity: 1;
    animation: girando 1s linear infinite;
}
.spinner_carga line {
    fill: none;
    stroke: var(--paletteBlack);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
.media_zoom img {
    transition: opacity var(--transitionDuration);
}
.media_zoom.cargando img {
    opacity: 0;
}
/***AVISO DE CARGA DEL SCROLL INFINITO — 25-sep-2026 (autorizado por Matias)***
   Mientras Explorar pide más obras, la librería muestra .page-load-status > .infinite-scroll-request
   (main_innercontainer.php). Adentro va la misma cruz girando que la foto de la ficha: .spinner_carga, visible y
   animada por la clase .cargando (reglas de arriba). Como la cruz se posiciona absoluta y centrada, el contenedor
   necesita posición y alto. */
.page-load-status .infinite-scroll-request {
    position: relative;
    height: calc(var(--rowGutterMedium) * 2);
}
@keyframes girando {
    to { transform: rotate(360deg); }
}

/***RESPONSIVE (home mobile)
*****************************************************/
/* Tablets (481–1023px): "La Colección" a ancho completo, ocultar texto obra destacada */
@media (max-width: 1023px) {
    #intro_text .text p {
        grid-column: 1 / 13;
    }
    .sheet .sheet_data .data_main .main_header .main_text {
        display: none;
    }
    /* Ocultar el <br> entre main_author y main_text (que está oculto en mobile) */
    .sheet .sheet_data .data_main .main_header .main_author + br {
        display: none;
    }
    .featured_work .main_more {
        display: none !important;
    }
}
/* Mobile portrait (≤480px): además, una sola columna de texto, sheet apilado */
@media (max-width: 480px) {
    #intro_text .text p {
        grid-column: 1 / 13;
        column-count: 1;
    }
    body#index .artwork_sheet .sheet.dark {
        padding-block: calc(var(--spaceY)*1) calc(var(--spaceY)*1);
        display: flex;
        grid-gap: calc(var(--rowGutterMedium)*1) var(--colGutter);
        flex-direction: column-reverse;
    }
    body#index .artwork_sheet .sheet > .sheet_data {
        display: block;
    }
    body#index .artwork_sheet .sheet .data_main {
        display: flex;
    }
    body#index .sheet .sheet_data .data_main {
        height: auto;
        justify-content: start;
        row-gap: calc(var(--spaceY) * 0.5);
        margin-bottom: var(--spaceY);
    }
    body#index .sheet.dark .sheet_data .data_main {
        margin-bottom: 0 !important;
    }
    body#index .artwork_sheet .sheet.dark .main_footer {
        margin-top: var(--rowGutterXSmall);
        display: flex;
        grid-gap: calc(var(--rowGutterMedium)*1) var(--colGutter);
        flex-direction: column-reverse;
    }
    .sheet_media_mobile,
    .sheet_media_mobile img {
        width: 100%;
    }
    .sheet_media .media_footer .footer_actions {
        justify-content: center;
    }
    section .section_header .header_actions .action_button {
        color: var(--paletteWhite);
        background: var(--paletteBlack);
    }
    section .section_header .header_actions .action_button.button_right,
    section .section_header .header_actions .action_button.button_left {
        display: none;
    }
    .header_title.font_style_bold.font_size_small {
        font-size: var(--fontSizeSmall);
    }
    /* About page: single column with sticky-replace titles */
    .about_text .section_content .content_title,
    .about_text .section_content .content_text {
        grid-column: 1 / -1;
    }
    .about_text .section_content .content_title {
        position: sticky;
        top: var(--headerHeight);
        background: var(--backColor);
        z-index: 10;
        padding-block: calc(var(--spaceY) * 0.5);
        align-self: start;
    }
}

/* Texto solo para lectores de pantalla.
 *
 * La barra de paginación (browse_results_html.tmpl/pagenavigation.php, que
 * viene del núcleo) marca "Página anterior" y "Página siguiente" con la clase
 * `visually-hidden` de Bootstrap, contando con que el CSS de Bootstrap la
 * esconda. Este theme no carga Bootstrap, así que esas dos etiquetas se leían
 * en pantalla al lado de las flechas. Se define acá con el patrón estándar:
 * la caja sigue existiendo para el lector de pantalla, pero no ocupa lugar ni
 * se ve. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/***FILTRO DE UBICACION COMO ARBOL — 15-sep-2026 (museo)***
   El inmueble va al ras y sus espacios indentados debajo. La sangria es lo unico que distingue un nivel
   de otro, asi que se marca tambien con una linea vertical tenue: en una columna angosta una sangria
   sola se confunde con un salto de linea del propio nombre. Las clases las emite
   Browse/list_facet_html.tmpl/main.php a partir de malba_ubicaciones_arbol() (blocks.php).
   REPUESTA el 16-sep: el archivo fue reemplazado el 16-sep 06:58 por una version sin esta regla y el
   filtro volvio a verse plano. Si vuelve a desaparecer, es que se esta pisando el archivo entero. */
.list_stack .ubic_nivel_1 {
    padding-left: 1.1em;
    border-left: 1px solid rgba(0, 0, 0, 0.14);
    margin-left: 0.35em;
}

/***COMENTARIO SOBRE LA OBRA — separacion entre parrafos***
   El texto largo del comentario llega con parrafos, notas al pie y firma, pero el reset del tema deja los
   <p> sin margen y se lee como un bloque corrido (verificado 16-sep: 32 parrafos con margin-top 0 en la
   obra 1997.02). Los <p> vacios que deja el editor no ocupan lugar. Aplica a los dos temas, porque
   efc-2026 carga esta hoja.
   Aplicada por primera vez el 14-sep-2026 y REPUESTA el 16-sep: el archivo fue reemplazado el 16-sep 06:58
   por una version sin esta regla —el mismo reemplazo que se llevo la sangria del filtro de ubicacion— y
   Milena reporto que se habian perdido los saltos de linea. Si vuelve a desaparecer, se esta pisando el
   archivo entero en vez de editarlo. */
.sheet .info_row .content_stack .item_value p + p {
    margin-bottom: calc(var(--spaceY) * 0.85);
}
.sheet .info_row .content_stack .item_value p:empty {
    display: none;
}
.sheet .item_value p sup {
    font-size: 0.8rem;
}
/***NOTAS AL PIE DEL COMENTARIO — 22-sep-2026 (museo)***
   La nota se reconoce tambien por su POSICION: todo parrafo que sigue al rotulo "Notas" (un <p> cuyo unico
   hijo elemento es <b> o <strong>). Solo por id quedaban con tamano de cuerpo las notas sin id de 23
   comentarios (llamada sin vincular desde la carga del 13-sep; ej. 2006.25) y el segundo parrafo de las
   notas largas. Ademas el saneador de CA borra los id al guardar desde el editor (D-NOTA1): por posicion el
   formato no depende de eso. Verificado sobre los 334 comentarios: ningun arranque falso en comentarios
   reales, y ningun otro campo ni plantilla genera un <p> solo-negrita seguido de parrafos.
   25-sep-2026 (autorizado por Matias): el tamano pasa de 0.95rem fijo a min(0.95rem, 0.9em). El texto de la
   ficha cambia de tamano segun el ancho (--fontSizeSmall: 1rem en celular, 0.9rem entre 481 y 1023 px,
   1.3rem en escritorio) y la nota no: entre 481 y 1023 px quedaba MAS grande que el texto (15,2 contra
   14,4 px). Ahora mide como mucho lo de antes y nunca mas del 90 % del texto: celular 14,4 px, pantalla
   mediana 13 px, escritorio 15,2 px como antes. */
.sheet .item_value p[id^="nota-"],
.sheet .item_value p:has(> :is(b, strong):only-child) ~ p {
    font-size: min(0.95rem, 0.9em);
    margin: 1rem 0;
}

/***NOTAS AL PIE — salto por debajo de la cabecera fija, 23-sep-2026 (museo)***
   Al tocar una llamada o la flecha de vuelta, el navegador alineaba el destino con el borde superior de la
   ventana y quedaba tapado por el header fijo (verificado: llamada en y=0 bajo un header de 47 px). El margen
   usa la variable de altura del propio tema, asi que sigue al header en cualquier ancho. Solo afecta
   llamadas y notas del comentario; no toca ningun otro salto ni desplazamiento del sitio. */
.sheet .item_value [id^="ref-"],
.sheet .item_value [id^="nota-"] {
    scroll-margin-top: calc(var(--headerHeight) + var(--spaceY));
}

/***COLUMNA DE MINIATURA EN LOS LISTADOS — 16-sep-2026 (museo, Milena)***
   Sintoma: "cada tanto hay algun nombre que queda desalineado de la cuadricula". No eran los nombres ni el
   centrado: estan alineados a la izquierda. Medido en la lista de artistas: 27 filas con miniatura daban
   .row_media = 90 px y el nombre en x=347; las 3 filas SIN miniatura daban 100 px y el nombre en x=356.
   Causa: la grilla es `repeat(12, 1fr)` y `1fr` equivale a `minmax(auto, 1fr)`, o sea que una pista NO puede
   achicarse por debajo del contenido. El marcador de "sin imagen" mide 100 px, mas que las miniaturas, asi
   que ensancha la primera columna y corre todas las demas en esa fila.
   Arreglo: la pista manda sobre el contenido y no al reves. min-width 0 permite que la columna tome su
   parte de 1fr, y el marcador pasa a ocupar el ancho disponible en vez de imponerlo. */
.list_row .row_link .row_media {
    min-width: 0;
}
.list_row .row_link .row_media > * {
    max-width: 100%;
}
.list_row .row_link .row_media .bResultItemImgPlaceholder {
    width: 100%;
    box-sizing: border-box;
}

/* 29-sep-2026 (Matías, sesión malba-templates) — «Obra destacada»: título enlazado.
   El título es el enlace a la ficha y su área de clic se extiende a toda la columna de texto (título, año,
   artista y párrafo). Es el patrón de tarjeta accesible: el lector de pantalla anuncia un solo enlace, con
   el nombre de la obra. No se envuelve el bloque en un <a> porque adentro hay otros enlaces («Leer más» y
   la etiqueta de exhibición); esos quedan por encima del área extendida y siguen yendo a su destino. */
.featured_work .data_main {
    position: relative;
}
.featured_work .main_title_link {
    color: inherit;
    text-decoration: none;
}
.featured_work .main_title_link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.featured_work .data_main:hover .main_title_link,
.featured_work .main_title_link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.featured_work .main_more,
.featured_work .main_footer .tag_button {
    position: relative;
    z-index: 1;
}