/* =========================
   PALETA Y BASE
   ========================= */
:root{
  --bs-primary:#3fabcb;        /* azul marca */
  --bs-primary-rgb:63,171,203;
  --bs-success:#90b03f;        /* verde marca */
  --bs-success-rgb:144,176,63;
}

/* Botones */
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-bg:#3fabcb; --bs-btn-border-color:#3fabcb;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#3899b7; --bs-btn-hover-border-color:#3591ac;
  --bs-btn-focus-shadow-rgb:63,171,203;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#3288a2; --bs-btn-active-border-color:#2f8199;
}
.btn-outline-primary{
  --bs-btn-color:#3fabcb; --bs-btn-border-color:#3fabcb;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#3fabcb; --bs-btn-hover-border-color:#3fabcb;
  --bs-btn-focus-shadow-rgb:63,171,203;
}
.btn-success{
  --bs-btn-color:#fff; --bs-btn-bg:#90b03f; --bs-btn-border-color:#90b03f;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#829e39; --bs-btn-hover-border-color:#7a9535;
  --bs-btn-focus-shadow-rgb:144,176,63;
}

/* Links */
.link-primary{ color:#3fabcb!important; }
.link-primary:hover,.link-primary:focus{ color:#3591ac!important; }

/* Navbar: solo hover en verde */
.navbar .nav-link{ color:#212529; transition: color .15s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--bs-success)!important; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{ color:#fff; background-color:var(--bs-success); }

/* Utilidades */
html,body{ overflow-x:hidden; }
.object-fit-cover{ object-fit:cover; }

/* =========================
   HERO contacto
   ========================= */
.thermo-hero{
  position:relative;
  background: center/cover no-repeat var(--hero-img);
  min-height: clamp(420px, 60vh, 640px);
  padding-block: clamp(48px, 10vh, 84px);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.thermo-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); z-index:0;
}
.thermo-hero > .container{ position:relative; z-index:1; max-width:980px; }
.hero-title{ font-size: clamp(2rem, 5.5vw, 3rem); }
.hero-sub{
  font-size: clamp(.95rem, 2.1vw, 1.05rem);
  line-height:1.35;
  background: rgba(0,0,0,.35);
  border-radius:.65rem; padding:.6rem .9rem; margin-top:.75rem;
}

/* =========================
   TARJETA FORMULARIO (abierta)
   ========================= */
.contact-card{
  border: 2px solid var(--bs-success);
  background: #e9ecef;              /* gris claro maquetación */
  border-radius: .5rem;
  padding: 1rem;
}
@media (min-width: 992px){
  .contact-card{ padding: 1.25rem 1.5rem; }
}

/* bloque izquierdo */
.cf-aside h3{ letter-spacing:.3px; }
.cf-logo{ height:44px; }

/* bloque derecho (form) */
.cf-body .form-control,
.cf-body .form-select{
  border-radius:.35rem;
  border:1px solid rgba(0,0,0,.28);
  background:#fff;
}
.cf-body .form-control:focus{
  border-color: rgba(var(--bs-success-rgb), .6);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .18);
}

/* =========================
   REDES SOCIALES
   ========================= */
.badge-circle{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  flex: 0 0 56px;
}
.badge-circle i{ font-size:28px; color:#fff; }

/* Instagram con degradado */
.ig-badge{
  background:
    radial-gradient(30% 30% at 30% 30%, #ffd776 0 60%, transparent 60%),
    radial-gradient(45% 45% at 70% 30%, #ff4f8b 0 60%, transparent 60%),
    linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* LinkedIn */
.li-badge{ background:#0a66c2; }

/* Imagen dron */
.follow-drone{ max-width: 430px; }

/* Lista vertical de redes */
.social-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.social-item{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #111;
}
.social-item:hover .badge-circle{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.social-item:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
  border-radius: .5rem;
}

/* =========================
   Tarjeta CTA de contacto
   ========================= */
.cta-mini-card{
  border:2px solid var(--bs-success);
  border-radius:.75rem;
  background: linear-gradient(180deg, rgba(var(--bs-success-rgb),.07), #ffffff 38%);
  padding:1.1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cta-mini-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--bs-success) 85%, #000 15%);
}
.cta-header{ gap: 18px; }
@media (min-width: 768px){ .cta-header{ gap: 22px; } }

.cta-icon{
  width:56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:3px solid var(--bs-success);
  background:#fff; color:var(--bs-success);
  font-size:1.5rem;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* Info-lines (email/teléfono/dirección) */
.info-list{
  display: grid;
  gap: .55rem;
}
.info-line{
  display: flex;
  gap: .75rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .65rem;
  padding: .65rem .75rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.info-line:hover{
  border-color: rgba(var(--bs-success-rgb), .65);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.info-key{
  flex: 0 0 auto;
  min-width: 96px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-success);
}
.info-val{
  font-weight: 700;
  color: #111;
  word-break: break-word;
}

/* Botón WhatsApp grande con logo redondo */
.btn-wa{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#25d366; color:#fff; border:0;
  padding:.65rem 1rem; border-radius:9999px;
  font-weight:800;
  box-shadow:0 8px 22px rgba(37,211,102,.35);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-wa:hover{ background:#1ebe5d; box-shadow:0 10px 26px rgba(37,211,102,.45); }
.btn-wa:active{ transform: translateY(1px); }
.btn-wa.btn-lg{ padding: .8rem 1.2rem; font-size: 1rem; }

.wa-round{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#25d366; font-size:1.15rem;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

/* =========================
   Tarjeta MAPA
   ========================= */
.map-card{
  border:2px solid var(--bs-success);
  border-radius:.75rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.map-card header{
  background: rgba(var(--bs-success-rgb), .08);
  padding:.6rem .9rem;
  letter-spacing:.2px;
}
.map-iframe{ border:0; }
@media (min-width: 992px){
  .map-iframe{ min-height: 420px; }
}
.map-footer{
  padding: .7rem .9rem;
  background: rgba(0,0,0,.02);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* =========================
   FOOTER — hover gris elegante
   ========================= */
footer.bg-success a.link-dark.text-decoration-none{
  color: rgba(0,0,0,.82) !important;
  padding: .15rem .4rem; border-radius: .35rem;
  transition: color .15s ease, background-color .15s ease;
}
footer.bg-success a.link-dark.text-decoration-none:hover,
footer.bg-success a.link-dark.text-decoration-none:focus{
  color: rgba(0,0,0,.98) !important; background-color: rgba(0,0,0,.06);
}
footer.bg-success .btn-outline-dark{
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
footer.bg-success .btn-outline-dark:hover,
footer.bg-success .btn-outline-dark:focus{
  background-color: rgba(0,0,0,.08); border-color: rgba(0,0,0,.55); color:#000; transform: translateY(-1px);
}
footer.bg-success a:focus-visible{
  outline: 2px solid rgba(0,0,0,.45); outline-offset: 2px; border-radius: .35rem;
}
/* Texto bajo el logo en el formulario */
.cf-brand{
  display:inline-block;
  font-weight: 600;
  color:#111;
  font-size: 1rem;
  letter-spacing: .2px;
  text-transform: lowercase;
}
/* Marca del formulario: apilar logo + texto */
.cf-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.cf-mark .cf-logo{
  height:44px;
  display:block;              /* asegura salto de línea */
}

.cf-mark .cf-brand{
  display:block;              /* fuerza que vaya debajo */
  margin-top:.35rem;
  font-weight:600;
  color:#111;
  font-size:1rem;
  letter-spacing:.2px;
  text-transform:lowercase;
  line-height:1;
}
/* ===== HERO Contacto: background responsive (WebP) ===== */
/* móvil por defecto */
.thermo-hero{
  background-image: url('../../Img/CONTACTO/contactoPortada-960.webp') !important;
}
/* tablet */
@media (min-width: 768px){
  .thermo-hero{
    background-image: url('../../Img/CONTACTO/contactoPortada-1600.webp') !important;
  }
}
/* desktop */
@media (min-width: 1200px){
  .thermo-hero{
    background-image: url('../../Img/CONTACTO/contactoPortada-2000.webp') !important;
  }
}
/* pantallas grandes */
@media (min-width: 1600px){
  .thermo-hero{
    background-image: url('../../Img/CONTACTO/contactoPortada-2400.webp') !important;
  }
}

/* ===== Marca apilada (logo + texto) ===== */
.cf-logo{
  width: clamp(140px, 18vw, 200px);
  height: auto;
  display: inline-block;
}
.cf-brand{
  display:block;
  font-weight:700;
  color:#3fabcb;
  margin-top:.25rem;
  letter-spacing:.4px;
  text-transform: lowercase;
}

/* ===== Imagen dron (solo por si hace falta un límite) ===== */
.follow-drone{
  max-width: 520px;         /* coincide con el sizes del <picture> */
}
/* ===== CONTACTO: logo + texto en la tarjeta (centrado y proporcionado) ===== */
.contact-card .cf-aside{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.contact-card .cf-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width: 240px;
  margin-inline:auto;
}

/* Logo más pequeño y sin deformación */
.contact-card .cf-mark .cf-logo{
  width: clamp(130px, 16vw, 180px);  /* ↓ más pequeño que antes */
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  display:block;
}

/* Texto bajo el logo: en negro como estaba */
.contact-card .cf-mark .cf-brand{
  margin-top:.35rem;
  font-weight:600;
  color:#111;                 /* negro */
  letter-spacing:.2px;
  text-transform:lowercase;
  line-height:1;
}