/* ===============================
   PANEL HERO SLIDER PRO
   Stable Core
=============================== */

.phsp-slider {
    z-index: 1; position: relative; width: 100%; overflow: hidden; background: #000; }

/* SLIDES */
.phsp-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%; opacity: 0; visibility: hidden;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition:
        opacity .9s ease,
        visibility .9s ease;
    will-change: opacity;
}

.phsp-slide.active {
    opacity: 1; visibility: visible; z-index: 2;}

/* OVERLAY */
.phsp-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            rgba(0,0,0,.08)
        );
    z-index: 2;
    pointer-events: none;
}

/* Textos del slider */
.phsp-text,
.phsp-text-inner,
.phsp-caption {
    position: relative; z-index: 3; }

.phsp-text-inner h1,
.phsp-text-inner h2,
.phsp-caption h1,
.phsp-caption h2 {
    color: #fff; font-family: var(--font-title); text-shadow: 0 4px 18px rgba(0, 0, 0, .45); }

.phsp-text-inner p,
.phsp-caption p {
    color: rgba(255, 255, 255, .92); font-family: var(--font-ui); text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }

.phsp-text-inner .button,
.phsp-caption .button {
    border-radius: 999px; padding: 14px 28px; backdrop-filter: blur(4px); }

/* TEXTO */
.phsp-textbox {
    position: absolute; z-index: 3;
    width: min(90%, 900px);
    pointer-events: none; transform-origin: center center; will-change: transform; }

.phsp-text-inner {
    max-width: 720px; color: #fff; }

.phsp-text-inner h2 {
    margin: 0 0 18px; line-height: .98; font-weight: 700; letter-spacing: -.02em; color: #fff;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    text-shadow:
        0 5px 20px rgba(0,0,0,.45),
        0 1px 2px rgba(0,0,0,.35); }

.phsp-text-inner p {
    margin: 0;
    max-width: 680px;

    line-height: 1.5;
    letter-spacing: .03em;

    color: rgba(255,255,255,.92);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    text-shadow:
        0 3px 14px rgba(0,0,0,.38);
}

/* CONTROLES */
.phsp-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 54px; height: 54px; 
	display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    color: #fff; font-size: 24px; cursor: pointer; user-select: none; opacity: .85;
    transition:
        opacity .25s ease,
        background .25s ease,
        transform .25s ease;
}

.phsp-nav:hover {
    opacity: 1; background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08); }

.phsp-prev { left: 28px; }

.phsp-next { right: 28px; }

/* PROGRESS */
.phsp-progress {
    position: absolute; bottom: 0; left: 0; height: 4px; width: 0%;
    background:
        linear-gradient(
            90deg,
            #d7b56d,
            #f6e7b0
        );
    z-index: 12;
}

.phsp-slider {
    touch-action: pan-y; cursor: grab; }

.phsp-slider:active { cursor: grabbing; }


/* MOBILE */
@media (max-width: 768px) {

    .phsp-slider {
        height: 100svh !important; min-height: 640px; }

    .phsp-slide { background-position: center center; }

    .phsp-textbox { width: calc(100% - 40px); }

    .phsp-text-inner { max-width: 90%; }

    .phsp-text-inner h2 { line-height: 1.05; }

    .phsp-nav {
        width: 42px; height: 42px; font-size: 18px; }

    .phsp-prev { left: 14px; }

    .phsp-next { right: 14px; }
}

/* ======================================================
   RESPONSIVE MOBILE
====================================================== */

@media (max-width: 480px) {

    .phsp-text-inner,
    .phsp-caption {
        padding-left: 20px;
        padding-right: 20px; }

    .phsp-text-inner h1,
    .phsp-text-inner h2,
    .phsp-caption h1,
    .phsp-caption h2 {
        font-size: clamp(2rem, 9vw, 3.2rem);
        line-height: 1.1; }
}
