/* Accenta Realty - Minimalist Home */

/* Box-sizing universal */
* { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#ffffff;
  background-color:#0f0f0f;  /* negro puro */
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* Hero */
.hero{ min-height:85vh; display:flex; align-items:center; }
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:48px;
  align-items:center;
}
.logo-wrap{ display:flex; align-items:center; justify-content:center; }
.logo{ max-width:360px; width:100%; height:auto; }

/* Typography */
h1, h2{
  font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
  line-height:1.15;
  margin:0 0 16px;
  letter-spacing:.5px;
}
h1{
  font-size: clamp(36px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: 0.5px;
}
h2{
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 500;
  margin-bottom: 20px;
}
.sub{
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  font-weight: 400;
  color: #e9e6e0;
  max-width: 46ch;
  margin-bottom: 28px;
}
.about p{
  max-width: 65ch;
  color:#e5e1da;
  font-size:20px;
  line-height:1.7;
  font-weight: 300;
}

/* Buttons */
.ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* Base: negro con borde blanco */
.btn,
.btn-primary,
.btn-ghost{
  padding:14px 32px;
  font-weight:600;
  border-radius:12px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  border:1.5px solid #ffffff;
  background:#0f0f0f;    /* negro por default */
  color:#ffffff;         /* texto blanco */
  cursor:pointer;
  min-width:240px;       /* iguala tamaño mínimo en desktop */
  text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Hover invertido solo en dispositivos con hover real */
@media (hover: hover) {
  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover{
    background:#ffffff; color:#0f0f0f; border-color:#ffffff;
  }
}

/* Divider */
.divider{ border:0; height:1px; background: rgba(255,255,255,.08); margin:80px 0; }

/* About */
.about{ padding:24px 0 80px; }

/* ---------- Destinations (informativa, sin CTAs) ---------- */
.destinations { padding: 80px 0; background: #0f0f0f; }
.destinations-sub { color: #e9e6e0; margin: 8px 0 28px; max-width: 65ch; }

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dest-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  background: #141414;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform .18s ease, border-color .18s ease;
}
.dest-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.2);
}

/* Imagen de destino: centrada y recorte proporcionado */
.dest-media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background:#202020; }
.dest-media img {
  width:100%;
  height:100%;
  object-fit: cover;         /* rellena sin deformar */
  object-position: center;   /* base centrada */
  display:block;
  border:0;
}

/* Ajustes finos por destino (tweaks de encuadre) */
.dest-card.mexico    .dest-media img { object-position: center 60%; }  /* mueve foco un poco hacia abajo */
.dest-card.panama    .dest-media img { object-position: center 45%; }  /* sube ligeramente el foco */
.dest-card.costarica .dest-media img { object-position: 50% 50%; }     /* centrado total */

/* Texto */
.dest-body { padding: 18px; display:grid; gap:10px; align-content:start; }
.dest-title { font-size: 20px; margin:0; }
.dest-desc { margin:0; color:#e5e1da; line-height:1.6; }

/* ---------- Contact Section ---------- */
.contact { padding: 80px 0 100px; background-color: #0f0f0f; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}
.contact-sub { color: #e9e6e0; margin: 10px 0 28px; max-width: 60ch; }
.contact-form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 10px; }
label { font-size: 14px; color: #ddd8cf; }

input, textarea {
  width: 100%; background: #141414; color: #ffffff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  padding: 14px 14px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  font-family: inherit; font-size: 16px;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.4); }
input:focus, textarea:focus {
  border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

.form-actions {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px;
}

/* Cards laterales */
.contact-quick { display: grid; gap: 20px; }
.contact-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 20px; background: #131313;
}
.contact-card h3 { margin: 0 0 8px; font-size: 20px; }
.contact-card p  { margin: 0 0 16px; color: #e5e1da; }

/* Estado del formulario */
.form-status{
  margin-top: 8px; font-size: 14px;
  min-height: 20px; color: #e9e6e0;
}

/* Footer */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:32px 0 48px;
  color:#ddd8cf;
  font-size:14px;
  display:flex;
  justify-content:center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .destinations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .hero{ min-height: 78vh; }
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .logo{ max-width:300px; }
  .sub{ max-width: 100%; }

  /* Botones: exactamente iguales en móvil */
  .ctas{
    flex-direction: column; gap:12px; align-items: stretch;
  }
  .btn, .btn-primary, .btn-ghost{
    min-width: 0; width: 100%; display:block; padding:16px 20px;
  }

  /* Contact responsive */
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Forzar H1 en una sola línea en móvil */
  h1{
    font-size: 30px;         /* ajusta a 28–32 si lo ves necesario */
    white-space: nowrap; overflow: hidden; text-overflow: clip;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 640px){
  .destinations { padding: 56px 0; }
  .destinations-grid { grid-template-columns: 1fr; }
  .dest-title { font-size: 18px; }
}