/* MAST Marine — cristal. Capas translúcidas sobre lo que ya hay: cabecera en cápsula, tarjetas, fichas y campos.
   Solo navy y blanco roto con transparencia: ningún color de marca nuevo.
   El desenfoque de verdad (backdrop-filter) va solo donde hay algo detrás que desenfocar: cabecera, barra de
   secciones, tarjeta con foto y banda de foto. En lo demás el cristal es fondo translúcido y filo de luz:
   se ve igual y no pesa al desplazarse. Nunca en un antecesor del menú móvil (lo encerraría). */
:root{
  --c-fondo:linear-gradient(155deg,rgba(242,242,242,.11),rgba(242,242,242,.03));
  --c-filo:rgba(242,242,242,.16);
  --c-luz:inset 0 1px 0 rgba(255,255,255,.16);
  --c-sombra:0 24px 48px -28px rgba(0,0,0,.6);
  --c-desenfoque:blur(18px) saturate(160%);
  --c-claro:rgba(255,255,255,.66);
  --c-filo-claro:rgba(12,27,51,.09);
  --c-luz-clara:inset 0 1px 0 #fff;
  --c-sombra-clara:0 22px 44px -26px rgba(12,27,51,.32);
  --r:22px;
}
html:has(.subnav){scroll-padding-top:9rem}

/* cabecera: una cápsula que flota */
.top,.top.solid{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.top{padding:.7rem var(--gut) 0;pointer-events:none}
.top .bar{position:relative;pointer-events:auto;max-width:calc(var(--wrap) - 2*var(--gut));height:3.7rem;padding:0 .55rem 0 1.5rem;border-radius:999px}
.top .bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;border:1px solid rgba(242,242,242,.13);background:rgba(242,242,242,.05);-webkit-backdrop-filter:var(--c-desenfoque);backdrop-filter:var(--c-desenfoque);box-shadow:var(--c-luz);transition:background .3s,box-shadow .3s,opacity .3s}
.top.solid .bar::before{background:rgba(12,27,51,.8);box-shadow:var(--c-luz),0 16px 34px -18px rgba(0,0,0,.55)}
.open .top .bar::before{opacity:0}
@media (max-width:60rem){.top .bar{padding:0 .45rem 0 1.25rem}}

/* botones */
.btn{border-radius:999px}
.btn-ghost{background:rgba(242,242,242,.07);border-color:var(--c-filo);box-shadow:var(--c-luz)}

/* portada: luz que deriva detrás, plano sobre cristal y datos en fichas */
.hero::after{content:"";position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(30rem 26rem at 30% 38%,rgba(70,108,176,.26),transparent 70%),radial-gradient(26rem 24rem at 74% 66%,rgba(242,242,242,.08),transparent 70%);animation:deriva 26s ease-in-out infinite alternate}
@keyframes deriva{to{transform:translate3d(6%,-5%,0) scale(1.08)}}
.hero .wrap{z-index:1}
.hero .art{padding:clamp(1.3rem,2.6vw,2.2rem);border-radius:28px;background:var(--c-fondo);border:1px solid var(--c-filo);box-shadow:var(--c-luz),var(--c-sombra)}
.specs{border-top:0;padding-top:0;gap:.8rem;margin-top:3rem}
.specs>div{padding:1.05rem 1.15rem 1.2rem;border-radius:18px;background:var(--c-fondo);border:1px solid var(--c-filo);box-shadow:var(--c-luz)}
.pat{width:fit-content;margin-left:auto;gap:.2rem;padding:.25rem;border-radius:999px;background:rgba(242,242,242,.07);border:1px solid var(--c-filo);box-shadow:var(--c-luz)}
.pat button,.pat button[aria-pressed=true]{border:0}

/* las dos líneas: el texto en un panel de cristal sobre la foto */
.line{padding:clamp(.7rem,1.3vw,1rem);border-radius:26px}
.line:not(.draw)::before{background:linear-gradient(to top,rgba(12,27,51,.6),rgba(12,27,51,.06) 62%,rgba(12,27,51,.22))}
.line .vid{position:relative;padding:clamp(1.4rem,2.4vw,2.2rem);border-radius:18px;background:rgba(12,27,51,.62);border:1px solid var(--c-filo);-webkit-backdrop-filter:var(--c-desenfoque);backdrop-filter:var(--c-desenfoque);box-shadow:var(--c-luz),var(--c-sombra)}
.line.draw .vid{background:var(--c-fondo);-webkit-backdrop-filter:none;backdrop-filter:none}
.line li{border:1px solid var(--c-filo);background:rgba(242,242,242,.07)}
@media (hover:hover){.lines .line.rv.in:hover{transform:translateY(-5px)}}
@media (max-width:60rem){.line:not(.draw){min-height:47rem}}

