:root{
    --bg:#fff;
    --bg2:#f4f6fb;
    --tx:#0f1729;
    --mu:#55607a;
    --bd:#e1e6f0;
    --card:#fff;
    --brand:#FE5001;
    --acc:#FE5001;
    --acct:#C23E00;
    --accs:#FFEDE5;
    --on:#fff;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}
@media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --bg:#0b1020;
        --bg2:#111833;
        --tx:#eef1fa;
        --mu:#9aa6c4;
        --bd:#243055;
        --card:#141c3a;
        --brand:#FF7A3D;
        --accs:#3A1A0B;
        --acct:#FF8A55
    }
}
:root[data-theme="dark"]{
    --bg:#0b1020;
    --bg2:#111833;
    --tx:#eef1fa;
    --mu:#9aa6c4;
    --bd:#243055;
    --card:#141c3a;
    --brand:#FF7A3D;
    --accs:#3A1A0B;
    --acct:#FF8A55
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:72px
}
*{box-sizing:border-box}
body{
    margin:0;
    background:var(--bg);
    color:var(--tx);
    font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif
}
a{
    color:inherit;
    text-decoration:none
}
.w{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px
}
header{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:20;
    background:color-mix(in srgb,var(--bg) 90%,transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--bd)
}
header .w{
    display:flex;
    align-items:center;
    gap:20px;
    height:64px
}
.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 120px;
    height: auto;
}

.logo-dark {
    display: none;
}

:root[data-theme="dark"] .logo-light {
    display: none;
}

