/*=========================================================
    XALTILOLLI 2.0
    Design System
=========================================================*/

:root{

/*=========================================================
    COLORES
=========================================================*/

--color-background:#262626;

--color-surface:#313131;

--color-card:#3a3a3a;

--color-text:#FFFFFF;

--color-text-soft:#D8D8D8;

--color-accent:#D30087;

--color-accent-hover:#F13DA9;

--color-border:#4B4B4B;

--color-shadow:rgba(0,0,0,.30);


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

--container-width:1400px;


/*=========================================================
    ESPACIADOS
=========================================================*/



--space-xs:.25rem;

--space-sm:1rem;

--space-md:2rem;

--space-lg:4rem;

--space-xl:6rem;

--space-xxl:8rem;


/*=========================================================
    HEADER
=========================================================*/

--header-height:90px;

--header-padding:0 2rem;

--header-background:#121418;

--header-shadow:0 2px 8px rgba(0,0,0,.10);

--logo-left-width:170px;

--logo-right-width:180px;

--menu-gap:3rem;

--menu-font-size:1.2rem;

--menu-color:#ffffff;

--menu-hover:#e61b72;

--dropdown-width:280px;

--dropdown-radius:12px;

--dropdown-background:rgba(55,55,55,.95);

--dropdown-shadow:0 18px 40px rgba(0,0,0,.30);

/*=========================================================
    RESPONSIVE HEADER
=========================================================*/

--breakpoint-menu:992px;

--mobile-menu-background:#2f3136;

--mobile-menu-gap:1rem;

/*=========================================================
    xalti intro
=========================================================*/

--intro-logo-width:700px;

--intro-text-width:780px;

--intro-caption-width:520px;


/*=========================================================
    MUSEUM VIEWER
=========================================================*/

--museum-width:900px;

--museum-max-width:100%;

--museum-radius:18px;


/*=========================================================
    ROOM NAVIGATOR
=========================================================*/

--room-width:420px;
--room-height:280px;

--room-gap:22px;

--room-radius:8px;

--navigator-gap:140px;


/* tarjetas laterales */

--room-side-scale:.82;

--room-far-scale:.68;


/* profundidad */

--room-depth:160px;


/* giro */

--room-rotate:42deg;


/* opacidad */

--room-side-opacity:.65;

--room-far-opacity:.25;


/*=========================================================
    BANDA DEL TÍTULO
=========================================================*/

--band-height:42px;

--band-background:rgba(0,0,0,.55);

--band-text-size:.9rem;

--band-letter-spacing:.08em;


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

--button-height:54px;

--button-radius:999px;

--route-width:420px;
--route-height:180px;


/*=========================================================
    FLECHAS
=========================================================*/

--arrow-size:62px;

--arrow-radius:50%;

--arrow-distance:70px;


/*=========================================================
    INDICADORES
=========================================================*/

--dot-size:10px;

--dot-gap:12px;

--dot-active-size:15px;


/*=========================================================
    TIPOGRAFÍA
=========================================================*/

--font-family:

"Segoe UI",

Arial,

sans-serif;


--title-size:

clamp(2rem,4vw,3.5rem);


--subtitle-size:

1rem;


--text-size:

1.2rem;


--small-size:

.9rem;


/*=========================================================
    SOMBRAS
=========================================================*/

--shadow-small:

0 4px 10px rgba(0,0,0,.18);


--shadow-medium:

0 10px 30px rgba(0,0,0,.22);


--shadow-large:

0 20px 45px rgba(0,0,0,.28);


/*=========================================================
    BORDES
=========================================================*/

--radius-small:8px;

--radius-medium:14px;

--radius-large:22px;


/*=========================================================
    TRANSICIONES
=========================================================*/

--transition-fast:.25s;

--transition-normal:.45s;

--transition-slow:.8s;


/*=========================================================
    Z INDEX
=========================================================*/

--z-base:1;

--z-content:10;

--z-navigation:50;

--z-overlay:100;

--z-modal:1000;

}