:root {
    --zamora-chinchipe-blue-dark: #0E2E26;
    --zamora-chinchipe-blue: #0B6F5A;
    --zamora-chinchipe-cyan: #16B6A1;
    --zamora-chinchipe-green: #2FAE5A;
    --zamora-chinchipe-light-green: #A4D65E;
    --zamora-chinchipe-yellow: #F2C94C;
    --zamora-chinchipe-white: #FFFFFF;
    --bg: #071826;
    --text: #14314A;
    --muted: #5C7385;
    --line: rgba(8, 126, 164, .20);
    --soft: rgba(255,255,255,.82);
    --shadow: 0 30px 90px rgba(0, 0, 0, .30);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 12% 18%, rgba(0,169,183,.25), transparent 30%),
        radial-gradient(circle at 80% 5%, rgba(139,203,63,.18), transparent 32%),
        linear-gradient(145deg, #061a16, #0a3b32 55%, #113f2c);
    color: var(--text);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(18,58,99,.82), rgba(8,126,164,.44), rgba(54,168,82,.34)),
        url('../img/prefectura-bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: .32;
    pointer-events: none;
}

/* Intro video */
.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #061421;
    color: #eef9ff;
    transition: opacity .55s ease, visibility .55s ease;
}
.intro-screen.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-video-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.intro-video { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg, var(--zamora-chinchipe-blue-dark), var(--zamora-chinchipe-blue)); }
.intro-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6,20,33,.56), rgba(6,20,33,.08), rgba(6,20,33,.38)),
        linear-gradient(0deg, rgba(6,20,33,.50), transparent 48%, rgba(6,20,33,.22));
}
.intro-content {
    position: absolute;
    inset: 0;
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.intro-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    position: relative;
    z-index: 7;
}
.intro-center-brand {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    width: min(380px, 62vw);
    min-height: 185px;
    display: grid;
    place-items: center;
    padding: 30px;
    border-radius: 42px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    pointer-events: none;
}
.intro-center-brand img {
    width: min(300px, 86%);
    max-height: 240px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
.provincial-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(12px);
}
.provincial-mark, .brand-mark {
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, var(--zamora-chinchipe-cyan), var(--zamora-chinchipe-light-green));
    color: #042336;
    font-weight: 900;
}
.provincial-mark { width: 38px; height: 38px; border-radius: 50%; }
.provincial-badge p { margin: 0 0 2px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,249,255,.72); }
.provincial-badge strong { font-size: 14px; }
.intro-bottom { max-width: 680px; }
.intro-bottom h1 { margin: 0 0 16px; font-size: clamp(42px, 8vw, 92px); line-height: .92; color: #fff; }
.intro-bottom p { margin: 0 0 22px; color: rgba(238,249,255,.84); line-height: 1.6; font-size: 17px; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.intro-skip {
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    cursor: pointer;
    font-weight: 900;
    background: linear-gradient(135deg, var(--zamora-chinchipe-cyan), var(--zamora-chinchipe-light-green));
    color: #042336;
    box-shadow: 0 16px 40px rgba(0,0,0,.26);
}
.intro-skip:disabled { opacity: .58; cursor: wait; }
.intro-counter {
    min-width: 58px;
    min-height: 42px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    color: rgba(238,249,255,.92);
    font-size: 14px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}
.intro-skip.is-ready { background: linear-gradient(135deg, var(--zamora-chinchipe-light-green), var(--zamora-chinchipe-cyan)); }

/* Main portal */
.portal-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 28px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 28px 0;
    display: flex;
    align-items: center;
    transition: opacity .35s ease, transform .35s ease;
}
.portal-shell.is-hidden-by-intro { opacity: 0; transform: translateY(10px); pointer-events: none; }
.portal-shell.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.portal-card {
    width: 100%;
    overflow: hidden;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,252,249,.91));
    border: 1px solid rgba(255,255,255,.58);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.portal-header {
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, rgba(18,58,99,.98), rgba(8,126,164,.94));
    color: #fff;
}
.brand-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { width: 54px; height: 54px; border-radius: 18px; color: #05243a; }
.kicker { margin: 0 0 5px; color: var(--zamora-chinchipe-cyan); text-transform: uppercase; font-size: 11px; letter-spacing: .16em; font-weight: 900; }
.portal-header .kicker { color: rgba(255,255,255,.66); }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(20px, 4vw, 32px); color: #fff; }
.free-badge {
    flex: 0 0 auto;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
}
.portal-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 0;
    min-height: 610px;
}
.hero-copy {
    position: relative;
    padding: 34px 32px 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(0,169,183,.15), transparent 32%),
        radial-gradient(circle at 98% 14%, rgba(139,203,63,.14), transparent 34%);
}
.hero-copy::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 22px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,169,183,.12), transparent 68%);
    pointer-events: none;
}
.slogan-line { color: var(--zamora-chinchipe-green); font-weight: 900; letter-spacing: .04em; margin-bottom: 10px; }
.hero-copy h2 { font-size: clamp(42px, 7vw, 78px); line-height: .92; margin-bottom: 16px; color: var(--zamora-chinchipe-blue-dark); }
.hero-copy p, .access-card p, .ads-grid p, .portal-footer span, .legal-modal p { color: var(--muted); line-height: 1.58; }
.quick-info {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.quick-info article, .ads-grid article {
    padding: 15px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--line);
}
.quick-info span { display: block; color: var(--zamora-chinchipe-blue); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 900; margin-bottom: 6px; }
.quick-info strong { display: block; color: var(--zamora-chinchipe-blue-dark); word-break: break-all; }
.ads-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.ads-grid h4 { color: var(--zamora-chinchipe-blue-dark); margin-bottom: 7px; }
.ads-grid p { margin-bottom: 0; font-size: 13px; }
.access-card {
    padding: 34px 30px 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,250,248,.92));
    border-left: 1px solid var(--line);
}
.access-card h3 { font-size: 30px; margin-bottom: 10px; color: var(--zamora-chinchipe-blue-dark); }
.form-note { margin-bottom: 16px; }
.portal-form { display: grid; gap: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
label { display: grid; gap: 7px; color: #486679; font-weight: 800; font-size: 13px; }
input, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 13px 14px;
    background: rgba(255,255,255,.88);
    color: var(--zamora-chinchipe-blue-dark);
    outline: none;
    font: inherit;
}
input:focus, textarea:focus { border-color: rgba(0,169,183,.62); box-shadow: 0 0 0 4px rgba(0,169,183,.10); }
.check-line { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.check-line input { width: auto; margin-top: 2px; }
.btn {
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--zamora-chinchipe-cyan), var(--zamora-chinchipe-light-green)); color: #042336; box-shadow: 0 14px 34px rgba(0,169,183,.22); }
.btn[disabled], .btn.is-disabled { opacity: .42; pointer-events: none; }
.legal-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.legal-actions button {
    border: 1px solid var(--line);
    background: rgba(18,58,99,.06);
    color: var(--zamora-chinchipe-blue-dark);
    border-radius: 999px;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.portal-footer {
    padding: 18px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.55);
}
.footer-contact, .footer-credit { display: grid; gap: 4px; }
.footer-contact strong { color: var(--zamora-chinchipe-blue-dark); }
.footer-credit { text-align: right; }
.credit-seal { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; font-weight: 800; color: var(--zamora-chinchipe-blue-dark) !important; }
.registered-mark {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(8,126,164,.55);
    border-radius: 999px;
    color: var(--zamora-chinchipe-blue);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* Legal modals */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3,12,20,.66);
    backdrop-filter: blur(8px);
}
.modal-backdrop.is-open { display: flex; }
.legal-modal {
    display: none;
    position: relative;
    width: min(620px, 100%);
    padding: 28px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.legal-modal.is-open { display: block; }
.legal-modal h3 { margin-bottom: 12px; color: var(--zamora-chinchipe-blue-dark); font-size: 28px; }
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(18,58,99,.08);
    color: var(--zamora-chinchipe-blue-dark);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 900px) {
    .portal-shell { align-items: flex-start; padding: 18px 0; }
    .portal-card { border-radius: 26px; }
    .portal-header, .portal-footer { flex-direction: column; align-items: flex-start; }
    .footer-credit { text-align: left; }
    .portal-main-grid { grid-template-columns: 1fr; min-height: auto; }
    .access-card { border-left: 0; border-top: 1px solid var(--line); }
    .ads-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .portal-shell { width: min(100% - 16px, 1180px); }
    .portal-header, .hero-copy, .access-card, .portal-footer { padding-left: 18px; padding-right: 18px; }
    .portal-header { align-items: stretch; }
    .free-badge { text-align: center; }
    .brand-mark { width: 46px; height: 46px; border-radius: 15px; }
    h1 { font-size: 19px; }
    .hero-copy h2 { font-size: 42px; }
    .quick-info, .form-grid { grid-template-columns: 1fr; }
    .intro-content { padding: 22px 0; }
    .intro-bottom h1 { font-size: 48px; }
    .intro-bottom p { font-size: 15px; }
}

