/* ============================
   GLOBAL
============================ */

body {
    margin: 0;
    font-family: 'Space Grotesk', Arial, sans-serif;
    color: white;
    background: #000;
}

/* ============================
   TRANZIȚIE ÎNTRE PAGINI
   Fade la intrare (CSS) + fade la ieșire (clasă adăugată din JS
   în header.php înainte de navigare). Oprit dacă prefers-reduced-motion.
============================ */
body {
    animation: pageFadeIn 0.35s ease both;
}

body.page-fade-out {
    animation: pageFadeOut 0.22s ease both;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pageFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ============================
   PORTAL PAGE
============================ */

.portal-body {
    background: #000;
}

.portal-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, #111 0%, #000 60%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: url("img/key-cursor.png") 4 4, pointer;
    text-decoration: none;
    color: inherit;
}

.portal-container:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: -6px;
}

.portal-ring {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 8px solid rgba(255, 140, 0, 0.7);
    box-shadow: 0 0 60px rgba(255, 140, 0, 1);
    animation: spin 5s linear infinite, pulse 2.5s ease-in-out infinite;
    filter: blur(1px);
}

.portal-core {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,140,0,1), rgba(0,0,0,0.8));
    box-shadow: 0 0 100px rgba(255, 140, 0, 1);
    animation: corePulse 3s ease-in-out infinite;
}


/* ANIMAȚII PORTAL */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes corePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(255,140,0,1); }
    50% { transform: scale(1.3); box-shadow: 0 0 120px rgba(255,140,0,1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================
   SUBNAV – MENIU INTERN
============================ */

.subnav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,140,0,0.3);
    position: sticky;
    top: 0;
    z-index: 50;
}

.subnav a {
    color: #ff8c00;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: 0.3s ease;
}

.subnav a:hover {
    background: rgba(255,140,0,0.2);
    box-shadow: 0 0 8px rgba(255,140,0,0.4);
}

/* ============================
   MAIN NAV
============================ */

.main-nav {
    width: 100%;
    background: #000;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    gap: 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.main-nav a {
    color: #ff8c00;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.main-nav a:hover {
    color: #ffa733;
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
    transform: translateY(-2px);
}

/* ============================
   HOME PAGE — CINEMATIC TRANSITION
============================ */

.home-scene {
    width: 100%;
    height: 100vh;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* IMAGINI SUPRAPUSE */

.home-scene.portal-cinematic .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* OVERLAY ÎNTUNECAT PESTE VIDEO — pentru lizibilitatea textului */
.home-scene.portal-cinematic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.38) 42%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

/* STRAT SUPLIMENTAR DE ÎNTUNECARE PROGRESIVĂ —
   opacitatea e controlată din JS pe măsură ce video-ul avansează spre final,
   ca imaginea de final să fie mult mai închisă (contrast maxim pentru text). */
.cinema-darken {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.97) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s linear;
}

/* TEXT PESTE VIDEO */
.hero-copy {
    position: absolute;
    z-index: 2;
    left: 7%;
    bottom: 11%;
    max-width: 640px;
}

.hero-copy h1 {
    font-family: 'Cinzel', 'DM Serif Display', serif;
    font-size: 4.2rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 24px;
    color: #d9d4c8;
    font-variant-caps: small-caps;
    -webkit-font-variant-caps: small-caps;
}

.hero-copy h1 .hl {
    color: #e8a13a;
}

.hero-copy p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #ddd;
    max-width: 560px;
    margin: 0 0 12px;
}

.hero-copy .tagline {
    margin-top: 22px;
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ff8c00;
}

@media (max-width: 900px) {
    .hero-copy { left: 5%; right: 5%; top: 16%; bottom: auto; max-width: none; }
    .hero-copy h1 { font-size: 2.5rem; margin-bottom: 16px; }
    .hero-copy p { font-size: 0.92rem; line-height: 1.5; margin-bottom: 8px; }
    .hero-copy .tagline { font-size: 1rem; margin-top: 14px; }
}

/* VIDEO DE INTRO (înlocuiește secvența de 4 poze) */
.home-scene.portal-cinematic video.video-frame {
    opacity: 0;
    animation: fadeInVideo 1s ease-in-out forwards;
    object-fit: cover;
    background-color: #000;
}

