/**
 * Cultouring — Place Detail (Ficha) CSS
 *
 * Premium editorial cultural-tourism design.
 * Maya highlands / Chiapas aesthetic: warm, earthy, cinematic, sophisticated.
 *
 * Design language:
 *   Jade/teal primary — amber/gold accent — terracotta sparingly
 *   Estuco surfaces — deep ink headings — layered shadows + glassmorphism
 *   Mobile-first, WCAG AA, prefers-reduced-motion compliant.
 *
 * @package  com_cultouring
 * @since    0.3.9
 */

/* Self-hosted fonts — MILPA DIGITAL */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-wght-italic.woff2') format('woff2-variations'); }
@font-face { font-family: 'Inter';    font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-wght-normal.woff2') format('woff2-variations'); }

/* ============================================================
   0. DESIGN TOKENS — "MILPA DIGITAL" (jade/terracotta/cream/gold)
   ============================================================ */
:root {
    /* Brand palette */
    --ct-jade:          #1C5C52;
    --ct-jade-deep:     #16504a;
    --ct-jade-dark:     #114c4c;
    --ct-royal:         #2E2419;
    --ct-ink:           #1A1511;
    --ct-ink-soft:      #2E2419;
    --ct-amber:         #C4901A;
    --ct-amber-deep:    #b0811a;
    --ct-terra:         #C8583A;
    --ct-terra-warm:    #E07A5F;
    --ct-slate:         #5C4A3A;
    --ct-slate-light:   #9A8A78;

    /* Surfaces */
    --ct-bg:            #F5F0E8;  /* Milpa cream (never pure white) */
    --ct-bg-warm:       #FBF6EC;
    --ct-card:          #ffffff;
    --ct-border:        #DDD5C8;
    --ct-border-fine:   rgba(28,92,82,0.12);

    /* Text */
    --ct-text:          #1A1511;
    --ct-text-muted:    #5C4A3A;
    --ct-text-faint:    #9A8A78;

    /* Typography */
    --ct-font:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ct-font-display:  'Fraunces', 'Times New Roman', Georgia, serif;

    /* Semantic */
    --ct-whatsapp:      #25d366;
    --ct-fb:            #1877f2;
    --ct-ig-a:          #f09433;
    --ct-ig-b:          #bc1888;
    --ct-green:         #16a34a;
    --ct-red:           #dc2626;

    /* Gradients */
    --ct-grad-hero:     linear-gradient(160deg, rgba(19,78,74,0.88) 0%, rgba(15,52,96,0.80) 50%, rgba(26,26,46,0.92) 100%);
    --ct-grad-jade:     linear-gradient(135deg, var(--ct-jade), var(--ct-jade-dark));
    --ct-grad-amber:    linear-gradient(135deg, var(--ct-amber), var(--ct-amber-deep));
    --ct-grad-ink:      linear-gradient(135deg, var(--ct-ink-soft), var(--ct-royal));
    --ct-grad-warm:     linear-gradient(135deg, rgba(245,158,11,0.06), rgba(13,148,136,0.04));

    /* Elevation */
    --ct-shadow-xs:     0 1px 3px rgba(15,52,96,0.06), 0 1px 2px rgba(15,52,96,0.04);
    --ct-shadow-sm:     0 4px 8px -2px rgba(15,52,96,0.08), 0 2px 4px -2px rgba(15,52,96,0.05);
    --ct-shadow-md:     0 12px 24px -8px rgba(15,52,96,0.12), 0 4px 8px -4px rgba(15,52,96,0.07);
    --ct-shadow-lg:     0 24px 48px -12px rgba(15,52,96,0.18), 0 8px 16px -8px rgba(15,52,96,0.10);
    --ct-shadow-jade:   0 20px 40px -12px rgba(13,148,136,0.30);
    --ct-shadow-amber:  0 20px 40px -12px rgba(245,158,11,0.35);

    /* Geometry */
    --ct-radius:        18px;
    --ct-radius-sm:     12px;
    --ct-radius-xs:     8px;
    --ct-radius-pill:   999px;

    /* Motion */
    --ct-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ct-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ct-duration:      0.28s;
    --ct-transition:    all var(--ct-duration) var(--ct-ease);
}


/* ============================================================
   1. CASSIOPEIA BREAKOUT + CONTAINER (CAL-120/162)
   ============================================================ */

/* 1a. Kill Cassiopeia grid, hide sidebars */
.site-grid:has(.ct-place-detail),
.container-component:has(.ct-place-detail) {
    display:               block !important;
    max-width:             100%  !important;
    grid-template-columns: 1fr   !important;
}
.site-grid:has(.ct-place-detail) .container-sidebar-left,
.site-grid:has(.ct-place-detail) .container-sidebar-right {
    display: none !important;
}

/* 1b. Main container — 96% width on wide screens */
.ct-place-detail {
    width:       96%;
    max-width:   1760px;
    margin:      0 auto;
    padding:     0 0 4rem;
    color:       var(--ct-text);
    font-family: var(--ct-font);
    font-size:   1rem;
    line-height: 1.65;
    background:  var(--ct-bg);
}

/* Editorial display type (Fraunces) on headline elements — MILPA DIGITAL */
.ct-place-title-section h1,
.ct-place-title-section .ct-place-title,
.ct-place-card-title,
.ct-exp-booking-title,
.ct-exp-price-amount,
.ct-guide-name,
.ct-place-vr-card h2 {
    font-family: var(--ct-font-display) !important;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
}


/* ============================================================
   2. BACK LINK — refined eyebrow navigation
   ============================================================ */
.ct-place-back {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    padding:         0.85rem 0 0.6rem;
    color:           var(--ct-jade);
    text-decoration: none;
    font-size:       0.82rem;
    font-weight:     700;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    transition:      color var(--ct-duration) var(--ct-ease),
                     transform var(--ct-duration) var(--ct-ease);
}
.ct-place-back svg {
    width:      16px;
    height:     16px;
    transition: transform var(--ct-duration) var(--ct-ease);
}
.ct-place-back:hover {
    color:     var(--ct-jade-dark);
    transform: translateX(-3px);
}
.ct-place-back:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 3px;
    border-radius:  4px;
}


