:root{
  /* ===== PALETA PLANAPPETIT (Guía de paleta y estilo v2) -- fuente de verdad: mainPage_v2.css ===== */
  --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;

  /* Nombres propios de esta página (los usan ~60 reglas más abajo): ahora salen de la paleta */
  --deep:var(--c-oscuro); --dark:var(--c-oscuro); --base:var(--c-primario); --medium:var(--c-medio); --soft:var(--c-suave);
  --light:var(--c-tinte2); --pale:var(--c-tinte2); --ghost:var(--c-tinte);
  --ink:var(--c-texto); --dark-n:var(--c-texto); --slate:var(--c-texto2); --muted:var(--c-suave);

  /* Colores universales por categoría (franja lateral de las tarjetas de Tips & Trick) -- NO son parte de la paleta general, sin tocar */
  --catComida:#F77F00;
  --catCocina:#D62828;
  --catAhorraTiempo:#FFC300;
  --catNoDesperdicios:#6F4E37;
  --catRopa:#6A4C93;
  --catHogar:#1D3557;
  --catMascotas:#2A9D8F;
  --catJardin:#4888AA;
  --catOtros:#8D99AE;
}
body {
    margin: 0;
      background-size:cover;
      background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
  }
   @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: 3px;
            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: 2px 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;
            
        }
        .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: absolute;
          top: 15px;
          z-index: 2;
          text-align: center;
          width: 100%;
        }
        
        .plnAppttNvBr{
         width: 270px;
          height: 71px;
          position: absolute;
          top: 12px;
          left: 50%; /* Mueve el borde izquierdo del div al centro horizontal del padre */
            transform: translateX(-50%); /* Mueve el div hacia la izquierda la mitad de su propio ancho, centrándolo */
        }
        .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-primario);
          font-size: 17px;
          transition: all 0.3s ease;
        }
        .txtBtnsNvBr{
          padding-top: 5px;
          font-family:'poppinsLight';
          color: var(--c-primario);
          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;
             
          cursor: pointer;
        }
  .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/tips&tricks.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;
    }
}