@keyframes fadeInVideo {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================
   PAGE CONTENT
============================ */

.page-scene {
    width: 100%;
    background: radial-gradient(circle at center, #1a0f00 0%, #000 80%);
    padding: 40px 40px;
    margin-top: 80px;
    color: #fff;
    /* Pulsul rulează doar câteva cicluri, apoi rămâne pe ultimul cadru —
       efectul se simte la intrarea pe pagină fără să consume resurse la nesfârșit
       cât timp utilizatorul citește. Complet oprit dacă prefers-reduced-motion. */
    animation: portalPulse 8s ease-in-out 3;
    animation-fill-mode: forwards;
}

/* Pagini cu subnav intern (Cum și de ce, Portofoliu): subnav-ul
   ocupă deja spațiu sub navbar, deci secțiunea nu mai are nevoie
   de margin-top-ul mare — altfel apare gol în plus în partea de sus. */
.subnav + .page-scene {
    margin-top: 14px;
}

@media (max-width: 768px) {
    .subnav + .page-scene {
        margin-top: 10px;
    }
}

@keyframes portalPulse {
    0%, 100% { background: radial-gradient(circle at center, #1a0f00 0%, #000 80%); }
    50% { background: radial-gradient(circle at center, #2a1500 0%, #000 80%); }
}

/* TITLURI CINEMATICE */

.page-title {
    color: #ff8c00;
    font-size: 2rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-shadow: 0 0 25px rgba(255,140,0,0.8);
}

.page-subtitle {
    color: #ffa64d;
    font-size: 1.6rem;
    margin-bottom: 25px;
    text-shadow: 0 0 25px rgba(255,140,0,0.8);
}

/* TEXT CINEMATIC PROFESIONIST */

.page-text {
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    color: #e6e6e6;
    line-height: 1.65;
    font-size: 1.15rem;
    margin-bottom: 26px;
    text-align: justify;
}

/* Paragrafe consecutive: fără spațiu între ele
   (cancelează gap-ul din .page-text de mai sus doar când urmează
   un alt paragraf; spațierea față de imagini/carduri rămâne neatinsă) */
.page-text + .page-text {
    margin-top: -26px;
}

/* CARDURI */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    width: 100%;
    max-width: 1150px;
    margin: 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.2);
    transition: 0.3s ease;
}

.card:hover {
    background: rgba(255, 140, 0, 0.1);
    transform: translateY(-5px);
}

.card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,140,0,0.15);
    color: #ff8c00;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.card:hover .card-num {
    background: rgba(255,140,0,0.3);
    transform: scale(1.08);
}

.card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

.card h3,
.card p {
    color: #e6e6e6 !important;
}

/* Carduri informative, NU clickabile — fără efect de ridicare la hover,
   ca să nu sugereze că se poate apăsa pe ele */
.info-card {
    background: rgba(255, 255, 255, 0.04);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255, 140, 0, 0.15);
}

.info-card h3 {
    color: #ff8c00 !important;
}

.info-card p {
    color: #e6e6e6 !important;
    margin-bottom: 0;
}

/* info-card e informativ, NU clickabil — anulăm hover-ul moștenit de la .card */
.info-card:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: none;
}

/* ============================
   FOOTER
============================ */

.footer {
    text-align: center;
    padding: 15px;
    background: #000;
    font-size: 0.8rem;
}

/* ============================
   REVELARE LA FINALUL FILMULUI (doar pe code2connect.php)
============================ */

.cinematic-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease;
}

.cinematic-hidden.reveal {
    opacity: 1;
    pointer-events: auto;
}

.hero-copy {
    opacity: 0;
    transition: opacity 1.2s ease 0.15s;
}

.hero-copy.reveal {
    opacity: 1;
}

/* ============================
   CTA GLOBAL (colț jos-dreapta, pe toate paginile)
============================ */

.global-cta {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 99998;
    background: #ff8c00;
    color: #000;
    padding: 16px 30px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.5);
    transition: 0.25s ease;
}

.global-cta:hover {
    background: #ffa733;
    box-shadow: 0 0 45px rgba(255, 140, 0, 0.8);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .global-cta {
        bottom: 16px;
        right: 16px;
        padding: 13px 22px;
        font-size: 0.85rem;
    }
}

/* ============================
   BACK BUTTON
============================ */

