/* =========================================
   HotelsCasa Listing Styles - Mobile First
   Versión optimizada sin duplicados
========================================= */

/* -----------------------------------------
   VARIABLES CSS (fáciles de mantener)
----------------------------------------- */
:root {
    --hc-bg-dark: #0B1014;
    --hc-bg-card: #111820;
    --hc-bg-input: #050505;
    --hc-gold: #E2C48E;
    --hc-gold-light: #F8D189;
    --hc-gold-rgba: rgba(226, 196, 142, 0.20);
    --hc-green: #4cd964;
    --hc-green-rgba: rgba(76, 217, 100, 0.3);
    --hc-red: #e74c3c;
    --hc-border-radius: 20px;
    --hc-transition: 0.2s ease;
}

/* -----------------------------------------
   GRID Y CARDS PRINCIPALES
----------------------------------------- */
.hc-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.hc-listing-card {
    background: var(--hc-bg-dark);
    border: 1px solid var(--hc-gold-rgba);
    border-radius: var(--hc-border-radius);
    overflow: hidden;
    transition: transform var(--hc-transition), box-shadow var(--hc-transition);
}

.hc-listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(226, 196, 142, 0.40);
}

.hc-listing-card a {
    text-decoration: none;
    color: inherit;
}

/* -----------------------------------------
   IMÁGENES
----------------------------------------- */
.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

/* -----------------------------------------
   CONTENIDO DE CARD
----------------------------------------- */
.card-content {
    padding: 15px;
}

.card-content h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: var(--hc-gold);
}

.card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* -----------------------------------------
   BADGES (incluyendo comercial)
----------------------------------------- */
.badge {
    background: rgba(226, 196, 142, 0.15);
    color: var(--hc-gold);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
}

.badge-commercial {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(46, 204, 113, 0.05));
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: var(--hc-green);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Desktop: badge comercial con glow */
@media (min-width: 769px) {
    .badge-commercial {
        box-shadow: 0 0 8px var(--hc-green-rgba);
    }
    
    .badge-commercial:hover {
        box-shadow: 0 0 12px rgba(46, 204, 113, 0.5);
        transition: box-shadow var(--hc-transition);
    }
}

/* Tarjeta comercial destacada en grid */
.hc-board-card:has(.badge-commercial) {
    background: linear-gradient(135deg, var(--hc-bg-card), #0d141c);
    border-color: var(--hc-green-rgba);
}

.hc-board-card:has(.badge-commercial):hover {
    border-color: rgba(76, 217, 100, 0.6);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(76, 217, 100, 0.2);
}

/* Mobile-first: destacado para locales comerciales */
@media (max-width: 768px) {
    .hc-listing-card:has(.badge-commercial) {
        border-left: 4px solid var(--hc-green);
        border-radius: 20px 16px 16px 20px;
    }
    
    .hc-board-card:has(.badge-commercial) {
        border-top: 3px solid var(--hc-green);
    }
    
    .hc-listing-card:has(.badge-commercial) .card-content::before {
        content: "💼 Ideal para negocio";
        display: block;
        font-size: 0.7rem;
        color: var(--hc-green);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

.price {
    color: var(--hc-gold);
    font-weight: bold;
    font-size: 1rem;
}

.views {
    color: #888;
    font-size: 0.8rem;
}

/* -----------------------------------------
   FORMULARIOS
----------------------------------------- */
.hc-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    color: var(--hc-gold);
    font-weight: 600;
    font-size: 0.85rem;
}

.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
    background: var(--hc-bg-input);
    border: 1px solid rgba(226, 196, 142, 0.30);
    border-radius: 12px;
    padding: 12px 14px;
    color: #fff;
    font-size: 0.9rem;
}

/* Opciones del desplegable: fondo/texto sólidos (si no, texto oscuro sobre oscuro = ilegible). */
.form-group select,
#hc-listing-form select {
    color: #f5f5f5;
}
.form-group select option,
#hc-listing-form select option,
.hc-search-form select option {
    background: #141a24;
    color: #f5f5f5;
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--hc-gold);
    outline: none;
}

/* Checkboxes premium */
.form-group:has(input[type="checkbox"]) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    background: var(--hc-bg-card);
    border: 1px solid rgba(226, 196, 142, 0.18);
    border-radius: 18px;
}

.form-group:has(input[type="checkbox"]) label {
    margin: 0;
    color: var(--hc-gold);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
}

