@charset "UTF-8";

@font-face  {
    font-family: 'Raleway';
    src: url('/plantillas/kian/fonts/Raleway-variable-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal italic;
    font-display: swap;
    /* Unicode-range optimizado: solo caracteres latinos, acentos, eñes y signos comunes */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}  

html  {
    height:100%;
    scroll-behavior: smooth;
}

body  {
    font-family: 'Raleway', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'STHeiti', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    overflow-y: scroll;
    background-color: #eceff0;
    color: #0c2e3f;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#cuerpo  {
    flex:1
}
h1  {
    font-size:1.5rem;
    font-weight:400;
}
h2  {
    font-size:1.2rem;
    font-weight:400;
}
p  {
    font-size:1rem;
}
a  {
    text-decoration:none;
    cursor:pointer;
    color:#000000;
}
.negrita, strong, b  {
    font-weight:700;
}
.enlace {
  color:#F20D0D;
}

  :root {
    --ink:#1c1c1c;
    --ink-2:#262626;
    --paper:#ffffff;
    --paper-2:#f3f3f1;
    --muted:#7a7a7a;
    --muted-2:#a8a8a8;
    --line:#e6e4df;
    --accent:#d83c2a;          /* red accent like reference */
    --max:1300px;
    --gutter:clamp(20px, 4%, 48px);
    --t: .3s cubic-bezier(.2,.7,.2,1);
  }
  * {box-sizing:border-box}
  html,body {margin:0;padding:0}
  html {scroll-behavior:smooth}
  body {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    line-height:1.65;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-weight:400;
  }
  img {display:block;max-width:100%}
  a {color:inherit;text-decoration:none}
  button {font:inherit;cursor:pointer;border:0;background:none;color:inherit}
  .container {max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
}

.nav-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.menu {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap; 
    
    overflow-x: auto; 
    white-space: nowrap;
    
    scrollbar-width: none;
}
.menu::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Edge */
}

.menu a {
    flex-shrink: 0; 
    white-space: nowrap; 
}

