/* Volaris PoC 2 · Contratos — slides not in shared assets (tokens from applaudo-deck.css only) */

/* Unified main titles (same rule as tres-caminos; fluid size lives in responsive.css) */
#deck > .slide:not(:first-child):not(.cierre-slide):not(.dos-slide) .slide-head h2.hl{
  letter-spacing:-.015em;line-height:1.02;font-weight:600;margin:0;
}
.p2-slide .inner-viewport{
  padding-top:58px;padding-bottom:calc(var(--nav-safe) + 12px);
  display:flex;flex-direction:column;overflow:hidden;height:100%;max-height:100%;
}
.p2-slide .slide-head .eyebrow{margin-bottom:18px;font-size:.9rem}
.p2-slide .slide-head .lead{margin-top:14px;font-size:1.0625rem;line-height:1.55;color:var(--gray);max-width:72ch}
.p2-slide.slide-dark .slide-head .lead{color:rgba(255,255,255,.72)}
.p2-slide .slide-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,24px);margin-top:clamp(14px,2.6vh,28px);overflow:visible}
.p2-slide .hero-band{margin-top:0;flex:none}
.p2-slide .hero-band p{font-size:clamp(1rem,1.6vw,1.3rem)}
.p2-slide .note{margin-top:0}

/* Horizontal flow of cards (hypothesis, next steps) */
.p2-flow{display:flex;align-items:stretch;gap:clamp(10px,1.4vw,18px)}
.p2-flow .step-card{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(18,18,18,.03);padding:clamp(18px,2.6vh,28px) clamp(16px,1.8vw,24px);display:flex;flex-direction:column}
.p2-flow .step-card.hi{background:var(--tint);border-color:rgba(255,64,64,.2)}
.p2-flow .step-card h4{font-size:clamp(1.05rem,1.6vw,1.5rem);margin:10px 0 6px;line-height:1.25}
.p2-flow .step-card p{font-size:clamp(.9375rem,1.25vw,1.15rem);line-height:1.45;max-width:none}
.p2-flow .step-card .tag{align-self:flex-start;margin-top:auto;padding-top:0}
.p2-flow .step-card .tag-wrap{margin-top:auto;padding-top:12px}
.p2-flow .road-arrow{flex:none;align-self:center}

/* Big numbers */
.p2-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.p2-metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius-item);padding:clamp(18px,2.8vh,30px) clamp(18px,2vw,28px);box-shadow:0 6px 18px rgba(18,18,18,.03);min-width:0}
.p2-metric .n{font-size:clamp(2.8rem,min(6vw,9vh),5.4rem);line-height:1;font-weight:600;color:var(--red);letter-spacing:-.02em}
.p2-metric h4{font-size:clamp(1.05rem,1.6vw,1.45rem);margin:12px 0 6px;line-height:1.25}
.p2-metric p{font-size:clamp(.875rem,1.2vw,1.1rem);line-height:1.45;max-width:none}

