/* ==========================================================================
   Tower Podcast — Hoja de estilos (primera esquisse)
   Diseño: blanco y negro, minimalista/business, RTL (hebreo)
   Basado en la estructura de la referencia (business-it.co.il/podcast)
   NOTA: contenido de muestra hasta recibir el briefing del cliente.
   ========================================================================== */

:root {
    --black: #0a0a0a;
    --white: #ffffff;
    --gray-900: #141414;
    --gray-700: #333333;
    --gray-600: #6b6b6b;
    --gray-400: #a3a3a3;
    --gray-200: #e5e5e5;
    --gray-100: #f4f4f4;
    --line: #e5e5e5;
    --red: #2563EB;
    --red-dark: #1D4ED8;
    --soft-white: #EAE7E1;

    --font-body: 'Heebo', sans-serif;
    --maxw: 1200px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 18px; }

/* Accesibilidad: foco visible + skip link */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
.skip-link {
    position: fixed; top: -60px; right: 16px; z-index: 300;
    background: var(--black); color: #fff; font-weight: 700;
    padding: 10px 20px; transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--black);
    line-height: 1.7;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
}

.section { padding: 110px 0; }
.section--tight { padding: 80px 0; }
.section--dark { background: var(--black); color: var(--white); }
.section--gray { background: var(--gray-100); }

/* Eyebrow + headings */
.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 18px;
}
.section--dark .eyebrow { color: var(--gray-400); }

h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }

.section-title {
    font-size: clamp(1.7rem, 2.9vw, 3.1rem);
    font-weight: 900;
    margin-bottom: 20px;
}
.section-intro {
    max-width: 620px;
    font-size: 1.12rem;
    color: var(--gray-600);
}
.section--dark .section-intro { color: var(--gray-400); }
.section-head { margin-bottom: 60px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    border: 2px solid var(--black);
}
.btn--solid { background: var(--black); color: var(--white); }
.btn--solid:hover { background: var(--white); color: var(--black); }
.btn--ghost { background: transparent; color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--white); }
.btn--on-dark { border-color: var(--white); color: var(--white); }
.btn--on-dark:hover { background: var(--white); color: var(--black); }
.btn--red { background: var(--red); color: #fff; border-color: var(--red); }
.btn--red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn--glass {
    background: linear-gradient(180deg, #3b82f6 0%, var(--red) 55%, #1c40af 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37,99,235,0.24), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--glass:hover {
    box-shadow: 0 8px 22px rgba(37,99,235,0.34), inset 0 1px 0 rgba(255,255,255,0.30);
    transform: translateY(-2px);
}

/* ON AIR indicator (luz de grabación) */
.hero-onair {
    position: absolute; top: 96px; right: 32px; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; color: var(--red);
}
.hero-onair i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: onair-blink 1.6s ease-in-out infinite; }
@keyframes onair-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.header {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 100;
    padding: 22px 0;
    transition: all 0.3s var(--ease);
}
.header.scrolled {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.nav-right { display: flex; align-items: center; gap: 34px; }
.logo {
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: var(--white);
    transition: color 0.3s var(--ease);
}
.logo .dot { color: var(--red); }
.header.scrolled .logo { color: var(--black); }

/* Logo en imagen (placeholder) */
.logo-link { display: inline-flex; align-items: center; }
.logo-img { height: 110px; width: auto; display: block; }
.logo-dark { display: none; }
.header.scrolled .logo-light { display: none; }
.header.scrolled .logo-dark { display: block; }
.header.scrolled .logo-img { height: 82px; }
@media (max-width: 720px) { .logo-img { height: 74px; } }

/* 17/08 (ליז): הגלובוס לא היה באותו קו עם שאר התפריט. הסיבה: ברירת המחדל של
   פריטי flex היא מתיחה לגובה מלא, ואז הטקסט יושב על קו הבסיס בעוד הכפתור מתיישר למעלה.
   מרכוז אנכי מיישר את כולם לאותו מרכז (במובייל זה מוחזר למתיחה, שם התפריט הוא עמודה). */
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
    font-size: 0.89rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--white); }
.header.scrolled .nav-links a { color: var(--gray-700); }
.header.scrolled .nav-links a:hover { color: var(--red); }
.nav-links a:hover { color: #fff; }

/* 10/08 (ליז): כפתור ה-CTA בהדר מלא בכחול בכל מצב (גם מעל ההירו וגם אחרי גלילה),
   וב-hover הוא מתכהה, מתרומם קלות ומקבל זוהר כדי שיהיה ברור שהוא לחיץ. */
.nav-cta {
    padding: 10px 22px;
    background: var(--red);
    border: 1.5px solid var(--red);
    border-radius: 2px;
    font-weight: 700 !important;
    color: #fff !important;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.header.scrolled .nav-cta { background: var(--red); border-color: var(--red); color: #fff !important; }
.nav-cta:hover,
.header.scrolled .nav-cta:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37,99,235,0.45);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .nav-cta:hover { transform: none; } }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: 0.3s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    background: var(--black);
    color: var(--soft-white);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* 10/08 (ליז): הווידאו היה כהה מדי. הבהרה על הווידאו עצמו + הקלה בשכבת ההכהה שמעליו */
    filter: saturate(1.08) contrast(1.03) brightness(0.98);
}
.hero::before {
    /* overlay oscuro sobre el video, para legibilidad del texto blanco */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(37,99,235,0.03) 0%, rgba(30,60,140,0.06) 100%),
        linear-gradient(180deg, rgba(9,13,24,0.78) 0%, rgba(9,13,24,0.93) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 1120px; text-align: center; margin-top: 11vh; }
.hero .hero-actions { justify-content: center; }
.hero p { margin-left: auto; margin-right: auto; }
.hero-rule { width: 64px; height: 2px; background: var(--red); margin: 0 auto 30px; }
.hero .eyebrow { color: var(--gray-400); }
.hero h1 {
    font-size: clamp(2.4rem, 4.4vw, 4.9rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 26px;
}
.hero h1 .thin { font-weight: 300; }
.hero p {
    font-size: clamp(1.1rem, 1.6vw, 1.28rem);
    color: var(--gray-400);
    max-width: 720px;
    margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-scroll {
    position: absolute;
    bottom: 34px; left: 50%; transform: translateX(-50%);
    z-index: 2;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--gray-600);
    text-transform: uppercase;
}

/* ==========================================================================
   Sets (חללי הסטודיו)
   ========================================================================== */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
}
.set-card {
    background: var(--white);
    padding: 44px 38px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s var(--ease);
    cursor: default;
}
.set-card:hover { background: var(--black); color: var(--white); }
.set-num {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--gray-400);
}
.set-card h3 { font-size: 1.7rem; font-weight: 800; margin: 18px 0 12px; }
.set-card p { color: var(--gray-600); font-size: 1rem; }
.set-card:hover p, .set-card:hover .set-num { color: var(--gray-400); }
.set-card .set-cap {
    margin-top: 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--black);
    border-top: 1px solid var(--line);
    padding-top: 16px;
}
.set-card:hover .set-cap { color: var(--white); border-color: var(--gray-700); }

