@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&display=swap');
/* ==========================================================================
   GIRO INMOBILIARIA · PASO 1 (v3) · BASE + CABECERA blanca y responsive
   - La línea @import debe ser la PRIMERA del CSS.
   - Usa anidación CSS nativa (Chrome 120+, Safari 17.2+, Firefox 117+).
     Si el panel no la admite, usa giro-cabecera.flat.css (mismo CSS, sin anidar).
   - Los media queries de la cabecera solo cambian variables (--nav-px, --logo-h…).
   ========================================================================== */

:root{
  --gold:#CC9A00; --gold-hi:#e0ad12; --gold-dk:#8a6700; --gold-ink:#241A00;
  --white:#fff; --paper:#f5f5f4; --ink:#1f1d1c; --muted:#6b6663; --line:#e6e3e0;
  --shadow-rgb:15 14 14;
  --font:"Manrope","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hdr-h:84px;   /* altura cabecera escritorio */
  --gm-h:64px;    /* altura barra móvil propia (#giro-mh) */
}
/* Se mantiene en :root (no en html) para conservar la especificidad original frente a Inmovilla */
:root{padding-top:0!important;padding-bottom:0!important}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)}   /* evita que la cabecera sticky tape las anclas */
@media (max-width:1240px){html{scroll-padding-top:0}}                        /* aquí la cabecera ya no es sticky */

