@font-face {
  font-family: 'RocGrotesk';
  src: url('/src/assets/fonts/Wide Light.otf') format('opentype');
  font-weight: 300; /* Light */
  font-style: normal;
}
  
@font-face {
  font-family: 'RocGrotesk';
  src: url('/src/assets/fonts/Wide.otf') format('opentype');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'RocGrotesk';
  src: url('/src/assets/fonts/Wide Medium.otf') format('opentype');
  font-weight: 500; /* Medium */
  font-style: normal;
}

@font-face {
  font-family: 'RocGrotesk';
  src: url('/src/assets/fonts/Wide Bold.otf') format('opentype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: 'RocGrotesk';
  src: url('/src/assets/fonts/Wide Extrabold.otf') format('opentype');
  font-weight: 800; /* ExtraBold */
  font-style: normal;
  font-display: swap;
}
  

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: 'RocGrotesk', sans-serif;
    overflow-x: hidden;
    max-width: 100%;
    line-height: 1.5;
    background: #f9f9f9;
    color: #F2F625;      
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('../assets/imgs/bg.webp'); 
    background-size: cover;       
    background-repeat: no-repeat; 
    background-position: center;  
    background-attachment: fixed; 
  }
  @media (max-width: 768px) {
    body {
      background-attachment: scroll;
    }
  }
  header {
    text-align: center;
    margin-bottom: 30px;
  }

  .description {
    margin-bottom: 30px;
    font-size: 1.1em;
  }
  .checker-group {
    text-align: center;
  }
  .checker-group label {
    margin-right: 15px;
    font-weight: bold;
    cursor: pointer;
  }
  .checker-group input[type="text"] {
    margin-top: 10px;
    width: 80%;
    padding: 6px;
    font-size: 1em;
    caret-color: #F2F625;

  }
  .textareas-container {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
  }
  .textareas-container textarea {
    flex: 1;
    height: 100px;
    padding: 10px;
    font-size: 1em;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 5px;
    caret-color: #F2F625;
  }
  .textareas-container textarea::placeholder {
    transition: opacity 0.3s;
  }

  /* Placeholder desaparece al hacer click/foco */
  .textareas-container textarea:focus::placeholder {
      opacity: 0;
  }
  .textareas-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: center;
  }
  .submit-container {
    text-align: center;
    margin-top: 9.5%;
    margin-bottom: 20px;
  }
  
  .submit-container button {
    background-color: #F2F625;
    color: #5086BC;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 700;
    font-size: 35px;
    padding: 14px 60px; /* más largo y alto */
    border: none;
    border-radius: 40px; /* bordes redondeados */
    cursor: pointer;
    transition: background-color 0.3s ease;
    
  }
  
  .submit-container button:hover {
    background-color: #e4e718; /* tono un poco más oscuro al pasar el cursor */
  }
  .mini-text {
    text-align: center;
    margin-bottom: 40px;
  }
  .mini-text input {
    width: 60%;
    padding: 6px 8px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
  }


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background: #f9f9f9;
    color: #F2F625;      
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url('../assets/imgs/bg.webp'); 
    background-size: cover;       
    background-repeat: no-repeat; 
    background-position: center;  
    background-attachment: fixed; 
  }
  header {
    text-align: center;
    margin-bottom: 30px;
  }

  .description {
    margin-bottom: 30px;
    font-size: 1.1em;
  }
  .checker-group2 {
    text-align: center;
  }
  .checker-group2 label {
    margin-right: 15px;
    cursor: pointer;
  }
  .checker-group2 input[type="text"] {
    margin-top: 10px;
    width: 80%;
    padding: 6px;
    font-size: 1em;
    caret-color: #F2F625;

  }
  .textareas-container {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
  }
  .textareas-container textarea {
    flex: 1;
    height: 100px;
    padding: 10px;
    font-size: 1em;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 5px;
    caret-color: #F2F625;

  }
  .textareas-container textarea::placeholder {
    transition: opacity 0.3s;
  }

  /* Placeholder desaparece al hacer click/foco */
  .textareas-container textarea:focus::placeholder {
      opacity: 0;
  }
  .textareas-container label {
    display: block;
    margin-bottom: 8px;
    text-align: center;
  }
  .submit-container {
    text-align: center;
    margin-bottom: 15px;
  }
  .br-mobile{
    display: none;
  }
  .br-desktop{
    display: block;
  }
  button {
    background: #007bff;
    border: none;
    padding: 12px 25px;
    color: white;
    font-size: 1.1em;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  button:hover {
    background: #0056b3;
  }
  .mini-text {
    text-align: center;
    margin-bottom: 40px;
  }
  .mini-text input {
    width: 60%;
    padding: 6px 8px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .by-iboo{
    font-size:10px;
  }

  .img-titulo-landing-mobile{
    display: none;
  }

.titulo-landing{
    margin-top: 6%;
    margin-left: -36%
}
.img-titulo-landing{
    width: 38%;
    height: 40%;
}
  
.subtitulo-landing{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    font-size: 28px;
    margin-top: 3.5%;
    line-height: 110%;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-left: 7.25%;
    text-align: left;
}

.by-iboo{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    font-size: 10px;
    margin-top: 0.5%;
    line-height: 110%;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.texto-separado-1{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    width:8%;
    margin-right: 6%;
    margin-left: 2%;
    width: auto;
    font-size: 16.6px;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;

}
.texto-separado-2{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    width: 5%;
    margin-right: 17%;
    font-size: 16.6px;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;

}
.texto-separado-3{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    width: 20%;
    font-size: 16.6px;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;

}
.texto-separado-4{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    width: 20%;
    font-size: 16.6px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-right: 10%;
    white-space: nowrap;

}
.texto-separado-5{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    font-size: 16.6px;
    margin-right: 12%;
    width: 0%;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.titulo-flex {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* o center si prefieres */
    justify-content: center;
    flex-wrap: nowrap; /* evita que bajen de línea */
    width: 95%;
    gap:5%;
    margin-top: -0.3%;
}


  footer {
    margin-top: 8.5%;
    padding: 20px;
    font-size: 0.9em;
    color: white;
  }
  
  .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .footer-row.top-row .contact-info span {
    margin-right: 10px;
  }
  
  .footer-row.top-row .separator {
    margin: 0 8px;
    color: #888;
  }
  
  .footer-row.top-row a,
  .footer-row.bottom-row a {
    color: #F2F625;
    margin-left: 15px;
    text-decoration: none;
  }
  
  .footer-row.top-row a:hover,
  .footer-row.bottom-row a:hover {
    text-decoration: underline;
  }
  
  hr {
    border: none;
    border-top: 1px solid #ffffff;
    margin: 10px 0;
  }
  
  .footer-row.bottom-row .left-note,
  .footer-row.bottom-row .right-note {
    flex: 1;
  }
  
  .footer-row.bottom-row .right-note {
    text-align: right;
  }
  
  @media (max-width: 600px) {
    .footer-row {
      flex-direction: column;
      text-align: center;
    }
    .footer-row.bottom-row .left-note,
    .footer-row.bottom-row .right-note {
      text-align: center;
      margin: 5px 0;
    }
    .footer-row.top-row .contact-info,
    .footer-row.top-row .social-media {
      margin: 5px 0;
    }
  }
  

  .overlay-container {
    position: relative;
    z-index: 0;
  }
  
  .overlay-img {
    position: absolute;
    margin-top: -36%;
    margin-left: -20%;
    width: 75%;
    z-index: 10;
  }

  .overlay-img-mobile {
    display: none;
  }
  
  .creativos-img {
    margin-top: 4%;
    width: 103%;
    margin-left: -1.5%;
  }

  .descripcion-formulario{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    text-align: left;
    margin-top: 8.5%;
    margin-left: 4%;
    height: 200px;
    width: 1050px;
    letter-spacing: -0.02em;

  }
  .titulo-descripcion{
    font-size: 40.5px;
    font-weight: 500;
    line-height: 109%;
  }
  .descripcion{
    font-size: 20.5px;
    line-height: 148%;
    font-weight: 400;
    margin-top: 2%;
  }

  .checker-group{
    margin-top:8%;
  }


  .titulo-primer-selector{
    text-transform: uppercase;
    font-family: 'RocGrotesk', sans-serif !important;
    font-size: 36px;
    letter-spacing: -0.02em;
    margin-left: 1%;
    font-weight: 400;
  }

  .subrayado {
    text-decoration: underline;
  }


  .opciones-tiempo {
    display: flex;
    justify-content: center;
    gap: 2.5%;
    margin-top: 35px;
    margin-left: 27px;
  }
  
  .opciones-tiempo input[type="radio"] {
    display: none;
  }
  
  .opcion-boton {
    text-transform: uppercase;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 255px;
    height: 106px;
    background-color: transparent;
    color: #F2F625;
    border: 2px solid rgba(242, 246, 37, 0.4);
    border-radius: 30px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 700;
    font-size: 78px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    text-align: center;
    overflow: hidden; /* evita que el blur se salga */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  .opcion-boton::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1px);
    z-index: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  input[type="radio"]:checked + label.opcion-boton {
    border-color: #F2F625;
    opacity: 1;
  }

  input[type="radio"]:checked + label.opcion-boton::before {
    opacity: 0;
  }

  .opcion-boton span {
    font-size: 22px;
    font-weight: 700;
    position: relative;
    top: -90px;
  }
  .numero-select{
    font-family: 'RocGrotesk', sans-serif;
    font-size: 78px !important;
    display: inline-block;
    top: 65px !important;
    margin-right: 2.5%;
    transform: scaleX(1) scaleY(0.85); /* Combina ambas transformaciones */
  }
  
  /*.opcion-boton::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
    background-color: transparent; /* completamente transparente 
    z-index: 2;
    transition: opacity 0.3s ease;
  }*/

  input[type="radio"]:checked + label.opcion-boton {
    opacity: 1;
    
  }
  
  .opcion-boton:focus {
    outline: none;
  }
  .opcion-boton:active {
    outline: none;
  }
  

  .checker-group2{
    margin-top: 6%;
  }


  .radio-cuadrado input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #F2F625;
    border-radius: 4px; /* cuadrado con esquinas suaves */
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    background-color: transparent;
  }
  
  /* Cuando está marcado, mostrar check visual */
  .radio-cuadrado input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #F2F625;
    position: absolute;
    top: 4px;
    left: 4px;
  }
  
  /* Alinear el texto con el cuadro */
  .radio-cuadrado {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 500;
    color: #F2F625;
    cursor: pointer;
  }


  .checker-group2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .fila-principal {
    display: flex;
    gap: 80px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 800!important;
    font-size: 16px;
    flex-wrap: wrap;
    color: #F2F625;
    letter-spacing: -0.04em;
    justify-content: center;
  }
  
  /* Fila secundaria (otro + input) */
  .fila-secundaria {
    display: flex;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 800 !important;
    gap: 10px;
    margin-top: -1%;
    margin-left: 2.5%;
    justify-content: center;    /* Centra horizontalmente todo el grupo */
    align-items: center;        /* Centra verticalmente label + input */
    width: 100%;                /* Ocupa el ancho completo para que el justify-content funcione */
    box-sizing: border-box; 

  }
  
  /* Estilo visual del radio cuadrado */
  .checkbox-cuadrado {
    display: flex;
    align-items: center;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 500;
    transform: scaleX(1.3);
    color: #F2F625;
    cursor: pointer;
    position: relative; 
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  /* Ocultar el radio nativo y estilizarlo como cuadrado */
  .checkbox-cuadrado input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 18px;
    border: 1.25px solid #F2F625;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    background-color: transparent;
    cursor: pointer;
  }
  
  .checkbox-cuadrado input[type="checkbox"]:checked::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1.75px;
    transform: scale(1.03);
    background-color: #F2F625;
    position: absolute;
    top: 0;
    left: 0px;
  }
  
  #texto-otro {
    width: 600px;                
    height: 40px;
    padding: 10px 20px;     
    font-family: 'RocGrotesk', sans-serif;
    border: 2px solid #F2F625; 
    border-radius: 30px;       
    background-color: transparent; /* o el color que necesites */
    color: #fff;                /* texto del usuario */
    outline: none;
    font-size: 16px;
    box-sizing: border-box;    
    -webkit-appearance: none;
    appearance: none;
  }

  #texto-otro.desactivado {
    opacity: 1;
    pointer-events: none;
  }

  #texto-otro.activo {
    opacity: 1;
    pointer-events: auto;
  }


  .checkbox-cuadrado input[type="checkbox"] {
    margin-right: 10px;
  }
  
  .checkbox-cuadradolabel, .checkbox-cuadrado {
    /* bajar un poco el texto */
    margin-top: 20px;
  }
  
  #texto-otro::placeholder {
    color: transparent; /* hace que no se vea */
    opacity: 0;         /* refuerzo */
  }



  .textareas-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 8.5%;
  }
  
  .textareas-container > div {
    position: relative;
    width: 600px;
  }
  
  .textareas-container textarea {
    width: 100%;
    height: 340px;
    padding: 34px 10px 100px 35px;
    font-family: 'RocGrotesk', sans-serif;
    font-size: 16px;
    border: 2px solid #F2F625;
    border-radius: 20px;
    background-color: transparent;
    color: #fff;
    resize: vertical;
    box-sizing: border-box;
    text-transform: uppercase;
    caret-color: #F2F625;

  }

  .textareas-container textarea::placeholder {
    transition: opacity 0.3s;
  }

  /* Placeholder desaparece al hacer click/foco */
  .textareas-container textarea:focus::placeholder {
      opacity: 0;
  }
  
  /* Logo corporativo */
  .textareas-container > div::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 15px;
    width: 25px;   /* tamaño del logo */
    height: 25px;
    pointer-events: none; /* para que el logo no interfiera en clicks */
  }

  #ingredientes-no-quiero{
    margin-left: 3%;
  }

  .textareas-container textarea::placeholder {
    color: #F2F625;
    font-family: 'RocGrotesk', sans-serif;
    font-size: 17px;
    opacity: 1;
    width: 500px;
    top: 90px;
  }

  textarea:focus {
    outline: none;
    border-color: #F2F625; /* o el color que prefieras */
    box-shadow: none;      /* elimina cualquier resplandor que algunos navegadores aplican */
  }


  .textarea-wrapper {
    position: relative;
    width: fit-content; /* o un ancho fijo si prefieres */
  }
  
  .logo-textarea {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 50px; /* o el tamaño que necesites */
    height: auto;
    pointer-events: none; /* para que no interfiera con el click en el textarea */
  }

  .logo-textarea-derecha {
    position: absolute;
    bottom: 40px;
    left: 60px;
    width: 50px; /* o el tamaño que necesites */
    height: auto;
    pointer-events: none; /* para que no interfiera con el click en el textarea */
  }


  .mini-text{
    margin-top: 4%;
  }

  .disclaimer{
    font-family: 'RocGrotesk', sans-serif;
    font-size: 12.2px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 106%;
    text-transform: uppercase;
  }

  .contact-info {
    display: flex;
    flex-direction: column; /* apilar verticalmente */
    gap: 4px; 
  }

  .email{
    font-family: 'RocGrotesk', sans-serif;
    font-size: 18px;
    color: #F2F625;
    font-weight: 300;
  }

  .mobile{
    font-family: 'RocGrotesk', sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin-top: -2.2%;
    color: #ffffff!important; 
  }

  .left-note{
    font-family: 'RocGrotesk', sans-serif;
    font-size: 14.3px;
    font-weight: 300;
  }

  .social-media {
    font-family: 'RocGrotesk', sans-serif;
    font-size: 11.4px;
    font-weight: 300;
    display: flex;
    margin-right: 1%;
    color: #fff !important;
    margin-top: 1%;
    gap: 15px;
  }
  .social-media a{
    color: #fff !important;
  }

  .right-note{
    font-family: 'RocGrotesk', sans-serif;
    font-size: 14.3px;
    font-weight: 300;
  }
  .right-note a{
    color: #fff !important;
  }

  .contenedor-titulo-receta {
    width: 80%;
    margin: 10px auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    font-family: 'RocGrotesk', sans-serif;
    margin-top: 7.5%;
    margin-right: 14%;
    display: none;
  }

  .contenedor-receta {
    width: 88%;
    margin: 40px auto;
    padding: 40px;
    background-color: #F2F625;
    color: #053370; /* Azul oscuro para contraste */
    border-radius: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: 'RocGrotesk', sans-serif;
    margin-top: 0px;
    display: none;

  }

  .titulo-receta{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;

    font-weight: 500;
    letter-spacing: 0.4em;
    font-size: 31.5px;
  }

  .tiempo{
    margin-left: 90px;
    margin-top: -35px;
  }

  .tiempo strong{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 700;
    font-size: 20.5px;
    letter-spacing: -0.02em;
  }

  .tiempo span{
    position: relative;
    top: -5px; 
    left:-2px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400;
    font-size: 20.5px;
    letter-spacing: -0.02em;
    margin-right: 2px;
  }

  .instrucciones {
    font-family: 'RocGrotesk', sans-serif;
    margin-top: 50px;
    margin-left: 90px;
  }

  .instrucciones h3{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400 !important;
    font-size: 34.5px;
    letter-spacing: -0.02em;
  }


  .instrucciones ol{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 16px;
    letter-spacing: -0.02em;
    margin-top: 30px;
  }

  .instrucciones p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 16px;
    letter-spacing: -0.02em;
    margin-top: 30px;
  }

  .info-receta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
  }
  
  .columna-izquierda {
    flex: 1 1 65%;
    box-sizing: border-box;
  }

    
    
  .columna-derecha {
    flex: 1 1 25%;
    box-sizing: border-box;
    text-align: end;
  }
  
  .titulo-comida {
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 59.6px;
    padding: 10px 20px;
    display: inline-block;
    width: 85%;
    letter-spacing: -0.02em;
    line-height: 0.99em;
    margin-left: 70px;
    margin-top:0px;
    color: #053370;
  }

  .emoji-img {
    width: 48px;       /* Ajusta según el tamaño que quieras */
    height: auto;
    vertical-align: top;
    margin-top: 12px;
  }
  
  .dificultad{
    margin-top: -35px;
    margin-right: 85px;
    color: #053370;

  }

  .dificultad-mobile {
    display: none;
  }

  .dificultad strong{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 20.5px;
    letter-spacing: -0.02em;
    color: #053370;

  }

  .dificultad p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 20.5px;
    margin-top: -8px;
    letter-spacing: -0.02em;
    color: #053370;

  }

  .instrucciones ol {
    padding-left: 20px;
    color: #053370;

  }

  .ingredientes{
    margin-top: 65px;
    margin-right: 80px;
    color: #053370;

  }

  .ingredientes h3{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 34.5px;
    margin-top: -8px;
    letter-spacing: -0.02em;
    color: #053370;


  }

  .ingredientes ul {
    list-style: none;
    text-align: right;
    padding-left: 0px;
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 16px;
    margin-top: 30px;
    margin-left: 30px;
    width:350px;
    letter-spacing: -0.02em;
    color: #053370;

  }

  .ingredientes li {
    display: flex;
    justify-content: flex-end; /* alineamos texto y punto a la derecha */
    gap: 0px; /* separación entre texto y bullet */
    color: #053370;

  }

  .ingredientes li::after {
    content: "•"; /* El punto */
    color: #053370;
    font-weight: bold;
    margin-left: 40px;
    font-size: 35px;
    line-height: 0.6;
    vertical-align: middle;
  }


  .tiempo,
  .dificultad,
  .instrucciones,
  .ingredientes {
    margin-bottom: 1em;
  }

  @media (max-width: 1440px) {
    .columna-izquierda {
      flex: 1 1 45%;
      margin-left: auto;       /* Empuja hacia la derecha */
      margin-right: 0; 
    }
      
    .columna-derecha {
      flex: 1 1 25%;
      margin-left: auto;       /* Empuja hacia la derecha */
      margin-right: 0; 
      text-align: end;
    }



  }


