:root {
    --green: #79DEA8; --green-deep: #1c7a4a; --black: #0a0a0a; --ink: #111;
    --bone: #F6F4EF; --paper: #fff; --hair: rgba(0,0,0,0.10); --hair-d: rgba(255,255,255,0.14);
    --mono: 'JetBrains Mono', monospace; --wa: #1c7a4a;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Poppins', sans-serif; background: var(--bone); color: var(--ink); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  .display { font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: .96; }
  .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

  /* ── TOPBAR (sticky, estilo v6) ─────────────────────── */
  .nav-wrap { position: sticky; top: 0; z-index: 90; background: var(--bone); border-bottom: 1px solid var(--hair); }
  .ticker { background: var(--black); color: #fff; overflow: hidden; padding: 8px 0; }
  .ticker-track { display: flex; gap: 48px; animation: tkr 55s linear infinite; width: max-content; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
  @keyframes tkr { to { transform: translateX(-50%); } }
  .ticker span { white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; }
  .ticker .g { color: var(--green); }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 13px 28px; gap: 32px; }
  .nav .brand img { height: 26px; display: block; }
  .nav-menu { display: flex; gap: 4px; }
  .nav-menu a { padding: 8px 14px; font-size: 13px; font-weight: 500; border-radius: 999px; transition: background .25s, color .25s; }
  .nav-menu a:hover { background: var(--ink); color: var(--bone); }
  .nav-cta { display: flex; align-items: center; gap: 8px; }
  .nav-social { display: flex; align-items: center; gap: 4px; }
  .nav-social a { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); opacity: .55; transition: opacity .2s, background .2s, color .2s; }
  .nav-social a:hover { opacity: 1; background: transparent; }
  .nav-social a[aria-label="Instagram"]:hover { color: #E1306C; }
  .nav-social a[aria-label="Facebook"]:hover { color: #1877F2; }
  .nav-social a[aria-label="LinkedIn"]:hover { color: #0A66C2; }
  .nav-social svg { width: 16px; height: 16px; display: block; }
  .nav-sep { width: 1px; height: 22px; background: var(--hair); margin: 0 4px; }
  .nav-cta .phone { font-family: var(--mono); font-size: 12px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 999px; }
  .nav-cta .btn { background: var(--ink); color: var(--bone); padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
  .nav-cta .btn:hover { background: var(--wa); color: #fff; }

  /* ── SPLIT ENTRY ────────────────────────────────────── */
  .split { display: flex; min-height: calc(100vh - 92px); width: 100%; }
  .half { position: relative; flex: 1 1 50%; overflow: hidden; transition: flex .6s cubic-bezier(.65,.05,.36,1); display: flex; flex-direction: column; }
  .half-fab { background: #14151a; }
  .half-obr { background: #0d2117; }
  /* foto revelada al hover */
  .half .reveal { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
  .half .reveal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s ease; }
  .half .reveal::after { content: ''; position: absolute; inset: 0; }
  .half-fab .reveal::after { background: linear-gradient(180deg, rgba(20,21,26,0.72), rgba(20,21,26,0.9)); }
  .half-obr .reveal::after { background: linear-gradient(180deg, rgba(13,33,23,0.72), rgba(13,33,23,0.9)); }
  .half:hover .reveal { opacity: 1; }
  .half:hover .reveal img { transform: scale(1.0); }
  .half .ghost { position: absolute; right: 4%; bottom: -6%; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 34vh; line-height: 1; color: rgba(255,255,255,0.035); z-index: 1; pointer-events: none; user-select: none; transition: color .5s; }
  .half:hover .ghost { color: rgba(255,255,255,0.07); }
  .half .content { position: relative; z-index: 2; flex: 1; padding: 56px; color: #fff; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
  .half .kicker { display: flex; align-items: center; gap: 12px; color: var(--green); }
  .half .kicker::before { content: ''; width: 34px; height: 2px; background: var(--green); }
  .half h2 { font-size: clamp(34px, 4.2vw, 68px); text-transform: uppercase; }
  .half h2 small { display: block; font-family: 'Archivo', sans-serif; font-weight: 500; font-style: italic; font-size: .32em; letter-spacing: -0.01em; text-transform: none; color: rgba(255,255,255,0.7); margin-top: 8px; }
  .half .desc { font-size: 15.5px; line-height: 1.6; max-width: 460px; color: rgba(255,255,255,0.8); }
  .half .tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
  .half .tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding: 6px 12px; border: 1px solid var(--hair-d); border-radius: 999px; background: rgba(255,255,255,0.04); }
  .half .enter { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; align-self: flex-start; padding: 14px 22px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; transition: background .25s, color .25s, border-color .25s; }
  .half .enter svg { transition: transform .25s; }
  .half:hover .enter { background: #fff; color: var(--black); border-color: #fff; }
  .half:hover .enter svg { transform: translateX(5px); }
  /* expand on hover (desktop) */
  @media (min-width: 901px) {
    .split:hover .half { flex: 1 1 44%; }
    .split .half:hover { flex: 1 1 56%; }
  }
  .split-seam { width: 1px; background: rgba(255,255,255,0.12); z-index: 3; }

  /* ── DIVISION SECTIONS ──────────────────────────────── */
  .div-sec { padding: 96px 0; border-bottom: 1px solid var(--hair); }
  .div-obr { background: var(--black); color: #fff; border-bottom: none; }
  .div-head { margin-bottom: 48px; max-width: 860px; }
  .div-head .kick-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .div-head .num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px; }
  .div-head .kick-row::after { content: ''; flex: 1; height: 1px; }
  .div-fab .div-head .kick-row::after { background: var(--hair); }
  .div-obr .div-head .kick-row::after { background: var(--hair-d); }
  .div-head .kick { opacity: .6; }
  .div-fab .div-head .num { color: var(--green-deep); }
  .div-obr .div-head .num { color: var(--green); }
  .div-head .kick { margin-bottom: 14px; opacity: .6; }
  .div-head h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 56px); text-transform: uppercase; letter-spacing: -0.025em; line-height: 1; margin-bottom: 18px; }
  .div-fab .div-head h3 .g { color: var(--green-deep); }
  .div-obr .div-head h3 .g { color: var(--green); }
  .div-head .lede { font-size: 16px; line-height: 1.65; }
  .div-fab .div-head .lede { color: rgba(0,0,0,0.7); }
  .div-obr .div-head .lede { color: rgba(255,255,255,0.72); }

  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
  .card { border-radius: 8px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s, border-color .2s; }
  .div-fab .card { background: var(--paper); border: 1px solid var(--hair); }
  .div-fab .card:hover { border-color: var(--green-deep); transform: translateY(-2px); }
  .div-obr .card { background: #141414; border: 1px solid var(--hair-d); }
  .div-obr .card:hover { border-color: var(--green); transform: translateY(-2px); }
  .card .ico { width: 38px; height: 38px; }
  .div-fab .card .ico { color: var(--green-deep); }
  .div-obr .card .ico { color: var(--green); }
  .card h4 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }
  .card p { font-size: 13.5px; opacity: .72; }

  .div-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 44px; }
  .div-gallery .gi { position: relative; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; }
  .div-gallery .gi.wide { grid-column: span 2; aspect-ratio: 2/1; }
  .div-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
  .div-gallery .gi:hover img { transform: scale(1.05); }

  .div-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px; border-radius: 10px; }
  .div-fab .div-cta { background: var(--black); color: #fff; }
  .div-obr .div-cta { background: #141414; border: 1px solid var(--hair-d); }
  .div-cta h5 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.015em; }

  /* ── Tabla de capacidades (Fabricaciones) ── */
  .cap-table { border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--paper); margin-bottom: 40px; }
  .cap-hrow, .cap-row { display: grid; grid-template-columns: 56px 1.2fr 2fr 130px 110px; align-items: center; padding: 14px 24px; }
  .cap-hrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--hair); }
  .cap-row { border-bottom: 1px solid var(--hair); font-size: 14px; transition: background .2s; }
  .cap-row:last-child { border-bottom: none; }
  .cap-row:hover { background: rgba(28,122,74,0.04); }
  .cap-row .idx { font-family: var(--mono); font-size: 11px; opacity: .45; }
  .cap-row .name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-transform: uppercase; }
  .cap-row .desc { font-size: 13px; opacity: .65; padding-right: 16px; }
  .cap-row .max { font-family: var(--mono); font-size: 12px; color: var(--green-deep); font-weight: 500; }
  .cap-row .tol { font-family: var(--mono); font-size: 12px; opacity: .55; }

  /* ── Antecedentes (casos) ── */
  .antecedentes-h { display: flex; align-items: baseline; justify-content: space-between; margin: 48px 0 20px; }
  .antecedentes-h h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: -0.02em; }
  .antecedentes-h span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
  .caso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 44px; }
  .caso { border-radius: 8px; overflow: hidden; display: grid; grid-template-rows: 220px auto; transition: transform .15s, border-color .2s; }
  .div-fab .caso { background: var(--paper); border: 1px solid var(--hair); }
  .div-fab .caso:hover { border-color: var(--green-deep); transform: translateY(-2px); }
  .div-obr .caso { background: rgba(255,255,255,0.04); border: 1px solid var(--hair-d); }
  .div-obr .caso:hover { border-color: var(--green); transform: translateY(-2px); }
  .caso .cph { overflow: hidden; }
  .caso .cph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
  .caso:hover .cph img { transform: scale(1.05); }
  .caso .cinfo { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
  .caso .crow { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
  .div-fab .caso .crow { color: var(--green-deep); }
  .div-obr .caso .crow { color: var(--green); }
  .caso .crow .yr { opacity: .5; color: inherit; }
  .caso h5 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }
  .caso p { font-size: 13px; opacity: .7; line-height: 1.55; }
  .div-cta p { font-size: 13px; opacity: .7; margin-top: 4px; }
  .btn-wa { display: inline-flex; align-items: center; gap: 10px; background: var(--wa); color: #fff; padding: 15px 24px; border-radius: 999px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; transition: background .2s, transform .15s; }
  .btn-wa:hover { background: #17663d; transform: translateY(-1px); }
  .btn-wa svg { fill: currentColor; }

  /* ── STRIP ──────────────────────────────────────────── */
  .strip { background: var(--bone); padding: 40px 0; border-bottom: 1px solid var(--hair); }
  .strip-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .strip .s { display: flex; flex-direction: column; }
  .strip .s .n { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; }
  .strip .s .n sup { font-size: .4em; color: var(--green-deep); }
  .strip .s .l { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

  /* ── FOOTER ─────────────────────────────────────────── */
  footer { background: var(--black); color: #fff; padding: 0 0 32px; overflow: hidden; }
  .foot-wm-wrap { padding: 56px 0 32px; }
  .foot-wm { width: 96%; margin: 0 auto; opacity: .16; display: block; height: auto; filter: brightness(0) invert(1); }
  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.9fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--hair-d); }
  footer img { height: 26px; filter: brightness(0) invert(1); margin-bottom: 16px; }
  footer .fdesc { font-size: 13px; opacity: .6; max-width: 320px; line-height: 1.6; }
  .fsocial { display: flex; gap: 18px; align-items: center; }
  .fsocial a { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); transition: color .2s; margin: 0; filter: none; }
  .fsocial a:hover { color: var(--green); }
  .fsocial a[aria-label="Instagram"]:hover { color: #E1306C; }
  .fsocial a[aria-label="Facebook"]:hover { color: #1877F2; }
  .fsocial a[aria-label="LinkedIn"]:hover { color: #0A66C2; }
  .fsocial svg { width: 20px; height: 20px; filter: none; margin: 0; display: block; }
  footer h6 { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; margin-bottom: 14px; }
  footer .fcol a, footer .fcol span { display: block; font-size: 13px; opacity: .8; margin-bottom: 8px; }
  footer .fcol a:hover { opacity: 1; color: var(--green); }
  .foot-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--mono); font-size: 11px; opacity: .5; flex-wrap: wrap; gap: 10px; }

  .wsp { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 54px; height: 54px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(28,122,74,0.4); }
  .wsp svg { fill: currentColor; }

  /* ── CLIENTES ─────────────────────────────────── */
  .clientes-sec { background: var(--bone); padding: 32px; border-top: 1px solid var(--hair); }
  .clientes-sec .wrap-cli { max-width: 1200px; margin: 0 auto; }
  .cli-label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; margin-bottom: 16px; display: flex; justify-content: space-between; }
  .cli-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
  .cli-box { background: var(--bone); padding: 20px 12px; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: rgba(0,0,0,0.6); transition: background .25s, color .25s; }
  .cli-box:hover { background: var(--ink); color: var(--green); }

  /* ── CONTACTO ─────────────────────────────────────── */
  .contacto { background: var(--black); color: #fff; padding: 96px 0; border-top: 1px solid var(--hair-d); }
  .contacto-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
  .contacto h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; margin: 16px 0 36px; }
  .contacto h3 .g { color: var(--green); }
  .contact-map { margin-top: 1px; border: 1px solid var(--hair-d); background: #111; }
  .contact-map iframe { display: block; width: 100%; height: 260px; border: 0; filter: grayscale(0.4) contrast(1.05); }
  .contact-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hair-d); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
  .contact-map-bar span { color: rgba(255,255,255,0.55); }
  .contact-map-bar a { color: var(--green); text-decoration: none; white-space: nowrap; }
  .contact-map-bar a:hover { text-decoration: underline; }
  .contact-data { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair-d); border: 1px solid var(--hair-d); }
  .cd { background: var(--black); padding: 20px; }
  .cd .l { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; margin-bottom: 8px; }
  .cd .v { font-size: 13.5px; line-height: 1.6; }
  .cd .v a:hover { color: var(--green); }
  .form-card { background: var(--bone); color: var(--ink); border-radius: 10px; padding: 32px; }
  .form-card h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: -0.015em; margin-bottom: 4px; }
  .form-card .sub { font-size: 13px; opacity: .65; margin-bottom: 22px; }
  .form-card .sub b { color: var(--green-deep); }
  .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .f { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
  .f label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
  .f input, .f select, .f textarea { padding: 12px 14px; background: var(--paper); border: 1px solid var(--hair); border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--ink); }
  .f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--green-deep); }
  .f textarea { resize: none; min-height: 64px; }
  .form-card button { width: 100%; margin-top: 8px; padding: 16px; background: var(--wa); color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .2s; font-family: inherit; }
  .form-card button:hover { background: #17663d; }
  .form-card .form-note { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; opacity: .5; margin-top: 12px; text-align: center; line-height: 1.5; }
  .file-add { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px dashed var(--hair); border-radius: 8px; background: var(--paper); cursor: pointer; transition: border-color .2s, color .2s; color: var(--green-deep); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; overflow: hidden; }
  .file-add:hover { border-color: var(--green-deep); }
  .file-add input { display: none; }
  .file-add.has-file { width: auto; padding: 0 14px; font-size: 12px; font-family: var(--mono); font-weight: 500; border-style: solid; border-color: var(--green-deep); }

  @media (max-width: 900px) {
    .split { flex-direction: column; min-height: auto; }
    .half { flex: none; }
    .half .content { padding: 48px 28px; min-height: 62vh; }
    .half .ghost { font-size: 22vh; }
    .split-seam { display: none; }
    .div-head { margin-bottom: 32px; }
    .cards { grid-template-columns: 1fr; }
    .cap-hrow { display: none; }
    .cap-row { grid-template-columns: 40px 1fr 90px; }
    .cap-row .desc, .cap-row .tol { display: none; }
    .caso-grid { grid-template-columns: 1fr; }
    .cli-grid { grid-template-columns: repeat(4, 1fr); }
    .contacto-in { grid-template-columns: 1fr; gap: 36px; }
    .frow { grid-template-columns: 1fr; }
    .div-gallery { grid-template-columns: 1fr 1fr; }
    .div-gallery .gi.wide { grid-column: span 2; }
    .foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .nav-menu { display: none; }
    .nav-cta .phone { display: none; }
    .nav-social { display: none; }
    .nav-sep { display: none; }
  }

  /* ── caso clickable (abre modal) ── */
  .caso[data-case] { cursor: pointer; outline: none; }
  .caso[data-case]:focus-visible { box-shadow: 0 0 0 3px var(--green); }
  .caso[data-case] .cinfo::after { content: "Ver caso ↗"; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; opacity: .8; transition: gap .2s; }
  .div-fab .caso[data-case] .cinfo::after { color: var(--green-deep); }
  .div-obr .caso[data-case] .cinfo::after { color: var(--green); }

  /* ===== CASE MODAL — placa-style overlay ===== */
  .case-modal { position: fixed; inset: 0; z-index: 200; display: none; }
  .case-modal[aria-hidden="false"] { display: block; }
  .case-modal .cm-scrim {
    position: absolute; inset: 0; background: rgba(10,10,10,0.78);
    backdrop-filter: blur(6px); animation: cmFade .35s ease;
  }
  @keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
  .case-modal .cm-shell {
    position: absolute; inset: 0; overflow-y: auto;
    padding: 32px 32px 80px;
    animation: cmRise .45s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes cmRise { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .case-modal .cm-frame {
    max-width: 1280px; margin: 0 auto; position: relative;
    background: var(--black); color: #fff; border-radius: 6px;
    overflow: hidden;
    /* Recortado de esquina superior derecha — estilo placa Ferrari */
    clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
  }
  .case-modal .cm-close {
    position: fixed; top: 24px; right: 24px; z-index: 5;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--green); color: #0f3a23; border: none;
    display: grid; place-items: center; font-size: 22px; font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    transition: transform .25s;
  }
  .case-modal .cm-close:hover { transform: rotate(90deg) scale(1.05); }

  /* Hero del caso */
  .cm-hero { position: relative; padding: 48px 48px 32px; min-height: 420px; display: flex; align-items: flex-end; }
  .cm-hero::before {
    content: ""; position: absolute; inset: 0; background: var(--cm-hero-bg) center/cover no-repeat;
    opacity: .35; filter: saturate(0.85);
  }
  .cm-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.85) 100%);
  }
  .cm-hero-inner { position: relative; z-index: 2; max-width: 720px; }
  .cm-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: #0f3a23;
    padding: 8px 14px; border-radius: 6px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 18px;
  }
  .cm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
  .cm-title {
    font-family: 'Archivo', sans-serif; font-weight: 800;
    font-size: clamp(40px, 6vw, 84px); line-height: 0.94; letter-spacing: -0.035em;
    text-transform: uppercase; color: var(--green);
  }
  .cm-subtitle {
    margin-top: 18px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.85);
    max-width: 580px;
  }

  /* Meta strip */
  .cm-meta {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
  }
  .cm-meta > div { padding: 22px 28px; border-right: 1px solid rgba(255,255,255,0.08); }
  .cm-meta > div:last-child { border-right: none; }
  .cm-meta .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
  .cm-meta .val { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
  .cm-meta .val .g { color: var(--green); }

  /* Body con texto y galería */
  .cm-body { padding: 48px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
  .cm-body-l h3 {
    font-family: 'Archivo', sans-serif; font-weight: 800;
    font-size: 28px; line-height: 1.1; letter-spacing: -0.02em;
    text-transform: uppercase; margin-bottom: 18px;
  }
  .cm-body-l h3 .g { color: var(--green); }
  .cm-body-l p {
    font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.78);
    margin-bottom: 14px;
  }
  .cm-features { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .cm-features .feat {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
    background: rgba(255,255,255,0.02);
  }
  .cm-features .feat .ico {
    width: 32px; height: 32px; border-radius: 6px; background: var(--green); color: #0f3a23;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .cm-features .feat b { display: block; font-size: 13px; margin-bottom: 2px; }
  .cm-features .feat span { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.4; }

  /* Galería */
  .cm-gallery {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
    grid-auto-rows: 140px;
  }
  .cm-gallery .g-item {
    overflow: hidden; border-radius: 3px; position: relative; cursor: zoom-in;
    background: #1a1a1a;
  }
  .cm-gallery .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
  .cm-gallery .g-item:hover img { transform: scale(1.06); }
  .cm-gallery .g-item.lg { grid-column: span 4; grid-row: span 2; }
  .cm-gallery .g-item.md { grid-column: span 2; grid-row: span 2; }
  .cm-gallery .g-item.sm { grid-column: span 2; grid-row: span 1; }
  .cm-gallery .g-item .cap {
    position: absolute; left: 8px; bottom: 6px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(0,0,0,0.7); color: var(--green); padding: 3px 6px; border-radius: 2px;
  }

  /* CTA del modal */
  .cm-cta {
    padding: 32px 48px; display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, transparent, rgba(121,222,168,0.05));
    flex-wrap: wrap; gap: 20px;
  }
  .cm-cta .l h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em; }
  .cm-cta .l p { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
  .cm-cta .r { display: flex; gap: 10px; flex-wrap: wrap; }
  .cm-cta .r a {
    padding: 14px 22px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px; transition: background .25s, color .25s;
  }
  .cm-cta .r a.primary { background: var(--green); color: #0f3a23; }
  .cm-cta .r a.primary:hover { background: #fff; }
  .cm-cta .r a.ghost { border: 1px solid rgba(255,255,255,0.2); color: #fff; }
  .cm-cta .r a.ghost:hover { background: rgba(255,255,255,0.08); }

  /* Lightbox single image */
  .cm-lightbox { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(0,0,0,0.95); }
  .cm-lightbox[aria-hidden="false"] { display: grid; place-items: center; padding: 40px; }
  .cm-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 4px; }
  .cm-lightbox .lb-close { position: absolute; top: 24px; right: 24px; background: var(--green); color: #0f3a23; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; }

  body.cm-locked { overflow: hidden; }

  @media (max-width: 880px) {
    .cm-body { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
    .cm-meta { grid-template-columns: repeat(2, 1fr); }
    .cm-meta > div:nth-child(2) { border-right: none; }
    .cm-hero { padding: 32px 24px; min-height: 320px; }
    .cm-cta { padding: 24px; }
    .case-modal .cm-shell { padding: 16px 16px 60px; }
    .case-modal .cm-frame { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
    .cm-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; }
    .cm-gallery .g-item.lg, .cm-gallery .g-item.md, .cm-gallery .g-item.sm { grid-column: span 2; grid-row: span 1; }
  }