/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Tema hijo de Astra para personalizaciones.
Author: Tu nombre o empresa
Author URI: https://tusitio.com
Template: astra
Version: 1.0.1
Text Domain: astra-child
*/

/* Header */

/*Despliegue*/

/* ====== Paleta rápida ====== */
/* ===== Ajustes clave: contraste, sin huecos y sin JS ===== */

/* El padre crea contexto y z-index alto */
.ast-desktop li.menu-item-has-children {
    position: relative;
    z-index: 10000;
}

/* Panel del submenú: blanco sólido, texto oscuro */
.ast-desktop li.menu-item-has-children>.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    max-width: clamp(280px, 36vw, 420px);
    margin: 0;
    padding: 10px;
    list-style: none;
    background: #fff;
    /* más contraste */
    color: #111;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    /* sin blur para no aclarar el texto */
    backdrop-filter: none;
    /* animación suave sin crear huecos perceptibles */
    transform-origin: 20px -8px;
    transform: translateY(6px) scale(.985);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .2s ease, visibility .2s;
}

/* Mostrar al pasar/focus (sin JS) */
.ast-desktop li.menu-item-has-children:hover>.sub-menu,
.ast-desktop li.menu-item-has-children:focus-within>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ---------- ANTI-DESAPARICIÓN ----------
   “Puente” invisible que mantiene el hover mientras
   bajas el mouse del item padre al panel (sin JS) */
.ast-desktop li.menu-item-has-children>.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
    background: transparent;
    /* no afecta clics dentro del panel */
    pointer-events: auto;
}

/* Flechita decorativa ahora en ::after (no choca con el puente) */
.ast-desktop li.menu-item-has-children>.sub-menu::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 28px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, .08);
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-radius: 3px 0 0 0;
}

/* Items y enlaces: FLEX (evita texto vertical) + color negro forzado */
.ast-desktop .sub-menu>li {
    list-style: none;
    border-radius: 10px;
}

.ast-desktop .sub-menu a.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #111 !important;
    /* fuerza negro */
    text-decoration: none;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    transition: background .15s ease;
}

.ast-desktop .sub-menu>li+li a.menu-link {
    margin-top: 2px;
}

/* Hover con barra de acento (opcional) */
.ast-desktop .sub-menu a.menu-link:hover,
.ast-desktop .sub-menu a.menu-link:focus {
    background: linear-gradient(90deg, rgba(225, 29, 72, .08), transparent);
    outline: none;
}

.ast-desktop .sub-menu a.menu-link:hover::before,
.ast-desktop .sub-menu a.menu-link:focus::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: #AE1922;
}

/* Icono flecha existente: tamaño y transición sutil */
.ast-desktop .sub-menu .ast-icon .ast-arrow-svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .8;
    transition: transform .2s ease, opacity .2s ease;
}

.ast-desktop .sub-menu a.menu-link:hover .ast-arrow-svg {
    transform: translateX(2px) rotate(-90deg);
    opacity: 1;
}

/* Mobile/offcanvas de Astra: compatibles */
.ast-mobile .sub-menu {
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}

.ast-mobile .sub-menu a.menu-link {
    display: flex;
    gap: 10px;
    padding: 12px 10px;
    color: #111 !important;
}






/* Quitar posición absoluta del header transparente y darle fondo */
.ast-theme-transparent-header #masthead {
    position: static !important;

}

.main-header-bar-wrap {
    background: #AE1922 !important;
}

/* Fondo y sombra del header */
.site-header,
#masthead,
.main-header-bar {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

/* Header fijo (sticky) */
#masthead {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: transform .25s ease, background .2s ease, box-shadow .2s ease;
    /* transición para ocultar/mostrar */
}

/* Ajuste para barra de administración */
body.admin-bar #masthead {
    top: 32px;
}

/* Estilo base con transición */
.main-header-bar {
    transition: padding .2s ease, height .2s ease, box-shadow .2s ease;
    padding: 18px 0;
    min-height: 60px;
}

