/* Ficha de convocatoria — /subvenciones/<codigo-slug>/
   Hoja de familia: las 38 fichas las escribe scripts/subvenciones-generar.js,
   así que el CSS vive aquí y no incrustado 38 veces.
   Se carga ANTES del <style> de la página, como las otras hojas de familia. */

:root{--verde:#1a3a2e;--verde2:#254d3d;--mar:#1c3040;--oro:#c9a96e;--oro2:#e2c28a;--crema:#f5f0e8;--calido:#ede6d8;--blanco:#fff;--gris:#6b6560;--tinta:#161412;--oro-text:#806329}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background-color:#0d1613;scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Outfit','Outfit Fallback',sans-serif;background:var(--crema);color:var(--tinta)}
a{text-decoration:none;color:inherit}

/* Barra de navegación */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:1rem 5vw;background:rgba(245,240,232,0.97);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(0,0,0,0.08)}
.nav-logo{font-family:'Playfair Display','Playfair Fallback',serif;font-size:1.6rem;font-weight:700;color:var(--tinta)}.nav-logo span{color:var(--oro)}
.nav-links{display:flex;gap:1.75rem;list-style:none;align-items:center}.nav-links a{font-size:0.78rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gris)}
.nav-cta{background:var(--oro)!important;color:var(--blanco)!important;padding:0.55rem 1.25rem!important}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:11px 9px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:26px;height:1.5px;background:var(--tinta)}
.breadcrumb{background:var(--calido);padding:0.75rem 5vw;font-size:0.78rem;color:var(--gris);border-bottom:1px solid rgba(0,0,0,0.07)}
.breadcrumb a{color:var(--gris)}.breadcrumb span{margin:0 0.4rem}

