/* Standalone preview stylesheet copied from preview-full-vision.html */
:root{
	--bg:#f7f7f8; --dark:#001019; --white:#ffffff;
	--accent:#5A11CC; --accent-rgb:90 17 204; --accent-rgb-csv:90,17,204; --accent-2:#7C9CBF;
	/* Safari-friendly precomputed rgba variations for the brand violet */
	--accent-010: rgba(90,17,204,0.10);
	--accent-012: rgba(90,17,204,0.12);
	--accent-014: rgba(90,17,204,0.14);
	--accent-008: rgba(90,17,204,0.08);
	--accent-006: rgba(90,17,204,0.06);
	--accent-022: rgba(90,17,204,0.22);
	font-family: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#111}
.wrap{max-width:1200px;margin:32px auto;padding:0 20px}

/* NAV (white background like index) */
.top-nav{background:var(--bg);border-radius:10px;padding:10px 20px;box-shadow:0 6px 20px rgba(0,0,0,0.06);position:sticky;top:0;z-index:1200;height:64px;min-height:64px;}
.top-nav .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;position:relative}
.top-nav .brand img{height:20px;width:auto;display:block}
.brand{font-weight:800;color:var(--dark);text-decoration:none}
.top-links{display:flex;gap:14px;align-items:center}
.top-links a{color:var(--dark);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:300;font-size:16px;}
.top-links a.btn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 12px;transition:none;box-shadow:none;}

/* Mobile hamburger button (hidden on desktop) */
.nav-toggle{display:none;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(0,0,0,0.10);background:transparent;color:var(--dark);cursor:pointer}
.nav-toggle svg{display:block}
.nav-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-022)}
.top-nav.over-hero .nav-toggle{color:#fff;border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.06)}

/* Nav link hover and active animation */
.top-links a{position:relative;transition:color .18s ease}
.top-links a::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:0;height:3px;border-radius:6px;background:var(--accent);transition:width .22s cubic-bezier(.2,.9,.2,1),opacity .18s ease;opacity:0}
.top-links a:hover{color:var(--accent)}
.top-links a.btn:hover{
	background:var(--accent);
	color:var(--white);
	border-color:var(--accent);
}
.top-links a.active{color:var(--accent);font-weight:400}
.top-links a.active::after{width:40%;opacity:1}

/* Language toggle: ensure flag and text are perfectly aligned */
.top-links .lang-toggle{display:inline-flex;align-items:center;gap:6px;line-height:1}
.top-links .lang-toggle img{display:block;height:14px;width:auto;border-radius:2px}