/* V6 refinements: compact device audit + dual actions */
.device-audit-card {
    margin-top: 22px;
    padding: 13px 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(8,126,164,.18);
    box-shadow: 0 10px 26px rgba(18,58,99,.06);
}
.device-audit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.device-audit-head span {
    color: var(--zamora-chinchipe-blue-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.device-audit-head small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.device-audit-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--zamora-chinchipe-blue-dark);
    font-size: 12px;
    line-height: 1.35;
}
.device-audit-values span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(8,126,164,.14);
    word-break: break-all;
}
.device-audit-values b {
    color: var(--zamora-chinchipe-blue);
    font-size: 10px;
    letter-spacing: .12em;
}
.access-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 8px;
}
.btn-secondary {
    background: rgba(18,58,99,.06);
    border: 1px solid rgba(8,126,164,.24);
    color: var(--zamora-chinchipe-blue-dark);
    box-shadow: none;
}
.btn-secondary:hover {
    background: rgba(8,126,164,.10);
}

@media (max-width: 560px) {
    .device-audit-head { align-items: flex-start; flex-direction: column; gap: 4px; }
    .device-audit-values { display: grid; }
    .access-actions { align-items: stretch; }
    .access-actions .btn { width: 100%; }
}


/* V7 institutional footer with official Zamora Chinchipe brand artwork */
.portal-footer-institutional {
    padding: 0;
    display: block;
    border-top: 1px solid var(--line);
    background: #ffffff;
    overflow: hidden;
}
.footer-brand-panel {
    padding: 22px 24px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
}
.footer-brand-image {
    display: block;
    width: min(420px, 88%);
    height: auto;
    object-fit: contain;
}
.footer-green-line {
    height: 26px;
    background: #0b773d;
}
.footer-bottom-bar {
    padding: 20px 26px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--zamora-chinchipe-blue-dark);
}
.footer-bottom-bar .footer-contact strong,
.footer-bottom-bar .footer-contact span,
.footer-bottom-bar .footer-credit span,
.footer-bottom-bar .credit-seal {
    color: #ffffff !important;
}
.footer-bottom-bar .footer-contact span,
.footer-bottom-bar .footer-credit span:first-child {
    opacity: .86;
}
.footer-bottom-bar .registered-mark {
    border-color: rgba(255,255,255,.55);
    color: #ffffff;
}

@media (max-width: 900px) {
    .portal-footer-institutional { align-items: stretch; }
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom-bar .footer-credit { text-align: left; }
}
@media (max-width: 560px) {
    .footer-brand-panel { padding: 18px 14px 15px; }
    .footer-brand-image { width: min(340px, 92%); }
    .footer-green-line { height: 22px; }
    .footer-bottom-bar { padding: 18px; }
}


/* V11 editable logo */
.provincial-logo{width:48px;height:48px;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.92);padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.portal-main-logo{width:58px;height:58px;object-fit:contain;border-radius:17px;background:rgba(255,255,255,.92);padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);flex:0 0 auto}
@media(max-width:640px){.provincial-logo{width:44px;height:44px}.portal-main-logo{width:50px;height:50px}}