/* ============================================================
   3. HERO — cinematic full-bleed with gradient overlay
   ============================================================ */
.ct-place-hero {
    position:      relative;
    width:         100%;
    height:        clamp(320px, 50vw, 560px);
    border-radius: var(--ct-radius);
    overflow:      hidden;
    margin-bottom: 0;           /* merges visually with title section */
    box-shadow:    var(--ct-shadow-lg);
}

.ct-place-hero img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 10s ease;
    will-change: transform;
}
.ct-place-hero:hover img {
    transform: scale(1.04);
}

/* Multi-stop cinematic gradient overlay */
.ct-place-hero-overlay {
    position:       absolute;
    inset:          0;
    background:     var(--ct-grad-hero);
    pointer-events: none;
}

/* Grain texture overlay for editorial feel (pure CSS, no image) */
.ct-place-hero::after {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity:          0.5;
    pointer-events:   none;
    border-radius:    inherit;
}

/* Category / featured badges */
.ct-place-hero-badges {
    position:   absolute;
    top:        1.25rem;
    left:       1.25rem;
    display:    flex;
    gap:        0.5rem;
    z-index:    3;
    flex-wrap:  wrap;
}

.ct-place-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    padding:        0.3rem 0.85rem;
    border-radius:  var(--ct-radius-pill);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ct-place-badge-category {
    background: rgba(26,26,46,0.60);
    color:      #fff;
    border:     1px solid rgba(255,255,255,0.15);
}

.ct-place-badge-featured {
    background: rgba(245,158,11,0.88);
    color:      #fff;
    border:     1px solid rgba(255,255,255,0.20);
    box-shadow: 0 0 16px rgba(245,158,11,0.40);
}
.ct-place-badge-featured svg {
    filter: drop-shadow(0 0 4px rgba(255,200,0,0.6));
}


/* ============================================================
   4. TITLE SECTION — editorial display typography
   ============================================================ */
.ct-place-title-section {
    background:    var(--ct-card);
    padding:       1.75rem 2rem 2rem;
    border-radius: 0 0 var(--ct-radius) var(--ct-radius);
    margin-bottom: 2.5rem;
    box-shadow:    var(--ct-shadow-sm);
    border:        1px solid var(--ct-border);
    border-top:    none;
    position:      relative;
}

/* Decorative jade rule on left */
.ct-place-title-section::before {
    content:       '';
    position:      absolute;
    left:          2rem;
    bottom:        0;
    width:         3rem;
    height:        3px;
    background:    var(--ct-grad-jade);
    border-radius: var(--ct-radius-pill);
}

.ct-place-breadcrumb {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    flex-wrap:   wrap;
    font-size:   0.78rem;
    font-weight: 500;
    color:       var(--ct-text-muted);
    margin-bottom: 0.6rem;
    letter-spacing: 0.01em;
}
.ct-place-breadcrumb .sep {
    opacity: 0.35;
    font-weight: 300;
}

/* Experience pill — gradient badge above title */
.ct-place-exp-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    padding:        0.28rem 0.75rem;
    margin:         0 0 0.65rem;
    border-radius:  var(--ct-radius-pill);
    background:     var(--ct-grad-jade);
    color:          #fff;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    box-shadow:     0 4px 12px -4px rgba(13,148,136,0.40);
}

.ct-place-title-section h1 {
    font-size:      clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight:    800;
    letter-spacing: -0.025em;
    line-height:    1.15;
    color:          var(--ct-ink);
    margin:         0;
}


/* ============================================================
   5. TWO-COLUMN GRID
   ============================================================ */
.ct-place-grid {
    display:               grid;
    grid-template-columns: 1fr 390px;
    gap:                   2rem;
    align-items:           start;
    margin-bottom:         2.5rem;
}

.ct-place-left,
.ct-place-right {
    display:        flex;
    flex-direction: column;
    gap:            1.75rem;
}

/* Sticky right column on desktop */
.ct-place-right {
    position:   sticky;
    top:        1.5rem;
}


/* ============================================================
   6. CARDS — elevated estuco-surface components
   ============================================================ */
.ct-place-card {
    background:    var(--ct-card);
    border-radius: var(--ct-radius);
    padding:       1.75rem;
    box-shadow:    var(--ct-shadow-sm);
    border:        1px solid var(--ct-border);
    transition:    box-shadow var(--ct-duration) var(--ct-ease),
                   transform  var(--ct-duration) var(--ct-ease);
    position:      relative;
    overflow:      hidden;
}
.ct-place-card:hover {
    box-shadow: var(--ct-shadow-md);
    transform:  translateY(-2px);
}

/* Jade accent line on card left */
.ct-place-card::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           1.5rem;
    bottom:        1.5rem;
    width:         3px;
    background:    var(--ct-grad-jade);
    border-radius: 0 2px 2px 0;
    opacity:       0;
    transition:    opacity var(--ct-duration) var(--ct-ease);
}
.ct-place-card:hover::before {
    opacity: 1;
}

/* Card heading */
.ct-place-card-title {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--ct-text-muted);
    margin:         0 0 1.2rem;
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    padding-bottom: 0.85rem;
    border-bottom:  1px solid var(--ct-border);
}
.ct-place-card-title svg {
    color:       var(--ct-jade);
    flex-shrink: 0;
    opacity:     0.85;
}


/* ============================================================
   7. DESCRIPTION + CONTENT
   ============================================================ */
.ct-place-description {
    font-size:   0.97rem;
    line-height: 1.75;
    color:       var(--ct-text);
}
.ct-place-description p {
    margin: 0 0 1rem;
}
.ct-place-description p:last-child {
    margin: 0;
}
.ct-place-description img {
    border-radius: var(--ct-radius-sm);
    margin:        1.25rem 0;
    max-width:     100%;
    height:        auto;
}
.ct-place-description a {
    color:           var(--ct-jade);
    text-decoration: underline;
    text-decoration-color: rgba(13,148,136,0.4);
    text-underline-offset: 3px;
    transition:      color var(--ct-duration) var(--ct-ease);
}
.ct-place-description a:hover {
    color: var(--ct-jade-dark);
}


/* ============================================================
   8. VIDEO EMBEDS
   ============================================================ */
