:root{
	--pz:#ffff00; /* amarillo proyecto zero */
	--brand:#34fb9b; /* verde acento */
	--dark:#111418;
	--bg:#fffef8;
	--text:#1b1f23;
	--muted:#5b6168;
	--primary:#36c790; /* verde */
	--primary-2:#c0c0c0;
	--card:#ffffff;
	--shadow:0 8px 24px rgba(0,0,0,.08);
	--radius:16px;
	--timeline-gap: 200px;
}

/* Timeline */
.timeline-container{ max-width:900px; margin:0 auto; }
.timeline-inner{ position:relative; overflow:hidden; display:block; padding-left: calc(var(--spine-x) + 32px); border-radius:20px; box-shadow: 0 10px 40px rgba(0,0,0,.12); }
.timeline-track{ flex:1 1 auto; }
/* vertical spine */
.timeline-track{ position:relative; --spine-x: 80px; }
.timeline-track::before{ content:''; position:absolute; left: calc(var(--spine-x) - 1.5px); top:20px; bottom:20px; width:3px; background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12)); border-radius:4px; z-index:1; pointer-events:none; }
/* background layer for timeline (changes per year) */
.timeline-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center center; filter: saturate(1.02) contrast(1.03) brightness(.95); transform: scale(1.03); transition: opacity .7s cubic-bezier(.2,.9,.2,1), transform .9s ease; opacity:0; pointer-events:none; border-radius:20px; box-shadow: inset 0 0 60px rgba(0,0,0,0.06); }
.timeline-inner{ position:relative; overflow:hidden; border-radius:20px; box-shadow: 0 10px 40px rgba(0,0,0,.12); }
.timeline-track{ z-index:1; position:relative; }
.timeline-year{ display:flex; gap:1.2rem; align-items:center; padding:2.2rem 1rem; background:transparent; transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease; border-radius:12px; }
.timeline-year{ display:flex; gap:1.2rem; align-items:center; padding:2.4rem 1rem; background:transparent; transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease; border-radius:12px; margin-bottom:3.6rem; }
.timeline-year .year-label{ font-size: clamp(1.6rem, 4.5vw, 3.6rem); font-weight:900; color:var(--primary); width:140px; text-align:right; line-height:1; padding-right:8px; }
.timeline-year .year-content{ font-size:1.05rem; color:var(--muted); max-width:720px; opacity:.85; }
.timeline-year:not(.active){ opacity:.7; transform: scale(.99); }
.timeline-year.active{ opacity:1; transform: scale(1.02); }
.timeline-year.active .year-label{ font-size: clamp(2.4rem, 7.5vw, 4.8rem); color:var(--brand); transform: translateY(10px); }
.timeline-year.active .year-content{ opacity:1; }
@media (max-width:900px){
	.timeline-year{ padding:1.2rem .4rem; margin-bottom:1.6rem; }
	.timeline-year .year-label{ width:100px; font-size: clamp(1.6rem, 8vw, 3.6rem); }
	.timeline-year.active .year-label{ font-size: clamp(2.2rem, 10vw, 5rem); }
}
html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }
body{
	margin:0;
	font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height:1.5;
}
a{ color:inherit; }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#fff; padding:.5rem 1rem; border-radius:8px; box-shadow:var(--shadow); z-index:1000; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Top notice */
.notice{ background:var(--pz); color:#000; text-align:center; padding:.5rem 1rem; font-weight:600; }

/* Navbar */
header{ position:sticky; top:0; z-index:999; background:rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(10px); box-shadow:0 1px 0 rgba(0,0,0,.06); transition: box-shadow .2s ease, background .2s ease; }
header.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.06); background:rgba(255,255,255,.92); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-mark{ width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--brand),#c0c0c0); display:grid; place-items:center; font-weight:800; color:#111; box-shadow:var(--shadow); }
.brand-name{ font-weight:800; letter-spacing:.5px; }
nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
nav a{ position:relative; text-decoration:none; color:#222; font-weight:700; padding:.4rem .6rem; border-radius:8px; }

/* Ensure the top nav container arranges brand and nav correctly */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1100px; margin:0 auto; padding:.6rem 1rem; }
/* Hide the nav-toggle on larger viewports; shown only in mobile media query */
.nav-toggle{ display:none; }
/* Keep nav links vertically centered */
nav ul{ align-items:center; }
/* Improve spacing for nav items */
nav ul li a{ display:inline-flex; align-items:center; padding:.6rem .9rem; }