/* V13 turismo y mensaje informativo */
.tourism-cta-row{margin-top:18px;display:flex}.tourism-cta{border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:14px 18px;display:grid;gap:3px;text-align:left;background:linear-gradient(135deg,rgba(54,168,82,.95),rgba(0,169,183,.9));color:#06253a;box-shadow:0 18px 44px rgba(0,0,0,.16);cursor:pointer;min-width:min(100%,340px)}.tourism-cta span{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;opacity:.82}.tourism-cta strong{font-size:18px;line-height:1.15}.announcement-backdrop,.tourism-backdrop{position:fixed;inset:0;background:rgba(4,24,38,.72);display:none;align-items:center;justify-content:center;padding:18px;z-index:80;backdrop-filter:blur(10px)}.announcement-backdrop.is-open,.tourism-backdrop.is-open{display:flex}.announcement-modal,.tourism-modal{width:min(620px,100%);border-radius:28px;background:#f8fcfc;color:#123A63;border:1px solid rgba(255,255,255,.4);box-shadow:0 34px 90px rgba(0,0,0,.38);padding:28px;position:relative}.announcement-modal h3,.tourism-modal h3{font-size:30px;line-height:1.05;margin:8px 0 12px}.announcement-modal p,.tourism-modal p{color:#49687c;line-height:1.55}.announcement-modal .btn{margin-top:12px}.tourism-modal{width:min(860px,100%)}.tourism-slider{position:relative;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:10px;margin-top:18px}.tourism-image-frame{height:min(58vh,460px);background:#082f4a;border-radius:22px;overflow:hidden;position:relative;border:1px solid rgba(18,58,99,.15)}.tourism-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}.tourism-slide.is-active{opacity:1}.tourism-nav{width:46px;height:46px;border:0;border-radius:999px;background:linear-gradient(135deg,#16b9b1,#36A852);color:#06253a;font-size:34px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center}.tourism-count{text-align:center;margin-top:12px;color:#607789;font-weight:900}.tourism-modal .modal-close{position:absolute;right:18px;top:16px}.tourism-backdrop .modal-close{width:36px;height:36px;border:0;border-radius:999px;background:#e8f6f8;color:#123A63;font-size:24px;font-weight:900;cursor:pointer}@media(max-width:640px){.tourism-slider{grid-template-columns:1fr}.tourism-nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%)}.tourism-prev{left:10px}.tourism-next{right:10px}.tourism-image-frame{height:360px}.announcement-modal,.tourism-modal{padding:22px;border-radius:22px}.announcement-modal h3,.tourism-modal h3{font-size:24px}.tourism-cta{width:100%}}

.tourism-empty-public{margin-top:18px;border:1px dashed rgba(18,58,99,.28);border-radius:20px;padding:24px;text-align:center;background:#eef9f8;color:#123A63;display:grid;gap:6px}.tourism-empty-public strong{font-size:18px}.tourism-empty-public span{color:#607789}

/* =========================================================
   OLynx Portal GAD - Slider institucional público
   Fase visual: no rompe login, video, registros ni admin.
   ========================================================= */

.gad-slider-shell {
    min-height: 100vh;
}

.gad-slider-card {
    overflow: hidden;
}

.gad-slider-header .free-badge {
    display: none !important;
}

.gad-status-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    text-align: right;
}

.gad-status-pill span {
    font-size: 11px;
    opacity: .78;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.gad-status-pill strong {
    font-size: 14px;
}

.gad-screen-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 4px;
}

.gad-screen-dot {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(16, 40, 70, .24);
    cursor: pointer;
    transition: all .2s ease;
}

.gad-screen-dot.is-active {
    width: 34px;
    background: #0fb9b1;
}

.gad-slider {
    position: relative;
    min-height: 560px;
}

.gad-slide {
    display: none;
    animation: gadSlideIn .22s ease-out;
}

.gad-slide.is-active {
    display: block;
}

@keyframes gadSlideIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.gad-slide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 22px;
    padding: 22px;
    align-items: stretch;
}

.gad-login-grid {
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
}

.gad-copy {
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,251,255,.92));
    border: 1px solid rgba(16, 40, 70, .08);
    box-shadow: 0 18px 40px rgba(10, 30, 60, .08);
}

.gad-copy h2 {
    margin: 8px 0 12px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.02;
    color: #102846;
}

.gad-copy p {
    color: #4f6277;
    line-height: 1.58;
}

.gad-feature-panel {
    min-height: 380px;
    padding: 26px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at top left, rgba(15,185,177,.35), transparent 32%),
        linear-gradient(145deg, #102846, #0a1728);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 50px rgba(5, 20, 40, .22);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gad-brand-panel {
    align-items: center;
    text-align: center;
}

.gad-large-logo {
    width: min(220px, 80%);
    max-height: 190px;
    object-fit: contain;
    margin-bottom: 18px;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

.gad-large-mark {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border-radius: 32px;
    background: rgba(255,255,255,.12);
    font-size: 62px;
    font-weight: 800;
    margin-bottom: 18px;
}

.gad-brand-panel h3,
.gad-feature-panel h3 {
    margin: 0 0 8px;
    font-size: 26px;
}

.gad-brand-panel p,
.gad-feature-panel p {
    color: rgba(255,255,255,.78);
}

.gad-device-card {
    margin: 22px 0;
}

.gad-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.gad-info-list {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.gad-info-list > div {
    padding: 15px 16px;
    border-radius: 18px;
    background: #f3f8fb;
    border: 1px solid rgba(16, 40, 70, .08);
}

.gad-info-list span {
    display: block;
    font-size: 12px;
    color: #6a7b8c;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.gad-info-list strong {
    display: block;
    color: #102846;
    font-size: 15px;
}

.gad-weather-card {
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    margin-bottom: 18px;
}

.gad-weather-icon {
    display: block;
    font-size: 58px;
    line-height: 1;
    margin-bottom: 10px;
}

.gad-mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255,255,255,.08);
}

.gad-mini-calendar div,
.gad-mini-calendar span {
    min-height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    font-size: 13px;
}

.gad-mini-calendar div {
    background: rgba(15,185,177,.35);
    font-weight: 800;
}

.gad-tourism-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.gad-tourism-preview img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.gad-empty-visual {
    text-align: center;
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
}

.gad-empty-visual span {
    display: block;
    font-size: 62px;
    margin-bottom: 8px;
}

.gad-works-panel {
    gap: 12px;
}

.gad-works-panel article {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}

.gad-works-panel article span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background: rgba(15,185,177,.28);
    font-weight: 800;
    margin-bottom: 8px;
}

.gad-works-panel h4 {
    margin: 0 0 6px;
    font-size: 17px;
}

.gad-works-panel p {
    margin: 0;
    font-size: 14px;
}