/* Fixed top nav when scrolling */
.top-nav.scrolled{
	border-radius:14px;
	padding:10px 20px;
	/* Liquid Glass effect */
	background: rgba(255,255,255,0.16);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
	border: 1px solid rgba(255,255,255,0.28);
	height:64px;min-height:64px;
}
.top-nav.scrolled::after{
	/* subtle inner highlight to enhance glass feel */
	content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
html.no-backdrop .top-nav.scrolled{
	/* Fallback when backdrop-filter is unsupported */
	background: rgba(255,255,255,0.95);
	box-shadow: 0 12px 30px rgba(0,0,0,0.10);
	border: 1px solid rgba(0,0,0,0.04);
}
.top-nav.scrolled .nav-inner{max-width:1200px;padding:0 20px}

/* High-contrast state when nav sits over hero imagery (at top) */
.top-nav.over-hero{
	background: transparent;
	box-shadow: none;
	border-color: transparent;
}
.top-nav.over-hero .top-links a{
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.top-nav.over-hero .top-links a.active{color:#fff}
.top-nav.over-hero .top-links a::after{background:#fff}
.top-nav.over-hero .top-links a.btn{
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.5);
	color: #fff;
}
.top-nav.over-hero .top-links a.btn:hover{
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
}
.top-nav.over-hero .brand img{
	/* Make dark logo appear light over imagery without swapping src */
	filter: invert(1) brightness(120%) saturate(0%);
}

/* Spacer used to prevent layout jump when nav becomes fixed */
.nav-spacer{display:block;width:100%;height:0;}

/* Smooth transition for visual changes */
.top-nav{transition:box-shadow .22s ease;}
.top-nav.scrolled{transition:box-shadow .22s ease;}

/* HERO split: left text, right big graphic */
.hero-split{display:grid;grid-template-columns:1fr 520px;gap:32px;align-items:center;margin-bottom:36px}
.hero-copy h1{font-size:48px;margin:0 0 12px;line-height:1.02}
.hero-copy p{color:#444;margin:0 0 18px;font-size:18px}
/* Services header above the cards */
.services-header{max-width:1100px;margin:6px 0 18px;text-align:left}
.services-header h2{font-size:34px;margin:0 0 10px;color:var(--dark);letter-spacing:0.2px}
.services-header p{margin:0 0 36px;color:#555;font-size:16px}
.mini-services{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
/* Pills styled as static mini cards: fixed accent border, no animations */
.mini-services span{display:inline-flex;align-items:center;padding:10px 14px;border-radius:12px;background:var(--white);color:var(--dark);font-weight:700;font-size:14px;border:1.5px solid var(--accent);box-shadow:0 8px 20px rgba(0,0,0,0.05)}
.mini-services span:hover{transform:none;box-shadow:0 8px 20px rgba(0,0,0,0.05);border-color:var(--accent)}
.hero-actions a{display:inline-block;padding:12px 18px;border-radius:8px;background:var(--accent);color:var(--white);font-weight:700;text-decoration:none;transition:background-color .18s ease, filter .18s ease, box-shadow .18s ease, transform .18s ease}
/* Hover/focus/active states for hero CTA */
.hero-actions a:hover{filter:brightness(0.92);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,0.12), 0 3px 10px rgba(0,0,0,0.08)}
.hero-actions a:active{transform:translateY(0);box-shadow:0 6px 14px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08)}
.hero-actions a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-022), 0 10px 24px rgba(0,0,0,0.12), 0 3px 10px rgba(0,0,0,0.08)}
@media (prefers-reduced-motion: reduce){.hero-actions a{transition:none}.hero-actions a:hover,.hero-actions a:active{transform:none}}
/* More vertical spacing so the CTA doesn't sit too close to the pills */
.hero-copy .hero-actions{margin-top:22px}
	.hero-graphic{position:relative;height:420px;border-radius:18px;overflow:hidden;background:linear-gradient(90deg, var(--accent-014), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center}
.hero-graphic img{width:100%;height:100%;object-fit:cover;filter:contrast(.95) saturate(.9)}

/* Background orbs container (sits behind content, uses --bg so it doesn't block imagery/text) */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), var(--bg) 36%, rgba(90,17,204,0.04) 58%, rgba(0,0,0,0) 76%);box-shadow:0 30px 80px var(--accent-012);filter:blur(6px);opacity:0.95}
.bg-orb.one{left:-120px;top:40px;width:360px;height:360px}
.bg-orb.two{right:-100px;top:220px;width:420px;height:420px}
.bg-orb.three{left:40px;bottom:-80px;width:320px;height:320px}
@media (max-width:900px){.bg-orbs{display:none}}

	/* Cards row — 4 cards, center highlighted */
.cards-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin:28px 0}
/* Keep border width constant to avoid visual flash when changing color
		 Make cards narrower horizontally (less padding) and taller/stretched vertically
		 so content aligns and cards look slim on wide layouts. Use flex column so
		 CTAs or extra content sit at the bottom consistently. */
