/* ============================================================
   X3D Maker — Shared Design System
   Replaces every inline <style> block across all HTML pages.
   Relative URLs are resolved from THIS file's location (css/).
   ============================================================ */

/* ---- Tailwind @layer safety-net (matches theme.extend values) ---- */
@layer utilities {
        .text-headline-lg  { font-size: 45px; line-height: 1.2; }
        .text-headline-md  { font-size: 30px; line-height: 1.3; }
        .text-body-lg      { font-size: 18px; line-height: 1.6; }
        .text-body-md      { font-size: 16px; line-height: 1.5; }
        .text-label-lg     { font-size: 14px; line-height: 1.4; }
        .text-label-md     { font-size: 12px; line-height: 1.4; }
        .px-margin-mobile  { padding-left: 24px; padding-right: 24px; }
        .px-margin-desktop { padding-left: 64px; padding-right: 64px; }
        .py-section-gap    { padding-top: 96px; padding-bottom: 96px; }
        .max-w-container-max { max-width: 1280px; }
        .gap-gutter        { gap: 32px; }
}

/* ── Very small mobile (<480px): shrink carousel text ── */
@media (max-width: 480px) {
        #carousel-track .text-headline-md { font-size: 20px; }
        #carousel-track .text-body-md     { font-size: 12px; line-height: 1.4; }
        #carousel-track .text-label-md    { font-size: 9px; }
}
/* ── Small mobile (<768px): medium carousel text ── */
@media (min-width: 480px) and (max-width: 767px) {
        #carousel-track .text-headline-md { font-size: 26px; }
        #carousel-track .text-body-md     { font-size: 14px; line-height: 1.5; }
        #carousel-track .text-label-md    { font-size: 10px; }
}

/* ---- Body background (shared across all pages) ---- */
body {
        background-image: url('../assets/ultimo/backgroundblack.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
}

/* ============================================================
   Masonry grid (index.html gallery)
   ============================================================ */
.masonry-grid {
        column-count: 2;
        column-gap: 32px;
}
@media (min-width: 768px) {
        .masonry-grid { column-count: 2; }
}
@media (min-width: 1280px) {
        .masonry-grid { column-count: 3; }
}
.masonry-item {
        break-inside: avoid;
        margin-bottom: 32px;
}
@keyframes float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-12px); }
}
.masonry-item:nth-child(1) { animation: float 4s ease-in-out infinite; }
.masonry-item:nth-child(2) { animation: float 4s ease-in-out 0.5s infinite; }
.masonry-item:nth-child(3) { animation: float 4s ease-in-out 1s infinite; }
.masonry-item:nth-child(4) { animation: float 4s ease-in-out 1.5s infinite; }
.masonry-item:nth-child(5) { animation: float 4s ease-in-out 2s infinite; }
.masonry-item:nth-child(6) { animation: float 4s ease-in-out 2.5s infinite; }

/* ============================================================
   Map dark-mode filter
   ============================================================ */
.map-dark {
        filter: invert(0.92) hue-rotate(180deg) contrast(0.92) saturate(0.7) brightness(0.95);
}

/* ============================================================
   Scrollbar suppression
   ============================================================ */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
}

/* ============================================================
   Robot walk-scroll animation
   ============================================================ */
