/*TIPOGRAFIAS Y TEXTO*/
@font-face{

    font-family:"ArgentumSans";
    src:url("fuentes/ArgentumSans-Regular.ttf")
        format("truetype");

    font-weight:400;
    font-style:normal;
}

@font-face{

    font-family:"ArgentumSans";
    src:url("fuentes/ArgentumSans-Medium.ttf")
        format("truetype");

    font-weight:500;
    font-style:normal;
}

@font-face{

    font-family:"ArgentumSans";
    src:url("fuentes/ArgentumSans-Bold.ttf")
        format("truetype");

    font-weight:700;
    font-style:normal;
}

@font-face{

    font-family:"Marola";
    src:url("fuentes/MAROLA__.TTF")
        format("truetype");

    font-weight:400;
    font-style:normal;
}

.grid-12{

    display:grid;

    grid-template-columns:
        repeat(12,minmax(0,1fr));

    gap:32px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;
    align-items:center;

    margin-bottom:50px;
}

.hero-gif{

    display:block;

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        rgba(255,247,213,.15);

    z-index:1;

}

.hero-overlay{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:40px;

}

.hero h1{

    font-family:"Marola", serif;

    font-size:clamp(
        5rem,
        11vw,
        10rem
    );

    line-height:.85;
    color:#8c2041;
    margin:0;

}

p{
    font-size:17px;
}

.hero p{

    margin-top:24px;

    max-width:700px;

    color:#460d1e;

    font-size:1.2rem;

}

body{

    font-family:"ArgentumSans", sans-serif;
    font-weight:400;
    background:#fff5d2;
    color:#4B3E00;
    line-height:1.6;
    cursor:
    url("imagenes/cursor-normal.png")
    0 0,
    auto;

}

/* Cursor normal */

html,
body,
*{

    cursor:
    url("imagenes/cursor-normal.png")
    0 0,
    auto;

}

/* Cursor hover */

a:hover,
button:hover,
#container:hover,
#world canvas:hover{

    cursor:
    url("imagenes/cursor-hover.png")
    0 0,
    auto !important;

}

/* Ancho de la barra */

::-webkit-scrollbar{

    width:12px;

}

/* Fondo */

::-webkit-scrollbar-track{

    background:#FDF9EB;

}

/* Barra móvil */

::-webkit-scrollbar-thumb{

    background:#8c2041;

    border-radius:999px;

    border:2px solid #FDF9EB;

}

/* Hover */

::-webkit-scrollbar-thumb:hover{

    background:#6f1833;

}

::-webkit-scrollbar{

    width:14px;

}

::-webkit-scrollbar-track{

    background:#efd978;

}

::-webkit-scrollbar-thumb{

    background:#c2e3e8;

    border:3px solid #FDF9EB;

    border-radius:0;

}

::-webkit-scrollbar-thumb:hover{

    background:#8c2041;

}

h1{
    font-family:"Marola", serif;
    font-weight:400;

}

h2{
    font-family:"ArgentumSans", sans-serif;
    font-weight:700;
    font-size: 4rem;
    line-height: 1;

}

p{

    font-family:"ArgentumSans", sans-serif;

    font-weight:400;

}

nav a{
    font-family:"ArgentumSans", sans-serif;
    font-weight:500;

}

.logo{

    text-decoration:none;

    color:#8a0b31;

    font-family:"ArgentumSans", sans-serif;

    font-weight:700;

    font-size:1.1rem;

}

.logo.visible{

    opacity:1;

    transform:translateY(0);

}

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:24px 60px;

    background:#F5E39A;

    z-index:1000;

    border-bottom:1px solid #ddd;

    opacity:0;

    transform:translateY(-100%);

    transition:
        opacity .4s ease,
        transform .4s ease;

}

header.visible{

    opacity:1;

    transform:translateY(0);

}

nav{

    display:flex;
    gap:32px;
}

nav a{

    text-decoration:none;
    color:#4B3E00;
}

.pieza{

    width:120px;
    height:120px;

    background:#8c2041;

    clip-path:polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );

    animation:
        flotar 5s ease-in-out infinite;
}

.plataforma{

    width:220px;
    height:10px;

    margin-top:20px;

    background:black;
}

.section{

    scroll-margin-top:120px;

    min-height:100vh;

    display:grid;

    grid-template-columns:
        repeat(12,minmax(0,1fr));

    gap:32px;

    align-items:center;

    padding:
        120px 8vw;

    position:relative;

    z-index:2;

}

.text-column{

    grid-column:
        2 / span 5;

}

.text-column h2{

    margin-bottom:
        var(--space-m);

}

.text-column p{

    margin-bottom:
        var(--space-s);

}

.image-column{

    grid-column:
        8 / span 4;

}

.placeholder{

    width:100%;
    max-width:500px;
    aspect-ratio:1;

    background:#5b949c;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:2rem;
}

.button{

    display:inline-block;

    margin-top:
        var(--space-m);

    padding:
        14px 24px;

    background:black;
    color:white;

    text-decoration:none;
}

footer{

    padding:40px;

    text-align:center;

    border-top:1px solid #ddd;
}

@keyframes flotar{

    0%{
        transform:
            translateY(0px);
    }

    50%{
        transform:
            translateY(-15px);
    }

    100%{
        transform:
            translateY(0px);
    }

}

nav a{

    font-weight:400;

    transition:
        font-weight .3s ease,
        opacity .3s ease;

    opacity:.5;

}

nav a.active{

    font-weight:700;
    opacity:1;
    color:#8c2041;
    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:#8c2041;

    transition:.3s;

}

