:root{
  /* COLORES — PALETA DEL DISEÑO (GUIA-PALETA-Y-ESTILO-PLANAPPETIT v2).
     Todo color de marca sale de estas variables: usar var(--c-...), no hex sueltos. */
  --c-primario:#5CAC1F; --c-primario-rgb:92,172,31;
  --c-oscuro:#5CAC1F;   --c-oscuro-rgb:92,172,31;
  --c-medio:#5CAC1F;    --c-medio-rgb:92,172,31;
  --c-suave:#878787;
  --c-texto:#2E332D;
  --c-texto2:#2E332D;
  --c-borde:#CCCCCC;
  --c-fondo:#EAEDDD;    --c-fondo-rgb:234,237,221;
  --c-tinte:#E8F3E0;
  --c-tinte2:#D8EBC9;
  --c-pie:#9FC415;
  --c-sombrahd:#9FC415; --c-sombrahd-rgb:159,196,21;
  --c-acento:#FDB60E;   --c-acento-rgb:253,182,14;
  --win-alpha:.768;  --win-1-rgb:255,255,255; --win-2-rgb:255,255,255; --win-3-rgb:255,255,255;

  /* Opción A — paleta de marca planappetit (manual de marca), aplicada solo a la tarjeta de Tips & Trick */
  --deep:#1A5F7A; --dark:#2D7596; --base:#4888AA; --medium:#5E9AB8; --soft:#7CA7B7;
  --light:#A3C4D0; --pale:#D6E9EF; --ghost:#EEF7FA;
  --ink:#1A2428; --dark-n:#2D3E45; --slate:#4A6270; --muted:#7A9BA8;

  /* Colores universales por categoría (franja lateral de las tarjetas de Tips & Trick) */
  --catComida:#F77F00;
  --catCocina:#D62828;
  --catAhorraTiempo:#FFC300;
  --catNoDesperdicios:#6F4E37;
  --catRopa:#6A4C93;
  --catHogar:#1D3557;
  --catMascotas:#2A9D8F;
  --catJardin:#4C9A2A;
  --catOtros:#8D99AE;
}
html {
  overflow-x: hidden;
}
body {
    margin: 0;
      background-size:cover;
      background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    overflow-x: hidden;
  }
   @font-face{
      font-family:'OurFont';
      src:url('../filesCss/fonts/Playlist Script.woff');
  }@font-face{
      font-family:'FontIngreList';
      src:url('../filesCss/fonts/OpenSans-LightItalic.ttf');
  }@font-face{
      font-family:'FontApart';
      src:url('../filesCss/fonts/OpenSans-BoldItalic.ttf');
  }@font-face{
      font-family:'poppinsRegular';
      src:url('../filesCss/fonts/Poppins-Regular.ttf');
  }@font-face{
      font-family:'poppinsExtraBold';
      src:url("../filesCss/fonts/Poppins-ExtraBold.ttf")
  }@font-face{
      font-family:'poppinsExtraBoldItalic';
      src:url('../filesCss/fonts/Poppins-ExtraBoldItalic.ttf');
  }@font-face{
      font-family:'poppinsSemiBold';
      src:url('../filesCss/fonts/Poppins-SemiBold.ttf');
  }@font-face{
      font-family:'poppinsLight';
      src:url('../filesCss/fonts/Poppins-Light.ttf');
  }


 /* Barra de navegación inferior */
        .bottom-nav {
            position: absolute;
            top: -60px;
            left: 50%; /* Lo mueve al 50% del ancho de la pantalla */
            transform: translateX(-50%); /* Lo centra correctamente */
            width: 490px;
            height: 51px;
            background: rgba(255, 255, 255, 0.148);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid var(--c-primario);
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 0px;
            z-index: 1000;
            border-radius: 25px;
            font-family:'poppinsLight';
            box-shadow: 2px 2px 7px #888888;
            animation: navBardynamicIsland 2400ms;
            opacity: 0;
        }
        #navLftLg{
            opacity: 1;
          }
        .oculto {
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }
        .visible {
          opacity: 1;
          visibility: visible;
          transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        }
        .plnAppttNvBrB{
          width: 151px;
          height: 40px;
        }
        @keyframes navBardynamicIsland{
          0%{
            opacity: 0.5;
            font-size: 4px;
            width: 300px;
          }
          50%{

            opacity: 0.7;
            font-size: 34px;
            width: 510px;
          }
          100%{
            opacity: 1;
            font-size: 27px;
            width: 490px;
          }

        }

          .nvgBar{
          position: sticky;
          top: 50px;
          z-index: 2;
          text-align: center;
          width: 100%;
        }
        .nav-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--c-primario);
            text-decoration: none;
            margin: 0px 0px;
            width: 51px;
            height: auto;
            transition: all 0.5s ease;
            position: relative;
            margin-bottom: 2px;
        }
        .icnNvBr{
           padding-top: 5px;
          display: flex;
          flex-direction: column;
        }
        .txtBtns{
          opacity: 0;
          font-family:'poppinsLight';
          position: absolute;
          top: 61px;
          color: var(--c-texto);
          font-size: 17px;
          transition: all 0.3s ease;
        }
        .txtBtnsNvBr{
          padding-top: 5px;
          font-family:'poppinsLight';
          color: var(--c-texto);
          font-size: 17px;
        }

        .nav-btn:hover .txtBtns{
          opacity: 1;
          animation: bounceIn 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);

        }
        /* Animación de icono al aparecer */
        @keyframes bounceIn {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); }
        }
        .nav-btn:hover .txtBtnsNvBr{
          opacity: 0;
        }
        .nav-btn:hover i {
            margin-top: 15px;
        }
        .nav-btn i {
            font-size: 30px;
            margin-bottom: 3px;
        }
        .nav-btn span {
            font-size: 14px;
            font-weight: 500;
        }
        .nav-btn.active {
            background: var(--c-primario);
            color: white;
            border-radius: 25px;
            border-top: 2px solid var(--c-primario);
            border-bottom: 2px solid var(--c-primario);
            border-left: 2px solid var(--c-primario);
            border-right: 2px solid var(--c-primario);
        }
        .nav-btn:hover {
          height: 51px;
          width: 51px;
            background: var(--c-primario);
            color: white;
            border-radius: 25px;
            border-top: 2px solid var(--c-primario);
            border-bottom: 2px solid var(--c-primario);
            border-left: 2px solid var(--c-primario);
            border-right: 2px solid var(--c-primario);
             box-shadow: 2px 7px 10px #888888;
        }
        /* Estilos del menú desplegable */

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #eaeaeab2;
            backdrop-filter: blur(5px);
            border: 1px solid var(--c-primario);
            border-radius: 10px;
            padding: 10px;
            margin-top: 5px;
            min-width: 170px;
            box-shadow: 2px 2px 7px #888888;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 999;
            align-items: center;
        }
        .dropdown-menu:hover{
          cursor: pointer;
        }
        .txtIcnBr{
            color: var(--c-primario);
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 12px;
            transition: background-color 0.3s ease;
        }
        .icnMnu{
          font-size: 11px;
        }

        .dropdown-menu .txtIcnBr:hover {
            background-color: #2888AA;
            color: white;
            cursor: pointer;
        }
         /* Clase para mostrar el menú */
        .show-menu {
            opacity: 1;
            visibility: visible;
        }
         .icnTutorial{
        color: var(--c-suave);
        font-size: 31px;
        position: -webkit-sticky; /* Safari */
        position: absolute;
        top: 10px;
        right: 2.5%;
        border-radius: 50%;
        padding: 6px 14px 6px 14px;
        z-index: 2;
        backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, 0.148);
        animation: div-animation-Left-To-Right 1500ms ease-in;
        animation-fill-mode: forwards;
        border-top: 1px solid var(--c-borde);
        border-bottom: 1px solid var(--c-borde);
        border-left: 1px solid var(--c-borde);
        border-right: 1px solid var(--c-borde);
        display: none;
        }
        .icnTutorial:hover{
          cursor: pointer;
          color: white;
          background-color: var(--c-primario);
        }
      .txtTuto{
        font-family:'poppinsLight';
        font-size: 14px;
        position: -webkit-sticky; /* Safari */
        position: absolute;
        top:60px;
        right:2.5%;
        display: none;
      }

  .loader_bg{
    position: fixed;
    z-index: 999999;
    background: #fff;
    width: 100%;
    height: 100%;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}.backtitle{
    position: absolute;
    top: 70%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -100%);
    font-family:'poppinsRegular';
    font-size: 47px;
    color: var(--c-suave);
    width: 90%;
    animation-name: loadModal;
    animation-duration: 1s;
}.loader{
  border: 0 soild transparent;
  border-radius: 50%;
  width: 480px;
  height: 480px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}.loader:before, .loader:after{
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 100% 99%;
  background-repeat: no-repeat;
  background-image: url("../../folder/img/aprovecha_ingre.png");
  background-position: 0% 0%;
  animation: loader 1.5s linear infinite;
  opacity: 0;
}.loader:before{
  animation-delay: .5s;
}@keyframes loader{
    0%{
      transform: scale(0);
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      transform: scale(1);
      opacity: 0;
    }
}
.bckPgs{
   color: var(--c-suave);
  font-size: 34px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 11px;
  left:1%;
  border-radius: 50%;
  padding: 5px 12px 5px 12px;
  z-index: 2;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  animation: div-animation-Left-To-Right 1500ms ease-in;
  animation-fill-mode: forwards;
  border-top: 1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
  border-left: 1px solid var(--c-borde);
  border-right: 1px solid var(--c-borde);
}
.plnAppttNvBr{


  width: 100%;
  text-align: center;
  position: absolute;
          top: 12px;
          left:25%; /* Mueve el borde izquierdo del div al centro horizontal del padre */
            transform: translateX(-50%);
}
      .plnAppttNvBrImg{
          width: 230px;
          height: 64px;
      }
      .plnAppttNvBrImg:hover{
        cursor: pointer;
        transform: scale(1.1);
      }
.txtAmbgMx{
  font-family:'poppinsLight';
  font-size: 14px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 64px;
  left:1.3%;
}
.mnTxt3ingr{
  font-family:'poppinsRegular';
  font-size: 12px;
  color: var(--c-texto);
}
.bckPgs:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
}
.ambgMx{
  color: var(--c-suave);
  font-size: 21px;
  position: absolute;
  top: 10px;
  right: 2.5%;
  border-radius: 50%;
  padding: 6px 5px 6px 5px;
  z-index: 2;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  animation: div-animation-Left-To-Right 1500ms ease-in;
  animation-fill-mode: forwards;
  border-top: 1px solid var(--c-borde);
  border-bottom: 1px solid var(--c-borde);
  border-left: 1px solid var(--c-borde);
  border-right: 1px solid var(--c-borde);
}
.ambgMx:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
}

