/* CHAT v2.0 */
              /* Estilos para el contenido de la página */
              .contenido {
                position: relative;
                z-index: 1;
              }
      
              /* Estilos para el cuadro de diálogo */
              #dialogueBox {
                text-align: left;
              }
      
              /* Estilos para el botón siguiente */
              #nextButton {
                position: absolute;
                bottom: 10px;
                right: 10px;
                padding: 16px;
                border: none;
                cursor: pointer;
                background-image: url('https://dl.dropboxusercontent.com/s/e96c1dntxxi1ass/spr_ui_continue.gif');
                background-position: center;
                background-repeat: no-repeat;
                background-color: black;
                z-index: 8880;
              }
      
              /* Estilos para el contenedor de las opciones */
              #optionsContainer {
                display: flex;
                flex-direction: column;
                align-items: center;
              }
      
              /* Estilos para cada opción */
              #optionsContainer button {
                margin: 5px;
                padding: 10px 20px;
                border: 2px solid #b3914f;
                border-radius: 5px;
                background-color: #000;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s, color 0.3s;
                width: 80%;
              }
      
              /* Estilos para el efecto hover en las opciones */
              #optionsContainer button:hover {
                background-color: #b3914f;
                color: #000;
              }
      
              /* Estilos para el bloque de testimonio */
              .testimonial-block .inner-box {
                position: relative;
                padding: 0 30px 30px;
                background-color: #000000c9;
                border-style: inset;
                border-width: 5px;
                border-radius: 10px;
                border-color: coral !important;
                font-family: "Libre Franklin", sans-serif;
              }
      
              .testimonial-block .inner-box .image {
                position: relative;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                overflow: hidden;
                margin-top: -50px;
                margin-bottom: 25px;
                display: inline-table;
                border-style: inset;
                border-width: 3px;
                border-color: coral;
              }
      
              .testimonial-block .inner-box .content {
                position: relative;
              }
      
              .testimonial-block .inner-box .content .author-info {
                position: relative;
                font-size: 20px;
                font-weight: 500;
                color: #fff;
                display: none;
              }
      
              .testimonial-block .inner-box .content span {
                position: relative;
                color: #aaa;
                font-size: 14px;
              }
      
              .testimonial-block .inner-box .content .text {
                position: relative;
                margin-top: 20px;
                color: #aaa;
                    font-size: 24px;
                width: 95%;
                font-family: "Libre Franklin", sans-serif;
                
              }
      
              /* Estilos para centrar el div */
              .owl-stage-outer {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 60%;
                font-family: "Libre Franklin", sans-serif;
                
              }
      
              .chat-screen {
                position: absolute !important;
                top: 0;
                left: 0;
                width: 100%;
                background-color: #0000009c;
                z-index: 99999;
                position: absolute;
                height: 100%;
      
                font-family: "Libre Franklin", sans-serif;
                background-color: #0000002e !important;
                background-image: linear-gradient(#00000040, #0000002b);
                filter: drop-shadow(0px 6px 6px black);
                text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
                border-color: white;
                border: 1px;
                border-radius: 20px;
                padding-left: 42px;
                padding-right: 40px;
                padding-top: 10px;
                margin-bottom: 30px;
                min-height: 30% !important;
                background-position: center;
                background-position-x: center;
                background-repeat: no-repeat;
                background-size: contain;
                background-position-x: right;
                overflow: auto;
                font-size: min(max(1rem, 4vw), 22px) !important;
                font-family: "Libre Franklin", sans-serif;
        
                top: 50%; /* Posicionamos en el centro vertical */
                left: 50%; /* Posicionamos en el centro horizontal */
                transform: translate(-50%, -50%) scale(0); /* Empieza con un tamaño de 0 y estará centrado */
                transition: transform 0.3s ease-in-out; 
          }
          

          .health-chart {
            display: block;
            margin: 10px auto;
            max-width: 80%;
            max-height: 150px;
            background-image: url("https://casioriginal.com/dat/icons/obj32.png");
            background-size: cover;
            background-position: center;
            background-repeat: space;
            position: relative;
            padding: 5px;
        }

        .health-circle {
            stroke: #ff00008f;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            animation: progress 1s ease-out forwards;
        }

        @keyframes progress {
        0% {
            stroke-dasharray: 0 100;
        }
        }



        .image-container {
          position: relative;
          width: 80px;
          height: 80px;
          overflow: hidden; /* Para recortar cualquier contenido que sobresalga */
        }

        .foreground-image {
          position: absolute;
          width: 80px;
          height: 80px;
          bottom: 0; /* Alinear la imagen en la parte inferior */
          clip-path: inset(0px 0 0 0); /* Recorta la parte superior de la imagen */
        }

        .background-image {
          position: absolute;
          width: 80px;
          height: 80px;
          top: 0; /* Alinear la imagen en la parte superior */
        }





        @import url("https://dl.dropboxusercontent.com/s/88wg1833w058o3o/Pixel%20Arial%2011.css");
        @import url("https://dl.dropboxusercontent.com/s/j79gghcc395utvf/04b03.css");
        @import url("https://fonts.googleapis.com/css?family=Libre+Franklin:500|Ubuntu+Mono");


        body {
          font-family: "Libre Franklin", sans-serif;
          background-attachment: fixed;
          background-color: gray !important;
          background: gray;
          background-position: top center;
          background-size: cover;
        }

        #dialogueBoxContainer {
          background-color: white;
          border: 8px solid white;
          border-radius: 8px;
          box-sizing: border-box;
          display: table;
          margin: auto;
          position: relative;
          width: 800px;
          font-family: "Libre Franklin", sans-serif;
        }
        #dialogueBoxContainer::before {
          background-color: black;
          border: 4px solid black;
          border-radius: 4px;
          bottom: 0;
          box-sizing: border-box;
          content: " ";
          left: 0;
          margin: 8px;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 0;
        }

        #dialogueBox {
          display: flex;
          position: relative;
          z-index: 1;
          width: 100%;
        height: 100%;
        }
        #dialogueBox.continue {
          background-image: url("https://dl.dropboxusercontent.com/s/e96c1dntxxi1ass/spr_ui_continue.gif");
          background-position: bottom right;
          background-repeat: no-repeat;
        }

        #dialogueImageContainer {
          height: 140px;
          margin: 10px;
          width: 140px;
        }

        #dialogueImage {
          height: 140px;
          width: 140px;
        }
        #dialogueImage.aliasing {
          image-rendering: -webkit-crisp-edges;
          image-rendering: -moz-crisp-edges;
          image-rendering: -o-crisp-edges;
          image-rendering: crisp-edges;
          image-rendering: pixelated;
          -ms-interpolation-mode: nearest-neighbor;
        }
        #dialogueImage[src=""] {
          visibility: hidden;
        }

        #dialogueTextContainer {
          flex: 1 auto;
          height: 140px;
          margin: 10px 0;
          height: 100%;
        }

        #dialogueTextGhost {
          color: white;
          opacity: 0.5;
        }

        #dialogueText {
          color: white;
          line-height: 35px;
          position: relative;
          white-space: pre-wrap;
        }
        #dialogueText::after {
          content: attr(data-ghost);
          color: rgba(255, 255, 255, 0);
          left: 0;
          pointer-events: none;
          position: absolute;
          top: 0;
          transition: color 200ms ease;
        }
        #dialogueText.ghost::after {
          color: rgba(255, 255, 255, 0.33);
        }
        #dialogueText > span {
          display: inline-block;
          font-family: "Libre Franklin", sans-serif;
        }

        #dialogueLabelContainer {
          background-color: white;
          border-radius: 8px;
          position: absolute;
          left: 18px;
          top: 168px;
          width: 140px;
          z-index: 2;
        }

        #dialogueLabel {
          font-family: "04b03";
          font-size: 16px;
          line-height: 1;
          text-align: center;
        }

        #inputContainer {
          width: 800px;
          margin: 10px auto 0;
        }
        #inputContainer .flex {
          display: flex;
          flex: 1 0 0;
          justify-content: space-between;
          margin-bottom: 5px;
        }
        #inputContainer .flex.right {
          justify-content: flex-end;
        }
        #inputContainer .flex .flex:first-child {
          padding-right: 10px;
        }
        #inputContainer .flex .flex:last-child {
          padding-left: 10px;
        }
        #inputContainer span {
          font-weight: 500;
        }
        #inputContainer input:not([type=range]), #inputContainer textarea {
          background-color: black;
          border: 2px solid white;
          border-radius: 8px;
          color: white;
          font-family: "Ubuntu Mono", monospace;
          padding: 4px;
        }
        #inputContainer input[type=text], #inputContainer input[type=range] {
          width: 60%;
        }
        #inputContainer textarea {
          height: 1.1em;
          overflow: hidden;
          width: 100%;
          resize: none;
          transition: height 200ms ease;
        }
        #inputContainer textarea:focus {
          height: 4.4em;
        }

        #flexer {
          border-bottom: 2px solid white;
          height: 50px;
          margin: 10px auto 10px;
          overflow: hidden;
          resize: vertical;
          width: 800px;
        }




        #dialogueText {
          margin-bottom: 60px;
          margin-left: 20px;
        }

        #nextButton {
          position: absolute;
          bottom: 10px;
          right: 10px;
          padding: 8px 16px;
          border: none;
          cursor: pointer;
          background-image: url('../dat/icons/more.gif'); 
          background-position: center; 
          background-repeat: no-repeat;
          background-color: black;

        }


        
                 /* CHAT v2.0 */
              /* Estilos para el contenido de la página */
              .contenido {
                position: relative;
                z-index: 1;
              }
      
              /* Estilos para el cuadro de diálogo */
              #dialogueBox {
                text-align: left;
              }
      
              /* Estilos para el botón siguiente */
              #nextButton {
                position: absolute;
                bottom: 10px;
                right: 10px;
                padding: 16px;
                border: none;
                cursor: pointer;
                background-image: url('../dat/icons/more.gif');
                background-position: center;
                background-repeat: no-repeat;
                background-color: black;
                z-index: 8880;
              }
      
              /* Estilos para el contenedor de las opciones */
              #optionsContainer {
                display: flex;
                flex-direction: column;
                align-items: center;
              }
      
              /* Estilos para cada opción */
              #optionsContainer button {
                margin: 5px;
                padding: 10px 20px;
                border: 2px solid #b3914f;
                border-radius: 5px;
                background-color: #000;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.3s, color 0.3s;
                width: 80%;
              }
      
              /* Estilos para el efecto hover en las opciones */
              #optionsContainer button:hover {
                background-color: #b3914f;
                color: #000;
              }
      
              /* Estilos para el bloque de testimonio */
              .testimonial-block .inner-box {
                position: relative;
                padding: 0 30px 30px;
                background-color: #000000c9;
                border-style: inset;
                border-width: 5px;
                border-radius: 10px;
                border-color: coral !important;
                font-family: "Libre Franklin", sans-serif;
              }
      
              .testimonial-block .inner-box .image {
                position: relative;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                overflow: hidden;
                margin-top: -50px;
                margin-bottom: 25px;
                display: inline-table;
                border-style: inset;
                border-width: 3px;
                border-color: coral;
              }
      
              .testimonial-block .inner-box .content {
                position: relative;
              }
      
              .testimonial-block .inner-box .content .author-info {
                position: relative;
                font-size: 20px;
                font-weight: 500;
                color: #fff;
                display: none;
              }
      
              .testimonial-block .inner-box .content span {
                position: relative;
                color: #aaa;
                font-size: 14px;
              }
      
              .testimonial-block .inner-box .content .text {
                position: relative;
                margin-top: 20px;
                color: #aaa;
                    font-size: 24px;
                width: 95%;
                font-family: "Libre Franklin", sans-serif;
                
              }