.back-btn {
    position: fixed;
    top: 13px;
    left: 20px;
    z-index: 99999;
    padding: 9px 16px;
    border-radius: 8px;
    background: rgba(255, 140, 0, 0.25);
    border: 2px solid rgba(255, 140, 0, 0.7);
    color: #ff8c00;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 1px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    box-shadow:
        0 0 20px rgba(255, 140, 0, 0.6),
        0 0 40px rgba(255, 140, 0, 0.4);
    transition: 0.25s ease;
    animation: backPulse 2.2s infinite ease-in-out;
}

.back-btn:hover {
    background: rgba(255, 140, 0, 0.35);
    box-shadow:
        0 0 30px rgba(255, 140, 0, 0.9),
        0 0 60px rgba(255, 140, 0, 0.6);
    transform: translateX(-4px) scale(1.05);
}

@keyframes backPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 140, 0, 0.6),
            0 0 40px rgba(255, 140, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 35px rgba(255, 140, 0, 1),
            0 0 70px rgba(255, 140, 0, 0.7);
        transform: scale(1.08);
    }
}

/* ============================
   CONTACT – LAYOUT PE DOUĂ COLOANE
============================ */

.contact-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1150px;
    margin: 30px auto 80px;
    align-items: stretch;
}

.contact-columns .contact-box-new {
    flex: 1 1 420px;
    margin: 0;
    max-width: none;
}

.contact-info-panel {
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-info-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,140,0,0.35);
    box-shadow: 0 0 24px rgba(255,140,0,0.2);
    position: relative;
}

.contact-info-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.08) contrast(1.06) brightness(0.94) sepia(0.08);
}

.contact-info-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,5,0,0.5) 0%, rgba(10,5,0,0) 40%);
    pointer-events: none;
}

.contact-direct {
    background: rgba(255,140,0,0.06);
    border: 1px solid rgba(255,140,0,0.3);
    border-radius: 14px;
    padding: 28px 30px;
}

.contact-direct h3 {
    color: #ff8c00;
    margin: 0 0 16px;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-direct a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 10px 0;
    transition: color 0.2s ease;
}

.contact-direct a:hover {
    color: #ff8c00;
}

.contact-direct a + a {
    border-top: 1px solid rgba(255,140,0,0.15);
}

.contact-direct .icon {
    font-size: 1.2rem;
}

@media (max-width: 900px) {
    .contact-columns {
        flex-direction: column;
    }
}

/* ============================
   CONTACT – FORM CINEMATIC
============================ */

.contact-box-new {
    background: radial-gradient(circle at top left, rgba(255,140,0,0.15), rgba(0,0,0,0.6));
    border: 1px solid rgba(255,140,0,0.4);
    border-radius: 14px;
    padding: 40px;
    max-width: 750px;
    margin: 20px auto 80px auto;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 40px rgba(255,140,0,0.25);
    animation: fadeInForm 1.2s ease-out forwards;
}

