/* =========================================================
   García Recta Design — proteccion-solar-premium.css
   Estructura general de la página Protección Solar: hero
   cinematográfico con banda de luz, intro, puente hacia los
   dos productos, hero de producto a pantalla completa,
   transición entre productos, detalle/macro, selector
   interactivo, sección de confort y cierre.

   Recurso visual propio de esta página (a diferencia de
   Rollkit = desplazamiento y Plegakit = pliegue): LUZ Y SOMBRA.
   Ver también proteccion-solar-brazo.css (despliegue del toldo)
   y proteccion-solar-sunworker.css (transición luz → sombra).
   ========================================================= */

/* ---------- Eyebrow genérico ----------
   Esta página no carga rollkit-premium.css/landing.css, así que
   define su propio .section-eyebrow (mismo patrón visual, tokens
   del sistema premium: --red en vez de --carmin). */
.section-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 18px; }
.section-eyebrow::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--red); transform: skewX(-20deg); margin-right: 9px; vertical-align: middle; }
.section-eyebrow.accent-light { color: #e89aa2; }
.section-eyebrow.accent-light::before { background: #e89aa2; }

/* ============================================================
   01 · HERO
   ============================================================ */
.ps-hero {
    position: relative; min-height: 100svh; display: flex; align-items: flex-end;
    overflow: hidden; background: var(--black);
}
.ps-hero-media { position: absolute; inset: 0; z-index: 0; }
.ps-hero-img { filter: brightness(.42) saturate(.94); transition: filter 1.6s var(--ease); }
.ps-hero.in-view .ps-hero-img { filter: brightness(.62) saturate(1); }

/* Etapa 1 de la secuencia: velo oscuro que se retira lentamente,
   dejando "revelar" la arquitectura — sin flash, sin glow. */
.ps-hero-darkveil {
    position: absolute; inset: 0; z-index: 1; background: var(--black);
    opacity: 1; transition: opacity 2.4s var(--ease);
}
.ps-hero.in-view .ps-hero-darkveil { opacity: 0; }

/* Banda de luz muy sutil — la identidad visual propia de esta
   página. Reacciona al scroll (ver proteccion-solar-premium.js). */
.ps-hero-lightband {
    position: absolute; inset: -10% -20%; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg,
        transparent 38%,
        rgba(255,247,232,.05) 47%,
        rgba(255,247,232,.11) 50%,
        rgba(255,247,232,.05) 53%,
        transparent 62%);
    transform: translateX(-18%);
    transition: transform 1.2s linear;
    mix-blend-mode: screen;
}

.ps-hero-eyebrow { opacity: 0; transform: translateY(16px); }
.ps-hero-sub { opacity: 0; transform: translateY(16px); max-width: 460px; }
.ps-hero.in-view .ps-hero-eyebrow,
.ps-hero.in-view .ps-hero-sub,
.ps-hero.in-view .hero-cta-row { opacity: 1; transform: none; transition: opacity .8s var(--ease) .8s, transform .8s var(--ease) .8s; }
.ps-hero.in-view .ps-hero-title .line span { transform: translateY(0); }
.ps-hero.in-view .ps-hero-title .line:nth-child(1) span { transition-delay: .35s; }
.ps-hero.in-view .ps-hero-title .line:nth-child(2) span { transition-delay: .48s; }

/* ============================================================
   02 · INTRO — "La luz también diseña"
   ============================================================ */
.ps-intro { padding: var(--section-y) 0; border-top: 1px solid var(--line); text-align: center; }
.ps-intro-label {
    font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--red); margin-bottom: 30px; line-height: 1.6;
}
.ps-intro-title {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: 1.02; margin-bottom: 34px;
}
.ps-intro-text { max-width: 520px; margin: 0 auto; color: rgba(245,245,243,.62); font-size: 16.5px; }

/* ============================================================
   03 · PUENTE — "Dos formas de controlar la luz"
   ============================================================ */
.ps-bridge { padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.ps-bridge-title {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.04; margin-bottom: 60px; text-align: center;
}
.ps-bridge-links { display: flex; flex-direction: column; }
.ps-bridge-link {
    display: flex; align-items: center; gap: 28px; padding: 34px 4px;
    border-top: 1px solid var(--line); position: relative;
}
.ps-bridge-link:last-child { border-bottom: 1px solid var(--line); }
.ps-bridge-num { font-family: var(--font-display); font-size: 1.1rem; color: var(--red); width: 40px; flex-shrink: 0; }
.ps-bridge-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4.4vw, 3.2rem); flex: 1; transition: transform .35s var(--ease), color .35s ease; }
.ps-bridge-arrow { font-size: 1.4rem; color: rgba(245,245,243,.35); transition: transform .35s var(--ease), color .35s ease; }
.ps-bridge-link:hover .ps-bridge-name { transform: translateX(10px); color: var(--red); }
.ps-bridge-link:hover .ps-bridge-arrow { transform: translateX(10px); color: var(--red); }

/* ============================================================
   04 / 08 · HERO DE PRODUCTO (Brazo Invisible / Sunworker)
   Imagen a pantalla completa (~85% viewport), texto muy limpio.
   ============================================================ */
.ps-product-hero {
    position: relative; height: 88vh; min-height: 560px; overflow: hidden;
    border-top: 1px solid var(--line); scroll-margin-top: 0;
}
.ps-product-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,.35) 55%, rgba(10,10,10,.92) 100%);
}
.ps-product-hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ps-product-hero-title {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(3rem, 9vw, 7.2rem); line-height: .96; margin: 18px 0 20px;
}
.ps-product-hero-sub { font-size: 17px; letter-spacing: .3px; color: rgba(245,245,243,.78); max-width: 420px; }
.ps-product-hero-concept {
    position: absolute; z-index: 2; right: var(--container-pad); bottom: 44px;
    text-align: right; font-size: 13px; line-height: 1.6; color: rgba(245,245,243,.55);
    max-width: 300px;
}
@media (max-width: 800px) {
    .ps-product-hero { height: 78vh; }
    .ps-product-hero-concept { display: none; }
}

