@font-face {
    font-family: 'Harmony';
    src: url('../fonts/fonts/harmony-webfont.woff2') format('woff2'),
         url('../fonts/fonts/harmony-webfont.woff') format('woff'),
         url('../fonts/fonts/harmony-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Harmony', sans-serif;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Harmony', sans-serif;
    background: #fff url('../imgs/fons-inmoteca.webp')top;
    background-size: cover;
    color: #333;
    margin: 0;
    padding: 0;
}

.topbar {
    background: rgba(255, 255, 255, 0.76);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.topbar a {
    text-decoration: none;
    color: #333;
}

.menu select, .menu a {
    margin-bottom: 10px;
}

.logo {
    text-align: center;
    margin: 20px 0;
}

.logo img {
    height: auto;
}

main {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
}

main h1 {
    font-size: 32px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: normal;
}

main h1 strong {
    color: #b2874f;
    color: #7d643d;
    font-weight: bold;
}

.vender-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.form-group {
    flex: 1;
    min-width: 250px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select, textarea {
    padding: 10px;
    width: 100%;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
}

.datos-personales{
    margin-top: 30px;
    background-color: #61561c4d;
    padding: 10px;
}
.datos-personales h2 {
    font-size: 20px;
    margin: 10px 0;
}

.triple, .doble {
    display: flex;
    gap: 10px;
}

.triple input,
.doble input {
    flex: 1;
}

textarea {
    height: 80px;
    resize: vertical;
}

.upload-section {
    text-align: center;
    margin-top: 20px;
}

.submit {
    text-align: center;
    margin-top: 20px;
}

.submit button {
    padding: 12px 30px;
    font-size: 16px;
    background-color: #7d643d;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit button:hover {
    background-color: #5e4a2f;
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 14px;
    background: white;
    border-top: 1px solid #ddd;
}

footer .legal {
    margin-top: 10px;
}

footer a {
    color: #333;
    text-decoration: none;
    margin: 0 5px;
}

.contacto {
    margin: auto;
    font-size: large;
    color: #754e05;
}

.mail {
    color: #754e05;
}

@media (max-width: 600px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu {
        margin-top: 10px;
    }

    main h1 {
        font-size: 22px;
    }

    .form-row, .triple, .doble {
        flex-direction: column;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}

.grid input:nth-of-type(1) { background-image: url('../imgs/ico-metros.png'); }
.grid input:nth-of-type(2) { background-image: url('../imgs/ico-rooms.png'); }
.grid input:nth-of-type(3) { background-image: url('../imgs/ico-aseo.png'); }
.grid input:nth-of-type(4) { background-image: url('../imgs/ico-calendario.png'); }
.grid select:nth-of-type(1) { background-image: url('../imgs/ico-estado.png'); }
.grid select:nth-of-type(2) { background-image: url('../imgs/ico-frio.png'); }
.grid select:nth-of-type(3) { background-image: url('../imgs/ico-sol.png'); }
.grid select:nth-of-type(4) { background-image: url('../imgs/ico-parking.png'); }
.grid select:nth-of-type(5) { background-image: url('../imgs/ico-salida.png'); }

.grid input,
.grid select {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 50px;
    padding-top: 40px;
    text-align: center;
}

.campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.campo img {
    width: 70px;
    height: auto;
}

.grid .campo input,
.grid .campo select {
    background-image: none !important;
    padding-top: 10px;
    text-align: center;
    align-items: center;
}

/* --- HEADER: logo siempre centrado, menu a la derecha --- */
.topbar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.topbar > a { justify-self: start; }
.topbar .logo { justify-self: center; margin: 0; }
.menu { justify-self: end; display: flex; align-items: center; gap: 12px; }

/* Elimina el empuje vertical del menú en el header */
.menu select, .menu a { margin-bottom: 0 !important; }

/* Tamaño razonable de logo */
.logo img { max-height: 56px; height: auto; }

/* Responsive header */
@media (max-width: 600px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 8px;
  }
  .topbar > a { justify-self: center; }
  .menu { justify-self: center; }
}

/* --- GRID: centrado limpio en cada celda --- */
.grid {
  justify-items: center;        /* centra contenido horizontalmente */
  align-items: start;           /* evita estirar verticalmente */
}
.campo { text-align: center; }

/* --- CHECKBOX "acepto": casilla a la izquierda, sin recuadro grande --- */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.check input[type="checkbox"] {
  /* sobrescribe el estilo global de input */
  width: auto !important;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;             /* quita la sombra que tenían los inputs */
  appearance: auto;             /* usa control nativo */
  accent-color: #7d643d;        /* color de marca (navegadores modernos) */
}

/* --- Botón de subir imágenes con estilo --- */
.upload-section {
  text-align: center;
  margin-top: 20px;
}
.upload-section input[type="file"] {
  /* ocultamos el file input para usar el label como botón */
  position: absolute;
  left: -9999px;
}
.upload-section label[for="file-upload"] {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 25px;
  background-color: #7d643d;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  border: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  transition: background-color .2s, transform .05s;
}
.upload-section label[for="file-upload"]:hover {
  background-color: #5e4a2f;
}
.upload-section label[for="file-upload"]:active {
  transform: translateY(1px);
}

/* ===== HEADER (index): logo más grande y centrado geométrico ===== */
:root { --logo-max-h: 80px; }
@media (max-width: 600px){ :root { --logo-max-h: 56px; } }

.topbar {
  display: grid !important;                 /* unifica layout */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.topbar > a { justify-self: start; }
.topbar .logo { justify-self: center; margin: 0; }
.menu { justify-self: end; display: flex; align-items: center; gap: 12px; }
.menu select, .menu a { margin-bottom: 0 !important; }

.logo img {                                  /* agrandamos el logo */
  max-height: var(--logo-max-h) !important;
  height: 50px;
}

/* ===== GRID: mismos tamaños de campo, sin acortarlos ===== */
/* Igualamos el ancho mínimo de cada tarjeta/campo a 220px (ajusta si quieres) */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  justify-items: center;
  align-items: start;
}
.campo { text-align: center; width: 100%; }

/* ===== CHECKBOX "acepto": casilla a la izquierda, sin recuadro ===== */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.check input[type="checkbox"]{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  appearance: auto;
  accent-color: #7d643d;
}

/* ===== Botón de subir imágenes (estilo) + contador opcional ===== */
.upload-section { text-align: center; margin-top: 20px; }
.upload-section input[type="file"]{ position: absolute; left: -9999px; }
.upload-section label[for="file-upload"]{
  display:inline-block; padding:12px 24px; border-radius:26px;
  background:#7d643d; color:#fff; font-weight:600; cursor:pointer;
  border:none; box-shadow:0 3px 8px rgba(0,0,0,.2);
  transition: background-color .2s, transform .05s;
}
.upload-section label[for="file-upload"]:hover{ background:#5e4a2f; }
.upload-section label[for="file-upload"]:active{ transform: translateY(1px); }
.upload-help{ display:block; margin-top:6px; opacity:.8; font-size:.9em; }



/* ====== GRID de 10 elementos: 2 filas de 4 + 2 centrados ====== */

/* En escritorio: 4 columnas fijas */
@media (min-width: 1024px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(200px, 1fr)) !important; /* ajusta 220px si quieres más ancho */
    gap: 16px;
    justify-items: center;   /* centra cada tarjeta */
    align-items: start;
  }

  /* Cada tarjeta con la foto arriba y el campo debajo */
  .grid .campo {
    width: 100%;
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 10px;
    text-align: center;
  }
  .grid .campo > img {
    display: block;
    margin: 0 auto 4px;
    max-height: 62px;        /* ajusta si quieres icono más grande */
    height: auto;
  }

  /* Últimos 2 elementos (9º y 10º) centrados en la tercera fila */
  .grid > .campo:nth-child(9)  { grid-column: 2; }  /* cae en columna 2 */
  .grid > .campo:nth-child(10) { grid-column: 3; }  /* cae en columna 3 */
}

/* En tablets: 3 columnas auto; la última fila queda natural */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 16px;
    justify-items: center;
    align-items: start;
  }
}

