:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  /* Palette adapted to header: primary blue, frame green, pastel blue */
  --accent:#0f4e61; /* primary blue (titles) */
  --frame-green:#a2b99e; /* soft green from banner frame */
  --accent-pastel:#7fc9e9; /* pastel blue for decorative elements */
  --muted:#666;
  --container:1100px;
}
*{box-sizing:border-box}
.container{max-width:1200px;margin:0 auto;padding:1.5rem}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;line-height:1.75;color:var(--text);background:#fbfffe;margin:0}
.site-header{background:#fafafa;border-bottom:1px solid #eee;position:sticky;top:0;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--accent);text-decoration:none}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.main-nav a{text-decoration:none;color:var(--text);padding:.35rem .6rem;border-radius:8px;display:inline-block;transition:all .16s ease;font-size:.95rem}
.site-header{background: #ffffff; /* solid header for clarity */ box-shadow: 0 6px 16px rgba(12,38,45,0.04);border-bottom:1px solid rgba(0,0,0,0.04)}
.main-nav a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(12,38,45,0.06);color:var(--accent)}
.main-nav a.active{background: #f1f2f3; color:var(--accent); font-weight:600}
.main-nav a:focus{outline:2px solid var(--accent-pastel);outline-offset:3px}
  .body-font{
    font-family: 'Poppins', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  body{font-family:var(--body-font, 'Poppins', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);line-height:1.65;color:var(--text);background:var(--bg);margin:0}
/* content links use brand accent; nav keeps its text color */
a{color:var(--accent)}
a:hover{text-decoration:underline}
a:focus{outline:2px solid var(--accent-pastel);outline-offset:3px}
.menu-toggle{display:none;background:transparent;border:0;font-size:1.25rem}
.hero{padding:3rem 0;background:linear-gradient(180deg,#fff 0%,#fff6fb 100%);text-align:center}
.hero .lead{color:var(--muted);margin-top:0}
.cta{background:var(--accent);color:white;padding:.6rem 1rem;border-radius:6px;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.hero-image{margin-top:1rem}
.hero-image img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08)}

/* Banner header matching provided design */
.hero-banner{display:flex;justify-content:center}
.banner-frame{background:#fff;border:10px solid var(--frame-green);border-radius:12px;max-width:1100px;width:100%;position:relative;padding:2.5rem 2rem;box-shadow:0 14px 40px rgba(12,38,45,.06);overflow:visible}
.banner-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;z-index:2}
.banner-title{font-size:2.2rem;margin:0;color:var(--accent);font-weight:700;font-family:'Poppins',sans-serif}
.title-strong{display:block;font-size:3.2rem}
.banner-sub{margin:0;color:var(--accent);opacity:.95;font-weight:600;font-size:2.2rem}
.wave{position:absolute;top:8%;width:120px;height:auto}
.wave-left{left:8px;transform:scaleX(-1);opacity:.9}
.wave-right{right:8px;opacity:.9}

/* animated wave layers */
.wave {display:flex;flex-direction:column;gap:0;align-items:center}
.wave svg{width:140px;height:auto;display:block}
.wave-layer{transform-origin:center;will-change:transform,opacity}

@keyframes waveShiftX {
  0%{transform: translateX(0) translateY(0)}
  50%{transform: translateX(8px) translateY(-4px)}
  100%{transform: translateX(0) translateY(0)}
}
@keyframes waveShiftXSlow {
  0%{transform: translateX(0) translateY(0)}
  50%{transform: translateX(-10px) translateY(-6px)}
  100%{transform: translateX(0) translateY(0)}
}

.wave-left .wave-layer-1{animation: waveShiftX 6s ease-in-out infinite}
.wave-left .wave-layer-2{animation: waveShiftXSlow 10s ease-in-out infinite}
.wave-left .wave-layer-3{animation: waveShiftX 8s ease-in-out infinite}

.wave-right .wave-layer-1{animation: waveShiftXSlow 7s ease-in-out infinite}
.wave-right .wave-layer-2{animation: waveShiftX 9s ease-in-out infinite}
.wave-right .wave-layer-3{animation: waveShiftXSlow 11s ease-in-out infinite}

/* subtle opacity/fade movement */
@keyframes waveFade {
  0%{opacity:.95}
  50%{opacity:.7}
  100%{opacity:.95}
}
.wave-layer-2{animation-name: waveShiftXSlow,waveFade; animation-duration:10s,8s; animation-iteration-count: infinite, infinite; animation-timing-function: ease-in-out, ease-in-out}

/* respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .wave-left .wave-layer-1,
  .wave-left .wave-layer-2,
  .wave-left .wave-layer-3,
  .wave-right .wave-layer-1,
  .wave-right .wave-layer-2,
  .wave-right .wave-layer-3 {animation: none}
}

@media(min-width:900px){
  .banner-title{font-size:2.4rem}
  .title-strong{font-size:3.2rem}
  .wave{width:220px}
}

@media(max-width:600px){
  .banner-frame{padding:1rem}
  .banner-title{font-size:1.25rem}
  .title-strong{font-size:1.6rem}
  .wave{display:none}
}

.ribbon{position:absolute;bottom:14px;width:280px;height:auto;pointer-events:none;z-index:0}
.ribbon-svg{width:280px;height:auto;display:block}
.wave-left{left:18px}
.wave-right{right:18px}

/* place ribbons lower inside frame and tilt toward outside corners; reduce opacity so text remains clear */
.wave-left{transform-origin: bottom left; transform: rotate(-22deg) translate(-8px, 6px);}
.wave-right{transform-origin: bottom right; transform: rotate(22deg) translate(8px, 6px);}
.ribbon-group{opacity:0.85}
.ribbon-group{stroke:var(--accent-pastel);stroke-width:1;fill:none;opacity:0.95}
.ribbon-line{stroke-linecap:round}
.ribbon-line.line1{stroke-opacity:1;transform:translateY(0)}
.ribbon-line.line2{stroke-opacity:0.9;transform:translateY(-6px)}
.ribbon-line.line3{stroke-opacity:0.8;transform:translateY(-12px)}
.ribbon-line.line4{stroke-opacity:0.7;transform:translateY(-18px)}
.ribbon-line.line5{stroke-opacity:0.6;transform:translateY(-24px)}
.ribbon-line.line6{stroke-opacity:0.5;transform:translateY(-30px)}

@keyframes ribbonSway {
  0% { transform: translateX(0) translateY(0) rotate(0deg) }
  50% { transform: translateX(6px) translateY(-4px) rotate(0.4deg) }
  100% { transform: translateX(0) translateY(0) rotate(0deg) }
}

@keyframes ribbonSwayReverse {
  0% { transform: translateX(0) translateY(0) rotate(0deg) }
  50% { transform: translateX(-6px) translateY(-4px) rotate(-0.4deg) }
  100% { transform: translateX(0) translateY(0) rotate(0deg) }
}

.wave-left .ribbon-group{animation: ribbonSway 8s ease-in-out infinite}
.wave-right .ribbon-group{animation: ribbonSwayReverse 9.2s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .wave-left .ribbon-group,
  .wave-right .ribbon-group {animation: none}
}

@media(max-width:600px){
  /* disable tilt on small screens to avoid clipping */
  .wave-left, .wave-right{transform:none;left:auto;right:auto;top:8%}
}

.cost-table{width:100%;border-collapse:collapse;margin:1rem 0}
.cost-table th,.cost-table td{border:1px solid #eee;padding:.5rem;text-align:center}
.cost-table thead th{background: color-mix(in srgb, var(--frame-green) 20%, white); color: #08323a}
.costs h3{margin-top:0}
.costs p{margin:.25rem 0}
.section{padding:3rem 0}
.docente-grid{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:center}
.docente-grid.no-photo{grid-template-columns:1fr}
.docente-photo{width:200px;height:200px;object-fit:cover;border-radius:8px;background:#ddd}
.course-header{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;flex-direction:column;text-align:center}
.course-logo{width:300px;height:auto}
.course-title{margin:0;font-size:1.1rem}
.course-instructor{margin:0;color:var(--muted)}
.course-list{columns:2;column-gap:2rem}
.form{max-width:640px}
label{display:block;margin-top:.75rem}
input,textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:6px;margin-top:.25rem}
.form-actions{display:flex;gap:.5rem;margin-top:1rem}
button{background:var(--accent);color:white;border:0;padding:.6rem 1rem;border-radius:6px;cursor:pointer}
button[aria-disabled="true"],button:disabled{opacity:.6;cursor:not-allowed}
.site-footer{padding:1.25rem 0;border-top:1px solid #eee;background:#fafafa;margin-top:2rem}

/* Footer logos and supporters */
.footer-logos{display:flex;gap:2rem;align-items:flex-start;justify-content:space-between;margin-top:1rem}
.footer-column{flex:1}
.footer-column h4{margin:0 0 .5rem;color:var(--accent);font-size:1.25rem}
.logo-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.logo-row img{object-fit:contain;width:auto;display:block}

/* raw logo mode: prefer intrinsic sizes but constrain width to container to avoid overflow */
.logo-row.logo-raw{gap:1rem;align-items:center}
.logo-row.logo-raw img{width:auto;max-width:100%;height:auto;display:block}

/* specific centered row for the big 'logos_apoyos' image */
.logos-apoyos-row{width:100%;display:block;text-align:center;margin-top:.5rem}
.logos-apoyos-row img{display:inline-block;max-width:480px;width:100%;height:auto}

@media(max-width:800px){
  .footer-logos{flex-direction:column;gap:1rem}
  .logo-row img{max-height:48px}
  .logo-row.logo-raw img{max-height:64px}
  .logos-apoyos-row img{max-width:320px}

  .docente-grid{grid-template-columns:1fr;grid-auto-rows:auto;text-align:center}
  .menu-toggle{display:inline-block}
  .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;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
  /* mobile nav: full-width panel with subtle inset and pill links stacked */
  .main-nav{display:none}
  .main-nav[open]{display:block;position:absolute;left:0;right:0;top:100%;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));padding:1rem;border-top:1px solid #eee;box-shadow:0 8px 24px rgba(12,38,45,0.08)}
  .main-nav[open] ul{flex-direction:column;gap:.5rem}
  .main-nav[open] a{display:block;padding:.5rem .75rem;border-radius:6px}
}

/* logo card: consistent framed box for footer logos */
.logo-card{display:inline-flex;align-items:center;justify-content:center;padding:12px;background:white;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.04);height:144px;max-width:780px;width:100%;box-sizing:border-box}
.logo-card img{max-height:114px;width:auto;max-width:100%;height:auto;object-fit:contain;display:block}

/* thin frame around the whole footer logos block */
.footer-frame{border:3px solid var(--frame-green);border-radius:8px;padding:10px;background:white;display:block;margin-top:1rem}

/* Logos individuales adicionales */
.individual-logos{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.individual-logos .logo-card{height:70px;width:auto;min-width:80px;max-width:120px}

@media(max-width:800px){
  .logo-card{height:100px;padding:8px;max-width:100%}
  .logo-card img{max-height:80px}
  .logos-apoyos-row img{max-width:100%}
}

/* footer image (reinserted) */
.footer-image-wrap{display:flex;justify-content:center;margin-top:1rem}
.footer-image{max-width:900px;width:100%;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.04)}

/* Accordion / cards for program */
.accordion{display:block;margin-top:1rem}
.accordion-item{background:white;border:1px solid #eee;border-radius:8px;margin-bottom:.75rem;overflow:hidden}
.accordion-summary{cursor:pointer;padding:.75rem 1rem;display:block;font-weight:600;background:linear-gradient(90deg,#fff,#fff);border:none}
.accordion-summary::-webkit-details-marker{display:none}
.accordion-content{padding:1rem;border-top:1px solid #f2f2f2}

@media(max-width:800px){
  .course-list{columns:1}
}

/* Galería de imágenes entre objetivos y programa */
.images-gallery{display:flex;gap:1rem;justify-content:center;align-items:flex-start;flex-wrap:wrap;width:100%}
.gallery-image{width:45%;max-width:45%;height:300px;object-fit:cover;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08);flex-shrink:0}

@media(max-width:600px){
  .images-gallery{flex-direction:column;gap:.5rem;align-items:center}
  .gallery-image{width:100%;max-width:100%}
}

/* Destacar elementos importantes del programa */
.program-highlight{font-size:1.2rem;color:var(--accent)}

.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}