.form-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(226, 196, 142, 0.45);
    border-radius: 8px;
    background: var(--hc-bg-input);
    cursor: pointer;
    position: relative;
    transition: background var(--hc-transition), border-color var(--hc-transition), box-shadow var(--hc-transition);
}

.form-group input[type="checkbox"]:checked {
    background: var(--hc-gold);
    border-color: var(--hc-gold);
}

.form-group input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--hc-bg-dark);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
}

.form-group input[type="checkbox"]:hover {
    border-color: var(--hc-gold);
    box-shadow: 0 0 0 4px rgba(226, 196, 142, 0.08);
}

.form-group input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(226, 196, 142, 0.14);
}

/* -----------------------------------------
   BOTONES
----------------------------------------- */
.hc-button,
button.hc-button {
    background: var(--hc-gold);
    color: var(--hc-bg-dark);
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--hc-transition);
}

.hc-button:hover,
button.hc-button:hover {
    background: var(--hc-gold-light);
    transform: translateY(-2px);
}

.button-small {
    background: #1a1a1a;
    color: var(--hc-gold);
    border: 1px solid rgba(226, 196, 142, 0.30);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--hc-transition);
    text-decoration: none;
    display: inline-block;
}

.button-small:hover {
    background: rgba(226, 196, 142, 0.15);
}

.button-danger {
    border-color: rgba(255, 70, 70, 0.5);
    color: #ff7a7a;
}

/* -----------------------------------------
   DASHBOARD
----------------------------------------- */
.dashboard-section {
    background: var(--hc-bg-card);
    border: 1px solid var(--hc-gold-rgba);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
}

.hc-my-listings {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dashboard-card {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.dashboard-card .card-image {
    width: 100px;
    height: 100px;
    border-radius: 12px;
}

.dashboard-card .card-content {
    flex: 1;
    padding: 0;
}

.card-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* -----------------------------------------
   FOTOS / DROPZONE
----------------------------------------- */
.photo-dropzone {
    background: var(--hc-bg-input);
    border: 2px dashed rgba(226, 196, 142, 0.30);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    color: #888;
    cursor: pointer;
    position: relative;
}

.photo-dropzone-label {
    display: block;
    cursor: pointer;
    color: #888;
    font-weight: 600;
}

.photo-dropzone small {
    display: inline-block;
    margin-top: 6px;
    color: #aaa;
    font-size: 0.78rem;
}

#photo-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.photo-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* -----------------------------------------
   MENSAJES
----------------------------------------- */
.form-message {
    padding: 12px;
    border-radius: 12px;
    margin-top: 10px;
}

.form-message.success {
    background: rgba(0, 128, 0, 0.15);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

.form-message.error {
    background: rgba(128, 0, 0, 0.15);
    border: 1px solid var(--hc-red);
    color: var(--hc-red);
}

.hc-notice {
    background: rgba(226, 196, 142, 0.10);
    border: 1px solid rgba(226, 196, 142, 0.30);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

/* -----------------------------------------
   BÚSQUEDA
----------------------------------------- */
.hc-search-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hc-search-form input,
.hc-search-form select {
    flex: 1;
    min-width: 150px;
    background: var(--hc-bg-input);
    border: 1px solid rgba(226, 196, 142, 0.30);
    border-radius: 999px;
    padding: 12px 18px;
    color: #fff;
}

/* -----------------------------------------
   SINGLE LISTING
----------------------------------------- */
.hc-single-listing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.hc-listing-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.hc-listing-gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
}

.hc-listing-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.hc-info-card {
    background: var(--hc-bg-card);
    border: 1px solid var(--hc-gold-rgba);
    border-radius: 20px;
    padding: 20px;
}

/* Icono comercial en single page */
.hc-commercial-icon {
    display: inline-block;
    font-size: 1.3rem;
    margin-right: 6px;
    vertical-align: middle;
}

.hc-map {
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
}

.hc-reviews {
    margin: 20px 0;
}

.hc-review {
    background: var(--hc-bg-input);
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 15px;
}

.hc-review .rating-star {
    color: var(--hc-gold);
}

/* -----------------------------------------
   LOCATION PREVIEW (crear anuncio)
----------------------------------------- */
.hc-location-preview-wrap {
    margin-top: 24px;
}

.hc-location-preview-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(17, 24, 32, 0.96), rgba(9, 14, 20, 0.96));
    border: 1px solid rgba(226, 196, 142, 0.18);
    border-radius: 28px;
    padding: 24px;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hc-location-preview-card:hover {
    transform: translateY(-2px);
    border-color: rgba(226, 196, 142, 0.34);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(226, 196, 142, 0.08);
}

.hc-location-preview-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.hc-location-preview-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(226, 196, 142, 0.22), rgba(226, 196, 142, 0.10));
    border: 1px solid rgba(226, 196, 142, 0.22);
    font-size: 24px;
    flex-shrink: 0;
}