.gad-legal-stack {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.gad-legal-stack button {
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    border: 1px solid rgba(16, 40, 70, .10);
    border-radius: 18px;
    background: #f5f9fc;
    cursor: pointer;
}

.gad-legal-stack button strong {
    display: block;
    color: #102846;
    font-size: 15px;
    margin-bottom: 4px;
}

.gad-legal-stack button span {
    color: #0b938d;
    font-weight: 700;
    font-size: 13px;
}

.gad-legal-panel {
    align-items: center;
    text-align: center;
}

.gad-legal-panel > span {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(15,185,177,.25);
    font-size: 52px;
    font-weight: 900;
    margin-bottom: 18px;
}

.gad-access-card {
    width: auto;
    max-width: none;
    min-height: auto;
}

.gad-slider-controls {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 22px 22px;
}

.gad-slider-controls .btn {
    min-width: 140px;
}

.gad-slider-controls .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .gad-status-pill {
        display: none;
    }

    .gad-slide-grid,
    .gad-login-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .gad-slider {
        min-height: auto;
    }

    .gad-copy,
    .gad-feature-panel {
        padding: 20px;
        border-radius: 24px;
    }

    .gad-feature-panel {
        min-height: 260px;
    }

    .gad-tourism-preview img {
        height: 120px;
    }

    .gad-slider-controls {
        position: sticky;
        bottom: 0;
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(12px);
        padding: 12px 14px;
        z-index: 20;
    }

    .gad-slider-controls .btn {
        flex: 1;
        min-width: 0;
    }
}

/* =========================================================
   FIX Slider GAD: bloqueo lateral + retiro logo azul
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
}

body {
    touch-action: pan-y;
}

.portal-shell,
.portal-card,
.gad-slider-shell,
.gad-slider-card,
.gad-slider,
.gad-slide,
.gad-slide-grid {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.gad-slider {
    touch-action: pan-y;
}

/* El logo grande dentro del panel azul no va.
   Se conserva la marca institucional fuerte en el footer. */
.gad-brand-panel .gad-large-logo,
.gad-brand-panel .gad-large-mark {
    display: none !important;
}

.gad-brand-panel {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.gad-brand-panel::before {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at top left, rgba(15,185,177,.30), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    pointer-events: none;
}

.gad-brand-panel::after {
    content: "Portal Digital Provincial";
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    padding: 18px 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: #ffffff;
    font-weight: 900;
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

.gad-brand-panel h3,
.gad-brand-panel p {
    position: relative;
    z-index: 1;
}

.gad-brand-panel h3 {
    margin-top: 22px;
    max-width: 360px;
}

.gad-brand-panel p {
    max-width: 320px;
}

/* =========================================================
   Clima automático + calendario vivo
   ========================================================= */

.gad-weather-live {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

.gad-weather-live .gad-weather-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(255,255,255,.12);
    font-size: 44px;
}

.gad-weather-main h3 {
    margin: 0 0 8px;
}

.gad-weather-main strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
    color: #ffffff;
}

.gad-weather-main p {
    margin: 0;
}

.gad-weather-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.gad-weather-meta span {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 12px;
    color: rgba(255,255,255,.86);
}

.gad-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 6px 0 10px;
    padding: 0 4px;
}

.gad-calendar-head strong {
    color: #ffffff;
    font-size: 18px;
    text-transform: capitalize;
}

.gad-calendar-head span {
    color: rgba(255,255,255,.70);
    font-size: 13px;
    font-weight: 700;
}

