/* Sección «AAPPs» (src/_includes/sections/gems.njk). Todos los selectores llevan prefijo .gm-.
   Lo global viene de site.css: .wrap, .button.primary/.outline, .text-link, .kicker, .section-heading, h2 em, .icon, .sr, foco visible.
   Estados que añade gems.js: .gm-section.gm-reduce, .gm-stack.is-open, [data-t].is-on, .gm-reveal.is-in, .gm-why-col.is-in, #gm-cmp[data-state]. */

.gm-section{--gm-plum:#67517f;--gm-muted:#56665b;--gm-sage-line:#c6d5ad;--gm-lime-line:#b5d283;--gm-lav-line:#d5cbe4;--gm-lav-deep:#dcd2ea;--gm-sage-deep:#d6e2bf;--gm-lime-deep:#c3dc95;--gm-shadow:0 18px 48px -35px #173f355c;--gm-frame:#1b1f22;--gm-pw:184px;--gm-gap-open:54px;--gm-gap-closed:12px;padding-block:60px 52px}
.gm-section ul,.gm-section ol{list-style:none;margin:0;padding:0}
.gm-section h4,.gm-section h5,.gm-section figure,.gm-section figcaption{margin:0}
.gm-section h4{font-weight:620;letter-spacing:-.035em;line-height:1.12}
.gm-section h2{text-wrap:balance}

/* 1 · Cabecera */
.gm-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px 64px;align-items:end}
.gm-head-copy>p{font-size:16px;line-height:1.65;color:var(--muted);max-width:60ch}
.gm-head-copy strong{color:var(--ink);font-weight:650}
.gm-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:13px;color:#4c6140}
.gm-legend li{display:inline-flex;align-items:center;gap:8px}
.gm-dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid transparent;flex-shrink:0}
.gm-dot-person{background:var(--lavender);border-color:#a897bd}
.gm-dot-agent{background:var(--lime);border-color:#8fb36a}

/* Bloques y piezas comunes */
.gm-block{margin-top:40px}
.gm-block-head-single{grid-template-columns:1fr}
.gm-block-head-single h3{max-width:none;font-size:clamp(24px,2.2vw,32px)}
.gm-block-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px 40px;align-items:end}
.gm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:650;color:var(--green);margin-bottom:12px;letter-spacing:.01em}
.gm-eyebrow::before{content:"";width:22px;height:1px;background:#9fb28c}
.gm-block-head h3{font-size:clamp(26px,2.5vw,36px);letter-spacing:-.04em;line-height:1.1;text-wrap:balance}
.gm-block-head h3 em,.gm-why h3 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.048em}
.gm-block-head>p{font-size:15px;line-height:1.7;color:var(--gm-muted);max-width:520px}
.gm-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;letter-spacing:.02em;color:#56694a;border:1px solid #c9d4be;border-radius:5px;padding:4px 8px;background:var(--white)}
.gm-tag .icon{width:13px;height:13px}
.gm-ctrl{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:9px 14px;border:1px solid #b8c7ae;border-radius:8px;font-size:12px;font-weight:650;color:var(--forest);background:var(--white);transition:background-color .2s ease}
.gm-ctrl .icon{width:16px;height:16px}
.gm-ctrl:hover{background:#eef2e4}
.gm-icon-back{transform:rotate(180deg)}

/* 2 · Qué hay dentro: pila de seis capas + panel de ejemplo */
.gm-inside-grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:40px;margin-top:24px;align-items:start}
.gm-stack-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;min-height:44px}
.gm-stack-tools p{font-size:12px;color:var(--gm-muted)}
.gm-stack-toggle{display:none}
.js .gm-stack-toggle{display:inline-flex}
.gm-stack{position:relative;--gm-gap:var(--gm-gap-open);--gm-base:0px;height:calc(var(--gm-pw) * .58 + 5 * var(--gm-gap-open) + 10px)}
.js .gm-stack:not(.is-open){--gm-gap:var(--gm-gap-closed);--gm-base:calc((5 * var(--gm-gap-open) - 5 * var(--gm-gap-closed)) / 2)}
.gm-layer{position:absolute;left:0;top:0;display:flex;align-items:center;gap:0;width:100%;padding:0;background:none;text-align:left;z-index:calc(10 - var(--i));transform:translateY(calc(var(--gm-base) + var(--i) * var(--gm-gap)));transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 60ms);border-radius:12px}
.gm-layer:disabled{cursor:default;opacity:1}
html:not(.js) .gm-layer{pointer-events:none}   /* sin JS la pila es una lista de capas, no botones */
.gm-plate{width:var(--gm-pw);height:calc(var(--gm-pw) * .58);flex-shrink:0;transition:transform .35s var(--ease);color:var(--forest);filter:drop-shadow(0 6px 10px #173f3514)}
.gm-plate use{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gm-plate .gm-top{stroke:#7f8e77;stroke-width:1;transition:stroke .25s ease,stroke-width .25s ease}
.gm-plate .gm-side{stroke:#7f8e77;stroke-width:1}
.gm-plate .gm-chip{fill:var(--white);stroke:#9aa78f;stroke-width:1}
.gm-l-person .gm-top{fill:var(--lavender)}.gm-l-person .gm-side-l{fill:#cfc4de}.gm-l-person .gm-side-r{fill:var(--gm-lav-deep)}
.gm-l-know .gm-top{fill:#e2d9ee}.gm-l-know .gm-side-l{fill:#c5b8d7}.gm-l-know .gm-side-r{fill:#d3c8e2}
.gm-l-agent .gm-top{fill:var(--sage)}.gm-l-agent .gm-side-l{fill:#c2d2a6}.gm-l-agent .gm-side-r{fill:var(--gm-sage-deep)}
.gm-l-lime .gm-top{fill:var(--lime)}.gm-l-lime .gm-side-l{fill:#b3d07f}.gm-l-lime .gm-side-r{fill:var(--gm-lime-deep)}
.gm-l-split .gm-top-l{fill:var(--lavender)}.gm-l-split .gm-top-r{fill:var(--sage)}.gm-l-split .gm-side-l{fill:#cfc4de}.gm-l-split .gm-side-r{fill:var(--gm-sage-deep)}
.gm-layer:not(:disabled):hover .gm-plate,.gm-layer:focus-visible .gm-plate{transform:translateY(-4px)}
.gm-layer[aria-selected="true"] .gm-top{stroke:var(--forest);stroke-width:2.2}
.gm-layer-text{display:flex;align-items:center;min-width:0;flex:1;opacity:1;transition:opacity .5s var(--ease) .45s}
.gm-layer-text::before{content:"";width:26px;height:1px;background:#9aa78f;flex-shrink:0;margin-right:12px}
.gm-layer-text span{display:block;min-width:0}
.gm-layer-text strong{display:block;font-size:14px;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.gm-layer-text small{display:block;font-size:12px;color:var(--gm-muted);margin-top:3px;line-height:1.35}
.js .gm-stack:not(.is-open) .gm-layer-text{opacity:0;transition-delay:0s}
.gm-layer[aria-selected="true"] .gm-layer-text::before{background:var(--forest);height:2px}
.gm-layer[aria-selected="true"] .gm-layer-text strong{color:var(--forest);text-decoration:underline;text-decoration-color:#9fb28c;text-underline-offset:4px}

.gm-panel{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px 20px;min-height:calc(var(--gm-pw) * .58 + 5 * var(--gm-gap-open) + 68px);box-shadow:var(--gm-shadow);min-width:0}
.gm-panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.gm-panel-top small{font-size:12px;color:var(--gm-muted)}
.gm-panel-nav{display:none;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:16px}
.js .gm-panel-nav{display:flex}
.gm-panel-nav .gm-ctrl{min-width:0}
.gm-panel-nav small{font-size:12px;color:var(--gm-muted);text-align:center}
.gm-ex h4{font-size:22px;letter-spacing:-.035em}
.gm-section [tabindex]:focus-visible{outline:3px solid #9470ac;outline-offset:5px}
.gm-ex-lead{font-size:14px;line-height:1.55;color:var(--gm-muted);margin-top:6px;max-width:560px}
.gm-ex-body{margin-top:14px}
.gm-ex-note{font-size:12px;color:var(--gm-muted);margin-top:12px;line-height:1.5}
.gm-panel .gm-ex+.gm-ex{margin-top:28px;padding-top:24px;border-top:1px dashed #c9d4be}
.js .gm-panel .gm-ex+.gm-ex{margin-top:0;padding-top:0;border-top:0}
.gm-ex-role{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border-radius:5px;margin-bottom:10px}
.gm-ex-role .icon{width:13px;height:13px}
.gm-role-person{background:var(--lavender);color:var(--gm-plum)}
.gm-role-agent{background:var(--lime);color:#3d5a24}
.gm-role-tool{background:var(--sage);color:#3f5a34}
.gm-role-know{background:#e2d9ee;color:var(--gm-plum)}
/* Ejemplo 1 · interfaz */
.gm-mini{border:1px solid #cfd8c5;border-radius:12px;background:var(--paper);overflow:hidden}
.gm-mini-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;font-size:12px;color:var(--gm-muted);border-bottom:1px solid #dfe5d6;background:#f1f4ea}
.gm-mini-bar strong{color:var(--forest);font-weight:650}
.gm-mini-body{padding:12px;display:grid;gap:8px}
.gm-next{background:var(--lavender);border:1px solid var(--gm-lav-line);border-radius:9px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;color:#3f3350}
.gm-next .icon{width:20px;height:20px;color:var(--gm-plum)}
.gm-next span{font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:var(--gm-plum);display:block}
.gm-next strong{font-size:14px;line-height:1.35;font-weight:600;display:block;margin-top:2px}
.gm-agentsrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--sage);border:1px solid var(--gm-sage-line);border-radius:9px;padding:8px 12px;font-size:12.5px;color:#34513a}
.gm-agentsrow .icon{width:18px;height:18px;color:#3f5a34}
.gm-agentsrow b{font-weight:650}
.gm-agentsrow em{font-style:normal;font-size:12px;font-weight:650;background:var(--lime);border-radius:5px;padding:3px 7px;color:#3d5a24;white-space:nowrap}
.gm-mini-foot{font-size:12px;color:var(--gm-muted);padding:0 2px}
/* Ejemplo 2 · tareas */
.gm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gm-two>div{border-radius:12px;padding:14px 16px;border:1px solid}
.gm-two .gm-who-person{background:var(--lavender);border-color:var(--gm-lav-line)}
.gm-two .gm-who-agent{background:var(--sage);border-color:var(--gm-sage-line)}
.gm-two h5{margin:0 0 8px;font-size:12px;display:flex;align-items:center;gap:8px;font-weight:650}
.gm-two h5 .icon{width:16px;height:16px}
.gm-who-person h5{color:var(--gm-plum)}.gm-who-agent h5{color:#3f5a34}
.gm-two li{font-size:12.5px;line-height:1.45;padding:6px 0;border-top:1px solid #ffffff8c;display:flex;gap:8px}
.gm-two li::before{content:"·";font-weight:700}
/* Ejemplo 3 · fases */
.gm-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gm-phase{border:1px solid var(--gm-sage-line);background:var(--white);border-radius:10px;padding:12px 12px 10px;min-width:0}
.gm-phase b{display:block;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--green);font-weight:650}
.gm-phase strong{display:block;font-size:15px;letter-spacing:-.02em;margin-top:4px}
.gm-phase small{display:block;font-size:12px;color:var(--gm-muted);margin-top:8px;line-height:1.4}
.gm-deliv{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;color:#3f5a34;font-weight:650}
.gm-deliv .icon{width:14px;height:14px}
/* Ejemplo 4 · skills */
.gm-chips{display:flex;flex-wrap:wrap;gap:8px}
.gm-chips li{border:1px solid var(--gm-lime-line);background:var(--lime);border-radius:6px;padding:6px 10px;font-size:12px;color:#33502a;display:inline-flex;align-items:center;gap:7px;line-height:1.3}
.gm-chips li .icon{width:14px;height:14px}
/* Ejemplo 5 · automatismos */
.gm-autos li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5}
.gm-autos li:first-child{border-top:0;padding-top:0}
.gm-autos i{width:34px;height:34px;border-radius:9px;background:var(--lime);border:1px solid var(--gm-lime-line);display:grid;place-items:center;color:#3d5a24}
.gm-autos i .icon{width:18px;height:18px}
.gm-autos b{display:block;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:#4a6539;font-weight:650;margin-bottom:2px}
/* Ejemplo 6 · conocimiento */
.gm-know{background:#f3eff8;border:1px solid var(--gm-lav-line);border-radius:12px;padding:16px 18px;font-family:Georgia,"Times New Roman",serif;color:#3a2f4a}
.gm-know li{padding:7px 0;border-top:1px solid #ffffffa8;font-size:14px;line-height:1.5;display:grid;grid-template-columns:18px 1fr;gap:10px}
.gm-know li:first-child{border-top:0;padding-top:0}
.gm-know li .icon{width:16px;height:16px;color:var(--gm-plum);margin-top:3px}
.gm-know-note{font-family:"Aptos","Segoe UI",Arial,sans-serif;font-size:12px;color:var(--gm-plum);margin-top:10px;display:flex;gap:8px;align-items:center}
.gm-know-note .icon{width:15px;height:15px}

/* 3 · Catálogo: AI Advisor a todo el ancho; Web Studio y Ciberseguridad a dos columnas, cada una con el copy a la izquierda y el loop a la derecha */
.gm-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.gm-card{position:relative;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--gm-shadow);transition:border-color .3s ease,transform .8s var(--ease)}
.gm-card:hover{border-color:#b9c9ad}
.gm-card-featured{grid-column:1/-1;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.gm-copy{padding:22px 16px 22px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.gm-card-featured .gm-copy{padding:30px 40px 30px 44px}
.gm-cat{font-size:12px;font-weight:650;color:#4e663b;letter-spacing:.04em;text-transform:uppercase}
.gm-card h3{font-size:28px;letter-spacing:-.04em;line-height:1.07;margin-top:8px}
.gm-card-featured h3{font-size:42px;letter-spacing:-.05em;margin-top:10px}
.gm-promise{font-size:14px;line-height:1.55;color:#4c6140;margin-top:10px;max-width:46ch}
.gm-card-featured .gm-promise{font-size:16px;line-height:1.55;margin-top:12px;max-width:60ch}
.gm-list-title{margin-top:16px;font-size:12.5px;font-weight:650;color:var(--forest)}
.gm-card-featured .gm-list-title{margin-top:18px;font-size:13px}
.gm-list{margin-top:8px;display:grid;grid-template-columns:1fr;gap:6px;width:100%}
.gm-card-featured .gm-list{margin-top:10px;gap:6px}
.gm-list li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.25}
.gm-card-featured .gm-list li{font-size:14px;gap:10px;line-height:1.2}
.gm-ico{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.gm-ico .icon{width:16px;height:16px}
.gm-card-featured .gm-ico{width:30px;height:30px;border-radius:9px}
.gm-card-featured .gm-ico .icon{width:18px;height:18px}
.gm-ico-person{background:var(--lavender);color:var(--gm-plum)}
.gm-ico-agent{background:var(--lime);color:var(--green)}
.gm-cta{margin-top:18px}
.gm-card-featured .gm-cta{margin-top:20px}
/* Marco oscuro para el loop real (las demos son oscuras y la web es clara) */
.gm-figure{display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;background:#eef2e4;border-left:1px solid var(--line);justify-content:center;min-width:0}
.gm-card-featured .gm-figure{gap:12px;padding:24px 26px 20px}
.gm-media{display:block;width:100%;max-width:100%;background:var(--gm-frame);color:#c9d1c8;border-radius:12px;padding:0 6px 6px;box-shadow:0 22px 44px -28px #0b1f19b3,0 0 0 1px #0000001a;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.gm-media-bar{display:flex;align-items:center;gap:10px;height:32px;padding:0 4px 0 8px;font-size:12px;font-weight:600;white-space:nowrap}
.gm-media-dots{display:inline-flex;gap:5px;flex-shrink:0}
.gm-media-dots i{width:9px;height:9px;border-radius:50%;background:#3d4549}
.gm-media-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gm-media-open{display:inline-flex;align-items:center;gap:6px;color:var(--lime);font-weight:650;flex-shrink:0;transition:transform .3s var(--ease)}
.gm-media-open .icon{width:13px;height:13px}
.gm-media picture,.gm-media img{display:block;width:100%}
.gm-media img{height:auto;aspect-ratio:640/400;border-radius:8px;background:#23282c;object-fit:cover}
.gm-all{margin:24px 0 0}
.gm-all .text-link{min-height:44px;align-items:center;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-color:#a4b294;text-decoration-thickness:1px;text-underline-offset:6px}
.gm-all .text-link .icon{text-decoration:none}
.gm-figure-foot{font-size:12px;line-height:1.5;color:#4d5f43}
.gm-card-featured .gm-figure-foot{font-size:12px}
.gm-figure-foot.has-loop-ctl{display:flex;align-items:center;justify-content:space-between;gap:2px 14px;min-height:44px}
.gm-loop-ctl{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-width:44px;min-height:44px;padding:0 13px 0 11px;border:1px solid #b8c7ae;border-radius:8px;background:var(--white);color:var(--forest);font-size:12px;font-weight:650;line-height:1;transition:background-color .2s ease}
.gm-loop-ctl .icon{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.gm-loop-ctl:hover{background:var(--sage)}}
.gm-section.gm-reduce .gm-loop-ctl{transition:none}
/* Pie del catálogo */
.gm-foot{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:16px}
.gm-note{font-size:12px;line-height:1.7;color:#596a4e;max-width:520px}
.gm-wealth{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:650;color:#556849}
.gm-wealth .icon{width:16px;height:16px}
.gm-wealth small{display:block;flex-basis:100%;font-size:12px;font-weight:500;color:#56694a}

/* 4 · Franja oscura (<section>): comparación compacta + tres argumentos */
.gm-why{margin-top:40px;background:var(--forest);color:#f6f8ee;border-radius:var(--radius);padding:42px 48px 44px;overflow:hidden;transition:transform .8s var(--ease)}
.gm-why .kicker{color:#b9cd9e}
.gm-why-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end}
.gm-why h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1.1;max-width:22ch;text-wrap:balance}
.gm-why h3 em{color:#d9e6c4}
.gm-why-tools{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.gm-why-tools>p{font-size:14px;line-height:1.6;color:#c9d6c6;max-width:64ch}
.gm-controls{display:none;flex-wrap:wrap;gap:8px;align-items:center}
.js .gm-controls{display:flex}
.gm-why .gm-ctrl{background:transparent;border-color:#4d6f62;color:#f6f8ee;padding-inline:12px}
.gm-why .gm-ctrl:hover{background:#264f43}
.gm-controls-note{font-size:12px;color:#a9bba6}
.gm-reduced-note{display:none;font-size:12px;color:#a9bba6}
.gm-why :focus-visible{outline-color:#c9b9dc}
.gm-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.gm-col{border-radius:16px;padding:18px 20px;border:1px solid;min-width:0;display:flex;flex-direction:column;background:#1f4a3f}
.gm-col-scratch{border-color:#5b5075}
.gm-col-ready{border-color:#4f7a48}
.gm-col header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid #2f5748;margin-bottom:12px}
.gm-col-kicker{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.gm-col-scratch .gm-col-kicker{color:#cdbfe0}.gm-col-ready .gm-col-kicker{color:#b9d98f}
.gm-col h4{font-size:19px;letter-spacing:-.03em;line-height:1.15}
.gm-pieces{display:grid;gap:5px}
.gm-pieces li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:4px 10px;border-radius:8px;font-size:13px;line-height:1.3;min-height:32px;background:#173f35;border:1px solid #2f5748;color:#e8eee2}
.gm-todo .gm-box{width:16px;height:16px;border:1.5px solid #b3a6c6;border-radius:4px;justify-self:center}
.gm-todo em,.gm-done em{font-style:normal;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;border-radius:5px;padding:3px 7px;white-space:nowrap}
.gm-todo em{color:var(--gm-plum);background:var(--lavender)}
.gm-done .gm-tick{width:18px;height:18px;border-radius:5px;background:var(--lime);display:grid;place-items:center;color:#2f4a1f;justify-self:center}
.gm-done .gm-tick .icon{width:12px;height:12px;stroke-width:2.2}
.gm-done em{color:#2f4a1f;background:var(--lime)}
.gm-estimate{margin-top:auto;padding-top:12px;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;font-size:12.5px;line-height:1.45;color:#e8eee2}
.gm-estimate i{width:36px;height:36px;border-radius:10px;background:var(--lavender);display:grid;place-items:center;color:var(--gm-plum)}
.gm-estimate i .icon{width:19px;height:19px}
.gm-estimate strong{display:block;font-size:14px;letter-spacing:-.01em;color:#e6dcf3}
.gm-estimate small{display:block;font-size:12px;color:#a9bba6;margin-top:2px}
.gm-col-next{margin-top:auto;padding-top:12px;font-size:12.5px;line-height:1.5;color:#a9bba6}
/* Secuencia de la comparación: solo opacidad y transform; el reloj de gems.js cambia clases en cada fase */
/* Antes de aparecer, cada pieza pendiente está oculta (opacidad 0), no atenuada: ningún texto se queda a medio contraste */
.js .gm-cmp [data-t]{opacity:0;transform:translateY(6px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .gm-cmp [data-t].is-on{opacity:1;transform:none}
/* Tres argumentos */
.gm-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:24px;padding-top:24px;border-top:1px solid #2f5748}
.gm-why-col{min-width:0;display:grid;grid-template-columns:54px minmax(0,1fr);gap:6px 14px;align-items:start;align-content:start}
.gm-why-icon{position:relative;width:54px;height:54px;border-radius:14px;background:#1f4a3f;border:1px solid #2f5748;grid-row:1/span 3}
.gm-why-icon svg{position:absolute;top:3px;left:3px;width:46px;height:46px;overflow:visible}
.gm-why h4{font-size:18px;letter-spacing:-.03em;line-height:1.15;padding-top:6px;grid-column:2}
.gm-why-col p{font-size:13.5px;line-height:1.6;color:#c9d6c6;grid-column:2}
.gm-why-col p strong{color:#f6f8ee;font-weight:650}
.gm-why .gm-link{grid-column:2;justify-self:start;margin-top:6px;color:#f6f8ee;border-color:#7fa08e}
/* Iconos animados de la franja (una pasada al entrar en vista). Cada pieza que se mueve es un <span> superpuesto con su propio <svg> dentro:
   se anima el <span> (transform/opacity compuestos), no el SVG ni sus hijos, que fuerzan layout por frame (F14). Distancias en px reales (46 px = 64 unidades). */
.gm-ik{position:absolute;inset:0;display:block;transform-origin:center}
.gm-ik-badge{transform-origin:65% 24%}
.gm-ik-a{opacity:0}
.gm-ik-old{opacity:.45}
@keyframes gm-ik-p1{from{transform:translate(-13px,-13px);opacity:0}to{transform:none;opacity:1}}
@keyframes gm-ik-p2{from{transform:translate(13px,-13px);opacity:0}to{transform:none;opacity:1}}
@keyframes gm-ik-p3{from{transform:translate(-13px,13px);opacity:0}to{transform:none;opacity:1}}
@keyframes gm-ik-p4{from{transform:translate(13px,13px);opacity:0}to{transform:none;opacity:1}}
@keyframes gm-ik-out{0%,20%{transform:none;opacity:1}60%,100%{transform:translateY(-17px);opacity:0}}
@keyframes gm-ik-in{0%,50%{transform:translateY(17px);opacity:0}100%{transform:none;opacity:1}}
@keyframes gm-ik-card{0%,30%{transform:translateY(9px);opacity:0}80%,100%{transform:none;opacity:1}}
@keyframes gm-ik-badge{0%,70%{transform:scale(0);opacity:0}100%{transform:none;opacity:1}}
@keyframes gm-ik-fade{0%,30%{opacity:1}100%{opacity:.45}}
.js .gm-why-col.is-in .gm-ik{animation-duration:1.1s;animation-timing-function:var(--ease);animation-fill-mode:both}
.js .gm-why-col.is-in .gm-ik-p1{animation-name:gm-ik-p1}
.js .gm-why-col.is-in .gm-ik-p2{animation-name:gm-ik-p2;animation-delay:.15s}
.js .gm-why-col.is-in .gm-ik-p3{animation-name:gm-ik-p3;animation-delay:.3s}
.js .gm-why-col.is-in .gm-ik-p4{animation-name:gm-ik-p4;animation-delay:.45s}
.js .gm-why-col.is-in .gm-ik-a{animation-name:gm-ik-out;animation-duration:1.6s}
.js .gm-why-col.is-in .gm-ik-b{animation-name:gm-ik-in;animation-duration:1.6s}
.js .gm-why-col.is-in .gm-ik-old{animation-name:gm-ik-fade;animation-duration:1.6s}
.js .gm-why-col.is-in .gm-ik-card{animation-name:gm-ik-card;animation-duration:1.6s}
.js .gm-why-col.is-in .gm-ik-badge{animation-name:gm-ik-badge;animation-duration:1.8s}

/* Entradas al hacer scroll: solo desplazamiento (todo visible en reposo y en capturas a página completa) */
.js .gm-reveal:not(.is-in){transform:translateY(20px)}
.js .gm-catalog>.gm-card:nth-child(2){transition-delay:.08s}
.js .gm-catalog>.gm-card:nth-child(3){transition-delay:.16s}

/* Hover con puntero fino */
@media(hover:hover) and (pointer:fine){
  .gm-media:hover{transform:translateY(-3px);box-shadow:0 28px 48px -26px #0b1f19c0,0 0 0 1px #0000001a}
  .gm-media:hover .gm-media-open{transform:translateX(2px)}
}

/* Movimiento reducido: la clase la pone gems.js (preferencia inicial y en vivo, o ?reduce=1); la media query cubre el caso sin gems.js */
.gm-section.gm-reduce .gm-layer,.gm-section.gm-reduce .gm-plate,.gm-section.gm-reduce .gm-layer-text,.gm-section.gm-reduce .gm-card,.gm-section.gm-reduce .gm-media,.gm-section.gm-reduce .gm-media-open,.gm-section.gm-reduce .gm-why,.gm-section.gm-reduce .gm-ctrl,.gm-section.gm-reduce .gm-cmp [data-t]{transition:none}
.js .gm-section.gm-reduce .gm-stack{--gm-gap:var(--gm-gap-open);--gm-base:0px}
.js .gm-section.gm-reduce .gm-layer-text{opacity:1}
.gm-section.gm-reduce .gm-stack-toggle{display:none}
.js .gm-section.gm-reduce .gm-cmp [data-t]{opacity:1;transform:none}
.js .gm-section.gm-reduce .gm-controls{display:none}
.gm-section.gm-reduce .gm-reduced-note{display:block}
.gm-section.gm-reduce .gm-ik{animation:none!important}
.js .gm-section.gm-reduce .gm-reveal{transform:none}
@media(prefers-reduced-motion:reduce){
  .gm-layer,.gm-plate,.gm-layer-text,.gm-card,.gm-media,.gm-media-open,.gm-why,.gm-ctrl,.gm-cmp [data-t]{transition:none}
  .js .gm-stack{--gm-gap:var(--gm-gap-open);--gm-base:0px}
  .js .gm-layer-text{opacity:1}
  .gm-stack-toggle{display:none}
  .js .gm-cmp [data-t]{opacity:1;transform:none}
  .js .gm-controls{display:none}
  .gm-reduced-note{display:block}
  .gm-ik{animation:none!important}
  .js .gm-reveal{transform:none}
}

/* Responsivo (mismos cortes que site.css: 1100 / 800 / 600 / 360, más 900 para el catálogo) */
@media(max-width:1100px){
  .gm-section{--gm-pw:186px;--gm-gap-open:60px}
  .gm-inside-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px}
  .gm-panel{padding:20px}
  .gm-card-featured .gm-copy{padding:32px}
  .gm-card-featured .gm-figure{padding:24px}
  .gm-why{padding:44px 40px}
}
@media(max-width:900px){
  .gm-catalog{grid-template-columns:1fr;gap:20px}
  .gm-card,.gm-card-featured{grid-template-columns:1fr}
  .gm-figure,.gm-card-featured .gm-figure{order:-1;border-left:0;border-bottom:1px solid var(--line);padding:22px 24px 18px}
  .gm-copy,.gm-card-featured .gm-copy{padding:28px 30px 30px}
  .gm-card h3{font-size:30px}
  .gm-card-featured h3{font-size:36px}
  .gm-list,.gm-card-featured .gm-list{grid-template-columns:1fr 1fr;gap:8px 14px}
  .gm-list li{font-size:14px}
  .gm-cmp{grid-template-columns:1fr}
  .gm-why-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:800px){
  .gm-section{padding-block:76px 72px}
  .gm-block{margin-top:60px}
  .gm-head,.gm-block-head,.gm-why-head{grid-template-columns:1fr;gap:18px}
  .gm-inside-grid{grid-template-columns:1fr;gap:24px}
  .gm-stack{max-width:520px}
  .gm-foot{display:block}
  .gm-foot .gm-note{margin-bottom:18px}
  .gm-why{margin-top:60px}
}
@media(max-width:600px){
  .gm-section{--gm-pw:164px;--gm-gap-open:66px;padding-block:60px 56px}
  .gm-block{margin-top:54px}
  .gm-head-copy>p{font-size:15px;line-height:1.7}
  .gm-block-head h3{font-size:26px}
  .gm-block-head>p{font-size:14px}
  .gm-stack-tools{flex-direction:column;align-items:flex-start}
  .gm-layer-text::before{width:14px;margin-right:9px}
  .gm-layer-text strong{font-size:12.5px}
  .gm-layer-text small{font-size:12px}
  .gm-panel{padding:18px 16px 20px;min-height:0}
  .gm-ex h4{font-size:20px}
  .gm-panel-nav small{display:none}
  .gm-panel-nav .gm-ctrl{white-space:nowrap;padding-inline:12px}
  .gm-two{grid-template-columns:1fr}
  .gm-phases{grid-template-columns:1fr 1fr}
  .gm-copy,.gm-card-featured .gm-copy{padding:22px 20px 24px}
  .gm-figure,.gm-card-featured .gm-figure{padding:14px 14px 12px;gap:10px}
  .gm-card h3,.gm-card-featured h3{font-size:29px}
  .gm-promise,.gm-card-featured .gm-promise{font-size:14px}
  .gm-list,.gm-card-featured .gm-list{grid-template-columns:1fr;gap:7px}
  .gm-card-featured .gm-cta{width:100%}
  .gm-media-bar{font-size:12px}
  .gm-why{margin-top:40px;padding:34px 20px 32px;border-radius:16px}
  .gm-col{padding:18px 16px}
  .gm-controls-note{flex-basis:100%}
  .gm-why-grid{margin-top:26px;padding-top:24px;gap:22px}
}
@media(max-width:430px){
  .gm-media-name{display:none}
}
@media(max-width:360px){
  .gm-section{--gm-pw:134px;--gm-gap-open:58px}
  .gm-layer-text small{display:none}
  .gm-layer-text strong{font-size:12px}
  .gm-panel-nav .gm-ctrl{font-size:12px;padding-inline:9px;gap:5px}
  .gm-phases{grid-template-columns:1fr}
  .gm-agentsrow{grid-template-columns:auto 1fr}
  .gm-agentsrow em{grid-column:2;justify-self:start}
  .gm-next{grid-template-columns:1fr}
  .gm-next .icon{display:none}
  .gm-pieces li{grid-template-columns:18px 1fr;padding:7px 9px;font-size:12px}
  .gm-todo em,.gm-done em{display:none}
  .gm-copy,.gm-card-featured .gm-copy{padding:20px 16px 22px}
  .gm-figure,.gm-card-featured .gm-figure{padding:12px 10px 10px}
  .gm-media-name{display:none}
  .gm-why{padding:30px 16px 28px}
}

/* ===== Añadidos para partials/gem-card.njk (home y /soluciones/) ===== */
/* side="left": el loop pasa a la izquierda y las columnas se invierten */
.gm-card-flip{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.gm-card-flip.gm-card-featured{grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
.gm-card-flip .gm-figure{order:-1;border-left:0;border-right:1px solid var(--line)}
/* badge opcional del partial (data.badge): AAPP solo de demostración */
.gm-badge{display:inline-flex;align-items:center;margin-top:8px;font-size:12px;font-weight:650;letter-spacing:.02em;color:#56694a;border:1px solid #c9d4be;border-radius:5px;padding:3px 8px;background:var(--paper)}
@media(max-width:900px){
  .gm-card-flip,.gm-card-flip.gm-card-featured{grid-template-columns:1fr}
  .gm-card-flip .gm-figure{border-right:0}
}