/* Cala Escondida — hoja de estilos compartida
   Sin preprocesador, sin build: se sirve tal cual. */

:root{
  --negro:#0A0A0A;
  --dorado:#C9A96A;
  --dorado-oscuro:#B0904F;
  --blanco-roto:#FAF7EF;
  --blanco:#FFFFFF;
  --gris:#6B6660;
  --gris-claro:#E7E1D4;
  --borde:#E4DDCF;
  --negro-suave:#141310;
  --borde-oscuro:#2A2822;
  --texto-oscuro:#D9D3C4;
  --sombra:0 1px 2px rgba(10,10,10,.04), 0 14px 34px rgba(10,10,10,.09);
  --sombra-suave:0 1px 2px rgba(10,10,10,.03), 0 6px 16px rgba(10,10,10,.05);
  --sombra-cabecera:0 1px 0 rgba(201,169,106,.14), 0 10px 30px rgba(0,0,0,.45);
  --radio:10px;
  --radio-sm:6px;
  --fuente-titular:'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-texto:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ancho-maximo:1180px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--blanco-roto);
  color:var(--negro);
  font-family:var(--fuente-texto);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{
  font-family:var(--fuente-titular);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--negro);
}
h3,h4{letter-spacing:-.005em;}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;border-radius:2px;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
p{margin:0 0 1em;color:var(--gris);}
.contenedor{
  max-width:var(--ancho-maximo);
  margin:0 auto;
  padding:0 24px;
}
section{padding:64px 0;}
@media(min-width:800px){section{padding:96px 0;}}

.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--fuente-texto);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dorado-oscuro);
  margin-bottom:16px;
}
.etiqueta::before{
  content:'';
  width:24px;height:1px;
  background:currentColor;
  opacity:.55;
  flex-shrink:0;
}
.oscuro .etiqueta{color:var(--dorado);}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radio);
  font-family:var(--fuente-texto);
  font-weight:600;
  font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
  white-space:nowrap;
}
.boton-primario{background:var(--dorado);color:var(--negro);}
.boton-primario:hover{background:var(--dorado-oscuro);box-shadow:0 6px 18px rgba(201,169,106,.32);}
.boton-contorno{background:transparent;color:var(--negro);border-color:rgba(10,10,10,.35);}
.boton-contorno:hover{background:var(--negro);color:var(--blanco-roto);border-color:var(--negro);}
/* Sobre fondos oscuros el contorno se invierte: si no, queda negro sobre negro. */
.oscuro .boton-contorno,
.hero .boton-contorno,
.hero-secundario .boton-contorno,
.franja-valoracion .boton-contorno{color:var(--blanco-roto);border-color:rgba(201,169,106,.6);}
.oscuro .boton-contorno:hover,
.hero .boton-contorno:hover,
.hero-secundario .boton-contorno:hover,
.franja-valoracion .boton-contorno:hover{background:var(--dorado);color:var(--negro);border-color:var(--dorado);}
.boton-pequeno{padding:9px 18px;font-size:13px;}
.boton-ancho{width:100%;}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(201,169,106,.16);
  transition:background .25s ease, box-shadow .25s ease;
}
/* Al separarse del hero, la barra se vuelve sólida y proyecta sombra sobre el
   contenido claro; sin esto se confunde con las secciones en blanco roto. */
.cabecera.desplazada{background:var(--negro);box-shadow:var(--sombra-cabecera);}
.cabecera .contenedor{
  display:flex;align-items:center;justify-content:space-between;
  min-height:78px;
}
.marca{display:flex;align-items:center;gap:12px;}
.marca svg{display:block;flex-shrink:0;}
.marca-texto{display:flex;flex-direction:column;line-height:1.15;}
.marca-nombre{
  font-family:var(--fuente-titular);
  font-size:17px;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--negro);
}
.marca-sub{
  font-family:var(--fuente-texto);
  font-size:8.5px;
  letter-spacing:.24em;
  font-weight:600;
  color:var(--gris);
  margin-top:3px;
  text-transform:uppercase;
}
.cabecera .marca-nombre{color:var(--blanco);}
.cabecera .marca-sub{color:var(--dorado);opacity:.72;}
.nav-principal{display:flex;align-items:center;gap:32px;}
.nav-enlaces{display:flex;align-items:center;gap:28px;}
.nav-enlaces a{
  font-size:13px;font-weight:600;letter-spacing:.09em;
  color:var(--texto-oscuro);
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-enlaces a::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--dorado);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-enlaces a:hover{color:var(--blanco);}
.nav-enlaces a:hover::after{transform:scaleX(1);}
.nav-enlaces a.activo{color:var(--dorado);}
.nav-enlaces a.activo::after{transform:scaleX(1);}
.boton-hamburguesa{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  background:transparent;border:1.5px solid rgba(201,169,106,.5);border-radius:var(--radio-sm);
  cursor:pointer;
}
.boton-hamburguesa span,.boton-hamburguesa span::before,.boton-hamburguesa span::after{
  content:'';display:block;width:18px;height:2px;background:var(--dorado);position:relative;transition:.2s;
}
.boton-hamburguesa span::before{position:absolute;top:-6px;}
.boton-hamburguesa span::after{position:absolute;top:6px;}
.menu-movil{
  display:none;
  position:fixed;inset:78px 0 0 0;z-index:99;
  background:var(--negro);
  padding:24px;
  overflow-y:auto;
}
.menu-movil.abierto{display:block;}
.menu-movil a{
  display:block;
  font-family:var(--fuente-titular);
  font-size:24px;
  color:var(--blanco-roto);
  padding:18px 0;
  border-bottom:1px solid var(--borde-oscuro);
}
.menu-movil a:last-of-type{border-bottom:0;}
.menu-movil .boton{
  margin-top:24px;color:var(--negro);
  font-family:var(--fuente-texto);font-size:15px;
}
.menu-movil .boton{margin-top:20px;}

@media(max-width:880px){
  .nav-enlaces{display:none;}
  .boton-hamburguesa{display:flex;}
  .cabecera .nav-principal>.boton-primario{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg,#0A0A0A 0%,#151412 100%);
  color:var(--blanco-roto);
  position:relative;
  overflow:hidden;
  padding:88px 0 72px;
}
.hero-fondo{
  position:absolute;inset:0;
  background-image:var(--hero-img);
  background-size:cover;background-position:center;
  opacity:.62;
}
/* La fotografía se acerca muy despacio mientras se lee el titular. */
@keyframes ce-acercar{
  from{transform:scale(1);}
  to{transform:scale(1.08);}
}
.hero-fondo{animation:ce-acercar 26s ease-out both;transform-origin:60% 40%;}
/* Dos velos: uno lateral que oscurece el lado del texto para asegurar el
   contraste, y otro vertical que asienta la foto contra la sección siguiente.
   Así la fotografía se ve de verdad a la derecha sin comerse el titular. */
.hero-velo{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,10,10,.93) 0%,rgba(10,10,10,.82) 38%,rgba(10,10,10,.55) 72%,rgba(10,10,10,.45) 100%),
    linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.85) 100%);
}
.hero .contenedor{position:relative;z-index:2;max-width:760px;}
.hero h1{
  color:var(--blanco);
  font-size:40px;
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:22px;
}
.hero p.intro{
  color:var(--texto-oscuro);
  font-size:17.5px;
  line-height:1.6;
  max-width:520px;
  margin-bottom:36px;
}
.hero-botones{display:flex;flex-wrap:wrap;gap:14px;}
@media(min-width:700px){.hero h1{font-size:60px;}.hero{padding:132px 0 116px;}}