.ct-place-video-embed {
    position:      relative;
    width:         100%;
    padding-bottom: 56.25%;
    margin:        1.25rem 0;
    border-radius: var(--ct-radius-sm);
    overflow:      hidden;
    background:    var(--ct-ink);
    box-shadow:    var(--ct-shadow-md);
}
.ct-place-video-embed iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}
.ct-place-video-tiktok {
    padding-bottom: 120%;
    max-width:      340px;
}


/* ============================================================
   9. VR / 3D MODEL CARD (ct-place-vr-*)
   ============================================================ */
.ct-place-vr-card {
    background: linear-gradient(160deg, var(--ct-ink-soft) 0%, var(--ct-jade-dark) 100%);
    border:     1px solid rgba(13,148,136,0.20);
    color:      #fff;
}

.ct-place-vr-card .ct-place-card-title {
    color:        rgba(255,255,255,0.65);
    border-bottom-color: rgba(255,255,255,0.10);
}
.ct-place-vr-card .ct-place-card-title svg {
    color: var(--ct-amber);
}

/* Disable the hover accent rule inside dark VR card */
.ct-place-vr-card::before {
    display: none;
}

.ct-place-vr-arbtn {
    position:        absolute;
    bottom:          1rem;
    right:           1rem;
    padding:         0.55rem 1rem;
    background:      var(--ct-grad-amber);
    color:           #fff;
    border:          none;
    border-radius:   var(--ct-radius-xs);
    font-size:       0.82rem;
    font-weight:     700;
    cursor:          pointer;
    box-shadow:      var(--ct-shadow-amber);
    letter-spacing:  0.03em;
    transition:      var(--ct-transition);
}
.ct-place-vr-arbtn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 24px 48px -12px rgba(245,158,11,0.45);
}

.ct-place-vr-hint {
    margin:      0.75rem 0 0;
    font-size:   0.8rem;
    color:       rgba(255,255,255,0.55);
    font-style:  italic;
    text-align:  center;
}

.ct-place-vr-licence {
    margin:      0.5rem 0 0;
    font-size:   0.75rem;
    color:       rgba(255,255,255,0.40);
    text-align:  center;
}

.ct-place-vr-tour {
    border-radius: var(--ct-radius-sm);
    overflow:      hidden;
    box-shadow:    inset 0 0 0 1px rgba(255,255,255,0.08);
}


/* ============================================================
   10. SCHEDULE
   ============================================================ */
.ct-place-schedule-list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.ct-place-schedule-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.65rem 0.85rem;
    margin-bottom:   0.3rem;
    border-radius:   var(--ct-radius-xs);
    font-size:       0.9rem;
    background:      transparent;
    transition:      background var(--ct-duration) var(--ct-ease);
}
.ct-place-schedule-item:last-child {
    margin-bottom: 0;
}
.ct-place-schedule-item:hover {
    background: rgba(13,148,136,0.04);
}

.ct-place-schedule-item.is-today {
    background: linear-gradient(135deg, rgba(13,148,136,0.10), rgba(245,158,11,0.06));
    border:     1px solid rgba(13,148,136,0.20);
    font-weight: 700;
}
.ct-place-schedule-item.is-today .ct-place-schedule-day,
.ct-place-schedule-item.is-today .ct-place-schedule-hours {
    color: var(--ct-jade-dark);
}

.ct-place-schedule-day {
    font-weight: 600;
    color:       var(--ct-text);
    font-size:   0.88rem;
    letter-spacing: 0.01em;
}
.ct-place-schedule-hours {
    color:     var(--ct-text-muted);
    font-size: 0.88rem;
}


/* ============================================================
   11. MAP
   ============================================================ */
.ct-place-map-wrap {
    border-radius: var(--ct-radius-sm);
    overflow:      hidden;
    margin-bottom: 1rem;
    box-shadow:    var(--ct-shadow-xs);
    border:        1px solid var(--ct-border);
}
#ct-place-map {
    width:  100%;
    height: 260px;
    display: block;
}

.ct-place-btn-directions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.85rem;
    border-radius:   var(--ct-radius-sm);
    background:      var(--ct-grad-jade);
    color:           #fff;
    text-decoration: none;
    font-weight:     700;
    font-size:       0.88rem;
    letter-spacing:  0.03em;
    box-shadow:      0 8px 24px -8px rgba(13,148,136,0.38);
    transition:      transform var(--ct-duration) var(--ct-ease),
                     box-shadow var(--ct-duration) var(--ct-ease);
}
.ct-place-btn-directions:hover {
    color:      #fff;
    transform:  translateY(-2px);
    box-shadow: var(--ct-shadow-jade);
}
.ct-place-btn-directions:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 3px;
}


/* ============================================================
   12. CONTACT BUTTONS
   ============================================================ */
.ct-place-contact-grid {
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
}

.ct-place-contact-btn {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    padding:         0.75rem 1rem;
    border-radius:   var(--ct-radius-sm);
    text-decoration: none;
    font-weight:     600;
    font-size:       0.87rem;
    transition:      background var(--ct-duration) var(--ct-ease),
                     color      var(--ct-duration) var(--ct-ease),
                     border-color var(--ct-duration) var(--ct-ease),
                     transform   var(--ct-duration) var(--ct-ease);
    border:          1.5px solid var(--ct-border);
    color:           var(--ct-text);
    background:      var(--ct-card);
    min-height:      44px;
}
.ct-place-contact-btn:hover {
    transform: translateX(3px);
}
.ct-place-contact-btn svg {
    flex-shrink: 0;
    opacity:     0.75;
}

.ct-place-btn-call:hover {
    border-color: var(--ct-jade);
    color:        var(--ct-jade-dark);
    background:   rgba(13,148,136,0.04);
}
.ct-place-btn-whatsapp:hover {
    border-color: var(--ct-whatsapp);
    color:        #158f46;
    background:   rgba(37,211,102,0.05);
}
.ct-place-btn-email:hover {
    border-color: var(--ct-royal);
    color:        var(--ct-royal);
    background:   rgba(15,52,96,0.04);
}
.ct-place-btn-website:hover {
    border-color: var(--ct-amber-deep);
    color:        var(--ct-terra);
    background:   rgba(245,158,11,0.05);
}

