/* Portada 2026: navegación compacta, hero narrativo y foco en la aplicación. */

.home { overflow-x: clip; }
.home .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Cabecera: siempre hay menú, también en escritorio. */
.home .header {
  --header-bg: 0;
  position: fixed;
  inset: 0 0 auto;
  background: rgba(255, 255, 255, var(--header-bg));
  border-bottom-color: rgba(223, 227, 234, var(--header-bg));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: box-shadow 0.2s ease;
}
.home .header.is-solid { box-shadow: 0 4px 28px rgba(0, 14, 35, 0.08); }
.home .header__inner { justify-content: space-between; }
.home .brand {
  opacity: var(--header-brand-opacity, 0);
  transform: translateY(calc((1 - var(--header-brand-opacity, 0)) * -8px));
  pointer-events: none;
}
.home .header.is-solid .brand { pointer-events: auto; }
.home .brand__logo { height: 42px; object-fit: contain; object-position: left center; }
.home .brand__logo--icon { width: 42px; }
.home .header__actions { margin-left: auto; }
.home .nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: rgba(255,255,255,0.42);
  color: #fff;
  background: rgba(255,255,255,0.08);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.home .nav-toggle__icon { display: grid; gap: 4px; width: 20px; }
.home .nav-toggle__icon i { display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; }
.home .header.is-solid .nav-toggle { color: var(--navy-600); border-color: var(--border); background: #fff; }
.home .header:not(.is-solid) .lang { border-color: rgba(255,255,255,0.4); }
.home .header:not(.is-solid) .lang button { color: rgba(255,255,255,0.82); }
.home .header:not(.is-solid) .lang button[aria-pressed="true"] { background: var(--amber-500); color: var(--navy-800); }

.home .nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 130;
  width: min(460px, 100%);
  margin: 0;
  padding: clamp(28px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  background: var(--navy-700);
  color: #fff;
  transform: translateX(102%);
  visibility: hidden;
  box-shadow: -24px 0 70px rgba(0,14,35,.3);
  transition: transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s;
}
.home .nav[data-open="true"] { transform: none; visibility: visible; transition-delay: 0s; }
.home .nav__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--amber-300); font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.home .nav__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: #fff; font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.home .nav__list { display: grid; gap: 0; margin: auto 0; padding: 18px 0; }
.home .nav__link { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 12px; padding: 13px 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); text-decoration: none; }
.home .nav__link span { color: var(--amber-300); font-size: .7rem; letter-spacing: .08em; }

/* Los titulos del menu, mas contenidos.
   --------------------------------------------------------------------------
   Estaban en clamp(1.45rem, 4vw, 2.15rem): cuatro entradas llenaban la
   pantalla y no cabia nada mas. Con las secciones de ONG, ayuntamientos y
   empresas dentro son ocho enlaces, y a ese tamano no entraban ni de lejos.
   Bajarlos ademas hace que el menu se lea como un indice del sitio y no como
   un cartel. */
.home .nav__link strong { font-size: clamp(1.1rem, 2.8vw, 1.45rem); font-weight: 500; transition: transform .2s ease, color .2s ease; }

/* Las paginas de cada perfil, colgando de «Para quien».
   Van sin numero y algo mas pequenas: son ramas de una entrada, no
   apartados del mismo nivel, y numerarlas romperia la cuenta. */
.home .nav__sub { display: grid; gap: 0; margin: 0 0 0 44px; padding: 0; list-style: none; }
.home .nav__sublink {
  display: block;
  padding: 9px 0;
  color: rgba(255, 255, 255, .82);
  font-size: .98rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: transform .2s ease, color .2s ease;
}
.home .nav__sub li:last-child .nav__sublink { border-bottom: 0; }
.home .nav__sublink:hover { color: var(--amber-300); transform: translateX(6px); }
.home .nav__link:hover, .home .nav__link[aria-current="page"] { color: var(--amber-300); border-bottom-color: rgba(255,255,255,.14); }
.home .nav__link:hover strong { transform: translateX(8px); }
.home .nav__tagline { margin: 0; color: rgba(255,255,255,.56); font-size: .92rem; }
.home .nav__backdrop { position: fixed; inset: 0; z-index: 120; border: 0; background: rgba(0,14,35,.62); opacity: 0; visibility: hidden; cursor: default; transition: opacity .3s ease, visibility 0s linear .3s; }
.home .nav__backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.home.menu-open { overflow: hidden; }

