/* Custom styles */
html,body{height:100%;margin:0;font-family: Poppins, sans-serif}
.container{max-width:1200px}
/* Adjust for fixed header: keep header overlaying the hero
by removing body padding and adding top spacing to non-hero content */
body{padding-top:0}
/* Ensure content (except the hero) is offset so the fixed header doesn't cover it
Use `--header-height-desktop` and `--header-height-mobile` from theme.css */
main > :not(.hero-slideshow){padding-top:var(--header-height-desktop)}
/* Allow specific sections to opt-out of the automatic header offset so they sit
flush against the preceding hero (useful for full-bleed panels). */
main > .no-header-offset{padding-top:0}
/* More generic override: allow any element to opt-out of the automatic
header offset by adding `no-header-offset` (useful for inner sections
or blocks that need to sit flush). Use `!important` to ensure the rule
wins over component-level spacing. */
.no-header-offset{padding-top:0 !important}
/* Site header: transparent at top, dark when scrolled */
.site-header{background:var(--header-bg-top);backdrop-filter:none;border-bottom:0;transition:background-color var(--transition-medium) ease,backdrop-filter var(--transition-medium) ease,box-shadow var(--transition-medium) ease;padding-top:16px;padding-bottom:16px}
/* make room and ensure header contents stack above the decorative overlay */
.site-header{position:fixed;z-index:9999}
.site-header::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0.04));opacity:0;transition:opacity 220ms ease}
.site-header > .container{position:relative;z-index:1}
.site-header{background:transparent;color:inherit}
.site-header *{color:inherit}
.site-header .nav-center .nav-link{color:rgba(255,255,255,0.95)}
.site-header .academy-pill{color:#fff;background:var(--academy-pill-bg)}
.site-header .social-icon{background:rgba(255,255,255,0.04);color:#fff}
.site-header .logo{filter:none}
.site-header-placeholder{display:block}
.site-header-placeholder, #site-header-placeholder{height:var(--header-height-desktop,72px);min-height:56px}
/* Hide the injected placeholder when the header already offsets content via CSS
to avoid double spacing (prevents a visible white stripe at the top). */
#site-header-placeholder{display:none;background:transparent}
.site-header-placeholder.header-loading, #site-header-placeholder.header-loading{background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.04));backdrop-filter:blur(2px)}
.site-header .logo{height:64px}
.site-header.scrolled{background:rgba(0,0,0,0.92);border-bottom:0;padding-top:10px;padding-bottom:10px}
/* Ensure Recursos page sections use clean white backgrounds so no dark bands appear between sections */
.page-recursos section{background:#fff}
.page-recursos{background:#fff}
/* Hide any injected header placeholder or duplicate header elements inside the recursos content
(caused by duplicate header includes or placeholder remnants). Keep header styling untouched. */
.page-recursos #site-header-placeholder,
.page-recursos .site-header-placeholder,
.page-recursos header.site-header + .site-header-placeholder{display:none !important}
/* Ensure sections that use Tailwind utility classes don't accidentally show a dark band */
.page-recursos section, .page-recursos .bg-gray-50{background:#fff !important}
.site-header.scrolled{transition:background-color var(--transition-medium) ease,box-shadow var(--transition-medium) ease}
/* Keep social icons visible (white) when header becomes scrolled/dark */
.site-header.scrolled .social-icon{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.06)}
.site-header.scrolled .social-icon:hover{background:rgba(255,255,255,0.12);filter:brightness(1.04)}
.site-header.scrolled .nav-center .nav-link{color:rgba(255,255,255,0.92)}
.nav-center{gap:2.5rem;align-items:center}
.nav-center .nav-link{display:inline-flex;align-items:center;gap:8px;color:#ffffff;opacity:0.95;font-weight:700;font-size:1.02rem;padding:8px 14px;background:transparent;border-radius:999px;line-height:1;min-height:44px;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
.nav-center .nav-link:hover{opacity:0.98;transform:translateY(-1px)}
/* Make header visible only on the Academy placeholder page */
/* Make header visible only on the Academy placeholder page */
body.page-academy header.site-header{
background: rgba(2,6,23,0.95) !important;
box-shadow: 0 8px 36px rgba(2,6,23,0.18);
color: #fff !important;
border-bottom: 0;
}
body.page-academy header.site-header *{color: #fff !important}
body.page-academy header.site-header .nav-center .nav-link{color:rgba(255,255,255,0.95) !important}
body.page-academy header.site-header .academy-pill{background:linear-gradient(180deg,#ef3b36,#df3a37);color:#fff;border-radius:999px}
/* ensure placeholder spacing stays present for fixed header */
body.page-academy .site-header-placeholder, body.page-academy #site-header-placeholder{display:block}
@media (max-width:768px){
body.page-academy header.site-header{padding-top:10px;padding-bottom:10px}
body.page-academy header.site-header .logo{height:40px}
}
/* Ensure academy page content sits below fixed header and footer spacing is comfortable */
body.page-academy main{padding-top:calc(var(--header-height-desktop,72px) + 12px)}
body.page-academy main > *{box-sizing:border-box}
/* Footer spacing specific to academy page */
body.page-academy .site-footer{padding-top:36px;padding-bottom:48px}
body.page-academy .site-footer .container{padding-left:24px;padding-right:24px}
/* Improve header layout on small screens for academy page */
@media (max-width:768px){
body.page-academy header.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-height-mobile);display:flex;align-items:center}
body.page-academy main{padding-top:calc(var(--header-height-mobile,64px) + 8px)}
}
/* Ensure header elements (logo, nav) have sufficient contrast and spacing */
body.page-academy header.site-header .logo{filter:none}
body.page-academy header.site-header .nav-center{gap:1.25rem}
/* Tidy up: ensure the hero card doesn't overlap header on very large screens */
body.page-academy .uc-hero{padding-top:24px}
.site-header .nav-link.active{
/* Pill-style active link (match Servicios/Academy) */
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
color:#fff !important;
background:linear-gradient(180deg,#ef3b36 0,#df3a37 100%);
padding:10px 18px !important;
border-radius:999px !important;
min-height:44px;
line-height:1;
box-shadow:0 12px 32px rgba(239,59,54,0.12);
border:1px solid rgba(0,0,0,0.06);
transform:translateY(-2px);
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.site-header .nav-link.active:hover{ transform:translateY(-3px) scale(1.02) }
.academy-pill{background:var(--academy-pill-bg);color:var(--academy-pill-color);border-radius:9999px;padding:12px 20px;box-shadow:0 18px 42px rgba(239,59,54,0.20);font-weight:800;font-size:1.02rem;display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap;line-height:1}
.nav-center .academy-pill{transform:translateY(-2px)}
.social-icons a{opacity:0.9}
/* Social icons in header: circular, visible on dark header */
.social-icons{display:flex;align-items:center;gap:14px}
.social-icon{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;color:rgba(255,255,255,0.95);background:rgba(0,0,0,0.36);border:1px solid rgba(255,255,255,0.06);transition:transform 180ms ease,background 180ms ease,box-shadow 180ms ease;text-decoration:none}
.social-icon svg{display:block;width:20px;height:20px}
.social-icon:hover{transform:translateY(-3px);background:rgba(255,255,255,0.12);box-shadow:0 10px 26px rgba(0,0,0,0.32)}
.social-icon:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px}
.social-icons .social-icon + .social-icon{margin-left:8px}
@media (max-width:768px){
body{padding-top:0}
.site-header .logo{height:40px}
main > :not(.hero-slideshow){padding-top:var(--header-height-mobile)}
/* Ensure the no-header-offset opt-out also applies on small screens */
main > .no-header-offset{padding-top:0}
/* Generic mobile override */
.no-header-offset{padding-top:0 !important}
#site-header-placeholder, .site-header-placeholder{height:var(--header-height-mobile,56px)}
}
/* Header grid and responsive tweaks */
.site-header .container > .grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.site-header .nav-center{justify-self:center}
/* Smaller pill and tighter nav spacing on medium screens */
@media (max-width:1024px){
.nav-center{gap:1rem}
.academy-pill{padding:8px 14px;font-size:0.95rem}
}
/* Compact header for narrow/tall-limited viewports */
@media (max-width:900px){
.site-header{padding-top:6px;padding-bottom:6px}
.site-header .logo{height:42px}
.academy-pill{padding:7px 12px;font-size:0.92rem}
.nav-center .nav-link{padding:6px 8px}
}
/* When vertical space is very constrained, reduce header footprint further */
@media (max-height:520px){
.site-header{padding-top:4px;padding-bottom:4px}
.site-header .logo{height:36px}
.academy-pill{padding:6px 10px;font-size:0.88rem}
.social-icons{display:none}
}
/* Headings */
h1,h2,h3{font-family: Montserrat, sans-serif}
/* Hero left panel */
.hero-card{background-color:rgba(239,59,54,0.95)}
/* Make hero text taller and spaced similar to the design */
.hero-heading{letter-spacing:0.5px}
/* Academy pill shadow */
.academy-pill{box-shadow:0 6px 18px rgba(0,0,0,0.18)}
/* Improve contrast on background overlays */
.bg-overlay-dark{background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35))}
/* Feature icon container used in academy section */
.feature-icon{width:56px;height:56px;border-radius:12px;background:rgba(239,59,54,0.06);display:flex;align-items:center;justify-content:center}
.feature-icon img{width:36px;height:36px;display:block}
/* Make images scale proportionally by default, but allow targeted overrides */
img{max-width:100%;height:auto;display:block}
/* Left hero image specific rules: full height on desktop, auto height on small screens */
.hero-side-img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:768px){
.hero-side-img{height:auto}
/* Make header compact and wrap nav items on small screens */
.site-header{padding-top:8px;padding-bottom:8px}
.site-header .logo{height:44px}
.nav-center{gap:0.75rem;flex-wrap:wrap;justify-content:flex-start}
.nav-center .nav-link{font-size:0.95rem;padding:6px 10px}
.social-icons{display:none}
/* Re-enable header placeholder on small screens so content doesn't hide behind fixed header */
#site-header-placeholder{display:block}
}
/* Mobile menu (overlay) styling - clean, professional */
#mobileMenu{
position:absolute;
top:100%;
left:0;
width:100%;
z-index:9998;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
background:rgba(0,0,0,0.55);
transition:opacity .28s ease, transform .28s ease;
transform-origin:top center;
}
#mobileMenu.hidden{opacity:0;transform:scaleY(0.98);pointer-events:none}
#mobileMenu:not(.hidden){opacity:1;transform:none;pointer-events:auto}
#mobileMenu a{display:block;padding:14px 18px;border-radius:10px;margin:6px 0;color:#fff;text-decoration:none}
#mobileMenu a:hover{background:rgba(255,255,255,0.03)}
/* Academy pill inside mobile menu */
#mobileMenu .academy-pill{display:inline-flex;margin:8px 0;padding:10px 14px;border-radius:999px;box-shadow:none;background:linear-gradient(180deg,#ef3b36,#df3a37)}
/* Menu button visual polish */
#menuBtn{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);padding:8px;border-radius:10px}
#menuBtn svg{display:block}
#menuBtn:focus{outline:2px solid rgba(239,59,54,0.18);outline-offset:2px}
/* Hamburger -> X simple transform when open */
#menuBtn{transition:transform .22s ease, background .18s ease, box-shadow .18s ease}
#menuBtn svg{transition:transform .28s cubic-bezier(.2,.9,.2,1)}
#menuBtn.open{background:rgba(239,59,54,0.08);box-shadow:0 6px 20px rgba(239,59,54,0.06)}
#menuBtn.open svg{transform:rotate(90deg) scale(0.95)}
/* Ensure header reduces clutter on very narrow screens: show logo + hamburger only */
@media (max-width:767px){
.site-header .container > .grid{grid-template-columns:auto auto;}
.site-header .nav-center{display:none}
.social-icons{display:none}
.logo{max-height:44px}
}
/* Mobile menu inner container spacing */
#mobileMenu{padding:12px 18px 18px}
/* Full-screen panels (inicio) */
main{scroll-snap-type:y mandatory}
section{scroll-snap-align:start}
.panel{min-height:100vh;background-size:cover;background-position:center;position:relative;display:flex;align-items:center}
.panel .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.35));}
.panel .container{position:relative;z-index:1}
/* Purpose panel and purpose-section removed (migrated to Tailwind) */
/* Value band removed (migrated to Tailwind) */
/* Services band (dark band with clear contrast) */
.services-band{
background:linear-gradient(180deg,#0b0b0b 0%, #0f0f0f 100%);
color:#fff;
padding-top:3.5rem;
padding-bottom:3.5rem;
box-shadow: inset 0 12px 40px rgba(0,0,0,0.18);
}
.services-band h2{color:#fff;margin-bottom:1rem}
.services-band .grid{align-items:center}
.services-band .service-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:20px 12px}
.services-band .service-item img{width:96px;height:auto;margin-bottom:10px;filter:brightness(0) invert(1)}
/* Uniform icons for "Nuestros Servicios" section */
.service-icon{
width:96px;
height:96px;
display:block;
object-fit:contain;
-o-object-fit:contain;
}
@media(max-width:768px){
.service-icon{width:72px;height:72px}
}
.services-band .service-item h4{color:#fff;font-size:0.95rem;margin-top:10px;font-weight:800;line-height:1.05;letter-spacing:0.8px;max-width:220px}
/* Ensure services-band sits above any transparent overlays (raise slightly) */
.services-band{position:relative;z-index:5}
@media (max-width:768px){
.value-band .value-card{padding:20px}
.value-band .icon img{width:48px}
}
/* Clients carousel */
.clients-carousel h4{font-size:2rem}
.clients-track-wrapper{overflow:hidden;margin:0 56px;}
.clients-track{display:flex;gap:48px;align-items:center;padding:18px 8px;list-style:none;margin:0;transition:transform 400ms ease}
.client-item{flex:0 0 180px;display:flex;align-items:center;justify-content:center}
.client-item img{max-width:180px;max-height:60px;display:block;object-fit:contain;filter:grayscale(0.05)}
.clients-track{will-change:transform}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#ef3b36;font-size:36px;width:40px;height:40px;cursor:pointer}
.clients-prev{left:8px}
.clients-next{right:8px}
@media (max-width:768px){
.clients-track{gap:18px}
.client-item{flex:0 0 130px}
.client-item img{max-width:120px}
.clients-track-wrapper{margin:0 12px}
}
@media (max-width:768px){
.services-band .service-item img{width:64px}
.services-band .service-item h4{font-size:0.86rem}
}
/* Footer styles */
.site-footer{background:#07121a;padding-top:36px;padding-bottom:36px}
.site-footer .follow{color:#fff;margin-bottom:6px}
.socials{display:flex;gap:14px;justify-content:center;align-items:center}
.site-footer .social-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#ef3b36;border:1px solid rgba(239,59,54,0.12);text-decoration:none;background:transparent}
.site-footer .social-icon svg{width:18px;height:18px;fill:currentColor}
.site-footer .social-icon:hover{transform:translateY(-3px);filter:brightness(1.1)}
.accent-line{width:80px;height:2px;background:#ef3b36;margin:18px auto 0;border-radius:2px}
.site-footer .copyright{font-size:0.95rem;color:rgba(255,255,255,0.95);margin-top:12px}
@media (max-width:768px){
.site-footer .social-icon{width:34px;height:34px}
.accent-line{width:56px}
}
/* Hero text image adjustments */
.hero-text-img{max-width:680px}
/* Index hero red panel tweaks */
.index-red-panel{max-width:920px;padding:56px 64px;border-radius:20px;min-height:clamp(320px,40vh,620px);display:flex;flex-direction:column;justify-content:center;transition:box-shadow 240ms ease, transform 360ms ease, opacity 360ms ease}
.index-red-panel h1{font-size:2.6rem;line-height:1.02}
/* Make heading weight lighter for a premium, less heavy look */
.index-red-panel h1{font-weight:400}
/* Improve red panel visuals */
.index-red-panel{box-shadow:0 18px 46px rgba(2,6,23,0.44);border:1px solid rgba(0,0,0,0.06)}
/* Inner wrapper used for the bottom->top reveal animation (keeps outer layout untouched) */
.index-red-inner{display:flex;flex-direction:column;justify-content:center;gap:0.6rem}
/* Reveal: whole panel moves bottom -> top and ends slightly elevated for a premium feel */
.index-red-panel.reveal-up{opacity:0;transform:translateY(36px) scale(0.985)}
.index-red-panel.reveal-up.animated{opacity:1;transform:translateY(-6vh) scale(1);transition:opacity 680ms ease, transform 680ms cubic-bezier(.2,.9,.2,1);box-shadow:0 34px 88px rgba(2,6,23,0.58)}
/* subtle glossy highlight for premium look */
.index-red-panel{position:relative;border:1px solid rgba(0,0,0,0.06);overflow:hidden}
.index-red-panel::after{content:"";position:absolute;left:0;top:0;width:48%;height:22%;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0));border-top-left-radius:20px;pointer-events:none;mix-blend-mode:overlay}
/* CTA adjustments: smaller, cleaner button */
.btn-cert{padding:10px 18px;font-size:0.96rem;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,0.28);display:inline-block;min-width:150px;text-align:center}
.btn-cert:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,0.34)}
@media(min-width:768px){
.index-red-panel{padding:48px 56px;min-height:34vh}
.index-red-panel h1{font-size:2.6rem}
}
@media(min-width:1200px){
.index-red-panel{padding:64px 64px;min-height:38vh}
.index-red-panel h1{font-size:3.2rem}
}
@media(min-width:768px){
.index-red-panel{padding:64px 72px;min-height:38vh}
.index-red-panel h1{font-size:3.2rem}
}
@media(min-width:1200px){
.index-red-panel{padding:80px 84px;min-height:44vh}
.index-red-panel h1{font-size:3.8rem}
}
@media(max-width:768px){
/* Reduce vertical offset on small screens so the panel doesn't intrude */
.index-red-panel.reveal-up{transform:translateY(18px) scale(0.996)}
.index-red-panel.reveal-up.animated{transform:translateY(0) scale(1)}
.index-red-panel{padding:28px 20px;min-height:220px}
.index-red-panel h1{font-size:1.5rem}
}
/* Sections spacing */
section{padding-top:3rem;padding-bottom:3rem}
/* Hero slideshow and legacy hero-card styles removed — replaced by Tailwind utilities in HTML */
/* Intro card removed (migrated to Tailwind) */
/* Legacy hero-card and related rules removed (replaced by Tailwind utilities in HTML) */
/* Legacy .services-hero styles removed — services page now uses Tailwind utilities and servicios.css for any extra polish */
/* Reveal animation */
.reveal-up{opacity:0;transform:translateY(18px);transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.9,.2,1)}
.reveal-up.animated{opacity:1;transform:none}
/* Services page: reduce heading weight and soften text for premium feel */
.service-inner h3{font-family:Montserrat, sans-serif;font-weight:600;letter-spacing:0.6px}
.service-inner p{font-weight:400;color:rgba(255,255,255,0.92);line-height:1.6}
/* Slight stagger effect for stacked service blocks (small visual polish) */
.service-block.reveal-up{will-change:transform,opacity}
.service-block.reveal-up.animated{transition:transform 640ms cubic-bezier(.2,.9,.2,1), opacity 640ms ease}
@media (min-width:1200px){
.services-hero .red-panel{max-width:560px}
}
/* Legacy hero slideshow/hero-card-main rules removed (migrated to Tailwind) */
/* Utility: center nav pill spacing */
.uppercase{text-transform:uppercase;letter-spacing:0.6px}
.no-transform{text-transform:none}
.nav-center .academy-pill{margin-right:8px}