/* Screenshot comparison: crops of the relevant region, both images at the same scale (--s) */
.p2-compare{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.2vw,32px);align-items:center;min-height:0;container-type:inline-size}
.p2-shots{display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,1.2vw,16px);min-width:0}
.p2-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.p2-shot figcaption{font-size:.8125rem;font-weight:600;color:var(--gray);line-height:0}
.p2-shot figcaption .tag{height:26px}
.p2-shot a{display:block;line-height:0}
.p2-shot img{display:block;width:auto;max-width:none;border-radius:12px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(18,18,18,.06);background:#fff}
/* s05 crops: agente 461x268, figma 417x392 (natural px). s06 crops: agente 460x461, figma 424x360 */
.compare-08{--L:clamp(200px,min(100vh - var(--x08,400px),26.8cqw),470px)}
.compare-08 .p2-shot img.shot-b{height:var(--L)}
.compare-08 .p2-shot img.shot-a{height:calc(var(--L) * .6837)}
.compare-15{--L:clamp(200px,min(100vh - var(--x15,430px),30.2cqw),553px)}
.compare-15 .p2-shot img.shot-a{height:var(--L)}
.compare-15 .p2-shot img.shot-b{height:calc(var(--L) * .7809)}
.p2-reasons{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px);min-width:0}
.p2-reason{background:#fff;border:1px solid var(--line);border-radius:var(--radius-item);padding:clamp(14px,2vh,20px) clamp(16px,1.6vw,22px)}
.p2-reason h4{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.3;margin:0 0 4px}
.p2-reason p{font-size:clamp(.875rem,1.1vw,1.05rem);line-height:1.45;max-width:none}
.p2-reason .num{color:var(--red);font-weight:600;margin-right:6px}
.p2-side{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.6vh,16px)}
.p2-side .card-soft-pink,.p2-side .card-soft-green{padding:clamp(14px,2vh,20px) clamp(16px,1.6vw,22px)}
.p2-side .card-white{background:#fff;border:1px solid var(--line);border-radius:var(--radius-item);padding:clamp(14px,2vh,20px) clamp(16px,1.6vw,22px)}
.p2-side .card-white h4{font-size:1rem;margin-bottom:10px;color:var(--ink)}
.p2-side .card-white ul{list-style:none}
.p2-side .card-white li{font-size:clamp(.9375rem,1.05vw,1rem);color:var(--gray);margin-bottom:6px;padding-left:14px;position:relative}
.p2-side .card-white li::before{content:'•';position:absolute;left:0;color:var(--red)}
.p2-foot-note{font-size:clamp(.8125rem,.95vw,.875rem);color:var(--gray);max-width:none}

/* Fare diagram (contract vs Confluence) */
.p2-fares{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.p2-fare-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius-item);padding:clamp(18px,2.6vh,28px) clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:14px;min-width:0}
.p2-fare-col.ok{background:var(--tint);border-color:rgba(255,64,64,.2)}
.p2-fare-col h4{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.25}
.p2-fare-row{display:flex;flex-direction:column;gap:8px}
.p2-fare-row .who{font-size:.8125rem;font-weight:600;color:var(--gray)}
.p2-chips{display:flex;flex-wrap:wrap;gap:8px}
.p2-chip{display:inline-flex;align-items:center;height:clamp(34px,4.2vh,44px);padding:0 clamp(14px,1.4vw,20px);border-radius:var(--pill);border:1px solid var(--line-strong);background:#fff;font-weight:600;font-size:clamp(.9375rem,1.1vw,1.05rem);color:var(--ink)}
.p2-chip.flex{background:var(--red);border-color:var(--red);color:#fff}
.p2-chip.gone{color:var(--gray);text-decoration:line-through;background:var(--linen)}
.p2-verdict{display:inline-flex;align-self:flex-start;align-items:center;padding:6px 12px;border-radius:var(--pill);font-size:.75rem;font-weight:700;letter-spacing:.02em}
.p2-verdict.no{background:var(--linen);color:var(--gray);border:1px solid var(--line)}
.p2-verdict.yes{background:#fff;color:var(--red-dark);border:1px solid rgba(255,64,64,.25)}
.p2-fare-col p{font-size:clamp(.875rem,1.1vw,1.05rem);line-height:1.45;max-width:none}

/* Contract excerpt (before/after, plain language) */
.p2-excerpt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.p2-excerpt .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-item);padding:clamp(18px,2.4vh,26px) clamp(18px,2vw,26px);min-width:0}
.p2-excerpt .panel.now{border-color:rgba(255,64,64,.25);box-shadow:0 10px 30px rgba(255,64,64,.06)}
.p2-excerpt .panel h4{font-size:1.05rem;margin:4px 0 12px}
.p2-excerpt dl{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:10px 16px;margin:0}
.p2-excerpt dt{font-size:clamp(.875rem,1vw,.95rem);font-weight:600;color:var(--ink)}
.p2-excerpt dd{margin:0;font-size:clamp(.9375rem,1.1vw,1.05rem);color:var(--gray);line-height:1.4}
.p2-excerpt dd.empty{color:rgba(83,88,98,.6)}
.p2-excerpt .tok{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:var(--pill);background:var(--linen);border:1px solid var(--line);color:var(--ink);margin-left:6px;white-space:nowrap}

/* Diagram slides (dark): PNG from the diagramas-interactivos skill + interactive version */
.diagram-slide .slide-body{justify-content:flex-start;align-items:center;gap:10px}
.diagram-slide .p2-diagram{margin:0;width:min(calc(100vw - 96px),1640px);max-width:none;flex:1 1 auto;min-height:0;display:flex;align-items:flex-start;justify-content:center}
.diagram-slide .p2-diagram picture{display:block;width:100%;height:100%;min-height:0}
.diagram-slide .p2-diagram img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center top}
.diagram-slide .p2-diagram-link{flex:none;font-size:max(13px,.8125rem);font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:var(--pill);padding:6px 14px}
.diagram-slide .p2-diagram-link:hover{color:#fff;border-color:var(--red-dark-mode)}
.diagram-slide .p2-diagram-link.m{display:none}

/* Cover / close: same rules as tres-caminos */
.cierre-slide .inner.center{max-width:920px}
.cierre-slide .big{max-width:20ch;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.05}
.cierre-slide .cierre-thanks{margin-top:36px;font-size:clamp(1.25rem,2vw,1.65rem);color:rgba(255,255,255,.88);font-weight:600}
.slide-dark .draft-tag{border-color:rgba(244,98,107,.5);color:var(--red-dark-mode)}

/* Diagram slides: the PNG takes the free height between the header and the link */
.diagram-slide .inner-viewport,.diagram-slide .slide-body{overflow:visible!important}
.diagram-slide .slide-body{flex:1 1 auto;justify-content:center}
.diagram-slide .p2-diagram{flex:0 1 auto;height:auto}
.diagram-slide .p2-diagram picture{height:auto}
.diagram-slide .p2-diagram img{height:auto;max-height:max(220px,calc(100vh - var(--xd,400px)))}
.diagram-slide .p2-diagram-link{display:inline-flex;align-items:center;min-height:44px;padding:0 18px}

/* Short viewports: content slides scroll like responsive.css, except the comparison and diagram slides, which fit */
@media (max-height:800px){
  .p2-slide .slide-body{flex:none;justify-content:flex-start}
  .compare-08 .slide-body,.compare-15 .slide-body{flex:1 1 auto;justify-content:center}
  .diagram-slide .slide-body{flex:1 1 auto}
}

/* Comparison slides, short desktop viewports (<=900px tall): tighter side cards so the conclusion clears the pill */
@media (max-height:900px) and (min-width:901px){
  .compare-08 .p2-reason{padding:12px 16px}
  .compare-15 .p2-side{gap:10px}
  .compare-15 .p2-side .card-soft-pink,.compare-15 .p2-side .card-white{padding:12px 16px}
  .compare-15 .p2-side h4{margin-bottom:6px}
  .compare-15 .p2-side li{margin-bottom:3px;line-height:1.4}
  .compare-15 .hero-band{padding:14px 18px}
  .compare-15 .hero-band p{font-size:1.0625rem;line-height:1.4}
}

/* Tablet / narrow */
@media (max-width:900px){
  .p2-flow{flex-direction:column}
  .p2-flow .road-arrow{transform:rotate(90deg);display:block!important}
  .p2-metrics,.p2-fares,.p2-excerpt,.p2-compare{grid-template-columns:1fr}
  .compare-08,.compare-15{--L:clamp(200px,46vh,420px)}
}

/* Phone: vertical diagrams, stacked content, screenshots one per row at full width */
@media (max-width:640px){
  .p2-slide .inner-viewport{height:auto!important;max-height:none!important;overflow:visible!important}
  .p2-slide .slide-body{flex:none!important;justify-content:flex-start!important}
  .p2-shots{flex-direction:column;align-items:stretch;gap:14px;width:100%}
  .p2-shot{align-items:flex-start;width:100%}
  .p2-shot a{width:100%}
  .p2-shot img,.compare-08 .p2-shot img.shot-a,.compare-08 .p2-shot img.shot-b,.compare-15 .p2-shot img.shot-a,.compare-15 .p2-shot img.shot-b{width:100%;height:auto;max-width:100%;border-radius:10px}
  .p2-excerpt dl{grid-template-columns:1fr;gap:2px 0}
  .p2-excerpt dd{margin-bottom:8px}
  .diagram-slide .p2-diagram,.diagram-slide .p2-diagram picture{height:auto;width:100%}
  .diagram-slide .p2-diagram img{height:auto;max-height:none;max-width:340px;margin:0 auto}
  .diagram-slide .p2-diagram-link.d{display:none}
  .diagram-slide .p2-diagram-link.m{display:inline-flex}
}
.p2-side .card-soft-pink li{font-size:clamp(.9375rem,1.05vw,1rem)}
@media (min-width:901px) and (max-width:1100px){
  .compare-08{--L:clamp(200px,min(100vh - 400px,29cqw),470px)}
  .compare-15{--L:clamp(200px,min(100vh - 430px,27cqw),553px)}
}