/* propiedad-individual.css */
/* Estilos para la vista individual de una propiedad inmobiliaria */



:root {
  --secondary-color: #111111;
  --primary-color: #ffffff;
  --lux-gray: #2c2c2c;
  --lux-font-title: 'Playfair Display', serif;
  --lux-font-body: 'Playfair Display', serif;
}

body {
  font-family: var(--lux-font-body);
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: var(--lux-gray);
}

body {
  overflow-y: scroll;
}

main {
  display: flex;
  flex-direction: row;
  padding: 40px;
  gap: 40px;
}

.layout-container {
  display: flex;
  position: relative;
}

/* Barra lateral */
.sidebar {
  position: fixed;
  top: 140px;
  left: 0;
  width: 280px;
  height: calc(100% - 130px);
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  font-family: 'Montserrat', sans-serif;
}

.sidebar.visible {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
}

.toggle-sidebar-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #555;
  cursor: pointer;
  transition: color 0.3s;
}

.toggle-sidebar-btn:hover {
  color: #000;
}



.barra-control {
  padding: 0;
  text-align: left;
}

/* Botón de toggle */
.toggle-sidebar {
  position: fixed;
  top: 170px;
  left: 0px;
  transform: translateY(-50%);
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  font-weight: bold;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.3s ease;
}

/* Cuando la sidebar está abierta, mover el botón */
.sidebar-open .toggle-sidebar {
  left: 260px;
  /* sidebar + margen */
}


.sidebar.visible~.toggle-sidebar {
  display: none;
}


.toggle-sidebar:hover {
  background: var(--secondary-color);
}

.sidebar h3 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--lux-gray);
}

/* Lista del sidebar */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li a {
  display: block;
  padding: 1rem;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #222;
}

.property-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.property-header {
  display: flex;
  gap: 30px;
  background: var(--primary-color);
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  align-items: center;
  /* ✅ CENTRA verticalmente todo el contenido */
  flex-wrap: wrap;
  position: relative;
}

.property-header .details {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  position: relative !important;
  justify-content: space-between !important;
  /* ✅ Centra verticalmente el contenido interno */
  width: 100% !important;
}


.property-header img {
    width: 55px;
    max-width: 100%;
    height: 55px;
    border-radius: 999px;
}

.header-top {
  display: flex;
  flex-direction: column;
  /* Coloca h2 encima del botón */
  /* Alinea ambos elementos a la derecha */
  gap: 0.8rem;
  /* Espacio entre el título y el botón */
  align-items: right;
}



/* El título */
.header-top h2 {
  font-family: var(--lux-font-title);
  font-size: 1.5rem;
  color: #111;
  margin-right: 0 !important;
  text-align: right;
}




/* El título */
.header-t h2 {
  font-family: var(--lux-font-title);
  font-size: 1.5rem;
  color: #111;
  margin-right: 0 !important;
  text-align: right;
}

/* El botón de favorito (corazón) */
.favorite-btn {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #111;
  padding: 0;
  transition: transform 0.3s ease;
  margin-bottom: 2px;
}

/* Cuando está marcado como favorito */
.favorite-btn.favorited {
  color: #000;
  /* Corazón relleno */
}


.property-header {
  position: relative;
  /* Para posicionar absolutamente dentro */
}



.price-info {
  background: var(--primary-color);
  padding: 20px;
  border-radius: 16px;
  align-self: flex-start;
  min-width: 220px;
  text-align: center;
  zoom: 1.2;
  align-items: center;
}

.price-info h3 {
  margin: 0;
  font-size: 2rem;
  color: var(--lux-gray);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.price-info .variation {
  margin-top: 10px;
  font-weight: 600;
  font-size: 1.5rem;
  color: green;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.bottom-section {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}




.analysis-chart canvas {
  display: block;
  margin-top: 0;
}

.analysis-chart,
.property-stats {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.analysis-chart canvas {
  display: block;
  margin: 0;
  padding: 0;
}


.analysis-chart,
.property-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* NO uses height aquí */
}

.analysis-chart {
  flex: 1;
  background: var(--primary-color);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;

}

/* CSS */
/* =========================
   DATOS CLAVE
   ========================= */

.datos-clave-section {
  width: 100%;
}

.property-key-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 52px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  margin-top: 10px;
}

.property-key-data .stat {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  display: block;
}

.property-key-data .stat strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  color: #000;
  line-height: 1.25;
  margin-bottom: 8px;
}

.property-key-data .stat span {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem;
  color: #111111;
  line-height: 1.1;
  word-break: break-word;
}

@media (max-width: 768px) {
  .property-key-data {
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 0px;
  }

  .property-key-data .stat strong {
    font-size: 0.95rem;
  }

  .property-key-data .stat span {
    font-size: 1.45rem;
  }
}




.tab-section {
  background: var(--primary-color);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  gap: 10px;
}

/* ===== Tabs: activo más grande + scroll sin barra ===== */
.tabs {
  overflow-x: auto;
  /* sigue pudiendo hacer scroll */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox: oculta la barra */
  -ms-overflow-style: none;
  /* IE/Edge legacy */
}

.tabs::-webkit-scrollbar {
  /* WebKit: oculta la barra */
  width: 0;
  height: 0;
}

.tabs button {
  font-size: 0.95rem;
  /* base */
  line-height: 1.2;
  /* evita saltos verticales */
  transition: font-size .18s ease, color .18s ease, border-bottom .18s ease;
}

.tabs button.active {
  font-size: 1.08rem;
  /* un poco más grande al activar */
  color: var(--secondary-color);
}


.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}



