/* @media all and (min-width: 450px) { */
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    :root {
      font-size: 14px;
    }

    html {
      background: none;
      background-color: var(--color-text-verde);
    }

    .autor {
      display: none;
    }

    .hoja-fantasma {
      display: none;
    }

    .wrapper {
      grid-template-rows: fit-content(40%) auto 40px;
      /* border: 3px solid yellow; */
    }

    .header {
      display: none;
    }

    .contenido {
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 0px;
      min-height: 500px;
    }

    .contenido-tarjeta {
      margin-left: 10px;
      margin-right: 10px;
    }

    .header-mobile {
      display: grid;
      grid-template-columns: 1fr;
    }

    .header-mobile .logo-dulcenavidad {
      width: 70%;
      margin: auto;
    }

    .formulario {
      grid-column: 1 / span 1;
      grid-template-columns: 1fr;
      gap: 20px;
    }


    .manito-mobile {
      width: 90%;
      display: grid;
      grid-template-columns: 20% 80%;
      align-items: center;
      margin: auto;
    }
    
    .manito-mobile .manito-texto {
        font-family: 'hynings';
        text-align: left;
        font-size: 1rem;
        font-weight: 400;
        color: #fff;
    }
    

    .seccion-tarjeta .descripcion {
      grid-column: 1 / auto-fit;
    }

    .seccion-tarjeta .descripcion h2, .seccion-formulario .descripcion p {
      text-align: center;
    }

    .seccion-tarjeta .descripcion h2,
    .seccion-formulario .descripcion h2 {
      display: none;
    }

    .seccion-tarjeta .disenos {
      /* grid-column: 3 / span 9; */
      grid-column: 1 / auto-fill;
      margin-bottom: 30px;
    }

    .seccion-tarjeta .disenos .diseno-1,
    .seccion-tarjeta .disenos .diseno-2,
    .seccion-tarjeta .disenos .diseno-3 {
      height: 160px;
    }

    .seccion-formulario {
      grid-template-columns: 1fr;
    }

    .seccion-formulario .contenedor-formulario {
      grid-column: 1 / auto;
    }

    .seccion-formulario .contenedor-upload-image {
      grid-column: 1 / auto;
      width: 100%;
      height: auto;
    }

    .seccion-formulario .descripcion {
      grid-column: 1 / auto;
    }

    .seccion-formulario .descripcion h2, .seccion-formulario .descripcion p {
      text-align: center;
    }

    .seccion-formulario .barra-boton-action{
      grid-column: 1 / auto;
    }

    .seccion-personajes {
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }

    .seccion-personajes .bienvenida {
      grid-column: 1 / span 6;
      width: 100%;
      max-width: 100%;
    }

    .seccion-personajes .personajes {
      grid-column: 1 / span 6;
    }

    .seccion-personajes .descripcion {
      grid-column: 1 / span 6;
      grid-row: 5;
    }

    .seccion-personajes .descripcion-campana {
      grid-column: 1 / span 6;
      grid-row: 4;
      margin: 10px 0;
    }

    .seccion-personajes .descripcion h2,
    .seccion-personajes .descripcion p,
    .seccion-tarjeta .descripcion p,
    .seccion-personajes .descripcion-campana h2,
    .seccion-personajes .descripcion-campana p {
      text-align: center;
    }

    .seccion-personajes .descripcion-campana {
      display: none;
    }

    .seccion-personajes .descripcion h2 {
      display: none;
    }


    .seccion-personajes .descripcion h2 {
      display: none;
    }

    .seccion-tarjeta .descripcion {
      /* grid-column: 1 / span 6; */
      grid-row: 5;
      /* grid-area: descripcion; */
    }

    .seccion-personajes .barra-boton-action {
      grid-column: 1 / span 6;
      /* grid-area: boton-action; */
    }

    .seccion-personajes .personajes #personajes_iansa {
      width: 100%;
      height: 200px;
    }

    .seccion-formulario .bienvenida {
      max-width: 80%;
      grid-column: 1 / auto;
    }

    .footer {
      grid-template-columns: 1fr 1fr;
      height: 70px;
      background: none;
      position: relative;
      background-color: yellow;
      align-items: start;
    }

    .footer .texto-footer {
      text-align: center;
      grid-column: 1 / span 2;
      background-color: #00724D;
      padding: 8px 0 5px 0;
    }

    .footer .texto-footer span {
      font-size: 1.1rem;
      font-weight: 400;
      text-align: center;
      color: #fff;
    }

    .footer .redes-sociales {
      grid-column: 1 / span 1;
      padding-left: 15px;
    }

    .footer .parlante {
      grid-column: 2 / span 1;
      margin: 0px;
      padding-right: 20px;
      /* border: 1px solid red; */
    }

    .footer .redes-sociales ul {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 15px;
    }

    .footer .redes-sociales ul li a {
      text-decoration: none;
    }

    .footer .redes-sociales ul li a i {
      font-size: 2rem;
      display: grid;
      justify-content: center;
      align-items: center;
      color: var(--color-text-verde);
    }

    .footer .parlante i {
      font-size: 2rem;
      color: var(--color-text-verde);
    }


    .footer .parlante img {
      height: 15px;
    }

    /* SECCION TARJETAS */
    .seccion-tarjeta {
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }

    .seccion-tarjeta .bienvenida {
      grid-column: 1 / span 6;
      width: 100%;
      max-width: 100%;
    }

    .seccion-tarjeta .descripcion {
      grid-column: 1 / span 6;
      grid-row: 5;
    }

    .seccion-tarjeta .barra-boton-action {
      grid-column: 1 / span 6;
    }

    /* SECCION FORMULARIO */

    .seccion-formulario .contenedor-draganddrop {
      height: 200px;
      position: relative;
    }

    .seccion-formulario .personaje-sprite-contenedor {
      display: none;
    }

    .seccion-formulario .draganddrop {
      height: 160px;
      position: absolute;
      bottom: 0;
    }

    .seccion-formulario .contenedor-upload-image .tooltip {
      width: 45%;
      right: 2%;
      top: 7%;
      left: inherit;
    }

    .seccion-formulario .contenedor-upload-image .tooltip img {
      height: 80px;
    }

    .seccion-formulario .descripcion {
      grid-row: 5;
    }

    .seccion-tarjeta-animada {
      grid-template-columns: repeat(6, 1fr);
      width: 100%;
      display: grid;
      grid-column: 1 / span 6;
      gap: 10px;
      justify-content: end;
      align-self: end;
      margin-bottom: 10px;
    }

    .seccion-tarjeta-animada .barra-boton-action {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column: 1 / span 6;
      gap: 10px;
      margin: auto;
    }

    .seccion-tarjeta-animada .boton-crea-tarjeta {
      display: grid;
      grid-template-columns: 1fr;
      grid-column: 1 / span 6;
      gap: 10px;
      margin: auto;
    }

    .seccion-tarjeta-animada .boton-crea-tarjeta .boton-amarillo {
      width: 170px;
    }

    .seccion-tarjeta-animada .boton-amarillo {
      width: 150px;
    }

    .header-tarjeta-animada-mobile .logo-dulcenavidad {
      display: none;
    }


    .tooltip-texto {
      background: url('../images/tooltip-texto-mobile.png') no-repeat;
      width: 90%;
      height: 165px;
      background-size: contain;
      padding: 10px;
      position: absolute;
      top: 5%;
      left: 5px;
    }

    .card-page .tooltip-texto p {
      font-size: 1.1rem;
      font-weight: 400;
      width: 90%;
      color: #000;
      font-family: 'hynings';
      text-align: left;
      padding: 0px;
      min-height: 115px;
    }

    .overlay-share-email .contenedor-share-email {
      width: 90%;
    }

    .autor-mobile {
      background: url('../images/esquina-autor-mobile.png');
      background-repeat: no-repeat;
      width: 100%;
      background-size: contain;
      height: 165px;
      grid-column: 1 / span 6;
      display: block;

      position: absolute;
      left: 0;
      bottom: 30%;
      z-index: 999;
    }

    .autor-mobile .datos-autor {
      transform: rotate(13deg) translate(0, 0);
      /* border: 1px solid red; */
      width: 35%;
      margin-top: 80px;
      margin-left: 85px;
    }

    .autor-mobile p {
      padding: 0;
      margin: 0;
      color: yellow !important;
      /* font-size: 1.5rem !important; */
      line-height: 1.5rem;
      font-family: 'hynings';
      font-weight: 700;
    }


    .autor-mobile p span {
      /* font-size: 1.5rem !important; */
      color: #fff !important;
    }


    .seccion-formulario .contenedor-upload-image .tooltip span {
      font-size: 1rem;
      margin: 5px;
      text-align: center;
      display: inline-flex;
      min-height: 40px;
      align-items: center;
    }

    .tooltip-personaje {
      display: none;
    }

    .overlay-error-campos .contenedor-error {
      width: 100%;
      height: 105px;
      max-width: 300px;
      background-size: contain;
      top: 20%;
    }

    .overlay-error-campos .contenedor-error i {
      font-size: 2rem;
    }

    .overlay-error-campos .contenedor-error span {
      font-size: 1.5rem;
      color: #3E64E5;
    }

    .overlay-error-campos .personaje-error {
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -5%);
    }

    .text-agradecimientos {
      /* grid-column: 2 / span 4; */
      grid-column: 1 / 7;
      width: 80%;
      margin: auto;
    }

    .text-agradecimientos h2 {
      text-align: center;
    }

    .text-agradecimientos p {
      text-align: center;
    }

    .linea-logo {
      width: 150px;
      height: 5px;
      margin: 10px auto;
    }

  }


  @media (max-width: 360px) {
    .seccion-tarjeta-animada {
      margin-top: 200px;
    }
  }

  @media (max-width: 320px) {
    .seccion-tarjeta-animada {
      margin-top: 280px;
    }

    .autor-mobile {
      bottom: 10%;
    }

    .seccion-tarjeta-animada .boton-amarillo {
      width: 140px;
    }

    .autor-mobile .datos-autor {
      width: 45%;
    }
  }


  /* MEDIA QUERY TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .header {
      grid-column: 1 / span 6;
      max-height: 100px;
    }

    .wrapper {
      grid-template-rows: 170px auto 40px;
    }

    .contenido {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 1fr 1fr;
    }

    .seccion-tarjeta {
      grid-template-columns: repeat(6, 1fr);
      grid-column: 1 / span 6;
    }

    .logo-dulcenavidad {
      align-self: end;
      margin-bottom: 20px;
    }

    .seccion-tarjeta .descripcion {
      /* display: grid; */
      grid-column: 1 / span 6;
      /* margin-top: 20px;
      margin-right: 20px;
      margin-left: 20px; */
      margin: 20px auto;
      width: 60%;
    }

    .seccion-tarjeta .descripcion p {
      text-align: center;
    }

    .seccion-tarjeta .disenos {
      grid-column: 1 / span 6;
    }

    .seccion-tarjeta .barra-boton-action {
      grid-column: 1 / span 6;
    }
  }

  @media (min-width: 1921px) and (max-width: 2560px)  {
    .wrapper {
      grid-template-rows: 350px auto 40px;
    }

    .header {
      max-height: 350px;
    }

    .contenido {
      align-items: stretch;
    }

    .personajes {
      /* grid-column: 5 / span 5; */
      align-self: center;
    }

    .seccion-tarjeta .disenos .diseno-1, .seccion-tarjeta .disenos .diseno-2, .seccion-tarjeta .disenos .diseno-3 {
      max-width: 350px;
      height: 450px;
    }

    .seccion-tarjeta .disenos {
      grid-column: 4 / span 6;
    }

    .formulario {
      align-content: space-evenly;
    }

  }


  @media (min-width: 900px) and (max-width: 1440px) {
    .wrapper {
      grid-template-rows: 185px auto 40px;
    }

    .header .luces-izquierda {
      width: 90%;
    }

    .header .luces-derecha {
      width: 90%;
    }
    
    .seccion-formulario .bienvenida {
      font-size: 1.7rem;
    }
    
    .seccion-formulario .boton-amarillo a {
      font-size: 1.7rem;
    }
  }