/* PATAS LAB — modifica aquí los colores principales. */
:root{
  --ink:#172c40;
  --yellow:#ffe14d;
  --pink:#ff84b5;
  --teal:#13c5ba;
  --purple:#b9a3fb;
  --line:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink)}

*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:25px}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font:16px/1.6 'Trebuchet MS',Arial,sans-serif}
h1,h2,h3,p,figure{
  margin-top:0}
a{
  color:inherit}
button,input{
  font:inherit}
button,summary{
  cursor:pointer}
:focus-visible{
  outline:4px solid #d52269;
  outline-offset:5px}
[hidden]{
  display:none!important}
.wrap{
  width:min(1260px,90%);
  margin-inline:auto}

.demo-banner{
  text-align:center;
  background:var(--ink);
  color:white;
  padding:8px 16px;
  font-size:12px;
  letter-spacing:1px}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:23px;
  gap:25px}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:27px;
  letter-spacing:-1px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap}
.logo>span:last-child{
  color:#007b75}
.logo-cross{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px;
  background:var(--teal);
  border:var(--line);
  border-radius:9px;
  font-size:32px;
  line-height:1}
nav{
  display:flex;
  align-items:center;
  gap:27px}
nav>a{
  font-size:14px;
  font-weight:700;
  text-decoration:none}
nav>a:not(.btn):hover{
  text-decoration:underline;
  text-underline-offset:5px}
#menu{
  display:none}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border:var(--line);
  border-radius:11px;
  background:var(--yellow);
  color:var(--ink);
  font-weight:800;
  text-decoration:none;
  box-shadow:4px 4px 0 var(--ink);
  line-height:1.35;
  transition:transform .15s,box-shadow .15s}
.btn:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink)}
.btn.dark{
  background:var(--ink);
  color:#fff;
  box-shadow:4px 4px 0 #0003}
.btn.mini{
  padding:11px 16px}

.hero{
  padding:35px 0 15px}
.hero-heading{
  text-align:center;
  margin-bottom:38px}
.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:18px}
h1{
  font-size:clamp(45px,5.7vw,78px);
  letter-spacing:-3.5px;
  line-height:1.06;
  font-weight:900;
  margin-bottom:22px}
h1 span{
  color:#007d78}
.hero-heading>p:last-child{
  font-size:19px;
  margin:0}
.hero-board{
  display:grid;
  grid-template-columns:.65fr 1.6fr .65fr;
  gap:20px;
  align-items:stretch}
.side-note{
  padding:27px 24px;
  border:var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center}
.pink{
  background:var(--pink)}
.turquoise{
  background:var(--teal)}
.yellow{
  background:var(--yellow)}
.purple{
  background:var(--purple)}
.note-number{
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  display:block;
  margin-bottom:25px}
.side-note h2{
  font-size:27px;
  line-height:1.12;
  letter-spacing:-1px;
  margin-bottom:20px}
.side-note p{
  font-size:16px}
.side-note .btn{
  font-size:14px;
  padding:12px;
  margin-top:8px}
.round-link{
  font-size:14px;
  font-weight:800;
  text-underline-offset:5px;
  margin-top:15px}
.hero-picture{
  margin:0;
  border:var(--line);
  border-radius:22px;
  overflow:hidden;
  background:var(--yellow);
  display:flex;
  flex-direction:column}
.hero-picture img{
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
  display:block}
.hero-picture figcaption{
  padding:12px 16px;
  font-size:12px;
  letter-spacing:1.5px;
  font-weight:800;
  text-align:center;
  border-top:var(--line);
  background:white}
.hero-bottom{
  display:flex;
  justify-content:center;
  gap:45px;
  font-weight:800;
  font-size:14px;
  padding:32px 0 0;
  flex-wrap:wrap}

.section{
  padding-block:90px}
.heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:35px}
.heading>p{
  max-width:330px;
  margin:0;
  color:#4b5f6c}
.label{
  display:inline-block;
  border:2px solid var(--ink);
  padding:6px 11px;
  border-radius:7px;
  font-size:12px;
  letter-spacing:1px;
  font-weight:800;
  margin-bottom:18px}
h2{
  font-size:clamp(33px,4vw,52px);
  letter-spacing:-2px;
  line-height:1.1;
  font-weight:900;
  margin-bottom:25px}
.heading h2{
  margin:0}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px}
.service{
  border:var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:27px;
  color:var(--ink);
  text-align:left;
  transition:transform .15s}
.service:hover{
  transform:translateY(-4px)}
.service-no{
  display:block;
  font-size:14px;
  font-weight:800;
  margin-bottom:24px}
.service h3{
  font-size:26px;
  line-height:1.12;
  letter-spacing:-1px;
  margin-bottom:18px}
.service p{
  font-size:16px;
  min-height:76px}
.service-action{
  display:block;
  border-top:2px solid var(--ink);
  padding-top:13px;
  font-size:14px;
  font-weight:800}