@media ((min-width: 1024px) and (max-width: 1371px)) {

  .ingredientes{
    display: flex;
    flex-direction: column;
    align-items: flex-end;  
  }
}

  /* === TABLET: ajustes suaves para pantallas medianas === */
@media (max-width: 1024px) {
  .by-iboo{
    margin-left: 0px;
  }
  html, body {
    overflow-x: hidden;
  }
  .texto-separado-1{
    margin-right: 30px;
    width: 30%;
    font-size: 12px;
  }
  .texto-separado-2{
    margin-right: 30px;
    width: 20%;
    font-size: 12px;
  }
  .texto-separado-3{
    margin-right: 30px;
    width: 20%;
    font-size: 12px;
  }
  .texto-separado-4{
    margin-right: 30px;
    width: 20%;
    font-size: 12px;
  }
  .texto-separado-5{
    font-size: 15px;
    width: 20%;
    margin-right: 12px;
    transform: translateX(5px);
  }

  .titulo-flex {
    display: flex;
    flex-direction: row;
    align-items: flex-end; /* o center si prefieres */
    justify-content: center;
    flex-wrap: nowrap; /* evita que bajen de línea */
    margin-top: -0.8%;
    margin-left: 0px;
  }

  .texto-separado-5{
    transform: translateX(-15px);
  }
  .descripcion-formulario {
    width: 90%;
    font-size: 12px;
    margin-left: 5%;
    height: auto;
  }
  .subtitulo-landing{
    font-size: 14px;
  }
 
  .titulo-descripcion{
    font-size:12px !important;
    width: 90%;
  }
  .descripcion{
    width: 90%;
  }

  .img-titulo-landing {
    width: 45%;
    margin-right: -5%;
    height: auto;
  }

  .overlay-img {
    position: absolute;
    margin-top:-41%;
    right: -20%;
    width: 80%;
    z-index: 10;
  }
  
  .creativos-img{
    margin-top: 4%;
    width: 100%;
    margin-left: 0%;
  }

  .titulo-descripcion {
    font-size: 20px;
  }

  .descripcion {
    font-size: 12px;
  }

  .checker-group {
    text-align: center;
    margin-left: 0%;
  }

  .titulo-primer-selector {
    font-size: 16px;
  }

  .opciones-tiempo {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }


  .numero-select{
    font-size: 58px !important;
    top: 50px !important;
    bottom: 30px !important;
    display: inline-block;
  }

  .opcion-boton {
    width: 180px;
    height: 90px;
    font-size: 60px;
  }

  .opcion-boton span {
    font-size: 18px;
    top: -65px;
  }

  .checker-group2{
    margin-left:0%;
  }




  hr {
    border: none;
    border-top: 1px solid #ffffff;
    margin: 10px 0;
    width: 100%;
  }
  .fila-principal {
    font-size: 12px;
    gap: 40px;
  }

  .fila-secundaria {
    font-size: 12px;
  }

  #texto-otro {
    width: 50%;
  }

  .textareas-container {
    flex-direction: column;
    align-items: center;
    margin-left: 0%;
    gap: 30px;
  }

  #ingredientes-no-quiero{
    margin-left: 0%;
  }
  .textareas-container > div {
    width: 90%;
  }

  .textareas-container textarea {
    height: 280px;
    font-size: 14px;
    padding: 25px 15px 80px 30px;
    caret-color: #F2F625;
  }

  .textareas-container textarea::placeholder {
    transition: opacity 0.3s;
  }

  /* Placeholder desaparece al hacer click/foco */
  .textareas-container textarea:focus::placeholder {
      opacity: 0;
  }

  .textareas-container textarea::placeholder {
    font-size: 12px;
    width: 370px;
    top: 90px;
  }

  .logo-textarea, .logo-textarea-derecha {
    width: 40px;
    bottom: 30px;
    left: 30px;
  }

  .submit-container{
    margin-left: 0%;
  }
  .submit-container button{
    font-size: 20px !important;
  }
  .mini-text {
    margin-left:0%;
    width: 100%;
  }

  .disclaimer{
    font-size:8px;
  }

  .footer-row {
    flex-direction: column;
    margin-left: 0%;
    gap: 15px;
    text-align: center;
  }

  .footer-row.bottom-row .right-note {
    text-align: center;
  }


  .columna-izquierda {
    flex: 1 1 20%;
    margin-left: auto;       /* Empuja hacia la derecha */
    margin-right: 0; 
  }
    
  .columna-derecha {
    flex: 1 1 20%;
    margin-left: auto;       /* Empuja hacia la derecha */
    margin-right: 0; 
    text-align: end;
  }


  .titulo-comida {
    font-weight: 500 !important;
    font-size: 30.6px;
    padding: 10px 20px;
    display: inline-block;
    letter-spacing: -0.02em;
    margin-left: -10px;
    margin-top:-32px
  }

  .titulo-receta{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 500;
    letter-spacing: 0.4em;
    font-size: 31.5px;
  }

  .emoji-img {
    width: 30px;       /* Ajusta según el tamaño que quieras */
    height: auto;
    vertical-align: top;
    margin-top: 5px;
  }

  .tiempo{
    margin-left: 10px;
    margin-top: -35px;
  }

  .tiempo strong{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -0.02em;
  }

  .tiempo span{
    position: relative;
    top: -5px; 
    left:-2px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    letter-spacing: -0.02em;
    margin-right: 2px;
  }

  .instrucciones {
    font-family: 'RocGrotesk', sans-serif;
    margin-top: 50px;
    margin-left: 10px;
  }

  .instrucciones h3{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400 !important;
    font-size: 20.5px;
    letter-spacing: -0.02em;
  }


  .instrucciones ol{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 12px;
    letter-spacing: -0.02em;
    margin-top: 30px;
  }

  .instrucciones p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 12px;
    letter-spacing: -0.02em;
    margin-top: 50px;
  }

  .info-receta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
  }


  .ingredientes{
    margin-top: 65px;
    margin-right: 80px;
  }

  .ingredientes h3{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 20.5px;
    margin-top: -8px;
    letter-spacing: -0.02em;

  }

  .ingredientes ul {
    padding-left: 20px;
    font-size: 12px;
  }

  .dificultad{
    margin-top: -35px;
    margin-right: 85px;
  }

  .dificultad strong{
    font-size: 15.5px;
    letter-spacing: -0.02em;
  }

  .dificultad p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 15.5px;
    margin-top: -8px;
    letter-spacing: -0.02em;
  }



  .contenedor-receta {
    height: auto;
  }
}


