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

/***GLOBAL VARIABLES
*****************************************************/
:root {
    /***TEXT***/
    /*--fontSize: clamp(1rem, 1.25vw, 1.5rem);*/
    --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_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;
    transition-duration: var(--transitionDurationSlow);
}
.main_nav:not(.on) {
    opacity: 0;
    pointer-events: none;
}
.main_nav.on {
    opacity: 1;
    pointer-events: auto;
}
.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#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;
    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;
    /* Sin recuadro, el padding del .action_button base solo separa las flechas
       sin ninguna razón visual: eran 16px a cada lado, o sea ~42px entre una
       punta y la otra contando el gap. Se reduce todo el padding al 20%
       —80% menos— y quedan juntas.

       El de arriba y abajo se reduce igual por coherencia, aunque hoy no
       cambie nada: .header_actions es flex y estira los ítems al alto del
       botón "Más obras", así que la caja de la flecha mide 35px venga de donde
       venga el padding. */
    padding-block: calc(var(--fontSizeXSmall) * 0.06) calc(var(--fontSizeXSmall) * 0.07);
    padding-inline: calc(var(--fontSizeXSmall) * 0.2);
}
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 .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;
    margin-top: calc(var(--rowGutterXSmall) * 0.5);
    color: var(--paletteWhite);
    text-decoration: underline;
}
.featured_work .main_more.visible {
    display: inline-block;
}
.featured_work .main_more:hover {
    color: var(--paletteGray);
}
.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;
}
.sheet .sheet_media img {
    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;
}
.sheet_media .media_footer .footer_actions {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: var(--spaceX);
    margin-top: var(--spaceY);
    text-align: right;
    cursor: pointer;
}
.media_footer .footer_actions svg.plus_cross {
    height: var(--rowGutterXSmall);
    transform-origin: center;
    transition-property: transform;
    transition-duration: var(--transitionDurationSlow);
}
.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;
}

/***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 {
    color: var(--paletteBlack);
}
.detail_nav a:hover {
    color: var(--paletteGray);
}

/***SEARCH BAR***/
.search {
    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)
}
.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 {
    display: flex;
    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;
}
.filterable:not(.filters_on) .filters {
    display: none;
}
.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);
}
.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 {
    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. */
.flexible .flex_item .item_media {
    width: calc(var(--colWidth)*3 + var(--colGutter)*2);
}
.flexible .flex_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/12;
}
.list .list_header .header_count,
.list_row .row_link .row_count {
    grid-column: 12/13;
    text-align: right;
}

/***PAGINACIÓN (navigation_bar) — sin equivalente directo en la maqueta,
  estilo mínimo acorde al resto del sitio***/
nav[aria-label] .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: calc(var(--colGutter)*0.5);
    list-style: none;
    padding-inline: var(--spaceX);
    padding-block: var(--spaceY);
    font-size: var(--fontSizeXSmall);
}
nav[aria-label] .page-link {
    color: var(--textColor);
}
nav[aria-label] .page-item.active .page-link {
    font-weight: 700;
    text-decoration: underline;
}
nav[aria-label] .page-item.disabled .page-link {
    color: var(--paletteGray);
}

/***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-top: var(--rowGutterMedium);
}
/* 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,
.search_results_nav,
.multisearch-view-more {
    padding-inline: var(--spaceX);
}
.search_results h1 {
    margin-bottom: var(--rowGutterMedium);
}
.search_results_nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spaceX);
    row-gap: calc(var(--spaceY)*0.5);
    margin-bottom: var(--rowGutterMedium);
}
.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);
}
.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;
}