/* ============================================================================
   Dunes Demo — escaparate de demos en vivo
   Claro por defecto · modo oscuro con html[data-theme="dark"] · trilingüe
   ========================================================================== */
:root{
    --d-bg:#f6f8fc; --d-bg2:#eef2f9; --d-card:#ffffff; --d-line:#e4e8f0;
    --d-ink:#0d1b3e; --d-ink2:#5b6680; --d-blu:#33519F; --d-blu-soft:rgba(51,81,159,.10);
    --d-wrap:1120px; --d-shadow:0 16px 50px rgba(13,27,62,.08);
}
html[data-theme="dark"]{
    --d-bg:#0b1220; --d-bg2:#111c33; --d-card:#15203a; --d-line:rgba(255,255,255,.10);
    --d-ink:#eaf0fb; --d-ink2:#aeb9d4; --d-blu:#5b86e8; --d-blu-soft:rgba(91,134,232,.16);
    --d-shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
.ddt-body{margin:0;background:var(--d-bg);color:var(--d-ink);font-family:Inter,-apple-system,system-ui,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease;}
a{color:inherit;text-decoration:none;}
.ddt-wrap{max-width:var(--d-wrap);margin:0 auto;padding:0 24px;}

/* Swap de logo claro/oscuro — img. para ganar en especificidad a .ddt-hdr__logo
   (si no, el logo blanco se mostraba también en modo claro, duplicado). */
img.ddt-logo-light{display:block;}
img.ddt-logo-dark{display:none;}
html[data-theme="dark"] img.ddt-logo-light{display:none;}
html[data-theme="dark"] img.ddt-logo-dark{display:block;}

/* Header */
.ddt-hdr{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);background:color-mix(in srgb,var(--d-bg) 78%,transparent);border-bottom:1px solid var(--d-line);}
.ddt-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px;}
.ddt-hdr__brand{display:inline-flex;align-items:center;}
.ddt-hdr__logo{height:42px;width:auto;display:block;}
.ddt-hdr__actions{display:flex;align-items:center;gap:12px;}

/* Selector de idioma */
.ddt-lang{display:inline-flex;align-items:center;background:var(--d-bg2);border:1px solid var(--d-line);border-radius:999px;padding:3px;}
.ddt-lang__opt{font-size:12.5px;font-weight:700;color:var(--d-ink2);padding:5px 11px;border-radius:999px;line-height:1;transition:color .15s ease,background .15s ease;}
.ddt-lang__opt:hover{color:var(--d-ink);}
.ddt-lang__opt.is-active{background:var(--d-blu);color:#fff;}

/* Botón de tema */
.ddt-theme{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--d-line);background:var(--d-card);color:var(--d-ink);cursor:pointer;transition:background .15s ease,color .15s ease;}
.ddt-theme:hover{background:var(--d-blu-soft);color:var(--d-blu);}
.ddt-theme svg{width:18px;height:18px;}
.ddt-theme__sun{display:none;}
html[data-theme="dark"] .ddt-theme__moon{display:none;}
html[data-theme="dark"] .ddt-theme__sun{display:inline-flex;}
.ddt-hdr__back{font-size:13px;color:var(--d-ink2);font-weight:600;transition:color .15s ease;}
.ddt-hdr__back:hover{color:var(--d-ink);}

/* Hero (texto centrado) */
.ddt-hero{position:relative;overflow:hidden;padding:84px 0 44px;text-align:center;}
.ddt-hero__glow{position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:900px;height:520px;background:radial-gradient(ellipse,var(--d-blu-soft) 0%,transparent 65%);pointer-events:none;}
.ddt-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--d-blu);margin-bottom:14px;}
.ddt-hero__title{margin:0 auto 16px;font-size:clamp(30px,5vw,50px);font-weight:900;letter-spacing:-1.6px;line-height:1.04;max-width:20ch;}
.ddt-hero__sub{margin:0 auto 22px;font-size:clamp(15px,2vw,18px);line-height:1.6;color:var(--d-ink2);max-width:62ch;}
.ddt-hero__points{list-style:none;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin:0;padding:0;font-size:14px;color:var(--d-ink2);font-weight:600;}
.ddt-hero__points li{display:flex;align-items:center;gap:8px;}
.ddt-dot{width:8px;height:8px;border-radius:50%;background:var(--d-blu);box-shadow:0 0 0 4px var(--d-blu-soft);}

