:root{--navy:#1f2f46;--gold:#b88a3b;--bg:#f6f7fb}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(184,138,59,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(31,47,70,.22), transparent 55%),
    var(--bg);
  color:#0f172a
}
a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:24px}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.06)
}

/* NAV WRAP */
.nav{
  position:relative; /* necesario para que el menú móvil flote relativo al header */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 24px
}

.navRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;      /* escritorio: no romper líneas */
  justify-content:flex-end;
  max-width:none;        /* evita límites raros */
}

.navRight .pill{max-width:100%}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px}
.pill{padding:10px 14px;border:1px solid rgba(15,23,42,.10);background:#fff;border-radius:999px;font-weight:800;cursor:pointer}
.menu{position:relative}
.dropdown{position:absolute;right:0;top:44px;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:16px;box-shadow:0 10px 30px rgba(15,23,42,.10);padding:8px;min-width:160px;display:none}
.dropdown.open{display:block}
.dropdown button{width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:0;background:transparent;cursor:pointer;font-weight:700}
.dropdown button:hover{background:rgba(15,23,42,.04)}

/* Header links + mobile menu */
.navLinks{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.pillLink{background:rgba(255,255,255,.85)}

.navBurger{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer
}
.navBurger span{display:block;width:18px;height:2px;background:rgba(15,23,42,.84);border-radius:99px}

/* Mobile menu: hidden by default, NEVER affects layout (floats) */
.mobileMenu{
  display:none;
  position:absolute;
  right:14px;
  top:64px;
  z-index:9999;
  padding:0;
}
.mobileMenu.open{display:block}
.mobileMenuCard{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:12px;
  box-shadow:0 18px 40px rgba(15,23,42,.10)
}
.mobileItem{display:block;padding:12px 12px;border-radius:16px;font-weight:950}
.mobileItem:hover{background:rgba(15,23,42,.04)}
.mobileDivider{height:1px;background:rgba(15,23,42,.10);margin:10px 0}
.mobileLabel{font-size:12px;font-weight:950;color:rgba(15,23,42,.62);margin:0 0 8px 2px}
.mobileLangBtns{display:flex;gap:10px;flex-wrap:wrap}

/* MOBILE BREAKPOINT */
@media(max-width:899px){
  .navLinks{display:none}
  .navBurger{display:flex}

  /* en móvil permitimos respirar un poco */
  .nav{padding:12px 14px}
  .container{padding:16px}

  /* en móvil no queremos que el header se rompa raro */
  .navRight{
    justify-content:flex-end;
    max-width:100%;
    flex-wrap:nowrap;
  }

  /* En móvil: el selector de idioma SOLO dentro del menú */
  .navRight > .menu{display:none}
}

/* Hero */
.hero{padding:28px 0 10px}
.heroCard{background:linear-gradient(135deg, rgba(31,47,70,.92), rgba(184,138,59,.72));border-radius:26px;color:#fff;padding:22px;box-shadow:0 18px 40px rgba(15,23,42,.18)}
.heroTitle{font-size:34px;font-weight:950;letter-spacing:-.02em;margin:0}
.heroSub{margin:8px 0 0;opacity:.92;font-weight:700}

/* Inputs */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
label{font-size:12px;font-weight:900;color:rgba(15,23,42,.74)}
input,select,textarea{border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:14px;padding:10px 12px;font-size:14px;outline:none;min-width:0}
input:focus,select:focus,textarea:focus{border-color:rgba(184,138,59,.7);box-shadow:0 0 0 4px rgba(184,138,59,.16)}

/* Buttons */
.btn{border:0;border-radius:16px;padding:12px 16px;font-weight:950;cursor:pointer}
.btnPrimary{color:#fff;background:linear-gradient(90deg,var(--navy),var(--gold));box-shadow:0 14px 28px rgba(15,23,42,.18)}
.btnGhost{background:#fff;border:1px solid rgba(15,23,42,.12)}

/* Filters wrapper */
.filters{margin-top:14px;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:14px}

/* =========================
   PRO SEARCH FORM
   ========================= */
.searchForm{display:flex;flex-direction:column;gap:12px}
.filtersGrid{display:grid;gap:10px;width:100%;min-width:0}
.filtersGrid input,.filtersGrid select{width:100%;min-width:0}

/* Simple grid: 1 -> 2 -> 5 */
.basicGrid5{grid-template-columns:1fr}
@media (min-width:700px){ .basicGrid5{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .basicGrid5{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* Actions row */
.actionsRow{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap}
.actionsRow .btn{white-space:nowrap}
@media (max-width:699px){
  .actionsRow{justify-content:stretch}
  .actionsRow .btn{width:100%}
}

/* Advanced hidden by default */
#advancedBox{display:none}
#searchForm.advOpen #advancedBox{display:grid}

/* Advanced grid: 1 -> 2 -> 3 */
.advGrid{grid-template-columns:1fr}
@media (min-width:700px){ .advGrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .advGrid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Mobile safety: never show advanced unless advOpen */
@media (max-width:699px){
  #advancedBox{display:none !important}
  #searchForm.advOpen #advancedBox{display:grid !important}
}

/* Toolbar / chips */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,.12);font-weight:900;font-size:13px;cursor:pointer}

/* Cards */
.cardGrid{margin-top:14px;display:grid;gap:14px}
@media(min-width:900px){.cardGrid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:22px;overflow:hidden;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,42,.12)}
.card img{width:100%;height:190px;object-fit:cover;background:#e2e8f0}
.badge{position:absolute;top:12px;left:12px;padding:8px 10px;border-radius:999px;font-weight:950;font-size:12px;color:#fff;background:linear-gradient(90deg,var(--navy),var(--gold));box-shadow:0 12px 24px rgba(15,23,42,.18)}
.ref{position:absolute;top:12px;right:12px;padding:8px 10px;border-radius:999px;font-weight:950;font-size:12px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9)}
.heart{position:absolute;right:12px;bottom:148px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 24px rgba(15,23,42,.12)}
.heart svg{width:18px;height:18px}
.cardBody{padding:14px}
.title{font-weight:950;font-size:18px;letter-spacing:-.01em}
.meta{margin-top:4px;color:rgba(15,23,42,.62);font-weight:800;font-size:13px}
.priceRow{margin-top:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.priceNow{font-weight:950;font-size:22px;color:var(--navy)}
.priceBefore{color:rgba(15,23,42,.55);text-decoration:line-through;font-weight:900}
.discount{font-weight:950;font-size:12px;padding:6px 8px;border-radius:999px;background:rgba(184,138,59,.14);border:1px solid rgba(184,138,59,.34);color:rgba(15,23,42,.86)}
.facts{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;color:rgba(15,23,42,.68);font-weight:900;font-size:13px}

.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.pager .btn{padding:10px 12px;border-radius:14px}

.footer{padding:28px 0;color:rgba(15,23,42,.55);font-weight:800}

/* Panels / admin layout */
.adminWrap{display:grid;gap:14px}
@media(min-width:900px){.adminWrap{grid-template-columns:360px 1fr}}
.panel{background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:22px;padding:14px;box-shadow:0 12px 30px rgba(15,23,42,.08)}
.row2{display:grid;gap:10px}
@media(min-width:900px){.row2{grid-template-columns:repeat(2,1fr)}}
.small{font-size:12px;color:rgba(15,23,42,.58);font-weight:800}

/* Thumbs / upload UI */
.thumbRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.thumb{width:96px;height:74px;border-radius:14px;overflow:hidden;border:1px solid rgba(15,23,42,.12);background:#e2e8f0;position:relative;cursor:grab}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:4px 7px;font-weight:950;font-size:12px;cursor:pointer}
.dropzone{border:1.5px dashed rgba(15,23,42,.22);border-radius:18px;padding:14px;background:rgba(248,250,252,.8)}
.dropzone.drag{background:rgba(184,138,59,.10);border-color:rgba(184,138,59,.55)}

/* Premium SVG icon sizing */
.iconSvg{ width:16px; height:16px; display:inline-block; vertical-align:-3px; }
.factPill{padding:10px 12px;border:1px solid rgba(15,23,42,.08);border-radius:999px;background:rgba(255,255,255,.72);font-weight:900}
.factPill .iconSvg{ width:16px; height:16px; vertical-align:-3px; }
.facts span .iconSvg{ width:16px; height:16px; vertical-align:-3px; margin-right:6px; }

/* ===== Lightbox gallery (listing) ===== */
.noScroll{ overflow:hidden; }
.lb{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.lb.open{ display:flex; }
.lbImg{
  max-width: min(1080px, 96vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  background: rgba(255,255,255,.08);
}
.lbClose{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}
.lbNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 34px;
  cursor: pointer;
}
.lbPrev{ left: 14px; }
.lbNext{ right: 14px; }
.lbCount{
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 13px;
}
@media (max-width: 699px){
  .lbNav{ width: 44px; height: 44px; font-size: 30px; }
  .lbImg{ max-height: 80vh; border-radius: 16px; }
}

/* Mobile layout polish */
@media(max-width:899px){
  .heroCard{padding:18px}
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .toolbar > div{width:100%}
  .panel{padding:16px}
  .card img{height:190px}
  .footer{padding:22px 16px}
}

/* ===== FORCE PRO GRID (fix definitivo) ===== */
#searchForm .basicGrid5{ grid-template-columns:1fr !important; }
@media (min-width:700px){
  #searchForm .basicGrid5{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (min-width:1100px){
  #searchForm .basicGrid5{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; }
}

#searchForm #advancedBox{ display:none !important; }
#searchForm.advOpen #advancedBox{ display:grid !important; }

#searchForm .advGrid{ grid-template-columns:1fr !important; }
@media (min-width:700px){
  #searchForm .advGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (min-width:1100px){
  #searchForm .advGrid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

/* --- Admin responsive header (v6) --- */
.adminListTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adminSearch{margin-left:auto;max-width:320px;width:100%;border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:14px;padding:10px 12px;font-size:14px;min-width:0}
@media(max-width:899px){
  .adminListTop{align-items:stretch}
  .adminListTop #btnNew{width:100%}
  .adminSearch{max-width:none;margin-left:0}
}

/* Sold ribbon */
.soldBadge{
  position:absolute;
  top:12px;
  left:12px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  color:#fff;
  background:linear-gradient(90deg, rgba(31,47,70,.96), rgba(184,138,59,.92));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 24px rgba(15,23,42,.18);
  backdrop-filter:blur(6px);
  z-index:2;
}
.card .badge + .soldBadge{top:52px}

/* ✅ Reserved ribbon (NEW) */
.reservedBadge{
  position:absolute;
  top:12px;
  left:12px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  color:#0f172a;
  background:rgba(184,138,59,.18);
  border:1px solid rgba(184,138,59,.40);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
  backdrop-filter:blur(6px);
  z-index:2;
}
/* Si hay destacado, bajarlo como con vendido */
.card .badge + .reservedBadge{ top:52px; }
/* Si por cualquier motivo coexistieran (no debería), el reservado baja */
.card .soldBadge + .reservedBadge{ top:52px; }

/* Featured responsive grid (mobile 1 col, tablet 2, desktop 3) */
.featuredGrid{grid-template-columns:1fr}
@media(min-width:700px){.featuredGrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.featuredGrid{grid-template-columns:repeat(3,1fr)}}

/* ===== Admin dashboard PRO layout ===== */
.adminDashboard{padding:16px}
.adminTabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.adminTabs .pill{flex:0 0 auto}
.adminTabs .pill.isActive{border-color:rgba(184,138,59,.55);box-shadow:0 0 0 4px rgba(184,138,59,.14)}
.adminPane{width:100%}
.adminSectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.adminH2{font-weight:950;font-size:18px;letter-spacing:-.01em}
.adminActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.adminSearch{width:min(520px,100%);max-width:100%}
.adminInnerPanel{overflow:hidden}
@media(max-width:699px){
  .adminDashboard{padding:14px}
  .adminSectionHead{align-items:stretch}
  .adminActions{width:100%}
  .adminActions .btn{width:100%}
  .adminSearch{width:100%}
  .row2{grid-template-columns:1fr !important}
  .pill{width:auto;max-width:100%}
}

/* CALL BUTTON HERO */
.heroCallWrap{ margin-top:14px; }
.heroCallBtn{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:18px;
  padding:14px 18px;
  text-decoration:none;
  color:#0f172a;
  font-weight:800;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  transition:all .18s ease;
}
.heroCallBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(15,23,42,.14);
}
.heroCallIcon{ width:22px; height:22px; color:var(--gold); }
.heroCallText{ display:flex; flex-direction:column; line-height:1.1; }
.heroCallSmall{ font-size:12px; opacity:.6; font-weight:700; }
.heroCallNumber{ font-size:18px; font-weight:950; letter-spacing:.3px; }
@media(max-width:699px){
  .heroCallBtn{ padding:16px; border-radius:20px; }
  .heroCallNumber{ font-size:20px; }
}
.heroCallBtn svg,
.heroCallIcon{
  width:22px !important;
  height:22px !important;
  min-width:22px;
  min-height:22px;
  max-width:22px;
  max-height:22px;
  flex-shrink:0;
}
.heroCallBtn svg{ display:block; }

/* WhatsApp floating button (premium) */
.waFloat{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  font-weight:950;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.waFloat:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 54px rgba(15,23,42,.22);
  filter:saturate(1.05);
}
.waIcon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.waIcon svg{
  width:22px !important;
  height:22px !important;
  display:block;
  color:#fff;
}
.waText{ font-size:14px; letter-spacing:.2px; }
@media(max-width:699px){
  .waFloat{ padding:12px; }
  .waText{ display:none; }
}

/* Flags next to phone */
.heroCallNumber {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flags {
  display: flex;
  gap: 5px;
}

.flags img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.phoneNumber {
  font-weight: 600;
}


/* Premium inline SVG icons (no emojis) */
.svgIcon{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:-3px;
  margin-right:8px;
  color:currentColor;
}
.svgIcon.sm{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.factIcon{width:16px;height:16px;margin-right:8px;vertical-align:-3px}

/* ICONOS GENERALES */
.icon,
svg.icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: inline-block;
  flex-shrink: 0;
}

/* ICONOS EN CAJAS DE SERVICIOS */
.serviceIcon svg,
.installIcon svg,
.contactIcon svg {
  width: 48px;
  height: 48px;
}

/* ICONOS GRANDES (secciones principales) */
.installIconLarge svg {
  width: 64px;
  height: 64px;
}

/* ICONOS CONTACTO */
.contactIcon svg {
  width: 42px;
  height: 42px;
}

/* ALINEACIÓN */
.serviceItem,
.installItem,
.contactItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* PREVENIR SVG GIGANTES */
svg {
  max-width: 100%;
  height: auto;
}