/* === Casas de Playa Landing — Specific Styles === */

/* Ocean-inspired palette */
.playa-page { --ocean-deep: #0c2d48; --ocean-mid: #145da0; --ocean-light: #2e8bc0; --sand: #f5e6ca; --sand-dark: #d4a76a; }

/* Hero — beach version */
.hero-playa { position:relative; min-height:100vh; display:flex; align-items:center; padding:140px 0 80px; background-size:cover; background-position:center; }
.hero-playa .hero-overlay { background:linear-gradient(135deg,rgba(12,45,72,.88) 0%,rgba(20,93,160,.65) 100%); }

/* Problem cards */
.problem-section { padding:80px 0; background:#fff; }
.problem-card { text-align:center; padding:35px 25px; border-radius:14px; border:1px solid #eee; transition:all .35s; height:100%; }
.problem-card:hover { transform:translateY(-8px); box-shadow:0 15px 40px rgba(12,45,72,.12); border-color:var(--ocean-light); }
.problem-icon { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; background:linear-gradient(135deg,#0c2d48,#145da0); color:#fff; font-size:1.6rem; }
.problem-card h4 { font-size:1.1rem; margin-bottom:10px; color:#1a1a1a; }
.problem-card p { color:#666; font-size:.92rem; line-height:1.6; }

/* Value prop */
.value-section { padding:80px 0; background:linear-gradient(135deg,#0c2d48 0%,#145da0 100%); color:#fff; }
.value-item { display:flex; gap:18px; margin-bottom:28px; }
.value-icon { flex-shrink:0; width:52px; height:52px; border-radius:12px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--primary-color); border:1px solid rgba(246,162,30,.25); }
.value-item h4 { font-size:1.05rem; margin-bottom:5px; }
.value-item p { font-size:.9rem; opacity:.85; margin:0; }

/* Stats counter */
.stats-strip { padding:50px 0; background:#111; }
.stat-box { text-align:center; padding:20px; }
.stat-number { font-size:2.8rem; font-weight:800; color:var(--primary-color); font-family:'Outfit',sans-serif; }
.stat-label { color:#ccc; font-size:.9rem; text-transform:uppercase; letter-spacing:1px; margin-top:5px; }

/* Services — beach specific */
.services-playa { padding:80px 0; background:#f8f9fa; }
.service-playa-card { background:#fff; border-radius:14px; padding:35px 28px; text-align:center; border:1px solid #eee; transition:all .35s; height:100%; }
.service-playa-card:hover { transform:translateY(-6px); box-shadow:0 12px 35px rgba(0,0,0,.08); border-color:var(--primary-color); }
.service-playa-icon { font-size:2.4rem; color:var(--ocean-mid); margin-bottom:18px; }
.service-playa-card h4 { font-size:1.1rem; margin-bottom:10px; }
.service-playa-card p { color:#666; font-size:.9rem; line-height:1.6; }

/* Portfolio grid */
.portfolio-playa { padding:80px 0; background:#fff; }
.portfolio-item { position:relative; border-radius:14px; overflow:hidden; height:320px; margin-bottom:30px; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.portfolio-item:hover img { transform:scale(1.08); }
.portfolio-caption { position:absolute; bottom:0; left:0; right:0; padding:25px 20px; background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,transparent 100%); color:#fff; transform:translateY(15px); opacity:0; transition:all .35s; }
.portfolio-item:hover .portfolio-caption { transform:translateY(0); opacity:1; }
.portfolio-caption span { background:var(--primary-color); padding:3px 10px; border-radius:4px; font-size:.75rem; font-weight:600; }
.portfolio-caption h4 { font-size:1rem; margin-top:8px; margin-bottom:0; }

/* Process timeline */
.process-section { padding:80px 0; background:#f4f4f4; }
.process-step { text-align:center; position:relative; padding:0 15px; }
.step-number { width:60px; height:60px; border-radius:50%; background:var(--gradient-gold); color:#fff; font-size:1.4rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 6px 20px rgba(246,162,30,.35); }
.process-step h4 { font-size:1rem; margin-bottom:8px; }
.process-step p { color:#666; font-size:.88rem; line-height:1.5; }
.process-connector { display:none; }
@media(min-width:768px){
  .process-connector { display:block; position:absolute; top:30px; right:-50%; width:100%; height:2px; background:repeating-linear-gradient(90deg,#ddd,#ddd 6px,transparent 6px,transparent 12px); z-index:0; }
  .process-step:last-child .process-connector { display:none; }
}

/* CTA final */
.cta-final { padding:80px 0; background:linear-gradient(135deg,#0c2d48 0%,#145da0 100%); text-align:center; color:#fff; }
.cta-final h2 { font-size:2.2rem; margin-bottom:15px; }
.cta-final p { font-size:1.1rem; opacity:.9; max-width:600px; margin:0 auto 30px; }
.btn-cta-gold { display:inline-block; background:var(--gradient-gold); color:#fff; padding:16px 45px; border-radius:50px; font-weight:700; font-size:1.1rem; text-transform:uppercase; letter-spacing:1px; box-shadow:0 6px 25px rgba(246,162,30,.45); transition:all .3s; border:none; text-decoration:none; }
.btn-cta-gold:hover { transform:translateY(-3px); box-shadow:0 10px 35px rgba(246,162,30,.55); color:#fff; text-decoration:none; }

/* Contact form section */
.contact-playa { padding:80px 0; background:#fff; }
.contact-form-wrapper { background:#fff; border-radius:16px; padding:40px; box-shadow:0 20px 50px rgba(0,0,0,.08); border:1px solid #eee; }

/* Responsive */
@media(max-width:768px){
  .hero-playa { padding-top:120px; text-align:center; }
  .stat-number { font-size:2rem; }
  .cta-final h2 { font-size:1.7rem; }
  .portfolio-item { height:240px; }
  .portfolio-caption { transform:translateY(0); opacity:1; }
}