.mnDv{
    display: block;
    margin: auto;
    min-width: 374px;
    max-width: 1920px;
    margin-left: 7%;
    margin-right: 7%;
    height: auto;
    animation: div-animation-Btn-To-Top 2700ms ease-in;
    animation-fill-mode: forwards;
    border-radius: 25px;
    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;
    
}
@keyframes div-animation-Btn-To-Top{
  0%{
    transform: translateY(50%);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.bckPgs{
  color:  var(--c-suave);
  font-size: 34px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 10px;
  left:2%;
  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);
}  
.txtAmbgMx{
  font-family:'poppinsLight';
  font-size: 14px;
  position: -webkit-sticky; /* Safari */
  position: absolute;
  top: 60px;
  left:2.3%;
}
.bckPgs:hover{
  cursor: pointer;
  color: white;
  background-color: var(--c-primario);
}
.ambgMx{
  color:  var(--c-suave);
  font-size: 31px;
  position: -webkit-sticky; /* Safari */
  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);
}
/* 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;
        }
.dvMnTxtNwRcp{
    text-align: center;
    padding-top: 7%;
    margin-left: 7%;
    margin-right: 7%;
}
 .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;
      }
.txtMnNwRcp{
    font-family:'poppinsSemiBold';
    font-size: 37px;
}
.dvMnTxtNwRcpB{
  text-align: center;
  padding-top: 0%;
}
.txtSbInf{
    font-family:'poppinsLight';
    font-size: 17px;
}
.stAthVd{
font-family:'poppinsLight';
    font-size: 14px;
}

                /*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;
        }
        .smllTxt{
          font-size: 11px;
          color: rgb(255, 170, 0);
          font-family:'poppinsSemiBold';
        }
        .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;
        }
        .modalContTuto{
           margin: auto;
          min-width: 374px;
    max-width: 1920px;
    margin-left: 7%;
    margin-right: 7%;
          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: 14px;
             margin-right: 10px;
             border-radius: 25px;
             padding: 0px 7px 0px 7px;
             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 var(--c-borde);
            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;
        }

        
 /* Tarjetas de Tips (Estilo TikTok) */
        .tip-card {
            width: 95%;
            max-width: 600px;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 2px 14px rgba(var(--c-primario-rgb),0.16);
            transform-style: preserve-3d;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            background-color: #ffffff;
            border: 1px solid var(--pale);
            border-left: 5px solid var(--catOtros);
            animation-duration:2s;
  animation-name: goUpAnim;
        }
        /* Franja lateral de color según la categoría del tip (data-category) — colores universales, ver justificación aparte */
        .tip-card[data-category="Comida"]{
            border-left-color: var(--catComida);
        }
        .tip-card[data-category="Cocina"]{
            border-left-color: var(--catCocina);
        }
        .tip-card[data-category="Ahorra tiempo"]{
            border-left-color: var(--catAhorraTiempo);
        }
        .tip-card[data-category="No más desperdicios"]{
            border-left-color: var(--catNoDesperdicios);
        }
        .tip-card[data-category="Ropa"]{
            border-left-color: var(--catRopa);
        }
        .tip-card[data-category="Hogar"]{
            border-left-color: var(--catHogar);
        }
        .tip-card[data-category="Mascotas"]{
            border-left-color: var(--catMascotas);
        }
        .tip-card[data-category="Jardín"]{
            border-left-color: var(--catJardin);
        }
        .tip-card[data-category="Otros"]{
            border-left-color: var(--catOtros);
        }
        @keyframes goUpAnim {
  from {
    opacity: .5;
    transform: translateY(20%);
  }

  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
        .youTubeClr{
          color: #c4302b;
        }
        .instamClr{
          color: #D43089;
        }
        .setLft{
            margin: 20px auto auto 1.5rem;
        }
        .setRight{
            margin: 20px 1.5rem auto auto;
        }
        .tip-card:hover {
            cursor: pointer;
            transform: translateY(-10px) rotateX(5deg);
            box-shadow: 0 15px 30px rgba(var(--c-primario-rgb),0.3);
        }
        .tip-media {
            width: 40px;
            height: 30px;
            object-fit: contain;
            border-radius: 8px;
        }
        .mnTxtTpTck{
                font-family:'poppinsSemiBold';
            font-size: 13px;
            color: var(--muted);
            letter-spacing: 0.02em;
            padding-left: 10px;
        }
        .dvTpCrdTp{
          display: flex;
          text-align: left;
          align-items: center;
          justify-content:left;
        }
        .dvTpCrdTpTck{
            display: grid;
            grid-template-columns: 50% 50%;
            align-items: center;
            justify-content:left;
        }
        .divTpItemA{
          display: flex;
          text-align: left;
          align-items: center;
          justify-content:left;
          padding-left: 20px;
        }
        .divTpItemB{
            text-align: right;
            padding-right: 20PX;
        }
        .divTpItemB1{
            text-align: right;
            padding-right: 20PX;
        }
        .tip-content {
            padding: 1.5rem 1.5rem 0.2rem 1.5rem;
            background: rgba(235, 235, 235, 0.7);
            backdrop-filter: blur(10px);
        }
        .tip-source {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .source-icon {
            font-size: 1.2rem;
        }
        .txtAuhtr{
          position: relative;
          left: -30px;
          font-size: 17px;
            font-family:'poppinsLight';
            color: var(--slate);
        }
        .dvTitleCrdTpTck{
            padding: 7px 7px 7px 7px;
        }
        .txtDvTitlCrd{
            font-family:'poppinsSemiBold';
            font-size: 21px;
            color: var(--dark-n);
        }
        .dvDescrp{ /* Ancho máximo del contenedor */
            padding: 1px 7px 7px 17px;
            text-align: justify;
            cursor: pointer;
            transition: all 5.5s ease; /* Animación suave */
        }
        .txtDvDescrp{
            display: -webkit-box;
            -webkit-line-clamp: 3; /* Máximo de líneas visibles inicialmente */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family:'poppinsLight';
            font-size: 17px;
            color: var(--slate);
            transition: all 5.5s ease; /* Animación suave */
        }
        .dvDescrp:hover .txtDvDescrp {
            -webkit-line-clamp: unset; /* Muestra todo el texto al pasar el cursor */
        }
        /* Resaltado de palabras que coinciden con la búsqueda (en título y descripción) */
        mark.srchHltMatch{
            background: none;
            color: inherit;
            font-family: inherit;
            font-weight: 700;
            text-decoration: underline;
            text-decoration-color: var(--base);
            text-decoration-thickness: 2px;
            text-underline-offset: 2px;
        }
        .dvTagGrid{
            width: 99%;
           display: grid;
            grid-template-columns: 50% 50%;
            padding: 7px 7px 7px 7px;
        }
        .tgGridItemA{
            text-align: left;
            padding: 12px 7px 7px 7px;
        }
        .tgGridItemB{
            text-align: right;
            padding: 12px 7px 7px 7px;
        }
        .txtDvVd{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family:'poppinsSemiBold';
            font-size: 14px;
            color: white;
            border-radius: 999px;
            background-color: var(--base);
            padding: 6px 18px;
            border: none;
            transition: background .2s, box-shadow .2s;
        }
        .txtDvVd:hover{
            cursor: pointer;
            color: white;
            background: var(--dark);
            box-shadow: 0 4px 10px rgba(var(--c-primario-rgb),0.35);

        }

        /* "Ver Tip" según la plataforma de origen (recipe.source) — Opción B
           aprobada: contorno + ícono/texto del color de marca de la plataforma,
           en vez de la píldora azul genérica. Se compensa el padding por el
           borde de 1.6px para que el botón mida igual que la versión sólida.
           El ícono/logo se agrega desde JS vía verTipSourceInfo() en
           tipsTrick.js (tarjeta clásica y visor de historia). */
        .txtDvVd.srcTikTok, .txtDvVd.srcYouTube, .txtDvVd.srcInstagram, .txtDvVd.srcPlanAppetit{
            background: #fff;
            border: 1.6px solid transparent;
            padding:1px 15px 1px 20px;
        }
        .txtDvVd.srcTikTok{ color: #000; border-color: #000; }
        .txtDvVd.srcTikTok:hover{ background: #000; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); }

        .txtDvVd.srcYouTube{ color: #FF0000; border-color: #FF0000; }
        .txtDvVd.srcYouTube:hover{ background: #FF0000; color: #fff; box-shadow: 0 4px 10px rgba(255,0,0,.3); }

        .txtDvVd.srcInstagram{ color: #CC2366; border-color: #CC2366; }
        .txtDvVd.srcInstagram:hover{
            background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
            color: #fff;
            box-shadow: 0 4px 10px rgba(204,35,102,.3);
        }

        .txtDvVd.srcPlanAppetit{ color: var(--base); border-color: var(--base); }
        .txtDvVd.srcPlanAppetit:hover{ background: var(--dark); color: #fff; box-shadow: 0 4px 10px rgba(var(--c-primario-rgb),.35); }

        .txtDvVdPlnAppIcon{
            width: 15px;
            height: 15px;
            object-fit: contain;
            display: inline-block;
        }
        .txtDvTag{
            display: inline-block;
            color: var(--catOtros);
            background: transparent;
            font-family:'poppinsSemiBold';
            font-size: 11px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 999px;
        }
        /* Color de la etiqueta según la categoría del tip (data-category) — mismos colores que la franja lateral */
        .tip-card[data-category="Comida"] .txtDvTag{ color: var(--catComida); }
        .tip-card[data-category="Cocina"] .txtDvTag{ color: var(--catCocina); }
        .tip-card[data-category="Ahorra tiempo"] .txtDvTag{ color: var(--catAhorraTiempo); }
        .tip-card[data-category="No más desperdicios"] .txtDvTag{ color: var(--catNoDesperdicios); }
        .tip-card[data-category="Ropa"] .txtDvTag{ color: var(--catRopa); }
        .tip-card[data-category="Hogar"] .txtDvTag{ color: var(--catHogar); }
        .tip-card[data-category="Mascotas"] .txtDvTag{ color: var(--catMascotas); }
        .tip-card[data-category="Jardín"] .txtDvTag{ color: var(--catJardin); }
        .tip-card[data-category="Otros"] .txtDvTag{ color: var(--catOtros); }
        .icnDltTip{
          margin-top: 5px;
          margin-left: 10px;
          font-size: 21px;
          color: var(--c-primario);
        }
        .icnDltTip:hover{
          cursor: pointer;
          font-size: 22px;
          color: var(--c-suave);
        }
        .icnHrt{
          font-size: 24px;
          color: var(--base);
          background: var(--ghost);
          width: 25px;
          height: 25px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 7px;
          border-radius: 50%;
          margin-left: 20px;
          transition: background .2s, color .2s;
        }
        .icnHrt:hover{
          cursor: pointer;
          color: var(--base);
          background: var(--pale);
        }
        .icnCorz{
          font-size: 24px;
          margin-left: 10px;
        }
        .icnCorz:hover{
          font-size: 25px;
          color: #c4302b;
        }

        /* Contenedor principal */
        .voice-container {
          display: inline-flex;
        }

        /* Estilo del corazón (inactivo/activo) */
        .heart-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 24px;
            transition: transform 0.3s, color 0.3s;
        }

        /* Contenedor de botones de voz (oculto inicialmente) */
        .voice-controls {
            display: flex;
            gap: 8px;
            opacity: 0;
             width: 0;
            overflow: hidden;
            transition: opacity 0.3s, width 0.3s;
       
        }
      /* Mostrar controles al pasar el cursor sobre el contenedor */
              .voice-container:hover .voice-controls {
                  opacity: 1;
                  width: 150px; /* Ajusta según el número de botones */
              }
        /* Forzado por JS (ver sincronizarVoiceControlsHist() en tipsTrick.js):
           las voice-controls del visor de historia (#modalHistTpTck) aparecen
           visibles desde que se abre el modal, sin esperar a un :hover real.
           Mismos valores que la regla de arriba -- !important porque debe
           ganarle al estado oculto de ".voice-controls" base sin depender de
           que el cursor esté sobre ".voice-container". */
        .voice-controls.vcForceShow{
          opacity: 1 !important;
          width: 150px !important;
        }

        /* Estilos para los botones de voz */
        .voice-btn {
            background: var(--base);
            color: white;
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }
        .noDsp{
          display: none;
        }
        .voice-btn:hover {
            background: var(--dark);

        }

        .iconPalpitar{
          font-size: 24px;
          animation: palpitar 2s infinite;
          color: var(--base);
        }
        @keyframes palpitar {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
      }

        .voice-btn svg {
            width: 16px;
            height: 16px;
            fill: var(--c-texto);
        }


        .tip-category {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            background: var(--secondary);
            border-radius: 20px;
            font-size: 0.8rem;
        }
        #noRsltSrch{
          display: none;
        }
        /* Opción B: texto centrado en la pantalla, con animación de deslizar+aparecer
           (en vez de la píldora flotando cerca del fondo con div-animation-dynamicIsland) */
        .noRsltSrch{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            flex-direction: column;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(6px);
            border: 2px solid var(--pale);
            padding: 1.4rem 2.2rem;
            border-radius: 22px;
            box-shadow: 0 10px 30px rgba(var(--c-primario-rgb),0.25);
            display: flex;
            gap: 0.5rem;
            z-index: 100;
            max-width: 320px;
            animation: div-animation-noRsltSlide 480ms ease-out;
        }
        .icnNoRsltSrch{
            font-size: 30px;
            color: var(--base);
        }
        .txtNoRsltSrch{
            font-family:'poppinsLight';
            font-size: 17px;
            color: var(--dark-n);
            font-weight: 600;
            line-height: 1.4;
        }
        /* Subtexto del aviso de "resultado aproximado" (ver mostrarAvisoAproximado()
           en tipsTrick.js) -- más liviano que el mensaje principal. */
        .txtAvisoAproxSub{
            display: block;
            margin-top: 4px;
            font-weight: 400;
            font-size: 14px;
            color: var(--slate);
        }
        @keyframes div-animation-noRsltSlide{
          0%{ opacity: 0; transform: translate(-50%, -70%); }
          100%{ opacity: 1; transform: translate(-50%, -50%); }
        }

        .noTipMsg{
          width: 100%;
          padding-top: 125px;
          padding-bottom: 100px;
          text-align: center;
        }
        .txtNoTips{
          font-size: 24px;
           font-family:'poppinsLight';
           color: var(--c-suave);
        }

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

  position: fixed;
  bottom: 40%;
  transform: translateX(-50%);
  min-width: 374px;
    max-width: 1920px;
    margin-left: 7%;
    margin-right: 7%;
  
  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: var(--c-primario);
}
   .lkImg{
    position: absolute;
  top: 36px;
  right: 11px;
  z-index: 7;
  width: 25px;
  height: 25px;
  padding: 6px;
  background: var(--ghost);
  border-radius: 50%;
  box-sizing: content-box;
  opacity: 1;
  transition: background .2s, transform .2s;
}
.lkImg:hover{
  cursor: pointer;
  transform: scale(1.07);
  background: var(--pale);
}
.shrIcn{
  position: absolute;
  top: 72px;
  right: 11px;
  z-index: 7;
  color: var(--base);
  background: var(--ghost);
  font-size: 17px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  box-sizing: content-box;
  transition: background .2s, transform .2s;
}
.shrIcn:hover{
  cursor: pointer;
  transform: scale(1.07);
   color: var(--base);
   background: var(--pale);
}

/*Modal share recipe*/
a{
  text-decoration: none;
}
  .modalShrRecip{
      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: 999999999999999999999;
  }
  .divShrRecip{
    background-color: #fff;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      width: 90%;
      max-width: 820px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
       animation: aparecer 1.5s ease-in-out; /* Aplica la animación */

  }
  .dvClsMdlShr{
    width: 100%;
    text-align: right;
  }
  .clMdlShr{
    font-family: 'poppinsRegular';
    font-size: 14px;
    padding: 0px 7px 0px 7px;
    border-radius: 25px;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.148);
    border-top-left-radius: 25px;
    border-top-right-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);
  }
  .clMdlShr: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);
  }
  .txtShrRecpDiv{
    margin-top: 1%;
    text-align: left;
  }
  .txtShrRecp{
    font-family:'poppinsLight';
    font-size: 24.5px;
  }
  .fab {
    padding: 10px 20px 10px 15px;
    width: 37px;
    text-align: center;
    text-decoration: none;
    margin: 2px 2px;
    border-radius: 50%;
  }
  .fa-facebook-f {
    color: #3b5998;
    background-color: white;
    font-size: 45px;
    animation: div-animation-Left-To-Right 800ms ease-in;
    animation-fill-mode: forwards;
    border-bottom: 1px solid #3b5998;
    border-top: 1px solid #3b5998;
    border-left: 1px solid #3b5998;
    border-right: 1px solid #3b5998;
  }
  
  .fa-facebook-f:hover{
    text-decoration: none;
    background: #3B5998;
    color: rgb(255, 255, 255);
    
  }
  .fa-x-twitter {
    background-color: white;
    color: black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    font-size: 47px;
    animation: div-animation-Left-To-Right 1300ms ease-in;
    animation-fill-mode: forwards;
  
  }
  .fa-x-twitter:hover{
    text-decoration: none;
   background: #061622;
    color: white;
  }
  .fa-whatsapp{
   
    color: #94eb29;
    background-color: white;
    font-size: 50px;
    border-bottom: 1px solid #94eb29;
    border-top: 1px solid #94eb29;
    border-left: 1px solid #94eb29;
    border-right: 1px solid #94eb29;
    animation: div-animation-Left-To-Right 1500ms ease-in;
    animation-fill-mode: forwards;
  }
  
  .fa-whatsapp:hover{
    text-decoration: none;
    background: #94eb29;
    color: white;
    
  }

  .fa-email{
    color:  #76b3d9;
    border-radius: 25px;
    padding: 7px 10px 7px 10px;
    border-bottom: 1px solid  #76b3d9;
    border-top: 1px solid  #76b3d9;
    border-left: 1px solid  #76b3d9;
    border-right: 1px solid  #76b3d9;
    font-size: 51px;
    animation: div-animation-Left-To-Right 1500ms ease-in;
    animation-fill-mode: forwards;
  }
  
  @keyframes div-animation-Left-To-Right{
    0%{
      transform: translateY(-50%);
      opacity: 0;
    }
    100%{
      transform: translateY(0);
      opacity: 1;
    }
  }
  .fa-email:hover{
    text-decoration: none;
    color: white;
    background-color:  #76b3d9;
  }
  .divR1{
    width: 100%;
    display: inline-flex;
    text-align: left;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  .setRecpUrl{
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis; 
    width: 85%;
    font-family:'poppinsLight';
    font-size: 17px;
    border-bottom: 0px solid #ffffff;
    border-top: 0px solid #ffffff;
    border-left: 0px solid #ffffff;
    border-right: 0px solid #ffffff;
    animation-name: slideUp;
    animation-duration: 0.5s;
    background-color: white;
  }
  .chkIcon{
    width: 7%;
    display: none;
    text-align: left;
    font-size: 19px;
    color: rgb(94, 154, 5);
  }
  .cpTxt{
    width: 10%;
    color: #3B5998;
    animation-name: slideUp;
    animation-duration: 0.5s;
  }
  .cpTxt:hover{
    text-decoration: underline;
    cursor: pointer;
  }

        @keyframes div-animation-dynamicIsland{
          0%{
            opacity: 0;
            width: 100px;
          }
          50%{
          
            opacity: 0.7;
            width: 600px;
          }
          100%{
            opacity: 1;
            width: 550px;
          }

        }
        .srchContainer{
          width: 100%;
          display: flex;
          justify-content: center;
          position: sticky;
          top: 77px;
          z-index: 100;
          margin-top: 1%;
        }
         /* Navegación por Gestos */
        .nav-gestures {
            align-items: center;
            justify-content:left;
            backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.92);
            border: 2px solid var(--c-primario);
            padding: 0.1rem 1.5rem;
            border-radius: 30px;
            display: flex;
            gap: 1.5rem;
        }
        #icnBck{
          display: none;
        }
        .icnBck:hover{
          transform: scale(1.1);
          color: var(--c-primario);
        }
         .search-input {
            width: 200px;
            height: 40px;
            padding: 0 55px 0 54px;
            border: none;
            border-radius: 20px;
            background-color: #ffffff;
            color: #000000;
            font-size: 14px;
            font-family:'poppinsLight';
            outline: none;
            transition: all 0.5s ease;
            cursor: pointer;
        }
        .clrInput{
          position: absolute;
          right: 47px;
          top: 52%;
          width: 20px;
          transform: translateY(-50%);
          cursor: pointer;
          font-family:'poppinsSemiBold';
          color: var(--c-primario);
          font-size: 17px;
          display: none; /* Oculto inicialmente */
        }
        .clrInput:hover{
          cursor: pointer;
          font-size: 18px;
          color: var(--c-texto);
        }
        .search-input:focus {
            width: 250px;
            cursor: text;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .search-icon {
            position: absolute;
            left: 45px;
            color: var(--c-suave);
            /* Ahora es el botón de "Buscar" (id="btnSrchTpTck"): antes tenía
               pointer-events:none porque solo era decorativo. */
            cursor: pointer;
            z-index: 2;
            transition: color .15s, transform .15s;
        }
        .search-icon:hover {
            color: var(--base);
            transform: scale(1.1);
        }
        .search-input::placeholder {
            color: var(--c-suave);
        }

        .search-input:focus::placeholder {
            color: var(--c-suave);
        }

        
        .nav-gestures i {
            font-size: 1.5rem;
            cursor: pointer;
        }
        

        /* Contenedor de Filtros (Estilo Cápsula) */
        .filters-container {
            position: sticky;
            top: 0px;
            margin-top: 1%;
            width: 96.5%;
            padding: 1rem;
            z-index: 90;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: 2px; /* Firefox */
            -ms-overflow-style: none; /* IE */
            backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.148);
             border-bottom: 1px solid var(--c-borde);
            border-top: 1px solid var(--c-borde);
            scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
        }
        ::-webkit-scrollbar {
            height: 3px; /* Altura del scrollbar horizontal (opcional) */
        }
        /* Estilo del "thumb" (la barra que se mueve) */
      ::-webkit-scrollbar-thumb {
          background: var(--c-suave); /* Color de la barra */
          border-radius: 6px; /* Bordes redondeados */
      }
        
        .filter-chip {
            display: inline-block;
            padding: 0.4rem 1.5rem;
            margin-right: 0.8rem;
            user-select: none;
            border-radius: 25px;
            backdrop-filter: blur(15px);
            background-color: rgba(255, 255, 255, 0.751);
            transition: all 0.3s ease;
            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;
            overflow: hidden;
        }
        .filter-chip:hover {
            cursor: pointer;
            transform: translateY(-2px);
            background: #e0e0e0;
        }
        .filter-chip.active {
            background: var(--c-primario);
            color: white;
            transform: scale(1.05);
            border-color: transparent;
        }
        .filter-chip.active i {
            transform: rotate(15deg);
        }
        .filter-chip i {
            margin-right: 0.5rem;
        }

        /* Selector de modo Tips & Tricks / Historias -- cápsula segmentada en su
           propia fila, entre el buscador y los filtros de categoría. Reutiliza el
           mismo lenguaje visual que .nav-gestures/.filter-chip (borde y blur en el
           color de marca, relleno sólido del lado activo) en vez de un componente
           nuevo. Ver setModoTpTck() en el JS para la lógica de mostrar/ocultar. */
        .dvModoTpTck{
            width: 96.5%;
            max-width: 420px;
            margin: 0.6rem auto 0;
            display: flex;
            border: 2px solid var(--c-primario);
            border-radius: 30px;
            overflow: hidden;
            backdrop-filter: blur(15px);
            background-color: rgba(255, 255, 255, 0.751);
        }
        .modoChip{
            flex: 1;
            text-align: center;
            padding: 0.5rem 0;
            font-family: 'poppinsSemiBold';
            font-size: 14px;
            color: var(--c-primario);
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
        }
        .modoChip i{
            margin-right: 0.5rem;
        }
        .modoChip.active{
            background: var(--c-primario);
            color: #fff;
        }
        .modoChip:not(.active):hover{
            background: rgba(var(--c-primario-rgb),0.12);
        }
        /* Aplicadas sobre #stCardTpsTrck según el modo activo (ver JS). Se usa
           !important porque filterItems() y buildHistoriaBubble() manipulan el
           display de cada .tip-card/.storiesRow por su cuenta (inline style) --
           esta regla debe ganar siempre para que el modo oculte todo un tipo de
           tarjeta sin importar en qué quedó su propio estado de filtro/búsqueda.
           Por ubicación, tips&Tricks_Test (tip-card + storiesRow, diseño viejo)
           es "Tips & Tricks" y se muestra en modo-tips; historias-test
           (historiasTestRow, diseño nuevo) es "Historias" y se muestra en
           modo-historias -- nunca se mezclan entre sí. */
        #stCardTpsTrck.modo-historias .tip-card{
            display: none !important;
        }
        #stCardTpsTrck.modo-historias .storiesRow{
            display: none !important;
        }
        #stCardTpsTrck.modo-tips .historiasTestRow{
            display: none !important;
        }
        /* Los filter-chip de Historias no son los mismos que los de Tips (ver
           JS: construirFiltrosHistorias() los arma dinámicamente a partir de
           las secciones reales de historias-test) -- #favoritos no lleva
           ninguna de las dos clases, así que nunca se oculta al cambiar de
           modo. */
        #filters .tipsFilterChip{ display: inline-block; }
        #filters .historiasFilterChip{ display: none; }
        #filters.mostrando-historias .tipsFilterChip{ display: none; }
        #filters.mostrando-historias .historiasFilterChip{ display: inline-block; }
        .foundCard{
          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);
          animation: pulseBkgn 2s infinite;
        }
        @keyframes pulseBkgn {
          0% {
            box-shadow: 0 0 0 0 rgba(var(--c-primario-rgb),0.4);
          }
          70% {
            box-shadow: 0 0 0 15px rgba(var(--c-primario-rgb),0);
          }
          100% {
            box-shadow: 0 0 0 0 rgba(var(--c-primario-rgb),0);
          }
        }
        .stCardTpsTrck{
            padding: 20px 20px 70px 20px;
            /* Necesario para que ".skeletonOverlay" (position:absolute) cubra
               exactamente esta caja y no algún ancestro más arriba. */
            position: relative;
        }

        /* ================================================================
           Animación de carga (skeleton) al filtrar por categoría, y aparición
           en cascada de las tarjetas ya filtradas -- puramente visual, no
           cambia en nada la lógica real de filtrado. Aplica igual para Tips
           que para Historias (ver JS: mostrarSkeletonCarga()/animarAparicionCascada()).
           ================================================================ */
        .skeletonOverlay{
            position: absolute;
            inset: 0;
            z-index: 5;
            background: var(--ghost);
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 14px;
            padding: 20px;
            border-radius: 12px;
        }
        .skeletonCard{
            border-radius: 16px;
            background: linear-gradient(90deg, #e2e8ea 25%, #eef2f3 37%, #e2e8ea 63%);
            background-size: 400% 100%;
            animation: skeletonShimmer 1.3s ease-in-out infinite;
        }
        @keyframes skeletonShimmer{
            0%{ background-position: 100% 50%; }
            100%{ background-position: 0 50%; }
        }
        .skeletonCard.skeletonTip{ flex: 1 1 260px; height: 130px; }
        .skeletonCard.skeletonHistoria{ flex: 1 1 280px; height: 170px; }

        /* 5 variantes de aparición en cascada -- se elige una al azar en cada
           filtro (ver CASCADE_ANIM_CLASSES en el JS), y cada tarjeta entra un
           poco después que la anterior via animation-delay puesto por JS. */
        .cascadeIn{
            animation-fill-mode: both;
            animation-duration: .5s;
            animation-timing-function: cubic-bezier(.22,.68,0,1.2);
            /* FIX (bug real: "se queda como brincando o refrescando
               constantemente" tras una búsqueda con coincidencia): esta
               animación de entrada está pensada para correr UNA sola vez
               (0.5s) y quedarse en su estado final gracias a
               "animation-fill-mode: both". Pero nunca declaraba
               "animation-iteration-count" -- y ".foundCard" (la clase que
               resalta la tarjeta encontrada por la búsqueda, ver más abajo)
               sí usa la propiedad corta "animation: pulseBkgn 2s infinite;",
               que fija TODAS las sub-propiedades de animación a la vez,
               incluyendo "animation-iteration-count: infinite". Cuando una
               tarjeta tenía ambas clases a la vez (típico: se le acababan de
               aplicar estas 5 variantes de entrada por un filtro de
               categoría, y la búsqueda la encontraba y le agregaba
               ".foundCard" encima), la cascada de CSS resuelve cada
               sub-propiedad por separado -- "animation-name"/"duration"/
               "timing-function"/"fill-mode" seguían ganándolos las reglas de
               aquí abajo (por venir después en este archivo), pero
               "animation-iteration-count" nadie más lo declaraba, así que se
               colaba el "infinite" de ".foundCard". Resultado: la animación
               de entrada (pensada para una sola vez) se repetía sin parar
               mientras ".foundCard" siguiera puesta (25.5s, ver
               tipsTrick.js) -- eso era el "brinco"/parpadeo constante.
               Verificado de forma aislada (Playwright): con esta línea,
               "getComputedStyle(...).animationIterationCount" da "1" en vez
               de "infinite" para un elemento con ambas clases a la vez. */
            animation-iteration-count: 1;
        }
        .a-fadeUp{ animation-name: cascadeFadeUp; }
        @keyframes cascadeFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
        .a-scale{ animation-name: cascadeScale; }
        @keyframes cascadeScale{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }
        .a-slideSide{ animation-name: cascadeSlideSide; }
        @keyframes cascadeSlideSide{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:translateX(0); } }
        .a-flip{ animation-name: cascadeFlip; }
        @keyframes cascadeFlip{ from{ opacity:0; transform:perspective(600px) rotateX(35deg); } to{ opacity:1; transform:perspective(600px) rotateX(0); } }
        .a-bounce{ animation-name: cascadeBounce; animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
        @keyframes cascadeBounce{ 0%{ opacity:0; transform:scale(.7); } 60%{ opacity:1; transform:scale(1.05); } 100%{ opacity:1; transform:scale(1); } }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }
        
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Efecto de "Imán" al arrastrar */
        .filters-container.scrolling {
            cursor: grabbing;
            cursor: -webkit-grabbing;
        }

        /*Modal social media*/
    .modalVwVd {
      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;
      
    }
    .mdlShwTpTick {
        background-color: #fff;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        width: 400px;
        height: 600px;
        max-width: 700px;
         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: 0 4px 20px rgba(0,0,0,0.25);
        animation: fadeInScale 1.5s ease-out forwards;
    }
    
  @keyframes fadeInScale {
    0% {
      opacity: 0;
    }
    50%{
        opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
    
.videoCont {
  position: relative;
  align-items: center;
  width: auto;
  height: 480px;
  overflow: hidden;
}

.videoCont iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

    .dvClsMdlSrch{
  height: 5px;
  width: 100%;
  text-align: right;
}
.clMdlSrchRcp{
  font-family: 'poppinsRegular';
  font-size: 14px;
  padding: 0px 7px 0px 7px;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.148);
  border-top-left-radius: 25px;
  border-top-right-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);
}
.clMdlSrchRcp: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);
}

