/*
Theme Name: Principal es prueba prueba pruba
Theme URI: http://lacostahaus.com
Author: TaigerOMG
Author URI: http://lacostahaus.com/inmuebles
Description: Plantilla para los inmuebles (tema oscuro).
Version: 1.1
*/

/* ====== BASE ====== */
:root{
  --bg:#1a1a1a;
  --bg-2:#2a2a2a;
  --text:#ffffff;
  --muted:#c9c9c9;
  --border:#3a3a3a;
  --accent:#3498db;
  --success:#28a745;
}

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family:Arial, sans-serif;
  background-color:var(--bg);
  color:var(--text);
}

/* Contenedores */
.container-custom{ width:90%; margin:0 auto; }
.container-custom2{ width:95%; margin:0 auto; }
.container, .container-fluid{ padding:50px 0; }
.container-fluid{ padding-left:5%; padding-right:5%; }

/* Tipografía */
h1,h2,h3{ margin:10px 0; }
h1{ font-size:4em; font-weight:700; margin-bottom:20px; }
h2{ font-size:2.5em; font-weight:300; margin-bottom:20px; }
h3{ font-size:1.5em; }
p{ max-width:4000px; margin:10px auto; text-align:center; color:var(--muted); }

/* Utilidades */
.no-underline{ text-decoration:none; }
.section{
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:var(--text); text-shadow:2px 2px 4px rgba(0,0,0,.9); padding:20px;
}
.space{ height:75vh; } .space2{ height:20vh; } .space3{ height:20vh; }
.space4{ height:40vh; } .space5{ height:5vh; } .space6{ margin-bottom:200px; }
.icon{ max-width:50px; margin-top:20px; }
.texto{ font-size:2em; font-weight:700; margin-bottom:70px; }
.texto2{ font-size:1.5em; font-weight:700; margin-bottom:20px; color:var(--text); }

