:root{
  --black:#050505;
  --black-2:#0b0b0c;
  --black-3:#111214;
  --panel:#151619;
  --panel-2:#1b1c20;
  --red:#f20d24;
  --red-dark:#a80012;
  --white:#ffffff;
  --gray-50:#f4f4f5;
  --gray-100:#e4e4e7;
  --gray-300:#a1a1aa;
  --gray-500:#71717a;
  --gray-700:#3f3f46;
  --line:rgba(255,255,255,.10);
  --line-red:rgba(242,13,36,.45);
  --text:#f7f7f8;
  --muted:#b5b5bd;
  --bg:#0a0a0b;
  --shadow:0 24px 60px rgba(0,0,0,.42);
  --radius:16px;
  /* alias para código existente */
  --pink:var(--red);
  --navy:var(--black);
  --navy-2:var(--black-2);
  --cyan:#d8d8dc;
  --yellow:#8e8e95;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;font-family:"Segoe UI",Inter,Arial,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1380px,92%);margin:auto}

/* Barra superior */
.topbar{background:#0d0d0f;color:#e9e9ec;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{min-height:42px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.topbar-left{display:flex;gap:28px;flex-wrap:wrap}
.topbar-left span{display:flex;align-items:center;gap:7px}
.topbar-left span::first-letter{color:var(--red)}
.socials{display:flex;gap:18px;font-weight:800;color:#cfcfd4}
.socials a{transition:.2s}
.socials a:hover{color:var(--red);transform:translateY(-1px)}

/* Navegación */
.main-header{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 12px 35px rgba(0,0,0,.28)}
.nav-wrap{height:104px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;min-width:290px}
.logo-principal{width:275px;max-width:100%;height:auto;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:800;letter-spacing:.25px;color:#f4f4f5}
.main-nav>a{padding:18px 0;position:relative;transition:.2s}
.main-nav>a:not(.btn)::after{content:"";position:absolute;height:3px;width:0;left:0;bottom:8px;background:var(--red);box-shadow:0 0 18px rgba(242,13,36,.5);transition:.25s}
.main-nav>a:hover,.main-nav>a.active{color:#fff}
.main-nav>a:hover::after,.main-nav>a.active::after{width:100%}
.menu-toggle{display:none;border:1px solid var(--line);background:#111;color:#fff;border-radius:8px;font-size:24px;padding:7px 11px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:6px;padding:15px 22px;font-weight:900;letter-spacing:.2px;cursor:pointer;transition:.22s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(242,13,36,.22)}
.btn-pink{background:linear-gradient(135deg,#ff142c,var(--red));color:#fff;box-shadow:0 10px 25px rgba(242,13,36,.18)}
.btn-outline{border:2px solid var(--red);color:#fff;background:transparent}
.btn-outline:hover{background:var(--red)}
.btn-small{padding:13px 18px!important}

/* Hero home */
.hero{min-height:570px;display:grid;grid-template-columns:45% 55%;overflow:hidden;background:#070707;border-bottom:1px solid rgba(255,255,255,.07)}
.hero-copy{padding:72px 6vw 66px max(4vw,calc((100vw - 1380px)/2));display:flex;flex-direction:column;justify-content:center;position:relative;isolation:isolate;background:
  radial-gradient(circle at 8% 25%,rgba(242,13,36,.14),transparent 30%),
  linear-gradient(125deg,#090909 0%,#070707 72%,#0d0d0e 100%)}
.hero-copy::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px}
.hero-kicker{display:flex;align-items:center;gap:14px;color:#d3d3d7;text-transform:uppercase;letter-spacing:5px;font-weight:800;font-size:12px;margin-bottom:18px}
.hero-kicker::before{content:"";width:46px;height:3px;background:var(--red)}
.hero-script{font-size:64px;font-weight:950;line-height:.95;margin:0;text-transform:uppercase;letter-spacing:-2px;color:#fff}
.hero h1{font-size:67px;line-height:.95;margin:8px 0 24px;letter-spacing:-2px;color:var(--red);font-weight:950;text-transform:uppercase}
.hero p{font-size:18px;line-height:1.65;max-width:600px;margin:0 0 30px;color:#dedee2}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-mini{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px}
.hero-mini span{display:flex;align-items:center;gap:9px;color:#d6d6da;font-size:12px;font-weight:700}
.hero-mini i{font-style:normal;color:var(--red);font-size:18px}
.hero-art{min-height:570px;background:
  linear-gradient(90deg,rgba(5,5,5,.10),rgba(5,5,5,.02)),
  url('../img/hero-red.jpg') center/cover no-repeat;position:relative}
.hero-art::before{content:"";position:absolute;left:-55px;top:0;height:100%;width:110px;background:linear-gradient(180deg,#ff1028 0%,#8e0010 100%);clip-path:polygon(0 0,34% 0,100% 50%,34% 100%,0 100%,67% 50%);filter:drop-shadow(12px 0 22px rgba(242,13,36,.22))}
.hero-art::after{content:"TU MARCA\A EN GRANDE";white-space:pre;position:absolute;right:8%;bottom:10%;padding:18px 22px;border-left:5px solid var(--red);background:rgba(5,5,5,.78);color:#fff;font-size:26px;line-height:1.03;font-weight:950;letter-spacing:-.5px;box-shadow:var(--shadow)}

/* Franja de atributos */
.usp-strip{background:linear-gradient(180deg,#121214,#0c0c0e);color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.usp{padding:22px 26px;display:flex;align-items:center;gap:16px;border-right:1px solid rgba(255,255,255,.08)}
.usp:last-child{border-right:0}
.usp-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:900;flex:0 0 auto;background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(242,13,36,.22)}
.usp:nth-child(even) .usp-icon{background:#efeff1;color:#111;box-shadow:none}
.usp strong{display:block;font-size:13px;color:#fff}
.usp span{display:block;font-size:12px;line-height:1.5;color:#aaaab2;margin-top:4px}

/* Secciones */
.section{padding:78px 0;background:#09090a}
.section-soft{background:#101012}
.section-head{text-align:center;max-width:900px;margin:0 auto 42px}
.eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--red);font-weight:900;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.eyebrow::before,.eyebrow::after{content:"";height:2px;width:28px;background:var(--red)}
.section-head h2{font-size:40px;line-height:1.1;margin:12px 0 12px;color:#fff;letter-spacing:-1px}
.section-head p{color:var(--muted);line-height:1.7}
.tricolor{display:flex;gap:7px;justify-content:center;margin-top:18px}
.tricolor i{height:3px;width:42px;border-radius:5px;background:#4b4b51}
.tricolor i:nth-child(2){background:var(--red);width:58px}

/* Tarjetas */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.home-services{grid-template-columns:repeat(3,1fr);gap:22px}
.service-card,.product-card,.promo-card,.blog-card,.value,.panel{background:linear-gradient(180deg,#171719,#111113);border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;position:relative;transition:.26s;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.service-card::before,.product-card::before,.promo-card::before,.blog-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--red),transparent 70%);z-index:2}
.service-card:hover,.product-card:hover,.promo-card:hover,.blog-card:hover,.value:hover{transform:translateY(-6px);border-color:rgba(242,13,36,.5);box-shadow:0 24px 48px rgba(0,0,0,.34)}
.service-image{height:215px;background-size:cover;background-position:center;filter:saturate(.45) contrast(1.08)}
.service-card:hover .service-image{filter:saturate(.65) contrast(1.1)}
.service-body{padding:28px 24px 25px}
.service-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--red);border:5px solid #151517;margin-top:-56px;margin-bottom:16px;font-size:21px;position:relative;z-index:3}
.service-card:nth-child(even) .service-icon{background:#eee;color:#111}
.service-card h3,.product-card h3,.promo-card h3,.blog-card h3{font-size:19px;margin:0 0 10px;color:#fff}
.service-card p,.product-card p,.promo-card p,.blog-card p{font-size:14px;color:#aaaab2;line-height:1.65;margin:0 0 16px}
.text-link{font-weight:900;color:var(--red);font-size:13px}
.text-link:hover{color:#fff}

/* CTA */
.cta-band{margin-top:34px;background:linear-gradient(110deg,#18181b,#0c0c0e);border:1px solid rgba(242,13,36,.28);border-radius:14px;color:#fff;padding:30px;display:grid;grid-template-columns:1.4fr repeat(3,.8fr) auto;gap:22px;align-items:center;box-shadow:0 18px 40px rgba(0,0,0,.24)}
.cta-band h3{font-size:23px;margin:0 0 6px}
.cta-band p{font-size:12px;margin:0;color:#a9a9b0}
.cta-item{display:flex;gap:11px;align-items:center}
.cta-item .usp-icon{width:42px;height:42px;font-size:17px;background:var(--red)!important;color:#fff!important}
.cta-item b{display:block;font-size:12px}

/* Proceso */
.process{display:grid;grid-template-columns:1.25fr repeat(5,1fr);gap:20px;align-items:start;background:#0c0c0e;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:36px;box-shadow:var(--shadow)}
.process-intro h3{font-size:29px;margin:0 0 10px;color:#fff}
.process-intro p{color:var(--muted);line-height:1.6}
.step{text-align:center}
.step-circle{width:82px;height:82px;border-radius:50%;background:#171719;border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;margin:0 auto 14px;font-size:28px;box-shadow:0 10px 22px rgba(0,0,0,.24)}
.step-no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--red);font-size:11px;font-weight:900;margin:-101px auto 70px;position:relative;right:-38px;border:3px solid #0c0c0e}
.step b{font-size:14px;color:#fff}
.step p{font-size:12px;color:#9a9aa2;line-height:1.45}

/* Estadísticas */
.stats{background:linear-gradient(90deg,#0a0a0b,#171719,#0a0a0b);color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:32px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-size:36px;color:var(--red)!important}
.stat span{font-size:13px;color:#b9b9c0}

/* Héroes interiores */
.page-hero{padding:68px 0;background:
  radial-gradient(circle at 82% 30%,rgba(242,13,36,.18),transparent 28%),
  linear-gradient(120deg,#0d0d0f,#070708);color:#fff;border-bottom:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-100px;top:-130px;width:440px;height:440px;border:1px solid rgba(242,13,36,.22);transform:rotate(25deg)}
.page-hero h1{font-size:48px;margin:8px 0 10px;color:#fff;letter-spacing:-1px}
.page-hero h1::after{content:"";display:block;width:62px;height:4px;background:var(--red);margin-top:14px}
.page-hero p{max-width:820px;color:#b8b8c0;line-height:1.65;margin:0;font-size:16px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.panel{padding:32px}
.panel h2,.panel h3{color:#fff}
.panel p{color:#b1b1b8;line-height:1.75}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{padding:28px}
.value h3{margin-top:0;color:#fff}
.value p{color:#aaaab2;line-height:1.7}

/* Catálogo */
.catalog-toolbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filter-btn{border:1px solid rgba(255,255,255,.12);background:#151517;color:#ddd;padding:11px 17px;border-radius:30px;font-weight:800;cursor:pointer;transition:.2s}
.filter-btn.active,.filter-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product-card img{width:100%;height:220px;object-fit:cover;filter:saturate(.5) contrast(1.05)}
.product-card .body{padding:22px}
.price{font-weight:900;color:var(--red)!important}
.badge{display:inline-block;background:rgba(242,13,36,.12);color:#ff5365;border:1px solid rgba(242,13,36,.25);padding:7px 10px;border-radius:99px;font-size:11px;font-weight:900;margin-bottom:8px}

/* Galería */
.gallery-grid{columns:4 240px;column-gap:18px}
.gallery-item{break-inside:avoid;margin:0 0 18px;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:#121214}
.gallery-item img{width:100%;transition:.28s;filter:saturate(.5) contrast(1.05)}
.gallery-item:hover img{transform:scale(1.035);filter:saturate(.7) contrast(1.08)}

/* Promos y blog */
.promo-grid,.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.promo-card img,.blog-card img{height:230px;width:100%;object-fit:cover;filter:saturate(.5) contrast(1.08)}
.promo-card .body,.blog-card .body{padding:25px}

/* Formularios */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group.full{grid-column:1/-1}
label{font-size:13px;font-weight:800;color:#eee}
input,select,textarea{width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.13);border-radius:8px;color:#fff;outline:none;background:#0d0d0f}
input::placeholder,textarea::placeholder{color:#686870}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(242,13,36,.12)}
textarea{min-height:140px;resize:vertical}
.alert{padding:14px 16px;border-radius:8px;margin-bottom:20px}
.alert-success{background:#10251a;color:#8de0aa;border:1px solid #1e5433}
.alert-error{background:#2a1014;color:#ffabb5;border:1px solid #62202a}

/* Texto común de contenido */
.section h1,.section h2,.section h3,.section h4{color:#fff}
.section p,.section li{color:#b0b0b8}
.section strong{color:#fff}

/* Footer */
.footer{background:#050506;color:#fff;padding-top:56px;border-top:1px solid rgba(242,13,36,.35)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:42px}
.footer p,.footer a{display:block;color:#9f9fa7;font-size:13px;line-height:1.7;margin:5px 0}
.footer a:hover{color:var(--red)}
.footer h4{margin:0 0 16px;color:#fff}
.footer-brand{margin-bottom:16px;min-width:0}
.footer-brand img{width:250px}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.08);margin-top:38px;padding:19px;color:#72727a;font-size:12px}
.whatsapp{position:fixed;right:24px;bottom:24px;z-index:60;width:58px;height:58px;border-radius:50%;background:#18b764;color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 12px 26px rgba(0,0,0,.35);border:3px solid rgba(255,255,255,.85)}

/* Admin */
.admin-wrap{min-height:100vh;background:#09090a;padding:40px 0}
.admin-card{max-width:540px;margin:50px auto;background:#151517;padding:34px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:#0b0b0c}
.admin-sidebar{background:#070708;color:#fff;padding:28px 20px;border-right:1px solid rgba(255,255,255,.08)}
.admin-sidebar h2{margin-top:0;color:#fff}.admin-sidebar a{display:block;padding:11px 12px;border-radius:8px;color:#c7c7cd}.admin-sidebar a:hover{background:#1a1a1d;color:#fff;border-left:3px solid var(--red)}
.admin-main{padding:32px;background:#101012;color:#eee}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.table-wrap{overflow:auto;background:#151517;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse}th,td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;font-size:13px;color:#d4d4d8}th{background:#0c0c0e;color:#fff}

@media(max-width:1180px){
  .logo-principal{width:235px}.brand{min-width:240px}.main-nav{gap:15px;font-size:11px}.hero h1,.hero-script{font-size:54px}.products-grid{grid-template-columns:repeat(3,1fr)}.cta-band{grid-template-columns:1.3fr 1fr 1fr}
  .cta-band .cta-item:nth-of-type(3){display:none}
}
@media(max-width:930px){
  .topbar-left span:nth-child(3){display:none}.menu-toggle{display:block}.nav-wrap{height:88px}.main-nav{display:none;position:absolute;top:88px;left:0;right:0;background:#080809;flex-direction:column;align-items:stretch;padding:18px 5%;box-shadow:0 18px 30px rgba(0,0,0,.45);border-top:1px solid rgba(255,255,255,.08)}.main-nav.open{display:flex}.main-nav>a{padding:12px 0}.main-nav>a:not(.btn)::after{bottom:5px}
  .hero{grid-template-columns:1fr}.hero-copy{padding:62px 6%}.hero-art{min-height:390px}.hero-art::before{left:0;width:70px;clip-path:polygon(0 0,18% 0,100% 50%,18% 100%,0 100%,75% 50%)}
  .usp-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.usp:nth-child(2){border-right:0}.services-grid,.promo-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}.home-services{grid-template-columns:repeat(2,1fr)}.cta-band{grid-template-columns:1fr 1fr}.process{grid-template-columns:repeat(2,1fr)}.process-intro{grid-column:1/-1}.grid-2{grid-template-columns:1fr}.values{grid-template-columns:1fr}.products-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.admin-shell{grid-template-columns:1fr}
}
@media(max-width:620px){
  .container{width:min(94%,1380px)}.topbar-left{gap:12px;font-size:10px}.topbar-left span:nth-child(2){display:none}.socials{gap:12px}.brand{min-width:0}.logo-principal{width:205px}.nav-wrap{height:78px}.main-nav{top:78px}.hero{min-height:auto}.hero-copy{padding:52px 6%}.hero-kicker{font-size:10px;letter-spacing:3px}.hero-script,.hero h1{font-size:43px;letter-spacing:-1px}.hero p{font-size:16px}.hero-art{min-height:320px}.hero-art::after{font-size:20px;right:5%;bottom:7%}.hero-mini{gap:16px}.section{padding:58px 0}.section-head h2{font-size:31px}.page-hero{padding:52px 0}.page-hero h1{font-size:39px}.usp-grid,.stats-grid,.services-grid,.home-services,.promo-grid,.blog-grid,.products-grid,.form-grid,.footer-grid,.process,.cta-band{grid-template-columns:1fr}.usp{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.form-group.full{grid-column:auto}.gallery-grid{columns:1}.cta-band .cta-item:nth-of-type(3){display:flex}
}

/* ===== AJUSTE FINAL 2026-09-12: replica visual de la propuesta aprobada ===== */
body{background:#050505;color:#fff}
.topbar{background:linear-gradient(90deg,#090909,#161616);border-bottom:1px solid rgba(255,255,255,.08)}
.main-header{background:#060606!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
.nav-wrap{height:96px}
.logo-principal{width:285px}
.main-nav{gap:30px;color:#fff}
.main-nav>a:not(.btn)::after{bottom:10px}
.btn-pink{background:#ff0f22}

.hero{min-height:520px;grid-template-columns:43% 57%;background:#050505}
.hero-copy{min-height:520px;padding-top:58px;padding-bottom:55px;background:
 radial-gradient(circle at 0% 95%,rgba(180,0,18,.28),transparent 27%),
 linear-gradient(115deg,#070707 0%,#0a0a0a 76%,#050505 100%)}
.hero-copy::after{content:"";position:absolute;left:0;bottom:0;width:160px;height:210px;background:linear-gradient(135deg,rgba(185,0,18,.28),transparent 72%);clip-path:polygon(0 20%,42% 0,100% 100%,0 100%);z-index:-1}
.hero-kicker{margin-bottom:20px;color:#efeff1;letter-spacing:5.5px}
.hero-script{font-size:64px;line-height:.92;letter-spacing:-2px}
.hero h1{font-size:64px;line-height:.95;margin:8px 0 20px;letter-spacing:-2px}
.hero p{font-size:18px;max-width:530px;line-height:1.55;margin-bottom:26px;color:#e8e8ea}
.hero-actions .btn-outline{display:none}
.hero-mini{margin-top:24px;gap:32px}
.hero-mini span{font-size:12px}
.hero-art{min-height:520px;background:url('../img/hero-mockup-final.jpg') center center/cover no-repeat;position:relative}
.hero-art::before,.hero-art::after{display:none!important;content:none!important}

.usp-strip{background:linear-gradient(180deg,#141414,#0c0c0c)}
.usp{padding-top:20px;padding-bottom:20px}
.usp-icon{width:52px;height:52px}

.section{background:#050505}
.section-soft{background:#0d0d0e}
.section-head{margin-bottom:34px}
.section-head h2{font-size:38px}
.home-services{grid-template-columns:repeat(6,1fr);gap:16px}
.home-services .service-card{border-radius:10px}
.home-services .service-image{height:150px}
.home-services .service-body{padding:20px 16px 18px}
.home-services .service-card h3{font-size:16px}
.home-services .service-card p{font-size:12px}
.home-services .service-icon{width:46px;height:46px;margin-top:-45px;border-width:4px;font-size:18px}

@media(max-width:1180px){
 .home-services{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:930px){
 .hero{grid-template-columns:1fr}.hero-copy,.hero-art{min-height:auto}.hero-art{min-height:360px}
 .home-services{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
 .home-services{grid-template-columns:1fr}.hero-script,.hero h1{font-size:43px}.hero-art{min-height:300px}
}

/* =========================================================
   CARRUSEL PRINCIPAL - 3 CAMPAÑAS
   ========================================================= */

.hero-carousel{
    position:relative;
    width:100%;
    height:520px;
    overflow:hidden;
    background:#050505;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.hero-slides{
    position:relative;
    width:100%;
    height:520px;
    overflow:hidden;
}


/* Los tres slides ocupan exactamente la misma posición */
.hero-slide{
    position:absolute;
    inset:0;

    display:grid;
    grid-template-columns:43% 57%;

    width:100%;
    height:520px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateX(18px);

    transition:
        opacity .60s ease,
        transform .60s ease,
        visibility .60s ease;
}


/* Únicamente se hace visible la campaña activa */
.hero-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateX(0);

    z-index:2;
}


/* =========================================================
   TEXTO DE LAS CAMPAÑAS
   ========================================================= */

.hero-carousel .hero-copy{
    min-height:520px;

    padding:
        58px
        5vw
        55px
        max(4vw, calc((100vw - 1380px) / 2));

    display:flex;
    flex-direction:column;
    justify-content:center;

    position:relative;
    isolation:isolate;

    color:#fff;

    background:
        radial-gradient(
            circle at 0 95%,
            rgba(180,0,18,.28),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #070707 0%,
            #0a0a0a 76%,
            #050505 100%
        );
}


.hero-carousel .hero-copy::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    opacity:.15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}


.hero-carousel .hero-copy::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:165px;
    height:215px;

    background:
        linear-gradient(
            135deg,
            rgba(185,0,18,.28),
            transparent 72%
        );

    clip-path:
        polygon(
            0 20%,
            42% 0,
            100% 100%,
            0 100%
        );

    z-index:-1;
}


.hero-carousel .hero-kicker{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:20px;

    color:#efeff1;

    text-transform:uppercase;

    letter-spacing:5px;

    font-weight:800;

    font-size:12px;
}


.hero-carousel .hero-kicker::before{
    content:"";

    width:46px;
    height:3px;

    flex:0 0 auto;

    background:var(--red);
}


.hero-carousel .hero-script{
    margin:0;

    color:#fff;

    font-size:64px;
    line-height:.92;

    font-weight:950;

    text-transform:uppercase;

    letter-spacing:-2px;
}


.hero-carousel .hero-copy h1{
    margin:8px 0 22px;

    color:var(--red);

    font-size:64px;
    line-height:.95;

    font-weight:950;

    text-transform:uppercase;

    letter-spacing:-2px;
}


.hero-carousel .hero-copy p{
    max-width:540px;

    margin:0 0 27px;

    color:#e8e8ea;

    font-size:18px;
    line-height:1.58;
}


.hero-carousel .hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}


.hero-carousel .hero-mini{
    display:flex;
    flex-wrap:wrap;

    gap:28px;

    margin-top:25px;
}


.hero-carousel .hero-mini span{
    display:flex;
    align-items:center;

    gap:8px;

    color:#dedee2;

    font-size:11px;
    font-weight:700;
}


.hero-carousel .hero-mini i{
    color:var(--red);

    font-size:17px;

    font-style:normal;
}


/* =========================================================
   IMÁGENES DE LAS TRES CAMPAÑAS
   ========================================================= */

.hero-carousel .hero-art{
    position:relative;

    width:100%;
    height:520px;
    min-height:520px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}


/* Campaña 1 */
.hero-carousel .hero-art-1{
    background-image: url('../img/campana-ideas.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* CAMPAÑA 2 - IMPRIME EN GRANDE */
/* Aquí dejamos la imagen actual del plotter */
.hero-carousel .hero-art-2{
    background-image: url('../img/campana-gran-formato.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* CAMPAÑA 3 - CONECTA CON TU CLIENTE */
.hero-carousel .hero-art-3{
    background-image: url('../img/campana-promocionales.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Quitar decoraciones del hero antiguo */
.hero-carousel .hero-art::before,
.hero-carousel .hero-art::after{
    display:none !important;
    content:none !important;
}


/* =========================================================
   FLECHAS
   ========================================================= */

.hero-arrow{
    position:absolute;

    top:50%;

    z-index:20;

    width:52px;
    height:52px;

    transform:translateY(-50%);

    display:grid;
    place-items:center;

    border:
        1px solid
        rgba(255,255,255,.30);

    border-radius:50%;

    background:
        rgba(5,5,5,.72);

    color:#fff;

    font-size:38px;
    line-height:1;

    cursor:pointer;

    backdrop-filter:blur(6px);

    transition:
        background .20s ease,
        border-color .20s ease,
        transform .20s ease;
}


.hero-arrow:hover{
    background:var(--red);
    border-color:var(--red);

    transform:
        translateY(-50%)
        scale(1.05);
}


.hero-prev{
    left:22px;
}


.hero-next{
    right:22px;
}


/* =========================================================
   INDICADORES
   ========================================================= */

.hero-dots{
    position:absolute;

    left:71.5%;
    bottom:22px;

    z-index:20;

    display:flex;

    gap:10px;

    transform:translateX(-50%);
}


.hero-dot{
    width:11px;
    height:11px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#fff;

    opacity:.65;

    cursor:pointer;

    box-shadow:
        0 0 0 1px
        rgba(0,0,0,.25);

    transition:
        opacity .20s ease,
        transform .20s ease,
        background .20s ease;
}


.hero-dot.active{
    background:var(--red);

    opacity:1;

    transform:scale(1.2);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:930px){

    .hero-carousel{
        height:760px;
    }

    .hero-slides{
        height:760px;
    }

    .hero-slide{
        grid-template-columns:1fr;
        grid-template-rows:430px 330px;

        height:760px;
    }

    .hero-carousel .hero-copy{
        min-height:430px;

        padding:
            48px
            7%;
    }

    .hero-carousel .hero-script,
    .hero-carousel .hero-copy h1{
        font-size:48px;

        letter-spacing:-1px;
    }

    .hero-carousel .hero-art{
        height:330px;
        min-height:330px;
    }

    .hero-dots{
        left:50%;
        bottom:16px;
    }

    .hero-arrow{
        width:44px;
        height:44px;

        font-size:32px;
    }

    .hero-prev{
        left:10px;
    }

    .hero-next{
        right:10px;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media(max-width:620px){

    .hero-carousel{
        height:700px;
    }

    .hero-slides{
        height:700px;
    }

    .hero-slide{
        grid-template-rows:430px 270px;

        height:700px;
    }

    .hero-carousel .hero-copy{
        min-height:430px;

        padding:
            42px
            7%;
    }

    .hero-carousel .hero-kicker{
        font-size:10px;

        letter-spacing:3px;
    }

    .hero-carousel .hero-script,
    .hero-carousel .hero-copy h1{
        font-size:40px;
    }

    .hero-carousel .hero-copy p{
        font-size:15px;
    }

    .hero-carousel .hero-mini{
        gap:12px;

        margin-top:20px;
    }

    .hero-carousel .hero-art{
        height:270px;
        min-height:270px;
    }

    .hero-arrow{
        width:40px;
        height:40px;

        font-size:28px;
    }

}