/* =========================================
   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}
/* HC_CINTA_ENLACES_V1 (2026-08-23): cada frase es su propio enlace (la eSIM a
   sus tarifas, el vale de Uber a los hoteles…). Heredan el oro de la cinta y no
   se subrayan hasta que el puntero se posa — y para entonces la animación ya
   está en pausa por la regla de arriba, así que el blanco no se escapa. */
.hc-promo-track a{color:inherit;text-decoration:none}
.hc-promo-track a:hover,.hc-promo-track a:focus-visible{text-decoration:underline}
@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}
/* HC_EXIT_MOBILE_FIT_V1 (2026-08-05) — que quepa ENTERO en el teléfono.
   El cartel se salía de la pantalla: el visitante veía el abanico de fotos pero
   no el titular ni el botón, que es lo único que importa. Ahora las fotos ceden
   sitio al mensaje: escenario más bajo, tarjetas más pequeñas y tipografía
   contenida. Con `dvh` en vez de `vh` la barra del navegador del móvil deja de
   robar el trozo de abajo — justo donde está el botón. */
@media(max-width:600px){
    .hc-ec{width:52px;height:72px}
    /* 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{width:96vw;height:24vh;max-height:190px;margin-bottom:2px;overflow:hidden}
    /* El texto y el boton, siempre alcanzables: si no caben, se desliza. */
    .hc-exit-inner{padding:12px;overflow:auto;justify-content:flex-start;padding-top:44px}
    .hc-exit-copy{max-width:100%}
    .hc-exit-copy h2{font-size:clamp(19px,5.4vw,26px);margin:.2em 0 .1em}
    .hc-exit-kicker{font-size:11px}
    .hc-exit-copy p{font-size:12.5px;margin:0 0 12px}
    .hc-exit-cta{padding:12px 22px;font-size:14px}
    .hc-exit-close{top:8px;right:12px;font-size:30px}
}
/* Pantallas bajas (móvil apaisado, teléfonos pequeños): las fotos son adorno,
   el botón no. Si hay poca altura, el abanico se va y queda el mensaje. */