@keyframes fadeInForm {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group-new label {
    color: #ffa64d;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.form-group-new input,
.form-group-new textarea {
    background: rgba(255,255,255,0.05);
    color: #e6e6e6;
    border: 1px solid rgba(255,140,0,0.3);
    border-radius: 8px;
    padding: 14px;
    font-size: 1.05rem;
    transition: 0.3s ease;
}

.form-group-new input:focus,
.form-group-new textarea:focus {
    border-color: #ff8c00;
    box-shadow: 0 0 15px rgba(255,140,0,0.4);
    background: rgba(255,255,255,0.1);
}

.contact-btn-new {
    background: rgba(255,140,0,0.25);
    border: 1px solid rgba(255,140,0,0.6);
    color: #ff8c00;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease;
    width: fit-content;
    padding: 14px 24px;
}

.contact-btn-new:hover {
    background: rgba(255,140,0,0.35);
    box-shadow: 0 0 25px rgba(255,140,0,0.6);
    transform: translateY(-3px);
}

/* Structura de bază a formularului nu era stilată explicit
   (se baza pe comportamentul implicit de bloc) — o facem explicită
   ca rândul Nume/Email să stea cu adevărat unul lângă altul. */
.contact-form-new {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row-new {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.form-row-new .form-group-new {
    flex: 1 1 200px;
}

.form-group-new {
    display: flex;
    flex-direction: column;
}

.form-group-new input,
.form-group-new textarea {
    width: 100%;
}

/* ============================
   CONTACT — versiune landscape, fără scroll
   (poză + casetă „contactează-ne" mai scunde, formular mai
   compact, ca totul să încapă pe un ecran landscape obișnuit)
============================ */
.page-scene.contact-compact {
    padding: 10px 40px 12px;
    margin-top: 90px;
}

@media (max-width: 768px) {
    .page-scene.contact-compact {
        margin-top: 110px;
    }
}

.contact-compact .page-subtitle {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.contact-compact > .page-text {
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.contact-compact .contact-columns {
    max-width: 760px;
    margin: 8px auto 20px;
    gap: 22px;
    align-items: stretch;
}

.contact-compact .contact-box-new {
    flex: 1 1 0%;
    padding: 22px 28px;
    margin: 0;
    animation: none;
}

.contact-compact .contact-form-new {
    gap: 10px;
}

.contact-compact .form-row-new,
.contact-compact .form-group-new {
    gap: 10px;
}

.contact-compact .form-row-new .form-group-new {
    flex: 1 1 130px;
}

.contact-compact .form-group-new label {
    margin-bottom: 2px;
    font-size: 0.85rem;
}

.contact-compact .form-group-new input,
.contact-compact .form-group-new textarea {
    padding: 9px 12px;
    font-size: 0.92rem;
}

.contact-compact .contact-btn-new {
    padding: 10px 22px;
    font-size: 0.95rem;
    margin-top: 2px;
}

.contact-compact .contact-info-panel {
    flex: 1 1 0%;
    gap: 14px;
}

.contact-compact .contact-info-image {
    /* aspect-ratio rămâne 16 / 10, exact ca la versiunea delia —
       poza nu se mai deformează/decupează diferit, doar coloana
       (și, odată cu ea, poza) e mai îngustă, deci mai mică. */
    min-height: 0;
    flex: 0 0 auto;
}

.contact-compact .contact-direct {
    padding: 16px 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-compact .contact-direct h3 {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.contact-compact .contact-direct a {
    font-size: 0.85rem;
    padding: 6px 0;
    word-break: break-word;
}

.form-success {
    background: rgba(60,180,90,0.15);
    border: 1px solid rgba(60,180,90,0.6);
    color: #6fdc8c;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.form-error {
    background: rgba(220,60,60,0.15);
    border: 1px solid rgba(220,60,60,0.6);
    color: #ff8a8a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Honeypot: câmp ascuns pentru boți, invizibil pentru oameni */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================
   PARTICIPANȚI – CARDURI
============================ */

.participants-section {
    padding: 60px 40px;
    text-align: center;
}

.participants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.participant-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,140,0,0.4);
    padding: 30px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px rgba(255,140,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.participant-card h2 {
    color: #ff8c00;
    margin-bottom: 15px;
}

.participant-card p {
    color: #ddd;
    line-height: 1.5;
}

/* ============================
   CASETĂ STATISTICI (poză + caseta cu cifre)
============================ */

.stats-box {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at 20% 0%, #241200 0%, #0a0a0a 70%);
    border: 1px solid rgba(255, 140, 0, 0.35);
    border-radius: 10px;
    padding: 40px 44px;
    box-shadow: 0 0 25px rgba(255, 140, 0, 0.12);
    position: relative;
    overflow: hidden;
}

.stats-box::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.12);
}

.stats-box-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.2;
    color: #f2ede4;
    margin: 0;
    position: relative;
}

.stats-box-title .hl {
    color: #ff8c00;
}

.stats-box-text {
    color: #ccc;
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 16px 0 0;
}

.stats-row {
    display: flex;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 140, 0, 0.25);
    position: relative;
}

.stat {
    flex: 1;
    padding-right: 16px;
}

.stat + .stat {
    border-left: 1px solid rgba(255, 140, 0, 0.25);
    padding-left: 16px;
}

.stat-num {
    display: block;
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    color: #ff8c00;
    text-shadow: 0 0 16px rgba(255, 140, 0, 0.5);
}

.stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b8b8b8;
    line-height: 1.4;
}

@media (max-width: 860px) {
    .stats-box {
        padding: 28px 26px;
    }
    .stats-box-title {
        font-size: 1.6rem;
    }
    .stats-row {
        flex-wrap: wrap;
        row-gap: 18px;
    }
}

/* ============================
   PORTOFOLIU – CAROUSEL CU DERULARE MANUALĂ
============================ */

.portfolio-carousel {
    position: relative;
    width: 100%;
    margin: 30px 0 10px;
}

.portfolio-slider {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.portfolio-slider::-webkit-scrollbar {
    display: none;
}

.slide-track {
    display: flex;
    width: max-content;
}

.slide {
    position: relative;
    width: 480px;
    height: 340px;
    margin-right: 22px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255,140,0,0.4);
    box-shadow: 0 0 16px rgba(255,140,0,0.25);
    filter: saturate(1.08) contrast(1.05) brightness(0.95) sepia(0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Aceeași semnătură vizuală (overlay portocaliu jos) ca la .content-image,
   ca fotografiile din surse diferite să se simtă parte din același brand. */
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
        linear-gradient(to top, rgba(20,8,0,0.5) 0%, rgba(20,8,0,0) 32%),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

.slide:hover img {
    transform: scale(1.045);
    box-shadow: 0 0 26px rgba(255,140,0,0.45);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,140,0,0.6);
    color: #ff8c00;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: 0.25s ease;
    backdrop-filter: blur(4px);
}

.carousel-arrow:hover {
    background: rgba(255,140,0,0.25);
    box-shadow: 0 0 16px rgba(255,140,0,0.5);
}

.carousel-arrow.prev { left: -8px; }
.carousel-arrow.next { right: -8px; }

@media (max-width: 768px) {
    .slide {
        width: 280px;
        height: 200px;
    }
    .carousel-arrow {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* ============================
   IMAGINI DE CONȚINUT (pagini text)
============================ */

.content-image {
    position: relative;
    width: 100%;
    max-width: 1050px;
    margin: 10px auto 30px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,140,0,0.35);
    box-shadow: 0 0 24px rgba(255,140,0,0.2);
    line-height: 0;
}

/* Variantă puțin mai mică decât .content-image standard, tot centrată */
.content-image.content-image-md {
    max-width: 820px;
}

.content-image img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(1.08) contrast(1.06) brightness(0.94) sepia(0.08);
}

.content-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(10,5,0,0.45) 0%, rgba(10,5,0,0) 30%),
        radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}

.content-image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1050px;
    margin: 10px auto 30px;
}

.content-image-row .content-image {
    margin: 0;
    flex: 1 1 320px;
    max-width: 500px;
}

/* Secțiuni page-scene stivuite pe aceeași pagină (portofoliu, cum-si-de-ce):
   păstrăm spațiul de sub navbar doar pentru prima secțiune, restul se strâng */
.page-scene + .page-scene {
    margin-top: 0;
    padding-top: 10px;
}

/* ============================
   TESTIMONIALE
============================ */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255,140,0,0.07), rgba(0,0,0,0.4) 55%);
    border: 1px solid rgba(255,140,0,0.35);
    padding: 34px 28px 26px;
    border-radius: 14px;
    color: #ddd;
    box-shadow: 0 0 14px rgba(255,140,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 18px;
    font-size: 3.4rem;
    font-family: Georgia, serif;
    color: rgba(255,140,0,0.35);
    line-height: 1;
}

