/*
Theme Name:   Astra Hijo
Description:  Tema hijo para tutorial DonWeb
Author:       Emanuel
Author URL:   https://test123prueba.online/
Template:     astra 
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-hijo
*/


/*Estilos para la barra superior del contador especializado*/

/*
.custom-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #c62828;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 10px 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;  
  flex-wrap: wrap;
  max-width: 1000px;
  width: 100%;
}
.banner-text {
  text-align: center;
  font-size: 20px;
  font-weight: 600;

}


.banner-countdown {
  text-align: center; 
  font-size: 16px; 
  flex: 1;         
  padding-right: 20px; 
}

#countdown-numbers {
  font-size: 20px;  
  font-weight: bold;
  letter-spacing: 5px;
}
.countdown-labels {
  font-size: 12px;  
  color: #ffe0e0;
  margin-top: 2px;
  
}

.close-banner {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
}


@media(max-width:768px) {
    body {
        margin-top: 50px;
    }
}

*/

/*-------- Inicio Pasarela de pago para yape-----------*/
.ctn_yape { background: #742284 !important;   color: #fff !important;
    padding: 4% !important; border-radius: 10px !important;
    display: flex;  flex-direction: column;
    line-height: 1.2 !important;letter-spacing: -0.3px !important;
}
.ctn_yape p {line-height: 25px;}
.estilo_yape { display: flex;  justify-content: space-around; padding: 25px 0 !important;}
.qr_yape { width: 50% !important; text-align: center !important;}
.descrip_yape{ width: 42% !important;text-align: left !important; font-size: 11px;}
.logo_yape { width: 100% !important;height: 100px !important;
    background-image: url(./assets/img/logo-yape.webp) !important;
    background-size: contain !important;background-repeat: no-repeat !important;
    background-position: center !important;	margin-bottom: 10px;
}

.boton_contacto_yape {  display: flex; justify-content: center;
    background: #F39314 !important;  color: #fff !important;
    border-radius: 8px !important;   line-height: 1.1 !important;
    padding: 8px 1% !important; text-decoration: none !important;
    text-transform: initial !important;   font-weight: bold !important;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    transition: all 0.3s ease-in-out !important;
    text-align: center !important; margin-top: 20px !important;
}
.titular_yape { display: block !important;  width: 100% !important;
    color: #ffffff !important;  text-decoration: none !important;
    line-height: 1.2 !important; font-weight: bold !important;
    font-size: 16px !important; text-align: center !important;
    text-transform: uppercase !important;}

/*-------- Fin Pasarela de pago para yape-----------*/

/*-------- Inicio Pasarela de pago para Banco BCP Soles-----------*/

.ctn_bcp { background: #003F97 !important;   color: #fff !important;
    padding: 4% !important; border-radius: 10px !important;
    display: flex;  flex-direction: column;
    line-height: 1.2 !important;letter-spacing: -0.3px !important;
}
.desc_banco_bcp{line-height: 25px;}

.estilo_bcp{display: flex;  justify-content: space-around; padding: 5px 0 !important;margin-top: 10px;}
.logo_bcp {width: 30%;margin-right: 15px;}
.logo_bcp img { width: 130px;}

.ctn_ctas_bcp {width: 65%;}

.tipo_cta_bcp_1 {width: 100%;margin-bottom: 3px;}
.nro_cta_bcp_1 {width: 100%;font-size: 20px;font-weight: bold;}

.tipo_cta_bcp_2 {width: 100%;margin-top: 15px;margin-bottom: 3px;}
.nro_cta_bcp_2 {width: 100%;font-size: 20px;font-weight: bold;}

.ctn_titular_bcp {display: flex;flex-direction: column;width: 100%; text-align: center;}
.logo_titular_bcp { margin-bottom: 15px; }
.datos_titular_bcp { }
.datos_titular_bcp p { line-height: 8px; }

/*-------- Fin Pasarela de pago para Banco BCP Soles -----------*/

/*-------- Inicio Pasarela de pago para plin-----------*/

.ctn_plin { background: #08D4D8 !important;   color: #fff !important;
    padding: 4% !important; border-radius: 10px !important;
    display: flex;  flex-direction: column;
    line-height: 1.2 !important;letter-spacing: -0.3px !important;
}
.ctn_plin p {line-height: 25px;}
.estilo_plin { display: flex;  justify-content: space-around; padding: 25px 0 !important;}
.qr_plin { width: 50% !important; text-align: center !important;}

.descrip_plin{ width: 42% !important;text-align: left !important; font-size: 11px;}


.boton_contacto_plin {  display: flex; justify-content: center;
    background: #F39314 !important;  color: #fff !important;
    border-radius: 8px !important;   line-height: 1.1 !important;
    padding: 8px 1% !important; text-decoration: none !important;
    text-transform: initial !important;   font-weight: bold !important;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    transition: all 0.3s ease-in-out !important;
    text-align: center !important; margin-top: 20px !important;
}
.titular_plin { display: block !important;  width: 100% !important;
    color: #ffffff !important;  text-decoration: none !important;
    line-height: 1.2 !important; font-weight: bold !important;
    font-size: 16px !important; text-align: center !important;
    text-transform: uppercase !important;}