.card{background:var(--white);padding:14px 10px;border-radius:12px;border:2px solid transparent;box-shadow:0 8px 20px rgba(0,0,0,0.05);text-align:left;transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s ease,border-color .18s ease;will-change:transform;display:flex;flex-direction:column;justify-content:space-between;min-height:240px}
.card .icon{width:44px;height:44px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex:0 0 auto;box-shadow:0 6px 18px var(--accent-012)}
.card .icon svg{width:18px;height:18px;display:block}
.card .title{font-weight:800;margin:0 0 8px;font-size:16px;line-height:1.1;display:block}
.card .title small{display:block;font-weight:600;font-size:12px;margin-top:6px;color:#666}
.card .copy{color:#333;font-size:14px;line-height:1.4}
	.card .cta{margin-top:12px;display:inline-block;padding:8px 12px;border-radius:8px;background:transparent;border:1px solid var(--accent-006);color:var(--accent);text-decoration:none}
/* Featured card should not be permanently lifted; behave like others and use hover for effect */
.card.featured{border-color:transparent;box-shadow:0 10px 26px rgba(0,0,0,0.06)}

	/* Hover behaviour: give the same visual treatment as the featured card on hover
			 Only apply on devices that support hover to avoid touch surprises */
	@media (hover: hover) and (pointer: fine) {
		.card:hover{transform:translateY(-10px);border:2px solid var(--accent);box-shadow:0 24px 60px var(--accent-012);z-index:2}
	}

	/* Industries block — full width colored section */
	.industries{background:linear-gradient(90deg,var(--accent), #ff7fb3);color:var(--white);padding:48px 0;margin:36px 0;border-radius:10px}
.industries .inner{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;max-width:1100px;margin:0 auto;justify-items:center;text-align:center}
	.industries h2{font-size:34px;margin:0 0 10px}
		.industries p{margin:0 0 14px;opacity:.95;font-size:16px}
.industry-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;justify-content:center}
.industry-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.08);border-radius:999px;font-weight:700;color:var(--white);font-size:14px;border:1px solid rgba(255,255,255,0.08)}
.industry-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--white);box-shadow:0 0 0 6px var(--accent-006) inset}
.industry-list{display:grid;gap:12px}
.industry-card{background:var(--white);color:var(--dark);padding:12px 14px;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,0.08);display:flex;align-items:center;gap:12px;font-weight:700}
.industry-card .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);flex:0 0 auto}
	.industry-card-large{display:none}

			/* About / Sobre Hestezna block (below Industries) */
			.about{background:var(--white);padding:28px;border-radius:10px;margin:28px 0;box-shadow:0 12px 34px rgba(0,0,0,0.06)}