.gad-mini-calendar-live {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.gad-mini-calendar-live .gad-cal-weekday,
.gad-mini-calendar-live .gad-cal-day,
.gad-mini-calendar-live .gad-cal-empty {
    min-height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.gad-mini-calendar-live .gad-cal-weekday {
    background: rgba(15,185,177,.42);
    color: #ffffff;
}

.gad-mini-calendar-live .gad-cal-day {
    background: rgba(255,255,255,.10);
    color: #ffffff;
}

.gad-mini-calendar-live .gad-cal-empty {
    background: transparent;
}

.gad-mini-calendar-live .gad-cal-weekend {
    background: rgba(255,255,255,.16);
}

.gad-mini-calendar-live .gad-cal-today {
    background: linear-gradient(135deg, #16c6bd, #79c843);
    color: #061827;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 12px 24px rgba(0,0,0,.25);
}

@media (max-width: 520px) {
    .gad-weather-live {
        grid-template-columns: 1fr;
    }

    .gad-weather-live .gad-weather-icon {
        width: 64px;
        height: 64px;
    }

    .gad-weather-main strong {
        font-size: 30px;
    }
}

/* =========================================================
   Pantalla de bienvenida limpia
   - Sin panel azul repetido
   - Sin botón interno duplicado
   - Evita mostrar footer de entrada
   ========================================================= */

.gad-slide-welcome .gad-slide-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin: 0 auto;
}

.gad-slide-welcome .gad-copy {
    min-height: auto;
}

.gad-slide-welcome .gad-copy h2 {
    font-size: clamp(28px, 5vw, 44px);
}

.gad-slide-welcome .gad-device-card {
    margin-bottom: 0;
}

/* Más altura útil para que el footer no aparezca inmediatamente en móvil */
.gad-slider {
    min-height: calc(100vh - 250px);
}

.gad-slide.is-active {
    min-height: calc(100vh - 250px);
}

.gad-slide.is-active .gad-slide-grid {
    min-height: calc(100vh - 320px);
    align-items: center;
}

@media (max-width: 900px) {
    .gad-slider {
        min-height: calc(100vh - 230px);
    }

    .gad-slide.is-active {
        min-height: calc(100vh - 230px);
    }

    .gad-slide.is-active .gad-slide-grid {
        min-height: calc(100vh - 300px);
        align-items: center;
    }

    .gad-slide-welcome .gad-slide-grid {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* =========================================================
   Pantalla final login limpia
   - Solo formulario de visitante
   - Sin tarjeta superior duplicada
   - Sin legales repetidos
   ========================================================= */

.gad-slide-login .gad-login-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
    margin: 0 auto;
    align-items: start;
}

.gad-slide-login .gad-access-card {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 28px;
}

.gad-slide-login .gad-access-card > .kicker {
    margin-top: 0;
}

.gad-slide-login .portal-form {
    margin-top: 18px;
}

.gad-slide-login .form-grid {
    grid-template-columns: 1fr;
}

.gad-slide-login .legal-actions {
    display: none !important;
}

.gad-slide-login .gad-slide-grid {
    align-items: start !important;
}

@media (max-width: 900px) {
    .gad-slide-login .gad-login-grid {
        max-width: 100%;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .gad-slide-login .gad-access-card {
        border-radius: 24px;
    }
}

/* FIX: cada slide inicia arriba, no centrada verticalmente */
.gad-slide.is-active .gad-slide-grid {
    align-items: start !important;
}

@media (max-width: 900px) {
    .gad-slide.is-active .gad-slide-grid {
        align-items: start !important;
    }
}

/* =========================================================
   Tarjeta: volver al portal luego de conectarse
   ========================================================= */

.portal-return-card {
    margin-top: 18px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(15,185,177,.10), rgba(121,200,67,.10));
    border: 1px solid rgba(15,185,177,.28);
}

.portal-return-card span {
    display: block;
    color: #102846;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.portal-return-card p {
    margin: 0 0 10px;
    color: #4f6277;
    font-size: 14px;
    line-height: 1.45;
}

.portal-return-card small {
    display: block;
    margin-top: 9px;
    color: #64798d;
    font-size: 12px;
}

.portal-return-link {
    width: 100%;
    border: 1px solid rgba(15,185,177,.35);
    background: #ffffff;
    color: #0b3d66;
    border-radius: 999px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    word-break: break-word;
}

.portal-return-link.is-copied {
    background: #0fb9b1;
    color: #ffffff;
}

/* Obras GAD reutiliza formato visual de turismo */
.gad-works-preview img {
    filter: saturate(1.02) contrast(1.02);
}

.works-modal .tourism-image-frame img {
    display: none;
}

.works-modal .tourism-image-frame img.is-active {
    display: block;
}

/* =========================================================
   Botones propios de Turismo / Obras
   - No duplicar Continuar
   - Acción propia centrada y abajo
   ========================================================= */

.gad-slide-tourism .gad-action-row,
.gad-slide-works .gad-action-row {
    margin-top: 24px;
    justify-content: center;
}

.gad-slide-tourism .gad-action-row .btn,
.gad-slide-works .gad-action-row .btn {
    min-width: 220px;
}

@media (max-width: 900px) {
    .gad-slide-tourism .gad-action-row,
    .gad-slide-works .gad-action-row {
        justify-content: center;
        margin-top: 18px;
    }

    .gad-slide-tourism .gad-action-row .btn,
    .gad-slide-works .gad-action-row .btn {
        width: auto;
        min-width: 210px;
    }
}

/* =========================================================
   Bienvenida institucional con imagen + bloque técnico aparte
   ========================================================= */

.gad-slide-welcome .gad-slide-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr);
    max-width: none;
    margin: 0;
    align-items: stretch !important;
}

.welcome-left-stack {
    display: grid;
    gap: 18px;
}

.welcome-copy {
    min-height: auto;
}

.welcome-copy p {
    font-size: 18px;
    line-height: 1.6;
}

.welcome-tech-card {
    margin: 0;
}

.welcome-image-panel {
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.welcome-feature-image {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 36px rgba(0,0,0,.20);
}

@media (max-width: 900px) {
    .gad-slide-welcome .gad-slide-grid {
        grid-template-columns: 1fr;
    }

    .welcome-image-panel {
        min-height: 260px;
    }

    .welcome-feature-image {
        max-height: 340px;
    }
}


/* OLynx Intro Video Edit V7 */
.intro-overlay {
    transition: opacity .35s ease, background .35s ease;
}
.intro-bottom .intro-title,
.intro-bottom .intro-message {
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.intro-screen.is-playing .intro-overlay {
    opacity: 0;
    background: transparent !important;
    pointer-events: none;
}
.intro-screen.is-playing .intro-bottom .intro-title,
.intro-screen.is-playing .intro-bottom .intro-message {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    height: 0;
    margin: 0;
    overflow: hidden;
}
.intro-screen.is-playing .intro-content {
    pointer-events: none;
}
.intro-screen.is-playing .intro-actions {
    pointer-events: auto;
}

/* OLynx final fix - Modal Obras autoajustable */
.works-modal .tourism-image-frame {
    width: 100% !important;
    max-height: 62vh !important;
    min-height: 280px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.works-modal .works-slide,
.works-modal .tourism-image-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: 62vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
}

.works-modal {
    max-height: 92vh !important;
    overflow-y: auto !important;
}

@media (max-width: 560px) {
    .works-modal .tourism-image-frame {
        max-height: 56vh !important;
        min-height: 240px !important;
    }

    .works-modal .works-slide,
    .works-modal .tourism-image-frame img {
        max-height: 56vh !important;
    }
}

/* =========================================================
   OLynx V12 - Intro preload styles
   ========================================================= */
.intro-skip.is-preloading,
.intro-skip:disabled.is-preloading {
    opacity: .52 !important;
    filter: grayscale(.15) !important;
    cursor: wait !important;
    pointer-events: none !important;
}

.intro-skip.is-video-ready {
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer !important;
}


/* OLynx Portal - aviso previo de cierre del captive browser */
.captive-final-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3, 15, 28, .72);
    backdrop-filter: blur(12px);
}
.captive-final-backdrop.is-open {
    display: flex;
}
.captive-final-modal {
    width: min(520px, 100%);
    border-radius: 26px;
    padding: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,249,250,.98));
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    color: #123A63;
}
.captive-final-modal h3 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.1;
}
.captive-final-modal p {
    margin: 0;
    color: #496579;
    line-height: 1.55;
}
.captive-final-url {
    display: grid;
    gap: 5px;
    margin: 18px 0;
    padding: 14px;
    border-radius: 18px;
    background: #edf8fa;
    border: 1px solid rgba(18,58,99,.12);
    word-break: break-word;
}
.captive-final-url span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #607789;
}
.captive-final-url strong {
    font-size: 14px;
    color: #123A63;
}
.captive-final-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 560px) {
    .captive-final-actions .btn {
        width: 100%;
    }
}

