/* Base: Optimizado para TV 32" (1366x768 o 1920x1080) */
:root {
    font-size: clamp(12px, 1.5vw, 18px);
}

body {
    font-family: 'Arial Black', sans-serif;
    margin: 0;
    background-color: #1a1a1a;
    color: #fff;
    overflow: hidden;
    transform: scale(0.92);
    transform-origin: top center;
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    background-color: #ffcc00;
    padding: clamp(8px, 1vh, 12px) clamp(15px, 2vw, 25px);
    text-align: center;
    border-bottom: clamp(3px, 0.5vh, 5px) solid #000;
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
}

.logo {
    width: clamp(60px, 8vw, 100px);
    vertical-align: middle;
    height: auto;
}

header h1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 clamp(10px, 1.5vw, 20px);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #000;
    text-shadow: 2px 2px #d10000;
}

#display-container {
    width: 100%;
    height: calc(100vh - clamp(60px, 8vh, 90px));
    display: grid;
    padding: clamp(10.8px, 1.44vw, 18px);
    box-sizing: border-box;
    gap: clamp(10.8px, 1.44vw, 18px);
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

#display-container.fade-in {
    opacity: 1;
}

/* Estilos de precio */
.price {
    font-size: clamp(0.88rem, 1.6vw, 1.2rem);
    font-weight: bold;
    color: #fff;
    background-color: #d10000;
    padding: clamp(3.2px, 0.48vh, 6.4px) clamp(6.4px, 0.96vw, 9.6px);
    border-radius: clamp(3.2px, 0.48vh, 4.8px);
    display: inline-block;
    margin-top: clamp(6.4px, 0.8vh, 9.6px);
    opacity: 0;
}
.price[class*="typewriter"] {
    opacity: 1;
}