.hero-secundario{
  background:var(--negro);color:var(--blanco-roto);
  padding:64px 0;
}
/* Variante con fotografía de fondo, igual que la portada. */
.hero-secundario.con-foto{position:relative;overflow:hidden;padding:84px 0;}
.hero-secundario.con-foto .contenedor{position:relative;z-index:2;}
@media(min-width:700px){.hero-secundario.con-foto{padding:104px 0;}}
.hero-secundario h1{color:var(--blanco);font-size:32px;}
.hero-secundario p{color:#CFC9BB;max-width:600px;}
@media(min-width:700px){.hero-secundario h1{font-size:44px;}}

/* ---------- Tarjetas de acceso (Comprar/Vender/Invertir) ---------- */
.accesos{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:760px){.accesos{grid-template-columns:repeat(3,1fr);}}
.acceso{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:36px 28px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  display:flex;flex-direction:column;gap:14px;
}
.acceso:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--dorado);}
.acceso-destacado:hover{border-color:var(--dorado);}
.acceso-destacado{
  background:var(--negro);color:var(--blanco-roto);border-color:var(--negro);
}
.acceso-destacado h3,.acceso-destacado p{color:var(--blanco-roto);}
.acceso-destacado p{opacity:.75;}
.acceso-icono{
  width:48px;height:48px;border-radius:50%;
  background:var(--blanco-roto);
  display:flex;align-items:center;justify-content:center;
  color:var(--dorado-oscuro);
}
.acceso-destacado .acceso-icono{background:rgba(201,169,106,.16);color:var(--dorado);}
.acceso h3{font-size:22px;margin-bottom:2px;}
.acceso p{margin-bottom:4px;font-size:15px;}
.acceso .enlace-flecha{margin-top:auto;font-weight:700;font-size:14px;color:var(--dorado-oscuro);}
.acceso-destacado .enlace-flecha{color:var(--dorado);}

/* ---------- Cabecera de sección ---------- */
.cabecera-seccion{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;}
.cabecera-seccion h2{font-size:30px;max-width:560px;}
@media(min-width:700px){.cabecera-seccion h2{font-size:36px;}}

/* ---------- Cuadrícula de propiedades ---------- */
.rejilla-propiedades{display:grid;gap:26px;grid-template-columns:1fr;}
@media(min-width:640px){.rejilla-propiedades{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.rejilla-propiedades{grid-template-columns:repeat(3,1fr);}}

.ficha-propiedad{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sombra-suave);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.ficha-propiedad:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--dorado);}
.ficha-imagen{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--gris-claro);}
.ficha-imagen img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.ficha-propiedad:hover .ficha-imagen img{transform:scale(1.04);}
.ficha-ref{
  position:absolute;top:12px;left:12px;
  background:rgba(10,10,10,.72);color:var(--blanco-roto);
  font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:5px 10px;border-radius:999px;
}
.ficha-estado{
  position:absolute;top:12px;right:12px;
  background:var(--dorado);color:var(--negro);
  font-size:11px;font-weight:700;letter-spacing:.03em;
  padding:5px 10px;border-radius:999px;
}
.ficha-cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ficha-zona{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dorado-oscuro);}
.ficha-titulo{font-family:var(--fuente-titular);font-size:20px;margin:0;}
.ficha-precio{font-family:var(--fuente-titular);font-size:22px;color:var(--negro);margin-top:2px;}
.ficha-datos{display:flex;flex-wrap:wrap;gap:12px;font-size:13.5px;color:var(--gris);margin-top:4px;border-top:1px solid var(--borde);padding-top:12px;}
.ficha-datos span{display:flex;align-items:center;gap:5px;}

/* ---------- Inmuebles todavía sin fotografía ----------
   Mientras no hay fotos propias, se repite el motivo del logotipo en vez de
   dejar un hueco gris: el sol sobre la línea del horizonte. */
.ficha-imagen.sin-foto,
.galeria-principal.sin-foto{
  position:relative;
  background:linear-gradient(180deg,#1C1B16 0%,#151410 48%,#0D0C0A 62%,#080807 100%);
  overflow:hidden;
}
.ficha-imagen.sin-foto::before,
.galeria-principal.sin-foto::before{
  content:'';
  position:absolute;left:50%;top:62%;
  width:70%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(233,201,146,.42) 0%,
    rgba(214,181,120,.2) 20%,
    rgba(201,169,106,.07) 38%,
    rgba(201,169,106,0) 62%);
}
.ficha-imagen.sin-foto::after,
.galeria-principal.sin-foto::after{
  content:'';
  position:absolute;left:0;right:0;top:62%;height:1px;
  background:linear-gradient(90deg,
    rgba(201,169,106,0),rgba(233,201,146,.75),rgba(201,169,106,0));
}
.galeria-principal.sin-foto{display:flex;align-items:flex-end;justify-content:center;}
.galeria-pendiente{
  position:relative;z-index:1;
  margin:0 0 26px;padding:0 24px;
  color:#B9B3A4;font-size:13.5px;text-align:center;
}

