@layer institutional {
  .about-hero { padding-block: clamp(4rem, 6vw, 5rem); }
  .about-hero-grid { gap: clamp(3rem, 6vw, 6rem); align-items: center; }
  .about-hero-grid h1 { font-size: clamp(3.25rem, 6vw, 5.7rem); }
  .about-problem .split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(3rem, 5vw, 4rem); align-items: start; }
  .about-problem h2 { max-width: 31rem; font-size: clamp(2.6rem, 4vw, 3.5rem); overflow-wrap: normal; }
  .about-problem .section-copy { min-width: 0; }
  #principios { scroll-margin-top: 6.5rem; }
  .founder-portrait { margin: 0; }
  .founder-photo { position: relative; padding: .7rem; border: 1px solid rgba(85,230,255,.38); }
  .founder-photo::after { content: "DESDE 2018"; position: absolute; right: -.7rem; bottom: 1.8rem; padding: .7rem 1rem; color: #080b0f; background: #c8ff35; font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
  .founder-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; border: 1px solid rgba(255,255,255,.16); }
  .founder-portrait figcaption { margin-top: .85rem; color: #a5adb0; font-size: .78rem; line-height: 1.5; }
  .trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfd3d1; border-left: 1px solid #cfd3d1; margin-top: 3rem; }
  .trust-item { min-height: 10rem; padding: 1.5rem; border-right: 1px solid #cfd3d1; border-bottom: 1px solid #cfd3d1; }
  .trust-item strong { display: block; margin-bottom: 1rem; color: #4a7800; font: 900 clamp(1.6rem,3vw,2.7rem)/1 var(--display); text-transform: uppercase; }
  .trust-item p { font-size: .93rem; }
  .principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .principle { min-height: 17rem; display: flex; flex-direction: column; padding: 1.6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .principle > span { color: var(--cyan); font-size: .72rem; font-weight: 850; }
  .principle h3 { margin: auto 0 .8rem; font-size: 1.35rem; }
  .principle p { font-size: .93rem; }
  .founder-grid { display: grid; grid-template-columns: minmax(16rem,.65fr) minmax(0,1fr); gap: clamp(3rem,8vw,8rem); align-items: start; }
  .founder-card { padding: 1.6rem; border: 1px solid #cfd3d1; border-top: 4px solid #4a7800; }
  .founder-card strong { display: block; font: 900 clamp(2rem,4vw,3.5rem)/.95 var(--display); text-transform: uppercase; }
  .founder-card span { display: block; margin-top: .8rem; color: #536064; }
  .story-copy { display: grid; gap: 1.2rem; }
  .story-copy p:first-child { color: #182126; font-size: clamp(1.2rem,2.2vw,1.65rem); font-weight: 720; line-height: 1.45; }
  .timeline { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 3rem; }
  .timeline article { position: relative; padding: 2rem 2rem 0 0; border-top: 2px solid var(--line); }
  .timeline article::before { content: ""; position: absolute; top: -.45rem; left: 0; width: .8rem; height: .8rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 1.2rem rgba(200,255,53,.28); }
  .timeline time { color: var(--cyan); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
  .timeline h3 { margin: 1.4rem 0 .7rem; font-size: 1.35rem; }
  .contact-hero { padding-block: clamp(4rem, 7vw, 6rem); }
  .contact-hero h1 { max-width: 70rem; font-size: clamp(2.8rem, 6vw, 6.2rem); }
  .contact-grid { display: grid; grid-template-columns: minmax(17rem,.7fr) minmax(0,1.3fr); gap: clamp(2rem,7vw,6rem); align-items: start; }
  .contact-details { display: grid; gap: 1px; background: var(--line); }
  .contact-detail { padding: 1.3rem; background: var(--surface); }
  .contact-detail small { display: block; margin-bottom: .45rem; color: var(--cyan); font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
  .contact-detail a, .contact-detail strong { color: var(--white); font-size: 1.05rem; overflow-wrap: anywhere; }
  .contact-detail p { margin-top: .35rem; font-size: .83rem; }
  .contact-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
  .contact-social a { min-height: 2.7rem; display: inline-flex; align-items: center; padding: .65rem .8rem; border: 1px solid var(--line); color: #c7cdd0; font-size: .78rem; font-weight: 800; }
  .contact-social a:hover { color: var(--ink); background: var(--acid); border-color: var(--acid); }
  .inline-contact-form { padding: clamp(1.25rem,4vw,2.4rem); border: 1px solid var(--line); border-top: 4px solid var(--acid); background: rgba(14,19,24,.88); }
  .inline-contact-form h2 { margin: 0 0 .7rem; font-size: clamp(2rem,4vw,3.4rem); }
  .inline-contact-form > p { margin-bottom: 1.6rem; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .form-field { display: grid; gap: .45rem; margin-bottom: 1rem; color: #dfe4e1; font-size: .78rem; font-weight: 800; }
  .form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; color: var(--white); background: #080b0f; padding: .85rem 1rem; font: inherit; line-height: 1.5; }
  .form-field textarea { min-height: 9rem; resize: vertical; }
  .form-field select { color-scheme: dark; }
  .form-consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: .4rem 0 1.2rem; }
  .form-consent input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--acid); }
  .form-consent label { color: #a5adb0; font-size: .78rem; line-height: 1.55; }
  .form-consent a, .form-note a { color: var(--acid); text-decoration: underline; text-underline-offset: .2rem; }
  .form-status { min-height: 1.5rem; margin-top: 1rem; color: var(--cyan); font-size: .84rem; }
  .form-status.is-error { color: #ff9d91; }
  .form-note { margin-top: .5rem; font-size: .78rem; }
  .form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

  @media (max-width: 820px) {
    .about-hero-grid, .founder-grid, .contact-grid { grid-template-columns: 1fr; }
    .about-problem .split { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-problem h2 { max-width: 38rem; }
    .founder-portrait { max-width: 34rem; }
    .principles, .trust-strip { grid-template-columns: 1fr 1fr; }
    .timeline { grid-template-columns: 1fr; gap: 2rem; }
  }

  @media (max-width: 560px) {
    .principles, .trust-strip, .form-grid { grid-template-columns: 1fr; }
    .founder-photo::after { right: -.35rem; }
  }
}