@font-face{font-family:"TeX Gyre Bonum";src:url("assets/fonts/TeXGyreBonum-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DejaVu Sans";src:url("assets/fonts/DejaVuSans.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DejaVu Sans";src:url("assets/fonts/DejaVuSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
html{scroll-behavior:smooth}
body{margin:0;background:#fff8e8}
a{color:#246b80}a:hover{color:#174e69}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #246b80;outline-offset:3px}

@keyframes rise{from{opacity:0;transform:translateY(56px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fromL{from{opacity:0;transform:translateX(-80px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes fromR{from{opacity:0;transform:translateX(80px) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-10deg)}70%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes beam{0%,100%{transform:rotate(-14deg);opacity:.6}50%{transform:rotate(16deg);opacity:1}}
@keyframes glow{0%,100%{opacity:.3}50%{opacity:.75}}
@keyframes para{from{transform:translateY(0)}to{transform:translateY(90px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}

.tilt-l{transform:rotate(-3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tilt-r{transform:rotate(3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tilt-l:hover,.tilt-r:hover{transform:rotate(0) scale(1.02)}
.lift{transition:transform .25s ease,box-shadow .25s ease}
.lift:hover{transform:translateY(-8px);box-shadow:0 14px 30px rgba(39,52,58,.16)}
.btn{transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.15);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.wig:hover{animation:wiggle .5s ease}

@media (prefers-reduced-motion:no-preference){
  .in{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .in-pop{animation:pop .7s cubic-bezier(.2,.8,.2,1) both}
  .d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.9s}.d5{animation-delay:1.3s}
  .bob{animation:bob 4.5s ease-in-out infinite}
  .bob2{animation:bob 5.5s ease-in-out -2s infinite}
  .sway{animation:sway 6s ease-in-out infinite}
  .gull{animation:drift 26s linear infinite}
  .gull2{animation:drift 34s linear -12s infinite}
  .wing{animation:flap .6s ease-in-out infinite;transform-origin:50% 60%}
  .wave{animation:wave 16s linear infinite}
  .wave2{animation:wave 24s linear infinite reverse}
  .haz{animation:beam 7s ease-in-out infinite;transform-origin:170px 41px}
  .brillo{animation:glow 3.5s ease-in-out infinite}
  .rv-on .rv,.rv-on .rv-l,.rv-on .rv-r,.rv-on .rv-pop{opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
  .rv-on .rv{transform:translateY(70px) scale(.96)}
  .rv-on .rv-l{transform:translateX(-180px) rotate(-8deg)}
  .rv-on .rv-r{transform:translateX(180px) rotate(8deg)}
  .rv-on .rv-pop{transform:scale(.4) rotate(-10deg);transition:opacity .6s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
  .rv-on .s2{transition-delay:.12s}.rv-on .s3{transition-delay:.24s}.rv-on .s4{transition-delay:.36s}
  .rv-on .rv-r.d-late,.rv-on .rv-l.d-late{transition-delay:.18s}
  .rv-on .is-in{opacity:1;transform:none}
  .rv-on .is-in.lift:hover{transform:translateY(-8px)}
}

/* estados de los selectores */
.tab[aria-pressed="true"]{background:#174e69;color:#fff8e8}
.tab[aria-pressed="false"]{background:transparent;color:#174e69}
.exp[aria-pressed="true"]{background:#e9b84c;color:#27343a}
.exp[aria-pressed="false"]{background:transparent;color:#fff8e8}
.dot{height:14px;padding:0;border:0;border-radius:999px;background:#b57a2e;cursor:pointer;width:14px;transition:width .25s ease,background .25s ease}
.dot[aria-current="true"]{width:36px;background:#e45f3c}
#visor-img{transition:opacity .25s ease}
#visor-img.fade{opacity:0}