/* === MÓVIL: diseño más comprimido y claro === */
@media (max-width: 430px) {
  .titulo-landing {
    margin-left: 5%;
    text-align: center;
    margin-top: 20%;
  }

  .by-iboo{
    display: flex;
    flex-direction: row;
    font-size: 7px;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.12em;
    margin-left:0%;
    margin-top:3.5%;
  }

  .titulo-flex {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    flex-wrap: nowrap;
    width: 70%;
    margin-left:52px;
    margin-top: 2%;
    letter-spacing: 0.12em;
    line-height: 0.9em;
  }

  .texto-separado-1{
    margin-right: 12px;
    font-size: 6.5px;
    letter-spacing: 0.12em;
    transform: translateX(-15px);
  }
  .texto-separado-2{
    margin-right: 10px;
    font-size: 6.5px;
    letter-spacing: 0.12em;
    transform: translateX(-25px);
  }
  .texto-separado-3{
    margin-right: 8px;
    font-size: 6.5px;
    letter-spacing: 0.12em;
    transform: translateX(-20px);
  }
  .texto-separado-4{
    margin-right: 8px;
    font-size: 6.5px;
    letter-spacing: 0.12em;
    transform: translateX(-15px);
  }
  .texto-separado-5{
    margin-right: 8px;
    font-size: 6.5px;
    letter-spacing: 0.12em;
  }

  .img-titulo-landing {
    display: none;
  }

  .img-titulo-landing-mobile {
    display: block;
    width: 95%;
    margin-right: 40%;
    height: auto;
    letter-spacing: -0.02em;
  }
  .overlay-container {
    position: relative;
    margin-top: -45%;
    z-index: 0;
  }

  .overlay-img{
    display: none;
  }
	
  .descripcion {
	width: 94%;
  }

  .overlay-img-mobile {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height:auto; /* o el valor que necesites */
    max-width: 100%;
    object-fit: fill; /* estira la imagen para ajustarse al contenedor */
    z-index: 10;
  }
  .titulo-blur{
    width: 99%;
    margin-top: 75%;
    margin-left: 0%;
  }
  
  .creativos-img {
    display: block;         /* Elimina espacio fantasma debajo de imágenes inline */
    width: 98%;            /* Ocupa el 100% del ancho del contenedor */
    height: 200px;           /* Mantiene la proporción de aspecto */
    margin-top: 4%;
  }

  .br-mobile{
    display: block;
  }
  .br-desktop{
    display: none;
  }

  .checkbox-cuadrado{
    font-size: 8.78px;
  }

  .checkbox-cuadrado input[type="checkbox"] {
    appearance: none;
    width: 9.67px;
    height: 9.67px;
    border: 1.25px solid #F2F625;
    border-radius: 2px;
    margin-right: 8px;
    margin-top: -3%;
    position: relative;
    background-color: transparent;
    cursor: pointer;
  }
  
  .checkbox-cuadrado input[type="checkbox"]:checked::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1.75px;
    transform: scale(1.03);
    background-color: #F2F625;
    position: absolute;
    top: 0;
    left: 0px;
  }


  .subtitulo-landing{
    font-size: 15.3px;
    margin-top: 8%;
    max-width: 320px;
    margin-left: 5.5%;
    text-align: left;
}

  .descripcion-formulario {
    width: 95%;
    font-size: 10px;
    margin-left:5%;
    margin-top: 12%;
  }

  .titulo-descripcion {
    font-size: 18.4px !important;
    text-align: left;
  }

  .descripcion {
    font-size: 11.1px !important;
    text-align: left;
    line-height: 1.48em;
    margin-top: 2.5%;
    letter-spacing: -0.02em;
  }

  .checker-group {
    text-align: center;
    margin-left: 0%;
  }

  .checker-group2 {
    text-align: center;
    margin-left: 0%;
    margin-top: 0%;
  }

  .numero-select{
    font-size: 32px !important;
    top: 22px !important;
    letter-spacing: -0.04em;
    display: inline-block;
  }

  .titulo-primer-selector {
    font-size: 16px;
    margin-top: 15%;
    margin-right: 1.5%;
    text-align: center;
  }
  .opciones-tiempo{
    gap:5px;
    margin-left: 4%;
    margin-top: 5%;
  }

  .opcion-boton {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    font-size: 26px;
    letter-spacing: -0.04em;
  }

  .opcion-boton span {
    font-size: 8px;
    letter-spacing: -0.04em;
    top: -32px;
  }
  .fila-principal {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 0px 0px; /* filas / columnas más pegadas */
    font-size: 6px;
    text-align: center;
    /*margin: 0 auto;  centra todo */
    margin-top: -5%;
    margin-left: 15%;
  }

  #checkbox-frutos-secos {
    margin-left: -25%;
    margin-top: 6%;
  }

  #checkbox-fructosa {
    margin-left: 10%;
    margin-top: 6%;
  }

  .fila-secundaria {
    flex-direction: row;
    font-size: 6px;
    gap: 12px;
    margin-left: 0;
    margin-top: -8%;
  }
  .fila-secundaria input[type="text"] {
    width: 133px !important;
    height: 20px !important;
    margin-top:20px;
    caret-color: #F2F625;
  }


  #texto-otro {
    width: 90%;
    font-size: 14px;
  }

  .textareas-container {
    flex-direction: column;
    gap: 20px;
    margin-left: 0%;
    margin-top: 15%;
  }

  .textareas-container > div {
    width: 90%;
  }

  .textareas-container textarea::placeholder {
    font-size: 9.76px;
    width: 290px;
    top: 90px;
  }

  .textareas-container textarea {
    font-size: 8px;
    height: 220px;
    padding: 20px 10px 60px 25px;
    caret-color: #F2F625;
  }

  .textareas-container textarea::placeholder {
    transition: opacity 0.3s;
  }

  /* Placeholder desaparece al hacer click/foco */
  .textareas-container textarea:focus::placeholder {
      opacity: 0;
  }
  .logo-textarea,
  .logo-textarea-derecha {
    width: 30px;
    bottom: 30px;
    left: 22px;
  }

  #ingredientes-quiero{
    margin-left: 0%;
    height: 200px;
  }

  #ingredientes-no-quiero{
    margin-left: 0%;
    height: 200px;
    margin-top: -3%;
  }

  .mini-text{
    margin-top: 10%;
    margin-left: 0%;
  }
  .disclaimer {
    font-size: 4.53px;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.29em;
    width: 90%;
    text-align: center;
    margin: 0 auto; /* ✅ centra horizontalmente */
  }

  .submit-container {
    margin-left: 0%;;
  }
  .submit-container button {
    margin-top: 2%;
    font-size: 14px!important;
    width: 212.55px;
    height: 31.8px;
    padding: 0px;
  }

  footer{
    width: 100%;
    padding: 10px 5%;
    box-sizing: border-box;
  }

  .footer-row.top-row {
    display: flex;
    flex-direction: row; /* fila horizontal */
    justify-content: space-between; /* separación izquierda/derecha */
    align-items: flex-start;
    gap: 0px;
    flex-wrap: wrap;
  }

  .footer-row.bottom-row {
    flex-direction: column;
    text-align: center;
    margin-left: 0%;
    gap: 10px;
  }

  .contact-info {
    display: flex;
    flex-direction: column; /* correo y móvil uno debajo del otro */
    text-align: start;
    gap: 5px;
    font-size: 6px!important;
    margin-left: 0% !important;;
  }

  .social-media {
    display: flex;
    flex-direction: column; /* redes sociales en columna */
    text-align: right;
    align-items: end;
    gap: 5px;
    font-size: 9.8px;
    font-weight: 400;
    margin-top: -4%!important;
  }

  .social-media div {
    display: flex;
    justify-content: flex-start; /* nombre y flecha alineados a la izquierda */
    gap: 5px;
  }
  .social-media img {
    width: 6.2px;
    height: 6.2px;
    margin-top: 5%;
  }

  .email{
    font-weight: 300;
    font-size: 12px!important;
  }
  .mobile{
    font-weight: 300;
    font-size: 12px!important;
    color: #ffffff!important; 
  }

  hr {
    width: 100%;
    border: none;
    border-top: 1px solid #ffffff; /* línea continua */
    margin: 10px 0;
  }

  .footer-row.bottom-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
  }

  .left-note,
  .right-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
  }


  .right-note{
    text-align: end!important;
    font-size: 8px;
    font-weight: 400;
  }

  .left-note {
    text-align: start!important;
    font-size: 8px; 
    font-weight: 400;
  }

  .right-note a {
    text-decoration: none;
    color: inherit;
  }



  .contenedor-receta {
    width: 90%;
    margin-top: -2%;
    border-radius: 15px;
    height: auto;
  }

  .titulo-receta{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 500;
    letter-spacing: 0.4em;
    font-size: 15px;
    width: 300px;
    margin-top: 4%;
    margin-left: 8%;
  }

  .tiempo{
    font-size: 9px!important;
    margin-left: -18px;
    margin-top: -28px;

    order: 1;
  }

  .tiempo strong{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: -0.02em;
  }

  .tiempo span{
    position: relative;
    top: -2px; 
    left:0px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400;
    font-size: 9px;
    letter-spacing: -0.02em;
    margin-right: 2px;
  }

  .instrucciones {
    font-family: 'RocGrotesk', sans-serif;
    margin-top: 15px;
    margin-left: -10px;
    order: 4;

  }

  .instrucciones h3{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400 !important;
    font-size: 26px;
    width: 300px;
    letter-spacing: -0.02em;
  }


  .instrucciones ol{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    width:300px;
    font-size: 12px;
    letter-spacing: -0.02em;
    margin-top: 20px;
  }

  .instrucciones p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 12px;
    width:300px;
    letter-spacing: -0.02em;
    margin-top: 20px;
  }

  .info-receta {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .columna-izquierda,
  .columna-derecha {
    flex: 1 1 100%;
  }

 
  .columna-derecha {
    margin-bottom: 20px;
    text-align: start;
    display: contents;
  }
  .columna-izquierda {
    display: flex;
    flex-direction: column;
    display: contents;

  }
  .titulo-comida {
    font-weight: 500 !important;
    text-transform: uppercase;
    width: auto;
    font-size: 20.5px;
    padding: 10px 20px;
    display: inline-block;
    letter-spacing: -0.02em;
    margin-left: -40px;
    width:350px;
    margin-top:-0px
  }

  .emoji-img {
    width: 22px;       /* Ajusta según el tamaño que quieras */
    height: auto;
    vertical-align: top;
    margin-top: 0px;
  }
  
  .dificultad{
    margin-top: 50px;
    margin-left: 30%;
    display: none;
  }

  .dificultad-mobile {
    margin-top: -19%;
    margin-left: 80%;
    display: block;

    order: 2;
    text-align: right; 
    
  }

  .dificultad-mobile strong{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 9px !important;
    letter-spacing: -0.02em;
  }

  .dificultad-mobile p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 9px!important;
    margin-top: -6px;
    margin-right: 0px;
    letter-spacing: -0.02em;
  }

  .instrucciones ol {
    padding-left: 20px;
  }

  .ingredientes{
    order:3;
    margin-top: 10%;
    margin-left: 10%;
  }

  .ingredientes h3{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 26px;
    width: 300px;
    margin-top: -8px;
    letter-spacing: -0.02em;
  }

  .ingredientes ul {
    list-style: none;
    text-align: right;
    padding-left: 20px;
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 12px;
    margin-top: 27px;
    letter-spacing: -0.02em;
    width: 130% !important;
    margin-left: -12%;
  }

  .ingredientes li {
    display: flex;
    justify-content: flex-end; /* alineamos texto y punto a la derecha */
    gap: 0px; /* separación entre texto y bullet */
  }

  .ingredientes li::after {
    content: "•"; /* El punto */
    color: #001F3F;
    font-weight: bold;
    margin-left: 20px;
    font-size: 30px;
    line-height: 0.6;
    vertical-align: middle;

  }


  .tiempo,
  .dificultad,
  .instrucciones,
  .ingredientes {
    width: 70%;
  }


  .ingredientes {
    margin-left: 20%;
  }


  #overlay img {
    margin-left: 0%;
  }
  
  #overlay p {
    font-family: 'RocGrotesk', sans-serif;
    color: #F2F625;          /* amarillo */
    font-size: 12.22px;          /* más pequeño */
    font-weight: 300;
    text-align: center;       /* centrado horizontal */
    margin-top: 30%;         /* separación del GIF */
    margin-bottom: 0;         /* opcional, para no añadir espacio extra abajo */
    letter-spacing: 0.12em;
    line-height: 1.06em;
  }
}




