/* ==========================================================================
   Inmobiliaria Arturra · hoja de estilo única (web pública + panel)

   Antes esto era Tailwind por CDN: 400 KB de JavaScript que se descargaban en
   cada visita para generar las clases en el navegador, con su parpadeo inicial.
   Ahora el aspecto está escrito aquí, sin dependencias externas más allá de las
   dos familias tipográficas.

   La idea de diseño: la ficha del escaparate. Las inmobiliarias de barrio
   cuelgan folios en el cristal —foto, precio grande, y una línea de medidas—.
   Cada inmueble de la web es uno de esos folios. Los colores salen de la ría de
   Bilbao: verde pizarra mojada, verdín de los muelles y el latón de los rótulos.
   ========================================================================== */

/* --- Fichas de color y medida -------------------------------------------

   Todo sale del verde del logo, #19F73F. Es un verde de rótulo: precioso en
   pequeño y agresivo en grande, así que se usa en tres alturas distintas:

     · el verde del logo, sólo para chispazos sobre fondo oscuro, brillos y
       filos de un píxel — nunca como texto sobre blanco, donde no se lee;
     · un verde hondo, que es el que hace el trabajo (botones, precios,
       enlaces) y sí tiene contraste sobre papel;
     · degradados de verde muy oscuro para las superficies grandes, que es la
       manera de que el logo mande sin deslumbrar.
   ------------------------------------------------------------------------ */