/* Flash */
.ddt-flash{margin:0 0 26px;padding:13px 18px;border-radius:12px;font-size:14px;font-weight:600;background:var(--d-blu-soft);border:1px solid var(--d-line);color:var(--d-ink);}
.ddt-flash--err,.ddt-flash--rate{background:rgba(224,80,80,.12);border-color:rgba(224,80,80,.3);}
.ddt-flash--bye{background:rgba(28,160,90,.12);border-color:rgba(28,160,90,.3);}

/* Grid de productos */
.ddt-grid-sec{padding:18px 0 90px;}
.ddt-grid-sec .ddt-wrap{display:flex;flex-direction:column;align-items:center;}

/* Tarjeta única destacada (home demo = solo Sentinel, en grande) */
.ddt-feature{position:relative;overflow:hidden;width:100%;max-width:600px;background:var(--d-card);border:1px solid var(--d-line);border-radius:24px;padding:46px 40px 40px;text-align:center;box-shadow:var(--d-shadow);}
.ddt-feature::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--acc,#33519F);}
.ddt-feature__logo{display:inline-flex;align-items:center;justify-content:center;margin-bottom:22px;}
.ddt-feature__img{height:54px;max-width:300px;width:auto;object-fit:contain;}
.ddt-feature__name{margin:0 0 10px;font-size:26px;font-weight:900;letter-spacing:-.6px;}
.ddt-feature__tag{margin:0 auto 22px;font-size:15px;line-height:1.6;color:var(--d-ink2);max-width:48ch;}
.ddt-feature__points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:0 0 30px;padding:0;}
.ddt-feature__points li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--d-ink);}
.ddt-feature__points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc,#33519F);flex:0 0 auto;}
.ddt-btn--lg{font-size:16px;padding:15px 32px;width:auto;}
@media(max-width:520px){ .ddt-feature{padding:36px 22px 30px;} .ddt-feature__img{height:44px;} }
.ddt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.ddt-card{position:relative;background:var(--d-card);border:1px solid var(--d-line);border-radius:20px;padding:26px 24px 24px;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;overflow:hidden;}
.ddt-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc,#33519F);opacity:.9;}
.ddt-card:not(.is-soon):hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 45%,var(--d-line));box-shadow:var(--d-shadow);}
.ddt-card.is-soon{opacity:.6;}
.ddt-card__top{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin-bottom:16px;}
.ddt-card__logo{display:inline-flex;align-items:center;}
.ddt-card__img{height:30px;max-width:180px;width:auto;object-fit:contain;}
.ddt-card__mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--acc,#33519F);color:#fff;font-weight:800;font-size:20px;}
.ddt-soon{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--d-ink2);border:1px solid var(--d-line);border-radius:999px;padding:4px 10px;}
.ddt-card__name{margin:0 0 7px;font-size:19px;font-weight:800;letter-spacing:-.3px;}
.ddt-card__tag{margin:0 0 22px;font-size:13.5px;line-height:1.55;color:var(--d-ink2);flex:1;}
.ddt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acc,#33519F);color:#fff;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:11px;width:100%;transition:filter .15s ease,transform .15s ease;}
.ddt-btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.ddt-btn svg{transition:transform .15s ease;}
.ddt-btn:hover svg{transform:translateX(3px);}
.ddt-btn--ghost{background:transparent;border:1px solid var(--d-line);color:var(--d-ink2);cursor:default;}
.ddt-btn--ghost:hover{filter:none;transform:none;}

.ddt-note{display:flex;align-items:center;gap:9px;justify-content:center;margin:34px 0 0;font-size:13px;color:var(--d-ink2);text-align:center;}
.ddt-note svg{color:var(--d-blu);flex:0 0 auto;}

/* Footer */
.ddt-foot{border-top:1px solid var(--d-line);padding:26px 0;}
.ddt-foot .ddt-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--d-ink2);}
.ddt-foot a{font-weight:600;}
.ddt-foot a:hover{color:var(--d-ink);}

@media(max-width:620px){
    .ddt-hdr__in{height:62px;}
    .ddt-hdr__logo{height:34px;}
    .ddt-hdr__back{display:none;}
    .ddt-hero{padding:52px 0 28px;}
    .ddt-hero__points{gap:13px;}
}