.about .inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.about-stats{padding-left:22px;border-left:1px solid rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:12px;justify-content:center}
.about-stats .stat{flex:0 0 auto;text-align:left;padding:6px 0}
.about-stats .n{font-size:32px;font-weight:900;color:var(--accent)}
.about-stats .t{color:#555;margin-top:6px;font-weight:700}
.about h3{font-size:34px;margin:0 0 12px;color:var(--dark);letter-spacing:0.2px}
.about p{margin:0 0 14px;color:#444;line-height:1.6;font-size:16px}
			.mini-metrics{display:grid;gap:10px}
			.mini-metric{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--dark)}
			.mini-metric .m-icon{width:44px;height:44px;border-radius:8px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;color:var(--white);font-size:18px;flex:0 0 auto}
			.mini-metric .m-text{font-size:15px}
			@media (max-width:800px) {
				.about .inner{grid-template-columns:1fr}
			}

		/* Footer mock (removed in preview) */
		.stat{flex:1;text-align:center}
		.stat .n{font-size:28px;font-weight:800;color:var(--accent)}
		.stat .t{color:#666;margin-top:6px}

		/* Big CTA with orb */
		.big-cta{background:linear-gradient(180deg,var(--accent), #6428d1);color:var(--white);padding:48px 28px;border-radius:12px;margin:36px 0;position:relative;overflow:hidden}
.big-cta .content{max-width:1100px;margin:0 auto}
	/* Layout inside big CTA when contact form is embedded */
	.big-cta .inner{display:grid;grid-template-columns:420px 1fr;gap:30px;align-items:start;width:100%}
	.big-cta .inner h2{font-size:34px;margin:0 0 12px;text-align:left}
	.big-cta .inner p{font-size:16px;color:rgba(255,255,255,0.95);text-align:left;margin-bottom:12px}
	.big-cta .left{padding-right:8px}
	.big-cta .right{max-width:420px}
		/* Form improvements */
	.contact-form{background:var(--white);padding:20px;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,0.12);max-width:420px}
	.contact-form input,.contact-form textarea{padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);font-size:15px}
	.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:0 6px 18px var(--accent-008)}
	.contact-form button{width:100%;padding:14px 16px;border-radius:10px;background:var(--white);color:var(--accent);font-weight:900;border:0}
	.contact-extra{margin-top:10px}
	.big-cta .orb{position:absolute;right:28px;bottom:18px;width:260px;height:120px;background:radial-gradient(circle at 40% 30%, rgba(255,255,255,0.12), var(--accent-014) 40%, rgba(0,0,0,0) 70%);border-radius:10px;box-shadow:0 40px 120px var(--accent-022);opacity:0.95}
	/* Alternate decorative orb variant (softer, top-left) for comparison */
	.big-cta .orb.alt{position:absolute;left:24px;top:-40px;width:220px;height:220px;border-radius:28%;
		background:radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06), var(--accent-014) 28%, rgba(90,17,204,0.04) 48%, rgba(0,0,0,0) 72%);
		filter:blur(18px);box-shadow:0 28px 90px var(--accent-012);opacity:0.9;transform:rotate(-14deg);pointer-events:none}
	/* If you prefer a plain color, hide decorative orbs */
	.big-cta .orb, .big-cta .orb.alt { display: none !important; }
	@media (max-width:900px){.big-cta .inner{grid-template-columns:1fr}.case-cards{grid-template-columns:repeat(2,1fr)} }
	@media (max-width:520px){.case-cards{grid-template-columns:1fr}}

		/* Footer mock */
		.mini-footer{margin-top:32px;padding:22px;text-align:center;color:#666}

		/* Responsive breakpoints: 5 cols -> 3 cols -> 2 cols -> 1 col */
		@media (max-width:1100px) {
			.cards-row{grid-template-columns:repeat(3,1fr)}
		}
		@media (max-width:800px) {
			.hero-split{grid-template-columns:1fr}
			.cards-row{grid-template-columns:repeat(2,1fr)}
			.industries .inner{grid-template-columns:1fr}
			.hero-graphic{height:260px}
			.hero-orb{display:none}
			.hero-copy .hero-actions{margin-top:14px}
			/* Reduce card height on smaller screens so they don't feel too tall */
			.card{min-height:160px}
		}
		@media (max-width:520px) {
			.cards-row{grid-template-columns:1fr}
			.card{min-height:120px}
		}

		/* Mobile nav behavior */
		@media (max-width:900px){
			.nav-toggle{display:inline-flex}
			/* Hide inline links on mobile until menu is opened */
			.top-links.nav{display:none;position:absolute;top:64px;left:12px;right:12px;background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 18px 44px rgba(0,0,0,0.10);padding:10px;flex-direction:column;gap:4px;z-index:1500}
			.top-links.nav.open{display:flex}
			.top-links.nav a{padding:12px 10px;border-radius:8px}
			.top-links.nav a.btn{border-color:rgba(0,0,0,0.10)}
			/* Ensure legible colors even when header is over imagery */
			.top-nav.over-hero .top-links.nav a{color:var(--dark);text-shadow:none}
		}
	/* Portfolio / Casos de éxito */
	.portfolio{max-width:1160px;margin:6px auto 18px;padding:0;background:transparent}
		.portfolio .inner{display:flex;flex-direction:column;gap:18px;max-width:1160px;margin:0 auto}
		.portfolio h2{font-size:34px;margin:0 0 6px}
		.portfolio p{margin:0 0 18px;font-size:16px;color:#444}
	.case-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
	.case-card{background:linear-gradient(180deg, #fff, #fbfbfe);padding:14px 10px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:8px;min-height:160px}
	.case-card{position:relative;overflow:hidden}
	.case-card > *{position:relative;z-index:1}

	/* Reveal animation: start slightly translated and transparent, become visible when .in-view is added */
	.case-card{transform:translateY(8px);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .6s ease,box-shadow .3s ease}
	.case-card.in-view{transform:translateY(0);opacity:1;box-shadow:0 18px 46px rgba(0,0,0,0.08)}

	/* Thumbnail placeholder used on the portfolio page */
	.thumb{width:100%;aspect-ratio:16/9;border-radius:10px;background-size:cover;background-repeat:no-repeat;background-position:center center;background-color:#f3f4f8;display:flex;align-items:flex-end;justify-content:flex-start;padding:12px;color:rgba(0,0,0,0.6);font-weight:800}
	.thumb-label{background:rgba(255,255,255,0.85);padding:6px 8px;border-radius:8px;font-size:13px;color:#222}
	.case-card .desc{margin-top:8px}
	.case-card .case-cta{margin-top:14px}

	/* Hero elegante full-bleed */
	.hero{
		width:100%;
		padding:72px 0;
		background: linear-gradient(135deg, var(--accent) 0%, #6f3be6 60%);
		color:var(--white);
		box-sizing:border-box;
	}
	.hero-inner{max-width:1200px;margin:0 auto;display:flex;gap:48px;align-items:center;padding:0 20px}
	.hero-copy{flex:1}
	.hero-title{font-size:clamp(28px,6vw,48px);line-height:1.02;margin:0 0 18px;font-weight:800}
	.hero-sub{font-size:18px;color:rgba(255,255,255,0.95);margin:0 0 24px;max-width:720px}
	.hero-ctas .btn{margin-right:12px}
	.btn-primary{background:var(--white);color:var(--accent);padding:12px 22px;border-radius:10px;font-weight:800;text-decoration:none}
	.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--white);padding:10px 18px;border-radius:10px;text-decoration:none}
	.hero-media{width:420px;flex:0 0 420px;display:flex;justify-content:center}
	.hero-image-placeholder{width:100%;height:260px;border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.75);font-weight:700}
	@media (max-width:900px){.hero-inner{flex-direction:column-reverse;text-align:center;gap:20px}.hero-media{width:100%}.hero-image-placeholder{height:220px}}

	/* Image-only hero variant */
	.hero.hero-image-only{padding:0;background:transparent}
	.hero.hero-image-only .hero-wrap{max-width:1200px;margin:24px auto;padding:0 20px}
	.hero.hero-image-only .hero-image-frame{width:100%;height:420px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center center;box-shadow:0 10px 30px rgba(0,0,0,0.06);position:relative}
	.hero.hero-image-only .hero-image-label{display:none}

	/* Caption inside the hero image positioned on the bottom-left */
	.hero-caption{position:absolute;left:28px;bottom:28px;display:flex;flex-direction:column;justify-content:center;padding:20px 22px;max-width:560px;background:rgba(0,0,0,0.62);color:var(--white);border-radius:10px}
	.hero-caption h1{margin:0 0 8px;font-size:34px;line-height:1.02;font-weight:800}
	.hero-caption p{margin:0;color:rgba(255,255,255,0.95);font-size:16px}
	@media (max-width:900px){.hero-caption{position:relative;left:auto;bottom:auto;background:transparent;padding:18px;text-align:center;max-width:none;border-radius:0}}
	@media (max-width:900px){.hero.hero-image-only .hero-image-frame{height:260px}}
	/* subtle violet accents inside the card */
	/* accents scoped per variant */
	.case-card.estela::before{content:"";position:absolute;right:-30px;top:-30px;width:220px;height:220px;border-radius:40%;
		background:radial-gradient(circle at 30% 30%, var(--accent-010) 0%, var(--accent-006) 45%, rgba(255,255,255,0) 75%);
		transform:rotate(18deg);filter:blur(8px);opacity:0.95;pointer-events:none}
	.case-card.linea::after{content:"";position:absolute;left:12px;top:18px;width:4px;height:calc(100% - 36px);background:var(--accent-010);border-radius:4px;opacity:0.9;pointer-events:none}
	/* underline variant: small bar under the case name */
	.case-card.underline .name{position:relative;display:inline-block;padding-bottom:10px}
	.case-card.underline .name::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:6px;background:var(--accent);border-radius:6px;opacity:0.28;box-shadow:0 6px 18px var(--accent-012);transform-origin:left;transform:translateY(2px)}
	.case-card .kpi{font-weight:900;color:var(--accent);font-size:15px}
	.case-card .name{font-weight:900;font-size:17px}
	.case-card .desc{color:#444;font-size:14px}
	.case-cta{display:inline-block;margin:12px auto 0;padding:12px 16px;border-radius:10px;background:var(--accent);border:0;color:var(--white);text-decoration:none;font-weight:800;box-shadow:0 10px 30px var(--accent-012);transition:transform .16s ease,box-shadow .18s ease}
	@media (hover: hover) and (pointer: fine) {
		.case-cta:hover{transform:translateY(-4px);box-shadow:0 20px 40px var(--accent-014)}
	}

	/* center wrapper for portfolio CTA */
	.portfolio .cta-wrap{text-align:center;margin-top:12px}

	/* Removed old CTA variants (.cta-minimal, .cta-inline, .cta-center) no longer used */

	/* Subtle hover for portfolio case cards */
	@media (hover: hover) and (pointer: fine) {
		.case-card{transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease}
		.case-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08)}
		.case-card.underline .name::after{transition:width .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease}
		.case-card:hover.underline .name::after{opacity:.38;width:82px}
	}

	/* Social icons in big-cta contact column */
	.socials{display:flex;gap:10px;align-items:center}
	.socials a{display:inline-flex;width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,0.08);align-items:center;justify-content:center;text-decoration:none;color:var(--white)}
	.socials a svg{width:18px;height:18px;display:block;fill:var(--white)}

	/* Contact right column improvements */
	.contact-right{display:flex;flex-direction:column;gap:12px;min-height:435px}
	.contact-right h2{letter-spacing:0.2px}
	.contact-right p{line-height:1.7;margin:0}
	/* push contact-bottom to the bottom of the right column */
	.contact-bottom{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-top:auto}
	.contact-methods{display:flex;flex-direction:column;gap:6px}
	.contact-methods .contact-extra{margin:0}
	.contact-methods .socials{margin-top:56px}

	/* Responsive: don't fix height on small screens */
	@media (max-width:900px) {
		.contact-right{min-height:initial}
		.contact-bottom{margin-top:6px}
	.contact-methods .socials{margin-top:16px}
	}

		/* Contact block (visual fuerte) */
		.contact{background:linear-gradient(180deg, var(--accent-012), rgba(0,0,0,0.02));padding:28px;border-radius:12px;margin:28px 0}
		.contact .inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}
		.contact h2{font-size:34px;margin:0 0 8px}
		.contact p{margin:0 0 14px;font-size:16px;color:#112}
		.contact-form{background:var(--white);padding:16px;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,0.06)}
		.contact-form label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
		.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);margin-bottom:12px;font-size:14px}
		.contact-form textarea{min-height:110px;resize:vertical}
		.contact-form button{display:inline-block;padding:12px 16px;border-radius:10px;background:var(--accent);color:var(--white);border:0;font-weight:800;cursor:pointer}
		.contact-info{display:flex;flex-direction:column;gap:10px}
		.contact-info a{color:var(--white);text-decoration:none;font-weight:700;background:rgba(0,0,0,0.05);padding:10px;border-radius:8px}
		.contact-extra{color:var(--white);font-weight:700}
		@media (max-width:900px){.case-cards{grid-template-columns:repeat(2,1fr)}.contact .inner{grid-template-columns:1fr}}
		@media (max-width:520px){
			.case-cards{grid-template-columns:1fr}
		}


