/* ==========================================
   mexico.css - V3 终极尊贵版 (含紫金点缀 & 全端响应式)
========================================== */

/* ==========================================
   1. 独立落地页导航锁 (Stripped Nav)
========================================== */
header.standalone-header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
}
.minimal-nav a {
    margin: 0 20px !important;
    font-size: 0.9rem !important;
}

/* ==========================================
   2. 内页 Hero
========================================== */
.subpage-hero {
    position: relative;
    padding: 200px 5% 100px;
    /* 核心背景：深紫色半透明遮罩 + 墨西哥背景图 */
    background: linear-gradient(rgba(30, 24, 51, 0.85), rgba(30, 24, 51, 0.6)),
                url('image/mexico-bg.jpg') center/cover no-repeat;
    text-align: center;
    border-bottom: 1px solid var(--gold); /* 底部增加一道极细的香槟金腰线 */
}

.subpage-hero h1 {
    font-size: 3.5rem;
    color: #FFFFFF;
    margin: 20px 0;
    font-weight: 800;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.subpage-hero p {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
}

.subpage-hero .badge {
    background: rgba(193, 155, 84, 0.15);
    color: var(--gold);
    border: 1px solid rgba(193, 155, 84, 0.3);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

/* ==========================================
   3. 核心套餐区 (Core Packages) 
========================================== */
.pricing-section {
    padding: 100px 5%;
    margin: 0 auto;
    /* ✨ 高级点缀：背景左上角透出一丝紫色光晕，右下角透出金色光晕 */
    background: radial-gradient(circle at 10% 10%, rgba(30, 24, 51, 0.03) 0%, transparent 40%),
                radial-gradient(circle at 90% 90%, rgba(193, 155, 84, 0.04) 0%, transparent 40%);
}

.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
    flex-wrap: wrap;
    align-items: stretch;
}

.pricing-card {
    flex: 1;
    min-width: 320px;
    max-width: 540px;
    padding: 70px 50px; 
    position: relative;
    display: flex;
    flex-direction: column;
    
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4); 
    /* ✨ 高级点缀：给普通卡片顶部压一条牛津紫的品牌线 */
    border-top: 4px solid var(--brand-dark);
    box-shadow: 0 10px 30px rgba(30, 24, 51, 0.04); /* 阴影也带入一点紫意 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.premium-card {
    /* ✨ 高级点缀：高级套餐顶部压一条香槟金的品牌线 */
    border-top: 4px solid var(--gold);
    border-left: 1px solid rgba(193, 155, 84, 0.3);
    border-right: 1px solid rgba(193, 155, 84, 0.3);
    border-bottom: 1px solid rgba(193, 155, 84, 0.3);
    box-shadow: 0 20px 50px rgba(193, 155, 84, 0.1); 
    transform: none; 
}

.premium-card:hover {
    box-shadow: 0 30px 60px rgba(193, 155, 84, 0.15);
}

.popular-badge {
    position: absolute;
    top: -16px; /* 适配了加粗的 border-top */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold) 0%, #D4AF6A 100%); /* ✨ 金色渐变显得更立体 */
    color: #fff;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 5px 15px rgba(193, 155, 84, 0.3);
}

/* 价格与头部 */
.card-header-center { text-align: center; width: 100%; }
.pricing-card h3 { font-size: 1.6rem; color: var(--brand-dark); margin-bottom: 8px; }
.target-audience { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 25px; }

.price-tag {
    margin-bottom: 35px;
    color: var(--brand-dark);
    display: flex; align-items: flex-end; justify-content: center; 
}
.price-tag .currency { font-size: 1.4rem; font-weight: 600; transform: translateY(-8px); margin-right: 2px; }
.price-tag .amount { font-size: 3.2rem; font-weight: 800; line-height: 1; }
.price-tag .period { font-size: 1rem; color: var(--text-muted); margin-left: 5px; transform: translateY(-2px); }

/* 列表 */
.feature-list { list-style: none; margin-bottom: 40px; flex-grow: 1; }
.feature-list li { margin-bottom: 16px; font-size: 0.95rem; color: var(--text-main); display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.feature-list li i { font-size: 0.9rem; margin-top: 4px; color: var(--gold); }

.full-width { width: 100%; text-align: center; margin-top: auto; }
.sub-note { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 15px; letter-spacing: 0.5px; }

/* ==========================================
   4. 详细官方注册流程 (Vertical Steps)
========================================== */
.legal-timeline-section {
    padding: 80px 5%;
    max-width: 1000px;
    margin: 0 auto;
}
.timeline-wrapper {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
}
.timeline-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
/* ✨ 高级点缀：把干瘪的数字变成高定质感的紫金徽章 */
.step-num {
    background: var(--brand-dark);
    color: var(--gold);
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(30, 24, 51, 0.15);
    border: 1px solid rgba(193, 155, 84, 0.2);
}
.step-content h4 { font-size: 1.15rem; color: var(--brand-dark); margin-bottom: 10px; font-weight: 700; }
.step-content p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }

/* ==========================================
   5. 细分专业服务区 (Bento Box Dashboard)
========================================== */
.alacarte-section { 
    padding: 80px 5%; 
    max-width: 1200px; 
    margin: 0 auto; 
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(30,24,51,0.01) 100%);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px;
    margin-top: 50px;
    align-items: stretch;
}