:root {
    --verde-logo:  #19F73F;   /* el logo, tal cual */
    --verde:       #0B7A24;   /* el que trabaja: botones, precios, enlaces */
    --verde-claro: #0F9B2E;   /* su estado al pasar por encima */
    --verde-luz:   #86E79A;   /* verde claro, para texto sobre fondo oscuro */
    --verde-tenue: #E4F7E8;   /* fondo suave */

    --tinta:      #0A1710;   /* casi negro, con el verde dentro */
    --tinta-2:    #10241A;   /* la superficie oscura de al lado */
    --niebla:     #F1F3EE;   /* fondo de página */
    --papel:      #FFFFFF;
    --linea:      #DBE0D7;
    --linea-fina: #E8ECE4;
    --apagado:    #5D6B60;

    --laton:      #A9762B;   /* el contrapunto cálido: reservados y destacados */
    --laton-sua:  #F6EDDC;
    --alerta:     #A33A2A;
    --alerta-sua: #F7E6E2;

    /* Degradados: aquí es donde se suaviza el verde del rótulo */
    --grad-marca:  linear-gradient(152deg, #06210F 0%, #0A4419 48%, #0F6E27 100%);
    --grad-oscuro: linear-gradient(165deg, #12281B 0%, #0A1710 62%, #07120C 100%);
    --grad-boton:  linear-gradient(180deg, #0F9B2E 0%, #0B7A24 100%);
    --grad-filo:   linear-gradient(90deg, var(--verde-logo), rgba(25, 247, 63, 0) 70%);

    --f-titular: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --f-texto:   "Newsreader", Georgia, "Times New Roman", serif;
    --f-dato:    ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

    --radio:   2px;      /* casi recto: es papel, no una pastilla */
    --radio-g: 4px;
    --ancho:   1180px;
    --sombra:  0 1px 2px rgba(10, 23, 16, .06), 0 8px 24px -16px rgba(10, 23, 16, .38);
    --brillo:  0 0 0 1px rgba(25, 247, 63, .35), 0 10px 30px -18px rgba(25, 247, 63, .55);
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--niebla);
    color: var(--tinta);
    font-family: var(--f-titular);
    font-size: 16px;
    line-height: 1.55;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--f-titular);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
    border-radius: var(--radio);
}
/* Sobre las superficies oscuras el verde hondo no se ve: manda el del logo. */
.escaparate :focus-visible,
.lateral-panel :focus-visible,
.pie-sitio :focus-visible,
.tarjeta-precio :focus-visible,
.entrar :focus-visible { outline-color: var(--verde-logo); }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.oculto     { display: none !important; }
.solo-lector{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ico   { width: 1.15em; height: 1.15em; flex: none; }
.ico-g { width: 1.5em;  height: 1.5em;  flex: none; }

/* Rótulo pequeño en versalitas: se usa para todo lo que es etiqueta o dato. */
.rotulo {
    font-family: var(--f-dato);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--apagado);
}

/* --- Botones ------------------------------------------------------------- */
.boton {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radio);
    background: var(--grad-boton);
    color: #fff;
    font: 600 .92rem/1 var(--f-titular);
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.boton:hover  { background: linear-gradient(180deg, #14B336 0%, #0F9B2E 100%); }
.boton:active { transform: translateY(1px); }

.boton.suave      { background: transparent; border-color: var(--linea); color: var(--tinta); }
.boton.suave:hover{ background: var(--papel); border-color: var(--verde); }

.boton.peligro      { background: transparent; border-color: var(--linea); color: var(--alerta); }
.boton.peligro:hover{ background: var(--alerta); border-color: var(--alerta); color: #fff; }

.boton.pequeno { padding: .45rem .8rem; font-size: .82rem; }

/* Enlace con subrayado que crece al pasar por encima. */
.enlace {
    color: var(--verde); text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
    padding-bottom: 1px;
    transition: background-size .18s ease;
}
.enlace:hover { background-size: 100% 2px; }

/* --- Formularios --------------------------------------------------------- */
.campo { display: block; margin-bottom: 1rem; }
.campo > span,
.etiqueta {
    display: block;
    font-family: var(--f-dato);
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--apagado);
    margin-bottom: .4rem;
}

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=search], select, textarea {
    width: 100%;
    padding: .62rem .75rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
    color: var(--tinta);
    font: 400 .95rem/1.4 var(--f-titular);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(11, 122, 36, .15);
}
input[readonly] { background: var(--niebla); color: var(--apagado); }
textarea { resize: vertical; min-height: 7rem; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E6A68' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; background-size: .7rem;
    padding-right: 2rem;
}

.casilla { display: flex; align-items: center; gap: .55rem; font-size: .92rem; cursor: pointer; }
.casilla input { accent-color: var(--verde); width: 1.05rem; height: 1.05rem; }

.rejilla   { display: grid; gap: 1rem 1.25rem; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ancho-todo{ grid-column: 1 / -1; }

/* --- Avisos -------------------------------------------------------------- */
.aviso {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .8rem 1rem;
    border: 1px solid var(--linea);
    border-left: 3px solid var(--verde);
    border-radius: var(--radio);
    background: var(--papel);
    font-size: .92rem;
    margin-bottom: 1.5rem;
}
.aviso.bien  { border-left-color: var(--verde);    background: var(--verde-tenue); }
.aviso.error { border-left-color: var(--alerta); background: var(--alerta-sua); }

/* --- Etiquetas de estado ------------------------------------------------- */
.marca {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    border-radius: var(--radio);
    font-family: var(--f-dato); font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--verde-tenue); color: var(--verde);
    border: 1px solid transparent;
}
.marca.disponible { background: var(--verde-tenue); color: var(--verde); }
.marca.disponible::before {
    content: ""; width: .4rem; height: .4rem; border-radius: 50%;
    background: var(--verde-logo); flex: none;
}
.marca.reservado  { background: var(--laton-sua);  color: var(--laton); }
.marca.vendido    { background: var(--alerta-sua); color: var(--alerta); }
.marca.venta      { background: var(--tinta); color: #fff; }
.marca.alquiler   { background: var(--laton); color: #fff; }
.marca.hueca      { background: transparent; border-color: var(--linea); color: var(--apagado); }
/* El oficio no es un estado: mismo verde suave, pero sin el punto de «disponible». */
.marca.oficio     { background: var(--verde-tenue); color: var(--verde); }

/* ==========================================================================
   Web pública
   ========================================================================== */

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
    position: sticky; top: 0; z-index: 40;
    background: rgba(241, 243, 238, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
}
.cabecera .contenedor {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding: .9rem 0;
}
.marca-sitio { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.marca-sitio b {
    position: relative;
    font: 800 1.32rem/1 var(--f-titular);
    letter-spacing: -.045em;
    padding-right: .45rem;
}
.marca-sitio b::after {
    content: ""; position: absolute; right: 0; bottom: .12em;
    width: .3rem; height: .3rem; border-radius: 50%;
    background: var(--verde-logo);
    box-shadow: 0 0 .35rem rgba(25, 247, 63, .8);
}
.marca-sitio i {
    font-style: normal;
    font-family: var(--f-dato); font-size: .6rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--verde);
}
.menu { display: flex; align-items: center; gap: 1.75rem; }
.menu a {
    font-size: .93rem; font-weight: 500; text-decoration: none; color: var(--apagado);
    padding-bottom: 2px; border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.menu a:hover, .menu a[aria-current] { color: var(--tinta); border-color: var(--verde); }
.menu .telefono { font-family: var(--f-dato); font-size: .82rem; letter-spacing: .04em; color: var(--verde); }

/* --- Portada: el escaparate --------------------------------------------- */
.escaparate {
    /* Dos capas: el filo de luz del logo abajo del todo, y el degradado hondo. */
    background:
        linear-gradient(90deg, rgba(25, 247, 63, .85), rgba(25, 247, 63, 0) 42%) left bottom / 100% 2px no-repeat,
        var(--grad-marca);
    color: #fff;
    padding: 4.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}
/* El verde del logo, aquí, es un halo desenfocado: da el color sin deslumbrar. */
.escaparate::before {
    content: ""; position: absolute; inset: -30% -10% auto auto;
    width: 45rem; height: 45rem;
    background: radial-gradient(circle, rgba(25, 247, 63, .30) 0%, rgba(25, 247, 63, 0) 62%);
    pointer-events: none;
}
/* Rayado finísimo: la persiana metálica del local. */
.escaparate::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
    pointer-events: none;
}

.escaparate .contenedor { position: relative; z-index: 1; }
.escaparate > .contenedor > .rotulo { color: var(--verde-logo); }
.escaparate h1 {
    font-size: clamp(2.6rem, 6.5vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -.045em;
    max-width: 16ch;
    margin: .75rem 0 1rem;
}
.escaparate h1 em {
    font-style: normal;
    color: var(--verde-logo);                    /* por si no hay recorte de fondo */
    background: linear-gradient(96deg, var(--verde-logo) 5%, var(--verde-luz) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.escaparate p.entrada {
    font-family: var(--f-texto);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    color: rgba(255, 255, 255, .78);
    max-width: 46ch;
    margin: 0;
}

/* --- Buscador: los campos son rayas, como un impreso de mostrador -------- */
.buscador {
    margin-top: 3rem;
    background: var(--papel);
    border-radius: var(--radio-g);
    box-shadow: var(--sombra);
    color: var(--tinta);
}
.buscador .filas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.buscador .celda {
    padding: 1rem 1.15rem;
    border-right: 1px solid var(--linea-fina);
    border-bottom: 1px solid var(--linea-fina);
    min-width: 0;
}
.buscador .celda:nth-child(3n) { border-right: 0; }
.buscador .celda label {
    display: block;
    font-family: var(--f-dato); font-size: .64rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--apagado);
    margin-bottom: .3rem;
}
/* Campos sin caja: sólo la línea inferior, que se tiñe al enfocar. */
.buscador input, .buscador select {
    border: 0; border-bottom: 1px solid transparent;
    border-radius: 0; padding: .2rem 0; background: transparent;
    font-size: 1rem; font-weight: 500;
}
.buscador select { background-position: right .1rem center; padding-right: 1.4rem; }
.buscador input:focus, .buscador select:focus {
    box-shadow: none; border-bottom-color: var(--verde);
}
.buscador .pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem 1.15rem;
}

/* --- Rejilla de fichas --------------------------------------------------- */
.listado { padding: 3.5rem 0 5rem; }
.listado-cabeza {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.listado-cabeza h2 { font-size: 1.5rem; }

.fichas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 1.5rem;
}

/* La ficha: el folio del escaparate. */
.ficha {
    display: flex; flex-direction: column;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio-g);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ficha:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra), var(--brillo);
    border-color: var(--verde-luz);
}
/* min-height:0 es imprescindible: como es hijo de un flex en columna, su altura
   mínima automática sería la de la foto, y una imagen cuadrada estiraba la caja
   por encima del 4:3 dejando las tarjetas desparejas. */
.ficha-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    flex: none;
    min-height: 0;
    overflow: hidden;
    background: var(--verde-tenue);
}
.ficha-foto > a { display: block; width: 100%; height: 100%; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-foto .sinfoto {
    width: 100%; height: 100%;
    display: grid; place-items: center; color: var(--verde-luz);
}
.ficha-foto .marcas {
    position: absolute; inset: auto auto .7rem .7rem;
    display: flex; gap: .35rem; flex-wrap: wrap;
}
.ficha-foto .ref {
    position: absolute; inset: .7rem .7rem auto auto;
    background: rgba(10, 23, 16, .8); color: var(--verde-logo);
    font-family: var(--f-dato); font-size: .64rem; letter-spacing: .1em;
    padding: .2rem .5rem; border-radius: var(--radio);
}
.ficha-cuerpo { padding: 1.15rem 1.15rem .5rem; flex: 1; }
.ficha-cuerpo h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.ficha-cuerpo h3 a { text-decoration: none; }
.ficha-cuerpo h3 a:hover { color: var(--verde); }
.ficha-zona {
    display: flex; align-items: center; gap: .35rem;
    font-family: var(--f-dato); font-size: .72rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--apagado);
}

/* La línea de medidas, con separadores de pelo. */
.medidas {
    display: flex; flex-wrap: wrap;
    border-top: 1px solid var(--linea-fina);
    margin: 1rem 0 0;
    padding: 0; list-style: none;
}
.medidas li {
    display: flex; align-items: center; gap: .4rem;
    padding: .55rem .9rem .55rem 0;
    margin-right: .9rem;
    border-right: 1px solid var(--linea-fina);
    font-family: var(--f-dato); font-size: .78rem; color: var(--apagado);
}
.medidas li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.medidas .ico { color: var(--verde); }

.ficha-pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding: .9rem 1.15rem 1.15rem;
    border-top: 1px solid var(--linea-fina);
}
.precio {
    font-family: var(--f-titular);
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em;
    color: var(--verde);
    font-variant-numeric: tabular-nums;
}
.precio small { font: 400 .78rem/1 var(--f-dato); color: var(--apagado); letter-spacing: .06em; }
.precio-antes {
    display: block;
    font: 400 .78rem/1.4 var(--f-dato);
    color: var(--apagado); text-decoration: line-through;
}

/* --- Vacío --------------------------------------------------------------- */
.vacio {
    grid-column: 1 / -1;
    border: 1px dashed var(--linea);
    border-radius: var(--radio-g);
    padding: 3.5rem 1.5rem;
    text-align: center;
    background: var(--papel);
}
.vacio h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.vacio p  { color: var(--apagado); margin: 0 0 1.25rem; font-family: var(--f-texto); }

/* --- Página de inmueble -------------------------------------------------- */
.migas {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: 1.5rem 0;
    font-family: var(--f-dato); font-size: .72rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--apagado);
}
.migas a { text-decoration: none; }
.migas a:hover { color: var(--verde); }
.migas span[aria-current] { color: var(--tinta); }