@media ((min-width: 1440px)) {

  .info-receta{
    flex-wrap: nowrap;
  }

  .dificultad {
    margin-top: -15px;
  }

  .creativos-img {
    width: 106.5%;
  }

  
}

@media ((min-width: 425px) and (max-width: 620px)) {

  .titulo-flex {
    margin-left: 30px;
  }
  
  .descripcion {
    font-size: 9px;
  }

  .disclaimer {
    font-size: 6px;
  }

  .overlay-img {
    position: absolute;
    margin-top: -42%;
    margin-right: 0%;
    width: 78%;
    z-index: 10;
  }

  .columna-derecha{
    margin-right: 20%;
  }


  .texto-separado-5 {
    transform: translateX(-20px);
    font-size: 8px;
  }
  .texto-separado-1 {
    transform: translateX(-5px);
    font-size: 8px;
  }
  .texto-separado-2 {
    transform: translateX(-5px);
    font-size: 8px;
  }
  .texto-separado-3 {
    transform: translateX(-15px);
    font-size: 8px;
  }
  .texto-separado-4 {
    transform: translateX(-25px);
    font-size: 8px;
  }

  .creativos-img {
    margin-top: 4%;
    width: 100%;
    /* margin-left: -1.5%; */
  }


}

@media ((min-width: 1025px) and (max-width: 1140px)) {

  .info-receta{
    flex-wrap: nowrap;
  }

  .dificultad {
    margin-top: -15px;
  }
}