/* ============================================================
   06 · MACRO DETALLE ("El detalle se oculta")
   ============================================================ */
.ps-macro-detail { position: relative; height: 74vh; min-height: 460px; overflow: hidden; border-top: 1px solid var(--line); }
.ps-macro-detail-overlay {
    position: absolute; inset: 0; display: flex; align-items: flex-end;
    background: linear-gradient(0deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.2) 60%);
}
.ps-macro-detail-text { padding: 50px var(--container-pad); max-width: 560px; }
.ps-macro-detail-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem,4vw,3rem); line-height: 1.08; margin: 12px 0 16px; }
.ps-macro-detail-desc { color: rgba(245,245,243,.68); font-size: 15.5px; max-width: 460px; }

.ps-close-line { padding: clamp(60px,9vw,110px) 0; text-align: center; border-top: 1px solid var(--line); }
.ps-close-line h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4vw,3rem); line-height: 1.15; }

/* ============================================================
   07 · TRANSICIÓN ENTRE PRODUCTOS
   Fondo negro, línea roja horizontal, texto centrado.
   ============================================================ */
.ps-transition {
    position: relative; padding: clamp(90px,13vw,180px) 0; text-align: center;
    border-top: 1px solid var(--line); overflow: hidden;
}
.ps-transition-line {
    position: absolute; left: 50%; top: 50%; height: 1px; width: 0;
    background: var(--red); transform: translate(-50%,-50%);
    transition: width 1.1s var(--ease);
}
.ps-transition.in-view .ps-transition-line,
.ps-transition-line.in-view { width: min(70%, 640px); }
.ps-transition-inner { position: relative; z-index: 2; }
.ps-transition-from, .ps-transition-to {
    font-size: 11.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,245,243,.5);
}
.ps-transition-to { color: #fff; margin-top: 14px; }
.ps-transition-arrow { display: block; margin: 18px 0; font-size: 1.2rem; color: var(--red); }

/* ============================================================
   14 · LOS DOS SISTEMAS / SELECTOR INTERACTIVO
   ============================================================ */
.ps-selector-section { padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.ps-selector-head { max-width: 640px; margin-bottom: 54px; }
.ps-selector { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; }
.ps-selector-media {
    position: relative; aspect-ratio: 4/5; border-radius: var(--radius-small); overflow: hidden;
    background: var(--charcoal);
}
.ps-selector-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06); clip-path: inset(0 0 0 100%);
    transition: opacity .7s var(--ease), transform .8s var(--ease), clip-path .8s var(--ease);
}
.ps-selector-img.active { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }

.ps-selector-list { display: flex; flex-direction: column; }
.ps-selector-item {
    display: flex; align-items: flex-start; gap: 20px; text-align: left;
    padding: 26px 6px; border-top: 1px solid var(--line);
    background: none; border-left: none; border-right: none; cursor: pointer; font-family: inherit;
    color: inherit; width: 100%;
}
.ps-selector-item:last-child { border-bottom: 1px solid var(--line); }
.ps-selector-num { font-family: var(--font-display); font-size: 1rem; color: rgba(245,245,243,.35); flex-shrink: 0; transition: color .3s ease; }
.ps-selector-item.active .ps-selector-num { color: var(--red); }
.ps-selector-body { display: flex; flex-direction: column; gap: 8px; }
.ps-selector-name {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.7rem);
    color: rgba(245,245,243,.55); transition: color .3s ease;
}
.ps-selector-item.active .ps-selector-name { color: #fff; }
.ps-selector-desc {
    font-size: 14px; color: rgba(245,245,243,.5); max-width: 420px; line-height: 1.55;
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .4s ease, margin .4s ease;
}
.ps-selector-item.active .ps-selector-desc { max-height: 140px; opacity: 1; margin-top: 2px; }
.ps-selector-cta {
    font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--red);
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease) .05s, opacity .4s ease .05s, margin .4s ease;
}
.ps-selector-item.active .ps-selector-cta { max-height: 40px; opacity: 1; margin-top: 6px; }

@media (max-width: 900px) {
    .ps-selector { grid-template-columns: 1fr; }
    .ps-selector-media { aspect-ratio: 4/3; }
}

/* ============================================================
   CONFORT
   ============================================================ */
.ps-comfort { position: relative; height: 62vh; min-height: 420px; overflow: hidden; border-top: 1px solid var(--line); }
.ps-comfort-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(10,10,10,.5);
}
.ps-comfort-text p {
    font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,4.6vw,3.4rem);
    line-height: 1.18; color: #fff;
}

/* ============================================================
   15 · CIERRE / CTA FINAL
   ============================================================ */
.ps-cta { padding: clamp(100px,14vw,190px) 0; border-top: 1px solid var(--line); background: var(--carbon); text-align: center; }
.ps-cta-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,6vw,4.4rem); line-height: 1.05; margin-bottom: 22px; }
.ps-cta-question { color: rgba(245,245,243,.62); font-size: 17px; margin-bottom: 40px; }
.ps-cta-actions { display: flex; justify-content: center; }

/* ============================================================
   Comparación — leve ajuste para que conviva con el resto de la página
   (las clases .antes-despues / .compare-* ya existen en layout.css)
   ============================================================ */
.ps-compare-section { border-top: 1px solid var(--line); }