/* EL CRACK · Sistema visual 2026 — avatar y simuladores */
:root{--crack-ink:#112235;--crack-navy:#172b49;--crack-blue:#356cdd;--crack-sky:#7ba8ff;--crack-gold:#ffc651;--crack-turquoise:#1fc7cb;--crack-surface:#f6f8ff;--crack-white:#fff;--wine:#172b49;--gold:#ffc651;--accent:#356cdd;--bg:#f6f8ff;--line:#dbe6f4}
html{scroll-behavior:smooth}body{background:var(--crack-surface);color:var(--crack-ink)}
body::selection{background:#b9d6ff}button,a,input,select{transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
button:hover,.btn:hover{filter:brightness(1.05)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffbf4b;outline-offset:3px}
.btn.primary,button.primary,.solid-btn,.cm-btn,.rg-submit button,.rg-back:hover{background:linear-gradient(110deg,#356cdd,#2452af)!important;color:#fff!important;border:0!important;box-shadow:0 12px 27px #2452af31}
.topline,.rg-top{background:#132742!important;color:white!important}.rg-top a,.rg-top small{color:white!important}
.rg-hero{background:radial-gradient(circle at 80% 20%,#396ce0 0,transparent 45%),linear-gradient(120deg,#13243a,#21477c)!important;color:white!important;position:relative;overflow:hidden}
.rg-hero::after{content:'';position:absolute;right:-40px;bottom:-90px;width:350px;height:350px;background:url('avatar_elcrack.jpg') center/cover no-repeat;border-radius:50%;opacity:.23;box-shadow:0 0 0 30px #ffffff12;pointer-events:none}
.rg-hero h1,.rg-hero p,.rg-hero .rg-eyebrow{color:#fff!important}.rg-hero h1 em{color:#ffd46e!important}
.rg-form-area{background:linear-gradient(160deg,#eff5ff,#fff 45%,#ecf6ff)!important}.rg-panel,.rg-aside{border-radius:26px!important;box-shadow:0 18px 60px #18365916!important;border:1px solid #dce9fb!important;background:#fff!important}
.rg-panel-header{background:linear-gradient(110deg,#eaf3ff,#fff)!important;border-radius:20px}.rg-feature b{color:#356cdd!important}.rg-panel input:not([type=checkbox]),.rg-panel select{background:#f8fbff!important;border:1px solid #c8d9f0!important;border-radius:12px!important}.rg-panel input:focus,.rg-panel select:focus{border-color:#356cdd!important;box-shadow:0 0 0 3px #356cdd24!important}
.rg-avatar{background:linear-gradient(120deg,#fbc75e,#fff0bf)!important;color:#162c51!important}.rg-footer{background:#132742!important;color:#e3ecfa!important}
.crack-avatar-badge{display:inline-flex;align-items:center;gap:11px;padding:6px 14px 6px 6px;background:#ffffffef;color:#122947;border:1px solid #d8e9ff;border-radius:999px;box-shadow:0 10px 25px #072c4930;font-weight:800;font-size:13px;letter-spacing:.01em}
.crack-avatar-badge img{width:42px;height:42px;object-fit:cover;object-position:50% 12%;border-radius:50%;border:2px solid #ffc651}
.crack-floating-avatar{position:fixed;right:20px;bottom:20px;z-index:500;display:flex;align-items:center;gap:9px;border-radius:50px;background:#fff;color:#132b4b;padding:6px 15px 6px 6px;box-shadow:0 15px 45px #071e4560;border:2px solid #ffca55;text-decoration:none;font-weight:900;font-size:12px;max-width:230px}
.crack-floating-avatar img{width:49px;height:49px;object-fit:cover;object-position:center top;border-radius:50%}
.crack-floating-avatar:hover{transform:translateY(-3px);text-decoration:none}
.crack-sim-spotlight{background:radial-gradient(circle at 92% 18%,#4b86ff 0,transparent 32%),linear-gradient(120deg,#11253f 0,#254b84 55%,#1e3770 100%);color:#fff;padding:70px 0;overflow:hidden;position:relative}
.crack-sim-spotlight::before{content:'★ ★ ★';position:absolute;right:9%;top:9%;letter-spacing:34px;font-size:32px;color:#ffce6680}
.crack-sim-inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr);align-items:center;gap:36px}
.crack-sim-chip{display:inline-flex;align-items:center;gap:7px;background:#ffc958;color:#172c4e;border-radius:999px;padding:9px 16px;font-weight:900;letter-spacing:.07em;font-size:12px}
.crack-sim-spotlight h2{font-size:clamp(2.1rem,4.6vw,4.4rem);letter-spacing:-.04em;line-height:1.06;margin:23px 0 14px;color:#fff}
.crack-sim-spotlight h2 strong{color:#ffcf61}.crack-sim-spotlight p{color:#dbe9ff;max-width:600px;font-size:1.1rem;line-height:1.7}
.crack-sim-features{display:flex;gap:10px;flex-wrap:wrap;margin:23px 0 31px}.crack-sim-features span{background:#ffffff1c;border:1px solid #ffffff35;border-radius:11px;padding:10px 12px;font-weight:700;font-size:13px}
.crack-sim-cta{display:inline-flex;align-items:center;justify-content:center;background:#ffcb55;color:#172b4b;padding:16px 30px;border-radius:14px;font-weight:900;text-decoration:none;box-shadow:0 16px 34px #07142555}.crack-sim-cta:hover{background:#ffe18b;transform:translateY(-3px)}
.crack-sim-mascot{width:100%;max-width:320px;aspect-ratio:1;object-fit:cover;object-position:center top;border:8px solid #ffffffb9;border-radius:36% 36% 26% 26%;box-shadow:0 22px 80px #061b388c;transform:rotate(4deg);justify-self:center;background:white}
.crack-hero{background:radial-gradient(circle at 80% 50%,#356cd0 0,transparent 48%),linear-gradient(115deg,#102236,#1d3e6b)!important}.crack-hero h1 span{color:#ffc953!important}.crack-tag{color:#ffda7a!important;border-color:#ffce6a!important}
.crack-products{background:#f3f7ff!important}.crack-product-grid article{background:white;border:1px solid #dce5f6;border-radius:20px;box-shadow:0 15px 44px #162b4915}.crack-product-grid article:nth-child(2){background:linear-gradient(135deg,#254eb0,#16356e)!important;color:#fff;transform:translateY(-8px);box-shadow:0 19px 38px #204b9045}.crack-product-grid article:nth-child(2) h3,.crack-product-grid article:nth-child(2) p,.crack-product-grid article:nth-child(2) a{color:#fff!important}.crack-product-grid article:nth-child(2) a{background:#ffc953;color:#182b4d!important;border-radius:10px;padding:10px 15px;display:inline-block}
.navbar .brandmark img{max-width:165px}.section-intro h2 em{color:#356cdd}.process-card.featured{border-color:#5b88e5!important}.course-grid>article:hover{transform:translateY(-4px)}
.cm-head{background:#162c4b!important}.cm-main,.cm-hero{color:#152841}.cm-hero{background:linear-gradient(125deg,#122d52,#3264cb)!important;color:#fff!important}.cm-hero h1,.cm-hero p{color:#fff!important}
.sidebar,.side,.admin-sidebar{background:linear-gradient(180deg,#11243d,#213e70)!important}.sidebar a:hover,.side a:hover{background:#376bdd!important}
.crack-avatar-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#ffcc58;color:#122847;border-radius:16px;font-weight:900;margin:12px 0}.crack-avatar-header img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center top;background:white}
@media(max-width:760px){.crack-sim-spotlight{padding:50px 0}.crack-sim-inner{grid-template-columns:1fr}.crack-sim-mascot{width:210px;justify-self:center}.crack-floating-avatar{right:10px;bottom:10px;font-size:0;padding:5px}.crack-floating-avatar img{width:44px;height:44px}.rg-hero::after{opacity:.13}.crack-product-grid article:nth-child(2){transform:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* EL CRACK - Responsive refinado WebView y móvil */
html{scroll-behavior:smooth}body{overflow-x:hidden}*,*:before,*:after{box-sizing:border-box}img,video{max-width:100%}
.crack-hero-video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
@media(max-width:820px){
 .wrap{width:calc(100% - 32px)!important;max-width:100%!important;margin-inline:auto!important}
 .crack-hero-grid,.crack-sim-inner,.faq-layout,.process-grid,.crack-product-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
 .crack-hero,.crack-sim-spotlight{padding:40px 0!important}
 .crack-copy,.crack-sim-inner>div{min-width:0!important;width:100%!important}
 .crack-copy h1,.crack-sim-inner h2{font-size:clamp(31px,8vw,44px)!important;line-height:1.09!important;letter-spacing:-.035em!important;overflow-wrap:break-word!important}
 .crack-copy p,.crack-sim-inner p{font-size:clamp(14px,3.8vw,17px)!important;line-height:1.65!important;max-width:100%!important}
 .crack-sim-inner{align-items:center!important}.crack-sim-mascot{width:min(240px,70vw)!important;max-height:260px;object-fit:contain;order:-1;justify-self:center!important}
 .crack-highlights,.crack-sim-features,.hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
 .hero-actions>*{min-height:45px}.crack-visual{width:100%!important;transform:none!important;margin:0!important}
 .crack-video-card{width:100%!important;padding:10px!important}.crack-hero-video{max-height:50vh}
 .faq details{min-width:0!important}.faq summary{line-height:1.4!important}
 .navbar{gap:10px!important}.navbar nav{max-width:100vw!important}.brandmark img{max-width:120px!important}
 .section{padding:48px 0!important}.crack-sim-spotlight:before{opacity:.3}
 .rg-hero{padding:28px 20px!important}.rg-hero h1{font-size:clamp(28px,8vw,40px)!important;line-height:1.13!important}
 input,select,textarea{font-size:16px!important;max-width:100%!important}
 .cm-main{padding:16px!important}.cm-grid{grid-template-columns:minmax(0,1fr)!important}
 dialog{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important}
}
@media(max-width:400px){.crack-copy h1,.crack-sim-inner h2{font-size:30px!important}.crack-sim-features span{font-size:12px!important}.crack-floating-avatar{right:8px!important;bottom:8px!important}}