.detalle { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; padding-bottom: 4rem; align-items: start; }
.detalle > * { min-width: 0; }

.galeria-principal {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--verde-tenue);
    border-radius: var(--radio-g);
    overflow: hidden;
    border: 1px solid var(--linea);
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-tiras { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.galeria-tiras button {
    padding: 0; border: 1px solid var(--linea); background: none; cursor: pointer;
    width: 6.5rem; aspect-ratio: 4 / 3; border-radius: var(--radio);
    overflow: hidden; transition: border-color .15s ease, opacity .15s ease;
}
.galeria-tiras button:hover { opacity: .85; }
.galeria-tiras button[aria-current="true"] { border-color: var(--verde); border-width: 2px; }
.galeria-tiras img { width: 100%; height: 100%; object-fit: cover; }

.bloque {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio-g);
    padding: 1.5rem;
    margin-top: 1.75rem;
}
.bloque > h2 {
    font-size: 1.15rem;
    padding-bottom: .75rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--linea-fina);
}
.bloque .texto {
    font-family: var(--f-texto); font-size: 1.05rem; line-height: 1.7; color: #24322F;
    margin: 0; white-space: pre-line;
}

/* Ficha técnica: pares dato/valor en dos columnas con líneas de pelo. */
.tecnica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.tecnica div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .6rem 0; border-bottom: 1px dotted var(--linea);
}
.tecnica dt, .tecnica .dato { font-family: var(--f-dato); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.tecnica dd, .tecnica .valor { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.extras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .5rem; list-style: none; margin: 0; padding: 0;
}
.extras li {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--linea); border-radius: var(--radio);
    font-size: .9rem; background: var(--niebla);
}
.extras li > span { min-width: 0; }
.extras b { display: block; font-weight: 600; }
.extras small {
    display: block; margin-top: .1rem;
    font-family: var(--f-dato); font-size: .72rem; line-height: 1.5; color: var(--apagado);
}
.extras .ico { color: var(--verde); margin-top: .15rem; }