.ct-place-contact-btn:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 2px;
}


/* ============================================================
   13. SOCIAL BUTTONS
   ============================================================ */
.ct-place-social-grid {
    display: flex;
    gap:     0.65rem;
}

.ct-place-social-btn {
    width:          48px;
    height:         48px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    border-radius:  50%;
    transition:     background var(--ct-duration) var(--ct-ease),
                    color      var(--ct-duration) var(--ct-ease),
                    transform  var(--ct-duration) var(--ct-ease),
                    box-shadow var(--ct-duration) var(--ct-ease);
    text-decoration: none;
    border:         1.5px solid var(--ct-border);
    background:     var(--ct-card);
    color:          var(--ct-text-muted);
}
.ct-place-social-btn:hover {
    transform:  translateY(-4px);
    box-shadow: var(--ct-shadow-md);
}
.ct-place-social-btn:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 3px;
}

.ct-place-social-fb:hover {
    background:   var(--ct-fb);
    color:        #fff;
    border-color: var(--ct-fb);
}
.ct-place-social-ig:hover {
    background:   linear-gradient(45deg, var(--ct-ig-a), var(--ct-ig-b));
    color:        #fff;
    border-color: transparent;
}
.ct-place-social-tiktok:hover {
    background:   #010101;
    color:        #fff;
    border-color: #010101;
}


/* ============================================================
   14. CHIPS (accessibility, payment, amenities)
   ============================================================ */
.ct-place-chips {
    list-style: none;
    padding:    0;
    margin:     0.25rem 0 0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
}

.ct-place-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    padding:        0.4rem 0.9rem;
    border-radius:  var(--ct-radius-pill);
    background:     var(--ct-bg);
    border:         1px solid var(--ct-border);
    color:          var(--ct-text);
    font-size:      0.8rem;
    font-weight:    500;
    line-height:    1.2;
    transition:     background var(--ct-duration) var(--ct-ease),
                    transform  var(--ct-duration) var(--ct-ease);
    min-height:     32px;
}
.ct-place-chip:hover {
    transform: translateY(-1px);
}
.ct-place-chip svg {
    flex-shrink: 0;
    opacity:     0.75;
}

.ct-place-chip-access {
    background:   rgba(13,148,136,0.07);
    border-color: rgba(13,148,136,0.25);
    color:        var(--ct-jade-dark);
}
.ct-place-chip-access:hover {
    background: rgba(13,148,136,0.12);
}

.ct-place-chip-pay {
    background:   rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.28);
    color:        var(--ct-terra);
}
.ct-place-chip-pay:hover {
    background: rgba(245,158,11,0.14);
}

.ct-place-chip-parking {
    background:   rgba(139,92,246,0.07);
    border-color: rgba(139,92,246,0.25);
    color:        #5b21b6;
}
.ct-place-chip-parking:hover {
    background: rgba(139,92,246,0.12);
}

.ct-place-chip-amen {
    background:   rgba(14,165,233,0.07);
    border-color: rgba(14,165,233,0.25);
    color:        #0369a1;
}
.ct-place-chip-amen:hover {
    background: rgba(14,165,233,0.12);
}


/* ============================================================
   15. AI SUMMARY CARD
   ============================================================ */
.ct-place-ai-summary {
    background: linear-gradient(160deg,
        rgba(13,148,136,0.04) 0%,
        rgba(245,158,11,0.03) 100%);
    border-color: rgba(13,148,136,0.18);
    position:    relative;
}

/* Subtle shimmer highlight on top edge */
.ct-place-ai-summary::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       1.75rem;
    right:      1.75rem;
    height:     1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(13,148,136,0.30) 40%,
        rgba(245,158,11,0.25) 60%,
        transparent);
}

.ct-place-ai-summary .ct-place-card-title {
    color: var(--ct-jade-dark);
}

.ct-place-ai-block + .ct-place-ai-block {
    margin-top:     1.25rem;
    padding-top:    1.25rem;
    border-top:     1px dashed rgba(15,52,96,0.10);
}

.ct-place-ai-subtitle {
    font-size:      0.82rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--ct-text-muted);
    margin:         0 0 0.6rem;
}

.ct-place-ai-text {
    font-size:   0.94rem;
    line-height: 1.7;
    color:       var(--ct-text);
}
.ct-place-ai-text p {
    margin: 0 0 0.5rem;
}
.ct-place-ai-text p:last-child {
    margin: 0;
}

.ct-place-ai-attribution {
    margin:    0.85rem 0 0;
    font-size: 0.76rem;
    color:     var(--ct-text-faint);
}

.ct-place-ai-flag {
    color:           var(--ct-jade);
    text-decoration: underline;
    text-decoration-color: rgba(13,148,136,0.35);
    margin-left:     0.35rem;
}
.ct-place-ai-flag:hover {
    color: var(--ct-jade-dark);
}


/* ============================================================
   16. EXPERIENCE BOOKING CARD (ct-exp-*)
       Airbnb-grade sticky booking panel
   ============================================================ */
.ct-exp-booking {
    position:      relative;
    padding:       2rem;
    margin:        0 0 2rem;
    border-radius: var(--ct-radius);
    background:    var(--ct-card);
    border:        1px solid rgba(13,148,136,0.18);
    box-shadow:    0 20px 48px -16px rgba(13,148,136,0.22),
                   0 4px 12px -4px rgba(15,52,96,0.08);
    overflow:      hidden;
}

/* Warm glow in top-right corner */
.ct-exp-booking::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(
        ellipse 140% 100% at 110% -10%,
        rgba(245,158,11,0.09) 0%,
        transparent 55%
    );
    pointer-events: none;
}

/* Bottom jade stripe accent */
.ct-exp-booking::after {
    content:       '';
    position:      absolute;
    bottom:        0;
    left:          0;
    right:         0;
    height:        3px;
    background:    var(--ct-grad-jade);
    border-radius: 0 0 var(--ct-radius) var(--ct-radius);
}

.ct-exp-booking-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    flex-wrap:       wrap;
    gap:             1rem;
    margin-bottom:   1.5rem;
    position:        relative;
}