/* En móvil: 1–2 columnas fluidas (según tu gusto) */
@media (max-width: 767px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr)); /* cambia a 1 si quieres una sola columna */
    gap: 12px;
    justify-items: center;
  }
}

/* ====== GRID: 2 filas de 4 + 2 centrados SIN chafar alturas ====== */

/* Reglas comunes para que nunca se “aplasten” */
.grid .campo > img {
  display: block;
  margin: 0 auto 6px;
  /* quita cualquier altura previa que los deforme */
  height: auto !important;
  width: auto;                /* que no se fuerce a 100% si hay alguna regla global */
  max-width: 72px;            /* ajusta si quieres el icono más grande */
  max-height: 72px;           /* límite suave, mantiene proporción */
  object-fit: contain !important;
}
.grid .campo > p {
  margin: 6px 0 8px;
  line-height: 1.25;          /* evita texto comprimido */
}
.grid .campo input,
.grid .campo select,
.grid .campo textarea {
  width: 100%;
  min-height: 44px;           /* altura cómoda de control */
  padding: 10px 12px;
  line-height: 1.2;
}

/* Escritorio: 4 columnas fijas, 2 filas de 4 y los dos últimos centrados */
@media (min-width: 1024px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important; /* sube 220 si quieres tarjetas aún más anchas */
    gap: 18px 16px;
    justify-items: center;
    align-items: start;       /* no estirar verticalmente */
  }
  .grid > .campo {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 3 filas: imagen, texto, input → así nada se pisa ni se comprime */
    grid-template-rows: auto auto auto;
    row-gap: 8px;
    align-content: start;     /* respeta altura natural del contenido */
    text-align: center;
  }

  /* Centrar los 2 últimos en la tercera fila */
  .grid > .campo:nth-child(9)  { grid-column: 2; }
  .grid > .campo:nth-child(10) { grid-column: 3; }
}

