/* ===========================================================
   VPC Dynamics — site overrides & extras (styles.css base)
   =========================================================== */

/* ---------- Brand logo (image) ---------- */
.brand-img{display:block;height:60px;width:auto;transition:filter .3s ease}
.header.is-solid .brand-img{height:54px}
.footer .brand-img{height:56px}
.brand-sm .brand-img{height:64px}

/* ---------- Header CTA ---------- */
.header .btn-nav{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(47,147,173,.30)}
.header .btn-nav:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,147,173,.42);filter:brightness(1.05)}

/* ---------- Hero visual: demo dashboard ---------- */
.hero-dash{background:rgba(255,255,255,.99);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.dash-top{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--gray-100)}
.dash-top .dot{width:11px;height:11px;border-radius:50%}
.dash-top .dot:nth-child(1){background:#ff5f57}
.dash-top .dot:nth-child(2){background:#febc2e}
.dash-top .dot:nth-child(3){background:#28c840}
.dash-top .dash-pill{margin-left:auto;font-family:var(--font-h);font-size:.72rem;font-weight:600;color:var(--accent-dark);background:rgba(47,147,173,.12);padding:6px 12px;border-radius:999px}
.dash-body{padding:22px 20px 24px}
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dash-header strong{font-family:var(--font-h);font-size:1.02rem;color:var(--brand-dark)}
.dash-header span{font-family:var(--font-h);font-size:.7rem;font-weight:600;color:var(--gray-500);background:var(--gray-100);padding:5px 11px;border-radius:999px}
.dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dash-metric{background:var(--gray-100);border-radius:14px;padding:14px 15px}
.dash-metric small{display:block;font-size:.68rem;color:var(--gray-500);letter-spacing:.02em;margin-bottom:6px}
.dash-metric b{font-family:var(--font-h);font-weight:800;font-size:1.28rem;color:var(--brand-dark);letter-spacing:-.02em}
.dash-metric .trend{color:#1b7a43;font-size:.7rem;display:block;margin-top:4px;font-weight:600}
.dash-bar{height:10px;border-radius:999px;background:var(--gray-100);overflow:hidden;display:flex;margin-bottom:26px}
.dash-bar i{display:block;height:100%}
.dash-bar i:nth-child(1){width:46%;background:var(--brand)}
.dash-bar i:nth-child(2){width:32%;background:var(--accent)}
.dash-bar i:nth-child(3){width:22%;background:var(--sky)}
.dash-progress{display:grid;gap:12px}
.dash-row{display:flex;align-items:center;gap:14px}
.dash-row .thumb{width:38px;height:38px;border-radius:11px;background:var(--grad-soft);display:grid;place-items:center;color:var(--accent-dark);font-size:1.05rem;flex-shrink:0}
.dash-row .meta{flex:1;min-width:0}
.dash-row .meta strong{display:block;font-family:var(--font-h);font-weight:600;font-size:.88rem;color:var(--gray-900)}
.dash-row .meta span{font-size:.76rem;color:var(--gray-500)}
.dash-row .pct{font-family:var(--font-h);font-weight:700;font-size:.82rem;color:var(--accent-dark)}
.dash-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:14px 18px;display:flex;align-items:center;gap:12px}
.dash-float .float-icon{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 8px 16px rgba(47,147,173,.32)}
.dash-float strong{display:block;font-family:var(--font-h);font-weight:700;font-size:.95rem;color:var(--brand-dark)}
.dash-float span{font-size:.76rem;color:var(--gray-500)}
.dash-float.f1{top:34px;left:-34px;animation:floaty 5s ease-in-out infinite}
.dash-float.f2{bottom:28px;right:-30px;animation:floaty 6s ease-in-out .8s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Logo / trust strip ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.logo-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gray-500);font-family:var(--font-h);font-weight:700;font-size:1.02rem;transition:all .3s}
.logo-tile:hover{border-color:rgba(47,147,173,.3);color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.logo-tile i{font-size:1.35rem;color:var(--accent);opacity:.8}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px;display:flex;flex-direction:column;position:relative;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card .plan{font-family:var(--font-h);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:14px}
.price-card .price{font-family:var(--font-h);font-weight:800;font-size:2.5rem;letter-spacing:-.04em;color:var(--brand-dark);line-height:1}
.price-card .price small{font-size:1rem;font-weight:600;color:var(--gray-500);letter-spacing:0}
.price-card .price-note{color:var(--gray-500);font-size:.86rem;margin-top:10px;min-height:38px}
.price-card.featured{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-dark) 100%);border-color:transparent;color:#fff;box-shadow:var(--shadow-lg);transform:scale(1.03)}
.price-card.featured:hover{transform:scale(1.03) translateY(-6px)}
.price-card.featured .plan{color:var(--sky-light)}
.price-card.featured .price{color:#fff}
.price-card.featured .price small{color:var(--sky-light)}
.price-card.featured .price-note{color:rgba(255,255,255,.72)}
.price-features{list-style:none;display:grid;gap:13px;margin:26px 0 30px}
.price-features li{display:flex;gap:11px;align-items:flex-start;color:var(--gray-700);font-size:.95rem}
.price-card.featured .price-features li{color:rgba(255,255,255,.92)}
.price-features i{color:var(--accent-dark);margin-top:3px}
.price-card.featured .price-features i{color:var(--sky-light)}
.price-card .btn{margin-top:auto;width:100%}
.price-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:var(--font-h);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 18px;border-radius:999px;box-shadow:0 8px 18px rgba(47,147,173,.4)}
.pricing-note{text-align:center;color:var(--gray-500);font-size:.9rem;margin-top:30px}

/* ---------- Stats band ---------- */
.stats-band{background:var(--brand-dark);color:#fff;padding:62px 0}
.stats-band .container{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.health-stat strong{font-family:var(--font-h);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;display:block;background:linear-gradient(120deg,#fff,var(--sky-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.health-stat span{color:#8ca2b9;font-size:.9rem;margin-top:8px;display:block}

/* ---------- Logos row (trusted by) ---------- */
.client-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 54px}
.client-logos span{font-family:var(--font-h);font-weight:700;font-size:1.08rem;color:var(--gray-400);letter-spacing:-.01em;opacity:.75;transition:all .2s}
.client-logos span:hover{color:var(--brand);opacity:1}
.client-logos i{color:var(--gray-350);margin-right:8px}

/* ---------- Timeline (nosotros / proceso) ---------- */
.timeline{position:relative;margin-top:60px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--brand),var(--sky))}
.timeline-item{position:relative;padding-bottom:46px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item .dot{position:absolute;left:-31px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid var(--accent);box-shadow:0 0 0 4px rgba(47,147,173,.14)}
.timeline-item h4{font-size:1.12rem;margin-bottom:8px}
.timeline-item span{color:var(--accent-dark);font-family:var(--font-h);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:10px}
.timeline-item p{color:var(--gray-500);max-width:60ch}

/* ---------- Values grid (nosotros) ---------- */
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:transform .3s,box-shadow .3s,border-color .3s}
.value-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(47,147,173,.28)}
.value-card .big{font-family:var(--font-h);font-weight:800;font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block;margin-bottom:12px}
.value-card h4{font-size:1.08rem;margin-bottom:8px}
.value-card p{color:var(--gray-500);font-size:.94rem}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center;transition:transform .3s,box-shadow .3s}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.team-card .avatar.lg{width:72px;height:72px;min-width:72px;font-size:1.4rem;margin:0 auto 18px;box-shadow:0 10px 22px rgba(47,147,173,.3)}
.team-card strong{display:block;font-family:var(--font-h);font-weight:700;font-size:1.02rem}
.team-card span{color:var(--gray-500);font-size:.85rem;display:block;margin-top:4px}

/* ---------- Map / contact info ---------- */
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);height:100%;min-height:320px;background:#e9f0f6;display:grid;place-items:center;color:var(--gray-400);font-family:var(--font-h)}
.map-embed .map-pin{font-size:2.4rem}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 26px;margin-bottom:14px;transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:rgba(47,147,173,.3);box-shadow:var(--shadow-sm)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-family:var(--font-h);font-weight:600;font-size:1.03rem;color:var(--brand-dark)}
.faq-q i{color:var(--accent-dark);font-size:1.1rem;transition:transform .3s}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{color:var(--gray-700);font-size:.96rem;padding:0 0 22px}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-2{margin-top:20px}.mt-3{margin-top:32px}.mt-4{margin-top:48px}
.lead{font-size:1.12rem;color:var(--gray-500);max-width:62ch;margin-left:auto;margin-right:auto}
.gray-400{color:var(--gray-500)}

/* ---------- Responsive extras ---------- */
@media(max-width:960px){
  .pricing-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .price-card.featured{transform:none}
  .price-card.featured:hover{transform:translateY(-6px)}
  .logo-grid{grid-template-columns:1fr 1fr}
  .stats-band .container{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .dash-float{display:none}
}
@media(max-width:640px){
  .logo-grid,.team-grid{grid-template-columns:1fr}
  .brand-img{height:50px}
  .header.is-solid .brand-img{height:46px}
  .stats-band .container{gap:26px}
  .health-stat strong{font-size:2.1rem}
}