/* Cabecera de la ficha */
.hero{background:linear-gradient(160deg,#1a3a2e 0%,#1c3040 50%,#16252e 100%);padding:7rem 5vw 3.25rem;color:var(--blanco)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-tag{display:inline-block;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--oro2);margin-bottom:1.1rem;font-weight:600;background:rgba(201,169,110,0.15);padding:0.45rem 1.1rem;border:1px solid rgba(201,169,110,0.3)}
.hero h1{font-family:'Playfair Display','Playfair Fallback',serif;font-size:clamp(1.75rem,3.6vw,2.7rem);font-weight:700;line-height:1.18;margin-bottom:1rem;text-wrap:balance}
.hero p.hero-desc{font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,0.8);font-weight:400;max-width:720px}
.hero-plazo{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,0.14);display:flex;flex-wrap:wrap;gap:0.5rem 2rem;font-size:0.9rem;color:rgba(255,255,255,0.75);font-weight:400}
.hero-plazo strong{color:#fff;font-weight:600}
.hero-plazo .urge{color:#f3b8a8;font-weight:600}
.hero-btns{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.75rem}
.hero-btns .btn{display:inline-block}

/* Secciones */
.section{padding:3.25rem 5vw;background:var(--crema)}
.section-blanca{background:#fff}
.inner{max-width:900px;margin:0 auto}
.bloque+.bloque{margin-top:2.5rem}
.bloque h2{font-family:'Playfair Display','Playfair Fallback',serif;font-size:1.55rem;color:var(--tinta);font-weight:700;line-height:1.25;margin-bottom:0.9rem}
.bloque h2 em{font-style:italic;color:var(--oro-text)}
.bloque h3{font-size:1rem;font-weight:600;color:var(--tinta);margin:1.4rem 0 0.5rem}
.bloque p{font-size:0.97rem;line-height:1.75;color:var(--gris);font-weight:400}
.bloque p+p{margin-top:0.8rem}
.bloque p strong{color:var(--tinta);font-weight:600}
.bloque a{color:var(--oro-text);font-weight:600;border-bottom:1px solid rgba(128,99,41,.35)}
@media (hover: hover){
.bloque a:hover{border-bottom-color:var(--oro-text)}
}


/* Tabla «de un vistazo» */
.datos{background:#fff;border:1px solid rgba(0,0,0,0.09);padding:1.5rem 1.6rem}
.section-blanca .datos{background:var(--crema)}
.dato{display:flex;flex-wrap:wrap;gap:0.3rem 1.2rem;padding:0.62rem 0;border-top:1px solid rgba(0,0,0,0.07);font-size:0.92rem}
.dato:first-child{border-top:none;padding-top:0}
.dato dt{color:var(--gris);font-weight:400;flex:0 0 auto;min-width:8.5rem}
.dato dd{color:var(--tinta);font-weight:500;flex:1 1 12rem}
.dato dd.urge{color:#a8321f;font-weight:600}
.dato dd.cerrada{color:var(--gris);font-weight:400}

/* Listas de requisitos y de pasos */
.lista{list-style:none;display:flex;flex-direction:column;gap:0.6rem;margin-top:0.4rem}
.lista li{font-size:0.97rem;line-height:1.7;color:var(--gris);font-weight:400;padding-left:1.15rem;position:relative}
.lista li::before{content:'';position:absolute;left:0;top:0.62em;width:5px;height:5px;background:var(--oro)}
.lista li strong{color:var(--tinta);font-weight:600}

/* Caja destacada («qué se obtiene») */
.caja{background:#fff;border-left:3px solid var(--oro);padding:1.25rem 1.4rem}
.section-blanca .caja{background:var(--crema)}
.caja p{font-size:1rem;line-height:1.7;color:var(--tinta);font-weight:400}
.caja p+p{margin-top:0.55rem}

/* Aviso pequeño */
.aviso{margin-top:1.5rem;font-size:0.86rem;line-height:1.75;color:var(--gris);font-weight:400;border-left:3px solid var(--oro);padding:0.9rem 1.1rem;background:#fff}
.section-blanca .aviso{background:var(--crema)}
.aviso strong{color:var(--tinta);font-weight:600}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1.1rem;margin-top:1.2rem}
.paso{background:#fff;border:1px solid rgba(0,0,0,0.09);padding:1.35rem 1.3rem}
.section-blanca .paso{background:var(--crema)}
.paso-n{font-family:'Playfair Display','Playfair Fallback',serif;font-size:1.5rem;color:var(--oro-text);font-weight:700;line-height:1;margin-bottom:0.5rem}
.paso h3{font-size:0.95rem;font-weight:600;color:var(--tinta);margin:0 0 0.4rem}
.paso p{font-size:0.88rem;line-height:1.65}

.tras-rejilla{margin-top:1.4rem}

/* Otras convocatorias */
.otras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem;margin-top:1.2rem}
.otra{background:#fff;border:1px solid rgba(0,0,0,0.09);padding:1.15rem 1.2rem;display:flex;flex-direction:column}
.section-blanca .otra{background:var(--crema)}
.otra-org{font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--oro-text);font-weight:700;line-height:1.4;margin-bottom:0.4rem}
.otra h3{font-family:'Playfair Display','Playfair Fallback',serif;font-size:1.02rem;font-weight:700;color:var(--tinta);line-height:1.3;margin-bottom:0.45rem}
.otra p{font-size:0.86rem;line-height:1.6;color:var(--gris);font-weight:400;margin-bottom:0.8rem}
.otra span.otra-mas{margin-top:auto;font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:var(--verde)}
@media (hover: hover){
.otra:hover{border-color:var(--oro)}
}


/* Preguntas frecuentes */
.faq-list{display:flex;flex-direction:column;gap:0.7rem;margin-top:1.2rem}
details.faq-item{border:1px solid rgba(0,0,0,0.09);background:#fff}
.section-blanca details.faq-item{background:var(--crema)}
details.faq-item summary{font-weight:600;font-size:0.97rem;color:var(--tinta);list-style:none;display:flex;justify-content:space-between;align-items:center;padding:1.05rem 1.3rem;gap:1rem;cursor:pointer}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary .faq-icon{color:var(--oro-text);font-size:1.3rem;font-weight:400;flex-shrink:0;transition:transform 0.2s ease;display:inline-block}
details.faq-item[open] summary .faq-icon{transform:rotate(45deg)}
details.faq-item p{padding:0 1.3rem 1.15rem;color:var(--gris);font-size:0.93rem;line-height:1.75;font-weight:400}

/* Botones y banda final */
.btn{display:inline-block;padding:0.95rem 2rem;font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;transition:all 0.25s;cursor:pointer;border:none;font-family:inherit}
.btn-verde{background:var(--verde);color:#fff}
@media (hover: hover){
.btn-verde:hover{background:var(--verde2)}
}

.btn-oro{background:var(--oro-text);color:#fff}
@media (hover: hover){
.btn-oro:hover{background:var(--oro2)}
}

.btn-claro{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45)}
@media (hover: hover){
.btn-claro:hover{background:rgba(255,255,255,0.1)}
}

.cta-band{background:var(--verde);padding:3.25rem 5vw;text-align:center;color:#fff}
.cta-band h2{font-family:'Playfair Display','Playfair Fallback',serif;font-size:clamp(1.45rem,2.5vw,1.95rem);color:#fff;margin-bottom:0.7rem;font-weight:700;line-height:1.25}
.cta-band h2 em{font-style:italic;color:var(--oro2)}
.cta-band p{color:rgba(255,255,255,0.72);font-size:0.95rem;line-height:1.7;max-width:600px;margin:0 auto 1.6rem;font-weight:400}
.cta-band .btn+.btn{margin-left:0.5rem}

/* Pie */
footer{background:#0d1613;padding:3rem 5vw 1.5rem;color:rgba(255,255,255,0.48)}
.fg-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2rem}
.flogo{font-family:'Playfair Display','Playfair Fallback',serif;font-size:1.5rem;font-weight:700;color:#fff;display:block;margin-bottom:1rem}
.flogo span{color:var(--oro)}
.fbrand p{font-size:0.85rem;line-height:1.7;margin-bottom:1.25rem;font-weight:400}
.fcol h3{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:1.25rem}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.fcol ul li a{font-size:0.85rem;color:rgba(255,255,255,0.48);font-weight:400}
@media (hover: hover){
.fcol ul li a:hover{color:var(--oro2)}
}

.fbot{border-top:1px solid rgba(255,255,255,0.06);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.78rem}
.flegal{display:flex;gap:1.5rem}
.flegal a{color:rgba(255,255,255,0.6)}
.wa{position:fixed;bottom:1.5rem;right:1.5rem;width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:900;box-shadow:0 4px 16px rgba(0,0,0,0.25)}
.wa svg{width:26px;height:26px;fill:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* El menú son 12 elementos: por debajo de 1100 px no cabe en la barra y por
   encima hay que comprimirlo hasta los ~1600. Copiado del catálogo, que es
   donde se midió. */
@media (min-width:961px) and (max-width:1099px){
  .nav-links{display:none;flex-direction:column;gap:0;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100dvh;background:var(--crema);padding:4rem 5vw 1rem;z-index:997;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-burger{display:flex;z-index:999;position:relative}
  .nav-links li{border-bottom:1px solid rgba(0,0,0,0.06)}
  .nav-links a{display:block;padding:0.8rem 0;font-size:1rem!important;color:var(--tinta)!important}.nav-links .nav-cta{text-align:center;padding:0.8rem 1.5rem!important;margin-top:0.5rem}
}
@media (min-width:1100px) and (max-width:1599px){
  .nav{padding:0.85rem 3vw}
  .nav-links{gap:1.1rem}
  .nav-links a{font-size:0.68rem;letter-spacing:0.04em}
  .nav-cta{padding:0.5rem 0.95rem!important}
}
@media(max-width:960px){
  .nav-links{display:none;flex-direction:column;gap:0;position:fixed;inset:0;width:100vw;height:100dvh;background:var(--crema);padding:4rem 5vw 1rem;z-index:997;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-burger{display:flex;z-index:999;position:relative}
  .nav-links li{border-bottom:1px solid rgba(0,0,0,0.06)}
  .nav-links a{display:block;padding:0.8rem 0;font-size:1rem!important;color:var(--tinta)!important}.nav-links .nav-cta{text-align:center;padding:0.8rem 1.5rem!important;margin-top:0.5rem}
  .fg-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .fg-grid{grid-template-columns:1fr}
  .fbot{flex-direction:column;text-align:center}
  .hero{padding:6rem 5vw 2.5rem}
  .section{padding:2.5rem 5vw}
  .datos{padding:1.15rem 1.1rem}
  .dato dt{min-width:7rem}
  .caja{padding:1rem 1.1rem}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{text-align:center}
  .cta-band .btn{display:block;margin:0 auto}
  .cta-band .btn+.btn{margin:0.6rem auto 0}
  details.faq-item summary{font-size:0.92rem;padding:0.95rem 1.05rem;gap:0.7rem}
  details.faq-item p{padding:0 1.05rem 1rem;font-size:0.89rem}
}
/* ── Micro-interacciones (2026-09-15, ideas de kinetics.colorion.co) ──
   Respuesta al tacto sin dependencias: el botón se hunde un píxel al
   pulsar, el subrayado del menú se dibuja de izquierda a derecha, los
   desplegables abren con la altura animada donde el navegador lo soporta
   (::details-content, Chrome 131+; en los demás abren como siempre) y el
   tick de «recibido» se dibuja. Con prefers-reduced-motion se apagan desde
   esece-a11y.css. */
a.btn,button.btn{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
a.btn:active,button.btn:active{transform:translateY(1px) scale(.985)}
.nav-links a:not(.nav-cta){background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .3s}
.nav-links a:not(.nav-cta):focus-visible{background-size:100% 1px}
@media (hover: hover){.nav-links a:not(.nav-cta):hover{background-size:100% 1px}}

details.faq-item,details.art-indice,details.sv-mas,#faq details{interpolate-size:allow-keywords}
details.faq-item::details-content,details.art-indice::details-content,details.sv-mas::details-content,#faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.2,.8,.2,1),content-visibility .35s allow-discrete}
details.faq-item[open]::details-content,details.art-indice[open]::details-content,details.sv-mas[open]::details-content,#faq details[open]::details-content{block-size:auto}
.tick{display:block;width:1em;height:1em}
.tick path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:tickDibujo .5s .15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tickDibujo{to{stroke-dashoffset:0}}
/* Hamburguesa → aspa (Kinetics, «Icon morph»): las tres barras giran cuando
   el panel está abierto; esece-a11y.js mantiene aria-expanded al día. */
.nav-burger span{transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s,background-color .3s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Controles nativos en el verde de marca: casillas, radios, deslizadores. */
input[type="checkbox"],input[type="radio"],input[type="range"],progress{accent-color:var(--verde)}
/* El aviso de cookies y el «enlace copiado» asientan con curva elástica en
   vez de un ease plano (Kinetics, «Notification slide-in», «Toast overshoot»).
   Solo cambia la curva; la transición ya existía. */
.cookie-banner{transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.share-toast{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
/* Fundido corto entre páginas (View Transitions, Chrome 126+ y Safari 18.2+)
   cuando las dos llevan esta regla. Sin ella, o con movimiento reducido,
   la navegación es la de siempre. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}
/* El área de texto crece con lo que se escribe (Kinetics, «Prompt composer»;
   field-sizing, Chrome 123+; el resto conserva el min-height). */
textarea{field-sizing:content}
/* El campo que no pasa la validación se sacude (Kinetics, «Error shake»);
   la clase la pone esece-a11y.js al evento invalid y se quita al acabar. */
.campo-invalido{animation:sacudida .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes sacudida{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}