.testimonial-card p {
    font-style: italic;
    color: #e8e8e8;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

.testimonial-card p::after {
    content: "\201D";
    font-family: Georgia, serif;
    font-style: normal;
    color: rgba(255,140,0,0.7);
    font-size: 1.6rem;
    line-height: 0;
    vertical-align: -0.3rem;
    margin-left: 2px;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c00, #a04e00);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 0 10px rgba(255,140,0,0.4);
}

.testimonial-card h4 {
    margin: 0;
    color: #ff8c00;
    font-size: 0.95rem;
}

.testimonial-card h4 span {
    display: block;
    color: #bbb;
    font-weight: 400;
    font-size: 0.82rem;
    margin-top: 2px;
}

/* ============================
   BLOG
============================ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.blog-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,140,0,0.35);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 18px rgba(255,140,0,0.3);
}

.blog-card-accent {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #ff8c00, #7a3d00);
}

.blog-card-body {
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.blog-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ff8c00;
    background: rgba(255,140,0,0.12);
    border: 1px solid rgba(255,140,0,0.35);
    border-radius: 20px;
    padding: 3px 12px;
}

.blog-card h3 {
    color: #f2f2f2;
    margin: 0;
    font-size: 1.15rem;
}

.blog-card p {
    color: #bbb;
    margin: 0;
    line-height: 1.55;
    flex: 1;
}

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #ff8c00;
    font-weight: bold;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.blog-link:hover {
    gap: 11px;
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width: 768px) {

    .testimonial-grid,
    .blog-grid,
    .participants-grid {
        grid-template-columns: 1fr;
    }

    .page-scene {
        padding: 40px 20px;
        margin-top: 80px;
    }
}
.subnav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,140,0,0.3);
    position: sticky;
    top: 60px; /* IMPORTANT: sub main-nav */
    z-index: 9000; /* subnav peste conținut, sub main-nav */
}