.floating-buttons {
  position: fixed;
  top: 160px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-buttons a {
  background: var(--lux-gray);
  color: var(--primary-color);
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.3s;
}

.floating-buttons a:hover {
  background: var(--secondary-color);
}



/* Sección principal del menú */
.menu-section {
  border: 1px solid #2c2c2c;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  background-color: #fafafa;
  font-weight: 600;
  color: #111;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

.section-header:hover {
  background-color: #f0f0f0;
}

/* Icono del botón desplegable */

.section-toggle {
  font-size: 1.2rem;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  transition: transform 0.3s;
}

.section-toggle.collapsed {
  transform: rotate(-90deg);
}

/* Submenú */
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  transition: all 0.3s ease;
}

.submenu.hidden {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.submenu li a {
  display: block;
  padding: 0.75rem 2rem;
  text-decoration: none;
  color: #444;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
}

.submenu li a::before {
  position: absolute;
  left: 1rem;
  color: #aaa;
}

@media (max-width: 768px) {
  .property-header {
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 20px 5px;
    gap: 16px;
  }

  .property-header img {
    width: 55px;
    height: 55px;
    border-radius: 100%;
  }

  .property-header .details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: right;
    gap: 8px;
  }

  .property-header .header-top {
    display: flex;
    justify-content: space-between;
    gap: 1px;
    flex-wrap: wrap;

  }

  .property-header .header-top h2 {
    font-size: 1.2rem;
    margin: 0;
    flex: 1;
    text-align: left;

  }

  .property-he .header-t h2 {
    font-size: 16px;
    text-align: center;

  }

  .property-header p {
    font-size: 0.9rem;
    margin: 0;
  }


}

@media screen and (max-width: 48rem) {
  * {
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {
  .property-header {
    display: flex;
    align-items: center;
    /* 🔧 esto centra verticalmente los hijos */
    flex-direction: row;
  }

  .property-header .header-top {
    display: flex;
    align-items: right;
    /* 🔧 centra verticalmente el h2 respecto al resto */
    flex: 1;
  }



}





@media screen and (max-width: 48rem) {
  #toggleSidebarBtn {
    display: none !important;
  }
}



@media (max-width: 768px) {
  .property-main {
    padding: 0px;
    gap: 0px;
  }


  .property-header .details p {
    font-size: 0.98rem;
    color: var(--bb-muted) !important;
  }

  .price-info h3 {
    font-size: 1.4rem;
    text-align: center;
  }

  .price-info .variation {
    font-size: 1.2rem;
  }

  .property-stats {

    width: 100%;
  }

  .property-stats .stat {
    font-size: 0.95rem;
  }

  .sidebar {
    top: 80px;
    height: calc(100% - 0px);

  }
}




@media (max-width: 768px) {
  .tabs {
    display: flex;
    gap: 1px;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs::-webkit-scrollbar {
    height: 6px;
  }

  .tabs::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .tabs button {
    flex: 1 1 auto;
    text-align: center;
    background: none;
    border: none;
    font-weight: bold;
    padding: 10px 10px;
    cursor: pointer;
    color: var(--lux-gray);
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }

  .tabs button {
    flex: 0 0 auto;
    font-size: 0.95rem;
    white-space: nowrap;
    align-items: center;

  }
}

@media screen and (max-width: 48rem) {
  .bottom-section {
    display: flex;
    flex-direction: column;
    /* NO column-reverse */
    gap: 10px;
  }
}





.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  /* capa gris semitransparente */
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}


.lux-header {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  z-index: 9999;
}

.lux-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

body.fixed-header-active .layout-container {
  margin-top: 100px;
  /* ajusta según la altura del header */
}



/* NOTICIAS DE UN ACTIVO INDIVIDUAL */
.noticia-activo {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  margin-bottom: 0 rem;
  background-color: var(--primary-color);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.noticia-activo-img {
  grid-row: 1 / span 2;
  width: 180px;
  height: auto;
  max-height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

.noticia-activo-content {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: block;
  text-align: left;
}


.noticia-activo:hover {
  transform: scale(1.01);
}


.noticia-activo-content h2 {
  font-family: var(--lux-font-title);
  font-size: 1.2rem;
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

.noticia-activo-content h2 a {
  color: inherit;
  text-decoration: none;
}

.noticia-activo-content h2 a:hover {
  text-decoration: underline;
}

.fecha-noticia-activo {
  font-size: 0.9rem;
  color: #111;
  margin-bottom: 0.8rem;
}

.btn-leer-mas-activo {
  display: inline-block;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-leer-mas-activo:hover {
  background-color: #333;
  color: #fff;
}

@media (max-width: 768px) {
  .noticia-activo {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;

  }

  .noticia-activo-img {
    width: 120px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .noticia-activo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 100px;
    /* igual que la imagen */
    overflow: hidden;
  }

  .noticia-activo-content h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    line-height: 1.3em;
    max-height: 2.6em;
    /* dos líneas */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* número de líneas antes de cortar */
    -webkit-box-orient: vertical;
  }

  .fecha-noticia-activo {
    font-size: 0.8rem;
    margin: 0 0 0.4rem;
  }

  .btn-leer-mas-activo {
    align-self: flex-start;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }
}


.analysis-chart {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
  max-width: 1000px;
}

.rentabilidad-burbuja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid var(--lux-gray, #2c2c2c);
  border-radius: 100px;
  padding: 1rem 1.5rem;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-family: 'Playfair Display', serif;
  text-align: center;
  transition: transform 0.2s ease;
}

.rentabilidad-burbuja:hover {
  transform: translateY(-3px);
}

.rentabilidad-burbuja p {
  margin: 0;
  font-size: 1rem;
  color: var(--lux-gray, #2c2c2c);
  font-weight: 500;
}

.rentabilidad-burbuja .valor {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 0.3rem;
  color: #111111;
}




.comentarios-container {
  background-color: var(--primary-color);
  border-radius: 28px;
  margin-top: 2rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  font-family: var(--lux-font-body);
  color: var(--secondary-color);
}

.comentarios-header h3 {
  font-family: var(--lux-font-title);
  font-size: 2.2rem;
  margin-bottom: 0.2rem;
}

.comentarios-header p {
  font-size: 1rem;
  color: #666;
  margin-top: 0;
}

.comentarios-header select {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 0.95rem;
  background-color: #fff;
  color: #333;
  font-family: var(--lux-font-body);
}

/* Formulario */
.comentario-form {
  background-color: #fcfcfc;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.comentario-user {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.avatar-circle {
  width: 50px;
  height: 50px;
  background-color: var(--lux-gray);
  color: white;
  font-weight: 700;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comentario-user textarea {
  flex: 1;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-family: var(--lux-font-body);
  font-size: 1rem;
  min-height: 100px;
  resize: none;
  background-color: white;
}

.comentario-user textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.comentario-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  align-items: center;
}

#caracteres-restantes {
  font-size: 0.85rem;
  color: #999;
}

.comentario-actions button {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.comentario-actions button:hover {
  background-color: #1a1a1a;
}

/* Lista de comentarios */
.comentario-lista {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.comentario {
  gap: 1rem;
  animation: fadeIn 0.3s ease-in-out;
}

.comentario p {
  margin-left: 70px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comentario .contenido {
  background-color: #f8f8f8;
  padding: 1rem 1.3rem;
  border-radius: 14px;
  width: 100%;
  position: relative;
}

.comentario .contenido p {
  margin: 0 0 0.5rem;
  line-height: 1.5;
  color: #333;
}

.comentario .contenido small {
  font-size: 0.8rem;
  color: #777;
}

.comentario .contenido strong {
  font-weight: bold;
  color: var(--secondary-color);
}

.autor-badge {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Botones debajo de cada comentario */
.comentario-footer {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.btn-responder,
.btn-like {
  background: none;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  color: #555;
  transition: color 0.2s ease;
}

.btn-responder:hover,
.btn-like:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* Respuestas */
.respuestas {
  margin-top: 1rem;
  padding-left: 2rem;
  border-left: 2px solid #ddd;
}

.comentario.respuesta {
  margin-top: 1.5rem;
}

.respuesta-formulario {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.respuesta-formulario textarea {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  resize: vertical;
  background-color: #fff;
  font-family: var(--lux-font-body);
}

.respuesta-formulario button {
  align-self: flex-end;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  padding: 0.4rem 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.respuesta-formulario button:hover {
  background-color: #1a1a1a;
  color: white;
}


.analysis-chart {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columnas */
  grid-template-rows: repeat(2, 1fr);
  /* 2 filas */
  gap: 0.5rem;
  justify-items: center;
  align-items: center;
  max-width: 1000px;
}

.rentabilidad-burbuja {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  /* cuadrado perfecto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn-invertir {
  position: relative;
  background-color: var(--lux-gray);
  color: var(--primary-color);
  padding: 5px 20px;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.3s;
}

.btn-invertir:hover {
  background-color: var(--secondary-color);
}

.back-button {
  font-size: 1.8rem;
  color: var(--lux-gray);
  text-decoration: none;
  font-weight: bold;
}

.topbar-actions button {
  background: none;
  border: none;
  font-size: 2rem;
  margin-left: 1rem;
  cursor: pointer;
  color: var(--lux-gray);
  transition: transform 0.2s ease;
  top: 50px;
}

.topbar-actions button:hover {
  transform: scale(1.15);
}

.property-main {
  /* Deja espacio bajo el header fijo. Crece con la zona segura porque
     .property-topbar también lo hace: si no, el contenido se metería debajo. */
  padding-top: calc(40px + env(safe-area-inset-top, 0px));
}

/* SOLO en pantallas hasta 768px */

.property-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /*display: flex;
  justify-content: space-between;*/
  align-items: center;
  /* La barra va fija en top:0, así que en el móvil queda debajo de la hora y la
     batería. Este relleno la baja lo justo. Si el sistema no reserva zona
     segura, env() vale 0 y no cambia nada. Va junto con el padding-top de
     .property-main, que tiene que crecer lo mismo para no quedar tapado. */
  padding: env(safe-area-inset-top, 0px) 1.2rem 0;
  z-index: 9999;
  position: fixed;
}

/* En escritorio (>=768px) la barra de navegación es un panel lateral izquierdo
   (ancho --side-nav-w). Esta barra superior es position:fixed y empieza en x=0,
   por lo que su flecha "volver" quedaba tapada por el panel. La desplazamos para
   que empiece justo a la derecha del panel. */
@media (min-width: 768px) {
  .property-topbar {
    left: var(--side-nav-w, 78px);
    width: auto;
    right: 0;
  }
}

/* El padding-top que baja la barra NO arrastra a sus hijos posicionados en
   absoluto: su "top" se mide desde el borde del padding, no desde el contenido.
   Por eso la flecha (que va en flujo normal) bajaba, pero el código del activo,
   la campana y el compartir se quedaban arriba, encima de la hora y la batería.
   Se les suma la misma zona segura para dejarlos a la altura de la flecha.
   Va acotado a .property-topbar porque .share-hero-btn también se usa flotando
   sobre la imagen del activo, y ahí no debe moverse. */
.property-topbar .codigo-scroll {
  top: calc(10px + env(safe-area-inset-top, 0px));
}

.property-topbar .share-hero-btn {
  top: calc(12px + env(safe-area-inset-top, 0px));
}

/* Código del activo centrado */
.codigo-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  font-family: var(--lux-font-title);
  font-size: 1.3rem;
  color: var(--lux-gray);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  /* no interfiere con clics */
  top: 10px;
}

.codigo-scroll.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.codigo-scroll.oculto {
  display: block;
  /* Para que exista pero esté oculto */
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}

.property-topbar {
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.property-topbar.scrolled {
  border-bottom-color: #000;
}

/* === Marco uniforme para la imagen del activo === */

/* Marco responsivo con proporción fija */
.property-media {
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  /* proporción fija (cámbiala si prefieres 16/9) */
  border-radius: 16px;
  overflow: hidden;
  background: #f2f2f2;
  /* color de fondo de relleno */
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* La imagen se adapta al marco */
.property-media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* recorte elegante */
  object-position: center;
  /* centrado del recorte */
  display: block;
}

/* Mobile: que el marco use todo el ancho y un ratio más panorámico si quieres */


/* Si existe una <img> suelta directamente dentro de .property-header, que no interfiera */
.property-header>img {
  max-width: 100%;
  height: auto;
}

/* El tamaño uniforme lo manda .property-media > img */
.property-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid #ddd;
}

.property-stats .stat strong {

  margin-bottom: 6px;
  /* espacio entre título y valor */
}

.property-stats .stat span {
  font-size: 1.2rem;
  color: #111;
}



/* === KPI Slider AUTO (sin botones) === */
.kpi-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ks-viewport {
  flex: 1;
  overflow: hidden;
}

.ks-track {
  display: flex;
  gap: 12px;
  will-change: transform;
  transition: transform .35s ease;
}

.ks-card {
  width: clamp(210px, 38vw, 320px);
  flex: 0 0 auto;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}

.ks-label {
  margin: 0 0 6px;
  font: 600 .9rem 'Montserrat', sans-serif;
  color: #555;
}

.ks-value {
  font-weight: 800;
  font-size: 1.35rem;
  color: #111;
  line-height: 1.1;
}

.ks-note {
  margin: .35rem 0 0;
  font-size: .9rem;
  color: #666;
}

/* Dots */
.ks-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.ks-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfcfcf;
  transition: transform .2s ease, background .2s ease;
}

.ks-dot.active {
  background: #111;
  transform: scale(1.1);
}

/* Oculta barras de scroll si alguien arrastra con touch/ratón */
.kpi-slider *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (max-width:768px) {
  .ks-card {
    width: 72vw;
  }
}

/* === Scroll continuo sin parones === */
.kpi-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--primary-color);
}

.ks-viewport {
  overflow: hidden;
}

.ks-track {
  display: flex;
  gap: 12px;
  width: max-content;
  /* se ajusta al contenido */
  will-change: transform;
  animation: ks-scroll var(--ks-duration, 30s) linear infinite;
}

/* Nada de pausas en hover */
.kpi-slider:hover .ks-track {
  animation-play-state: running;
}

.ks-card {
  width: clamp(10px, 38vw, 320px);
  flex: 0 0 auto;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}

.ks-label {
  margin: 0 0 6px;
  font: 600 .9rem 'Montserrat', sans-serif;
  color: #555;
}

.ks-value {
  font-weight: 800;
  font-size: 1.35rem;
  color: #111;
  line-height: 1.1;
}

.ks-note {
  margin: .35rem 0 0;
  font-size: .9rem;
  color: #666;
}

/* Puntos opcionales: puedes ocultarlos si ya no los usas */
.ks-dots {
  display: none;
}

@keyframes ks-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

  /* se mueve la mitad porque duplicamos el contenido */
}

/* Accesibilidad: respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ks-track {
    animation: none;
    transform: none;
  }
}

p {
  text-justify: inter-word;
  margin-bottom: 20px;
}



/* Fix contador + botón en Android/WebView */
#countdown-host {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: nowrap;
  /* no hacer salto de línea */
}

.countdown-wrap {
  transform: none !important;
  /* quitar el scale */
  font-size: 0.92rem;
  /* sustituye el “scale” */
  padding: 0.25rem 0.5rem;
  /* ajusta si hace falta */
  flex: 0 1 auto;
}

.countdown-time {
  white-space: nowrap;
}

/* todo en una sola línea */
.btn-invertir {
  flex: 0 0 auto;
}

/* Quita la barra de desplazamiento horizontal en el slider y otros contenedores */
.ks-viewport,
.ks-track,
.kpi-slider {
  -ms-overflow-style: none;
  /* IE y Edge antiguo */
  scrollbar-width: none;
  /* Firefox */
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  /* evita la barra horizontal */
}

.ks-viewport::-webkit-scrollbar,
.ks-track::-webkit-scrollbar,
.kpi-slider::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}



/* Mantén imagen izquierda + panel derecho en la misma fila */
.property-header {
  display: grid;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  /* nunca apila */
}



/* Panel derecho: habilitamos container queries sobre su ancho real */
.details {
  flex: 1 1 auto;
  min-width: 0;
  /* permite encoger sin desbordar */
  text-align: right;
  container-type: inline-size;
  /* <— CLAVE: medir su propio ancho */
  transform-origin: right center;
  transition: transform .18s ease;
}

/* Solo si el panel tiene menos de X px, reducimos “zoom” del bloque entero */
@container (max-width: 420px) {
  .details {
    transform: scale(.95);
  }
}

@container (max-width: 380px) {
  .details {
    transform: scale(.9);
  }
}

@container (max-width: 340px) {
  .details {
    transform: scale(.85);
  }
}

@container (max-width: 300px) {
  .details {
    transform: scale(.8);
  }
}

@container (max-width: 260px) {
  .details {
    transform: scale(.75);
  }
}

/* Opcional: evita que piezas largas fuercen cortes feos */
.details * {
  max-width: 100%;
}

/* === FORZAR EL MISMO LOOK DE MÓVIL EN ≥769px === */
@media (min-width: 769px) {


  .price-info .variation {
    font-size: 1.2rem;
  }

  /* Sección inferior en columna como móvil */
  .bottom-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Tabla/estadísticas en 1 columna como móvil */
  .property-stats {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .property-stats .stat {
    font-size: 0.95rem;
    border-right: none;
  }

  /* Tabs como móvil (scroll horizontal, sin barra) */
  .tabs {
    display: flex;
    justify-content: space-between;
    gap: 1px;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs::-webkit-scrollbar {
    height: 6px;
  }

  .tabs::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .tabs button {
    flex: 0 0 auto;
    text-align: center;
    background: none;
    border: none;
    font-weight: bold;
    padding: 10px 10px;
    cursor: pointer;
    color: var(--lux-gray);
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    font-size: 0.95rem;
    align-items: center;
  }

  /* Main compacto como móvil */
  .property-main {
    padding: 0;
    gap: 0;
  }

  /* Sidebar como móvil (posición y alto) */
  .sidebar {
    top: 80px;
    height: calc(100% - 0px);
  }

  /* Noticias del activo en fila como móvil */
  .noticia-activo {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
  }

  .noticia-activo-img {
    width: 120px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    max-height: none;
    /* anula límites de escritorio */
  }

  .noticia-activo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 100px;
    overflow: hidden;
  }

  .noticia-activo-content h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    line-height: 1.3em;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .fecha-noticia-activo {
    font-size: 0.8rem;
    margin: 0 0 0.4rem;
  }

  .btn-leer-mas-activo {
    align-self: flex-start;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  /* Botón hamburguesa: oculto como en móvil si ya lo tienes así */
  #toggleSidebarBtn {
    display: none !important;
  }

  /* Quita sombras en pantallas medianas/grandes igual que en tu regla móvil */
  * {
    box-shadow: none !important;
  }
}

.codigo-fav-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.favorite-btn-inline {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: #d4af37;
  /* dorado bonito */
  margin-right: 4px;
}

.favorite-btn-inline:hover {
  transform: scale(1.15);
}























/* =========================================================
   BLOOMBERG PURE — propiedad.html (override)
   Pegar AL FINAL de propiedad-individual.css
   ========================================================= */

:root {
  --bb-bg: #fff;
  --bb-ink: #0b1220;
  --bb-muted: rgba(2, 6, 23, .60);
  --bb-line: rgba(2, 6, 23, .10);
  --bb-line2: rgba(2, 6, 23, .08);
  --bb-soft: rgba(2, 6, 23, .03);
  --bb-yellow: #ffcf00;
  --bb-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --bb-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Base */
body {
  background: var(--bb-bg) !important;
  color: var(--bb-ink) !important;
  font-family: var(--bb-sans) !important;
}

* {
  box-shadow: none !important;
}

/* Topbar (sticky editorial) */
.property-topbar {
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: none !important;
}

.property-topbar.scrolled {
  border-bottom-color: rgba(2, 6, 23, .18) !important;
}

.back-button {
  font-family: var(--bb-sans) !important;
  color: var(--bb-ink) !important;
  font-weight: 900 !important;
}

/* Header principal: lista/terminal, no “card” */
.property-header {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 16px 14px !important;
  align-items: center !important;
}

/* Imagen: marco limpio y editorial */
.property-media {
  border-radius: 12px !important;
  border: 1px solid var(--bb-line) !important;
  background: #f5f6f8 !important;
  box-shadow: none !important;
}

.property-media>img {
  border-radius: 12px !important;
}

/* Panel derecha: compactar y alinear tipo Bloomberg */
.details {
  text-align: left !important;
  /* Bloomberg = izquierda */
  zoom: 1 !important;
  transform: none !important;
}

/* Ticker + fav: ticker manda, fav discreto */
.codigo-fav-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#codigo-activo {
  font-size: 24px !important;
  margin: 0 !important;
  color: rgba(2, 6, 23, .92) !important;
  font-weight: 500;
}

.favorite-btn-inline {
  color: rgba(2, 6, 23, .55) !important;
  font-size: 18px !important;
  transform: none !important;
}

.favorite-btn-inline:hover {
  color: rgba(2, 6, 23, .85) !important;
}

/* Tipo activo (kicker) */
#tipo-activo {
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  color: var(--bb-muted) !important;
}

/* Countdown + CTA: estilo terminal */
#countdown-host {
  margin: 20px;
}

.countdown-wrap {
  border: 1px solid var(--bb-line) !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}

.countdown-time {
  font-family: var(--bb-sans) !important;
}

.btn-invertir {
  border-radius: 10px !important;
 /* border: 1px solid black !important;*/
  background:#00c805 !important;
  color: white !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 10px 14px !important;
}



/* Sección tabs: Bloomberg = texto + underline */
.tab-section {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 30px 18px !important;
}

.tabs {
  gap: 18px !important;
  margin-bottom: 0px !important;
}

.tabs button {
  font-weight: 950 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: rgba(2, 6, 23, .55) !important;
  padding: 10px 0 !important;
  border-bottom: 2px solid transparent !important;
}

.tabs button.active {
  color: rgba(2, 6, 23, .92) !important;
}

/* Título proyecto: editorial serif */
#titulo-proyecto {
  font-weight: 950 !important;
  line-height: 1.08 !important;
  font-size: clamp(22px, 2.2vw + 12px, 36px) !important;
  color: var(--bb-ink) !important;
}

/* H2 dentro de tabs: editorial */


/* KPI slider: que parezca “ticker strip” */
.kpi-slider {
  border-radius: 14px !important;
  background: #fff !important;
  display: none;
}

.ks-card {
  border-radius: 12px !important;
  background: #fff !important;
  padding: 12px 12px !important;
}

.ks-label {
  font-family: var(--bb-sans) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: rgba(2, 6, 23, .55) !important;
}

.ks-value {
  font-family: var(--bb-sans) !important;
  font-weight: 950 !important;
  color: rgba(2, 6, 23, .90) !important;
}

/* Stats: tabla terminal (sin cards) */
.property-stats {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.property-stats .stat {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 0px !important;
  display: flex !important;
  align-items: baseline !important;
}

.property-stats .stat span {
  color: black !important;
  font-size: 0.95rem !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Plan financiero table: más Bloomberg */
.tabla-prestamo {
  border-radius: 14px !important;
  border: 1px solid var(--bb-line) !important;
  overflow: hidden !important;
}

.tabla-prestamo thead th {
  font-family: var(--bb-sans) !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  font-size: 11px !important;
  color: rgba(2, 6, 23, .65) !important;
}

.tabla-prestamo tbody td {
  font-family: var(--bb-sans) !important;
  font-size: 13px !important;
}

/* Noticias del activo: lista editorial (miniatura + titular + meta) */
#news-list .noticia-card {
  border: 0 !important;
  border-bottom: 1px solid var(--bb-line2) !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 112px 1fr !important;
  gap: 12px !important;
}

#news-list .noticia-card img {
  width: 112px !important;
  height: 78px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  border: 1px solid var(--bb-line) !important;
}

#news-list .noticia-content h2 {
  margin: 0 0 6px !important;
  font-family: var(--bb-serif) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  font-size: 16px !important;
}

#news-list .noticia-content h2 a {
  color: var(--bb-ink) !important;
  text-decoration: none !important;
}