.hc-location-preview-meta h4 {
    margin: 0 0 6px;
    color: var(--hc-gold);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hc-location-preview-address {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.hc-location-preview-coords {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hc-location-preview-coords span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(226, 196, 142, 0.10);
    border: 1px solid rgba(226, 196, 142, 0.16);
    color: var(--hc-gold);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hc-location-preview-map {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(226, 196, 142, 0.18);
    background: var(--hc-bg-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hc-location-preview-map iframe,
.hc-location-preview-map .hc-map-container,
.hc-location-preview-map .hc-leaflet-map {
    width: 100%;
    height: 100%;
    border: 0;
}

/* -----------------------------------------
   SINGLE LISTING LOCATION SECTION
----------------------------------------- */
.hc-location-section {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
    gap: 24px;
    margin: 28px 0;
}

.hc-location-main,
.hc-location-side {
    background: var(--hc-bg-card);
    border: 1px solid var(--hc-gold-rgba);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.hc-section-kicker {
    color: var(--hc-gold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.hc-location-main h2 {
    margin: 0 0 10px;
    color: var(--hc-gold);
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
}

.hc-location-main p {
    color: #C2C2C2;
    margin: 0 0 20px;
}

.hc-location-map-frame {
    position: relative;
    display: block;
    width: 100%;
    min-height: 440px;
    height: 440px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(226, 196, 142, 0.18);
    background: var(--hc-bg-dark);
}

.hc-location-map-frame iframe {
    position: relative;
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 440px;
    min-height: 440px;
    border: 0;
    visibility: visible;
    opacity: 1;
    z-index: 5;
}

.hc-location-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hc-location-mini-card {
    background: var(--hc-bg-input);
    border: 1px solid rgba(226, 196, 142, 0.18);
    border-radius: 22px;
    padding: 18px;
}

.hc-location-mini-card span {
    display: block;
    color: var(--hc-gold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    margin-bottom: 8px;
}

.hc-location-mini-card strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
}

.hc-location-mini-card img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    margin-top: 10px;
}

/* -----------------------------------------
   LANDLORD / DASHBOARD PANEL
----------------------------------------- */
.hc-landlord-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.hc-dashboard-create-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    margin: 22px 0 0;
    background: var(--hc-gold);
    color: var(--hc-bg-dark);
    border-radius: 18px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

.hc-dashboard-create-inline:hover {
    background: var(--hc-gold-light);
    color: var(--hc-bg-dark);
}

.hc-dashboard-create-inline span:first-child {
    font-size: 24px;
    line-height: 1;
}

.hc-social-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hc-bg-card);
    border: 1px solid rgba(226, 196, 142, 0.18);
    border-radius: 18px;
    padding: 16px 18px;
    color: var(--hc-gold);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin: 26px 0 18px;
}

.hc-social-toggle-icon {
    font-size: 22px;
    transition: transform var(--hc-transition);
}

.hc-social-grid {
    display: none;
}

.hc-social-grid.active {
    display: grid;
}

.hc-landlord-panel .form-group input:not([type="checkbox"]) {
    min-height: 54px;
    font-size: 16px;
    border-radius: 16px;
}

.hc-landlord-panel .hc-button {
    position: sticky;
    bottom: 12px;
    width: 100%;
    min-height: 58px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    z-index: 50;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

/* -----------------------------------------
   CREAR ANUNCIO FORM
----------------------------------------- */
#hc-listing-form {
    max-width: 920px;
    margin: 0 auto;
}

.hc-antispam-box {
    max-width: 920px;
    margin: 0 auto 22px;
    background: rgba(226, 196, 142, 0.10);
    border: 1px solid rgba(226, 196, 142, 0.24);
    border-radius: 22px;
    padding: 18px;
    color: #fff;
}

.hc-antispam-box strong {
    display: block;
    color: var(--hc-gold);
    margin-bottom: 10px;
    font-size: 17px;
}

.hc-antispam-box p {
    margin: 6px 0;
    color: rgba(255, 255, 255, 0.78);
}

.hc-antispam-box span {
    color: #fff;
    font-weight: 700;
}

.hc-antispam-box small {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.45;
}

#hc-listing-form .form-row {
    grid-template-columns: 1fr;
}

#hc-listing-form .form-group input:not([type="checkbox"]),
#hc-listing-form .form-group select,
#hc-listing-form .form-group textarea {
    min-height: 54px;
    font-size: 16px;
    border-radius: 16px;
}

#hc-listing-form textarea {
    min-height: 150px;
}

#hc-listing-form .photo-dropzone {
    border-radius: 22px;
    padding: 24px 18px;
}

#hc-listing-form .photo-dropzone-label strong {
    display: block;
    color: var(--hc-gold);
    font-size: 17px;
    margin-bottom: 8px;
}

