/* Portada (index.html): nueva presentación. Alcance: body.inici. Solo HTML/CSS, sin librerías.
   Mismo lenguaje visual que Guardó, Qui som y Programes: franja verde con bolas, marcador amarillo, tarjetas con línea de 1 px y sombra desplazada. */
body.inici .in { overflow-x: clip; background: #fff; --in-r: 16px; }
body.inici .in :where(h1, h2, h3, p, ul, figure) { margin: 0; }
body.inici .in :where(ul) { padding: 0; list-style: none; }
body.inici .in :where(h1, h2, h3) { font-family: 'Poppins', sans-serif; color: #2d3127; text-transform: none; letter-spacing: 0; }
body.inici .in img { max-width: 100%; height: auto; }
body.inici .in a { text-decoration: none; }
body.inici .in a:focus-visible { outline: 3px solid var(--apap-ink); outline-offset: 3px; }

/* botones (sombra desplazada) */
body.inici .in-btn { display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.4em; border: 2px solid var(--apap-ink); border-radius: 999px; font: 600 .95rem/1 'Poppins', sans-serif; transition: transform .15s, box-shadow .15s, background-color .15s, color .15s; }
body.inici .in-btn i { font-size: 1.15em; }
body.inici .in-btn-yellow { background: var(--apap-yellow); color: var(--apap-ink); box-shadow: 4px 4px 0 var(--apap-ink); }
body.inici .in-btn-yellow:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--apap-ink); color: var(--apap-ink); }
body.inici .in-btn-ghost { background: #fff; color: var(--apap-ink); box-shadow: 4px 4px 0 rgba(25, 25, 23, .14); }
body.inici .in-btn-ghost:hover { background: var(--apap-ink); color: #fff; }
body.inici .in-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* antetítulo, marcador y titulares */
body.inici .in-eyebrow { display: inline-flex; align-items: center; gap: .55em; margin-bottom: 18px; padding: .5em 1em; border: 1px solid #c9dc8e; border-radius: 999px; background: #fff; font: 700 .72rem/1 'Poppins', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--apap-ink); }
body.inici .in-eyebrow i { color: var(--apap-green-deep); font-size: 1.15em; }
body.inici .in .in-mark { color: inherit; padding: 0 .06em; background: linear-gradient(transparent 62%, var(--apap-yellow) 62% 92%, transparent 92%) no-repeat 0 0 / 100% 100%; }
body.inici .in-h { text-wrap: balance; font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.5rem); font-weight: 700; line-height: 1.08; }
body.inici .in-lede { max-width: 33em; margin: 20px 0 28px; font-size: 1.15rem; line-height: 1.6; color: #3f443a; }
body.inici .in-sec-h { margin-bottom: 30px; }
body.inici .in-sec-h .in-eyebrow { margin-bottom: 12px; }
body.inici .in-sec-h h2 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); font-weight: 700; line-height: 1.15; }
body.inici .in-sec-h h2::after { content: ""; display: block; width: 120px; height: 4px; margin-top: 14px; background: linear-gradient(90deg, var(--apap-green) 0 25%, var(--apap-yellow) 25% 50%, var(--apap-red) 50% 75%, var(--apap-purple) 75% 100%); }
@media (prefers-reduced-motion: no-preference) {
	body.inici .in .in-mark { animation: in-hl 1s .3s ease-out both; }
	body.inici .in-ball { animation: in-float 7s ease-in-out infinite; }
	body.inici .in-ball-2 { animation-delay: -2s; } body.inici .in-ball-3 { animation-delay: -4s; } body.inici .in-ball-4 { animation-delay: -1s; }
	@keyframes in-hl { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
	@keyframes in-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
}

/* hero */
body.inici .in-hero { position: relative; overflow: clip; padding: 56px 0 72px; background: linear-gradient(174deg, var(--apap-green-light) 0 62%, var(--apap-green-soft) 62% 100%); }
body.inici .in-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
body.inici .in-hero-art { position: relative; }
body.inici .in-frame { margin: 0; overflow: hidden; border: 6px solid #fff; border-radius: 14px; background: #fff; box-shadow: 10px 10px 0 rgba(25, 25, 23, .12), 0 22px 40px rgba(25, 25, 23, .16); transform: rotate(-1.4deg); }
body.inici .in-frame img { display: block; width: 100%; }
body.inici .in-ball { position: absolute; border-radius: 50%; }
body.inici .in-ball-1 { left: 1.2%; top: 44%; width: 22px; height: 22px; background: var(--apap-purple); }
body.inici .in-ball-2 { left: 47%; top: 9%; width: 34px; height: 34px; background: var(--apap-yellow); }
body.inici .in-ball-3 { left: 43%; bottom: 17%; width: 16px; height: 16px; background: var(--apap-red); }
body.inici .in-ball-4 { right: 3%; bottom: 14%; width: 28px; height: 28px; background: var(--apap-green); }

/* enlace al PDF como tarjeta-documento */
body.inici .in-doc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 26px; padding: 14px 18px; border: 1px solid var(--c, var(--apap-ink)); border-radius: 14px; background: #fff; box-shadow: 5px 5px 0 color-mix(in srgb, var(--c, #191917) 24%, #fff); font-size: .98rem; line-height: 1.4; color: var(--apap-grey-text); }
body.inici .in-doc i { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c, var(--apap-green)); color: var(--ct, var(--apap-ink)); font-size: 1.05rem; }
body.inici .in-doc span { font-weight: 700; color: var(--apap-ink); }
body.inici .in-doc a { flex: 1 1 14em; font: 600 .95rem/1.35 'Poppins', sans-serif; color: var(--apap-ink); border-bottom: 2px solid var(--c, var(--apap-green)); align-self: center; width: fit-content; flex-grow: 0; }
body.inici .in-doc a:hover { color: var(--apap-green-deep); }

/* destacados */
body.inici .in-band { padding: 64px 0 24px; }
body.inici .in-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
body.inici .in-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c); border-radius: var(--in-r); background: #fff; box-shadow: 7px 7px 0 color-mix(in srgb, var(--c) 22%, #fff); }
body.inici .in-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; align-items: stretch; }
body.inici .in-card-media { display: block; background: #fff; }
body.inici .in-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.inici .in-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--c); background: #fff; }
body.inici .in-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s; }
body.inici .in-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(transparent, rgba(255, 255, 255, .96)); pointer-events: none; }
body.inici .in-thumb:hover img { transform: scale(1.03); }
body.inici .in-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; justify-content: center; padding: 22px 26px 26px; }
body.inici .in-card:not(.in-card-wide) .in-card-body { flex: 1 1 auto; justify-content: space-between; }
body.inici .in-tag { display: inline-block; padding: .45em .95em; border-radius: 999px; background: var(--c); color: var(--ct, var(--apap-ink)); font: 700 .72rem/1.2 'Poppins', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
body.inici .in-card-body .in-doc { margin-top: 0; box-shadow: none; border-color: color-mix(in srgb, var(--c) 40%, #fff); }

/* secciones */
body.inici .in-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 18px; }
body.inici .in-tile { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px 22px 20px; border: 1px solid var(--c); border-radius: var(--in-r); background: #fff; color: var(--apap-ink); box-shadow: 6px 6px 0 color-mix(in srgb, var(--c) 22%, #fff); transition: transform .15s, box-shadow .15s; }
body.inici .in-tile:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 color-mix(in srgb, var(--c) 42%, #fff); color: var(--apap-ink); }
body.inici .in-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 50%; background: var(--c); color: var(--ct, var(--apap-ink)); font-size: 1.25rem; }
body.inici .in-tile b { font: 700 1.08rem/1.25 'Poppins', sans-serif; }
body.inici .in-tile span { font-size: .95rem; line-height: 1.4; color: var(--apap-grey-text); }
body.inici .in-go { position: absolute; right: 16px; bottom: 12px; font-size: 1.6rem; line-height: 1; color: var(--apap-ink); transition: transform .15s; }
body.inici .in-tile:hover .in-go { transform: translateX(4px); }

/* contacto */
body.inici .in-contact { position: relative; margin-top: 56px; padding: 60px 0 64px; text-align: center; background: linear-gradient(174deg, var(--apap-green-soft) 0 38%, var(--apap-green-light) 38% 100%); }
body.inici .in-contact::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--apap-green) 0 25%, var(--apap-yellow) 25% 50%, var(--apap-red) 50% 75%, var(--apap-purple) 75% 100%); }
body.inici .in-contact h2 { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem); font-weight: 700; line-height: 1.15; }
body.inici .in-contact .in-lede { margin: 14px auto 26px; }
body.inici .in-contact .in-cta { justify-content: center; }

/* ---- tableta y móvil ---- */
@media (max-width: 991.98px) {
	body.inici .in-hero { padding: 40px 0 56px; }
	body.inici .in-ball-1, body.inici .in-ball-3 { display: none; }
	body.inici .in-ball-2 { left: auto; right: 7%; top: 22px; }
	body.inici .in-ball-4 { right: 5%; bottom: 8%; }
	body.inici .in-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	body.inici .in-card-wide { grid-template-columns: 1fr; }
	body.inici .in-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
	body.inici .in-lede { font-size: 1.05rem; }
	body.inici .in-band { padding-top: 48px; }
	body.inici .in-cards { grid-template-columns: 1fr; gap: 22px; }
	body.inici .in-tiles { gap: 14px 12px; }
	body.inici .in-tile { padding: 16px 14px 36px; }
	body.inici .in-ico { width: 40px; height: 40px; margin-bottom: 8px; font-size: 1.1rem; }
	body.inici .in-tile b { font-size: .98rem; }
	body.inici .in-contact { padding: 48px 0 52px; }
}