@media (max-width: 425px) {

  .creativos-img {
    width: 100%;
  }

  .by-iboo{
    width: 100%;
    margin-left: 0;
  }
}

@media ((min-width: 390px) and (max-width: 415px)) {


  .dificultad-mobile{
    margin-top: -21.5%!important;
  }
}

@media ((min-width: 390px) and (max-width: 411px)) {

  .ingredientes {
    margin-left: 10%;
  }

  .ingredientes ul{
    margin-left: 5%;
  }
}

@media (max-width: 376px) {
  .by-iboo{
    margin-left: 0%;
  }
  .subtitulo-landing {
    font-size: 14.9px;
  }
  .creativos-img {
    width: 101%;
    margin-left:0px;
  }
  .dificultad-mobile{
    margin-top: -23%!important;
  }
  .texto-separado-5 {
    transform: translateX(-10px);
  }
  .texto-separado-1 {
    transform: translateX(-10px);
  }
  .texto-separado-2 {
    transform: translateX(-5px);
  }
  
  .ingredientes ul{
    width: 152% !important;
  }
  .ingredientes {
    margin-left: 10%;
  }
}



@media (max-width: 321px) {

  .titulo-comida{
    width: 300px;
  }

  .creativos-img {
    width: 100%;
    margin-left:0px;

  }
  .submit-container button {
    padding: 5px 0px 0px 0px;
  }

  .overlay-img-mobile{
    left: 30px;
  }
  .subtitulo-landing {
    font-size: 12.5px;
  }
  .descripcion {
    font-size:9px;
  }
  .dificultad-mobile {
    margin-top: -26%;
  }
  .ingredientes h3{
    font-size:22px;
  }
  .instrucciones h3{
    font-size:22px;
  }
  .instrucciones p{
    width:240px;
  }
  .instrucciones ol{
    width:240px;
  }
  .titulo-receta{
    margin-left:-5%;
  }
  .texto-separado-5 {
    transform: translateX(-35px);
  }
  .texto-separado-1 {
    transform: translateX(-5px);
  }
  .texto-separado-2 {
    transform: translateX(-5px);
  }
  .texto-separado-3 {
    transform: translateX(-15px);
  }
  .texto-separado-4 {
    transform: translateX(-25px);
  }
}