#news-list .noticia-content h2 a:hover {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

#news-list .noticia-content p {
  margin: 0 !important;
  font-family: var(--bb-sans) !important;
  font-size: 12px !important;
  color: rgba(2, 6, 23, .55) !important;
}

#news-list .btn-leer-mas {
  display: none !important;
  /* Bloomberg: no CTA aquí, solo titular clicable */
}

/* Mobile: densidad Bloomberg */
@media (max-width: 768px) {
  main {
    padding: 0 !important;
  }

  .property-main {
    /* Este !important pisa al padding-top global, así que la zona segura hay
       que sumarla también aquí: si no, la barra baja con el notch pero el
       contenido se queda a 56px fijos y el título acaba debajo de la campana
       y el compartir (que al ir en absoluto sobresalen de la barra). */
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }

  .property-header {
    padding: 0px 30px !important;
  }

  #news-list .noticia-card {
    grid-template-columns: 104px 1fr !important;
  }

  #news-list .noticia-card img {
    width: 104px !important;
    height: 74px !important;
  }
}

.opp-name {
  font-weight: 700;
}

/* =========================================================
   BLOOMBERG CONTACT — emisor (override)
   Pegar AL FINAL del CSS (propiedad-individual.css o <style> de emisor.html)
   ========================================================= */