.robot-scroll {
        height: 100vh;
        margin-bottom: clamp(50px, 10vh, 100px);
}
@supports (height: 100svh) {
        .robot-scroll { height: 100svh; }
}
html.robot-lock,
html.robot-lock body {
        overflow: hidden;
        height: 100%;
        overscroll-behavior: none;
}
.robot-scroll-sticky {
        height: 100vh;
        padding-top: 140px;
}
@supports (height: 100svh) {
        .robot-scroll-sticky { height: 100svh; }
        .robot-card          { max-height: calc(100svh - 425px); }
}
.robot-card {
        min-height: clamp(525px, 82.5vh, 700px);
        max-height: calc(100vh - 425px);
        padding-top: 60px;
        padding-left: 30px;
        padding-right: 30px;
}
@media (min-width: 768px) {
        .robot-card {
                padding-left: 80px;
                padding-right: 80px;
        }
}
.robot-media {
        position: absolute;
        bottom: 80px;
        left: 0;
        width: clamp(140px, 40vw, 200px);
        aspect-ratio: 800 / 1061;
        height: auto;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        will-change: transform;
        animation-play-state: paused;
}
@media (min-width: 768px) {
        .robot-media { width: clamp(212.5px, 56.25vw, 275px); }
}
.robot-media.active { opacity: 1; }
.robot-floor {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 55px;
        height: 2px;
        background: #dae2fd;
}
@media (min-width: 768px) {
        .robot-floor { left: 80px; right: 80px; }
}
.robot-particle {
        position: absolute;
        bottom: 60px;
        pointer-events: none;
        opacity: 0;
        border-radius: 3px;
        transform: translateY(4px) scale(0.5) rotate(0deg);
        transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.8s ease;
}
.robot-particle.pop {
        opacity: 1;
        transform: translateY(-16px) scale(1) rotate(var(--rot));
}
.robot-particle.dying {
        opacity: 0;
        transform: translateY(-22px) scale(0.4) rotate(var(--rot));
}
.robot-particle-burst {
        bottom: 70px;
        border-radius: 3px;
        animation: burst-up 1.2s ease-out forwards;
}
@keyframes burst-up {
        0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
        100% { opacity: 0; transform: translateY(-150px) scale(0.2) rotate(360deg); }
}
.robot-letters {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.35em 0;
}
.robot-letter {
        opacity: 0;
        transform: scale(0.4) translateY(16px);
        transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
        font-family: "Anton", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: clamp(27.5px, 5.625vw, 60px);
        line-height: 1;
        color: #004ac6;
        user-select: none;
        white-space: nowrap;
}
.robot-letter.robot-shown {
        opacity: 1;
        transform: none;
}
.robot-letter-red { color: #e5383b; }
.robot-letter + .robot-letter { margin-left: 0.35em; }
.robot-caption {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
        font-family: "Roboto", sans-serif;
        max-width: 130px;
        margin-left: 0;
        margin-right: auto;
}
@media (min-width: 768px) {
        .robot-caption { max-width: 420px; margin-left: auto; margin-right: auto; }
}
.robot-caption.robot-caption-show {
        opacity: 1;
        transform: none;
}
.robot-caption p { font-size: 19.2px; }
@media (min-width: 768px) {
        .robot-caption p { font-size: 32px; }
}
.robot-bottom {
        margin-top: 50px;
        text-align: left;
}
@media (min-width: 768px) {
        .robot-bottom { margin-top: 30px; text-align: center; }
}
.robot-logo {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity 0.6s ease, transform 0.6s ease;
        pointer-events: none;
        user-select: none;
        margin-top: 15px;
        text-align: left;
}
@media (min-width: 768px) {
        .robot-logo { text-align: center; }
}
.robot-logo.robot-logo-show {
        opacity: 1;
        transform: none;
}
.robot-logo img {
        width: clamp(84px, 30vw, 195px);
        height: auto;
        aspect-ratio: 1.8;
        object-fit: fill;
        display: inline-block;
}
@media (min-width: 768px) {
        .robot-logo img { width: clamp(140px, 50vw, 325px); }
}

/* ============================================================
   Lightbox with info panel (galeria.html)
   ============================================================ */
.lightbox-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.88);
        display: none;
        align-items: center;
        justify-content: center;
        cursor: zoom-out;
}
.lightbox-overlay.active { display: flex; }

.lightbox-panel {
        display: flex;
        flex-direction: row;
        max-width: 1100px;
        width: 95vw;
        max-height: 90vh;
        border-radius: 1rem;
        overflow: hidden;
        cursor: default;
}

.lightbox-media {
        flex: 1 1 50%;
        position: relative;
        min-width: 0;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
}
.lightbox-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0.75rem 0 0 0.75rem;
}

.lightbox-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.2);
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.4); }

.lightbox-info {
        flex: 1 1 50%;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-left: 1px solid rgba(255,255,255,0.2);
        padding: 2rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
}

.lightbox-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
}
.lightbox-label {
        color: rgba(255,255,255,0.5);
        text-transform: uppercase;
        letter-spacing: 0.1em;
}

@media (max-width: 768px) {
        .lightbox-panel {
                flex-direction: column;
                max-height: 95vh;
                width: 95vw;
        }
        .lightbox-media img { border-radius: 0.75rem 0.75rem 0 0; }
        .lightbox-info { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); padding: 1.25rem; }
}

/* ============================================================
   Gallery item cards
   ============================================================ */
.gallery-item {
        cursor: zoom-in;
        overflow: hidden;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}
.gallery-item img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

/* ============================================================
   Footer — White background
   ============================================================ */
footer {
        background-color: #ffffff;
        color: #131b2e;
}
footer .text-surface-variant,
footer a {
        color: #434655;
}
footer .text-surface-variant:hover,
footer a:hover {
        color: #004ac6;
}
footer .font-headline-md,
footer .text-headline-md {
        color: #131b2e;
}

/* ============================================================
   Typography — Titles / Text / Labels
   Plain CSS rules (un-layered) — always beat Tailwind utilities.
   ============================================================ */

/* --- Títulos: Playfair Display --- */
.font-headline-lg,
.font-headline-md,
.font-display-xl,
.font-display-xl-mobile {
        font-family: "Playfair Display", serif;
}
.text-headline-lg {
        font-size: 48px;
        line-height: 1.2;
        font-weight: 600;
}
.text-headline-md {
        font-size: 32px;
        line-height: 1.3;
        font-weight: 600;
}
.text-display-xl {
        font-size: 96px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        font-weight: 700;
}
.text-display-xl-mobile {
        font-size: 60px;
        line-height: 1.1;
        font-weight: 700;
}

/* --- Texto: Space Mono --- */
.font-body-lg,
.font-body-md,
.font-body-sm {
        font-family: "Space Mono", monospace;
}
.text-body-lg {
        font-size: 20px;
        line-height: 1.6;
        font-weight: 400;
}
.text-body-md {
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400;
}
.text-body-sm {
        font-size: 14px;
        line-height: 1.5;
        font-weight: 400;
}

/* --- Etiquetas: Inter --- */
.font-label-lg,
.font-label-md {
        font-family: "Inter", sans-serif;
}
.text-label-lg {
        font-size: 14px;
        line-height: 1.0;
        letter-spacing: 0.1em;
        font-weight: 600;
}
.text-label-md {
        font-size: 12px;
        line-height: 1.0;
        font-weight: 500;
}