/* ========================================
   ESTILOS ADICIONALES PARA INICIO.HTML
   ======================================== */

/* Hero - Ajuste de altura controlada */
.hero-main-carousel {
    min-height: clamp(420px, 70vh, 700px) !important;
    max-height: 700px;
    position: relative;
    overflow: hidden;
}

/* Hero Background Video */
.hero-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Ajuste para intro section sin las tarjetas */
.intro-section-modern {
    padding: 25px 13px 25px;
}

/* Sección de Productos - Layout grid 2-3 */
.products-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.row-single {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Fila superior - 2 tarjetas */
.row-top {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Fila inferior - 3 tarjetas */
.row-bottom {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Tarjetas de Producto - MÁS PEQUEÑAS */
.product-card {
    position: relative;
    border-radius: 15px;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: all 0.4s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    flex: 0 1 auto;
    max-width: 280px !important;
    min-width: 220px !important;
    width: 280px !important;
    height: 320px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}

.product-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, rgba(249, 181, 140, 0.15), transparent);
    transition: height 0.4s ease;
    z-index: 2;
    border-radius: 15px;
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(249, 181, 140, 0.25);
}

.product-card:hover::before {
    height: 60%;
}

/* Video de fondo en la tarjeta */
.product-card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s ease;
}

.product-card:hover .product-card-video {
    transform: scale(1.05);
}

/* Overlay semitransparente */
.product-card-overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: all 0.3s ease;
    box-shadow: none;
    margin-top: auto;
}

.product-card:hover .product-card-overlay {
    background: transparent;
    box-shadow: none;
}

.product-card-title {
    display: none;
}

/* Contenedor del botón CTA */
.card-cta {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
    position: relative;
    z-index: 1;
    padding: 1rem;
}

/* Botón estilo durazno (píldora) - Más compacto */
.btn-peach {
    display: inline-block;
    background: linear-gradient(135deg, #F9B58C 0%, #F4A67C 100%);
    color: white;
    padding: 10px 28px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(249, 181, 140, 0.3);
    border: none;
    cursor: pointer;
}

.btn-peach:hover {
    background: linear-gradient(135deg, #F4A67C 0%, #F09964 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(249, 181, 140, 0.5);
}

.btn-peach:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(249, 181, 140, 0.4);
}

/* Remover estilos de emoji y desc ya que no se usan */
.product-card-emoji {
    display: none;
}

.product-card-desc {
    display: none;
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA TORTAS
   ======================================== */

/* Tarjeta de Tortas - Sin fondos/márgenes */
.product-card--tortas {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Video de Tortas - Escalado al 105% */
.product-card--tortas .product-card-video {
    transform: scale(1.05);
    transform-origin: center;
}

/* ========================================
   ESTILOS PARA VIDEO NUESTRA HISTORIA
   ======================================== */

/* Contenedor del video - overflow hidden para recortar */
.our-story-video-container {
    overflow: hidden;
    border-radius: 15px;
}

/* Video - Escalado al 103% */
.our-story-video {
    transform: scale(1.03);
    transform-origin: center;
}

/* Responsive - Desktop */
@media (min-width: 769px) {

    /* Fila superior - 2 tarjetas */
    .row-top .product-card {
        width: 300px !important;
        max-width: 300px !important;
        height: 350px !important;
    }

    /* Fila inferior - 3 tarjetas más pequeñas */
    .row-bottom .product-card {
        width: 280px !important;
        max-width: 280px !important;
        height: 320px !important;
    }
}

/* Responsive - Tablet y Mobile */
@media (max-width: 768px) {
    .hero-main-carousel {
        min-height: clamp(350px, 60vh, 550px) !important;
        max-height: 550px;
    }

    .products-row,
    .row-single {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .row-top {
        margin-top: 2rem;
    }

    .row-bottom {
        margin-top: 0;
    }

    .product-card {
        max-width: 100%;
        width: 100%;
        min-width: auto;
        height: 380px;
    }

    .product-card-overlay {
        padding: 1.5rem 1.5rem 1.5rem;
    }

    /* Bajar botones un 15% más abajo */
    .card-cta {
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }

    .btn-peach {
        font-size: 0.95rem;
        padding: 11px 28px;
        transform: translateY(15%);
    }

    /* Nuestra Historia - Responsive */
    .our-story-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .our-story-grid>div:first-child {
        order: 1;
    }

    .our-story-grid>div:last-child {
        order: 2;
    }
}

@media (max-width: 480px) {
    .hero-main-carousel {
        min-height: clamp(300px, 50vh, 450px) !important;
        max-height: 450px;
    }

    .product-card {
        height: 320px;
    }

    .product-card-overlay {
        padding: 1.2rem 1.2rem 1.2rem;
    }

    /* Bajar botones un 15% más abajo */
    .card-cta {
        padding-bottom: 0.5rem;
        margin-bottom: 0;
    }

    .btn-peach {
        font-size: 0.9rem;
        padding: 10px 24px;
        transform: translateY(15%);
    }
}