/* Tokens Bloomberg (si ya existen, esto solo refuerza) */
:root {
  --bb-bg: #fff;
  --bb-ink: #0b1220;
  --bb-muted: rgba(2, 6, 23, .62);
  --bb-line: rgba(2, 6, 23, .12);
  --bb-line2: rgba(2, 6, 23, .08);
  --bb-soft: rgba(2, 6, 23, .03);
  --bb-yellow: #ffcf00;
  --bb-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --bb-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Contenedor: fuera glassmorphism, dentro editorial */
#tab-contacto #contacto-emisor {
  padding: 0px !important;
  /* quita el inline agresivo */
  font-family: var(--bb-sans) !important;
}

.emisor-contacto {
  background: var(--bb-bg) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0px !important;
  font-family: var(--bb-sans) !important;
  color: var(--bb-ink) !important;
  max-width: 980px;
  margin: 0 auto;
}

/* Titulares dentro del contacto (hay h2 intermedios: “Oficinas…”) */
.emisor-contacto h2 {
  font-family: var(--bb-sans) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  color: var(--bb-muted) !important;
  margin: 14px 0 6px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--bb-line2) !important;
}

/* Filas tipo “tabla” */
.emisor-contacto-row {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 10px 0 !important;
}

.emisor-contacto-row:last-of-type {
  border-bottom: none !important;
}

.emisor-contacto-label {
  font-family: var(--bb-sans) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.emisor-contacto-value {
  min-width: 0;
}

.emisor-contacto-value a {
  color: black !important;
  text-decoration: none !important;
  line-height: 1.15 !important;
  border-bottom: 1px solid transparent !important;
  text-underline-offset: 2px;
  font-size: 10px;
}

.emisor-contacto-value a:hover {
  border-bottom-color: rgba(2, 6, 23, .35) !important;
}

/* Bloque redes */
.emisor-contacto-redes {
  margin-top: 14px !important;
  padding-top: 12px !important;
}

.emisor-contacto-redes>p {
  margin: 0 0 10px !important;
  font-family: var(--bb-sans) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  color: var(--bb-muted) !important;
}

/* GRID compacto para iconos */
.contacto-redes-iconos {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(38px, 1fr)) !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 0 !important;
  width: 100% !important;
}

/* “Botones” Bloomberg: cuadrados, borde fino, sin sombras, feedback discreto */
.contacto-redes-iconos a {
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  border: none !important;
  background: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  position: relative;
}

/* “píxel Bloomberg”: acento amarillo arriba al hover */
.contacto-redes-iconos a::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 2px;
  background: transparent;
  border-radius: 99px;
  transition: background .12s ease;
}

.contacto-redes-iconos a:hover {
  background: var(--bb-soft) !important;
  border-color: rgba(2, 6, 23, .20) !important;
  transform: translateY(-1px);
}

.contacto-redes-iconos a:hover::before {
  background: var(--bb-yellow);
}

/* El icono (img) dentro: tamaño consistente y negro */
.icono-red-social {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: brightness(0) !important;
  /* negro Bloomberg */
  opacity: .92;
}

/* Estado “disabled” (si lo usas) */
.icono-red-social-disabled,
.contacto-redes-iconos a[aria-disabled="true"] {
  opacity: .35 !important;
  pointer-events: none !important;
}

/* Responsive */
@media (max-width: 920px) {
  .contacto-redes-iconos {
    grid-template-columns: repeat(6, minmax(38px, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .emisor-contacto {
    border-radius: 12px !important;
  }

  .emisor-contacto-row {
    grid-template-columns: 110px 1fr !important;
  }

  .contacto-redes-iconos {
    grid-template-columns: repeat(6, minmax(38px, 1fr)) !important;
  }
}

@media (max-width: 390px) {
  .contacto-redes-iconos {
    grid-template-columns: repeat(4, minmax(38px, 1fr)) !important;
  }
}

/* =========================================================
   BLOOMBERG MAP — Estilo editorial / terminal
   ========================================================= */

.emisor-mapa {
  position: relative;
  margin: 14px 0 18px;
  padding-top: 10px;
  background: transparent;
}



/* Iframe plano, sin “tarjeta” */
.emisor-mapa iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: none;

  /* look Bloomberg */
  opacity: .92;
}

/* Hover muy editorial */
.emisor-mapa:hover iframe {
  opacity: 1;
  filter: grayscale(35%) contrast(1.2);
  transition: filter .25s ease, opacity .25s ease;
}

/* Versión móvil: aún más discreto */
@media (max-width: 768px) {
  .emisor-mapa iframe {
    height: 160px;
  }
}

/* ===============================
   ANALISIS PREMIUM / BLOOMBERG
   Contenido remoto dentro de #analisis-remote
   =============================== */

#analisis .analista-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .86));
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  padding: 14px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
  backdrop-filter: blur(8px);
}

#analisis .analista-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .10);
  background: #fff;
}

#analisis .analista-nombre {
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  color: #0b0b0b;
  font-size: 14px;
}

#analisis .analista-titulo {
  margin: 2px 0 0 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  color: rgba(0, 0, 0, .70);
  font-size: 12.5px;
}

#analisis .analista-exp {
  margin: 4px 0 0 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(0, 0, 0, .60);
  font-size: 12px;
  line-height: 1.35;
}

/* Caja del contenido editorial */
#analisis-remote {
  background: rgba(255, 255, 255, .92);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .06);
}

/* Ancho de lectura óptimo */
#analisis-remote>* {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Tipografía base editorial */
#analisis-remote {
  color: #111;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16.5px;
  line-height: 1.72;
}

/* Titulares dentro del art-content */
#analisis-remote h1,
#analisis-remote h2 {
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.18;
  color: #0a0a0a;
  margin: 0px auto 10px auto;
}

#analisis-remote h1 {
  font-size: 26px;
}

#analisis-remote h2 {
  font-size: 20px;
}

#analisis-remote h3,
#analisis-remote h4 {
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.22;
  color: #0a0a0a;
  margin: 16px auto 8px auto;
}

#analisis-remote h3 {
  font-size: 15px;
}

#analisis-remote h4 {
  font-size: 13.5px;
  opacity: .95;
}

/* Párrafos */
#analisis-remote p {
  margin: 10px auto;
}

/* Links tipo “FT/Bloomberg” */
#analisis-remote a {
  color: #0a0a0a;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .28);
  padding-bottom: 1px;
}

#analisis-remote a:hover {
  border-bottom-color: rgba(0, 0, 0, .55);
}

/* Separadores finos */
#analisis-remote hr {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, .10);
  margin: 18px auto;
}

/* Listas con look editorial */
#analisis-remote ul,
#analisis-remote ol {
  margin: 12px auto 12px auto;
  padding-left: 22px;
}

#analisis-remote li {
  margin: 6px 0;
}

/* Citas / callouts */
#analisis-remote blockquote {
  margin: 16px auto;
  padding: 12px 14px;
  border-left: 4px solid rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .03);
  border-radius: 12px;
  font-style: italic;
  color: rgba(0, 0, 0, .82);
}

/* Imágenes premium */
#analisis-remote img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  margin: 14px auto;
}

/* Tablas estilo research */
#analisis-remote table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px auto;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .10);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12.5px;
}

#analisis-remote th,
#analisis-remote td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  vertical-align: top;
}

#analisis-remote th {
  background: rgba(0, 0, 0, .04);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 11px;
}

#analisis-remote tr:last-child td {
  border-bottom: 0;
}

/* Etiquetas / small print */
#analisis-remote small,
#analisis-remote .note,
#analisis-remote em {
  color: rgba(0, 0, 0, .65);
}

/* Móvil: menos padding, tamaños ajustados */
@media (max-width: 560px) {
  #analisis-remote {
    border-radius: 16px;
  }

  #analisis-remote {
    font-size: 15.2px;
    line-height: 1.68;
  }

  #analisis-remote h1 {
    font-size: 18px;
  }

  #analisis-remote h2 {
    font-size: 18px;
  }
}

/* ===========================
   Bloomberg / Editorial: #descripcion
   Pegar al final de propiedad-individual.css
   =========================== */

#descripcion {
  /* Card editorial limpia */
  background: #fff;
}

/* Tipografía y ritmo Bloomberg: serif para titulares, sans para cuerpo */
#descripcion p {
  color: #000;
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 0 0 14px;
  font-weight: 700;
}

/* Primer párrafo un poco más “lead” */
#descripcion p:first-of-type {
  font-size: 0.95rem;
  line-height: 1.85;
}

/* Titulares de bloque (h3) estilo “section head” */
#descripcion h3 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111;
  margin: 22px 0 10px;
  position: relative;
  padding-top: 10px;
}