.fine{
  font-size:14px;
  color:#4b5f6c;
  margin:22px 0 0}

.game-section{
  background:var(--purple);
  padding-block:75px;
  border-top:var(--line);
  border-bottom:var(--line)}
.game-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:85px;
  align-items:center}
.game-intro h2{
  font-size:clamp(44px,5.4vw,70px)}
.game-intro h2 span{
  color:var(--ink);
  background:var(--yellow)}
.game-intro>p{
  max-width:350px}
.game-sticker{
  display:inline-block;
  transform:rotate(-5deg);
  background:var(--yellow);
  border:var(--line);
  border-radius:12px;
  padding:17px 22px;
  box-shadow:var(--shadow);
  font-weight:900;
  line-height:1.35;
  margin-top:15px}
.game-box{
  background:#fff;
  border:var(--line);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--ink);
  padding:35px;
  min-height:455px}
.quiz-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:14px;
  font-weight:800}
progress{
  display:block;
  width:100%;
  height:11px;
  accent-color:#008f86;
  margin:20px 0 27px}
.game-box h3{
  font-size:26px;
  line-height:1.3;
  letter-spacing:-.5px;
  margin-bottom:24px}
.quiz-options{
  display:grid;
  gap:12px}
.quiz-options button{
  border:2px solid var(--ink);
  border-radius:10px;
  background:#fff;
  padding:13px 16px;
  text-align:left;
  color:var(--ink)}
.quiz-options button:hover:not(:disabled){
  background:#e7faf6}
.quiz-options button:disabled{
  opacity:1;
  cursor:default}
.quiz-options button.correct{
  background:#c9f3bc}
.quiz-options button.incorrect{
  background:#ffe1ed}
.quiz-feedback{
  margin-top:20px;
  padding:18px;
  background:#f3f7fb;
  border-radius:10px;
  font-size:16px}
#quiz-next{
  margin-top:20px}
.finish-mark{
  display:block;
  font-size:60px;
  color:#008f86}
#quiz-finish h3{
  font-size:33px;
  margin:5px 0 15px}

.tour{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  border:var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow)}
.tour-buttons{
  padding:25px;
  background:#edf8f7;
  display:flex;
  flex-direction:column;
  gap:13px}
.tour-buttons button{
  display:flex;
  align-items:center;
  gap:15px;
  padding:17px;
  background:white;
  border:2px solid var(--ink);
  border-radius:12px;
  color:var(--ink);
  text-align:left;
  font-weight:800}
.tour-buttons button.selected{
  background:var(--teal);
  box-shadow:3px 3px 0 var(--ink)}
.tour-buttons span{
  font-size:14px}
.tour-panel{
  padding:40px}
.tour-panel h3{
  font-size:39px;
  line-height:1.1;
  letter-spacing:-1px}
.tour-panel>p:not(.eyebrow){
  max-width:580px}
.tour-question{
  background:var(--yellow);
  padding:18px 22px;
  border:2px solid var(--ink);
  border-radius:12px;
  margin-top:25px}
.tour-question strong{
  font-size:14px}
.tour-question p{
  margin:9px 0 0}

.visit-section{
  background:#e4f9f6;
  padding-block:75px;
  border-top:var(--line);
  border-bottom:var(--line)}
.visit-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center}
.visit-layout>div>p{
  max-width:380px}
.packing-list{
  background:white;
  border:var(--line);
  border-radius:20px;
  padding:30px;
  box-shadow:var(--shadow)}
.packing-list h3{
  font-size:24px;
  margin-bottom:15px}
.packing-list label{
  display:flex;
  align-items:start;
  gap:13px;
  border-bottom:1px solid #cad7df;
  padding:15px 0;
  cursor:pointer}
.packing-list input{
  accent-color:#008c82;
  width:21px;
  height:21px;
  flex-shrink:0;
  margin-top:3px}
.packing-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  font-size:14px;
  font-weight:800;
  padding-top:25px}

.questions{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px}
details{
  border:2px solid var(--ink);
  border-radius:12px;
  margin-bottom:14px;
  padding:20px}
summary{
  font-size:18px;
  font-weight:800}