/* ====== HEADER / NAV ====== */
header{
  position:fixed; top:0; left:0; right:0;
  background-color:#1a1a1a;
  padding:15px 50px; height:80px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:1000; box-shadow:0 4px 10px rgba(0,0,0,.6);
}
body{ padding-top:80px; } /* hueco para el header */
header a img{ max-width:50px; height:auto; }
header ul{ display:flex; margin:0; padding:0; list-style:none; }
header ul li{ margin:0 10px; display:flex; align-items:center; }
header ul li a{
  color:var(--text); font-size:1.1em; padding:10px 20px; text-decoration:none; display:block; border-radius:5px;
}
header ul li a:hover{ background-color:aqua; color:#000; }

/* Dropdown idiomas */
header nav ul li.dropdown{ position:relative; }
header nav ul li.dropdown > a{ border-radius:5px; }
header nav ul li.dropdown:hover > a{ background-color:aqua; color:#000; }
header nav ul li.dropdown::after{
  content:""; position:absolute; top:100%; left:0; width:100%; height:12px;
}
header nav ul li .dropdown-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background-color:#2c2c2c; border-radius:5px; overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.3); z-index:999; width:max-content; min-width:140px; padding:5px 0;
}
header nav ul li.dropdown:hover .dropdown-menu{ display:block; }
header nav ul li .dropdown-menu li a{
  display:block; padding:10px 15px; color:var(--text); text-decoration:none;
}
header nav ul li .dropdown-menu li a:hover{ background-color:var(--accent); }

/* ====== BOTONES (gradiente) ====== */
button{
  border:0; cursor:pointer; border-radius:8px; color:#fff; font-size:18px;
  padding:16px 24px; transition:.3s;
  background-image:linear-gradient(150deg, #9500ff, #09f, #00DDFF);
}

/* ====== GALERÍA PRINCIPAL ====== */
.property-image{
  width:100%; height:600px; overflow:hidden; border-radius:10px;
  background-color:#0f0f0f; display:flex; align-items:center; justify-content:center;
}
.property-image img{
  width:100%; height:100%; object-fit:contain; border-radius:10px; background-color: #000;
}

/* Thumbnails */
.thumbnail-container{
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; padding:10px; background-color:var(--bg-2); border-radius:10px;
  scroll-snap-type:x mandatory;
}
.thumbnail-container img{
  width:120px; height:80px; object-fit:cover;
  cursor:pointer; border:2px solid var(--border); border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .08s ease;
  scroll-snap-align:start; outline:none;
}
.thumbnail-container img:hover{ border-color:var(--accent); }
.thumbnail-container img:active{ transform:scale(.98); }
.thumbnail-container img.active{
  border-color:var(--success);
  box-shadow:0 0 0 3px rgba(40,167,69,.35);
}
.thumbnail-container img:focus-visible{
  border-color:var(--success);
  box-shadow:0 0 0 3px rgba(40,167,69,.5);
}
/* Scrollbar sutil */
.thumbnail-container::-webkit-scrollbar{ height:8px; }
.thumbnail-container::-webkit-scrollbar-track{ background:#1f1f1f; border-radius:999px; }
.thumbnail-container::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:999px; }
.thumbnail-container::-webkit-scrollbar-thumb:hover{ background:#4a4a4a; }

/* ====== TARJETA / DETALLES PROPIEDAD ====== */
.property{
  background:#0f0f0f; border:1px solid var(--border);
  border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.25);
  overflow:hidden; position:relative;
}
.property .fh5co-property{
  background-size:cover; background-position:center center; height:350px; display:block; position:relative;
}
.property .status{
  background:var(--success); color:#fff; padding:10px 20px;
  position:absolute; top:20px; left:20px; font-size:1em; border-radius:30px;
}
.property .list-details{
  position:absolute; bottom:0; left:0; right:0; padding:15px;
  background:rgba(0,0,0,.7); color:#fff; list-style:none; margin:0;
  display:flex; justify-content:space-between; font-size:.8em;
}
.property .list-details li{ margin:0 5px; }

.property-details{ padding:20px; }
.property-details h3{ font-size:1.7em; margin-bottom:10px; color:#fff; }
.property-details .price{
  color:var(--success); font-size:1.6em; font-weight:700; margin-bottom:10px; display:block;
}
.property-details .address{
  color:#bdbdbd; font-size:.95em; display:flex; align-items:center;
}
.property-details .address i{ margin-right:5px; color:var(--success); }

/* Lista “solo línea inferior” en oscuro */
.list-group-item{
  background-color:transparent !important;
  color:#ffffff !important;
  border:none !important;
  border-bottom:1px solid rgba(255,255,255,.2) !important;
  border-radius:0 !important;
}
.list-group-item:hover{ background-color:rgba(255,255,255,.05) !important; }

/* Títulos centrados & texto a la izquierda dentro de .text-left */
.section-title{ text-align:center; margin-bottom:20px; color:#fff; }
.text-left p{ text-align:left; margin-bottom:15px; color:var(--muted); }

/* Imagen centrada genérica */
.centered-img{ display:block; margin:0 auto; max-width:100%; height:auto; }

/* ====== CONTACTO ====== */
.contact-container{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; margin:40px auto;
}
.contact-img{
  width:300px; height:300px; object-fit:cover; border-radius:50%;
  border:4px solid var(--accent); box-shadow:0 6px 20px rgba(0,0,0,.6);
  transition:transform .3s ease, box-shadow .3s ease; margin-bottom:20px;
}
.contact-img:hover{ transform:scale(1.05); box-shadow:0 10px 30px rgba(0,0,0,.8); }

/* ====== ¡INTENCIONAL! override de Bootstrap ====== */
/* Esto centra las filas y alinea items; lo pides “a posta”. */
.row{
  display:flex; justify-content:center; align-items:center;
}

/* ====== RESPONSIVE ====== */
/* Tablets landscape: 768–991 */
@media (min-width:768px) and (max-width:991px){
  .space2{ height:20vh; }
  h1{ font-size:2.5em; text-align:center; margin-bottom:16px; }
  h2{ font-size:1.8em; text-align:center; margin-bottom:16px; }
  h3{ font-size:1.2em; text-align:center; margin:7px 0; }
  p{ max-width:3000px; margin:7px auto; }
  header ul li a{ font-size:.9em; padding:7px 16px; }
  .content{ margin-top:70px; }
  .texto{ font-size:1.6em; margin-bottom:55px; }
  .texto2{ font-size:1.2em; margin-bottom:16px; }
  .container{ padding:40px 0; }
  .heading-section h3{ font-size:1.6em; margin-bottom:16px; }
  .heading-section p{ font-size:.85em; margin-bottom:30px; }
  .property-details{ padding:16px; }
  .property-details h3{ font-size:1.4em; }
  .property-details .price{ font-size:1.3em; }
  .thumbnail-container img{ width:110px; height:74px; }
}

/* Tablets portrait & teléfonos grandes: 576–767 */
@media (min-width:576px) and (max-width:767px){
  .space2{ height:10vh; }
  h1{ font-size:1.8em; text-align:center; margin-bottom:14px; }
  h2{ font-size:1.5em; text-align:center; margin-bottom:14px; }
  h3{ font-size:1.1em; text-align:center; }
  p{ max-width:2500px; margin:6px auto; }
  header ul li a{ font-size:.8em; padding:6px 14px; }
  .content{ margin-top:65px; }
  .texto{ font-size:1.4em; margin-bottom:50px; }
  .texto2{ font-size:1.1em; margin-bottom:14px; }
  .container{ padding:35px 0; }
  .property-details{ padding:14px; }
  .property-details h3{ font-size:1.3em; }
  .property-details .price{ font-size:1.2em; }
  .thumbnail-container img{ width:104px; height:70px; }
}

/* Teléfonos ≤575 */
@media (max-width:575px){
  .space2{ height:10vh; }
  h1{ font-size:1.2em; text-align:center; margin-bottom:12px; }
  h2{ font-size:1em; text-align:center; margin-bottom:12px; }
  h3{ font-size:1em; }
  p{ max-width:2000px; margin:5px auto; }
  header ul li a{ font-size:.7em; padding:5px 12px; }
  .content{ margin-top:60px; }
  .texto{ font-size:1.2em; margin-bottom:45px; }
  .texto2{ font-size:1em; margin-bottom:12px; }
  .container{ padding:30px 0; }
  .property-details{ padding:12px; }
  .property-details h3{ font-size:1.2em; }
  .property-details .price{ font-size:1.1em; }
  .thumbnail-container img{ width:96px; height:64px; }
}
.row-left { 
  justify-content: flex-start !important; 
  align-items: flex-start !important; 
}
.row-left > [class^="col-"], 
.row-left > [class*=" col-"] { 
  padding-left: 0 !important; 
}