.subnav a {
    color: #ff8c00;
    font-weight: bold;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: 0.3s ease;
}

.subnav a:hover {
    background: rgba(255,140,0,0.2);
    box-shadow: 0 0 8px rgba(255,140,0,0.4);
}
/* ============================
   LIGHTBOX – IMAGINE MĂRITĂ
============================ */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* peste tot */
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(255,140,0,0.6);
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoomable {
    cursor: pointer;
    transition: 0.3s ease;
}

.zoomable:hover {
    transform: scale(1.05);

}

/* ============================
   MOBILE IMPROVEMENTS
============================ */

/* RESET IMPORTANT */
img {
    max-width: 100%;
    height: auto;
}

/* NAV – transformare pentru mobil */
@media (max-width: 768px) {

    .main-nav {
        flex-wrap: wrap;
        gap: 0;
        padding: 10px;
    }

    .main-nav a {
        font-size: 0.85rem;
    }

    /* SUBNAV scrollabil */
    .subnav {
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
        padding-left: 10px;
        gap: 15px;
    }

    .subnav a {
        display: inline-block;
        font-size: 0.9rem;
    }

    /* TEXT */
    .page-title {
        font-size: 1.6rem;
    }

    .page-subtitle {
        font-size: 1.25rem;
    }

    .page-text {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* GRID – CARDS */
    .card-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    /* PARTICIPANTI */
    .participants-grid {
        grid-template-columns: 1fr;
    }

    /* TESTIMONIALE / BLOG */
    .testimonial-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* FORM */
    .contact-box-new {
        padding: 20px;
        margin: 20px 10px;
    }

    /* BUTTON BACK */
    .back-btn {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* PORTAL */
    .portal-ring {
        width: 260px;
        height: 260px;
    }

    .portal-core {
        width: 140px;
        height: 140px;
    }

    /* HOME scene fix — scena umple exact ecranul rămas sub header (fără overflow care forțează scroll) */
    .home-scene {
        margin-top: 100px;
        height: calc(100vh - 100px);
    }
}

/* EXTRA SMALL DEVICES */
@media (max-width: 480px) {

    .main-nav {
        flex-direction: column;
        align-items: center;
    }

    .main-nav a {
        font-size: 0.8rem;
    }

    .page-title {
        font-size: 1.4rem;
    }

    .page-subtitle {
        font-size: 1.1rem;
    }

    .portal-ring {
        width: 200px;
        height: 200px;
    }

    .portal-core {
        width: 100px;
        height: 100px;
    }
}
/* MOBILE FIX PENTRU PORTAL */
@media (max-width: 768px) {

    .portal-ring {
        transform: scale(0.65);
    }

    .portal-core {
        transform: scale(0.7);
    }

    .portal-logo {
        width: 140px !important;
    }
}

@media (max-width: 480px) {

    .portal-ring {
        transform: scale(0.5);
    }

    .portal-core {
        transform: scale(0.6);
    }

    .portal-logo {
        width: 110px !important;
    }
}
#fadeOverlay {
    position: fixed;
    inset: 0;
    background: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

#fadeOverlay.fade-out {
    opacity: 1;
}
/* HAMBURGER */
/* HAMBURGER BASE */
.hamburger {
    display: none; /* 🔥 ascuns default */

    position: fixed;
    top: 15px;
    right: 15px;

    width: 34px;
    height: 28px;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 10000;

    /* reset stiluri implicite de <button> */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* stare vizibilă la navigare cu tastatura (Tab) */
.hamburger:focus-visible,
.nav-links a:focus-visible,
.global-cta:focus-visible {
    outline: 2px solid #ff8c00;
    outline-offset: 3px;
}

/* LINES */
.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #ff8c00;
    margin: 3px 0;
    transition: 0.3s ease;
}

/* X */
.hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* MOBILE ONLY */
@media (max-width: 768px) {
    .hamburger {
        display: flex; /* 🔥 DOAR aici apare */
    }
}

/* MOBILE */
@media (max-width: 768px) {

    .main-nav {
        justify-content: flex-end;
    }

    .nav-links {
        position: fixed;
        /* Acoperă tot ecranul, nu doar sub bară: înălțimea reală a
           .main-nav pe mobil e ~40px (doar padding, hamburger-ul e
           fixed și nu contează la înălțime), nu 60px cum presupunea
           "top: 60px" de mai jos — diferența lăsa o fâșie prin care
           se vedea pagina de dedesubt. Butonul X (hamburger.open)
           rămâne fixed deasupra oricum, deci nu se suprapune nimic. */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        background: black;
        display: none;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 20px 0;
        gap: 15px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 12px;
        font-size: 1rem;
    }
}
/* DESKTOP NAV SPACING */
@media (min-width: 769px) {
    
    .main-nav {
        display: flex;
        justify-content: center;
        gap: 35px; /* 🔥 ajustează aici */
    }

    .main-nav a {
        padding: 10px 15px; /* mai aerisit */
    }
}

/* FIX GLOBAL – NU MAI PERMITE SCROLL ORIZONTAL */
body {
    overflow-x: hidden;
}
@media (max-width: 768px) {

    .main-nav {
        gap: 0;
    }

    .nav-links {
        position: fixed;
        /* vezi explicația de la prima definiție .nav-links de mai sus:
           acoperă tot ecranul (0 → 100dvh), nu doar sub bara de 60px. */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        background: black;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        padding: 10px 0;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 14px 20px;
        text-align: center;
        line-height: 1.4;

        /* 🔥 IMPORTANT */
        white-space: normal;
        overflow: visible;

        /* NU mai pui width */
    }
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
@media (max-width: 768px) {

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

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

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

    .blog-grid {
        grid-template-columns: 1fr;
    }
}
img {
    max-width: 100%;
    height: auto;
}

* {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (max-width: 768px) {

    /* Doar filmul de intro rămâne cu "chenar" (micșorat) pe mobil.
       Poza statică finală (când NU se joacă filmul) umple tot ecranul. */
    .home-scene.portal-cinematic video.frame {
        object-fit: cover;

        transform: scale(0.72) translateY(-20%);
    }

}
/* Text de tip "poveste" - paragraf de deschidere, mai vizibil */
.page-text.lead {
    font-size: 1.4rem;
    color: #ff8c00;
    font-weight: 600;
    text-align: center;
    max-width: 700px;
    margin: 10px auto 34px;
    text-shadow: 0 0 18px rgba(255,140,0,0.35);
}

/* Poză mică, discretă, în mijlocul unui text narativ */
.content-image.small {
    max-width: 420px;
    margin: 6px auto 34px;
}

.story-divider {
    width: 100%;
    max-width: 300px;
    margin: 20px auto 40px;
    border: none;
    border-top: 1px solid rgba(255,140,0,0.35);
}

/* ============================
   APARIȚIE LA SCROLL — discretă, cinematică
============================ */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.content-image.reveal,
.content-image-row.reveal {
    transform: translateY(22px) scale(0.98);
}

.content-image.reveal.is-visible,
.content-image-row.reveal.is-visible {
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .page-scene,
    body {
        animation: none !important;
    }
}

/* Desktop – justify */
.page-text {
    text-align: justify;
}

/* Mobil – left (cel mai elegant și lizibil) */
@media (max-width: 768px) {
    .page-text {
        text-align: left;
    }
}

/* ============================
   POVESTEA NOASTRĂ — poză stânga (necropată, potrivită pe înălțimea textului) + text dreapta
============================ */
.story-hero {
    display: flex;
    align-items: stretch;
    gap: 46px;
    max-width: 1180px;
    margin: 28px auto 10px;
}

.story-photo {
    flex: 0 0 40%;
    max-width: 460px;
    overflow: hidden;
    border-radius: 4px;
}

.story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 40%;
    display: block;
}

.story-photo .story-photo-mobile {
    display: none;
}

.story-divider-line {
    flex: 0 0 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,140,0,0.6), transparent);
}