/* El primer scroll extrae el símbolo del centro del logotipo y lo lleva a la cabecera. */
.home .hero { height: 185svh; min-height: 960px; overflow: visible; background: var(--navy-700); }
.home .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; }
.home .hero__stage::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #001636 0%, #002557 54%, #0b417c 100%); }
.home .hero__stage::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000, transparent 86%); }
.home .hero__orb { position: absolute; border-radius: 50%; opacity: .52; pointer-events: none; }
.home .hero__orb--one { width: 38vw; height: 38vw; min-width: 320px; min-height: 320px; right: -12vw; top: -15vw; background: radial-gradient(circle, rgba(252,175,23,.22), transparent 68%); transform: translate3d(0, calc(var(--hero-progress, 0) * 90px), 0); }
.home .hero__orb--two { width: 32vw; height: 32vw; min-width: 260px; min-height: 260px; left: -10vw; bottom: -12vw; background: radial-gradient(circle, rgba(95,135,181,.28), transparent 68%); transform: translate3d(0, calc(var(--hero-progress, 0) * -70px), 0); }
.home .hero__lockup { position: absolute; transform-origin: center; will-change: left, top, transform, opacity; }
.home .hero__lockup img { width: 100%; height: auto; }
.home .hero__lockup--wordmark { z-index: 2; left: 50%; top: 50%; width: clamp(300px, 54vw, 650px); opacity: var(--hero-wordmark-opacity, 1); transform: translate(-50%,-50%) scale(var(--hero-wordmark-scale, 1)); }
.home .hero__lockup--app-icon { z-index: 3; left: var(--hero-icon-x, 50vw); top: var(--hero-icon-y, 50vh); width: clamp(92px, 13vw, 152px); opacity: var(--hero-icon-opacity, 0); transform: translate(-50%,-50%) scale(var(--hero-icon-scale, .32)); }
.home .hero__content { height: 100%; display: grid; place-items: center; }
.home .hero__copy { max-width: 820px; text-align: center; opacity: var(--hero-copy-opacity, 0); transform: translateY(calc((1 - var(--hero-copy-opacity, 0)) * 42px)); will-change: transform, opacity; }
.home .hero__eyebrow { margin-bottom: 16px; color: var(--amber-300); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.home .hero h1 { max-width: 15ch; margin: 0 auto 20px; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1.03; text-wrap: balance; }
.home .hero__tagline { max-width: 65ch; margin: 0 auto 30px; font-size: clamp(1rem, 1.7vw, 1.2rem); }
.home .hero__actions { justify-content: center; }
.home .hero__scroll { position: absolute; left: 50%; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: calc(1 - min(1, var(--hero-progress, 0) * 3)); transform: translateX(-50%); }
.home .hero__scroll i { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--amber-500), transparent); animation: scroll-pulse 1.8s ease-in-out infinite; }
@keyframes scroll-pulse { 0%,100% { transform: scaleY(.55); transform-origin: top; opacity:.45; } 50% { transform: scaleY(1); opacity:1; } }