/* banda de foto: la frase en cristal */
.foto::before{background:linear-gradient(to top,rgba(12,27,51,.5),rgba(12,27,51,.04) 60%)}
.foto .wrap{padding-bottom:clamp(1.5rem,4vw,3.2rem)}
.foto p{display:inline-block;padding:clamp(1.4rem,3vw,2.4rem) clamp(1.5rem,3.4vw,2.8rem);border-radius:26px;background:rgba(12,27,51,.5);border:1px solid var(--c-filo);-webkit-backdrop-filter:var(--c-desenfoque);backdrop-filter:var(--c-desenfoque);box-shadow:var(--c-luz),var(--c-sombra)}

/* secciones navy: pasos en tarjetas */
.sec.navy{position:relative;overflow:hidden}
.sec.navy::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(34rem 26rem at 14% 26%,rgba(70,108,176,.22),transparent 70%),radial-gradient(30rem 24rem at 88% 80%,rgba(242,242,242,.07),transparent 70%)}
.sec.navy>.wrap{position:relative}
.steps{gap:clamp(.8rem,1.6vw,1.3rem)}
.track{gap:.8rem}
.steps li,.track li{padding:1.7rem 1.6rem 1.9rem;border:1px solid var(--c-filo);border-radius:var(--r);background:var(--c-fondo);box-shadow:var(--c-luz)}
.track li{padding:1.4rem 1.25rem 1.6rem}
.track li::before{display:none}
.track li::after{left:auto;right:1.25rem;top:1.45rem}

/* secciones claras: tarjetas y formulario */
#contact,#quote{position:relative;overflow:hidden}
#contact::before,#quote::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(34rem 26rem at 10% 18%,rgba(12,27,51,.11),transparent 70%),radial-gradient(30rem 24rem at 92% 86%,rgba(12,27,51,.09),transparent 70%)}
#contact>.wrap,#quote>.wrap{position:relative}
.card,.form{border-radius:var(--r);background:var(--c-claro);border:1px solid rgba(255,255,255,.9);box-shadow:var(--c-luz-clara),var(--c-sombra-clara)}
@media (hover:hover){.cards .card.rv.in:hover{transform:translateY(-4px)}}
.form{padding:clamp(1.4rem,3.4vw,2.8rem);border-radius:26px}
.form input[type=text],.form input[type=email],.form select,.form textarea{background-color:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:14px;padding:.85rem 1.05rem;transition:border-color .2s,box-shadow .2s}
.form select{background-position:right 1rem center}
.form input:focus,.form select:focus,.form textarea:focus{border-width:1px;border-color:var(--navy);padding:.85rem 1.05rem;box-shadow:0 0 0 4px rgba(12,27,51,.1)}
.checks span{border:1px solid var(--line);background:rgba(255,255,255,.7)}
.cert{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--c-sombra-clara)}

/* tapicería: la barra de secciones, otra cápsula bajo la cabecera */
.subnav{top:5.15rem;height:0;padding:0 var(--gut);background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.subnav .wrap{pointer-events:auto;width:fit-content;max-width:100%;gap:.15rem;padding:.3rem;border-radius:999px;background:var(--c-claro);border:1px solid var(--c-filo-claro);-webkit-backdrop-filter:var(--c-desenfoque);backdrop-filter:var(--c-desenfoque);box-shadow:var(--c-luz-clara),var(--c-sombra-clara)}
.subnav a{padding:.55rem 1rem;border:0;border-radius:999px;transition:background .25s,color .25s}
.subnav a.on{background:var(--navy);color:var(--paper)}
.subnav+.band{padding-top:5.6rem}

/* sin transparencias (ajuste del sistema) o sin desenfoque (navegador antiguo): fondos casi opacos */
@media (prefers-reduced-transparency:reduce){
  .top .bar::before,.top.solid .bar::before{background:var(--navy)}
  .subnav .wrap,.card,.form{background:#fff}
  .line .vid,.foto p{background:rgba(12,27,51,.94)}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top.solid .bar::before{background:rgba(12,27,51,.95)}
  .subnav .wrap{background:rgba(255,255,255,.96)}
  .line .vid,.foto p{background:rgba(12,27,51,.9)}
}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}
@media print{.top .bar::before,.hero::after,.sec.navy::before{display:none}}