/* ============================================================
   MIRADOR DEL ARIARI — contact.css
   ============================================================ */

/* ── UBICACIÓN ── */
.ubic-wrap {
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:start; margin-top:56px;
}
.map-box {
  position:relative; height:440px;
  border:1px solid var(--borde); overflow:hidden;
}
.map-box iframe {
  width:100%; height:100%; border:none;
  filter:sepia(.35) hue-rotate(185deg) brightness(.65) contrast(1.15);
}
.map-lbl {
  position:absolute; bottom:16px; left:16px;
  background:rgba(7,12,20,.9); border:1px solid var(--borde2);
  padding:10px 16px;
  font-family:var(--sans); font-size:9px;
  letter-spacing:3px; text-transform:uppercase; color:var(--cobre2);
}

.ubic-list { display:flex; flex-direction:column; gap:14px; }
.ubic-it {
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 22px; border:1px solid var(--borde);
  transition:border-color .3s;
}
.ubic-it:hover { border-color:var(--borde2); }
.ubic-ico { font-size:24px; flex-shrink:0; margin-top:2px; }
.ubic-txt b { display:block; font-size:12px; font-weight:500; color:var(--marfil); margin-bottom:4px; font-family:var(--sans); }
.ubic-txt s { font-size:13px; color:var(--pizarra); line-height:1.55; text-decoration:none; }
.ubic-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ubic-tag {
  font-size:10px; font-family:var(--sans);
  background:rgba(14,36,66,.5); border:1px solid var(--borde);
  padding:3px 10px; color:var(--pizarra);
}

/* ── TESTIMONIOS ── */
.test-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-top:56px;
}
.test {
  padding:32px; border:1px solid var(--borde);
  background:var(--noche2); position:relative; overflow:hidden;
  transition:border-color .4s;
}
.test:hover { border-color:var(--borde2); }
.test::before {
  content:'"'; position:absolute; top:8px; right:18px;
  font-family:var(--serif); font-size:100px;
  color:rgba(184,115,51,.06); line-height:1; pointer-events:none;
}
.test-stars { color:var(--cobre2); font-size:13px; letter-spacing:3px; margin-bottom:14px; }
.test-txt { font-size:14px; color:var(--pizarra); line-height:1.75; font-style:italic; margin-bottom:22px; }
.test-au b { display:block; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--marfil); margin-bottom:2px; }
.test-au s { font-size:10px; color:var(--pizarra); letter-spacing:.5px; text-decoration:none; }

/* ── CONTACTO ── */
.contact-wrap {
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:80px;
}
.contact-info .titulo { margin-bottom:20px; }
.contact-info p { font-size:15px; color:var(--pizarra); line-height:1.8; margin-bottom:40px; }

.channels { display:flex; flex-direction:column; gap:12px; }
.ch {
  display:flex; align-items:center; gap:18px;
  padding:18px 22px; border:1px solid var(--borde);
  text-decoration:none; cursor:pointer;
  transition:all .35s;
}
.ch:hover { border-color:var(--borde2); background:rgba(184,115,51,.04); }
.ch-ico {
  width:44px; height:44px; flex-shrink:0;
  background:rgba(14,36,66,.8); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transition:border-color .3s;
}
.ch:hover .ch-ico { border-color:var(--cobre); }
.ch-txt b { display:block; font-size:12px; font-weight:500; color:var(--marfil); margin-bottom:2px; font-family:var(--sans); }
.ch-txt s { font-size:12px; color:var(--pizarra); text-decoration:none; }

/* Form */
.form-card {
  background:var(--noche2);
  border:1px solid var(--borde);
  padding:44px;
}
.form-h { font-family:var(--serif); font-size:30px; color:var(--marfil); margin-bottom:6px; }
.form-s { font-size:12px; color:var(--pizarra); margin-bottom:32px; }

.fg { margin-bottom:16px; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fl {
  display:block; font-family:var(--sans);
  font-size:9px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--pizarra); margin-bottom:8px;
}
.fi, .fs, .ft {
  width:100%; background:rgba(255,255,255,.03);
  border:1px solid rgba(143,163,187,.2);
  color:var(--marfil); padding:13px 16px;
  font-family:var(--sans); font-size:14px; font-weight:300;
  outline:none; border-radius:0; -webkit-appearance:none;
  transition:border-color .3s;
}
.fi:focus, .fs:focus, .ft:focus { border-color:var(--cobre); }
.fi::placeholder, .ft::placeholder { color:var(--pizarra); }
.fs option { background:var(--noche2); color:var(--marfil); }
.ft { resize:vertical; min-height:96px; }