/* Subtitulares (h4) más compactos */
#descripcion h4 {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(17, 17, 17, .85);
  margin: 18px 0 8px;
}

/* Listas: bullets tipo “report” */
#descripcion ul {
  margin: 10px 0 16px;
  padding-left: 18px;
}

#descripcion li {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  font-size: 1rem;
  line-height: 1.65;
  margin: 8px 0;
}

/* “bullet” más fino y elegante */
#descripcion li::marker {
  color: rgba(17, 17, 17, .65);
}

/* Separador hr editorial */
#descripcion hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(17, 17, 17, .00), rgba(17, 17, 17, .22), rgba(17, 17, 17, .00));
  margin: 18px 0 16px;
}

/* Enlaces dentro de la descripción (si aparecen) */
#descripcion a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

#descripcion a:hover {
  opacity: .75;
}

/* Bloques inline como <strong> un pelín más “newsroom” */
#descripcion strong {
  font-weight: 700;
}

/* =========================================================
   TABLAS RESPONSIVE (solo DESCRIPCIÓN + PROMOTOR)
   - Scroll dentro de la tabla (no en toda la página)
   - Estilo editorial consistente con tu UI
   ========================================================= */

#descripcion figure,
#promotor figure {
  margin: 14px 0;
}

/* Caso típico: tablas dentro de <figure> (como te vienen en propiedades.js) */
#descripcion figure:has(table),
#promotor figure:has(table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, .10);
  background: #fff;
}

/* Caso general: tabla directa (sin figure) */
#descripcion table,
#promotor table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(2, 6, 23, .10);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Cabecera + celdas */
#descripcion th,
#descripcion td,
#promotor th,
#promotor td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(2, 6, 23, .08);
  vertical-align: top;
}

/* Header tipo “report” */
#descripcion th,
#promotor th {
  background: rgba(2, 6, 23, .04);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 11px;
  color: rgba(2, 6, 23, .70);
}

/* Filas alternas suaves */
#descripcion tbody tr:nth-child(even),
#promotor tbody tr:nth-child(even) {
  background: rgba(2, 6, 23, .02);
}

#descripcion tr:last-child td,
#promotor tr:last-child td {
  border-bottom: 0;
}

/* =========================
   MÓVIL: scroll horizontal “dentro”
   ========================= */
@media (max-width: 768px) {

  /* Importante: el scroll se aplica al contenedor figure si existe */
  #descripcion figure:has(table) table,
  #promotor figure:has(table) table {
    border: 0;
    /* el borde ya lo tiene el figure */
  }

  /* Si NO hay figure, hacemos que la tabla sea su propio “scroll container” */
  #descripcion table,
  #promotor table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Compactamos para móvil */
  #descripcion th,
  #descripcion td,
  #promotor th,
  #promotor td {
    padding: 9px 10px;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: center;
  }
}

/* =========================================================
   TABLAS – SALTO DE LÍNEA NATURAL A PARTIR DE 2–3 PALABRAS
   ========================================================= */

#descripcion td,
#descripcion th,
#promotor td,
#promotor th {
  white-space: normal;
  /* permite saltos de línea */
  word-break: normal;
  /* respeta palabras */
  overflow-wrap: break-word;
  /* rompe si es necesario */
  max-width: 280px;
  /* clave: fuerza el salto visual */
  line-height: 1.35;
}

/* En móvil, aún más claro */
@media (max-width: 768px) {

  #descripcion td,
  #descripcion th,
  #promotor td,
  #promotor th {
    max-width: 240px;
    /* ≈ 2–3 palabras por línea */
  }

  .codigo-propiedad-header {
    font-size: 0.85rem;
    margin: 2px 0 8px 0;
  }
}

/* Código de la propiedad debajo del tipo de activo */
.codigo-propiedad-header {
  margin: -2px 0 10px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  font-family: 'Montserrat', sans-serif;
}


/* CSS */
/* =========================
   DESCRIPCIÓN CON VER MÁS
   ========================= */

.descripcion-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#descripcion {
  position: relative;
}

/* Estado cerrado: máximo 5 líneas */
#descripcion.descripcion-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Evita márgenes raros del primer y último elemento */
#descripcion>*:first-child {
  margin-top: 0;
}

#descripcion>*:last-child {
  margin-bottom: 0;
}

/* Botón */
.toggle-descripcion-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}

/* CSS */
/* =========================
   RATING
   ========================= */

.rating-section {
  width: 100%;
  margin-top: 8px;
}

.rating-card {
  position: relative;
  border-radius: 28px;
  color: #ffffff;
  overflow: hidden;
}

.rating-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.rating-badge-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 4.2rem;
  line-height: 0.95;
  font-weight: 700;
  margin: 0;
  color: black;
}

.rating-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: black;
  margin: 0;
  max-width: 520px;
}

.rating-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: black;
}

.rating-scale-wrap {
  position: relative;
  padding-top: 44px;
}

.rating-scale {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg,
      #ff7a45 0%,
      #ff9a42 18%,
      #a4b54c 42%,
      #39d95a 72%,
      #31dc5a 100%);
}

.rating-marker {
  --marker-x: 50%;
  position: absolute;
  left: var(--marker-x);
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.rating-marker-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: black;
  margin-bottom: 8px;
}

.rating-marker-icon {
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 22px solid #f3f3f3;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}

.rating-marker-icon::after {
  position: absolute;
  left: 50%;
  top: 19px;
  transform: translateX(-50%);
  width: 6px;
  height: 14px;
  border-radius: 999px;
  background: black;
}

.rating-legend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.rating-legend span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: black;
}

.rating-empty {
  background: #f5f5f5;
  color: #111;
  border-radius: 18px;
  padding: 18px 20px;
  font-family: 'Montserrat', sans-serif;
}

@media (max-width: 768px) {
  .rating-card {
    border-radius: 0px !important;
  }

  .rating-badge {
    font-size: 3.1rem;
  }

  .rating-desc {
    font-size: 0.95rem;
  }

  .rating-date {
    font-size: 0.88rem;
  }

  .rating-scale {
    height: 18px;
  }

  .rating-marker-icon {
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 18px solid black;
  }

  .rating-legend {
    row-gap: 6px;
  }

  .rating-legend span {
    font-size: 0.72rem;
  }
}

/* CSS */
/* =========================
   DESCRIPCIÓN DESPLEGABLE POR H2
   NUEVO ESTILO PREMIUM
   ========================= */

.descripcion-expandida {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.descripcion-intro {
  margin-bottom: 4px;
}

.descripcion-accordions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.descripcion-accordion {
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.2s ease;
}

.descripcion-accordion:hover {
  border-color: rgba(17, 17, 17, 0.14);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.06);
}

.descripcion-accordion.open {
  border-color: rgba(17, 17, 17, 0.12);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08);
}

.descripcion-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.24s ease,
    padding 0.24s ease;
}



.descripcion-accordion-header:focus-visible {
  outline: 2px solid rgba(17, 17, 17, 0.2);
  outline-offset: -2px;
}

.descripcion-accordion-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
}

.descripcion-accordion-icon-wrap {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.descripcion-accordion-header:hover .descripcion-accordion-icon-wrap {
  background: rgba(17, 17, 17, 0.05);
  border-color: rgba(17, 17, 17, 0.14);
}

.descripcion-accordion-icon {
  position: relative;
  width: 12px !important;
  height: 12px !important;
  display: block;
}

.descripcion-accordion-icon::before,
.descripcion-accordion-icon::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 8px;
  height: 2px;
  background: #111;
  border-radius: 999px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.descripcion-accordion-icon::before {
  left: 0;
  transform: rotate(45deg);
  transform-origin: center;
}

.descripcion-accordion-icon::after {
  right: 0;
  transform: rotate(-45deg);
  transform-origin: center;
}

.descripcion-accordion.open .descripcion-accordion-icon-wrap {
  background: #111;
  border-color: #111;
  transform: rotate(180deg);
}

.descripcion-accordion.open .descripcion-accordion-icon::before,
.descripcion-accordion.open .descripcion-accordion-icon::after {
  background: #fff;
}

.descripcion-accordion-body {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  background: #fff;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    padding-top 0.28s ease,
    padding-bottom 0.28s ease;
}

.descripcion-accordion.open .descripcion-accordion-body {
  max-height: 100%;
  opacity: 1;
  padding-top: 2px;
  padding-bottom: 22px;
}

.descripcion-accordion-body>*:first-child {
  margin-top: 14px;
}

.descripcion-accordion-body>*:last-child {
  margin-bottom: 0;
}

.descripcion-accordion-body p,
.descripcion-accordion-body li,
.descripcion-accordion-body td,
.descripcion-accordion-body th {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.7;
  color: #1c1c1c;
}

.descripcion-accordion-body ul,
.descripcion-accordion-body ol {
  padding-left: 20px;
}

.descripcion-accordion-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
}

.descripcion-accordion-body th,
.descripcion-accordion-body td {
  border: 1px solid #e8e8e8;
  padding: 10px 12px;
  text-align: left;
}

.descripcion-accordion-body figure {
  margin: 12px 0;
}

@media (max-width: 768px) {
  .descripcion-expandida {
    gap: 14px;
  }

  .descripcion-accordions {
    gap: 10px;
  }

  .descripcion-accordion {
    border-radius: 16px;
  }

  .descripcion-accordion-header {
    padding: 15px 0px;
  }

  .descripcion-accordion-title {
    font-size: 0.95rem;
  }

  .descripcion-accordion-icon-wrap {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
  }

  .descripcion-accordion-body {
    padding: 0 16px;
  }

  .descripcion-accordion.open .descripcion-accordion-body {
    padding-bottom: 18px;
  }
}

/* CSS */
/* =========================
   BOTÓN FLOTANTE VER MENOS
   ========================= */

.toggle-descripcion-btn-float {
  position: fixed;
  right: 18px;
  bottom: 70px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.toggle-descripcion-btn-float:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.18);
}

