/* Feature 6 composition, adapted to Faralion's existing visual system. */
.guarantee-intro { margin: -.75rem 0 1.5rem; color: var(--roca); font-size: 1rem; }
.guarantee-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem; margin-bottom: var(--s-xl); }
.guarantee-card { position: relative; grid-column: span 2; min-width: 0; overflow: hidden; isolation: isolate; border: 1px solid var(--piedra); border-radius: var(--radius-m); background: radial-gradient(ellipse at 50% 12%, rgba(78, 127, 99, .06), transparent 64%), rgba(244, 242, 237, .55); }
.guarantee-visual { position: relative; display: grid; place-items: center; height: 174px; margin-top: 1.25rem; }
.guarantee-orbit { position: relative; display: grid; place-items: center; width: 128px; height: 128px; border: 1px solid rgba(94, 99, 95, .24); border-radius: 50%; outline: 1px solid rgba(94, 99, 95, .14); outline-offset: 5px; color: var(--bosque); background: radial-gradient(circle, rgba(78, 127, 99, .11), transparent 72%); box-shadow: 0 0 44px rgba(78, 127, 99, .08); }
.guarantee-orbit--dashed { border: 3px dashed rgba(78, 127, 99, .22); }
.guarantee-orbit > svg { width: 78px; height: 78px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.signal-dot { fill: var(--bosque); stroke: var(--niebla); stroke-width: 1.5; }
.guarantee-copy { position: relative; z-index: 1; padding: .7rem 1.7rem 1.8rem; text-align: center; }
.guarantee-copy h3 { margin: 0 0 .75rem; font: 700 clamp(1rem, 1.4vw, 1.2rem)/1.3 "Montserrat", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.guarantee-copy p { max-width: 35ch; margin: 0 auto; color: var(--roca); font-size: .96rem; line-height: 1.55; text-wrap: pretty; }
.report-visual { display: block; }
.report-caption { position: absolute; top: .6rem; left: 1.7rem; display: flex; align-items: center; gap: .55rem; color: var(--roca); font-size: .88rem; }
.visual-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(78, 127, 99, .07); color: var(--bosque); }
.visual-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.guarantee-chart { position: absolute; left: 0; bottom: 0; width: 110%; height: 160px; }
.guarantee-chart-area { fill: url(#guarantee-chart-fill); }
.guarantee-chart-line { fill: none; stroke: var(--bosque); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.guarantee-card--wide { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; }
.guarantee-card--wide .guarantee-copy { padding: 2rem 0 2rem 1.8rem; text-align: left; }
.guarantee-card--wide .guarantee-copy p { margin: 0; }
.visual-icon--large { width: 46px; height: 46px; margin: 0 0 1.5rem; background: rgba(244, 242, 237, .45); border: 1px solid rgba(94, 99, 95, .28); outline: 1px solid rgba(94, 99, 95, .13); outline-offset: 3px; }
.visual-icon--large svg { width: 22px; height: 22px; }
.review-visual { position: relative; min-width: 0; overflow: hidden; mask-image: linear-gradient(to bottom, #1a1d1b 88%, transparent); }
.mini-dashboard { position: absolute; top: 2.7rem; left: 1.7rem; width: 350px; min-height: 256px; display: grid; grid-template-columns: 37px 1fr; padding: 4px; border: 1px solid rgba(94, 99, 95, .38); border-radius: 9px; background: #242925; box-shadow: 0 10px 28px rgba(26, 29, 27, .12); color: var(--niebla); transform: rotate(-2deg); transform-origin: left bottom; }
.mini-sidebar { display: flex; flex-direction: column; gap: 13px; padding: 8px 6px; border-right: 1px solid rgba(216, 211, 202, .14); }
.mini-sidebar b { font: 700 11px "Montserrat", sans-serif; }
.mini-sidebar i { width: 17px; height: 3px; border-radius: 2px; background: rgba(216, 211, 202, .32); }
.mini-dashboard-content { min-width: 0; padding: 8px; }
.mini-dashboard-head { display: flex; justify-content: space-between; padding-bottom: 10px; font-size: 8px; }
.mini-dashboard-head span { color: #abb5ad; font-size: 6px; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini-kpis > div { display: flex; flex-direction: column; gap: 5px; padding: 7px; border: 1px solid rgba(216, 211, 202, .15); border-radius: 4px; background: rgba(244, 242, 237, .04); }
.mini-kpis span { font-size: 6px; color: #abb5ad; }
.mini-kpis b { font: 700 9px "Montserrat", sans-serif; }
.mini-kpis i { width: 24px; height: 2px; background: var(--musgo); opacity: .6; }
.mini-chart-title { display: flex; justify-content: space-between; margin: 12px 0 2px; font-size: 7px; }
.mini-chart-title span { color: #abb5ad; font-size: 6px; }
.mini-dashboard-content > svg { display: block; width: 100%; height: 86px; }
.mini-chart-grid { fill: none; stroke: rgba(216, 211, 202, .12); stroke-width: .6; }
.mini-chart-area { fill: rgba(109, 143, 99, .14); }
.mini-chart-stroke { fill: none; stroke: #a9c2af; stroke-width: 1; }
.mini-table { display: grid; grid-template-columns: 1.5fr 1fr .7fr; align-items: center; gap: 7px 18px; padding-top: 9px; font-size: 6px; color: #b9c1bb; }
.mini-table i { height: 2px; background: rgba(216, 211, 202, .25); }
.mini-table i:nth-of-type(even) { width: 14px; background: rgba(109, 143, 99, .6); }
.globe-visual { position: relative; min-width: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(135deg, transparent, #1a1d1b 15%); }
.guarantee-globe, .globe-fallback { position: absolute; top: 18px; left: 0; width: 430px; height: 430px; max-width: none; }
.guarantee-globe { opacity: 0; transition: opacity .5s ease; }
.globe-visual.is-ready .guarantee-globe { opacity: 1; }
.globe-visual.is-ready .globe-fallback { visibility: hidden; }
.globe-fallback { padding: 20px; }
.globe-fallback svg { width: 100%; height: 100%; fill: rgba(78, 127, 99, .035); stroke: rgba(78, 127, 99, .25); stroke-width: .65; }
.guarantee-bento.is-motion-active .guarantee-chart-line { animation: guarantee-trace 2.1s var(--ease) both; }
@keyframes guarantee-trace { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }

/* The existing comparison grid stays in place; detail opens in a native dialog. */
.comparison .model-card { display: flex; flex-direction: column; min-height: 220px; padding-bottom: 1.4rem; }
.comparison .model-card .corner-mark { left: 2rem; right: auto; }
.comparison .model-card .corner-mark::before, .comparison .model-card .corner-mark::after { display: none; }
.comparison .model-card h3 { max-width: 24ch; min-height: 2.6em; margin-bottom: .75rem; text-wrap: balance; }
.comparison .model-card > p { max-width: 30ch; margin-bottom: 1rem; line-height: 1.5; }
.model-expand { position: absolute; top: .75rem; right: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--piedra); border-radius: 50%; background: rgba(244, 242, 237, .55); color: var(--bosque); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.model-expand span { font: 400 1.8rem/1 "Karla", sans-serif; transform: translateY(-1px); }
.model-expand:hover { border-color: var(--bosque); background: rgba(78, 127, 99, .07); }
.model-expand:focus-visible, .model-close:focus-visible { outline: 2px solid var(--bosque); outline-offset: 4px; }
.model-dialog { width: min(620px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid var(--piedra); border-radius: var(--radius-m); overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(ellipse at top right, rgba(78, 127, 99, .09), transparent 60%), var(--niebla); color: var(--basalto); box-shadow: var(--shadow-warm); }
.model-dialog::backdrop { background: rgba(26, 29, 27, .62); backdrop-filter: blur(7px); }
.model-dialog[open] { animation: model-dialog-in .2s var(--ease); }
.model-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--piedra); border-radius: 50%; background: transparent; color: var(--basalto); font: 400 1.8rem/1 "Karla", sans-serif; cursor: pointer; }
.model-dialog .eyebrow { padding-right: 2rem; margin: .3rem 0 1.5rem; font-size: .65rem; }
.model-dialog h3 { max-width: 24ch; margin: 0 0 1.3rem; font: 700 clamp(1.6rem, 3.2vw, 2rem)/1.15 "Montserrat", sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.model-dialog > p:not(.eyebrow), .model-dialog dd { color: var(--roca); font-size: 1rem; line-height: 1.65; }
.model-dialog dl { margin: 1.5rem 0 0; }
.model-dialog dl > div { padding: 1rem 0; border-top: 1px solid var(--piedra); }
.model-dialog dl > div:last-child { padding-bottom: 0; }
.model-dialog dt { margin-bottom: .4rem; font-weight: 700; }
.model-dialog dd { margin: 0; }
body.model-dialog-open { overflow: hidden; }
@keyframes model-dialog-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
  .comparison .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comparison .model-card { padding-inline: 1.25rem; border-right: 1px dashed var(--roca); border-bottom: 0; }
  .comparison .model-card:last-child { border-right: 0; }
  .comparison .model-card .corner-mark { left: 1.25rem; }
  .comparison .model-card h3 { font-size: 1.1rem; }
  .guarantee-copy { padding-inline: 1.2rem; }
  .guarantee-card--wide .guarantee-copy { padding-left: 1.4rem; }
}
@media (max-width: 900px) {
  .guarantee-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantee-card { grid-column: span 1; }
  .guarantee-card--reports { grid-column: span 2; }
  .guarantee-card--wide { grid-column: span 2; min-height: 280px; }
}
@media (max-width: 720px) {
  .process-step::after { display: none; }
  .comparison .model-grid { grid-template-columns: 1fr; }
  .comparison .model-card { min-height: 0; padding: 1.5rem 4rem 1.5rem 1.25rem; border-right: 0; border-bottom: 1px dashed var(--roca); }
  .comparison .model-card:last-child { border-bottom: 0; }
  .comparison .model-card h3 { min-height: 0; margin-top: 1.5rem; font-size: 1.2rem; }
  .comparison .model-card > p { max-width: 34ch; margin-bottom: 0; }
  .model-expand { right: .75rem; top: .75rem; }
  .guarantee-copy h3 { font-size: 1.05rem; }
  .guarantee-copy p { font-size: .93rem; }
  .guarantee-visual { height: 152px; }
  .guarantee-orbit { width: 108px; height: 108px; }
  .guarantee-card--reports .guarantee-chart { width: 100%; height: 150px; }
}
@media (max-width: 480px) {
  .guarantee-bento { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .guarantee-card, .guarantee-card--reports, .guarantee-card--wide { grid-column: auto; }
  .guarantee-card--wide { grid-template-columns: 1fr; }
  .guarantee-card--wide .guarantee-copy { padding: 1.65rem 1.5rem 0; }
  .guarantee-card--wide .guarantee-copy p { max-width: 36ch; }
  .guarantee-card--wide .visual-icon--large { margin-bottom: 1.25rem; }
  .guarantee-card--access .guarantee-copy { padding-top: 1rem; }
  .guarantee-card--access .visual-icon--large { margin-bottom: .55rem; }
  .review-visual { height: 210px; margin-top: .4rem; }
  .mini-dashboard { top: 1.25rem; left: 2.5rem; width: 370px; }
  .globe-visual { height: 220px; margin-top: .4rem; }
  .guarantee-globe, .globe-fallback { top: 2px; left: 14%; width: 360px; height: 360px; }
  .model-dialog .eyebrow { max-width: 25ch; margin-bottom: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .guarantee-bento.is-motion-active .guarantee-chart-line, .model-dialog[open] { animation: none; }
  .guarantee-globe { transition: none; }
}