.aviso-compra {
    display: flex; align-items: center; gap: .45rem;
    margin: .9rem 0 0; padding: .4rem .65rem;
    border: 1px solid rgba(25, 247, 63, .28); border-radius: var(--radio);
    font-size: .84rem;
    background: rgba(25, 247, 63, .07);
}

#mapa { height: 22rem; border-radius: var(--radio); border: 1px solid var(--linea); z-index: 0; }

/* Columna derecha pegajosa */
.lateral { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.tarjeta-precio {
    position: relative; overflow: hidden;
    background: var(--grad-oscuro); color: #fff;
    border-radius: var(--radio-g); padding: 1.5rem;
}
.tarjeta-precio::before {
    content: ""; position: absolute; inset: 0 0 auto 0;
    height: 2px; background: var(--grad-filo);
}
.tarjeta-precio .precio { font-size: 2.35rem; color: #fff; display: block; }
.tarjeta-precio .precio small { color: var(--verde-luz); }
.tarjeta-precio .rotulo, .tarjeta-precio .aviso-compra { color: var(--verde-logo); }
.tarjeta-precio .precio-antes { color: rgba(255,255,255,.55); }
.tarjeta-precio hr { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 1.15rem 0; }
.tarjeta-precio .tecnica { grid-template-columns: minmax(0, 1fr); }
.tarjeta-precio .tecnica dt, .tarjeta-precio .tecnica .dato { color: rgba(255,255,255,.6); }
.tarjeta-precio .tecnica div { border-bottom-color: rgba(255,255,255,.14); }

.tarjeta {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio-g); padding: 1.5rem;
}
.tarjeta > h2 { font-size: 1.1rem; margin-bottom: .35rem; }
.tarjeta > p.pie { font-family: var(--f-texto); color: var(--apagado); font-size: .95rem; margin: 0 0 1.25rem; }

.compartir { display: flex; gap: .5rem; flex-wrap: wrap; }
.compartir a, .compartir button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .7rem; border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--papel); color: var(--apagado); cursor: pointer;
    font: 500 .8rem/1 var(--f-titular); text-decoration: none;
}
.compartir a:hover, .compartir button:hover { border-color: var(--verde); color: var(--verde); }

