/***GLOBAL VARIABLES
*****************************************************/
:root {
/***TEXT***/
    /*--fontSize: clamp(1rem, 1.25vw, 1.5rem);*/
    --fontSizeSmall: 0.8rem;
    --fontSizeMedium: 1rem;
    --fontSizeLarge: 1.2rem;
    --lineHeightNatural: 1.2;
    --lineHeightLow: 1.1;

/***SPACES***/
    --spaceY: var(--fontSizeMedium);
    --spaceX: calc(var(--fontSizeMedium) * var(--lineHeightNatural));
    --bodySpaces: 0;
    --rowGutterSmall: calc(var(--fontSizeSmall) * var(--lineHeightNatural));
    --rowGutterMedium: calc(var(--fontSizeMedium) * var(--lineHeightNatural));
    --rowGutterLarge: calc(var(--fontSizeLarge) * var(--lineHeightLow));
    --rowGutterBetweenSections: calc(var(--fontSizeLarge) * 2);
    --colGutter: calc(var(--spaceX)*1);
    --mainTopSpace: 0;
    --mainBottomSpace: calc(var(--fontSizeLarge) * 2);

/***SIZES***/
    --headerHeight: calc(var(--spaceY)*2 + var(--rowGutterMedium));
    --footerHeight: calc(var(--spaceY)*2 + var(--rowGutterSmall));
    --mainWidth: 1800px;
    --mainHeight: calc(100vh - var(--headerHeight) - var(--mainBottomSpace) - var(--footerHeight));

/***COLOR***/
    --paletteWhite: #f5f5f5;
    --paletteGray: #999999;
    --paletteBlack:  #c0bdb6;
    --paletteViolet: #0202dc;
    --paletteAlpha: transparent;
    --backColor: var(--paletteWhite);
    --textColor: var(--paletteBlack);
    --linkColor: var(--paletteBlack);
    --hoverColor: var(--paletteViolet);

/***DECORATION***/
    --borderWidth: 0.1rem;
    --borderLine: var(--borderWidth) solid var(--textColor);

/***TRANSITION***/
    --transitionDuration: 0.15s;
    --transitionDurationSlow: 0.3s;
}
  
/***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%;
     box-sizing: border-box;
    /*
    -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-face {
    font-family: "Gerstner Regular";
    src: url("fonts/GerstnerProgrammFSL-Regular.otf");
}
@font-face {
    font-family: "Gerstner Medium";
    src: url("fonts/Gerstner-ProgrammMedium.otf");
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.lowercase {
    text-transform: lowercase;
}
i {
    font-family: "Gerstner Regular";
}

/***RESET
*****************************************************/
*,

html {
    scroll-behavior: smooth;
}


body {
    position: relative;
    margin: var(--bodySpaces);
    color: var(--textColor);
    background: var(--backColor);
    font-family: "Gerstner Regular", sans-serif;
    font-size: var(--fontSizeMedium);
    line-height: var(--lineHeightNatural);
     overflow-y: hidden;
}
::selection {
  background: var(--paletteViolet);
  color: white; /* o creás --paletteOrange */
}

::-moz-selection {
  background: var(--paletteViolet);
  color:  white;
}
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;
}
a {	
    color: var(--linkColor);
    text-decoration: none;
  
}

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(--fontSizeSmall);
    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,
iframe, embed, audio {
    margin: 0;
    padding: 0;
    color: var(--textColor);
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: inherit;
}
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;
}
.layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

/***HEADER AND MENU
*****************************************************/
.site-header {
    position: relative; /* ← clave */
    grid-column: 1 / span 8; /* ahora sí */
    top: 0;
    padding: var(--spaceY) var(--spaceX);
    z-index: 100;
}



h1.site_name {
    min-height: var(--rowGutterMedium);
}


/***MAIN TEMPLATE
*****************************************************/


main.content {
    position: relative;
    grid-column: 1 / span 12;
    width: 100%;
      padding-inline: var(--spaceX);
  margin-inline: 0;
  max-width: none;
    margin-block: var(--mainTopSpace) var(--mainBottomSpace);
    min-height: var(--mainHeight);  
}
section:not(:first-child) {
    margin-top: var(--rowGutterBetweenSections);
}

/***TEXT***/
.text.large,
.text .large {
    font-size: var(--fontSizeLarge);
    line-height: var(--lineHeightLow);
}
.text.medium {
    width: 50%;
}
.text.medium,
.text .medium {
    font-size: var(--fontSizeMedium);
    line-height: var(--lineHeightNatural);
}
.text.small,
.text .small {
    font-size: var(--fontSizeSmall);
    line-height: var(--lineHeightSmall);
}

