/* ============================================================
   Studio By Cote cPanel theme
   Paleta negro / fucsia / blanco aplicada solo a public-site.
   No cambia logica JS, endpoints n8n ni payloads.
   ============================================================ */
:root {
    --color-bg: #050505;
    --color-bg-soft: #111111;
    --color-card: #151515;
    --color-card-soft: #1C1C1C;
    --color-fuchsia: #FF0A8A;
    --color-fuchsia-dark: #C6006F;
    --color-fuchsia-soft: rgba(255, 10, 138, 0.18);
    --color-white: #FFFFFF;
    --color-text: #F5F5F5;
    --color-muted: #CFCFCF;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-shadow: rgba(255, 10, 138, 0.25);

    --primary: var(--color-fuchsia);
    --secondary: var(--color-fuchsia-dark);
    --soft: #FF8FC4;
    --white: var(--color-white);
    --accent: var(--color-fuchsia);
    --bg-dark: var(--color-bg);
    --bg-light: var(--color-bg-soft);
    --pink-accent: var(--color-fuchsia);
    --pink-light: #FF8FC4;
    --glass-bg: rgba(21, 21, 21, 0.76);
    --glass-border: var(--color-border);
    --text-main: var(--color-text);
    --text-dim: var(--color-muted);
    --shadow-pink: 0 18px 45px rgba(0, 0, 0, 0.48), 0 0 28px var(--color-shadow);
}

html {
    background: var(--color-bg);
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 10, 138, 0.16), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(255, 10, 138, 0.08), transparent 24%),
        linear-gradient(180deg, var(--color-bg) 0%, #080808 48%, var(--color-bg) 100%) !important;
    color: var(--color-text) !important;
}

body,
p,
li,
span,
label,
input,
select,
textarea,
button {
    color: var(--color-text);
}

a {
    color: inherit;
}

.text-soft,
.muted,
.text-muted,
.subtitle,
.hero-subtitle,
.productos-page-subtitle,
.rg-subtitle,
.t-meta,
.sv-meta,
.cart-empty,
.pill {
    color: var(--color-muted) !important;
}

.text-primary,
.section-title,
.cat-header,
.cat-price,
.modal-product-price,
.rg-service-name,
.rg-back-link,
.rg-datetime-split h3 i,
.address-box i {
    color: var(--color-fuchsia) !important;
}

.section-title {
    text-shadow: 0 0 18px rgba(255, 10, 138, 0.35) !important;
}

.section-title::after,
.product-swiper .swiper-pagination-bullet-active {
    background: var(--color-fuchsia) !important;
    box-shadow: 0 0 14px var(--color-shadow) !important;
}

/* Navigation */
.navbar,
.rg-navbar {
    background: rgba(5, 5, 5, 0.86) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

.nav-links a,
.rg-back-link {
    color: var(--color-text) !important;
}

.nav-links a:hover,
.rg-back-link:hover {
    color: var(--color-fuchsia) !important;
    text-shadow: 0 0 12px var(--color-shadow) !important;
}

.nav-logo img,
.navbar-logo-img,
.rg-logo img {
    border-color: var(--color-fuchsia) !important;
    box-shadow: 0 0 16px var(--color-shadow) !important;
}

@media (max-width: 860px) {
    .nav-links {
        background: rgba(5, 5, 5, 0.96) !important;
        border-bottom: 1px solid var(--color-fuchsia) !important;
    }
}

/* Buttons */
.btn-primary,
.btn-secondary,
.pc-cta,
.reservation-cta-button,
.promotion-link,
.glass-btn,
.sv-toggle,
.sv-info-btn,
.cart-remove,
.time-slot-btn:not(:disabled),
.rg-slot-btn:not(:disabled),
.btn-website {
    border-color: rgba(255, 10, 138, 0.58) !important;
}

.btn-primary,
.pc-cta,
.reservation-cta-button,
.glass-btn {
    background: linear-gradient(135deg, var(--color-fuchsia), var(--color-fuchsia-dark)) !important;
    color: var(--color-white) !important;
    box-shadow: 0 12px 30px var(--color-shadow) !important;
}

.btn-primary:hover:not(:disabled),
.pc-cta:hover,
.reservation-cta-button:hover,
.glass-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 16px 38px rgba(255, 10, 138, 0.36) !important;
}

.btn-secondary,
.btn-website,
.promotion-link {
    background: var(--color-fuchsia-soft) !important;
    color: var(--color-white) !important;
    border: 1px solid rgba(255, 10, 138, 0.62) !important;
}

.btn-secondary:hover,
.btn-website:hover,
.promotion-link:hover {
    background: rgba(255, 10, 138, 0.28) !important;
    color: var(--color-white) !important;
    box-shadow: 0 0 24px var(--color-shadow) !important;
}

button:disabled,
.glass-btn:disabled {
    background: #2a2a2a !important;
    color: #9f9f9f !important;
    box-shadow: none !important;
}

/* Cards and sections */
.product-card,
.team-selector-btn,
.mj-info-col,
.loc-card,
.products-preview-card,
.cert-card,
.promotion-card,
.reservation-cta-card,
.reservation-step,
.sv-row,
.sum-card,
.cart-box,
.rv-card,
.upload-box,
.file-preview,
.detail-panel,
.rg-glass-card,
.rg-services-list,
.rg-service-item,
.rg-summary-box,
.cat-card,
.modal-inner,
.t-card,
.services-list,
.card-container {
    background: linear-gradient(145deg, rgba(28, 28, 28, 0.94), rgba(10, 10, 10, 0.96)) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.44), 0 0 22px rgba(255, 10, 138, 0.09) !important;
}

