/*
Theme Name: conterolexpor
Author: Saobranding
Version: 1.0
Text Domain: conterolexpor
*/

/* ==========================================================================
   Página 404 Personalizada
   ========================================================================== */

/* Contenedor principal: usa flexbox para centrar todo en la pantalla */
.custom-404-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Asegura que ocupe buena parte de la pantalla */
    padding: 40px 20px;
    background-color: #f4f6f9; /* Un color de fondo muy sutil */
    text-align: center;
}

/* La tarjeta blanca donde va el contenido */
.custom-404-content {
    max-width: 600px;
    width: 100%;
    background: #ffffff;
    /* padding: 60px 40px; */
    padding: 35px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante */
}

/* Estilo del "404" */
.custom-404-number {
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    /* color: #ff6b6b; */
    color: #ffc62d;
    margin-bottom: 20px;
    letter-spacing: -3px;
}

/* Título */
.custom-404-title {
    font-size: 32px;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 15px;
}

/* Texto descriptivo */
.custom-404-description {
    font-size: 18px;
    color: #636e72;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Botón principal */
.custom-404-home-btn {
    display: inline-block;
    background-color: #ffc62d; /* Azul brillante */
    color: #392f2d;
    padding: 14px 32px;
    /* border-radius: 50px; */
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    margin-bottom: 40px;
}

.custom-404-home-btn:hover {
    background-color: #074b83;
    transform: translateY(-3px); /* Efecto de "levantarse" al pasar el ratón */
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(9, 132, 227, 0.4);
}

/* Área del buscador */
.custom-404-search {
    border-top: 1px solid #dfe6e9; /* Línea separadora */
    padding-top: 30px;
}

.custom-404-search p {
    font-size: 15px;
    color: #636e72;
    margin-bottom: 15px;
}

/* Responsive: Ajustes para teléfonos móviles */
@media (max-width: 768px) {
    .custom-404-content {
        padding: 40px 20px;
    }
    
    .custom-404-number {
        font-size: 80px;
    }
    
    .custom-404-title {
        font-size: 24px;
    }
}