/*
 * Estilos comunes para todos los productos Darimo
 * ================================================
 * 
 * Este archivo contiene estilos base que se aplican a todos los templates.
 * NO MODIFICAR a menos que quieras cambiar el diseño de TODOS los productos.
 * 
 * Si necesitas estilos específicos para un producto, añádelos en un <style>
 * dentro del propio archivo HTML del producto.
 */

/* Reset básico para iframes */
body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Hero section - Full bleed */
.hero-section {
    background-color: #0a0a0a;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
}

/* Mantener el contenido interno del hero centrado */
.hero-section .container {
    max-width: 1200px;
    /* margin: 0 auto; */
    padding: 0 15px;
}

/* Cards de características */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Tabla de tallas */
.table thead th {
    font-weight: 600;
    letter-spacing: 0.05em;
}

.table tbody tr:hover {
    background-color: rgba(220, 53, 69, 0.05);
}

/* Alertas/Avisos */
.alert {
    border-radius: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .display-1 {
        font-size: 2.5rem;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
    
    .gap-5 {
        gap: 1.5rem !important;
    }
}

/* Print styles */
@media print {
    .hero-section {
        min-height: auto !important;
        padding: 2rem 0;
    }
    
    iframe {
        display: none;
    }
}