body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     background: #fafafa;
 }

 .container {
     display: flex;
     max-width: 100%;
     width: 80%;
     margin: auto;
     padding: 20px;
 }

 /* Sidebar miniaturas */
 .sidebar {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-right: 5px;
     width: 15%;
 }

 .sidebar img {
     width: 60px;
     height: 60px;
     object-fit: cover;
     cursor: pointer;
     border: 2px solid transparent;
     border-radius: 5px;
 }

 .sidebar img.active {
     border: 2px solid #007bff;
 }

 /* Imagen principal */
 .main-image {
     flex: 2;
     text-align: center;
 }

 .main-image img {
     width: 100%;
     max-height: 480px;
     object-fit: contain;
     border-radius: 8px;
 }

 /* Panel derecho */
 .info-panel {
     flex: 1;
     margin-left: 20px;
     padding: 20px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .info-panel h2 {
     margin-top: 0;
     font-size: 20px;
 }

 .info-panel .price {
     font-size: 24px;
     font-weight: bold;
     color: #333;
     margin: 10px 0;
     text-align: center;
 }

 .info-panel .sub-price {
     color: gray;
     font-size: 14px;
 }

 .info-panel ul {
     list-style: none;
     padding: 0;
     margin: 15px 0;
 }

 .info-panel ul li {
     margin: 8px 0;
     display: flex;
     align-items: center;
     font-size: 14px;
 }

 .info-panel button {
     background: #007bff;
     color: white;
     border: none;
     padding: 12px 20px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 16px;
 }

 .info-panel button:hover {
     background: #0056b3;
 }

 .store-info {
     margin-top: 20px;
     border-top: 1px solid #ddd;
     padding-top: 15px;
 }

 .store-info strong {
     display: block;
     margin-bottom: 5px;
 }

 /* Sección Ubicación */
 .location-section {
     max-width: 1200px;
     margin: 30px auto;
     padding: 20px;
     background: white;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .location-section h3 {
     font-size: 22px;
     margin-bottom: 10px;
 }

 .location-section p {
     margin: 5px 0;
     font-size: 14px;
 }

 .location-section a {
     color: #007bff;
     text-decoration: none;
     font-size: 14px;
 }

 .location-section a:hover {
     text-decoration: underline;
 }

 .map {
     margin-top: 15px;
     width: 100%;
     height: 300px;
     border-radius: 8px;
     overflow: hidden;
 }

 /* 📱 Estilos responsivos */
 @media (max-width: 992px) {
     .container {
         flex-direction: column;
     }

     .left-column,
     .info-panel {
         flex: 1;
         margin: 0;
         width: 100%;
     }

     .info-panel {
         margin-top: 20px;
     }
 }

 @media (max-width: 768px) {

     /* Sidebar de imágenes pasa a fila horizontal */
     .sidebar {
         flex-direction: row;
         overflow-x: auto;
         gap: 10px;
         padding-bottom: 10px;
     }

     .sidebar img {
         width: 70px;
         height: 70px;
         flex-shrink: 0;
     }

     .main-image img {
         max-height: 350px;
     }

     .description-section p {
         max-height: none;
     }

     .info-panel {
         padding: 15px;
     }
 }

 @media (max-width: 480px) {
     body {
         font-size: 14px;
     }

     .sidebar img {
         width: 60px;
         height: 60px;
     }

     .main-image img {
         max-height: 250px;
     }

     .info-panel h2 {
         font-size: 18px;
     }

     .info-panel .price {
         font-size: 20px;
     }
 }

 .description-proyecto {
     max-height: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
     transition: max-height 0.4s ease;
 }

 .description-proyecto.expanded {
     max-height: 1000px;
     /* ajusta según lo que necesites */
 }

 .ver-mas {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 8px;
     color: #007bff;
     cursor: pointer;
     font-size: 14px;
     text-decoration: none;
 }

 .ver-mas:hover {
     text-decoration: underline;
 }

 .hidden-row {
     display: none;
 }

 .slide-row {
     display: table-row;
     animation: slideDown 0.3s ease-out;
 }

 @keyframes slideDown {
     from {
         opacity: 0;
         transform: translateY(-5px);
     }

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

 .ver-mas-tabla {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 10px;
     color: #007bff;
     cursor: pointer;
     font-size: 14px;
     text-decoration: none;
 }

 .ver-mas-tabla:hover {
     text-decoration: underline;
 }


 .modal-lg {
     max-width: 900px;
 }

 .tab-plan {
     cursor: pointer;
     padding: 8px 16px;
     border-bottom: 2px solid transparent;
     text-align: center;
 }

 .tab-plan.active {
     border-bottom: 2px solid #0d6efd;
     font-weight: 500;
 }

 .plan-img {
     max-width: 100%;
     border: 1px solid #ddd;
     border-radius: 6px;
 }

 .modal-header {
     background-color: #2077c3;
 }