/* Aplicación. */
.home .app-showcase { position: relative; overflow: hidden; padding-top: 112px; }
.home .app-showcase::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 10%, rgba(252,175,23,.11), transparent 30%); }
.home .app-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.home .app-intro h2 { max-width: 17ch; font-size: clamp(2rem, 4.2vw, 3.5rem); }
.home .app-intro > p { margin: 0; font-size: 1.08rem; }
.home .app-flow { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); margin-bottom: 72px; }
.home .app-step { padding: 28px 30px 30px 0; }
.home .app-step + .app-step { padding-left: 30px; border-left: 1px solid rgba(255,255,255,.16); }
.home .app-step > span { display: inline-block; margin-bottom: 22px; color: var(--amber-300); font-size: .78rem; font-weight: 700; }
.home .app-step h3 { margin-bottom: 9px; }
.home .app-step p { margin: 0; font-size: .92rem; }
.home .app-gallery { display: grid; grid-template-columns: .86fr 1fr .86fr; gap: clamp(18px, 4vw, 54px); align-items: center; max-width: 980px; margin: 0 auto; }
.home .app-shot { margin: 0; text-align: center; }
.home .iphone-17 { position: relative; width: 100%; aspect-ratio: 1206 / 2622; padding: 7px; border: 1px solid rgba(255,255,255,.38); border-radius: 48px; background: linear-gradient(135deg, #d7d9dc 0%, #686c73 18%, #f3f3f1 49%, #5f6369 82%, #c9cbd0 100%); box-shadow: 0 34px 76px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.45); }
.home .iphone-17__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border: 2px solid #0b0d10; border-radius: 40px; background: #0b0d10; }
.home .iphone-17__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.home .iphone-17__island { position: absolute; z-index: 3; left: 50%; top: 12px; width: 28%; height: 24px; border-radius: 999px; background: #050608; box-shadow: 0 1px 2px rgba(255,255,255,.08) inset; transform: translateX(-50%); }
.home .iphone-17__button { position: absolute; z-index: -1; left: -4px; width: 4px; border-radius: 3px 0 0 3px; background: #85898f; }
.home .iphone-17__button--action { top: 16%; height: 6%; }
.home .iphone-17__button--volume { top: 26%; height: 13%; }
.home .app-shot--side { transform: scale(.9); opacity: .9; }
.home .app-shot--side:first-child { transform: scale(.9) rotate(-3deg); }
.home .app-shot--side:last-child { transform: scale(.9) rotate(3deg); }
.home .app-shot figcaption { margin-top: 20px; color: rgba(255,255,255,.7); font-size: .86rem; }
.home .store-links { scroll-margin-top: calc(var(--header-h) + 28px); display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 56px auto 0; }
.home .store-badge { min-width: 226px; display: inline-flex; align-items: center; gap: 13px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.home .store-badge:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); transform: translateY(-2px); }
.home .store-badge svg { width: 30px; height: 30px; flex: none; fill: currentColor; }
.home .store-badge span { display: grid; text-align: left; line-height: 1.1; }
.home .store-badge small { font-size: .65rem; color: rgba(255,255,255,.68); }
.home .store-badge strong { margin-top: 3px; font-size: 1rem; }
.home .store-links:target .store-badge { animation: store-highlight 1.2s ease 1; }
@keyframes store-highlight { 0%,100% { box-shadow: none; } 40% { border-color: var(--amber-300); box-shadow: 0 0 0 5px rgba(252,175,23,.17); } }

/* Qué hacemos. */
.home .what .section-head { max-width: 760px; }
.home .what .card { min-height: 260px; padding: 32px; box-shadow: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.home .what .card:hover { transform: translateY(-7px); border-color: var(--navy-200); box-shadow: var(--shadow-raised); }
.home .what .card__icon { font-size: 1.8rem; background: var(--amber-50); color: var(--navy-600); }

/* Públicos: dos grupos, con tres tipos dentro de organizaciones. */
.home .audience-layout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.home .audience-card, .home .organization-group { border-radius: 24px; padding: clamp(26px,4vw,44px); }
.home .audience-choice { background: #fff; color: var(--text); border: 1px solid var(--border); outline: 0; transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.home .audience-choice:is(:hover,:focus,:focus-within) { background: var(--navy-600); color: #fff; border-color: var(--navy-600); transform: translateY(-8px); box-shadow: 0 22px 46px rgba(0,37,87,.18); }
.home .audience-card--volunteer { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; }
.home .audience-card--volunteer::after { content: ''; position: absolute; width: 240px; height: 240px; right: -90px; bottom: -90px; border: 1px solid rgba(252,175,23,.24); border-radius: 50%; box-shadow: 0 0 0 38px rgba(252,175,23,.04), 0 0 0 76px rgba(252,175,23,.03); }
.home .audience-card__number { color: var(--amber-600); font-size: .75rem; font-weight: 700; letter-spacing: .09em; }
.home .audience-choice:is(:hover,:focus,:focus-within) .audience-card__number { color: var(--amber-300); }
.home .audience-card__icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 70px 0 24px; border-radius: 50%; background: var(--amber-500); color: var(--navy-700); font-size: 2rem; }
.home .audience-card h3 { color: var(--navy-600); font-size: clamp(1.8rem,3vw,2.6rem); transition: color .3s ease; }
.home .audience-card p { color: var(--text-soft); transition: color .3s ease; }
.home .audience-points { position: relative; z-index: 1; display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.home .audience-points li { display: flex; gap: 10px; color: var(--text-soft); font-size: .9rem; transition: color .3s ease; }
.home .audience-points li::before { content: '✓'; color: var(--amber-700); font-weight: 700; }
.home .audience-choice:is(:hover,:focus,:focus-within) h3,
.home .audience-choice:is(:hover,:focus,:focus-within) h4 { color: #fff; }
.home .audience-choice:is(:hover,:focus,:focus-within) p,
.home .audience-choice:is(:hover,:focus,:focus-within) .audience-points li { color: rgba(255,255,255,.78); }
.home .audience-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; padding-top: 30px; }
.home .audience-card .text-link { color: var(--navy-600); }
.home .audience-choice:is(:hover,:focus,:focus-within) .text-link { color: #fff; }
.home .organization-group__head { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 28px; }
.home .organization-group__head h3 { margin-bottom: 8px; color: var(--navy-600); font-size: clamp(1.6rem,3vw,2.3rem); transition: color .3s ease; }
.home .organization-group__head p { color: var(--text-soft); transition: color .3s ease; }
.home .organization-list { display: grid; gap: 12px; }
.home .organization-card { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--n-50); transition: background-color .2s ease, border-color .2s ease; }
.home .organization-card:hover { background: #fff; border-color: var(--navy-200); }
.home .organization-card__top { display: flex; align-items: center; gap: 12px; }
.home .organization-card__top > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--navy-50); color: var(--navy-600); font-size: 1.2rem; }
.home .organization-card h4 { color: var(--navy-600); font-size: 1.06rem; }
.home .organization-card p { margin: 10px 0 17px 50px; color: var(--text-soft); font-size: .92rem; }
.home .organization-card > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-left: 50px; }
.home .organization-group:is(:hover,:focus,:focus-within) .organization-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.home .organization-group:is(:hover,:focus,:focus-within) .organization-card:hover { background: rgba(255,255,255,.13); }
.home .organization-group:is(:hover,:focus,:focus-within) .organization-card__top > span { background: rgba(252,175,23,.16); color: var(--amber-300); }
.home .organization-group:is(:hover,:focus,:focus-within) .btn--navy { background: var(--amber-500); color: var(--navy-800); }
.home .btn--small { padding: 9px 14px; border-radius: 8px; font-size: .86rem; }
.home .text-link { color: var(--navy-600); font-size: .85rem; font-weight: 600; text-decoration: none; }
.home .text-link:hover { text-decoration: underline; }

/* Contacto y pie. */
.home #contacto { position: relative; }
.home #contacto::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 45%, rgba(11,65,124,.4)); }
.home #contacto .split { position: relative; }
.home #contacto h2 { max-width: 14ch; font-size: clamp(2rem,4vw,3.3rem); }
.home .contact-email { color: var(--amber-300); font-weight: 600; }
.home .contact-note { color: rgba(255,255,255,.6); }
.home #contacto .field label { color: #fff; }
.home #contacto .consent label { color: rgba(255,255,255,.76); }
.home #contacto .consent a { color: var(--amber-300); }
.home .footer__brand img { width: 220px; height: auto; margin-bottom: 16px; }

@media (max-width: 900px) {
  .home .app-intro { grid-template-columns: 1fr; gap: 22px; }
  .home .app-flow { grid-template-columns: 1fr; }
  .home .app-step { padding: 24px 0; }
  .home .app-step + .app-step { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .home .audience-layout { grid-template-columns: 1fr; }
  .home .audience-card__icon { margin-top: 38px; }
}

@media (max-width: 640px) {
  .home .header { height: 64px; }
  .home .brand__logo--icon { width: 38px; height: 38px; }
  .home .lang button { padding: 6px 8px; }
  .home .lang img { display: none; }
  .home .header__actions { gap: 8px; }
  .home .nav { padding: 24px; }
  .home .hero { height: 175svh; }
  .home .hero__stage { min-height: 560px; }
  .home .hero__lockup--wordmark { width: min(82vw, 420px); }
  .home .hero__lockup--app-icon { width: min(30vw, 118px); }
  .home .hero h1 { font-size: clamp(2.35rem, 12vw, 4rem); }
  .home .hero__copy { padding-top: 44px; }
  .home .hero__actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-inline: auto; }
  .home .hero__scroll span { display: none; }
  .home .app-showcase { padding-top: 80px; }
  .home .app-gallery { grid-template-columns: repeat(3, 72vw); gap: 22px; overflow-x: auto; justify-content: start; scroll-snap-type: x mandatory; margin-inline: -24px; padding: 18px 24px 36px; scrollbar-width: none; }
  .home .app-gallery::-webkit-scrollbar { display: none; }
  .home .app-shot, .home .app-shot--side, .home .app-shot--side:first-child, .home .app-shot--side:last-child { transform: none; opacity: 1; scroll-snap-align: center; }
  .home .iphone-17 { padding: 6px; border-radius: 42px; }
  .home .iphone-17__screen { border-radius: 35px; }
  .home .iphone-17__island { top: 10px; height: 21px; }
  .home .store-links { align-items: stretch; flex-direction: column; }
  .home .store-badge { width: 100%; }
  .home .organization-group__head { grid-template-columns: 1fr; }
  .home .organization-card p, .home .organization-card > div:last-child { margin-left: 0; }
  .home .organization-card > div:last-child { align-items: stretch; flex-direction: column; }
  .home .organization-card .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home .header { --header-bg: 1 !important; }
  .home .header .brand { --header-brand-opacity: 1 !important; }
  .home .header .nav-toggle { color: var(--navy-600); border-color: var(--border); background: #fff; }
  .home .header .lang { border-color: var(--border); }
  .home .header .lang button { color: var(--text-mute); }
  .home .header .lang button[aria-pressed="true"] { background: var(--navy-600); color: #fff; }
  .home .hero { height: 100svh; min-height: 680px; }
  .home .hero__lockup { display: none; }
  .home .hero__copy { opacity: 1; transform: none; }
  .home .hero__scroll { display: none; }
}