/* Template: 2 Products */
.template-two_products {
    grid-template-columns: 1fr 1fr;
}
.product-item-large {
    background-color: #2b2b2b;
    border: clamp(1.6px, 0.24vw, 2.4px) solid #ffcc00;
    border-radius: clamp(6.4px, 0.96vw, 9.6px);
    padding: clamp(12px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: productFadeInScale 0.9s ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
    box-sizing: border-box;
}

.product-item-large:nth-child(1) { animation-delay: 0.15s; }
.product-item-large:nth-child(2) { animation-delay: 0.3s; }
.product-item-large img {
    width: 80%;
    max-height: clamp(144px, 21.6vh, 201.6px);
    height: auto;
    object-fit: contain;
    margin-bottom: clamp(8.64px, 1.296vh, 12.96px);
    border-radius: clamp(10.8px, 1.8vw, 18px);
    border: clamp(2.88px, 0.504vw, 4.32px) solid #ffcc00;
    box-shadow: 0 clamp(5.76px, 0.936vw, 8.64px) clamp(17.28px, 2.88vw, 25.2px) rgba(255, 204, 0, 0.6), 
                0 clamp(2.88px, 0.504vw, 4.32px) clamp(8.64px, 1.44vw, 12.96px) rgba(209, 0, 0, 0.4),
                inset 0 clamp(1.44px, 0.288vw, 2.88px) clamp(4.32px, 0.72vw, 7.2px) rgba(255, 255, 255, 0.1);
    padding: clamp(4.32px, 0.72vw, 7.2px);
    background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.product-item-large:hover img {
    transform: scale(1.05);
    box-shadow: 0 clamp(12px, 2vw, 18px) clamp(32px, 5vw, 45px) rgba(255, 204, 0, 0.8), 
                0 clamp(6px, 1vw, 10px) clamp(16px, 2.5vw, 24px) rgba(209, 0, 0, 0.5);
}
.product-item-large .info h2 {
    color: #ffcc00;
    font-size: clamp(1.152rem, 2.16vw, 1.728rem);
    opacity: 0;
    border-right: 3px solid #ffcc00;
    display: inline-block;
}
.product-item-large .info h2[class^="typewriter"] {
    opacity: 1;
}
.product-item-large .info p {
    color: #ccc;
    font-size: clamp(0.648rem, 1.152vw, 0.864rem);
    opacity: 0;
}
.product-item-large .info p[class^="typewriter"] {
    opacity: 1;
}
.product-item-large .info .price {
    opacity: 0;
}
.product-item-large .info .price[class^="typewriter"] {
    opacity: 1;
}

/* Template: 1 Video */
/* Template: 1 Video */
.template-one_video {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(10.8px, 1.44vw, 18px);
}

.template-one_video video {
    width: 90%;
    height: 90%;
    min-height: 90%;
    object-fit: cover;
    object-position: center;
    border-radius: clamp(5.76px, 0.936vw, 10.8px);
    animation: fadeIn 0.8s ease-in;
    display: block;
}
/* Template: 1 Product, 1 Media */
.template-one_product_one_media {
    grid-template-columns: 1fr 1fr;
    padding: clamp(10.8px, 1.44vw, 18px);
}
.media-item {
    animation: slideInRight 0.9s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}
.media-item video {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: clamp(8px, 1.3vw, 15px);
    display: block;
}
/* Template: 1 Product Featured */
.template-one_product {
    grid-template-columns: 1fr;
}
.product-item-featured {
    background: linear-gradient(135deg, #2b2b2b 0%, #1f1f1f 100%);
    border: clamp(1.44px, 0.288vw, 2.88px) solid #ffcc00;
    border-radius: clamp(10.8px, 1.8vw, 18px);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    padding: clamp(18px, 2.88vw, 28.8px);
    gap: clamp(18px, 2.88vw, 28.8px);
    animation: featuredSlideIn 1s ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
    box-shadow: 0 clamp(5.76px, 0.936vw, 8.64px) clamp(23.04px, 3.6vw, 34.56px) rgba(0, 0, 0, 0.5),
                inset 0 clamp(1.44px, 0.216vw, 2.16px) clamp(5.76px, 0.936vw, 8.64px) rgba(255, 204, 0, 0.1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.product-item-featured::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, transparent 70%);
    animation: backgroundRotate 20s linear infinite;
}
.product-item-featured img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: clamp(230.4px, 36vh, 324px);
    object-fit: contain;
    object-position: center;
    border-radius: clamp(14.4px, 2.52vw, 21.6px);
    border: clamp(3.6px, 0.648vw, 5.76px) solid #ffcc00;
    box-shadow: 0 clamp(11.52px, 2.016vw, 17.28px) clamp(28.8px, 5.04vw, 43.2px) rgba(255, 204, 0, 0.8), 
                0 clamp(5.76px, 1.008vw, 8.64px) clamp(17.28px, 3.024vw, 25.92px) rgba(209, 0, 0, 0.6),
                inset 0 clamp(2.16px, 0.36vw, 3.6px) clamp(8.64px, 1.512vw, 12.96px) rgba(255, 255, 255, 0.15),
                0 0 clamp(23.04px, 4.032vw, 34.56px) rgba(255, 204, 0, 0.4);
    padding: clamp(7.2px, 1.296vw, 10.8px);
    background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: imagePulse 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

.product-item-featured:hover img {
    transform: scale(1.02);
    box-shadow: 0 clamp(20px, 3.5vw, 30px) clamp(48px, 8.4vw, 72px) rgba(255, 204, 0, 1), 
                0 clamp(10px, 1.75vw, 15px) clamp(28px, 4.9vw, 42px) rgba(209, 0, 0, 0.7),
                inset 0 clamp(3px, 0.5vw, 5px) clamp(12px, 2.1vw, 18px) rgba(255, 255, 255, 0.2),
                0 0 clamp(40px, 7vw, 60px) rgba(255, 204, 0, 0.6);
}
.product-item-featured .info {
    text-align: left;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10.8px, 1.8vw, 18px);
}
.product-item-featured .info h2 {
    font-size: clamp(1.584rem, 3.24vw, 2.52rem);
    color: #ffcc00;
    margin: 0;
    text-shadow: 2px 2px clamp(4.32px, 0.72vw, 7.2px) rgba(0, 0, 0, 0.8),
                 0 0 clamp(11.52px, 2.016vw, 17.28px) rgba(255, 204, 0, 0.3);
    line-height: 1.2;
    opacity: 0;
    border-right: 3px solid #ffcc00;
    display: inline-block;
}
.product-item-featured .info h2.typewriter-title {
    opacity: 1;
}
.product-item-featured .info > p {
    font-size: clamp(0.72rem, 1.368vw, 1.08rem);
    color: #e0e0e0;
    line-height: 1.5;
    margin: 0;
    text-shadow: 1px 1px clamp(2.16px, 0.36vw, 3.6px) rgba(0, 0, 0, 0.8);
    opacity: 0;
}
.product-item-featured .info > p.typewriter-description {
    opacity: 1;
}
.product-item-featured .info .price {
    font-size: clamp(1.296rem, 2.52vw, 2.016rem);
    margin-top: clamp(5.76px, 0.936vh, 8.64px);
    display: inline-block;
    align-self: flex-start;
    opacity: 0;
}
.product-item-featured .info .price.typewriter-price {
    opacity: 1;
}

/* Animaciones typewriter para otros templates */
.product-item-large .info h2 {
    opacity: 0;
    border-right: 2px solid #ffcc00;
}

.product-item-large .info p {
    opacity: 0;
}

/* Animaciones Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes productSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes productFadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes featuredSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes imagePulse {
    0%, 100% {
        box-shadow: 0 20px 50px rgba(255, 204, 0, 0.8), 
                    0 10px 30px rgba(209, 0, 0, 0.6),
                    inset 0 4px 15px rgba(255, 255, 255, 0.15),
                    0 0 40px rgba(255, 204, 0, 0.4);
    }
    50% {
        box-shadow: 0 22px 55px rgba(255, 204, 0, 0.9), 
                    0 12px 35px rgba(209, 0, 0, 0.7),
                    inset 0 4px 15px rgba(255, 255, 255, 0.2),
                    0 0 45px rgba(255, 204, 0, 0.5);
    }
}

@keyframes backgroundRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes blinkCursor {
    0%, 50% { border-color: #ffcc00; }
    51%, 100% { border-color: transparent; }
}

/* Media Queries para diferentes resoluciones de TV */
@media screen and (max-width: 1366px) {
    :root {
        font-size: 14px;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        font-size: 18px;
    }
}

@media screen and (min-width: 2560px) {
    :root {
        font-size: 22px;
    }
}

/* Ajustes para mantener proporción 16:9 en TVs */
@media (aspect-ratio: 16/9) {
    #display-container {
        aspect-ratio: 16/9;
    }
}