@media(max-height:520px){
    .hc-exit-stage{display:none}
    .hc-exit-inner{justify-content:center;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){.hc-ec{transition:opacity .4s ease}.hc-ec-flip{transition:none}}


/* Dirección en UNA línea (HC_DIRECCION_UNA_LINEA_V1, 2026-08-25). */
/* El campo se marca en rojo cuando se intenta guardar sin ciudad. */
#listing-street.hc-addr-error{border-color:#E05B5B!important;box-shadow:0 0 0 3px rgba(224,91,91,.18)}
:root {
    --hcp-primary: #E2C48E;
    --hcp-primary-hover: #F8D189;
    --hcp-dark: #0B1014;
    --hcp-black: #000000;
    --hcp-panel: #11181E;
    --hcp-card: #161D24;
    --hcp-text: #C2C2C2;
    --hcp-text-light: #FFFFFF;
    --hcp-text-muted: #999999;
    --hcp-border: rgba(226, 196, 142, 0.22);
    --hcp-success: #4CAF50;
    --hcp-danger: #DC3545;
    --hcp-radius: 18px;
    --hcp-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--hcp-dark);
    color: var(--hcp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: var(--hcp-primary);
    text-decoration: none;
}

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

h1,
h2,
h3 {
    color: var(--hcp-primary);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.1;
}

.hcp-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.hcp-site-header {
    background: var(--hcp-black);
    border-bottom: 1px solid var(--hcp-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.hcp-header-inner {
    width: min(1440px, calc(100% - 24px));
    min-height: 76px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
}

.hcp-brand {
    color: var(--hcp-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.hcp-main-nav {
    justify-self: end;
}

.hcp-menu,
.hcp-footer-menu {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hcp-menu a,
.hcp-footer-menu a {
    color: var(--hcp-text-light);
    font-size: 16px;
}

.hcp-menu a:hover,
.hcp-footer-menu a:hover {
    color: var(--hcp-primary);
}

.hcp-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.hcp-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: var(--hcp-primary);
}

.hcp-site-main {
    min-height: calc(100vh - 150px);
}

.hcp-hero {
    padding: 86px 0 58px;
    background:
        radial-gradient(circle at top right, rgba(226, 196, 142, 0.14), transparent 34%),
        linear-gradient(180deg, #0B1014 0%, #050607 100%);
    border-bottom: 1px solid var(--hcp-border);
}

.hcp-kicker {
    margin: 0 0 12px;
    color: var(--hcp-primary);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 13px;
}

.hcp-hero h1 {
    max-width: 760px;
    margin: 0 0 16px;
    font-size: clamp(42px, 7vw, 82px);
}

.hcp-hero-text {
    max-width: 620px;
    margin: 0 0 28px;
    color: var(--hcp-text);
    font-size: 19px;
    line-height: 1.6;
}

.hcp-btn,
button.hcp-btn,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    background: var(--hcp-primary);
    color: var(--hcp-dark);
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.hcp-btn:hover,
button.hcp-btn:hover,
input[type="submit"]:hover {
    background: var(--hcp-primary-hover);
    color: var(--hcp-dark);
}

.hcp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 42px 0;
}

.hcp-card {
    background: var(--hcp-card);
    border: 1px solid var(--hcp-border);
    border-radius: var(--hcp-radius);
    padding: 24px;
    box-shadow: var(--hcp-shadow);
}

.hcp-card h2 {
    margin-top: 0;
}

.hcp-page {
    padding: 56px 0;
}

.hcp-content {
    background: var(--hcp-panel);
    border: 1px solid var(--hcp-border);
    border-radius: var(--hcp-radius);
    padding: 28px;
}

.hcp-content table {
    width: 100%;
    border-collapse: collapse;
}

.hcp-content th,
.hcp-content td {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}

.hcp-content th {
    color: var(--hcp-primary);
    font-weight: 700;
}

.hcp-content input,
.hcp-content textarea,
.hcp-content select {
    width: 100%;
    max-width: 520px;
    padding: 13px 14px;
    background: #0B1014;
    color: var(--hcp-text-light);
    border: 1px solid var(--hcp-border);
    border-radius: 12px;
}

.hcp-site-footer {
    background: var(--hcp-black);
    border-top: 1px solid var(--hcp-border);
    padding: 22px 0;
}

.hcp-footer-inner {
    width: min(1440px, calc(100% - 24px));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.hcp-footer-brand {
    color: var(--hcp-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

@media (max-width: 900px) {
    .hcp-header-inner {
        grid-template-columns: 1fr auto;
    }

    .hcp-menu-toggle {
        display: block;
    }

    .hcp-main-nav {
        display: none;
        grid-column: 1 / -1;
        justify-self: stretch;
        padding-bottom: 16px;
    }

    body.hcp-menu-open .hcp-main-nav {
        display: block;
    }

    .hcp-menu {
        flex-direction: column;
        gap: 0;
    }

    .hcp-menu a {
        display: block;
        padding: 14px 0;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

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

    .hcp-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hcp-footer-menu {
        flex-direction: column;
        gap: 10px;
    }
}
.hcp-footer-menu {
    flex-direction: column;
    gap: 10px;
}

/* =========================================
   ESTILOS PARA CONTENIDO DE PÁGINA
   ========================================= */

.hcp-content h1 {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--hcp-primary);
}

.hcp-content h2 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--hcp-primary);
}

.hcp-content h3 {
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--hcp-primary);
}

@media (max-width: 768px) {
    .hcp-content h1 {
        font-size: 22px;
    }
    
    .hcp-content h2 {
        font-size: 19px;
    }
    
    .hcp-content h3 {
        font-size: 17px;
    }
}/* HotelsCasa — Panel de búsqueda el socio (estilo de marca: negro + oro #E2C48E)
   Usa variables de brand.css con fallback por si la página no las carga. */
.lc-exp{
    position:relative;z-index:1;
    max-width:1080px;margin:18px auto;
    background:var(--card-bg, #1a1f24);
    border:1px solid var(--border-light, rgba(226,196,142,.25));
    border-radius:var(--border-radius-lg, 16px);
    box-shadow:0 12px 34px rgba(0,0,0,.45);
    /* overflow visible: el desplegable de aeropuertos no debe recortarse */
    overflow:visible;
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:var(--text, #F5F5F5);
}
/* La fila de pestañas conserva las esquinas redondeadas superiores de la tarjeta */
.lc-exp-tabs{border-top-left-radius:var(--border-radius-lg, 16px);border-top-right-radius:var(--border-radius-lg, 16px);}
.lc-exp-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
    border-bottom:1px solid var(--border-light, rgba(226,196,142,.2));padding:12px 12px 0;}
.lc-exp-tab{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;
    padding:8px 14px 12px;cursor:pointer;color:var(--text-muted, #D0D0D0);font-size:.86rem;font-weight:600;
    border-bottom:3px solid transparent;transition:color .2s,border-color .2s;
    perspective:600px;}

/* Icono en una pastilla redonda con relieve 3D (degradado + luces/sombras
   internas) — funciona igual en escritorio y móvil. */
.lc-exp-tab-ic{
    font-size:1.5rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    width:50px;height:50px;border-radius:50%;
    background:linear-gradient(160deg,#3a4147,#1b2024);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.18),
        inset 0 -3px 6px rgba(0,0,0,.55),
        0 6px 14px rgba(0,0,0,.45);
    transition:transform .25s ease, box-shadow .25s ease;
    transform-style:preserve-3d;will-change:transform;
}
.lc-exp-tab:hover{color:var(--primary, #E2C48E);}
.lc-exp-tab:hover .lc-exp-tab-ic{
    transform:translateY(-2px) rotateX(12deg);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.22),
        inset 0 -3px 6px rgba(0,0,0,.55),
        0 10px 22px rgba(0,0,0,.5);
}
.lc-exp-tab.is-active{color:var(--primary, #E2C48E);border-bottom-color:var(--primary, #E2C48E);}
.lc-exp-tab.is-active .lc-exp-tab-ic{
    background:linear-gradient(160deg,#4a3f24,#2a2410);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.25),
        inset 0 -3px 6px rgba(0,0,0,.5),
        0 0 0 2px var(--primary, #E2C48E),
        0 8px 18px rgba(226,196,142,.35);
}

/* Clic: gira rápido y desacelera atenuándose (la añade el JS, se quita al terminar) */
@keyframes lcExpIconSpin{
    0%{transform:rotate(0) scale(1);opacity:1;}
    12%{transform:rotate(160deg) scale(1.16);opacity:1;}
    60%{opacity:.55;}
    100%{transform:rotate(720deg) scale(1);opacity:1;}
}
.lc-exp-tab-ic.is-spinning{animation:lcExpIconSpin 1s cubic-bezier(.12,.8,.2,1) both;}

@media(prefers-reduced-motion:reduce){
    .lc-exp-tab-ic.is-spinning{animation:none;}
}

.lc-exp-panes{padding:16px;}
.lc-exp-pane{display:none;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.lc-exp-pane.is-active{display:flex;}
/* Pestaña «Apartamentos» = nuestro buscador interno → bloque completo (no flex). */
.lc-exp-pane--apart.is-active{display:block;}
.lc-exp-field{position:relative;display:flex;flex-direction:column;gap:4px;flex:0 0 auto;min-width:130px;}
.lc-exp-field.lc-exp-grow{flex:1 1 240px;min-width:200px;}
.lc-exp-field label{font-size:.72rem;font-weight:700;color:var(--text-muted, #D0D0D0);
    text-transform:uppercase;letter-spacing:.03em;}
.lc-exp-field input,.lc-exp-field select{
    height:46px;padding:0 12px;border:1px solid var(--border, #2a2a2a);
    border-radius:var(--border-radius-sm, 10px);font-size:.95rem;
    background:var(--card-bg-deep, #293133);color:var(--text, #F5F5F5);
    box-sizing:border-box;color-scheme:dark;
}
.lc-exp-field input::placeholder{color:var(--text-muted, #D0D0D0);opacity:.8;}
.lc-exp-field input:focus,.lc-exp-field select:focus{
    outline:none;border-color:var(--primary, #E2C48E);
    box-shadow:0 0 0 3px var(--primary-light, rgba(226,196,142,.2));}
.lc-exp-go{height:46px;align-self:flex-end;padding:0 30px;border:none;border-radius:40px;
    background:var(--primary, #E2C48E);color:var(--dark, #000);
    font-size:.95rem;font-weight:800;cursor:pointer;flex:0 0 auto;transition:all .25s;}
.lc-exp-go:hover{background:var(--primary-hover, #F8D189);transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.35);}
/* Botón de búsqueda como lupa: solo el icono visible; «Buscar» queda para lectores de pantalla. */
.lc-exp-go .fa-magnifying-glass,.lc-exp-go .lc-ic-lupa{font-size:1.05rem;line-height:1;}
.lc-exp-go .lc-ic-lupa{width:1.15em;height:1.15em;flex:0 0 auto;}
.lc-exp-go-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.lc-exp-disclaimer{margin:0;padding:0 16px 14px;font-size:.72rem;color:var(--text-muted, #D0D0D0);opacity:.75;}

/* Autocomplete — montado en <body> con position:fixed para no ser recortado
   por ningún contenedor de la página (la posición la fija el JS). */
.lc-exp-ac{position:fixed;z-index:2147483000;
    background:var(--card-bg-deep, #293133);border:1px solid var(--border-light, rgba(226,196,142,.25));
    border-radius:10px;max-height:280px;overflow-y:auto;box-shadow:0 10px 26px rgba(0,0,0,.5);
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
.lc-exp-ac-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:.9rem;
    color:var(--text, #F5F5F5);}
.lc-exp-ac-item:hover,.lc-exp-ac-item.is-active{background:var(--primary-light, rgba(226,196,142,.2));}
.lc-exp-ac-code{flex:0 0 auto;width:42px;font-weight:800;color:var(--primary, #E2C48E);font-variant-numeric:tabular-nums;}
.lc-exp-ac-city{color:var(--text-secondary, #E0E0E0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media(max-width:760px){
    .lc-exp-pane{flex-direction:column;align-items:stretch;}
    .lc-exp-field,.lc-exp-field.lc-exp-grow{min-width:0;width:100%;}
    .lc-exp-go{width:100%;border-radius:12px;}

    /* Móvil: solo los 5 iconos en una fila, sin texto. El estado activo lo
       marca el aro dorado del propio icono (no la línea inferior). */
    .lc-exp-tabs{flex-wrap:nowrap;gap:0;justify-content:space-between;padding:12px 6px 10px;}
    .lc-exp-tab{flex:1 1 0;padding:4px 2px 6px;border-bottom:none;gap:0;}
    .lc-exp-tab.is-active{border-bottom-color:transparent;}
    .lc-exp-tab-lbl{display:none;}
    .lc-exp-tab-ic{width:48px;height:48px;font-size:1.5rem;}
}


/* LC_EXP_STEPS_V1 — recorrido por pasos (solo en el movil; el guion los
   oculta en escritorio).

   La flecha va DENTRO del campo, pegada al borde derecho, sin pastilla ni
   fondo: exactamente el mismo gesto que la lupa dentro de la casilla de
   busqueda de la cabecera. Como boton redondo aparte se comia una fila entera
   del formulario — en un telefono eso es media pantalla — para no decir nada
   que el propio campo no dijera ya. */
.lc-exp-field.lc-exp-inflecha {
    position: relative;
}

/* Sitio para la flecha: sin esto el texto largo de una ciudad le pasa por
   debajo y no se lee ni una cosa ni la otra.

   El `.lc-exp` de delante no es adorno: la barra trae su propio
   `.lc-exp .lc-exp-field input{padding:0 8px}` en un <style> dentro del
   cuerpo de la pagina. A igualdad de peso gana el que va despues, y ese va
   despues — sin este selector mas concreto el hueco no se abriria. */
.lc-exp .lc-exp-field.lc-exp-inflecha input,
.lc-exp .lc-exp-field.lc-exp-inflecha select,
.lc-exp-field.lc-exp-inflecha input,
.lc-exp-field.lc-exp-inflecha select {
    padding-right: 36px;
}

.lc-exp-next {
    position: absolute;
    right: 2px;
    bottom: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #E2C48E;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.lc-exp-next:hover {
    color: #F8D189;
}

.lc-exp-back {
    background: none;
    border: 0;
    color: #E2C48E;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    align-self: flex-start;
}
/**
 * HC_RAIL_V2 (2026-08-20) — la columna de búsqueda y la tira de hoteles.
 *
 * ── LO QUE CAMBIÓ RESPECTO A V1, Y POR QUÉ ──────────────────────────────────
 * V1 nació con una idea: una sola fórmula de ancho —clamp(112px, 30vw, 300px)—
 * y la MISMA rejilla de dos columnas en el teléfono y en el escritorio, con la
 * columna en miniatura y a la izquierda, para que el buscador se leyera primero
 * en el móvil.
 *
 * Visto en pantalla, no se sostiene. A 117 px de columna:
 *   · el desplegable de ciudad enseña «Elige ciuda» — cortado a media palabra;
 *   · los títulos de las tarjetas del contenido salen partidos («Alquile r…»);
 *   · y al contenido, que es a lo que la gente viene, no le queda ancho.
 *
 * Orden del dueño: el rail va a la DERECHA y en el móvil BAJA debajo del
 * contenido. La colocación la deciden ahora las hojas de cada pantalla —el
 * tablón, el catálogo, las dos fichas, «Mis reservas» y el tema—, cada una con
 * su propio punto de ruptura, porque cada una tiene un ancho útil distinto.
 * Aquí dentro ya solo vive el ASPECTO del rail, no dónde se coloca.
 *
 * ── TAMAÑO: SIGUE MANDANDO LA COLUMNA, NO LA VENTANA ────────────────────────
 * El `@container` se queda, y es lo mejor que dejó V1: la letra y las fotos se
 * miden contra el ancho de la PROPIA columna. Así el mismo rail se ve bien con
 * 240 px en la ficha, con 300 px en el catálogo y a pantalla completa cuando en
 * el móvil baja debajo del contenido — sin una sola media query.
 *
 * ── PALETA: OSCURA, COMO EL SITIO ───────────────────────────────────────────
 * V1 pintaba tarjetas blancas y títulos en tinta (#0B1014). El sitio es oscuro:
 * el título «En Valencia» salía NEGRO SOBRE FONDO OSCURO, ilegible. Ahora usa
 * la paleta de los bloques vecinos —`.hc-aside-lc` del tablón y `.lc-feed-hc`
 * del catálogo—: fondo #111820, borde dorado tenue, títulos en #E2C48E y texto
 * en #EAE6DD.
 *
 * ⚠️ Regla para el futuro: nada de `color` sin `background` en el mismo bloque.
 * Un color de texto heredando el fondo del tema es exactamente cómo se llegó al
 * título negro sobre negro.
 */

.hc-rail,
.hc-franja {
	--hc-rail-tinta: #0B1014;
	--hc-rail-fondo: #111820;
	--hc-rail-oro: #E2C48E;
	--hc-rail-texto: #EAE6DD;
	--hc-rail-apagado: #9aa3ad;
	--hc-rail-borde: rgba(226, 196, 142, .28);
}

/* ── La columna ─────────────────────────────────────────────────────────── */

/*
 * `width: 100%` Y NADA MÁS. Ni `flex-basis`, ni un ancho fijo, ni `sticky`.
 *
 * El rail nunca se coloca solo: cae dentro de una columna que YA tiene su ancho
 * y su `position: sticky` —el lateral del catálogo, el del tablón, el de las
 * dos fichas, el de «Mis reservas», el de las páginas normales del tema—.
 *
 * ⚠️ Aquí hubo un `flex: 0 0 var(--hc-rail-w)` pensado para el caso de caer
 * suelto en una fila flex. Es una trampa: TODOS esos laterales son
 * `flex-direction: column`, y en una columna flex el `flex-basis` no es el
 * ancho sino el ALTO — el rail habría quedado clavado a 300 px de alto, con los
 * hoteles desbordando por debajo.
 */
.hc-rail {
	container-type: inline-size;
	container-name: hcrail;
	width: 100%;
	min-width: 0;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
}

.hc-rail *,
.hc-franja * {
	box-sizing: border-box;
}

.hc-rail-titulo {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .2px;
	/* Dorado, no tinta: este título cae sobre el fondo OSCURO de la página, no
	   dentro de una caja clara. Es el fallo que corrige V2. */
	color: var(--hc-rail-oro);
	overflow-wrap: anywhere;
}

/* ── Buscador por pasos ─────────────────────────────────────────────────── */

.hc-rail-buscar {
	background: var(--hc-rail-tinta);
	color: var(--hc-rail-texto);
	border: 1px solid var(--hc-rail-borde);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* Las tres marcas de paso. Decorativas: el estado real lo dan los campos. */
.hc-rail-marcas {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-rail-marcas li {
	height: 3px;
	flex: 1;
	border-radius: 2px;
	background: rgba(244, 241, 234, .22);
	transition: background .15s ease;
}

.hc-rail-marcas li.on {
	background: var(--hc-rail-oro);
}

.hc-rail-paso {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hc-rail-paso[hidden] {
	display: none;
}

.hc-rail-paso label {
	font-size: 12px;
	line-height: 1.2;
	color: var(--hc-rail-apagado);
}

.hc-rail-paso select,
.hc-rail-paso input {
	width: 100%;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	padding: 9px 10px;
	border: 1px solid rgba(244, 241, 234, .22);
	border-radius: 10px;
	background: #141b22;
	color: var(--hc-rail-texto);
	/*
	 * `color-scheme: dark` NO es decoración: es lo que hace que el navegador
	 * pinte sus PROPIOS controles en oscuro — el iconito de calendario del
	 * `input[type=date]`, la flecha del `select` y el calendario que se abre al
	 * pulsarlo. Sin esto los dibuja en negro, y sobre un campo oscuro no se ven.
	 * Es preferible a invertir el icono con un `filter`: aquel truco arregla el
	 * icono y deja el calendario emergente en blanco.
	 */
	color-scheme: dark;
}

.hc-rail-paso :focus-visible {
	outline: 2px solid var(--hc-rail-oro);
	outline-offset: 1px;
}

.hc-rail-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.hc-rail-nav button {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	line-height: 1.15;
	padding: 10px 8px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	background: var(--hc-rail-oro);
	color: var(--hc-rail-tinta);
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hc-rail-nav .hc-rail-atras {
	background: transparent;
	color: var(--hc-rail-texto);
	border: 1px solid rgba(244, 241, 234, .28);
	flex: 0 0 auto;
	font-weight: 400;
}

.hc-rail-nav button[hidden] {
	display: none;
}

/* ── Hoteles en miniatura ───────────────────────────────────────────────── */

.hc-rail-hoteles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * FOTO PEQUEÑA, A LA IZQUIERDA. Este es el aspecto por defecto.
 *
 * En V1 la tarjeta iba en columna, con la foto a 4/3 y a todo el ancho: tres
 * hoteles ocupaban media pantalla de móvil y la foto pesaba más que el dato que
 * el visitante busca, que es el PRECIO. Ahora es una fila con miniatura de
 * 64 px, igual que las filas del escaparate del tablón que tiene al lado.
 */
/* HC_ALOJA_INDICE_V2 (2026-08-25): la puerta al directorio de alojamientos
   propios, primera línea de la lista. Se distingue de las tarjetas de hotel
   —borde dorado, sin foto— porque no es un objeto, es una puerta: confundirla
   con un hotel concreto sería la peor forma de gastarle el clic a alguien. */
.hc-rail-directorio {
	display: block;
	padding: 10px 12px;
	margin-bottom: 10px;
	text-decoration: none;
	color: var(--hc-rail-texto);
	background: rgba(226, 196, 142, .08);
	border: 1px solid var(--hc-rail-oro, rgba(226, 196, 142, .45));
	border-radius: 12px;
	transition: background .15s ease;
}
.hc-rail-directorio:hover,
.hc-rail-directorio:focus-visible { background: rgba(226, 196, 142, .16); }
.hc-rail-directorio-tit {
	display: block;
	font-size: 13px; font-weight: 700; line-height: 1.3;
	color: var(--hc-rail-oro, #E2C48E);
}
.hc-rail-directorio-sub {
	display: block;
	margin-top: 2px;
	font-size: 11px; line-height: 1.35; opacity: .7;
}

.hc-rail-hotel {
	display: flex;
	align-items: stretch;
	gap: 10px;
	text-decoration: none;
	color: var(--hc-rail-texto);
	background: var(--hc-rail-fondo);
	border: 1px solid var(--hc-rail-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: background .15s ease;
}

.hc-rail-hotel:hover,
.hc-rail-hotel:focus-visible {
	background: #16202a;
}

.hc-rail-foto {
	display: block;
	flex: 0 0 64px;
	aspect-ratio: 1 / 1;
	background: #1a2029;
	overflow: hidden;
}

.hc-rail-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hc-rail-datos {
	display: block;
	padding: 8px 10px 8px 0;
	align-self: center;
	min-width: 0;
}

.hc-rail-nom {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--hc-rail-texto);
	overflow-wrap: anywhere;
}

.hc-rail-estrellas {
	display: block;
	color: var(--hc-rail-oro);
	font-size: 10px;
	letter-spacing: 1px;
}

.hc-rail-precio {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hc-rail-oro);
}

/*
 * POR DEBAJO DE 220 px la fila ya no cabe: 64 de foto más 10 de hueco dejan
 * menos de 150 para el nombre y el precio. Ahí, y solo ahí, se apila.
 *
 * Hoy ninguna pantalla del sitio da al rail menos de 240 px, así que esto no
 * llega a usarse: es la red por si mañana cae en un hueco estrecho. Mide la
 * COLUMNA, no la ventana.
 */
@container hcrail (max-width: 219px) {
	.hc-rail-hotel {
		flex-direction: column;
		gap: 6px;
	}

	.hc-rail-foto {
		flex: none;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.hc-rail-datos {
		padding: 0 8px 8px;
		align-self: auto;
	}

	.hc-rail-nom {
		font-size: 12px;
	}
}

/* ── La tira ancha: lo que ocupa el sitio de los 970×90 ─────────────────── */

.hc-franja {
	container-type: inline-size;
	container-name: hcfranja;
	margin: 18px 0;
	padding: 14px 16px;
	background: rgba(33, 39, 48, .92);
	border: 1px solid var(--hc-rail-borde);
	border-radius: 18px;
}

.hc-franja-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.hc-franja-cabecera .hc-rail-titulo {
	font-size: clamp(13px, 1.6vw, 15px);
}

.hc-franja-todos {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--hc-rail-oro);
	text-decoration: none;
}

.hc-franja-todos:hover {
	text-decoration: underline;
}

/*
 * Una fila que SIEMPRE es una fila. En el teléfono no se apila: se arrastra con
 * el dedo, con parada en cada tarjeta. Es el mismo bloque en las dos pantallas,
 * a distinto tamaño.
 */
.hc-franja-fila {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

.hc-franja-fila .hc-rail-hotel {
	flex: 0 0 clamp(150px, 34vw, 200px);
	flex-direction: column;
	gap: 0;
	scroll-snap-align: start;
}

.hc-franja-fila .hc-rail-foto {
	flex: none;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.hc-franja-fila .hc-rail-datos {
	padding: 8px 10px 10px;
	align-self: auto;
}

@media (prefers-reduced-motion: reduce) {
	.hc-rail-hotel,
	.hc-rail-marcas li {
		transition: none;
	}
}
:root {
    --hcpc-primary: #E2C48E;
    --hcpc-primary-hover: #F8D189;
    --hcpc-dark: #0B1014;
    --hcpc-black: #000000;
    --hcpc-panel: #11181E;
    --hcpc-card: #161D24;
    --hcpc-text: #C2C2C2;
    --hcpc-light: #FFFFFF;
    --hcpc-muted: #999999;
    --hcpc-border: rgba(226, 196, 142, 0.22);
    --hcpc-green: #4CAF50;
    /* Fondo vivo violeta (site-wide) */
    --hcpc-viol-base: #20112e;
    --hcpc-viol: #631b81;
    --hcpc-lilac: #c79bff;
}

/* =========================================
   COLOR GLOBAL DE TITULARES — y SOLO el color.
   Aqui vivio una decada la escala vieja (h1 32, movil 26): la retiro
   HC_TIPO_V1, que ahora es el UNICO sitio del sitio donde se decide un
   tamano de titular (al final de este archivo). Si esta regla vuelve a
   llevar un font-size, la escala global deja de mandar en esta pagina.
   ========================================= */

h1, h2, h3 {
    color: var(--hcpc-primary) !important;
}

/* =========================================
   LC_HC_LIVE_BG_V1 — FONDO VIOLETA VIVO, GLOBAL (#631b81)
   El mismo cielo cambiante detrás de TODAS las páginas.
   ========================================= */
html {
    /* base violeta oscuro: evita el parpadeo negro mientras cargan las capas */
    background: var(--hcpc-viol-base);
}
body {
    background: transparent;
    color: var(--hcpc-text);
    position: relative;
}
/* Capa 1 — auroras violeta que derivan y respiran (movimiento visible) */
body::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(55% 50% at 22% 18%, #7a2a9e 0%, transparent 60%),
        radial-gradient(50% 48% at 82% 26%, #631b81 0%, transparent 58%),
        radial-gradient(58% 58% at 68% 88%, #3d1a72 0%, transparent 60%),
        radial-gradient(48% 44% at 12% 82%, #8e2fb0 0%, transparent 58%),
        linear-gradient(160deg, #25102f, #1a0b26 60%, #160a20);
    filter: saturate(1.08);
    animation: hcpcSky 18s ease-in-out infinite;
    will-change: transform;
}
/* Capa 2 — reflejo IRIDISCENTE que gira: el "perelив" claramente visible */
body::after {
    content: "";
    position: fixed;
    inset: -60%;
    z-index: -1;
    pointer-events: none;
    opacity: .55;
    mix-blend-mode: screen;
    background: conic-gradient(from 0deg,
        transparent 0%,
        rgba(199,155,255,.55) 12%,
        transparent 26%,
        rgba(255,120,210,.42) 44%,
        transparent 58%,
        rgba(228,200,140,.38) 74%,
        transparent 88%,
        transparent 100%);
    filter: blur(80px);
    animation: hcpcSpin 26s linear infinite;
    will-change: transform;
}
@keyframes hcpcSky {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(7%,-7%,0) scale(1.14); }
}
@keyframes hcpcSpin {
    to { transform: rotate(360deg); }
}
/* Solo en teléfonos pequeños congelamos (batería); tablet y escritorio SÍ se mueven */
@media (max-width: 600px) {
    body::before, body::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none; }
}

.hcpc-site-header {
    background: var(--hcpc-black);
    border-bottom: 1px solid var(--hcpc-border);
}

.hcpc-header-top {
    background: #d5d0d0;
}

.hcpc-header-brand {
    width: min(1440px, calc(100% - 24px));
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hcpc-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #333300;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
}

.hcpc-brand-link:hover {
    color: #5c4920;
}

.hcpc-brand-mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #F8D189, #E2C48E);
    color: #0B1014;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.hcpc-header-bottom {
    background: #000000;
}

.hcpc-header-bottom-inner {
    width: min(1440px, calc(100% - 24px));
    min-height: 66px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
}

.hcpc-main-nav {
    justify-self: center;
}

.hcpc-menu,
.hcpc-footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.hcpc-menu a,
.hcpc-footer-menu a {
    color: #f5f5f5;
    text-decoration: none;
    font-size: 18px;
}

.hcpc-menu a:hover,
.hcpc-footer-menu a:hover,
.hcpc-menu .current-menu-item > a,
.hcpc-menu .current_page_item > a,
.hcpc-footer-menu .current-menu-item > a,
.hcpc-footer-menu .current_page_item > a {
    color: var(--hcpc-primary);
}

.hcpc-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hcpc-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: var(--hcpc-primary);
    border-radius: 2px;
}

.hcpc-account-link {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

.hcpc-account-icon {
    width: 31px;
    height: 31px;
    object-fit: contain;
    transition: transform 0.7s ease;
}

.hcpc-account-link:hover .hcpc-account-icon {
    transform: rotateY(360deg);
}

.hcpc-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.hcpc-home-hero {
    padding: 88px 0 62px;
    background:
        radial-gradient(circle at top right, rgba(226,196,142,0.16), transparent 34%),
        linear-gradient(180deg, #0B1014 0%, #050607 100%);
    border-bottom: 1px solid var(--hcpc-border);
}

.hcpc-kicker {
    margin: 0 0 12px;
    color: var(--hcpc-primary);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 13px;
}

.hcpc-home-hero h1 {
    max-width: 840px;
    margin: 0 0 18px;
    color: var(--hcpc-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.05;
}

.hcpc-hero-text {
    max-width: 700px;
    margin: 0 0 30px;
    color: var(--hcpc-text);
    font-size: 19px;
    line-height: 1.6;
}

.hcpc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hcpc-btn,
.hcpc-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.hcpc-btn {
    background: var(--hcpc-primary);
    color: var(--hcpc-dark);
    border: 0;
}

.hcpc-btn:hover {
    background: var(--hcpc-primary-hover);
    color: var(--hcpc-dark);
}

.hcpc-btn-secondary {
    background: transparent;
    color: var(--hcpc-primary);
    border: 1px solid var(--hcpc-primary);
}

.hcpc-btn-secondary:hover {
    background: var(--hcpc-primary);
    color: var(--hcpc-dark);
}

.hcpc-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 44px 0;
}

.hcpc-card {
    background: var(--hcpc-card);
    border: 1px solid var(--hcpc-border);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.32);
}

.hcpc-card-icon {
    color: var(--hcpc-primary);
    font-size: 13px;
    letter-spacing: 1px;
}

.hcpc-card h2 {
    color: var(--hcpc-primary);
    font-family: Georgia, "Times New Roman", serif;
}

.hcpc-page {
    padding: 60px 0;
}

.hcpc-error-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    background: var(--hcpc-panel);
    border: 1px solid var(--hcpc-border);
    border-radius: 28px;
    padding: 44px;
}

.hcpc-error-code {
    color: var(--hcpc-primary);
    font-size: 92px;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
}

.hcpc-site-footer {
    background: #000000;
    border-top: 1px solid var(--hcpc-border);
}

.hcpc-footer-inner {
    width: min(1440px, calc(100% - 24px));
    min-height: 68px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.hcpc-footer-left {
    color: var(--hcpc-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.hcpc-footer-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hcpc-footer-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: var(--hcpc-primary);
    border-radius: 2px;
}

@media (max-width: 900px) {
    .hcpc-header-bottom-inner {
        grid-template-columns: auto 1fr auto;
    }

    .hcpc-menu-toggle {
        display: inline-block;
    }

    .hcpc-main-nav {
        display: none;
        grid-column: 1 / -1;
        justify-self: stretch;
        padding: 0 0 14px;
    }

    body.hcpc-menu-open .hcpc-main-nav {
        display: block;
    }

    .hcpc-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .hcpc-menu a {
        display: block;
        padding: 14px 0;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

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

    .hcpc-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 0;
    }

    .hcpc-footer-menu-toggle {
    display: inline-block;
}

.hcpc-footer-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

body.hcpc-footer-menu-open .hcpc-footer-menu {
    display: flex;
}

body.hcpc-menu-open .hcpc-footer-menu {
    display: flex;
}

    .hcpc-footer-menu a {
        display: block;
        padding: 10px 0;
    }
}

/* =========================
   ROTATING BRAND COIN
   ========================= */

.hcpc-brand-coin {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: hidden;
}

.hcpc-brand-coin-spinner {
    position: relative;
    width: 42px;
    height: 42px;
    display: block;
    transform-style: preserve-3d;
    animation: hcpc-brand-coin-rotate 4s linear infinite;
}

.hcpc-brand-coin-img {
    position: absolute;
    inset: 0;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    display: block;
    object-fit: contain;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hcpc-brand-coin-front {
    transform: translateZ(1px);
}

.hcpc-brand-coin-back {
    transform: rotateY(180deg) translateZ(1px);
}

@keyframes hcpc-brand-coin-rotate {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

/* =========================
   SUBMENÚS (dropdown)
   ========================= */

/* Ocultar submenús por defecto siempre */
.hcpc-menu .sub-menu,
.hcpc-menu ul,
.hcpc-footer-menu .sub-menu,
.hcpc-footer-menu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Submenú abierto */
.hcpc-menu .menu-item-has-children.hcpc-open > .sub-menu,
.hcpc-menu .menu-item-has-children.hcpc-open > ul,
.hcpc-footer-menu .menu-item-has-children.hcpc-open > .sub-menu,
.hcpc-footer-menu .menu-item-has-children.hcpc-open > ul {
    display: block;
}

/* Indicador de flecha en ítems con hijos */
.hcpc-menu .menu-item-has-children > a,
.hcpc-footer-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.hcpc-menu .menu-item-has-children > a::after,
.hcpc-footer-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--hcpc-primary);
    border-bottom: 2px solid var(--hcpc-primary);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-top: -3px;
    flex-shrink: 0;
}

.hcpc-menu .menu-item-has-children.hcpc-open > a::after,
.hcpc-footer-menu .menu-item-has-children.hcpc-open > a::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* Estilos del submenú en móvil/base */
.hcpc-menu .sub-menu a,
.hcpc-footer-menu .sub-menu a {
    padding-left: 18px;
    font-size: 16px;
    color: var(--hcpc-muted);
}

.hcpc-menu .sub-menu a:hover,
.hcpc-footer-menu .sub-menu a:hover {
    color: var(--hcpc-primary);
}

/* Desktop: dropdown flotante */
@media (min-width: 901px) {
    .hcpc-menu .menu-item-has-children,
    .hcpc-footer-menu .menu-item-has-children {
        position: relative;
    }

    .hcpc-menu .menu-item-has-children.hcpc-open > .sub-menu,
    .hcpc-menu .menu-item-has-children.hcpc-open > ul,
    .hcpc-footer-menu .menu-item-has-children.hcpc-open > .sub-menu,
    .hcpc-footer-menu .menu-item-has-children.hcpc-open > ul {
        display: block;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 220px;
        background: var(--hcpc-panel);
        border: 1px solid var(--hcpc-border);
        border-radius: 12px;
        box-shadow: 0 18px 50px rgba(0,0,0,0.46);
        padding: 8px 0;
        z-index: 9999;
    }

    .hcpc-menu .sub-menu a,
    .hcpc-footer-menu .sub-menu a {
        display: block;
        padding: 10px 20px;
        font-size: 15px;
        color: var(--hcpc-text);
        border-top: 0;
        white-space: nowrap;
    }

    .hcpc-menu .sub-menu a:hover,
    .hcpc-footer-menu .sub-menu a:hover {
        color: var(--hcpc-primary);
        background: rgba(226,196,142,0.07);
    }
}
.hcpc-telegram-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	margin-left: 15px;
	background: #D4AF37; /* Золотой цвет */
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	border-radius: 5px;
	transition: background 0.2s ease, transform 0.15s ease;
	white-space: nowrap;
}

.hcpc-telegram-btn:hover {
	background: #B8941F; /* Тёмный золотой при наведении */
	transform: translateY(-1px);
}

.hcpc-telegram-btn:active {
	transform: translateY(0);
}

.tg-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: currentColor; /* Иконка наследует цвет текста */
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
	.hcpc-footer-left {
		flex-wrap: wrap;
		gap: 10px;
	}
	
	.hcpc-telegram-btn {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}
}

/* =========================================
   FULL WIDTH ONLY FOR MAIN PAGE CONTENT
   Header/footer are untouched
========================================= */

.hcpc-site-main,
.hcp-site-main{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

.hcpc-site-main .hcpc-container,
.hcp-site-main .hcp-container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

.hcpc-site-main .hcpc-page,
.hcp-site-main .hcp-page{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

.hcpc-site-main .hcpc-content,
.hcp-site-main .hcp-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Убираем ограничение 520px только внутри main */
.hcp-site-main .hcp-content input,
.hcp-site-main .hcp-content textarea,
.hcp-site-main .hcp-content select,
.hcpc-site-main .hcpc-content input,
.hcpc-site-main .hcpc-content textarea,
.hcpc-site-main .hcpc-content select{
    max-width:none !important;
}
/* =========================================
   LC_HC_RADAR_V1 — PORTADA RADAR (robot Spline + tablas vivas)
   Todo transparente: se ve el fondo violeta global por debajo.
   ========================================= */
@property --hcpc-ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }

.hcpc-radar { position:relative; padding:44px 0 18px; background:transparent; }
.hcpc-radar-head { text-align:center; max-width:760px; margin:0 auto; }
.hcpc-radar-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-family:ui-monospace,Menlo,monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
    color:#e6d8ff; padding:6px 13px; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px);
    margin-bottom:16px;
}
.hcpc-radar-eyebrow .live { width:7px; height:7px; border-radius:50%; background:var(--hcpc-lilac); box-shadow:0 0 10px var(--hcpc-lilac); animation:hcpcBlink 1.8s ease-in-out infinite; }
.hcpc-radar-head h1 {
    font-size:clamp(28px,4.6vw,52px) !important; font-weight:800 !important; letter-spacing:-.03em; line-height:1.04;
    margin:0 0 14px !important; color:var(--hcpc-light) !important; text-wrap:balance;
}
.hcpc-radar-head h1 .g { background:linear-gradient(92deg,#E4C88C,#f3b8e6 55%,#c79bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hcpc-radar-head p { color:var(--hcpc-text); font-size:16px; line-height:1.6; max-width:52ch; margin:0 auto; }
.hcpc-radar-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

.hcpc-radar-stage { position:relative; min-height:560px; margin-top:34px; }
/* Prожектор (estilo demo): haz de luz suave desde arriba-izquierda que aparece al cargar */
.hcpc-spot { position:absolute; left:50%; top:44%; width:520px; height:520px; z-index:3; pointer-events:none;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,255,255,.24), rgba(214,196,255,.10) 40%, transparent 66%);
    filter:blur(22px); opacity:0; animation:hcpcSpot 1.8s ease .2s forwards;
    transition:left .12s linear, top .12s linear; will-change:left,top; }
@keyframes hcpcSpot { from { opacity:0; } to { opacity:1; } }
.hcpc-radar-glow { position:absolute; left:50%; top:52%; width:440px; height:440px; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle,rgba(228,200,140,.16),rgba(199,155,255,.12) 45%,transparent 68%); filter:blur(8px); z-index:1; pointer-events:none; }
.hcpc-ring { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:2; }
.hcpc-ring.a { width:360px; height:360px; border:1px solid rgba(255,255,255,.07); }
.hcpc-ring.b { width:250px; height:250px; border:1px dashed rgba(199,155,255,.30); animation:hcpcSpinR 34s linear infinite; }
@keyframes hcpcSpinR { to { transform:translate(-50%,-50%) rotate(360deg); } }

.hcpc-robot { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:clamp(230px,25vw,330px); height:clamp(320px,36vw,460px); z-index:6; }
.hcpc-robot .ph { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.hcpc-robot .ph .orb { position:absolute; width:130px; height:130px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%,#fff2cf,#E4C88C 45%,#8e2fb0); box-shadow:0 0 60px rgba(199,155,255,.5); filter:blur(2px); opacity:.5; z-index:0; animation:hcpcFloatR 6s ease-in-out infinite; }
.hcpc-robot .ph svg { position:relative; z-index:1; animation:hcpcFloatR 6s ease-in-out infinite; }
.hcpc-robot spline-viewer { position:relative; z-index:2; width:100%; height:100%; display:block; }
.hcpc-robot.is-loaded .ph { opacity:0; transition:opacity 1.2s ease .3s; }
@keyframes hcpcFloatR { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }

.hcpc-natsy-chip { display:none; }

/* --- Tablas vivas --- */
.hcpc-ocard {
    position:absolute; transform:translate(-50%,-50%); z-index:7; width:250px; border-radius:16px; padding:14px 18px;
    background:rgba(38,18,54,.55); border:1px solid var(--hcpc-border); backdrop-filter:blur(16px); overflow:hidden;
    box-shadow:0 22px 46px -26px rgba(0,0,0,.7); animation:hcpcEdge 6s ease-in-out infinite;
}
.hcpc-ocard::after { content:""; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:3; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); animation:hcpcSheen 5.5s ease-in-out infinite; }
.hcpc-ocard::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s; z-index:4;
    background:conic-gradient(from var(--hcpc-ang),transparent 0 60%,#E4C88C 74%,#c79bff 86%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:hcpcConic 5s linear infinite; }
.hcpc-ocard:hover::before { opacity:1; }
@keyframes hcpcConic { to { --hcpc-ang:360deg; } }
.hcpc-ocard .oc-top { display:flex; align-items:center; gap:9px; margin-bottom:9px; position:relative; z-index:2; }
.hcpc-ocard .oc-ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(228,200,140,.12); border:1px solid rgba(228,200,140,.28); color:var(--hcpc-primary); flex:none; }
.hcpc-ocard .oc-ic svg { width:17px; height:17px; }
.hcpc-ocard .oc-k { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--hcpc-muted); }
.hcpc-ocard .oc-v { font-weight:800; font-size:26px; letter-spacing:-.02em; line-height:1; color:var(--hcpc-light); font-variant-numeric:tabular-nums; position:relative; z-index:2; }
.hcpc-ocard .oc-v em { font-style:normal; background:linear-gradient(92deg,#E4C88C,#c79bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hcpc-ocard .oc-meta { font-size:11.5px; color:var(--hcpc-muted); margin-top:5px; position:relative; z-index:2; }
.hcpc-ocard .spark { display:flex; align-items:flex-end; gap:3px; height:22px; margin-top:9px; position:relative; z-index:2; }
.hcpc-ocard .spark i { width:5px; border-radius:2px; background:linear-gradient(180deg,#E4C88C,#c79bff); transform-origin:bottom; animation:hcpcBar 1.7s ease-in-out infinite; }
/* 4 tablas FLANQUEANDO al robot (2 izq, 2 der): el centro queda libre y el robot se ve entero */
.p-n { left:15%; top:27%; } .p-e { left:85%; top:27%; } .p-w { left:16%; top:73%; } .p-s { left:84%; top:73%; }

@keyframes hcpcBlink { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes hcpcSheen { 0% { transform:translateX(-140%) skewX(-16deg); } 55%,100% { transform:translateX(320%) skewX(-16deg); } }
@keyframes hcpcBar { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
@keyframes hcpcEdge { 0%,100% { box-shadow:0 22px 46px -26px rgba(0,0,0,.7),0 0 0 1px rgba(228,200,140,.08) inset; } 50% { box-shadow:0 22px 46px -26px rgba(0,0,0,.7),0 0 22px -2px rgba(199,155,255,.30) inset; } }

/* --- Segunda sección: paneles del portal --- */
.hcpc-panels { padding:20px 0 62px; margin-top:24px; background:transparent; }
.hcpc-panels-title { text-align:center; color:var(--hcpc-primary) !important; margin:0 0 22px !important; }
.hcpc-panels-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hcpc-live-card { position:relative; overflow:hidden; padding:26px; border-radius:18px;
    background:rgba(38,18,54,.42); border:1px solid var(--hcpc-border); backdrop-filter:blur(16px);
    box-shadow:0 22px 46px -30px rgba(0,0,0,.7); transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s; }
.hcpc-live-card::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent); animation:hcpcSheen 7s ease-in-out infinite; }
.hcpc-live-card:hover { transform:translateY(-4px); border-color:rgba(228,200,140,.45); }
.hcpc-live-card .lc-ic { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px;
    background:rgba(228,200,140,.12); border:1px solid rgba(228,200,140,.28); color:var(--hcpc-primary); margin-bottom:14px; position:relative; z-index:2; }
.hcpc-live-card .lc-ic svg { width:22px; height:22px; }
.hcpc-live-card h3 { color:var(--hcpc-light) !important; margin:0 0 8px !important; font-size:19px !important; position:relative; z-index:2; }
.hcpc-live-card p { color:var(--hcpc-text); font-size:14px; line-height:1.6; margin:0; position:relative; z-index:2; }
.hcpc-live-card .lc-bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,#E4C88C,#c79bff); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.hcpc-live-card:hover .lc-bar { width:100%; }

/* --- MOVIL: el circulo se vuelve rejilla; robot fuera (ni se descarga) --- */
@media (max-width: 899px) {
    .hcpc-radar-stage { min-height:auto; margin-top:16px; }
    .hcpc-ring, .hcpc-robot, .hcpc-radar-glow { display:none !important; }
    .hcpc-natsy-chip { display:flex; align-items:center; gap:11px; margin:0 0 14px; padding:11px 13px; border-radius:15px;
        background:rgba(38,18,54,.5); border:1px solid var(--hcpc-border); backdrop-filter:blur(12px); }
    .hcpc-natsy-chip .orb { position:relative; width:38px; height:38px; border-radius:50%; flex:none;
        background:radial-gradient(circle at 34% 30%,#fff2cf,#E4C88C 45%,#8e2fb0); box-shadow:0 0 16px rgba(199,155,255,.6); }
    .hcpc-natsy-chip .tx b { font-size:13px; color:var(--hcpc-light); }
    .hcpc-natsy-chip .tx span { display:block; font-size:11.5px; color:var(--hcpc-muted); margin-top:1px; }
    .hcpc-ocards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .hcpc-ocard { position:static; transform:none; width:auto; animation:none; }
    .hcpc-ocard::after { display:none; }
    .hcpc-ocard:hover { transform:none; }
    .hcpc-panels-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .hcpc-ring.b, .hcpc-ocard, .hcpc-ocard::after, .hcpc-ocard .spark i, .hcpc-robot .ph .orb, .hcpc-robot .ph svg, .hcpc-live-card::after, .hcpc-radar-eyebrow .live { animation:none !important; }
    .hcpc-spot { animation:none !important; opacity:1 !important; }
}

/* =========================================================
   LC_HC_HEADER_V1 — cabecera y pie modernos, en tono violeta
   (cristal translúcido: se ve el fondo #631b81 por debajo)
   ========================================================= */
.hcpc-hdr { position:sticky; top:0; z-index:1000; background:transparent;
    border-bottom:1px solid rgba(226,196,142,.26); box-shadow:0 10px 40px -24px rgba(0,0,0,.8); }

/* HC_HDR_SEARCH_AUTOHIDE_V1 (2026-08-05) — el buscador se aparta al desplazar.
   La cabecera entera va fija (eso se queda: el menú y la cuenta deben estar
   siempre a mano), pero ARRASTRABA consigo la franja del buscador, que es alta
   y tapaba los objetos justo cuando el visitante baja a mirarlos. Queja del
   dueño: «эта линия так мешает смотреть».
   Ahora esa franja —y solo ella— se pliega en cuanto la página se mueve, y
   vuelve sola al llegar arriba. Se anima la ALTURA y la opacidad, no
   `display`, para que entre y salga suave y no dé un salto al contenido. */
/* El ancla de scroll, DESACTIVADA aquí — segunda mitad del arreglo del
   temblor. El navegador «ancla» la vista cuando algo cambia de tamaño por
   encima de ella y corrige la posición del scroll; justo esa corrección era la
   que reactivaba el ciclo. En la cabecera no hace ninguna falta: lo que se
   pliega está fuera de lo que el visitante está leyendo. */
.hcpc-hdr { overflow-anchor:none; }

/* HC_HDR_SEARCH_AUTOHIDE_RETIRADO_V1 (2026-08-05) — la cabecera se queda quieta.
 *
 * Aquí estaba el plegado del buscador al desplazar: `overflow:hidden` +
 * `max-height` animada, y las reglas de `.is-scrolled` que la cerraban. Retirado
 * por orden del dueño; el guión que ponía esa clase ya no existe (header.php).
 *
 * ⚠️ NO reponer `overflow:hidden` en esta franja. Era imprescindible para animar
 * el plegado, pero RECORTA todo lo que intente salir de la cabecera: la lista de
 * modos del buscador se abría cortada justo por ese borde. Y no se arregla
 * subiendo z-index — no es que quede debajo, es que lo de fuera no se dibuja.
 *
 * Si algún día vuelve el plegado, lo desplegable tiene que montarse en `<body>`
 * con `position:fixed`, como ya hacen `.hc-ss-ac` y HC_SS_DROPDOWN_ESCAPE_V1.
 * Por ese mismo motivo el `backdrop-filter` vive en el pseudo-elemento de abajo:
 * puesto en `.hcpc-hdr` atraparía a los elementos fijos.
 */
.hcpc-hdr-search,
.hcpc-hdr-topsearch { overflow:visible; }

/* =========================================
   HCPC_BLOG_CARDS_V1 — tarjetas de listado
   =========================================
   Estas reglas vivían dentro de `home.php`, en un `<style>` propio. Al crear
   `archive.php` (la lista de una etiqueta) hicieron falta en DOS plantillas, y
   una plantilla no puede imprimir el `<style>` de la otra: cada petición
   renderiza una sola. Copiarlas habría dejado dos versiones que se separan al
   primer retoque. Aquí están una vez y las usan las dos.
   ========================================= */
.hcpc-blog{max-width:1200px;margin:0 auto;padding:40px 20px 80px;}
.hcpc-blog-head{text-align:center;margin-bottom:30px;}
.hcpc-blog-head h1{font-size:clamp(26px,4vw,40px);margin:0 0 8px;line-height:1.2;}
.hcpc-blog-head p{opacity:.75;margin:0;font-size:15px;}

.hcpc-blog-grid{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:560px){.hcpc-blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.hcpc-blog-grid{grid-template-columns:repeat(3,1fr);}}

.hcpc-card{display:flex;flex-direction:column;background:rgba(26,31,36,.92);
    border:1px solid rgba(226,196,142,.35);border-radius:16px;overflow:hidden;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
@media(hover:hover) and (pointer:fine){
    .hcpc-card:hover{transform:translateY(-4px);border-color:#E2C48E;
        box-shadow:0 14px 30px rgba(0,0,0,.35);}
}

/* La foto con proporción fija: sin esto, cada tarjeta tiene una altura según
   el tamaño de SU imagen y la rejilla queda como una sierra. */
.hcpc-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B1014;}
.hcpc-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.hcpc-card-media--empty{display:flex;align-items:center;justify-content:center;
    color:rgba(226,196,142,.45);font-size:30px;}

.hcpc-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;}
.hcpc-card-date{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:#E2C48E;margin-bottom:8px;}
.hcpc-card-title{font-size:18px;line-height:1.35;margin:0 0 10px;}
.hcpc-card-title a{color:#E8EDF3;text-decoration:none;}
.hcpc-card-title a:hover{color:#E2C48E;}
/* Recorte a 3 líneas: las entradillas largas descolocaban la fila entera. */
.hcpc-card-exc{font-size:14px;line-height:1.6;opacity:.8;margin:0 0 16px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hcpc-card-more{margin-top:auto;align-self:flex-start;display:inline-block;
    padding:9px 18px;border-radius:999px;background:#E2C48E;color:#0b1014;
    font-weight:600;font-size:14px;text-decoration:none;}

.hcpc-blog-nav{margin-top:36px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.hcpc-blog-nav .page-numbers{display:inline-block;padding:8px 14px;border-radius:999px;
    border:1px solid rgba(226,196,142,.35);color:#E8EDF3;text-decoration:none;font-size:14px;}
.hcpc-blog-nav .page-numbers.current{background:#E2C48E;color:#0b1014;border-color:#E2C48E;}

.hcpc-blog-empty{text-align:center;opacity:.75;padding:40px 0;}

/* HC_SINGLE_FOTO_V1 — la entrada con su foto, su fecha y sus etiquetas. */

/* ANCHO DE LECTURA (2ª versión).
 *
 * La primera limitaba por separado el título, el texto y la foto, y con eso se
 * quedó a medias: la foto sí se estrechó, el texto siguió de borde a borde. El
 * resultado era peor que antes — una imagen pequeña arriba a la izquierda y las
 * líneas cruzando toda la pantalla.
 *
 * Ahora se limita UNA cosa: la columna. Todo lo de dentro —título, fecha, foto,
 * texto, etiquetas— se ajusta a ella solo, sin reglas propias que puedan no
 * aplicarse. Menos piezas, menos formas de fallar.
 *
 * 860 px en píxeles y no en `ch`: `ch` depende del tipo de letra, y aquí hay dos
 * (serif en los títulos, sans en el cuerpo), así que la medida salía distinta
 * según el elemento. Un número fijo se comporta igual en todos.
 *
 * ⚠️ POR QUÉ ESTA REGLA LLEVA `!important` Y SELECTOR LARGO:
 * más arriba, el bloque «FULL WIDTH ONLY FOR MAIN PAGE CONTENT» obliga a
 * `.hcp-site-main .hcp-container` a `max-width:none !important` — es lo que
 * quiere la portada y los listados, y ahí está bien. Una regla normal NO puede
 * ganarle: por eso el primer intento solo estrechó la foto (que ese bloque no
 * toca) y dejó el texto de borde a borde. Aquí se añade `.hcp-site-main` al
 * selector y `!important` para ganar SOLO dentro de una entrada — el ancho
 * completo del resto del sitio se queda como está. */
.hcp-site-main .hcp-single .hcp-container {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
}
.hcp-single .hcp-content p,
.hcp-single .hcp-content li { line-height: 1.75; }
.hcpc-single-nada { display:none; }
.hcp-single-meta { font-size:13px; color:#9a8fb0; margin:2px 0 18px; }
.hcp-single-foto { margin:0 0 24px; }
.hcp-single-img { width:100%; height:auto; display:block; border-radius:16px;
    border:1px solid rgba(226,196,142,.25); box-shadow:0 10px 30px rgba(0,0,0,.28); }
.hcp-single-tags { margin:26px 0 0; font-size:13px; }
.hcp-single-tags a { display:inline-block; margin:0 6px 6px 0; padding:4px 12px; border-radius:999px;
    border:1px solid rgba(226,196,142,.35); color:#E2C48E; text-decoration:none; }
.hcp-single-tags a:hover { border-color:#E2C48E; background:rgba(226,196,142,.1); }
/* El cristal va en el pseudo-elemento: si 'backdrop-filter' estuviera en .hcpc-hdr,
   atraparía el popup fijo de GTranslate (position:fixed) y lo descolocaría. */
.hcpc-hdr::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:rgba(28,13,42,.62); backdrop-filter:blur(16px); }
.hcpc-hdr-inner { width:min(1280px, calc(100% - 28px)); margin:0 auto; min-height:66px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* marca + moneda giratoria */
.hcpc-hdr-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.hcpc-brand-coin { width:40px; height:40px; flex:none; perspective:600px; }
.hcpc-brand-coin-spinner { position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:hcpcCoin 6s linear infinite; }
.hcpc-brand-coin-img { position:absolute; inset:0; width:40px; height:40px; border-radius:50%; backface-visibility:hidden; object-fit:cover; box-shadow:0 0 16px rgba(199,155,255,.4); }
.hcpc-brand-coin-back { transform:rotateY(180deg); }
@keyframes hcpcCoin { to { transform:rotateY(360deg); } }
.hcpc-hdr-title { font-size:clamp(16px,2.3vw,21px); font-weight:600; letter-spacing:.01em; color:#f3ecfb; }
.hcpc-hdr-title b { background:linear-gradient(90deg,#E4C88C,#f3b8e6,#c79bff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* herramientas (derecha) */
.hcpc-hdr-tools { display:flex; align-items:center; gap:12px; }
/* Contraste: sobre el fondo morado del sitio los pills al 6/14% de blanco eran casi
   invisibles en móvil. Fondo oscuro + borde DORADO + icono claro → se ven en cualquier fondo. */
.hcpc-hdr-account { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#f6eecf; text-decoration:none;
    background:rgba(0,0,0,.32); border:1px solid rgba(228,200,140,.55); transition:.25s; }
.hcpc-hdr-account svg { width:21px; height:21px; }
.hcpc-hdr-account:hover { background:rgba(228,200,140,.18); border-color:rgba(228,200,140,.75); color:#E4C88C; }

/* Botón del huésped — la única pieza RELLENA de la cabecera.
   Las demás son pastillas con borde: al rellenar esta en dorado sobre texto
   oscuro, el ojo va aquí primero sin tener que hacerla más grande ni gritar.
   Misma altura y mismo radio que el resto, para que no rompa la fila. */
.hcpc-hdr-guest { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:12px;
    background:linear-gradient(135deg,#E4C88C,#f0dcae); color:#2b1a3d; font-weight:700; font-size:14px;
    text-decoration:none; border:1px solid rgba(228,200,140,.9); white-space:nowrap; transition:.25s; }
.hcpc-hdr-guest:hover { background:linear-gradient(135deg,#f0dcae,#fdf1cf); color:#2b1a3d; transform:translateY(-1px); }
.hcpc-hdr-guest svg { width:19px; height:19px; display:block; }

/* En pantallas estrechas se queda solo el icono: el texto empujaba el idioma y
   el menú fuera de la fila, y una cabecera en dos líneas se ve rota. */
@media (max-width:520px) {
    .hcpc-hdr-guest { padding:0 11px; }
    .hcpc-hdr-guest-tx { display:none; }
}

/* GTranslate — MISMA técnica que HotelsCasa: píldora blanca + texto oscuro */
.hcpc-hdr-lang .gtranslate_wrapper { display:inline-flex; align-items:center; justify-content:center; height:40px;
    background:rgba(0,0,0,.32); border:1px solid rgba(228,200,140,.55); border-radius:12px; padding:0 11px; line-height:1; transition:.25s; }
.hcpc-hdr-lang .gtranslate_wrapper:hover { background:rgba(228,200,140,.14); border-color:rgba(228,200,140,.45); }
.hcpc-hdr-lang img.gt_flag, .hcpc-hdr-lang .gt-current-lang img { vertical-align:middle; }
/* SOLO la bandera en el disparador. CLAVE: font-size:0 únicamente en el enlace
   disparador (hijo directo > a). El popup de idiomas vive DENTRO del wrapper y
   sus nombres son <span>: si aplicáramos font-size:0 en general, se ocultarían
   (justo el bug de "no se ven los idiomas"). */
.hcpc-hdr-lang .gtranslate_wrapper > a,
.hcpc-hdr-lang .gtranslate_wrapper > a * { font-size:0 !important; line-height:1 !important; }
.hcpc-hdr-lang .gtranslate_wrapper > a img { width:22px !important; height:auto !important; vertical-align:middle !important; margin:0 !important; }

/* menú desplegable (botón hamburguesa) */
.hcpc-hm { position:relative; }
/*
 * HC_BURGER_VISIBLE_V1 (2026-08-14, queja del dueño desde el móvil): «botón
 * oscuro, rayas que no se ven, no se entiende qué es ese cuadrado».
 *
 * En el teléfono la palabra «Menú» se oculta (más abajo, @media 640px), así
 * que del botón solo quedan tres rayas de 2 px — y estaban pintadas con
 * `currentColor` sobre un fondo casi negro. Al lado tiene el botón dorado del
 * calendario: en comparación este parecía un cuadrado vacío.
 *
 * Ahora las rayas llevan color PROPIO (no heredado: así ninguna regla de
 * fuera puede apagarlas), son más gruesas y el botón tiene un fondo dorado
 * tenue con su borde, como el resto de la barra.
 */
.hcpc-hm-trigger { display:inline-flex; align-items:center; gap:9px; cursor:pointer; list-style:none; padding:9px 14px; border-radius:12px;
    color:#f6eecf; font-weight:600; font-size:14px; background:rgba(228,200,140,.12); border:1px solid rgba(228,200,140,.75); transition:.25s; }
.hcpc-hm-trigger::-webkit-details-marker { display:none; }
.hcpc-hm-trigger::marker { content:""; }
.hcpc-hm-trigger:hover { background:rgba(228,200,140,.22); border-color:rgba(228,200,140,.9); }
.hcpc-burger { width:20px; height:14px; position:relative; flex:none; }
.hcpc-burger span { position:absolute; left:0; right:0; height:2.5px; border-radius:2px; background:#F2DFAE; transition:.3s; }
.hcpc-burger span:nth-child(1) { top:0; }
.hcpc-burger span:nth-child(2) { top:6px; }
.hcpc-burger span:nth-child(3) { top:12px; }
.hcpc-hm[open] .hcpc-burger span:nth-child(1) { top:6px; transform:rotate(45deg); }
.hcpc-hm[open] .hcpc-burger span:nth-child(2) { opacity:0; }
.hcpc-hm[open] .hcpc-burger span:nth-child(3) { top:6px; transform:rotate(-45deg); }
.hcpc-hm[open] .hcpc-hm-trigger { background:rgba(228,200,140,.16); border-color:rgba(228,200,140,.5); color:#E4C88C; }

.hcpc-hm-pop { position:absolute; right:0; top:calc(100% + 10px); width:272px; padding:8px; border-radius:16px; z-index:60;
    background:rgba(26,12,38,.97); border:1px solid rgba(226,196,142,.28); backdrop-filter:blur(18px);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.85); animation:hcpcPop .28s cubic-bezier(.2,.7,.2,1);
    /* HCPC_MENU_SCROLL_V1 (2026-08-08) — el menú creció y dejó de caber.
       Con catorce entradas, en un móvil el final quedaba POR DEBAJO del borde
       de la pantalla y no había forma de llegar: el desplegable no tenía
       desplazamiento propio y la página tampoco lo desplazaba. Justo ahí estaba
       «Cerrar sesión», que es de lo que más falta hace y era lo último.
       `overscroll-behavior:contain` evita el efecto contrario: que al llegar al
       final del menú se ponga a moverse la página de detrás. */
    max-height:calc(100vh - 110px);
    max-height:calc(100dvh - 110px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; }
/* Barra de desplazamiento discreta, en el tono del menú (no la del sistema,
   que sobre fondo oscuro se ve como una franja blanca). */
.hcpc-hm-pop { scrollbar-width:thin; scrollbar-color:rgba(226,196,142,.45) transparent; }
.hcpc-hm-pop::-webkit-scrollbar { width:6px; }
.hcpc-hm-pop::-webkit-scrollbar-thumb { background:rgba(226,196,142,.45); border-radius:3px; }
.hcpc-hm-pop::-webkit-scrollbar-track { background:transparent; }
.hcpc-hm-pop::before { content:""; position:absolute; top:-6px; right:22px; width:12px; height:12px; transform:rotate(45deg);
    background:rgba(26,12,38,.97); border-left:1px solid rgba(226,196,142,.28); border-top:1px solid rgba(226,196,142,.28); }
@keyframes hcpcPop { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.hcpc-mi { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; text-decoration:none; color:#f3ecfb; font-size:14px; font-weight:500;
    transition:background .2s, transform .2s; opacity:0; transform:translateX(-8px); animation:hcpcMi .4s cubic-bezier(.2,.7,.2,1) forwards; }
.hcpc-hm-pop .hcpc-mi:nth-child(1) { animation-delay:.03s; }
.hcpc-hm-pop .hcpc-mi:nth-child(2) { animation-delay:.06s; }
.hcpc-hm-pop .hcpc-mi:nth-child(3) { animation-delay:.09s; }
.hcpc-hm-pop .hcpc-mi:nth-child(4) { animation-delay:.12s; }
.hcpc-hm-pop .hcpc-mi:nth-child(5) { animation-delay:.15s; }
.hcpc-hm-pop .hcpc-mi:nth-child(6) { animation-delay:.18s; }
.hcpc-hm-pop .hcpc-mi:nth-child(7) { animation-delay:.21s; }
@keyframes hcpcMi { to { opacity:1; transform:none; } }
.hcpc-mi:hover { background:rgba(255,255,255,.07); transform:translateX(2px); }
.hcpc-mi-ic { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; color:#fff; box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
.hcpc-mi-ic svg { width:17px; height:17px; }
.hcpc-mi-tx { flex:1; }
.hcpc-mi-tx small { color:#b9a9cf; font-weight:400; }

/* HC_MENU_LOGOUT_V1 (2026-08-08) — «Cerrar sesión», el último del menú.
   Separado por una línea y en tono apagado: es una ACCIÓN, no un destino,
   y no debe competir con los enlaces de arriba. Se enciende en rojo al
   pasar por encima, que es donde se espera un botón de salida. */
.hcpc-mi--logout {
	margin-top:6px;
	padding-top:12px;
	border-top:1px solid rgba(226,196,142,.22);
	color:#b9a9cf;
}
.hcpc-mi--logout .hcpc-mi-ic { background:linear-gradient(135deg,#6b6b6b,#3f3f46); }
.hcpc-mi--logout:hover { color:#ffb4b4; }
.hcpc-mi--logout:hover .hcpc-mi-ic { background:linear-gradient(135deg,#e06a6a,#b3322f); }
.hcpc-mi:nth-child(1) .hcpc-mi-ic { background:linear-gradient(135deg,#E4C88C,#c79a4a); }
.hcpc-mi:nth-child(2) .hcpc-mi-ic { background:linear-gradient(135deg,#8e2fb0,#c79bff); }
.hcpc-mi:nth-child(3) .hcpc-mi-ic { background:linear-gradient(135deg,#3a6ff0,#7aa0ff); }
.hcpc-mi:nth-child(4) .hcpc-mi-ic { background:linear-gradient(135deg,#33B79C,#7fe0c9); }
.hcpc-mi:nth-child(5) .hcpc-mi-ic { background:linear-gradient(135deg,#c94a7a,#ff9ed8); }
.hcpc-mi:nth-child(6) .hcpc-mi-ic { background:linear-gradient(135deg,#E4C88C,#8e2fb0); }
.hcpc-mi:nth-child(7) .hcpc-mi-ic { background:linear-gradient(135deg,#229ED9,#59c2ef); }
/* GUÍA (2026-08-04): su color NO depende de la posición — es el punto por el que
   se empieza y tiene que verse igual aunque mañana se reordene el menú. */
.hcpc-mi--guia .hcpc-mi-ic { background:linear-gradient(135deg,#E4C88C,#c79a4a) !important; }
.hcpc-mi--guia { border:1px solid rgba(228,200,140,.34); }
.hcpc-mi--guia:hover { background:rgba(228,200,140,.12); }
/* 2026-07-28: el menú pasó de 7 a 11 entradas y las reglas se quedaban en la 7ª,
   así que las cuatro de Telegram salían como una flecha suelta, sin su cuadro.
   Cada una con su color: son cuatro canales distintos, no cuatro veces el mismo. */
.hcpc-mi:nth-child(8)  .hcpc-mi-ic { background:linear-gradient(135deg,#e0653f,#ff9f7a); }
.hcpc-mi:nth-child(9)  .hcpc-mi-ic { background:linear-gradient(135deg,#2f9e5e,#7fe0a5); }
.hcpc-mi:nth-child(10) .hcpc-mi-ic { background:linear-gradient(135deg,#4b46c9,#9a95ff); }
.hcpc-mi:nth-child(11) .hcpc-mi-ic { background:linear-gradient(135deg,#0f8f9e,#57d8e6); }
/* Colchón por si mañana se añaden más: sin esto volverían a salir desnudas. */
.hcpc-mi:nth-child(n+12) .hcpc-mi-ic { background:linear-gradient(135deg,#6b6b6b,#a8a8a8); }

/* pie de página */
.hcpc-ftr { margin-top:44px; background:rgba(24,11,36,.66); backdrop-filter:blur(14px); border-top:1px solid rgba(226,196,142,.26); }
.hcpc-ftr-inner { width:min(1280px, calc(100% - 28px)); margin:0 auto; min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:16px 0; }
.hcpc-ftr-brand { display:inline-flex; align-items:center; gap:10px; color:#f3ecfb; font-size:15px; }
.hcpc-ftr-brand b { color:#E4C88C; }
.hcpc-ftr-dot { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2cf,#E4C88C 45%,#8e2fb0); box-shadow:0 0 12px rgba(199,155,255,.5); }
.hcpc-ftr-nav { flex:1; display:flex; justify-content:center; }
.hcpc-ftr-menu { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.hcpc-ftr-menu a { color:#cbbfe0; text-decoration:none; font-size:14px; transition:.2s; }
.hcpc-ftr-menu a:hover { color:#E4C88C; }
/* .hcpc-ftr-tg (boton de Telegram del pie) retirado el 2026-08-02 junto con su
   marcado en footer.php: apuntaba al canal del sitio antiguo. Se borra tambien
   el estilo — CSS de algo que ya no existe solo sirve para confundir al que
   busque de donde sale un boton que no ve. */
.hcpc-ftr-copy { text-align:center; color:#8f80a8; font-size:12px; padding:0 0 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   HC_FOOTER_PAY_V2 (2026-08-07) — formas de pago de la PLATAFORMA.

   SITIO: en la fila de la MARCA («HotelsCasa Partners»), a la derecha — no en
   la línea del © de más abajo. Lo pidió así el dueño.

   TODOS DEL MISMO TIPO: cinco tarjetas dibujadas con la misma plantilla, mismo
   lienzo 576×512 → misma altura y mismo peso. El color lo manda ESTE archivo,
   no el SVG: por eso van en línea en la plantilla y usan `currentColor`.

   En el móvil la fila del pie ya se apila (flex-wrap), así que los distintivos
   caen en su propia línea centrada; ahí van algo más pequeños.
   ═══════════════════════════════════════════════════════════════════════ */
/*
 * HC_FOOTER_PAY_V3 (2026-08-14) — GLIFOS de Font Awesome, no dibujos propios.
 *
 * Las tarjetas SVG anteriores llevaban el nombre RECORTADO y en el móvil el
 * suavizado del navegador rellenaba las letras: se veían cinco rectángulos
 * amarillos sin nada escrito. El glifo de una fuente no tiene ese problema —
 * el dibujo ES la letra, así que se ve nítido a cualquier tamaño.
 *
 * Bizum va como palabra: no existe glifo suyo en Font Awesome.
 */
.hcpc-pay { display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.hcpc-pay-i {
	display:inline-flex;
	align-items:center;
	/* Crema apagado: se lee sobre el morado del pie sin deslumbrar al lado del
	   texto. El oro fuerte queda para el hover, que es donde llama la atención. */
	color:#cbb98f;
	line-height:1;
	transition:color .2s;
}
.hcpc-pay-i i { font-size:30px; line-height:1; display:block; }
.hcpc-pay-i:hover { color:#E4C88C; }

/* Bizum: misma altura visual que los iconos, en versalitas para que no compita
   con ellos y se lea como lo que es — un nombre, no una etiqueta suelta. */
.hcpc-pay-word {
	font-size:.86rem; font-weight:700; letter-spacing:.04em;
	padding:4px 9px; border:1px solid currentColor; border-radius:6px;
}

/* El nombre de la marca queda para el lector de pantalla: el icono solo no dice
   nada a quien no ve. (El tema no traía esta clase de WordPress.) */
.hcpc-pay-i .screen-reader-text {
	position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap;
}

@media (max-width:768px) {
	/* Fila propia y centrada: la marca queda arriba y los distintivos debajo. */
	.hcpc-pay { width:100%; gap:12px; margin-top:2px; }
	.hcpc-pay-i i { font-size:28px; }
}

@media (max-width:360px) {
	.hcpc-pay { gap:9px; }
	.hcpc-pay-i i { font-size:25px; }
	.hcpc-pay-word { font-size:.78rem; padding:3px 7px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HC_FOOTER_4COLS_V1 (2026-08-03) — pie de 4 columnas + 3 pastillas.
   Mismo planteamiento que el pie de las-casas: en escritorio las cuatro
   columnas siempre abiertas; en el móvil se pliegan en acordeón para que
   el pie no se coma media pantalla.
   Sin emojis: los signos son SVG dibujados en la plantilla.
   ═══════════════════════════════════════════════════════════════════════ */
.hcpc-fwrap { width:min(1280px, calc(100% - 28px)); margin:0 auto; padding:34px 0 20px; }
.hcpc-fcols { display:flex; flex-wrap:wrap; gap:26px 30px; }
.hcpc-fcol { flex:1 1 210px; min-width:180px; }
.hcpc-ftitle {
    margin:0 0 10px; font-weight:700; letter-spacing:.02em; color:#E4C88C; font-size:14px;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.hcpc-fchevron { display:none; flex:0 0 auto; color:#E4C88C; transition:transform .25s ease; }
.hcpc-flist { list-style:none; margin:0; padding:0; }
.hcpc-flist li { margin:0 0 2px; }
.hcpc-flist a {
    display:block; padding:8px 6px; border-radius:8px; color:#cbbfe0;
    text-decoration:none; font-size:14px; line-height:1.35;
    transition:background .2s ease, color .2s ease;
}
.hcpc-flist a:hover, .hcpc-flist a:focus-visible { background:rgba(226,196,142,.12); color:#E4C88C; }

/* Lo único que se pide desde el pie: publicar (alojamiento o coche) y colaborar. */
.hcpc-fpill { display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 12px 4px; }

/*
 * HC_FOOTER_PILL_V3 — UNA pastilla con las tres palabras dentro (2026-08-06).
 *
 * No son dos botones pegados: es un solo botón dorado con el rótulo arriba, una
 * línea NEGRA de separación y, debajo, los dos destinos activos. Así el
 * «Publicar mis» se dice una vez —antes se repetía en los dos óvalos y en el
 * móvil se partía en tres líneas— y el conjunto se lee como una sola cosa.
 *
 * Las dos zonas activas NO cambian de fondo al pulsarlas a propósito: dentro de
 * una pastilla dorada, un recuadro que se ilumina parecería otro botón encima
 * del botón. Basta con el subrayado.
 */
.hcpc-fcombo {
    flex-direction:column; gap:5px; padding:9px 22px 11px; cursor:default;
    /* El hover de la pastilla normal levanta y aclara; aquí no hay nada que
       pulsar en el conjunto, solo dentro. */
    transform:none !important; filter:none !important;
}
.hcpc-fcombo-title { font-size:13px; font-weight:800; line-height:1.1; }
.hcpc-fcombo-sep { display:block; width:100%; height:1px; background:#1a1024; opacity:.55; }
.hcpc-fcombo-links { display:inline-flex; align-items:center; gap:6px; }
.hcpc-fcombo-links a {
    color:#1a1024; font-weight:800; font-size:14px; line-height:1.2;
    text-decoration:none; padding:2px 2px; border-radius:6px;
}
.hcpc-fcombo-links a:hover,
.hcpc-fcombo-links a:focus-visible { text-decoration:underline; color:#1a1024; }
.hcpc-fcombo-dash { color:#1a1024; opacity:.6; font-weight:800; }

/*
 * HC_FOOTER_STARS_V1 — la pastilla de colaboradores respira y suelta estrellas.
 *
 * Es la única del pie que promete dinero, así que se mueve un poco para que el
 * ojo la encuentre. Dos detalles deliberados:
 *   · Las estrellas son clip-path sobre un <i> vacío. Ni emoji (que cambia de
 *     dibujo en cada teléfono) ni imagen (una petición más por una chispa).
 *   · `overflow:visible` y `pointer-events:none` en el cielo: las estrellas
 *     salen fuera del óvalo y NUNCA se comen el clic del enlace.
 */
.hcpc-fstar { position:relative; overflow:visible; animation:hcpcBreath 3.4s ease-in-out infinite; }
.hcpc-fstar-label { position:relative; z-index:2; }
.hcpc-fstar-sky { position:absolute; inset:-14px -10px; pointer-events:none; z-index:1; }
.hcpc-star {
    position:absolute; display:block; width:8px; height:8px;
    background:#FFF3D2; opacity:0;
    clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation:hcpcSparkle 3.6s ease-in-out infinite;
}
/* Tamaños y salidas distintas: si todas fueran iguales parecería un GIF. */
.hcpc-star--1 { left:6%;  top:60%; width:7px;  height:7px;  animation-delay:0s; }
.hcpc-star--2 { left:26%; top:75%; width:11px; height:11px; animation-delay:.55s; }
.hcpc-star--3 { left:48%; top:68%; width:6px;  height:6px;  animation-delay:1.1s; }
.hcpc-star--4 { left:68%; top:78%; width:13px; height:13px; animation-delay:1.7s; }
.hcpc-star--5 { left:86%; top:62%; width:8px;  height:8px;  animation-delay:2.3s; }
.hcpc-star--6 { left:14%; top:70%; width:9px;  height:9px;  animation-delay:2.9s; }

@keyframes hcpcBreath {
    0%, 100% { transform:scale(1);     box-shadow:0 0 0 rgba(226,196,142,0); }
    50%      { transform:scale(1.035); box-shadow:0 0 18px rgba(226,196,142,.45); }
}
@keyframes hcpcSparkle {
    0%   { opacity:0; transform:translateY(0) scale(.4) rotate(0deg); }
    18%  { opacity:1; transform:translateY(-10px) scale(1) rotate(35deg); }
    60%  { opacity:.75; transform:translateY(-26px) scale(.85) rotate(120deg); }
    100% { opacity:0; transform:translateY(-40px) scale(.35) rotate(200deg); }
}

/* Quien pide menos movimiento, no ve ninguno: ni respiración ni chispas. */
@media (prefers-reduced-motion: reduce) {
    .hcpc-fstar { animation:none; }
    .hcpc-star  { display:none; }
}
.hcpc-fpill-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    /* 44 px: medida de dedo, no de letra. */
    min-height:44px; padding:10px 20px; border-radius:999px;
    text-decoration:none; font-weight:800; font-size:14px; line-height:1.2;
    background:linear-gradient(180deg,#F0D9AA,#DCB472); color:#1a1024;
    transition:filter .2s ease, transform .2s ease;
}
.hcpc-fpill-btn:hover, .hcpc-fpill-btn:focus-visible { filter:brightness(1.06); transform:translateY(-2px); color:#1a1024; }
/* La tercera sale del sitio: se distingue sin gritar. */
.hcpc-fpill-btn--fuera { background:transparent; color:#E4C88C; border:1px solid rgba(226,196,142,.55); }
.hcpc-fpill-btn--fuera:hover, .hcpc-fpill-btn--fuera:focus-visible { background:rgba(226,196,142,.12); color:#E4C88C; }

/* Móvil: acordeón, una columna, encabezados tocables. */
@media (max-width:768px) {
    .hcpc-fwrap { padding:22px 0 14px; }
    .hcpc-fcols { gap:0; flex-direction:column; }
    .hcpc-fcol { flex:1 1 100%; min-width:0; border-top:1px solid rgba(255,255,255,.10); }
    .hcpc-fcol:first-child { border-top:0; }
    .hcpc-ftitle { cursor:pointer; padding:15px 4px; margin:0; -webkit-user-select:none; user-select:none; }
    .hcpc-fchevron { display:inline-block; }
    .hcpc-flist { max-height:0; overflow:hidden; transition:max-height .3s ease; }
    .hcpc-fcol.is-open .hcpc-flist { max-height:1200px; padding-bottom:8px; }
    .hcpc-fcol.is-open .hcpc-fchevron { transform:rotate(180deg); }
    .hcpc-flist a { padding:11px 6px; }
    /*
     * Móvil: las DOS pastillas, una debajo de otra y centradas. Antes se
     * intentaba repartir cuatro óvalos en una fila y el texto se partía.
     */
    .hcpc-fpill { gap:12px; padding:14px 8px 6px; flex-direction:column; align-items:center; }
    .hcpc-fpill-btn { width:100%; max-width:320px; text-align:center; }
    .hcpc-fcombo { padding:9px 16px 11px; }
    .hcpc-fcombo-links { justify-content:center; }
}

/* Escritorio: siempre desplegado, sin signo de plegar. */
@media (min-width:769px) {
    .hcpc-flist { max-height:none; }
    .hcpc-fchevron { display:none; }
    .hcpc-ftitle { cursor:default; }
}

/* GTranslate popup — se adjunta al BODY, estilo global claro y legible */
.gt_options, .gt_popup, [class*="gt-popup"], [class*="gt_popup"], [id*="gt-popup"], [id*="gt_popup"] { background:#fff !important; }
.gt_options, .gt_options *, .gt_popup, .gt_popup *, [class*="gt-popup"], [class*="gt-popup"] *, [class*="gt_popup"], [class*="gt_popup"] *, [id*="gt-popup"] *, [id*="gt_popup"] *, .gt-lang-code { color:#333 !important; }
.gt_options a:hover, .gt_popup a:hover, [class*="gt-popup"] a:hover { background:#f2f2f2 !important; color:#111 !important; }

/* GTranslate SOLO en la cabecera: el del FOOTER es un elemento de menú
   (<li class="menu-item-gtranslate ...>) → lo ocultamos. */
li.menu-item-gtranslate, .menu-item-gtranslate { display: none !important; }

/* El popup de idiomas de ps.js YA se centra solo (position:fixed; top/left:50%).
   Con el backdrop-filter fuera de .hcpc-hdr, se centra en la pantalla.
   Fondo BLANCO + texto oscuro para que los idiomas se lean.
   (Nada de box-shadow gigante: el popup no se quita del DOM al cerrarse,
    sólo se mueve fuera de pantalla, y una sombra enorme oscurecería todo.) */
/* Popup de idiomas: dejamos el estilo POR DEFECTO del plugin (fondo claro + texto
   oscuro = legible). NO forzamos color/fondo: al hacerlo entrábamos en guerra de
   especificidad con el <style> que el plugin inyecta en runtime y el texto quedaba
   invisible (blanco sobre blanco). Solo redondeamos y lo dejamos por encima. */
html body [class*="gt_container-"] {
    border-radius: 14px !important;
    max-width: 92vw !important;
    max-height: 82vh !important;
    box-shadow: 0 26px 70px -18px rgba(0,0,0,.55) !important;
    z-index: 100000 !important;
}

/* responsive */
@media (max-width:640px) {
    .hcpc-hm-word { display:none; }
    .hcpc-hdr-title { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }
    .hcpc-hdr-inner { gap:10px; }
    .hcpc-hdr-tools { gap:8px; }
    .hcpc-hm-pop { width:min(86vw,272px); }
    .hcpc-ftr-inner { justify-content:center; text-align:center; }
    .hcpc-ftr-nav { order:3; width:100%; }
}
@media (max-width:430px) {
    /* Móvil estrecho: sólo la moneda como marca, todo cabe holgado */
    .hcpc-hdr-title { display:none; }
    .hcpc-hdr-account { width:38px; height:38px; }
}
@media (prefers-reduced-motion:reduce) {
    .hcpc-brand-coin-spinner, .hcpc-hm-pop, .hcpc-mi { animation:none !important; }
    .hcpc-mi { opacity:1; transform:none; }
}

/* ===== LC_HC_NAV_V1 — barra de menú horizontal (Main Menu) bajo la cabecera ===== */
.hcpc-hdr-nav { position:relative; background:rgba(28,13,42,.62); border-top:1px solid rgba(255,255,255,.06); }
.hcpc-hdr-nav-inner { width:100%; margin:0; display:flex; justify-content:center; padding:0 14px; }
.hcpc-nav-menu { list-style:none; margin:0; padding:8px 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.hcpc-nav-menu li { position:relative; }
.hcpc-nav-menu a { display:inline-flex; align-items:center; gap:7px; padding:13px 15px; color:#e7dcf5; text-decoration:none; font-size:14.5px; font-weight:500; border-radius:9px; transition:.2s; }
.hcpc-nav-menu a:hover, .hcpc-nav-menu .current-menu-item > a, .hcpc-nav-menu li:hover > a { color:#E4C88C; background:rgba(255,255,255,.05); }
.hcpc-nav-menu .menu-item-has-children > a::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7; }
.hcpc-nav-menu .sub-menu { list-style:none; margin:0; padding:6px; position:absolute; left:0; top:calc(100% + 6px); min-width:230px; z-index:70;
    background:rgba(26,12,38,.98); border:1px solid rgba(226,196,142,.28); border-radius:14px; backdrop-filter:blur(18px);
    box-shadow:0 24px 60px -26px rgba(0,0,0,.85); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.22s; }
.hcpc-nav-menu li:hover > .sub-menu, .hcpc-nav-menu li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:none; }
.hcpc-nav-menu .sub-menu li { width:100%; }
.hcpc-nav-menu .sub-menu a { padding:10px 12px; border-radius:9px; font-size:14px; color:#f3ecfb; width:100%; }
.hcpc-nav-menu .sub-menu a:hover { background:rgba(255,255,255,.07); color:#E4C88C; }

/* ===== Menú dentro del dropdown hamburguesa (móvil) ===== */
.hcpc-hm-menu { list-style:none; margin:0; padding:0; }
.hcpc-hm-menu > li > a, .hcpc-hm-menu .sub-menu a { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:11px; color:#f3ecfb; text-decoration:none; font-size:14px; font-weight:500; transition:.2s; }
.hcpc-hm-menu > li > a { opacity:0; transform:translateX(-8px); animation:hcpcMi .4s cubic-bezier(.2,.7,.2,1) forwards; }
.hcpc-hm-menu a::before { content:""; width:7px; height:7px; border-radius:50%; flex:none; background:linear-gradient(135deg,#E4C88C,#c79bff); }
.hcpc-hm-menu a:hover, .hcpc-hm-menu .current-menu-item > a { background:rgba(255,255,255,.07); color:#E4C88C; }
.hcpc-hm-menu .sub-menu { list-style:none; margin:2px 0 4px; padding:0 0 0 16px; }
.hcpc-hm-menu .sub-menu a { font-size:13.5px; }
.hcpc-hm-menu .sub-menu a::before { width:5px; height:5px; background:#c79bff; }
.hcpc-hm-menu > li:nth-child(1) > a { animation-delay:.03s; }
.hcpc-hm-menu > li:nth-child(2) > a { animation-delay:.06s; }
.hcpc-hm-menu > li:nth-child(3) > a { animation-delay:.09s; }
.hcpc-hm-menu > li:nth-child(4) > a { animation-delay:.12s; }
.hcpc-hm-menu > li:nth-child(5) > a { animation-delay:.15s; }
.hcpc-hm-menu > li:nth-child(6) > a { animation-delay:.18s; }

/* ===== Barra horizontal (Main Menu) SOLO en escritorio; el dropdown con iconos
   se muestra SIEMPRE. En móvil el dropdown añade además el Main Menu completo. ===== */
.hcpc-hm-wp { display:none; }
@media (max-width:899px) {
    .hcpc-hdr-nav { display:none; }
    .hcpc-hm-wp { display:block; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); }
}
@media (prefers-reduced-motion:reduce) { .hcpc-hm-menu > li > a { animation:none !important; opacity:1; transform:none; } }


/* ══════════════════════════════════════════════════════════════════════
   HC_TIPO_V1 (2026-07-29, orden del dueño) — LA TIPOGRAFIA DEL SITIO.
   DOS variantes y solo dos: MOVIL y ESCRITORIO. La misma escala que manda
   en las-casas (LC_TIPO_V1, en su tema hijo): los dos sitios son del mismo
   dueño y el visitante pasa de uno a otro.

   VIVE EN EL TEMA, no en un plugin, por orden expresa del dueño: el tema
   es el unico que carga en TODAS las paginas, con plugin o sin el. Una
   primera version de esta escala estuvo en hotelscasa-listing.css (el css
   del plugin de anuncios) y era un parche: cualquier pagina sin ese plugin
   quedaba fuera. Aquel bloque ya no existe — si alguien lo reencuentra en
   una copia vieja, este es el que vale.

   Los tamaños que habia eran de hace una decada, cuando los telefonos eran
   otros: el titular de la pagina de anuncios ocupaba media pantalla antes
   del primer anuncio.

        ┌──────────────────┬──────────┬──────────────┐
        │                  │  MOVIL   │  ESCRITORIO  │
        ├──────────────────┼──────────┼──────────────┤
        │ h1               │   13 px  │    32 px     │
        │ h2               │   12 px  │    24 px     │
        │ h3               │ 11.5 px  │    18 px     │
        │ h4 h5 h6         │   11 px  │    15 px     │
        │ subtitulo        │ 11.5 px  │    16 px     │
        │ texto corriente  │ 11.5 px  │    16 px     │
        │ campos (iOS)     │   16 px  │    16 px     │
        └──────────────────┴──────────┴──────────────┘

   Va con !important a proposito y es la unica manera de que funcione: los
   titulares de cada bloque llevan clase propia y una clase siempre le gana
   a la etiqueta — sin !important esta escala no pintaria nada y habria que
   volver a perseguir tamanos archivo por archivo. El corte esta en 768 px,
   el mismo que en las-casas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── VARIANTE MOVIL ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

    h1, .h1     { font-size: 13px !important;   line-height: 1.25 !important; }
    h2, .h2     { font-size: 12px !important;   line-height: 1.30 !important; }
    h3, .h3     { font-size: 11.5px !important; line-height: 1.30 !important; }
    h4, h5, h6  { font-size: 11px !important;   line-height: 1.30 !important; }

    /* El parrafo pegado a un titular es su subtitulo: un peldano por
       debajo, nunca al mismo nivel. */
    h1 + p,
    h2 + p      { font-size: 11.5px !important; line-height: 1.4 !important; }

    /* Titulares con clase propia (el hero del radar, las tarjetas live):
       una clase le gana a la etiqueta, asi que sin nombrarlos aqui se
       quedarian gigantes en el movil. En escritorio conservan su tamano de
       diseno — la queja del dueño es el movil. */
    .hcpc-radar-head h1 { font-size: 15px !important; }
    .hcpc-live-card h3  { font-size: 11.5px !important; }

    /* El texto corriente TAMBIEN entra: un parrafo de 15 px al lado de un
       h1 de 13 invierte la jerarquia — el titular parece pie de foto. */
    body        { font-size: 11.5px !important; }

    /* LOS CAMPOS NO. Con menos de 16 px, iOS hace zoom solo al tocarlos y
       descoloca la pagina entera. Unica excepcion, y con motivo. */
    input, select, textarea { font-size: 16px !important; }

    h1, h2, h3  { margin-top: 0 !important; margin-bottom: 6px !important; }
}

/* ── VARIANTE ESCRITORIO ─────────────────────────────────────────────── */
@media (min-width: 769px) {

    h1, .h1     { font-size: 32px !important; line-height: 1.2 !important; }
    h2, .h2     { font-size: 24px !important; line-height: 1.25 !important; }
    h3, .h3     { font-size: 18px !important; line-height: 1.3 !important; }
    h4, h5, h6  { font-size: 15px !important; line-height: 1.35 !important; }

    h1 + p,
    h2 + p      { font-size: 16px !important; line-height: 1.5 !important; }

    h1, h2, h3  { margin-top: 0 !important; margin-bottom: 12px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   HC_MOVIL_GUARD_V1 (2026-07-29) — EL MOVIL NO SE DESBORDA.
   En el movil se veia la pagina salida del marco: fondo violeta a la
   derecha, tarjetas cortadas, la barra de busqueda medio fuera. Bastaba un
   solo elemento mas ancho que la pantalla (una tabla del tablero, una
   imagen con ancho fijo) para descolocarlo todo. Misma guardia que en el
   tema de las-casas: se prohibe el desplazamiento horizontal y se obliga a
   los anchos a caber.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* La vista «Tabla» del tablero: una tabla no encoge por debajo de su
       contenido — si no cabe, que se deslice DENTRO de su propia caja, no
       arrastrando la pagina entera. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── EL ZUM DEL iPHONE (2026-08-02) ──────────────────────────────────
       Faltaba, y es el fallo que mas se nota de todos.

       Safari en iPhone amplia la pagina AL TOCAR un campo cuya letra mide
       menos de 16px. Y al salir del campo no vuelve: la web se queda
       agrandada y torcida, con medio contenido fuera del marco. El visitante
       cree que la web esta rota, y no lo esta — es una regla del navegador.

       Pasa justo en lo primero que se toca: el buscador de la portada y el
       de /alojamiento/, las dos paginas mas visitadas desde el movil.

       16px exactos es el umbral: con 15.9px amplia igual.

       Fuera quedan casillas, botones y deslizadores: no reciben texto, y
       cambiarles el tamano les deforma la caja.

       `!important` porque hay que ganar a la regla del plugin que puso 14px,
       y el orden de carga de las hojas no esta garantizado (LiteSpeed las
       combina). */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Un correo largo, un enlace con parametros o una referencia de reserva
       son UNA sola palabra para el navegador: no la parte, y empuja el bloque
       hasta salirse. Se ve en confirmaciones, facturas y en el chat.
       `break-word` parte solo cuando no queda otra, no a mitad de cualquier
       palabra normal. */
    body {
        overflow-wrap: break-word;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   HC_BOTONES_GAMA_V1 (2026-08-13) — la gama de los botones vive AQUI, en la
   hoja del tema, no repartida por los plugins.

   El mal que corrige: muchos botones cambian el fondo dorado por uno oscuro
   al pasar el cursor, pero cada plugin definia (o se olvidaba de definir) el
   color del texto en :hover → el rotulo se volvia invisible, y se venia
   arreglando boton a boton. Regla de la casa, una sola vez: al apuntar a un
   boton, el TEXTO ES BLANCO. Vale para <button>, los envios de formulario y
   las clases-boton de los dos prefijos (.lc-btn / .hc-btn / .button),
   iconos y <span> interiores incluidos.

   `!important` por el mismo motivo que la regla de los 16px de arriba: las
   hojas de los plugins se imprimen despues de esta (shortcodes, respaldos en
   el pie) y LiteSpeed ademas las combina — el orden de carga no esta
   garantizado, y sin la marca cualquier hoja tardia volveria a esconder el
   texto.

   Si algun dia un boton concreto conserva el fondo CLARO en hover y el
   blanco no se lee, se le escribe una excepcion puntual DEBAJO de este
   bloque; la regla general no se toca. */
button:hover,
button:hover *,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.button:hover *,
.lc-btn:hover,
.lc-btn:hover *,
.hc-btn:hover,
.hc-btn:hover * {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HCPC_TOPSEARCH (movido 2026-08-13, HC_ESTILOS_EN_CSS_V1) — la casilla de
   busqueda por nombre de la cabecera (dos copias: escritorio y movil).
   Estos estilos vivian IMPRESOS desde functions.php (heredoc en
   hcpc_topsearch_html); orden del dueño: los estilos, en la hoja del tema.
   El marcado sigue saliendo de esa funcion. */
.hcpc-topsearch{display:flex;align-items:center;height:36px;min-width:0;
    border:1px solid rgba(226,196,142,.45);border-radius:999px;overflow:hidden;
    background:rgba(255,255,255,.06)}
.hcpc-topsearch:focus-within{border-color:#E2C48E;background:rgba(255,255,255,.12)}
/* 16px de letra es OBLIGATORIO: con menos, iOS hace zoom al enfocar y descoloca
   la cabecera entera. Lo que se encoge es el ancho, nunca el tamaño de letra. */
.hcpc-topsearch-in{flex:1 1 auto;min-width:0;border:0;background:transparent;
    padding:0 12px;color:#EAE6DD;font-size:16px;line-height:1;outline:none}
.hcpc-topsearch-in::placeholder{color:rgba(234,230,221,.55)}
/* flex:0 0 36px — sin esto el botón se aplasta al estrecharse la barra y la lupa
   sale con forma de huevo. */
.hcpc-topsearch-btn{flex:0 0 36px;width:36px;height:36px;display:flex;align-items:center;
    justify-content:center;border:0;background:transparent;color:#E2C48E;cursor:pointer;
    padding:0;font-size:15px;line-height:1}
.hcpc-topsearch-btn:hover{background:rgba(226,196,142,.16)}

/* ── Copia de ESCRITORIO: en la fila de botones, antes de la estrella. */
.hcpc-topsearch--desk{flex:0 1 220px;margin-right:6px}
.hcpc-topsearch--desk .hcpc-topsearch-in{width:120px}

/* ── Copia MÓVIL: franja propia entre el menú y la barra de búsqueda. */
.hcpc-hdr-topsearch{display:flex;justify-content:center;padding:8px 16px;
    background:rgba(0,0,0,.10);border-top:1px solid rgba(226,196,142,.12)}
.hcpc-topsearch--movil{width:100%;max-width:560px;height:38px}
.hcpc-topsearch--movil .hcpc-topsearch-btn{flex:0 0 38px;width:38px;height:38px}

/* El corte. Una sola casilla a la vista; la otra ni existe para el lector de
   pantalla (display:none la saca del árbol de accesibilidad). */
@media(min-width:900px){.hcpc-hdr-topsearch{display:none}}
@media(max-width:899px){.hcpc-topsearch--desk{display:none}}
@media(max-width:640px){.hcpc-hdr-topsearch{padding:7px 12px}}

/* ═══════════════════════════════════════════════════════════════════════
   HC_COOKIE_CSS (movido 2026-08-13, HC_ESTILOS_EN_CSS_V1) — estilos del
   banner de cookies y de su modal de ajustes. Vivían IMPRESOS desde
   functions.php (wp_footer); orden del dueño: los estilos, en la hoja del
   tema. El marcado y el JS del banner siguen en functions.php — eso es
   comportamiento, no estilo. */
:root {
    --hc-dark:   #0B1014;
    --hc-gold:   #C9A84C;
    --hc-gold2:  #E2C48E;
    --hc-white:  #F4F0E8;
    --hc-gray:   #6B7280;
    --hc-radius: 12px;
    --hc-shadow: 0 4px 32px rgba(0,0,0,.28);
    --hc-z:      9999;
}

/* ── Banner (HC_COOKIE_COMPACT_V1, 2026-08-13) — MÓVIL PRIMERO ──
 *
 * El aviso VUELVE al móvil, pero en MINIATURA: una línea de texto + tres
 * botones en fila, semitransparente (se ve el contenido a través), pegado
 * abajo. Regla del dueño: no puede estorbar la vista del 70% del contenido.
 * El mismo formato compacto manda también en escritorio (móvil = principal).
 * Los detalles por categoría viven SOLO en el modal («Configurar»).
 */
#hc-cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--hc-z);
    background: rgba(11,16,20,.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(201,168,76,.65);
    box-shadow: 0 -2px 14px rgba(0,0,0,.3);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    font-family: inherit;
    animation: hcSlideUp .35s ease;
}
@keyframes hcSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.hc-cb-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    flex-wrap: wrap;
}
.hc-cb-text {
    margin: 0;
    color: var(--hc-white);
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
}
.hc-cb-text a { color: var(--hc-gold2); white-space: nowrap; }
.hc-cb-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;      /* los 3 botones SIEMPRE en una fila */
    align-items: center;
    justify-content: center;
}
.hc-cb-actions .hc-btn {
    padding: 6px 12px;
    font-size: .74rem;
    border-radius: 6px;
}

/*
 * La galleta del pie (enlace «Cookies», class hc-cookie-open) se ve SIEMPRE,
 * también en escritorio: el banner sale una sola vez, y sin esta puerta no
 * habría forma de volver a los ajustes para cambiar la elección.
 */
.hcpc-ftr-cookies {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 10px;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    opacity: .55;          /* discreta: está, pero no llama */
}
.hcpc-ftr-cookies:hover,
.hcpc-ftr-cookies:active { opacity: 1; }

/* ── Botones ── */
.hc-btn {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: .88rem;
    font-weight: 600;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
    line-height: 1.2;
}
.hc-btn:hover  { opacity: .85; }
.hc-btn:active { transform: scale(.97); }
.hc-btn-primary   { background: var(--hc-gold); color: var(--hc-dark); }
.hc-btn-secondary { background: transparent; color: var(--hc-gold2); border: 1.5px solid var(--hc-gold); }
.hc-btn-ghost     { background: transparent; color: var(--hc-gray);  border: 1.5px solid #374151; }

/* ── Modal ── */
#hc-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--hc-z) + 1);
}
.hc-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
}
.hc-modal-box {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: #111820;
    border: 1px solid #2d3748;
    border-radius: var(--hc-radius);
    box-shadow: var(--hc-shadow);
    padding: 32px 28px 24px;
    width: min(560px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    color: var(--hc-white);
    font-family: inherit;
    animation: hcFadeIn .25s ease;
}
@keyframes hcFadeIn {
    from { opacity: 0; transform: translate(-50%,-48%); }
    to   { opacity: 1; transform: translate(-50%,-50%); }
}
#hc-modal-title { margin: 0 0 8px; font-size: 1.25rem; color: var(--hc-gold2); }
.hc-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    background: none; border: none;
    color: var(--hc-gray);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color .15s;
}
.hc-modal-close:hover { color: var(--hc-white); }
.hc-modal-group {
    border-top: 1px solid #1e2a3a;
    padding: 16px 0 8px;
}
.hc-modal-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.hc-modal-group-title { font-weight: 600; color: var(--hc-white); }
.hc-modal-desc { font-size: .85rem; color: #9ca3af; line-height: 1.5; margin: 0; }
.hc-modal-desc--small { font-size: .74rem; color: #6b7280; margin-top: 6px; }

.hc-badge { font-size: .75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.hc-badge--on { background: #14532d; color: #86efac; }

/* Toggle switch */
.hc-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.hc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.hc-toggle-slider {
    position: relative;
    width: 44px; height: 24px;
    background: #374151;
    border-radius: 12px;
    transition: background .2s;
    flex-shrink: 0;
}
.hc-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.hc-toggle input:checked + .hc-toggle-slider           { background: var(--hc-gold); }
.hc-toggle input:checked + .hc-toggle-slider::after    { transform: translateX(20px); }
.hc-toggle-label { font-weight: 600; font-size: .95rem; }

.hc-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .hc-cb-inner  { flex-direction: column; align-items: flex-start; }
    .hc-cb-actions { width: 100%; }
    .hc-btn { flex: 1; text-align: center; }
    .hc-modal-box { padding: 24px 16px 18px; }
    .hc-modal-footer { flex-direction: column; }
    .hc-modal-footer .hc-btn { width: 100%; }
}

/*
 * HC_LUPA_SVG_V2 (2026-08-14) — CORREGIDO: la lupa nace BLANCA.
 *
 * En la V1 puse el negro como norma y el blanco como excepción, y salió al
 * revés de lo pedido: la lupa de la cabecera se veía NEGRA. El dueño lo dijo
 * claro y yo lo invertí.
 *
 * Ahora la norma es BLANCA —que es como se ve en la cabecera y sobre cualquier
 * fondo oscuro del sitio— y el NEGRO es la excepción, solo en la píldora
 * dorada del buscador principal, donde el blanco no se leería. Ahí, al pasar
 * el ratón, pasa a blanco.
 */
/*
 * HC_LUPA_SVG_V3 (2026-08-14) — `color` no pinta un SVG. Faltaba `fill`.
 *
 * El `<path>` del icono no lleva atributo `fill`, así que el navegador usa el
 * valor por defecto de SVG, que es NEGRO — y ninguna de las reglas de `color`
 * de abajo le afectaba. Por eso la lupa de la cabecera seguía negra sobre el
 * fondo oscuro por mucho que aquí pusiera `color:#fff`.
 *
 * Con `fill:currentColor` el relleno pasa a obedecer a `color`, y las reglas
 * que ya había (blanca por norma, negra en la píldora dorada) funcionan tal
 * como estaban escritas.
 */
.lc-ic-lupa {
    width: 1.15em;
    height: 1.15em;
    color: #fff;              /* norma: blanca */
    fill: currentColor;       /* sin esto el SVG se pinta negro y `color` no hace nada */
    transition: color .15s ease;
}

/*
 * HC_ICONOS_FA_SVG_V1 (2026-08-14) — la caja de los iconos heredados.
 *
 * Font Awesome ya no se descarga en el frente (296 KB de hoja + tipografías).
 * Los `<i class="fa-...">` que quedan por el sitio siguen ahí —muchísimo CSS
 * apunta a ellos— pero ahora llevan el dibujo DENTRO, en SVG, puesto por
 * `hc_fa_reemplazar()`. Estas dos reglas son lo único que hace falta para que
 * ese dibujo ocupe el sitio del glifo que había antes:
 *
 * · el `<i>` pasa a ser una caja centrada del tamaño de la letra (`1em`), que es
 *   como se comportaba la fuente;
 * · el `<svg>` va en `inline-block` — un `<svg>` declarado flex pierde su tamaño
 *   natural y se queda en un punto.
 *
 * El color no se toca en ningún sitio: el SVG lleva `fill="currentColor"`, así
 * que hereda el del texto igual que hacía el glifo.
 */
.hc-fa-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-style: normal;
    line-height: 1;
    vertical-align: -0.125em;
}

/*
 * El dibujo se mide en `em`, NO en «100 % del padre». Muchos bloques del sitio
 * agrandan el `<i>` para convertirlo en un disco (la ficha, las políticas): con
 * el 100 % el icono llenaría el disco de borde a borde; con `1em` sigue al
 * tamaño de letra, que es como se comportaba el glifo de la fuente.
 */
.hc-fa-i > svg.hc-fa {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/*
 * HC_LUPA_BLANCA_V1 (2026-08-14) — la lupa es BLANCA también en el buscador.
 *
 * Aquí vivía la excepción contraria: en los botones dorados del buscador la
 * lupa se pintaba NEGRA y solo pasaba a blanca al posar el ratón. Orden del
 * dueño: blanca en todas partes, sin que haya que pasar el ratón por encima.
 *
 * Sobre el oro claro el blanco contrasta menos que el negro, así que la lupa
 * lleva un contorno oscuro muy fino (`drop-shadow`) para que se lea igual de
 * bien en el botón dorado y sobre la foto de cabecera.
 */
.lc-search-submit .lc-ic-lupa,
.lcxm-go .lc-ic-lupa,
.hcxm-go .lc-ic-lupa,
.lc-exp-go .lc-ic-lupa,
button[class*="-go"] .lc-ic-lupa {
    color: #fff;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HC_PAGE_ASIDE_V3 (2026-08-20) — la columna de las páginas normales: el rail
 * de LiteAPI, a la DERECHA, y debajo del contenido en el móvil.
 *
 * La pinta `page.php` de este tema hijo, y SOLO cuando `hc_liteapi_rail()`
 * devuelve algo. Sin rail no existe ni el contenedor, así que estas reglas no
 * llegan a aplicarse y ninguna página cambia.
 *
 * ⚠️ REGLA APRENDIDA A BASE DE RECHAZOS (sitio anterior, tres intentos): la
 * columna NO puede ser un bloque pegado al lado con su propio ancho y su propio
 * fondo — se ve como un apéndice y desplaza el texto. Va en la MISMA REJILLA que
 * el contenido, empieza en la MISMA LÍNEA de arriba y respira el mismo aire.
 *
 * ⚠️ Y OTRA: aquí se usa `grid`, no `flex` en columna. Un `flex-direction:column`
 * con `align-items:flex-start` hace que el hijo calcule mal su ancho — es el bug
 * que dejó un carrusel inmóvil y un hijo más ancho que el padre.
 *
 * ⚠️ Y LA DE HOY: V2 puso la columna a la IZQUIERDA y mantuvo las dos columnas
 * también en el teléfono, en miniatura. La idea era que el buscador se leyera
 * primero en el móvil; el resultado, a 117 px de ancho, fue un desplegable que
 * enseñaba «Elige ciuda» y títulos partidos. Orden del dueño: a la derecha, y en
 * el móvil DEBAJO del contenido. Al ser la última celda de la rejilla, las dos
 * cosas salen del mismo cambio sin un solo `order`.
 * ═══════════════════════════════════════════════════════════════════════════ */

.hcp-page-grid {
    /* El contenedor del tema va forzado a ancho completo (bloque de arriba),
       así que la medida útil se pone AQUÍ, no en `.hcp-container`. */
    width: min(1560px, 100% - 32px);
    margin-inline: auto;
}

.hcp-page-grid > .hcp-content {
    /* `minmax(0, 1fr)` abajo y este `min-width: 0`: sin ellos, una tabla o un
       bloque de código anchos empujan la pista y se llevan la columna fuera de
       pantalla. Es el fallo clásico de las rejillas con contenido rígido. */
    min-width: 0;
}

@media (min-width: 1000px) {
    .hcp-page-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 300px);
        gap: clamp(16px, 2vw, 28px);
        align-items: start;
    }

    .hcp-page-grid > .hc-rail {
        position: sticky;
        top: 24px;
    }
}

/* Por debajo de 1000 px no hay sitio al lado: el rail baja DEBAJO del contenido,
   a ancho completo. Sin rejilla, los dos bloques se apilan solos. */
@media (max-width: 999px) {
    .hcp-page-grid > .hc-rail {
        margin-top: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HC_FA_SIN_DOBLE_V1 (2026-08-15) — LOS ICONOS SE PINTABAN DOS VECES.
 *
 * Síntoma (captura del dueño): en el pie, DOS filas de tarjetas de pago — Visa,
 * Mastercard, Amex y PayPal repetidos. Bizum salía una sola vez, y esa era la
 * pista: Bizum es una PALABRA, no un icono.
 *
 * Causa, vista en el HTML servido: `hc_fa_reemplazar()` mete el dibujo en SVG
 * DENTRO del `<i class="fa-brands fa-cc-visa">`, porque Font Awesome ya no debía
 * descargarse en el frente. Pero la hoja de Font Awesome SÍ sigue llegando —la
 * encola algún plugin y LiteSpeed la funde en su paquete combinado, así que no
 * se ve como un `<link>` con «fontawesome» en el nombre—. Resultado: el glifo
 * del `::before` Y el SVG hijo, uno encima de otro, dentro de la misma caja.
 *
 * Por eso se veía como «dos filas»: no había dos bloques, había dos dibujos por
 * icono. Contado en el HTML real: UN solo `.hcpc-pay`, UN `<footer>`, cuatro
 * `fa-cc-*`. La duplicación era puramente visual.
 *
 * La regla vale para TODO el sitio, no solo el pie: cualquier icono con SVG
 * dentro deja de pintar el glifo. Si el `<i>` no lleva SVG, esta regla no le
 * afecta — `hc-fa-i` solo lo pone el reemplazador.
 * ═══════════════════════════════════════════════════════════════════════════ */
.hc-fa-i::before,
.hc-fa-i::after {
    content: none !important;
}

/*
 * El `<i>` vuelve a centrar su dibujo. `.hcpc-pay-i i` lo forzaba a `display:block`
 * cuando el icono era un glifo de fuente; con el SVG dentro, `inline-flex` (que es
 * lo que trae `.hc-fa-i`) es lo que lo deja centrado y a la altura del texto.
 */
.hcpc-pay-i i.hc-fa-i {
    display: inline-flex;
}

/*
 * HC_FOOTER_PAY_LINEA_V1 (2026-08-15) — las tarjetas, en UNA línea con la marca.
 *
 * La fila del pie ya era flex con `align-items:center`, así que marca e iconos
 * compartían línea: lo que la rompía era el doble dibujo de arriba, que hacía la
 * caja el doble de alta. Aquí solo se blinda para que no vuelva a partirse.
 *
 * `nowrap` a propósito: si algún día no cupieran, es preferible que encojan a que
 * salten a una segunda fila — que es exactamente el defecto que se está
 * arreglando. Las medidas de abajo garantizan que quepan hasta en 320 px.
 */
.hcpc-pay {
    flex-wrap: nowrap;
    align-items: center;
}

@media (max-width: 768px) {
    /*
     * El móvil es de donde llega casi toda la gente: aquí no puede haber sorpresas.
     *
     * `width:auto` deshace el `width:100%` de la regla vieja, que EMPUJABA las
     * tarjetas a una línea propia aunque hubiera sitio de sobra al lado de la
     * marca. Ahora comparten línea siempre que quepan y solo bajan cuando el
     * ancho real no da — que es lo que hace el `flex-wrap` de la fila del pie.
     */
    .hcpc-pay { width: auto; gap: 10px; }
    .hcpc-pay-i i { font-size: 26px; }
}

@media (max-width: 480px) {
    .hcpc-pay { gap: 7px; }
    .hcpc-pay-i i { font-size: 22px; }
    .hcpc-pay-word { font-size: .72rem; padding: 3px 6px; letter-spacing: .02em; }
}

@media (max-width: 360px) {
    .hcpc-pay { gap: 6px; }
    .hcpc-pay-i i { font-size: 20px; }
    .hcpc-pay-word { font-size: .68rem; padding: 2px 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HC_LEGAL_V1 (2026-08-16) — PÁGINAS LEGALES
   Política de Privacidad · Política de Cookies. Las dos salían como un
   chorro de texto pegado al borde: los shortcodes devuelven HTML limpio
   (h2/h3/p/ul/table) y el tema no da estilo a ese HTML fuera del contenido
   de entrada. Aquí va TODA la presentación — en PHP no se pone ni un color.
   Móvil primero; a partir de 768 px se ensancha y se separa más.
   ═══════════════════════════════════════════════════════════════════════════ */

.hc-legal {
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* Blindaje: si la página lleva el shortcode dentro de un bloque
   «Preformateado» o «Código», el navegador respeta cada salto de línea del
   HTML y el texto sale cortado a la mitad. Aquí dentro eso se anula siempre.
   NO se toca la tipografía: los títulos llevan la serif de la marca puesta por
   el tema, y forzar `font-family` aquí se la quitaría. Si el texto se ve de
   máquina de escribir, el arreglo es cambiar el bloque en el editor, no
   pelearse con él desde el CSS. */
.hc-legal,
.hc-legal *:not(code) {
    white-space: normal;
}

/* Y los párrafos vacíos que wpautop pueda seguir colando: ocupan alto sin
   pintar nada, que es justo el agujero que se veía entre apartados. */
.hc-legal p:empty,
.hc-legal br + br { display: none; }

/* La gama sale de las VARIABLES DEL TEMA que ya están arriba en este mismo
   archivo (oro --hcpc-primary, paneles --hcpc-panel/--hcpc-card, texto
   --hcpc-text, filos --hcpc-border). Ni un color escrito a mano: así estas
   páginas se ven como el resto del sitio y, si algún día cambia la gama,
   cambian con ella. */
.hc-legal,
.hc-legal p,
.hc-legal li { color: var(--hcpc-text); }

.hc-legal h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 6px;
    color: var(--hcpc-primary);
}

/* La fecha de actualización: pequeña y apagada, con el gris de la marca. */
.hc-legal > p:first-of-type em {
    display: inline-block;
    margin-bottom: 20px;
    font-size: .85rem;
    font-style: normal;
    color: var(--hcpc-muted);
}

.hc-legal h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 32px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--hcpc-border);
    color: var(--hcpc-primary);
}

.hc-legal h3:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 24px;
}

.hc-legal h4 {
    font-size: .98rem;
    margin: 20px 0 6px;
    color: var(--hcpc-light);
}

.hc-legal p { margin: 0 0 14px; }

.hc-legal ul {
    margin: 0 0 16px;
    padding-left: 20px;
    list-style: disc;
}

.hc-legal li { margin-bottom: 8px; }

.hc-legal li::marker { color: var(--hcpc-primary); }

.hc-legal strong {
    font-weight: 700;
    color: var(--hcpc-light);
}

.hc-legal a {
    color: var(--hcpc-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hc-legal a:hover { color: var(--hcpc-primary-hover); }

/* Bloque destacado: lo importante de un vistazo (resumen, avisos).
   Mismo lenguaje que las tarjetas del sitio — panel oscuro + filo dorado. */
.hc-legal__destacado {
    margin: 0 0 24px;
    padding: 16px 18px;
    background: var(--hcpc-panel);
    border: 1px solid var(--hcpc-border);
    border-left: 3px solid var(--hcpc-primary);
    border-radius: 0 var(--hc-radius, 12px) var(--hc-radius, 12px) 0;
}

.hc-legal__destacado p:last-child { margin-bottom: 0; }

/* ── Tabla de cookies ──────────────────────────────────────────────────────
   En móvil una tabla de 4 columnas no cabe de ninguna manera: se convierte
   en tarjetas, una por cookie, con la etiqueta delante de cada dato. Por eso
   cada celda lleva `data-label` en el HTML. */

.hc-legal__tabla-wrap { margin: 0 0 24px; }

.hc-legal table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.hc-legal thead { display: none; }

.hc-legal tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--hcpc-card);
    border: 1px solid var(--hcpc-border);
    border-radius: var(--hc-radius, 12px);
}

.hc-legal tbody td {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    border: 0;
}

.hc-legal tbody td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    font-weight: 600;
    font-size: .82rem;
    color: var(--hcpc-muted);
}

.hc-legal code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85em;
    background: var(--hcpc-panel);
    border: 1px solid var(--hcpc-border);
    color: var(--hcpc-primary);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-all;
}

@media (min-width: 768px) {
    .hc-legal {
        padding: 16px 24px 64px;
        font-size: 1.02rem;
    }

    .hc-legal h2 { font-size: 1.9rem; }
    .hc-legal h3 { font-size: 1.25rem; margin-top: 40px; }

    /* En escritorio sí cabe la tabla de verdad. */
    .hc-legal thead { display: table-header-group; }

    .hc-legal tbody tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .hc-legal thead th {
        padding: 10px 12px;
        text-align: left;
        background: var(--hcpc-panel);
        border: 1px solid var(--hcpc-border);
        color: var(--hcpc-primary);
        font-size: .88rem;
    }

    .hc-legal tbody tr { background: var(--hcpc-card); }

    .hc-legal tbody td {
        display: table-cell;
        padding: 10px 12px;
        border: 1px solid var(--hcpc-border);
        vertical-align: top;
    }

    .hc-legal tbody td::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HCPC_BUSCADOR_SITIO_V1 (2026-08-17) — resultados de búsqueda (search.php).
   Móvil primero: una columna, y la miniatura solo cuando hay sitio.
   ═══════════════════════════════════════════════════════════════════════════ */

.hcs-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 14px 48px;
}

.hcs-cabecera { margin-bottom: 22px; }

.hcs-titulo {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 6px;
    color: var(--hcpc-oro, #E2C48E);
}

.hcs-cuenta {
    margin: 0 0 14px;
    font-size: 13px;
    color: #8a9199;
}

.hcs-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.hcs-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid rgba(226, 196, 142, .30);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 15px;
}

.hcs-input::placeholder { color: #7d848c; }

.hcs-input:focus {
    outline: none;
    border-color: rgba(226, 196, 142, .70);
}

.hcs-btn {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--hcpc-oro, #E2C48E);
    color: #17202a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.hcs-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hcs-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(226, 196, 142, .14);
}

.hcs-foto {
    flex: 0 0 76px;
    display: block;
}

.hcs-foto img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* El cuerpo se estira; sin esto el texto largo desborda la fila en móvil. */
.hcs-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.hcs-familia {
    display: inline-block;
    margin-bottom: 5px;
    padding: 2px 9px;
    border: 1px solid rgba(226, 196, 142, .32);
    border-radius: 50px;
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--hcpc-oro, #E2C48E);
}

.hcs-item-t {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 1.3;
}

.hcs-item-t a {
    color: #fff;
    text-decoration: none;
}

.hcs-item-t a:hover { color: var(--hcpc-oro, #E2C48E); }

.hcs-resumen {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #98a0a8;
}

.hcs-vacio {
    padding: 26px 0;
    color: #c8ced4;
}

.hcs-pistas,
.hcs-atajos {
    font-size: 13.5px;
    color: #8a9199;
}

.hcs-atajos a { color: var(--hcpc-oro, #E2C48E); }

.hcs-pag { margin: 26px 0 0; }

.hcs-pag ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.hcs-pag a,
.hcs-pag span {
    display: block;
    padding: 8px 15px;
    border: 1px solid rgba(226, 196, 142, .30);
    border-radius: 50px;
    color: var(--hcpc-oro, #E2C48E);
    text-decoration: none;
    font-size: 14px;
}

.hcs-pag .current {
    background: rgba(226, 196, 142, .16);
}

@media (min-width: 700px) {
    .hcs-wrap { padding: 32px 20px 60px; }
    .hcs-titulo { font-size: 27px; }
    .hcs-foto { flex-basis: 104px; }
    .hcs-foto img { width: 104px; height: 104px; }
    .hcs-item-t { font-size: 17px; }
}

/* HC_BOTONES_GAMA_V2 (2026-08-18) — los botones DORADOS del garaje de coches
   (.lcgr-btn-sm, .lcvb-btn, .lcva-btn, .lcsy-btn--main, la pestaña .is-active)
   son <a>, no <button>: el `a:hover` del tema padre les ponía el texto dorado
   sobre fondo dorado y desaparecían. Fondo claro → texto OSCURO también al
   apuntar. La regla general de arriba (texto blanco) no les aplica porque su
   fondo no cambia a oscuro. */
a.lcgr-btn-sm:hover, a.lcgr-btn-sm:hover *,
a.lcvb-btn:hover, a.lcvb-btn:hover *,
a.lcva-btn:hover, a.lcva-btn:hover *,
a.lcsy-btn--main:hover, a.lcsy-btn--main:hover *,
.lcgr-tab.is-active:hover, .lcgr-tab.is-active:hover *,
.lcgr-btn-sm:hover, .lcvb-btn:hover, .lcva-btn:hover, .lcsy-btn--main:hover {
    color: #1a1f24 !important;
}

/* HC_VISTAS_V1: chapa de visitas en las fichas de alojamiento propias. */
.hc-vistas { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; color: #b9a98c; font-size: 13px; line-height: 1; }
.hc-vistas-ojo { flex: 0 0 auto; opacity: .85; }
.hc-vistas-n { font-weight: 600; color: #e2c48e; letter-spacing: .2px; }