.ct-exp-booking-title {
    margin:      0;
    font-size:   0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:       var(--ct-text-muted);
}

/* Price display */
.ct-exp-price {
    display:     flex;
    align-items: baseline;
    gap:         0.3rem;
    flex-wrap:   wrap;
}
.ct-exp-price-amount {
    font-size:      clamp(1.8rem, 3vw, 2.4rem);
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          var(--ct-jade-dark);
    line-height:    1;
}
.ct-exp-price-currency {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--ct-text-muted);
}
.ct-exp-price-per {
    font-size:   0.82rem;
    color:       var(--ct-text-faint);
}

/* Meta list (duration, group size, level, languages) */
.ct-exp-meta {
    list-style: none;
    padding:    0;
    margin:     0 0 1.5rem;
    display:    grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:        1rem;
    position:   relative;
    padding-top: 1.25rem;
    border-top:  1px solid var(--ct-border);
}

.ct-exp-meta-item {
    display:     flex;
    align-items: flex-start;
    gap:         0.65rem;
}
.ct-exp-meta-item svg {
    flex-shrink: 0;
    margin-top:  0.12rem;
    color:       var(--ct-jade);
    opacity:     0.85;
}
.ct-exp-meta-label {
    display:        block;
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--ct-text-faint);
    margin-bottom:  0.18rem;
}
.ct-exp-meta-value {
    display:     block;
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--ct-text);
    line-height: 1.35;
}

/* Primary CTA button */
.ct-exp-book-cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.55rem;
    width:           100%;
    padding:         1.05rem 1.5rem;
    border:          none;
    border-radius:   var(--ct-radius-sm);
    background:      linear-gradient(135deg, var(--ct-terra-warm), var(--ct-terra));
    color:           #fff;
    font-size:       1rem;
    font-weight:     700;
    letter-spacing:  0.02em;
    text-decoration: none;
    cursor:          pointer;
    box-shadow:      0 10px 28px -8px rgba(200,88,58,0.50);
    transition:      transform  180ms var(--ct-ease-spring),
                     box-shadow 180ms var(--ct-ease);
    font-family:     inherit;
    min-height:      52px;
    position:        relative;
}
.ct-exp-book-cta:hover {
    transform:  translateY(-3px) scale(1.005);
    box-shadow: var(--ct-shadow-jade);
    color:      #fff;
}
.ct-exp-book-cta:active {
    transform:  translateY(-1px);
}
.ct-exp-book-cta:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 3px;
}

/* Contact variant */
.ct-exp-book-cta-contact {
    background: linear-gradient(135deg, var(--ct-jade), var(--ct-jade-dark));
    box-shadow: 0 10px 28px -8px rgba(28,92,82,0.42);
}
.ct-exp-book-cta-contact:hover {
    box-shadow: var(--ct-shadow-amber);
}

/* Includes/excludes grid */
.ct-exp-includes {
    display:       grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:           1.25rem;
    margin-top:    1.5rem;
    padding-top:   1.25rem;
    border-top:    1px dashed rgba(15,52,96,0.08);
    position:      relative;
}
.ct-exp-includes-col h3 {
    margin:         0 0 0.5rem;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--ct-text-muted);
}
.ct-exp-includes-text {
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--ct-text);
}
.ct-exp-includes-text p {
    margin: 0 0 0.4rem;
}

/* Group hint banner */
.ct-exp-social {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
    margin-top:  1rem;
    padding:     0.5rem 0.9rem;
    border-radius: var(--ct-radius-xs);
    background:  rgba(14,165,233,0.07);
    border:      1px solid rgba(14,165,233,0.18);
    color:       #0369a1;
    font-size:   0.83rem;
    font-weight: 500;
}


/* ============================================================
   17. LOCAL GUIDE CARD (ct-guide-*)
   ============================================================ */
.ct-guide-card {
    display:       grid;
    grid-template-columns: 130px 1fr;
    gap:           1.75rem;
    align-items:   flex-start;
    padding:       2rem;
    margin:        0 0 2rem;
    border-radius: var(--ct-radius);
    background:    var(--ct-card);
    border:        1px solid var(--ct-border);
    box-shadow:    var(--ct-shadow-md);
    position:      relative;
    overflow:      hidden;
    transition:    box-shadow var(--ct-duration) var(--ct-ease);
}
.ct-guide-card:hover {
    box-shadow: var(--ct-shadow-lg);
}

/* Subtle warm gradient fill in background */
.ct-guide-card::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     var(--ct-grad-warm);
    pointer-events: none;
}

/* Photo */
.ct-guide-photo {
    width:          120px;
    height:         120px;
    border-radius:  50%;
    overflow:       hidden;
    background:     linear-gradient(135deg,
                        rgba(13,148,136,0.15),
                        rgba(245,158,11,0.12));
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--ct-jade);
    border:         3px solid var(--ct-card);
    box-shadow:     0 0 0 2px rgba(13,148,136,0.25),
                    var(--ct-shadow-sm);
    position:       relative;
    z-index:        1;
    flex-shrink:    0;
}
.ct-guide-photo img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* Guide text body */
.ct-guide-body {
    position: relative;
    z-index:  1;
}

.ct-guide-kicker {
    display:        inline-block;
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color:          var(--ct-jade);
    margin-bottom:  0.35rem;
}

.ct-guide-name {
    margin:         0 0 0.35rem;
    font-size:      clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight:    800;
    letter-spacing: -0.02em;
    color:          var(--ct-ink);
    line-height:    1.2;
}

.ct-guide-role {
    display:        inline-block;
    padding:        0.25rem 0.7rem;
    border-radius:  var(--ct-radius-pill);
    background:     rgba(13,148,136,0.08);
    border:         1px solid rgba(13,148,136,0.20);
    color:          var(--ct-jade-dark);
    font-size:      0.76rem;
    font-weight:    600;
    margin-bottom:  0.85rem;
    letter-spacing: 0.01em;
}

.ct-guide-specialty {
    margin:    0 0 0.65rem;
    font-size: 0.9rem;
    color:     var(--ct-text-muted);
    font-weight: 500;
}

.ct-guide-bio {
    margin:      0 0 1.1rem;
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--ct-text);
}
.ct-guide-bio p {
    margin: 0 0 0.45rem;
}