/* Desktop: slightly thicker underline for clarity */
@media (min-width: 901px){
	nav a::after{ height:3px; bottom:0.12rem; }
}
nav a::after{ content:""; position:absolute; left:.6rem; right:.6rem; bottom:.15rem; height:2px; background: linear-gradient(90deg, var(--brand), #c0c0c0); border-radius:2px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; opacity:.95; }
nav a:hover::after, nav a:focus::after{ transform: scaleX(1); }
/* Active link: prefer underline-only for clarity; keep CTA distinct */
nav a.active{ color:#000; background: transparent; }
.nav-cta{ background:var(--primary); color:#fff; }
.nav-cta:hover{ background:var(--primary-2); }

/* progress filled on scroll */
.timeline-progress{ position:absolute; left: calc(var(--spine-x) - 1.5px); top:20px; bottom:20px; width:3px; background: var(--brand); border-radius:4px; box-shadow: 0 0 0 2px rgba(52,251,155,0.12) inset; z-index:1; transform-origin: top; transform: scaleY(0); transition: transform .32s cubic-bezier(.2,.9,.2,1); pointer-events:none; }
/* Hero */
.hero{ position:relative; min-height:80vh; display:grid; place-items:center; text-align:center; color:#fff; perspective: 1200px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
.hero::before{ content:''; position:absolute; inset:0; background:url('../img/Hero.jpg') center/cover no-repeat; /* parallax desactivado */ background-position: center center; transition: none; border-bottom-left-radius:20px; border-bottom-right-radius:20px; z-index:0; pointer-events:none; border: 5px solid var(--brand);}
.hero::after{ content:''; position:absolute; inset:0;  border-bottom-left-radius:20px; border-bottom-right-radius:20px; z-index:1; pointer-events:none; }
/* Ensure hero content is rendered above the overlay pseudo-element so text remains visible */
.hero-inner{ position:relative; z-index:2; }
/* Ensure hero reveal content is visible even if JS reveal hasn't run yet */
.hero .reveal{ opacity:1 !important; transform:none !important; }
/* overlay for readability on images */
.timeline-inner::after{ content:""; position:absolute; inset:0; /* overlay removed to show background image directly */ background: none; z-index:1; pointer-events:none; }
.timeline-year{ position:relative; z-index:3; display:flex; gap:1.2rem; align-items:center; padding:2.2rem 1rem; background:transparent; transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease; border-radius:12px; }
/* dot marker per year aligned to spine */
.timeline-year::before{ content:""; position:absolute; left: calc(var(--spine-x) - 8px); top: calc(50% - 8px); width:12px; height:12px; border-radius:50%; background: var(--brand); border:2px solid rgba(255,255,255,0.85); box-shadow: 0 2px 10px rgba(0,0,0,0.25); transform: scale(.9); transition: transform .25s ease, box-shadow .25s ease; z-index:4; }
.timeline-year.active::before{ transform: scale(1.15); box-shadow: 0 0 0 6px rgba(52,251,155,0.18), 0 6px 16px rgba(0,0,0,0.25); }
.hero h1{ background:#34fb9b40;font-size: clamp(2rem, 5vw, 3.2rem); margin: .2rem 0 1rem; font-weight:800; transition: none; white-space: normal; overflow-wrap: anywhere; }
/* glass card for content */
.timeline-year .year-content{ font-size:1.05rem; color:#e9ecef; max-width:780px; opacity:.95; background: rgba(15,18,21,0.45); border:1px solid rgba(255,255,255,0.12); padding:1.6rem 1.8rem; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-actions{ margin-top:1.6rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Reveal utility */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }
/* Make JS variant that adds .active also reveal content */
.reveal.active{ opacity:1; transform:none; }
.pop-out{ transform: translateZ(var(--popz, 0px)); }
.reveal.stagger > *{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.stagger.visible > *{ opacity:1; transform:none; }
.reveal.stagger.visible > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* Pop-out 3D via translateZ */
.pop-out{ --popz: 0px; will-change: transform; }
.pop-out.visible{ --popz: 60px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
.btn{ appearance:none; border:none; padding:.9rem 1.2rem; border-radius:999px; font-weight:700; cursor:pointer; transition:.2s transform ease, .2s background ease, .2s box-shadow ease; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--pz); color:#111; }
.btn-primary:hover{ background:#ffd24a; }
.btn-outline{ background:#fff; color:#111; border:2px solid rgba(0,0,0,.12); }
.btn-outline:hover{ background:rgb(0, 0, 0); color:#666; }

/* Sections */
main section{ padding: 3rem 1rem; }
.container{ max-width:1100px; margin:0 auto; }
.section-title{ font-size: clamp(1.4rem, 3vw, 2rem); margin:0 0 .75rem; color:var(--card); }
.section-sub{ color:var(--muted); margin:0 0 1.5rem; }

/* About */
.about{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; perspective:1000px; }
.about .media{ width:100%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transform-style: preserve-3d; will-change: transform; transition: transform .18s ease; }
.about .media img{ display:block; width:100%; height:100%; object-fit:cover; }
.about .bullets{ display:grid; gap:.75rem; }
.about .bullets li{ background:#fff; padding:.9rem 1rem; border-radius:12px; box-shadow:var(--shadow); }

/* Cards like reference */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem; }
.card{
	position:relative; border-radius:18px; overflow:hidden; min-height:260px; box-shadow:var(--shadow); color:#fff; text-decoration:none;
	display:flex; align-items:flex-end; isolation:isolate;
	transform-style: preserve-3d; will-change: transform;
	transition: transform .18s ease;
}
.card::before{ content:''; position:absolute; inset:0; background:var(--primary); opacity:.1; z-index:0; }
.card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(5%) saturate(105%); z-index:-1; transform: translateZ(-30px) scale(1.08); }
.card .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55)); z-index:0; }
/* Glow spotlight that sigue al mouse */
.card::after{
	content:""; position:absolute; inset:-1px; pointer-events:none; z-index:2; opacity:0;
	background: radial-gradient(400px at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.15), transparent 60%);
	transition: opacity .2s ease;
}
.card:hover::after{ opacity:.7; }
.card h3{ position:relative; z-index:1; margin:0; padding:1.2rem; font-size:1.3rem; font-weight:800; letter-spacing:.3px; transform: translateZ(35px); }
.card span{ position:absolute; top:12px; right:12px; background:rgba(0,0,0,.55); padding:.3rem .6rem; border-radius:999px; font-size:.8rem; transform: translateZ(20px); }
.cards{ perspective: 900px; }
@media (hover: none), (pointer: coarse){
	.card{ transform: none !important; }
}

/* Quote band */
.quote{ background:#000000; color:#fff; text-align:center; padding:3rem 1rem; }
.quote p{ font-size:clamp(1.1rem, 2.6vw, 1.6rem); margin:.2rem auto; max-width:860px; }
.quote small{ color:#bbb; }

/* Footer */
footer{ background:#000000; color:#d6d6d6; }
.footer-inner{ max-width:1100px; margin:0 auto; padding:2rem 1rem; display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:center; }
.footer-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.footer-links a{ color:#d6d6d6; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }
.social{ display:flex; gap:.6rem; align-items:center; }
.social a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	background:#1b1f23;
	color:#fff;
	padding:0;
	border-radius:10px;
	text-decoration:none;
}
.social a svg{ display:block; width:18px; height:18px; }
/* hover / focus: fondo ligeramente más claro, leve elevación y foco accesible */
.social a{ transition: background .14s ease, transform .12s ease, box-shadow .12s ease; }
.social a:hover,
.social a:focus{
	background: #26292c; /* ligeramente más claro que #1b1f23 */
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.social a:focus-visible{
	outline: 3px solid rgba(54,199,144,0.16); /* foco accesible y sutil */
	outline-offset: 3px;
}

/* Responsive */
@media (max-width:900px){
	.timeline-year{ padding:1rem .6rem; margin-bottom:1.6rem; }
	.timeline-year .year-label{ width:100px; font-size: clamp(1.6rem, 8vw, 3.6rem); text-align:left; padding-right:0; }
	.timeline-year .year-content{ padding:1.2rem 1rem; }
	.timeline-year.active .year-label{ font-size: clamp(2.2rem, 10vw, 5rem); }
}

/* Also center the card text on small screens for better legibility */
@media (max-width:900px){
	.timeline-year .year-content{
		text-align: center;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		padding:1.2rem 1rem;
	}
}
	/* Mobile nav toggle */
	@media (max-width: 640px){
	.nav-toggle{ display:inline-block; background:transparent; border:none; padding:.5rem; border-radius:10px; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; }
	.nav-toggle .bar{ display:block; width:20px; height:2px; background:#222; margin:4px 0; border-radius:2px; transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease; }
	.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; transform: scaleX(.2); }
	.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
	header .nav{ position: relative; }
	header .nav nav ul{ display:none; position:absolute; right:1rem; top:calc(100% + 8px); background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:.6rem; box-shadow:0 12px 30px rgba(0,0,0,.14); flex-direction:column; gap:.4rem; min-width: 180px; z-index:1001; transform-origin: top right; transform: translateY(-6px) scale(.98); opacity:0; transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease; }
	header.menu-open nav ul{ display:flex; transform: translateY(0) scale(1); opacity:1; }
	 /* backdrop behind mobile menu for focus and dim
		 NOTE: z-index set below header (z-index:999) so the header/menu remain interactive */
	 .nav-backdrop{ position:fixed; inset:0; background: rgba(3,8,10,0.4); z-index:998; opacity:0; pointer-events:none; transition: opacity .28s ease; }
	header.menu-open + .nav-backdrop{ opacity:1; pointer-events:auto; }
	nav ul{ display:none; }
	.cards{ grid-template-columns: 1fr; }
	.hero{ min-height:60vh; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
	.hero-inner{ max-width: 92vw; }
	.timeline-year{ padding:1.2rem .4rem; margin-bottom:1.6rem; }
	.timeline-track{ --spine-x: 50px; }
	#logo {
		width: 60% !important;
		min-width: 260px;
		max-width: 300px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}
/* Preloader */
.preloader{
	position:fixed; inset:0; background:#0f1215; color:#fff; display:grid; place-items:center; z-index:10000; transition: opacity .4s ease, visibility .4s ease; 
}
.preloader.hidden{ opacity:0; visibility:hidden; }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:1rem; perspective: 1000px; }
.spinner{ width:64px; height:64px; border-radius:50%; border:6px solid rgba(255,255,255,.15); border-top-color: var(--pz); animation: spin 1s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.loader-text{ color:#ddd; font-weight:600; letter-spacing:.4px; }

/* 3D fly-away for preloader image */
.preloader-inner img{ will-change: transform, opacity, filter; transform: translateZ(0); }
@keyframes fly-out{
	0%{ transform: translate3d(0,0,0) rotateX(0deg) rotateY(0deg) scale(1); opacity:1; filter: blur(0); }
	60%{ transform: translate3d(0,-20px,200px) rotateX(15deg) rotateY(-8deg) scale(0.9); opacity:.85; }
	100%{ transform: translate3d(0,-60px,800px) rotateX(35deg) rotateY(-20deg) scale(0.6); opacity:0; filter: blur(6px); }
}
.preloader.hidden .preloader-inner img{ animation: fly-out .9s cubic-bezier(.2,.8,.2,1) forwards .05s; }
@media (prefers-reduced-motion: reduce){
	.preloader.hidden .preloader-inner img{ animation: none; opacity: 0; }
}

/* Desktop alignment: year label hugs the spine */

@media (min-width: 901px){
	/* Desktop layout: remove extra left padding and align the grid to the spine */
	.timeline-inner{ padding-left: 0; }
	/* Use the spine variable to size the label column so the label hugs the spine */
	/* Increase space between the spine/dot and the card content so there's a clear margin after the year */
	.timeline-year{ display:grid; grid-template-columns: var(--spine-x) var(--timeline-gap) 1fr; column-gap: 1rem; align-items:center; position:relative; }
	/* Position the year label absolutely so it never affects the flow/width of the card */
	.timeline-year .year-label{
		position:absolute;
		left: calc(var(--spine-x) - 96px);
		top: 50%;
		transform: translateY(-50%);
		width:auto;
		text-align:right;
		padding-right:8px;
		z-index:4;
		pointer-events:none;
	}
	.timeline-year .year-content{ max-width:720px; }
	/* Desktop: center card text and ensure consistent padding/width */
	.timeline-year .year-content{
		max-width:720px;
		min-width:720px;
		padding:1.6rem 1.8rem;
		text-align:center;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}
}

/* Dot pulse animation on activation (subtle) */
@keyframes dotPulse {
	0% { box-shadow: 0 0 0 0 rgba(52,251,155,0.16); }
	60% { box-shadow: 0 0 0 6px rgba(52,251,155,0.10); }
	100% { box-shadow: 0 0 0 0 rgba(52,251,155,0); }
}
.timeline-year.active::before{
	transform: scale(1.12);
	animation: dotPulse 700ms forwards ease-out;
}
@media (prefers-reduced-motion: reduce){
	.timeline-year.active::before{ animation: none; }
}

/* Mobile: revert grid back to flex for stable stacking */
@media (max-width: 900px){
	.timeline-year{ display:flex; align-items:center; }
}

/* Accessible focus ring for timeline items */
.timeline-year:focus-visible{
	outline: 3px solid rgba(52,251,155,0.12);
	outline-offset: 6px;
}

/* PZ CodePen Timeline (namespaced to avoid conflicts) */
.pz-tl{ margin:0px auto; }
.pz-tl-outer{ position:relative; }
.pz-tl-card{ position:relative; max-width:400px; }
.pz-tl-card:nth-child(odd){ padding:30px 0 30px 30px; }
.pz-tl-card:nth-child(even){ padding:30px 30px 30px 0; }
.pz-tl-card::before{ content:""; position:absolute; width:50%; border: solid var(--brand); }
.pz-tl-card:nth-child(odd)::before{ left:0; top:-4.5px; bottom:-4.5px; border-width:5px 0 5px 5px; border-radius:50px 0 0 50px; }
.pz-tl-card:nth-child(even)::before{ right:0; top:0; bottom:0; border-width:5px 5px 5px 0; border-radius:0 50px 50px 0; }
.pz-tl-card:first-child::before{ border-top:0; border-top-left-radius:0; }
.pz-tl-card:last-child:nth-child(odd)::before{ border-bottom:0; border-bottom-left-radius:0; }
.pz-tl-card:last-child:nth-child(even)::before{ border-bottom:0; border-bottom-right-radius:0; }
.pz-tl-info{ display:flex; flex-direction:column; background:#333; color:gray; border-radius:10px; padding:10px; }
.pz-tl-title{ color:var(--brand); position:relative; }
.pz-tl-title::before{ content:""; position:absolute; width:10px; height:10px; background:#fff; border-radius:999px; border:3px solid var(--brand); }
.pz-tl-card:nth-child(even) > .pz-tl-info > .pz-tl-title{ text-align:right; }
.pz-tl-card:nth-child(odd) > .pz-tl-info > .pz-tl-title::before{ left:-45px; }
.pz-tl-card:nth-child(even) > .pz-tl-info > .pz-tl-title::before{ right:-45px; }
#timeline-pz{
	position: relative;
	max-width: 1100px; /* consistente con .container */
	margin: 0 auto;    /* centra horizontalmente */
	padding: 0 16px;   /* respiración lateral en móviles */
	display: flex;     /* permite centrar verticalmente el contenido */
	align-items: center; /* centra verticalmente el timeline */
	min-height: 100vh;   /* ocupa toda la altura visible */
}

/*Section contenido*/
#contenido{
	background-color: var(--brand);
}

/*Logo*/
.logo-nav {
	max-height: 40px;
	width: auto;
}