:root{
    --ink: #1A1B18;      /* Negro cálido */
    --yolk: #e8b85c;     /* Yema */
    --stone: #B8B2A7;    /* Gris piedra */
    --bone: #F5F2EB;     /* Blanco hueso */
    --bone-2: #ECE7DC;   /* deeper bone for surfaces */
    --rule: rgba(26,27,24,0.14);
    --muted: rgba(26,27,24,0.62);

    --sans: "Zalando Sans SemiExpanded", "Zalando Sans", system-ui, sans-serif;
    --display: "Zalando Sans Expanded", "Zalando Sans SemiExpanded", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --gutter: clamp(20px, 4vw, 64px);
    --max: 1440px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: var(--sans);
    background: var(--bone);
    color: var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv11";
    overflow-x: hidden;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
  img{max-width:100%;display:block}

  .wrap{ max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

  /* ================= NAV ================= */
  .nav{
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bone) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .nav-inner{
    display: flex; align-items: center; justify-content: space-between;
    height: 76px;
  }
  .brand{
    display:flex;align-items:center;gap:12px;
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 14px;
    text-transform: uppercase;
  }
  .brand-logo{
    --slot-bg: transparent;
    --slot-border: var(--rule);
    --slot-fg: var(--muted);
    display: block;
    width: 168px; height: 40px;
  }
  /* transparent frame + no dashed ring so only the logo art shows */
  .brand-logo::part(frame){ background: transparent !important; }
  .brand-logo::part(ring){ border-color: transparent !important; }
  .brand-logo::part(image){ object-fit: contain !important; object-position: left center !important; }
  .brand-logo::part(placeholder){ font-size: 10px; letter-spacing: 0.08em; }
  .nav-links{
    display:flex;gap:36px;align-items:center;
    font-size: 14px; letter-spacing: 0.01em;
  }
  .nav-links a{ color: var(--ink); opacity: .78; transition: opacity .2s }
  .nav-links a:hover{ opacity: 1 }
  .nav-links a.nav-cta{
    display:inline-flex;align-items:center;gap:10px;
    padding: 11px 18px;
    background: var(--ink);
    color: var(--bone);
    opacity: 1;
    border-radius: 999px;
    font-size: 13px; letter-spacing: 0.02em;
    transition: transform .2s ease, background .2s ease;
  }
  .nav-links a.nav-cta:hover{ background: #2a2b27; transform: translateY(-1px); opacity: 1; }
  .nav-cta .dot{ width:6px; height:6px;border-radius:50%; background: var(--yolk) }
  @media (max-width: 760px){
    .nav-links a:not(.nav-cta){ display:none }
  }

  /* ================= HERO ================= */
  .hero{
    padding-top: clamp(48px, 7vw, 96px);
    padding-bottom: clamp(56px, 8vw, 120px);
    position: relative;
  }
  .eyebrow{
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: var(--muted);
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{
    content:""; width: 28px; height: 1px; background: var(--ink); opacity: .4;
  }
  .h1{
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(44px, 7.4vw, 116px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 22px 0 0;
    text-wrap: balance;
  }
  .h1 em{
    font-style: normal;
    color: var(--ink);
    background: linear-gradient(transparent 62%, rgba(232,184,92,.55) 62% 92%, transparent 92%);
    padding: 0 .04em;
  }
  .h1 .thin{ font-weight: 300; color: var(--muted); }
  .hero-sub{
    margin-top: 28px;
    max-width: 56ch;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    color: rgba(26,27,24,.78);
  }
  .hero-row{
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(28px, 4vw, 72px);
    align-items: end;
  }
  @media (max-width: 920px){
    .hero-row{ grid-template-columns: 1fr; }
  }
  .hero-figure{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bone-2);
  }
  .hero-cta-row{
    margin-top: 36px;
    display:flex; flex-wrap: wrap; gap: 14px; align-items: center;
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding: 16px 24px;
    border-radius: 999px;
    font-size: 14px; letter-spacing: 0.02em;
    transition: transform .2s ease, background .2s ease, color .2s;
  }
  .btn-primary{ background: var(--ink); color: var(--bone); }
  .btn-primary:hover{ background:#2a2b27; transform: translateY(-1px); }
  .btn-ghost{
    background: transparent; color: var(--ink);
    border: 1px solid var(--rule);
  }
  .btn-ghost:hover{ border-color: var(--ink); }
  .btn .arrow{ display:inline-block; transition: transform .2s }
  .btn:hover .arrow{ transform: translateX(3px) }

  /* meta strip below hero */
  .meta-strip{
    margin-top: clamp(48px, 6vw, 84px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .meta-cell{
    padding: 22px 24px;
    border-right: 1px solid var(--rule);
  }
  .meta-cell:last-child{ border-right: 0 }
  .meta-cell .k{
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--muted);
  }
  .meta-cell .v{
    margin-top: 8px;
    font-family: var(--display); font-weight: 500;
    font-size: 22px; letter-spacing: -0.01em;
  }
  @media (max-width: 760px){
    .meta-strip{ grid-template-columns: repeat(2, 1fr); }
    .meta-cell:nth-child(2){ border-right: 0 }
    .meta-cell:nth-child(1), .meta-cell:nth-child(2){ border-bottom: 1px solid var(--rule) }
  }

  /* ================= MARQUEE ================= */
  .marquee{
    background: var(--ink); color: var(--bone);
    overflow: hidden; white-space: nowrap;
    padding: 22px 0;
    border-block: 1px solid var(--ink);
  }
  .marquee-track{
    display: inline-flex; gap: 56px;
    animation: scroll 38s linear infinite;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 56px);
    letter-spacing: -0.01em;
  }
  .marquee-track span{ display:inline-flex; align-items:center; gap: 56px; }
  .marquee-track .dot{
    width: 10px; height: 10px; border-radius: 50%; background: var(--yolk);
    display:inline-block;
  }
  @keyframes scroll{
    from{ transform: translateX(0) }
    to{ transform: translateX(-50%) }
  }

  /* ================= SECTION COMMON ================= */
  section.block{
    padding-block: clamp(80px, 10vw, 160px);
  }
  .section-head{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(24px, 5vw, 80px);
    margin-bottom: clamp(48px, 6vw, 88px);
  }
  @media (max-width: 920px){
    .section-head{ grid-template-columns: 1fr; }
  }
  .section-head h2{
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(34px, 5vw, 72px);
    line-height: 1.0;
    letter-spacing: -0.022em;
    margin: 12px 0 0;
    text-wrap: balance;
  }
  .section-head p{
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.55;
    color: rgba(26,27,24,.74);
    max-width: 58ch;
    margin: 0;
  }
  .section-head .copy{ align-self: end }

  /* ================= QUE HACEMOS ================= */
  .pillars{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .pillar{
    background: var(--bone);
    padding: 44px 36px 40px;
    min-height: 320px;
    display:flex;flex-direction:column;justify-content:space-between;
    transition: background .25s ease;
  }
  .pillar:hover{ background: var(--bone-2); }
  .pillar .no{
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }
  .pillar h3{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(24px, 2.3vw, 34px); line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 18px 0 14px;
  }
  .pillar p{
    color: rgba(26,27,24,.72);
    font-size: 15px; line-height: 1.55;
    margin: 0 0 28px;
  }
  .pillar .glyph{
    width: 56px; height: 56px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display:grid;place-items:center;
    color: var(--ink);
  }
  @media (max-width: 760px){
    .pillars{ grid-template-columns: 1fr; }
  }

  /* ================= SERVICIOS ================= */
  .services{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 28px);
  }
  @media (max-width: 1180px){
    .services{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 920px){
    .services{ grid-template-columns: 1fr; }
  }
  .svc{
    background: var(--bone-2);
    padding: 32px 26px 28px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: background .25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .svc.dark{
    background: var(--ink);
    color: var(--bone);
  }
  .svc.yolk{
    background: var(--yolk);
    color: var(--ink);
  }
  .svc .badge{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(26,27,24,.18);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .svc.dark .badge{ border-color: rgba(245,242,235,.22); color: var(--bone) }
  .svc .badge .pulse{
    width: 6px; height: 6px; border-radius: 50%; background: var(--yolk);
  }
  .svc.yolk .badge .pulse{ background: var(--ink) }
  .svc h3{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin: 18px 0 12px;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
    min-height: calc(3 * 1.1em);
  }
  .svc .lede{
    font-size: 14.5px; line-height: 1.5;
    color: rgba(26,27,24,.78);
    margin: 0 0 22px;
    min-height: calc(2 * 1.5em);
  }
  .svc.dark .lede{ color: rgba(245,242,235,.72) }
  .svc.yolk .lede{ color: rgba(26,27,24,.78) }
  .svc ul{
    list-style: none; padding: 0; margin: 0 0 24px;
    border-top: 1px solid rgba(26,27,24,.14);
  }
  .svc.dark ul{ border-top-color: rgba(245,242,235,.18) }
  .svc.yolk ul{ border-top-color: rgba(26,27,24,.22) }
  .svc li{
    display:flex; gap: 12px; align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid rgba(26,27,24,.10);
    font-size: 14px;
  }
  .svc.dark li{ border-bottom-color: rgba(245,242,235,.14) }
  .svc.yolk li{ border-bottom-color: rgba(26,27,24,.16) }
  .svc li .n{
    font-family: var(--mono); font-size: 10.5px;
    color: var(--muted);
    flex-shrink: 0;
    width: 22px;
  }
  .svc.dark li .n{ color: rgba(245,242,235,.5) }
  .svc.yolk li .n{ color: rgba(26,27,24,.55) }
  .svc .foot{
    display:flex; flex-direction: column; align-items: stretch;
    gap: 16px;
    margin-top: auto;
  }
  .svc .foot .note{
    font-size: 12.5px;
    color: rgba(26,27,24,.62);
    line-height: 1.45;
    min-height: calc(3 * 1.45em);
  }
  .svc.dark .foot .note{ color: rgba(245,242,235,.6) }
  .svc.yolk .foot .note{ color: rgba(26,27,24,.7) }
  .svc-link{
    display:inline-flex; align-items:center; justify-content: center; gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--ink); color: var(--bone);
    font-size: 13px; letter-spacing: 0.02em;
    transition: transform .2s, background .2s;
    flex-shrink: 0;
  }
  .svc.dark .svc-link{ background: var(--yolk); color: var(--ink) }
  .svc.yolk .svc-link{ background: var(--ink); color: var(--yolk) }
  .svc-link:hover{ transform: translateY(-1px) }

  /* ================= PROCESS / HOW WE WORK ================= */
  .process{
    background: var(--ink);
    color: var(--bone);
    padding-block: clamp(80px, 10vw, 160px);
  }
  .process h2{
    color: var(--bone);
  }
  .process .section-head p{ color: rgba(245,242,235,.7) }
  .process-grid{
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(245,242,235,.16);
  }
  @media (max-width: 760px){
    .process-grid{ grid-template-columns: 1fr 1fr }
  }
  .step{
    padding: 36px 28px 36px 0;
    border-right: 1px solid rgba(245,242,235,.16);
  }
  .step:last-child{ border-right: 0; padding-right: 0 }
  .step:first-child{ padding-left: 0 }
  .step:not(:first-child){ padding-left: 28px }
  .step .n{
    font-family: var(--mono); font-size: 11px;
    color: var(--yolk);
    letter-spacing: 0.18em;
  }
  .step h4{
    font-family: var(--display); font-weight: 500;
    font-size: 22px; letter-spacing: -0.01em;
    margin: 18px 0 12px;
    line-height: 1.15;
  }
  .step p{
    color: rgba(245,242,235,.68);
    font-size: 14.5px; line-height: 1.55;
    margin: 0;
  }

  /* ================= PROOF / NUMBERS ================= */
  .promise{
    background: var(--bone-2);
  }
  .promise-inner{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
  }
  @media (max-width: 920px){ .promise-inner{ grid-template-columns: 1fr } }
  .promise blockquote{
    margin: 0;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }
  .promise blockquote .mark{
    font-family: var(--display);
    color: var(--yolk);
    font-size: 1em; line-height: 0;
    vertical-align: -0.2em;
    margin-right: 0.1em;
    font-weight: 600;
  }
  .promise .who{
    margin-top: 32px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
  }
  .promise-figure{
    aspect-ratio: 5 / 4;
    background: var(--stone);
    border-radius: 4px;
    overflow: hidden;
  }

  /* ================= CTA ================= */
  .cta{
    padding-block: clamp(96px, 12vw, 180px);
    text-align: center;
  }
  .cta h2{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(40px, 6vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
  }
  .cta h2 em{
    font-style: normal;
    background: linear-gradient(transparent 62%, rgba(232,184,92,.55) 62% 92%, transparent 92%);
  }
  .cta p{
    margin: 28px auto 36px;
    max-width: 48ch;
    font-size: clamp(16px,1.2vw,19px); line-height: 1.55;
    color: rgba(26,27,24,.72);
  }
  .cta .actions{
    display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  }

  /* ================= FOOTER ================= */
  footer{
    background: var(--ink);
    color: var(--bone);
    padding: 64px 0 28px;
  }
  .foot-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(245,242,235,.16);
  }
  @media (max-width: 760px){
    .foot-grid{ grid-template-columns: 1fr 1fr; }
  }
  .foot-grid h5{
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: rgba(245,242,235,.5);
    margin: 0 0 18px;
    font-weight: 500;
  }
  .foot-grid a, .foot-grid li{
    display: block;
    font-size: 14.5px;
    color: rgba(245,242,235,.84);
    padding: 5px 0;
    transition: color .2s;
  }
  .foot-grid a:hover{ color: var(--yolk) }
  .foot-grid ul{ list-style: none; padding: 0; margin: 0 }
  .foot-brand{
    font-family: var(--display); font-weight: 500;
    font-size: 28px; letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 16px;
  }
  .foot-logo{
    display: block;
    width: 210px; height: 48px;
    margin: 0 0 18px;
    --slot-fg: rgba(245,242,235,.45);
  }
  .foot-logo::part(frame){ background: transparent !important; }
  .foot-logo::part(ring){ border-color: rgba(245,242,235,.22) !important; }
  /* force the dropped logo to render in white for the dark footer */
  .foot-logo::part(image){ object-fit: contain !important; object-position: left center !important; filter: brightness(0) invert(1) !important; }
  .foot-brand .yolk-dot{ color: var(--yolk) }
  .foot-tag{
    color: rgba(245,242,235,.6);
    font-size: 14.5px; line-height: 1.55;
    max-width: 32ch;
    margin: 0;
  }
  .foot-bottom{
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 28px;
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: rgba(245,242,235,.55);
    flex-wrap: wrap; gap: 12px;
  }

  /* ================= IMAGE SLOT PLACEHOLDERS ================= */
  image-slot{
    --slot-bg: var(--bone-2);
    --slot-fg: var(--muted);
    --slot-border: var(--rule);
    width: 100%; height: 100%;
  }

  /* small icon glyph helper */
  .glyph svg{ width: 22px; height: 22px; }

  /* Yolk underline accent */
  .underline-yolk{
    background-image: linear-gradient(var(--yolk), var(--yolk));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 6px;
    padding: 0 .02em;
  }

  /* ================= VALUE STRIP ================= */
  .value-strip{
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .value-strip .wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  @media (max-width: 760px){
    .value-strip .wrap{ grid-template-columns: 1fr; }
  }
  .value-item{
    padding: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px);
    border-right: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 20px;
  }
  .value-item:last-child{ border-right: 0 }
  @media (max-width: 760px){
    .value-item{ border-right: 0; border-bottom: 1px solid var(--rule); }
    .value-item:last-child{ border-bottom: 0 }
  }
  .value-item .v-glyph{
    width: 44px; height: 44px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display:grid; place-items:center;
    color: var(--ink);
  }
  .value-item .v-glyph svg{ width: 20px; height: 20px; }
  .value-item h3{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.15;
  }
  .value-item p{
    color: rgba(26,27,24,.72);
    font-size: 15.5px; line-height: 1.55;
    margin: 0;
    max-width: 36ch;
  }

  /* ================= CONTACT FORM ================= */
  .contact{
    background: var(--bone-2);
    padding-block: clamp(80px, 10vw, 140px);
  }
  .contact-inner{
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
  }
  @media (max-width: 920px){ .contact-inner{ grid-template-columns: 1fr; } }
  .contact-copy h2{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 16px 0 0;
    text-wrap: balance;
  }
  .contact-copy h2 em{
    font-style: normal;
    background: linear-gradient(transparent 62%, rgba(232,184,92,.55) 62% 92%, transparent 92%);
  }
  .contact-copy p{
    margin-top: 24px;
    font-size: clamp(16px,1.2vw,18px);
    line-height: 1.55;
    color: rgba(26,27,24,.74);
    max-width: 44ch;
  }
  .contact-copy .direct{
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 14px;
  }
  .contact-copy .direct .k{
    font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--muted);
  }
  .contact-copy .direct a{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: color .2s;
  }
  .contact-copy .direct a:hover{ color: rgba(26,27,24,.6) }

  .form-card{
    background: var(--bone);
    padding: clamp(28px, 3vw, 44px);
    border-radius: 6px;
    border: 1px solid var(--rule);
  }
  .form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .field{ display: flex; flex-direction: column; gap: 8px; }
  .field.full{ grid-column: 1 / -1; }
  .field label{
    font-family: var(--mono); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--muted);
  }
  .field input,
  .field textarea{
    font: inherit;
    font-family: var(--sans);
    font-size: 16px;
    background: transparent;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 10px 0 12px;
    outline: none;
    transition: border-color .2s;
    resize: none;
  }
  .field textarea{ min-height: 96px; }
  .field input::placeholder,
  .field textarea::placeholder{ color: rgba(26,27,24,.36) }
  .field input:focus,
  .field textarea:focus{ border-bottom-color: var(--ink) }
  .form-foot{
    margin-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
  }
  .form-foot .legal{
    font-size: 12px; color: var(--muted);
    max-width: 32ch; line-height: 1.5;
  }
  .form-foot .legal a{ color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); }
  .submit{
    display:inline-flex; align-items:center; gap: 10px;
    padding: 16px 26px;
    border-radius: 999px;
    background: var(--ink); color: var(--bone);
    font-size: 14px; letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform .2s, background .2s;
  }
  .submit:hover{ background: #2a2b27; transform: translateY(-1px); }

  /* ================= POR QUÉ — DARK HIGHLIGHTS ================= */
  .why{
    background: var(--ink);
    color: var(--bone);
    padding-block: clamp(80px, 10vw, 160px);
  }
  .why h2{ color: var(--bone) }
  .why .section-head p{ color: rgba(245,242,235,.7) }
  .why-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(245,242,235,.16);
  }
  @media (max-width: 760px){ .why-grid{ grid-template-columns: 1fr; } }
  .why-item{
    padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px) clamp(32px, 4vw, 48px) 0;
    border-right: 1px solid rgba(245,242,235,.16);
  }
  .why-item:first-child{ padding-left: 0 }
  .why-item:not(:first-child){ padding-left: clamp(24px, 3vw, 36px) }
  .why-item:last-child{ border-right: 0; padding-right: 0 }
  @media (max-width: 760px){
    .why-item{ border-right: 0; border-bottom: 1px solid rgba(245,242,235,.16); padding: 32px 0 !important; }
    .why-item:last-child{ border-bottom: 0 }
  }
  .why-item .n{
    font-family: var(--mono); font-size: 11px;
    color: var(--yolk); letter-spacing: 0.18em;
  }
  .why-item h3{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.05; letter-spacing: -0.018em;
    margin: 20px 0 16px;
    text-wrap: balance;
  }
  .why-item p{
    color: rgba(245,242,235,.7);
    font-size: 15.5px; line-height: 1.55;
    margin: 0;
    max-width: 36ch;
  }

  /* ================= FOOTER SOCIAL ================= */
  .social{
    display: flex; gap: 10px; margin-top: 8px;
  }
  .social a{
    width: 38px; height: 38px;
    border: 1px solid rgba(245,242,235,.24);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--bone);
    padding: 0;
    transition: background .2s, border-color .2s, color .2s;
  }
  .social a:hover{ background: var(--yolk); color: var(--ink); border-color: var(--yolk); }
  .social svg{ width: 16px; height: 16px; }

  .nav-cta .wa-icon{ width: 16px; height: 16px; color: var(--yolk); }

  /* ================= AUDIENCE SEGMENTS ================= */
  .segment{ padding-block: clamp(80px, 10vw, 150px); }
  .segment.alt{ background: var(--bone-2); }
  .segment-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  @media (max-width: 920px){ .segment-inner{ grid-template-columns: 1fr; } }
  .segment-figure{
    aspect-ratio: 4 / 5;
    background: var(--stone);
    border-radius: 4px;
    overflow: hidden;
  }
  .segment.mirror .segment-figure{ order: -1; }
  @media (max-width: 920px){ .segment.mirror .segment-figure{ order: 0; } }
  .segment .eyebrow{ margin-bottom: 14px; }
  .segment h2{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.0; letter-spacing: -0.022em;
    margin: 0; text-wrap: balance;
  }
  .segment .lead{
    margin-top: 22px;
    font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55;
    color: rgba(26,27,24,.74); max-width: 46ch;
  }
  .seg-points{
    margin-top: 36px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px;
  }
  @media (max-width: 560px){ .seg-points{ grid-template-columns: 1fr; } }
  .seg-point{ display: flex; gap: 14px; align-items: flex-start; }
  .seg-point .p-glyph{
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--ink); border-radius: 50%;
    display: grid; place-items: center; color: var(--ink);
  }
  .seg-point .p-glyph svg{ width: 18px; height: 18px; }
  .seg-point h4{
    font-family: var(--display); font-weight: 500;
    font-size: 17px; letter-spacing: -0.01em; margin: 0 0 5px;
    line-height: 1.2;
  }
  .seg-point p{ margin: 0; font-size: 14px; line-height: 1.5; color: rgba(26,27,24,.66); }
  .seg-cta{ margin-top: 40px; }
  .seg-chips{
    margin-top: 36px; padding-top: 30px;
    border-top: 1px solid var(--rule);
  }
  .seg-chips .k{
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--muted); margin: 0 0 16px;
  }
  .chips{ display: flex; flex-wrap: wrap; gap: 10px; }
  .chip{
    padding: 9px 15px; border: 1px solid var(--rule); border-radius: 999px;
    font-size: 13.5px; color: var(--ink); background: var(--bone);
  }

  /* dark variant for the Empresas segment */
  .segment.dark{ background: var(--ink); color: var(--bone); }
  .segment.dark .eyebrow{ color: rgba(245,242,235,.6); }
  .segment.dark .eyebrow::before{ background: var(--bone); opacity: .5; }
  .segment.dark h2{ color: var(--bone); }
  .segment.dark .lead{ color: rgba(245,242,235,.72); }
  .segment.dark .seg-point .p-glyph{ border-color: var(--bone); color: var(--bone); }
  .segment.dark .seg-point h4{ color: var(--bone); }
  .segment.dark .seg-point p{ color: rgba(245,242,235,.66); }
  .segment.dark .seg-chips{ border-top-color: rgba(245,242,235,.18); }
  .segment.dark .seg-chips .k{ color: var(--yolk); }
  .segment.dark .chip{ background: transparent; border-color: rgba(245,242,235,.24); color: var(--bone); }
  .segment.dark .btn-primary{ background: var(--yolk); color: var(--ink); }
  .segment.dark .btn-primary:hover{ background: #f0c877; }
  .segment.dark .segment-figure{ background: #2a2b27; }

  /* “Por qué Tailor” work gallery */
  .why-gallery{ margin-top: clamp(44px, 5vw, 68px); }
  .why-gallery .k{
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--yolk); margin: 0 0 20px;
  }
  .why-gallery .grid{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
  }
  @media (max-width: 760px){ .why-gallery .grid{ grid-template-columns: 1fr; } }
  .why-shot{
    aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; display: block;
    --slot-bg: #24251f; --slot-fg: rgba(245,242,235,.5); --slot-border: rgba(245,242,235,.2);
  }

  /* footer — grupo Sinerba lockup */
  .foot-group{ margin-top: 28px; display: flex; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
  .foot-group-label{
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.18em; color: rgba(245,242,235,.5);
    white-space: nowrap;
  }
  .group-logo{
    width: 130px; height: 40px; display: block; flex-shrink: 0;
    --slot-bg: transparent; --slot-border: rgba(245,242,235,.24); --slot-fg: rgba(245,242,235,.45);
  }

  #por-que .section-head h2{ width: auto !important; }

  /* ---- tighten Servicios head + rhythm into Particulares ---- */
  #servicios{ padding-bottom: clamp(48px, 6vw, 80px); }
  #servicios .section-head{ margin-bottom: clamp(24px, 3vw, 40px); }
  #servicios .section-head h2{ height: auto !important; width: auto !important; }

  /* ---- Particulares: distinct surface to separate the two zones ---- */
  #particulares{
    background: var(--bone-2);
    border-top: 1px solid var(--rule);
    padding-top: clamp(52px, 6.5vw, 92px);
    padding-bottom: clamp(60px, 7.5vw, 104px);
  }
  #particulares .segment-figure{ background: var(--stone); }

  /* ================= EMPRESAS (distinct B2B layout) ================= */
  .empresas{
    background: var(--ink); color: var(--bone);
    padding-block: clamp(80px, 10vw, 150px);
  }
  .empresas .eyebrow{ color: rgba(245,242,235,.6); }
  .empresas .eyebrow::before{ background: var(--bone); opacity: .5; }
  .emp-top{
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: clamp(24px, 5vw, 80px); align-items: center;
  }
  @media (max-width: 920px){ .emp-top{ grid-template-columns: 1fr; } }
  .emp-top h2{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(34px, 4.6vw, 62px); line-height: 1.0;
    letter-spacing: -0.022em; margin: 14px 0 0; color: var(--bone);
    text-wrap: balance;
  }
  .emp-lead{
    font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55;
    color: rgba(245,242,235,.72); margin: 0; max-width: 44ch;
  }
  .emp-banner{ margin-top: clamp(40px, 5vw, 64px); }
  .emp-shot{
    display: block; width: 100%; aspect-ratio: 16 / 5;
    border-radius: 4px; overflow: hidden;
    --slot-bg: #24251f; --slot-fg: rgba(245,242,235,.5); --slot-border: rgba(245,242,235,.2);
  }
  .emp-grid{
    margin-top: clamp(44px, 5vw, 68px);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid rgba(245,242,235,.16);
  }
  @media (max-width: 760px){ .emp-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 460px){ .emp-grid{ grid-template-columns: 1fr; } }
  .emp-point{
    padding: clamp(28px,3vw,38px) clamp(20px,2vw,30px) clamp(20px,2vw,28px);
    border-right: 1px solid rgba(245,242,235,.16);
  }
  .emp-point:first-child{ padding-left: 0; }
  .emp-point:last-child{ border-right: 0; padding-right: 0; }
  @media (max-width: 760px){
    .emp-point:nth-child(2){ border-right: 0; padding-right: 0; }
    .emp-point:nth-child(3){ padding-left: 0; }
  }
  .emp-point .n{ font-family: var(--mono); font-size: 11px; color: var(--yolk); letter-spacing: 0.18em; }
  .emp-point h4{
    font-family: var(--display); font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.01em;
    margin: 16px 0 10px; line-height: 1.15; color: var(--bone);
  }
  .emp-point p{ margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(245,242,235,.66); }
  .emp-foot{
    margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid rgba(245,242,235,.16);
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 32px; flex-wrap: wrap;
  }
  .emp-services .k{
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--yolk); margin: 0 0 16px;
  }
  .empresas .chips{ display: flex; flex-wrap: wrap; gap: 10px; }
  .empresas .chip{
    padding: 9px 15px; border: 1px solid rgba(245,242,235,.24);
    border-radius: 999px; font-size: 13.5px; color: var(--bone); background: transparent;
  }
  .emp-cta{ background: var(--yolk); color: var(--ink); flex-shrink: 0; }
  .emp-cta:hover{ background: #f0c877; transform: translateY(-1px); }

  /* =====================================================================
     MOBILE / TABLET FIXES  — no afectan al escritorio ancho (>1180px)
     ===================================================================== */
  /* red de seguridad anti-desbordamiento (inocua en escritorio) */
  .services{ max-width: 100% !important; }
  .hero-figure{ max-width: 100% !important; }
  .segment-figure{ max-width: 100% !important; }
  #por-que .section-head h2{ max-width: 100% !important; }

  @media (max-width: 1180px){
    .hero-figure{ width: 100% !important; height: auto !important; aspect-ratio: 4/5 !important; }
    .hero-figure img, .hero-figure image-slot{ width: 100% !important; height: 100% !important; }

    #por-que{ height: auto !important; }
    #por-que .wrap{ height: auto !important; }
    #por-que .why-grid{ height: auto !important; }
    #por-que h2{ width: auto !important; }

    #servicios{ height: auto !important; }
    .services{ width: 100% !important; }
    .svc{ height: auto !important; }
    .svc h3{ width: auto !important; height: auto !important; min-height: 0 !important; }
    .svc .lede{ width: auto !important; height: auto !important; min-height: 0 !important; }
    .svc .foot .note{ height: auto !important; min-height: 0 !important; }

    #particulares{ height: auto !important; }
    #particulares .segment-inner{ height: auto !important; margin: 0 !important; }
    .segment-figure{ width: 100% !important; height: auto !important; aspect-ratio: 4/5 !important; }
    .segment-figure img, .segment-figure image-slot{ width: 100% !important; height: 100% !important; }

    #empresas{ height: auto !important; }
  }

  @media (max-width: 920px){
    .nav-links .lang-switch{ display:inline-flex !important; }
    .nav-links .lang-switch a{ display:inline-flex !important; }
    .brand-logo, .nav-inner img{ height: 40px !important; }
    .hero .wrap{ font-size: 16px !important; }

    #por-que{ padding-top: 64px !important; padding-bottom: 56px !important; }
    #por-que .why-gallery{ margin-top: 32px !important; }
    #servicios{ padding-top: 60px !important; }
    #particulares{ padding-top: 56px !important; padding-bottom: 56px !important; }
    #empresas{ padding-top: 60px !important; padding-bottom: 60px !important; }
    .svc{ padding: 28px 24px 26px !important; }
  }

  @media (max-width: 600px){
    .h1, .h1[style]{ font-size: 44px !important; line-height: 1.0 !important; }
    .h1 em, .h1 em[style]{ font-size: 44px !important; }
    .hero-sub{ font-size: 16px !important; }
    .eyebrow, .eyebrow[style]{ font-size: 12px !important; }

    .marquee-track span, .marquee-track span[style]{ font-size: 28px !important; }

    .section-head h2, .section-head h2[style],
    #por-que h2[style], #servicios h2[style]{ font-size: 32px !important; }
    .segment h2, .segment h2[style]{ font-size: 30px !important; }
    .emp-top h2, .emp-top h2[style]{ font-size: 30px !important; }
    .contact-copy h2{ font-size: 34px !important; }

    .svc h3, .svc h3[style]{ font-size: 21px !important; }
    .value-item h3{ font-size: 22px !important; }

    .hero{ padding-top: 40px !important; padding-bottom: 48px !important; }
    #por-que, #servicios, #particulares, #empresas, .contact{ padding-top: 52px !important; padding-bottom: 52px !important; }

    .form-grid{ grid-template-columns: 1fr !important; }
    .emp-foot{ flex-direction: column !important; align-items: stretch !important; }
    .emp-cta{ width: 100% !important; justify-content: center !important; }
  }