body{background:var(--white)!important;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
#supercontenedor{background:var(--white);overflow-x:clip}   /* clip (no hidden) para no romper el sticky */
#supercontenedor #cabecera-bloque-buscador{display:none!important}   /* mini-buscador duplicado del scroll */

/* ==========================================================================
   CABECERA DE INMOVILLA
   Escritorio ≥1400px · portátil 1241–1399px · tablet/móvil ≤1240px (rejilla de 2 filas)
   ========================================================================== */
#supercontenedor #modulo-cabecera-2{
  /* Variables de la cabecera (valores de escritorio) */
  --pad-t:0px; --edge:28px; --gap-x:22px; --gap-y:0px;
  --nav-px:13px; --nav-py:12px; --nav-fs:13px; --nav-ls:.05em; --nav-ul:4px;
  --logo-h:64px;
  --tel-py:11px; --tel-px:20px; --tel-fs:14px; --tel-gap:8px; --tel-icon:15px;
  --flag-w:24px; --flag-gap:8px;

  background:var(--white)!important;
  position:sticky!important; top:0!important; z-index:900;
  height:auto!important; min-height:0!important;
  padding:0!important; margin:0!important;
  box-shadow:0 3px 0 var(--gold),0 12px 28px rgb(var(--shadow-rgb) / .10);

  & #header-bloque2{
    background:var(--white)!important;
    height:auto!important; min-height:0!important;
    opacity:1!important; position:static!important;
    padding:0!important; margin:0!important;

    & #header-bloquemenu{
      width:100%!important; max-width:1480px; margin:0 auto!important;
      padding:var(--pad-t) var(--edge) 0!important;
      height:var(--hdr-h)!important; min-height:0!important;
      display:flex!important; flex-direction:row!important; align-items:center!important;
      justify-content:flex-start!important; flex-wrap:nowrap!important;
      gap:var(--gap-y) var(--gap-x);
      position:relative!important; box-sizing:border-box!important;

      /* Logo: Inmovilla lo esconde al hacer scroll; lo forzamos visible */
      & #header-logo{
        order:1; flex:0 0 auto;
        position:relative!important; top:auto!important; left:auto!important; right:auto!important; transform:none!important;
        display:flex!important; margin:0!important; padding:0!important;
        width:auto!important; height:auto!important; opacity:1!important;

        & a{display:block!important;line-height:0}
        & img{height:var(--logo-h)!important;width:auto!important;max-width:none!important;max-height:none!important;display:block!important}
      }

      /* Menú */
      & .header-menu{
        order:2; flex:1 1 auto; min-width:0;
        display:flex!important; justify-content:center;
        width:auto!important; height:auto!important; position:static!important;
        margin:0!important; padding:0!important; background:none!important; border:0!important;
        opacity:1!important; visibility:visible!important;

        & ul{
          display:flex!important; flex-wrap:nowrap!important; align-items:center; gap:2px;
          margin:0!important; padding:0!important; list-style:none;
          width:auto!important; height:auto!important; background:none!important;
        }
        & li{
          display:block!important; margin:0!important; padding:0!important;
          width:auto!important; height:auto!important; line-height:1!important;
          background:none!important; border:0!important; box-shadow:none!important; float:none!important;
          flex:0 0 auto;
          &::before,&::after{display:none!important}
        }
        & li a{
          display:block!important; padding:var(--nav-py) var(--nav-px)!important;
          background:none!important; color:var(--ink)!important; opacity:1!important; visibility:visible!important;
          font:700 var(--nav-fs)/1 var(--font)!important;
          letter-spacing:var(--nav-ls); text-transform:uppercase; text-decoration:none!important; white-space:nowrap!important;
          position:relative; border-radius:8px; transition:color .2s; -webkit-tap-highlight-color:transparent;

          &::after{
            content:""; position:absolute; left:var(--nav-px); right:var(--nav-px); bottom:var(--nav-ul);
            height:2px; background:var(--gold);
            transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
          }
        }
        /* Hover, página activa y foco de teclado comparten estilo */
        & li:is(:hover,.activa) a,
        & li a:is(:focus-visible,[aria-current="page"]){color:var(--gold-dk)!important;background:none!important}
        & li:is(:hover,.activa) a::after,
        & li a:is(:focus-visible,[aria-current="page"])::after{transform:scaleX(1)}
        & li a:focus-visible{outline:2px solid var(--gold-dk);outline-offset:2px}
      }

      /* Teléfono */
      & #header-bloquetfno{
        order:3; display:block!important;
        position:static!important; top:auto!important; left:auto!important; right:auto!important; transform:none!important;
        width:auto!important; height:auto!important; margin:0!important; padding:0!important;
        background:none!important; flex:0 0 auto;

        & a#prueba{
          display:inline-flex!important; align-items:center; gap:var(--tel-gap);
          position:static!important; margin:0!important; padding:var(--tel-py) var(--tel-px)!important;
          border-radius:999px; background:var(--gold)!important; color:var(--gold-ink)!important;
          font:800 var(--tel-fs)/1 var(--font)!important;
          text-decoration:none!important; white-space:nowrap!important;
          transition:background .2s,transform .2s;

          &:hover{background:var(--gold-hi)!important;transform:translateY(-1px)}
          &:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
        }
        & img{height:var(--tel-icon)!important;width:auto!important;max-width:none!important;filter:brightness(0)}
        & span,
        & #border{border:0!important;color:inherit!important;padding:0!important;margin:0!important;background:none!important;font:inherit!important}
      }
      & #texto-telefono,
      & #idioSeleccionado{display:none!important}

      /* Idiomas */
      & #header-bloqueidiomas{
        order:4; display:flex!important; align-items:center;
        position:static!important; top:auto!important; left:auto!important; right:auto!important; transform:none!important;
        width:auto!important; height:auto!important; margin:0!important; padding:0!important;
        background:none!important; flex:0 0 auto;
      }
      & .languagepicker{
        display:flex!important; gap:var(--flag-gap);
        margin:0!important; padding:0!important; list-style:none;
        background:none!important; box-shadow:none!important; position:static!important;

        & li{
          display:flex!important; margin:0!important; padding:0!important; background:none!important; border:0!important;
          &:hover img{opacity:1}
        }
        /* Área táctil mayor sin mover el layout (padding positivo + margen negativo) */
        & a{display:flex;padding:6px 2px;margin:-6px -2px;border-radius:4px}
        & a:focus-visible{outline:2px solid var(--gold-dk);outline-offset:1px}
        & img{width:var(--flag-w)!important;height:auto!important;max-width:none!important;border-radius:3px;opacity:.9;transition:opacity .2s}
      }
    }
  }

  /* ---------- PORTÁTIL (1241–1399px): compacto para que quepa en una línea ---------- */
  @media (max-width:1399px){
    --edge:20px; --gap-x:14px;
    --nav-px:8px; --nav-fs:12px; --nav-ls:.03em;
    --logo-h:58px;
    --tel-py:10px; --tel-px:16px; --tel-fs:13px;
    --flag-w:22px; --flag-gap:6px;
  }

  /* ---------- TABLET Y MÓVIL (≤1240px): rejilla de 2 filas ----------
     fila 1: logo | teléfono | idiomas      fila 2: menú deslizable        */
  @media (max-width:1240px){
    --pad-t:10px; --edge:16px; --gap-x:12px; --gap-y:4px;
    --nav-px:14px; --nav-py:15px; --nav-fs:12.5px; --nav-ls:.04em; --nav-ul:6px;
    --logo-h:52px;

    position:relative!important;
    box-shadow:0 3px 0 var(--gold);

    & #header-bloque2 #header-bloquemenu{
      display:grid!important;
      grid-template-columns:minmax(0,1fr) auto auto;
      grid-template-areas:"logo tel idio" "menu menu menu";
      height:auto!important;

      & #header-logo{grid-area:logo;justify-self:start}
      & #header-bloquetfno{grid-area:tel}
      & #header-bloqueidiomas{grid-area:idio}
      & .header-menu{
        grid-area:menu; display:flex!important; justify-content:flex-start; min-width:0;
        margin:6px calc(var(--edge) * -1) 0!important; padding:0 var(--edge)!important;
        overflow-x:auto!important; overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch; scrollbar-width:none;
        border-top:1px solid var(--line)!important;
        -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
        mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);

        &::-webkit-scrollbar{display:none}
        & ul{margin:0 auto!important;padding:0 26px 0 0!important;width:max-content!important}
      }
    }
  }

  /* ---------- MÓVIL (≤560px) y muy estrecho (≤360px) ---------- */
  @media (max-width:560px){
    --pad-t:8px; --edge:12px; --gap-x:10px; --gap-y:2px;
    --nav-px:12px;
    --logo-h:46px;
    --tel-py:9px; --tel-px:13px; --tel-gap:6px; --tel-icon:13px;
    --flag-w:20px; --flag-gap:5px;
  }
  @media (max-width:360px){
    --logo-h:40px;
    --tel-py:8px; --tel-px:11px; --tel-fs:12.5px;
    --flag-w:18px;
  }
}