.DvTxtMdVd{
    margin-top: 20px;
    margin-left: 2%;
    text-align: left;
}
.txtNmVd{
    font-family:'poppinsSemiBold';
    font-size: 19px;
}


    /*Modal logIn*/
    
    .modalMainLogIn{
    display: none;
    position: fixed; /* Stay in place */
    z-index: 7; /* 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: rgb(255, 255, 255); /* Black w/ opacity */
    animation-name: loadModal;
    animation-duration: 1s;
  }
   form {
    max-width: 450px;
    height: 550px;
    margin: 2% auto;
    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);
  }
  .dvAmgImg{
    text-align: center;
  }
   #imgAmbgLog{
    border-radius: 25px;
    width: 240px;
    height: 240px;
  }
  .divEml{
    margin-left: 7%;
    margin-right: 7%;
  }
   #loginEmail{
    background-color: white;
    text-align: center;
    width:96%;
    height: 25px;
    font-size: 17px;
    padding: 7px;
    border: 0.5px solid var(--c-borde);
    border-radius: 12px;
    background-image: url("../../folder/img/Correo.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  #loginEmail:focus{
    background-image: url("../../folder/img/Correo.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  #loginEmail:active{
    background-image: url("../../folder/img/Correo.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  
  .divPass{
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 3%;
  }
  #loginPassword{
    text-align: center;
    width: 96%;
    padding: 7px;
    height: 25px;
    font-size: 17px;
    border: 0.5px solid var(--c-borde);
    border-radius: 12px;
    background-image: url("../../folder/img/Contraseña.svg");
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 1% 45%;
  }
  .dvShwPs{
    margin-top: 2%;
  }
  .txBxPss{
    margin-left: 7%;
  }
  .txBxPss:hover{
    cursor: pointer;
  }
  .txtRcvPw{
    margin-left: 7%;
    font-size: 17px;
    font-family:'poppinsLight';
    text-decoration: underline;
  }
  .txtRcvPw:hover{
    cursor: pointer;
    color: var(--c-primario);
  }
  .dvLgBtn{
    text-align: center;
  }
  .dvGl{
    text-align: center;
    margin-top: 4%;
  }
  .btnRgst{
    padding: 7px 70px 7px 70px;
    color: white;
    background-color: var(--c-primario);
    font-size: 17px;
    font-family: 'poppinsRegular';
    margin: 30px 0px 0px;
    text-align: center;
    border: 0.5px solid var(--c-primario);
    border-radius: 20px;
  }
  .btnRgst:hover{
    cursor:pointer;
    transform: scale(1.02);
    background-color: var(--c-primario);
    box-shadow: 5px 5px 5px #C7C7C7;
    opacity: 0.9;
  }

  #ldSving{
  display: none;
}
  /* Estilos del loader */
.ldSving {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegura que esté por encima de todo */
}
/*Load animation*/
.lds-ripple,
.lds-ripple div {
  box-sizing: border-box;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  color: white;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid currentColor;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
.ldsTxt{
  position: absolute;
  top: 80px;
  right: -25px;
  text-align: center;
  width: 120px;
  color: white;
  font-size: 17px;
  font-family: 'poppinsRegular';
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}
.back-to-top {
            position: fixed;
            bottom: 30px;
            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: var(--c-medio);
            color: white;
            transform: translateY(-3px);
            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);
            }
        }

        /* ================================================================
           Historias Tip & Trick (tips nuevos con "screens": burbuja + visor)
           No modifica ninguna regla existente arriba de este bloque.
           ================================================================ */

        /* Fila de tarjetas, primer contenido dentro de #stCardTpsTrck. Este es el
           diseño ORIGINAL (burbuja/tarjeta vertical 3:4 con color fijo por
           categoría) -- corresponde SOLO a historias "viejas" migradas dentro de
           tips&Tricks_Test (documentos con "screens" pero sin color/section/emoji
           reales). Por ubicación son tips y se manejan exactamente como siempre;
           el rediseño panorámico aprobado para las historias de verdad vive
           aparte, en ".historiasTestRow"/".historia-item" más abajo. */
        .storiesRow{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 18px;
            padding: 4px 4px 22px 4px;
        }
        .storiesRow:empty{ display: none; padding: 0; }
        @media (min-width: 640px){
            .storiesRow{ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
        }
        @media (min-width: 1024px){
            .storiesRow{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
        }
        .story-item{
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: block;
            text-align: left;
            font-family: inherit;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 3 / 4;
            box-shadow: 0 4px 14px rgba(30,60,90,0.16);
            transition: transform .25s ease;
        }
        .story-item:hover{ transform: translateY(-4px); }
        .story-item .ring{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: 0;
            padding: 0;
            display: block;
            background: var(--catOtros);
            box-shadow: none;
        }
        .story-item[data-category="Comida"] .ring{ background: var(--catComida); }
        .story-item[data-category="Cocina"] .ring{ background: var(--catCocina); }
        .story-item[data-category="Ahorra tiempo"] .ring{ background: var(--catAhorraTiempo); }
        .story-item[data-category="No más desperdicios"] .ring{ background: var(--catNoDesperdicios); }
        .story-item[data-category="Ropa"] .ring{ background: var(--catRopa); }
        .story-item[data-category="Hogar"] .ring{ background: var(--catHogar); }
        .story-item[data-category="Mascotas"] .ring{ background: var(--catMascotas); }
        .story-item[data-category="Jardín"] .ring{ background: var(--catJardin); }
        .story-item[data-category="Otros"] .ring{ background: var(--catOtros); }
        .story-item .avatar{
            width: 100%;
            height: 100%;
            border-radius: 0;
            background-size: cover;
            background-position: center;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        .story-item .histFade{
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 65%);
        }
        .story-item .histCatPill{
            position: absolute;
            top: 10px;
            left: 10px;
            font-family: 'poppinsSemiBold';
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .02em;
            color: #fff;
            background: rgba(0,0,0,0.28);
            padding: 4px 10px;
            border-radius: 12px;
            z-index: 2;
        }
        .story-item[data-category="Comida"] .histCatPill{ background: var(--catComida); }
        .story-item[data-category="Cocina"] .histCatPill{ background: var(--catCocina); }
        .story-item[data-category="Ahorra tiempo"] .histCatPill{ background: var(--catAhorraTiempo); }
        .story-item[data-category="No más desperdicios"] .histCatPill{ background: var(--catNoDesperdicios); }
        .story-item[data-category="Ropa"] .histCatPill{ background: var(--catRopa); }
        .story-item[data-category="Hogar"] .histCatPill{ background: var(--catHogar); }
        .story-item[data-category="Mascotas"] .histCatPill{ background: var(--catMascotas); }
        .story-item[data-category="Jardín"] .histCatPill{ background: var(--catJardin); }
        .story-item[data-category="Otros"] .histCatPill{ background: var(--catOtros); }
        .story-item .srcIcon{
            position: absolute;
            top: 10px;
            right: 10px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 5px rgba(0,0,0,0.3);
            z-index: 2;
        }
        .story-item .srcIcon i{ font-size: 13px; }
        .story-item .srcIcon img{ width: 15px; height: 15px; object-fit: contain; display: block; }
        .story-item .srcIcon.srcIconTikTok i{ color: #000; padding-left: 20px;}
        .story-item .srcIcon.srcIconYouTube i{ color: #c4302b; padding-left: 20px;}
        .story-item .srcIcon.srcIconInstagram i{ color: #D43089; }
        .story-item .histCaption{ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; }
        .story-item .label{ font-family: 'poppinsSemiBold'; font-size: 13px; color: #fff; line-height: 1.3; text-align: left; }
        .story-item .teaser{
            margin-top: 4px;
            font-family: 'poppinsLight';
            font-size: 11.5px;
            color: rgba(255,255,255,0.85);
            line-height: 1.3;
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .story-item .teaser:empty{ display: none; }
        @media (min-width: 640px){
            .story-item .histCatPill{ font-size: 11.5px; padding: 5px 11px; top: 12px; left: 12px; }
            .story-item .srcIcon{ width: 28px; height: 28px; top: 12px; right: 12px; }
            .story-item .srcIcon i{ font-size: 14px; }
            .story-item .srcIcon img{ width: 16px; height: 16px; }
            .story-item .histCaption{ left: 14px; right: 14px; bottom: 14px; }
            .story-item .label{ font-size: 15px; }
            .story-item .teaser{ font-size: 12.5px; }
        }
        @media (min-width: 1024px){
            .story-item .histCatPill{ font-size: 12.5px; padding: 6px 13px; top: 14px; left: 14px; }
            .story-item .srcIcon{ width: 30px; height: 30px; top: 14px; right: 14px; }
            .story-item .srcIcon i{ font-size: 15px; }
            .story-item .srcIcon img{ width: 18px; height: 18px; }
            .story-item .histCaption{ left: 16px; right: 16px; bottom: 16px; }
            .story-item .label{ font-size: 17px; }
            .story-item .teaser{ font-size: 13.5px; }
        }

        /* ================================================================
           Historias de verdad: colección aparte "historias-test" (NO
           tips&Tricks_Test). Tarjeta PANORÁMICA sin marco -- foto de fondo a
           toda la tarjeta, degradado, pill de sección arriba a la derecha y
           sello del emoji arriba a la izquierda -- diseño aprobado por el
           usuario ("Opción 4 marco + sello, sin el marco"). El color de
           acento de cada tarjeta lo pone colorHistoria() en JS como inline
           style (recipe.color, con respaldo por tag y luego el azul de
           marca), por eso aquí no hay reglas por [data-category].
           ================================================================ */
        .historiasTestRow{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
            padding: 4px 4px 22px 4px;
        }
        .historiasTestRow:empty{ display: none; padding: 0; }
        @media (min-width: 640px){
            .historiasTestRow{
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 18px;
            }
        }
        @media (min-width: 1024px){
            .historiasTestRow{
                grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
                gap: 20px;
            }
        }
        .historia-item{
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: block;
            text-align: left;
            font-family: inherit;
            border-radius: 14px;
            overflow: hidden;
            position: relative;
            height: 170px;
            box-shadow: 0 4px 14px rgba(30,60,90,0.16);
            transition: transform .25s ease;
        }
        .historia-item:hover{ transform: translateY(-4px); }
        @media (min-width: 640px){ .historia-item{ height: 190px; } }
        @media (min-width: 1024px){ .historia-item{ height: 400px; } }
        .historia-item .ring{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: var(--catOtros);
        }
        .historia-item .avatar{
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .historia-item .histFade{
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 75%);
        }
        .historia-item .histCatPill{
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'poppinsSemiBold';
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .02em;
            color: #fff;
            padding: 4px 10px;
            border-radius: 12px;
            z-index: 2;
            /* Vidrio esmerilado -- ya no usa el color que trae historia-test desde
               Firebase (ese color solo queda en el aro/".ring" de respaldo). */
            background: rgba(255, 255, 255, 0.148);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }
        .historia-item .histSeal{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
            z-index: 2;
            /* Mismo vidrio esmerilado que el pill, en vez del color de Firebase. */
            background: rgba(255, 255, 255, 0.148);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }
        .historia-item .histSeal i{ font-size: 13px; color: #fff; }
        .historia-item .histSeal img{ width: 14px; height: 14px; object-fit: contain; display: block; }
        .historia-item .histCaption{
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 10px;
            z-index: 2;
        }
        .historia-item .label{
            font-family: 'poppinsSemiBold';
            font-size: 13px;
            color: #fff;
            line-height: 1.3;
            text-align: left;
        }
        .historia-item .teaser{
            margin-top: 3px;
            font-family: 'poppinsLight';
            font-size: 11px;
            color: rgba(255,255,255,0.85);
            line-height: 1.3;
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .historia-item .teaser:empty{ display: none; }
        @media (min-width: 640px){
            .historia-item .histCatPill{ font-size: 11px; padding: 5px 11px; top: 12px; right: 12px; }
            .historia-item .histSeal{ width: 32px; height: 32px; top: 12px; left: 12px; }
            .historia-item .histSeal i{ font-size: 14px; }
            .historia-item .histSeal img{ width: 15px; height: 15px; }
            .historia-item .histCaption{ left: 14px; right: 14px; bottom: 12px; }
            .historia-item .label{ font-size: 14.5px; }
            .historia-item .teaser{ font-size: 12px; }
        }
        @media (min-width: 1024px){
            .historia-item .histCatPill{ font-size: 11.5px; padding: 5px 12px; top: 14px; right: 14px; }
            .historia-item .histSeal{ width: 34px; height: 34px; top: 14px; left: 14px; }
            .historia-item .histSeal i{ font-size: 15px; }
            .historia-item .histSeal img{ width: 16px; height: 16px; }
            .historia-item .histCaption{ left: 16px; right: 16px; bottom: 14px; }
            .historia-item .label{ font-size: 21px; }
            .historia-item .teaser{ font-size: 12.5px; }
        }

        /* Visor de historia (2 paneles + temporizador) */
        .modalHistTpTck{
            position: fixed;
            inset: 0;
            z-index: 950;
            background: rgba(0,0,0,.55);
            display: none;
            align-items: center;
            justify-content: center;
            perspective: 1200px;
        }
        .modalHistTpTck.open{ display: flex; }

        .dvHistTpTck{
            width: 100%;
            max-width: 1000px;
            height: 88vh;
            max-height: 560px;
            margin: 0 20px;
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            box-shadow: 0 20px 50px rgba(0,0,0,.3);
            /* Necesario para que ".clsHistTpTck" (ahora hijo directo de aquí, ver
               HTML) se posicione en absoluto respecto a TODA la tarjeta y no
               respecto al modal completo de pantalla completa. */
            position: relative;
        }

        /* Animaciones de entrada de la tarjeta: se asigna una al azar de las 5 cada
           vez que se abre una historia (ver openHistTpTck() en tipsTrick.js). Solo
           una de estas 5 clases está presente en cada apertura. */
        @keyframes histAnimFadeScaleKf{
            from{ opacity: 0; transform: scale(.88); }
            to{ opacity: 1; transform: scale(1); }
        }
        .dvHistTpTck.histAnimFadeScale{ animation: histAnimFadeScaleKf .38s cubic-bezier(.2,.7,.3,1); }

        @keyframes histAnimSlideUpKf{
            from{ opacity: 0; transform: translateY(46px); }
            to{ opacity: 1; transform: translateY(0); }
        }
        .dvHistTpTck.histAnimSlideUp{ animation: histAnimSlideUpKf .42s cubic-bezier(.16,.8,.3,1); }

        @keyframes histAnimSlideDownKf{
            from{ opacity: 0; transform: translateY(-46px); }
            to{ opacity: 1; transform: translateY(0); }
        }
        .dvHistTpTck.histAnimSlideDown{ animation: histAnimSlideDownKf .42s cubic-bezier(.16,.8,.3,1); }

        @keyframes histAnimFlipInKf{
            from{ opacity: 0; transform: rotateY(-90deg); }
            to{ opacity: 1; transform: rotateY(0deg); }
        }
        .dvHistTpTck.histAnimFlipIn{ animation: histAnimFlipInKf .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }

        @keyframes histAnimBounceInKf{
            0%{ opacity: 0; transform: scale(.5); }
            60%{ opacity: 1; transform: scale(1.05); }
            80%{ transform: scale(.97); }
            100%{ transform: scale(1); }
        }
        .dvHistTpTck.histAnimBounceIn{ animation: histAnimBounceInKf .55s cubic-bezier(.34,1.56,.64,1); }

        /* Animación de título/subtítulo en cada cambio de pantalla (no solo al
           abrir la tarjeta): fundido + desliz sutil hacia arriba. El subtítulo
           entra con un pequeño retraso (cascada) respecto al título. La clase
           .histTxtIn se quita y se vuelve a agregar forzando reflow cada vez
           que renderHistScreen() cambia de pantalla, ver tipsTrick.js. */
        @keyframes histTxtFadeUpKf{
            from{ opacity: 0; transform: translateY(14px); }
            to{ opacity: 1; transform: translateY(0); }
        }
        .txtHistHeadline.histTxtIn{ animation: histTxtFadeUpKf .38s cubic-bezier(.2,.7,.3,1); }
        .txtHistSub.histTxtIn{ animation: histTxtFadeUpKf .38s cubic-bezier(.2,.7,.3,1) .06s backwards; }

        .imgHistTpTck{
            width: 50%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-color: var(--pale);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60px;
            position: relative;
        }
        /* A petición del usuario: cuando el tip no tiene imagen, en vez de la
           caja vacía color --pale se muestra el ícono de PlanAppetit, centrado
           y SIN recortarse (por eso background-size:contain acá y no "cover",
           que sí se usa arriba para fotos reales). */
        .imgHistTpTck.imgHistTpTckSinImg{
            background-size: 35%;
            background-repeat: no-repeat;
            background-position: center;
        }
        /* Marca de agua de PlanAppetit sobre la foto -- a petición del usuario
           (opción B del mockup: 42px, opacidad .55, esquina inferior derecha
           de la FOTO, no del modal completo). Se oculta cuando ya se está
           mostrando el ícono de PlanAppetit centrado como respaldo (tip sin
           foto) para no duplicarlo. */
        .imgHistTpTckWatermark{
            position: absolute;
            bottom: 14px;
            right: 14px;
            width: 34px;
            height: 38px;
            object-fit: contain;
            opacity: .55;
            filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
            pointer-events: none;
            background: rgba(255, 255, 255, 1);
            backdrop-filter: blur(25px);
            border-radius: 12px;
            border: 1px solid var(--c-primario);
            padding: 1.7px 4px;
        }
        .imgHistTpTck.imgHistTpTckSinImg .imgHistTpTckWatermark{
            display: none;
        }
        .dvHistRightTpTck{
            width: 60%;
            height: 100%;
            /* Causa real de por qué los botones Anterior/Siguiente se recortaban: con
               box-sizing:content-box (el valor por defecto), "height:100%" mide solo el
               contenido y el padding (46px verticales) se suma ENCIMA, así que este panel
               terminaba siendo 46px más alto que la tarjeta -- exactamente lo que empujaba
               a ".dvHistNav" fuera del marco visible. border-box hace que el 100% incluya
               el padding, para que el panel mida lo mismo que la tarjeta. */
            box-sizing: border-box;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 22px 26px 24px 26px;
            position: relative;
        }
        /* Favoritos/compartir: esquina superior derecha del panel, debajo del botón "X"
           de cerrar (que vive dentro de ".dvHistHeader", más arriba), uno debajo del otro.
           ".lkImgHist"/".shrIcnHist" pisan la posición absoluta pensada para la tarjeta
           clásica (".lkImg{top:36px;right:11px}") porque tienen más especificidad (dos
           clases) y porque este panel tiene su propio padding como referencia. */
        .dvHistRightTpTck .lkImgHist{
            position: absolute;
            top: 38px;
            right: 20px;
        }
        .dvHistRightTpTck .shrIcnHist{
            position: absolute;
            top: 80px;
            right: 20px;
        }

        .dvHistProgress{ display: flex; gap: 6px; margin-bottom: 16px; }
        .histSeg{
            flex: 1;
            height: 4px;
            border-radius: 4px;
            background: var(--pale);
            overflow: hidden;
        }
        .histSeg .histFill{
            height: 100%;
            width: 100%;
            background: var(--dark);
            border-radius: 4px;
            transform-origin: left;
            transform: scaleX(0);
        }
        .histSeg .histFill.done{ transform: scaleX(1); }
        .histSeg .histFill.animating{
            animation: histFillAnim 7000ms linear forwards;
        }
        @keyframes histFillAnim{
            from{ transform: scaleX(0); }
            to{ transform: scaleX(1); }
        }

        .dvHistHeader{ display: flex; align-items: flex-start; gap: 10px; }
        .imgHistAvatar{
            width: 34px;
            height: 34px;
            border-radius: 50%;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            background-color: var(--pale);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .dvHistHeaderTxt{ flex: 1; display: flex; flex-direction: column; }
        .txtHistTitle{ font-family: 'poppinsSemiBold'; font-size: 21px; color: var(--ink); line-height: 1.3; padding-right: 21px; }
        .txtHistTeaser{ font-family: 'poppinsLight'; font-size: 14px; color: var(--muted); margin-top: 2px; }
        .clsHistTpTck{
            position: absolute;
            top: 16px;
            left: 16px;
            z-index: 8;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.869);
            backdrop-filter: blur(5px);
            color: var(--slate);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-family: 'poppinsSemiBold';
            cursor: pointer;
            flex-shrink: 0;
            /* Ahora queda flotando sobre la imagen (esquina superior izquierda de
               toda la tarjeta), así que se agrega una sombra suave para que se
               distinga sin depender de qué tan clara/oscura sea la foto de fondo. */
            box-shadow: 0 2px 6px rgba(0,0,0,.25);
        }
        .clsHistTpTck:hover{ background: var(--base); color: #fff; }

        /* Bloque de cuerpo variable (categoría/título/resumen/atribución/escuchar) con
           scroll propio -- así, si el contenido no cabe en el panel, lo que se recorta
           es esto y nunca los botones Anterior/Siguiente de ".dvHistNav" (que ahora
           quedan fuera de este bloque, fijos siempre al fondo del panel). */
        .dvHistScroll{
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            /* Scroll vertical delgado y con el azul de marca -- a petición del
               usuario, solo dentro de este bloque (Firefox). El equivalente
               para Chrome/Safari va justo abajo, con los selectores
               ::-webkit-scrollbar. */
            scrollbar-width: thin;
            scrollbar-color: var(--base) transparent;
        }
        .dvHistScroll::-webkit-scrollbar{
            width: 3px;
        }
        .dvHistScroll::-webkit-scrollbar-thumb{
            background: var(--base);
            border-radius: 6px;
        }
        .dvHistScroll::-webkit-scrollbar-track{
            background: transparent;
        }
        /* "Ver Tip" y el bloque de escuchar comparten una sola fila: "Ver Tip" del
           lado izquierdo, escuchar del lado derecho (justify-content:space-between
           con solo 2 hijos los manda cada uno a un extremo, sin importar el ancho
           real de ninguno de los dos). */
        .dvHistBottomRow{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-top: 20px;
            margin-top: auto;
            margin-bottom: 40px;
        }
        /* "Ver tip" (ej. video/red social): mismas clases e íconos que ya existen en la
           tarjeta clásica (.txtDvVd), solo con una posición distinta para que quepa en
           este layout de 2 paneles. */
        .dvHistActions{ display: flex; align-items: center; gap: 10px; margin: 0; }
        #txtDvVdHistSlot .txtDvVd{ position: static; }
        /* .voice-container-hist: mismas clases e íconos que ya existen en la tarjeta
           clásica (.icnHrt). Ya no necesita "align-self:flex-end" (eso servía para
           anclarlo a la derecha cuando su padre era ".dvHistScroll", en columna; ahora
           su padre es ".dvHistBottomRow", en fila, y basta con ser el segundo hijo de
           un "justify-content:space-between" para quedar del lado derecho).
           "position:absolute; right:100%" en ".voice-controls" hace que crezca hacia
           la izquierda sin desplazar nunca a "#icnHrtHist" (evita que el tooltip se
           cierre solo por el reflow al pasar el cursor). */
        .voice-container-hist{ display: inline-flex; position: relative; }
        .voice-container-hist .voice-controls{
            position: absolute;
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 6px;
        }


        .txtHistEyebrow{
            display: inline-block;
            margin-top: 27px;
            font-family: 'poppinsSemiBold';
            font-size: 14px;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--dark);
            border-radius: 999px;
            align-self: flex-start;
        }
        .modalHistTpTck[data-category="Comida"] .txtHistEyebrow{ color: var(--catComida); }
        .modalHistTpTck[data-category="Cocina"] .txtHistEyebrow{ color: var(--catCocina); }
        .modalHistTpTck[data-category="Ahorra tiempo"] .txtHistEyebrow{ color: var(--catAhorraTiempo); }
        .modalHistTpTck[data-category="No más desperdicios"] .txtHistEyebrow{ color: var(--catNoDesperdicios); }
        .modalHistTpTck[data-category="Ropa"] .txtHistEyebrow{ color: var(--catRopa); }
        .modalHistTpTck[data-category="Hogar"] .txtHistEyebrow{ color: var(--catHogar); }
        .modalHistTpTck[data-category="Mascotas"] .txtHistEyebrow{ color: var(--catMascotas); }
        .modalHistTpTck[data-category="Jardín"] .txtHistEyebrow{ color: var(--catJardin); }
        .modalHistTpTck[data-category="Otros"] .txtHistEyebrow{ color: var(--catOtros); }

        /* Resaltado visual mientras se está "leyendo" el tip en voz alta (punto 3).
           Se coloca DESPUÉS de las reglas de color por categoría de arriba para
           ganar el empate de especificidad por orden de aparición (si se pusiera
           antes, el color de categoría lo pisaría). */
        .txtHistEyebrow.histReading{ background: var(--dark); color: #fff; }
        .txtHistHeadline.histReading, .txtHistSub.histReading{
            background: rgba(var(--c-primario-rgb),0.08);
            box-shadow: 0 0 0 3px rgba(var(--c-primario-rgb),0.18) inset;
            border-radius: 4px;
        }

        .txtHistHeadline{
            display: block;
            font-family: 'poppinsSemiBold';
            font-size: 19px;
            color: var(--ink);
            line-height: 1.28;
            margin-top: 17px;
        }
        .txtHistSub{
          text-align: justify;
            display: block;
            font-family: 'poppinsLight';
            font-size: 15px;
            color: var(--slate);
            line-height: 1.5;
            margin-top: 12px;
        }
        .txtHistAttrib{
            display: block;
            margin-top: 10px;
            font-family: 'poppinsLight';
            font-size: 12px;
            color: var(--muted);
            word-break: break-all;
        }
        /* Remarca la red social (ej. "TikTok") dentro de txtHistAttrib -- a
           petición del usuario. */
        .txtHistAttribRed{
            font-family:'poppinsLight';
            font-size: 13.5px;
            color: var(--base);
        }
        /* URL original debajo de txtHistAttrib. A propósito NO es un <a> --
           solo se muestra como texto, no debe llevar a ningún lado al hacer clic. */
        .txtHistAttribUrl{
            text-align: justify;
            display: block;
            margin-top: 4px;
            font-family: 'poppinsLight';
            font-size: 12px;
            color: var(--muted);
            word-break: break-all;
        }
        .txtHistAttribUrl:empty{ display: none; }
        /* Usuario debajo de la URL -- mismo estilo que .stAthVd (modal clásico
           de video), solo se le agrega el espaciado propio de este bloque. */
        .txtHistAttribUser{
            display: block;
            margin-top: 4px;
            font-family: 'poppinsLight';
            font-size: 12px;
            color: var(--muted);
            word-break: break-all;
        }
        .txtHistAttribUser:empty{ display: none; }

        .dvHistNav{ margin-top: auto; display: flex; gap: 12px; }
         .dvHistNavB{ margin-top: auto; }
        .btnHistNav{
            flex: 1;
            text-align: center;
            font-family: 'poppinsSemiBold';
            font-size: 14px;
            padding: 12px 0;
            border-radius: 999px;
            cursor: pointer;
            border: none;
        }
        .btnHistPrev{ background: var(--ghost); color: var(--slate); }
        .btnHistPrev:hover{ background: var(--pale); }
        .btnHistNext{ background: var(--dark); color: #fff; }
        .btnHistNext:hover{ background: var(--deep); }
        .btnHistNav:disabled{ opacity: .4; cursor: default; }

        @media (max-width: 700px){
            .dvHistTpTck{ flex-direction: column; height: 92vh; max-height: none; }
            .imgHistTpTck{ width: 100%; height: 38%; }
            /* El scroll interno ya lo maneja ".dvHistScroll" a cualquier ancho; aquí solo
               se ajusta el tamaño del panel para el layout apilado en móvil. */
            .dvHistRightTpTck{ width: 100%; height: 62%; }
        }

        /* Responsive */
        @media (max-width: 480px){
          .txtDvTitlCrd{
            font-size: 17px;
        }
        .txtDvTag{
            font-size: 14px;
        }
        .txtDvDescrp{
            font-size: 14px;
        }
        }

        /* ============================================================
           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); /* guía v2: fondo del pie de página */
            border-top: 1px solid var(--pale);
        }
        .txtFtPlnApp{
            font-family: 'poppinsLight';
            font-size: 12px;
            color: var(--slate);
            line-height: 1.5;
        }
        .lkFtTerminos{
            font-family: 'poppinsSemiBold';
            color: var(--c-texto); /* verde sobre el fondo --c-pie no se lee: se usa el texto oscuro */
            text-decoration: underline;
            cursor: pointer;
        }
        .lkFtTerminos:hover{ opacity: .75; }