#hc-listing-form .hc-button[type="submit"] {
    position: sticky;
    bottom: 12px;
    width: 100%;
    min-height: 58px;
    border-radius: 18px;
    font-size: 17px;
    z-index: 80;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* -----------------------------------------
   MEDIA QUERIES (Mobile First)
----------------------------------------- */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .dashboard-card {
        flex-direction: column;
    }
    
    .dashboard-card .card-image {
        width: 100%;
        height: 150px;
    }
    
    .hc-search-form {
        flex-direction: column;
    }
    
    .form-group:has(input[type="checkbox"]) {
        min-height: 56px;
        padding: 14px 15px;
        border-radius: 18px;
    }
    
    .form-group input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        max-width: 22px;
        min-height: 22px;
        border-radius: 7px;
    }
    
    .form-group:has(input[type="checkbox"]) label {
        font-size: 15px;
    }
    
    .hc-landlord-header {
        align-items: flex-start;
        flex-direction: column;
    }
    
    .hc-landlord-panel .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .hc-location-preview-card {
        padding: 18px;
        border-radius: 24px;
    }
    
    .hc-location-preview-header {
        flex-direction: column;
    }
    
    .hc-location-preview-map {
        height: 320px;
    }
}

@media (max-width: 900px) {
    .hc-location-section {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    #hc-listing-form .form-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    #hc-listing-form .form-group.full {
        grid-column: 1 / -1;
    }
    
    #hc-listing-form .hc-button[type="submit"] {
        position: relative;
        bottom: auto;
        max-width: 280px;
    }
}

/* -----------------------------------------
   LISTA DE ANUNCIOS EN DASHBOARD (SOLO LINKS)
----------------------------------------- */
.hc-user-listings-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hc-user-listings-links li {
    padding: 12px 0;
    border-bottom: 1px solid var(--hc-gold-rgba);
}

.hc-user-listings-links li:last-child {
    border-bottom: none;
}

.hc-user-listings-links a {
    color: var(--hc-gold);
    text-decoration: none;
    font-size: 16px;
    transition: color var(--hc-transition);
}

.hc-user-listings-links a:hover {
    color: var(--hc-gold-light);
    text-decoration: underline;
}

.listing-id {
    color: #888;
    font-size: 12px;
    margin-left: 10px;
}