/* Estado comprimido */
.header-shrink .main-header-bar {
    padding: 8px 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

/* Reducir tamaño del logo en scroll */
.header-shrink .site-logo-img img,
.header-shrink .custom-logo {
    max-height: 36px;
    height: 36px;
    width: auto;
    transition: height .2s ease, max-height .2s ease, transform .2s ease;
}

/* Colores del menú si antes dependían de transparencia */
.main-header-menu .menu-link,
.main-header-menu .ast-menu-toggle,
.ast-mobile-popup-drawer .menu-link {
    color: #ffffff !important;
}

/* Ocultar header al hacer scroll hacia abajo */
.header-hidden {
    transform: translateY(-100%);
}

/* =======================
   BOTÓN WHATSAPP HEADER
   ======================= */
.main-header-menu .btn-whatsapp,
.ast-builder-menu .btn-whatsapp,
.btn-whatsapp {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: #25D366;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) inset;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease;
    white-space: nowrap;
    /* evita que se rompa en dos líneas */
}

/* Ícono alineado perfectamente */
.btn-whatsapp::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.029-.967-.273-.099-.472-.148-.672.15-.198.297-.767.965-.94 1.164-.173.198-.347.223-.644.074-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.173.198-.297.298-.495.099-.198.049-.372-.025-.521-.075-.149-.672-1.611-.922-2.206-.242-.579-.487-.5-.672-.51l-.573-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.051 19.803h-.004a8.73 8.73 0 01-4.193-1.075l-.3-.178-3.111.817.832-3.033-.195-.311a8.742 8.742 0 01-1.34-4.64c.001-4.84 3.939-8.778 8.78-8.778 2.345 0 4.549.913 6.207 2.571a8.72 8.72 0 012.572 6.206c-.003 4.84-3.941 8.778-8.778 8.778m7.413-16.193A10.66 10.66 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.305-1.654a11.82 11.82 0 005.692 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 00-3.488-8.41'/></svg>");
    flex-shrink: 0;
    align-self: center;
}

/* Hover mejorado */
.btn-whatsapp:hover {
    transform: translateY(-2px) scale(1.03);
    background: #20c659;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(32, 198, 89, 0.4);
    opacity: 1;
}

/* Estado activo */
.btn-whatsapp:active {
    transform: scale(0.98);
    background: #1da851;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) inset;
}

/* Ajuste específico cuando está en el menú de Astra */
.main-header-menu .btn-whatsapp,
.ast-builder-menu .btn-whatsapp {
    border: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-left: 12px;
}

/* Si Astra envuelve en <p>, alineamos todo */
.ast-header-html-1 .ast-builder-html-element {
    display: flex;
    align-items: center;
}

.ast-header-html-1 p {
    margin: 0;
}







/* ===== Estilo barra superior - Widgets ===== */

/* General para los dos widgets */
.header-widget-area .topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    /* espacio entre bloques */
    font-size: 13px;
    /* letra más pequeña */
    line-height: 1.25;
    color: #000;
    /* blanco sobre fondo oscuro/rojo */
}

/* Widget 1 (izquierda) */
.header-widget-area .topline--left {
    justify-content: flex-start;
}

.header-widget-area .topline--left .topline__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.header-widget-area .topline--left .topline__item:hover {
    text-decoration: underline;
}

/* Widget 2 (derecha) */
.header-widget-area .topline--right {
    justify-content: flex-end;
}

.header-widget-area .topline--right .topline__link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.header-widget-area .topline--right .topline__link:hover {
    text-decoration: underline;
}

/* Íconos (ubicación/teléfono) */
.header-widget-area .topline__icon,
.header-widget-area .topline__item svg,
.header-widget-area .topline__link svg {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    fill: currentColor;
    vertical-align: middle;
}

/* Separadores */
.header-widget-area .topline__sep,
.header-widget-area .topline__dot {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 6px;
}

/* Etiqueta “Lima:” con opacidad */
.header-widget-area .topline__label {
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 768px) {
    .header-widget-area .topline {
        gap: 10px;
        font-size: 12px;
        justify-content: center;
    }

    .header-widget-area .topline--left,
    .header-widget-area .topline--right {
        justify-content: center;
    }
}

