:root{
  --text:#eaf1ff; --muted:#b9c7ff;
  --card-bg:rgba(255,255,255,.045); --card-border:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --dinova:#38b000; --sabor:#ff5c39; --arcaira:#b965ff; --itteka:#36c2ff;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  color:var(--text);
  background:radial-gradient(1400px 800px at 70% -10%, rgba(255,255,255,.04), transparent 70%),
             linear-gradient(180deg,#000814 0%,#00030c 50%,#000 100%);
  background-attachment:fixed; background-repeat:no-repeat; background-size:cover;
}
.wrap{max-width:1180px; margin:0 auto; padding:22px 16px 48px; min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; gap:8px}

/* Header compacto */
header.hero{display:grid; place-items:center; gap:10px; padding:8px 0 0; text-align:center; position:relative}
.brand{position:relative; display:inline-block}
.brand::before{content:"";position:absolute;inset:-26px;background:radial-gradient(circle at 50% 50%,rgba(120,200,255,.25) 0%,rgba(120,200,255,.1) 40%,transparent 70%);filter:blur(58px);z-index:0;border-radius:50%;opacity:.7;animation:pulse 5s ease-in-out infinite}
.brand::after{content:"";position:absolute;inset:-16px;z-index:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(111,66,193,.35),rgba(64,224,208,.35),rgba(72,61,139,.35),rgba(0,200,83,.35),rgba(111,66,193,.35));filter:blur(46px);opacity:.45;animation:spin 14s linear infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}
.brand img{position:relative;z-index:1;width:200px;height:auto;display:block;filter:drop-shadow(0 14px 28px rgba(0,0,0,.65))}
@media(min-width:900px){.brand img{width:220px}}
h1{font-size:clamp(24px,3.2vw,36px);margin:2px 0 0;font-weight:800}
p.tagline{margin:0;font-size:clamp(14px,2.2vw,16px);color:var(--muted)}

/* About */
.about{margin-top:16px;text-align:center;max-width:850px;margin-inline:auto}
.about h2{font-size:22px;margin:0 0 6px;font-weight:700}
.about p{font-size:15px;color:var(--muted);line-height:1.6;margin:0 0 8px}
.about strong{color:#fff}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:18px auto 14px;width:min(90%,920px)}

/* Segmentos (compactos y con brillo) */
section.segments{text-align:center;margin-top:6px}
.segments h2{font-size:20px;margin:0 0 6px;font-weight:700}
.segments p.lead{margin:0 0 12px;color:var(--muted);font-size:14px}
.grid{margin-top:10px;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
a.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  padding:18px;border-radius:16px;background:var(--card-bg);
  border:1.5px solid var(--card-border);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:140px
}
a.card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  animation:glowPulse 1.6s infinite;
}
@keyframes glowPulse{
  0%,100%{
    box-shadow:0 18px 40px rgba(0,0,0,.6),
               0 0 12px color-mix(in oklab, var(--hover-c,#ffffff) 35%, transparent);
  }
  50%{
    box-shadow:0 18px 40px rgba(0,0,0,.6),
               0 0 22px color-mix(in oklab, var(--hover-c,#ffffff) 70%, transparent);
  }
}
.card .badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.2px;font-size:12px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);margin-bottom:8px}
.card h3{margin:4px 0 6px;font-size:18px}
.card p{margin:0;font-size:13px;color:var(--muted)}
.glow{position:absolute;inset:-30%;pointer-events:none;opacity:.2;filter:blur(40px);background:radial-gradient(380px 200px at 30% 15%, var(--glow,#fff), transparent 60%)}
.card[data-seg="dinova"]{--glow:var(--dinova);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--dinova) 50%,transparent),var(--shadow)}
.card[data-seg="sabor"]{--glow:var(--sabor);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sabor) 50%,transparent),var(--shadow)}
.card[data-seg="arcaira"]{--glow:var(--arcaira);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--arcaira) 50%,transparent),var(--shadow)}
.card[data-seg="itteka"]{--glow:var(--itteka);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--itteka) 50%,transparent),var(--shadow)}
.card[data-seg="dinova"]:hover{--hover-c:var(--dinova)}
.card[data-seg="sabor"]:hover{--hover-c:var(--sabor)}
.card[data-seg="arcaira"]:hover{--hover-c:var(--arcaira)}
.card[data-seg="itteka"]:hover{--hover-c:var(--itteka)}

/* Banner grande debajo de segmentos */
.hero-banner{margin-top:14px}
.hero-banner a{display:block;border-radius:16px;overflow:hidden}
.hero-banner img{width:100%;max-width:1180px;height:auto;display:block;border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.48)}
.hero-banner a:hover img{transform:scale(1.01);box-shadow:0 20px 56px rgba(0,255,120,.25);transition:transform .25s ease, box-shadow .25s ease}

/* Promos laterales + centro (SIN banner chico) */
.promo-layout{margin-top:18px;display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:14px;align-items:start}
.ad-card{position:relative;display:block;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 26px rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-decoration:none;color:inherit;transition:.18s}
.ad-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.55);border-color:rgba(255,255,255,.18)}
.ad-card img{display:block;width:100%;height:auto}
.ad-body{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;display:grid;gap:2px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));font-size:12px}
.ad-body strong{font-size:13px}.ad-body span{color:var(--muted)}
.promo-center{display:grid;grid-template-rows:auto;gap:14px}
.mid-ad{border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);box-shadow:0 12px 26px rgba(0,0,0,.45);overflow:hidden;display:grid}
.mid-ad img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/9}
.mid-body{padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:8px}
.mid-ad h4{margin:0;font-size:15px}.mid-ad a.cta{text-decoration:none;font-weight:800;font-size:12px;background:#eaf1ff;color:#0b122b;padding:7px 10px;border-radius:9px}

/* Responsive */
@media(max-width:1099px){
  .promo-layout{grid-template-columns:1fr}
  .ad-card{display:grid;grid-template-columns:140px 1fr;align-items:center;min-height:120px}
  .ad-card img{height:120px;object-fit:cover}
  .ad-body{position:static;background:none;padding:10px 12px}
  .promo-center{grid-template-rows:auto}
}
@media(max-width:520px){
  .ad-card{grid-template-columns:1fr}
  .ad-card img{width:100%;height:180px;object-fit:cover}
}

/* Extras + footer */
.extra{margin-top:30px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:14px;padding:16px;box-shadow:0 10px 24px rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.extra h3{margin:0 0 8px;font-size:18px}.extra p{margin:0 0 6px;color:var(--muted)} .extra .cta{display:inline-block;margin-top:6px;padding:9px 12px;border-radius:10px;text-decoration:none;color:#0b122b;font-weight:700;background:#eaf1ff}
footer{margin-top:32px;text-align:center;font-size:12px;color:#a8b5ff;opacity:.9}
.footer-links{display:inline-flex;gap:12px}.footer-links a{color:inherit;opacity:.9;text-decoration:none}.footer-links a:hover{text-decoration:underline}