/*-------- Fin Pasarela de pago para plin -----------*/


/* === Mensaje emergente ancho completo === */
.mensaje-emergente-woo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, #4caf50 0%, #43a047 100%);
    color: #fff;
    text-align: center;
    padding: 18px 10px 20px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    animation: slideDown 0.5s ease;
}

/* Animación de entrada */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.mensaje-emergente-woo h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.mensaje-emergente-woo p {
    margin: 4px 0 10px;
    font-size: 15px;
    opacity: 0.95;
}

.mensaje-emergente-woo .btn-whatsapp {
    display: inline-block;
    background-color: #2e7d32;
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.mensaje-emergente-woo .btn-whatsapp:hover {
    background-color: #1b5e20;
    transform: scale(1.05);
}

/* Botón cerrar (X) */
.cerrar-mensaje {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.cerrar-mensaje:hover {
    opacity: 1;
}


/* -----Inicio de stilos de mostrar contraseña ---- */

/* -Asegura que el contenedor sea el punto de referencia*/
.woocommerce form .woocommerce-input-wrapper {
    position: relative;
}

/* Oculta el icono nativo de mostrar contraseña en Edge */
input::-ms-reveal,
input::-ms-clear {
    display: none !important;
}

/* Corrige el botón de mostrar contraseña */

.woocommerce form .show-password-input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23000" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"/><path d="M2.458 12C3.732 7.943 7.522 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7s-8.268-2.943-9.542-7z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    border: none;
    cursor: pointer;
    opacity: 0.85;
    background-color: transparent;
    z-index: 2;
}


/* Estado visible (ojo tachado) */
.woocommerce form .show-password-input.visible {
    background-image: url('ata:image/svg+xml;utf8,<svg fill="none" stroke="%23000" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l20 20M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>');
}
/* Estado visible (ojo tachado) */
.woocommerce form .show-password-input.visible {
    background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23000" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2 2l20 20M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>');
}

/* Hover */
.woocommerce form .show-password-input:hover { opacity: 1; }

/* Espacio para el icono dentro del input */
.woocommerce form input[type="password"],
.woocommerce form input[type="text"] {
    padding-right: 45px !important;
}

/*fin de stilos de mostrar contraseña*/

/*-----Inicio de link de cupon woocommerce---*/

.showcoupon {
    font-weight: 600;
}

/*fin de cupon woocommerce*/

/*-----Inicio de ajuste de body woocommerce---*/

/* Ajuste específico para páginas WooCommerce */
.woocommerce-page main {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Ajuste para páginas de cursos (Tutor LMS) */
.tutor-wrap,
.tutor-login-wrap,#tutor-registration-wrap {
  margin-top: 40px;
  margin-bottom: 40px;
}


/*-----Fin de ajuste de body woocommerce---*/

/* Responsivo de mensaje emergente*/
@media (max-width: 480px) {
    .mensaje-emergente-woo {
        padding: 15px 10px;
        font-size: 14px;
    }
    .mensaje-emergente-woo h2 {
        font-size: 18px;
    }
    .mensaje-emergente-woo .btn-whatsapp {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/*-----------Estilo de cards de talleres y videos---*/


        .talleres-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 24px;
            padding: 20px 0;
        }
        .taller-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 3px 12px rgba(0,0,0,0.12);
            background: #fff;
            transition: transform 0.2s;
        }
        .taller-card:hover { transform: translateY(-4px); }
        .taller-card-imagen img {
            width: 100%; height: 190px;
            object-fit: cover; display: block;
        }
        .taller-card-info { padding: 16px; }
        .taller-fecha {
            font-size: 13px; color: #888;
            display: block; margin-bottom: 6px;
        }
        .taller-fecha .dashicons {
            font-size: 16px; width: 16px; height: 16px;
            vertical-align: middle; margin-right: 4px; color: #888;
        }
        .taller-card-info h3 {
            margin: 0 0 8px; font-size: 17px; color: #1a1a1a;
        }
        .taller-card-info p {
            font-size: 14px; color: #555; margin-bottom: 14px;
        }

        /* POPUP LOGIN */
        #popup-login-overlay {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.75);
            z-index: 99999;
            align-items: center;
            justify-content: center;
        }
        #popup-login-contenido {
            background: #fff; border-radius: 12px;
            padding: 30px; width: 90%;
            max-width: 440px; position: relative;
        }
        #cerrar-popup-login {
            position: absolute; top: 10px; right: 14px;
            background: rgba(0,0,0,0.5); color: #fff;
            border: none; border-radius: 50%;
            width: 30px; height: 30px; font-size: 16px;
            cursor: pointer; z-index: 10;
            line-height: 30px; text-align: center;
        }
        #cerrar-popup-login:hover { background: rgba(0,0,0,0.8); }