:root {
    --color-fondo: #230519;        
    --color-texto: #fff;         
    --fondo-modal: rgba(142, 21, 97, 0.62);
    --color-acento: #230519;    
    --margen-logo: 0px; 
    --sombrita: drop-shadow(0px 2px 12px rgba(35, 5, 25, 0.5))
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fondo: #230519;       
        --color-texto: #fff;      
        --fondo-modal: rgba(142, 21, 97, 0.62);
        --color-acento: #230519;
    }
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
    font-family: 'ArgyleSocks', sans-serif;
    background-color: transparent; 
    color: var(--color-texto);
}

.f_sans { font-family: 'Arial', sans-serif; }
.f_light { font-family: 'ArgyleSocksThin', sans-serif; }
.f_bold { font-family: 'ArgyleSocksThick', sans-serif; }

#contenedor-fondo {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: -1; 
    overflow: hidden;
    background-color: var(--color-fondo); 
    position: relative; 
}

.grilla-masonry {
    display: flex;             /* Usamos Flexbox para alinear columnas */
    flex-direction: row;       /* Las columnas van una al lado de la otra */
    align-items: flex-start;   /* Alineación superior */
    justify-content: center;
    gap: 4px;                  /* Espaciado horizontal entre columnas */
    width: 100%;
    will-change: transform; 
    pointer-events: none; 
}

.columna-masonry {
    display: flex;
    flex-direction: column;    /* Los ítems dentro van uno debajo del otro */
    flex: 1;                   /* Todas las columnas ocupan el mismo ancho */
    gap: 4px;                  /* Espaciado vertical entre imágenes */
    min-width: 0;              /* Previene desbordamientos en flex */
}

.item-masonry {
    width: 100%;
    height: auto;
    opacity: 0.4; 
    display: block;
    user-select: none; 
    -webkit-user-select: none;
    border-radius: 8px; 
    animation: aparecer 4s ease forwards;
}

@keyframes aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 0.4; transform: translateY(0); }
}

/* Viñeta */
#contenedor-fondo::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; 
    z-index: 10; 
    background: radial-gradient(
        ellipse at center,
        rgba(35, 5, 25, 0.2) 60%,
        rgba(35, 5, 25, 0.65) 90%,
        rgba(35, 5, 25, 1) 100%
    );
}

.rptlogo {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100; 
    max-width: 360px; 
    width: 80%;
}
.rptlogo img {
    width: 100%;
    height: auto;
    filter: var(--sombrita);
}

/* --- Contenido Central (Menú Links) --- */
.contenedor-central {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 90%;
    max-width: 480px;
    max-height: 100vh;
    height: auto;
    overflow-y: visible;
    margin-top: var(--margen-logo); 
}
.contenedor-central::-webkit-scrollbar { display: none; }

.menu-cabecera {
    width: 100%;
    margin-bottom: 15px;
}

.grilla {
    column-count: 2; 
    column-gap: 15px;
    width: 100%;
}

.item-menu {
    display: inline-block;
    padding: 10px; 
    transition: transform 0.2s;
    cursor: pointer;
    break-inside: avoid;
    margin-bottom: 15px; 
    width: 100%;
    text-decoration: none;
}

.item-menu:hover {
    transform: scale(1.02);
}

.item-menu img {
    width: 100%; 
    height: auto; 
    display: block;
    filter: var(--sombrita);
}


.contenedor-boton-info {
    position: fixed;
    z-index: 50;
    bottom: 20px;
    right: 20px;
    top: auto; 
    transform: none; 
}

.boton-info-sprite {
    border: none;
    background-color: transparent;
    cursor: pointer;
    background-image: url('../imas/rpt_btinfo.svg'); 
    background-repeat: no-repeat;
    outline: none;
    transition: transform 0.2s;
    
    width: 75px; 
    height: 75px;
    background-size: 75px 150px; 
    background-position: 0 0;
}
.boton-info-sprite:hover {
    background-position: 0 -75px;
}
.boton-info-sprite.activo {
    background-position: 0 -75px;
}