.story-text {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story-text h3 {
    color: #f2ede4;
    font-size: 1.55rem;
    font-weight: 700;
    margin: 22px 0 10px;
}

.story-text h3:first-child {
    margin-top: 0;
}

.story-text .hl {
    color: #ff8c00;
}

.story-text .page-text {
    text-align: justify;
    max-width: none;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.65;
}

.story-text .page-text.highlight,
.story-text .highlight {
    color: #ffa64d;
    font-weight: 600;
}

@media (max-width: 860px) {
    .story-hero {
        flex-direction: column;
    }
    .story-photo {
        max-width: 100%;
        flex-basis: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
    }
    .story-photo .story-photo-desktop {
        display: none;
    }
    .story-photo .story-photo-mobile {
        display: block;
        object-position: 50% 45%;
    }
    .story-divider-line {
        display: none;
    }
}

/* ============================
   POVESTEA NOASTRĂ — versiune comprimată (poză mai mică, fără spații
   între paragrafe, totul încape pe un ecran). Scopat cu .story-compact
   ca să nu afecteze restul paginilor care refolosesc .page-text/.card-grid.
============================ */
.page-scene.story-compact {
    padding: 10px 40px 12px;
    margin-top: 66px;
}

/* Pe mobil, padding-ul orizontal trebuie să coboare la fel ca la
   .page-scene simplu (vezi regula de mai sus, linia ~1368) — altfel
   .page-scene.story-compact câștigă prin specificitate mai mare și
   paginile cu story-compact (Povestea noastră, Experiențe, Cui ne
   adresăm) rămân cu 40px padding pe mobil, dezaliniate față de
   restul paginilor. */
@media (max-width: 768px) {
    .page-scene.story-compact {
        padding: 10px 20px 12px;
    }
}

.story-compact .page-subtitle {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.story-compact .story-hero {
    max-width: 1080px;
    margin: 4px auto 4px;
    gap: 32px;
    align-items: flex-start;
}

.story-compact .story-photo {
    flex: 0 0 34%;
    max-width: 340px;
}

.story-compact .story-text h3 {
    font-size: 1.3rem;
    margin: 8px 0 4px;
}

.story-compact .story-text h3:first-child {
    margin-top: 0;
}

.story-compact .page-text {
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    text-align: justify;
}

.story-compact .page-text + h3 {
    margin-top: 14px;
}

.story-compact hr.story-divider {
    margin: 6px auto;
    max-width: 1080px;
}

.story-compact .card-grid {
    max-width: 1080px;
    margin: 4px auto 0;
    gap: 12px;
    padding: 0;
}

.story-compact .card {
    padding: 9px 14px;
}

.story-compact .card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.story-compact .card-num {
    margin-bottom: 0;
    flex-shrink: 0;
}

.story-compact .card h3 {
    font-size: 1.02rem;
    margin-bottom: 0;
}

.story-compact .card p {
    font-size: 0.83rem;
    line-height: 1.22;
}

/* ============================
   CUI NE ADRESĂM — versiune comprimată, ca totul (poză, casetă,
   cele 3 carduri) să încapă pe un ecran landscape, fără scroll.
============================ */

.people-page.story-compact {
    padding-top: 8px;
}

.story-compact .people-hero {
    align-items: stretch;
    margin: 4px auto 10px;
    gap: 24px;
}

.story-compact .people-hero .story-photo {
    flex: 0 0 58%;
    max-width: none;
    height: 190px;
}

.story-compact .people-hero .stats-box {
    /* umple exact spațiul rămas lângă poză, ca marginea din dreapta
       să se alinieze cu marginea cardurilor din grila de mai jos */
    flex: 1 1 auto;
}

.story-compact .stats-box {
    padding: 16px 24px;
}

.story-compact .stats-box-title {
    font-size: 1.25rem;
}

.story-compact .stats-box-text {
    font-size: 0.85rem;
    line-height: 1.35;
    margin-top: 8px;
}

.story-compact .stats-row {
    margin-top: 12px;
    padding-top: 10px;
}

.story-compact .stat-num {
    font-size: 1.1rem;
}

.story-compact .stat-label {
    font-size: 0.6rem;
    margin-top: 2px;
}

.story-compact .participants-grid {
    max-width: 1080px;
    margin: 0 auto;
    gap: 14px;
}

.story-compact .participant-card {
    padding: 12px 16px;
    border-radius: 8px;
}

.story-compact .participant-card h2 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.story-compact .participant-card p {
    font-size: 0.78rem;
    line-height: 1.3;
}

@media (max-width: 860px) {
    .story-compact .people-hero {
        flex-direction: column;
    }
    .story-compact .people-hero .story-photo {
        max-width: 100%;
        height: 140px;
    }
}
@media (max-width: 768px) {
    .experiente-page .page-text {
        text-align: left;
    }
}