.ct-guide-ctas {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.6rem;
}

.ct-guide-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.55rem 1.05rem;
    border-radius:   var(--ct-radius-xs);
    background:      transparent;
    border:          1.5px solid rgba(13,148,136,0.28);
    color:           var(--ct-jade-dark);
    font-size:       0.85rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background  var(--ct-duration) var(--ct-ease),
                     border-color var(--ct-duration) var(--ct-ease),
                     transform   var(--ct-duration) var(--ct-ease);
    min-height:      40px;
}
.ct-guide-btn:hover {
    background:   rgba(13,148,136,0.07);
    border-color: var(--ct-jade);
    color:        var(--ct-jade-dark);
    transform:    translateY(-1px);
}
.ct-guide-btn:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 2px;
}

.ct-guide-btn-message {
    border-color: rgba(245,158,11,0.35);
    color:        var(--ct-terra);
}
.ct-guide-btn-message:hover {
    background:   rgba(245,158,11,0.07);
    border-color: var(--ct-amber);
    color:        var(--ct-terra);
}


/* ============================================================
   18. TRANSLATIONS — language tab panel
   ============================================================ */
.ct-place-translations {
    margin-bottom: 2.5rem;
}

/* Override general card hover for this content-heavy card */
.ct-place-translations .ct-place-card:hover {
    transform:  none;
}

.ct-place-lang-tabs {
    display:                   flex;
    gap:                       0.4rem;
    margin-bottom:             1.25rem;
    overflow-x:                auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:           none;
    padding-bottom:            2px;  /* prevent focus-ring clipping */
}
.ct-place-lang-tabs::-webkit-scrollbar {
    display: none;
}

.ct-place-lang-tab {
    padding:         0.4rem 1.1rem;
    border:          1.5px solid var(--ct-border);
    border-radius:   var(--ct-radius-pill);
    background:      var(--ct-bg);
    color:           var(--ct-text-muted);
    font-size:       0.82rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background  var(--ct-duration) var(--ct-ease),
                     border-color var(--ct-duration) var(--ct-ease),
                     color       var(--ct-duration) var(--ct-ease),
                     transform   var(--ct-duration) var(--ct-ease);
    white-space:     nowrap;
    font-family:     inherit;
    min-height:      36px;
}
.ct-place-lang-tab:hover {
    border-color: var(--ct-jade);
    color:        var(--ct-jade-dark);
    transform:    translateY(-1px);
}
.ct-place-lang-tab.active {
    background:   var(--ct-jade);
    border-color: var(--ct-jade);
    color:        #fff;
    box-shadow:   0 4px 12px -4px rgba(13,148,136,0.40);
}
.ct-place-lang-tab:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 2px;
}

.ct-place-lang-content {
    display: none;
}
.ct-place-lang-content.active {
    display:   block;
    animation: ct-fade-in 0.2s var(--ct-ease) both;
}

@keyframes ct-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ct-place-trans-name {
    font-size:      1.05rem;
    font-weight:    700;
    margin:         0 0 0.5rem;
    color:          var(--ct-ink);
    letter-spacing: -0.01em;
}

.ct-place-trans-desc {
    font-size:   0.93rem;
    line-height: 1.65;
    margin:      0 0 0.85rem;
    color:       var(--ct-text);
}

.ct-place-trans-source {
    display:        inline-block;
    padding:        0.22rem 0.7rem;
    border-radius:  var(--ct-radius-pill);
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ct-place-trans-source-manual {
    background: rgba(22,163,74,0.08);
    color:      #166534;
    border:     1px solid rgba(22,163,74,0.20);
}
.ct-place-trans-source-ai {
    background: rgba(245,158,11,0.08);
    color:      var(--ct-terra);
    border:     1px solid rgba(245,158,11,0.22);
}


/* ============================================================
   19. SHARE BAR
   ============================================================ */
.ct-place-share {
    text-align:    center;
    padding:       2.5rem 0 1rem;
    border-top:    1px solid var(--ct-border);
    margin-top:    0.5rem;
}

.ct-place-share-title {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--ct-text-faint);
    margin-bottom:  1rem;
}

.ct-place-share-buttons {
    display:         flex;
    justify-content: center;
    gap:             0.65rem;
    flex-wrap:       wrap;
}

.ct-place-share-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.6rem 1.25rem;
    border-radius:   var(--ct-radius-pill);
    border:          1.5px solid var(--ct-border);
    background:      var(--ct-card);
    color:           var(--ct-text-muted);
    font-size:       0.84rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background  var(--ct-duration) var(--ct-ease),
                     border-color var(--ct-duration) var(--ct-ease),
                     color       var(--ct-duration) var(--ct-ease),
                     transform   var(--ct-duration) var(--ct-ease),
                     box-shadow  var(--ct-duration) var(--ct-ease);
    font-family:     inherit;
    min-height:      40px;
}
.ct-place-share-btn:hover {
    border-color: var(--ct-jade);
    color:        var(--ct-jade-dark);
    background:   rgba(13,148,136,0.04);
    transform:    translateY(-2px);
    box-shadow:   var(--ct-shadow-xs);
}
.ct-place-share-btn:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 2px;
}

.ct-place-share-wa:hover {
    border-color: var(--ct-whatsapp);
    color:        #158f46;
    background:   rgba(37,211,102,0.05);
}


/* ============================================================
   20. SCROLL-REVEAL ANIMATION
   Cards are VISIBLE by default (progressive enhancement).
   The template's inline <script> can optionally add `.ct-js-reveal`
   to `.ct-place-detail` to activate staggered entry animations.
   This avoids hidden content when JS is absent or delayed.
   ============================================================ */

/* Base state: always visible */
.ct-place-card,
.ct-exp-booking,
.ct-guide-card {
    transition: box-shadow var(--ct-duration) var(--ct-ease),
                transform  var(--ct-duration) var(--ct-ease);
}

/* Enhanced state: activated by adding .ct-js-reveal to .ct-place-detail */
.ct-js-reveal .ct-place-card,
.ct-js-reveal .ct-exp-booking,
.ct-js-reveal .ct-guide-card {
    opacity:   0;
    transform: translateY(22px);
    transition: opacity 0.55s var(--ct-ease),
                transform 0.55s var(--ct-ease),
                box-shadow var(--ct-duration) var(--ct-ease);
}

