/* León Arturo — capa visual moderna v3 (mismos colores, logo, fotos y contenido) */
:root{--r:20px;--r-sm:12px;--ease:cubic-bezier(.2,.7,.2,1);--shadow:0 28px 70px -30px rgba(0,0,0,.8);--head:"Barlow Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;--text2:#c3cac2}

/* ---------- base tipográfica ---------- */
body{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:1.02rem;line-height:1.65;text-rendering:optimizeLegibility;background:var(--bg)}
h1,h2,h3,.hero-number strong,.pre-overlay h3,.contact-poster-content strong{font-family:var(--head)!important;font-weight:700}
h1{font-weight:800}
h1,h2,h3{letter-spacing:0;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(2.5rem,4.8vw,4.6rem);font-weight:800;text-transform:uppercase}
h3{font-size:clamp(1.55rem,2vw,1.95rem)}
p,li{text-wrap:pretty}
.detail-copy p,.section-top>p,.about-section p,.service-content p{max-width:62ch}
.section-top>p,.service-content p,.case-copy p,.promo-copy p,.equipment-content p{color:var(--text2)}
.kicker,.mini-label{letter-spacing:.12em;font-size:.74rem;font-weight:700;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;flex:none}
.section{padding:104px 0}
.detail-section{padding:96px 0}
.container{width:min(var(--max),calc(100% - 64px))}

/* ---------- barra superior y menú ---------- */
.utility{height:36px;background:#0d120e;font-weight:600;letter-spacing:.08em}
.site-header{backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);background:rgba(9,12,10,.8)!important;border-bottom:1px solid var(--line)}
.brand{border:0!important;border-radius:0!important;padding:0!important;background:none!important;box-shadow:none!important}
.nav-links{font-size:.8rem;font-weight:600;letter-spacing:.015em;gap:26px}
.nav-links>a:not(.nav-wa),.nav-links summary{position:relative;color:#e4e9e2}
.nav-links>a:not(.nav-wa)::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);border-radius:2px}
.nav-links>a:not(.nav-wa):hover::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--lime)}
.drop-menu{border-radius:var(--r-sm)!important;border:1px solid var(--line)!important;border-top:1px solid var(--line)!important;box-shadow:var(--shadow)!important;background:rgba(17,22,18,.97)!important}
.drop-menu a{border-radius:8px;border-bottom:0!important}