/* Footer - dark multi-column layout */
.site-footer{background:#0f0f10;color:rgba(255,255,255,0.92);padding:56px 0 40px;margin-top:0;width:100%;left:0;right:0}
.site-footer .site-footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;align-items:start;padding:0 20px}
.footer-col{padding-right:8px}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo img{height:28px;width:auto}
.footer-desc{max-width:420px;color:rgba(255,255,255,0.78);margin-top:12px;line-height:1.6}
.footer-socials{display:flex;gap:12px;margin-top:18px}
.footer-socials a{width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,0.62);display:inline-flex;align-items:center;justify-content:center;color:var(--white);text-decoration:none;transition:transform .16s ease, background-color .18s ease, box-shadow .18s ease;border:1px solid rgba(255,255,255,0.06)}
.footer-socials a:hover{transform:translateY(-2px);background:rgba(0,0,0,0.78);box-shadow:0 10px 24px rgba(0,0,0,0.22)}
.footer-socials a svg{width:18px;height:18px;display:block;fill:currentColor}
.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-nav-list a{color:rgba(255,255,255,0.85);text-decoration:none;font-weight:600}
.footer-legal{color:rgba(255,255,255,0.65);display:flex;flex-direction:column;gap:8px}
.footer-legal a{color:#ffffff;text-decoration:none}
.footer-legal a:hover{color:#ffffff;text-decoration:underline}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact .contact-item{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,0.9)}
.footer-contact .contact-item svg{width:18px;height:18px;opacity:0.95}

@media (max-width:900px){
	.site-footer .site-footer-grid{grid-template-columns:1fr;gap:18px}
	.footer-desc{max-width:none}
}

/* Industries-style CTA banner */
.cta-band{background:linear-gradient(90deg,var(--accent), #ff7fb3);color:var(--white);padding:28px 0;margin:28px 0;border-radius:10px}
.cta-band .inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;text-align:left;padding:0 20px}
.cta-band .cta-micro{margin:0;font-size:18px;font-weight:900;color:var(--white)}
.cta-band .btn-primary{box-shadow:0 10px 26px rgba(0,0,0,0.18)}
@media (hover: hover) and (pointer: fine) {
	.cta-band .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,0.22)}
}
@media (max-width:600px){
	.cta-band .inner{flex-direction:column;text-align:center}
}

/* Trust logos strip (removed) */

.footer-bottom{background:#0f0f10;text-align:center;padding:14px 0;color:rgba(255,255,255,0.6);font-size:14px;box-sizing:border-box;width:100vw;position:relative;left:50%;margin-left:-50vw;border-top:1px solid rgba(255,255,255,0.03)}
.footer-bottom-inner{max-width:1200px;margin:0 auto;padding:0 20px;}

/* Minimal contact section — clean card layout */
.contact-minimal{margin:48px 0}
.contact-minimal-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2.7fr 1.3fr;gap:24px;padding:0}
.contact-card{background:var(--white);border:1px solid rgba(0,0,0,0.06);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,0.06);padding:20px}
.contact-header h2{font-size:32px;margin:0 0 8px;color:var(--dark)}
.contact-header p{margin:0 0 16px;color:#444}
.contact-form-minimal .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form-minimal .field{display:flex;flex-direction:column}
.contact-form-minimal label{font-weight:700;font-size:13px;margin-bottom:6px;color:#222}
.contact-form-minimal input,.contact-form-minimal textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);font-size:15px;background:#fff}
.contact-form-minimal textarea{min-height:140px;resize:vertical}
.contact-form-minimal input:focus,.contact-form-minimal textarea:focus{outline:none;box-shadow:0 6px 18px var(--accent-008);border-color:rgba(var(--accent-rgb-csv),0.35)}
.contact-form-minimal .full{grid-column:1 / -1}
.contact-form-minimal .actions{margin-top:4px}
.contact-form-minimal .btn-submit{display:inline-block;width:100%;padding:14px 16px;border-radius:10px;background:var(--accent);color:var(--white);border:0;font-weight:900;cursor:pointer;box-shadow:0 10px 26px var(--accent-012);transition:filter .18s ease, transform .16s ease, box-shadow .18s ease}
.contact-form-minimal .btn-submit:hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 14px 30px var(--accent-014)}
.contact-form-minimal .btn-submit:active{transform:translateY(0);box-shadow:0 8px 18px var(--accent-008)}
.contact-form-minimal .btn-submit:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-022), 0 10px 26px var(--accent-012)}
.contact-form-minimal .form-note{background:#f6f5ff;border:1px dashed rgba(var(--accent-rgb-csv),0.35);color:#2d2060;padding:10px 12px;border-radius:10px;margin-bottom:14px;font-weight:700}

/* Submit disabled/loading states and form status messages */
.contact-form-minimal .btn-submit[disabled]{opacity:.7;cursor:not-allowed;filter:saturate(0.9)}
.contact-form-minimal .btn-submit.is-loading{position:relative}
.contact-form-minimal .btn-submit.is-loading::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid rgba(255,255,255,0.8);border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-status{margin-top:8px;padding:10px 12px;border-radius:10px;font-weight:700;font-size:14px}
.form-status.success{background:#f0fff6;color:#135b2c;border:1px solid rgba(31,190,91,0.35)}
.form-status.error{background:#fff6f6;color:#7a1212;border:1px solid rgba(200,0,0,0.20)}
.hp-field{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

.contact-aside .aside-card{background:var(--white);border:1px solid rgba(0,0,0,0.06);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,0.05);padding:20px;display:flex;flex-direction:column;gap:10px;min-height:320px}
.aside-title{font-weight:900;color:var(--dark)}
.aside-email{color:var(--accent);font-weight:800;text-decoration:none}
.aside-meta{color:#444;margin:4px 0 6px}
.aside-socials{display:flex;gap:10px;margin-top:6px}
.aside-socials a{display:inline-flex;width:40px;height:40px;border-radius:10px;background:var(--accent);align-items:center;justify-content:center;text-decoration:none;transition:transform .16s ease, background-color .18s ease, box-shadow .18s ease}
.aside-socials a:hover{transform:translateY(-2px);background:#6f3be6;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.aside-socials img{width:18px;height:18px;display:block}
.aside-contact-lines{display:flex;flex-direction:column;gap:6px;color:#333;font-weight:700}
.aside-contact-lines a{color:var(--accent);text-decoration:underline}
/* WhatsApp CTA button */
.btn-whatsapp{display:inline-block;text-align:center;margin:6px 0 8px;padding:12px 16px;border-radius:10px;background:#1FBE5B;color:#fff;font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,0.10);transition:filter .18s ease, transform .16s ease, box-shadow .18s ease}
.btn-whatsapp:hover{filter:brightness(.96);transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,0.18)}

@media (max-width:900px){
  .contact-minimal-inner{grid-template-columns:1fr}
  .contact-form-minimal .form-grid{grid-template-columns:1fr}
}