.toggle-descripcion-btn-float[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  .toggle-descripcion-btn-float {

    justify-content: center;
    padding: 13px 16px;
    font-size: 0.94rem;
  }
}

.ri-funding-sim--single {
  width: 100%;
  max-width: 420px;
}

.ri-funding-top,
.ri-funding-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ri-funding-top {
  margin-bottom: 6px;
}

.ri-funded-label,
.ri-capital-target {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: #111;
  font-weight: 600;
}

.ri-funding-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

/* Capital objetivo, al lado del porcentaje captado.
   Antes iba oculto porque el valor era un texto fijo inventado ("2.500.000 €")
   que se pintaba igual en todos los activos. Ahora es el objetivo real que trae
   el Sheet, así que se muestra. Si un activo no tiene el dato, cargar-propiedad.js
   deja el texto vacío y aquí no se ve nada: no hace falta ocultarlo por CSS. */
.ri-capital-target {
  display: inline;
}

.ri-funding-fill {
  height: 100%;
  border-radius: 999px;
  background: #00c805 !important;
  transition: width .5s ease;
}

/* Proyecto financiado/cerrado: la barra de captación se pinta en rojo.
   Doble clase para ganar por especificidad al !important verde de arriba. */
.ri-funding-fill.is-financiado {
  background: #c20c0c !important;
}

.ri-funding-meta {
  margin-top: 6px;
}

@media (max-width: 768px) {
  .ri-funding-sim--single {
    max-width: 100%;
  }

  .ri-funded-label,
  .ri-capital-target {
    font-size: 12px;
  }
}

/* CSS */
/* Botón compartir sobre la imagen hero */
.property-media {
  position: relative;
}

.share-hero-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.share-hero-btn:hover {
  transform: scale(1.06);
}

.share-hero-btn:active {
  transform: scale(0.97);
}

.share-hero-btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .share-hero-btn {
    width: 30px;
    height: 30px;
    top: 12px;
    right: 1.2rem;
  }

  .share-hero-btn svg {
    width: 25px;
    height: 25px;
  }
}

/* CSS */
/* =========================
   GALERÍA HERO
   ========================= */

.property-media {
  position: relative;
  overflow: hidden;
}

.hero-gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-gallery-trigger img,
.property-media>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.72);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.hero-photo-badge:hover {
  transform: scale(1.04);
  background: rgba(17, 17, 17, 0.84);
}

.hero-photo-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-photo-badge-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* =========================
   MODAL GALERÍA
   ========================= */

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gallery-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gallery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery-modal-content {
  position: relative;
  width: min(1100px, calc(100vw - 32px));
  height: min(90vh, 820px);
  margin: 5vh auto;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  grid-template-rows: 1fr auto;
  gap: 16px;
  align-items: center;
  z-index: 2;
}

.gallery-main {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
}



.gallery-close {
  position: absolute;
  top: -6px;
  right: 0;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

.gallery-nav {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  justify-self: center;
  align-self: center;
}

.gallery-nav-prev {
  grid-column: 1;
  grid-row: 1;
}

.gallery-nav-next {
  grid-column: 3;
  grid-row: 1;
}

.gallery-footer {
  grid-column: 1 / 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 60px;
}

.gallery-counter {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.gallery-thumbs::-webkit-scrollbar {
  height: 6px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 92px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.gallery-thumb:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.gallery-thumb.is-active {
  border-color: #ffffff;
  opacity: 1;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* móvil */
@media (max-width: 768px) {
  .hero-photo-badge {
    right: 10px;
    bottom: 10px;
    padding: 1px 8px;
    font-size: 0.88rem;
  }

  .gallery-modal-content {
    width: calc(100vw - 16px);
    height: calc(100vh - 32px);
    margin: 16px auto;
    grid-template-columns: 54px 1fr 54px;
    grid-template-rows: 1fr auto;
    gap: 10px;
  }

  .gallery-nav {
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
  }

  .gallery-thumb {
    width: 76px;
    height: 56px;
  }
}

/* =========================
GALERÍA DE IMÁGENES ACTIVO
========================= */

.imagenes-activo-section {
  margin-top: 40px;
}

.galeria-activo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.galeria-activo img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s;
}

.galeria-activo img:hover {
  transform: scale(1.03);
}

/* =========================
   SECCIÓN IMÁGENES
   ========================= */

.imagenes-section {
  /* El .bottom-section ya separa las secciones con su `gap`; este margin extra
     creaba un hueco grande antes de "Imágenes" (sobre todo al ocultarse Promotor
     y Rating). Lo dejamos pequeño para que la separación sea coherente. */
  margin-top: 0.5rem;
}

.imagenes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 1rem;
}

.imagen-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.imagen-card img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 16px;
}

/* Móvil */
@media (max-width: 768px) {
  .imagenes-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .imagen-card img {
    height: 220px;
  }
}

/* CSS */
/* =========================
   BOTÓN FLOTANTE VER MENOS
   ========================= */

.toggle-descripcion-btn-float {
  position: fixed;
  right: 18px;
  bottom: 70px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  cursor: pointer;

  /* Estado oculto inicial */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.94);

  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s ease,
    box-shadow 0.22s ease;
  will-change: opacity, transform;
}

/* Estado visible con animación tipo iOS */
.toggle-descripcion-btn-float.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Hover suave */
.toggle-descripcion-btn-float.is-visible:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.18);
}

/* Al pulsar */
.toggle-descripcion-btn-float.is-visible:active {
  transform: translateY(0) scale(0.98);
}

/* Ya no usamos display:none para ocultarlo */
.toggle-descripcion-btn-float[hidden] {
  display: inline-flex !important;
}

/* CSS */
/* =========================
   DESCRIPCIÓN EMISOR CON VER MÁS
   ========================= */

.emisor-descripcion-section {
  width: 100%;
}

#descripcion-emisor {
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

/* CSS */
#descripcion-emisor {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

#descripcion-emisor.descripcion-emisor-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}

#descripcion-emisor:not(.descripcion-emisor-collapsed) {
  max-height: 5000px;
}

#descripcion-emisor>*:first-child {
  margin-top: 0;
}

#descripcion-emisor>*:last-child {
  margin-bottom: 0;
}

#descripcion-emisor p,
#descripcion-emisor li,
#descripcion-emisor td,
#descripcion-emisor th {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.85;
  font-size: 0.95rem;
  color: #000;
  font-weight: 700;
}

.toggle-descripcion-emisor-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}

/* CSS */
/* =========================
   GENERAL DEL EMISOR
   ========================= */

.emisor-general-layout {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

#tab-resumen .datos-clave-section {
  width: 100%;
}

#tab-resumen #stats.property-key-data {
  margin-top: 14px;
}

#tab-resumen #stats.property-key-data .stat {
  min-width: 0;
}

@media (max-width: 768px) {
  .emisor-general-layout {
    gap: 7px;
  }

  #tab-resumen #stats.property-key-data {
    grid-template-columns: 1fr 1fr;
    row-gap: 5px;
  }
}

/* CSS */
/* =========================
   TRUSTPILOT EMISOR
   ========================= */

.trustpilot-section {
  width: 100%;
}

#trustpilot-card {
  width: 100%;
}

.trustpilot-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
  padding: 26px;
  border: 1px solid #e6e6e6;
  border-radius: 24px;
  background: #fff;
}

.trustpilot-card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.trustpilot-score {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  color: #111;
}

.trustpilot-stars {
  display: flex;
  gap: 4px;
  font-size: 1.2rem;
  line-height: 1;
}

.tp-star {
  color: #d8d8d8;
}

.tp-star.is-on {
  color: #00b67a;
}

.trustpilot-card-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trustpilot-label {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #111;
}

.trustpilot-meta {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #666;
}

.trustpilot-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
}

.trustpilot-link:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .trustpilot-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .trustpilot-score {
    font-size: 2.8rem;
  }
}

/* CSS */
.trustpilot-stars {
  display: flex;
  gap: 4px;
  font-size: 1.2rem;
  line-height: 1;
}

.tp-star {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.tp-star-base,
.tp-star-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  line-height: 1;
}

.tp-star-base {
  color: #d8d8d8;
}

.tp-star-fill {
  color: #00b67a;
  overflow: hidden;
  white-space: nowrap;
}

/* CSS */
/* ⭐ Estrellas Trustpilot (FIX REAL) */

.tp-star {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

/* Estrella gris (fondo) */
.tp-star-base {
  position: absolute;
  top: 0;
  left: 0;
  color: #d8d8d8;
  z-index: 1;
}

/* Estrella verde (relleno) */
.tp-star-fill {
  position: absolute;
  top: 0;
  left: 0;
  color: #00b67a;
  overflow: hidden;
  white-space: nowrap;
  z-index: 2;
  /* 🔥 CLAVE */
  font-size: 19px !important;
}

/* CSS */
/* =========================
   BOTÓN FLOTANTE VER MENOS
   ========================= */

.toggle-descripcion-btn-float {
  position: fixed;
  right: 18px;
  bottom: 90px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.94);

  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s ease,
    box-shadow 0.22s ease;
  will-change: opacity, transform;
  text-decoration: underline;
}

.toggle-descripcion-btn-float.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.toggle-descripcion-btn-float.is-visible:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.18);
}

.toggle-descripcion-btn-float.is-visible:active {
  transform: translateY(0) scale(0.98);
}

.toggle-descripcion-btn-float[hidden] {
  display: inline-flex !important;
}

@media (max-width: 768px) {
  .toggle-descripcion-btn-float {
    right: 23px;
    bottom: 130px;
    padding: 11px 15px;
    font-size: 0.92rem;
  }
}

ul,
ol {
  list-style: none;
}

/* =========================
   BOTÓN INVERTIR FLOTANTE ABAJO
   ========================= */