.ast-above-header-wrap {
    background-color: #f1f3f3;
}

/*footer*/
.footer-width-fixer {
    display: none;
}


/**/
/* Alinear como los otros menús del footer */
#nav_menu-contacto,
#nav_menu-ubicacion {
    text-align: left !important;
}

#nav_menu-contacto .menu,
#nav_menu-ubicacion .menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav_menu-contacto .menu li,
#nav_menu-ubicacion .menu li {
    margin: 0 0 10px;
}

/* Enlaces en bloque + espacio para icono */
#nav_menu-contacto .menu a,
#nav_menu-ubicacion .menu a {
    display: block;
    text-decoration: none;
    position: relative;
    padding-left: 28px;
    /* espacio para el icono */
}

/* Base de iconos (data-URI) */
#nav_menu-contacto .menu a::before,
#nav_menu-ubicacion .menu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Teléfono fijo */
#nav_menu-contacto .menu a.icon--phone::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23AE1922' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.3 11.3 0 003.55.57 1 1 0 011 1v3.5a1 1 0 01-1 1A17 17 0 013 5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.2.2 2.4.57 3.55a1 1 0 01-.24 1.05l-2.21 2.19z'/></svg>");
}

/* Móvil */
#nav_menu-contacto .menu a.icon--mobile::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='6' y='2' width='12' height='20' rx='2' ry='2' fill='none' stroke='%23AE1922' stroke-width='2'/><circle cx='12' cy='18' r='1.2' fill='%23AE1922'/></svg>");
}

/* Email */
#nav_menu-contacto .menu a.icon--mail::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='6' width='18' height='12' rx='2' ry='2' fill='none' stroke='%23AE1922' stroke-width='2'/><path d='M4 7l8 6 8-6' fill='none' stroke='%23AE1922' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Pin ubicación */
#nav_menu-ubicacion .menu a.icon--pin::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23AE1922' d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 10.5A3.5 3.5 0 118.5 9 3.5 3.5 0 0112 12.5z'/></svg>");
}

/* Evitar corte feo en el guion de Lima */
#nav_menu-ubicacion .addr {
    white-space: nowrap;
}

/* Color del título del widget (si lo necesitas forzado) */
.widget-title {
    color: #fff !important;
}


/*FOOTER-LIBRO DE RECLAMACIONES*/
/* Libro de Reclamaciones (solo en el widget Ubicación) */
#nav_menu-ubicacion .libro-reclamaciones-link {
    display: block;
    margin-top: 14px;
    border-radius: 8px;
    overflow: hidden;
    /* aplica el redondeo a la imagen */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}

#nav_menu-ubicacion .libro-reclamaciones-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

#nav_menu-ubicacion .libro-reclamaciones-img {
    display: block;
    width: 100%;
    height: auto;
}

/**/
.link-corporativos,
.link-tramites,
.link-legales,
.link-ecommerce {
    cursor: pointer;
}

/* Efecto SOLO sobre el overlay de las columnas linkeadas */
.elementor-element.link-corporativos>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-tramites>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-legales>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-ecommerce>.elementor-widget-wrap>.elementor-background-overlay {
    background-color: rgba(0, 0, 0, .28) !important;
    /* base */
    opacity: 1 !important;
    /* <- clave: visible */
    transition: background-color .25s ease, opacity .25s ease;
    pointer-events: none;
    /* no bloquea el click */
}

/* Hover: oscurece un poco */
.elementor-element.link-corporativos:hover>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-tramites:hover>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-legales:hover>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-ecommerce:hover>.elementor-widget-wrap>.elementor-background-overlay {
    background-color: rgba(0, 0, 0, .42) !important;
}

/* Press: aún más oscuro */
.elementor-element.link-corporativos:active>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-tramites:active>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-legales:active>.elementor-widget-wrap>.elementor-background-overlay,
.elementor-element.link-ecommerce:active>.elementor-widget-wrap>.elementor-background-overlay {
    background-color: rgba(0, 0, 0, .55) !important;
}

/*formulario de contacto*/