/* Respeta "reducir movimiento", incluidos los pseudoelementos (subrayado del menú, chevrons) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   CABECERA MÓVIL PROPIA (≤820px) · la crea el JavaScript "giro-cabecera-movil"
   Si el JS no estuviera pegado, la cabecera de Inmovilla sigue visible.
   ========================================================================== */
#giro-mh{display:none}

@media (max-width:820px){
  html{scroll-padding-top:calc(var(--gm-h) + 12px)}
  html.giro-mh-on #supercontenedor #modulo-cabecera-2{display:none!important}
  html.gm-lock{overflow:hidden}

  #giro-mh{
    display:block; position:sticky; top:0; z-index:960;
    background:var(--white); font-family:var(--font);
    box-shadow:0 2px 0 var(--gold),0 8px 22px rgb(var(--shadow-rgb) / .10);

    & *{box-sizing:border-box}

    & :is(a,button):focus-visible{outline:2px solid var(--gold-dk);outline-offset:2px}

    & .gm-bar{
      display:flex; align-items:center; gap:10px; height:var(--gm-h); padding:0 14px;
      background:var(--white); position:relative; z-index:2;
    }
    & .gm-logo{margin-right:auto;display:flex;align-items:center;height:100%}
    & .gm-logo img{height:40px;width:auto;max-width:none;display:block}

    & .gm-call{
      width:44px; height:44px; border-radius:50%;
      background:var(--gold); color:var(--gold-ink);
      display:grid; place-items:center;
      box-shadow:0 4px 12px color-mix(in srgb,var(--gold) 35%,transparent);
      -webkit-tap-highlight-color:transparent;
    }
    & :is(.gm-call,.gm-tel) svg{width:20px;height:20px;fill:currentColor}

    /* Hamburguesa → aspa */
    & .gm-burger{
      width:44px; height:44px; border:1.5px solid var(--line); border-radius:12px;
      background:var(--white); position:relative; cursor:pointer; padding:0;
      -webkit-tap-highlight-color:transparent;

      & i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s,top .25s}
      & i:nth-child(1){top:14px}
      & i:nth-child(2){top:20px}
      & i:nth-child(3){top:26px}
    }
    &.open .gm-burger i:nth-child(1){top:20px;transform:rotate(45deg)}
    &.open .gm-burger i:nth-child(2){opacity:0}
    &.open .gm-burger i:nth-child(3){top:20px;transform:rotate(-45deg)}

    /* Cajón desplegable */
    & #gm-drawer{
      position:absolute; left:0; right:0; top:100%;
      background:var(--white); max-height:0; overflow:hidden; visibility:hidden;
      transition:max-height .3s var(--ease),visibility 0s .3s;   /* visibility con retardo al cerrar */
      box-shadow:0 18px 30px rgb(var(--shadow-rgb) / .18);
      z-index:1;

      & ul{list-style:none;margin:0;padding:6px 0}
      & li{margin:0;padding:0}
    }
    &.open #gm-drawer{
      max-height:calc(100vh - var(--gm-h));
      max-height:calc(100dvh - var(--gm-h));
      overflow-y:auto; visibility:visible;
      transition:max-height .3s var(--ease);
    }

    & a.gm-l{
      display:flex; align-items:center; justify-content:space-between;
      padding:16px 22px; font:700 15px/1.2 var(--font); text-transform:uppercase; letter-spacing:.04em;
      color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);

      &::after{content:"\203A";font-size:22px;line-height:1;color:var(--gold)}
      &:focus-visible{outline-offset:-3px}
    }
    & a.gm-l:is(.on,[aria-current="page"]){color:var(--gold-dk);box-shadow:inset 4px 0 0 var(--gold);background:var(--paper)}

    & .gm-foot{
      padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px));
      display:flex; flex-direction:column; gap:16px; align-items:center;
    }
    & .gm-tel{
      display:flex; align-items:center; justify-content:center; gap:10px;
      width:100%; height:52px; border-radius:999px;
      background:var(--gold); color:var(--gold-ink);
      font:800 16px var(--font); text-decoration:none;
    }

    /* Banderas dentro del cajón (se reutiliza el bloque de idiomas de Inmovilla) */
    & .gm-flags{
      & #header-bloqueidiomas{
        position:static!important; display:flex!important; width:auto!important; height:auto!important;
        margin:0!important; padding:0!important; background:none!important; transform:none!important;
      }
      & .languagepicker{
        display:flex!important; gap:14px; margin:0!important; padding:0!important;
        list-style:none; position:static!important; background:none!important;
      }
      & li{display:flex;margin:0!important;padding:0!important}
      & img{width:32px!important;height:auto!important;border-radius:4px;max-width:none!important}
      & #idioSeleccionado{display:none!important}
    }

    /* Velo oscuro tras el cajón */
    & .gm-veil{
      position:fixed; left:0; right:0; top:var(--gm-h); bottom:0;
      background:rgb(var(--shadow-rgb) / .45);
      opacity:0; pointer-events:none; transition:opacity .25s; z-index:0;
    }
    &.open .gm-veil{opacity:1;pointer-events:auto}
  }
}

}