/* --- Pie ----------------------------------------------------------------- */
.pie-sitio {
    position: relative;
    background: var(--grad-oscuro);
    color: rgba(255,255,255,.7);
    padding: 3.5rem 0 2rem;
}
.pie-sitio::before {
    content: ""; position: absolute; inset: 0 0 auto 0;
    height: 2px; background: var(--grad-filo); opacity: .7;
}
.pie-sitio .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.pie-sitio h3 { color: #fff; font-size: 1rem; margin-bottom: .9rem; }
.pie-sitio p, .pie-sitio a { font-size: .92rem; text-decoration: none; }
.pie-sitio a:hover { color: #fff; }
.pie-sitio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie-sitio .lema { font-family: var(--f-texto); font-size: 1.02rem; max-width: 34ch; }
.pie-sitio .legal {
    margin-top: 2.5rem; padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-family: var(--f-dato); font-size: .72rem; letter-spacing: .06em;
}

/* ==========================================================================
   Panel de administración
   ========================================================================== */
.panel { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }

.lateral-panel {
    background: var(--grad-oscuro);
    color: rgba(255,255,255,.72);
    display: flex; flex-direction: column;
    padding: 1.5rem 0;
    position: sticky; top: 0; height: 100vh;
}
.lateral-panel .marca-panel { padding: 0 1.5rem 1.75rem; }
.lateral-panel .marca-panel b {
    display: block; color: #fff;
    font: 800 1.15rem/1.2 var(--f-titular); letter-spacing: -.04em;
}
.lateral-panel .marca-panel i {
    font-style: normal; font-family: var(--f-dato);
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-logo);
}
.lateral-panel nav { display: grid; gap: 2px; padding: 0 .75rem; }
.lateral-panel nav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: var(--radio);
    text-decoration: none; font-size: .93rem; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.lateral-panel nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
/* La sección abierta lleva el filo del logo; el fondo se queda en verde hondo. */
.lateral-panel nav a[aria-current] {
    position: relative;
    background: linear-gradient(90deg, rgba(25, 247, 63, .18), rgba(25, 247, 63, .04));
    color: #fff;
}
.lateral-panel nav a[aria-current]::before {
    content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
    width: 2px; background: var(--verde-logo);
}
.lateral-panel .abajo { margin-top: auto; padding: 1.25rem 1.5rem 0; }
.lateral-panel .abajo .quien { display: block; font-family: var(--f-dato); font-size: .7rem; letter-spacing: .06em; color: rgba(255,255,255,.45); }
.lateral-panel .abajo a { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .85rem; text-decoration: none; color: rgba(255,255,255,.72); }
.lateral-panel .abajo a:hover { color: #fff; }

.contenido { padding: 2.25rem 2.5rem 4rem; min-width: 0; }
.titulo-pagina {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.titulo-pagina h1 { font-size: 1.75rem; }
.titulo-pagina .rotulo { margin-bottom: .3rem; }

/* Cifras del panel */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.cifra {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio-g); padding: 1.25rem;
}
.cifra .rotulo { margin-bottom: .5rem; }
.cifra b {
    display: block;
    font: 800 2rem/1 var(--f-titular); letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.cifra.destacada b { color: var(--verde); }
.cifra .nota { font-size: .82rem; color: var(--apagado); margin-top: .35rem; display: block; }

/* Tablas */
.caja {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: var(--radio-g); overflow: hidden; margin-bottom: 2rem;
}
.caja > header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--linea-fina);
}
.caja > header h2 { font-size: 1.05rem; }
.caja .cuerpo { padding: 1.25rem; }
.tabla-desliza { overflow-x: auto; }

table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tabla th {
    text-align: left; padding: .7rem 1.25rem;
    font-family: var(--f-dato); font-size: .66rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--apagado);
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}
table.tabla td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--linea-fina); vertical-align: middle; }
table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--niebla); }
table.tabla .num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--f-dato); white-space: nowrap; }
/* Referencias y fechas no se parten: «REF. 003» en dos líneas no es una fecha, es un susto. */
table.tabla td.rotulo { white-space: nowrap; }