.ct-js-reveal .ct-place-card.ct-revealed,
.ct-js-reveal .ct-exp-booking.ct-revealed,
.ct-js-reveal .ct-guide-card.ct-revealed {
    opacity:   1;
    transform: translateY(0);
}

/* Cascade delays — nth siblings (only active in js-reveal mode) */
.ct-js-reveal .ct-place-left  > .ct-place-card:nth-child(2) { transition-delay: 0.06s; }
.ct-js-reveal .ct-place-left  > .ct-place-card:nth-child(3) { transition-delay: 0.12s; }
.ct-js-reveal .ct-place-left  > .ct-place-card:nth-child(4) { transition-delay: 0.18s; }
.ct-js-reveal .ct-place-left  > .ct-place-card:nth-child(5) { transition-delay: 0.24s; }
.ct-js-reveal .ct-place-right > .ct-place-card:nth-child(2) { transition-delay: 0.08s; }
.ct-js-reveal .ct-place-right > .ct-place-card:nth-child(3) { transition-delay: 0.14s; }


/* ============================================================
   21. MISCELLANEOUS MODIFIER CLASSES
   ============================================================ */

/* Guide photo placeholder (no image uploaded) */
.ct-guide-photo-placeholder {
    background: linear-gradient(135deg,
        rgba(13,148,136,0.12),
        rgba(245,158,11,0.09));
    color: var(--ct-jade);
}

/* Section-card semantic modifiers — inherit base .ct-place-card styles,
   minor palette shifts for category identity */
.ct-place-access {
    border-left: 3px solid rgba(13,148,136,0.35);
}
.ct-place-pay {
    border-left: 3px solid rgba(245,158,11,0.35);
}
.ct-place-amenities {
    border-left: 3px solid rgba(139,92,246,0.30);
}

/* Share copy-link button — inherits .ct-place-share-btn,
   no extra styling needed but selector ensures coverage */
.ct-place-share-copy {
    /* shares all .ct-place-share-btn styles — override only if needed */
}


/* ============================================================
   22. INLINE SCRIPT (Leaflet reveal trigger)
       JavaScript handles `.ct-revealed` class via IntersectionObserver
       defined in the template's <script> block.
       These CSS rules provide the animation baseline.
   ============================================================ */


/* ============================================================
   22. RESPONSIVE — MOBILE FIRST
   ============================================================ */

/* --- Tablet (≤1024px): compress right col --- */
@media (max-width: 1024px) {
    .ct-place-grid {
        grid-template-columns: 1fr 340px;
    }
    .ct-place-right {
        position: static;   /* un-sticky at tablet */
    }
}

/* --- Small tablet / large phone (≤768px) --- */
@media (max-width: 768px) {
    .ct-place-detail {
        width:   100%;
        padding: 0 0 3rem;
    }

    .ct-place-grid {
        grid-template-columns: 1fr;
        gap:                   1.5rem;
    }

    /* Right column moves below on mobile — map/contact first */
    .ct-place-right {
        order: -1;
    }

    .ct-place-hero {
        height:        clamp(220px, 45vw, 320px);
        border-radius: var(--ct-radius-sm);
    }

    .ct-place-title-section {
        padding:       1.25rem 1.25rem 1.5rem;
        border-radius: 0 0 var(--ct-radius-sm) var(--ct-radius-sm);
    }
    .ct-place-title-section::before {
        left:  1.25rem;
    }

    .ct-place-card {
        padding:       1.35rem;
        border-radius: var(--ct-radius-sm);
    }

    .ct-exp-booking {
        padding: 1.5rem;
    }
    .ct-exp-booking-header {
        flex-direction: column;
        gap:            0.6rem;
    }
    .ct-exp-price-amount {
        font-size: 1.75rem;
    }
    .ct-exp-meta {
        grid-template-columns: 1fr 1fr;
    }

    .ct-guide-card {
        grid-template-columns: 80px 1fr;
        gap:                   1.25rem;
        padding:               1.5rem;
    }
    .ct-guide-photo {
        width:  80px;
        height: 80px;
    }

    .ct-place-social-grid {
        gap: 0.5rem;
    }
    .ct-place-social-btn {
        width:  44px;
        height: 44px;
    }
}

/* --- Phone (≤480px) --- */
@media (max-width: 480px) {
    .ct-place-back {
        padding-top: 0.65rem;
    }

    .ct-place-hero {
        height: 200px;
    }

    .ct-place-title-section h1 {
        font-size: 1.45rem;
    }

    .ct-place-breadcrumb {
        font-size: 0.74rem;
    }

    .ct-guide-card {
        grid-template-columns: 1fr;
        text-align:            center;
    }
    .ct-guide-photo {
        margin:         0 auto 0.5rem;
        width:          96px;
        height:         96px;
    }
    .ct-guide-ctas {
        justify-content: center;
    }

    .ct-exp-meta {
        grid-template-columns: 1fr;
    }

    .ct-place-share-buttons {
        flex-direction: column;
        align-items:    center;
    }

    .ct-place-chips {
        gap: 0.4rem;
    }
    .ct-place-chip {
        font-size: 0.76rem;
        padding:   0.35rem 0.75rem;
    }
}


/* ============================================================
   23. ACCESSIBILITY + REDUCED MOTION
   ============================================================ */

/* Ensure all interactive elements have visible focus */
a:focus-visible,
button:focus-visible {
    outline:        2px solid var(--ct-jade);
    outline-offset: 3px;
    border-radius:  4px;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }

    /* Kill scroll-reveal animation in reduced-motion mode */
    .ct-js-reveal .ct-place-card,
    .ct-js-reveal .ct-exp-booking,
    .ct-js-reveal .ct-guide-card {
        opacity:   1   !important;
        transform: none !important;
    }

    .ct-place-hero img {
        transition: none;
    }
}

/* =========================================================================
   SITE CHROME — Cassiopeia header harmonised with the "Milpa Digital" palette.
   (1) Hides the sitewide topbar mod_login form that dominated the top of every
       view and buried the hero. (2) Recolours the default indigo header band
       (#112855) to deep jade with cream Fraunces title. Literal hex so the block
       is self-contained regardless of which file's :root is present. CAL-271.
   ========================================================================= */
