.about-page {
  background: #f4f0e9;
  color: #11151a;
}

.about-header {
  position: absolute;
  inset: 0 0 auto;
  height: 62px;
  background: rgba(3, 9, 14, .88);
  border-bottom-color: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}

.about-header .header-inner {padding-inline: clamp(28px, 7vw, 92px)}
.about-header .wordmark {font-size: 28px;font-weight: 400;letter-spacing: 1px}
.about-header .primary-nav {gap: clamp(18px, 3vw, 42px)}
.about-header .nav-link {font-size: 13px}
.about-header .nav-link.is-active:after {bottom: 8px;height: 2px}
.about-header .header-cta {padding: 10px 18px;font-size: 12px}

.about-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 540px;
  overflow: hidden;
  align-items: center;
  background: #05090d url("assets/conoce-hero.png") center 48% / cover no-repeat;
  color: #f8f7f4;
}

.about-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,rgba(2,7,11,.9) 0%,rgba(2,7,11,.76) 33%,rgba(2,7,11,.13) 69%,rgba(2,7,11,.12) 100%),linear-gradient(0deg,rgba(2,7,11,.2),transparent 35%);
}

.about-hero-inner {position:relative;width:min(100%,1440px);margin:0 auto;padding:92px clamp(36px,8.2vw,112px) 36px}
.about-hero-copy {max-width:535px}
.about-eyebrow,.about-section-label {margin:0 0 17px;color:#f7f4ef;font-size:10px;font-weight:600;letter-spacing:2.1px;line-height:1.4}
.about-hero h1 {margin:0;color:#f8f7f4;font:400 clamp(42px,4.15vw,58px)/.96 Georgia,"Times New Roman",serif;letter-spacing:-1.45px}
.about-page em {color:#f56a16;font-style:normal}
.about-hero-copy>p:not(.about-eyebrow) {max-width:465px;margin:20px 0 19px;color:#e5e5e4;font-size:14px;line-height:1.55}
.about-whatsapp {display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:1px solid var(--orange-contrast);border-radius:13px;background:var(--orange-contrast);color:white;text-decoration:none;font-size:13px;font-weight:650;box-shadow:0 8px 22px #f05a1728;transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.about-whatsapp img {width:20px;height:20px;filter:brightness(0) invert(1)}
.about-whatsapp span {margin-left:3px;font-size:18px;line-height:1}
.about-whatsapp:hover {transform:translateY(-2px);background:var(--orange-contrast-hover);box-shadow:0 11px 28px #f05a1735}
.about-whatsapp:focus-visible {outline:2px solid white;outline-offset:4px}
.wall-wordmark {position:absolute;top:40%;right:clamp(90px,15vw,220px);color:#d2d2d0;font-family:"Segoe UI",Arial,sans-serif;font-size:clamp(31px,4vw,58px);font-weight:400;letter-spacing:2px;text-shadow:0 2px 1px #000,0 0 12px #fff5,2px 5px 8px #000;transform:perspective(600px) rotateY(-5deg)}
.wall-wordmark span {color:#f56a16}
.about-scroll {position:absolute;right:50%;bottom:14px;width:22px;height:35px;border:1px solid #ffffff77;border-radius:15px;transform:translateX(50%)}
.about-scroll span {position:absolute;top:7px;left:9px;width:2px;height:7px;border-radius:2px;background:#ff741d;animation:about-scroll 1.6s ease-in-out infinite}

.about-intro {background:#f4f0e9}
.about-intro-inner {display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:60px;width:min(100%,1240px);margin:auto;padding:42px 36px 38px}
.about-section-label {display:flex;align-items:center;gap:14px;margin-bottom:17px;color:#40464b;font-size:10px;letter-spacing:1.5px}
.about-section-label>span {width:24px;height:2px;flex:none;background:#f56a16}
.about-intro em {color:var(--orange-contrast)}
.about-intro h2,.principles-heading h2,.vision-inner h2 {margin:0;color:#101419;font:400 clamp(35px,3.55vw,47px)/1.04 Georgia,"Times New Roman",serif;letter-spacing:-1.15px}
.about-intro-copy>p:not(.about-section-label) {max-width:500px;margin:18px 0 0;color:#4a4b4c;font-size:14px;line-height:1.53}
.about-intro-copy>p+p {margin-top:15px!important}
.values-visual {position:relative;isolation:isolate;display:grid;min-height:314px;grid-template-columns:44% 56%;overflow:hidden;background:#080e13;color:#e7e7e5}
.values-photo {position:absolute;z-index:-1;inset:0 56% 0 0;background:url("assets/conoce-hero.png") 58% center/auto 100% no-repeat;filter:saturate(.78)}
.values-visual:after {position:absolute;z-index:-1;inset:0 0 0 43%;background:linear-gradient(90deg,#070c11e8,#050a10f2 65%,#050a10f8);content:""}
.values-list {grid-column:2;display:flex;flex-direction:column;justify-content:center;padding:12px 22px 12px 30px}
.values-list span {position:relative;display:flex;min-height:50px;align-items:center;border-bottom:1px solid #ffffff1c;color:#d9dcdf;font:400 20px/1.2 Georgia,"Times New Roman",serif}
.values-list span:last-child {border-bottom:0}
.values-list span:before {position:absolute;top:0;bottom:-1px;left:-15px;width:1px;background:#f56a16;box-shadow:0 0 8px #ff741d90;content:""}
.values-list span:first-child:before {top:50%}
.values-list span:last-child:before {bottom:50%}
.values-list span:after {position:absolute;top:50%;left:-17px;width:5px;height:5px;border-radius:50%;background:#ff781f;box-shadow:0 0 10px #ff741d;transform:translateY(-50%);content:""}

.principles-section {position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 85% 10%,#12233188,transparent 43%),linear-gradient(105deg,#050a0e,#02070b 72%,#07111a);color:#f3f3f1}
.principles-section:after {position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 49.9%,#ffffff06 50%,transparent 50.1%);content:"";pointer-events:none}
.principles-inner {width:min(100%,1280px);margin:auto;padding:37px 32px 41px}
.principles-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:29px}
.principles-heading .about-section-label {color:#d1d3d5}
.principles-heading h2 {color:#f5f3ef;font-size:clamp(37px,3.65vw,49px)}
.principles-lead {max-width:340px;margin:0 0 4px;color:#ccd2d6;font-size:13px;line-height:1.55}
.principles-list {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.principle-item {min-height:205px;padding:0 22px 0 0}
.principle-item+.principle-item {padding-left:23px;border-left:1px solid #aebdca38}
.principle-number {display:block;margin:0 0 2px;color:#aab1b7;font:400 42px/.98 Georgia,"Times New Roman",serif}
.principle-number:after {display:block;width:28px;height:2px;margin-top:8px;background:#f56a16;content:""}
.principle-item h3 {margin:12px 0 8px;color:#f5f3ef;font:400 20px/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.25px}
.principle-item p {margin:0;color:#c3cbd1;font-size:12.5px;line-height:1.48}

.vision-section {position:relative;isolation:isolate;overflow:hidden;min-height:355px;background:radial-gradient(ellipse at 85% 70%,#0c2131 0%,#040a10 46%,#02070b 100%);color:#f4f3f0}
.vision-lines {position:absolute;z-index:-1;inset:0;opacity:.9;pointer-events:none}
.vision-lines:before {position:absolute;inset:0;background:linear-gradient(90deg,#03080d 8%,#03080d 34%,#03080dce 53%,transparent 100%);content:""}
.vision-lines svg {position:absolute;inset:0;width:100%;height:100%}
.vision-lines path {fill:none;stroke:#ed6518;stroke-width:1.1;opacity:.85}
.vision-lines path:nth-child(2) {stroke:#216da5;stroke-width:1.4;opacity:.72}
.vision-lines path:nth-child(3) {stroke:#f07a2f;stroke-width:.7;opacity:.6}
.vision-inner {width:min(100%,1280px);margin:auto;padding:31px 32px 35px}
.vision-inner .about-section-label {margin-bottom:14px;color:#d6dade}
.vision-inner h2 {max-width:755px;color:#f7f4ef;font-size:clamp(35px,3.15vw,43px);line-height:1.02}
.vision-inner>p:not(.about-section-label) {max-width:650px;margin:12px 0 14px;color:#d1d7dc;font-size:13px;line-height:1.48}
.vision-inner .about-whatsapp {min-height:43px;padding-inline:16px}
.about-page .site-footer {border-top-color:#ffffff14}

.about-reveal {opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.about-motion-ready .about-reveal {opacity:0;transform:translateY(12px)}
.about-motion-ready .about-reveal.is-visible {opacity:1;transform:none}
.principle-item:nth-child(2) {transition-delay:70ms}.principle-item:nth-child(3) {transition-delay:130ms}.principle-item:nth-child(4) {transition-delay:190ms}.principle-item:nth-child(5) {transition-delay:250ms}

@keyframes about-scroll {0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(9px);opacity:1}}

@media(max-width:1100px) {
  .about-header .header-inner {padding-inline:28px}
  .about-header .primary-nav {gap:19px}
  .about-header .nav-link {font-size:12px}
  .about-header .wordmark {font-size:25px}
  .about-header .header-cta {padding-inline:13px;font-size:11px}
  .about-intro-inner {gap:34px;padding-inline:28px}
  .values-visual {min-height:290px}
  .values-list {padding-inline:25px 12px}
  .values-list span {font-size:18px}
  .principles-inner,.vision-inner {padding-inline:28px}
  .principle-item {padding-right:14px}
  .principle-item+.principle-item {padding-left:14px}
}

@media(max-width:900px) {
  .about-header {height:64px}
  .about-header .header-inner {grid-template-columns:1fr auto;padding-inline:20px}
  .about-header .wordmark {font-size:27px}
  .about-header .primary-nav {gap:0}
  .about-header .nav-link {font-size:14px}
  .about-header .header-cta {display:none}
  .about-header .menu-toggle {display:flex}
  .about-header .primary-nav {top:64px;padding-bottom:34px}
  .about-hero {min-height:525px;background-position:58% center}
  .about-hero-inner {padding:102px 7vw 42px}
  .about-hero h1 {font-size:49px}
  .wall-wordmark {right:8%;top:44%;font-size:38px}
  .about-intro-inner {grid-template-columns:1fr 1fr;gap:25px;padding-block:34px}
  .about-intro h2 {font-size:36px}
  .about-intro-copy>p:not(.about-section-label) {font-size:13px}
  .values-visual {min-height:340px;grid-template-columns:1fr}
  .values-photo {inset:0 0 0 0;background-position:57% center}
  .values-visual:after {inset:0;background:linear-gradient(90deg,#070c11a8,#050a10df 57%,#050a10f2)}
  .values-list {grid-column:1;padding-left:48%;padding-right:14px}
  .values-list span {min-height:53px;font-size:17px}
  .principles-heading {gap:25px}
  .principles-heading h2 {font-size:38px}
  .principles-lead {max-width:260px;font-size:12px}
  .principles-list {grid-template-columns:repeat(3,minmax(0,1fr));row-gap:29px}
  .principle-item:nth-child(4) {padding-left:0;border-left:0}
  .principle-item {min-height:195px}
  .principle-item p {max-width:210px}
  .vision-inner h2 {font-size:39px}
}

@media(max-width:600px) {
  .about-hero {min-height:620px;align-items:flex-start;background-position:60% center}
  .about-hero-shade {background:linear-gradient(90deg,#02070bf2 0%,#02070bd9 60%,#02070b70 100%),linear-gradient(0deg,#02070b70,transparent 60%)}
  .about-hero-inner {padding:112px 24px 50px}
  .about-hero-copy {max-width:420px}
  .about-eyebrow {margin-bottom:15px;font-size:9px}
  .about-hero h1 {font-size:clamp(39px,10vw,46px);line-height:.98;letter-spacing:-1.1px}
  .about-hero-copy>p:not(.about-eyebrow) {max-width:390px;margin-top:19px;font-size:13px;line-height:1.55}
  .about-whatsapp {min-height:44px;padding-inline:14px;font-size:12px}
  .wall-wordmark {display:none}
  .about-scroll {right:25px;bottom:18px;transform:none}
  .about-intro-inner {grid-template-columns:1fr;gap:24px;padding:32px 22px 30px}
  .about-intro h2 {font-size:36px;line-height:1.04}
  .about-intro-copy>p:not(.about-section-label) {font-size:13px;line-height:1.55}
  .values-visual {min-height:290px}
  .values-list {padding-left:45%;padding-right:14px}
  .values-list span {min-height:47px;font-size:17px}
  .principles-inner {padding:32px 22px 34px}
  .principles-heading {display:block;margin-bottom:26px}
  .principles-heading h2 {font-size:37px;line-height:1.04}
  .principles-lead {max-width:380px;margin:14px 0 0;font-size:13px}
  .principles-list {grid-template-columns:1fr;row-gap:0}
  .principle-item,.principle-item+.principle-item,.principle-item:nth-child(4) {display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:15px;min-height:0;padding:20px 0;border-left:0;border-top:1px solid #aebdca32}
  .principle-item:first-child {border-top:0;padding-top:4px}
  .principle-number {grid-row:1 / span 2;font-size:35px}
  .principle-number:after {width:24px;margin-top:7px}
  .principle-item h3 {margin:0 0 7px;font-size:20px}
  .principle-item p {grid-column:2;max-width:360px;font-size:12.5px;line-height:1.5}
  .vision-section {min-height:0}
  .vision-lines {inset:20% -42% 0 0;opacity:.65}
  .vision-inner {padding:34px 22px 39px}
  .vision-inner h2 {font-size:35px;line-height:1.04;letter-spacing:-.7px}
  .vision-inner h2 br {display:none}
  .vision-inner>p:not(.about-section-label) {font-size:12.5px;line-height:1.55;margin-top:14px}
  .about-page .footer-inner {padding-inline:22px}
  .about-page .footer-nav {grid-template-columns:repeat(2,minmax(0,max-content));gap:13px 22px}
}

@media(prefers-reduced-motion:reduce) {
  .about-motion-ready .about-reveal,.about-motion-ready .about-reveal.is-visible {opacity:1;transform:none;transition:none}
  .about-reveal,.about-whatsapp,.about-scroll span {transition:none;animation:none}
  .about-whatsapp:hover {transform:none}
}
