/*
*  html5resetcss
*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
ul{margin: 0; padding: 0; list-style: none;}


* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* fonts */

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-500 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v29-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v29-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v29-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
  }


/* html & body */

html{background: #333;}
body{max-width: 1080px; min-height: 100vh; margin: 0 auto; background: #fff; font-family: 'Open Sans', sans-serif; }


/* header */

header .wrap-header{padding: 60px; display: flex; justify-content: space-between;}


/* progress bar */

.progress-bar{height: 24px; background: #746660; display: block; width: 100%;}
.progress-bar .bar{width: 0.1%; height: 24px; background: #FF6900; position: relative;}
.progress-bar .bar:after{content:""; width: 10px; height: 24px; background-image: url(../img/tbar.svg); background-size: 100%; position: absolute; right: 0; margin-right: -10px; }
.progress-bar.progress-bar-end .bar:after{display: none;}
.progress-bar .bar[style="width: 100%"]:after{display: none;}
/* text */

h1{font-weight: 600; text-align: center; color: #FF6900; font-size: 64px; line-height: 1.2;}
h2{font-weight: 500; text-align: center; color: #000; font-size: 48px; line-height: 1.4; margin-bottom: .5em;}
h3{font-weight: 400; text-align: center; color: #000; font-size: 32px; line-height: 1.4; margin-bottom: .5em;}
p{font-size: 24px;text-align: center; color: #000; font-weight: 400; line-height: 1.4;}


/* buttons */

.button{font-size: 32px; line-height: 1; border: none;  font-weight: 700; color: #fff; text-decoration: none; margin:  0 auto; background: #FF6900; padding: 24px 48px;  display: inline-block; text-transform: uppercase;  border: 4px solid #FF6900;  }
.button:active{background:#FA9644}
.button.btn-secondary{background-color: #fff; color: #FF6900;}

/* emotions */

main.page-emotions .q-wrap{height: 300px; margin-bottom: 128px;}

.emotions{width: 828px; margin: 0 auto; display: flex; justify-content: space-between; }
.emotions a:active{opacity: .8;}




/* main */





main{padding: 120px; height: calc(100% - 482px); position: relative;}
main.page-inicio, main.page-fin{display: flex; flex-direction: column; justify-content:center; align-items: center; }
main.page-inicio h1{margin-bottom: 64px;}
main.page-inicio h2, main.page-fin h2{margin-bottom: 96px;}
main.page-fin h1{margin-bottom: 128px;}
main{opacity: 0;}

main {
  animation: fadeInAnimation ease .4s;
  animation-delay: .4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}


/* stars */

main.page-stars .q-wrap{height: 200px; margin-bottom: 80px; text-align: center;}
main.page-stars .sq-wrap {text-align: center;}
main.page-stars .sq-wrap ul {margin-bottom: 128px;}
main.page-stars .sq-wrap ul li{margin-bottom: 48px;}

.star-rating {display: flex; flex-flow: row-reverse; justify-content: space-between; width: 448px; margin: 0 auto; background-color: #fff;}
.star-rating input{cursor: pointer; position: relative; width: 80px; height: 80px; float: left; text-align:center; line-height: 80px;}
.star-rating input:before, .star-rating  input:after{display: block; top:0; bottom:0; left:0; right:0; position: absolute;}
.star-rating input:before{content:""; background-color: #fff;}
.star-rating input:after {font-size: 80px; content: "★"; color: #ccc; transition: color 0.2s;}
.star-rating input:checked:after, .star-rating  input:checked ~ input:after {content: "★"; font-size: 80px; color: #ffcc33;}

/* stars error */

main.page-stars .sq-wrap ul li.error h3{color: #E63936;}
main.page-stars .sq-wrap ul li.error .alert.alert-error{color: #E63936; display: flex; justify-content: center; align-items: center; margin-top: 16px;}
main.page-stars .sq-wrap ul li.error .alert.alert-error::before{content:""; background-image: url('../img/icon_error.svg'); background-size: cover; width: 32px; height: 32px; margin-right: 8px;}


/* comment */

main.page-message .q-wrap{height: 200px; margin-bottom: 80px; text-align: center;}
main.page-message form textarea{width: 100%; margin: 0 auto; height: 480px; padding: 40px; background: #F9F9F9; border: 1px solid #ccc; border-radius: 8px; display: block; color: #000; font-size: 32px; font-family: 'Open Sans', sans-serif; margin-bottom: 64px;}
main.page-message form{text-align: center;}

/* */

main.page-botones{}
main.page-botones .botones{padding-top: 64px;}
main.page-botones .botones a.button{display: block; margin: 56px auto; text-align: center; width: 80%;}

/* over message */

.overmessage{width: 1080px; height: 1920px; position: absolute; background: rgba(0,0,0,.8); z-index: 10000; display: flex;}
.overmessage .message{margin: auto; width: 800px; background: #fff; padding: 64px;}
.overmessage .message h3{font-weight: bold; font-size: 32px; text-align: center; margin-bottom: 64px;}
.overmessage .message .links{text-align: center;}
.overmessage .message .links a{display: inline-block; margin: 0 8px;}


/* === TECLADO (simple-keyboard) === */
.simple-keyboard{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(1366px, 100vw);
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 32px rgba(0,0,0,.2);
  padding: 8px 8px env(safe-area-inset-bottom);
  z-index: 2147483647;
}

/* filas centradas, con separación consistente */
.simple-keyboard .hg-row{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 8px;
}

/* teclas “normales” reparten el ancho */
.simple-keyboard .hg-button{
  flex: 1 1 0;
  min-width: 64px;
  padding: 18px 22px;
  height: auto;
  font-size: 20px;
  border-radius: 12px;
}

/* “Espacio” ancho y centrado (última fila sola) */
.simple-keyboard .hg-button.hg-space-wide{
  flex: 1 1 45%;
  min-width: 380px;
}

/* Borrar y (si lo usás) Enter con ancho fijo para no estirarse */
.simple-keyboard .hg-button.hg-right-btn{
  flex: 0 0 170px;
  min-width: 170px;
}

/* Opcional: tema visual un poco más plano */
.simple-keyboard .hg-button:active{ transform: translateY(1px); }

/* —— Responsivo —— */
@media (max-width: 600px){
  .simple-keyboard{
    width: 100%;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.2);
  }
  .simple-keyboard .hg-button{
    padding: 14px 16px;
    font-size: 16px;
    min-width: 48px;
  }
  .simple-keyboard .hg-button.hg-space-wide{
    min-width: 220px;
  }
  .simple-keyboard .hg-button.hg-right-btn{
    flex-basis: 120px;
    min-width: 120px;
  }
}

@media screen and (max-width: 801px) and (orientation: portrait){
  .simple-keyboard{
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}


@media (max-width: 600px) {

  html, body{width: 100%; height: 100%; background: #fff;}
  body{max-width:100%; width: 100%; }
  header .wrap-header{padding: 24px;}
  header .wrap-header .logo img{height: 40px; width: auto;}
  header .wrap-header .subbrand img{height: 40px; width: auto;}

  .progress-bar{height: 4px; }
  .progress-bar .bar{width: 0.1%; height: 4px; }
  .progress-bar .bar:after{content:""; width: 2px; height: 4px; background-image: url(../img/tbar.svg); background-size: cover;margin-right: -2px; }

  h1{font-size: 28px; }
  h2{font-size: 20px;}
  h3{font-size: 16px;}
  p{font-size: 12px;}

  .button{font-size: 14px; padding: 12px 16px;}
  .button.btn-secondary{border: 2px solid #FF6900;}

  main{padding: 24px; height: calc(100% - 136px);  position: relative;}
  main.page-inicio h1{margin-bottom: 32px;}
  main.page-inicio h2, main.page-fin h2{margin-bottom: 32px;}
  main.page-fin h1{margin-bottom: 56px;}

  main.page-emotions .q-wrap{height: 120px; margin-bottom: 90px;}
  .emotions{width: 90%;  }
  .emotions a img{width: 40px; height: 40px;}

  main.page-stars .q-wrap{height: 120px; margin-bottom: 8px; }


main.page-stars .sq-wrap ul {margin-bottom: 32px;}
main.page-stars .sq-wrap ul li{margin-bottom: 16px;}


.star-rating { width: 60%;}
.star-rating input{ width: 32px; height: 32px; line-height: 32px;}
.star-rating input:after {font-size: 32px; }
.star-rating input:checked:after, .star-rating  input:checked ~ input:after {font-size: 32px;}

main.page-stars .sq-wrap ul li.error .alert.alert-error::before{ width: 16px; height: 16px; margin-right: 4px;}

main.page-message .q-wrap{height: 80px; margin-bottom: 32px; }
main.page-message form textarea{height: 240px; padding: 24px; font-size: 16px;  margin-bottom: 24px;}
main.page-message form{text-align: center;}

main.page-botones{}
main.page-botones .botones{padding-top: 0;}
main.page-botones .botones a.button{display: block; margin: 24px auto; text-align: center; width: 100%;}


/* over message */

.overmessage{width: 100%; height: 100%; }
.overmessage .message{width: 90%; padding: 24px;}
.overmessage .message h3{font-size: 16px; text-align: center; margin-bottom: 24px;}
.overmessage .message .links a{ margin: 0 8px;}

/* The media query below will handle small screens, but the general rule is removed */
/* .simple-keyboard{display: none;} */

}


@media screen and (max-width: 801px) and (orientation: portrait) {
 
  /* Estilos específicos para tablets en orientación vertical */

  html, body{width: 100%; height: 100%; background: #ccc; overflow: hidden;}

  body{max-width:100%; width: 100%; height: 1202px; background-color: #fff;}
  header .wrap-header{padding: 48px;}
  header .wrap-header .logo img{height: 64px; width: auto;}
  header .wrap-header .subbrand img{height: 64px; width: auto;}

  main{padding: 48px; height: calc(100% - 198px);  position: relative;}
  main.page-inicio{width: 800px !important; height: 960px !important;  background-size: 86%; background-position: center;}

  .progress-bar{height: 8px; }
  .progress-bar .bar{width: 0.1%; height: 8px; }
  .progress-bar .bar:after{content:""; width: 4px; height: 8px; background-image: url(../img/tbar.svg); background-size: cover;margin-right: -4px; }

  h1{font-size: 48px; }
  h2{font-size: 40px;}
  h3{font-size: 24px;}
  p{font-size: 18px;}

  .button{font-size: 24px; padding: 24px 32px;}
  .button.btn-secondary{border: 4px solid #FF6900;}

  main.page-botones .botones{padding-top: 40px;}
  main.page-botones .botones a.button{display: block; margin: 40px auto; text-align: center; width: 100%;}


  .button-comentario {
    font-size: 18px!important;
    padding: 12px 24px!important;
    border: 2px solid #746761!important;
    border-radius: 2px!important;
  }

  main.page-emotions .q-wrap {height: 220px; margin-bottom: 80px;}
  .emotions{width: 624px;  }
  .emotions a img{width: 80px; height: 80px;}

  /* .overmessage .message {
    margin: auto;
    width: 800px;
    background: #fff;
    padding: 64px;
  } */

/* over message */

.overmessage{width: 100%; height: 100%; }
.overmessage .message{width: 90%; padding: 32px;}
.overmessage .message h3{font-size: 32px; text-align: center; margin-bottom: 32px;}
.overmessage .message .links a{ margin: 0 16px;}

main.page-message .q-wrap {
  height: auto;
  margin-bottom: 40px;
  text-align: center;
}

main.page-message .q-wrap h2{font-size: 32px;}

main.page-message form textarea {


  height: 320px;
  padding: 24px;
  background: #F9F9F9;
  border: 1px solid #ccc;
  border-radius: 2px;
  display: block;
  color: #000;
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 40px;
}

}

/* — subir un poco el tamaño del teclado — */
.simple-keyboard{
  padding: 12px 12px env(safe-area-inset-bottom);
}

.simple-keyboard .hg-row{
  gap: 12px;
  margin: 8px 10px;
}

.simple-keyboard .hg-button{
  /* más alto y letra más grande */
  padding: 22px 26px;
  font-size: 22px;
  min-width: 72px;
  border-radius: 14px;
}

/* Espacio más ancho */
.simple-keyboard .hg-button.hg-space-wide{
  min-width: 440px;    /* ajustá si hace falta */
}

/* Borrar/Enter un poco más anchos */
.simple-keyboard .hg-button.hg-right-btn{
  flex: 0 0 190px;
  min-width: 190px;
}

/* Mantener compacto en móviles */
@media (max-width: 600px){
  .simple-keyboard .hg-button{
    padding: 16px 18px;
    font-size: 18px;
    min-width: 54px;
  }
  .simple-keyboard .hg-button.hg-space-wide{ min-width: 260px; }
  .simple-keyboard .hg-button.hg-right-btn{ flex-basis: 130px; min-width: 130px; }
}

/* .simple-keyboard{
  transform: translateX(-50%) scale(1.20);
  transform-origin: bottom center;
} */