.acciones { display: flex; gap: .4rem; }
.accion {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem;
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--papel); color: var(--apagado); cursor: pointer; text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.accion:hover { border-color: var(--verde); color: var(--verde); }
.accion.peligro:hover { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-sua); }

/* Pestañas del formulario de inmuebles */
.pestanas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pestanas button {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .95rem; border: 1px solid var(--linea);
    border-radius: var(--radio); background: var(--papel);
    color: var(--apagado); cursor: pointer;
    font: 500 .88rem/1 var(--f-titular);
}
.pestanas button:hover { border-color: var(--verde); color: var(--verde); }
.pestanas button[aria-selected="true"] { background: var(--grad-boton); border-color: var(--verde); color: #fff; }

/* «Lo que incluye»: la casilla abre sus propios campos */
.extras-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: .75rem;
    align-items: start;
}
.extra {
    border: 1px solid var(--linea-fina);
    border-radius: var(--radio);
    padding: .7rem .85rem;
    background: var(--papel);
    transition: border-color .15s ease, background .15s ease;
}
.extra:has(input[type="checkbox"]:focus-visible) { border-color: var(--verde); }
.extra.abierto { border-color: var(--verde-luz); background: var(--verde-tenue); }
.extra > .casilla { font-weight: 500; }
.extra-detalles { display: none; }
.extra.abierto .extra-detalles {
    display: grid;
    gap: .5rem .9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    align-items: end;                    /* etiquetas de dos líneas no descuadran los campos */
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dotted var(--linea);
}
.extra-detalles .campo { margin-bottom: 0; min-width: 0; }
.extra-detalles .campo > span { font-size: .62rem; }
.extra-detalles input, .extra-detalles select { padding: .4rem .55rem; font-size: .88rem; background-color: var(--papel); }
.extra-detalles .casilla { align-self: end; padding-bottom: .4rem; font-size: .85rem; }
.extra-detalles .campo-otros { grid-column: 1 / -1; }