/* ==========================================================================
   Space showcase (un estudio)
   ========================================================================== */
.space { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.space-media {
    aspect-ratio: 4/3;
    background: var(--gray-100);
    border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: var(--gray-400); font-weight: 600; font-size: 0.9rem; text-align: center; padding: 20px;
}
.space-text h2 { margin-bottom: 12px; }
.space-text p { color: var(--gray-600); font-size: 1.08rem; margin-bottom: 18px; }
.space-cap {
    display: inline-block; margin-top: 6px;
    border: 1.5px solid var(--black); padding: 8px 18px;
    font-weight: 700; font-size: 0.95rem;
}
.space-eq { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.space-eq li { border: 1px solid var(--line); padding: 6px 14px; font-size: 0.85rem; font-weight: 600; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.gallery-item {
    aspect-ratio: 1/1;
    background: var(--white);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: var(--gray-400); font-weight: 600; font-size: 0.82rem;
}
.gallery-item.wide { grid-column: span 2; aspect-ratio: auto; min-height: 240px; }

/* Placeholder de imagen: ícono limpio (mientras no hay material real) */
.about-photo::before, .space-media::before, .gallery-item::before {
    content: "";
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--gray-400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 20'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.price-card {
    border: 1px solid var(--line);
    padding: 40px 34px;
    display: flex; flex-direction: column;
    transition: all 0.3s var(--ease);
}
.price-card.featured { background: var(--black); color: var(--white); border-color: var(--black); border-top: 3px solid var(--red); }
.price-card .plan { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; color: var(--gray-600); }
.price-card.featured .plan { color: var(--red); }
/* 09/08 (ליז, אחרי השוואת שתי אפשרויות): המחיר הגדול הוא המחיר שמשלמים בפועל, והמחיר
   המלא יורד לשורה קטנה מתחתיו עם קו אלכסוני. תגית ההנחה עלתה לשורת הכותרת, מול שם המסלול.
   בלי קווים מפרידים בבלוק, ההפרדה במרווח בלבד. */
.price-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-badge { padding: 4px 12px; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; white-space: nowrap; }
.price-block { display: flex; flex-direction: column; align-items: flex-start; margin: 14px 0 0; }
.price-card .price { font-size: 2.25rem; font-weight: 900; line-height: 1.2; margin: 0; white-space: normal; }
.price-card .price small { font-size: 0.85rem; font-weight: 400; color: var(--gray-600); white-space: nowrap; }
.price-unit { margin-top: 1px; font-size: 0.82rem; line-height: 1.45; color: var(--gray-600); }
.price-unit b { font-weight: 800; color: var(--red); white-space: nowrap; }
/* 09/08 (ליז): סימן השווה מקשר בין מחיר הפרק בחבילה לסך החבילה, בלי משפט הסבר */
/* קו אלכסוני על המחיר המלא (בקשת ליז 09/08), במקום line-through אופקי */
.slash { position: relative; display: inline-block; white-space: nowrap; }
.slash::after {
    content: ""; position: absolute; inset: -1px 0;
    background: linear-gradient(to top left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}
/* 09/08 (ליז): הכרטיס היה עמוס. המשפט הארוך "המחיר הוא לפרק אחד בתוך חבילה..." עבר
   פעם אחת לאינטרו של הסקשן, ובמקומו יש כאן שתי שורות: תווית ואז המחיר, צמודים.
   בלי min-width על התווית ובלי space-between: כל תווית ברוחב הטבעי שלה והמחיר מיד אחריה,
   כי כל ניסיון ליישר את שתי השורות פותח חלל בשורה של הפרק הבודד (התווית שם קצרה). */
/* 09/08 (ליז): שורה 1 ו-2 צמודות ככל האפשר, ורק לפני שורת הפרק הבודד יש מרווח */
.price-rows { margin-top: 0; }
.price-row { display: flex; align-items: baseline; gap: 9px; padding: 0; font-size: 0.8rem; line-height: 1.45; }
.price-row--single { margin-top: 3px; }
.pr-label { color: var(--gray-600); white-space: nowrap; }
.pr-val { white-space: nowrap; flex-shrink: 0; }
.price-row b { font-size: 0.92rem; font-weight: 800; color: var(--red); }
/* שורת הפרק הבודד מודגשת (בקשת ליז 09/08) */
.price-row--single .pr-label { color: inherit; font-weight: 700; }
.price-card.featured .price-unit { color: var(--gray-400); }
.price-card.featured .price-unit b { color: var(--accent-text, #6EA0FF); }
.price-card.featured .price small,
.price-card.featured .pr-label,
.price-card.featured .price-row b { color: var(--accent-text, #6EA0FF); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.price-card ul { list-style: none; margin: 24px 0 30px; flex-grow: 1; }
.price-card li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.price-card.featured li { border-color: var(--gray-700); }
.price-note { text-align: center; color: var(--gray-600); margin-top: 26px; font-size: 0.95rem; }
.plan-bundle-link { display: block; text-align: center; margin-top: 12px; font-size: 0.9rem; font-weight: 500; color: var(--red); text-decoration: none; }
.plan-bundle-link:hover { text-decoration: underline; }
/* תנאי חיוב מתחת למחירים: כל משפט חייב להישאר בשורה אחת בדסקטופ (בקשת ליז 30/07) */
.price-terms { max-width: 1100px; margin: 34px auto 0; padding: 20px 26px; border: 1px solid currentColor; text-align: center; }
/* 17/08: הנקודה הזו הייתה 900px, אבל השורה השלישית בעברית רוחבה כ-960px,
   אז בין 900 ל-1150 הטקסט ברח מהמסגרת ויצר גלילה אופקית (באג שהיה גם באתר החי). */
@media (min-width: 1150px) { .pt-line { white-space: nowrap; } }

/* ==========================================================================
   Process (3 pasos)
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.step { position: relative; }
.step-num {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--gray-200);
    margin-bottom: 18px;
}
.section--dark .step-num { color: var(--gray-700); }
.step h3 { font-size: 1.35rem; margin-bottom: 12px; }
.step p { color: var(--gray-600); }
.section--dark .step p { color: var(--gray-400); }

/* ==========================================================================
   Services / amenities
   ========================================================================== */
.services-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.amenities { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; margin-top: 60px; }
.amenities li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 1.05rem;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.amenities li::before {
    content: "";
    flex-shrink: 0;
    width: 10px; height: 10px;
    margin-top: 9px;
    background: var(--black);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.quote {
    border: 1px solid var(--line);
    padding: 36px 32px;
    background: var(--white);
}
.quote .mark { font-size: 2.6rem; font-weight: 900; line-height: 0.5; }
.quote p { font-size: 1.08rem; margin: 20px 0 24px; }
.quote .who { font-weight: 700; }
.quote .who span { display: block; font-weight: 400; color: var(--gray-600); font-size: 0.9rem; }

/* ==========================================================================
   About founder
   ========================================================================== */
.about-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about-photo {
    aspect-ratio: 4/5;
    background: var(--gray-100);
    border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: var(--gray-400); font-weight: 600; font-size: 0.9rem; text-align: center; padding: 20px;
}
.about-text h2 { margin-bottom: 22px; }
.about-text p { color: var(--gray-700); margin-bottom: 18px; font-size: 1.08rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.2rem; font-weight: 700; color: var(--black);
    text-align: right;
    padding: 26px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq-q .sign { font-size: 1.6rem; font-weight: 300; transition: transform 0.3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .sign { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-a p { padding-bottom: 26px; color: var(--gray-600); font-size: 1.05rem; }

/* ==========================================================================
   Why podcast
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; background: var(--gray-700); border: 1px solid var(--gray-700); }
.why-card { background: var(--black); padding: 40px 30px; }
.why-card .num { font-size: 0.8rem; color: var(--gray-400); font-weight: 700; letter-spacing: 0.15em; }
.why-card h3 { font-size: 1.25rem; margin: 14px 0 10px; color: var(--white); }
.why-card p { color: var(--gray-400); font-size: 0.98rem; }

/* ==========================================================================
   CTA + Footer
   ========================================================================== */
.cta {
    text-align: center;
    padding: 120px 0;
    /* 30/07 (ליז): רקע מובחן מהשחור של שאר העמוד כדי שסקשן הסגירה יבלוט */
    background: #14181f;
    color: var(--soft-white);
}
.cta h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; margin-bottom: 22px; }
.cta p { color: var(--gray-400); font-size: 1.2rem; margin-bottom: 40px; }

.footer { background: var(--black); color: var(--gray-400); padding: 60px 0 40px; border-top: 1px solid var(--gray-700); }
.footer-top {
    display: flex;
    flex-direction: column-reverse; /* el menú (segundo en el DOM) queda ARRIBA del logo */
    align-items: center;
    text-align: center;
    gap: 44px;
    margin-bottom: 48px;
}
.footer-top > div { display: flex; flex-direction: column; align-items: center; }
/* 30/07 (ליז): תפריט הפוטר פרוס כמעט על כל רוחב הסקשן, עם מרווחים גדולים בין הנושאים */
.footer-top .footer-links { width: 100%; max-width: 980px; justify-content: space-between; }
@media (max-width: 600px) { .footer-top .footer-links { max-width: none; justify-content: center; } }
.footer .logo { color: var(--white); }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--gray-700); padding-top: 26px; font-size: 0.95rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom a:hover { color: var(--white); text-decoration: underline; }
.footer-links { font-size: 1.02rem; }
/* 09/08 (בקשת הלקוח): הכתובת בפוטר לחיצה ופותחת את המקום ב-Google Maps */
.footer-map { text-decoration: underline; text-underline-offset: 3px; }
.footer-map:hover { color: var(--white); }

/* Sketch banner */
.sketch-flag {
    position: fixed; bottom: 0; right: 0; z-index: 200;
    background: #ffd400; color: #000;
    font-size: 0.8rem; font-weight: 700;
    padding: 6px 14px;
    border-top-left-radius: 6px;
}

/* ========================================================================
   Motion & interacción (paquete premium)
   ======================================================================== */
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-inner > * { opacity: 0; animation: heroUp 0.85s var(--ease) forwards; }
.hero-inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.30s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.45s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.58s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.70s; }

/* Scroll reveal */
.will-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.will-reveal.in { opacity: 1; transform: none; }

/* Hover / micro-interacciones */
.price-card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.price-card:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0,0,0,0.12); }
.price-card.featured:hover { box-shadow: 0 22px 50px rgba(0,0,0,0.45); }
.quote { transition: transform 0.35s var(--ease), border-color 0.35s; }
.quote:hover { transform: translateY(-5px); border-color: var(--red); }
.gallery-item { transition: background 0.35s var(--ease); }
.gallery-item:hover { background: #fbfbfb; }
.amenities li { transition: transform 0.25s var(--ease); }
.amenities li:hover { transform: translateX(-6px); }
.btn { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .hero-inner > *, .will-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Blog (índice + artículos)
   ========================================================================== */
.page-hero {
    background: var(--black);
    color: var(--soft-white);
    padding: 170px 0 80px;
    text-align: center;
}
.page-hero .eyebrow { color: var(--gray-400); }
.page-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 900;
    margin-bottom: 18px;
}
.page-hero p {
    color: var(--gray-400);
    font-size: 1.15rem;
    max-width: 620px;
    margin: 0 auto;
}

/* Grid de tarjetas del índice */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--line);
    border: 1px solid var(--line);
}
.blog-card {
    background: var(--white);
    padding: 44px 38px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: all 0.3s var(--ease);
}
.blog-card .blog-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
}
.blog-card h3 { font-size: 1.45rem; font-weight: 800; margin: 16px 0 12px; line-height: 1.25; }
.blog-card p { color: var(--gray-600); font-size: 1rem; flex-grow: 1; }
.blog-card .blog-more {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--black);
    transition: color 0.25s var(--ease);
}
a.blog-card:hover { background: var(--black); color: var(--white); }
a.blog-card:hover h3 { color: var(--white); }
a.blog-card:hover p { color: var(--gray-400); }
a.blog-card:hover .blog-more { color: var(--red); border-color: var(--gray-700); }

/* Tarjeta "próximamente" (sin link) */
.blog-card.soon { cursor: default; }
.blog-card.soon .blog-tag { color: var(--gray-400); }
.blog-card.soon h3 { color: var(--gray-600); }
.blog-card.soon .blog-more { color: var(--gray-400); }

/* Página de artículo */
.article-body {
    max-width: 720px;
    margin: 0 auto;
}
.article-back {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 34px;
    transition: color 0.2s var(--ease);
}
.article-back:hover { color: var(--red); }
.article-body h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 900;
    margin-bottom: 16px;
}
.article-meta {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.article-body h2 {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 44px 0 14px;
}
.article-body p { font-size: 1.08rem; color: var(--gray-700); margin-bottom: 18px; }
.article-body .lead { font-size: 1.2rem; color: var(--black); font-weight: 500; }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-right: 22px; }
.article-body li { font-size: 1.06rem; color: var(--gray-700); margin-bottom: 10px; }
.article-body li strong { color: var(--black); }

/* CTA al final del artículo */
.article-cta {
    margin-top: 56px;
    background: var(--black);
    color: var(--soft-white);
    padding: 46px 40px;
    text-align: center;
}
.article-cta h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; color: var(--white); }
.article-cta p { color: var(--gray-400); font-size: 1.05rem; margin-bottom: 26px; }

@media (max-width: 900px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card { min-height: 0; }
    .page-hero { padding: 140px 0 60px; }
    .article-cta { padding: 36px 24px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr; gap: 36px; }
    .services-layout { grid-template-columns: 1fr; gap: 40px; }
    .amenities { margin-top: 0; }
    .about-layout { grid-template-columns: 1fr; gap: 36px; }
    .about-photo { max-width: 340px; }
    .space { grid-template-columns: 1fr; gap: 36px; }
    .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .gallery-grid { grid-template-columns: 1fr 1fr; }
    .gallery-item.wide { grid-column: span 2; }
}
@media (max-width: 720px) {
    .nav-links { display: none; }
    .nav.open .nav-links {
        display: flex; flex-direction: column; align-items: stretch; gap: 18px;
        position: absolute; top: 100%; right: 0; left: 0;
        background: rgba(10,10,10,0.97); padding: 22px 32px;
    }
    .nav.open .nav-links a { color: #fff; font-size: 1.05rem; }
    .nav-toggle { display: block; color: var(--white); }
    .header.scrolled .nav-toggle { color: var(--black); }
    .section { padding: 72px 0; }
    .container { padding: 0 22px; }
    .amenities { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { justify-content: center; }
}

/* ==========================================================================
   TEMA OSCURO (body.dark) — pedido del cliente 07/07: fondo negro, texto blanco.
   Aplicado por ahora SOLO al index (class="dark" en el body) hasta aprobación.
   ========================================================================== */
body.dark { background: var(--black); color: var(--soft-white); }
body.dark .section { background: var(--black); color: var(--soft-white); }
body.dark .section--gray { background: #121212; }
body.dark .section-title { color: #fff; }
body.dark .section-intro { color: var(--gray-400); }
body.dark .about-text p, body.dark .space-text p { color: var(--gray-400); }
body.dark .about-text p strong { color: #fff; }

/* placeholders de imagen */
body.dark .about-photo, body.dark .space-media, body.dark .gallery-item {
    background: #161616; border-color: #2a2a2a; color: var(--gray-600);
}
body.dark .gallery-grid { background: #2a2a2a; border-color: #2a2a2a; }
body.dark .gallery-item { background: #141414; }

/* chips del equipo */
body.dark .space-eq li { border-color: #3a3a3a !important; color: #ddd; }

/* amenities */
body.dark .amenities li { border-bottom-color: #2a2a2a; color: var(--soft-white); }
body.dark .amenities li::before { background: #fff; }

/* tarjetas de producciones (set-card) */
body.dark .sets-grid { background: #2a2a2a; border-color: #2a2a2a; }
body.dark .set-card { background: #141414; color: #fff; }
body.dark .set-card p { color: var(--gray-400); }
body.dark .set-card:hover { background: #fff; color: var(--black); }
body.dark .set-card:hover p { color: var(--gray-600); }

/* trust strip */
body.dark .step h3 { color: #fff; }
body.dark .step p { color: var(--gray-400); }

/* precios */
body.dark .price-card { background: #121212; border-color: #2a2a2a; color: var(--soft-white); }
body.dark .price-card .price { color: #fff; }
body.dark .price-card li { border-bottom-color: #262626; color: #ddd; }
body.dark .price-card .plan { color: var(--gray-400); }
body.dark .pr-label { color: var(--gray-400); }
body.dark .price-row b { color: var(--accent-text, #6EA0FF); }
body.dark .price-unit { color: var(--gray-600); }
body.dark .price-unit b { color: var(--accent-text, #6EA0FF); }
body.dark .price-card.featured {
    background: #f4f4f4; color: var(--black); border-color: #f4f4f4;
    border-top: 3px solid var(--red);
}
body.dark .price-card.featured .price { color: var(--black); }
body.dark .price-card.featured li { border-bottom-color: #d5d5d5; color: var(--gray-700); }
body.dark .price-card.featured .plan { color: var(--red); }
body.dark .price-card.featured .pr-label { color: var(--gray-600); }
body.dark .price-card.featured .price-row--single .pr-label { color: var(--black); }
body.dark .price-card.featured .price-row b { color: var(--red); }
body.dark .price-card.featured .price-unit { color: var(--gray-600); }
body.dark .price-card.featured .price-unit b { color: var(--red); }
body.dark .price-note { color: var(--gray-400); }

/* botones sobre oscuro */
body.dark .btn--ghost { border-color: #fff; color: #fff; }
body.dark .btn--ghost:hover { background: #fff; color: var(--black); }
body.dark .btn--solid { background: #fff; color: var(--black); border-color: #fff; }
body.dark .btn--solid:hover { background: transparent; color: #fff; }

/* header al scrollear: se queda oscuro y el logo blanco */
body.dark .header.scrolled { background: rgba(10,10,10,0.94); border-bottom: 1px solid #222; }
body.dark .header.scrolled .nav-links a { color: #ddd; }
body.dark .header.scrolled .nav-links a:hover { color: var(--red); }
body.dark .header.scrolled .logo-light { display: block; }
body.dark .header.scrolled .logo-dark { display: none; }
body.dark .header.scrolled .logo-img { height: 82px; }
body.dark .header.scrolled .nav-toggle { color: #fff; }

/* separadores para que las secciones negras no se fundan */
body.dark .cta { border-top: 1px solid #222; }
body.dark .footer { border-top-color: #222; }

/* Ajuste 07/07: blancos suavizados pero NEUTROS (el tono cálido anterior se sentía amarillento) */
body.dark { --d-text: #EBEBE9; --d-card-light: #F0F0EE; }
body.dark, body.dark .section { color: var(--d-text); }
body.dark .section-title { color: var(--d-text); }
body.dark .about-text p strong { color: var(--d-text); }
body.dark .set-card { color: var(--d-text); }
body.dark .set-card:hover { background: var(--d-card-light); }
body.dark .step h3 { color: var(--d-text); }
body.dark .price-card .price { color: var(--d-text); }
body.dark .amenities li { color: var(--d-text); }
body.dark .amenities li::before { background: var(--d-text); }
body.dark .btn--ghost { border-color: var(--d-text); color: var(--d-text); }
body.dark .btn--ghost:hover { background: var(--d-card-light); color: var(--black); }
body.dark .btn--solid { background: var(--d-card-light); color: var(--black); border-color: var(--d-card-light); }
body.dark .btn--solid:hover { background: transparent; color: var(--d-text); }
body.dark .price-card.featured { background: var(--d-card-light); border-color: var(--d-card-light); border-top: 3px solid var(--red); }
body.dark .hero h1, body.dark .cta h2 { color: var(--d-text); }
body.dark .header.scrolled .nav-links a { color: #c9c6bf; }

/* Franja de 3 videos dentro de "החלל" (07/07) */
/* 10/08 (ליז): מפריד בין "מי אנחנו" לסרטונים, כדי שלא ייקראו כאילו אלה אנשי הצוות */
.gallery-label {
    margin: 84px 0 20px; text-align: center;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--gray-600);
}
.gallery-label::before {
    content: ""; display: block; width: 46px; height: 1px;
    background: currentColor; opacity: 0.5; margin: 0 auto 22px;
}
body.dark .gallery-label { color: var(--gray-400); }
/* ============================================================================
   רצועת "רגעים מהסטודיו" (24/08, אחרי שלושה סיבובים עם ליז)
   הלקוח רצה שהקטע הרביעי יוצג אנכי. בגריד רגיל זה הכריח את השורה להיות
   גבוהה והשאיר שטח שחור ריק סביב שלושת האופקיים. הפתרון: כולם באותו גובה,
   וכל אחד ברוחב הטבעי שלו. אז אין מה למלא.

   איך זה עובד: flex שבו flex-grow של כל פריט שווה ליחס הרוחב-גובה שלו
   (4/3 = 1.3333 לאופקיים, 9/16 = 0.5625 לאנכי), עם flex-basis אפס. הרוחבים
   מתחלקים בדיוק לפי היחסים, ולכן הגובה של כולם יוצא זהה לבד, בכל רוחב מסך.

   האופקיים מוצגים ב-4:3 ולא ב-16:9. הקבצים עצמם לא השתנו: object-fit: cover
   חותך את הצדדים במרכז, ומשם בלאו הכי היה רוב הקיר הריק.
   ============================================================================ */
.gallery-grid--videos {
    display: flex;
    gap: 12px;
    background: transparent;
    border: none;
}
.gallery-grid--videos .gallery-item { flex: 1.3333 1 0; aspect-ratio: 4 / 3; }
.gallery-grid--videos .gallery-item--tall { flex: 0.5625 1 0; aspect-ratio: 9 / 16; }

/* 24/08 (ליז): העמוד כהה מדי והסרטונים נבלעים ברקע. קו מתאר דק ובהיר
   עם הילה רכה מסביב, כדי שלכל קטע תהיה התחלה וסוף ברורים. בלבן ולא בכחול
   של המותג, כדי שלא ייראה כאילו משהו נבחר או פעיל. במעבר עכבר ההילה מתחזקת
   ומקבלת גוון כחול, כמו שאר אלמנטי ה-hover באתר. */
body.dark .gallery-grid--videos .gallery-item--media,
.gallery-grid--videos .gallery-item--media {
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 0 26px rgba(255,255,255,0.07), 0 8px 26px rgba(0,0,0,0.55);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
body.dark .gallery-grid--videos .gallery-item--media:hover,
.gallery-grid--videos .gallery-item--media:hover {
    border-color: rgba(255,255,255,0.32);
    box-shadow: 0 0 32px rgba(110,160,255,0.24), 0 10px 30px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) {
    .gallery-grid--videos .gallery-item--media { transition: none; }
}
body.dark .gallery-grid--videos { background: transparent; border-color: transparent; }

/* מתחת ל-720 הרצועה נעשית צרה מדי, ואז עוברים לעמודה:
   כל קטע ברוחב מלא, והאופקיים חוזרים ל-16:9 מלא כי יש מקום. */
@media (max-width: 720px) {
    .gallery-grid--videos { flex-direction: column; align-items: center; gap: 14px; }
    .gallery-grid--videos .gallery-item { flex: none; width: 100%; aspect-ratio: 16 / 9; }
    /* ברוחב מלא האנכי יוצא ענק (661 על 1175 בטאבלט), אז מגבילים אותו וממרכזים */
    .gallery-grid--videos .gallery-item--tall { flex: none; width: min(100%, 320px); aspect-ratio: 9 / 16; }
}

/* Foto real dentro de "החלל" (07/07) — reemplaza el placeholder */
.space-media--photo { padding: 0; border: none; background: none; overflow: hidden; }

/* 10/08 (בקשת הלקוח): סליידר תמונות בסקשן החלל, במקום תמונה בודדת.
   השקופיות מוערמות אחת על השנייה והמעבר הוא בשקיפות בלבד, בלי הזזה, כדי לא להוסיף
   עוד תנועה לעמוד. החצים והנקודות מופיעים מעל התמונה ונשארים נגישים למקלדת. */
.space-slider { position: relative; }
.ss-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0.7s var(--ease); pointer-events: none; }
.ss-slide.is-active { opacity: 1; }
.ss-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: rgba(10,10,10,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
    color: #fff; cursor: pointer; padding: 0;
    opacity: 0; transition: opacity 0.25s var(--ease), background 0.2s var(--ease);
}
.ss-nav::before { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.ss-prev { right: 12px; }
.ss-next { left: 12px; }
.ss-prev::before { transform: rotate(135deg); margin-left: 3px; }
.ss-next::before { transform: rotate(-45deg); margin-right: 3px; }
.ss-nav:hover { background: var(--red); border-color: var(--red); }
.space-slider:hover .ss-nav, .ss-nav:focus-visible { opacity: 1; }
.ss-dots { position: absolute; bottom: 14px; right: 0; left: 0; z-index: 3;
    display: flex; justify-content: center; gap: 8px; }
.ss-dots button {
    width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.45); border: none;
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.ss-dots button:hover { background: rgba(255,255,255,0.8); }
.ss-dots button[aria-current="true"] { background: #fff; transform: scale(1.4); }
/* במסכי מגע אין hover, אז החצים גלויים תמיד */
@media (hover: none) { .space-slider .ss-nav { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-slide { transition: none; } }
.space-media--photo::before { display: none; }
.space-media--photo img { width: 100%; height: 100%; object-fit: cover; }
body.dark .space-media--photo { background: none; border: none; }

/* Media real en la galería de "החלל" (07/07) */
.gallery-item--media { background: #000; overflow: hidden; }
.gallery-item--media::before { display: none; }
.gallery-item--media video, .gallery-item--media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.dark .gallery-item--media { background: #000; }

/* Sección "מי אנחנו" en dos bloques (Benny + Daniel invertido) — 07/07 */
.person-row { margin-bottom: 80px; }
.person-row:last-child { margin-bottom: 0; }
.person-row--reverse { grid-template-columns: 1.1fr 0.9fr; }
.person-row--reverse .about-photo { order: 2; }
.person-row--reverse .about-text { order: 1; }
.about-photo--photo { padding: 0; border: none; background: none; overflow: hidden; }
.about-photo--photo::before { display: none; }
.about-photo--photo img { width: 100%; height: 100%; object-fit: cover; }
body.dark .about-photo--photo { background: none; border: none; }
.person-name { font-size: 1.7rem; font-weight: 900; margin-bottom: 18px; }
@media (max-width: 900px) {
    .person-row--reverse .about-photo, .person-row--reverse .about-text { order: 0; }
    .person-row { margin-bottom: 50px; }
}

/* Footer-bottom en grid de 3 (07/07): copyright derecha · legal centro exacto · crédito izquierda */
.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px 24px;
    text-align: center;
    line-height: 1.7;
}
.footer-bottom .foot-copy { justify-self: start; text-align: right; }
.footer-bottom .foot-legal { justify-self: center; text-align: center; }
.footer-bottom .foot-credit { justify-self: end; text-align: left; }
.foot-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-credit a:hover { color: var(--accent-text); }
.footer-bottom .foot-legal a { font-weight: 700; }
.footer-bottom .foot-legal a:hover { color: #fff; }
@media (max-width: 640px) {
    .footer-bottom { grid-template-columns: 1fr; }
    .footer-bottom .foot-copy,
    .footer-bottom .foot-legal,
    .footer-bottom .foot-credit { justify-self: center; text-align: center; }
}

/* Saludo bajo cada nombre en "מי אנחנו" (07/07) */
.person-name { margin-bottom: 4px; }
.person-greet { color: var(--gray-600); font-size: 1.05rem; font-weight: 400; margin-bottom: 18px; }
body.dark .person-greet { color: var(--gray-400); }

/* ==========================================================================
   מובייל — פרופורציות סופיות (בסוף הקובץ כדי לגבור על כל השאר). בסיס פונט 18px.
   ========================================================================== */
@media (max-width: 600px) {
    .hero h1 { font-size: 1.8rem; line-height: 1.16; margin-bottom: 18px; }
    .hero p { font-size: 1rem; }
    .logo-img { height: 56px; }
    .header.scrolled .logo-img { height: 48px; }
    .section { padding: 60px 0; }
    .section-title { font-size: 1.6rem; }
    .section-intro { font-size: 1rem; }
    .section-head { margin-bottom: 40px; }
    .person-name { font-size: 1.4rem; }
    .price-card .price { font-size: 2rem; }
    .cta h2 { font-size: 1.7rem; }
    .cta p { font-size: 1.05rem; }
    .article-cta h3 { font-size: 1.3rem; }
    .bk-hero h1 { font-size: 1.9rem; }
}

/* ==========================================================================
   Sección "מה אנחנו עושים" con fondo CLARO (07/07)
   ========================================================================== */
body.dark #services { background: #F0F0EE; color: #2b2b2b; }
body.dark #services .section-title { color: #141414; }
body.dark #services .section-intro { color: #555; }
body.dark #services .eyebrow { color: var(--red); }
body.dark #services .amenities li { color: #222; border-bottom-color: #d6d6d1; }
body.dark #services .amenities li::before { background: #141414; }
body.dark #services .btn--solid { background: #111; color: #fff; border-color: #111; }
body.dark #services .btn--solid:hover { background: #000; border-color: #000; color: #fff; }

/* ==========================================================================
   FAQ (acordeón) (07/07)
   ========================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #262626; }
.faq-item summary { cursor: pointer; list-style: none; padding: 22px 4px; font-size: 1.12rem; font-weight: 500; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--red); font-weight: 400; font-size: 1.7rem; line-height: 1; flex-shrink: 0; transition: transform .2s; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--red); }
.faq-a { padding: 0 4px 24px; color: var(--gray-400); font-size: 1.02rem; line-height: 1.85; max-width: 720px; }
@media (max-width: 600px) { .faq-item summary { font-size: 1rem; } }

/* Franja de confianza (#trust) con fondo CLARO (07/07) */
body.dark #trust { background: #F0F0EE; color: #2b2b2b; }
body.dark #trust .step h3 { color: #141414; }
body.dark #trust .step p { color: #555; }

/* ==========================================================================
   Toque de AZUL PROFUNDO (navy) en los fondos oscuros (07/07)
   Reemplaza el negro puro por un negro-azulado premium. Rojo sigue de acento.
   ========================================================================== */
body.dark { background: #0a0e1a; }
body.dark .section { background: #0a0e1a; }
body.dark .section--gray { background: #111a2e; }
.hero { background: #0a0e1a; }
.footer { background: #080b15; }
body.dark .price-card { background: #0d1322; border-color: #1d2740; }
body.dark .price-card.featured { background: #10192e; border-color: #10192e; border-top: 3px solid var(--red); }
body.dark .faq-item { border-bottom-color: #1c2740; }

/* ============================================================================
   EXPERIMENTO (07/07): AZUL en vez de ROJO · sin fondos blancos · featured legible
   Para VOLVER al rojo/blancos: borrar este bloque entero (o restaurar _backups/pre-azul/).
   ============================================================================ */
:root { --red: #2563EB; --red-dark: #1D4ED8; }
.btn--glass { background: linear-gradient(180deg,#3b82f6 0%, #2563eb 55%, #1c40af 100%); box-shadow: 0 6px 16px rgba(37,99,235,0.30), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn--glass:hover { box-shadow: 0 8px 22px rgba(37,99,235,0.42), inset 0 1px 0 rgba(255,255,255,0.30); }

/* Secciones que estaban en blanco → vuelven a oscuro (navy) */
body.dark #services, body.dark #trust { background: #111a2e; color: var(--d-text); }
body.dark #services .section-title, body.dark #trust .step h3 { color: #fff; }
body.dark #services .section-intro, body.dark #trust .step p { color: var(--gray-400); }
body.dark #services .amenities li { color: var(--d-text); border-bottom-color: #24304a; }
body.dark #services .amenities li::before { background: var(--d-text); }
body.dark #services .btn--solid { background: #fff; color: #0a0e1a; border-color: #fff; }
body.dark #services .btn--solid:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* Paquete del medio (featured) legible sobre navy */
body.dark .price-card.featured { background: #13203c; border-color: #2c518f; border-top: 3px solid var(--red); }
body.dark .price-card.featured .price { color: #fff; }
body.dark .price-card.featured .price small { color: #9fb3d6; }
body.dark .price-card.featured .pr-label { color: #cdd8ee; }
body.dark .price-card.featured .price-row--single .pr-label { color: #e8edf7; }
body.dark .price-card.featured .price-row b { color: #6EA0FF; }
body.dark .price-card.featured .price-unit { color: #9fb3d6; }
body.dark .price-card.featured .price-unit b { color: #6EA0FF; }
body.dark .price-card.featured li { color: #e8edf7; border-bottom-color: #2b4372; }
body.dark .price-card.featured .plan { color: #6ea0ff; }

/* ===== 20/07 (pedido de Liz): todos los botones en el azul del hero, fondos negros, hover de set-cards azul ===== */
.btn--solid, .btn--ghost { background: var(--red); color: #fff; border-color: var(--red); }
.btn--solid:hover, .btn--ghost:hover { background: var(--red-dark); color: #fff; border-color: var(--red-dark); }
body.dark .btn--solid, body.dark .btn--ghost,
body.dark #services .btn--solid { background: var(--red); color: #fff; border-color: var(--red); }
body.dark .btn--solid:hover, body.dark .btn--ghost:hover,
body.dark #services .btn--solid:hover { background: var(--red-dark); color: #fff; border-color: var(--red-dark); }

/* Fondos: negro uniforme (fuera el tinte azul marino #0a0e1a/#111a2e) */
body.dark, body.dark .section, body.dark .section--gray,
body.dark #services, body.dark #trust { background: #0a0a0a; }
body.dark .price-card { background: #121212; border-color: #2a2a2a; }
body.dark .faq-item { border-bottom-color: #262626; }

/* "מה אפשר להפיק כאן": hover de tarjeta pasa de blanco a azul */
body.dark .set-card:hover { background: var(--red); color: #fff; }
body.dark .set-card:hover p, body.dark .set-card:hover .set-num { color: #edf3ff; }
body.dark .set-card:hover .set-cap { color: #fff; border-color: rgba(255,255,255,0.45); }

/* 10/08 (ליז): הכרטיסים של "מה אפשר להפיק כאן" לבנים, כדי לשבור את השחור של העמוד.
   הבלוק חייב לשבת אחרי הכללים הקודמים של body.dark .set-card, אחרת הם גוברים עליו.
   ה-hover הכחול נשאר כמו שהוא: לסלקטור עם :hover יש ספציפיות גבוהה יותר. */
body.dark .sets-grid { background: var(--line); border-color: var(--line); }
body.dark .set-card { background: #fff; color: var(--black); }
body.dark .set-card p { color: var(--gray-600); }
body.dark .set-card .set-num { color: var(--gray-600); }
body.dark .set-card .set-cap { color: var(--black); border-top-color: var(--line); }

/* 20/07 (Liz): encabezados más compactos y con el mismo ritmo en toda la página */
.eyebrow { margin-bottom: 8px; }
.section-title { margin-bottom: 12px; }

/* 20/07 fix: el acordeon viejo (.faq-a max-height:0/overflow:hidden, linea ~450) cortaba las respuestas del FAQ actual con <details> */
.faq-item .faq-a { max-height: none; overflow: visible; }

/* ============================================================================
   30/07 — הכנה לעלייה לאוויר (בקשת ליז)
   ============================================================================ */

/* שאריות נייבי מהריברנד: hero ופוטר לשחור אחיד */
.hero { background: #0a0a0a; }
.footer { background: #0a0a0a; }

/* 10/08: חזר וידאו רקע אמיתי של הסטודיו. שכבת ההכהה חוזרת כדי שהטקסט הלבן יישאר קריא
   מעל הווידאו, והזוהר הכחול נשאר מעליה כדי לשמור על אופי העיצוב שהיה בגרסה הסטטית. */
.hero::before {
    background:
        radial-gradient(ellipse 62% 46% at 50% 36%, rgba(37,99,235,0.17) 0%, rgba(37,99,235,0.05) 45%, transparent 72%),
        radial-gradient(ellipse 95% 60% at 50% 112%, rgba(37,99,235,0.10) 0%, transparent 62%),
        linear-gradient(180deg, rgba(9,13,24,0.56) 0%, rgba(9,13,24,0.82) 100%);
}
.hero::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.4), transparent);
}

/* פס הפרדה כחול בתחתית סקשנים נבחרים (בקשת ליז 30/07: להחזיר תחושת מעבר בין סקשנים,
   רק בחלק מהגבולות כדי שלא יהיה עמוס). אותו פס כמו מתחת להירו. */
.section--line { position: relative; }
.section--line::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.4), transparent);
}
.hero-rec {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.3em;
    color: #9fb3d6; text-transform: uppercase;
    border: 1px solid #26324d; border-radius: 999px;
    padding: 8px 20px 8px 22px;
    margin-bottom: 34px;
}
.hero-rec i { width: 9px; height: 9px; border-radius: 50%; background: #C50022; box-shadow: 0 0 10px rgba(197,0,34,0.9); animation: onair-blink 1.6s ease-in-out infinite; }

/* נגישות: כחול כטקסט על רקע כהה — גוון בהיר עם ניגודיות 4.5:1+ (ת"י 5568) */
:root { --accent-text: #6EA0FF; }
body.dark .eyebrow,
body.dark #services .eyebrow { color: var(--accent-text); }
body.dark .faq-item summary:hover { color: var(--accent-text); }
body.dark .about-photo, body.dark .space-media, body.dark .gallery-item { color: #9a9a9a; }

/* נגישות: ביטול גלילה חלקה ואנימציות תחת prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-rec i { animation: none; }
    /* מי שביקש פחות תנועה מקבל את הפריים הסטטי במקום הווידאו */
    .hero-video { display: none; }
    .hero { background: #0a0a0a url("assets/hero-tower-poster.jpg?v=2") center / cover no-repeat; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    .hero { background-image: url("assets/hero-tower-vertical-poster.jpg?v=2"); }
}

/* ============================================================================
   30/07 (ליז): הפוטר היה מרווח מדי — צמצום מרווחים + גודל לוגו אחיד לכל העמודים.
   (גובה הלוגו עבר מ-style inline של 230px לכאן, כדי שהפוטר יהיה זהה בכל עמוד.)
   ============================================================================ */
/* padding-top גדול מפריד את הפוטר מסקשן הסגירה; שאר המרווחים נשארים צפופים */
.footer { padding: 90px 0 26px; }
.footer-top { gap: 22px; margin-bottom: 26px; }
.footer .footer-logo { height: 132px; }
.footer-bottom { padding-top: 20px; }
@media (max-width: 720px) {
    .footer { padding: 62px 0 22px; }
    .footer .footer-logo { height: 104px; }
    .footer-top { gap: 18px; margin-bottom: 22px; }
}

/* ============================================================================
   17/08 — גרסה אנגלית של האתר (תיקיית /en/)
   העמודים באנגלית מסומנים <html lang="en" dir="ltr">. ה-body מקבל direction: rtl
   קשיח למעלה בקובץ, ולכן צריך לבטל אותו כאן במפורש, יחד עם המקומות הבודדים
   שבהם יש right/left מפורש. כל השאר (flex, grid, margin-inline) מתהפך לבד.
   ============================================================================ */
html[dir="ltr"] body { direction: ltr; }
html[dir="ltr"] .skip-link { right: auto; left: 16px; }
html[dir="ltr"] .hero-onair { right: auto; left: 32px; }
html[dir="ltr"] .faq-q { text-align: left; }
html[dir="ltr"] .article-body ul,
html[dir="ltr"] .article-body ol { padding-right: 0; padding-left: 22px; }
html[dir="ltr"] .footer-bottom .foot-copy { text-align: left; }
html[dir="ltr"] .footer-bottom .foot-credit { text-align: right; }
html[dir="ltr"] .ss-prev { right: auto; left: 12px; }
html[dir="ltr"] .ss-next { left: auto; right: 12px; }
html[dir="ltr"] .ss-prev::before { transform: rotate(-45deg); margin-left: 0; margin-right: 3px; }
html[dir="ltr"] .ss-next::before { transform: rotate(135deg); margin-right: 0; margin-left: 3px; }
@media (max-width: 720px) {
    html[dir="ltr"] .footer-bottom .foot-copy,
    html[dir="ltr"] .footer-bottom .foot-credit { text-align: center; }
}
/* באנגלית הכותרות ארוכות יותר; ניקוי nowrap שנועד לעברית */
html[dir="ltr"] .footer-top p[style*="nowrap"] { white-space: normal !important; }
/* 17/08 (ליז): באנגלית המשפטים ארוכים יותר מבעברית. כל מקום שבו נעולה שורה
   לשורה אחת (nowrap) כויל לפי אורך הטקסט העברי, וב-LTR הטקסט ברח מהמסגרת.
   באנגלית נותנים לשורות להישבר באופן טבעי. */
html[dir="ltr"] .pt-line { white-space: normal; }
/* 17/08 (ליז): באנגלית המחיר נכתב "NIS 840" ולא "840 ₪", ואז השורה נשברה
   בשני כרטיסים מתוך שלושה. שורת "במקום" יורדת לשורה משלה בשלושתם,
   כך שהכרטיסים נשארים באותו גובה בדיוק. */
html[dir="ltr"] .price-card .price small { display: block; margin-top: 4px; }

/* ============================================================================
   מחליף השפה בהדר: כפתור עם אייקון גלובוס (אוניברסלי, בלי דגלים ובלי טקסט בשפה
   שהמבקר אולי לא קורא). לחיצה פותחת רשימה קטנה עם "עברית" ו-"English",
   והשפה הפעילה מודגשת עם וי. הקישורים עצמם הם <a> אמיתיים, כך שגם בלי JS
   אפשר לעבור שפה (הרשימה נפתחת ב-hover/focus כגיבוי).
   ============================================================================ */
/* flex על ה-li מבטל את קו הבסיס של שורת הטקסט, שהזיז את הכפתור בכמה פיקסלים */
.nav-lang-wrap { position: relative; display: flex; align-items: center; }

/* 17/08 (ליז): בלי מסגרת מסביב לגלובוס, והגלובוס קצת יותר גדול.
   נשאר ריפוד פנימי כדי שאזור הלחיצה יישאר גדול מספיק לאצבע (ת"י 5568). */
.nav-lang {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    border-radius: 4px;
    padding: 7px 6px;
    color: rgba(255,255,255,0.85);
    font-family: inherit; line-height: 1;
    transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-lang:hover, .nav-lang[aria-expanded="true"] { color: #fff; }
.nav-lang:focus-visible { outline: 3px solid #6EA0FF; outline-offset: 2px; }
.header.scrolled .nav-lang { color: var(--gray-700); }
.header.scrolled .nav-lang:hover,
.header.scrolled .nav-lang[aria-expanded="true"] { color: var(--red); }
/* בעמודים הכהים (כל עמודי הלקוח) ההדר נשאר כהה גם אחרי גלילה,
   אז הגלובוס מקבל את אותו גוון בהיר של שאר קישורי התפריט (אחרת אפור כהה על רקע כהה). */
body.dark .header.scrolled .nav-lang { color: #c9c6bf; }
body.dark .header.scrolled .nav-lang:hover,
body.dark .header.scrolled .nav-lang[aria-expanded="true"] { color: var(--accent-text, #6EA0FF); }
.nav-lang .globe { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.nav-lang .caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.2s var(--ease); }
.nav-lang[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-lang-menu {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
    min-width: 152px; margin: 0; padding: 6px;
    list-style: none; z-index: 120;
    background: #161616;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
/* 17/08 (ליז): נפתח בלחיצה בלבד. הפתיחה ב-hover הוסרה: התפריט קפץ למי שרק העביר עכבר. */
.nav-lang-wrap.open .nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-lang-menu li { margin: 0; }
/* 17/08 (ליז): שתי השפות אחת מתחת לשנייה, מיושרות לאותו צד בדיוק.
   אין כאן direction נפרד לכל פריט (זה מה שדחף אותן לקצוות מנוגדים),
   ואין סימן וי: השפה הפעילה פשוט מודגשת. */
.nav-lang-menu a {
    display: block;
    padding: 9px 12px; border-radius: 4px;
    font-size: 0.95rem; font-weight: 500;
    color: rgba(255,255,255,0.82) !important;
    text-align: start;
    white-space: nowrap;
}
.nav-lang-menu a:hover { background: rgba(255,255,255,0.10); color: #fff !important; }
.nav-lang-menu a:focus-visible { outline: 2px solid #6EA0FF; outline-offset: -2px; }
/* השפה שכבר נבחרה: מודגשת ובצבע ההדגשה של האתר, בלי סימנים נוספים */
.nav-lang-menu a[aria-current="true"] { font-weight: 800; color: var(--accent-text, #6EA0FF) !important; }

@media (max-width: 720px) {
    /* בתפריט המובייל אין מקום לתפריט צף: שתי השפות פשוט מוצגות בשורה ליד הגלובוס */
    .nav-lang-wrap { display: flex; align-items: center; gap: 10px; }
    .nav-lang { padding: 0; pointer-events: none; }
    .nav-lang .caret { display: none; }
    .nav-lang-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: flex; gap: 6px; min-width: 0;
        background: none; border: none; box-shadow: none; padding: 0;
    }
    .nav-lang-menu a { padding: 6px 10px; border: 1px solid rgba(255,255,255,0.28); font-size: 1rem; text-align: center; }
    .nav-lang-menu a[aria-current="true"] { border-color: var(--accent-text, #6EA0FF); }
}

/* ============================================================================
   24/08 (ליז: "כל העמוד חשוך לי מדי")
   העיצוב בנוי על פסים לסירוגין: סקשן שחור, סקשן מעט בהיר יותר, וחוזר.
   כלל מאוחר יותר בקובץ (זה שהוציא את גוון הכחול-כהה) איחד את section
   ו-section--gray לאותו #0a0a0a בדיוק, וכך ההפרדה בין הפסים נעלמה
   והעמוד הפך לגוש אחד. מחזירים לסקשנים המתחלפים גוון מעט בהיר יותר.
   לא מחזירים את התכלת (#0a0e1a/#111a2e) שהוסר בכוונה, רק שחור פחות כהה.
   לביטול: למחוק את הבלוק הזה והכל חוזר לשחור אחיד.
   ============================================================================ */
body.dark .section--gray,
body.dark #services,
body.dark #trust { background: #141414; }