/* ---------- botones ---------- */
.btn,.nav-wa,.filter-btn{border-radius:999px!important;font-weight:700;letter-spacing:.01em;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn{min-height:58px;padding:14px 28px;font-size:.92rem}
.btn-primary,.nav-wa{box-shadow:0 12px 32px -14px rgba(223,255,36,.6)}
.btn-primary:hover,.nav-wa:hover{box-shadow:0 16px 38px -12px rgba(223,255,36,.75)}
.btn:hover,.nav-wa:hover{transform:translateY(-2px)}
.btn-outline{border:1px solid rgba(246,248,242,.3)!important;background:rgba(255,255,255,.03)}
.btn-outline:hover{border-color:var(--lime)!important;color:var(--lime)}
.filter-btn{border:1px solid var(--line);background:transparent;padding:10px 20px;font-size:.84rem}
.filter-btn.selected,.filter-btn:hover{background:var(--lime);color:#111;border-color:var(--lime)}

/* ---------- HERO: frase principal ---------- */
.hero{background:radial-gradient(ellipse at 82% 20%,rgba(165,219,0,.15),transparent 42%),radial-gradient(ellipse at 8% 100%,rgba(223,255,36,.05),transparent 45%),linear-gradient(115deg,#0d120e 0%,#090d0b 62%,#121811 100%)}
.hero-layout{gap:64px;padding-top:84px;padding-bottom:58px;min-height:700px}
.hero-copy{container-type:inline-size;min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 14px;border:1px solid rgba(223,255,36,.32);border-radius:999px;background:rgba(223,255,36,.06);font-size:.74rem;letter-spacing:.12em;font-weight:700;margin-bottom:28px}
.eyebrow-line{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(223,255,36,.8)}
.hero h1{margin:0 0 28px;font-size:clamp(3.6rem,min(8.6vw,17cqw),7.6rem);line-height:.9;letter-spacing:-.005em;font-weight:800;text-transform:uppercase;text-wrap:initial}
.hero h1 .h1-line{display:block;overflow-wrap:normal;animation:h1-rise 1s var(--ease) both}
.hero h1 .h1-line:nth-child(2){animation-delay:.14s}
.hero h1 .h1-line:nth-child(3){animation-delay:.32s}
.hero h1 .h1-accent{margin-top:.12em;font-size:.58em;line-height:.98;letter-spacing:.005em}
.hero h1 em{display:inline;color:var(--lime);font-style:normal;text-shadow:0 0 42px rgba(223,255,36,.28)}
.title-dot{color:var(--white)}
@keyframes h1-rise{from{opacity:0;transform:translateY(.4em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-50% -100% -50% -100%)}}
.hero-copy>p{font-size:1.16rem;color:#d4dad2;max-width:54ch;line-height:1.7}
.hero-actions{gap:14px}
.hero-perks{gap:10px 12px;margin-top:32px}
.hero-perks span{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:#c9d1c7;font-size:.78rem;font-weight:600}
.hero-image-wrap,.hero-photo{border-radius:28px!important}
.hero-image-wrap{overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(223,255,36,.18)}
.scan-overlay{border-radius:16px}
.hero-photo-tag{left:26px;bottom:24px;padding:8px 14px;border-radius:999px;background:rgba(9,12,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.06em}
.hero-number{border-radius:20px;transform:translate(14px,6px);box-shadow:0 24px 50px -14px rgba(0,0,0,.6)}
.hero-number{width:auto;min-width:195px}
.hero-number strong{font-size:4.2rem;font-weight:800;line-height:.9;white-space:nowrap}
.hero-foot{border-top:1px solid var(--line);gap:12px}
.hero-foot span{font-size:.76rem;letter-spacing:.06em;font-weight:700}

/* ---------- franja de presentación ---------- */
.intro-grid{padding:42px 0}
.intro-grid p{font-size:1.35rem;line-height:1.35;letter-spacing:-.01em;font-weight:500}
.intro-grid p strong{font-weight:800}

/* ---------- tarjetas y fotos ---------- */
.service-card,.equipment-card,.promo-card,.case-card{border-radius:var(--r)!important;border:1px solid var(--line)!important;background:linear-gradient(180deg,var(--surface),#0e120e)!important;overflow:hidden;box-shadow:none;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.about-points>*{border-radius:0!important;border-left:0!important;border-right:0!important;border-top:0!important;background:none!important}
.service-card:hover,.promo-card:hover,.case-card:hover,.equipment-card:hover{border-color:rgba(223,255,36,.5)!important;transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.service-card img,.promo-media img,.case-photo img,.equipment-image img,.gallery-grid img{transition:transform .7s var(--ease)}
.service-card:hover img,.promo-card:hover img,.case-card:hover img{transform:scale(1.045)}
.detail-visual img,.visual-frame,.dpf-image,.pre-main,.pre-side>*,.detail-thumbs img,.gallery-grid>*,.photo-viewer img,.contact-poster{border-radius:var(--r)!important;overflow:hidden}
.service-number,.case-num{border-radius:999px}
.service-content,.promo-copy,.case-copy,.equipment-content{padding:28px}
.service-content h3,.case-copy h3,.promo-copy h3,.equipment-content h3{font-weight:700;text-transform:none;letter-spacing:.005em}
.card-action{font-weight:700;letter-spacing:.06em}
.promo-tag,.equipment-tag,.dpf-badge{border-radius:999px!important;font-weight:700;letter-spacing:.06em;font-size:.72rem}
.equipment-specs span{border-radius:999px;padding:6px 12px;font-size:.62rem}
.checklist{list-style:none;padding:0;margin:26px 0 30px}
.checklist li{padding:13px 0 13px 34px;border-bottom:1px solid var(--line);position:relative;color:#e1e7df}
.checklist li::before{content:"";position:absolute;left:2px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:rgba(223,255,36,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfff24' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.caution,.case-inline,.muted-note,.service-footnote,.footnote{color:#aab3a9}
.case-inline,.caution{padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:12px;background:rgba(255,255,255,.03)}
.section-soft{background:linear-gradient(180deg,#0f140f,#0b0f0c)}

/* ---------- marcas ---------- */
.brands-section{padding:96px 0}
.brand-cloud{gap:10px}
.brand-cloud span{border-radius:999px;border:1px solid transparent;padding:10px 20px;font-weight:700;background:#141a12;color:#f1f7ec;transition:transform .2s var(--ease),background .2s,color .2s}
.brand-cloud span:hover{background:#000;color:var(--lime);transform:translateY(-2px)}

/* ---------- galería ---------- */
.gallery-item{border-radius:var(--r)!important;border:1px solid var(--line)!important;background:var(--surface)!important}
.gallery-item:hover{border-color:rgba(223,255,36,.5)!important}
.gallery-item .gallery-caption{background:var(--surface)}
.gallery-item .zoom{border-radius:50%}

/* ---------- contacto y pie ---------- */
.contact-poster{border:1px solid var(--line)}
.contact-poster-content{container-type:inline-size}
.contact-poster-content strong{font-weight:800;font-size:clamp(3rem,19cqw,8.5rem);line-height:.84;letter-spacing:0}
.whatsapp-floating{border-radius:999px!important;box-shadow:0 14px 40px -10px rgba(37,211,102,.6);font-weight:700}
.footer{border-top:1px solid var(--line)}
.footer a{transition:color .2s}.footer a:hover{color:var(--lime)}
.footer-grid strong{letter-spacing:.1em}

/* ---------- tablet ---------- */
@media(max-width:980px){
 .hero-layout{gap:36px;padding-top:60px}
 .hero h1{font-size:clamp(3.4rem,9.4vw,5.6rem)}
 .section{padding:80px 0}.detail-section{padding:72px 0}
 .nav-links>a:not(.nav-wa)::after{display:none}
}
/* ---------- móvil ---------- */
@media(max-width:760px){
 .container{width:calc(100% - 36px)}
 .section,.detail-section{padding:62px 0}
 .hero-layout{padding-top:44px;padding-bottom:30px;gap:34px}
 .hero h1{font-size:clamp(3.5rem,18vw,5rem);line-height:.9}
 .hero h1 .h1-accent{font-size:.7em}
 .eyebrow{font-size:.66rem;padding:7px 13px}
 .hero-copy>p{font-size:1.05rem}
 .hero-perks span{font-size:.72rem;padding:6px 12px}
 .hero-number strong{font-size:3.2rem}
 .service-content,.promo-copy,.case-copy,.equipment-content{padding:20px}
 .intro-grid p{font-size:1.1rem}
 .hero-actions{flex-direction:column;align-items:stretch}
 .hero-actions .btn{width:100%;font-size:.9rem;padding:14px 20px}
 .btn{justify-content:center;text-align:center}
 .contact-actions .btn,.detail-copy .btn,.pre-info-action .btn,.promo-copy .btn{width:100%}
 .hero h1 .h1-accent{text-wrap:balance}
 .hero-number{width:auto;min-width:150px;padding:16px 18px}
 .hero-number strong{font-size:2.9rem;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* servicios: 3 arriba y 2 abajo repartidos a lo ancho (sin hueco vacío) */
@media(min-width:981px){
 .services-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .services-grid .service-card{grid-column:span 2}
 .services-grid .service-card:nth-child(n+4){grid-column:span 3}
 .services-grid .service-card:nth-child(n+4) .service-img{height:250px}
}
.brands-section .footnote{color:#37421c;font-weight:500}