/* Contraste: --piedra y --primario eran demasiado claros sobre el crema para
     texto pequeño. Medido: el pueblo de las tarjetas daba 3,26:1 y el precio
     3,76:1, cuando la norma (WCAG AA) pide 4,5:1 por debajo de 24px. Oscurecidos
     un 17% y un 10%: mismo tono, ya legibles. De paso el blanco sobre el botón
     verde pasa de 4,31:1 a 5,15:1. */
  :root{
    --noche:#0e0c0a; --hueso:#f4efe6; --tinta:#1d1b16;
    --mint:#5ed3a4; --primario:#1c7c59; --oro-claro:#e8c98f; --piedra:#736c61; --verde:#22352c;
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    --redonda:'Arial Rounded MT Bold','Segoe UI',Roboto,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--hueso);color:var(--tinta);font-family:var(--sans)}
  ::selection{background:var(--mint);color:var(--noche)}
  h1,h2,h3{font-family:var(--serif);font-weight:300}
  img{max-width:100%;display:block}
  a{color:inherit}

  header.barra{position:sticky;top:0;z-index:50;background:var(--verde);color:var(--hueso)}
  .barra .fila{max-width:1240px;margin:0 auto;padding:16px clamp(18px,4vw,54px);
      display:flex;justify-content:space-between;align-items:center;gap:16px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo svg{width:28px;height:auto;flex:0 0 auto}
  .logo b{font-family:var(--redonda);font-weight:700;font-size:14px;letter-spacing:.12em;white-space:nowrap}
  .barra nav{display:flex;gap:22px;align-items:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
  /* El padding vertical da zona pulsable: sin él la caja del enlace mide
     exactamente la altura de la línea, 15px. */
  .barra nav a{text-decoration:none;opacity:.85;padding:11px 0}
  .barra nav a:hover,.barra nav a[aria-current]{opacity:1;color:var(--mint)}
  @media(max-width:640px){.barra nav a.oculta-movil{display:none}.logo b{font-size:12px}
    .barra nav{gap:16px}}
  /* Por debajo de 430px el nombre escrito y los enlaces no caben y el último se
     pega al borde de la pantalla. Se queda la marca dibujada, que sigue llevando
     a la portada y conserva su aria-label. */
  @media(max-width:430px){.logo b{display:none}}
  @media(max-width:360px){
    .barra .fila{padding-left:14px;padding-right:14px}
    .barra nav{gap:12px;font-size:11px;letter-spacing:.08em}}

  .envoltorio{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,54px)}
  .volver{display:inline-block;margin-top:22px;font-size:12px;letter-spacing:.16em;
      text-transform:uppercase;color:var(--primario);text-decoration:none}
  .volver:hover{text-decoration:underline}

  /* ═══ galería ═══ */
  .galeria{margin-top:18px;display:grid;gap:10px;grid-template-columns:1fr}
  @media(min-width:860px){.galeria{grid-template-columns:2fr 1fr}}
  .principal{position:relative;border-radius:12px;overflow:hidden;background:#e7e0d2}
  .principal img{width:100%;aspect-ratio:3/2;object-fit:cover}
  .principal .contador{position:absolute;right:12px;bottom:12px;background:rgba(15,32,25,.85);
      color:#fff;font-size:12px;padding:6px 12px;border-radius:99px}
  .flecha{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer;
      background:rgba(15,32,25,.7);color:#fff;width:40px;height:40px;border-radius:50%;
      font-size:20px;line-height:1;display:grid;place-items:center;transition:background .2s}
  .flecha:hover{background:rgba(15,32,25,.95)}
  .flecha.izq{left:12px} .flecha.der{right:12px}
  .miniaturas{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);align-content:start}
  @media(min-width:860px){.miniaturas{grid-template-columns:repeat(2,1fr)}}
  .miniaturas button{border:0;padding:0;cursor:pointer;border-radius:8px;overflow:hidden;
      background:#e7e0d2;line-height:0;outline-offset:2px}
  .miniaturas img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .2s}
  .miniaturas button[aria-current] img{outline:2px solid var(--primario);outline-offset:-2px}
  .miniaturas button:hover img{opacity:.85}

  /* ═══ datos ═══ */
  .cuerpo{display:grid;gap:clamp(26px,4vw,54px);margin-top:clamp(28px,4vw,46px);grid-template-columns:1fr}
  @media(min-width:900px){.cuerpo{grid-template-columns:1.6fr 1fr;align-items:start}}
  .kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--primario)}
  .cuerpo h1{font-size:clamp(28px,3.6vw,44px);line-height:1.12;margin-top:10px}
  .precio-grande{font-family:var(--serif);font-size:clamp(26px,3vw,36px);color:var(--primario);margin-top:14px}
  .rasgos{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .rasgo{background:#fff;border:0.5px solid #ded4c2;border-radius:99px;padding:9px 16px;font-size:13.5px}
  .rasgo b{font-weight:500}
  .descripcion{margin-top:26px;font-size:16px;line-height:1.85;color:#575044;white-space:pre-line}

  .tarjeta-contacto{background:var(--verde);color:var(--hueso);border-radius:14px;padding:26px;
      position:sticky;top:86px}
  .tarjeta-contacto h2{font-size:22px;line-height:1.25}
  .tarjeta-contacto p{margin-top:12px;font-size:14.5px;line-height:1.75;color:#cdd6cb}
  .tarjeta-contacto .datos{margin-top:20px;display:grid;gap:11px;font-size:15px}
  .tarjeta-contacto a.enlace{color:var(--hueso);text-decoration:none;border-bottom:1px solid #4b6355}
  .tarjeta-contacto a.enlace:hover{border-color:var(--mint)}
  .btn-wa{display:block;text-align:center;margin-top:20px;background:var(--mint);color:#0f2019;
      text-decoration:none;border-radius:99px;padding:14px;font-size:11.5px;letter-spacing:.18em;
      text-transform:uppercase;font-weight:600;transition:opacity .2s}
  .btn-wa:hover{opacity:.9}
  .refe{margin-top:16px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9fb3a4}

  .estado{padding:clamp(50px,9vw,110px) 0;color:var(--piedra);font-size:16px;line-height:1.8}
  .estado h1{font-size:clamp(26px,3.4vw,40px);color:var(--tinta);margin-bottom:14px}
  .esqueleto{background:#e7e0d2;border-radius:12px;animation:pulso 1.4s ease-in-out infinite}
  @keyframes pulso{0%,100%{opacity:1}50%{opacity:.55}}

  footer{background:#101710;color:#7e937f;font-size:11.5px;letter-spacing:.08em;
      padding:44px 22px;text-align:center;margin-top:70px}
  footer .logo{justify-content:center;color:#cdd6cb;margin-bottom:14px}
  footer p{line-height:1.8}
  footer a{color:#a9c3ab}
  footer .legales{margin-top:12px}
  footer .legales a{margin:0 7px;text-decoration:none}
  footer .legales a:hover{color:var(--mint)}

  @media (prefers-reduced-motion: reduce){.esqueleto{animation:none}}

  /* ── añadidos de las páginas generadas (ver 8-seo/generar.py) ── */
  [hidden]{display:none !important}
  .migas{margin-top:20px;font-size:12.5px;color:var(--piedra);display:flex;gap:8px;
      flex-wrap:wrap;align-items:center}
  .migas a{color:var(--primario);text-decoration:none}
  .migas a:hover{text-decoration:underline}
  .migas i{font-style:normal;opacity:.5}
  .migas [aria-current]{color:var(--tinta)}

  /* ── galería ────────────────────────────────────────────────────────────
     Todas las fotos van en el HTML. El problema de antes: dos columnas de
     miniaturas crecían MÁS que la foto grande y dejaban un hueco enorme debajo.
     Solución: en pantalla grande se le da proporción a la galería entera, así la
     altura la manda la foto y la columna de miniaturas hace scroll dentro. */
  @media(min-width:860px){
    .galeria{aspect-ratio:20/9}
    .principal{height:100%}
    .miniaturas{height:100%;overflow-y:auto;padding-right:4px;
        scrollbar-width:thin;scrollbar-color:#c9bfa9 transparent}
    .miniaturas::-webkit-scrollbar{width:6px}
    .miniaturas::-webkit-scrollbar-thumb{background:#c9bfa9;border-radius:99px}
  }
  .principal img{height:100%;object-fit:cover}
  /* En móvil, tira horizontal: en columna ocupaban media pantalla y había que
     bajar mucho para llegar al precio.
     Se usa flex y no grid, y con `align-items:flex-start`, porque los items de
     una rejilla se ESTIRAN a la altura de la fila por defecto: así la miniatura
     cogía los 450px de su atributo `height` en vez de su proporción 4/3, y la
     tira medía el doble que la foto grande. */
  @media(max-width:859px){
    .miniaturas{display:flex;align-items:flex-start;gap:10px;
        grid-template-columns:none;overflow-x:auto;padding-bottom:6px;
        scrollbar-width:thin}
    .miniaturas button{flex:0 0 31%}
    .miniaturas img{width:100%;height:auto;aspect-ratio:4/3}
  }
  .contador{pointer-events:none}

  /* ── ver la foto a pantalla completa ────────────────────────────────────
     No estaba y es lo primero que uno intenta: pulsar la foto para verla bien.
     En una web de casas, las fotos son el producto. */
  .lupa{position:fixed;inset:0;z-index:200;background:rgba(10,8,6,.94);
      display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,54px)}
  .lupa img{max-width:100%;max-height:100%;width:auto;height:auto;
      object-fit:contain;border-radius:8px;cursor:default}
  .lupa-cerrar,.lupa-flecha{position:absolute;border:0;cursor:pointer;color:#f4efe6;
      background:rgba(244,239,230,.14);border-radius:50%;width:46px;height:46px;
      font-size:22px;line-height:1;display:grid;place-items:center;
      transition:background .2s;font-family:inherit}
  .lupa-cerrar:hover,.lupa-flecha:hover{background:rgba(244,239,230,.3)}
  .lupa-cerrar:focus-visible,.lupa-flecha:focus-visible{outline:2px solid #5ed3a4;outline-offset:2px}
  .lupa-cerrar{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);font-size:18px}
  .lupa-flecha{top:50%;transform:translateY(-50%)}
  .lupa-flecha.izq{left:clamp(8px,2vw,22px)}
  .lupa-flecha.der{right:clamp(8px,2vw,22px)}
  .lupa-contador{position:absolute;bottom:clamp(14px,3vw,28px);left:50%;
      transform:translateX(-50%);color:#cdd6cb;font-size:13.5px;letter-spacing:.12em;
      background:rgba(10,8,6,.6);padding:7px 16px;border-radius:99px}
  @media(max-width:520px){
    .lupa-flecha{width:40px;height:40px;font-size:19px}
  }

  /* preguntas frecuentes */
  .faq{margin-top:40px}
  .faq h2{font-size:24px;margin-bottom:6px}
  .faq details{border-bottom:0.5px solid #ded4c2;padding:15px 0}
  .faq summary{cursor:pointer;font-size:16px;font-weight:500;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"+";color:var(--primario);margin-right:10px;font-weight:600}
  .faq details[open] summary::before{content:"–"}
  .faq details p{margin-top:10px;font-size:15.5px;line-height:1.75;color:#575044}
  .enlaces-zona{margin-top:30px;font-size:15px;color:#575044}
  .enlaces-zona a{color:var(--primario);text-decoration:none;border-bottom:1px solid rgba(31,138,99,.3)}

  /* viviendas parecidas */
  .otras{margin-top:clamp(46px,6vw,80px)}
  .otras h2{font-size:clamp(22px,2.6vw,30px)}
  .mini-rejilla{margin-top:22px;display:grid;gap:18px;
      grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .mini-ficha{text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;gap:5px}
  .mini-ficha img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;margin-bottom:5px}
  .mini-ficha .mp{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra)}
  .mini-ficha .mt{font-family:var(--serif);font-size:16.5px;line-height:1.3}
  .mini-ficha .mpr{font-family:var(--serif);color:var(--primario);font-size:15.5px}

  /* hubs de zona y tipo */
  .hub-cabecera{margin-top:6px}
  .hub-cabecera h1{font-family:var(--serif);font-weight:300;
      font-size:clamp(30px,4.2vw,48px);line-height:1.1;margin-top:12px}
  .hub-resumen{margin-top:22px;background:#fff;border:0.5px solid #ded4c2;
      border-radius:14px;padding:22px 24px;max-width:760px}
  .hub-resumen h2{font-size:19px;font-family:var(--sans);font-weight:600}
  .hub-resumen p{margin-top:11px;font-size:16px;line-height:1.75;color:#575044}
  .hub-resumen b{color:var(--tinta);font-weight:600}
  .hub-resumen a{color:var(--primario);text-decoration:none;border-bottom:1px solid rgba(31,138,99,.3)}
  .hub-rejilla{margin-top:34px;display:grid;gap:clamp(18px,2.4vw,28px);
      grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .ficha-hub{text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;gap:5px}
  .ficha-hub img,.ficha-hub .sinfoto{width:100%;aspect-ratio:4/3;object-fit:cover;
      border-radius:10px;margin-bottom:6px;background:#e7e0d2}
  .ficha-hub .sinfoto{display:grid;place-items:center;color:var(--piedra);font-size:12px;
      letter-spacing:.16em;text-transform:uppercase}
  .ficha-hub .hp{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra)}
  .ficha-hub .ht{font-family:var(--serif);font-size:18px;line-height:1.28}
  .ficha-hub .hpr{font-family:var(--serif);color:var(--primario);font-size:17px}
  .otros-hubs{margin-top:clamp(46px,6vw,74px);padding-top:26px;border-top:1px solid #ded4c2}
  .otros-hubs h2{font-size:20px;font-family:var(--sans);font-weight:600}
  .otros-hubs p{margin-top:12px;font-size:15px;line-height:2;color:var(--piedra)}
  .otros-hubs a{color:var(--primario);text-decoration:none}
  .otros-hubs a:hover{text-decoration:underline}