* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff7ed;
    color: #1f2937;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* VARIABLES */
:root {
    --primary: #ff6b35;
    --primary-dark: #e85d2a;
    --secondary: #2ec4b6;
    --dark: #1f2937;
    --gray: #6b7280;
    --light: #fff7ed;
    --white: #ffffff;
    --yellow: #ffd166;
    --pink: #ffafcc;
    --green: #90be6d;
    --shadow: 0 18px 40px rgba(31, 41, 55, 0.15);
    --radius: 24px;
}

/* HEADER */
.header {
    width: 100%;
    background: rgba(255, 247, 237, 0.88);
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(31, 41, 55, 0.08);
}

.navbar {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar__logo {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -1px;
}

.navbar__menu {
    display: flex;
    gap: 26px;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
}

.navbar__menu a {
    color: var(--dark);
    transition: 0.3s;
}

.navbar__menu a:hover {
    color: var(--primary);
}

.navbar__button {
    background: var(--dark);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 700;
    transition: 0.3s;
}

.navbar__button:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

/* HERO */
.hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 24px 70px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.hero__tag,
.section-heading__tag {
    display: inline-block;
    background: var(--yellow);
    color: var(--dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 18px;
}

.hero__title {
    font-size: clamp(42px, 6vw, 76px);
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--dark);
    max-width: 720px;
}

.hero__text {
    margin-top: 24px;
    color: var(--gray);
    font-size: 19px;
    max-width: 620px;
}

.hero__search {
    margin-top: 34px;
    background: var(--white);
    padding: 10px;
    border-radius: 999px;
    display: flex;
    box-shadow: var(--shadow);
    max-width: 620px;
}

.hero__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 20px;
    font-size: 16px;
    border-radius: 999px;
}

.hero__search-button {
    border: none;
    background: var(--primary);
    color: var(--white);
    padding: 16px 28px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
}

.hero__search-button:hover {
    background: var(--primary-dark);
    transform: scale(1.03);
}

.hero__actions {
    margin-top: 28px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.button {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 800;
    transition: 0.3s;
}

.button--primary {
    background: var(--primary);
    color: var(--white);
}

.button--primary:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

.button--secondary {
    background: var(--white);
    color: var(--dark);
    border: 2px solid rgba(31, 41, 55, 0.1);
}

.button--secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
}

.hero__image {
    position: relative;
}

.hero__image img {
    height: 520px;
    width: 100%;
    object-fit: cover;
    border-radius: 36px;
    box-shadow: var(--shadow);
}

.hero__review-card {
    position: absolute;
    left: -35px;
    bottom: 35px;
    background: var(--white);
    padding: 20px;
    border-radius: 22px;
    max-width: 280px;
    box-shadow: var(--shadow);
    animation: floatCard 3.5s ease-in-out infinite;
}

.hero__rating {
    display: inline-block;
    font-weight: 900;
    margin-bottom: 8px;
    color: var(--primary);
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* SECTION HEADING */
.section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
    padding: 0 24px;
}

.section-heading__title {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--dark);
}

.section-heading__text {
    margin-top: 16px;
    color: var(--gray);
    font-size: 18px;
}

/* BARRIOS */
.neighborhoods {
    padding: 80px 0;
    background: linear-gradient(135deg, #fff7ed 0%, #ffe8d6 100%);
}

.neighborhoods__grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.neighborhood-card {
    background: var(--white);
    padding: 26px;
    border-radius: var(--radius);
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(31, 41, 55, 0.08);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.neighborhood-card::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--secondary);
    border-radius: 50%;
    right: -35px;
    top: -35px;
    opacity: 0.25;
}

.neighborhood-card h3 {
    font-size: 22px;
    color: var(--dark);
    position: relative;
    z-index: 1;
}

.neighborhood-card p {
    color: var(--primary);
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.neighborhood-card:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: var(--shadow);
    background: #ffffff;
}

/* REVIEWS */
.reviews {
    padding: 90px 0;
    background: var(--white);
}

.reviews__grid {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.review-card {
    background: var(--light);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.1);
    transition: 0.3s;
}

.review-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
}