.mnDv {
  position: fixed;          /* Lo saca del flujo normal y lo fija al viewport */
  top: 0;
  left: 0;
  width: 100vw;            /* 100% del ancho del viewport */
  height: 100vh;           /* 100% del alto del viewport */
  margin: 0px;               /* Elimina cualquier margen externo */
  box-sizing: border-box;  /* Para que bordes y padding no desborden */

  /* Tus estilos decorativos se mantienen */
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background-color: rgba(255, 255, 255, 0.751);
  border: 2px solid var(--c-primario);
  box-shadow: 2px 4px 2px rgb(148, 52, 135);
  animation: div-animation-Btn-To-Top 2700ms ease-in forwards;

  /* Si quieres que el contenido interno tenga scroll cuando sea muy largo */
  overflow: auto;
  /* width:100vw incluye el ancho de la barra de scroll, lo que dejaba unos
     píxeles de desbordamiento horizontal navegable. Se bloquea aquí, en el
     contenedor raíz, en vez de en cada sección hija. */
  overflow-x: hidden;
}

@keyframes div-animation-Btn-To-Top{
  0%{
    transform: translateY(50%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.container {
            display: flex;
            flex-direction: column;
            flex: 1;
        }



        .section {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            height: 820px;
        }

        .ingredients-section {
            border-right: 1px solid var(--c-borde);
            height: auto;
            overflow-x: hidden;
        }


        h1 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--c-texto);
        }

        .search-container {
            margin-bottom: 10px;
            text-align: center;
        }

        .searchInputWrap {
            position: relative;
            display: inline-block;
            width: 71%;
        }

        #ingredientSearch {
            width: 100%;
            height:30px;
            padding-left: 51px;
            padding-right: 61px;
            border: 2px solid var(--c-primario);
            font-family:'poppinsLight';
            border-radius: 25px;
            font-size: 17px;
            background-image: url("/folder/img/srchImg.webp");
            background-size: 25px 25px;
            background-repeat: no-repeat;
            background-position: 4% 50%;
            outline: none;
            transition: border 0.3s;
            box-sizing: border-box;
        }

        #ingredientSearch:focus {
            border-color: var(--c-oscuro);
        }

        .btnClearSearch {
            display: block;
            position: absolute;
            top: 50%;
            right: 42px;
            transform: translateY(-50%);
            color: #9AA7AC;
            font-size: 16px;
            cursor: pointer;
        }

        .btnClearSearch:hover {
            color: var(--c-primario);
        }

        .btnClearSearch.show {
            display: block;
        }

        .btnMicVoz {
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            color: var(--c-primario);
            font-size: 16px;
            cursor: pointer;
        }

        .btnMicVoz:hover {
            color: var(--c-oscuro);
        }

        .btnMicVoz.listening {
            color: #d9534f;
        }

        .barraVozEscuchando {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin: 10px auto 0;
            width: 50%;
            min-width: 280px;
            background: var(--c-primario);
            border: 2px solid var(--c-medio);
            border-radius: 25px;
            padding: 8px 18px;
            box-sizing: border-box;
        }

        .barraVozEscuchando.show {
            display: flex;
        }

        .barraVozOnda {
            color: #ffffff;
            font-size: 16px;
            animation: barraVozPulse 1.2s ease-in-out infinite;
        }

        @keyframes barraVozPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .barraVozTexto {
            flex: 1;
            font-family:'poppinsLight';
            font-size: 15px;
            color: #ffffff;
            text-align: left;
        }

        .barraVozListo, .barraVozCancelar {
            font-family:'poppinsLight';
            font-size: 14px;
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.6);
            border-radius: 15px;
            padding: 4px 10px;
            cursor: pointer;
            white-space: nowrap;
        }

        .barraVozListo:hover, .barraVozCancelar:hover {
            background: rgba(255,255,255,0.15);
        }

        .alphabet-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 5px;
            justify-content: center;
        }

        .alphabet-letter {
            padding: 5px 2px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        .alphabet-letter:hover, .alphabet-letter.active {
            border-radius: 5px;
            background-color: var(--c-primario);
            color: white;
        }
        .ltrs{
              font-family:'poppinsLight';
              font-size: 20px;
        }
        .icnAth{
          margin-top: 3px;
          font-size: 21px;
        }
        .icnAthB{
          margin-top: 3px;
          font-size: 19px;
        }
        .sbtxtSrchIng{
           font-family:'poppinsLight';
            font-size: 14px;
            margin: 20px;
        }
        .divIngShw{
            text-align: center;
            width: 100%;
            padding: 10px;
        }
        .sbtxtdivIngShw{
             font-family:'poppinsSemiBold';
            font-size: 14px;
        }
        /* Interruptor Carrusel/Grid para los ingredientes. "Carrusel" es el
           estado por defecto (no requiere ninguna clase); al activar
           "Grid" se agrega .gridMode a #carSelAcom y #ingredientsGrid (ver
           JS). Nunca se le agrega/quita nada a .divIngShw ni a los demás
           bloques de la página, así que este cambio es puramente visual. */
        .ingViewToggle{
            display: inline-flex;
            gap: 6px;
            margin-left: 10px;
            vertical-align: middle;
        }
        .ingViewToggleBtn{
            font-family:'poppinsRegular';
            font-size: 12px;
            border: 1.5px solid var(--c-primario);
            background-color: #ffffff;
            color: var(--c-primario);
            padding: 4px 12px;
            border-radius: 14px;
            cursor: pointer;
        }
        .ingViewToggleBtn.active{
            background-color: var(--c-primario);
            color: #ffffff;
        }
        .divComp{
            width: 100%;
            height: 170px;
        }
        /* En modo grid, .carSelAcom crece de alto pero con un tope fijo y
           scroll propio (ver .setIngr.gridMode), así .divComp también debe
           dejar de forzar su altura fija de 170px — de lo contrario el
           grid se saldría de esta caja y superpondría .selected-ingredients
           / .selector-container en vez de simplemente convivir con ellos. */
        .divComp.gridMode{
            height: auto;
        }
        /*Carrusel ingredients*/
        .carSelAcom {
            position: relative;
            width: 93%; /* Width of carousel */
            height: 157px; /* Height of carousel */
            margin-left: 1%;
            margin-right: 3%;
        }
        /* Modo grid: el alto ya no es fijo de una sola fila — crece con el
           contenido pero con un tope (300px) y scroll vertical propio, para
           que nunca empuje ni tape .selected-ingredients / .selector-container
           sin importar cuántos ingredientes haya. */
        .carSelAcom.gridMode {
            height: auto;
        }
        /* Flechas de navegación del carrusel de ingredientes: círculo con
           borde delgado (outline), ocultas por defecto. Solo se muestran
           cuando el mouse está cerca/sobre el carrusel (.hovering en
           .carSelAcom) Y esa flecha no está en su límite (.at-boundary). */
        .ingCarouselArrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            border: 1.5px solid var(--c-primario);
            color: var(--c-primario);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            padding: 0;
            cursor: pointer;
            z-index: 6;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
        }
        .ingCarouselArrow:hover {
            background-color: var(--c-primario);
            color: white;
        }
        .ingCarouselArrowLeft {
            left: 2px;
        }
        .ingCarouselArrowRight {
            right: 2px;
        }
        .carSelAcom.hovering .ingCarouselArrow:not(.at-boundary) {
            opacity: 1;
            pointer-events: all;
        }
        /* En modo grid no hay "anterior/siguiente" que navegar (el scroll
           es vertical y todo el contenido cabe visualmente en columnas),
           así que las flechas del carrusel se ocultan por completo. */
        .carSelAcom.gridMode .ingCarouselArrow {
            display: none;
        }
        .setIngr{
           display: flex;
            width: 100%;
            margin: auto;
            padding-top: 2%;
            position: relative;
            overflow: hidden;
            overflow-x: auto; /* Set overflow in horizontal scroll */
            overflow-y: hidden; /* Hidden overflow in vertical scroll */
            scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
            gap: 8px; /* Set gap between cards */
            flex: 0 0 calc(100% - 16px); /* Set width of card container */
            }
        /* Modo grid: mismo ancho de tarjeta que en el carrusel (110px, sin
           estirarla), solo cambia de una fila horizontal a varias columnas
           que envuelven ("auto-fill" calcula solas cuántas entran según el
           ancho disponible, sin necesitar @media por dispositivo). El
           propio grid lleva max-height + overflow-y:auto (no basta con
           ponerlo en .carSelAcom, que no recorta nada sin su propio
           "overflow"), así .selected-ingredients y .selector-container
           nunca quedan tapados ni fuera de pantalla. */
        .setIngr.gridMode{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 110px));
            justify-content: center;
            gap: 20px;
            max-height: 300px;
            overflow-x: hidden;
            overflow-y: auto;
            scroll-snap-type: none;
            flex: none;
            padding: 2% 4%;
        }
        /* Dentro del grid, la tarjeta conserva su mismo ancho/alto de
           siempre (110x130, ver .ingredient-card); solo se le quita el
           margin-left/margin-bottom propios del carrusel (pensados para el
           scroll horizontal), porque en grid el espaciado ya lo da el
           "gap" de arriba — si se dejaran los dos, la separación entre
           tarjetas se vería doble. */
        .setIngr.gridMode .ingredient-card{
            margin-left: 0;
            margin-bottom: 0;
        }

        .ingredient-card {
            display: flex;
            scroll-snap-align: start; /* Set the element focus position in scroll container */
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            min-width: 110px;
            max-width: 110px;
            min-height: 130px;
            max-height: 130px;
            border-radius: 25px;
            margin-left: 20px;
            margin-bottom: 20px;
            transform: scale(1.02);
            border-bottom: 2px solid var(--c-primario);
            border-top: 2px solid var(--c-primario);
            border-left: 2px solid var(--c-primario);
            border-right: 2px solid var(--c-primario);
        }

        .ingredient-card:hover {
            background-color: #e0e0e0;
            cursor: pointer;
            box-shadow: 2px 4px 2px #cfcfcf;
            transform: scale(1.1);
        }

        .ingredient-card.selected {
            background-color: var(--c-primario);
            color: white;
            border-color: var(--c-primario);
        }
        /* Marco dorado: identifica de un vistazo cuáles ingredientes son
           "proteína principal" (proteinasPrincipales en JS: pollo, res,
           cerdo, pescado, mariscos sin procesar). Se mantiene dorado tanto
           normal como seleccionado (por eso el segundo selector, con más
           especificidad que .selected). */
        .ingredient-card.ingredient-card-protein {
            border-color: #D4AF37;
            border-width: 3px;
            box-shadow: 0 0 0 1px #D4AF37, 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
        .ingredient-card.selected.ingredient-card-protein {
            border-color: #D4AF37;
            box-shadow: 0 0 0 1px #D4AF37;
        }
        /* Tarjeta deshabilitada: se llegó al máximo de ingredientes seleccionados
           (MAX_SELECTED_INGREDIENTS en ingredients.js) y esta tarjeta no está
           entre los ya seleccionados. */
        .ingredient-card.ingredient-disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: scale(1.02);
        }
        .ingredient-card.ingredient-disabled:hover {
            background-color: white;
            cursor: not-allowed;
            box-shadow: none;
            transform: scale(1.02);
        }
        .dvImg{
            width: 100%;
            height: auto;
            text-align: center;
            background-color: var(--c-primario);
        }
        .ingImgCrd{
            width: 100%;
            height: 80%;
        }
        .divCrd{
            width: 100%;
            height: auto;
            text-align: center;
            background-color: wheat;
        }
        .txtCrd{
            width: 97%;
            text-align: center;
            font-family:'poppinsRegular';
            font-size: 15px;
            padding: 7px 2px 5px 2px;
            color: rgb(57, 57, 57);
            margin: auto;
            position: absolute;
            bottom:0px;
            left: 0%;
            height: auto;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
             backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.474);
            border-top: 1px solid var(--c-borde);
            border-bottom: 1px solid var(--c-borde);
            border-right: 1px solid var(--c-borde);
            }

        .ingredients-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }
        .txtSlcIngr{
          font-size: 19px;
          font-family:'poppinsLight';

        }




        .selected-ingredients {
            position: sticky;
            top: 0;
            margin-top: 15px;
            padding: 15px;
            border-radius: 8px;
        }
        .txtSlctIng{
            font-family:'poppinsSemiBold';
            font-size: 17px;
        }
        .selected-list {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .selected-item {
            background-color: #F3FBF4;
            color: var(--c-texto);
            padding: 6px 12px;
            border: 2px solid #348b37;
            border-radius: 25px;
            font-family:'poppinsSemiBold';
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        /* Proteínas principales: mismo diseño, solo cambia el borde a
           dorado (mismo #D4AF37 que ya usamos en las tarjetas del carrusel
           y en los chips del tooltip). */
        .selected-item.selected-item-protein {
            border-color: #D4AF37;
            background-color: #fdf3d985;
        }
        .selected-item.selected-item-protein .selected-item-icon,
        .selected-item.selected-item-protein .selected-item-txt,
        .selected-item.selected-item-protein button {
            color: #D4AF37;
        }
        .selected-item-icon {
            color: #348b37;
            font-size: 14px;
        }
        .selected-item-txt {
          color: #348b37;
            font-size: 14px;
             font-family:'poppinsSemiBold';
        }

        .selected-item button {
            background: none;
            border: none;
            color: #348b37;
            margin-left: 2px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
        }


        .recipes-grid {
            margin-top: 0px;
            text-align: center;
        }

        .recipe-card {
          display: inline-table;
    scroll-snap-align: start; /* Set the element focus position in scroll container */
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    min-width: 265px;
    max-width: 265px;
    min-height: 360px;
    max-height: 420px;
    border-radius: 25px;
    margin-left: 2%;
    margin-right: 1%;
    margin-top: 2%;
    margin-bottom: 2%;
    transform: scale(1.02);
    border-bottom: 2px solid var(--c-borde);
    border-top: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
    animation-duration:2s;
    animation-name: slidein;
        }

        .recipe-card:hover {
            transform: translateY(-5px);
        }

        .recipe-image {
            height: 180px;
            background-color: #ddd;
            background-size: cover;
            background-position: center;
        }

        .recipe-info {
            padding: 15px;
        }

        .recipe-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--c-texto);
        }

        .recipe-meta {
            display: flex;
            justify-content: space-between;
            margin: 10px 10px 0px 10px;
        }
        .txtCompt{
          color: var(--c-texto);
          font-family:'poppinsSemiBold';
          font-size: 14px;
        }
        /* Columna que envuelve txtCompt + el badge de bono de proteína,
           para poder apilarlos verticalmente sin romper el flex de 3
           columnas de .recipe-meta (txtCompt | ojo | txtNumIng). */
        .dvCompColumn {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
        }
        /* Etiqueta informativa: NO se suma al % mostrado en txtCompt, solo
           indica que esta receta recibió el bono de orden por llevar la
           proteína principal seleccionada (PROTEIN_MATCH_BONUS en JS).
           Mismo tono dorado que el marco de las tarjetas de proteína. */
        .txtProteinBonus {
          background-color: #FDF3D9;
          color: #a1861f;
          border: 1px solid #D4AF37;
          font-family: 'poppinsSemiBold';
          font-size: 10px;
          font-weight: 700;
          padding: 1px 6px;
          border-radius: 8px;
          white-space: nowrap;
        }
        .txtNumIng{
          font-family:'poppinsSemiBold';
          font-size: 14px;
        }
        .ingCompTxt{
          font-family:'poppinsSemiBold';
          font-size: 12px;
        }
        .txtSubNumIng{
          color: var(--c-texto);
          font-family:'poppinsSemiBold';
          font-size: 14px;
          margin: 5px;
        }
        /* Modo "solo categoría": misma jerarquía visual que txtSubNumIng,
           pero en azul de marca para diferenciar "coincide por categoría"
           de "coincide por ingrediente" (verde). */
        .txtCatgMatch{
          color: var(--c-texto);
          font-family:'poppinsSemiBold';
          font-size: 14px;
          margin: 5px;
        }
        .icLgIng{
          color: var(--c-primario);
        }
        /* Columna propia (entre txtCompt y txtNumIng) que SOLO contiene el
           ojo. Ancho lo más angosto posible: display:inline-flex se ajusta
           al contenido (el ícono) sin estirarse, sin padding extra. Aquí
           vive el hover que dispara el tooltip con la lista de ingredientes. */
        .icEyeMidWrap{
          display: inline-flex;
          align-items: center;
          cursor: pointer;
        }
        /* Palpitación lenta y sutil para llamar la atención hacia el ojo,
           sin que sea molesto (2.4s, escala suave). Se pausa al pasar el
           cursor encima, para no competir con el tooltip que aparece. */
        @keyframes icEyePulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.3);
            }
        }
        .icEyeIng{
          color: var(--c-primario);
          font-size: 19px;
          display: inline-block;
          animation: icEyePulse 2.4s ease-in-out infinite;
        }
        .icEyeMidWrap:hover .icEyeIng{
          animation-play-state: paused;
        }
        .bxDvTxtMsg{
          animation-duration:2s;
          animation-name: slidein;
        }
        .dvTxtMsg{
          width: 100%;
          height: 350px;
          display: flex;
          justify-content: center; /* Centra horizontalmente */
          align-items: center;     /* Centra verticalmente */
          text-align: center;      /* Opcional: si el texto ocupa más de una línea */
        }
        .no-recipes {
            text-align: center;
            padding: 20px;
            color: var(--c-suave);
        }

        .dvSctTitle{
            width: auto;
            align-items: center;
            text-align: center;
            padding: 55px 20px 0px 20px;
        }
        .dvSctSubTitle{
            width: auto;
            align-items: center;
            text-align: center;
            padding: 0px 20px 15px 20px;
        }
        .txtTitle{
           font-family:'poppinsSemiBold';
            font-size: 29px
        }
        .subTpTxt{
          font-family:'poppinsLight';
            font-size: 17px
        }
        .dvClrBtn{
          display: none;
          width: 100%;
          text-align: right;
          animation-duration:2s;
          animation-name: dipIcon;
        }

  @keyframes dipIcon {
  0% {
    opacity: 0;
    transform: translateY(70%);
  } 100% {
    opacity: 1;
    transform: translateY(0%);
  }
  }
  @keyframes slidein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
  }
        .clear-btn {
            font-family:'poppinsLight';
            font-size: 17px;
            border-left: 1px solid  var(--c-primario);
            border-right:1px solid var(--c-primario);;
            border-top:1px solid var(--c-primario);
            border-bottom: 1px solid var(--c-primario);
            color: var(--c-primario);
            background-color: #ffffff;
            border-radius: 25px;
            padding: 4px 9px;
            transition: background-color 0.3s;
        }

        .clear-btn:hover {
           cursor: pointer;
           background-color: var(--c-primario);
           color: white;
        }

        /*Recipes*/
        .recipes-section{
           position: relative;
           overflow-x: hidden;
        }
        .boxRecipe{
          margin-top: 10px;
            text-align: center;
            position: relative;
            border-left: 3px solid  var(--c-primario) !important;
            border-right:3px solid var(--c-primario) !important;
            border-top: 3px solid var(--c-primario) !important;
            border-bottom: 3px solid var(--c-primario) !important;
            background-color: #ffffff;
            border-radius: 75px;
            height: auto;
            background-size: 100% 100%;
    }
    .btnInfoCompat{
        position: absolute;
        top: 20px;
        right: 40px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: var(--c-primario);
        border: none;
        color: #ffffff;
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        z-index: 3;
        transition: background-color 0.2s ease;
    }
    .btnInfoCompat:hover{
        background-color: var(--c-oscuro);
    }
    .txtNoIngSlct{
        font-family:'poppinsLight';
        font-size: 17px;
    }
    .dvDynmcIsl{
        margin-top: 20px;
        width: 100%;
    }
    /* Indicador de modo de búsqueda (por ingrediente / por categoría /
       ingrediente + categoría), justo debajo de la burbuja de resultados. */
    .dvSearchModeIndicator{
        width: 100%;
        text-align: center;
        margin-top: 14px;
        animation: dipIcon 0.4s ease-in-out;
    }
    .txtSearchModeIndicator{
        font-family:'poppinsLight';
        font-size: 17px;
        color: var(--c-texto);
    }
    .dynamicIsland{
        padding: 0px 20px 0px 20px;
         font-family:'poppinsLight';
        font-size: 21px;
        border-radius: 25px;
        border-top: 2px solid var(--c-borde);
        border-bottom: 2px solid var(--c-borde);
        border-left: 2px solid var(--c-borde);
        border-right: 2px solid var(--c-borde);
        animation: div-animation-dynamicIsland 1800ms;
   }
    @keyframes div-animation-dynamicIsland{
    0%{
      background-color: #000;
      font-size: 4px;
    }
    50%{
      padding-left:50px;
      padding-right:50px;
    }
    100%{
      background-color: white;
      font-size: 21px;
    }
}
/*Carrousel*/
.carousel {
  display: block;
  width: 86%; /* Width of carousel */
  height: 166px; /* Height of carousel */
  margin-left: 7%;
  margin-right: 7%;
}
.recpCardContainer{
  display: flex;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: auto auto auto auto;
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
  flex: 0 0 calc(100% - 16px); /* Set width of card container */

}

