/* Reemplaza lo que hacía React (hover y menú móvil). Edítalo desde Runway > Static files. */
#mobile-nav-drawer[hidden] { display: none !important; }
.skip-link:not(:focus) { position: absolute; left: -9999px; }

/* botones verdes -> verde oscuro */
a[style*="background-color:#006953" i][style*="transition:background-color"]:hover { background-color: #005543 !important; }
/* botones blancos -> gris claro */
a[style*="background-color:#FFFFFF" i][style*="color:#006953" i][style*="transition:background-color"]:hover { background-color: #F0F0F0 !important; }
/* botones transparentes / enlaces con opacidad */
a[style*="background-color:transparent"][style*="transition:opacity"]:hover { opacity: .8 !important; }
a[style*="opacity:0.85"][style*="transition:opacity"]:hover { opacity: 1 !important; }
/* enlaces de la cabecera */
nav.desktop-nav a[style*="transition:color"]:hover { color: #FFFFFF !important; }
/* tarjetas que se elevan */
div[style*="transition:transform 0.2s ease, box-shadow"]:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.06) !important; }

/* Anclas: el encabezado fijo (80px) y el submenu (72px) tapan los titulos */
section[id], [id^="section-"] { scroll-margin-top: 152px; }

/* Encabezado móvil: logo pequeño a la izquierda, icono de menú a la derecha */
@media (max-width: 768px) {
  #site-header .header-inner { padding-left: 28px !important; padding-right: 28px !important; }
  #site-header .header-inner > a,
  #site-header .header-inner > a img { width: 64px !important; height: 19px !important; }
  #site-header .mobile-menu-btn { margin-right: -8px; }
}

/* Icono de menu: linea larga, corta, larga (reemplaza el glifo de texto) */
#site-header .mobile-menu-btn {
  font-size: 0 !important; color: transparent !important;
  width: 30px; height: 30px; padding: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='14' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 1.5h100M11.1 7h77.8M0 12.5h100' stroke='%23fff' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 90% 14px no-repeat !important;
}
#site-header .mobile-menu-btn[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M1 1l14 14M15 1L1 15' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
}

/* Submenú del programa: en escritorio queda como estaba; en móvil es barra fija bajo el header */
.subnav-toggle { display: none; }
@media (max-width: 1024px) {
  nav.subnav-m { position: fixed !important; top: 80px !important; left: 0; right: 0; height: 56px !important; z-index: 950; }
  main.has-subnav-m { padding-top: 56px; }
  nav.subnav-m .subnav-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%;
    padding: 0 28px; background: none; border: 0; color: #FFFFFF; cursor: pointer; text-align: left;
    font: 600 14px/1 'DIN','Barlow Semi Condensed','Arial Narrow',sans-serif;
  }
  nav.subnav-m .subnav-toggle i {
    width: 7px; height: 7px; margin-right: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
  }
  nav.subnav-m.is-open .subnav-toggle i { transform: rotate(-135deg) translate(-2px, -2px); }
  nav.subnav-m .subnav-inner {
    display: none !important; position: absolute; top: 56px; left: 0; right: 0; height: auto !important;
    flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 0 !important;
    background: inherit; box-shadow: 0 8px 16px rgba(0,0,0,.2); overflow: visible !important; white-space: normal !important;
  }
  nav.subnav-m.is-open .subnav-inner { display: flex !important; }
  nav.subnav-m .subnav-inner a { height: auto !important; padding: 16px 28px !important; border-top: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 1024px) {
  nav.subnav-m .subnav-inner a > span { display: none !important; }
  nav.subnav-m .subnav-inner a:has(> span) { background: rgba(255,255,255,.08); box-shadow: inset 3px 0 0 #FFFFFF; }
}

/* Heroes en móvil: imagen arriba, texto debajo sobre fondo verde */
@media (max-width: 768px) {
  main section.hero-split {
    display: block !important; height: auto !important; min-height: 0 !important; padding: 0 !important;
    background-color: #006953 !important; overflow: hidden;
  }
  main section.hero-split.hero-bg-moved { background-image: none !important; }
  main section.hero-split > .hero-img {
    position: relative !important; inset: auto !important; top: auto !important; left: 0 !important;
    width: 100% !important; height: 200px !important; background-size: cover !important;
  }
  main section.hero-split > .hero-grad { display: none !important; }
  main section.hero-split > :not(.hero-img):not(.hero-grad) {
    position: relative; padding: 32px 24px 40px !important; max-width: none !important;
  }
  main section.hero-split > :not(.hero-img):not(.hero-grad) > div { padding-top: 0 !important; padding-bottom: 0 !important; max-width: none !important; }
  main section.hero-split h1, main section.hero-split h2 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: 0 !important; white-space: normal !important; }
}

/* Móvil: jerarquía de títulos (h1 32px > h2 28px > h3 20px > texto) */
@media (max-width: 768px) {
  main h2, main section.hero-split h2 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
  main h3[style*="font-size:18px"], main h3[style*="font-size:20px"] { font-size: 20px !important; line-height: 1.25 !important; }
  main h3[style*="font-size:22px"], main h3[style*="font-size:24px"] { font-size: 22px !important; line-height: 1.25 !important; }
  main h3[style*="font-size:28px"], main h3[style*="font-size:32px"] { font-size: 24px !important; line-height: 1.2 !important; }
  main h3 + p { font-size: 15px !important; line-height: 22px !important; }
}

/* Móvil: espacios verticales más compactos */
@media (max-width: 768px) {
  main section.tight-pt { padding-top: 48px !important; }
  main section.tight-pb { padding-bottom: 48px !important; }
  main .tight-mb { margin-bottom: 28px !important; }
  main .tight-mt { margin-top: 28px !important; }
  main .tight-gap { row-gap: 28px !important; }
}

/* Móvil: columnas apiladas alineadas al inicio (antes quedaban centradas o con sangría) */
@media (max-width: 768px) {
  main .sp-grid-fixed, main .sp-grid-2col, main .sp-grid-3col, main .sp-grid-4col { align-items: stretch !important; justify-items: stretch !important; }
  main .sp-imgtext-content { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Móvil: el texto destacado en rojo no supera el tamaño del título que lo antecede */
@media (max-width: 768px) {
  main h3 + div[style*="font-size:28px"] { font-size: 22px !important; line-height: 1.25 !important; }
}