.review-card__image {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.review-card__content {
    padding: 24px;
}

.review-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.review-card__neighborhood {
    background: var(--secondary);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.review-card__rating {
    background: var(--yellow);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 900;
}

.review-card__title {
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--dark);
}

.review-card__text {
    color: var(--gray);
    font-size: 15.5px;
}

.review-card__details {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.review-card__details span {
    background: var(--white);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
}

/* CTA */
.cta {
    padding: 90px 24px;
    background: linear-gradient(135deg, var(--primary), #ff9f1c);
}

.cta__content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

.cta__content h2 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 18px;
}

.cta__content p {
    font-size: 19px;
    margin-bottom: 30px;
    opacity: 0.95;
}

.cta .button--primary {
    background: var(--white);
    color: var(--primary);
}

.cta .button--primary:hover {
    background: var(--dark);
    color: var(--white);
}

/* FOOTER */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: 34px 24px;
}

.footer__content {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.footer__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.footer__links a {
    color: #f9fafb;
    opacity: 0.8;
    transition: 0.3s;
}

.footer__links a:hover {
    opacity: 1;
    color: var(--yellow);
}

/* RESPONSIVE */
@media (max-width: 980px) {
    .navbar {
        align-items: flex-start;
        gap: 18px;
        flex-direction: column;
    }

    .navbar__menu {
        flex-wrap: wrap;
        gap: 14px;
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 50px;
    }

    .hero__image img {
        height: 420px;
    }

    .hero__review-card {
        left: 20px;
    }

    .neighborhoods__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 560px) {
    .navbar__menu {
        display: none;
    }

    .navbar__button {
        width: 100%;
        text-align: center;
    }

    .hero {
        padding: 42px 18px 50px;
    }

    .hero__title {
        letter-spacing: -2px;
    }

    .hero__search {
        flex-direction: column;
        border-radius: 24px;
    }

    .hero__search-button {
        width: 100%;
    }

    .hero__actions {
        flex-direction: column;
    }

    .button {
        text-align: center;
        width: 100%;
    }

    .hero__image img {
        height: 340px;
        border-radius: 26px;
    }

    .hero__review-card {
        position: static;
        margin-top: -40px;
        margin-left: 18px;
        margin-right: 18px;
        max-width: none;
    }

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

    .review-card__image {
        height: 220px;
    }

    .footer__content {
        flex-direction: column;
        text-align: center;
    }
}
/* =========================
   BUSCAR.HTML
========================= */

.search-page {
    padding: 80px 0 100px;
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.search-box {
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 10px;
    background: var(--white);
    border-radius: 999px;
    display: flex;
    gap: 10px;
    box-shadow: var(--shadow);
}

.search-box__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 22px;
    border-radius: 999px;
    font-size: 16px;
}

.search-box__button {
    border: none;
    background: var(--primary);
    color: var(--white);
    padding: 16px 30px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s;
}

.search-box__button:hover {
    background: var(--primary-dark);
    transform: scale(1.03);
}

.filters {
    max-width: 980px;
    margin: 0 auto 46px;
    padding: 0 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-button {
    border: none;
    background: var(--white);
    color: var(--dark);
    padding: 11px 18px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(31, 41, 55, 0.08);
    transition: 0.3s;
}

.filter-button:hover,
.filter-button.active {
    background: var(--dark);
    color: var(--white);
    transform: translateY(-3px);
}

.search-results {
    margin-top: 20px;
}

.review-card__link {
    display: inline-block;
    margin-top: 18px;
    color: var(--primary);
    font-weight: 900;
    transition: 0.3s;
}

.review-card__link:hover {
    color: var(--primary-dark);
    transform: translateX(4px);
}

/* Responsive buscar */

@media (max-width: 560px) {
    .search-page {
        padding: 50px 0 70px;
    }

    .search-box {
        margin-left: 18px;
        margin-right: 18px;
        flex-direction: column;
        border-radius: 24px;
    }

    .search-box__button {
        width: 100%;
    }

    .filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .filter-button {
        white-space: nowrap;
    }
}/* =========================
   RESENAR.HTML
========================= */

.review-form-page {
    padding: 80px 24px 100px;
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.review-form {
    max-width: 960px;
    margin: 0 auto;
    background: #ffffff;
    padding: 38px;
    border-radius: 32px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(31, 41, 55, 0.08);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.form-grid--four {
    grid-template-columns: repeat(4, 1fr);
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 900;
    color: var(--dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 2px solid rgba(31, 41, 55, 0.1);
    border-radius: 18px;
    padding: 15px 16px;
    font-size: 15px;
    font-family: inherit;
    background: #fffaf5;
    color: var(--dark);
    outline: none;
    transition: 0.3s;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
}

.form-submit {
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 8px;
}

@media (max-width: 760px) {
    .review-form {
        padding: 24px;
        border-radius: 26px;
    }

    .form-grid,
    .form-grid--four {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
/* =========================
   SOBRE.HTML
========================= */

.about-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 24px 70px;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.about-hero__tag {
    display: inline-block;
    background: #fff0d5;
    color: var(--primary);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 18px;
}

.about-hero__title {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 0.98;
    letter-spacing: -2.5px;
    color: var(--dark);
}

.about-hero__text {
    margin-top: 24px;
    font-size: 19px;
    color: var(--gray);
    max-width: 620px;
}

.about-hero__image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 34px;
    box-shadow: var(--shadow);
}

.about-cards {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.about-card {
    background: var(--white);
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 14px 34px rgba(31, 41, 55, 0.09);
    border: 1px solid rgba(31, 41, 55, 0.06);
}

.about-card__emoji {
    width: 48px;
    height: 48px;
    background: #fff0d5;
    color: var(--primary);
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.about-card h3 {
    font-size: 24px;
    letter-spacing: -0.6px;
    color: var(--dark);
    margin-bottom: 12px;
}

.about-card p {
    color: var(--gray);
    font-size: 16px;
}

.mission {
    background: #fff7ed;
    padding: 90px 24px;
}

.mission__content {
    max-width: 960px;
    margin: 0 auto;
}

.mission__title {
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--dark);
    margin-bottom: 22px;
}

.mission__text {
    font-size: 18px;
    color: var(--gray);
    margin-bottom: 14px;
}

.mission__list {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.mission-item {
    background: var(--white);
    padding: 18px 20px;
    border-radius: 20px;
    font-weight: 800;
    color: var(--dark);
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.07);
}

.about-cta {
    padding: 90px 24px;
    background: linear-gradient(135deg, var(--dark), #374151);
}

.about-cta__content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: var(--white);
}

.about-cta__content h2 {
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 18px;
}

.about-cta__content p {
    font-size: 18px;
    color: #e5e7eb;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .about-hero {
        grid-template-columns: 1fr;
    }

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

    .mission__list {
        grid-template-columns: 1fr;
    }
}/* ESTRELLAS INTERACTIVAS */

.stars {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.star {
    font-size: 36px;
    color: #d1d5db;
    cursor: pointer;
    transition: 0.25s ease;
    user-select: none;
}

.star:hover {
    transform: scale(1.15);
    color: #ffd166;
}

.star.active {
    color: #ffd166;
    transform: scale(1.08);
}

/* PREVIEW DE IMAGEN */

.image-preview {
    display: none;
    margin-bottom: 24px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.image-preview.active {
    display: block;
}

.image-preview img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}
/* =========================
   MEJORAS FORMULARIO APP
========================= */

.review-form {
    position: relative;
    overflow: hidden;
}

.review-form::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(46, 196, 182, 0.14);
    border-radius: 50%;
    top: -90px;
    right: -90px;
}

.review-form > * {
    position: relative;
    z-index: 1;
}

.stars {
    background: #fff7ed;
    padding: 16px 18px;
    border-radius: 20px;
    border: 2px solid rgba(31, 41, 55, 0.08);
    width: fit-content;
}

.star {
    filter: drop-shadow(0 4px 8px rgba(31, 41, 55, 0.12));
}

.form-group input[type="file"] {
    background: #ffffff;
    border-style: dashed;
    cursor: pointer;
}

.form-group input[type="file"]::file-selector-button {
    border: none;
    background: var(--dark);
    color: var(--white);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    margin-right: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.form-group input[type="file"]::file-selector-button:hover {
    background: var(--primary);
}

.image-preview {
    border: 3px solid #ffffff;
    background: #fff7ed;
}

.image-preview.active {
    margin-top: 4px;
    margin-bottom: 28px;
}

.image-preview img {
    border-radius: 22px;
}

.form-submit {
    width: 100%;
    padding: 18px 26px;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(255, 107, 53, 0.28);
}

.form-submit:hover {
    transform: translateY(-3px) scale(1.01);
}

@media (max-width: 560px) {
    .stars {
        width: 100%;
        justify-content: center;
    }

    .star {
        font-size: 34px;
    }
}
/* =========================
   BOTON BORRAR RESEÑAS
========================= */

.clear-reviews {
    max-width: 1180px;
    margin: 0 auto 30px;
    padding: 0 24px;
    display: flex;
    justify-content: flex-end;
}

#clearReviewsBtn {
    border: none;
    background: #fff1f2;
    color: #dc2626;
    padding: 14px 18px;
    border-radius: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.08);
}

#clearReviewsBtn:hover {
    background: #dc2626;
    color: white;
    transform: translateY(-2px);
}

.review-card--user {
    border: 3px solid rgba(255, 107, 53, 0.16);
    position: relative;
    overflow: hidden;
}

.review-card--user::before {
    content: "Nueva reseña";
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--primary);
    color: white;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 8px 16px rgba(255, 107, 53, 0.22);
}

@media (max-width: 560px) {
    .clear-reviews {
        justify-content: center;
    }

    #clearReviewsBtn {
        width: 100%;
    }
}
/* =========================
   BOTONES EDITAR RESEÑA
========================= */

.review-card__actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.review-action-btn {
    border: none;
    padding: 11px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s ease;
}

.edit-review-btn {
    background: #fff7ed;
    color: var(--primary);
}

.change-photo-btn {
    background: #ecfeff;
    color: #0891b2;
}

.review-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(31, 41, 55, 0.12);
}

@media (max-width: 560px) {
    .review-card__actions {
        flex-direction: column;
    }

    .review-action-btn {
        width: 100%;
    }
}
/* =========================
   BOTON ELIMINAR RESEÑA
========================= */

.delete-review-btn {
    background: #fff1f2;
    color: #dc2626;
}

.delete-review-btn:hover {
    background: #dc2626;
    color: #ffffff;
}
/* =========================
   NAVBAR MOBILE / HAMBURGUESA
========================= */

.navbar__toggle {
    display: none;
    border: none;
    background: var(--dark);
    color: var(--white);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s ease;
}

.navbar__toggle:hover {
    background: var(--primary);
    transform: scale(1.05);
}

.navbar__content {
    display: flex;
    align-items: center;
    gap: 28px;
}

@media (max-width: 760px) {
    .navbar {
        position: relative;
        flex-direction: row;
        align-items: center;
    }

    .navbar__toggle {
        display: block;
    }

    .navbar__content {
        position: absolute;
        top: 76px;
        left: 24px;
        right: 24px;
        background: var(--white);
        padding: 22px;
        border-radius: 24px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
        align-items: stretch;
        z-index: 999;
    }

    .navbar__content.active {
        display: flex;
    }

    .navbar__menu {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .navbar__menu a {
        display: block;
        padding: 12px 14px;
        border-radius: 14px;
        background: #fff7ed;
    }

    .navbar__button {
        width: 100%;
        text-align: center;
    }
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buscar reseñas | ReseñaTuApto</title>

    <link rel="stylesheet" href="../assets/css/style.css">

    <!-- LEAFLET CSS - MAPA -->
    <link 
        rel="stylesheet" 
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    >
</head>
<body>

    <!-- HEADER -->
    <header class="header">

        <nav class="navbar">

            <a href="../index.html" class="navbar__logo">
                ReseñaTuApto
            </a>

            <button class="navbar__toggle" id="navbarToggle" aria-label="Abrir menú">
                ☰
            </button>

            <div class="navbar__content" id="navbarContent">

                <ul class="navbar__menu">
                    <li><a href="../index.html">Inicio</a></li>
                    <li><a href="./buscar.html">Buscar</a></li>
                    <li><a href="./resenar.html">Reseñar</a></li>
                    <li><a href="./sobre.html">Sobre el proyecto</a></li>
                </ul>

                <a href="./resenar.html" class="navbar__button">
                    Dejar reseña
                </a>

            </div>

        </nav>

    </header>

    <!-- MAIN -->
    <main>

        <section class="search-page">

            <div class="section-heading">

                <span class="section-heading__tag">
                    Buscar reseñas
                </span>

                <h1 class="section-heading__title">
                    Encontrá experiencias reales antes de alquilar
                </h1>

                <p class="section-heading__text">
                    Buscá por barrio, calle o características del apartamento.
                </p>

            </div>

            <!-- SEARCH -->
            <div class="search-box">

                <input
                    type="text"
                    class="search-box__input"
                    placeholder="Ej: Buceo, humedad, Carrasco..."
                >

                <button class="search-box__button">
                    Buscar
                </button>

            </div>

            <!-- FILTROS -->
            <div class="filters">

                <button class="filter-button active">
                    Todos
                </button>

                <button class="filter-button">
                    Aguada
                </button>

                <button class="filter-button">
                    Buceo
                </button>

                <button class="filter-button">
                    Carrasco
                </button>

                <button class="filter-button">
                    Cordón
                </button>

                <button class="filter-button">
                    Malvín
                </button>

                <button class="filter-button">
                    Palermo
                </button>

                <button class="filter-button">
                    Tres Cruces
                </button>

            </div>

            <!-- MAPA -->
            <section class="map-section">

                <div class="map-section__header">

                    <div>
                        <span class="map-section__tag">
                            Mapa interactivo
                        </span>

                        <h2>
                            Explorá reseñas por zona
                        </h2>

                        <p>
                            Mirá los barrios en el mapa y encontrá reseñas cercanas antes de mudarte.
                        </p>
                    </div>

                </div>

                <div id="map" class="map"></div>

            </section>

            <!-- BOTON BORRAR -->
            <div class="clear-reviews">

                <button id="clearReviewsBtn">
                    🗑️ Borrar reseñas de prueba
                </button>

            </div>

            <!-- REVIEWS -->
            <div class="reviews__grid search-results">

                <!-- Las reseñas de Firebase se cargan acá con JavaScript -->

            </div>

        </section>

    </main>

    <!-- FOOTER -->
    <footer class="footer">

        <div class="footer__content">

            <p>
                © 2026 ReseñaTuApto. Proyecto creado para ayudar a inquilinos.
            </p>

            <div class="footer__links">

                <a href="./buscar.html">
                    Buscar
                </a>

                <a href="./resenar.html">
                    Reseñar
                </a>

                <a href="./sobre.html">
                    Sobre el proyecto
                </a>

            </div>

        </div>

    </footer>

    <!-- LEAFLET JS - MAPA -->
    <script 
        src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js">
    </script>

    <!-- JS -->
    <script type="module" src="../js/main.js"></script>

</body>
</html>
/* =========================
   MOBILE APP EXPERIENCE
========================= */

@media (max-width: 760px) {
    body {
        padding-bottom: 92px;
    }

    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .navbar {
        padding: 14px 18px;
    }

    .navbar__logo {
        font-size: 21px;
    }

    .hero {
        padding: 34px 18px 44px;
        gap: 30px;
    }

    .hero__title {
        font-size: clamp(38px, 13vw, 54px);
        line-height: 0.98;
    }

    .hero__text {
        font-size: 16.5px;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading__title {
        font-size: clamp(30px, 10vw, 42px);
    }

    .section-heading__text {
        font-size: 16px;
    }

    .reviews__grid {
        gap: 20px;
    }

    .review-card {
        border-radius: 26px;
    }

    .review-card__image {
        height: 210px;
    }

    .review-card__content {
        padding: 20px;
    }

    .review-card__title {
        font-size: 20px;
    }

    .review-card__details {
        gap: 8px;
    }

    .review-card__details span {
        font-size: 12px;
    }

    .search-box {
        margin-left: 18px;
        margin-right: 18px;
    }

    .filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
        scrollbar-width: none;
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .filter-button {
        flex: 0 0 auto;
    }

    .review-form-page {
        padding: 44px 16px 80px;
    }

    .review-form {
        padding: 22px;
        border-radius: 26px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

    .footer {
        padding-bottom: 110px;
    }
}

/* =========================
   BOTTOM NAV MOBILE
========================= */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    .mobile-bottom-nav {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: 14px;
        z-index: 2000;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(31, 41, 55, 0.08);
        box-shadow: 0 18px 45px rgba(31, 41, 55, 0.18);
        border-radius: 26px;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .mobile-bottom-nav a {
        min-height: 54px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        font-size: 11px;
        font-weight: 900;
        color: var(--gray);
        transition: 0.25s ease;
    }

    .mobile-bottom-nav a span {
        font-size: 19px;
        line-height: 1;
    }

    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a.active {
        background: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
    }
}
/* =========================
   NUEVA TIPOGRAFIA
========================= */

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero__title,
.section-heading__title,
.review-card__title,
.navbar__logo {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.04em;
}

/* HERO */

.hero__title {
    font-weight: 700;
    line-height: 0.95;
}

/* NAVBAR */

.navbar__logo {
    font-weight: 700;
}

/* CARDS */

.review-card__title {
    font-weight: 700;
    line-height: 1.05;
}

.review-card__text {
    line-height: 1.7;
    color: #4b5563;
}

/* BOTONES */

.button,
.review-action-btn,
.filter-button,
.navbar__button {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* INPUTS */

input,
select,
textarea {
    font-family: 'Inter', sans-serif;
}

/* TAGS */

.review-card__details span,
.section-heading__tag,
.hero__tag {
    font-weight: 800;
    letter-spacing: -0.02em;
}
/* =========================
   PULIDO FINAL / MICROINTERACCIONES
========================= */

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    animation: pageFadeIn 0.45s ease both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

a,
button,
input,
select,
textarea {
    transition: all 0.25s ease;
}

.button,
.navbar__button,
.hero__search-button,
.search-box__button,
.form-submit {
    position: relative;
    overflow: hidden;
}

.button:hover,
.navbar__button:hover,
.hero__search-button:hover,
.search-box__button:hover,
.form-submit:hover {
    transform: translateY(-3px);
}

.button:active,
.navbar__button:active,
.hero__search-button:active,
.search-box__button:active,
.form-submit:active,
.review-action-btn:active,
.filter-button:active {
    transform: scale(0.96);
}

.review-card {
    animation: cardAppear 0.45s ease both;
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.review-card:hover {
    transform: translateY(-8px);
}

.review-card__image {
    transition: transform 0.45s ease;
}

.review-card:hover .review-card__image {
    transform: scale(1.04);
}

.neighborhood-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgba(255, 107, 53, 0.35);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
}

.star {
    transition: transform 0.2s ease, color 0.2s ease;
}

.star:hover {
    transform: scale(1.2) rotate(-4deg);
}

.star.active {
    animation: starPop 0.25s ease;
}

@keyframes starPop {
    0% {
        transform: scale(0.8);
    }

    70% {
        transform: scale(1.22);
    }

    100% {
        transform: scale(1.05);
    }
}

.image-preview.active {
    animation: previewAppear 0.35s ease both;
}

@keyframes previewAppear {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.navbar__content.active {
    animation: menuDrop 0.28s ease both;
}

@keyframes menuDrop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

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

.mobile-bottom-nav {
    animation: bottomNavUp 0.45s ease both;
}

@keyframes bottomNavUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.mobile-bottom-nav a:active {
    transform: scale(0.94);
}

.filter-button:hover {
    transform: translateY(-3px);
}

.clear-reviews button:hover,
#clearReviewsBtn:hover {
    transform: translateY(-2px);
}

/* Mejoras finales mobile */

@media (max-width: 760px) {
    .hero__image {
        display: none;
    }

    .hero {
        padding-top: 46px;
    }

    .hero__title {
        max-width: 95%;
    }

    .hero__search {
        box-shadow: 0 12px 28px rgba(31, 41, 55, 0.12);
    }

    .neighborhoods {
        padding-top: 58px;
    }

    .reviews {
        padding-top: 64px;
    }

    .cta {
        padding: 70px 20px;
    }

    .cta__content h2 {
        font-size: 36px;
    }

    .footer__links {
        justify-content: center;
    }
}
/* =========================
   FECHA DE PUBLICACION
========================= */

.review-card__date {
    margin-top: 8px;
    margin-bottom: 12px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}
/* =========================
   INSTAGRAM FLOAT BUTTON
========================= */

.instagram-float {
    position: fixed;
    right: 20px;
    bottom: 95px;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: 0.3s ease;
}

.instagram-float:hover {
    transform: scale(1.1);
}

.instagram-float img {
    width: 34px;
    height: 34px;
}
/* =========================
   REVIEW PLACEHOLDER IMAGE
========================= */

.review-card__placeholder {
    height: 220px;
    background: linear-gradient(135deg, #fff3e8, #ffe1cc);
    border-bottom: 1px solid #ffd8c2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    text-align: center;
    gap: 8px;
}

.review-card__placeholder-icon {
    font-size: 42px;
}

.review-card__placeholder-title {
    font-size: 22px;
    font-weight: 900;
    color: #ff6333;
}

.review-card__placeholder-text {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
}
/* =========================
   SORT REVIEWS
========================= */

.sort-controls {
    max-width: 1180px;
    margin: 24px auto 28px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.sort-controls label {
    font-size: 14px;
    font-weight: 800;
    color: #4b5563;
}

.sort-controls select {
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    background: #ffffff;
    color: #1f2937;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.08);
    cursor: pointer;
}

.empty-reviews-message {
    grid-column: 1 / -1;
    text-align: center;
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    color: #6b7280;
    font-weight: 800;
}

@media (max-width: 760px) {
    .sort-controls {
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
    }

    .sort-controls select {
        width: 100%;
    }
}