/* =========================================================
   CCP — Comercializadora de Créditos Patagonia
   Hoja de estilos del sitio
   ========================================================= */

:root{
  --navy:#123068;
  --navy-2:#17356b;
  --blue:#5b86c5;
  --blue-light:#9dbee7;
  --teal:#62c1ca;
  --teal-dark:#3fa3ac;
  --ink:#1c2a44;
  --bg:#f6f8fc;
  --paper:#ffffff;
  --line:#e2e8f4;
  --muted:#5c6b8a;
}

/* ===== Reset & base ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  font-family:'Work Sans',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'Poppins',system-ui,sans-serif;text-wrap:balance;}
p{text-wrap:pretty;}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--teal-dark);}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal-dark);outline-offset:3px;}
img{max-width:100%;}

/* ===== Layout ===== */
.page{width:100%;overflow-x:hidden;background:var(--bg);}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
section{padding:96px 0;}
.grid-2{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px;}

.max-w-560{max-width:560px;}
.max-w-620{max-width:620px;}
.max-w-640{max-width:640px;}
.max-w-680{max-width:680px;}
.max-w-760{max-width:760px;}
.max-w-820{max-width:820px;}
.mx-auto{margin-left:auto;margin-right:auto;}
.text-center{text-align:center;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:999px;font-weight:600;font-size:15.5px;
  font-family:'Work Sans',sans-serif;border:none;cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--teal);color:#0c2340;}