.ri-bottom-invest-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* Los 50px son el alto de la barra de navegación inferior. Faltaba sumar la
     zona de gestos del móvil: sin ella el botón quedaba medio tapado por la
     nav. En un navegador de escritorio env() vale 0 y queda igual que antes. */
  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  /* Sin recuadro: el botón va directamente sobre el contenido */
  background: transparent;
  box-shadow: none;
}

.ri-bottom-invest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  border-radius: 90px !important;
}

/* Para que el botón fijo no tape el contenido al final */
body {
  padding-bottom: 96px;
}

@media (max-width: 768px) {
  .ri-bottom-invest-bar {
    padding: 0px !important;
    margin: 20px;
  }

  .ri-bottom-invest-btn {
    min-height: 54px;
    border-radius: 14px;
  }

  body {
    padding-bottom: 92px;
  }
}

/* Halo blanco eliminado: el botón no lleva recuadro de ningún color */
.ri-bottom-invest-bar::before {
  content: none;
}

/* botón encima */
.ri-bottom-invest-btn {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Escritorio (>=768px): en pantallas grandes la barra de
   navegación es un panel lateral izquierdo, y el contenido de la
   ficha no está pensado para tanto ancho. Ajustamos:
   - La barra flotante de "invertir" no debe pasar bajo el panel
     ni ser un botón gigante a todo lo ancho: la desplazamos a la
     derecha del panel y limitamos el botón a un ancho cómodo.
   - El logo de la plataforma llevaba width:11% inline (enorme en
     pantallas grandes): lo fijamos a un tamaño pequeño y coherente.
   ============================================================ */
/* Imagen del activo: limitamos su altura para que se vea más contenido además
   de la foto (título, financiación, pestañas...). En móvil la imagen ya es más
   baja que este tope, así que no le afecta. */
.property-media {
  max-height: 420px;
}

/* Logo de la plataforma — MÓVIL (base): como estaba antes, círculo pequeño
   (11% de ancho) en la esquina superior derecha de la imagen, sin fondo.
   En pantallas grandes (>=768px) se convierte en el badge blanco (más abajo). */
#logo-plataforma {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  width: 11%;
  height: auto;
  object-fit: cover;
  border-radius: 99px !important;
  /* !important: gana al border-radius:12px de .property-media>img */
  background: none;
  padding: 0;
  box-shadow: none;
  z-index: 3;
  display: block;
  margin: 0;
  box-sizing: border-box;
}

/* ============================================================
   Pantallas grandes (>=768px): el panel lateral está presente.
   ============================================================ */
@media (min-width: 768px) {
  /* La barra flotante de "invertir" no debe pasar bajo el panel ni ser un
     botón gigante a todo lo ancho. */
  .ri-bottom-invest-bar {
    left: var(--side-nav-w, 78px);
    right: 0;
  }

  .ri-bottom-invest-btn {
    max-width: 460px;
    margin: 0 auto;
  }

  /* Logo: badge blanco redondeado en la esquina superior IZQUIERDA (la derecha
     la ocupa el botón de compartir). Solo aquí; en móvil se queda como antes. */
  #logo-plataforma {
    top: 12px;
    left: 12px;
    right: auto;
    width: 54px;
    height: 54px;
    object-fit: contain;
    background: #fff;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    border-radius: 12px !important;
  }
}

/* ============================================================
   Pantallas grandes (>=1100px): ~20% de margen a cada lado, igual que la home,
   para que todas las pantallas tengan el mismo aire lateral.
   ============================================================ */
@media (min-width: 1100px) {
  .property-main {
    max-width: none;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
  }

  /* El contenido va a ras de esos márgenes (sin el padding lateral del header),
     así coincide exactamente con el resto de pantallas. */
  .property-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Botón de inversión SUPERPUESTO sobre la imagen, abajo a la derecha.
     (En móvil/tablet sigue siendo la barra fija de abajo.) La barra ahora vive
     dentro de .property-media (position:relative), así que aquí pasa a
     absolute y se ancla a la esquina inferior derecha de la foto. */
  .ri-bottom-invest-bar {
    position: absolute;
    left: auto;
    right: 20px;
    bottom: 20px;
    top: auto;
    width: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    z-index: 4;
  }

  .ri-bottom-invest-btn {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 52px;
    padding: 0 34px;
    margin: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  }
}

/* RENTABILIDAD BLOQUE */
.ri-rentabilidad-info {
  display: flex;
  justify-content: space-between;
}

.ri-rent-item {
  display: flex;
  flex-direction: column;
}

.ri-rent-label {
  font-size: 0.8rem;
  color: #777;
  margin-bottom: 4px;
  display: none;
}

.ri-rent-value {
  font-size: 24px;
  font-weight: 500;
  color: green;
  display: none;
}

/* ===== Tipo activo (una sola línea SIEMPRE) ===== */
#tipo-activo {
  white-space: nowrap;
  /* ❌ nunca baja a otra línea */
  overflow: hidden;
  /* corta lo que sobra */
  text-overflow: ellipsis;
  /* pone "..." si no cabe */
}


#tipo-activo {
  font-size: clamp(14px, 2.5vw, 16px) !important;
}

@media (min-width: 769px) {

 .property-header{
  padding-top: 55px !important;
 }

 .emisor-page-header .details{
  padding-top: 50px !important;
 }
}

.ri-auth-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  padding: calc(36px + env(safe-area-inset-top, 0px)) 30px calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.ri-auth-screen.hidden,
.ri-auth-form.hidden,
.ri-invest-preview.hidden {
  display: none !important;
}

.ri-auth-close {
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
  color: #000;
  padding: 0;
  margin: 0 0 34px 0;
}

.ri-auth-form {
  width: 100%;
  height: 100%;
}

.ri-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.ri-auth-divider::before,
.ri-auth-divider::after {
  content: "";
  height: 1px;
  background: #e8e8e8;
  flex: 1;
}

.ri-auth-divider span {
  font-size: 13px;
  color: #111;
  white-space: nowrap;
  font-weight: 400;
}

.ri-auth-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
      display: block;
    font-size: .9rem;
    font-weight: 600;
    color: #222;
    margin: 0 0 .35rem 0;
    font-family: 'Montserrat', sans-serif;
}

.ri-auth-form input {
  width: 100%;
  height: 34px;
  border: 1px solid #dedede;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 14px;
  margin-bottom: 5px;
  box-sizing: border-box;
  outline: none;
}

.ri-auth-form input:focus {
  border-color: #111;
}

.ri-auth-create {
  margin-top: 22px;
  text-align: center;
      margin: 14px 0 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    color: #666;
}

.ri-auth-create p {
  margin: 0 0 4px;
  font-size: 14.08px;
  color: #777;
}

.ri-auth-create button {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  color: #000;
}

.ri-auth-main-btn {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(14px);
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: #00c805 !important;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.ri-auth-header {
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
}

.ri-auth-header img {
  width: 80px;
  height: auto;
  object-fit: contain;
}

.ri-invest-preview {
  width: 100%;
  min-height: 100%;
  background: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  box-sizing: border-box;
  padding: 110px 10px 0;
}

.ri-preview-center {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  text-align: center;
}

.ri-preview-logo {
  width: 125px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}

.ri-preview-platform {
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 400;
  color: #111;
}

.ri-preview-money-wrap {
  margin: 54px auto 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ri-preview-money {
  width: 150px;
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;
  font-size: 50px;
  line-height: 1;
  font-weight: 500;
  color: #111;
  font-family: 'Montserrat', system-ui, sans-serif;
}

.ri-preview-money-wrap span {
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
  color: #111;
}

.ri-preview-money::-webkit-outer-spin-button,
.ri-preview-money::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ri-preview-money {
  -moz-appearance: textfield;
}

.ri-preview-fee {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #111;
}

.ri-preview-invest-btn {
  width: 100%;
  height: 48px;
  margin: 24px 0 26px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

.ri-preview-asset {
  text-align: center;
  padding: 0 32px;
}

.ri-preview-asset h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 500;
  color: #111;
  position: absolute;
  top: 40px;
}

.ri-preview-asset p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  display: none;
  color: #777;
}
.login-register-link {
    margin: 14px 0 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    color: #666;}
    .login-register-link a {
    color: #111;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ri-register-form.hidden {
  display: none !important;
}

.ri-register-form {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', system-ui, sans-serif;
}

.ri-register-platform-text {
  text-align: center;
  margin: 0 0 34px;
  font-size: 14px;
  line-height: 1.35;
  color: #111;
}

.ri-register-form label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 .35rem 0;
}

.ri-register-form input[type="text"],
.ri-register-form input[type="password"] {
  width: 100%;
  height: 34px;
  border: 1px solid #dedede;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 14px;
  margin-bottom: 18px;
  box-sizing: border-box;
  outline: none;
}

.ri-register-form input:focus {
  border-color: #111;
}

.ri-data-switch-row {
  margin-top: 22px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px !important;
  line-height: 1.35;
  color: #111;
}

.ri-data-switch-row input {
  display: none;
}

.ri-data-switch-row i {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #d9d9d9;
  position: relative;
  flex: 0 0 auto;
  transition: background .2s ease;
}

.ri-data-switch-row i::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}

.ri-data-switch-row input:checked + i {
  background: #111;
}

.ri-data-switch-row input:checked + i::before {
  transform: translateX(22px);
}

.ri-auth-main-btn:disabled {
  background: #d9d9d9;
  color: #888;
  pointer-events: none;
}

.ri-invest-success {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ri-invest-success.hidden {
  display: none !important;
}

.ri-invest-success-box {
  text-align: center;
}

.ri-invest-success-box h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

.ri-invest-success-box p {
  font-size: 14px;
  color: #666;
}

.ri-slide-invest {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 145px;
  background: #00c805;
  z-index: 2147483647;
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
}

.ri-slide-track {
  width: 100%;
  height: 100%;
  max-width: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ri-slide-arrow {
  color: #fff;
  font-size: 42px;
  line-height: 1;
  font-weight: 400;
  transform: translateY(6px);
}

.ri-slide-text {
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin-top: 2px;
}

.ri-slide-handle {
  position: absolute;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  left: 50%;
  transform: translateX(-50%);
}

.ri-slide-invest.is-confirming {
  background: #00b805;
}

.ri-slide-invest.is-confirming .ri-slide-text {
  font-size: 20px;
}

.ri-slide-invest {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 145px;
  background: #00c805;

  z-index: 9999999999 !important; /* 🔥 MÁS ALTO QUE TODO */

  border-radius: 18px 18px 0 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));

  box-sizing: border-box;
  touch-action: none;
  user-select: none;

  isolation: isolate; /* 🔥 CLAVE para stacking */
}