.product-card:hover,
.promotion-card:hover,
.reservation-step:hover,
.cat-card:hover,
.team-selector-btn:hover,
.team-selector-btn.is-active,
.specialist-card:hover,
.specialist-card.selected,
.sv-row:hover,
.sv-row.sv-selected {
    border-color: rgba(255, 10, 138, 0.72) !important;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.54), 0 0 28px var(--color-shadow) !important;
}

.team-section,
.cert-section,
.promotions-section,
.reservation-cta-section,
.productos-page-header,
.rg-main {
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 10, 138, 0.13), transparent 32%),
        linear-gradient(180deg, var(--color-bg) 0%, #090909 100%) !important;
    border-color: var(--color-border) !important;
}

.hero::before,
.team-video-overlay,
.reservation-video-overlay {
    background:
        linear-gradient(180deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.5), rgba(5, 5, 5, 0.84)),
        radial-gradient(circle at 50% 32%, rgba(255, 10, 138, 0.17), transparent 58%) !important;
}

.hero-title,
.brand-name,
.productos-page-title,
.rg-title,
.mj-info-col h3 {
    color: var(--color-white) !important;
    text-shadow: 0 0 18px rgba(255, 10, 138, 0.42) !important;
}

.hero-title span,
.tagline,
.reservation-cta-kicker,
.reservation-step-number,
.promotion-content h3,
.modal-product-title,
.cat-title,
.t-user {
    color: var(--color-white) !important;
}

.promotion-content p,
.reservation-step p,
.reservation-cta-heading p,
.pc-desc,
.modal-product-desc,
.mj-info-col .mj-bio,
.specialist-card p,
.cat-content p {
    color: var(--color-muted) !important;
}

/* Reservation flow */
.specialist-card {
    background: rgba(21, 21, 21, 0.88) !important;
    border: 1px solid var(--color-border) !important;
}

.specialist-card::before {
    box-shadow: inset 0 0 24px var(--color-shadow) !important;
}

.sp-avatar {
    border-color: rgba(255, 10, 138, 0.48) !important;
    background: #0b0b0b !important;
}

.sv-row {
    background: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
}

.sv-row.sv-selected {
    background: linear-gradient(145deg, rgba(255, 10, 138, 0.24), rgba(21, 21, 21, 0.96)) !important;
    border: 1px solid var(--color-fuchsia) !important;
}

.sv-row *,
.sum-card *,
.rg-glass-card *,
.modal-inner * {
    color: inherit;
}

.time-slot,
.time-slot-btn,
.rg-slot-btn {
    background: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

.time-slot:hover,
.time-slot.selected,
.time-slot-btn:hover,
.time-slot-btn.ts-selected,
.rg-slot-btn:hover:not(:disabled),
.rg-slot-btn.selected {
    background: var(--color-fuchsia) !important;
    border-color: var(--color-fuchsia) !important;
    color: var(--color-white) !important;
    box-shadow: 0 0 18px var(--color-shadow) !important;
}

.time-slot:disabled,
.time-slot-btn:disabled,
.rg-slot-btn:disabled {
    background: #0b0b0b !important;
    color: #737373 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    opacity: 1 !important;
}

.summary-card,
.sum-card {
    background: var(--color-card) !important;
    border: 1px solid rgba(255, 10, 138, 0.45) !important;
}

/* Forms and calendars */
input,
select,
textarea,
.rg-calendar-input {
    background: #090909 !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-white) !important;
}

input::placeholder,
textarea::placeholder {
    color: #8d8d8d !important;
}

input:focus,
select:focus,
textarea:focus,
.rg-calendar-input:focus {
    outline: none !important;
    border-color: var(--color-fuchsia) !important;
    box-shadow: 0 0 0 3px var(--color-fuchsia-soft) !important;
}

.flatpickr-calendar {
    background: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 24px var(--color-shadow) !important;
}

.flatpickr-months,
.flatpickr-weekdays {
    background: #0b0b0b !important;
}

.flatpickr-day {
    color: var(--color-text) !important;
}

.flatpickr-day:hover,
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.today {
    background: var(--color-fuchsia) !important;
    border-color: var(--color-fuchsia) !important;
    color: var(--color-white) !important;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #5c5c5c !important;
    background: transparent !important;
}

/* Product page */
.cat-card-wrap::after {
    background: linear-gradient(to bottom, rgba(255, 10, 138, 0.1), transparent) !important;
}

.cat-img-box,
.modal-gallery-viewer {
    background: #090909 !important;
}

.modal-gallery {
    background: rgba(5, 5, 5, 0.96) !important;
}

.modal-close,
.modal-nav {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-white) !important;
}

.modal-close:hover,
.modal-nav:hover {
    background: var(--color-fuchsia) !important;
    color: var(--color-white) !important;
}

/* Digital card */
.card-container {
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 10, 138, 0.2), transparent 30%),
        linear-gradient(150deg, #050505 0%, #151515 58%, #0b0b0b 100%) !important;
}

.texture-overlay {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 10, 138, 0.13) 0%, transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 20%) !important;
}

.profile-img {
    border-color: var(--color-fuchsia) !important;
    background-color: var(--color-card) !important;
    box-shadow: 0 0 32px var(--color-shadow) !important;
}

/* Keep brand social colors readable but premium */
.btn-instagram,
.btn-whatsapp,
.btn-tiktok {
    color: var(--color-white) !important;
}

/* Responsive safety */
@media (max-width: 768px) {
    .section {
        padding: 56px 0;
    }

    .hero-content {
        margin-top: 76px;
    }

    .reservation-cta-action {
        padding-right: 0 !important;
    }

    .rg-glass-card {
        padding: 1.4rem !important;
    }
}