/* Zona de arrastrar imágenes */
.soltar {
    display: block;                     /* es un <label>, y en línea no centra nada */
    border: 1px dashed var(--linea); border-radius: var(--radio-g);
    padding: 2.25rem 1.5rem; text-align: center; background: var(--niebla);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.soltar:hover, .soltar.encima { border-color: var(--verde); background: var(--verde-tenue); }
.soltar .ico-g { display: block; color: var(--verde); margin: 0 auto .6rem; }
.soltar p { margin: .35rem 0 0; font-size: .85rem; color: var(--apagado); }
.soltar strong { display: block; }

.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.miniatura { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--papel); }
.miniatura img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.miniatura .opciones { padding: .5rem .6rem; display: grid; gap: .35rem; border-top: 1px solid var(--linea-fina); }
.miniatura .casilla { font-size: .78rem; }
.miniatura.marcada-borrar { opacity: .45; border-color: var(--alerta); }

/* Entrar al panel */
.entrar {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr;
    place-items: center;
    background:
        radial-gradient(70rem 50rem at 76% 6%, rgba(25, 247, 63, .18), rgba(25, 247, 63, 0) 62%),
        var(--grad-oscuro);
    padding: 2rem;
}
.entrar .caja-entrar { width: min(100%, 25rem); }
.entrar .marca-panel { text-align: center; margin-bottom: 2rem; }
.entrar .marca-panel b { display: block; color: #fff; font: 800 1.75rem/1.1 var(--f-titular); letter-spacing: -.045em; }
.entrar .marca-panel i { font-style: normal; font-family: var(--f-dato); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--verde-logo); }
.entrar form {
    position: relative; overflow: hidden;
    background: var(--papel); border-radius: var(--radio-g); padding: 1.75rem;
}
.entrar form::before {
    content: ""; position: absolute; inset: 0 0 auto 0;
    height: 2px; background: var(--grad-filo);
}
.entrar .boton { width: 100%; justify-content: center; margin-top: .5rem; }
.entrar .volver { display: block; text-align: center; margin-top: 1.5rem; color: rgba(255,255,255,.6); font-size: .85rem; text-decoration: none; }
.entrar .volver:hover { color: #fff; }

/* ==========================================================================
   Adaptación a pantallas pequeñas
   ========================================================================== */
@media (max-width: 1024px) {
    .detalle { grid-template-columns: minmax(0, 1fr); }
    .lateral { position: static; }
    .cifras  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .buscador .filas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .buscador .celda:nth-child(3n) { border-right: 1px solid var(--linea-fina); }
    .buscador .celda:nth-child(2n) { border-right: 0; }
}

@media (max-width: 860px) {
    /* Sin las dos filas declaradas, el min-height:100vh del panel repartía el
       alto a partes iguales y la barra de arriba ocupaba media pantalla. */
    .panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .lateral-panel {
        position: static; height: auto; flex-direction: row; align-items: center;
        gap: 1rem; padding: .85rem 1.25rem; overflow-x: auto;
    }
    .lateral-panel .marca-panel { padding: 0; }
    .lateral-panel .marca-panel i { display: none; }
    .lateral-panel nav { grid-auto-flow: column; padding: 0; }
    .lateral-panel nav a span { display: none; }
    .lateral-panel .abajo { margin: 0 0 0 auto; padding: 0; display: flex; gap: .5rem; }
    .lateral-panel .abajo .quien { display: none; }
    .lateral-panel .abajo br { display: none; }
    .lateral-panel .abajo a { margin-top: 0; white-space: nowrap; }
    .lateral-panel .abajo a span { display: none; }
    .contenido { padding: 1.5rem 1.25rem 3rem; }
    .pie-sitio .cols { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
    .menu .oculto-movil { display: none; }
    .marca-sitio i { display: none; }
    .cabecera .contenedor { gap: 1rem; }
    .menu { gap: 1.1rem; }
    .menu a { font-size: .88rem; }
    .escaparate { padding: 3rem 0 4.5rem; }
    .buscador .filas { grid-template-columns: minmax(0, 1fr); }
    .buscador .celda { border-right: 0 !important; }
    .buscador .pie { flex-direction: column; align-items: stretch; }
    .buscador .pie .boton { justify-content: center; }
    .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: minmax(0, 1fr); }
    .cifras { grid-template-columns: minmax(0, 1fr); }
    .tecnica { grid-template-columns: minmax(0, 1fr); }
    .contenedor { width: min(100% - 2rem, var(--ancho)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .ficha:hover { transform: none; }
}