@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=Prata&display=swap");

/* =========================================
   1. VARIABLES GLOBALES & RESET
   ========================================= */
:root {
    --bg-color: #f7f7f9;
    --card-bg: #ffffff;
    --text-main: #333333;
    --text-muted: #777777;
    --text-light: #777777;
    --border-color: #e0e0e0;
    --border-input: #EDEEEF;
    --active-color: #2b2b2b;
    --dark-header: #333333;
    --btn-dark: #333333;
    --btn-dark-hover: #111111;
    --btn-light: #F7F8F0;
    --btn-light-hover: #e8e9e1;
    --btn-gray: #888888;
    --btn-gray-hover: #666666;
   --font-family: Arial, Helvetica, sans-serif;
   --font-serif: 'Prata', Georgia, serif;
   --font-display: 'Oswald', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; padding-top: 72px; }
main { flex: 1; }
a { color: inherit; }
button { font: inherit; }

.landing-body.menu-open { overflow: hidden; }
.landing-body.lang-en [data-show-lang="es"] { display: none !important; }
.landing-body.lang-es [data-show-lang="en"] { display: none !important; }

.body1 { font-family: var(--font-family); }
.paragraphBook { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; }
.c_gray { color: #8b8b8b; }

.container,
.header-container {
   width: 100%;
   max-width: 1340px;
   margin: 0 auto;
   padding: 28px 16px;
}

.clearfix::after {
   content: "";
   display: table;
   clear: both;
}

.desktop-only { display: none; }
.mobile-only { display: block; }

/* HEADER & FOOTER */
.landing-nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 90; }
.landing-body.menu-open .landing-nav-scrim { opacity: 1; pointer-events: auto; }
.main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); }
.main-header .header-container { display: flex; justify-content: space-between; align-items: center; min-height: 72px; }
.main-header .bar { background-color: #000000; width: 100%; height: 16px; }
.main-header .logo { display: inline-flex; }
.main-header .logo a { display: inline-block; }
.main-header .logo img { display: block; width: 100%; max-width: 121; height: 38px; object-fit: contain; }
.main-header .options { position: relative; flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; }
.landing-nav-scrim, .main-nav, .main-header .search-field, .main-header .ctrl-search, .main-header .crtl-nav { display: none !important; }
.list-selector { position: relative; display: inline-block; font-size: 16px; }
.list-selector:hover { cursor: pointer; }
.list-selector:hover .item-active::after { transform: rotate(135deg); top: 7px; }
.list-selector:hover .item-list { display: block; }
.list-selector.small { font-size: 13px; }
.list-selector.small:hover .item-active::after { top: 5px; }
.list-selector.small .item-active::after { width: 7px; height: 7px; top: 1px; right: 4px; }
.list-selector.small .item-list { top: 25px; }
.list-selector .item-active { position: relative; display: inline-block; padding: 0 20px 10px 10px; margin-right: 15px; }
.list-selector .item-active::after { content: ""; position: absolute; right: 0; top: 2px; width: 10px; height: 10px; border-left: 1px solid #333; border-bottom: 1px solid #333; transform: rotate(-45deg); transition: all 0.25s; }
.list-selector .item-list { display: none; width: 100%; background: #fff; position: absolute; top: 30px; list-style: none; padding: 0; margin: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); z-index: 5; }
.list-selector .item-list a { display: block; padding: 5px 10px; border-top: 1px solid #ccc; text-decoration: none; }
.list-selector .item-list a:hover { color: #fff; background: #009ed6; }
.main-header .language-selector { min-width: 80px; margin-right: 0; }
.main-footer { display: block; margin-top: 40px; padding: 30px 0 40px; font-size: 0; font-weight: 300; background: #fff; }
.main-footer .contact-block { float: left; width: 40%; padding: 0 10px; font-size: 12px; line-height: 1.6em; position: relative; z-index: 1; }
.main-footer .contact-block .clearfix { margin-left: -10px; margin-right: -10px; }
.main-footer .contact-block .logo { display: block; max-width: 128px; margin-bottom: 22px; }
.main-footer .contact-block .logo img { display: block; width: 100%; height: auto; }
.main-footer .contact-block p { margin-bottom: 0; letter-spacing: 1px; }
.main-footer .contact-block b { font-weight: 600; }
.main-footer.type3 .contact-block .col-info-small { float: left; width: 30%; padding: 0 10px; }
.main-footer.type3 .contact-block .col-info-medium { float: left; width: 40%; padding: 0 10px; }
.main-footer.type3 .contact-block { float: none; width: 100%; }
.main-footer.type3 .contact-block > .clearfix { margin-left: 0; margin-right: 0; }
.main-footer.type3 .contact-block > .clearfix > .lg_12.md_12.sm_12.xs_12 { width: 100%; }
.main-footer.type3 .contact-block > .clearfix > .lg_12.md_12.sm_12.xs_12 > .clearfix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
.main-footer.type3 .contact-block .col-info-small, .main-footer.type3 .contact-block .col-info-medium { float: none; width: auto; padding: 0 10px; }
.main-footer.type3 .contact-block .col-info-medium .small { letter-spacing: 0; }
.main-footer.type3 .contact-block .logo.inline-block { display: inline-block; vertical-align: bottom; margin: 0; width: 50px; max-width: none; }
.main-footer.type3 .contact-block .inline-block { display: inline-block; vertical-align: bottom; margin-bottom: -3px; margin-left: 5px; }
.main-footer.type3 .contact-block > .clearfix > .lg_12.mt20 { display: flex; align-items: flex-end; width: auto; margin-top: 20px; padding: 0 10px; }

/* =========================================
   3. HERO SECTIONS
   ========================================= */
.hero-light { padding: 60px 5% 20px; max-width: 1340px; margin: 0 auto; text-align: left; background-color: var(--bg-color); border-bottom: 1px solid transparent; }
.hero-light h1 { font-family: var(--font-serif); font-weight: 300; font-size: 2.5rem; color: #111; margin-bottom: 10px; }
.hero-light h1 strong { font-weight: 700; color: #111; }
.hero-light p { color: var(--text-muted); font-size: 1rem; max-width: 800px; }

.hero-dark { background-color: var(--dark-header); color: #ffffff; padding: 40px 5%; text-align: left; margin-bottom: 30px; }
.hero-dark-inner { max-width: 1340px; margin: 0 auto; }
.hero-dark h1 { font-family: var(--font-serif); font-weight: 300; font-size: 2.5rem; margin-bottom: 10px; color: #ffffff; }
.hero-dark p { color: #cccccc; font-size: 0.95rem; }

/* =========================================
   4. LAYOUTS Y CARDS GENERALES
   ========================================= */
.main-content-form, .main-content-center, .main-content-prefs { padding: 60px 5%; max-width: 1340px; margin: 0 auto; width: 100%; }

.card-form, .card-prefs {
    background: var(--card-bg); border-radius: 16px; padding: 60px 40px; box-shadow: 0px 4px 6.5px rgba(0,0,0,0.25); width: 100%; margin: 0 auto;
}

.card-center-small, .card-center-large {
    background: var(--card-bg); border-radius: 12px; padding: 60px 40px; box-shadow: 0px 4px 10px rgba(0,0,0,0.08);
    width: 100%; max-width: 1306px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px;
}

.title-group { display: flex; flex-direction: column; align-items: center; }

/* =========================================
   5. BOTONES Y ACCIONES GENERALES
   ========================================= */
.btn, .btn-submit, .btn-prev {
    height: 48px; padding: 13px 24px; font-size: 18px; font-weight: 500; line-height: 22px; border-radius: 0px; cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: none;
}
.btn-primary, .btn-submit, .btn-drawer-primary { background-color: var(--btn-dark); color: #fff; }
.btn-primary:hover, .btn-submit:hover, .btn-drawer-primary:hover { background-color: var(--btn-dark-hover); }
.btn-secondary, .btn-prev, .btn-drawer-secondary { background-color: var(--btn-light); color: var(--text-main); }
.btn-secondary:hover, .btn-prev:hover, .btn-drawer-secondary:hover { background-color: var(--btn-light-hover); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-add { background: none; border: none; color: var(--text-main); font-weight: 600; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; box-shadow: none; height: 38px; padding: 0 12px; gap: 6px; }
.btn-add:hover { opacity: 0.7; }
.btn-add:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-add svg { width: 16px; height: 16px; }

.form-actions-row { display: flex; flex-direction: row; justify-content: flex-end; gap: 24px; width: 100%; max-width: 1226px; margin-top: 40px; }
.form-actions-row.space-between { justify-content: space-between; }
.form-actions { display: flex; justify-content: flex-end; width: 100%; margin-top: 20px; }

/* =========================================
   6. CHECKBOXES GLOBALES Y MODALES
   ========================================= */
input[type="checkbox"] { display: none !important; }
.checkbox-row, .select-all-label, .drawer-item-label, .mobile-list-item { cursor: pointer; }
.checkbox-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.custom-check { 
    width: 22px; height: 22px; border: 2px solid var(--text-main); border-radius: 6px; 
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; transition: background-color 0.2s; 
}
input[type="checkbox"]:checked + .custom-check, input[type="checkbox"]:checked ~ .custom-check { background: var(--text-main); }
input[type="checkbox"]:checked + .custom-check::after, input[type="checkbox"]:checked ~ .custom-check::after { content: ""; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; border-radius: 2px; transform: rotate(45deg); margin-bottom: 4px; }
.checkbox-row.error .custom-check { border-color: red; }

.select-all-check { 
    width: 18px; height: 18px; border: 2px solid #333; border-radius: 4px; display: inline-flex; justify-content: center; align-items: center; transition: background-color 0.2s;
}
input[type="checkbox"]:checked + .select-all-check, input[type="checkbox"]:checked ~ .select-all-check { background: #333; }
input[type="checkbox"]:checked + .select-all-check::after, input[type="checkbox"]:checked ~ .select-all-check::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.25s ease; }
.modal-overlay.is-active { opacity: 1; visibility: visible; }
.modal-box-terms { background: #fff; width: 90%; max-width: 750px; max-height: 85vh; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 32px; }
.modal-header h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.modal-body { overflow-y: auto; margin: 20px 0; font-size: 14px; line-height: 1.6; color: #666; padding-right: 10px; }
.modal-footer { text-align: right; }

.modal-box-unsub { background: #FFFFFF; border-radius: 8px; padding: 40px; width: 100%; max-width: 798px; box-shadow: 0px 4px 6.5px rgba(0, 0, 0, 0.25); text-align: center; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 40px; }
.modal-icon-check-dark { width: 54px; height: 54px; background: #2B2B2B; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
.modal-main-title { font-size: 18px; line-height: 22px; font-weight: 700; color: #333333; }

/* =========================================
   7. ESTILOS EXCLUSIVOS: BAJA
   ========================================= */
.card-center-small h2, .card-center-large h2 { font-family: 'Benton Sans BBVA', var(--font-family); font-size: 33px; line-height: 40px; color: #333333; font-weight: 700; margin-bottom: 0px; }
.subtitle { font-size: 22px; line-height: 26px; color: #666666; font-weight: 350; margin-top: 16px; }

.will-stop-receiving-title { font-size: 24px; line-height: 28px; font-weight: 700; color: #2B2B2B; }
.icon-prohibited-wrapper { width: 70px; height: 70px; background: rgba(187, 187, 187, 0.3); border: 2px solid #BBBBBB; display: flex; justify-content: center; align-items: center; border-radius: 4px; }
.unsubscribe-items-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; width: 100%; max-width: 572px; }
.unsubscribe-item { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 266px; font-size: 22px; line-height: 26px; font-weight: 350; color: #2B2B2B; text-align: left; }
.unsubscribe-item svg { color: #2B2B2B; flex-shrink: 0; }

.baja-reasons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; width: 100%; max-width: 572px; }
.baja-reasons .item-card {
    width: 266px; height: 101px; background: #FFFFFF; border: 1px solid #7F7F7F; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px 8px;
    font-size: 18px; line-height: 22px; font-weight: 350; color: #333333; text-align: center; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.baja-reasons .item-card.full-width { width: 572px; }
.baja-reasons .item-card.selected { background: #f0f0f0; border-color: #333; }

.reason-textarea {
    width: 100%; min-height: 120px; padding: 12px 16px; border: 2px solid var(--border-input); border-radius: 8px;
    font-size: 16px; outline: none; background-color: #fff; font-family: var(--font-family); transition: border-color 0.2s; resize: vertical;
}
.reason-textarea:focus { border-color: #333; }


/* =========================================
   8. ESTILOS EXCLUSIVOS: ALTA Y PREFS
   ========================================= */
.form-header { text-align: left; margin-bottom: 40px; }
.form-header h2 { font-size: 28px; color: #333; margin-bottom: 8px; font-weight: 700; }
.form-header p { font-size: 18px; color: #666; font-weight: 350; }

.prefs-section { margin-bottom: 40px; text-align: left; }
.prefs-section h3 { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 16px; }
.activities-box { background: #FAFAFA; border: 1px solid #E8ECEF; border-radius: 8px; padding: 24px; margin-top: 16px; position: relative; }
.activities-box h4 { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 16px; }

.data-form { display: grid; grid-template-columns: 1fr; gap: 25px 30px; margin-bottom: 40px; text-align: left; }
.form-group { display: flex; flex-direction: column; width: 100%; }
.form-group label { font-weight: 700; font-size: 16px; margin-bottom: 8px; color: var(--text-main); }
.form-group label span { font-weight: 700; }
.form-group input:not([type="checkbox"]), .form-group select { padding: 12px 16px; border: 2px solid var(--border-input); border-radius: 8px; font-size: 16px; outline: none; background-color: #fff; font-family: var(--font-family); transition: border-color 0.2s; height: 48px; }
.form-group input:focus, .form-group select:focus { border-color: #333; }
.form-group select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; }
.form-group select:disabled { background-color: #f7f7f9; opacity: 0.8; cursor: not-allowed; }
.select-wrapper { position: relative; display: flex; flex-direction: column; }
.select-wrapper::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 8px; height: 8px; border-right: 2px solid #666; border-bottom: 2px solid #666; transform: rotate(45deg); pointer-events: none; }

.stepper-registration, .stepper-preferences { display: flex; align-items: center; justify-content: space-between; max-width: 800px; margin: 0 auto 50px; position: relative; }
.stepper-registration::before, .stepper-preferences::before { content: ''; position: absolute; top: 27px; left: 80px; right: 80px; height: 2px; background: #EDEEEF; z-index: 0; }
.reg-step-line, .pref-step-line-progress { position: absolute; top: 25px; left: 80px; height: 6px; background: #2b2b2b; z-index: 1; transition: width 0.3s; }
.reg-step-line.step-1, .pref-step-line-progress[style*="0%"] { width: 0% !important; }
.reg-step-line.step-2, .pref-step-line-progress[style*="50%"] { width: calc(50% - 80px); }
.reg-step-line.step-3, .pref-step-line-progress[style*="100%"] { width: calc(100% - 160px); }

.reg-step, .pref-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; width: 160px; }
.reg-step-wrapper { display: flex; justify-content: center; align-items: center; background-color: white; width: 62px;}
.reg-step-box, .pref-step-number { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background: #f7f8f0; color: var(--text-muted); font-weight: 700; font-size: 18px; margin-bottom: 16px; box-shadow: 0 4px 4px rgba(0,0,0,0.15); border-radius: 0px; }
.reg-step.active .reg-step-box, .pref-step.active .pref-step-number { background: var(--active-color); border-color: var(--active-color); color: #fff; }
.reg-step.completed .reg-step-box, .pref-step.completed .pref-step-number { background: #f7f8f0; border: 2px solid; border-color: var(--active-color); color: var(--active-color); }
.reg-step-text, .pref-step-label { font-size: 18px; color: var(--text-muted); font-weight: 350; white-space: nowrap; text-align: center; }

.interests-layout-split, .summary-layout-split { display: flex; gap: 40px; text-align: left; margin-bottom: 40px; }
.interests-left { flex: 0 0 35%; display: flex; flex-direction: column; gap: 24px; }
.interests-right { flex: 1; background: #FFFFFF; border: 1px solid #E8ECEF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.04); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; }

.areas-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.areas-header h3 { font-size: 32px; font-weight: 800; color: #333; margin-bottom: 0; line-height: 1.2; }
.areas-header p { font-size: 14px; color: #666; margin-bottom: 16px; }
.select-all-label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #001F65; font-weight: 400; cursor: pointer; }

#items { display: flex; flex-direction: column; gap: 16px; }
#items .item-card, .prefs-section .item-card { display: flex; flex-direction: row; align-items: center; padding: 14px 16px; gap: 16px; background: #FFFFFF; border: 1px solid #e0e0e0; border-radius: 8px; transition: all 0.2s; cursor: pointer; }
#items .item-card.selected, .prefs-section .item-card.selected { background: #EDEEEF; border: 2px solid #333; padding: 13px 15px; }
#items .item-card .custom-check, .prefs-section .item-card .custom-check { margin-right: 0; }
#items .item-card input:checked ~ .custom-check, .prefs-section .item-card input:checked ~ .custom-check { background: #333; }
#items .item-icon, .prefs-section .item-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
#items .item-title, .prefs-section .item-title { flex: 1; font-size: 18px; line-height: 106%; font-weight: 500; color: #333; }
#items .item-arrow, .prefs-section .item-arrow { font-size: 24px; line-height: 100%; color: #94A3B8; font-family: monospace; font-weight: bold; }

.details-panel-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; min-height: 400px; }
.empty-state-icon { width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; background: transparent; }
.empty-state-icon svg { width: 80px; height: 80px; color: #333; }
.details-panel-empty h4 { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 16px; }
.details-panel-empty p { font-size: 15px; color: #666; max-width: 420px; line-height: 1.5; margin-bottom: 24px; }
.empty-state-arrow { margin-top: 20px; color: #BCCAD6; }

.details-header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.details-header h4 { font-size: 16px; font-weight: 700; color: #333; margin: 0; }
.details-select-all { margin-bottom: 16px; }

.sub-card {
   display: flex;
   flex-direction: row;
   padding: 14px 16px;
   gap: 16px;
   background: #FFFFFF;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   margin-bottom: 12px;
   transition: all 0.2s;
   cursor: pointer;
}
.sub-card.selected { background: #EDEEEF; border: 1px solid #333; }
.sub-card.selected .custom-check { background: #333; }
.sub-card-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sub-card-title { font-size: 16px; font-weight: 500; color: #333; display: flex; }
.sub-card-desc { font-size: 14px; color: #666; font-weight: 400; line-height: 1.4; }

.details-footer { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 12px; background: rgba(178, 178, 178, 0.2); border-radius: 12px; padding: 16px; }
.details-footer svg { width: 20px; height: 20px; color: #333; }
.details-footer-text { font-size: 13px; font-weight: 500; color: #333; }

.newsletters-section { margin-top: 40px; text-align: left; }
.newsletters-section h3 { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 16px; }
.newsletters-grid, .newsletters-container { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.nl-card { flex: 1; min-width: 300px; padding: 24px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 4px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; position: relative; }
.nl-card.highlight { 
    background: #EDEEEF; 
    border: 2px solid #2B2B2B; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    padding: 23px; 
}
.nl-card h4 { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 4px; padding-right: 24px; }
.nl-card p { font-size: 14px; font-weight: 350; color: #333; margin: 0; }
.nl-summary-card { padding: 16px; background: #fff; border: 1px solid #2B2B2B; border-radius: 8px; margin-bottom: 12px; width: 100%; max-width: 400px; position: relative; }
.nl-summary-card h5 { font-size: 16px; font-weight: 700; margin: 0 0 4px 0; color: #333; padding-right: 24px; }
.nl-summary-card p { font-size: 14px; font-weight: 350; margin: 0; color: #666; }
.nl-card .close-newsletter, .nl-summary-card .close-newsletter { position: absolute; top: 12px; right: 12px; cursor: pointer; color: #666; }
.nl-card .close-newsletter:hover, .nl-summary-card .close-newsletter:hover { color: #111; }

.summary-left { flex: 0 0 45%; background: #fff; box-shadow: 0px 4px 10px rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.summary-right { 
    flex: 1; 
    background: #ffffff; 
    border: 1px solid #E8ECEF; 
    border-radius: 16px; 
    padding: 32px; 
}
.summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid #EDEEEF; padding-bottom: 16px; }
.summary-header h3 { font-size: 22px; font-weight: 700; margin: 0; color: #333; }
.edit-link { font-size: 16px; color: #2B2B2B; font-weight: 600; text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.data-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.data-label { font-size: 16px; font-weight: 700; color: #333; }
.data-value { font-size: 16px; font-weight: 350; color: #666; text-align: right; }
.summary-right h4 { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 16px; }

/* CHIPS Y FILTRADO PASO 3 Y PASO 1 */
.chips-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #2B2B2B; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: #333; height: auto; white-space: normal; text-align: left; }
.chip.sub-chip { border: 0.5px solid #2B2B2B; }
.chip.summary-area-chip { cursor: pointer; transition: all 0.2s ease; }
.chip.summary-area-chip:hover { background-color: #f5f5f5; }
.chip.summary-area-active { background-color: #EDEEEF !important; border: 2px solid #333 !important; padding: 7px 11px !important; }

/* Contenedor Grid para apilar los grupos de actividades */
.activities-grid-container { display: grid; grid-template-columns: 1fr; align-items: start; }
.area-activities-group { grid-row: 1; grid-column: 1; transition: opacity 0.2s ease; opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; }
.area-activities-group.active-group { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }

.terms-section { margin-top: 0; display: flex; justify-content: center; }
.terms-section .checkbox-row { background: #f9f9f9; padding: 16px 24px; border-radius: 8px; display: inline-flex; }


/* =========================================
   MENÚ DRAWER LATERAL (AJUSTADO A FIGMA)
   ========================================= */
.side-menu { position: fixed; top: 0; right: 0; width: 420px; max-width: 100%; height: 100%; background: #FAFAFA; z-index: 1000; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25); }
.side-menu.is-open { transform: translateX(0); }
.side-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 999; display: none; }
.side-menu-overlay.is-open { display: block; }

.drawer-header { padding: 24px 24px 16px; border-bottom: 1px solid #e2e2e2; display: flex; justify-content: space-between; align-items: flex-start; position: relative; background: #FAFAFA; }
.drawer-header h3 { font-size: 22px; font-weight: 700; color: #333; margin: 0; line-height: 26px; }
.drawer-desc { font-size: 14px; font-weight: 350; color: #666; margin: 4px 0 0 0; line-height: 17px; }

/* Botón cerrar como Figma */
.btn-close { background: none; border: 1.67px solid #666; border-radius: 50%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; color: #666; flex-shrink: 0; margin-left: 16px; margin-top: 2px; }

.drawer-content { padding: 16px 24px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: #FAFAFA; }
.drawer-search { width: 100%; padding: 10px 16px; border: 2px solid #EDEEEF; border-radius: 10px; font-size: 16px; font-weight: 350; color: #2B2B2B; height: 46px; }

/* Caja de contexto para reemplazar la busqueda en subareas */
.drawer-area-context-box { display: flex; align-items: center; background: #EDEEEF; border: 2px solid #E2E2E2; border-radius: 10px; padding: 10px 16px; font-size: 16px; font-weight: 600; color: #333; height: 46px; }

.drawer-selection-summary { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.selected-count { font-size: 12px; font-weight: 700; color: #2b2b2b; letter-spacing: 0.3px; text-transform: uppercase; line-height: 18px; }

/* Chips en el drawer (Tipo Píldora redondeada) - Corrección a altura dinámica para que no pisen en caso de línea doble */
.drawer-selection-summary .chips-container { gap: 8px; margin-top: 0; }
.drawer-selection-summary .chip { border-radius: 10px; padding: 4px 12px; font-size: 12px; font-weight: 350; color: #333; background: #EDEEEF; border: 1px solid #2B2B2B; gap: 6px; height: auto; min-height: 24px; display: inline-flex; align-items: center; }
.drawer-selection-summary .chip .close { width: 12px; height: 12px; opacity: 0.7; margin-left: 2px; }

/* Envoltorio de Seleccionar todas las áreas */
.drawer-select-all-wrap { padding: 12px 0; border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; font-weight: 500; color: #333; margin-top: 0; border-radius: 0; background: transparent !important; }
.drawer-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }

/* List items sin borde ni fondo (Limpios tipo Figma) */
.drawer-item-label { display: flex; align-items: center; gap: 12px; padding: 12px 0; border: none !important; border-radius: 0; cursor: pointer; transition: all 0.2s; background: transparent !important; height: auto; min-height: 46px; }
.drawer-item-label:has(input:checked) { background: transparent !important; border: none !important; }
.drawer-item-label:has(input:checked) .drawer-item-text { font-weight: 700; }
.drawer-item-text { font-size: 15px; font-weight: 400; color: #333; flex: 1; line-height: 21px; }

.drawer-footer { padding: 20px 24px; border-top: 1px solid #e2e2e2; display: flex; flex-direction: column; gap: 12px; background: #FAFAFA; }
.btn-drawer-primary { width: 100%; height: 52px; background: #7F7F7F; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 500; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn-drawer-primary:hover { background: #666; }
.btn-drawer-secondary { width: 100%; height: 39px; background: transparent; color: #2B2B2B; font-weight: 500; font-size: 15px; border: none; box-shadow: none; }
.btn-drawer-secondary:hover { background: #f0f0f0; }

.mobile-areas-list { display: flex; flex-direction: column; gap: 12px; }
.mobile-list-item { display: flex; align-items: center; padding: 16px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.mobile-list-item:has(input:checked) { background: #EDEEEF; border-color: #333; }
.mobile-item-content { flex: 1; margin-left: 12px; display: flex; flex-direction: column; gap: 4px; }
.mobile-item-content .item-text { font-size: 16px; font-weight: 600; color: #333; }
.mobile-item-meta { font-size: 13px; color: #666; }
.mobile-arrow-button { background: none; border: none; font-size: 24px; color: #94A3B8; cursor: pointer; padding: 0 8px; font-family: monospace; }

.chips-container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chips-container.small-chips { gap: 8px; }
.unsubscribe-link-box { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 32px; font-size: 15px; color: #666; }
.unsubscribe-link-box a { color: #666; font-weight: 600; text-decoration: underline; }
.icon-shield { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }

/* =========================================
   11. ESTILOS EXCLUSIVOS: STATUS (Confirmacion, Error, Fin Alta)
   ========================================= */
.status-desc { font-size: 22px; line-height: 26px; color: #666; font-weight: 350; text-align: center; max-width: 970px; margin-bottom: 24px; }

.features-section { width: 100%; max-width: 1306px; margin: 60px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.features-title { font-family: 'Benton Sans BBVA', var(--font-family); font-size: 33px; line-height: 40px; font-weight: 700; color: #2B2B2B; margin-bottom: 40px; text-align: center; }
.features-grid { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%; }
.feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; max-width: 268px; background: transparent; padding: 0; }
.feature-icon { width: 87px; height: 87px; background: transparent; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; border: none; }
.feature-icon svg { width: 32px; height: 32px; color: #2B2B2B; }
.feature-title { font-family: 'Benton Sans BBVA', var(--font-family); font-size: 22px; line-height: 26px; font-weight: 700; color: #2B2B2B; margin-bottom: 8px; }
.feature-desc { font-family: Arial, var(--font-family); font-size: 16px; line-height: 18px; color: #666666; font-weight: 400; }

.email-icon { position: relative; display: inline-flex; justify-content: center; align-items: center; margin: 30px 0; }
.email-icon svg { width: 87px; height: 87px; color: #2B2B2B; }
.email-badge { position: absolute; top: -5px; right: -5px; background: #B2B2B2; color: #666; border-radius: 20px; padding: 4px 8px; font-size: 16px; font-weight: 400; line-height: 1; }
.email-badge-error { position: absolute; top: -5px; right: -5px; background: #BBBBBB; border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; }

.spam-notice { font-size: 20px; color: #666; text-align: center; max-width: 600px; margin-top: 20px; }
.card-center-large hr { width: 80%; border: none; border-top: 1px solid #666; margin: 0 auto; opacity: 0.5; }

/* =========================================
   12. MEDIA QUERIES GLOBALES
   ========================================= */
@media (min-width: 768px) {
    .data-form { grid-template-columns: repeat(2, 1fr); }
    .desktop-only { display: block; } .mobile-only { display: none; } 
}
@media (min-width: 1024px) {
    .data-form { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
   .main-content-form, .main-content-center, .main-content-prefs { padding: 32px 24px }
   .card-form { padding: 40px 24px; }
}
@media (max-width: 767px) {
   body { padding-top: 58px; }
   .main-header .header-container { min-height: 58px; }
   .main-header .logo img { max-width: 121px; height: 38px; }
   .main-header .options { flex-basis: 75px; }
   .main-header .language-selector { display: inline-block; }
   .main-header .search-field { right: 30px; left: 16px; padding-right: 0; }
   .main-header .search-field.show { min-width: auto; width: calc(100vw - 110px); }
   .main-header .search-field .form-ctrl { min-width: 0; width: 100%; }
   .main-header .ctrl-search { margin-right: 12px; }
   .main-nav { max-width: 100%; }
   .main-content-form, .main-content-center, .main-content-prefs { padding: 24px 16px }

   
   /* Footer Mobile Fixes */
   .main-footer { padding: 24px 0 32px; }
   .main-footer .contact-block, .main-footer .nav-block, .main-footer .social-block { float: none; width: 100%; min-width: 0; padding: 0; margin: 0; text-align: center; }
   .main-footer.type3 .contact-block > .clearfix > .lg_12.md_12.sm_12.xs_12 > .clearfix { display: block; }
   .main-footer .contact-block .logo { max-width: 160px; margin: 0 auto 16px auto; display: block; }
   .main-footer .contact-block .col-info-small, .main-footer .contact-block .col-info-medium { float: none; width: 100%; padding: 0; font-size: 14px; line-height: 20px; margin-bottom: 24px; text-align: center; }
   .main-footer .contact-block p > a { font-size: 14px; }
   .main-footer.type3 .nav-block .nav-footer { width: 100%; margin-top: 8px; }
   .main-footer.type3 .nav-block .nav-footer li, .main-footer.type3 .nav-block .nav-footer li:nth-child(2n) { width: 100%; padding: 0; font-size: 15px; margin-bottom: 12px; }
   .main-footer .social-block { margin-top: 16px; }
   .main-footer .social-block .social { margin-top: 12px; justify-content: center; }
   .main-footer .social-block .social li + li { margin-left: 16px; }
   .main-footer.type3 .contact-block > .clearfix > .lg_12.mt20 { justify-content: center; align-items: center; }
   
   .card-form, .card-center-large, .card-prefs { padding: 25px 5%; }
   
   .stepper-registration, .stepper-preferences { max-width: 100%; }
   .reg-step-text, .pref-step-label { font-size: 12px; }
   .reg-step-box, .pref-step-number { width: 40px; height: 40px; font-size: 14px; }
   
   /* Centrado dinámico para móviles */
   .stepper-registration::before, .stepper-preferences::before { left: 10% !important; right: 10% !important; }
   .reg-step-line, .pref-step-line-progress { left: 10% !important; }
   .reg-step-line.step-2, .pref-step-line-progress[style*="50%"] { width: 40% !important; }
   .reg-step-line.step-3, .pref-step-line-progress[style*="100%"] { width: 80% !important; }
   
   .interests-layout-split, .summary-layout-split { flex-direction: column; gap: 20px; }
   .interests-left, .summary-left { width: 100%; flex: auto; }
   .newsletters-grid, .newsletters-container { grid-template-columns: 1fr; }
   /* .data-row { flex-direction: column; align-items: flex-start; gap: 4px; } */
   
   .features-grid { flex-direction: column; align-items: center; gap: 40px; }
   
   /* DRAWER EN MÓVIL: Ocupa toda la pantalla y entra desde abajo */
   .side-menu {
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       transform: translateY(100%);
   }
   .side-menu.is-open {
       transform: translateY(0);
   }
}

/* =========================================
   13. OTROS ESTILOS
   ========================================= */
.divider { height: 1px; width: 100%; background-color: #666666; }

/* =========================================
   14. ESTILOS EXCLUSIVOS: ERROR 500
   ========================================= */

.error-search-box {
   display: flex;
   gap: 10px;
   width: 100%;
   max-width: 580px;
   margin: 20px 0 10px;
}
.error-search-input {
   flex: 1;
   height: 48px;
   padding: 12px 16px;
   border: 2px solid var(--border-input);
   border-radius: 4px;
   font-size: 16px;
   outline: none;
}
.error-search-input:focus {
   border-color: #333;
}
.actions-group {
   display: flex;
   gap: 16px;
   margin-top: 10px;
   flex-wrap: wrap;
   justify-content: center;
}
.summary-activities-wrapper {
    background-color: #F7F7F9; /* Gris visible (mismo del fondo de la página) */
    border: 1px solid #E8ECEF;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    margin-bottom: 32px;
}
.summary-layout-split {
    margin-bottom: 16px; /* Cambia de 40px a 16px */
}