details p{
  margin:15px 0 0;
  color:#4b5f6c}
.final-band{
  background:var(--pink);
  border:var(--line);
  border-radius:25px;
  text-align:center;
  padding:55px 25px;
  box-shadow:var(--shadow)}
.final-band h2{
  font-size:clamp(32px,4vw,51px)}
.sources{
  padding:40px 0}
.sources h2{
  font-size:18px;
  letter-spacing:0;
  margin-bottom:10px}
.sources p{
  font-size:14px;
  color:#4b5f6c;
  margin:0}
.footer{
  padding:30px 0;
  border-top:2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.footer p,.footer>a:last-child{
  font-size:14px}
.footer p{
  margin:0}

dialog{
  width:min(560px,92%);
  max-height:85vh;
  overflow:auto;
  border:var(--line);
  border-radius:22px;
  padding:35px;
  color:var(--ink);
  box-shadow:8px 8px 0 var(--ink)}
dialog::backdrop{
  background:#162c4099}
dialog h2{
  font-size:32px;
  margin-top:15px}
dialog ul{
  padding-left:23px}
dialog li{
  margin:13px 0}
.dialog-close{
  position:absolute;
  top:12px;
  right:16px;
  font-size:28px;
  background:white;
  border:0;
  color:var(--ink);
  padding:4px 10px}
.skip{
  position:fixed;
  top:-100px;
  padding:10px;
  background:white;
  z-index:100}
.skip:focus{
  top:10px}
.legal{
  max-width:850px;
  padding-block:60px}
.legal h1{
  font-size:43px;
  letter-spacing:-1px}
.legal h2{
  font-size:25px;
  letter-spacing:-.5px;
  margin-top:30px}

@media(max-width:1050px){
  .hero-board{
  grid-template-columns:1fr 1.8fr}
.hero-board>.turquoise{
  grid-column:1/-1;
  flex-direction:row;
  align-items:center;
  gap:25px;
  padding:20px 25px}
.hero-board>.turquoise .note-number,.hero-board>.turquoise h2,.hero-board>.turquoise p,.hero-board>.turquoise .round-link{
  margin:0}
.service-grid{
  grid-template-columns:repeat(2,1fr)}
.service p{
  min-height:0}
.game-layout,.visit-layout{
  gap:40px}
nav{
  gap:18px}
.logo{
  font-size:24px}
.header .mini{
  padding:10px}
}

@media(max-width:760px){
  .header{
  flex-wrap:wrap;
  padding-block:18px}
#menu{
  display:block;
  background:white;
  border:2px solid var(--ink);
  padding:8px 14px;
  border-radius:8px;
  font-weight:700;
  color:var(--ink)}
nav{
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:0}
nav a{
  padding:12px 0}
body.js nav{
  display:none}
body.js nav.open{
  display:flex}
.hero{
  padding-top:20px}
h1{
  font-size:clamp(39px,9vw,61px);
  letter-spacing:-2px}
.hero-heading>p:last-child{
  font-size:17px}
.hero-board{
  grid-template-columns:1fr;
  gap:18px}
.hero-picture{
  grid-row:1}
.hero-picture img{
  min-height:260px;
  max-height:360px}
.side-note{
  padding:24px;
  box-shadow:4px 4px 0 var(--ink)}
.side-note h2 br{
  display:none}
.side-note h2{
  margin-bottom:10px}
.note-number{
  margin-bottom:12px}
.side-note .btn{
  align-self:start}
.hero-board>.turquoise{
  display:none}
.hero-bottom{
  gap:10px 20px;
  font-size:12px;
  padding-top:25px}
.section{
  padding-block:55px}
.heading{
  display:block}
.heading>p{
  margin-top:22px;
  max-width:none}
.service-grid{
  gap:17px}
.service{
  padding:22px}
.service h3{
  font-size:24px}
.game-layout,.visit-layout,.questions,.tour{
  grid-template-columns:1fr;
  gap:30px}
.game-intro h2{
  font-size:49px}
.game-intro h2 br{
  display:none}
.game-intro>p{
  max-width:none}
.game-sticker{
  display:none}
.game-section,.visit-section{
  padding-block:50px}
.game-box{
  padding:24px;
  min-height:0}
.game-box h3{
  font-size:24px}
.tour{
  gap:0}
.tour-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:18px;
  gap:10px}
.tour-buttons button{
  padding:11px;
  font-size:14px;
  gap:8px}
.tour-panel{
  padding:25px}
.tour-panel h3{
  font-size:32px}
.questions{
  gap:25px}
.packing-list{
  padding:24px}
.final-band{
  padding:35px 20px}
.footer{
  flex-direction:column;
  align-items:start;
  gap:20px}
.legal h1{
  font-size:35px}
}

@media(max-width:430px){
  .service-grid{
  grid-template-columns:1fr}
.service h3 br{
  display:none}
.service-no{
  margin-bottom:15px}
.tour-buttons{
  grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
.btn,.service{
  transition:none}
}

@media print{
  body{
  font:12pt/1.5 Arial,sans-serif;
  color:#000}
.demo-banner,.header,.hero,#servicios,#juego,#consulta,.questions,.final-band,.sources,.footer,dialog,.skip{
  display:none!important}
.visit-section{
  background:#fff;
  border:0;
  padding:0}
.visit-layout{
  display:block}
.visit-layout>div:first-child>p,.visit-layout>div:first-child>.btn,.visit-layout .label,.visit-layout .fine{
  display:none}
.visit-layout h2{
  font-size:24pt}
.packing-list{
  box-shadow:none;
  border:1px solid #000}
.packing-list label{
  break-inside:avoid}
.packing-bottom{
  display:none}
}