.support-page { background: #08120d; color: #f1f0e8; }
.support-shell { width: min(1240px, calc(100% - 42px)); margin: 0 auto; padding: clamp(110px, 12vw, 170px) 0 100px; }
.support-hero { display: grid; grid-template-columns: minmax(0, .86fr) minmax(390px, 1.14fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.support-intro { padding-top: 28px; }
.support-intro h1 { max-width: 620px; margin: 0 0 22px; color: #f2f0e8; font: 600 clamp(2.15rem, 4.1vw, 3.8rem)/1.08 var(--sans); letter-spacing: -.045em; }
.support-lead { max-width: 550px; color: #bacabf; font-size: clamp(.93rem, 1.2vw, 1.06rem); line-height: 1.7; }
.support-route { display: grid; gap: 10px; margin-top: 44px; }
.support-route > div { display: flex; gap: 17px; padding: 17px 0; border-top: 1px solid rgba(226, 237, 221, .17); }
.support-route > div > span { min-width: 31px; padding-top: 2px; color: #cba673; font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.support-route p { display: grid; gap: 3px; margin: 0; }
.support-route b { color: #e9eee7; font-size: .92rem; font-weight: 650; }
.support-route small { color: #9daea2; font-size: .78rem; }
.support-privacy { margin: 22px 0 0; color: #91a397; font-size: .75rem; }
.support-chat-area { min-width: 0; }
.support-chat-heading { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; color: #b5c7b9; font-size: .69rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.support-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fcea7; box-shadow: 0 0 0 5px rgba(111, 206, 167, .12); }
.support-chat-host { min-height: 600px; }
.support-page .support-chat-host .chatbot-panel { position: relative; right: auto; bottom: auto; width: 100%; height: 600px; max-height: none; border: 1px solid rgba(213, 232, 218, .28); border-radius: 22px; animation: none; box-shadow: 0 30px 80px rgba(0, 0, 0, .28); }
.support-page .support-chat-host .chatbot-conversacion { min-height: 0; }
.support-page .support-chat-host .chatbot-panel-acciones [data-chatbot-close] { display: none; }
.support-page .support-chat-host .chatbot-panel-footer { flex-wrap: wrap; }
.support-page .asistente-oppenlabs { display: none; }
.support-chat-placeholder, .support-chat-offline { display: grid; align-content: center; justify-items: center; min-height: 600px; padding: 35px; border: 1px solid rgba(213, 232, 218, .22); border-radius: 22px; background: #102019; color: #dce8dc; text-align: center; }
.support-chat-placeholder a, .support-chat-offline a { color: #b7d9bd; }
.support-chat-offline img { width: 112px; margin-bottom: 18px; }
.support-chat-offline h2 { font-size: 1.4rem; }
.support-chat-offline p { max-width: 360px; color: #aebfb2; font-size: .9rem; }
.support-topics { display: grid; grid-template-columns: minmax(0, .86fr) minmax(390px, 1.14fr); gap: clamp(28px, 5vw, 84px); align-items: start; margin-top: 72px; padding-top: 45px; border-top: 1px solid rgba(213, 232, 218, .17); }
.support-topics h2 { max-width: 430px; font: 600 clamp(1.5rem, 2vw, 2rem)/1.2 var(--sans); letter-spacing: -.035em; }
.support-topic-list { display: grid; gap: 9px; }
.support-topic-list a { display: flex; gap: 15px; align-items: center; min-height: 60px; padding: 15px 18px; border: 1px solid rgba(213, 232, 218, .18); border-radius: 11px; background: #122119; color: #ecf0e7; font-size: .88rem; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.support-topic-list a:hover, .support-topic-list a:focus-visible { border-color: #9bbfa3; background: #1a3022; transform: translateY(-2px); }
.support-topic-list a span:first-child { color: #cba673; font-size: .69rem; font-weight: 750; }
.support-topic-list a span:last-child { margin-left: auto; color: #b9cdb9; }
.support-email-card { display: flex; gap: 32px; align-items: end; justify-content: space-between; margin-top: 78px; padding: clamp(28px, 4vw, 46px); border: 1px solid #d6ddcf; border-radius: 18px; background: #eeeee5; color: #25352a; }
.support-email-card .sobrelinea { color: #60765f; }
.support-email-card h2 { margin-bottom: 12px; font: 600 clamp(1.6rem, 2.4vw, 2.35rem)/1.16 var(--sans); letter-spacing: -.035em; }
.support-email-card p:last-child { max-width: 600px; margin: 0; color: #526354; font-size: .88rem; line-height: 1.65; }
.support-email-card a { display: inline-flex; flex: 0 0 auto; gap: 18px; align-items: center; justify-content: space-between; min-height: 52px; padding: 13px 17px; border-radius: 9px; background: #183422; color: #f2f0e9; font-size: .77rem; font-weight: 700; text-decoration: none; }
.support-email-card a:hover, .support-email-card a:focus-visible { background: #2d5339; }
@media (max-width: 880px) { .support-hero, .support-topics { grid-template-columns: 1fr; } .support-intro { padding-top: 0; } .support-route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; } .support-route > div { display: block; } .support-route > div > span { display: block; margin-bottom: 6px; } .support-topics { gap: 12px; } .support-email-card { align-items: start; flex-direction: column; } }
@media (max-width: 600px) { .support-shell { width: calc(100% - 30px); padding: 116px 0 105px; } .support-intro h1 { font-size: clamp(2.05rem, 8.5vw, 2.8rem); } .support-route { grid-template-columns: 1fr; gap: 0; } .support-route > div { display: flex; padding: 13px 0; } .support-route > div > span { margin-bottom: 0; } .support-chat-host, .support-chat-placeholder, .support-chat-offline { min-height: 550px; } .support-page .support-chat-host .chatbot-panel { position: relative; right: auto; bottom: auto; width: 100%; height: min(610px, 72dvh); min-height: 500px; max-height: none; border-radius: 17px; } .support-page .support-chat-host .chatbot-conversacion { min-height: 0; } .support-topics { margin-top: 46px; padding-top: 30px; } .support-email-card { margin-top: 58px; padding: 26px; } .support-email-card a { width: 100%; overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) { .support-topic-list a { transition: none; } }