#ri-slide-invest {
  pointer-events: auto !important;
}

#ri-slide-invest * {
  pointer-events: auto;
}

.ri-slide-invest {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ri-slide-invest {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: #00c805;
  z-index: 9999999999 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  will-change: transform;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-radius .28s ease, height .28s ease;
}

.ri-slide-invest.is-dragging {
  transition: none;
}

.ri-slide-invest.is-ready {
  background: #00b805;
}

.ri-slide-track {
  width: 100%;
  max-width: 420px;
  text-align: center;
  color: #fff;
}

.ri-slide-arrow {
  display: block;
  font-size: 38px;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 2px;
}

.ri-slide-text {
  display: block;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
}

.ri-slide-handle {
  display: none;
}

.ri-slide-green-fill {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #00c805;
  z-index: 9999999998 !important;
  pointer-events: none;
  transition: height .28s cubic-bezier(.2,.8,.2,1);
}

.ri-slide-green-fill.is-dragging {
  transition: none;
}

/* ===== RI INVEST PREVIEW: pantalla fija y estable ===== */

.ri-invest-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999997 !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 170px !important;
  overflow: hidden !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

.ri-invest-preview.hidden {
  display: none !important;
}

.ri-preview-center {
  width: 100% !important;
  max-width: 390px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto auto auto 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

.ri-preview-logo {
  width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  margin: 0 !important;
  align-self: end !important;
}

.ri-preview-platform {
  max-width: 310px !important;
  margin: 18px auto 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: #111 !important;
  align-self: start !important;
}

.ri-preview-money-wrap {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 22px !important;
}

.ri-preview-money {
  width: 110px !important;
  min-width: 80px !important;
  max-width: 180px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  text-align: right !important;
  font-size: 18vw !important;
  line-height: .9 !important;
  font-weight: 600 !important;
  color: #111 !important;
}

.ri-preview-money-wrap span {
  font-size: clamp(28px, 8vw, 42px) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: #111 !important;
}

.ri-preview-fee {
  margin: 10px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: #111 !important;
  display: none !important;
}

.ri-preview-asset {
  display: none !important;
}

/* Slider fijo abajo, siempre igual */
.ri-slide-green-fill {
  z-index: 9999999998 !important;
}

.ri-slide-invest {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 145px !important;
  z-index: 9999999999 !important;
  border-radius: 0 !important;
  background: #00c805 !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

.ri-slide-track {
  max-width: 390px !important;
}

.ri-slide-arrow {
  font-size: 32px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}

.ri-slide-text {
  font-size: clamp(16px, 5vw, 19px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.ri-preview-money-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Bloque visual centrado */
.ri-preview-money-display {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  pointer-events: none; /* 👈 clave */
}

/* Número SIEMPRE centrado */
#ri-money-text {
  font-size: clamp(60px, 16vw, 90px);
  font-weight: 600;
  color: #111;
  text-align: center;
}

/* € pegado al número */
#ri-money-currency {
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 600;
  color: #111;
}

/* Input invisible encima */
.ri-preview-money-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  opacity: 0;              /* 👈 invisible */
  text-align: center;      /* 👈 teclado centrado */
  font-size: 40px;

  border: none;
  outline: none;
}

/* Estado inválido: número en rojo cuando el importe es menor al mínimo */
.ri-preview-money-display.is-invalid #ri-money-text,
.ri-preview-money-display.is-invalid #ri-money-currency {
  color: #e02424;
}

/* Mensajito del mínimo bajo el número */
.ri-money-min-msg {
  margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #e02424;
  opacity: 0;                 /* oculto por defecto, reserva el espacio */
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ri-money-min-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Feedback visual: swipe bloqueado (sacudida + tinte gris) */
.ri-slide-invest.is-blocked {
  animation: ri-slide-shake 0.45s ease;
  background: #9aa0a6 !important;
}

@keyframes ri-slide-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-7px); }
  80% { transform: translateX(7px); }
}

/* Segundo párrafo del análisis IA en gris y cursiva */
#analisis-remote p:nth-of-type(2) {
  color: #000000 !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* =========================
   RI DEPÓSITO PREVIO
   ========================= */

.ri-deposit-screen.hidden {
  display: none !important;
}

.ri-deposit-screen {
  position: fixed;
  inset: 0;
  z-index: 9999999997;
  background: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #050505;
  box-sizing: border-box;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 24px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
}

.ri-deposit-top {
  display: flex;
  align-items: center;
  height: 44px;
  flex: 0 0 auto;
}

.ri-deposit-back {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 42px;
  line-height: 1;
  font-weight: 300;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ri-deposit-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 48px;
}

.ri-deposit-content h1 {
  margin: 0 0 24px;
  text-align: center;
  font-size: clamp(36px, 9vw, 48px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #000;
}

.ri-deposit-intro {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(20px, 5.2vw, 25px);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #111;
}

.ri-deposit-intro strong {
  color: #f05a00;
  font-weight: 800;
}

.ri-deposit-limit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 104px;
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.2;
  font-weight: 500;
  color: #737b80;
  letter-spacing: -0.02em;
}

.ri-deposit-info-icon {
  width: 24px;
  height: 24px;
  border: 3px solid #737b80;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.ri-deposit-bank-list {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.ri-deposit-bank-row {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 18px;
  align-items: center;
}

.ri-deposit-bank-row span {
  display: block;
  margin-bottom: 8px;
  color: #747b80;
  font-size: clamp(19px, 4.9vw, 22px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ri-deposit-bank-row strong {
  display: block;
  color: #111;
  font-size: clamp(21px, 5.4vw, 25px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.03em;
  word-break: break-word;
}

.ri-copy-bank {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  padding: 0;
  position: relative;
}

.ri-copy-bank::before,
.ri-copy-bank::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  border: 4px solid #000;
  box-sizing: border-box;
}

.ri-copy-bank::before {
  top: 7px;
  left: 7px;
  border-right: 0;
  border-bottom: 0;
}

.ri-copy-bank::after {
  right: 5px;
  bottom: 5px;
  background: #000;
}

.ri-copy-bank.is-copied::after {
  background: #00c805;
}

.ri-show-bank-extra {
  width: fit-content;
  border: 0;
  border-bottom: 1.5px solid #8c9296;
  background: transparent;
  padding: 0 0 5px;
  color: #747b80;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: left;
}

.ri-bank-extra {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.ri-bank-extra.hidden {
  display: none !important;
}

.ri-deposit-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
}

.ri-deposit-continue,
.ri-deposit-close {
  width: 100%;
  min-height: 88px;
  border-radius: 999px;
  font-size: clamp(22px, 5.5vw, 26px);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: 'Montserrat', system-ui, sans-serif;
}

.ri-deposit-continue {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

.ri-deposit-close {
  border: 2px solid #858585;
  background: #fff;
  color: #000;
}

@media (max-width: 430px) {
  .ri-deposit-screen {
    padding-left: 24px;
    padding-right: 24px;
  }

  .ri-deposit-content {
    padding-top: 42px;
  }

  .ri-deposit-limit {
    margin-bottom: 104px;
  }

  .ri-deposit-bank-list {
    gap: 34px;
  }

  .ri-deposit-continue,
  .ri-deposit-close {
    min-height: 88px;
  }
}

@media (max-height: 760px) {
  .ri-deposit-content {
    padding-top: 24px;
  }

  .ri-deposit-content h1 {
    margin-bottom: 16px;
  }

  .ri-deposit-intro {
    font-size: 19px;
    line-height: 1.45;
  }

  .ri-deposit-limit {
    margin: 18px 0 46px;
  }

  .ri-deposit-bank-list {
    gap: 24px;
  }

  .ri-deposit-actions {
    gap: 12px;
    padding-top: 18px;
  }

  .ri-deposit-continue,
  .ri-deposit-close {
    min-height: 70px;
  }
}
.ri-deposit-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}
/* =========================
   LOGIN FIX — teclado móvil
   ========================= */

@media (max-width: 768px) {

  /* evita que el layout entero se recomponga */
  .ri-auth-screen,
  .ri-deposit-screen {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  /* contenido scrolleable arriba */
  .ri-auth-container,
  .ri-deposit-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 70px !important;
  }

  /* BOTÓN FIJO ABAJO */
  .ri-auth-actions,
  .ri-deposit-actions {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 999999999 !important;

    padding:
      14px
      18px
      calc(14px + env(safe-area-inset-bottom, 0px)) !important;

    background: #fff !important;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    will-change: transform;
  }

  /* evita animaciones raras del teclado */
  .ri-auth-main-btn,
  .ri-deposit-continue,
  .ri-deposit-close {
    transform: none !important;
  }

  /* inputs */
  .ri-auth-form input,
  .ri-register-form input {
    font-size: 16px !important;
  }
}

/* =========================================================
   FIX DEFINITIVO — botón login no sube con teclado móvil
   ========================================================= */

@media (max-width: 768px) {
  .ri-auth-main-btn {
    position: fixed !important;
    left: 20px !important;
    right: 20px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  html.ri-keyboard-open .ri-auth-main-btn {
    transform: translateY(var(--ri-keyboard-height, 0px)) !important;
  }

  .ri-auth-form,
  .ri-register-form {
    padding-bottom: 110px !important;
  }
}

/* FIX REAL: ocultar botón login cuando teclado móvil está abierto */
@media (max-width: 768px) {
  html.ri-keyboard-open .ri-auth-main-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}