.cardRecipe{
   display: inline-table;
    scroll-snap-align: start; /* Set the element focus position in scroll container */
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    min-width: 265px;
    max-width: 265px;
    min-height: 360px;
    max-height: 420px;
    border-radius: 25px;
    margin-left: 2%;
    margin-right: 1%;
    margin-top: 4%;
    margin-bottom: 2%;
    transform: scale(1.02);
    border-bottom: 2px solid var(--c-primario);
    border-top: 2px solid var(--c-primario);
    border-left: 2px solid var(--c-primario);
    border-right: 2px solid var(--c-primario);
    animation-duration:2s;
    animation-name: slidein;
}
.cardRecipe:hover{
  cursor: pointer;
  box-shadow: 2px 4px 2px #cfcfcf;
  transform: scale(1.05);
}
.cardRecipe .rcpImgCrd{
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  width: 100%;
  height: 300px;
}
.txtSlcCatg{
  font-family:'poppinsLight';
  font-size: 14px;
}
.dvSlcCtg{
  padding: 10px 20px 10px 20px;
  width: 100%;
  text-align: center;
}
.selector-container{
  padding: 15px;
}

/* Estilo para el tooltip personalizado
        ------------------------------------
        */
        .custom-tooltip {
            position: absolute;
            background-color:var(--c-primario);
            color:white;
            padding: 8px 12px;
            border-bottom-left-radius: 17px;
            border-bottom-right-radius: 25px;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            font-size: 14px;
            white-space: nowrap; /* Evita que el texto se rompa */
            z-index: 9999;
            pointer-events: none; /* Permite clics a través del tooltip */
            opacity: 0;
             font-family:'poppinsSemiBold';
            visibility: hidden;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* Clase para mostrar el tooltip */
        .custom-tooltip.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(-5px); /* Pequeña animación de deslizamiento */
        }
        .custom-tooltip::after {
            content: "";
            position: absolute;
            top: 90%;
            left: 5%;
            margin-left: 0px;
            border-width: 11px;
            border-style: solid;
            border-color: var(--c-primario) transparent transparent transparent;
        }

        /* Tooltip con la lista completa de ingredientes de la receta
           (hover sobre .txtNumIng). Mismo lenguaje visual que
           .custom-tooltip, pero permite texto en varias líneas y tiene un
           ancho máximo, ya que puede haber muchos ingredientes.
           Pensado solo para escritorio (se activa con mouseenter/mouseleave). */
        .ingListTooltip {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.9);
            color: var(--c-texto);
            padding: 10px 14px;
            border-bottom-left-radius: 17px;
            border-bottom-right-radius: 25px;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            font-size: 13px;
            font-family: 'poppinsSemiBold';
            line-height: 1.6;
            white-space: normal;
            max-width: 240px;
            text-align: left;
            z-index: 9999;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            /* Entrada: sube desde abajo + fade in (mismo lenguaje que el toast). */
            transform: translateY(15px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .ingListTooltip.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        /* La pestaña/flecha va del lado IZQUIERDO (no centrada): el tooltip
           se ancla ahí y se despliega hacia la derecha a partir de ese punto.
           Se hace con clip-path (un triángulo real), SIN transform:rotate().
           El intento anterior (cuadrado rotado 45°) no se veía esmerilado
           porque, en muchos navegadores, aplicar backdrop-filter a un
           elemento con transform hace que el filtro simplemente no se
           calcule (por eso se veía plano, sin blur y con un color distinto
           al del cuerpo). Con clip-path no hay transform de por medio, así
           que el mismo background-color + backdrop-filter del cuerpo del
           tooltip sí se difumina igual aquí. */
        .ingListTooltip::after {
            content: "";
            position: absolute;
            bottom: -9px;
            left: 14px;
            width: 16px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
        }

        /* Cascada: cada línea de ingrediente aparece una tras otra, de
           arriba hacia abajo (el desfase por línea se agrega inline desde
           JS vía animation-delay, según el índice de cada ingrediente). */
        @keyframes ingRowIn {
            from {
                opacity: 0;
                transform: translateY(-6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Título fijo arriba de la lista de ingredientes. Aparece junto con
           el tooltip (sin cascada propia); las filas de ingredientes
           empiezan su cascada 150ms después (ver ROWS_BASE_DELAY_MS en JS),
           para que dé tiempo a leerlo primero. */
        .ingTooltipTitle {
            font-family:'poppinsSemiBold';
            font-size: 14px;
            margin-bottom: 2px;
            padding-bottom: 2px;
            border-bottom: 1px solid var(--c-medio);
        }

        /* Cada fila del tooltip de ingredientes: palomas (opcionales) + nombre.
           opacity:0 de entrada porque la animación (ingRowIn, con su delay
           puesto inline desde JS según el índice) es la que la hace visible;
           forwards para que se quede en su estado final al terminar. */
        .ingTooltipRow {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            animation: ingRowIn 0.3s ease forwards;
        }
        /* Fondo blanco en cada paloma para que se distinga sobre el fondo
           azul (var(--c-primario)) del tooltip, sin importar el color del ícono. */
        .ingTooltipCheck {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #fff;
            font-size: 12px;
            flex-shrink: 0;
        }
        .ingTooltipCheckBasic {
            color: var(--c-primario); /* verde: ingrediente básico */
        }
        .ingTooltipCheckSelected {
            color: #348b37; /* match con un ingrediente seleccionado */
        }
        .ingTooltipCheckNeutral {
            color: var(--c-primario); /* ni básico ni seleccionado: círculo hueco gris */
        }

        /* Leyenda fija al final del tooltip explicando qué significa cada
           ícono. Separada de la lista por una línea, con texto más pequeño
           para no competir visualmente con los ingredientes. */
        .ingTooltipLegend {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px solid rgba(var(--c-primario-rgb), 0.3);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .ingTooltipLegendRow {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 10px;
            line-height: 1.3;
        }
        .ingTooltipLegendRow .ingTooltipCheck {
            width: 13px;
            height: 13px;
            font-size: 10px;
            flex-shrink: 0;
        }




                /*Modal tutorial*/
        .icnTuto{
          font-size: 27px;
          color: var(--c-primario);
          border-radius: 50%;
          padding: 6px 7px 6px 7px;
        }
        .icnTutoB{
          font-size: 27px;
          color: var(--c-primario);
          border-radius: 50%;
          padding: 6px 7px 6px 7px;
        }
        .modalTuto{
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }
        .modalInfoCompat{
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.45);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }
        .modalContInfoCompat{
          margin: auto;
          width: 90%;
          max-width: 340px;
          background-color: #ffffff;
          border-top: 3px solid var(--c-primario);
          border-radius: 22px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          padding: 26px 24px 22px;
          box-sizing: border-box;
          text-align: center;
          animation: modalInfoCompatIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes modalInfoCompatIn{
          0%{
            opacity: 0;
            transform: scale(0.85) translateY(10px);
          }
          100%{
            opacity: 1;
            transform: scale(1) translateY(0);
          }
        }
        .txtTitleInfoCompat{
          font-family:'poppinsLight';
          font-size: 18px;
          font-weight: 700;
          color: var(--c-texto);
          line-height: 1.35;
          margin: 0 0 18px 0;
        }
        .circIconInfoCompat{
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background-color: var(--c-primario);
          color: #ffffff;
          font-size: 22px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 18px auto;
        }
        .txtBodyInfoCompat{
          font-family:'poppinsLight';
          font-size: 14px;
          color: #444444;
          line-height: 1.6;
          text-align: left;
          margin: 0 0 16px 0;
        }
        .btnAceptarInfoCompat{
          width: 100%;
          background-color: var(--c-primario);
          color: #ffffff;
          border: none;
          border-radius: 26px;
          padding: 13px;
          font-family:'poppinsLight';
          font-size: 15px;
          cursor: pointer;
          transition: background-color 0.2s ease;
        }
        .btnAceptarInfoCompat:hover{
          background-color: var(--c-oscuro);
        }
        .modalContTuto{
           margin: auto;
          min-width: 374px;
          max-width: 900px;
          max-height: 600px;
          min-height: 100%;
          overflow-y: auto;
          background-color: white;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          padding: 7px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          border: 4px solid var(--c-primario);
          border-radius: 25px;
          animation: aparecer 1.5s ease-in-out; /* Aplica la animación */

        }
        .dvClsTuto{
          width: 100%;
          text-align: right;
        }
        .txtLsTuto{
             font-family:'poppinsLight';
             font-size: 17px;
             padding-right: 20px;
             padding: 0px 7px 0px 7px;
             border-radius: 25px;
             border-top: 2px solid var(--c-borde);
    border-bottom: 2px solid var(--c-borde);
    border-left: 2px solid var(--c-borde);
    border-right: 2px solid var(--c-borde);
        }
        .txtLsTuto:hover{
          cursor: pointer;
          font-family:'poppinsSemiBold';

        }
        .modalheaderTuto{
            text-align: center;
            padding: 10px 20px;
            border-radius: 25px;

        }
        .modalheaderTuto .mnTxtTuto {
            font-size: 28px;
            font-family:'poppinsSemiBold';
            color: var(--c-primario);
        }
        .modalContentTuto{
          display: flex;
          flex-direction: row;
            min-height: 400px;
        }
        .left-panel {
            flex: 1;
            padding: 20px;
            border-right: 1px solid #eee;
            overflow-y: auto;
        }
        .feature-box {
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;

        }
        .feature-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
        .feature-box.active {
            border-left-color: var(--c-primario);
            background-color:rgba(0, 0, 0, 0.12);
        }
        .feature-box .tpTxCrd {
            font-size: 21px;
            margin-bottom: 8px;
            font-family:'poppinsSemiBold';
        }
        .feature-box .sbTxtCrd {
            font-size: 14px;
            font-family:'poppinsLight';
            line-height: 1.5;
        }
        .mediaText{
          font-size: 14px;
            font-family:'poppinsLight';
        }
        .right-panel {
            flex: 1.5;
            padding: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
        }
        .media-container {
            width: 100%;
            max-width: 500px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            animation: aparecer 0.5s ease-in-out; /* Aplica la animación */

        }
        /* Definición de la animación */
        @keyframes aparecer {
            0% {
                opacity: 0;    /* Invisible */
                transform: scale(0.9); /* Ligeramente más pequeño */
            }
            100% {
                opacity: 1;    /* Visible */
                transform: scale(1); /* Tamaño normal */
            }
        }
        .media-container img,
        .media-container video {
            width: 100%;
            display: block;

        }
        .imgKndPst{
            position: relative;
            top: -550px;
            right: -210px;
            font-size: 34px;
            color: var(--c-primario);
        }
        .icnMorFd{
          font-size: 272px;
           color: var(--c-primario);
        }
        .media-description {
            margin-top: 20px;
            text-align: center;
            max-width: 500px;
        }
        .media-description h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: var(--c-texto);
        }
        .media-description p {
            font-size: 14px;
            color: var(--c-suave);
            line-height: 1.6;
        }


.slctCatg{
            /* Sin esto, el navegador usa su propio "chrome" nativo para el
               select y puede ignorar border-radius/border/background-image
               (pasa seguido en móvil). Con esto, respeta el estilo de abajo. */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            box-sizing: border-box; /* sin esto, el padding/borde se suman al 50% y desbordan el contenedor */
            width: 55%;
            height:30px;
            padding-left: 35px;
            padding-right: 20px;
            border: 2px solid var(--c-primario);
            font-family:'poppinsLight';
            border-radius: 25px;
            font-size: 19px;
            background-image: url("/folder/img/catgIcn.png");
            background-size: 21px 21px;
            background-repeat: no-repeat;
            background-position: 90% 50%;
            outline: none;
            transition: border 0.3s;
        }
.slctCatg:hover{
  cursor: pointer;
   box-shadow: 2px 4px 2px #cfcfcf;
}
.lkImg{
  z-index: 7;
  width: 37px;
  height: 37px;
  position: absolute;
  top: 7px;
  right: 0px;
  opacity: 1;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  padding: 0% 2% 0% 2%;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
}
.lkImg:hover{
  cursor: pointer;
  transform: scale(1.07);
}
.cardRecipe:hover .lkImg{
  opacity: 1;
  animation-name: dipRgtLft;
  animation-duration: 1s;
  transition: 1s;
  padding: 0% 15.51% 0% 2%;
}
.bkMark{
  opacity: 0;
  color: var(--c-primario);
  font-size: 24px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 8px;
  right: 6.5px;
  border-radius: 50%;
  border: 1px solid var(--c-primario);
  background-color: rgba(255, 255, 255, 0.148);
  backdrop-filter: blur(55px);
  padding: 1.5% 2.77% 1.2% 2.77%;
  z-index: 7;
}
.bkMark:hover{
  cursor: pointer;
  transform:  scale(1.07);
}
.cardRecipe:hover .bkMark{
  opacity: 1;
  animation-name: dipRgtLft;
  animation-duration: 1.5s;
}
/* Cuando la receta está guardada en alguna colección (no necesariamente
   favoritos), el marcador queda siempre visible (no solo al hacer hover)
   y con un fondo sólido, para que sirva como indicador real de estado. */
.bkMark.bkMarkActive{
  opacity: 1;
  color: var(--c-primario);
  background-color: none;
}

.tmRcp{
  text-align: right;
  color: #efefef;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  opacity: 1;
  font-size: 17px;
  font-family:'poppinsLight';
  width: auto;
  height: auto;
  position: absolute;
  bottom: 160px;
  left: 0px;
  padding: 0% 5% 0% 4%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  text-shadow: 1px 0.5px #747474;
}
/* Ajuste SOLO para modo combinado (ingrediente + categoría): el badge de
   tiempo se sube un poco respecto a su posición normal (bottom: 155px).
   Ajusta este valor para subir/bajar el badge únicamente en ese modo. */
.cardRecipeCombined .tmRcp{
  bottom: 180px;
}
/* Ajuste SOLO para modo solo-categoría: como en este modo se oculta el
   recipe-meta y el bloque de ingredientes (compatBlockStyle), la tarjeta
   tiene menos contenido y su altura real se achica dentro del rango
   min/max-height de .cardRecipe. Como el badge usa "bottom" (medido desde
   la base de esa caja, que ahora es más chica), termina en una posición
   distinta a la de modo solo-ingrediente aunque el valor de bottom sea el
   mismo. Ajusta este número para que quede igual que en solo-ingrediente. */
.cardRecipeCategoryOnly .tmRcp{
  bottom: 100px;
}
.tmRcp:hover{
  cursor: pointer;
}
.cardRecipe:hover .tmRcp{
  opacity: 1;
  animation-name: dipIcon;
  animation-duration: 1s;
}
.flIcn{
  text-align: left;
  color: #ffffff;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  opacity: 1;
  font-size: 17px;
  font-family:'poppinsLight';
  text-shadow: 0.7px 0.5px #000000;
  width: auto;
  height: auto;
  position: absolute;
  top: 2%;
  left: 0px;
  padding: 0% 5% 0% 7%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
}
.cardRecipe:hover .flIcn{
  opacity: 1;
  animation-name: dipLftRght;
  animation-duration: 1s;
}
/* ─────────────────────────────────────────────────────────────────
   Avisos de dieta / alergia del PERFIL del usuario. Nunca se elimina
   la receta: solo se agrega esta notificación visual a la tarjeta.
   Se posicionan justo debajo de .flIcn (arriba-izquierda) para no
   chocar con .lkImg / .bkMark (arriba-derecha) ni con .tmRcp (abajo).
   ───────────────────────────────────────────────────────────────── */
.badgeWarnWrap{
  position: absolute;
  top: 44px;
  left: 8px;
  right: 8px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.badgeDietWarn{
  display: flex;
  align-items: flex-start;
  color: #ffffff;
  font-size: 11px;
  font-family: 'poppinsLight';
  border-radius: 10px;
  padding: 5px 8px;
  gap: 5px;
  line-height: 1.3;
  backdrop-filter: blur(5px);
  text-shadow: 0.5px 0.4px #000000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation-name: dipLftRght;
  animation-duration: 1s;
}
.badgeDietWarn i{
  font-size: 12px;
  margin-top: 1px;
  flex-shrink: 0;
}
.badgeWarnDieta{
  background-color: rgba(21, 128, 61, 0.65);
}
.badgeWarnAlergia{
  background-color: rgba(198, 40, 40, 0.65);
}
/* Insignia positiva: la receta contiene TODOS los ingredientes que el
   usuario seleccionó (Nivel 1 de la jerarquía de dos niveles en
   getCompatibleRecipes). Reutiliza la forma de .badgeDietWarn, mismo
   contenedor .badgeWarnWrap, solo cambia el color a modo teal/positivo. */
.badgeAllMatch{
  background-color: rgba(var(--c-primario-rgb),0.85);
}
/* Separador visual entre el Nivel 1 (recetas con todos tus ingredientes)
   y el Nivel 2 (el resto) dentro de #recipesGrid. #recipesGrid NO es un
   CSS grid (usa .cardRecipe{display:inline-table} + text-align:center),
   así que este bloque necesita ser display:block/width:100% para forzar
   su propio renglón dentro de ese flujo. */
.dividerNivelRecetas{
  display: block;
  width: 100%;
  text-align: center;
  margin: 14px 0;
  font-family: 'poppinsSemiBold';
  font-size: 13px;
  color: var(--c-primario);
  position: relative;
}
.dividerNivelRecetas span{
  background: #fff;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.dividerNivelRecetas::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-primario);
  opacity: 0.35;
}
.tlBxRcp{
  width: 250px;
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
/* Carrusel de 2 cuadros dentro de .tlBxRcp: "Ingredientes compatibles" y
   "Ingredientes que ya tienes en casa" (los básicos de la receta). No se
   toca ningún estilo existente de .tlBxRcp/.ingCompTxt/.txtSubNumIng — los
   dos cuadros usan exactamente esas mismas clases, solo se agrega el
   posicionamiento y la animación de transición al pasar el cursor sobre la
   tarjeta. Si la receta no tiene ingredientes básicos, este bloque ni
   siquiera se genera (ver ingredients.js) y se queda el .tlBxRcp normal.
   Ciclo de 12s: compatibles visible 4s, transición 1s, básicos visible 6s
   (tiempo de sobra para que la marquesina de texto largo -.dynamicTextCard,
   ya existente, 5s- complete una pasada completa antes de cambiar), otra
   transición de 1s y vuelta a compatibles. */
.tlBxRcpCarousel{
  position: relative;
  cursor: pointer;
}
.carouselFrameBasics{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
}
/* Los dos cuadros ocupan el mismo espacio (uno encima del otro). Sin esto,
   el que está oculto en cada momento (opacity:0) igual "atrapaba" el
   cursor por estar encima en el orden de pintado, y el hover nunca
   llegaba al texto del cuadro que sí se ve — por eso el compatible no se
   movía y, al dejar el cursor quieto, ambos cuadros podían quedar
   invisibles a la vez. Con pointer-events solo el cuadro realmente
   visible en cada instante puede recibir el cursor. */
.carouselFrameCompat{
  pointer-events: auto;
}
.cardRecipe:hover .tlBxRcpCarousel:not(.carouselManual) .carouselFrameCompat{
  animation: carouselFrameCompatCycle 24s infinite ease-in-out;
}
.cardRecipe:hover .tlBxRcpCarousel:not(.carouselManual) .carouselFrameBasics{
  animation: carouselFrameBasicsCycle 24s infinite ease-in-out;
}
/* Si el cursor está sobre el bloque del carrusel, se congelan LOS DOS
   ciclos (compatibles Y básicos) al mismo tiempo, para que no cambie de
   cuadro mientras lo estés leyendo. En cuanto el cursor sale, ambos
   retoman justo donde se quedaron.
   IMPORTANTE: el disparador es el hover del WRAPPER (.tlBxRcpCarousel),
   no el de cada cuadro por separado (.carouselFrame:hover) como estaba
   antes. :hover solo aplica al elemento que realmente recibe el cursor
   (con pointer-events ahora solo el cuadro visible lo recibe) — así que
   pausar por ".carouselFrame:hover" solo detenía ESE cuadro y dejaba
   correr el ciclo del otro (invisible) por su cuenta. Con el tiempo esto
   desincronizaba los dos ciclos (uno pausado, el otro avanzando), y en
   algún momento ambos cuadros terminaban visibles a la vez — los textos
   se veían encimados. Al pausar los dos SIEMPRE juntos (mismo disparador
   para ambos), quedan bloqueados exactamente en fase, sin importar
   cuántas veces ni cuánto tiempo se pause. */
.cardRecipe:hover .tlBxRcpCarousel:not(.carouselManual):hover .carouselFrameCompat{
  animation-play-state: paused;
}
.cardRecipe:hover .tlBxRcpCarousel:not(.carouselManual):hover .carouselFrameBasics{
  animation-play-state: paused;
}
/* La marquesina de texto largo (.dynamicTextCard, animación "move" ya
   existente en otras partes de la página) normalmente solo se activa si el
   cursor está exactamente encima de ese texto. Aquí, dentro del carrusel,
   se activa sola en cuanto la tarjeta está en hover, y comparte el MISMO
   reloj que el cambio de cuadro (carouselFrameBasicsCycle) para que
   SIEMPRE arranque desde cero justo cuando el cuadro de básicos se hace
   visible, en vez de correr en un ciclo aparte que podía quedar a la
   mitad cuando el cuadro aparecía. Solo se aplica al cuadro de básicos
   ("Ingredientes en casa"), que suele tener más ingredientes; el de
   compatibles se queda con su comportamiento normal (hover manual).
   Duración deliberadamente lenta (24s, el doble de la original) para que
   el texto se lea con calma; debe coincidir SIEMPRE con la de
   carouselFrameCompatCycle/carouselFrameBasicsCycle de arriba, si no, el
   texto se corta a la mitad antes de que la tarjeta cambie de cuadro. */
.cardRecipe:hover .tlBxRcpCarousel:not(.carouselManual) .carouselFrameBasics .dynamicTextCard{
  overflow: visible;
  animation: carouselBasicsMarquee 24s linear infinite;
}
@keyframes carouselBasicsMarquee{
  0%, 41.67% { opacity: 1; transform: translateX(0%); }
  83.33% { opacity: 1; transform: translateX(-150%); }
  87.5% { opacity: 0; transform: translateX(-150%); }
  88.5% { opacity: 0; transform: translateX(0%); }
  91.67%, 100% { opacity: 1; transform: translateX(0%); }
}
/* Modo manual: se activa con un clic sobre el div (ver ingredients.js). El
   ciclo automático de arriba se desactiva por completo (:not(.carouselManual)
   deja de aplicar) y en su lugar el cuadro que corresponda según
   .showCompat/.showBasics se queda fijo, visible, sin animación de
   cambio — hasta que el usuario haga clic de nuevo (alterna) o quite el
   cursor de toda la tarjeta (se sueltan estas clases y regresa el ciclo
   automático). La marquesina de básicos, en modo manual, corre en su
   propio ciclo simple (igual que en cualquier otra parte de la página) y
   se reinicia desde cero cada vez que se entra a este cuadro por clic
   (ver ingredients.js). */
.tlBxRcpCarousel.carouselManual .carouselFrameCompat{
  animation: none;
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}
.tlBxRcpCarousel.carouselManual .carouselFrameBasics{
  animation: none;
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}
.tlBxRcpCarousel.carouselManual.showCompat .carouselFrameCompat{
  opacity: 1;
  pointer-events: auto;
}
.tlBxRcpCarousel.carouselManual.showBasics .carouselFrameBasics{
  opacity: 1;
  pointer-events: auto;
}
/* En modo manual el texto de básicos ya NO reutiliza "move" (esa iba y
   volvía en reversa - alternate). Aquí solo recorre en un sentido: revela
   el texto, se desvanece, regresa a su posición inicial mientras está
   invisible (el salto no se nota porque no hay nada que ver en ese
   instante) y vuelve a aparecer para recorrer de nuevo, siempre en la
   misma dirección. Duración deliberadamente lenta (12s, el doble de la
   original) para que se lea con calma; esta NO depende de ningún otro
   ciclo (a diferencia del modo automático), así que puede cambiarse sola
   sin desincronizar nada más. */
.tlBxRcpCarousel.carouselManual.showBasics .carouselFrameBasics .dynamicTextCard{
  overflow: visible;
  animation: carouselBasicsMarqueeManual 12s linear infinite;
}
@keyframes carouselBasicsMarqueeManual{
  0% { opacity: 1; transform: translateX(0%); }
  70% { opacity: 1; transform: translateX(-150%); }
  85% { opacity: 0; transform: translateX(-150%); }
  86% { opacity: 0; transform: translateX(0%); }
  100% { opacity: 1; transform: translateX(0%); }
}
@keyframes carouselFrameCompatCycle{
  0%, 33.33% { opacity: 1; transform: translateY(0); pointer-events: auto; }
  41.67%, 91.67% { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  100% { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
@keyframes carouselFrameBasicsCycle{
  0%, 33.33% { opacity: 0; transform: translateY(6px); pointer-events: none; }
  41.67%, 91.67% { opacity: 1; transform: translateY(0); pointer-events: auto; }
  100% { opacity: 0; transform: translateY(6px); pointer-events: none; }
}
/* Modo combinado (ingrediente + categoría): en vez de mostrar uno solo de
   los dos bloques de .tlBxRcp, se muestran ambos a la vez, divididos en
   dos mitades iguales sobre la misma línea. */
.tlBxRcpSplit{
  display: flex;
  align-items: flex-start;
  width: 250px;
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 2%;
  gap: 4%;
}
.tlBxRcpSplit .tlBxRcp{
  width: 48%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}
/* El h5 (.dynamicTextCard) trae un ancho fijo de 240px pensado para el
   bloque completo (250px). En modo dividido cada mitad mide ~48% (~120px),
   así que ese ancho fijo ya no coincide con el espacio real: el propio
   ellipsis del h5 nunca se activaba (su caja de 240px "cabía" bien) y era
   el contenedor padre quien lo cortaba en seco, sin puntos suspensivos.
   Aquí se ajusta su ancho al 100% de su mitad para que el "..." se vea
   igual que en la etiqueta de arriba. El hover (.dynamicTextCard:hover,
   con la animación "move" ya existente) no se toca: sigue revelando el
   texto completo lentamente, y ahora lo hace de forma independiente en
   cada mitad. */
.tlBxRcpSplit .dynamicTextCard{
  width: 100%;
}
/* Chips de categoría en modo combinado (ingrediente + categoría): van
   debajo del nombre de la receta, uno por categoría, y envuelven a la
   siguiente línea si son 2 o 3, en vez de competir por ancho con el
   nombre o con el bloque de ingredientes compatibles. */
.categoriaChipsRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 5px;
  width: 250px;
  margin: 2px auto 0;
}
.categoriaChipCard{
  font-size: 12px;
  font-family:'poppinsSemiBold';
  color: var(--c-texto);
  background-color: #eaf2f5;
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}
.txtRcpNm{
  text-align: center;
    font-family:'poppinsRegular';
    font-size: 17px;
    width: 250px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.dynamicTextCard{
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  text-align: center;
}
.dynamicTextCard:hover{
  overflow: visible;
  animation: 5s linear 0s infinite alternate move;
}
@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-150%);
    left: 100%;
  }
  }
.normalTextCard{
	width: 180px;
  text-align: center;
  }
@keyframes dipIcon {
0% {
  opacity: 0;
  transform: translateY(70%);
} 100% {
  opacity: 1;
  transform: translateY(0%);
}
}
@keyframes dipLftRght{
  0% {
    opacity: 0;
    transform: translateX(-20%);
  } 100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes dipRgtLft {
  0% {
    opacity: 0;
    transform: translateX(20%);
  } 100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.categorias-seleccionadas {
            position: sticky;
            top: 0px;
            z-index: 99999;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 0px;
            padding-left: 20px;
}
.categoria-boton {
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: white;
            color: var(--c-primario);
            padding: 6px 12px;
            border: 2px solid var(--c-primario);
            border-radius: 25px;
            font-family:'poppinsSemiBold';
            font-size: 17px;
        }
        .categoria-boton-emoji {
            font-size: 15px;
            line-height: 1;
        }

        .eliminar-categoria {
            margin-left: 2px;
            cursor: pointer;
            font-weight: 700;
            color: var(--c-primario);
            background: none;
            border: none;
            font-size: 16px;
        }

        /* Estilos del botón */
        .back-to-top {
            position: fixed;
            bottom: 70px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            font-size: 27px;
            font-family:'poppinsLight';
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
            background-color: var(--c-primario);
            color: white;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            background-color: #6578ac;
            color: white;
            transform: translateY(-3px);
            box-shadow: 2px 4px 2px #cfcfcf;
        }

        /*Question recipe*/
  .modalVwPln {
      position: fixed;
      inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
      background-color: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .modalVwPlnCnt {
      background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      width: 90%;
      max-width: 700px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
      animation-duration:2s;
      animation-name: div-animation-Btn-To-Top;
    }
    .txtVwPlnQst{
      font-size: 21px;
      font-family:'poppinsLight';
    }
       .modalVwPlnBtn {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .modalVwPlnBtn button {
      font-size: 17px;
      font-family:'poppinsSemiBold';
      padding: 7px 45px 7px 45px;
      border-radius: 25px;
      border-bottom: 3px solid var(--c-primario);
      border-top: 3px solid var(--c-primario);
      border-left: 3px solid var(--c-primario);
      border-right: 3px solid var(--c-primario);
      color: var(--c-primario);
      background-color: white;
      animation: div-animation-Left-To-Right 2.5s ease-in;
      animation-fill-mode: forwards;
    }
    .modalVwPlnBtn button:hover {
      cursor: pointer;
      color: white;
      background-color: var(--c-primario);
    }

    /*Favoritos modal*/
.divMsgCol{
  text-align: center;
  display: none;
  z-index: 9;
}
.txtColt{
  color: var(--c-texto);
	font-family:'poppinsSemiBold';

  position: fixed;
  bottom: 40%;
  transform: translateX(-50%);
  min-width: 374px;
  max-width: 900px;

  font-size: 27px;
  padding: 10px 50px 10px 45px;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.37);
  border-top: 3px solid var(--c-primario);
  border-bottom: 3px solid var(--c-primario);
  border-left: 3px solid var(--c-primario);
  border-right: 3px solid var(--c-primario);
  text-shadow: 1px 1px #332b22;
  animation: div-animation-dynamicIsland 1800ms;
}
.hrtAdded{
  font-size: 35px;
  color: red;

}
@keyframes div-animation-dynamicIsland{
  0%{
    font-size: 4px;
    width: 200px;
  }
  50%{
    font-size: 34px;
    width: 600px;
  }
  100%{
    font-size: 27px;
    width: 500px;
  }

}

/*Modal add lst*/
.modalShwLst{
  display: none;
  position: fixed; /* Stay in place */
  z-index: 8; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  animation-name: loadModal;
  animation-duration: 1s;
}
.divShwList{
  /* Centrado horizontal y vertical siempre: el overlay (.modalShwLst) lo
     muestra el JS con display:block, así que se centra la caja con
     top/left 50% + translate en vez de depender de flex en el overlay. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  box-sizing: border-box;
  max-width:660px;
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
  margin: 0;
  border-radius: 30px;
  padding: 10px 15px;
  background-color: white;
  box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
  text-align: center;

}
.clsAddNwLst{
  font-family: 'poppinsRegular';
  font-size: 14px;
  position:absolute;
  top: 18px;
  right: 18px;
  left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  border-radius: 50%;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  border-top: 2px solid var(--c-borde);
  border-bottom: 2px solid var(--c-borde);
  border-left: 2px solid var(--c-borde);
  border-right: 2px solid var(--c-borde);
}
.clsAddNwLst:hover{
  cursor: pointer;
  color: var(--c-primario);
  border-top: 2px solid var(--c-primario);
  border-bottom: 2px solid var(--c-primario);
  border-left: 2px solid var(--c-primario);
  border-right: 2px solid var(--c-primario);
}
.dvIconAddLst{
  text-align: center;
  margin-top: 4%;
  margin-bottom: 2%;
}
.icoAddLst{
  width: 52px;
  height: 52px;
  color: var(--c-primario);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
}
.txtEyebrowAddLst{
  display: block;
  font-family:'poppinsSemiBold';
  font-size: 12px;
  font-weight: 700;
  color: var(--c-texto);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dvShowLst{
  text-align: center;
  margin-left: 12%;
  margin-right: 12%;
}
.txtShrRecp{
  font-family:'poppinsSemiBold';
  font-size: 19px;
  color: var(--c-texto);
}
.rcpName{
  color: var(--c-texto);
}
.dvAddNwLst{
  text-align: center;
  margin-top: 2%;
}
.txtAddNwLst{
  font-size: 17px;
  font-family:'poppinsSemiBold';
  color: var(--c-texto);
  padding: 8px 30px;
  width: 70%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--c-tinte);
  border-radius: 25px;
  border: 2px dashed var(--c-primario);
  animation: div-animation-Left-To-Right 800ms ease-in;
  animation-fill-mode: forwards;
}
.txtAddNwLst:hover{
  cursor: pointer;
  background-color: #DCEBF1;
  border-style: solid;
}
.stRcpLst{
  margin-top: 3%;
  margin-left: 7%;
  margin-right: 7%;
  margin-bottom: 7%;
}
.dvtxtNoLst{
  text-align: center;
}
.txtNoLst{
  font-size: 27px;
  font-family:'poppinsLight';
}
.dvBtnAddlsit{
  text-align: center;
  margin-bottom: 5%;
  margin-top: 5%;
}
.txtBtnAddLst{
  border-radius: 25px;
  font-family:'poppinsSemiBold';
  font-size: 16px;
  padding: 10px 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
  background-color: var(--c-primario);
  border-top: 2px solid var(--c-primario);
  border-bottom: 2px solid var(--c-primario);
  border-left: 2px solid var(--c-primario);
  border-right: 2px solid var(--c-primario);
}
.txtBtnAddLst:hover{
  cursor: pointer;
  box-shadow: 5px 5px 5px #C7C7C7;
}
.addNwLstImg{
  padding: 10px 15px 0px 15px;
  width: 21px;
  height: 21px;
}
.lstImg{
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 14px;
}
.gridLstColct {
  display: grid;
  grid-template-columns: 25% 75%;
  align-items: center;
  background-color: #ffffff;
  border-radius: 18px;
  border-top: 1px solid var(--c-tinte2);
  border-bottom: 1px solid var(--c-tinte2);
  border-left: 1px solid var(--c-tinte2);
  border-right: 1px solid var(--c-tinte2);
  box-shadow: 0 2px 6px rgba(var(--c-primario-rgb),0.08);
  height:74px;
  margin-top: 10px;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
/* Encabezados de sección ("Mis favoritas" / "Tus colecciones") dentro del
   modal de agregar a lista (#stRcpLst). */
.dvTxtNmLstCltFav{
  text-align: left;
  margin-top: 3%;
  padding-left: 2%;
}
.dvTxtNmLstCltFav:first-child{
  margin-top: 0;
}
/* Contenedor de las tarjetas de "Tus colecciones": se ven hasta 3 sin
   scroll (3 tarjetas de 74px + su margin-top de 10px c/u ≈ 252px); si hay
   más, esta sección saca su propio scroll interno, sin afectar el resto
   del modal (encabezado, Mis favoritas, botones). */
.tusColeccionesScroll{
  max-height: 252px;
  overflow-y: auto;
  padding-right: 4px;
}
.txtNmLstCltFav{
  font-family:'poppinsSemiBold';
  font-size: 17px;
  color: var(--c-texto);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* La etiqueta de "Mis favoritas" usa un tono distinto (acorde al corazón
   rojo de esa tarjeta) para diferenciarla de "Tus colecciones". */
.txtNmLstCltFavHeart{
  color: #a32d2d;
}
/* Ícono para eliminar una colección (solo en tarjetas "borrables", nunca
   en Mis favoritas). Se posiciona sobre la propia tarjeta sin alterar
   las 2 columnas existentes (imagen/nombre). */
.btnDeleteColct{
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: var(--c-suave);
  font-size: 18px;
  cursor: pointer;
}
.btnDeleteColct:hover{
  color: #d9534f;
}
.gridLstColct:hover{
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--c-primario-rgb),0.18);
  transform: translateY(-1px);
  border-top: 1.5px solid var(--c-primario);
  border-bottom: 1.5px solid var(--c-primario);
  border-left: 1.5px solid var(--c-primario);
  border-right: 1.5px solid var(--c-primario);
}
.itemLstColctA{
  padding: 5px 5px 5px 10px;
  font-size: 10px;
  text-align: center;
}
.itemLstColctB{
  padding-right: 40px;
  text-align: left;
  font-size: 10px;
}
.txtNmLstClt{
  font-size: 15px;
  font-family:'poppinsSemiBold';
}
.selctdLst{
  background-color: var(--c-tinte);
  box-shadow: 0 4px 12px rgba(var(--c-primario-rgb),0.18);
  border-top: 2px solid var(--c-primario);
  border-bottom: 2px solid var(--c-primario);
  border-left: 2px solid var(--c-primario);
  border-right: 2px solid var(--c-primario);
}
.selctdLst .txtNmLstClt{
  color: var(--c-texto);
}
/* Mientras la tarjeta está seleccionada para agregar, se oculta el botón
   de eliminar (evita borrar por accidente justo cuando se está agregando
   la receta) y en su lugar se muestra un check de confirmación. */
.selctdLst .btnDeleteColct{
  display: none;
}
.selctdLst::after{
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--c-primario);
  font-size: 16px;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}
.slctdIcon{
  color: var(--c-primario);
}

/* "Ya pertenece a esta colección": crearTarjetaColeccion()/getAllColct() la
   marcan automáticamente (misma clase .selctdLst, mismo check ✓ de arriba)
   al abrir el modal, para que el usuario vea de un vistazo a qué
   colecciones ya pertenece esta receta — y se le agrega ADEMÁS .yaEnColct,
   que no cambia nada visualmente por sí sola, solo activa las reglas de
   abajo. Al pasar el cursor sobre una tarjeta así marcada, el check (y el
   bote de basura, si lo hubiera) se reemplazan por el ícono de "quitar
   esta receta de esta colección" (btnRemoveFromColct). Se apoya en
   .yaEnColct (no en .selctdLst) para seguir funcionando aunque el usuario
   haya tocado la tarjeta y esta ya no esté "seleccionada" visualmente. */
.gridLstColct.yaEnColct .btnDeleteColct{
  display: none;
}
.btnRemoveFromColct{
  display: none;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: var(--c-primario);
  font-size: 18px;
  cursor: pointer;
}
.btnRemoveFromColct:hover{
  color: #d9534f;
}
.gridLstColct.yaEnColct:hover .btnRemoveFromColct{
  display: block;
}
.gridLstColct.selctdLst.yaEnColct:hover::after{
  display: none;
}

/*////////////// Add new colection ////*/
.modalAddColct{
  display: none;
  position: fixed; /* Stay in place */
  z-index: 7; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  animation-name: loadModal;
  animation-duration: 1s;
}
/* Se centra siempre al centro exacto de la pantalla (vertical y
   horizontal), sin importar cuánto contenido tenga, usando position:
   absolute + transform en vez de márgenes automáticos (que solo centran
   horizontalmente). max-height/overflow-y quedan como respaldo para no
   salirse de la pantalla en ventanas muy chicas. */
.dvAddColct{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 28px;
  padding: 30px 28px 26px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 12px 32px rgba(var(--c-primario-rgb),0.18);
}
.dvclsMdlClct{
  text-align: right;
  position: relative;
  top:0px;
  right: 2%;
}
.clsMdlClct{
  font-family:'poppinsRegular';
  z-index: 1;
  font-size: 14px;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  border-top: 2px solid var(--c-borde);
  border-bottom: 2px solid var(--c-borde);
  border-left: 2px solid var(--c-borde);
  border-right: 2px solid var(--c-borde);
  }
  .clsMdlClct:hover{
  cursor: pointer;
  color: var(--c-primario);
  backdrop-filter: blur(5px);
  border-top: 2px solid var(--c-primario);
  border-bottom: 2px solid var(--c-primario);
  border-left: 2px solid var(--c-primario);
  border-right: 2px solid var(--c-primario);
}
/* Ícono + eyebrow del encabezado, mismo lenguaje visual que el modal de
   "Agregar a lista" (dvIconAddLst / icoAddLst / txtEyebrowAddLst). */
.dvIconAddColct{
  text-align: center;
  margin-bottom: 2px;
}
.icoAddColct{
  width: 52px;
  height: 52px;
  color: var(--c-primario);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
}
.txtEyebrowAddColct{
  display: block;
  font-family:'poppinsSemiBold';
  font-size: 11px;
  font-weight: 700;
  color: var(--c-texto);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.dvAddMnFav{
  text-align: center;
}
.txtMn{
  font-family:'poppinsSemiBold';
  font-size: 22px;
  color: var(--c-texto);
}
.txtSubAddColct{
  margin: 6px auto 0;
  max-width: 320px;
  font-family:'poppinsLight';
  font-size: 13px;
  color: var(--c-suave);
}
.divAddColct{
  padding: 5px;
  margin-top: 18px;
}
.itemFavA{
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--c-tinte);
  border: 2px solid var(--c-primario);
  border-radius: 25px;
  padding: 4px 8px 4px 18px;
}
.icoInputAddColct{
  color: var(--c-primario);
  font-size: 16px;
}
#nwLstColct{
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  width: auto;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 12px 0;
  font-family:'poppinsLight';
  font-size: 15px;
  color: var(--c-texto);
}
.dvAddLst{
  text-align: center;
  margin-top: 20px;
}
.btnAddList{
  font-family:'poppinsSemiBold';
  font-size: 16px;
  border-radius: 25px;
  padding: 10px 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
  background-color: var(--c-primario);
  border-bottom: 2px solid var(--c-primario);
  border-top: 2px solid var(--c-primario);
  border-left: 2px solid var(--c-primario);
  border-right: 2px solid var(--c-primario);
}
.btnAddList:hover{
 cursor: pointer;
  color: var(--c-primario);
  background-color: white;
  border-bottom: 2px solid var(--c-primario);
  border-top: 2px solid var(--c-primario);
  border-left: 2px solid var(--c-primario);
  border-right: 2px solid var(--c-primario);
  box-shadow: 2px 4px 2px #cfcfcf;
}


/*         Notificaciones   */
          .coverNotification{
            position: fixed;
                inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
                align-items: center;
                justify-content: center;
                z-index: 999999999999999999999999999999;

              width: 100%; /* Full width */
              height: 100%; /* Full height */
              overflow: auto; /* Enable scroll if needed */
              background-color: rgba(77, 77, 77, 0.303); /* Fallback color */
              animation-name: loadModal;
              animation-duration: 0.3s;
            }

        .notification {
            position: fixed;
            max-width: 470px;
            width: 90%;
            padding: 18px 40px;
            border-radius: 25px;
           background-color: var(--c-primario);
            color: white;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 1000;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s;
            pointer-events: none;
        }

        .notification.center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
        }

        .notification.bottom {
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
        }

        .notification.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: all;
        }

        .notification.bottom.show {
            transform: translateX(-50%) translateY(0);
        }

        .notification.hide {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
        }

        .notification.bottom.hide {
            transform: translateX(-50%) translateY(20px);
        }

        .notification-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .notification-icon {
            font-size: 24px;
            flex-shrink: 0;
        }
        .clsNotf{
          background: none;
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s;
            padding: 1px 10px 1px 10px;
            width: 4px;
            margin: 0px;
            font-family:'poppinsSemiBold';
        }
        .clsNotf:hover {
            color:  white;
        }
        .notification-message {
          text-align: center;
          font-family:'poppinsLight';
            font-size: 17px;
            line-height: 1.4;
            width: 400px;
        }
        .notification-submessage{
          font-size: 14px;
        }

        .notification-close {
            background: none;
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            cursor: pointer;
            transition: color 0.2s;
            padding: 1px 10px 1px 10px;
            width: 10px;
            margin: 0px;
            font-family:'poppinsSemiBold';
        }

        .notification-close:hover {
            color:  white;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 0 0 12px 12px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            width: 100%;
            background-color: white;
            transform-origin: left;
            transform: scaleX(0);
            border-radius: 0 0 12px 12px;
        }

        @keyframes progress {
            to {
                transform: scaleX(1);
            }
        }

        /* Animación de scroll hacia abajo */
        .scroll-down-animation {
            position: absolute;
            bottom: 0px;
            left: 30px;
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        /* Se agrega cuando el usuario empieza a hacer scroll hacia abajo
           (ver listener de #custom-scroll en ingredients.js); se quita al
           volver arriba del todo. El !important es necesario porque este
           mismo elemento también recibe un opacity inline (0/1) según si
           hay o no recetas para mostrar, y este estado (oculto por scroll)
           siempre debe ganar mientras el usuario esté scrolleado hacia
           abajo, sin importar ese otro valor. */
        .scroll-down-animation.scrollIndicatorHidden {
            opacity: 0 !important;
            transform: translateY(12px);
            pointer-events: none;
        }
        .scroll-indicator {
            width: 25px;
            height: 50px;
            border: 2px solid var(--c-primario);
            border-radius: 25px;
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
            position: relative;
            box-shadow: 0 0 15px rgba(var(--c-primario-rgb), 0.5);
             backdrop-filter: blur(5px);
          background-color: rgba(255, 255, 255, 0.148);
        }

        .scroll-indicator::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--c-primario);
            border-radius: 50%;
            top: 15px;
            animation: scrollDown 2s infinite;
            box-shadow: 0 0 10px var(--c-primario);
        }

        @keyframes scrollDown {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            80% {
                opacity: 0.7;
            }
            100% {
                transform: translateY(30px);
                opacity: 0;
            }
        }

        .scroll-text {
          font-family:'poppinsSemiBold';
            color: var(--c-primario);
            font-size: 14px;
            text-align: center;
            margin-bottom: 8px;
        }

/* Tarjeta de aviso "Límite alcanzado" (ingredientes) */
.ingrLimitToastWrap {
    position: fixed;
    bottom: 20px;
    left: 50%;
    /* Estado oculto: por debajo de su posición final y transparente.
       Entra deslizándose hacia arriba con fade; al salir, recorre el
       camino inverso exacto (baja mientras se difumina). */
    transform: translateX(-50%) translateY(40px);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    width: 92%;
    max-width: 560px;
}
.ingrLimitToastWrap.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}
.ingrLimitToastCard {
    position: relative;
    background: var(--c-primario);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(20,50,70,0.18);
    padding: 18px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 2px solid var(--c-medio);
    box-sizing: border-box;
}
.ingrLimitToastIcon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: #EAF3F8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ingrLimitToastTextWrap {
    flex: 1;
    min-width: 0;
    padding-right: 40px;
}
.ingrLimitToastTitle {
    font-family:'poppinsSemiBold';
    font-size: 18px;
    color: white;
    margin-bottom: 3px;
}
.ingrLimitToastSubtitle {
    font-family:'poppinsLight';
    font-size: 17px;
    color: #ffffff;
    line-height: 1.4;
}
.ingrLimitToastTime {
    position: absolute;
    top: 18px;
    right: 20px;
    font-family:'poppinsLight';
    font-size: 12px;
    color: #ececec;
}
@media (max-width: 480px) {
    .ingrLimitToastCard {
        padding: 14px 18px;
        gap: 10px;
    }
    .ingrLimitToastIcon {
        width: 40px;
        height: 40px;
    }
    .ingrLimitToastTitle {
        font-size: 16px;
    }
    .ingrLimitToastSubtitle {
        font-size: 12.5px;
    }
}
/* Responsive */
@media (min-width: 1024px) and (max-width: 2560px) {
            .container {
                flex-direction:row;
            }
            /* .ingredients-section tiene "height: auto" (línea ~497), que
               gana sobre el "height: 820px" de .section porque va después
               en el archivo. En columna (celular) eso no importa, pero
               aquí, en fila junto a .recipes-section (que sí se queda fija
               en 820px con su propio scroll), un "auto" que crece más de
               820px (p.ej. al activar el Grid de ingredientes) estira toda
               la fila, y como .recipes-section no crece, se ve ese espacio
               vacío debajo de las recetas. Se le da la misma altura fija +
               scroll propio para que ambas columnas se comporten igual y
               ninguna dependa de cuánto crezca la otra. */
            .ingredients-section {
                height: 820px;
                overflow-y: auto;
            }
        }

@media (min-width: 481px) and (max-width: 1024px) {
  .bottom-nav {
    opacity: 1;
  }
  #navLftLg{
    opacity: 0;
  }
            .container {
                flex-direction:column;
            }
        }

        @media (max-width: 480px){
          .feature-box .tpTxCrd {
            font-size: 14px;
            margin-bottom: 8px;
            font-family:'poppinsSemiBold';
        }
        .mediaText{
          font-size: 12px;
            font-family:'poppinsLight';
        }
        .feature-box .sbTxtCrd {
            font-size: 11px;
            font-family:'poppinsLight';
            line-height: 1.5;
        }
        .modalheaderTuto .mnTxtTuto {
            font-size: 21px;
        }
  .bottom-nav {
            max-width:  370px;
            min-width: 370px;
            padding: 0 0px;

        }
        .plnAppttNvBrB{
          width: 120px;
          height: 30px;
        }
        .nav-btn {
            padding: 9px 12px;
             margin: 0px 10px;
        }
        .nav-btn i {
            font-size: 25px;
        }
        .nav-btn span {
            font-size: 11px;
        }
        .bckPgs{
          color: var(--c-suave);
          font-size: 21px;
          position: -webkit-sticky; /* Safari */
          position: absolute;
          top: 14px;
          left:2%;
          border-radius: 50%;
          padding: 4px 8px 4px 8px;
        }
        .txtAmbgMx{
          font-family:'poppinsLight';
          font-size: 9px;
          position: -webkit-sticky; /* Safari */
          position: absolute;
          top: 47px;
          left:2.5%;
}
.icnTutorial{
        font-size: 24px;
        position: absolute;
        top: 14px;
        right: 2.5%;
        padding: 4px 8px 4px 8px;

        }
        .txtTuto{
          font-size: 9px;
          position: absolute;
          top:50px;
          right:2.5%;
        }
        .section {
            border-top: 3px solid rgb(205, 205, 205) !important;
        }
        .txtTitle{
            font-size: 24px
        }
        .subTpTxt{
            font-size: 15px
        }
        .ltrs{
              font-size: 17px;
        }
        .slctCatg{
            width: 70%;
        }
        .back-to-top {
            position: fixed;
            bottom: 70px;
            right: 20px;
            z-index: 99999;
        }
}


        /* ============================================================
           Footer reutilizable (Términos y Condiciones) -- mismo bloque
           copiado tal cual en shrTipsTricks.css.
           ============================================================ */
        .ftPlnApp{
            width: 100%;
            box-sizing: border-box;
            padding: 14px 20px;
            text-align: center;
            background: var(--c-pie);
            border-top: 1px solid var(--c-borde);
        }
        .txtFtPlnApp{
            font-family: 'poppinsLight';
            font-size: 12px;
            color: var(--c-texto);
            line-height: 1.5;
        }
        .lkFtTerminos{
            font-family: 'poppinsSemiBold';
            color: var(--c-texto);
            text-decoration: underline;
            cursor: pointer;
        }
        .lkFtTerminos:hover{ color: var(--c-fondo); }