/***GRID***/
section.grid {
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--rowGutterLarge) var(--colGutter);
}
.grid .grid_item {
    grid-column: span 4;
}
.grid .grid_item.full {
    grid-column: span 12;
}
.grid .grid_item.extra_large {
    grid-column: 5/13;
}
.grid .grid_item.large {
    grid-column: span 6;
}
.grid .grid_item.medium {
    grid-column: span 4;
}
.grid .grid_item.small {
    grid-column: span 3;
}
.grid_item .item_media {
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid .grid_item.full .item_media {
    aspect-ratio: 16/9;
}
.grid .grid_item.full .item_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grid_item .item_media img {
    width: 100%;
    max-height: auto;
    object-fit: contain;
    object-position: center;
}
.grid_item .item_data {
    padding-top: calc(var(--spaceY)*0.5);
}
.grid_item .item_data .caption {
    font-size: var(--fontSizeSmall);
}

/***LIST***/

.list {
     margin-top:57vh;
    padding-top: var(--rowGutterBetweenSections);
    width: 100%;
      margin-left: 0;
       margin-right: 0;
}

/*** FILA — sin grilla interna ***/
.list_row {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: var(--rowGutterSmall) 0;
}

.row_link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: inherit;
    z-index: 1;
}
.list_row:hover .row_link {
  color: var(--hoverColor);
}
.list_row:hover .row_year a,
.list_row:hover .row_title a,
.list_row:hover .row_type a {
    color: var(--hoverColor);
}
/*** COLUMNA 1 — Año ***/
.row_year {
     position: relative;
    z-index: 2;
    flex: 0 0 30%; /* ajustás el ancho relativo */
}

/*** COLUMNA 2 — Título ***/
.row_title {
      position: relative;
    z-index: 2;
    flex: 1; /* ocupa lo que queda */
    padding-left: calc(var(--colGutter)*2);
}

/*** COLUMNA 3 — Tipo ***/
.row_type {
     position: relative;
    z-index: 2;
    flex: 0 0 20%; /* ancho fijo relativo */
    text-align: right;
}

/*** IMAGEN FIJA PARA EL HOVER ***/

.list_row::before {
    content: "";
    position: absolute;
    top: calc(var(--rowGutterSmall) * 0.2);
    left: calc(var(--colGutter) * -1);
    right: calc(var(--colGutter) * -1);
    bottom: calc(var(--rowGutterSmall) * 0.2);

    border: var(--borderLine);
    background: #cacaca;

    box-shadow:
        inset 0.5px 0.5px 0 rgba(255,255,255,0.6),
        inset -0.5px -0.5px 0 rgba(0,0,0,0.12);

    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

.list_row:hover::before {
  opacity: 0.7;
  
}

/***ANIMACION***/
.imagenes-top-right {
  position: fixed;
  top: calc(var(--spaceY)*-1);
  right: calc(var(--spaceX)*-1);
  z-index: 10;
  pointer-events: none; /* no interfiere con hover */
}

.imagenes-top-left {
  position: fixed;
  top: calc(var(--spaceY)*-5);
  left: calc(var(--spaceX)*1);
  z-index: 10;
  pointer-events: none; /* no interfiere con hover */
}

.efecto-sombra {
  position: fixed; /* o absolute según el caso */
  pointer-events: none;
}

/* Imagen principal */
.texto {
  position: relative;
  z-index: 2;
  opacity:  0;
  display: block;
  width: 700px; 
}

/* Sombra */
.sombra {
  position: absolute;
  opacity: 0.7;
  top: 0;
  right: 0;
  z-index: 1;
  /* filter: brightness(0) opacity(0.3); */
  width: 900px;
   pointer-events: none;
}

.anim-holder {
  position: relative;
    /* justify-content: center; */
  grid-column: 1 / span 4; /* ahora sí */
  padding: calc(var(--spaceY)*1) var(--spaceX);
  color: var( --paletteViolet);
  
}
.anim-holder2 {
  position: relative;
 text-align: right;
  grid-column: 10 / span 12; /* ahora sí */
  padding: calc(var(--spaceY)*1) var(--spaceX);
color: var(--paletteGray);
  /* color: var( --paletteViolet); */
  
}
a {
  color: inherit;
  text-decoration: none; /* opcional, si no querés subrayado */
}



/***INFO
*****************************************************/
body#info {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
body#info header {
    background: var(--paletteBlack);
}
body#info a {
    color: var(--paletteWhite);
}

.footer_menu{
  display: none;
}