:root {
    /* Propuesta B — paleta "La parcela" derivada del logo */
    --accent: #f59e0b;
    --green: #B10611;
    --green-dark: #8F050D;
    --green-light: #d34952;
    --orange: #F5813F;
    --dark: #2C2C2C;
    --text: #333;
    --text-light: #6E6E6E;
    --border: #E5E3DF;
    --bg: #F7F6F4;
    --white: #fff;;
    --radius: 6px;
    --shadow: 0 2px 16px rgba(0,0,0,0.09);
	--fondos : #FFFFFF;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Montserrat', sans-serif;
  }

  /* ── Iconos Google Material Symbols (reemplazo de emojis) ── */
  .gicon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .gicon.gicon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--white);
    font-size: 15px;
    line-height: 1.5;
  }

  /* ── NAV ── */
  nav {
    background: var(--white);
    border-bottom: 2px solid var(--dark);
    position: sticky; top: 0; z-index: 100;
  }
  /* ── fila superior: logo + buscador + acciones (Propuesta B: .barra) ── */
  .barra {
    display: flex; align-items: center; gap: 24px;
    padding: 14px 0;
  }
  /* ── fila inferior: solo enlaces de navegación (Propuesta B: nav.principal) ── */
  nav .nav {
    display: flex; align-items: center; justify-content: flex-start;
  }
  .nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700; font-size: 22px;
    color: var(--dark);
    letter-spacing: -0.5px;
    flex-shrink: 0;
    text-decoration: none; cursor: pointer;
  }
  .nav-logo img { width: 32px; height: 32px; flex-shrink: 0; }
  .nav-logo em { font-style: normal; color: var(--green); }

  /* ── decoración firma: rejilla del logo (usada en separadores de sección) ── */
  .pixeles{display:inline-grid;grid-template-columns:repeat(3,6px);grid-template-rows:repeat(3,6px);gap:1px;flex-shrink:0}
  .pixeles i{background:var(--dark);border-radius:1px}
  .pixeles i.r{background:var(--green)}
  .pixeles i.r + i{visibility:hidden}

  /* ── logo real como rejilla CSS (evita el PNG corrupto) ── */
  .pixeles-logo{display:inline-grid;grid-template-columns:repeat(3,10px);grid-template-rows:repeat(3,10px);gap:1.5px;flex-shrink:0}
  .pixeles-logo i{background:var(--dark);border-radius:0}
  .pixeles-logo i.r{background:var(--green)}
  .pixeles-logo i.r + i{visibility:hidden}
  /* solo la esquina externa de cada uno de los 4 píxeles de esquina */
  .pixeles-logo i:nth-child(1){border-top-left-radius:3px}
  .pixeles-logo i:nth-child(3){border-top-right-radius:3px}
  .pixeles-logo i:nth-child(7){border-bottom-left-radius:3px}
  .pixeles-logo i:nth-child(9){border-bottom-right-radius:3px}
  /* ── variante negativa (footer sobre fondo oscuro): cuadros blancos, centro rojo ── */
  .pixeles-logo.negativo i{background:#fff}
  .pixeles-logo.negativo i.r{background:var(--green)}

  /* ── animación de entrada: los cuadritos llegan desde la izquierda en
     cascada hasta formar el logo. Se repite periódicamente vía JS
     (ver index.php) reasignando la propiedad "animation". ── */
  @keyframes logoPixelIn {
    from { opacity: 0; transform: translateX(-100vw); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .nav-logo .pixeles-logo i {
    animation: logoPixelIn .5s cubic-bezier(.22,.68,.32,1) both;
  }
  .nav-logo .pixeles-logo i:nth-child(1) { animation-delay: .00s; }
  .nav-logo .pixeles-logo i:nth-child(2) { animation-delay: .07s; }
  .nav-logo .pixeles-logo i:nth-child(3) { animation-delay: .16s; }
  .nav-logo .pixeles-logo i:nth-child(4) { animation-delay: .04s; }
  .nav-logo .pixeles-logo i:nth-child(5) { animation-delay: .20s; }
  .nav-logo .pixeles-logo i:nth-child(6) { animation-delay: .11s; }
  .nav-logo .pixeles-logo i:nth-child(7) { animation-delay: .24s; }
  .nav-logo .pixeles-logo i:nth-child(8) { animation-delay: .15s; }
  .nav-logo .pixeles-logo i:nth-child(9) { animation-delay: .30s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-logo .pixeles-logo i { animation: none; }
  }
  .nav-links {
    display: flex; list-style: none;
  }
  .nav-links a {
    display: block;
    text-decoration: none; color: var(--text);
    font-size: .87rem; font-weight: 500;
    padding: 13px 15px;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
  }
  .nav-links a:hover { color: var(--green); }
  .nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
  .btn-outline {
    border: 1.5px solid var(--dark); color: var(--dark);
    background: var(--white); border-radius: var(--radius);
    padding: 10px 20px; font-size: .86rem; font-weight: 600;
    cursor: pointer; transition: all .2s; white-space: nowrap;
  }
  .btn-outline:hover { background: var(--dark); color: #fff; }
  .btn-solid {
    background: var(--dark); color: #fff;
    border: 1.5px solid var(--dark); border-radius: var(--radius);
    padding: 10px 20px; font-size: .86rem; font-weight: 600;
    cursor: pointer; transition: all .2s; white-space: nowrap;
  }
  .btn-solid:hover { background: var(--green); border-color: var(--green); }

  /* ── Perfil (avatar + menú) — sustituye al botón "Cerrar sesión" cuando
     hay sesión activa (web o app), para que se note de un vistazo que el
     usuario ya está logueado. ── */
  .nav-profile { position: relative; }
  .nav-profile-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center;
  }
  .nav-profile-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--dark); color: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    font-family: var(--font-heading); font-weight: 700; font-size: 15px;
    border: 1.5px solid var(--dark);
    transition: border-color .2s;
  }
  .nav-profile-btn:hover .nav-profile-avatar { border-color: var(--green); }
  .nav-profile-avatar img {
    width: 100%; height: 100%; object-fit: cover;
  }
  /* Círculo de la barra: siempre un ícono genérico de persona, para no
     repetir la inicial/foto dos veces (esa se ve al abrir el menú). */
  .nav-profile-avatar-trigger .gicon { font-size: 22px; }
  .nav-profile-menu {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 230px;
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 6px; z-index: 500;
  }
  .nav-profile-menu.show { display: block; }
  .nav-profile-menu-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 12px;
  }
  .nav-profile-avatar-big { width: 46px; height: 46px; font-size: 18px; flex-shrink: 0; }
  .nav-profile-menu-headtext { min-width: 0; }
  .nav-profile-menu-name {
    font-family: var(--font-heading); font-weight: 700; font-size: 14px;
    color: var(--dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-profile-menu-sub {
    font-size: 12px; color: var(--text-light); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-profile-menu-divider { height: 1px; background: var(--border); margin: 0 0 6px; }
  .nav-profile-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; background: none; border: none;
    padding: 9px 10px; font-size: .86rem; font-weight: 600;
    color: var(--dark); text-align: left; cursor: pointer;
    border-radius: 6px; transition: background .15s, color .15s;
  }
  .nav-profile-menu-item:hover { background: var(--bg); color: var(--green); }
  .nav-profile-menu-item .gicon { font-size: 18px; color: var(--text-light); }
  .nav-profile-menu-item:hover .gicon { color: var(--green); }

  /* ── HERO SLIDER ──height: 400px; */
  .hero-slider-wrap {
    position: relative;
    width: 75%;
    height: 463px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    cursor: pointer;
  }
  .hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity .9s ease;
    will-change: opacity;
  }
  .hero-slide.active { opacity: 1; z-index: 1; }
  .hero-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.10) 100%);
  }
  .hero-progress {
    position: absolute; bottom: 0; left: 0;
    height: 3px; background: var(--green);
    z-index: 11; width: 0%;
    transition: width linear;
  }
  /* indicadores cuadrados: los píxeles del logo como UI real (Propuesta B) */
  .hero-dots {
    position: absolute; bottom: 18px; right: 24px; left: auto;
    transform: none;
    display: flex; gap: 7px; z-index: 12;
  }
  .hero-dot {
    width: 9px; height: 9px; border-radius: 2px;
    background: rgba(255,255,255,.45);
    cursor: pointer; transition: all .22s;
    border: none; padding: 0;
  }
  .hero-dot.active { background: var(--green); width: 9px; transform: scale(1.25); }
  .hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 12; background: transparent;
    border: none; box-shadow: none;
    color: #fff; border-radius: 0;
    width: 42px; height: 42px; font-size: 28px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)) drop-shadow(0 0 6px rgba(0,0,0,.35));
    transition: color .2s, transform .2s;
  }
  .hero-arrow:hover { background: transparent; color: var(--green); transform: translateY(-50%) scale(1.12); }
  .hero-arrow.prev { left: 16px; }
  .hero-arrow.next { right: 16px; }
  /* chip-proyecto: pegado a la esquina, como el cuadro rojo del logo */
  .slide-label {
    position: absolute; top: 0; left: 0; z-index: 12;
    background: var(--green); color: #fff;
    font-family: var(--font-heading); font-weight: 600;
    font-size: .84rem;
    padding: 9px 18px; border-radius: 0 0 var(--radius) 0;
    transition: opacity .4s;
  }
  .hero-pie {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 11;
    padding: 28px;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  }
  .hero-pie h1 {
    font-family: var(--font-heading);
    font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em;
    color: #fff;
  }
  .slide-counter {
    position: absolute; top: 14px; right: 14px; z-index: 12;
    color: #fff;
    background: rgba(44,44,44,.6);
    font-size: .78rem; font-weight: 600;
    font-family: var(--font-heading);
    padding: 5px 12px; border-radius: var(--radius);
  }
  /* tipo_oferta: badge inline dentro del flujo normal de la tarjeta */
  .tipo_oferta {
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    width: fit-content;
    margin-bottom: 2px;
    /* SIN position absolute — permanece en el flujo del .info */
  }

  /* ── SPOTLIGHT ──  height: 400px; */
  .spotlight-section {
    width: 25%;
    display: flex;
    height: 463px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
  }
  .spotlight-main {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .spotlight-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity .6s cubic-bezier(.4,0,.2,1);
    z-index: 1;
  }
  .spotlight-slide.active { opacity: 1; z-index: 2; }
  .spotlight-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.15) 65%);
  }
  .spotlight-info {
    position: absolute; bottom: 32px; left: 36px;
    z-index: 3; color: #fff;
    max-width: 420px;
  }
  .spotlight-info .sp-badge {
    display: inline-block;
    background: var(--green); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 11px; border-radius: 20px;
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: .6px;
  }
  .spotlight-info .sp-title {
    font-family: var(--font-heading);
    font-size: 24px; font-weight: 900;
    line-height: 1.2; margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
  .spotlight-info .sp-price {
    font-size: 19px; font-weight: 800;
    color: #fff; opacity: .95;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
  }
  .spotlight-info .sp-location {
    font-size: 13px; opacity: .75; margin-top: 4px;
  }
  .spotlight-rail {
    width: 100%;
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
  }
  .spotlight-rail-title {
    padding: 10px 14px;
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,.38);
    text-transform: uppercase; letter-spacing: 1.2px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
  }
  .spotlight-rail-viewport {
    flex: 1; overflow: hidden; position: relative;
  }
  .spotlight-rail-inner {
    display: flex; flex-direction: column;
    transition: transform .42s cubic-bezier(.4,0,.2,1);
  }
  .sp-thumb {
    height: 270px;
    background-size: cover; background-position: center;
    position: relative; cursor: pointer;
    flex-shrink: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: border-color .22s, filter .22s;
    margin-bottom: 230px;
    filter: brightness(.5) saturate(.7);
  }
  .sp-thumb::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,.28);
    transition: background .22s;
  }
  .sp-thumb:hover { filter: brightness(.7); }
  .sp-thumb.active {
    border-left-color: var(--green);
    filter: brightness(.9) saturate(1);
  }
  .sp-thumb.active::before { background: rgba(0,0,0,.06); }
  .sp-thumb-label {
    position: absolute; bottom: -45px; left: 0; right: 0;
    padding: 20px 10px 7px;
    font-size: 11px; font-weight: 700;
    color: #fff; z-index: 2;
    background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 100%);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rail-nav {
    width: 100%; z-index: 10;
    background: rgba(19,19,42,.9);
    border: none; color: rgba(255,255,255,.7);
    height: 30px; font-size: 13px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
    flex-shrink: 0;
    gap: 4px; font-weight: 600;
  }
  .rail-nav:hover { background: var(--green); color: #fff; }
  .rail-nav:disabled { opacity: .3; cursor: default; }
  .rail-nav:disabled:hover { background: rgba(19,19,42,.9); color: rgba(255,255,255,.7); }

  /* ── SEARCH BAR ── */
  .search-bar {
    display: flex; background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    width: 100%; max-width: 420px;
    transition: border-color .2s;
  }
  .search-bar:focus-within { border-color: var(--dark); }
  .search-bar input {
    flex: 1; padding: 10px 16px;
    border: none; outline: none;
    font-size: 14px; color: var(--text);
    font-family: var(--font-body);
  }
  .search-bar button {
    background: var(--green); color: #fff;
    border: none; padding: 10px 20px;
    font-size: 15px; cursor: pointer;
    transition: background .2s;
  }
  .search-bar button:hover { background: var(--green-dark); }

  /* ── SECTION WRAPPERS ── */
  .section { padding: 0 2px; margin-bottom: 30px; }
  .section-title {
    font-family: var(--font-heading);
    font-size: 22px; font-weight: 800;
    margin-bottom: 24px; color: var(--dark);
  }
  .section-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 24px;
  }

  /* ── TITULO DE FILA (separador de sección, Propuesta B) ── */
  .titulo-fila {
    display: flex; align-items: center; gap: 12px;
    margin: 30px 2px;
  }
  .titulo-fila h2 {
    font-family: var(--font-heading);
    font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--dark);
  }
  .titulo-fila .linea { flex: 1; height: 1.5px; background: var(--border); }

  /* ── FEATURED PROPERTIES ── */
  .properties-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
    /* Necesario porque #propertiesGrid es un ítem de .grid2: sin esto, el
       carrusel de ofertas (fila flex sin wrap, varias tarjetas de 300px)
       hace que el navegador calcule el "min-width" de esta columna como el
       ancho total del contenido interno, robándole espacio a #strGrid. */
    min-width: 0;
  }
  .properties-grid2 {
    display: grid;
    grid-template-columns: repeat(1, 2fr);
    gap: 18px;
  }
  .prop-card {
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    cursor: pointer;
    position: relative;
  }
  .prop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  }
  .prop-img-placeholder {
    width: 100%; height: 160px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
  }
  .prop-info { padding: 14px; }
  .prop-badge {
    display: inline-block;
    background: var(--green); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 9px; border-radius: 20px;
    margin-bottom: 8px; text-transform: uppercase;
    letter-spacing: .5px;
  }
  .prop-badge.rent { background: var(--orange); }
  .ubicacion { font-weight: 700; font-size: 14px; }
  .prop-name {
    color: var(--dark); margin-bottom: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .prop-price {
    color: var(--green); font-weight: 800;
    font-size: 16px; margin-bottom: 6px;
  }
  .prop-meta {
    display: flex; gap: 12px;
    font-size: 12px; color: var(--text-light);
  }
  .prop-location {
    display: flex; gap: 12px;
    font-size: 12px; color: var(--text-light);
  }
  .prop-meta span { display: flex; align-items: center; gap: 4px; }

  .btn-green {
    background: var(--green); color: #fff;
    border: none; border-radius: 8px;
    padding: 10px 24px; font-size: 14px;
    font-weight: 700; cursor: pointer;
    font-family: var(--font-body);
    transition: background .2s; display: inline-block;
  }
  .btn-green:hover { background: var(--green-dark); }

  /* ── SEARCH SUGGESTIONS ── */
  .search-wrapper { position: relative; flex: 1; max-width: 420px; }
  .search-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden; z-index: 200;
    display: none;
  }
  .search-suggestions.show { display: block; }
  .suggestion-item {
    padding: 12px 18px; cursor: pointer;
    font-size: 14px; color: var(--text);
    display: flex; align-items: center; gap: 10px;
    transition: background .15s;
  }
  .suggestion-item:hover { background: var(--green-light); color: var(--green); }
  .suggestion-item .sug-icon { font-size: 16px; }

  /* ── MODAL ── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55); z-index: 999;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    animation: fadeIn .2s ease;
  }
  .modal-overlay.show { display: flex; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    background: #fff; border-radius: 6px;
	  background-size:cover;
    width: 90%; max-width: 680px;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    animation: slideUp .25s ease;
  }


  @keyframes slideUp { from { transform: translateY(40px); opacity:0; } to { transform: translateY(0); opacity:1; } }
  .modal-header {
    display: flex; justify-content: space-between;
    align-items: center; padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: #fff;
  }
  .modal-header h3 {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 800; color: var(--dark);
  }
  .modal-close {
    background: none; border: none; font-size: 22px;
    cursor: pointer; color: var(--text-light);
    transition: color .2s; line-height: 1;
  }
  .modal-close:hover { color: var(--green); }
  .modal-body { padding: 24px; position:relative; z-index:0;}
  .modal-img {
    width: 100%; height: 240px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 80px; margin-bottom: 20px;
  }
  .modal-price {
    font-family: var(--font-heading);
    font-size: 28px; font-weight: 900; color: var(--green);
    margin-bottom: 8px;
  }
  .modal-location { color: var(--text-light); font-size: 14px; margin-bottom: 16px; }
  .modal-specs {
    display: flex; gap: 16px; margin-bottom: 20px;
    padding: 16px; background: var(--bg); border-radius: 6px;
  }
  .modal-spec { text-align: center; flex: 1; }
  .modal-spec .val { font-weight: 800; font-size: 18px; color: var(--dark); }
  .modal-spec .lbl { font-size: 11px; color: var(--text-light); margin-top: 2px; }
  .modal-desc { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 20px; }
  .modal-actions { display: flex; gap: 12px; }
  .modal-actions button { flex: 1; padding: 13px; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
  .modal-btn-primary { background: var(--green); color: #fff; border: none; transition: background .2s; }
  .modal-btn-primary:hover { background: var(--green-dark); }
  .modal-btn-secondary { background: none; color: var(--green); border: 2px solid var(--green); transition: all .2s; }
  .modal-btn-secondary:hover { background: var(--green-light); }

  /* ── LOGIN MODAL ── */
  .login-modal { max-width: 460px; }
  .login-modal .modal-body { padding: 0; }

  /* Pestañas */
  .auth-tabs {
    display: flex; border-bottom: 2px solid var(--border);
    background: var(--bg);
  }
  .auth-tab {
    flex: 1; padding: 13px 10px;
    font-size: 13px; font-weight: 700; text-align: center;
    cursor: pointer; color: var(--text-light);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; transition: all .2s;
    background: none; border-top: none; border-left: none; border-right: none;
    font-family: var(--font-body);
  }
  .auth-tab.active { color: var(--green); border-bottom-color: var(--green); background: #fff; }

  /* Paneles */
  .auth-panel { display: none; padding: 24px 28px 28px; }
  .auth-panel.active { display: block; }

  .form-group { margin-bottom: 15px; }
  .form-group label {
    display: block; font-size: 12px; font-weight: 700;
    color: var(--dark); margin-bottom: 5px; text-transform: uppercase;
  }
  .form-group input,
  .form-group select {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 6px; font-size: 14px; outline: none;
    font-family: var(--font-body);
    transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
    background: #fff;
  }
  .form-group input:focus,
  .form-group select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(177,6,17,.1);
  }
  .form-row { display: flex; gap: 12px; }
  .form-row .form-group { flex: 1; }

  /* Mensajes de usuario */
  .user-msg { font-size: 11px; margin-top: 4px; }
  .user-msg.error  { color: var(--green); }
  .user-msg.ok     { color: #16a34a; }
  .suggestions-wrap { font-size: 12px; color: #666; margin-top: 4px; }
  .suggestion-item {
    color: var(--green); cursor: pointer;
    text-decoration: underline; margin-right: 8px;
    font-weight: 700;
  }

  /* Separador */
  .form-divider {
    text-align: center; color: var(--text-light);
    font-size: 12px; margin: 14px 0; position: relative;
  }
  .form-divider::before, .form-divider::after {
    content: ''; position: absolute; top: 50%;
    width: 42%; height: 1px; background: var(--border);
  }
  .form-divider::before { left: 0; } .form-divider::after { right: 0; }

  /* Spinner en botón */
  .btn-loading { opacity: .7; pointer-events: none; }
  .btn-loading::after { content: ' ⏳'; }


  /* ── TOAST ── */
  .toast-container {
    position: fixed; bottom: 28px; right: 28px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 9999;
  }
  .toast {
    background: var(--dark); color: #fff;
    padding: 14px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
    min-width: 260px;
  }
  .toast.success { border-left: 4px solid var(--green); }
  .toast.info { border-left: 4px solid #3b82f6; }
  .toast.warn { border-left: 4px solid var(--orange); }
  @keyframes toastIn { from { transform: translateX(120%); opacity:0; } to { transform: translateX(0); opacity:1; } }
  @keyframes toastOut { to { transform: translateX(120%); opacity:0; } }

  /* ── FAVORITE BUTTON ── */
  .fav-btn {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,.9); border: none;
    border-radius: 50%; width: 34px; height: 34px;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform .2s;
  }
  .fav-btn:hover { transform: scale(1.15); }
  .fav-btn.liked { background: #fee2e2; }

  /* ── NAV ACTIVE ── */
  .nav-links a.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }

  /* ── DROPDOWN MENUS ── */
  .nav-links li { position: relative; }
  .nav-links li .dropdown {
    display: none;
  list-style: none;
  position: absolute;
  top: 100%;           /* Cambiado */
  left: 0;
  background: #fff;
  border-radius: 0 0 10px 10px;   /* solo esquinas inferiores: efecto de fusión con el menú */
  box-shadow: 0 16px 24px -12px rgba(0,0,0,0.22), 0 6px 10px -6px rgba(0,0,0,0.12); /* sin bleed hacia arriba, gracias al spread negativo */
  min-width: 210px;
  z-index: 300;        /* Aumentado */
  padding: 8px 0;
  border: 1px solid var(--border);
  border-top: none;    /* continúa visualmente desde el enlace, sin costura */
  margin-top: 0;
  }
  
  .nav-links li:hover .dropdown { display: block; }
  .nav-links li .dropdown li a {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 18px;
    font-size: 13px; font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
  }
  .nav-links li .dropdown li a:hover {
    background: var(--bg);
    color: var(--green);
  }
  .nav-links li .dropdown li a .drop-icon {
    font-size: 15px;
    width: 20px; text-align: center;
  }
  .nav-links li.has-dropdown > a::after {
    content: ' ›';
    font-size: 13px;
    opacity: .55;
    margin-left: 2px;
  }
  /* Solución al gap problem */
.nav-links li.has-dropdown:hover .dropdown {
  display: block;
  animation: fadeIn .2s ease;
}

/* Buffer invisible para que no se cierre fácil */
.nav-links li.has-dropdown > a::after {
  content: ' ›';
  font-size: 13px;
  opacity: .55;
  margin-left: 4px;
}

  /* ── LOADING STATES ── */
  .ck-loading, .ck-empty, .ck-error {
    grid-column: 1 / -1;
    padding: 48px 0;
    text-align: center;
    font-size: 15px;
    color: var(--text-light);
    font-weight: 600;
  }
  .ck-error { color: #dc2626; }
  .ck-error small { display: block; margin-top: 6px; font-weight: 400; font-size: 12px; opacity: .8; }

  /* ── SCROLL ANIMATIONS ── */
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  .grid2 {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 0.5rem;
  }

  /* ── FOOTER (Propuesta B) ── */
  footer {
    background: var(--dark); color: #cfccc8;
    margin-top: 0;
  }
  .footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 32px 28px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .marca-pie { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .marca-pie span { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: #fff; }
  footer p.lema { font-size: .85rem; line-height: 1.7; color: #a6a3a0; max-width: 280px; }
  .footer-col h3 {
    font-family: var(--font-heading);
    font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px;
  }
  .footer-col h3::before {
    content: ''; width: 7px; height: 7px;
    background: var(--green); border-radius: 2px;
  }
  .footer-col h3::after { content: none; }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 10px; }
  .footer-col ul li a {
    font-size: .84rem;
    color: #a6a3a0;
    text-decoration: none;
    transition: color .22s;
    display: inline-block;
  }
  .footer-col ul li a:hover {
    color: #fff;
    padding-left: 0;
  }
  .copyright-area {
    border-top: 1px solid #444;
    padding: 18px 32px;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
  }
  .copyright-area p { font-size: .77rem; color: #8a8884; }

  /* ══════════════════════════════════════════════
     CARD CATEGORIAS — sistema unificado
  ══════════════════════════════════════════════ */

  /* ── Variables de la tarjeta ── */
  :root {
    --card-img-h:   230px;   /* altura fija de imagen en todas las tarjetas 160px*/
    --card-info-h:  148px;   /* altura fija de la zona de texto              */
    --card-foot-h:   40px;   /* altura fija del pie de tarjeta               */
    --card-header-h: 42px;   /* altura fija del encabezado con controles     */
    --header-bg:    #ffffff; /* Propuesta B: header blanco con borde inferior fino */
    --header-txt:   #2C2C2C;
  }

  /* ── Contenedor base de la tarjeta ── */
  .card-categoria {
    background: var(--fondos);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    overflow: hidden;          /* recorta cualquier elemento que salga */
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    transition: transform .22s, box-shadow .22s, border-color .22s;
    position: relative;        /* contexto para hijos posicionados */
    height: calc(var(--card-header-h) + var(--card-img-h) + var(--card-info-h) + var(--card-foot-h));
  }
  .card-categoria:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  }
  /* Evita el borde doble: el bloque de publicidad ya aporta su propio marco */
  .spotlight-section .card-categoria {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .spotlight-section .card-categoria:hover {
    transform: none;
    box-shadow: none;
  }

  /* ── Encabezado unificado ── */
  .card-header-grouped {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: var(--card-header-h);
    min-height: var(--card-header-h);
    flex-shrink: 0;
    overflow: hidden;        /* corta cualquier desbordamiento interno */
    background: var(--header-bg) !important;
    border-bottom: 1.5px solid var(--border);
    color: var(--header-txt);
  }

  /* Botones de navegación ❮ ❯ */
  .nav-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;          /* no se comprime */
    white-space: nowrap;
  }
  .nav-controls button {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--dark);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--font-body);
    transition: background .18s, color .18s;
    line-height: 1;
  }
  .nav-controls button:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
  .nav-controls button:disabled { opacity: .35; cursor: default; }
  .nav-controls span {
    color: var(--dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
  }

  /* Etiqueta de categoría — derecha del header */
  .categoria-label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.95);
    text-transform: uppercase;
    letter-spacing: .5px;
    fflex: 1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 6px;       /* evita pegarse a los botones */
	position:absolute;
	top:43px;
  }

  /* ── Imagen / Placeholder ── */
  .emoji-main {
    width: 100%;
    height: var(--card-img-h);
    min-height: var(--card-img-h);
    max-height: var(--card-img-h);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    padding: 0;
  }

  /* Todas las imágenes dentro de .emoji-main ocupan exactamente el espacio */
  .emoji-main img,
  .fotito,
  .fotito-anuncio,
  .fotito-str-inmueble,
  .fotito-servicio {
    width: 100% !important;
    height: var(--card-img-h) !important;
    min-height: var(--card-img-h) !important;
    max-height: var(--card-img-h) !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block;
  }

  /* ── Zona de información ── */
  .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
	background-color: var(--fondos);
  }
  .card-body .info {
    padding: 10px 14px 8px;
    height: var(--card-info-h);
    min-height: var(--card-info-h);
    max-height: var(--card-info-h);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* Precio principal */
  .card-body .info h3:first-child,
  .card-body .info h3.precio-str {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 900;
    color: var(--green);
    margin: 0;
    line-height: 1.2;
  }

  /* Tipo de oferta / badge dentro del bloque de info */
  .card-body .info h3.tipo_oferta,
  .card-body .info .tipo_oferta {
    position: static !important;   /* anula cualquier residuo de absolute */
    display: inline-block;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0;
    width: fit-content;
  }

  .card-body .info h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    color: var(--dark);
    margin: 0;
    line-height: 1.25;
  }

  .card-body .info .ubicacion {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-body .info .prop-name {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  .card-body .info .specs,
  .card-body .info .specs-servicios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--text-light);
    margin-top: auto;
    padding-top: 4px;
  }
  .card-body .info .specs span,
  .card-body .info .specs-servicios span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
  }

  /* ── Pie de tarjeta ── */
  .card-footer {
    height: var(--card-foot-h);
    min-height: var(--card-foot-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-top: 1px solid var(--border);
    background: #fafafa;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 600;
  }
  .card-footer small { font-size: 11px; color: var(--text-light); }

  /* Botones de acción en el footer */
  .btn-fav,
  .btn-contacto-rapido {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .18s;
    line-height: 1;
  }
  .btn-fav { background: transparent; color: var(--text-light); font-size: 15px; padding: 4px 6px; }
  .btn-fav:hover { color: var(--green); }
  .btn-fav.liked { color: var(--green); }
  .btn-contacto-rapido:hover { background: var(--green-dark); }

  /* ── Estilos de ícono de contacto ── */
  .icon-contacto { width: 14px; height: 14px; margin-right: 3px; }

  /* ── Selectores en el header (drop-down de filtro) ── */
  .selector-departamento,
  .selector-servicio {
    background: var(--bg);
    color: var(--dark);
    border: 1px solid var(--border);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-body);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .selector-departamento option,
  .selector-servicio option {
    background: var(--dark);
    color: #fff;
    font-weight: 400;
  }

  /* ── Clasificación tag (servicios) ── */
  .clasificacion-tag {
    display: inline-block;
    background: rgba(30,58,95,0.10);
    color: var(--header-bg);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 2px;
    width: fit-content;
  }

  /* ── Descripción truncada ── */
  .descripcion-anuncio,
  .descripcion-servicio {
    font-size: 12px;
    color: var(--text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    line-height: 1.45;
  }

  /* ── Periodo de precio ── */
  .periodo-precio {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
    margin-left: 3px;
  }

  /* ── Estado vacío ── */
  .cuerpo-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    color: var(--text-light);
    gap: 8px;
  }
  .cuerpo-vacio .emoji-main {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    font-size: 2.5rem;
    background: transparent;
    opacity: .85;
  }
  .cuerpo-vacio .emoji-main .pixeles {
    grid-template-columns: repeat(3,10px); grid-template-rows: repeat(3,10px); gap: 1px;
  }
  .cuerpo-vacio .info h3 { font-family: var(--font-heading); font-size: .94rem; color: var(--dark); }
  .cuerpo-vacio .info p  { font-size: .8rem; max-width: 250px; }
  .cuerpo-vacio .info a  { font-size: .8rem; font-weight: 600; color: var(--green); font-family: var(--font-heading); text-decoration: none; }
  .cuerpo-vacio .info a:hover { text-decoration: underline; }

  /* ── Herencia de dimensiones ── */
  .bano  { width: 16px; height: 16px; }
  .cama  { width: 16px; height: 16px; }

  /* ── Header unificado blanco (Propuesta B) para todas las categorías ── */
  .bg-anuncio,
  .bg-str-inmueble,
  .bg-servicio { background: var(--header-bg) !important; color: var(--header-txt) !important; }

  /* El selector dentro de cualquier header blanco debe ser oscuro */
  .bg-anuncio .categoria-label,
  .bg-str-inmueble .categoria-label,
  .bg-servicio .categoria-label { color: var(--dark); }

  /* ── Gradientes de placeholder por categoría ── */
  #card-Casa       .emoji-main:not(:has(img)) { background: linear-gradient(135deg,#fca5a5,#ef4444); }
  #card-Bodega     .emoji-main:not(:has(img)) { background: linear-gradient(135deg,#93c5fd,#3b82f6); }
  #card-Edificio   .emoji-main:not(:has(img)) { background: linear-gradient(135deg,#86efac,#16a34a); }
  #card-Casa-de-campo .emoji-main:not(:has(img)) { background: linear-gradient(135deg,#fcd34d,#d97706); }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #f1f1f1; }
  ::-webkit-scrollbar-thumb { background: var(--green); border-radius: 3px; }

  .text-center { text-align: center; }

  /* ── STR iframe container ── */
  .str-grid {
    border-radius: 6px;
    border: 1.5px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
    height: calc(var(--card-header-h) + var(--card-img-h) + var(--card-info-h) + var(--card-foot-h));
    background: #fff;
    position: relative;
  }
  .str-grid iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
  .str-iframe-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
    background: #0e1a2b; color: rgba(255,255,255,0.6);
    font-size: 13px; font-weight: 600 ;
  }
  .str-iframe-loading .str-load-icon { font-size: 28px; }
  .hero-banner-row {display:flex;margin-top:20px;gap:0.5rem}
  /* ── Contenedor con margen lateral (Propuesta B) ── */
  .contenedor {max-width:1400px;margin:0 auto;padding:0 32px;box-sizing:border-box}
  /* ══════════════════════════════════════════════
     RESPONSIVE MÓVIL
  ══════════════════════════════════════════════ */

  /* Hamburguesa y menú móvil: ocultos por defecto (desktop) */
  .nav-hamburger { display: none; }
  .nav-mobile-menu { display: none; }
  .mobile-search-bar { display: none; }

  /* ── Tablet (≤ 900px) ── */
  @media (max-width: 900px) {

    .contenedor { padding: 0 16px; }
    .barra { padding: 10px 0; }
    .nav-links, .nav-actions { display: none; }
    .nav-logo { font-size: 19px; }
    nav .barra .search-wrapper { display: none; }

    /* Botón hamburguesa */
    .nav-hamburger {
      display: flex; flex-direction: column; gap: 5px;
      cursor: pointer; background: none; border: none;
      padding: 4px; margin-left: auto;
    }
    .nav-hamburger span {
      display: block; width: 24px; height: 2px;
      background: var(--text); border-radius: 2px; transition: all .25s;
    }

    /* Menú desplegable */
    .nav-mobile-menu {
      position: fixed; top: 56px; left: 0; right: 0;
      background: #fff; border-bottom: 1px solid var(--border);
      z-index: 150; padding: 12px 0 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    }
    .nav-mobile-menu.open { display: block; }
    .nav-mobile-menu a {
      display: block; padding: 11px 24px;
      font-size: 15px; font-weight: 600;
      color: var(--text); text-decoration: none;
      border-bottom: 1px solid var(--bg);
    }
    .nav-mobile-menu a:hover { color: var(--green); background: var(--bg); }
    .nav-mobile-menu .mob-actions {
      display: flex; gap: 10px; padding: 14px 24px 0;
    }
    .nav-mobile-menu .mob-actions button { flex: 1; }
    .mob-profile {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 24px 4px;
    }
    .mob-profile .nav-profile-avatar {
      width: 34px; height: 34px; flex-shrink: 0;
    }
    .mob-profile-name {
      font-weight: 700; color: var(--dark); font-size: 14px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Hero: apilar verticalmente */
    .hero-banner-row { flex-direction: column !important; }
    .hero-slider-wrap { width: 100% !important; height: 260px !important; }
    .spotlight-section { width: 100% !important; height: 200px !important; }
    .slide-label { font-size: 13px; }
    .hero-pie h1 { font-size: 1.25rem; }

    /* Grid principal: 2 columnas */
    .grid2 { grid-template-columns: repeat(2, 1fr) !important; }

    /* Footer */
    .footer-content { grid-template-columns: repeat(2, 1fr) !important; padding: 36px 24px 20px; }

    .modal { width: 95% !important; }
  }

  /* ── Móvil (≤ 600px) ── */
  @media (max-width: 600px) {

    .contenedor { padding: 0 12px; }
    .barra { padding: 8px 0; }
    .nav-logo { font-size: 17px; }
    .nav-mobile-menu { top: 52px; }

    /* Barra de búsqueda móvil debajo del hero */
    .mobile-search-bar {
      display: flex !important;
      margin: 10px 10px 0;
    }
    .mobile-search-bar input {
      flex: 1; padding: 9px 14px;
      border: 1.5px solid var(--border); border-right: none;
      border-radius: 8px 0 0 8px;
      font-size: 14px; outline: none;
      font-family: var(--font-body);
    }
    .mobile-search-bar input:focus { border-color: var(--green); }
    .mobile-search-bar button {
      background: var(--green); color: #fff;
      border: none; padding: 9px 16px;
      border-radius: 0 8px 8px 0;
      font-size: 16px; cursor: pointer;
    }

    /* Hero */
    .hero-slider-wrap { height: 200px !important; }
    .spotlight-section { height: 150px !important; }
    .slide-label  { font-size: 11px; padding: 6px 12px; }
    .hero-pie     { padding: 14px; }
    .hero-pie h1  { font-size: 1rem; }
    .slide-counter{ top: 8px !important; right: 10px !important; font-size: 10px; padding: 3px 8px; }
    .hero-arrow   { display: none; }
    .hero-dots    { bottom: 6px; right: 14px; }

    /* Variables de tarjeta reducidas */
    :root {
      --card-img-h:   170px;
      --card-info-h:  130px;
      --card-foot-h:   38px;
      --card-header-h: 40px;
    }

    /* Grid: 1 columna */
    .grid2 { grid-template-columns: 1fr !important; }
    .properties-grid { grid-template-columns: 1fr !important; }
    .section { padding: 0 8px; margin-bottom: 30px; }

    /* Modal: bottom sheet */
    .modal-overlay { align-items: flex-end !important; }
    .modal {
      width: 100% !important; max-width: 100% !important;
      border-radius: 18px 18px 0 0 !important;
      max-height: 92vh !important;
    }
    .modal-header { padding: 14px 16px; }
    .modal-header h3 { font-size: 17px !important; }
    .modal-body { padding: 14px 16px; }
    .modal-img { height: 180px !important; }
    .modal-price { font-size: 22px !important; }
    .modal-specs { gap: 8px !important; padding: 10px !important; flex-wrap: wrap; }
    .modal-spec .val { font-size: 15px !important; }
    .modal-actions { flex-direction: column; gap: 8px; }
    .modal-actions button { padding: 12px !important; font-size: 14px !important; }

    /* Footer: 1 columna */
    .footer-content { grid-template-columns: 1fr !important; gap: 1.2rem; padding: 24px 16px 16px; }

    /* Toast */
    .toast-container { bottom: 14px; right: 10px; left: 10px; }
    .toast { min-width: unset; font-size: 13px; padding: 10px 14px; }

    /* Selectores de cabecera de tarjeta */
    .selector-departamento,
    .selector-servicio { max-width: 115px; font-size: 11px; padding: 3px 5px; }

    .btn-contacto-rapido { font-size: 10px; padding: 4px 8px; }

    /* Login modal full */
    .login-modal { max-width: 100% !important; }
    .login-modal .modal-body { padding: 20px 16px; }
  }
 .nav-links a.registrado {
	 display : none;
 }
  .nav-links a.registrado.logeado{
	  display : block;
  }
  #registrado.logeado{
	  display : inline-block;
	  background: tomato; color: #fff;
	  border: none; border-radius: 12px;
	  padding: 8px 16px; font-weight: 600;
	  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.12);
  }
  #registrado.logeado:hover,
  #registrado.logeado.active {
	  background: #e5533d; color: #fff;
  }
 .soloweb{
	  display : none!important;
  }
  .web .soloweb{
	  display : inline!important;
  }


/* ══════════════════════════════════════════════════════════════
   MODO APP (tipoIngreso = "app")
   Oculta todo el nav excepto "Inicio" y "Cerrar sesión"
══════════════════════════════════════════════════════════════ */
.nav-app-mode .nav-links li          { display: none; }
.nav-app-mode .nav-links li.app-inicio { display: list-item; }
.nav-app-mode .nav-actions #loginBtn,
.nav-app-mode .nav-actions #loginBtn2 { display: none !important; }

/* Menú móvil en modo app */
.nav-mobile-app-mode > a             { display: none; }
.nav-mobile-app-mode .app-mob-inicio { display: block; }