/* OLynx Portal V2 - selector de idioma publico */
.portal-lang-toggle {
    min-width: 86px;
    height: 48px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--zamora-chinchipe-cyan), var(--zamora-chinchipe-light-green));
    color: #042336;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0,0,0,.26);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.portal-lang-toggle::before {
    content: "Idioma";
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 900;
    opacity: .78;
}
.portal-lang-toggle:hover,
.portal-lang-toggle:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
    outline: none;
    box-shadow: 0 20px 48px rgba(0,0,0,.30), 0 0 0 4px rgba(42,255,239,.15);
}
.intro-lang-toggle {
    position: relative;
    z-index: 8;
}
.intro-screen.is-playing .intro-lang-toggle,
.intro-screen.is-playing .intro-center-brand,
.intro-screen.is-playing .provincial-badge {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body[data-portal-lang="en"] .portal-lang-toggle {
    background: linear-gradient(135deg, var(--zamora-chinchipe-light-green), var(--zamora-chinchipe-cyan));
}
.portal-form label > span {
    display: block;
    margin-bottom: 7px;
}
.portal-form .check-line > span {
    margin-bottom: 0;
}
@media (max-width: 700px) {
    .intro-topbar { align-items: flex-start; }
    .portal-lang-toggle { min-width: 76px; height: 44px; padding: 0 16px; font-size: 12px; }
    .portal-lang-toggle::before { display: none; }
    .intro-center-brand { top: 40%; width: min(310px, 72vw); min-height: 160px; padding: 22px; border-radius: 32px; }
    .intro-center-brand img { width: min(250px, 88%); max-height: 190px; }
    .portal-header {
        align-items: flex-start;
    }
}

/* OLynx V15.1 - Video intro responsive para vista laptop/desktop
   El video original suele ser vertical. En pantallas anchas se muestra completo
   y el espacio lateral queda cubierto con degradado corporativo, no negro. */
.intro-video-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 28%, rgba(34, 190, 204, .24), transparent 36%),
        radial-gradient(circle at 78% 72%, rgba(122, 212, 65, .16), transparent 32%),
        linear-gradient(135deg, #061421 0%, #073653 46%, #061421 100%);
    z-index: 0;
}
.intro-video {
    position: relative;
    z-index: 1;
}
.intro-overlay,
.intro-content {
    z-index: 2;
}
@media (min-width: 760px) and (orientation: landscape) {
    .intro-video {
        object-fit: contain;
    }
}
body[data-preview-device="laptop"] .intro-video {
    object-fit: contain;
}
body[data-preview-device="laptop"] .intro-overlay {
    background:
        linear-gradient(90deg, rgba(6,20,33,.48), rgba(6,20,33,.08), rgba(6,20,33,.48)),
        linear-gradient(0deg, rgba(6,20,33,.50), transparent 48%, rgba(6,20,33,.22));
}

/* Boton de video: permanece opaco/deshabilitado hasta que exista buffer real. */
.intro-skip.is-preloading,
.intro-skip:disabled {
    opacity: .58;
    cursor: wait;
    filter: saturate(.75);
}
.intro-skip.is-video-ready {
    opacity: 1;
    cursor: pointer;
    filter: none;
}


/* =========================================================
   OLynx Portal V2 - Temas visuales comerciales
   Cambian el color base del portal publico sin tocar contenido.
   ========================================================= */
body[data-portal-theme="blue"] {
    --zamora-chinchipe-blue-dark: #0B2346;
    --zamora-chinchipe-blue: #145DA0;
    --zamora-chinchipe-cyan: #22B8D6;
    --zamora-chinchipe-green: #2FD3B6;
    --zamora-chinchipe-light-green: #8EE6CF;
    --zamora-chinchipe-yellow: #F2C94C;
    --theme-bg-a: #061427;
    --theme-bg-b: #0B356B;
    --theme-bg-c: #0D8398;
    --theme-rgb-main: 20, 93, 160;
    --theme-rgb-accent: 34, 184, 214;
}
body[data-portal-theme="emerald"] {
    --zamora-chinchipe-blue-dark: #0E2E26;
    --zamora-chinchipe-blue: #0B6F5A;
    --zamora-chinchipe-cyan: #16B6A1;
    --zamora-chinchipe-green: #2FAE5A;
    --zamora-chinchipe-light-green: #A4D65E;
    --zamora-chinchipe-yellow: #F2C94C;
    --theme-bg-a: #061a16;
    --theme-bg-b: #0a3b32;
    --theme-bg-c: #113f2c;
    --theme-rgb-main: 11, 111, 90;
    --theme-rgb-accent: 47, 174, 90;
}
body[data-portal-theme="coffee"] {
    --zamora-chinchipe-blue-dark: #2E1C12;
    --zamora-chinchipe-blue: #7A4A28;
    --zamora-chinchipe-cyan: #C78A4C;
    --zamora-chinchipe-green: #A06A34;
    --zamora-chinchipe-light-green: #E2B16F;
    --zamora-chinchipe-yellow: #F2C66D;
    --theme-bg-a: #160d08;
    --theme-bg-b: #3b2415;
    --theme-bg-c: #7a4a28;
    --theme-rgb-main: 122, 74, 40;
    --theme-rgb-accent: 199, 138, 76;
}
body[data-portal-theme="violet"] {
    --zamora-chinchipe-blue-dark: #241341;
    --zamora-chinchipe-blue: #5B2E91;
    --zamora-chinchipe-cyan: #8F63D9;
    --zamora-chinchipe-green: #B47CFF;
    --zamora-chinchipe-light-green: #D7B8FF;
    --zamora-chinchipe-yellow: #F2C94C;
    --theme-bg-a: #12091f;
    --theme-bg-b: #2b164d;
    --theme-bg-c: #5b2e91;
    --theme-rgb-main: 91, 46, 145;
    --theme-rgb-accent: 180, 124, 255;
}
body[data-portal-theme="rose"] {
    --zamora-chinchipe-blue-dark: #3F122E;
    --zamora-chinchipe-blue: #9B2F6B;
    --zamora-chinchipe-cyan: #D65A9F;
    --zamora-chinchipe-green: #B9367C;
    --zamora-chinchipe-light-green: #F09BCB;
    --zamora-chinchipe-yellow: #F2C94C;
    --theme-bg-a: #1f0916;
    --theme-bg-b: #4b1635;
    --theme-bg-c: #9b2f6b;
    --theme-rgb-main: 155, 47, 107;
    --theme-rgb-accent: 214, 90, 159;
}
body[data-portal-theme="orange"] {
    --zamora-chinchipe-blue-dark: #3C1F09;
    --zamora-chinchipe-blue: #B95B16;
    --zamora-chinchipe-cyan: #F28C28;
    --zamora-chinchipe-green: #D97706;
    --zamora-chinchipe-light-green: #FFC46B;
    --zamora-chinchipe-yellow: #FFE08A;
    --theme-bg-a: #1f1005;
    --theme-bg-b: #5a2b0b;
    --theme-bg-c: #b95b16;
    --theme-rgb-main: 185, 91, 22;
    --theme-rgb-accent: 242, 140, 40;
}
body[data-portal-theme="red"] {
    --zamora-chinchipe-blue-dark: #3A1111;
    --zamora-chinchipe-blue: #9E2A2B;
    --zamora-chinchipe-cyan: #D94A4A;
    --zamora-chinchipe-green: #B83232;
    --zamora-chinchipe-light-green: #F08B8B;
    --zamora-chinchipe-yellow: #F2C94C;
    --theme-bg-a: #1d0808;
    --theme-bg-b: #4a1515;
    --theme-bg-c: #9e2a2b;
    --theme-rgb-main: 158, 42, 43;
    --theme-rgb-accent: 217, 74, 74;
}
body[data-portal-theme="slate"] {
    --zamora-chinchipe-blue-dark: #111827;
    --zamora-chinchipe-blue: #334155;
    --zamora-chinchipe-cyan: #64748B;
    --zamora-chinchipe-green: #475569;
    --zamora-chinchipe-light-green: #CBD5E1;
    --zamora-chinchipe-yellow: #F2C94C;
    --theme-bg-a: #05070b;
    --theme-bg-b: #111827;
    --theme-bg-c: #334155;
    --theme-rgb-main: 51, 65, 85;
    --theme-rgb-accent: 100, 116, 139;
}
body[data-portal-theme] {
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--theme-rgb-accent), .28), transparent 30%),
        radial-gradient(circle at 80% 5%, rgba(var(--theme-rgb-main), .24), transparent 32%),
        linear-gradient(145deg, var(--theme-bg-a), var(--theme-bg-b) 55%, var(--theme-bg-c));
}
body[data-portal-theme]::before {
    background:
        linear-gradient(135deg, rgba(var(--theme-rgb-main), .82), rgba(var(--theme-rgb-accent), .44), rgba(var(--theme-rgb-main), .30)),
        url('../img/prefectura-bg.jpg');
    background-size: cover;
    background-position: center;
}
body[data-portal-theme] .intro-screen {
    background: linear-gradient(145deg, var(--theme-bg-a), var(--theme-bg-b));
}
body[data-portal-theme] .intro-overlay {
    background:
        linear-gradient(90deg, rgba(0,0,0,.54), rgba(var(--theme-rgb-main),.10), rgba(0,0,0,.36)),
        linear-gradient(0deg, rgba(0,0,0,.50), transparent 48%, rgba(var(--theme-rgb-main),.28));
}
body[data-portal-theme] .intro-video {
    background: linear-gradient(135deg, var(--zamora-chinchipe-blue-dark), var(--zamora-chinchipe-blue));
}
body[data-portal-theme] .gad-slider-card,
body[data-portal-theme] .portal-card {
    border-color: rgba(var(--theme-rgb-accent), .22);
}
body[data-portal-theme] .portal-header,
body[data-portal-theme] .gad-slider-header {
    background: linear-gradient(135deg, var(--zamora-chinchipe-blue-dark), var(--zamora-chinchipe-blue), var(--zamora-chinchipe-cyan));
}
body[data-portal-theme] .btn-primary,
body[data-portal-theme] .intro-skip,
body[data-portal-theme] .portal-lang-toggle,
body[data-portal-theme] .tourism-cta,
body[data-portal-theme] .tourism-nav {
    background: linear-gradient(135deg, var(--zamora-chinchipe-cyan), var(--zamora-chinchipe-light-green));
}
body[data-portal-theme] .gad-dot.is-active,
body[data-portal-theme] .calendar-day.is-today,
body[data-portal-theme] .progress-fill {
    background: linear-gradient(135deg, var(--zamora-chinchipe-cyan), var(--zamora-chinchipe-light-green));
}
body[data-portal-theme] .gad-feature-panel,
body[data-portal-theme] .gad-weather-card,
body[data-portal-theme] .calendar-panel {
    background: linear-gradient(145deg, rgba(var(--theme-rgb-main), .92), rgba(6, 20, 33, .96));
}