@media ((min-width: 768px) and (max-width: 820px)) {

  .creativos-img {
    width: 101%!important;
  }

  .contenedor-receta {
    width: 90%;
    margin-top: -2%;
    border-radius: 15px;
    height: auto;
  }

  .titulo-receta{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 500;
    letter-spacing: 0.4em;
    font-size: 15px;
    width: 300px;
    margin-top: 4%;
    margin-left: -4%;
  }

  .tiempo{
    order: 1;
    margin-left: 0;
    margin-top: 0;
    color: #053370;
  }

  .tiempo strong{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 15.5px;
    }

  .tiempo span{
    position: relative;
    top: -2px; 
    left:-2px;
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    letter-spacing: -0.02em;
    margin-right: 2px;
  }

  .instrucciones {
    font-family: 'RocGrotesk', sans-serif;
    margin-top: 15px;
    margin-left: -10px;
    width: 100%;
    order: 2;
  }

  .instrucciones h3{
    font-family: 'RocGrotesk', sans-serif;
    font-weight: 400 !important;
    font-size: 20px;
    width: 300px;
    letter-spacing: -0.02em;
  }


  .instrucciones ol{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    width:300px;
    font-size: 12px;
    letter-spacing: -0.02em;
    margin-top: 20px;
  }

  .instrucciones p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 12px;
    width:300px;
    letter-spacing: -0.02em;
    margin-top: 10px;
  }

  .info-receta {
    display: flex;
    flex-direction: row;      /* fila */
    justify-content: space-between;
    flex-wrap: nowrap;        /* no apilar */
    gap: 20px;
    width: 100%;
  }
  
  .columna-izquierda,
  .columna-derecha {
    flex: 1 1 100%;
  }

 
  .columna-derecha {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 48%;
  }
  .columna-izquierda {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 48%;

  }
  .titulo-comida {
    font-weight: 500 !important;
    text-transform: uppercase;
    width: auto;
    font-size: 20.5px;
    padding: 10px 20px;
    display: inline-block;
    letter-spacing: -0.02em;
    margin-left: -20px;
    width:600px;
    margin-top:-30px
  }

  .emoji-img {
    width: 22px;       /* Ajusta según el tamaño que quieras */
    height: auto;
    vertical-align: top;
    margin-top: 0px;
  }
  
  .dificultad{
    order: 1;
    align-self: flex-end; /* Empuja la dificultad al final de la columna */
    margin-top: 0;
    margin-left: 0;
    margin-right: 0%;
    text-align: right;
    }

  .dificultad-mobile {
    display: none;

  }

  .dificultad-mobile strong{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 9px !important;
    letter-spacing: -0.02em;
  }

  .dificultad-mobile p{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-size: 9px!important;
    margin-top: -6px;
    margin-right: 0px;
    letter-spacing: -0.02em;
  }

  .instrucciones ol {
    padding-left: 20px;
  }

  .ingredientes{
    order: 2;
    width: 100%;
    align-self: flex-start; /* ingredientes alineados al inicio */
    text-align: start;
  
  }

  .ingredientes h3{
    font-family: 'RocGrotesk', sans-serif;
    text-transform: uppercase;
    font-weight: 400 !important;
    font-size: 20px;
    width: 300px;
    margin-top: -42px;
    letter-spacing: -0.02em;
    margin-left: 0%;
  }

  .ingredientes ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding-left: 20px;
    margin-top:22px;
  }

  .ingredientes li {
    display: flex;
    justify-content: space-between; /* texto izquierda, bullet derecha */
    align-items: center;
  }

  .ingredientes li::after {
    content: "•"; /* El punto */
    color: #001F3F;
    font-weight: bold;
    margin-left: 20px;
    font-size: 30px;
    line-height: 0.6;
    vertical-align: middle;
  }

  .instrucciones{
    align-self: start;   /* centra horizontalmente dentro del contenedor flex */
    width: 80%;           /* ancho consistente */
    text-align: start; 
  }
  .ingredientes {
    align-self: center;   /* centra horizontalmente dentro del contenedor flex */
    width: 80%;           /* ancho consistente */
    text-align: end;   /* centra el contenido interno */
    margin-right: -30%;
  }

  .instrucciones ol,
  .instrucciones p{
    text-align: start;
  }

  .instrucciones h3,
  .ingredientes h3{
    text-align: center;
    width: 100%;
  }

  .ingredientes ul {
    margin-left: 0;
    width: 100% !important;
    text-align: end;
    align-items: end;
    margin-left: -5%;
  }
  


}


@media ((min-width: 412px) and (max-width: 420px)) {
  .ingredientes ul{
    margin-left: -10%;
  }

  .texto-separado-5{
    transform: translateX(0px);
  }
}

#overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: #fff;
  background-image: url('../assets/imgs/bg.webp'); 
  background-size: cover;       
  background-repeat: no-repeat; 
  background-position: center;  
  display: grid;
  place-items: center; /* centra contenido horizontal y vertical */
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#overlay.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

#overlay img {
  width: 250px;
  height: 260px;
  margin-bottom: -10%;
  margin-left: 30%;
  display: block;
}

#overlay p {
  font-family: 'RocGrotesk', sans-serif;
  color: #F2F625;          /* amarillo */
  font-size: 12.22px;          /* más pequeño */
  font-weight: 300;
  text-align: center;       /* centrado horizontal */
  margin-top: 30%; 
  margin-bottom: -30%;
  letter-spacing: 0.12em;
  line-height: 1.06em;
}


@media (max-width: 430px) {
  #overlay img {
    margin-left: 5%;
    margin-top: -50%;
  }
  
  #overlay p {   
    font-size: 8px;
    margin-top: 30%; 
  }
}