/* ==========================================================================
    artroscopia-hombro.css — Page-specific styles for artroscopia/artroscopia-hombro.html
   Shared base styles come from ../styles.css
   ========================================================================== */

/* ------------------------------------------------------------------
   1. HERO — clear the fixed header & light-theme overrides
   ------------------------------------------------------------------ */

/* Light-theme hero: starts below the fixed navbar (~100px) */
.hero-b--light {
    background-image: none !important;
    background-color: #f8fafc !important; /* Shoulder light slate theme */
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.hero-b--light::before {
    display: none !important;
}

/* Light blobs inside hero */
.hero-bg-base {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, #d2e1f0 0%, #e8f1fa 50%, #ffffff 100%);
    z-index: 1;
}

.hero-bg-blobs {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.hero-light-blob {
    position: absolute;
    opacity: 0.45;
    animation: lightBlobPulse 10s infinite alternate ease-in-out;
    filter: none !important;
    border-radius: 0 !important;
}

.blob-teal   { width:900px; height:900px; background:radial-gradient(circle,#a5f3fc,transparent 70%); right:-5%; top:-10%; }
.blob-blue   { width:1000px; height:1000px; background:radial-gradient(circle,#bfdbfe,transparent 70%); right:-18%; bottom:-10%; animation-delay:-3s; }
.blob-brand-slate { width:850px; height:850px; background:radial-gradient(circle,#bcc2d3,transparent 70%); left:-8%; top:2%; animation-delay:-5s; }
.blob-cyan   { width:780px; height:780px; background:radial-gradient(circle,#cffafe,transparent 70%); left:15%; bottom:-15%; animation-delay:-7s; }

@keyframes lightBlobPulse {
    0%   { transform: scale(1) translate(0,0); }
    100% { transform: scale(1.2) translate(20px,-20px); }
}

/* Hero background cutout (athlete image) */
.hero-bg-cutout {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-image: url('../../Assets/artroscopia de hombro en tijuana.webp') !important;
    background-repeat: no-repeat !important;
    background-size: auto 90% !important;
    background-position: right center !important;
    pointer-events: none;
}

/* Light overlay for readability over athlete photo */
.hero-overlay--light {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.65) 35%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(1000px 500px at 50% 100%, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0.82) 75%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(to top, #ffffff 0px, rgba(255, 255, 255, 0) 100px) !important;
    pointer-events: none;
}

/* Title colours on light hero */
.hero-b--light .hero-b-title {
    color: #162030;
}

.hero-b--light .hero-b-desc {
    color: rgba(22, 32, 48, 0.72);
}

.hero-b--light .hero-rating-clean {
    color: #162030;
}

.hero-b--light .doctoralia-rating-logo {
    filter: none;
    opacity: 1;
}

/* CTA button on light hero */
.hero-b--light .btn-fitflow {
    background: #162030;
    color: #ffffff;
}
.hero-b--light .btn-fitflow:hover {
    background: #1e2f48;
}
.hero-b--light .btn-fitflow-circle {
    background-color: var(--primary);
}
.hero-b--light .btn-fitflow:hover .btn-fitflow-circle {
    background-color: var(--primary-hover);
}

.hero-dr-card {
    background: rgba(255,255,255,0.28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    border-radius: 24px;
    padding: clamp(0.75rem, 1.85vh, 1.25rem);
    box-shadow: 0 8px 32px 0 rgba(15,23,42,0.05) !important;
    width: 100%;
    max-width: clamp(220px, 34vh, 370px);
    margin-bottom: clamp(1rem, 3.35vh, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.7vh, 1.15rem);
    animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.05s;
    will-change: transform, opacity;
}

.hero-dr-image-container {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1.15;
    background-color: #f1f5f9;
}

.hero-dr-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.hero-dr-card:hover .hero-dr-card-img { transform: scale(1.03); }

.hero-dr-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0.25rem;
}

.dr-card-name {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #162030;
}

.dr-card-specialty {
    font-size: 0.85rem;
    color: rgba(22,32,48,0.6);
}

.hero-dr-card .hero-rating-clean {
    margin-bottom: 0;
    font-size: 0.82rem;
    gap: 0.5rem;
}
.hero-dr-card .hero-rating-clean .stars { color: #f59e0b; font-size: 0.95rem; }
.hero-dr-card .rating-text { color: rgba(22,32,48,0.75); }
.hero-dr-card .doctoralia-rating-logo { height: 16px; filter: none; opacity: 0.9; }

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

.breadcrumbs a { color: rgba(22,32,48,0.78); text-decoration: none; transition: color 0.2s; }
.breadcrumbs a:hover { color: #162030; }
.breadcrumbs .breadcrumb-separator { color: rgba(22,32,48,0.55); }
.breadcrumbs .breadcrumb-current { color: #162030; font-weight: 600; }

/* ------------------------------------------------------------------
   2. LOCATION STRIP
   ------------------------------------------------------------------ */

.location-strip {
    background: var(--bg-darker);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 40px 24px;
    display: flex;
    justify-content: center;
}

.location-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.location-card-logo {
    height: 90px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.location-card-text { display:flex; flex-direction:column; gap:6px; }

.location-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}

.location-card-sub {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.location-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: var(--transition);
}
.location-card-cta svg { width:14px; height:14px; transition: transform 0.2s ease; }
.location-card-cta:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); }
.location-card-cta:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------
   3. EXPLAINER SECTION (artr-*)
   ------------------------------------------------------------------ */

.artr-explainer {
    background-color: var(--bg-darker);
    padding: 100px 0;
}

.artr-explainer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-rows: auto auto;
    gap: 0 64px;
    align-items: start;
}

.artr-section-header {
    grid-column: 1 / -1;
    margin-bottom: 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.artr-eyebrow {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.artr-section-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px,3.2vw,46px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 20px;
}

.artr-section-sub {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 560px;
    text-align: center;
}

.artr-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.1) 85%, transparent 100%);
}

.artr-col-img-wrap {
    position: relative;
    margin-bottom: 32px;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.artr-col-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.artr-col-img-wrap:hover .artr-col-img { transform: scale(1.03); }

.artr-col-img-label {
    position: absolute;
    bottom: 14px; left: 14px;
    background: rgba(12,18,27,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--primary-light);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.artr-col-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(83,102,125,0.18);
    border: 1px solid rgba(83,102,125,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--primary-light);
}
.artr-col-icon svg { width:22px; height:22px; }

.artr-col-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(22px,2vw,28px);
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 20px;
}

.artr-col-body {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 16px;
}

.artr-col-bullets {
    list-style: none;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.artr-col-bullets li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--primary-light);
    font-weight: 500;
}

.artr-indicators { margin-top:28px; display:flex; flex-direction:column; gap:24px; }
.artr-indicator { display:flex; gap:18px; align-items:flex-start; }
.artr-indicator strong { display:block; font-size:14px; font-weight:600; color:#ffffff; margin-bottom:4px; }
.artr-indicator p { font-size:13px; color:var(--text-muted); line-height:1.6; margin:0; }
.indicator-num { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:700; color:var(--primary-light); line-height:1; flex-shrink:0; }

/* ------------------------------------------------------------------
   4. RESPONSIVE OVERRIDES
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
    .hero-b--light {
        height: auto;
        min-height: 100dvh; /* Swapped 100vh -> 100dvh to account for Safari toolbars */
        padding-top: 100px;
        align-items: center;
        display: flex;
    }

    .hero-b--light .hero-b-bottom {
        display: flex !important; /* Force flexbox to avoid grid rendering quirks on iOS */
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 3rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .hero-b--light .hero-b-left,
    .hero-b--light .hero-b-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important; /* Enforce container limits to prevent horizontal scrollbars */
        box-sizing: border-box;
    }

    .hero-b--light .hero-b-desc { display: none !important; }

    .hero-dr-card { max-width: 280px; }

    .artr-explainer { padding: 70px 0; }
    .artr-explainer-inner { grid-template-columns: 1fr; gap: 56px 0; padding: 0 24px; }
    .artr-section-header { margin-bottom: 48px; }
    .artr-divider {
        width: 100%; height: 1px; align-self: auto;
        background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.1) 85%, transparent 100%);
    }

    .location-strip { padding: 20px 24px; }
}

@media (max-width: 576px) {
    .hero-b--light { padding-top: 120px; }
    .hero-dr-card { max-width: 100%; }
    .hero-b--light .hero-b-title {
        align-items: center !important;
    }
    .hero-b--light .hero-title-subtitle {
        margin-top: 0.5rem;
        max-width: 100%;
    }
}

/* Mobile performance: disable GPU-heavy blob animation and backdrop-filters */
@media (max-width: 768px) {
    .hero-bg-blobs,
    .hero-light-blob {
        display: none !important;
    }

    .hero-dr-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .artr-col-img-label {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(12, 18, 27, 0.82) !important;
    }
}