/* OLynx Portal - intro video modo laptop con fondo dinamico desenfocado */
.intro-video-bg {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.10);
    filter: blur(24px) brightness(.54) saturate(1.16);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

@media (min-width: 760px) and (orientation: landscape) {
    body:not([data-preview-device="phone"]) .intro-video-bg {
        display: block;
        opacity: .92;
    }

    body:not([data-preview-device="phone"]) .intro-video {
        width: min(48vw, 520px, calc(100vh * .60));
        height: 100%;
        margin: 0 auto;
        display: block;
        object-fit: cover;
        background: transparent !important;
        box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 28px 90px rgba(0,0,0,.38);
    }

    body:not([data-preview-device="phone"]) .intro-video-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgba(4,15,24,.54) 0%, rgba(4,15,24,.12) 22%, rgba(4,15,24,0) 50%, rgba(4,15,24,.12) 78%, rgba(4,15,24,.54) 100%),
            radial-gradient(circle at 50% 45%, transparent 0%, transparent 34%, rgba(4,15,24,.22) 72%, rgba(4,15,24,.38) 100%);
    }

    body:not([data-preview-device="phone"]) .intro-video {
        position: relative;
        z-index: 2;
    }

    body:not([data-preview-device="phone"]) .intro-overlay,
    body:not([data-preview-device="phone"]) .intro-content {
        z-index: 4;
    }
}

body[data-preview-device="laptop"] .intro-video-bg {
    display: block;
    opacity: .92;
}

body[data-preview-device="laptop"] .intro-video {
    width: min(48vw, 520px, calc(100vh * .60));
    height: 100%;
    margin: 0 auto;
    display: block;
    object-fit: cover;
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 28px 90px rgba(0,0,0,.38);
}

body[data-preview-device="phone"] .intro-video-bg {
    display: none !important;
}

/* OLynx Portal Admin - control de inicio con video */
.intro-control-box {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.admin-toggle-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: start;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.06);
}
.admin-toggle-card input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}
.admin-toggle-card span {
    font-weight: 900;
}
.admin-toggle-card small {
    grid-column: 2;
    color: var(--muted);
    line-height: 1.4;
    font-weight: 700;
}
.compact-settings-form {
    display: grid;
    gap: 12px;
}