/* ---------- Por qué / bloques con icono ---------- */
.bloques-icono{display:grid;gap:28px;grid-template-columns:1fr;}
@media(min-width:640px){.bloques-icono{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.bloques-icono{grid-template-columns:repeat(4,1fr);}}
.bloque-icono{text-align:left;}
.bloque-icono .icono{
  width:52px;height:52px;border-radius:50%;
  background:var(--blanco);border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;
  color:var(--dorado-oscuro);margin-bottom:16px;
}
.bloque-icono h3{font-size:18px;}
.bloque-icono p{font-size:14.5px;margin:0;}

/* ---------- Plazas ---------- */
.rejilla-plazas{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:640px){.rejilla-plazas{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.rejilla-plazas{grid-template-columns:repeat(4,1fr);}}
/* Cada plaza repite el motivo del logotipo: el sol sobre la línea del horizonte.
   El resplandor (::before) sube desde el borde inferior y la línea (::after) lo
   corta, de modo que el nombre de la ciudad queda sobre el agua. */
.plaza{
  border-radius:var(--radio);
  overflow:hidden;
  position:relative;
  aspect-ratio:3/4;
  /* Cielo arriba, agua abajo: el corte cae justo en la línea del horizonte. */
  background:linear-gradient(180deg,#1C1B16 0%,#151410 48%,#0D0C0A 62%,#080807 100%);
  border:1px solid var(--borde-oscuro);
  display:flex;align-items:flex-end;
  padding:24px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
/* El sol: un halo redondo centrado en el horizonte. Al ir centrado dentro de su
   propia caja se desvanece en todas las direcciones y no deja el corte recto. */
.plaza::before{
  content:'';
  position:absolute;left:50%;top:62%;
  width:82%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(240,210,158,.72) 0%,
    rgba(224,192,133,.38) 20%,
    rgba(201,169,106,.16) 38%,
    rgba(201,169,106,.05) 55%,
    rgba(201,169,106,0) 70%);
  transition:transform .45s ease, opacity .45s ease;
  pointer-events:none;
}
.plaza::after{
  content:'';
  position:absolute;left:0;right:0;top:62%;
  height:1px;
  background:linear-gradient(90deg,
    rgba(201,169,106,0) 0%,
    rgba(201,169,106,.28) 18%,
    rgba(233,201,146,.9) 50%,
    rgba(201,169,106,.28) 82%,
    rgba(201,169,106,0) 100%);
  pointer-events:none;
}
.plaza>div{position:relative;z-index:1;}
/* La silueta del monumento se recorta contra el horizonte, como a contraluz. */
.plaza-silueta{
  position:absolute;left:0;right:0;bottom:38%;
  width:100%;height:auto;
  color:#0A0A0A;
  opacity:.92;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.plaza:hover .plaza-silueta{transform:translateY(-4px);}
.plaza:hover{border-color:rgba(201,169,106,.4);box-shadow:0 18px 40px rgba(0,0,0,.4);}
/* Al pasar el ratón el sol sube un poco sobre el horizonte. */
.plaza:hover::before{transform:translate(-50%,-56%) scale(1.06);}
.plaza h3{color:var(--blanco);font-size:24px;margin-bottom:6px;}
.plaza p{color:var(--dorado);font-size:12px;margin:0;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- Franja de valoración ---------- */
.franja-valoracion{
  background:var(--negro);color:var(--blanco-roto);text-align:center;
}
.franja-valoracion h2{color:var(--dorado);font-size:30px;max-width:640px;margin:0 auto 14px;}
.franja-valoracion p{color:#CFC9BB;max-width:520px;margin:0 auto 30px;}
@media(min-width:700px){.franja-valoracion h2{font-size:40px;}}

/* ---------- Formularios ---------- */
.formulario{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:30px;
  display:grid;gap:18px;
  box-shadow:var(--sombra-suave);
}
.formulario.formulario-oscuro{background:#141310;border-color:#2a2822;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo label{font-size:13px;font-weight:600;letter-spacing:.02em;}
.formulario-oscuro .campo label{color:var(--blanco-roto);}
.campo label{color:var(--negro);}
.campo input,.campo select,.campo textarea{
  font-family:var(--fuente-texto);
  font-size:15px;
  padding:13px 14px;
  border:1.5px solid var(--borde);
  border-radius:var(--radio-sm);
  background:var(--blanco-roto);
  color:var(--negro);
  width:100%;
  transition:border-color .2s ease, background .2s ease;
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#CFC4AC;}
.formulario-oscuro .campo input,.formulario-oscuro .campo select,.formulario-oscuro .campo textarea{
  background:#1D1B17;border-color:#3a372e;color:var(--blanco-roto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--dorado);outline-offset:1px;}
.fila-campos{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:600px){.fila-campos-2{grid-template-columns:1fr 1fr;}}
.formulario-nota{font-size:12.5px;color:var(--gris);margin:0;}
.formulario-oscuro .formulario-nota{color:#9d9787;}
.mensaje-envio{display:none;padding:14px 16px;border-radius:var(--radio-sm);background:#EDE7D6;font-size:14px;margin-top:4px;}
.mensaje-envio.visible{display:block;}
.mensaje-envio.error{background:#F8E7E2;color:#7A3B2C;}

/* ---------- Situación comercial: vendido y reservado ---------- */
/* El sello va sobre la foto, en diagonal, y la tarjeta se apaga: quien recorre
   el listado tiene que distinguir de un vistazo lo que puede visitar. */
.ficha-sello{
  position:absolute;z-index:2;top:14px;left:50%;
  transform:translateX(-50%);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 18px;border-radius:999px;
  box-shadow:0 4px 14px rgba(10,10,10,.28);
}
.ficha-sello.vendido{background:var(--negro);color:var(--dorado);border:1px solid var(--dorado);}
.ficha-sello.reservado{background:var(--blanco-roto);color:#8A5A1E;border:1px solid #D9B678;}
.ficha-vendido .ficha-imagen img,
.ficha-reservado .ficha-imagen img{filter:grayscale(.65) brightness(.82);}
.ficha-vendido .ficha-imagen::after{
  content:'';position:absolute;inset:0;background:rgba(10,10,10,.28);
}
.ficha-vendido:hover .ficha-imagen img{transform:none;}
.ficha-vendido .ficha-precio{color:var(--gris);text-decoration:line-through;text-decoration-thickness:1px;}
.ficha-vendido .ficha-estado,.ficha-reservado .ficha-estado{display:none;}

/* En la ficha, junto a la referencia */
.chip-situacion{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px;
}
.chip-situacion.vendido{background:var(--negro);color:var(--dorado);}
.chip-situacion.reservado{background:#F3E6CC;color:#7A5216;}
.nota-situacion{
  font-size:13.5px;line-height:1.55;margin:0 0 16px;padding:12px 14px;
  background:#F7F0DE;border-left:3px solid var(--dorado);border-radius:var(--radio-sm);color:#5E4E2C;
}
/* Una vivienda vendida no pide visita: se retira el formulario y también el
   título y el texto que lo acompañaban, o quedaría un «Solicitar visita»
   suelto debajo del aviso de vendido. */
.panel-visita.vendido > *:not(.aviso-vendida){display:none;}
.aviso-vendida h3{margin:6px 0 10px;}
.aviso-vendida p{margin:0 0 12px;color:var(--gris);}
.panel-vendida .boton{margin-top:0;}


/* ---------- Consentimiento y trampa antirrobots ---------- */
/* La trampa se saca de la pantalla en vez de ocultarla con display:none:
   así los robots que rellenan formularios la siguen encontrando. */
.trampa-bot{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.consentimiento{
  display:flex;gap:10px;align-items:flex-start;
  font-size:12.5px;line-height:1.5;color:var(--gris);cursor:pointer;
}
.consentimiento input{
  width:16px;height:16px;flex-shrink:0;margin-top:1px;accent-color:var(--dorado-oscuro);cursor:pointer;
}
.consentimiento a{color:var(--dorado-oscuro);text-decoration:underline;}
.formulario-oscuro .consentimiento{color:#9d9787;}
.formulario-oscuro .consentimiento a{color:var(--dorado);}

/* ---------- Contacto rápido / mapa ---------- */
.contacto-rapido{display:grid;gap:36px;grid-template-columns:1fr;}
@media(min-width:900px){.contacto-rapido{grid-template-columns:1.1fr .9fr;align-items:start;}}
.datos-contacto{display:flex;flex-direction:column;gap:18px;}
.dato-contacto{display:flex;gap:14px;align-items:flex-start;}
.dato-contacto .icono{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--blanco);border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;color:var(--dorado-oscuro);
}
.dato-contacto h4{margin:0 0 2px;font-family:var(--fuente-texto);font-size:15px;font-weight:700;}
.dato-contacto p,.dato-contacto a{margin:0;font-size:14.5px;}
.dato-contacto a:hover{color:var(--dorado-oscuro);}
.mapa-embebido{
  width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radio);
  filter:grayscale(.15);
}

/* ---------- Filtros propiedades ---------- */
.barra-filtros{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:20px;
  margin-bottom:36px;
}
.filtros-cabecera{display:flex;align-items:center;justify-content:space-between;}
.boton-filtros-movil{
  display:none;width:100%;
  background:var(--blanco-roto);border:1.5px solid var(--negro);border-radius:var(--radio-sm);
  padding:12px;font-weight:700;font-size:14px;cursor:pointer;
}
.rejilla-filtros{display:grid;gap:16px;grid-template-columns:1fr;margin-top:16px;}
@media(min-width:760px){.rejilla-filtros{grid-template-columns:repeat(4,1fr) auto;align-items:end;margin-top:0;}}
@media(max-width:759px){
  .boton-filtros-movil{display:block;}
  .rejilla-filtros{display:none;}
  .rejilla-filtros.abierto{display:grid;}
}
.contador-resultados{font-size:14px;color:var(--gris);margin-bottom:20px;}

/* ---------- Página de propiedad ---------- */
.galeria{display:grid;gap:10px;grid-template-columns:1fr;}
.galeria-principal{border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3;background:var(--gris-claro);}
.galeria-principal img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.galeria-miniaturas{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.galeria-miniaturas img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--radio-sm);cursor:pointer;opacity:.7;border:2px solid transparent;}
.galeria-miniaturas img:hover,.galeria-miniaturas img.activa{opacity:1;border-color:var(--dorado);}
.galeria-mas{
  aspect-ratio:1/1;border-radius:var(--radio-sm);background:var(--negro);color:var(--blanco-roto);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;
}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;padding:24px;}
.lightbox.abierto{display:flex;}
.lightbox img{max-width:100%;max-height:88vh;border-radius:6px;}
.lightbox-cerrar{position:absolute;top:20px;right:24px;color:var(--blanco);font-size:32px;background:none;border:0;cursor:pointer;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:var(--blanco);width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;}
.lightbox-prev{left:16px;}.lightbox-siguiente{right:16px;}

.cabecera-ficha{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin:28px 0 8px;}
.cabecera-ficha h1{font-size:28px;margin:0;}
@media(min-width:700px){.cabecera-ficha h1{font-size:36px;}}
.precio-ficha{font-family:var(--fuente-titular);font-size:26px;color:var(--dorado-oscuro);white-space:nowrap;}
.chip-ref{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;background:var(--negro);color:var(--blanco-roto);padding:5px 12px;border-radius:999px;margin-bottom:10px;}
.tabla-caracteristicas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:24px;margin:28px 0;}
@media(min-width:640px){.tabla-caracteristicas{grid-template-columns:repeat(3,1fr);}}
.caracteristica{display:flex;flex-direction:column;gap:2px;}
.caracteristica .valor{font-family:var(--fuente-titular);font-size:19px;}
.caracteristica .etiqueta-carac{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em;}
.descripcion-ficha{max-width:760px;margin:32px 0;}
.descripcion-ficha h3{font-size:18px;margin-top:24px;}
.panel-visita{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:26px;
  position:sticky;top:100px;
}
.disposicion-ficha{display:grid;gap:40px;grid-template-columns:1fr;}
@media(min-width:960px){.disposicion-ficha{grid-template-columns:1.6fr .9fr;align-items:start;}}

/* ---------- Grid propiedad + visita layout wrapper ---------- */
.contenido-ficha-principal{min-width:0;}

/* ---------- Pie ---------- */
.pie{background:var(--negro);color:#C9C4B6;padding:64px 0 28px;}
.pie a{color:#C9C4B6;}
.pie a:hover{color:var(--dorado);}
.pie-rejilla{display:grid;gap:36px;grid-template-columns:1fr;margin-bottom:40px;}
@media(min-width:760px){.pie-rejilla{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.pie-marca{display:flex;flex-direction:column;gap:14px;max-width:280px;}
.pie-marca .marca-nombre{color:var(--blanco-roto);}
.pie-marca p{color:#8f8a7c;font-size:13.5px;margin:0;}
.pie h4{color:var(--blanco-roto);font-family:var(--fuente-texto);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;}
.pie ul{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.pie-social{display:flex;gap:12px;margin-top:6px;}
.pie-social a{
  width:34px;height:34px;border-radius:50%;border:1px solid #33312A;
  display:flex;align-items:center;justify-content:center;
}
.pie-legal{
  border-top:1px solid #26241E;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  font-size:12.5px;color:#736E60;
}
.pie-legal .enlaces-legales{display:flex;gap:18px;flex-wrap:wrap;}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante{
  position:fixed;right:20px;bottom:20px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.whatsapp-flotante:hover{transform:scale(1.06);}

/* ---------- Banner de cookies ---------- */
.banner-cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:180;
  max-width:560px;margin:0 auto;
  background:var(--negro);color:var(--blanco-roto);
  border-radius:var(--radio);
  padding:22px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:none;
}
.banner-cookies.visible{display:block;}
.banner-cookies p{color:#CFC9BB;font-size:13.5px;margin:0 0 16px;}
.banner-cookies-botones{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- Aparición al entrar en pantalla ---------- */
/* Solo se activa si el JS marca el documento; sin JS todo queda visible. */
html.con-revelado .revelar{opacity:0;transform:translateY(16px);}
html.con-revelado .revelar.visible{
  opacity:1;transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
@media(prefers-reduced-motion:reduce){
  html.con-revelado .revelar{opacity:1;transform:none;}
}

/* ---------- Genéricos de contenido ---------- */
.franja-clara{background:var(--blanco);}
.dos-columnas{display:grid;gap:44px;grid-template-columns:1fr;}
@media(min-width:900px){.dos-columnas{grid-template-columns:1fr 1fr;align-items:center;}}
.pasos{display:grid;gap:24px;grid-template-columns:1fr;counter-reset:paso;}
@media(min-width:760px){.pasos{grid-template-columns:repeat(4,1fr);}}
.paso{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:26px 22px;}
.paso .numero{
  font-family:var(--fuente-titular);font-size:30px;color:var(--dorado-oscuro);margin-bottom:10px;display:block;
}
.paso h3{font-size:17px;}
.paso p{font-size:14px;margin:0;}
.lista-razones{display:flex;flex-direction:column;gap:18px;}
.razon{display:flex;gap:16px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:20px 22px;}
.razon .numero{font-family:var(--fuente-titular);font-size:24px;color:var(--dorado-oscuro);flex-shrink:0;}
.razon h4{margin:0 0 4px;font-size:16px;}
.razon p{margin:0;font-size:14px;}
.texto-legal{max-width:760px;}
.texto-legal h2{font-size:22px;margin-top:36px;}
.texto-legal p, .texto-legal li{color:var(--gris);font-size:15px;}
.texto-legal li{margin-bottom:8px;}
.texto-legal ul{list-style:disc;padding-left:20px;}
.aviso-borrador{
  background:#FBF1DC;border:1px solid #E7CE97;border-radius:var(--radio-sm);
  padding:16px 18px;font-size:14px;color:#5c4a1c;margin-bottom:32px;
}
.miga-pan{font-size:13px;color:var(--gris);margin-bottom:20px;}
.miga-pan a:hover{color:var(--dorado-oscuro);}
.foto-encuadrada{
  border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sombra);
}
.foto-encuadrada img{width:100%;height:100%;object-fit:cover;}

/* Cita destacada: ocupa el lugar de una fotografía sin parecer un hueco. */
.cita{
  margin:0;padding:38px 34px;
  background:var(--negro);color:var(--blanco-roto);
  border-radius:var(--radio);
  position:relative;overflow:hidden;
}
.cita::before{
  content:'';
  position:absolute;left:50%;bottom:-55%;
  width:min(520px,110%);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(233,201,146,.24) 0%,rgba(201,169,106,.09) 32%,rgba(201,169,106,0) 62%);
  pointer-events:none;
}
.cita p{
  position:relative;z-index:1;
  font-family:var(--fuente-titular);
  font-size:25px;line-height:1.32;color:var(--blanco-roto);
  margin:0 0 18px;text-wrap:balance;
}
.cita cite{
  position:relative;z-index:1;
  font-family:var(--fuente-texto);font-style:normal;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dorado);
}
@media(min-width:700px){.cita{padding:48px 44px;}.cita p{font-size:29px;}}
.tarjetas-zona{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:700px){.tarjetas-zona{grid-template-columns:repeat(2,1fr);}}
.tarjeta-simple{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:24px;}
.tarjeta-simple h3{font-size:17px;}
.tarjeta-simple p{font-size:14px;margin:0;}
.paginacion{display:flex;justify-content:center;margin-top:44px;}

@media(max-width:640px){
  section{padding:56px 0;}
  .hero h1{font-size:32px;}
  .cabecera-seccion h2{font-size:26px;}
}

/* =========================================================================
   ANIMACIONES
   El motivo es el mismo del logotipo: el sol saliendo sobre el horizonte.
   La portada "amanece" al cargar y el resto son microinteracciones de apoyo.
   Todo va con animation-fill-mode:both, de modo que al reducir el movimiento
   (bloque de prefers-reduced-motion del principio) cada elemento salta
   directamente a su estado final en lugar de quedarse invisible.
   ========================================================================= */

@keyframes ce-subir{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:none;}
}
@keyframes ce-aparecer{
  from{opacity:0;}
  to{opacity:1;}
}
/* El sol asciende hasta su posición y se queda. */
@keyframes ce-amanecer{
  from{opacity:0;transform:translate(-50%,90px) scale(.86);}
  to{opacity:1;transform:translate(-50%,0) scale(1);}
}
/* La línea del horizonte se traza de dentro hacia fuera. */
@keyframes ce-trazar-horizonte{
  from{opacity:0;transform:scaleX(0);}
  to{opacity:1;transform:scaleX(1);}
}
/* Respiración muy lenta del halo: da vida al fondo sin llamar la atención. */
@keyframes ce-respirar{
  from{opacity:.82;transform:translate(-50%,0) scale(1);}
  to{opacity:1;transform:translate(-50%,-10px) scale(1.05);}
}

/* ---------- Portada: la secuencia del amanecer ---------- */
.hero{isolation:isolate;}
/* El sol, tras el velo y por delante del fondo. */
.hero::before{
  content:'';
  position:absolute;z-index:1;
  left:50%;bottom:-32%;
  width:min(720px,105%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(240,212,163,.42) 0%,
    rgba(224,192,133,.22) 16%,
    rgba(201,169,106,.09) 32%,
    rgba(201,169,106,.03) 46%,
    rgba(201,169,106,0) 60%);
  pointer-events:none;
  animation:
    ce-amanecer 1.9s cubic-bezier(.16,.8,.28,1) both,
    ce-respirar 24s ease-in-out 2.4s infinite alternate;
}
/* La línea del agua, al pie de la portada. */
.hero::after{
  content:'';
  position:absolute;z-index:1;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(201,169,106,0) 0%,
    rgba(201,169,106,.45) 22%,
    rgba(233,201,146,.85) 50%,
    rgba(201,169,106,.45) 78%,
    rgba(201,169,106,0) 100%);
  transform-origin:center;
  pointer-events:none;
  animation:ce-trazar-horizonte 1.6s cubic-bezier(.16,.8,.28,1) .35s both;
}
/* El texto entra escalonado, después de que empiece a salir el sol. */
.hero .etiqueta{animation:ce-subir .8s cubic-bezier(.2,.7,.3,1) .30s both;}
.hero h1{animation:ce-subir .9s cubic-bezier(.2,.7,.3,1) .42s both;}
.hero p.intro{animation:ce-subir .9s cubic-bezier(.2,.7,.3,1) .56s both;}
.hero-botones{animation:ce-subir .9s cubic-bezier(.2,.7,.3,1) .70s both;}

/* ---------- Páginas interiores: misma entrada, más corta ---------- */
.hero-secundario .etiqueta{animation:ce-subir .7s cubic-bezier(.2,.7,.3,1) .06s both;}
.hero-secundario h1{animation:ce-subir .75s cubic-bezier(.2,.7,.3,1) .16s both;}
.hero-secundario p{animation:ce-subir .75s cubic-bezier(.2,.7,.3,1) .28s both;}

/* ---------- La franja de valoración también amanece ---------- */
.franja-valoracion{position:relative;overflow:hidden;isolation:isolate;}
.franja-valoracion::before{
  content:'';
  position:absolute;z-index:-1;
  left:50%;bottom:-60%;
  width:min(900px,130%);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(233,201,146,.20) 0%,
    rgba(201,169,106,.08) 34%,
    rgba(201,169,106,0) 60%);
  pointer-events:none;
}
.franja-valoracion .contenedor{position:relative;z-index:1;}

/* ---------- Transición entre páginas ----------
   La web es multipágina; con esto el salto entre secciones deja de ser un
   parpadeo en blanco. Los navegadores que no lo soportan lo ignoran. */
@view-transition{navigation:auto;}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:ce-vt-salida .22s ease both;}
  ::view-transition-new(root){animation:ce-vt-entrada .32s cubic-bezier(.2,.7,.3,1) both;}
}
@keyframes ce-vt-salida{to{opacity:0;}}
@keyframes ce-vt-entrada{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* La cabecera no acompaña al resto: se queda fija y da continuidad. */
.cabecera{view-transition-name:ce-cabecera;}

/* ---------- La portada se retira al hacer scroll ----------
   Ligado a la posición de scroll, no a un temporizador, así que responde al
   gesto y se deshace al volver arriba. Solo donde el navegador lo soporta. */
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference){
    .hero .contenedor{
      animation:ce-retirar-hero linear both;
      animation-timeline:scroll(root block);
      animation-range:0 72vh;
    }
  }
}
@keyframes ce-retirar-hero{
  from{opacity:1;transform:none;}
  to{opacity:.2;transform:translateY(-48px);}
}

/* ---------- Foco de luz en las tarjetas oscuras ----------
   El sol de la marca sigue al cursor. Las coordenadas las pone el JS; si no
   llega a ponerlas, el halo se queda centrado, que es el estado en reposo. */
.plaza::before{
  left:var(--foco-x,50%);
  top:var(--foco-y,62%);
  transition:transform .45s ease, opacity .45s ease, left .3s ease, top .3s ease;
}

/* ---------- Brillo al pasar por el botón principal ---------- */
.boton-primario{position:relative;overflow:hidden;}
.boton-primario::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .6s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
.boton-primario:hover::after{transform:translateX(120%);}

/* ---------- Pantalla de acceso privado (/entrada) ---------- */
.pantalla-acceso{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  background:linear-gradient(180deg,#1C1B16 0%,#151410 48%,#0D0C0A 64%,#080807 100%);
  position:relative;overflow:hidden;
}
/* El sol de la marca, saliendo por detrás de la caja. */
.pantalla-acceso::before{
  content:'';
  position:absolute;left:50%;bottom:-32%;
  width:min(760px,120%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(240,212,163,.3) 0%,
    rgba(224,192,133,.15) 16%,
    rgba(201,169,106,.06) 32%,
    rgba(201,169,106,0) 62%);
  transform:translateX(-50%);
  animation:ce-amanecer 1.6s cubic-bezier(.16,.8,.28,1) both;
  pointer-events:none;
}
.caja-acceso{
  position:relative;z-index:1;
  width:100%;max-width:400px;
  text-align:center;
  animation:ce-subir .7s cubic-bezier(.2,.7,.3,1) .1s both;
}
.marca-acceso{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px;}
.marca-acceso .marca-nombre{
  font-family:var(--fuente-titular);font-size:16px;letter-spacing:.2em;
  font-weight:600;color:var(--blanco);
}
.caja-acceso h1{color:var(--blanco);font-size:30px;margin-bottom:8px;}
.intro-acceso{color:var(--texto-oscuro);font-size:14.5px;margin-bottom:30px;}
#form-acceso{display:flex;flex-direction:column;gap:16px;text-align:left;}
#form-acceso .campo label{color:var(--blanco-roto);}
#form-acceso .campo input{
  background:#1D1B17;border-color:#3a372e;color:var(--blanco-roto);
}
#form-acceso .campo input:hover{border-color:#57523f;}
#form-acceso .boton{margin-top:6px;}
.error-acceso{color:#E8A0A0;font-size:13.5px;margin:0;text-align:center;}
.volver-acceso{
  display:inline-block;margin-top:26px;
  color:var(--texto-oscuro);font-size:13.5px;
}
.volver-acceso:hover{color:var(--dorado);}

/* ---------- Panel de gestión (/entrada/panel) ----------
   Herramienta de trabajo: sobria y rápida. Sin las animaciones del sitio
   público, que aquí solo estorbarían. */
.cuerpo-panel{background:var(--blanco-roto);}
.cabecera-panel{
  background:var(--negro);
  border-bottom:1px solid rgba(201,169,106,.16);
  position:sticky;top:0;z-index:50;
}
.cabecera-panel .contenedor{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:64px;
}
.cabecera-panel .marca-nombre{color:var(--blanco);font-size:15px;}
.cabecera-panel .marca-sub{color:var(--dorado);opacity:.8;}
.acciones-panel{display:flex;align-items:center;gap:18px;}
.enlace-panel{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--fuente-texto);font-size:13.5px;font-weight:600;
  color:var(--texto-oscuro);
}
.enlace-panel:hover{color:var(--dorado);}
.tabla-panel .enlace-panel{color:var(--gris);}
.tabla-panel .enlace-panel:hover{color:var(--dorado-oscuro);}

.contenido-panel{padding:36px 24px 72px;}
/* El panel usa <section>, que en el sitio público lleva 96 px de aire por
   arriba y por abajo. Aquí sobra: deja huecos enormes entre bloques. */
.bloque-panel{margin-bottom:48px;padding:0;}
.bloque-panel h1{font-size:32px;margin-bottom:22px;}
.bloque-panel h2{font-size:22px;margin:0;}

.cifras-panel{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
@media(min-width:760px){.cifras-panel{grid-template-columns:repeat(6,1fr);}}
.cifra-panel{
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--radio);padding:18px;
}
.cifra-panel .cifra{
  display:block;font-family:var(--fuente-titular);font-size:26px;color:var(--negro);
}
.cifra-panel .cifra-etiqueta{
  display:block;margin-top:4px;font-size:12px;color:var(--gris);
}

.cabecera-tabla{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:10px;
}
#buscador{
  font-family:var(--fuente-texto);font-size:14px;
  padding:10px 14px;min-width:260px;
  border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--negro);
}
.nota-panel{font-size:13px;color:var(--gris);margin:0 0 16px;max-width:760px;}

.tabla-envoltorio{
  overflow-x:auto;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
}
.tabla-panel{width:100%;border-collapse:collapse;font-size:14px;min-width:980px;}
/* La tabla de diagnóstico tiene tres columnas cortas: no necesita el ancho
   mínimo de la cartera, que la dejaba cortada por la derecha. */
.tabla-panel.tabla-estado{min-width:0;}
.tabla-estado td:last-child{color:var(--gris);white-space:nowrap;}
.tabla-panel th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--borde);
}
.tabla-panel td{padding:12px 16px;border-bottom:1px solid var(--borde);vertical-align:middle;}
.tabla-panel tr:last-child td{border-bottom:0;}
.tabla-panel tr.fila-modificada{background:#FBF6EA;}
.celda-ref{font-weight:700;font-size:12.5px;letter-spacing:.04em;white-space:nowrap;}
.celda-zona{display:block;font-size:12px;color:var(--gris);margin-top:2px;}
.tabla-panel a:hover{color:var(--dorado-oscuro);text-decoration:underline;}
.campo-precio{
  width:120px;font-family:var(--fuente-texto);font-size:14px;
  padding:7px 10px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco-roto);color:var(--negro);
}
.precio-actual{display:block;font-size:11.5px;color:var(--gris);margin-top:3px;}
.campo-estado{
  font-family:var(--fuente-texto);font-size:13.5px;
  padding:7px 10px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco-roto);color:var(--negro);
}
.sin-resultados{text-align:center;color:var(--gris);padding:28px;}

.pie-tabla{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:16px;
}
.pie-tabla .nota-panel{margin:0;}
.botones-tabla{display:flex;gap:10px;flex-wrap:wrap;}
.botones-tabla .boton:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- Alta de propiedades ---------- */
.rejilla-alta{display:grid;gap:22px;grid-template-columns:1fr;margin-top:20px;align-items:start;}
@media(min-width:1000px){.rejilla-alta{grid-template-columns:1.7fr 1fr;}}

.formulario-alta{
  display:grid;gap:16px;grid-template-columns:1fr;
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--radio);padding:26px;
}
@media(min-width:620px){.formulario-alta{grid-template-columns:1fr 1fr;}}
.formulario-alta .campo-ancho{grid-column:1 / -1;}
.formulario-alta label{font-size:13px;font-weight:600;color:var(--negro);}
.formulario-alta .opcional{font-weight:400;color:var(--gris);}
.formulario-alta input,.formulario-alta select{
  font-family:var(--fuente-texto);font-size:14px;
  padding:10px 12px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco-roto);color:var(--negro);width:100%;box-sizing:border-box;
}
.formulario-alta input[type="file"]{padding:9px;background:var(--blanco);}
.pista-campo{font-size:12px;color:var(--gris);margin:6px 0 0;}
.vista-previa-foto{margin-top:12px;display:flex;align-items:center;gap:14px;}
.vista-previa-foto img{
  width:170px;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radio-sm);border:1px solid var(--borde);
}
.vista-previa-foto span{font-size:12.5px;color:var(--gris);}
.pie-alta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
.aviso-alta{margin:0;font-size:13.5px;color:var(--gris);}
.aviso-alta.error{color:#9B3B2A;}
.aviso-alta.exito{color:#2F6B45;}

/* Mientras no hay token, el formulario se atenúa: no serviría de nada. */
#alta.sin-conexion .formulario-alta{opacity:.5;pointer-events:none;}
.aviso-sin-conexion{display:none;}
#alta.sin-conexion .aviso-sin-conexion{
  display:block;font-size:13.5px;line-height:1.6;color:#7A5216;
  background:#F7F0DE;border-left:3px solid var(--dorado);
  border-radius:var(--radio-sm);padding:14px 16px;margin:0 0 18px;
}
.aviso-sin-conexion .enlace-panel{color:var(--dorado-oscuro);font-weight:600;}

.lateral-alta{
  background:var(--negro);color:var(--texto-oscuro);
  border-radius:var(--radio);padding:24px;
}
.lateral-alta h3{color:var(--blanco);font-size:17px;margin-bottom:12px;}
.lateral-alta label{color:var(--blanco-roto);font-size:13px;font-weight:600;}
.lateral-alta input{
  font-family:var(--fuente-texto);font-size:14px;width:100%;box-sizing:border-box;
  padding:10px 12px;border-radius:var(--radio-sm);
  background:#1D1B17;border:1.5px solid #3a372e;color:var(--blanco-roto);
}
.lateral-alta .campo{margin-bottom:12px;}
.lateral-alta .boton-contorno{color:var(--blanco-roto);border-color:rgba(201,169,106,.5);}
.lateral-alta .boton-contorno:hover{background:var(--dorado);color:var(--negro);border-color:var(--dorado);}
.estado-token{font-size:13px;margin:0 0 16px;}
.estado-token.ok{color:#8FD0A5;}
.estado-token.no{color:#D8A9A0;}
.lateral-alta .enlace-panel{margin-top:14px;display:inline-block;}
.ayuda-token{margin-top:20px;border-top:1px solid var(--borde-oscuro);padding-top:16px;}
.ayuda-token summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--dorado);}
.ayuda-token ol{margin:14px 0 0;padding-left:20px;list-style:decimal;}
.ayuda-token li{font-size:12.5px;margin-bottom:8px;line-height:1.5;}
.ayuda-token p{font-size:12px;color:#9d9787;margin:14px 0 0;}
.ayuda-token strong{color:var(--blanco-roto);}

.avisos-panel{display:grid;gap:16px;grid-template-columns:1fr;margin-top:20px;}
@media(min-width:860px){.avisos-panel{grid-template-columns:repeat(3,1fr);}}
.aviso-panel{
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--radio);padding:22px;
}
.aviso-panel h3{font-size:16px;margin-bottom:8px;}
.aviso-panel p{font-size:13.5px;margin:0;}
.aviso-panel.destacado{background:var(--negro);border-color:var(--negro);}
.aviso-panel.destacado h3{color:var(--blanco);}
.aviso-panel.destacado p{color:var(--texto-oscuro);}
.aviso-panel code{
  font-size:12.5px;background:rgba(201,169,106,.16);color:var(--dorado);
  padding:1px 6px;border-radius:4px;
}



/* ---------- Panel: pantalla de conexión ---------- */
/* Tapa el panel hasta que hay llave comprobada. Sin conexión el panel solo
   deja mirar, así que esto es el primer paso, no una nota al pie. */
.pantalla-conexion{
  position:fixed;inset:0;z-index:80;
  background:rgba(10,10,10,.92);
  display:flex;align-items:flex-start;justify-content:center;
  padding:28px 20px;overflow-y:auto;
}
.pantalla-conexion[hidden]{display:none;}
.caja-conexion{
  background:var(--blanco);border-radius:var(--radio);
  padding:34px 34px 28px;max-width:660px;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:ce-subir .45s cubic-bezier(.2,.7,.3,1) both;
}
.caja-conexion h2{font-size:28px;margin:10px 0 0;}
.conexion-intro{font-size:14.5px;color:var(--gris);line-height:1.6;margin:12px 0 26px;}

.pasos-conexion{list-style:none;margin:0;padding:0;display:grid;gap:22px;}
.pasos-conexion li{display:flex;gap:16px;align-items:flex-start;}
.numero-paso{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:var(--negro);color:var(--dorado);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.pasos-conexion h3{font-size:16px;margin:4px 0 6px;}
.pasos-conexion p{font-size:13.5px;color:var(--gris);line-height:1.55;margin:0 0 12px;}
.pasos-conexion code{
  font-size:12.5px;background:var(--blanco-roto);border:1px solid var(--borde);
  padding:1px 6px;border-radius:4px;color:var(--negro);
}
.form-conexion{display:flex;gap:8px;flex-wrap:wrap;}
.form-conexion input{
  flex:1;min-width:200px;font-family:var(--fuente-texto);font-size:14px;
  padding:11px 13px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--negro);
}
.form-conexion input:focus{outline:2px solid var(--dorado);outline-offset:1px;border-color:var(--dorado);}
.caja-conexion .estado-token{margin:10px 0 0;}
.caja-conexion .estado-token.ok{color:#2F6B45;}
.caja-conexion .estado-token.no{color:#9B3B2A;}

.pie-conexion{margin-top:26px;border-top:1px solid var(--borde);padding-top:18px;}
.ayuda-token.clara{border-top:0;padding-top:12px;margin-top:8px;}
.ayuda-token.clara summary{color:var(--dorado-oscuro);}
.ayuda-token.clara p,.ayuda-token.clara li{color:var(--gris);}
.ayuda-token.clara strong,.ayuda-token.clara em{color:var(--negro);}
.paso-clave{
  background:#F7F0DE;border-left:3px solid var(--dorado);
  border-radius:var(--radio-sm);padding:10px 12px;margin:8px 0;list-style-position:inside;
}
.caja-conexion [data-reintentar]{margin-top:12px;}
.pista-token{font-size:12.5px;color:#9d9787;margin:12px 0 0;}
.pista-token a{color:var(--dorado);text-decoration:underline;}
@media(max-width:600px){
  .caja-conexion{padding:26px 20px 22px;}
  .caja-conexion h2{font-size:23px;}
}

/* ---------- Panel: navegación por secciones ---------- */
/* Se queda pegada justo debajo de la cabecera, que mide 65 px y también es fija. */
.pestanas-panel{background:var(--negro);border-top:1px solid var(--borde-oscuro);position:sticky;top:65px;z-index:40;}
.pestanas-panel .contenedor{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;}
.pestanas-panel .contenedor::-webkit-scrollbar{display:none;}
.pestanas-panel button{
  font-family:var(--fuente-texto);font-size:13.5px;font-weight:600;
  background:none;border:0;border-bottom:2px solid transparent;
  color:#9d9787;padding:16px 16px 13px;cursor:pointer;white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.pestanas-panel button:hover{color:var(--blanco-roto);}
.pestanas-panel button.activa{color:var(--dorado);border-bottom-color:var(--dorado);}

/* ---------- Panel: cifras y tabla ---------- */
.cifra-panel.tono-ok .cifra{color:#2F6B45;}
.cifra-panel.tono-medio .cifra{color:#8A5A1E;}
.cifra-panel.tono-alerta{background:#FDF1EC;border-color:#E9C6B8;}
.cifra-panel.tono-alerta .cifra{color:#9B3B2A;}
.cifra-panel.tono-apagado .cifra{color:var(--gris);}

.controles-tabla{display:flex;gap:10px;flex-wrap:wrap;}
.controles-tabla select,.controles-tabla input{
  font-family:var(--fuente-texto);font-size:14px;
  padding:9px 12px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--negro);
}
.tabla-panel .campo-situacion,.tabla-panel .campo-estado,.tabla-panel .campo-precio{
  font-family:var(--fuente-texto);font-size:13.5px;
  padding:7px 9px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--negro);width:100%;min-width:132px;max-width:160px;
}
.tabla-panel select:disabled,.tabla-panel input:disabled,.tabla-panel button:disabled{
  opacity:.45;cursor:not-allowed;
}
.celda-centro{text-align:center;}
.celda-fija{font-size:13.5px;color:var(--gris);}
.celda-acciones{white-space:nowrap;}
.celda-acciones .enlace-panel{margin-right:12px;}
.enlace-panel.peligro{color:#9B3B2A;}
.enlace-panel.peligro:hover{color:#7A2E20;}
.tabla-panel tr.fila-vendido{background:#FAF9F6;}
.tabla-panel tr.fila-vendido td:first-child,
.tabla-panel tr.fila-vendido a{color:var(--gris);}
.tabla-panel tr.fila-reservado{background:#FDFAF1;}
body.panel-guardando{cursor:progress;}

/* Interruptor de «destacada en portada» */
.interruptor{display:inline-block;position:relative;width:40px;height:22px;cursor:pointer;}
.interruptor input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.interruptor span{
  position:absolute;inset:0;background:var(--gris-claro);border-radius:999px;
  transition:background .2s ease;
  pointer-events:none;   /* el clic tiene que llegar a la casilla de debajo */
}
.interruptor span::after{
  content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;
  background:var(--blanco);border-radius:50%;transition:transform .2s ease;
  box-shadow:0 1px 3px rgba(10,10,10,.25);
}
.interruptor input:checked + span{background:var(--dorado);}
.interruptor input:checked + span::after{transform:translateX(18px);}
.interruptor input:focus-visible + span{outline:2px solid var(--negro);outline-offset:2px;}

/* ---------- Panel: consultas ---------- */
.lista-consultas{display:grid;gap:14px;margin-top:18px;}
.consulta{
  background:var(--blanco);border:1px solid var(--borde);border-left:3px solid var(--gris-claro);
  border-radius:var(--radio);padding:20px 22px;
}
.consulta.estado-nueva{border-left-color:var(--dorado);}
.consulta.estado-visita{border-left-color:#2F6B45;}
.consulta.estado-oferta{border-left-color:#8A5A1E;}
.consulta.estado-cerrada{border-left-color:var(--negro);}
.consulta.estado-descartada{border-left-color:var(--borde);opacity:.62;}
.consulta-cabecera{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;}
.consulta-cabecera h3{font-size:18px;margin:0;}
.consulta-meta{font-size:12.5px;color:var(--gris);margin:4px 0 0;}
.marca-espera{color:#9B3B2A;font-weight:600;}
.consulta-cabecera select{
  font-family:var(--fuente-texto);font-size:13.5px;padding:7px 10px;
  border:1.5px solid var(--borde);border-radius:var(--radio-sm);background:var(--blanco);
}
.consulta-contacto{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;}
.consulta-contacto a{color:var(--dorado-oscuro);font-weight:600;}
.consulta-mensaje{
  font-size:14px;margin:14px 0 0;padding:12px 14px;background:var(--blanco-roto);
  border-radius:var(--radio-sm);color:#4A453E;
}
.consulta-notas{display:block;margin-top:14px;}
.consulta-notas span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:6px;}
.consulta-notas textarea{
  font-family:var(--fuente-texto);font-size:14px;width:100%;box-sizing:border-box;
  padding:11px 13px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--negro);resize:vertical;
}
.consulta-pie{display:flex;gap:16px;align-items:center;margin-top:12px;}
.formulario-alta textarea{
  font-family:var(--fuente-texto);font-size:14px;width:100%;box-sizing:border-box;
  padding:11px 13px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--blanco);color:var(--negro);resize:vertical;
}

/* ---------- Panel: ajustes ---------- */
.lateral-ajustes{max-width:520px;}
.pasos-panel{margin:0;padding-left:22px;list-style:decimal;}
.pasos-panel li{font-size:14px;margin-bottom:10px;line-height:1.55;}

/* ---------- Galería de las fichas ---------- */
.galeria-principal img{transition:opacity .35s ease;}
.galeria-principal img.cambiando{opacity:0;}
.galeria-miniaturas img{transition:opacity .25s ease, border-color .25s ease, transform .25s ease;}
.galeria-miniaturas img:hover{transform:translateY(-2px);}
.lightbox.abierto{animation:ce-aparecer .25s ease both;}
.lightbox.abierto img{animation:ce-ampliar .32s cubic-bezier(.2,.7,.3,1) both;}
@keyframes ce-ampliar{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:none;}
}

/* ---------- Microinteracciones ---------- */
.marca svg{transition:transform .4s cubic-bezier(.2,.7,.3,1);}
.marca:hover svg{transform:translateY(-2px) scale(1.05);}
/* Respuesta al pulsar: sin esto los botones se sienten muertos en el móvil. */
.boton:active{transform:translateY(1px);}
.acceso:active,.ficha-propiedad:active{transform:translateY(-1px);}
.enlace-flecha{transition:transform .25s cubic-bezier(.2,.7,.3,1);display:inline-block;}
.acceso:hover .enlace-flecha{transform:translateX(4px);}

/* ---------- Entradas de los elementos flotantes ---------- */
.whatsapp-flotante{animation:ce-subir .6s cubic-bezier(.2,.7,.3,1) 1.1s both;}
.banner-cookies.visible{animation:ce-subir .5s cubic-bezier(.2,.7,.3,1) both;}