.modal-personalizado {
    background-color: var(--fondo-modal);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}
.modal-title {
    color: var(--color-texto);
}
.modal-body .btn-primary {
    background-color: var(--color-acento);
    border-color: var(--color-acento);
}
.modal-cerrar {
  --modal-cerrar-color: var(--color-texto);
  --modal-cerrar-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --modal-cerrar-opacity: 0.75;
  --modal-cerrar-hover-opacity: 1;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: var(--color-texto:);
  background: transparent var(--modal-cerrar-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: var(--modal-cerrar-opacity);
}


@media (min-width: 1025px) {
    .grilla-masonry { column-count: 4; }
    
    :root { --margen-logo: 0px; } 

    .contenedor-boton-info {
        top: 50%;
        right: 20px;
        bottom: auto; 
        transform: translateY(-50%);
    }
    
    .boton-info-sprite {
        width: 90px;
        height: 90px;
        background-size: 90px 180px;
        background-position: 0 0;
    }
    .boton-info-sprite:hover {
    background-position: 0 -90px;
}
    .boton-info-sprite.activo {
        background-position: 0 -90px;
    }
}

@media (max-width: 1024px) {
    :root { --margen-logo: 80px; } 
    .grilla-masonry { column-count: 2; } 
    .rptlogo {
        max-width: 270px; 
    }
}

@media (max-width: 767px) {
    
    .rptlogo {
        max-width: 240px; 
        width: 80%;
    }
    
    .contenedor-central {
        width: 62%;
    }

    .boton-info-sprite {
        width: 60px;
        height: 60px;
        background-size: 60px 120px; 
        background-position: 0 0;
    }
    .boton-info-sprite:hover {
        background-position: 0 -60px;
    }
    .boton-info-sprite.activo {
        background-position: 0 -60px;
    }
    
    .grilla { column-gap: 10px; }
    .item-menu { margin-bottom: 10px; padding: 8px; }
}


@font-face {
    font-family: 'ArgyleSocks';
    src: url('../fonts/ArgyleSocks.woff2') format('woff2'),
         url('../fonts/ArgyleSocks.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'ArgyleSocksThin';
    src: url('../fonts/ArgyleSocksThin.woff2') format('woff2');
    font-weight: 300;
}
@font-face {
    font-family: 'ArgyleSocksThick';
    src: url('../fonts/ArgyleSocksThick.woff2') format('woff2');
    font-weight: 700;
}


.svg-wrapper {
  position: relative;
  width: 100%;
//  max-width: 716px;        /* tamaño base */
}

/* =========================
   SVG CONTENEDOR
   ========================= */

.svg-menu {
  width: 100%;
  max-width: 716px;
  height: auto;
  display: block;
  overflow: visible;
}


/* =========================
   BOTONES SVG
   ========================= */

.btn-svg {
  cursor: pointer;

  transform-box: fill-box;
  transform-origin: center;

  transition:
    transform 0.22s ease,
    filter 0.22s ease;

  will-change: transform;
}


/* =========================
   HOVER / FOCUS
   ========================= */

.btn-svg:hover,
.btn-svg:focus-visible {
  transform: scale(1.06);
/*   filter:
    brightness(1.05)
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); */
}


/* =========================
   ESCALADO INDIVIDUAL
   ========================= */

#bt_listado:hover {
  transform: scale(1.04);
}

#bt_cartilla:hover {
  transform: scale(1.07);
}

#bt_mercaibis:hover {
  transform: scale(1.05);
}


/* =========================
   CLICK
   ========================= */

.btn-svg:active {
  transform: scale(0.97);
}


/* =========================
   ACCESIBILIDAD
   ========================= */

.btn-svg:focus-visible {
  outline: none;
}