body.com_cultouring .container-topbar { display: none !important; }

body.com_cultouring header.container-header,
body.com_cultouring header.header {
    background: linear-gradient(180deg, #0c3a38 0%, #114c4c 100%) !important;
    border-bottom: 1px solid rgba(196, 144, 26, 0.30);
    box-shadow: 0 2px 18px -8px rgba(0, 0, 0, 0.45);
}
body.com_cultouring .navbar-brand .brand-logo,
body.com_cultouring .navbar-brand .brand-logo span {
    color: #F5F0E8 !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-decoration: none !important;
}
body.com_cultouring .navbar-brand .site-description {
    color: rgba(245, 240, 232, 0.74) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-style: italic;
}
body.com_cultouring .container-nav .mod-menu > li > a {
    color: #F5F0E8 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 500;
}
body.com_cultouring .container-nav .mod-menu > li > a:hover,
body.com_cultouring .container-nav .mod-menu > li.current > a {
    color: #d9a52e !important;
}

/* No-JS / crawler safety: if scripting is unavailable the IntersectionObserver
   never runs, so reveal all .ct-reveal content rather than leave it at opacity:0
   forever. Real users with JS still get the animated reveal. CAL-271. */
@media (scripting: none) {
    .ct-reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   BP-21 — "Scan to view in AR" QR card on the place ficha.
   A printable QR encoding the place URL; scanning it on a phone opens the
   ficha where model-viewer launches native AR. Milpa palette, print-friendly.
   ========================================================================= */
.ct-place-ar-qr {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, #F5F0E8 0%, #ffffff 100%);
    border: 1px solid rgba(28, 92, 82, 0.18);
    border-radius: 14px;
}
.ct-place-ar-qr-code {
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    background: #fff;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ct-place-ar-qr-code svg { display: block; width: 100%; height: 100%; }
.ct-place-ar-qr-body { flex: 1 1 auto; min-width: 0; }
.ct-place-ar-qr-title {
    margin: 0 0 0.25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #143C36;
}
.ct-place-ar-qr-hint {
    margin: 0 0 0.6rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #5C4A3A;
}
.ct-place-ar-qr-print {
    appearance: none;
    border: 1px solid #1C5C52;
    background: transparent;
    color: #1C5C52;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ct-place-ar-qr-print:hover { background: #1C5C52; color: #F5F0E8; }

/* Print: show ONLY the QR card (artisan prints it for the stall/product). */
@media print {
    body * { visibility: hidden !important; }
    .ct-place-ar-qr, .ct-place-ar-qr * { visibility: visible !important; }
    .ct-place-ar-qr {
        position: absolute; top: 0; left: 0; width: 100%;
        border: none; background: #fff;
    }
    .ct-place-ar-qr-print { display: none !important; }
}

/* =========================================================================
   Fase 3 — Reviews & ratings on the place ficha (Milpa palette).
   ========================================================================= */
.ct-reviews-summary { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ct-reviews-avg { text-align: center; flex: 0 0 auto; }
.ct-reviews-avg-num { font-family: 'Fraunces', Georgia, serif; font-size: 2.8rem; font-weight: 700; color: #143C36; line-height: 1; }
.ct-reviews-count { font-size: 0.82rem; color: #6b5a48; margin-top: 0.25rem; }
.ct-review-stars { letter-spacing: 1px; }
.ct-review-star { color: #d9d0c4; font-size: 1.1rem; }
.ct-review-star.is-on { color: #C4901A; }
.ct-reviews-dist { flex: 1 1 220px; min-width: 200px; }
.ct-reviews-dist-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #5C4A3A; margin: 2px 0; }
.ct-reviews-dist-label { width: 28px; text-align: right; }
.ct-reviews-dist-bar { flex: 1 1 auto; height: 8px; background: #ece5da; border-radius: 999px; overflow: hidden; }
.ct-reviews-dist-bar span { display: block; height: 100%; background: linear-gradient(90deg, #C4901A, #d9a52e); }
.ct-reviews-dist-c { width: 28px; }
.ct-reviews-list { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.ct-review { padding: 1rem 0; border-top: 1px solid #ece5da; }
.ct-review-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.ct-review-author { font-weight: 600; color: #143C36; }
.ct-review-date { font-size: 0.78rem; color: #9A8A78; }
.ct-review-title { font-weight: 600; margin: 0.4rem 0 0.2rem; color: #2E2419; }
.ct-review-comment { margin: 0.2rem 0 0; color: #5C4A3A; line-height: 1.55; }
.ct-reviews-empty, .ct-reviews-login { color: #6b5a48; font-style: italic; }
.ct-review-form { margin-top: 1.2rem; padding: 1.2rem; background: #F5F0E8; border-radius: 14px; }
.ct-review-form-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; color: #143C36; margin: 0 0 0.8rem; }
.ct-review-input { display: block; width: 100%; margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid #d9d0c4; border-radius: 10px; font: inherit; background: #fff; }
.ct-review-input:focus { outline: none; border-color: #1C5C52; box-shadow: 0 0 0 3px rgba(28,92,82,0.12); }
/* Star rating: reverse-row radios so hover/checked light up left-to-right */
.ct-review-form-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; margin-bottom: 0.8rem; }
.ct-review-form-rating input { position: absolute; opacity: 0; width: 0; }
.ct-review-form-rating label { font-size: 1.9rem; color: #d9d0c4; cursor: pointer; padding: 0 2px; transition: color 0.15s; }
.ct-review-form-rating label:hover,
.ct-review-form-rating label:hover ~ label,
.ct-review-form-rating input:checked ~ label { color: #C4901A; }
.ct-review-submit { appearance: none; border: 0; background: #C8583A; color: #fff; font: inherit; font-weight: 600; padding: 0.6rem 1.4rem; border-radius: 999px; cursor: pointer; transition: background 0.2s; }
.ct-review-submit:hover { background: #a8431f; }
.ct-review-moderation-note { font-size: 0.76rem; color: #9A8A78; margin: 0.5rem 0 0; }