:root[data-theme="dark"] .logo-dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-light {
        display: none;
    }

    :root:not([data-theme="light"]) .logo-dark {
        display: block;
    }
}
nav{
    display:flex;
    gap:18px;
    margin-left:auto;
    font-size:14px;
    color:var(--mu)
}
nav a:hover{color:var(--tx)}
.btn{
    display:inline-block;
    padding:12px 22px;
    border-radius:10px;
    font-weight:600;
    border:1px solid var(--acc);
    background:var(--acc);
    color:var(--on);
    cursor:pointer;
    font:inherit;
    font-weight:600
}
.btn.o{
    background:transparent;
    color:var(--tx);
    border-color:var(--bd)
}
.btn.s{
    padding:8px 16px;
    font-size:14px
}
.tools{
    display:flex;
    gap:12px;
    align-items:center
}
.ib{
    height:40px;
    min-width:40px;
    padding:0 12px;
    border:1.5px solid var(--bd);
    background:var(--bg2);
    color:var(--tx);
    border-radius:10px;
    font-size:.85rem;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px
}
.ib:hover{border-color:var(--acc)}
.ib svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round
}
.pill{
    display:inline-block;
    padding:4px 12px;
    border-radius:99px;
    background:var(--accs);
    color:var(--acct);
    font-size:13px;
    font-weight:700;
    margin-bottom:16px
}
.hero{
    padding:90px 0 80px;
    background-color:var(--bg);
    background-image:
        linear-gradient(
            90deg,
            var(--bg) 0%,
            color-mix(in srgb,var(--bg) 85%,transparent) 55%,
            color-mix(in srgb,var(--bg) 55%,transparent) 100%
        ),
        linear-gradient(rgba(15,23,41,.15),rgba(15,23,41,.15)),
        url("images/Audio.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
h1{
    font-size:clamp(32px,5.4vw,54px);
    line-height:1.1;
    letter-spacing:-.03em;
    margin:0 0 16px;
    max-width:760px}
.hero p{
    font-size:19px;
    color:var(--mu);
    max-width:620px;
    margin:0 0 28px
}
.hero .btn{
    margin-right:10px;
    margin-bottom:10px
}
.note{
    font-size:13px;
    color:var(--mu)
}
section.bg-image{
    background-color:var(--bg);
    background-image:
        linear-gradient(
            90deg,
            var(--bg) 0%,
            color-mix(in srgb,var(--bg) 85%,transparent) 55%,
            color-mix(in srgb,var(--bg) 55%,transparent) 100%
        ),
        linear-gradient(rgba(15,23,41,.15),rgba(15,23,41,.15)),
        url("images/audiovisua.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* Variante con imagen diferente */
section.bg-image-2{
    background-image:
        linear-gradient(
            90deg,
            var(--bg) 0%,
            color-mix(in srgb,var(--bg) 85%,transparent) 55%,
            color-mix(in srgb,var(--bg) 55%,transparent) 100%
        ),
        url("images/audiovisual.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

section.bg-image-3{
    background-image:
        linear-gradient(
            90deg,
            var(--bg) 0%,
            color-mix(in srgb,var(--bg) 85%,transparent) 55%,
            color-mix(in srgb,var(--bg) 55%,transparent) 100%
        ),
        url("images/audi.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
section{padding:64px 0}
section.alt{background:var(--bg2)}
h2{
    font-size:clamp(26px,3.6vw,36px);
    letter-spacing:-.02em;
    line-height:1.2;
    margin:0 0 10px
}
.sub{
    color:var(--mu);
    margin:0 0 32px;
    max-width:640px
}
.g3{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
}
.card{
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:14px;
    padding:22px
}
.card h3{
    margin:0 0 6px;
    font-size:18px
}
.card p{
    margin:0;
    color:var(--mu);
    font-size:15px
}
.ic{
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--accs);
    color:var(--acct);
    display:grid;
    place-items:center;
    margin-bottom:12px
}
.ic svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.pain{
    border-left:3px solid var(--acc);
    padding:4px 0 4px 16px;
    color:var(--mu)
}
.tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px
}
.tab{
    padding:10px 16px;
    border-radius:10px;
    border:1px solid var(--bd);
    background:var(--card);
    color:var(--tx);
    cursor:pointer;
    font:inherit;
    font-size:14px;
    font-weight:600
}
.tab[aria-selected=true]{
    background:var(--acc);
    color:var(--on);
    border-color:var(--acc)
}
.panel{display:none}
.panel.on{display:block}
.panel h3{margin:0 0 6px}
.panel p{color:var(--mu);margin:0}
.ex{
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:16px;
    padding:28px
}
.ex .tag{
    font-size:12px;
    font-weight:700;
    color:var(--acct);
    letter-spacing:.08em
}
.scroll{overflow-x:auto}
table{
    border-collapse:collapse;
    width:100%;
    min-width:420px
}
th,td{
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid var(--bd);
    font-size:15px
}
th{
    color:var(--mu);
    font-weight:600
}
.flow{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin:16px 0
}
.node{
    padding:10px 16px;
    border-radius:10px;
    border:1px dashed var(--acc);
    background:var(--accs);
    font-weight:600;
    font-size:14px
}
.arr{color:var(--mu)}
.chips{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:16px 0
}
.chip{
    padding:8px 16px;
    border-radius:99px;
    border:1px solid var(--bd);
    background:var(--card);
    font-weight:600;
    font-size:14px
}
details{
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:12px;
    padding:16px 20px;
    margin-bottom:10px
}
summary
{cursor:pointer;
    font-weight:600
}
details p{
    margin:10px 0 0;
    color:var(--mu)
}
form{
    display:grid;
    gap:14px;
    max-width:560px;
    margin-top:24px
}
label{
    font-size:14px;
    font-weight:600;
    display:grid;
    gap:6px
}
input,select,textarea{
    font:inherit;
    padding:11px 12px;
    border-radius:10px;
    border:1px solid var(--bd);
    background:var(--bg);
    color:var(--tx)
}
.hp{
    position:absolute;
    left:-9999px
}
.chk{
    display:flex!important;
    grid-template-columns:none;
    gap:10px;
    font-weight:400!important;
    color:var(--mu)
}
#ok{
    display:none;
    padding:14px;
    border-radius:10px;
    background:var(--accs);
    color:var(--tx);
    font-weight:600
}
footer{
    padding:32px 0;
    border-top:1px solid var(--bd);
    color:var(--mu);font-size:14px
}
footer .w{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    align-items:center
}
footer .r{
    margin-left:auto;
    display:flex;
    gap:16px
}
:focus-visible{
    outline:3px solid var(--acc);
    outline-offset:2px
}
@media(max-width:760px){
    nav{display:none}
    header .tools{margin-left:auto}
    .hero{padding:48px 0 40px}
    section{padding:48px 0}
}
.demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 620px) 1fr;
    gap: 0;
    align-items: stretch;
    margin-top: 8px;
}

.demo-grid form,
.demo-grid #ok {
    grid-column: 1;
}

.demo-img {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 420px;
    background-image: url("images/audiovisu.jpg");
    background-size: cover;
    background-position: center;
    opacity: .95;
    filter: brightness(var(--img-b));
    /* se funde con el fondo por la izquierda, arriba y abajo; se ve completa hacia la derecha */
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 45%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 45%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-composite: intersect;
}

/* en modo oscuro la imagen se atenúa un poco */
:root[data-theme="dark"] .demo-img { opacity: .75 }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .demo-img { opacity: .75 }
}

@media (max-width: 900px) {
    .demo-grid { grid-template-columns: 1fr }
    .demo-img { display: none }
}