nav a.active::after{

    width:100%;

}



:root{

    --space-xs:16px;
    --space-s:24px;
    --space-m:40px;
    --space-l:80px;
    --space-xl:120px;

}

/* ---------------- */
/* TITULOS */
/* ---------------- */

.titulo-bloque{

    position:relative;

    display:inline-block;

    margin-bottom:60px;

}

.titulo-bloque.izquierda{

    text-align:left;

}

.titulo-bloque.derecha{

    margin-left:auto;

    display:block;

    width:fit-content;

    text-align:right;

}

.plataforma-svg{

    width:260px;

    display:block;

    margin-top:-10px;
}

.titulo-bloque h2{

    position:relative;

    z-index:2;
}

/* ---------------- */
/* PIEZA VIAJERA */
/* ---------------- */

#pieza-viajera{

    position:fixed;

    width:70px;
    height:70px;

    background:#8c2041;

    clip-path:polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );

    z-index:2000;

    pointer-events:none;

    transition:
        left 1.2s cubic-bezier(.65,.05,.36,1),
        top 1.2s cubic-bezier(.65,.05,.36,1),
        transform .8s ease;

    transform:rotate(0deg);

}

#background-pieces{

    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.bg-piece{

    position:absolute;

    opacity:0.08;

    pointer-events:none;

    will-change:transform;

}

.hero-nav{

    margin-top:40px;

    display:flex;

    gap:32px;

    flex-wrap:wrap;

    justify-content:center;

}

.hero-nav a{

    text-decoration:none;

    color:#686868;

    font-weight:500;

    letter-spacing:.05em;

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.hero-nav a:hover{

    opacity:.7;

    transform:
        translateY(-2px);

}

/* Columna derecha completa */
.modelo-3d {
    grid-column: 8 / span 4;
    width: 100%;
    height: auto; /* Quitamos el 450px fijo para que la columna pueda crecer */
}

/* El visor del modelo en sí */
.modelo-3d model-viewer {
    width: 100%;
    height: 100%;
    background-color: transparent;
    outline: none;
}

/* Contenedor de cada modelo y su instrucción */
.contenedor-modelo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 400px; /* ¡Esta es la clave! Le damos una altura fija para que el modelo sepa cuánto debe crecer */
}

.modelo-3d model-viewer{

    width:100%;

    height:100%;

}

.boton-explorar{

    display:flex;
    width:max-content;
    margin:40px auto 0 auto;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    background:#8c2041;
    color:#FDF9EB;
    text-decoration:none;
    font-weight:700;
    letter-spacing:0.08em;
    border:2px solid #8c2041;
    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;

}

.boton-explorar:hover{

    background:#FDF9EB;

    color:#8c2041;

    transform:
        translateY(-3px);

}

.boton-wiki{

    width:max-content;
    margin:2px auto 0 auto;
    align-items:center;
    justify-content:center;
    padding:7px 5px;
    background:#8c2041;
    color:#FDF9EB;
    text-decoration:none;
    font-weight:700;
    letter-spacing:0.08em;
    border:2px solid #8c2041;
    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;

}

.boton-wiki:hover{

    background:#FDF9EB;
    color:#8c2041;
    transform:
        translateY(-3px);

}

.mini-matter-container{

    width:100%;
    max-width:500px;

    aspect-ratio:1;

    position:relative;

    overflow:hidden;

    background:transparent;

    border:none;

    outline:none;

    box-shadow:none;

}

.mini-matter-container canvas{

    display:block;

    background:transparent !important;

    border:none !important;

    outline:none !important;

}

/* Esto asegura que la galería ocupe casi todo el ancho disponible */
.galeria-simple {
    display: flex;
    justify-content: center; /* Centra las imágenes */
    align-items: center;
    gap: 40px; /* Aumenta la separación entre los 3 elementos */
    width: 100%;
    max-width: 1200px; /* Ajusta este valor si quieres que sea aún más ancha */
    margin: 0 auto;
}

/* Esto controla el tamaño de las imágenes dentro de la galería */
.galeria-simple img {
    width: 30%; /* Cada imagen ocupará el 30% del ancho, total 90% + gaps */
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* Opcional: para que se vean más estéticas */
    transition: transform 0.3s ease;
}

.instruccion-modelo {
    font-family: 'ArgentumSans', sans-serif; /* Usa tu tipografía */
    font-size: 0.8rem;
    color: #8c2041;
    margin-top: 10px;
    text-align: center;
    pointer-events: none;
}

/* Aplicamos el cursor hover a cualquier model-viewer que sea interactivo */
model-viewer {
    cursor: url("imagenes/cursor-normal.png") 0 0, auto;
}

#modelo-interactivo:hover {
    cursor: url("imagenes/cursor-hover.png") 0 0, auto !important;
}

/* =========================
ESPACIADO DE GALERÍAS
========================= */

.bloque-galeria{

    margin-top:10px;

    margin-bottom:100px;

}

/* =========================
BOTÓN EXPLORAR DERECHA
========================= */

.boton-explorar-derecha{

    display:flex;

    width:446px;

    margin-top:300px;   /* separación respecto al Matter.js */

    margin-left:auto;
    margin-right:auto; /* centrado horizontal */

}
/* =========================
BOTÓN MÁS GRANDE
========================= */

.boton-explorar{

    padding:22px 50px;

    font-size:1.25rem;

    letter-spacing:0.12em;

}

.image-column-centro{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.separador-boton{

    height:0.1px;

}