/* =============================
   FORMULARIO DE CONTACTO (GF #1)
   Apariencia profesional — sin cambiar medidas
   ============================= */

/* === 1) Tu espaciado (SIN CAMBIOS) === */
#gform_wrapper_1 #gform_fields_1 {
    row-gap: 10px;
    /* antes suele estar ~20px */
    grid-row-gap: 10px;
    /* fallback */
}

#gform_wrapper_1 .gfield {
    margin-bottom: 8px;
    /* antes ~16-24px */
}

#gform_wrapper_1 .gform_footer {
    margin-top: 12px;
    /* acerca el botón a los campos */
}

#gform_wrapper_1 .gform-body {
    padding-bottom: 0;
    /* limpia aire al final */
}

/* === 2) Título === */
#gform_wrapper_1 .gform_title {
    color: #0f2236;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 1.3rem;
}

/* === 3) Campos: bordes/foco (no se tocan medidas internas) === */
#gform_wrapper_1 .ginput_container input[type="text"],
#gform_wrapper_1 .ginput_container input[type="email"],
#gform_wrapper_1 .ginput_container input[type="tel"],
#gform_wrapper_1 .ginput_container input[type="url"],
#gform_wrapper_1 .ginput_container input[type="number"],
#gform_wrapper_1 .ginput_container textarea {
    border: 1px solid #d7dbe3;
    border-radius: 8px;
    /* suaviza sin alterar layout */
    background: #fff;
    color: #0f2236;
    box-shadow: 0 1px 0 rgba(17, 35, 55, .03) inset;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    outline: none;
}

/* Placeholder */
#gform_wrapper_1 ::placeholder {
    color: #8a93a2;
    opacity: 1;
}

/* Hover */
#gform_wrapper_1 .ginput_container input:hover,
#gform_wrapper_1 .ginput_container textarea:hover {
    border-color: #b9c1cf;
}

/* Focus */
#gform_wrapper_1 .ginput_container input:focus,
#gform_wrapper_1 .ginput_container input:focus-visible,
#gform_wrapper_1 .ginput_container textarea:focus,
#gform_wrapper_1 .ginput_container textarea:focus-visible {
    border-color: #204ce5;
    box-shadow: 0 0 0 3px rgba(32, 76, 229, .16);
}

/* Textarea (solo estética) */
#gform_wrapper_1 .ginput_container textarea {
    resize: vertical;
}

/* Oculta labels visualmente cuando GF usa hidden_label (accesible) */
#gform_wrapper_1 .hidden_label .gfield_label {
    position: absolute !important;
    left: -9999px !important;
}

/* === 4) Errores / validación === */
#gform_wrapper_1 .gfield.gfield_error .ginput_container input,
#gform_wrapper_1 .gfield.gfield_error .ginput_container textarea {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, .12);
}

#gform_wrapper_1 .gfield_description.validation_message {
    color: #b42318;
    font-size: 13px;
    margin-top: 6px;
}

#gform_wrapper_1 .gform_validation_errors {
    border: 1px solid #ffd2d2;
    background: #fff6f6;
    border-radius: 10px;
}

/* === 5) Mensaje de confirmación === */
#gform_confirmation_wrapper_1,
#gform_wrapper_1 .gform_confirmation_message {
    border: 1px solid #dfe8ff;
    background: #f6fbff;
    color: #0f2236;
    border-radius: 10px;
}

/* === 6) reCAPTCHA (cuando lo agregues) === */
#gform_wrapper_1 .ginput_recaptcha {
    margin-top: 4px;
}

/* === 7) Botón de envío === */
#gform_wrapper_1 .gform_footer .gform_button {
    background: #222222;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(32, 76, 229, .18);
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}

#gform_wrapper_1 .gform_footer .gform_button:hover {
    background: #252525;
    box-shadow: 0 8px 20px rgba(32, 76, 229, .24);
}

#gform_wrapper_1 .gform_footer .gform_button:active {
    transform: translateY(1px);
}

/* === 8) Spinner de envío (suave) === */
#gform_wrapper_1 .gform_ajax_spinner {
    opacity: .9;
    filter: saturate(0.2) contrast(1.1);
}