.bento-card {
    padding: 40px;
    display: flex;
    flex-direction: column;
    /* ✨ 高级点缀：加入极其轻微的牛津紫玻璃反光 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 246, 252, 0.5) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    border-top: 3px solid var(--brand-dark); /* 顶部紫线，呼应套餐卡片 */
    box-shadow: 0 10px 30px rgba(30, 24, 51, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(30, 24, 51, 0.08);
    border-top-color: var(--gold); /* 悬停时顶部紫线变为金线 */
}

.bento-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(30, 24, 51, 0.06);
}

/* ✨ 高级点缀：给图标加上深紫色的高定底座 */
.bento-header i {
    font-size: 1.2rem;
    color: var(--gold);
    background: var(--brand-dark);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(30, 24, 51, 0.2);
}

.bento-header h3 { font-size: 1.3rem; color: var(--brand-dark); font-weight: 700; }

.bento-list { list-style: none; margin: 0; padding: 0; flex-grow: 1; }
.bento-list li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px dashed rgba(30, 24, 51, 0.1); }
.bento-list li:last-child { border-bottom: none; }

.service-name { font-size: 0.95rem; color: var(--text-main); font-weight: 500; }
.service-price { font-size: 1.1rem; font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.service-price span { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

.addon-item { padding-left: 20px !important; background: rgba(193, 155, 84, 0.03); border-left: 2px solid var(--gold); }
.addon-item .service-name { color: var(--text-muted); font-size: 0.85rem; }
.addon-item .service-name i { font-size: 0.7rem; margin-right: 5px; color: var(--gold); }
.addon-item .service-price { color: var(--gold); }
.bento-list .divider { height: 10px; border-bottom: none; }

.bento-note { margin-top: auto; padding-top: 20px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.bento-note i { color: var(--gold); margin-top: 2px; }

/* ==========================================
   6. 手风琴 FAQ 
========================================== */
.faq-section { padding: 80px 5%; max-width: 900px; margin: 0 auto; }
.accordion { padding: 40px; border-top: 3px solid var(--brand-dark); }
.accordion-item { margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 20px; }
.accordion-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.accordion-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--brand-dark); font-weight: 600; }
.accordion-header::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.9rem; color: var(--gold); transition: transform 0.3s ease; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.accordion-content p { font-size: 1rem; color: var(--text-muted); margin-top: 15px; }

.accordion-item input[type="radio"]:checked + .accordion-header::after { transform: rotate(180deg); color: var(--brand-dark); }
.accordion-item input[type="radio"]:checked ~ .accordion-content { max-height: 300px; }
.accordion-item input[type="radio"] { display: none; }

.mexico-contact { border-top: 1px solid rgba(0,0,0,0.05); }

/* ==========================================
   7. Specific Navbar Adaptation (白底变幻)
========================================== */
#navbar:not(.scrolled) .nav-links a { color: #FFFFFF !important; }
#navbar:not(.scrolled) .dropdown-toggle i { color: rgba(255, 255, 255, 0.85) !important; }
#navbar:not(.scrolled) .logo img { filter: brightness(0) invert(1) !important; opacity: 0.95; }
#navbar:not(.scrolled) .nav-links a:hover { color: var(--gold) !important; }

/* ==========================================
   🚀 8. 全端响应式终极矩阵 (Responsive Grid)
========================================== */

/* 💻 平板端 (Tablet - 992px以下) */
@media(max-width: 992px) {
    /* Timeline 从两列变一列 */
    .timeline-wrapper { grid-template-columns: 1fr; gap: 30px; }
    /* Bento Box 从两列变一列 */
    .bento-grid { grid-template-columns: 1fr; }
    .pricing-grid { gap: 30px; }
}

/* 📱 移动端 (Mobile - 768px以下) */
@media(max-width: 768px) {
    /* Hero 文字缩小，增加左右边距 */
    .subpage-hero { padding: 150px 5% 60px; }
    .subpage-hero h1 { font-size: 2.4rem; }
    .subpage-hero p { font-size: 1rem; }
    
    /* 套餐卡片大幅缩小内部 Padding，让出屏幕空间 */
    .pricing-card { padding: 50px 30px; }
    .price-tag .amount { font-size: 2.8rem; }
    
    /* Bento 缩小 Padding */
    .bento-card { padding: 30px 20px; }
    .bento-header i { width: 38px; height: 38px; font-size: 1rem; }
    .bento-header h3 { font-size: 1.15rem; }
    .service-price { font-size: 1rem; }
    
    /* 模块间距全方位紧凑化 */
    .section-title h2 { font-size: 2rem; }
    .pricing-section, .legal-timeline-section, .alacarte-section, .faq-section { padding: 60px 5%; }
}

/* 📲 超小屏幕端 (Small Mobile / iPhone SE - 480px以下) */
@media(max-width: 480px) {
    .subpage-hero h1 { font-size: 2rem; }
    
    /* 套餐卡片极致压缩 */
    .pricing-card { padding: 40px 20px; border-radius: 15px; }
    .price-tag .amount { font-size: 2.4rem; }
    
    /* Timeline 序号缩小，防止挤压文字 */
    .step-num { width: 45px; height: 45px; font-size: 1.1rem; }
    .step-content h4 { font-size: 1rem; }
    .step-content p { font-size: 0.85rem; }
    
    /* Bento 卡片价格如果太长则允许换行，防止撑爆屏幕 */
    .bento-list li { flex-direction: column; align-items: flex-start; gap: 5px; }
    .service-price { align-self: flex-start; }
    
    /* 附加项缩进减小 */
    .addon-item { padding-left: 10px !important; }
}

@media (max-width: 400px) {
    .btn-primary, .btn-secondary {
        font-size: 0.9rem;
        padding: 10px 15px;
    }
}