/* OA-SGF-UY-2026 — Diseño web: Orange Attitude para SGF Uruguay */
/* Landing page specific styles */
:root{--oa-designer:"orange-attitude";--oa-design-id:"sgf-uy-2026"}

/* Header minimal */
.header-actions{display:flex;align-items:center;gap:1rem}
.header-phone{font-weight:700;font-size:.95rem;color:#fff}

/* Hero landing */
.hero--landing .hero-content--landing{grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;padding-top:6rem;padding-bottom:4rem}
.hero-text{max-width:620px}
.hero-eyebrow{display:inline-block;padding:.4rem 1rem;border-radius:var(--radius-xl);border:1px solid rgba(17,155,216,.35);background:rgba(17,155,216,.1);color:var(--sgf-cyan-1);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.25rem}
.hero-title{margin-bottom:1.5rem}
.hero-title .line{display:block;font-size:50px}
.hero-title .accent{margin-top:.25rem}
.hero-subtitle{font-size:1.05rem;color:rgba(255,255,255,.85);line-height:1.7;margin-bottom:2rem;max-width:560px;font-weight:400}
.hero-badges{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:var(--radius-xl);background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#fff;font-weight:500}
.hero-badge i{font-style:normal;font-size:1rem}

/* Hero audiences panel */
.hero-audiences{display:flex;flex-direction:column;gap:1.25rem}
.hero-audiences__title{text-align:center;font-size:clamp(1.75rem,2vw,2rem);line-height:1.15;margin-bottom:inherit;font-family:'League Spartan',sans-serif;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.audience-block{padding:1.75rem 2rem;border-radius:var(--radius-lg);background:rgb(17 155 215);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column}
.audience-block h3{font-family:'League Spartan',sans-serif;font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.audience-block p{font-size:.9rem;color:var(--sgf-text-light);line-height:1.6;margin-bottom:1.25rem}
.audience-note{display:block;margin-top:.75rem;font-size:.8rem;color:var(--sgf-text-muted)}
.audience-block--empresa{background:rgb(251 234 34 / 90%);border-color:rgba(255,255,255,.18)}
.audience-block--empresa h3{color:#181B35}
.audience-block--empresa p{color:rgb(24 27 53)}
.audience-block--empresa .audience-note{color:rgb(0 0 0)}
.btn-audience{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem 1.25rem;border-radius:var(--radius-xl);font-family:'League Spartan',sans-serif;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-audience--empleo{border:1px solid #fff;color:#fff;background:transparent}
.btn-audience--empleo:hover{background:#fff;color:#181B35;transform:translateY(-2px)}
.btn-audience--empresa{border:1px solid var(--sgf-yellow);color:#181B35;background:#ffffff;font-size:17px;box-shadow:0 0 22px rgba(251,234,34,.35)}
.btn-audience--empresa:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(251,234,34,.55)}

/* CTA empleo header */
.cta-empleo{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-xl);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#181B35;background:#ffffff;transition:background .2s,border-color .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.cta-empleo:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* Secondary service cards */
.secondary-card{display:flex;flex-direction:column;justify-content:space-between;padding:1.75rem;border-radius:var(--radius-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);height:100%}
.secondary-card__body{flex:1}
.secondary-card h4{margin-bottom:.75rem;font-size:1rem}
.secondary-card p{margin-bottom:1.25rem;color:var(--sgf-text-muted);font-size:.9rem;line-height:1.55}
.btn-service{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.85rem .6rem;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:#fff;font-family:'League Spartan',sans-serif;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn-service:hover{background:var(--sgf-yellow);border-color:var(--sgf-yellow);color:#181B35;transform:translateY(-2px)}

/* Trust bar */
.trust-bar{padding:1.25rem 0;background:rgba(17,155,216,.12);border-top:1px solid rgba(17,155,216,.2);border-bottom:1px solid rgba(17,155,216,.2)}
.trust-bar__inner{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#ffffff;font-weight:700}
.trust-items{display:flex;gap:2rem;flex-wrap:wrap}
.trust-items span{position:relative;padding-left:1rem}
.trust-items span::before{content:'';position:absolute;left:0;top:.35rem;width:6px;height:6px;border-radius:50%;background:var(--sgf-yellow)}

/* Services landing */
.services--landing{background:linear-gradient(180deg,#0b0e22 0%,#0d1026 50%,#0b0e22 100%);position:relative}
.services--landing::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(17,155,216,.08),transparent 40%);pointer-events:none}
.services-grid--featured{grid-template-columns:repeat(2,1fr);position:relative;z-index:1}
.service-card--large{padding:2.5rem}
.service-card--large ul{margin:1rem 0 1.5rem;padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem}
.service-card--large li{color:var(--sgf-text-light);font-size:.92rem}
.service-card--large .btn{margin-top:auto;align-self:flex-start}

/* Secondary services */
.secondary-services{padding:5rem 0;background:linear-gradient(180deg,#131836 0%,#0d1229 100%);position:relative}
.secondary-services::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 80%,rgba(251,234,34,.06),transparent 35%);pointer-events:none}
.secondary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.secondary-card{padding:1.5rem;border-radius:var(--radius-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:transform .2s,border-color .2s}
.secondary-card:hover{transform:translateY(-4px);border-color:rgba(17,155,216,.35)}
.secondary-card h4{font-family:'League Spartan',sans-serif;font-size:1rem;font-weight:700;color:#fff;margin-bottom:.5rem;text-transform:uppercase}
.secondary-card p{font-size:.85rem;color:var(--sgf-text-muted);line-height:1.5}

/* Process landing */
.process--landing{background:linear-gradient(180deg,#0b0e22 0%,#0a0c1e 100%);position:relative;text-align:center}
.process--landing::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(17,155,216,.06),transparent 45%);pointer-events:none}
.process--landing .section-header{margin-inline:auto;text-align:center}
.process--landing .section-title{white-space:nowrap;display:block;width:100%;text-align:center}
.process-steps--landing{max-width:900px;margin-inline:auto;position:relative;z-index:1;justify-content:center}
.process-cta{text-align:center;margin-top:2.5rem;position:relative;z-index:1}

/* Final CTA landing */
.final-cta--landing .final-cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
.final-cta__content{max-width:700px}
.final-cta__buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.final-cta__buttons .btn{min-width:240px}

/* Footer landing */
.site-footer--landing{padding:1.5rem 0}
.footer-bottom--landing{justify-content:center;text-align:center}

/* Mobile */
@media (max-width:980px){
  .hero--landing .hero-content--landing{grid-template-columns:1fr;padding-top:40px;padding-bottom:3rem;min-height:auto;gap:3rem}
  .hero-audiences{order:-1}
  .hero-title .line{font-size:30px}
  .hero-subtitle{font-size:.95rem;margin-bottom:1.25rem}
  .hero-badges{flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:1.25rem}
  .hero-badge{font-size:.8rem;padding:.45rem .9rem}
  .hero-audiences__title{font-size:1.35rem;margin-bottom:1rem}
  .audience-block{padding:1.25rem 1.5rem}
  .audience-block h3{font-size:1.15rem}
  .audience-block p{font-size:.85rem;margin-bottom:1rem}
  .btn-audience{padding:.85rem 1rem;font-size:.75rem}
  .services-grid--featured,.secondary-grid,.about-sgf__inner,.about-sgf__stats{grid-template-columns:1fr}
  .final-cta__buttons{flex-direction:column}
  .final-cta__buttons .btn{width:100%}
  .trust-bar__inner{flex-direction:column;gap:1rem;text-align:center}
  .trust-items{justify-content:center}
  .about-sgf__stats{grid-template-columns:1fr 1fr}
  .header-actions .cta-empleo{display:none}
  .process--landing .section-title{white-space:normal;font-size:1.6rem}
  .about-sgf__inner{grid-template-columns:1fr !important}
  .hero-scroll{display:none}
}
@media (max-width:640px){
  .service-card--large .btn{width:100%}
}

.social-proof--landing{background:linear-gradient(180deg,#0d1229 0%,#111733 100%);position:relative}
@media (max-width:1100px){
  .secondary-grid{grid-template-columns:repeat(2,1fr)}
}
/* About SGF + clients unified */
.about-sgf{padding:5rem 0;background:linear-gradient(180deg,#0b0e22 0%,#0d1229 100%)}
.about-sgf__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center;padding-bottom:4rem}
.about-sgf__text p{color:var(--sgf-text-light);line-height:1.7;margin-bottom:1rem}
.about-sgf__stats{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.about-stat{padding:1.5rem;border-radius:var(--radius-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center}
.about-stat__value{display:block;font-family:'League Spartan',sans-serif;font-size:2.2rem;font-weight:800;color:var(--sgf-yellow);line-height:1}
.about-stat__label{display:block;margin-top:.5rem;font-size:.8rem;color:var(--sgf-text-muted);text-transform:uppercase;letter-spacing:.06em}
.clients-bar{padding-top:3rem;border-top:1px solid rgba(255,255,255,.08)}
.clients-bar__title{text-align:center;font-size:17px;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:1.5rem}
.clients-logos{display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap;opacity:.6;margin-bottom:2.5rem}
.client-logo{padding:.75rem 1.5rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.02em}
.clients-cta{text-align:center}

.site-header .cta-empleo{font-size:12px}

.site-header .logo img{width:auto;height:60px}
/* ANIMACIONES V2 */

/* Animaciones de entrada */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(251,234,34,.3)}50%{box-shadow:0 0 40px rgba(251,234,34,.6)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:60px 60px}}

/* Hero title palabra por palabra */
.hero-title .line{opacity:0;animation:fadeInUp .8s ease forwards}
.hero-title .line:nth-child(1){animation-delay:.2s}
.hero-title .line:nth-child(2){animation-delay:.4s}
.hero-title .line:nth-child(3){animation-delay:.6s}

.hero-eyebrow{opacity:0;animation:slideDown .6s ease forwards}
.hero-subtitle{opacity:0;animation:fadeInUp .8s ease .7s forwards}
.hero-badges{opacity:0;animation:fadeInUp .8s ease .9s forwards}
.hero-audiences{opacity:0;animation:fadeInRight .9s ease .5s forwards}

/* Grid animado */
.hero-grid{animation:gridMove 20s linear infinite}

/* Glows pulsantes */
.hero-glow--cyan{animation:pulseCyan 6s ease-in-out infinite}
.hero-glow--yellow{animation:pulseYellow 7s ease-in-out infinite}
@keyframes pulseCyan{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.15);opacity:.55}}
@keyframes pulseYellow{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.1);opacity:.28}}

/* Audience blocks float */
.audience-block--empleo{animation:float 5s ease-in-out infinite}
.audience-block--empresa{animation:float 5.5s ease-in-out infinite .5s}

/* CTAs glow pulse */
.btn-audience--empresa{animation:pulseGlow 2.5s ease-in-out infinite}

/* Trust bar shimmer */
.trust-bar{position:relative;overflow:hidden}
.trust-bar::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 4s ease-in-out infinite}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Stagger para cards */
.diff-card,.service-card,.secondary-card,.step,.metric,.faq-item,.testimonial{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.diff-card.is-visible,.service-card.is-visible,.secondary-card.is-visible,.step.is-visible,.metric.is-visible,.faq-item.is-visible,.testimonial.is-visible{opacity:1;transform:translateY(0)}

/* Hover más marcado */
.diff-card:hover,.service-card:hover,.secondary-card:hover{transform:translateY(-8px) scale(1.02)}
.service-card{transition:transform .3s ease,box-shadow .3s ease}
.service-card:hover{box-shadow:0 20px 50px rgba(17,155,216,.2)}

/* Hero scroll más visible */
.hero-scroll{animation:fadeInUp 1s ease 1.5s forwards;opacity:0}

/* Metric value glow */
.metric__value{color:var(--sgf-yellow);text-shadow:0 0 20px rgba(251,234,34,.3)}

/* Process steps connector animation */
.step__arrow span{display:inline-block;animation:bounceRight 1.5s ease-in-out infinite}
@keyframes bounceRight{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
/* Animaciones sutiles corporativas V2 */

/* Títulos de sección */
.section-header{transition:opacity .7s ease,transform .7s ease}
.section-kicker,.section-title{transition:opacity .6s ease,transform .6s ease}

/* Cards con hover sutil */
.diff-card,.secondary-card,.service-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.diff-card:hover{transform:translateY(-6px);border-color:rgba(17,155,216,.3)}
.secondary-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.25)}

/* Pasos del proceso */
.step{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.step:hover{transform:translateY(-4px);border-color:rgba(17,155,216,.35);box-shadow:0 10px 30px rgba(17,155,216,.1)}

/* Métricas */
.metric{transition:transform .3s ease}
.metric:hover{transform:translateY(-4px)}
.metric__value{transition:text-shadow .3s ease}
.metric:hover .metric__value{text-shadow:0 0 30px rgba(251,234,34,.5)}

/* FAQ */
.faq-item{transition:transform .3s ease,border-color .3s ease}
.faq-item:hover{transform:translateX(4px);border-color:rgba(17,155,216,.25)}

/* Testimonio */
.testimonial{transition:transform .4s ease,border-color .4s ease}
.testimonial:hover{transform:scale(1.01);border-color:rgba(17,155,216,.3)}

/* About stats */
.about-stat{transition:transform .3s ease,border-color .3s ease}
.about-stat:hover{transform:translateY(-4px);border-color:rgba(251,234,34,.3)}

/* Logos clientes */
.client-logo{transition:transform .3s ease,background .3s ease}
.client-logo:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}

/* CTA principal hover */
.btn-primary{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}

/* Trust bar más sutil */
.trust-items span{position:relative;transition:color .3s ease}
.trust-items span:hover{color:#fff}

/* Smooth scroll behavior */
html{scroll-behavior:smooth}
/* Logo carousel */
.logo-carousel{overflow:hidden;width:100%;margin:50px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;gap:4rem;animation:scrollLogos 35s linear infinite;width:max-content}
.logo-carousel:hover .logo-track{animation-play-state:paused}
.logo-slide{flex:0 0 auto;max-width:180px;height:45px;display:flex;align-items:center;justify-content:center;opacity:.9;transition:opacity .3s,transform .3s}
.logo-slide:hover{opacity:1;transform:scale(1.08)}
.logo-slide img{max-width:100%;max-height:100%;object-fit:contain}
@keyframes scrollLogos{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (max-width:980px){
  .logo-track{gap:2.5rem}
  .logo-slide{max-width:120px;height:36px}
}
.logo-white{filter:brightness(0) invert(1)}