.btn-primary:hover{background:var(--teal-dark);color:#ffffff;}
.btn-ghost{background:transparent;color:#ffffff;border:1.5px solid rgba(255,255,255,0.55);}
.btn-ghost:hover{border-color:#ffffff;background:rgba(255,255,255,0.08);}
.btn-sm{padding:11px 20px;font-size:14px;}

/* ===== Shared text/section components ===== */
.eyebrow{
  text-transform:uppercase;letter-spacing:0.16em;font-size:12.5px;font-weight:600;
  color:var(--teal-dark);
}
.eyebrow--accent{color:var(--teal);}

.section-title{font-size:32px;color:var(--navy);font-weight:600;margin:14px 0 24px;}
.section-title--tight{margin:14px 0 16px;}
.section-title--on-dark{color:#ffffff;}

.copy{font-size:17px;line-height:1.8;color:var(--muted);margin:0 0 18px;}
.copy:last-child{margin-bottom:0;}
.copy--tight{font-size:16.5px;}
.copy--on-dark{color:#c7d4ec;}

.card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:30px;}
.icon-badge{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0;}
.icon-badge--navy{background:linear-gradient(135deg,var(--navy),var(--blue));}
.icon-badge--teal{background:linear-gradient(135deg,var(--teal-dark),var(--teal));}

.section--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.section-photo{position:relative;background-size:cover;background-position:center;background-attachment:fixed;background-color:var(--navy-2);overflow:hidden;}
.section-photo__overlay{position:absolute;inset:0;background:linear-gradient(160deg, rgba(15,41,89,0.92) 0%, rgba(23,53,107,0.86) 100%);}
.section-photo .wrap{position:relative;}
.section-territorial{background-image:url('../img/presencia-territorial.jpg');}
.section-vision{background-image:url('../img/vision.jpg');}
.photo-quote{font-size:22px;line-height:1.5;color:var(--teal);font-weight:600;margin:32px 0 0;}

@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .7s ease both;}
}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(246,248,252,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px;}
.logo-link{display:flex;align-items:center;flex-shrink:0;}
.logo-link img{height:48px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:13.5px;font-weight:600;color:var(--navy-2);text-transform:uppercase;letter-spacing:0.05em;}

/* ===== Hero ===== */
.hero{padding:0;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 46%,#0e2957 100%);}
.hero__blob{position:absolute;right:-120px;top:-160px;}
.hero__wave{position:absolute;left:0;right:0;bottom:-2px;}
.hero__inner{position:relative;padding:130px 40px 150px;}
.hero__content{max-width:680px;}
.hero__title{color:#ffffff;font-size:46px;line-height:1.14;font-weight:600;margin:18px 0 22px;max-width:620px;}
.hero__title-accent{color:var(--teal);}
.hero__lead{color:#c7d4ec;font-size:17.5px;line-height:1.65;max-width:540px;margin:0 0 34px;}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero__stats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap;}
.hero__stat-value{color:#ffffff;font-size:24px;font-weight:600;}
.hero__stat-label{color:#9fb0d1;font-size:13.5px;}
.hero__stat-divider{width:1px;background:rgba(255,255,255,0.18);}

/* ===== Acerca de CCP ===== */
.acerca__facts{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px;margin-top:90px;}
.fact-item{display:flex;align-items:center;gap:16px;padding:20px;border-bottom:1px solid var(--line);}
.fact-item:last-child{border-bottom:none;}
.fact-icon{width:44px;height:44px;border-radius:12px;background:#eaf2fb;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fact-title{font-weight:600;color:var(--navy);font-size:15.5px;}
.fact-desc{color:var(--muted);font-size:13.5px;}

/* ===== Nuestra experiencia ===== */
.experiencia__list{display:flex;flex-direction:column;gap:16px;}
.experiencia__item{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;align-items:flex-start;gap:14px;}
.experiencia__icon{flex-shrink:0;margin-top:1px;}
.experiencia__text{font-size:15px;line-height:1.6;color:var(--ink);margin:0;}

/* ===== Qué ofrecemos ===== */
.ofrece__grid{margin-top:40px;}
.ofrece__card{display:flex;align-items:center;gap:16px;padding:24px;}
.ofrece__card .icon-badge{margin-bottom:0;}
.ofrece__title{font-size:16px;color:var(--navy);font-weight:600;margin:0;}

/* ===== Nuestro trabajo ===== */
.trabajo__list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:18px;overflow:hidden;margin-top:40px;border:1px solid var(--line);}
.trabajo__item{display:flex;align-items:flex-start;gap:20px;padding:26px 28px;background:var(--paper);}
.trabajo__item .icon-badge{margin-bottom:0;}
.trabajo__title{font-size:16.5px;color:var(--navy);font-weight:600;margin:0 0 6px;}
.trabajo__desc{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;}

/* ===== Liderazgo (Diego Bravo) ===== */
.person__header{display:flex;align-items:center;gap:22px;margin:14px 0 24px;}
.avatar{position:relative;width:120px;height:120px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--blue));flex-shrink:0;}
.avatar__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:600;font-size:32px;}
.avatar__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.person__name{font-size:24px;color:var(--navy);font-weight:600;margin:0;}
.person__role{color:var(--muted);font-size:14.5px;}
.person__bio p{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 16px;}
.person__bio p:last-child{margin-bottom:0;}
.person__side{display:flex;flex-direction:column;gap:20px;}
.highlight-card{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:32px;}
.highlight-card h3{font-size:16px;color:var(--navy);font-weight:600;margin:0 0 12px;}
.highlight-card p{font-size:15px;line-height:1.7;color:var(--muted);margin:0;}
.quote-card{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);border-radius:20px;padding:32px;position:relative;}
.quote-card svg{opacity:0.5;margin-bottom:12px;}
.quote-card p{font-size:16px;line-height:1.6;color:#ffffff;margin:0;font-style:italic;}

/* ===== Testimonios ===== */
.testimonios__intro{text-align:center;max-width:560px;margin:0 auto;}
.testimonios__note{font-size:13.5px;color:var(--muted);margin:0;}
.testimonios__grid{margin-top:44px;}
.testimonial-card{background:var(--paper);display:flex;flex-direction:column;gap:18px;}
.testimonial-card p{font-size:15px;line-height:1.7;color:var(--ink);margin:0;flex:1;}
.testimonial-card .name{font-weight:600;color:var(--navy);font-size:14.5px;}
.testimonial-card .place{color:var(--muted);font-size:13px;}

/* ===== Contacto ===== */
.contacto__card{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);border-radius:28px;padding:64px;position:relative;overflow:hidden;}
.contacto__blob{position:absolute;right:-60px;bottom:-80px;}
.contacto__grid{position:relative;grid-template-columns:1.2fr 1fr;}
.contacto__title{font-size:30px;color:#ffffff;font-weight:600;margin:14px 0 14px;}
.contacto__lead{color:#c7d4ec;font-size:16px;line-height:1.7;margin:0 0 28px;max-width:440px;}
.contacto__social-label{color:#9fb0d1;font-size:13px;text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin-bottom:4px;}
.contacto__social{display:flex;flex-direction:column;gap:12px;}
.social-link{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:15px 18px;color:#ffffff;font-size:14.5px;font-weight:500;}
.social-link .handle{margin-left:auto;color:#7f93bd;font-size:12px;font-weight:400;}

/* ===== Footer ===== */
.site-footer{margin-top:80px;border-top:1px solid var(--line);}
.site-footer__top{padding:40px 40px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.site-footer__brand{display:flex;align-items:center;gap:12px;}
.site-footer__brand img{height:28px;width:auto;}
.site-footer__copy{font-size:13.5px;color:var(--muted);}
.site-footer__tagline{font-size:13px;color:var(--muted);}
.site-footer__social{padding:24px 40px 40px;display:flex;justify-content:center;}
.footer-social-links{display:flex;align-items:center;gap:14px;}
.footer-social-links a{width:38px;height:38px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--navy);}

/* =========================================================
   Responsive — mobile / tablet (≤900px)
   Este bloque va al final a propósito: en CSS, cuando dos
   reglas con la misma especificidad compiten por la misma
   propiedad, gana la que aparece último en el archivo — así
   que estas reglas necesitan quedar después de todas las
   reglas base para poder pisarlas correctamente.
   ========================================================= */
@media (max-width:900px){
  .wrap{padding:0 24px;}
  section{padding:64px 0;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;gap:40px;}
  .hero__title{font-size:34px !important;}
  .acerca__facts{margin-top:0 !important;}
  .section-photo{background-attachment:scroll !important;}

  .site-header__bar{flex-wrap:wrap;height:auto;padding:14px 0;row-gap:12px;}
  .logo-link{order:1;}
  .nav-cta{order:2;}
  .nav-links{order:3;width:100%;flex-wrap:wrap;justify-content:center;gap:12px 20px;}
  .nav-links a{font-size:12.5px;}

  .contacto__card{padding:36px 28px;}
  .person__header{flex-wrap:wrap;}
}