@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root,[data-theme="light"]{
  --bg-main:#fff;--acc-cyan:#000;--acc-blue:#000;--text-primary:#000;--text-secondary:#535353;
  --glass-bg:#fff;--glass-border:#e5e5e5;--header-bg:rgba(255,255,255,.96);--footer-bg:#fff;
  --input-bg:#fff;--input-border:#ccc;--select-option-bg:#fff;
  --as-soft:#f7f7f7;--as-line:#e5e5e5;--as-muted:#535353;--as-black:#000;
}
*{box-sizing:border-box}
html{background:#fff}
body{margin:0;background:#fff!important;background-image:none!important;color:#000;font-family:"Inter","SamsungOne",Arial,sans-serif}
#particle-canvas,.hero-glow,#theme-toggle{display:none!important}
header{height:64px;padding:0 clamp(20px,5vw,80px);max-width:none;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--as-line)!important;box-shadow:none!important;backdrop-filter:blur(16px);position:fixed;top:0;left:0;right:0;display:flex;align-items:center;z-index:999}
header .logo-group{gap:10px}
header .logo-group img{width:auto!important;height:36px!important;animation:none!important;filter:none!important;border-radius:0!important}
header .logo-group h1{font-family:Inter,Arial,sans-serif!important;font-size:1.05rem!important;font-weight:800!important;letter-spacing:-.03em!important;color:#000!important;background:none!important;-webkit-text-fill-color:#000!important}
header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;align-items:center}
header nav a{color:#000!important;font-size:.9rem!important;font-weight:500!important;padding:22px 16px!important;text-decoration:none}
header nav a:after{display:none!important}
header nav a:hover{color:#535353!important}
.header-actions{margin-left:auto}
.nav-toggle span{background:#000!important}
.header-contact{display:inline-flex!important;align-items:center;justify-content:center;background:#000;color:#fff!important;border-radius:999px;padding:10px 20px!important;font-weight:600!important;margin-left:8px}
.header-store{font-weight:600!important}

.hero{min-height:620px!important;padding:150px clamp(20px,5vw,80px) 90px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;background:linear-gradient(135deg,#f7f7f7 0%,#fff 65%)!important;border-bottom:1px solid var(--as-line);max-width:none!important}
.hero:before{content:"SERVICIO TÉCNICO · MELILLA";font-size:.75rem;font-weight:700;letter-spacing:.16em;color:#535353;margin-bottom:22px}
.hero h2{max-width:980px!important;margin:0!important;color:#000!important;text-shadow:none!important;font-family:Inter,Arial,sans-serif!important;font-size:clamp(3rem,7vw,6.4rem)!important;line-height:.98!important;letter-spacing:-.055em!important;font-weight:800!important;animation:none!important}
.hero h2 #typewriter-target{color:#000!important}
#typewriter-cursor{background:#000!important}
.hero p{max-width:720px!important;margin:30px 0 0!important;color:#535353!important;font-size:clamp(1rem,1.5vw,1.2rem)!important;line-height:1.7!important;animation:none!important}
.hero p a{color:#000!important;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.as-btn,.as-btn-outline{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 28px;font-size:.95rem;font-weight:600;text-decoration:none;transition:.25s}
.as-btn{background:#000;color:#fff!important;border:1px solid #000}
.as-btn:hover{transform:translateY(-2px);background:#222}
.as-btn-outline{background:#fff;color:#000!important;border:1px solid #000}
.as-btn-outline:hover{background:#f7f7f7}

.services,.recent-blog-section{background:#fff!important;padding:90px clamp(20px,5vw,80px)!important;max-width:1440px!important;margin:0 auto!important}
.services>h2,.recent-blog-header h2{font-family:Inter,Arial,sans-serif!important;color:#000!important;font-size:clamp(2rem,4vw,3.2rem)!important;letter-spacing:-.04em!important;font-weight:800!important;text-align:left!important}
.service-container{gap:20px!important}
.service,.avantfix-card,.blog-card,.recent-blog-card{background:#fff!important;border:1px solid #e5e5e5!important;border-radius:24px!important;box-shadow:none!important;color:#000!important;transition:transform .25s,border-color .25s,box-shadow .25s!important}
.service:hover,.avantfix-card:hover,.blog-card:hover,.recent-blog-card:hover{transform:translateY(-4px)!important;border-color:#bbb!important;box-shadow:0 14px 35px rgba(0,0,0,.06)!important}
.service-header h3,.avantfix-card-name,.recent-blog-card h3{color:#000!important}
.service p,.service-description,.avantfix-card-desc,.recent-blog-card p{color:#535353!important}
.service-icon,.avantfix-card-icon,.sub-service-icon-wrap{background:#f7f7f7!important;border:1px solid #e5e5e5!important;color:#000!important}
.service-icon svg,.avantfix-card-icon svg,.sub-service-icon-wrap svg{stroke:#000!important}
.cyan,.avantfix-card-badge,.sub-item-cta-direct{color:#000!important;background:none!important;-webkit-text-fill-color:#000!important;text-shadow:none!important}
.sub-item{border-color:#e5e5e5!important;background:#fff!important}
.sub-item-header{background:#fff!important}
.sub-item-header:hover{background:#f7f7f7!important}
.btn-subcategories,.cta-button{background:#000!important;color:#fff!important;border:1px solid #000!important;border-radius:999px!important;box-shadow:none!important}
.btn-subcategories:hover,.cta-button:hover{background:#222!important;transform:translateY(-2px)!important}

.recent-blog-section{border-top:1px solid #e5e5e5}
.recent-blog-header{align-items:end!important}
.modal-overlay{background:rgba(0,0,0,.5)!important}
.modal-box{background:#fff!important;border:1px solid #e5e5e5!important;border-radius:24px!important;color:#000!important;box-shadow:0 24px 80px rgba(0,0,0,.18)!important}
.modal-title{color:#000!important}
.modal-subtitle,.modal-service-tag{color:#535353!important}
.modal-service-tag{background:#f7f7f7!important;border-color:#e5e5e5!important}
.modal-close{background:#f7f7f7!important;border-color:#e5e5e5!important;color:#000!important}
.avantfix-banner{background:#f7f7f7!important;border:1px solid #e5e5e5!important}
.avantfix-banner-title{color:#000!important}.avantfix-banner-sub{color:#535353!important}
.input-group label{color:#535353!important}
.input-group input,.input-group select,.input-group textarea{background:#fff!important;border:1px solid #ccc!important;color:#000!important;border-radius:12px!important}
.input-group input:focus,.input-group select:focus,.input-group textarea:focus{border-color:#000!important;box-shadow:0 0 0 1px #000!important}
.btn-submit{background:#000!important;color:#fff!important;border:1px solid #000!important;border-radius:999px!important;box-shadow:none!important}

footer{background:#fff!important;border-top:1px solid #e5e5e5!important;color:#000!important;padding:64px clamp(20px,5vw,80px) 28px!important}
.footer-grid{max-width:1440px!important;margin:0 auto!important}
.footer-logo span,.footer-col h4{color:#000!important}
.footer-brand p,.footer-brand address,.footer-col a,.footer-bottom{color:#535353!important}
.footer-logo img{filter:none!important}
.footer-bottom{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important;border-top-color:#e5e5e5!important}

@media(max-width:900px){
 header{padding:0 20px}
 header nav{position:fixed!important;left:0!important;right:0!important;top:64px!important;transform:none!important;background:#fff!important;border-bottom:1px solid #e5e5e5!important}
 header nav a{padding:14px 20px!important}
 .header-contact{display:none!important}
 .hero{min-height:560px!important;padding:120px 20px 70px!important}
 .services,.recent-blog-section{padding:64px 20px!important}
}

/* --- Ecosystem coverage: internal pages --- */
.landing-hero,.blog-hero,.article-hero,.diy-page,.portal-page,.legal-page,.success-page{background:#fff!important;color:#000!important}
.landing-hero{min-height:680px!important;padding:140px clamp(20px,5vw,80px) 80px!important;justify-content:flex-end!important}
.landing-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.84) 45%,rgba(255,255,255,.25) 100%);z-index:0;pointer-events:none}
.landing-hero>*{position:relative;z-index:1}
.hero-grid,.hero-orb,.hero-particles{display:none!important}
.landing-hero h1,.blog-hero h1,.article-hero h1,.diy-page-title,.portal-title,.legal-page h1,.success-page h1{font-family:Inter,Arial,sans-serif!important;color:#000!important;background:none!important;-webkit-text-fill-color:#000!important;text-shadow:none!important;letter-spacing:-.045em!important;font-weight:800!important}
.landing-hero h1{font-size:clamp(3rem,6vw,5.8rem)!important;line-height:1!important;max-width:900px}
.landing-hero p,.landing-subtitle,.blog-hero p,.article-hero p,.diy-page-sub,.portal-subtitle{color:#535353!important;line-height:1.7!important}
.landing-badge,.blog-hero .badge,.article-category,.diy-badge{background:#f7f7f7!important;border:1px solid #e5e5e5!important;color:#000!important;border-radius:999px!important;box-shadow:none!important}
.landing-cta,.hero-cta,.diy-send-btn,.diy-mail-btn,.portal-btn{background:#000!important;color:#fff!important;border:1px solid #000!important;border-radius:999px!important;box-shadow:none!important}
.landing-cta:hover,.hero-cta:hover,.diy-send-btn:hover,.portal-btn:hover{background:#222!important;transform:translateY(-2px)!important}
.landing-section,.features-section,.pricing-section,.faq-section,.diy-section,.blog-main,.article-wrap{background:#fff!important;color:#000!important}
.landing-section h2,.features-section h2,.pricing-section h2,.faq-section h2,.diy-section h2,.blog-main h2,.article-wrap h2,.article-wrap h3{color:#000!important;font-family:Inter,Arial,sans-serif!important}
.feature-card,.problem-card,.price-card,.faq-item,.diy-card,.diy-tarifa,.diy-terms,.blog-featured,.blog-card,.portal-card,.legal-card{background:#fff!important;border:1px solid #e5e5e5!important;border-radius:24px!important;box-shadow:none!important;color:#000!important}
.feature-card:hover,.problem-card:hover,.price-card:hover,.blog-card:hover{border-color:#bbb!important;box-shadow:0 14px 35px rgba(0,0,0,.06)!important;transform:translateY(-3px)}
.feature-card p,.problem-card p,.price-card p,.faq-item p,.diy-card p,.blog-card p,.article-wrap p,.article-wrap li{color:#535353!important}
.feature-icon,.problem-icon,.diy-icon{background:#f7f7f7!important;border:1px solid #e5e5e5!important;color:#000!important}
.feature-icon svg,.problem-icon svg,.diy-icon svg{stroke:#000!important}
.diy-page{max-width:960px!important;padding:130px 20px 90px!important}
.diy-page-title .avant,.diy-page-title .fix{background:none!important;-webkit-text-fill-color:#000!important;color:#000!important}
.diy-diff-btn,.contact-tab{border:1px solid #ccc!important;color:#535353!important;background:#fff!important;border-radius:999px!important}
.diy-diff-btn.active,.contact-tab.active{background:#000!important;color:#fff!important;border-color:#000!important}
.diy-fields input,.diy-fields textarea{background:#fff!important;border:1px solid #ccc!important;color:#000!important;border-radius:12px!important}
.blog-hero{padding:140px 20px 70px!important}
.blog-hero .badge{letter-spacing:.12em!important}
.blog-featured,.blog-card{overflow:hidden!important}
.blog-featured-body h2,.blog-card h2{color:#000!important}
.article-hero{min-height:520px!important;background:#f7f7f7!important}
.article-hero:after{background:linear-gradient(to top,#fff 0%,rgba(255,255,255,.65) 55%,rgba(255,255,255,.2) 100%)!important}
.article-hero-content{color:#000!important}
.article-wrap{max-width:900px!important}
#progress-bar{background:#000!important;box-shadow:none!important}
blockquote{border-left-color:#000!important;background:#f7f7f7!important;color:#535353!important}
table{border-color:#e5e5e5!important}th{background:#f7f7f7!important;color:#000!important}td{border-color:#e5e5e5!important}
@media(max-width:900px){.landing-hero{min-height:580px!important;padding:120px 20px 60px!important}.landing-hero:after{background:rgba(255,255,255,.84)}.blog-hero{padding:120px 20px 55px!important}}

/* Exact AvantStore typography + brand parity */
html,body,button,input,select,textarea,a,p,span,li,td,th,label,strong,small,div {
  font-family:"Inter","SamsungOne",Arial,sans-serif!important;
}
body{font-weight:400!important;line-height:1.5!important;letter-spacing:-.01em!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important}
h1,h2,h3,h4,h5,h6,.modal-title,.service-header h3,.avantfix-card-name {
  font-family:"Inter","SamsungSharpSans",Arial,sans-serif!important;
  font-weight:700!important;letter-spacing:-.02em!important;line-height:1.1!important;
}
header{height:64px!important}
header .logo-group{height:64px!important;display:flex!important;align-items:center!important;padding:0!important;gap:0!important;overflow:visible!important}
header .logo-group .brand-wordmark{height:36px!important;width:auto!important;max-width:245px!important;object-fit:contain!important;animation:none!important;filter:none!important;border-radius:0!important}
header .logo-group h1{display:none!important}
header nav a{font-family:"Inter","SamsungOne",Arial,sans-serif!important;font-size:.9rem!important;font-weight:500!important;letter-spacing:-.01em!important}
.header-contact{font-size:.85rem!important;font-weight:600!important;padding:10px 20px!important}
.hero h2{font-family:"Inter","SamsungSharpSans",Arial,sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.1!important}
.hero p{font-family:"Inter","SamsungOne",Arial,sans-serif!important;font-weight:400!important;letter-spacing:-.01em!important}
.as-btn,.as-btn-outline,.btn-subcategories,.cta-button,.btn-submit{font-family:"Inter","SamsungOne",Arial,sans-serif!important;font-size:.95rem!important;font-weight:600!important;letter-spacing:-.01em!important}
.services>h2,.recent-blog-header h2,.landing-hero h1,.blog-hero h1,.article-hero h1,.diy-page-title{font-family:"Inter","SamsungSharpSans",Arial,sans-serif!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.1!important}
.service p,.service-description,.avantfix-card-desc,.recent-blog-card p,.modal-subtitle,.input-group label{font-family:"Inter","SamsungOne",Arial,sans-serif!important;letter-spacing:-.01em!important}
@media(max-width:900px){header .logo-group .brand-wordmark{height:32px!important;max-width:205px!important}}

/* Brand rule: preserve original AvantService symbol; AvantStore design system controls presentation */
header .logo-group .brand-symbol{height:36px!important;width:32px!important;object-fit:contain!important;animation:none!important;filter:none!important;border-radius:0!important;margin-right:10px!important}
header .logo-group .brand-name{font-family:"Century Gothic","Avant Garde Gothic","AvantGarde Gothic","Inter",Arial,sans-serif!important;font-size:1.05rem!important;font-weight:700!important;letter-spacing:-.03em!important;line-height:1!important;color:#000!important;white-space:nowrap!important}
header .logo-group .brand-wordmark{display:none!important}
@media(max-width:900px){header .logo-group .brand-symbol{height:32px!important;width:28px!important}header .logo-group .brand-name{font-size:1rem!important}}

/* Corporate typography: AvantGarde Gothic throughout. Original logo is preserved. */
@font-face{font-family:"AvantGarde";src:url("fuentes/ITC Avant Garde Gothic CE Book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"AvantGarde";src:url("fuentes/ITC Avant Garde GothicMedium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"AvantGarde";src:url("fuentes/ITC Avant Garde Gothic Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
html,body,button,input,select,textarea,a,p,span,li,td,th,label,strong,small,div,h1,h2,h3,h4,h5,h6{font-family:"AvantGarde","Century Gothic",Arial,sans-serif!important}
body{font-weight:400!important;letter-spacing:-.01em!important}
h1,h2,h3,h4,h5,h6,.modal-title,.service-header h3,.avantfix-card-name{font-weight:700!important;letter-spacing:-.02em!important;line-height:1.1!important}
header .logo-group .brand-name{font-family:"AvantGarde","Century Gothic",Arial,sans-serif!important;font-weight:700!important}