.f-btn {
  width:100%; padding:15px;
  background:var(--cobre); border:none; color:var(--noche);
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; cursor:pointer;
  margin-top:8px;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition:background .35s, box-shadow .35s;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.f-btn:hover { background:var(--cobre2); box-shadow:0 8px 36px rgba(184,115,51,.45); }

/* ── CTA FINAL ── */
.cta-sec {
  padding:var(--sec) 0; text-align:center;
  background:
    linear-gradient(rgba(7,12,20,.88),rgba(7,12,20,.88)),
    url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1800&q=80')
    center/cover fixed;
  position:relative; overflow:hidden;
}
.cta-sec::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(14,36,66,.5), transparent);
}
.cta-sec .eyebrow { justify-content:center; }
.cta-sec .eyebrow::before { display:none; }
.cta-h {
  font-family:var(--serif);
  font-size:clamp(38px,5.5vw,72px); font-weight:400; line-height:1.05;
  color:var(--marfil); margin:20px 0 20px; position:relative; z-index:1;
}
.cta-h em { font-style:italic; color:var(--cobre2); }
.cta-p {
  font-size:16px; color:var(--pizarra);
  max-width:480px; margin:0 auto 40px; line-height:1.75;
  position:relative; z-index:1;
}
.cta-btns {
  display:flex; gap:14px; justify-content:center;
  flex-wrap:wrap; position:relative; z-index:1;
}

/* ── FOOTER ── */
footer {
  background:var(--noche);
  border-top:1px solid var(--borde);
  padding:64px 0 28px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:60px; margin-bottom:48px;
}
.ft-logo { font-family:var(--serif); font-size:22px; color:var(--marfil); margin-bottom:12px; }
.ft-desc { font-size:13px; color:var(--pizarra); line-height:1.7; max-width:270px; margin-bottom:24px; }
.ft-soc { display:flex; gap:10px; }
.ft-soc a {
  width:38px; height:38px; border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:all .3s;
}
.ft-soc a:hover { border-color:var(--cobre); background:rgba(184,115,51,.1); }
.ft-col h5 {
  font-family:var(--sans); font-size:9px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--pizarra);
  margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--borde);
}
.ft-col ul { display:flex; flex-direction:column; gap:10px; }
.ft-col ul li a { font-size:13px; color:var(--pizarra); transition:color .3s; }
.ft-col ul li a:hover { color:var(--cobre2); }
.footer-bot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--borde);
}
.footer-bot p { font-size:11px; color:var(--pizarra); }
.footer-bot a { color:var(--cobre2); transition:color .3s; }
.footer-bot a:hover { color:var(--marfil); }

/* ── WA FLOAT ── */
.wa {
  position:fixed; bottom:28px; right:28px; z-index:400;
  width:58px; height:58px; border-radius:50%;
  background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.35);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.wa:hover { transform:scale(1.12); box-shadow:0 8px 40px rgba(37,211,102,.55); }
.wa svg { width:28px; height:28px; fill:#fff; }
/* Pulse ring */
.wa::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(37,211,102,.5);
  animation:waPulse 2.5s ease-out infinite;
}
@keyframes waPulse {
  0%  { transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.7); opacity:0; }
}

/* ── LIGHTBOX ── */
.lb {
  position:fixed; inset:0; z-index:800;
  background:rgba(7,12,20,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s;
}
.lb.on { opacity:1; visibility:visible; }
.lb img {
  max-width:92vw; max-height:86vh; object-fit:contain;
  transform:scale(.92);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.lb.on img { transform:scale(1); }
.lb-close {
  position:absolute; top:24px; right:28px;
  font-size:32px; color:var(--marfil2); cursor:pointer;
  background:none; border:none; line-height:1;
  transition:color .3s;
}
.lb-close:hover { color:var(--cobre2); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .ubic-wrap { grid-template-columns:1fr; }
  .contact-wrap { grid-template-columns:1fr; }
  .test-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media(max-width:768px) {
  .test-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bot { flex-direction:column; gap:10px; text-align:center; }
  .fg-row { grid-template-columns:1fr; }
  .form-card { padding:28px 20px; }
  .cta-sec { background-attachment:scroll; }
}