/* compliance.css — /compliance-pentest and /es/pentest-cumplimiento landing.
   Reuses the site design tokens; only landing-specific layout lives here. */

/* Uniform content width for every section on this landing (overrides the
   site default .section:1100px and any per-section cap below), so the column
   edge stays constant from hero to close instead of jumping wider mid-scroll. */
.cp-page main > .section{max-width:1100px;margin-left:auto;margin-right:auto}

/* Closing page: strip the nav to logo + language toggle (no exploration escape
   hatches) and drop the course promo banner. Applied via CSS so it survives the
   build's nav/footer re-stamp. */
.cp-page .nav-links > li:not(:has(.lang-toggle)){display:none}
.cp-page .menu-toggle{display:none}
@media(max-width:768px){
  .cp-page .nav-links{position:static;flex-direction:row;transform:none;opacity:1;visibility:visible;background:none;backdrop-filter:none;padding:0;border:none;max-height:none}
}

/* "Included" reads as a positive, not a price; and a real-availability nudge. */
.cp-price-table .cp-incl span{color:var(--accent);font-weight:700}
.cp-avail{font-family:var(--font-mono);font-size:.85rem;color:var(--accent-warm);margin-top:1rem;letter-spacing:.3px}

.cp-hero{padding-top:8rem}
.cp-hero .section-title{font-size:2.9rem;line-height:1.1;margin-bottom:1rem}
.cp-hero .section-subtitle{max-width:680px;font-size:1.15rem}
.cp-hero .cp-lede{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;max-width:680px;margin:1.2rem 0 2rem}
.cp-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn-ghost{background:transparent;border:1px solid var(--border-hover);color:var(--text-bright)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Problem statement */
.cp-problem{max-width:820px}
.cp-problem p{font-size:1.15rem;line-height:1.7;color:var(--text-bright)}
.cp-problem strong{color:var(--accent)}

/* What you get — 3 cards */
.cp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.cp-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem}
.cp-card h3{font-size:1.05rem;color:var(--text-bright);margin:0 0 .6rem}
.cp-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin:0}
.cp-card .cp-ico{width:34px;height:34px;border-radius:9px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--accent)}
.cp-card .cp-ico svg{width:18px;height:18px}

/* Pricing table */
.cp-pricing{max-width:820px}
.cp-price-table{width:100%;border-collapse:collapse;margin-top:1.5rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cp-price-table th,.cp-price-table td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--border)}
.cp-price-table thead th{background:var(--bg-elevated,#161b2e);color:var(--text-bright);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.cp-price-table tbody tr:last-child td{border-bottom:none}
.cp-price-table .cp-svc{color:var(--text-bright);font-weight:500}
.cp-price-table .cp-price{font-family:var(--font-mono);color:var(--accent);font-weight:600;white-space:nowrap}
.cp-price-table .cp-turn{font-family:var(--font-mono);color:var(--text-secondary);white-space:nowrap}
.cp-price-note{color:var(--text-muted);font-size:.9rem;margin-top:1rem;line-height:1.6}

/* Sample report download */
.cp-report{max-width:820px}
.cp-report-box{background:linear-gradient(180deg,var(--accent-dim),transparent);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:2rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.cp-report-box .cp-report-txt{flex:1;min-width:260px}
.cp-report-box h3{color:var(--text-bright);font-size:1.2rem;margin:0 0 .5rem}
.cp-report-box p{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin:0}
.btn-download{font-size:1rem;padding:.85rem 1.6rem;white-space:nowrap}

/* Testimonial */
.cp-quote{background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-lg);padding:1.8rem 2rem}
.cp-quote blockquote{margin:0}
.cp-quote p{font-size:1.1rem;line-height:1.7;color:var(--text-bright);font-style:italic;margin:0 0 1rem}
.cp-quote cite{font-family:var(--font-mono);font-size:.82rem;color:var(--accent);font-style:normal}

/* Proof strip */
.cp-proof{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;max-width:820px;padding-top:1.4rem;border-top:1px dashed var(--border)}
.cp-proof a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.9rem;color:var(--text-secondary);text-decoration:none;transition:color .2s}
.cp-proof a:hover{color:var(--accent)}
.cp-proof svg{width:15px;height:15px}

/* Consultancy / white-label block */
.cp-partner{max-width:820px;background:var(--accent-warm-dim);border:1px solid rgba(240,165,0,.35);border-radius:var(--radius-lg);padding:2rem}
.cp-partner .section-label{color:var(--accent-warm)}
.cp-partner h2{color:var(--text-bright);font-size:1.5rem;margin:.4rem 0 1rem}
.cp-partner p{color:var(--text-secondary);font-size:1rem;line-height:1.7;max-width:640px}
.cp-partner .btn{margin-top:1.2rem}
.cp-partner .btn-warm{background:var(--accent-warm);color:#1a1200;border:none}
.cp-partner .btn-warm:hover{filter:brightness(1.08)}

/* FAQ */
.cp-faq{max-width:820px}
.cp-faq details{border-bottom:1px solid var(--border);padding:1.1rem 0}
.cp-faq summary{cursor:pointer;color:var(--text-bright);font-size:1.02rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary::after{content:'+';font-family:var(--font-mono);color:var(--accent);font-size:1.3rem;transition:transform .2s}
.cp-faq details[open] summary::after{content:'−'}
.cp-faq details p{color:var(--text-secondary);font-size:.97rem;line-height:1.7;margin:.9rem 0 0}

/* Close */
.cp-close{text-align:center}
.cp-close .section-title{font-size:2rem}
.cp-close p{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;margin:.8rem 0 2rem}

@media(max-width:820px){
  .cp-grid3{grid-template-columns:1fr}
  .cp-hero .section-title{font-size:2.1rem}
  /* The price/turnaround cells are nowrap by default; on a phone that pushes the
     table (and the whole body) wider than the viewport. Let them wrap and trim
     the cell metrics so the 3-column table fits without horizontal scroll. */
  .cp-price-table{font-size:.82rem}
  .cp-price-table th,.cp-price-table td{padding:.7rem .6rem}
  .cp-price-table .cp-price,.cp-price-table .cp-turn{white-space:normal}
  /* Stack the sample-report box and let the download button fill the width and
     wrap its label, instead of forcing nowrap wider than the phone viewport. */
  .cp-report-box{flex-direction:column;align-items:stretch}
  .btn-download{white-space:normal;text-align:center}
}