/* Tablet: 3 columnas, proporciones intactas */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 16px;
    justify-items: center;
    align-items: start;
  }
  .grid > .campo {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
  }
}

/* Móvil: 2 columnas cómodas (o cambia a 1 si prefieres) */
@media (max-width: 767px) {
  .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 12px;
    justify-items: center;
  }
  .grid > .campo {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
  }
}


/* === Centrar el bloque del formulario y el grid === */

/* 1) El formulario (contenedor) centrado como bloque */
.vender-form {
  max-width: 1200px;          /* ajusta a tu gusto */
  margin-left: auto;
  margin-right: auto;          /* centra el bloque completo */
}

/* 2) El grid centrado dentro del contenedor (cuando hay “hueco” a los lados) */
@media (min-width: 1024px) {
  .grid {
    justify-content: center;   /* centra la “rejilla” si no ocupa todo el ancho */
  }
}

/* 3) Por si alguna regla heredada lo empuja: anulamos floats o márgenes raros */
.grid, .campo {
  float: none !important;
}


/* === LOGO más grande (desktop / móvil) === */
:root { --logo-max-h: 96px; }                 /* antes 80px */
@media (max-width: 600px){ :root { --logo-max-h: 68px; } }

/* === Fondo: muévelo “hacia arriba” (valores negativos suben la imagen) === */
:root { --bg-shift-y: -80px; }                /* prueba -60px / -100px si quieres más/menos */
@media (max-width: 768px){ :root { --bg-shift-y: -40px; } }

/* Aplica el desplazamiento al contenedor con la imagen de fondo.
   Si tu fondo está en body, listo. Si lo tienes en .hero/.portada, se incluye abajo. */
body,
.hero,
.portada,
.main-bg {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center var(--bg-shift-y) !important; /* sube el encuadre */
}

/* El logo ya usa esta variable en tu CSS; reforzamos por si algún estilo lo limita */
.logo img {
  max-height: var(--logo-max-h) !important;
  height: auto;
}


/* ===== Avisos del formulario ===== */
:root{
  /* por si no existen estas vars en tu hoja */
  --text: #1f1f1f;
  --border: #e5e7eb;
}

.alert{
  display: block;
  margin: 16px 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
  animation: alertIn .25s ease-out;
}

/* éxito / error */
.alert.success{
  border-color: #38b68b;
  background: rgba(56,182,139,.12);
}
.alert.error{
  border-color: #dc3232;
  background: rgba(220,50,50,.12);
}

/* si usas modo oscuro con data-theme="dark" */
:root[data-theme="dark"] .alert{
  background: rgba(15,26,34,.76);
  border-color: #1f2c36;
  color: #e6f2f7;
}
:root[data-theme="dark"] .alert.success{
  border-color: #38b68b;
  background: rgba(56,182,139,.16);
}
:root[data-theme="dark"] .alert.error{
  border-color: #ff6161;
  background: rgba(255,97,97,.14);
}

/* entrada suave */
@keyframes alertIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}