/* =========================================
   ESTILOS GENERALES Y CONTACT FORM 7
   ========================================= */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 16px;
    margin-top: 6px;
    margin-bottom: 18px;
    border: 1px solid #ccd1d9;
    border-radius: 10px;
    background-color: #fff;
    font-size: 16px;
    transition: all 0.25s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: #1a3f8b;
    box-shadow: 0 0 5px rgba(26, 63, 139, 0.2);
    outline: none;
}

.wpcf7-form input[type="submit"] {
    background-color: #0a2351;
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: background-color .3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #183e7a;
}

.wpcf7-form label {
    font-weight: 600;
    color: #0a2351;
}

/* =========================================
   HEPA: AJUSTES DE MENÚS Y BOTONES
   ========================================= */
/* Hide username field on registration */
li.pms-user-login-field {
    display: none !important;
}

/* Change login label text - preserves animations */
label[for="user_login"] {
    text-indent: -9999px;
    line-height: 0;
}

label[for="user_login"]::after {
    text-indent: 0;
    display: block;
    line-height: initial;
}

/* Hide Sign up button */
.elementor-button-link[href*="sign-up"],
.elementor-button[href*="sign-up"],
a.elementor-button-link,
.elementor-element a[href*="register"],
header a[href*="sign-up"],
nav a[href*="sign-up"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Style the Log in menu link */
.menu-item a[href*="log-in"],
nav a[href*="new-log-in"] {
    background-color: #D4A854 !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}

nav a[href*="new-log-in"]:hover {
    background-color: #c49740 !important;
}

/* Remove underline from links */
.elementor-heading-title a {
    text-decoration: none !important;
}
a[href*="register"] {
    text-decoration: none !important;
}

/* =========================================
   PAID MEMBER SUBSCRIPTIONS HACKS
   ========================================= */
.pms-subscription-plan .pms-subscription-plan-members,
.pms-subscription-plan .pms-subscription-plan-memberships,
.pms-subscription-plan .pms-subscription-plan-seats,
.pms-meta-box-seats,
.pms-plan-members,
.pms-membership-details li:last-child {
    display: none !important;
}

.pms-field-user_login, .pms-user-login { 
    display: block !important; 
    visibility: visible !important; 
}

/* HEPA Login Form Styling */
.pms-login, #pms_login { max-width: 520px; margin: 60px auto; padding: 0 24px; }
.pms-login input[type="text"], .pms-login input[type="email"], .pms-login input[type="password"],
#pms_login input[type="text"], #pms_login input[type="email"], #pms_login input[type="password"] {
    width: 100%; height: 56px; border: 1px solid #cfd6e3; border-radius: 6px; padding: 0 16px; font-size: 16px; margin-bottom: 18px;
}
.pms-login label, #pms_login label { color: #0b214a; font-size: 15px; margin-bottom: 6px; display: block; }
.pms-login input[type="submit"], #pms_login input[type="submit"] {
    width: 100%; height: 58px; background: #0b214a !important; color: #ffffff !important; border: none; border-radius: 8px; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 18px;
}
.pms-login input[type="submit"]:hover, #pms_login input[type="submit"]:hover { background: #081936 !important; }
.pms-lost-password, .pms-register-link, .pms-login a { color: #d9a441 !important; text-align: center; display: block; margin-top: 18px; font-weight: 500; }
.pms-login input[type="checkbox"], #pms_login input[type="checkbox"] { margin-right: 8px; }

/* =========================================
   HEPA DIRECTORY & CARDS
   ========================================= */
.entry-title { display: none; }

.hepa-test-card { max-width: 820px; margin: 20px auto; padding: 24px; background: #fff; border: 1px solid #d9a441; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.08); display: flex; gap: 16px; align-items: flex-start; }
.hepa-test-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background: #d9a441; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.hepa-test-content { flex: 1; }
.hepa-test-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hepa-test-top h3 { margin: 0; color: #0b214a; font-size: 18px; font-weight: 700; }
.hepa-test-top span { background: #d9a441; color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.hepa-test-content p { margin: 4px 0; color: #6b7280; font-size: 14px; }
.hepa-test-content strong { color: #0b214a; }

.hepa-profile-card { max-width: 500px; margin: 40px auto; padding: 30px; background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }

.hepa-directory { max-width: 1100px; margin: 40px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0 20px; }
.member-card { background: #fffdf8; border: 2px solid #d9a441; border-radius: 18px; padding: 28px 22px; text-align: center; box-shadow: 0 12px 30px rgba(11, 33, 74, 0.08); min-height: 300px; }
.member-avatar { width: 92px !important; height: 92px !important; border-radius: 50% !important; object-fit: cover; margin: 0 auto 18px auto; display: block; border: 4px solid #f4ead4; }
.member-card h3 { color: #0b214a; font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.member-job { color: #39465c; font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.member-org { color: #d9a441; font-weight: 700; font-size: 14px; margin: 0 0 14px; }
.member-bio { color: #5d6678; font-size: 14px; line-height: 1.5; margin-top: 12px; }
.member-badge { display: inline-block; background: #dbeafe; color: #0057d8; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-top: 8px; }

.hepa-all-members { max-width: 1200px; margin: 40px auto; padding: 0 20px; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.hepa-member-card { background: #ffffff; border: 1px solid #d9dee8; border-radius: 14px; padding: 24px; box-shadow: 0 8px 22px rgba(11, 33, 74, 0.04); }
.hepa-member-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.hepa-member-avatar { width: 72px !important; height: 72px !important; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; }
.hepa-member-card h3 { color: #0b214a; font-size: 21px; font-weight: 800; margin: 0 0 6px 0; }
.hepa-job { color: #344054; font-size: 15px; margin: 0 0 4px 0; }
.hepa-org { color: #d9a441; font-size: 14px; font-weight: 700; margin: 0; }
.hepa-location { color: #667085; font-size: 14px; margin: 12px 0; }
.hepa-bio { color: #344054; font-size: 15px; line-height: 1.6; min-height: 48px; }
.hepa-badge { display: inline-block; background: #dbeafe; color: #0057d8; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; margin: 8px 0 18px; }
.hepa-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.hepa-view, .hepa-connect { text-align: center; text-decoration: none !important; border-radius: 10px; padding: 11px 18px; font-weight: 800; }
.hepa-view { background: #eef5ff; color: #0b214a !important; }
.hepa-connect { background: #d9a441; color: white !important; }

/* MODALS */
.hepa-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99999; align-items: center; justify-content: center; padding: 24px; }
.hepa-modal.active { display: flex; }
.hepa-modal-box { background: #fff; max-width: 720px; width: 100%; border-radius: 18px; padding: 32px; position: relative; }
.hepa-modal-close { position: absolute; top: 22px; right: 26px; background: none; border: none; font-size: 32px; cursor: pointer; }
.hepa-modal-box h2, .hepa-modal-head h3 { color: #0b214a; }
.hepa-modal-head { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: start; margin: 28px 0; }
.hepa-modal-head img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #f4ead4; }
#modalOrg { color: #d9a441; font-weight: 700; }
.hepa-modal-badge { background: #dbeafe; color: #0057d8; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.hepa-modal-box h4 { color: #344054; font-size: 13px; letter-spacing: .04em; margin-top: 28px; }
.hepa-podcast-box { background: #fff9e8; border: 1px solid #f0cf7a; border-radius: 14px; padding: 18px; }
#modalWebsite { display: inline-block; background: #f8fafc; padding: 14px 24px; border-radius: 10px; color: #344054; text-decoration: none; font-weight: 700; }
.hepa-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.hepa-send, .hepa-connect-btn { text-align: center; padding: 16px; border-radius: 10px; text-decoration: none !important; font-weight: 800; }
.hepa-send { background: #0b214a; color: white !important; }
.hepa-connect-btn { background: #d9a441; color: white !important; }

/* MEDIA QUERIES */
@media (max-width: 900px) { .hepa-directory, .hepa-all-members { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .footer-widget-area, .ast-builder-footer-grid-columns { display: block !important; }
  .footer-widget-area form, .footer-widget-area input, .footer-widget-area button { width: 100% !important; margin-bottom: 10px; }
}
@media (max-width: 600px) { .hepa-directory, .hepa-all-members { grid-template-columns: 1fr; } }


/* =========================================
   FORMULARIO PROFILE BUILDER (PROFILE EDIT)
   ========================================= */

/* 1. GRID BASE */
.wppb-user-forms ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 !important; list-style: none !important; }
.wppb-form-field.wppb-textarea, .wppb-form-field.wppb-heading { grid-column: span 2; }

/* 2. CAMPOS DE TEXTO */
.wppb-form-field input[type="text"], .wppb-form-field input[type="email"], .wppb-form-field input[type="url"],
.wppb-form-field textarea, .wppb-form-field input[type="password"] {
    width: 100%; padding: 12px 16px; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 14px; color: #1E293B;
    background-color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); margin-top: 6px;
}
.wppb-form-field > label { font-size: 13px; font-weight: 600; color: #64748B; text-transform: capitalize; }

/* 3. BOTON GUARDAR */
.wppb-user-forms { display: flex; flex-direction: column; }
.wppb-form-field.wppb-submit { order: -1; align-self: flex-end; margin-bottom: 30px; grid-column: span 2; }
.wppb-user-forms input[type="submit"] {
    background-color: #1a2b4c; color: white; border-radius: 8px; padding: 10px 24px; font-weight: 600; border: none; cursor: pointer; transition: background 0.3s ease;
}
.wppb-user-forms input[type="submit"]:hover { background-color: #274073; }

/* 4. CHECKBOXES PRIVACIDAD */
.wppb-form-field input[type="checkbox"], .wppb-form-field input[type="radio"] {
    appearance: auto !important; -webkit-appearance: checkbox !important; display: inline-block !important; width: 18px !important; height: 18px !important; margin-right: 10px !important; cursor: pointer;
}
.wppb-form-field.wppb-checkbox { margin-top: -20px !important; margin-bottom: 25px; grid-column: span 1; display: flex; align-items: center; }
.wppb-form-field.wppb-checkbox > label:first-child { display: none !important; }
.wppb-form-field.wppb-checkbox ul { margin: 0 !important; }
.wppb-form-field.wppb-checkbox ul li label { display: flex !important; align-items: center; gap: 8px; font-size: 13px; color: #64748B; font-weight: normal; margin-bottom: 0; }

/* 5. TÍTULOS */
.wppb-form-field.wppb-heading { margin-top: 30px; padding-bottom: 10px; border-bottom: 2px solid #F1F5F9; font-size: 16px; font-weight: 700; color: #1a2b4c; text-transform: uppercase; letter-spacing: 0.5px; }

/* =========================================
   6. FOTO DE PERFIL (MÉTODO GUILLOTINA)
   ========================================= */

/* 1. Aislar la fila del Avatar y centrarla */
.wppb-form-field.wppb-avatar {
    grid-column: span 2 !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 40px !important;
}

/* Ocultar la etiqueta principal de texto */
.wppb-form-field.wppb-avatar > label {
    display: none !important;
}

/* 2. LA CAJA FUERTE: Cortamos todo lo que sobre */
.wppb-avatar-data {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    border-radius: 50% !important;
    position: relative !important;
    display: block !important;
    
    /* ESTO CORTA LOS TEXTOS AZULES Y EL JPEG */
    overflow: hidden !important; 
    
    border: 4px solid #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    background-color: #f1f5f9 !important;
    
    /* Intentamos volver transparentes las letras por si acaso */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 3. La Imagen (150x150 exacta dentro de la caja) */
.wppb-avatar-data img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

/* 4. El Botón "Remove" transformado en Cortina Oscura */
.wppb-avatar-data a, 
.wppb-avatar-data a.wppb-remove-avatar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 150px !important;
    height: 150px !important;
    background-color: rgba(0,0,0,0.6) !important;
    z-index: 2 !important;
    
    /* Invisible hasta hacer hover */
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    
    /* Borrar la palabra "Remove" roja original */
    color: transparent !important;
    font-size: 0 !important;
}

/* Activar la cortina al pasar el ratón */
.wppb-avatar-data:hover a, 
.wppb-avatar-data:hover a.wppb-remove-avatar {
    opacity: 1 !important;
}

/* 5. El texto hermoso "Edit or Remove" */
.wppb-avatar-data a::after, 
.wppb-avatar-data a.wppb-remove-avatar::after {
    content: "Edit or \A Remove" !important;
    white-space: pre-wrap !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* --- 1. MENÚ (ESCRITORIO) - SELECTORES ESTRICTOS --- */

/* Forzar Log In de Menú: Texto plano */
.main-header-menu .menu-item.solo-texto-login > a.menu-link {
    all: unset !important;
    display: inline-block !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 15px !important;
    background: transparent !important;
    cursor: pointer !important;
}
/* Sign Up del Menú: Forma de Pastilla Alargada */
.main-header-menu .menu-item.estilo-boton-dorado > a.menu-link {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #D4A854 !important;
    color: #0b214a !important;
    
    /* MODIFICACIONES CLAVE: */
    padding: 6px 20px !important;    /* Más espacio a los lados, menos arriba/abajo */
    border-radius: 20px !important;  /* Menos redondeado para que sea pastilla */
    min-width: 100px !important;     /* Asegura que no se haga un círculo */
    
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: normal !important;
}

/* --- 2. HTML MÓVIL (OFF-CANVAS) - ESTILOS PROPIOS --- */

/* Estilo para el Log In del HTML */
.hepa-login-container a {
    color: #D4A854 !important; /* Color dorado para que se vea */
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Estilo para el Sign Up del HTML */
.hepa-auth-container .boton-dorado-signup {
    background-color: #D4A854 !important;
    color: #0b214a !important;
    padding: 6px 20px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* Ocultar botones de acceso cuando el usuario ya inició sesión */
.logged-in .hepa-login-container,
.logged-in .hepa-auth-container {
    display: none !important;
}

/* ==========================================================
   AVATAR DEL HEADER (Circular y pequeño)
   ========================================================== */
.ast-header-html-2 .user-avatar-img {
    width: 40px !important;       /* Ajusta este valor para el tamaño deseado */
    height: 40px !important;      /* Debe ser igual al width para mantener el círculo */
    border-radius: 50% !important; /* Crea la forma circular */
    object-fit: cover !important;  /* Recorta la imagen para que llene el círculo sin deformarse */
    border: 2px solid #D4A854 !important; /* Borde estético */
    display: block !important;
}

/* Asegurar que el contenedor no deforme la imagen */
.ast-header-html-element .user-avatar-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Contenedor */
.user-avatar-wrapper { position: relative !important; display: inline-block !important; }

/* El enlace que envuelve a la imagen */
.avatar-link { display: block !important; cursor: pointer !important; }

/* Menú oculto */
.dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important; 
    right: 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    padding: 10px 0 !important;
    min-width: 140px !important;
    z-index: 99999 !important;
}

/* Mostrar menú al pasar el mouse (PC) */
.user-avatar-wrapper:hover .dropdown-menu { display: block !important; }

/* Estilo enlaces */
.dropdown-menu a {
    display: block !important;
    color: #0b214a !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.dropdown-menu a:hover { background: #f4f4f4 !important; }

/* En celular, forzamos que sea enlace y no desplegable */
@media (max-width: 900px) {
    .user-avatar-wrapper:hover .dropdown-menu { display: none !important; }
}

/*Perfil*/
/* --- Estructura Grid --- */
.perfil-container { padding: 20px; }

.perfil-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 24px; 
}

/* --- Tarjetas (Cards) --- */
.card { 
    background: #ffffff !important; 
    padding: 24px !important; 
    border-radius: 16px !important; 
    border: 1px solid #e2e8f0 !important; 
    margin-bottom: 20px !important; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
}

/* --- Foto de perfil (Circular y alineada) --- */
.user-avatar-profile { 
    width: 120px !important; 
    height: 120px !important; 
    border-radius: 50% !important; 
    object-fit: cover !important; 
    margin-bottom: 30px !important; 
    display: block !important;
    border: 3px solid #e2e8f0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* --- Títulos (Negros y visibles) --- */
.card h2, 
.card h3 { 
    color: #000000 !important; 
    display: block !important; 
    visibility: visible !important; 
    font-size: 20px !important; 
    margin-bottom: 10px !important;
}

/* --- Etiquetas (Opcional, si las usas) --- */
.tag { 
    background: #f8fafc !important; 
    color: #475569 !important; 
    padding: 6px 14px !important; 
    border-radius: 20px !important; 
    font-size: 13px !important; 
    border: 1px solid #e2e8f0 !important; 
    margin-right: 8px; 
    display: inline-block; 
}

/* --- Responsivo --- */
@media (max-width: 768px) {
    .perfil-grid { grid-template-columns: 1fr; }
}