/* Bloque derecho */
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.lang {
    display: flex;
    gap: 8px;
}



  .eyebrow {
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--accent);font-weight:600;
  }
  h1,h2,h3,h4 {margin:0;font-weight:300;letter-spacing:-.005em}

  /* ---------- Header ---------- */
  header {
    position:fixed;top:0;left:0;right:0;z-index:50;
    /*background:rgba(255,255,255,.6);*/
    background:rgba(241,237,237,.6); /* F1EDED */
    
    /*backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom:1px solid transparent;*/
    transition: border-color var(--t), box-shadow var(--t);
  }
  header.scrolled {
    border-bottom-color:var(--line)
  }
  #logo-kian {
    width:100px;
    height:auto;
    padding-top:10px;
    padding-bottom:15px;
  }
  .nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100px;
    
  }
  .brand {
    display:inline-flex;
    align-items:baseline;
    gap:1px;
    font-weight:800;
    font-size:26px;
    letter-spacing:-.01em;
    color:var(--ink);
    font-family:"Raleway", sans-serif;
  }
  .brand sup {font-size:9px;color:var(--muted);font-weight:600;transform:translateY(-10px);margin-left:1px}
  .nav-right {display:flex;align-items:center;gap:0;margin-top:0px;}
  .menu {display:flex;align-items:center;gap:2px}
  .menu a {
    flex: 1;
    padding-top:3px;
    padding-bottom:1px;
    padding-left:12px;
    padding-right:12px;
    font-size:12px;
    letter-spacing:.05em;
    text-transform:uppercase;
    font-weight:800;
    color:var(--ink);
    text-align:center;
  }
  .menu a.active {background:var(--ink);color:#fff}
  .menu a:not(.active):hover {color:var(--accent)}
  .lang {
    display:flex;
    align-items:center;
    gap:2px;
    margin-left:14px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
  }
  .lang button {
    padding:6px 9px;
    color:var(--ink);
    text-transform:uppercase;
    font-weight:600;
    font-size:11px;
    letter-spacing:.08em;
    white-space: nowrap;
  }
  .lang button.active {background:var(--ink);color:#fff}
  .lang button:hover:not(.active) {color:var(--accent)}
  .menu-toggle {display:none;width:38px;height:38px;align-items:center;justify-content:center;margin-left:8px}
  .menu-toggle span {display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
  .menu-toggle span::before,.menu-toggle span::after {
    content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);
    transition: transform var(--t);
  }
  .menu-toggle span::before {top:-6px}
  .menu-toggle span::after {top:6px}
  body.nav-open .menu-toggle span {background:transparent}
  body.nav-open .menu-toggle span::before {transform:translateY(6px) rotate(45deg)}
  body.nav-open .menu-toggle span::after {transform:translateY(-6px) rotate(-45deg)}

  /* ---------- Hero ---------- */
  .hero {
    position:relative;
    height:min(82vh, 850px);
    min-height:520px;
    color:#fff;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-photo {
    position:absolute;
    inset:0;
    z-index:-1;
    width:100%;
    height:100%;
    /*
    background-image:url("../img/cab-home1.jpg");
    background-size:cover;
    background-position:center 38%;
    filter:saturate(.85) contrast(1.02) brightness(1.05);
    */
  }
  #video-cab {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
    filter:saturate(.85) contrast(1.02) brightness(1.05);
  }
  .hero-photo::after {
    content:"";
    position:absolute;
    inset:0;
    /*background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.05) 60%, rgba(0,0,0,.18));*/
    background-color: rgba(255, 255, 255, 0.5); /* Blanco con 75% de opacidad */
    z-index: 1;
  }
  .hero-inner {
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding-top:64px;
  }
  .hero h1 {
    font-size:64px;
    line-height:1.05;
    letter-spacing:-.015em;
    font-weight:500;
    color:#000;
    text-shadow:0 1px 30px rgba(0,0,0,.15);
    max-width:18ch;
  }
  .hero .sub {
    margin-top:120px;
    font-size:19px;
    color:rgba(0,0,0,.95);
    letter-spacing:.02em;
    font-weight:400;
    text-shadow:0 1px 20px rgba(0,0,0,.2);
  }
  .cta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 32px;
    background:var(--ink);
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    margin-top:5px;
    transition: background var(--t), letter-spacing var(--t);
  }
  .cta:hover {background:var(--accent);letter-spacing:.22em}



  /* ---------- Capabilities (dark) ---------- */
  .capabilities {
    background:var(--ink);
    color:#dcdad6;
    padding:clamp(72px, 9%, 120px) 0;
  }
  .cap-grid {
    display:grid;
    grid-template-columns: 1fr 1.5fr;
    gap:clamp(40px, 7%, 96px);
    align-items:start;
  }
  .cap-grid h2 {
    font-size:40px;
    line-height:1.15;
    font-weight:300;
    color:#fff;
    margin-top:14px;
    letter-spacing:-.005em;
  }
  .cap-grid p.lead {
    margin-top:24px;
    color:#a8a6a1;
    max-width:34ch;
    font-size:13.5px;
    line-height:1.85;
    font-weight:300;
  }
  .cap-items {
    display:flex;
    flex-direction:column;
    gap:40px
}
  .cap-item {
    display:grid;
    grid-template-columns: 64px 1fr;
    gap:28px;
    align-items:start;
  }
  .cap-icon {
    width:56px;height:56px;
    display:grid;place-items:center;
    color:#fff;
  }
  .cap-icon svg {
    width:42px;
    height:42px;
    stroke:currentColor;
    fill:none;
    stroke-width:1;
    stroke-linecap:round;
    stroke-linejoin:round}
  .cap-item h3 {
    font-size:16px;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-weight:600;
    color:#fff;
    margin-bottom:12px;
    font-family:"Raleway", sans-serif;
  }
  .cap-item p {
    color:#a8a6a1;
    font-size:12.5px;
    line-height:1.85;
    max-width:62ch;
    font-weight:300;
  }

  /* ---------- Section header ---------- */
  .section {padding:clamp(64px, 9%, 110px) 0}
  .section-head {margin-bottom:56px}
  .section-head h2 {
    font-size:40px;
    line-height:1.15;font-weight:300;
    margin-top:10px;color:var(--ink);
  }

  /* ---------- Projects ---------- */
  .projects-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:24px;
  }
  .project {
    display:flex;flex-direction:column;
    cursor:pointer;
  }
  .project .img-wrap {
    position:relative;overflow:hidden;
    aspect-ratio: 1 / 1;
    background:#222;
  }
  .project .img {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .project:hover .img {transform:scale(1.05)}
  .project .meta {
    padding:22px 4px 6px;
    text-align:left;
  }
  .project h3 {
    font-size:17px;
    font-weight:500;
    color:var(--ink);
    letter-spacing:-.005em;
    line-height:1.3;
  }
  .project .loc {
    margin-top:6px;font-size:11.5px;color:var(--muted);
    letter-spacing:.04em;text-align:center;
  }
  .project .meta {text-align:center}

  #projects-grid:hover .slick-carousel-item-custom {
    opacity: 0.23;
  }

  #projects-grid:hover .slick-carousel-item-custom:hover {
    opacity: 1;
  }

  .slick-carousel-item-custom {
    transition: opacity 0.4s ease; /* Suaviza la bajada de opacidad */
  }

  .slick-imagen-portada {
    transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); /* Suaviza el zoom */
  }

  .slick-img-wrap {
    position: relative;
    overflow: hidden;
  }



  .load-more {text-align:center;margin-top:48px}
  .load-more button {
    padding:12px 28px;
    border-bottom:1px solid var(--ink);
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
    color:var(--ink);
    transition: color var(--t), border-color var(--t);
  }
  .load-more button:hover {color:var(--accent);border-color:var(--accent)}
  .load-more button.loading {opacity:.5;pointer-events:none}

  /* ---------- Partners ---------- */
  .partners {
    background:var(--paper-2);
    padding:clamp(64px, 8%, 90px) 0;
  }
  .partners-top {
    display:grid;
    grid-template-columns:1fr 1.8fr;
    gap:clamp(40px, 7%, 80px);
    align-items:start;
    margin-bottom:56px;
  }
  .partners-top h2 {
    font-size:36px;
    line-height:1.15;font-weight:300;color:var(--ink);
    margin-top:10px;
  }
  .partners-top p {
    color:var(--ink-2);font-size:13.5px;line-height:1.85;
    max-width:64ch;font-weight:300;
  }
  .logos {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:32px;
    align-items:center;
    justify-items:center;
  }
  .logo {
    width:100%;
    height:64px;
    display:grid;place-items:center;
    color:var(--ink);
    transition: transform var(--t), opacity var(--t);
    opacity:.85;
  }
  .logo:hover {transform:translateY(-2px);opacity:1}
  .logo .wm {
    display:flex;flex-direction:column;align-items:center;gap:2px;
    text-align:center;line-height:1;
  }
  .logo .glyph {
    font-family:"Raleway", sans-serif;
    font-weight:800;font-size:18px;letter-spacing:-.02em;
  }
  .logo .name {
    font-size:8.5px;letter-spacing:.22em;color:var(--muted);font-weight:600;
    text-transform:uppercase;margin-top:4px;
  }

  /* ---------- Sustainability ---------- */
  .sustain {
    padding:clamp(64px, 9%, 110px) 0;
  }
  .sustain-grid {
    display:grid;
    grid-template-columns: 1fr 1.3fr;
    gap:clamp(40px, 7%, 90px);
    align-items:center;
  }
  .sustain-text h2 {
    font-size:40px;
    line-height:1.15;font-weight:300;
    margin-top:10px;color:var(--ink);
  }
  .sustain-text p {
    color:var(--ink-2);font-size:13.5px;line-height:1.85;
    margin-top:22px;max-width:46ch;font-weight:300;
  }
  .sustain-photo {
    position:relative;aspect-ratio: 5/4;
    background-image:url("../img/img-home-3.jpg");
    background-size:cover;background-position:center;
  }

  /* ---------- Awards (dark) ---------- */
  .awards {
    background:var(--ink);color:#dcdad6;
    padding:clamp(64px, 9%, 110px) 0;
  }
  .awards-grid {
    display:grid;grid-template-columns: 1fr 1.6fr;
    gap:clamp(40px, 7%, 90px);
    align-items:start;
  }
  .awards-grid h2 {
    font-size:40px;
    line-height:1.15;font-weight:300;color:#fff;margin-top:14px;
  }
  .awards-grid p {
    color:#b8b6b1;font-size:13.5px;line-height:1.85;font-weight:300;
  }
  .awards-grid p + p {margin-top:18px}

  /* ---------- Contact ---------- */
  .contact {
    padding:clamp(64px, 9%, 110px) 0;
    text-align:center;
  }
  .contact .eyebrow {display:block;margin-bottom:6px}
  .contact h2 {
    font-size:44px;
    font-weight:300;color:var(--ink);
    letter-spacing:-.01em;
  }
  .contact form {
    max-width:540px;margin:48px auto 0;
    display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;
    text-align:left;
  }
  .field {display:flex;flex-direction:column;gap:6px;position:relative}
  .field.full {grid-column:1/-1}
  .field label {
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);font-weight:500;
  }
  .field input,.field textarea {
    width:100%;
    padding:8px 0 10px;
    border:0;border-bottom:1px solid var(--line);
    background:transparent;color:var(--ink);
    font:inherit;font-size:14px;
    transition:border-color var(--t);
    outline:none;resize:none;
    font-family:"Raleway",sans-serif;
  }
  .field textarea {min-height:60px}
  .field input:focus,.field textarea:focus {border-color:var(--ink)}
  .field.error input,.field.error textarea {border-color:var(--accent)}
  .field .err-msg {
    position:absolute;right:0;top:0;
    font-size:10px;color:var(--accent);letter-spacing:.1em;
    opacity:0;transition:opacity var(--t);
  }
  .field.error .err-msg {opacity:1}
  .submit-row {
    grid-column:1/-1;display:flex;justify-content:center;margin-top:8px;
  }
  .submit-btn {
    padding:16px 56px;background:var(--ink);color:#fff;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
    transition:background var(--t);
  }
  .submit-btn:hover {background:var(--accent)}
  .form-success {
    grid-column:1/-1;
    display:none;
    padding:16px;border:1px solid var(--ink);
    text-align:center;font-size:12px;color:var(--ink);letter-spacing:.04em;
  }
  .form-success.show {display:block;animation:fadeIn .4s ease}
  @keyframes fadeIn {from {opacity:0;transform:translateY(8px)}to {opacity:1;transform:none}}

  /* ---------- Footer ---------- */
  footer {
    background:var(--ink);color:#a8a6a1;
    padding:22px 0;
  }
  .foot {
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
    font-size:11px;letter-spacing:.04em;
  }
  .foot .social {display:flex;gap:20px;justify-self:start}
  .foot .social a {
    width:22px;height:22px;
    display:grid;place-items:center;color:#a8a6a1;
    transition:color var(--t);
  }
  .foot .social a:hover {color:#fff}
  .foot .social svg {width: 22px;height:22px;fill:currentColor}
  .foot-brand {font-weight:800;font-size:30px;color:#fff;letter-spacing:-.01em;font-family:"Raleway",sans-serif}
  .foot .copy {justify-self:end;color:#9a9894;font-size:16px;font-weight:400}






  /* ---------- Mobile ---------- */
  @media (max-width: 1173px) {
    .container, .text { padding-right:45px !important}
    .menu, .lang {display:none}
    .menu-toggle {display:flex}
    body.nav-open .menu {
      display:flex;flex-direction:column;align-items:flex-start;
      position:fixed;top:100px;left:0;right:0;background:#fff;
      padding:20px var(--gutter) 24px;gap:0;
      border-bottom:1px solid var(--line);
    }
    body.nav-open .menu a {width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
    body.nav-open .menu a.active {background:transparent;color:var(--accent)}
    .cap-grid, .partners-top, .sustain-grid, .awards-grid {grid-template-columns:1fr}
    .projects-grid {grid-template-columns:1fr;gap:16px}
    .logos {grid-template-columns:repeat(3, 1fr);gap:24px}
    .contact form {grid-template-columns:1fr}
    .foot {grid-template-columns:1fr;text-align:center}
    .foot .social,.foot .copy {justify-self:center}
  }


  
  /* ====================================================== */
  /* ===============  PROJECT DETAIL PAGE  ================= */
  /* ====================================================== */

  /* ---------- Hero variant: light faded photo + title ---------- */
  .hero-project {
    height:min(46vh, 400px);
    min-height:320px;
    color:var(--ink);
  }
  .hero-project .hero-photo {
    background-size:cover;
    background-position:center 42%;
    /*background-color:#d9dcdd;*/
    /*filter:grayscale(.2) brightness(1.12) contrast(.96);*/
  }
  .hero-project .hero-photo::after {
    /*background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35) 55%, rgba(255,255,255,.45));*/
    background-color: rgba(255, 255, 255, 0.75); /* Blanco con 75% de opacidad */
    
  }
  .hero-project .hero-inner {
    justify-content:flex-end;
    align-items:flex-start;
    padding-bottom:46px;
  }
  .hero-project .eyebrow {
    margin-bottom:10px;
  }
  .hero-project h1 {
    font-size:62px;
    font-weight:500;
    color:#111;
    text-shadow:none;
    letter-spacing:-.01em;
  }
  .hero-project .proj-loc {
    margin-top:12px;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:500;
  }

  /* ---------- Intro: copy + square photo ---------- */
  .project-intro {
    background:var(--paper);
    padding:clamp(56px, 8%, 56px) 0;
  }
  .project-intro-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px, 6%, 80px);
    align-items:start;
  }
  .project-intro-grid .project-copy p {
    font-size:14px;
    line-height:2.05;
    color:var(--ink-2);
    font-weight:300;
    text-align:justify;
  }
  .project-figure {
    aspect-ratio:1 / 1;
    background-size:cover;
    background-position:center;
    background-color:#dcdcda;
  }

  /* ---------- Full-bleed-within-container wide photo ---------- */
  .project-wide {
    background:var(--paper);
    /* padding-bottom:clamp(28px, 4%, 56px); */
  }
  .project-wide-img {
    aspect-ratio:16 / 7;
    background-size:cover;
    background-position:center;
    background-color:#dcdcda;
  }

  /* ---------- Two-column gallery ---------- */
  .project-gallery {
    background:var(--paper);
    padding:clamp(28px, 4%, 56px) 0 clamp(40px, 6%, 80px);
  }
  .gallery-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(20px, 3%, 36px);
  }
  .gallery-img {
    aspect-ratio:1 / 1;
    background-size:cover;
    background-position:center;
    background-color:#dcdcda;
  }

  /* ---------- Back to projects ---------- */
  .project-back {
    padding-bottom:clamp(40px, 6%, 80px);
    display: flex !important;
    justify-content: flex-start !important;
    width: 100%;
  }
  .back-link {
    display:inline-flex;
    align-items:left;
    gap:10px;
    font-size:13px;
    letter-spacing:.04em;
    color:var(--ink);
    font-weight:400;
    transition:color var(--t), gap var(--t);
  }
  .back-link:hover {color:var(--accent);gap:14px}

  @media (max-width: 960px) {
    .project-intro-grid,
    .gallery-grid {grid-template-columns:1fr}
    .hero-project .hero-inner {padding-bottom:32px}
    .project-wide-img {aspect-ratio:16 / 10}
  }



  
  .projects-listing {
    background:var(--paper);
    padding:calc(100px + clamp(40px, 6%, 80px)) 0 clamp(48px, 7%, 90px);
  }
  .projects-listing .page-title {
    text-align:center;
    font-size:clamp(40px, 5vw, 58px);
    font-weight:400;
    color:var(--ink);
    letter-spacing:-.01em;
  }

  /* ---------- Filters ---------- */
  .proj-filters {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
    /* margin:clamp(36px, 5%, 56px) auto clamp(52px, 7%, 80px);*/
    margin-bottom:20px;
  }
  .proj-filters button {
    padding:15px 28px;
    background:var(--paper-2);
    font-size:11px;
    letter-spacing:.11em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--ink);
    transition:background var(--t), color var(--t);
  }
  .proj-filters button:hover,
  .proj-filters button.active {
    background:var(--ink);
    color:#fff;
  }

  
  
  /* ====================================================== */
  /* ===============  OUR STORY PAGE  ====================== */
  /* ====================================================== */

  /* ---------- Hero variant: grayscale photo + title ---------- */
  .hero-story {
    height:min(72vh, 640px);
    min-height:460px;
  }
  .hero-story .hero-photo {
    background-image:url("/plantillas/kian/img/cab-our-story.jpg");
    background-size:cover;
    background-position:center;
    background-color:#cfd2d3;
    filter:grayscale(1) contrast(1.03) brightness(1.02);
  }
  .hero-story .hero-inner {
    justify-content:center;
    align-items:flex-start;
  }
  .hero-story h1 {
    font-size:66px;
    font-weight:500;
    color:#111;
    text-shadow:none;
  }

  /* ---------- Intro copy ---------- */
  .story-intro {
    background:var(--paper);
    padding:clamp(56px, 8%, 100px) 0;
  }
  .story-intro .intro-copy {
    max-width:1040px;
  }
  .story-intro p {
    font-size:14px;
    line-height:1.95;
    color:var(--ink-2);
    font-weight:300;
  }
  .story-intro p + p {margin-top:22px}

  /* ---------- Alternating content rows ---------- */
  /*
  .story-rows {
    padding-bottom:clamp(40px, 7%, 90px)
  }
    */
  .story-row {
    display:flex;
    align-items:center;
    margin-bottom:clamp(48px, 7%, 96px);
  }
  /*.story-row:last-child {margin-bottom:0}*/
  .story-row .photo {
    flex:1 1 50%;
    min-width:0;
    align-self:stretch;
    min-height:460px;
    background-size:cover;
    background-position:center;
    background-color:#dcdcda;
  }
  .text p {
    text-align:justify;
  }
  .story-row .text {
    flex:1 1 50%;
    min-width:0;
    padding-top:clamp(20px, 3%, 40px);
    padding-bottom:clamp(20px, 3%, 40px);
    padding-left:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    padding-right:clamp(28px, 4%, 72px);
  }
  .story-row.reverse .photo {order:1}
  .story-row.reverse .text {
    order:2;
    padding-left:clamp(28px, 4%, 72px);
    padding-right:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  }
  .story-row .text .eyebrow {
    display:block;
    margin-bottom:12px;
    color:var(--muted);
    letter-spacing:.14em;
  }
  .story-row .text h2 {
    font-size:33px;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.005em;
    color:var(--ink);
    margin-bottom:22px;
  }
  .story-row .text p {
    font-size:13.5px;
    line-height:1.9;
    color:var(--ink-2);
    font-weight:300;
    /*max-width:52ch;*/
  }
  .story-row .text p + p {margin-top:18px}
  .story-more {
    display:inline-block;
    margin-top:30px;
    padding:10px 24px;
    border:0;
    border-bottom:1px solid var(--ink);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--ink);
    background:transparent;
    cursor:pointer;
    transition:color var(--t), border-color var(--t);
  }
  .story-more:hover {color:var(--accent);border-color:var(--accent)}

  @media (max-width: 960px) {
    .story-row {flex-direction:column}
    .story-row .photo {
      order:0 !important;
      min-height:260px;
      flex:0 0 auto;
      width:100%;
      background-position:center !important;
    }

    .story-row .text,
    .story-row.reverse .text {
      order:1;
      flex:0 0 auto;
      width:100%;
      padding-left:var(--gutter);
      padding-right:var(--gutter);
      padding-top:28px;
      padding-bottom:8px;
    }
    .story-row .text p {max-width:none}
  }


  /* ---------- Mobile type scale (replaces former fluid headings) ---------- */
  @media (max-width: 960px) {
    .hero h1 {font-size:40px}
    .hero-story h1 {font-size:40px}
    .cap-grid h2,
    .section-head h2,
    .sustain-text h2,
    .awards-grid h2 {font-size:30px}
    .partners-top h2 {font-size:28px}
    .contact h2 {font-size:32px}
    .story-row .text h2 {font-size:26px}
  }


  
  /* ====================================================== */
  /* ===========  OUR CAPABILITIES PAGE  ================== */
  /* ===========  (scoped classes only — does NOT  ======== */
  /* ===========   affect home / our-story pages)  ======== */
  /* ====================================================== */

  /* ---------- Hero ---------- */
  .hero-capabilities .hero-photo {
    background-image:url("/ficheros/imagenes/cap-hero.webp");
    background-size:cover;
    background-position:center;
    background-color:#d6d3ce;
    filter:grayscale(1) contrast(1.03) brightness(1.02);
  }

  /* ---------- Intro ---------- */
  .cap-intro {
    background:var(--paper);
    padding:clamp(48px, 7%, 90px) 0;
  }
  .cap-intro p {
    font-size:15px;
    line-height:2;
    color:var(--ink-2);
    font-weight:300;
    text-align:justify;
    margin:0;
  }

  /* ---------- Services grid (staggered cards) ---------- */
  .svc {
    background:var(--paper);
    padding:0 0 clamp(56px, 8%, 96px);
  }
  .svc-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
    align-items:start;
  }
  .svc-col {
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .svc-card {
    border-radius:16px;
    display:grid;
    place-items:center;
    text-align:center;
    padding:26px 20px;
    position:relative;
    overflow:hidden;
    transition:transform var(--t), box-shadow var(--t);
  }
  .svc-card:hover {transform:translateY(-3px)}
  .svc-card .svc-label {
    position:relative;
    z-index:2;
    font-weight:700;
    font-size:22px;
    line-height:1.18;
    letter-spacing:-.01em;
  }
  .svc-card.flat {
    background:#efefee;
    color:var(--ink);
    min-height:150px;
  }
  .svc-card.flat:hover {background:#e7e7e5}
  .svc-card.photo {
    min-height:252px;
    color:#fff;
    background-size:cover;
    background-position:center;
  }
  .svc-card.photo::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(20,18,16,.46);
    transition:background var(--t);
  }
  .svc-card.photo:hover::before {background:rgba(20,18,16,.34)}

  /* ---------- Presence map ---------- */
  .presence {
    background:var(--paper);
    padding:clamp(24px, 4%, 48px) 0 0;
  }
  .presence-map {
    position:relative;
  }
  .presence-map img {
    width:100%;
    height:auto;
    display:block;
  }
  .presence-legend {
    position:absolute;
    left:0;
    bottom:6%;
    background:#ededed;
    padding:18px 28px 18px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .legend-row {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:13px;
    line-height:1.25;
    color:var(--ink-2);
    font-weight:300;
  }
  .legend-row svg {width:30px;height:30px;display:block;flex:0 0 auto}

  /* ---------- In-a-box (one-stop) ---------- */
  .inabox {
    background:var(--paper-2);
    padding:clamp(64px, 9%, 120px) 0;
  }
  .inabox-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px, 6%, 88px);
    align-items:center;
  }
  .inabox .cb-eyebrow {margin-bottom:8px}
  .inabox-title {
    font-size:clamp(34px, 4vw, 50px);
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:.01em;
    color:var(--ink);
    margin:0 0 30px;
  }
  .inabox-copy {
    font-size:15px;
    line-height:2;
    color:var(--ink-2);
    font-weight:300;
    max-width:48ch;
  }
  .onestop {
    position:relative;
    width:100%;
    max-width:540px;
    margin:0 auto;
    aspect-ratio:1 / 1;
  }
  .onestop-arrows {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
  }
  .onestop-core {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:48%;
    height:48%;
    border-radius:50%;
    background:#7a1f24;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px;
  }
  .onestop-core strong {
    font-size:clamp(14px, 1.7vw, 19px);
    font-weight:700;
    letter-spacing:.01em;
  }
  .onestop-core span {
    margin-top:12px;
    font-size:clamp(9px, 1.05vw, 11.5px);
    letter-spacing:.05em;
    line-height:1.7;
    color:rgba(255,255,255,.86);
  }
  .onestop-node {
    position:absolute;
    width:30%;
    transform:translate(-50%, -50%);
    text-align:center;
    font-size:clamp(10px, 1.15vw, 12.5px);
    letter-spacing:.04em;
    line-height:1.3;
    color:#3a3a3a;
    font-weight:400;
  }

  /* ---------- Capability content blocks ---------- */
  .cap-block {
    position:relative;
    overflow:hidden;
    padding:clamp(56px, 8%, 104px) 0;
    background:var(--paper);
  }
  .cap-block.tinted {background:var(--paper-2)}
  .cap-block .cb-bg {
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:1;
    z-index:0;
    pointer-events:none;
  }
  .cap-block .container {position:relative; z-index:1}
  .cb-eyebrow {
    font-size:11.5px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:600;
    display:block;
  }
  .cb-title {
    font-size:clamp(30px, 3.6vw, 46px);
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--ink);
    margin:10px 0 0;
  }
  .cb-copy {
    font-size:15px;
    line-height:2;
    color:var(--ink-2);
    font-weight:300;
  }
  .cap-block.center .cb-head {text-align:center}
  .cap-block.center .cb-copy {
    max-width:800px;
    margin:30px auto 0;
    text-align:justify;
  }
  .cap-block.center .cb-media {
    margin:48px auto 0;
    max-width:800px;
  }
  .cap-block.center .cb-media img {
    width:100%;
    height:auto;
    display:block;
  }
  .cap-block.split .cb-inner {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:clamp(36px, 5%, 72px);
    align-items:center;
  }
  .cap-block.split .cb-copy {margin-top:26px; max-width:54ch}
  .cap-block.split .cb-media img {
    width:100%;
    height:auto;
    display:block;
  }
  .cap-block.split.media-left .cb-text {order:2}
  .cap-block.split.media-left .cb-media {order:1}

  /* ---------- Capabilities mobile ---------- */
  @media (max-width: 960px) {
    .svc-grid {grid-template-columns:repeat(2, 1fr)}
    .inabox-grid {grid-template-columns:1fr; gap:48px}
    .onestop {max-width:420px}
    .cap-block.split .cb-inner {grid-template-columns:1fr}
    .cap-block.split.media-left .cb-text,
    .cap-block.split.media-left .cb-media {order:0}
    .presence-legend {position:static; margin-top:18px; display:inline-flex}
    .cb-title, .inabox-title {font-size:30px}
  }
  @media (max-width: 560px) {
    .svc-grid {grid-template-columns:1fr}
  }

  
  
  /* ====================================================== */
  /* ====================  BRANDS PAGE  =================== */
  /* ====================================================== */

  /* ---------- Hero: faded sketch photo + big left title ---------- */
  .hero-brands {
    height:min(64vh, 640px);
    min-height:460px;
    color:var(--ink);
  }
  .hero-brands .hero-photo {
    background-size:cover;
    background-position:center;
    background-color:#eef0f1;
    filter:grayscale(.15) brightness(1.1) contrast(.97);
  }
  .hero-brands .hero-photo::after {
    background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.2) 55%, rgba(255,255,255,.35));
  }
  .hero-brands .hero-inner {
    justify-content:center;
    align-items:flex-start;
  }
  .hero-brands h1 {
    font-size:88px;
    font-weight:400;
    color:#111;
    text-shadow:none;
    letter-spacing:-.015em;
    line-height:1;
  }

  /* ---------- Intro copy ---------- */
  .brands-intro {
    background:var(--paper);
    padding:clamp(56px, 8%, 96px) 0 clamp(40px, 6%, 72px);
  }
  .brands-intro .intro-copy {
    max-width:min(100%, 1300px);
  }
  .brands-intro .intro-copy p {
    font-size:15px;
    line-height:2;
    color:var(--ink-2);
    font-weight:300;
    text-align:justify;
  }
  .brands-intro .intro-copy p + p {
    margin-top:28px;
  }

  /* ---------- Brand grid ---------- */
  .brands-grid-wrap {
    background:var(--paper);
    padding:0 0 clamp(56px, 8%, 100px);
  }
  .brands-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(20px, 2.6%, 36px);
  }
  .brand-card {
    background:var(--paper-2);
    aspect-ratio:3 / 2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    transition: background var(--t), transform var(--t);
    position: relative; 
    z-index: 1;
  }
  .brand-card:hover {
    background: #d4d4d0; /* Un tono más oscuro que el #ebebe8 que tenías */
    transform: scale(1.15);
    z-index: 2; /* Hace que la tarjeta ampliada quede por encima de las demás */
  }
  
  .brand-card img {
    max-width:62%;
    /*max-height:46%;*/
    object-fit:contain;
    transition: transform var(--t);
  }
  .brand-card .bc-name {
    font-size:24px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--ink);
    line-height:1.15;
  }
  .brand-card .bc-needed {
    margin-top:8px;
    font-size:21px;
    font-weight:700;
    color:var(--accent);
    line-height:1.2;
  }

  @media (max-width: 860px) {
    .brands-grid {grid-template-columns:repeat(2, 1fr)}
    .hero-brands h1 {font-size:60px}
  }
  @media (max-width: 540px) {
    .brands-grid {grid-template-columns:1fr}
    .hero-brands h1 {font-size:46px}
  }