/* OLynx Portal - Prefectura final: inicio limpio y video laptop profesional */
/* Antes de reproducir no mostramos el primer frame/poster del MP4 para evitar fondos de prueba/circulos. */
.intro-screen:not(.is-playing) .intro-video,
.intro-screen:not(.is-playing) .intro-video-bg {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Fondo limpio de bienvenida: institucional, sin circulos ni poster del video. */
.intro-video-wrap::before {
    background:
        linear-gradient(135deg,
            rgba(var(--theme-rgb-main), .98) 0%,
            rgba(var(--theme-rgb-main), .88) 38%,
            rgba(var(--theme-rgb-accent), .82) 100%) !important;
}

/* La marca central debe dominar la tarjeta, pero sin tapar el mensaje. */
.intro-center-brand {
    top: 38% !important;
    width: min(460px, 52vw) !important;
    min-height: 165px !important;
    padding: 18px 24px !important;
    border-radius: 34px !important;
}
.intro-center-brand img {
    width: 100% !important;
    max-width: 390px !important;
    max-height: 150px !important;
    object-fit: contain !important;
}

@media (min-width: 760px) and (orientation: landscape) {
    body:not([data-preview-device="phone"]) .intro-bottom {
        max-width: 900px;
    }
    body:not([data-preview-device="phone"]) .intro-bottom h1 {
        font-size: clamp(48px, 5.3vw, 72px);
        line-height: .98;
        letter-spacing: -.035em;
        max-width: 900px;
    }
    body:not([data-preview-device="phone"]) .intro-bottom p {
        max-width: 780px;
    }
    body:not([data-preview-device="phone"]) .intro-screen.is-playing .intro-video,
    body:not([data-preview-device="phone"]) .intro-screen.is-playing .intro-video-bg {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

body[data-preview-device="laptop"] .intro-bottom {
    max-width: 900px;
}
body[data-preview-device="laptop"] .intro-bottom h1 {
    font-size: clamp(48px, 5.3vw, 72px);
    line-height: .98;
    letter-spacing: -.035em;
    max-width: 900px;
}
body[data-preview-device="laptop"] .intro-screen.is-playing .intro-video,
body[data-preview-device="laptop"] .intro-screen.is-playing .intro-video-bg {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 700px) {
    .intro-center-brand {
        top: 39% !important;
        width: min(330px, 76vw) !important;
        min-height: 150px !important;
        padding: 18px 20px !important;
    }
    .intro-center-brand img {
        max-width: 280px !important;
        max-height: 120px !important;
    }
}


/* OLynx Portal - invitación opcional a revista turística */
.captive-magazine-link {
    border-style: dashed;
    background: linear-gradient(135deg, rgba(38, 195, 163, 0.12), rgba(119, 214, 86, 0.10));
}
.captive-magazine-link strong {
    color: var(--theme-accent, #22c7a7);
    word-break: break-word;
}

/* OLynx tourism image metadata captions */
.tourism-preview-card {
    position: relative;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
}

.tourism-preview-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tourism-preview-card figcaption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(4, 27, 29, .78), rgba(7, 70, 60, .54));
    color: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.tourism-preview-card figcaption strong,
.tourism-preview-card figcaption span {
    display: block;
    line-height: 1.15;
}

.tourism-preview-card figcaption strong {
    font-size: .85rem;
    font-weight: 900;
}

.tourism-preview-card figcaption span {
    margin-top: 2px;
    font-size: .72rem;
    opacity: .92;
}

.tourism-caption {
    margin: 14px auto 6px;
    max-width: 760px;
    text-align: center;
    color: #12304d;
}

.tourism-caption strong,
.tourism-caption span {
    display: block;
}

.tourism-caption strong {
    font-size: 1.08rem;
    font-weight: 900;
}

.tourism-caption span {
    margin-top: 4px;
    color: #55708a;
    font-size: .92rem;
    line-height: 1.35;
}

.tourism-caption:empty,
.tourism-caption strong:empty,
.tourism-caption span:empty {
    display: none;
}

.gad-tourism-preview .tourism-preview-card {
    height: 160px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.gad-tourism-preview .tourism-preview-card img {
    height: 100%;
    border: 0;
    box-shadow: none;
    border-radius: 20px;
}

@media(max-width: 640px) {
    .gad-tourism-preview .tourism-preview-card {
        height: 120px;
    }
    .tourism-preview-card figcaption {
        left: 7px;
        right: 7px;
        bottom: 7px;
        padding: 6px 8px;
    }
    .tourism-preview-card figcaption span {
        display: none;
    }
}

/* OLynx final production patch: fill visual media cards without touching uploaded content */
.gad-slide-welcome .welcome-image-panel,
.gad-slide-tourism .gad-feature-panel,
.gad-slide-works .gad-feature-panel {
    padding: 8px !important;
    overflow: hidden !important;
}

.gad-slide-welcome .welcome-image-panel {
    min-height: 300px;
}

.gad-slide-welcome .welcome-feature-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 280px;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 22px !important;
    display: block;
}

.gad-slide-tourism .gad-tourism-preview {
    width: 100%;
    height: 100%;
    min-height: 330px;
    gap: 8px !important;
}

.gad-slide-tourism .gad-tourism-preview > img,
.gad-slide-tourism .gad-tourism-preview .tourism-preview-card {
    width: 100%;
    height: 100% !important;
    min-height: 160px;
    border-radius: 18px !important;
}

.gad-slide-tourism .gad-tourism-preview .tourism-preview-card > img,
.gad-slide-tourism .gad-tourism-preview > img {
    object-fit: cover !important;
    border-radius: 18px !important;
}

@media (max-width: 640px) {
    .gad-slide-welcome .welcome-image-panel,
    .gad-slide-tourism .gad-feature-panel,
    .gad-slide-works .gad-feature-panel {
        padding: 7px !important;
        border-radius: 24px !important;
    }

    .gad-slide-welcome .welcome-image-panel {
        min-height: 265px !important;
    }

    .gad-slide-welcome .welcome-feature-image {
        min-height: 250px !important;
        border-radius: 19px !important;
    }

    .gad-slide-tourism .gad-tourism-preview {
        min-height: 335px !important;
        gap: 7px !important;
    }

    .gad-slide-tourism .gad-tourism-preview > img,
    .gad-slide-tourism .gad-tourism-preview .tourism-preview-card {
        min-height: 160px !important;
        border-radius: 17px !important;
    }

    .gad-slide-tourism .gad-tourism-preview .tourism-preview-card > img,
    .gad-slide-tourism .gad-tourism-preview > img {
        border-radius: 17px !important;
    }
}


/* OLynx final: modales de galería con imagen arriba y texto propio abajo */
.tourism-modal .tourism-slider:first-of-type,
.works-modal .tourism-slider:first-of-type {
    margin-top: 0;
}
.tourism-caption,
.works-caption {
    margin-top: 14px;
    text-align: center;
    display: grid;
    gap: 6px;
}
.tourism-caption strong,
.works-caption strong {
    display: block;
    color: var(--portal-text, #14304a);
    font-size: clamp(1.05rem, 3.4vw, 1.35rem);
    line-height: 1.15;
}
.tourism-caption span,
.works-caption span {
    display: block;
    color: var(--portal-muted, #4e6578);
    font-size: clamp(.9rem, 2.9vw, 1rem);
    line-height: 1.35;
    max-width: 680px;
    margin: 0 auto;
}
.tourism-caption strong:empty,
.tourism-caption span:empty,
.works-caption strong:empty,
.works-caption span:empty {
    display: none;
}