@media (max-width: 768px) {
    .hc-user-listings-links li {
        padding: 10px 0;
    }
    
    .hc-user-listings-links a {
        font-size: 15px;
    }
    
    .listing-id {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 11px;
    }
}
/* ── Batch 2/2b: vídeos «+», tipo de anunciante, logo de agencia ── */
.hc-video-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.hc-video-row .hc-video-input{flex:1}
.hc-video-remove{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:8px;background:rgba(255,255,255,.08);color:#e2c48e;cursor:pointer;font-size:15px}
.hc-video-remove:hover{background:#e0245e;color:#fff}
#hc-video-add{margin-top:4px}
.hc-author-type{display:flex;gap:20px;flex-wrap:wrap}
.hc-author-type .hc-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
.hc-author-type input[type=radio]{-webkit-appearance:none!important;appearance:none!important;width:20px!important;height:20px!important;min-width:20px;min-height:20px;padding:0!important;margin:0!important;flex:0 0 auto;border-radius:50%!important;border:2px solid #E2C48E!important;background:#141018!important;cursor:pointer;position:relative;box-sizing:border-box!important}
.hc-author-type input[type=radio]:checked::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#E2C48E}
.agency-logo-preview{margin-top:10px}
.agency-logo-preview img{max-height:80px;border-radius:8px}
.hc-video-embed{margin-bottom:14px}
.hc-video-embed iframe{border-radius:12px;border:0;width:100%;min-height:315px}

/* ── Batch 3: visibilidad de contacto ── */
.hc-masked{letter-spacing:1px;font-weight:600;color:#E2C48E}
.hc-reg-link{color:#E2C48E;text-decoration:underline;font-size:.9em}
.hc-reg-link:hover{color:#f0d4a8}
.hc-contact-note{background:rgba(226,196,142,.08);border:1px solid rgba(226,196,142,.25);border-radius:10px;padding:10px 12px;color:#D0D0D0}

/* ── Batch 4: supersearch de cabecera (palabras + ciudad + tipo + fecha) ── */
.hc-supersearch{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;max-width:1100px;margin:0 auto;padding:8px 12px}
.hc-ss-field{background:#141018;border:1px solid rgba(226,196,142,.35);border-radius:10px;color:#F5F5F5;padding:10px 12px;font-size:14px;height:42px;box-sizing:border-box;outline:none}
.hc-ss-field:focus{border-color:#E2C48E}
.hc-ss-field::placeholder{color:#9a938a}
.hc-ss-kw{flex:2 1 220px;min-width:160px}
.hc-ss-city{flex:1 1 120px;min-width:110px}
.hc-ss-select{-webkit-appearance:none;appearance:none;flex:1 1 150px;min-width:130px;cursor:pointer;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E2C48E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.hc-ss-select option{background:#141018;color:#F5F5F5}
.hc-ss-btn{flex:0 0 auto;height:42px;padding:0 24px;border:none;border-radius:999px;background:linear-gradient(135deg,#EED2A0,#D9AF66);color:#1a1f24;font-weight:700;cursor:pointer;transition:.2s;font-size:14px}
.hc-ss-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:640px){
    /* Móvil: cada campo en su fila (stack limpio) — antes se envolvían con anchos
       distintos y quedaba «abracadabra». */
    .hc-supersearch{flex-direction:column;align-items:stretch;gap:8px;padding:0}
    .hc-supersearch .hc-ss-field,
    .hc-supersearch .hc-ss-btn{flex:0 0 auto;width:100%;min-width:0;height:44px;font-size:14px}
}

/* ── Características / requisitos / zonas comunes (formulario) ── */
.form-group.hc-amen-group{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important}
.hc-amenities-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px 18px;width:100%;margin-top:8px}
.hc-chk{display:flex;align-items:center;gap:9px;color:#F5F5F5;font-weight:500;font-size:14px;cursor:pointer;line-height:1.3}
.hc-chk i{color:#E2C48E;width:18px;text-align:center;flex:0 0 auto}

/* ── Galería: foto DESTACADA (escaparate → Telegram) ── */
#photo-preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.hc-photo-thumb{position:relative;width:120px;height:120px;border-radius:12px;overflow:hidden;border:2px solid transparent}
.hc-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hc-photo-thumb.is-cover{border-color:#E2C48E;box-shadow:0 0 0 3px rgba(226,196,142,.35)}
.hc-cover-btn{position:absolute;left:0;right:0;bottom:0;border:0;background:rgba(11,16,20,.72);color:#E2C48E;font-size:11px;font-weight:700;padding:5px 0;cursor:pointer}
.hc-photo-thumb.is-cover .hc-cover-btn{background:#E2C48E;color:#0B1014}

/* ── Ficha: características y servicios ── */
.hc-amen-card .hc-amen-block{margin-bottom:14px}
.hc-amen-card .hc-amen-block h4{margin:0 0 8px;color:#E2C48E;font-size:14px}
.hc-amen-chips{display:flex;flex-wrap:wrap;gap:8px}
.hc-amen-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(226,196,142,.10);border:1px solid rgba(226,196,142,.28);border-radius:999px;padding:6px 12px;font-size:13px;color:#F5F5F5}
.hc-amen-chip i{color:#E2C48E}

/* ── Estrellas-premio (kabinet) ── */
.hc-star-badge{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#1a1f24,#111820);border:1px solid rgba(226,196,142,.30);border-radius:16px;padding:14px 20px;margin-bottom:18px}
.hc-star-row{font-size:22px;letter-spacing:3px;white-space:nowrap}
.hc-star{color:#3a3a3a}
.hc-star.is-on{color:#E2C48E;filter:drop-shadow(0 0 4px rgba(226,196,142,.45))}
.hc-star-text{color:#F5F5F5;font-size:14px}
.hc-star-hint{display:block;color:#D0D0D0;font-size:12px;margin-top:3px}

/* ── Referidos (kabinet) ── */
.hc-referral-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#111820;border:1px solid rgba(226,196,142,.25);border-radius:14px;padding:12px 18px;margin-bottom:18px}
.hc-referral-box .hc-ref-left{color:#F5F5F5;font-size:14px}
.hc-referral-box .hc-ref-left i,.hc-badge i{color:#E2C48E}
.hc-ref-right{display:flex;gap:8px;align-items:center}
.hc-ref-link{background:#050505;border:1px solid rgba(226,196,142,.3);border-radius:8px;color:#F5F5F5;padding:8px 10px;min-width:220px;font-size:13px}
.hc-ref-copy{background:#E2C48E;color:#0B1014;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
.hc-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(226,196,142,.12);border:1px solid rgba(226,196,142,.3);border-radius:999px;padding:3px 10px;font-size:12px;color:#E2C48E;margin-left:6px}
/* ── Leaderboard ── */
.hc-leaderboard{background:#111820;border:1px solid rgba(226,196,142,.25);border-radius:16px;padding:16px 20px;margin:18px 0}
.hc-leaderboard h3{color:#E2C48E;margin:0 0 12px}
.hc-lb-list{list-style:none;margin:0;padding:0}
.hc-lb-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#F5F5F5}
.hc-lb-item.is-top{color:#E2C48E;font-weight:700}
.hc-lb-crown{color:#E2C48E;font-size:18px;width:26px;text-align:center}
.hc-lb-rank{width:26px;text-align:center;color:#9a938a}
.hc-lb-name{flex:1}
.hc-lb-count{color:#D0D0D0;font-size:13px}
/* ── Destacado ── */
.hc-featured-tag{display:inline-flex;align-items:center;gap:6px;background:#E2C48E;color:#0B1014;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700;vertical-align:middle;margin-left:8px}
/* ── Franja promo (marquee) bajo el header ── */
.hc-promo-marquee{overflow:hidden;background:linear-gradient(90deg,#0B1014,#141820);border-top:1px solid rgba(226,196,142,.25);border-bottom:1px solid rgba(226,196,142,.25)}
.hc-promo-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:hcPromoScroll 30s linear infinite}
.hc-promo-track span{padding:9px 0;color:#E2C48E;font-weight:600;font-size:14px}
.hc-promo-track i{color:#E2C48E;margin:0 5px}
.hc-promo-marquee:hover .hc-promo-track{animation-play-state:paused}
@keyframes hcPromoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hc-promo-track{animation:none}}

/* ── Botón "Cómo ganar dinero" (header) ── */
.hcpc-earn-cta{display:flex;justify-content:center;padding:10px 16px 0}
.hc-earn-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#EED2A0,#D9AF66);color:#1a1f24;font-weight:800;text-decoration:none;padding:11px 24px;border-radius:999px;box-shadow:0 6px 18px rgba(226,196,142,.35);transition:.2s}
.hc-earn-btn:hover{transform:translateY(-2px);filter:brightness(1.06);color:#1a1f24}
.hc-earn-btn i{color:#1a1f24}
/* ── Página "Cómo ganar dinero" ── */
.hc-earn-guide{max-width:1000px;margin:0 auto}
.hc-earn-guide h2{color:#E2C48E;display:flex;align-items:center;gap:10px}
.hc-earn-lead{color:#D0D0D0;font-size:16px;margin-bottom:22px}
.hc-earn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:32px}
.hc-earn-card{background:#111820;border:1px solid rgba(226,196,142,.25);border-radius:16px;padding:20px 22px}
.hc-earn-card.is-highlight{border-color:#E2C48E;box-shadow:0 0 0 2px rgba(226,196,142,.25)}
.hc-earn-card > i{font-size:26px;color:#E2C48E;margin-bottom:10px;display:block}
.hc-earn-card h3{color:#E2C48E;margin:0 0 8px;font-size:18px}
.hc-earn-card p{color:#F5F5F5;font-size:14px;line-height:1.55;margin:0}
.hc-earn-collab{background:linear-gradient(135deg,#1a1f24,#111820);border:1px solid rgba(226,196,142,.3);border-radius:18px;padding:26px 28px;text-align:center}
.hc-earn-collab p{color:#F5F5F5;max-width:760px;margin:12px auto 20px;line-height:1.6}
.hc-earn-cta-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#EED2A0,#D9AF66);color:#1a1f24;font-weight:800;text-decoration:none;padding:13px 30px;border-radius:999px}
.hc-earn-cta-btn:hover{filter:brightness(1.06);color:#1a1f24}

/* ── Calculadora de ganancias ── */
.hc-earn-calc{background:#111820;border:1px solid rgba(226,196,142,.25);border-radius:16px;padding:22px 24px;margin-bottom:24px}
.hc-earn-calc h3{color:#E2C48E;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.hc-calc-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hc-calc-row label{color:#F5F5F5;font-size:14px}
.hc-calc-row input{background:#050505;border:1px solid rgba(226,196,142,.35);border-radius:10px;color:#fff;padding:10px 14px;width:120px;font-size:16px}
#hc-calc-btn{background:linear-gradient(135deg,#EED2A0,#D9AF66);color:#1a1f24;border:0;border-radius:999px;padding:10px 22px;font-weight:800;cursor:pointer}
.hc-calc-result{margin-top:16px;text-align:center}
.hc-calc-big{font-size:40px;font-weight:900;color:#E2C48E;line-height:1.1}
.hc-calc-sub{color:#D0D0D0;font-size:14px;margin-top:4px}
.hc-calc-note{color:#9a938a;font-size:12px;margin-top:12px}

/* ── Radio dorado (clase, ya no inline) ── */
.hc-radio-input{-webkit-appearance:none!important;appearance:none!important;width:22px!important;height:22px!important;min-width:22px!important;max-width:22px!important;min-height:22px!important;max-height:22px!important;padding:0!important;margin:0 6px 0 0!important;border:2px solid #E2C48E!important;border-radius:50%!important;background:#141018!important;box-sizing:border-box!important;position:relative;flex:0 0 auto;vertical-align:middle;cursor:pointer}
.hc-radio-input:checked::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#E2C48E}

/* ── Bloques del formulario (orla dorada + dymok en escritorio) ── */
.hc-block{position:relative;border:1.5px solid rgba(226,196,142,.45);border-radius:18px;padding:22px 24px;margin:0 0 22px;overflow:hidden;background:rgba(17,24,32,.55)}
.hc-block-legend{padding:0 12px;color:#E2C48E;font-weight:800;font-size:16px;display:flex;align-items:center;gap:9px}
.hc-block-legend i{color:#E2C48E}
.hc-block-note{color:#9a938a;font-size:12px;margin:0 0 12px;position:relative;z-index:1}
.hc-block .form-row{position:relative;z-index:1}
@media(min-width:769px){
  .hc-block::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:radial-gradient(40% 32% at 25% 25%,rgba(226,196,142,.10),transparent 70%),radial-gradient(38% 30% at 78% 72%,rgba(226,196,142,.07),transparent 72%);filter:blur(32px);animation:hcBlockSmoke 22s ease-in-out infinite alternate}
}
@keyframes hcBlockSmoke{0%{transform:translate3d(-4%,-3%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.12)}}
@media(max-width:768px){
  .hc-block{padding:15px;margin-bottom:14px;background:transparent;border-width:1px;border-radius:14px}
  .hc-block::before{display:none}
}
@media(prefers-reduced-motion:reduce){.hc-block::before{animation:none}}

/* ── Botón ESTRELLA giratoria con chispas (header, derecha) ── */
.hcpc-hdr-nav{position:relative}
.hc-star-cta{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:9px;text-decoration:none;z-index:3}
.hc-star-core{position:relative;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#F8E3B8,#D9AF66);box-shadow:0 0 14px rgba(226,196,142,.6);animation:hcStarSpin 9s linear infinite}
.hc-star-core i{color:#1a1f24;font-size:18px}
.hc-star-cta-label{color:#E2C48E;font-weight:800;font-size:14px;white-space:nowrap}
.hc-star-spark{position:absolute;left:18px;top:50%;width:6px;height:6px;border-radius:50%;background:#F8E3B8;box-shadow:0 0 6px #E2C48E,0 0 10px #E2C48E;opacity:0;pointer-events:none}
.hc-s1{--dx:30px;--dy:-18px;animation:hcSpark 2.6s ease-out 0s infinite}
.hc-s2{--dx:32px;--dy:16px;animation:hcSpark 2.6s ease-out .65s infinite}
.hc-s3{--dx:-10px;--dy:-28px;animation:hcSpark 2.6s ease-out 1.3s infinite}
.hc-s4{--dx:-8px;--dy:26px;animation:hcSpark 2.6s ease-out 1.95s infinite}
@keyframes hcStarSpin{to{transform:rotate(360deg)}}
@keyframes hcSpark{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@media(max-width:768px){.hc-star-cta{position:static;transform:none;margin:6px auto 0;justify-content:center}.hc-star-cta-label{display:none}}
@media(prefers-reduced-motion:reduce){.hc-star-core{animation:none}.hc-star-spark{display:none}}

/* ── Banner de ganador (para TODOS) ── */
.hc-winner-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:99999;max-width:640px;width:calc(100% - 24px)}
.hc-winner-inner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#1a1f24,#0B1014);border:1.5px solid #E2C48E;border-radius:16px;padding:14px 18px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 3px rgba(226,196,142,.15)}
.hc-winner-emoji{font-size:30px}
.hc-winner-text{flex:1;color:#F5F5F5;font-size:14px;line-height:1.35;display:flex;flex-direction:column;gap:2px}
.hc-winner-text strong{color:#E2C48E;font-size:16px}
.hc-winner-btn{flex:0 0 auto;background:linear-gradient(135deg,#EED2A0,#D9AF66);color:#1a1f24;font-weight:800;text-decoration:none;padding:10px 18px;border-radius:999px;white-space:nowrap}
.hc-winner-close{flex:0 0 auto;background:transparent;border:0;color:#9a938a;font-size:24px;cursor:pointer;line-height:1}
@media(max-width:560px){.hc-winner-inner{flex-wrap:wrap}.hc-winner-btn{width:100%;text-align:center}}

/* ── Banner de intención de salida (fotos reales en arco) ── */
.hc-exit{position:fixed;inset:0;z-index:100000;display:none}
.hc-exit.is-open{display:block}
.hc-exit-backdrop{position:absolute;inset:0;background:rgba(6,9,12,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hc-exit-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.hc-exit-stage{position:relative;width:min(760px,94vw);height:min(320px,42vh);margin-bottom:6px}
.hc-ec{position:absolute;width:78px;height:108px;border-radius:12px;text-decoration:none;perspective:800px;will-change:transform,opacity;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease,left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1)}
.hc-ec-flip{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.hc-ec:hover .hc-ec-flip{transform:rotateY(180deg)}
.hc-ec-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.5);border:1px solid rgba(226,196,142,.25)}
.hc-ec-front{background-size:cover;background-position:center}
.hc-ec-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6))}
.hc-ec-tag{position:absolute;left:6px;right:6px;bottom:5px;z-index:2;color:#fff;font-size:10px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.hc-ec-tag small{display:block;font-weight:600;font-size:8.5px;color:#e0dccf}
.hc-ec-back{background:linear-gradient(135deg,#1a1f24,#0B1014);color:#E2C48E;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;transform:rotateY(180deg);text-align:center}
.hc-ec-back b{color:#fff}
.hc-exit-copy{position:relative;z-index:5;text-align:center;max-width:560px}
.hc-exit-kicker{color:#E2C48E;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.hc-exit-copy h2{color:#fff;font-family:Georgia,serif;font-weight:400;font-size:clamp(24px,4vw,38px);margin:.25em 0 .15em}
.hc-exit-copy h2 span{color:#E2C48E}
.hc-exit-copy p{color:#cfcac2;font-size:14px;margin:0 0 16px}
.hc-exit-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#EED2A0,#D9AF66);color:#0B1014;font-weight:800;text-decoration:none;padding:13px 28px;border-radius:999px;box-shadow:0 10px 28px rgba(226,196,142,.4)}
.hc-exit-close{position:absolute;top:16px;right:20px;z-index:10;background:transparent;border:0;color:#cfcac2;font-size:34px;line-height:1;cursor:pointer}
@media(max-width:600px){
    .hc-ec{width:60px;height:84px}
    /* overflow:hidden es el cinturon: si algun dia el arco vuelve a medirse
       mal, las fotos se recortan dentro del escenario en vez de taparlo todo. */
    .hc-exit-stage{height:32vh;overflow:hidden}
    /* El texto y el boton, siempre alcanzables: si no caben, se desliza. */
    .hc-exit-inner{padding:14px;overflow:auto}
    .hc-exit-copy p{font-size:12px}
    .hc-exit-close{top:8px;right:12px}
}
@media(prefers-reduced-motion:reduce){.hc-ec{transition:opacity .4s ease}.hc-ec-flip{transition:none}}