/*!
Theme Name: Tema Darvida
Theme URI: http://underscores.me/
Author: Himalaya SEM
Author URI: https://himalayadigital.co/
Description: Theme Diseñado y Desarrollado para la marca Darvida
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: darvida
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Tema Darvida is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* =========================
   NiveauGrotes – varias pesadas
   ========================= */
@font-face {
  font-family: 'NiveauGrotes';
  src: url('fonts/NiveauGroteskRegular.woff2') format('woff2'),
       url('fonts/NiveauGroteskRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NiveauGrotes';
  src: url('fonts/NiveauGroteskMedium.woff2') format('woff2'),
       url('fonts/NiveauGroteskMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'NiveauGrotes';
  src: url('fonts/NiveauGroteskBold.woff2') format('woff2'),
       url('fonts/NiveauGroteskBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'NiveauGrotes';
  src: url('fonts/NiveauGroteskBlack.woff2') format('woff2'),
       url('fonts/NiveauGroteskBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Blogh
   ========================= */
@font-face {
  font-family: 'Blogh';
  src: url('fonts/Blogh.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== Uso recomendado ===== */
:root{
  --font-base: 'NiveauGrotes', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: 'Blogh', 'NiveauGrotes', sans-serif;
}

body { font-family: var(--font-base); }

button.hamburger.hamburger--squeeze{
	width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
        justify-content: center;
	border-radius: 17px;
	background: #FFF;
	box-shadow: 0 2px 6.8px 0 rgba(0, 0, 0, 0.15), 10px -12px 4px 0 rgba(0, 0, 0, 0.00), 6px -8px 4px 0 rgba(0, 0, 0, 0.01), 3px -4px 3px 0 rgba(0, 0, 0, 0.05), 2px -2px 3px 0 rgba(0, 0, 0, 0.09), 0 0 1px 0 rgba(0, 0, 0, 0.10);
	z-index: 9999;
}


/* === pastilla blanca con sombra suave === */

/* tamaño del “box” del icono */
.hamburger .hamburger-box{
  width: 28px;   /* ancho útil del icono */
  height: 20px;  /* alto útil del icono */
}

/* color/forma de las barras */
.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after{
  background-color: #FF782D;  /* naranja del ejemplo */
  width: 28px;                /* barra base (la central) */
  height: 3px;                
  border-radius: 99px;        /* puntas redondeadas */
  transition-duration: .2s;   /* que sea suave */
  transform-origin: center;   /* para que el scaleX encoja desde el centro */
}

/* separaciones verticales (con la altura que pusimos) */
.hamburger .hamburger-inner{ 
  top: 50%;
  margin-top: -2px;           /* = height/2 (4/2) */
}
.hamburger .hamburger-inner::before{
  top: -8px;                  /* separación superior */
}
.hamburger .hamburger-inner::after{
  bottom: -8px;               /* separación inferior */
}

/* longitudes distintas (como en la imagen) */
.hamburger .hamburger-inner::before{
  transform: scaleX(0.70);    /* barra superior más corta */
}
.hamburger .hamburger-inner::after{
  transform: scaleX(0.45);    /* barra inferior aún más corta */
}

/* opcional: quitar outline azul del botón (mantén focus visible a tu gusto) */
.hamburger:focus{ outline: none; }

/* (opcional) al estar activa, conservamos el color naranja */
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after{
  background-color: #FF782D;
}

/* Alinear barras a la derecha en estado normal */
.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after{
  left: auto;               /* deja de centrar */
  right: 0;                 /* ancla a la derecha */
  transform-origin: right center; /* encoge desde la derecha */
}

/* longitudes (ajusta a gusto) */
.hamburger .hamburger-inner{ width: 28px; }           /* barra central */
.hamburger .hamburger-inner::before{ transform: scaleX(0.70); } /* superior más corta */
.hamburger .hamburger-inner::after{  transform: scaleX(0.45); } /* inferior más corta */

.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner::before, 
.hamburger.is-active .hamburger-inner::after{
	    transform-origin: center;
}
.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner:after, 
.hamburger.is-active .hamburger-inner:before {
    background-color: #FF782D !important;
}
.navbar{
	background-color: white;
}
ul.icons_redes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.logo img{
  width: 115px;
}
.icons_redes svg {
    width: 35px;
    height: 35px;
}
#menu-principal a.nav-link {
    font-size: 1.25rem;
    font-weight: 500;
    color: #FF782D;
    padding: 8px;
}
ul#menu-principal {
    gap: 25px;
    border-radius: 70px;
    background: rgba(255, 255, 255, 0.90);
    padding: 20px 30px;
    box-shadow: 0 50px 14px 0 rgba(0, 0, 0, 0.00), 0 32px 13px 0 rgba(0, 0, 0, 0.01), 0 18px 11px 0 rgba(0, 0, 0, 0.03), 0 8px 8px 0 rgba(0, 0, 0, 0.04), 0 2px 4px 0 rgba(0, 0, 0, 0.05);

}

/* MENÚ VERTICAL */
.menu-vertical {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 30%;
    background: #FF782D;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
    padding-left: 50px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 999;
    overflow-y: auto;
    display: flex;
    align-items: start;
	justify-content: space-between;
	    flex-direction: column;
		padding-bottom: 1rem;
		    padding-right: 50px;
}

.menu-vertical.show {
    transform: translateX(0);
}
.menu-vertical .navbar-nav {
    padding: 0;
    list-style: none;
    /* background-color: #FF782D; */
    border: none;
    width: 50%;
    padding-top: 6.5rem;
}
.menu-vertical .sigue {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.menu-vertical .navbar-nav a.nav-link,
#menu-secundario-ul ul.dropdown-menu .dropdown-item {
    font-size: 24px;
    font-weight: 500;
    color: white;
}
#menu-secundario-ul ul.dropdown-menu {
    background-color: transparent;
    border: none;
    padding: 0;
}
.menu-vertical .sigue span{
	letter-spacing: 2.88px;
    font-size: 20px;
    color: white;
    margin-right: 10px;
}
.dropdown-item:focus, .dropdown-item:hover{
	background-color: transparent;
}
/* Contenedor vertical */
.menu-vertical .navbar-nav{ width:100%; }

/* Submenús dentro del flujo (no flotantes) */
.menu-vertical .dropdown-menu{
  display:none;             /* oculto por defecto (lo controla jQuery) */
  position:static;          /* clave para vertical */
  float:none;
  border:0;
  box-shadow:none;
  margin:.25rem 0 0;
  padding:.25rem 0 .5rem .9rem; /* sangría del submenú */
}

/* En Bootstrap el caret es un triángulo. Lo sustituimos por + / - */
.menu-vertical .nav-link.dropdown-toggle{
  display:flex; align-items:center;
  gap:.5rem;
  cursor:pointer;
  position:relative;
}
.menu-vertical .nav-link.dropdown-toggle::after{
content:'' !important; border:0 !important;
}
/* Icono “+” construido con 2 barritas */
.menu-vertical .nav-link .acc-icon{
  margin-left:auto;
  width:17px; height:17px;
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  transition: transform .22s ease;        /* giro sutil */
}
.menu-vertical .nav-link .acc-icon i{
  position:absolute; left:0; top:0; right:0; bottom:0;
  margin:auto;
  background: currentColor;
  border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
/* barra horizontal */
.menu-vertical .nav-link .acc-icon i:nth-child(1){
  width:17px; height:3px; transform: scaleX(1);
}
/* barra vertical */
.menu-vertical .nav-link .acc-icon i:nth-child(2){
  width:3px; height:17px; transform: scaleY(1);
}

/* Estado abierto: gira el conjunto y colapsa la barra vertical */
.menu-vertical .dropdown.show > a .acc-icon{
  transform: rotate(180deg);
}
.menu-vertical .dropdown.show > a .acc-icon i:nth-child(2){
  transform: scaleY(0);
  opacity:.0;
}
.container-fluid:has(.hamburger.is-active) .nav-redes .icons_redes{
	    opacity: 0;
  visibility: hidden;   /* evita tab/foco y lectura de accesibilidad */
  pointer-events: none;
}
.txt-content{
  background: url('img/fondo-video.svg') no-repeat center/cover;
	 background-size: contain;
	 padding: 100px;
}

.txt-content p {
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 100;
	margin: 0;
}
.txt-content h1 strong {
    font-size: 24px;
    letter-spacing: 2.88px;
    font-weight: 400;
    line-height: 0;
}
.txt-content h1 {
    font-size: 48px;
    letter-spacing: 5.76px;
    font-weight: 900;
    line-height: 0.55;
	margin: 0;
}
/* CONTENEDOR FLOTANTE */
.donde{
  position: fixed;
 right: 3%;
    bottom: 1%;
  z-index: 9; /* sobre el contenido */
  font-family: inherit;
}


.cargador{
    display: none;
}

.cargador {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.97);
    z-index: 999;
    display: block;
    opacity: 1;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    display: block;
}


.cargador img {
    display: none;
}

.cargador img {
    margin: 0 auto;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    max-width: 100%;
}


/* LISTA DE LOGOS */
.donde .donde-list{
  list-style:none; margin:0; padding: .65rem 1.5rem 0.4rem 1.5rem;
}
/* .donde .donde-list li + li{
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: .3rem; padding-top: .3rem;
} */
/* .donde .donde-list img{
  max-width: 100%;
  height: auto;
  display:block;
  margin: 0 auto;
  max-height: 50px;
  object-fit: contain;
} */

/* ABIERTO */
.donde.open .list-donde{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0) scale(1);
  transition: opacity .30s ease, transform .22s ease;
}

/* Responsive */
@media (max-width: 575.98px){
  .donde{ right: 16px; bottom: 16px; }
  .donde .list-donde{ width: calc(100vw - 32px); }
}


/* contenedor flotante */
.btn-wp{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  font-family: inherit;
}

/* enlace “pastilla” (estado inicial = solo círculo) */
.btn-wp a{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 56px;
  max-width: 56px;             /* oculto el texto al inicio */
  padding-left: 56px;          /* espacio para el círculo */
  padding-right: 0;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .22s ease, background .18s ease, box-shadow .18s ease;
}

/* círculo verde detrás del ícono */

/* el SVG centrado dentro del círculo */
.btn-wp a svg{
  position:absolute;
  left: 28px; top: 28px;       /* centro del círculo (56/2) */
  transform: translate(-50%, -50%);
  width: 55px; height: 55px;
  display:block;
  fill:#fff;                   /* si tu SVG usa fill */
  stroke:#fff;                 /* si tu SVG usa stroke */
}

/* el texto, oculto al inicio */
.btn-wp a span{
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .30s ease, transform .18s ease;
  font-weight: 500;
    background-color: white;
    border-radius: 50px;
    padding: 6px 14px 2px 14px;
    color: #3D3D3D;
    font-size: 18px;
    letter-spacing: 2px;
	margin-left: 10px;
}

/* ===== Hover / Focus: se expande y aparece la pastilla blanca con texto ===== */
.btn-wp a:hover,
.btn-wp a:focus-visible{
  max-width: 320px;                     /* ancho de la pastilla */
 
 
}

.btn-wp a:hover span,
.btn-wp a:focus-visible span{
  opacity: 1;
  transform: translateX(0);

}

/* responsive: más compacto en móviles pequeños */
@media (max-width: 575.98px){
  .btn-wp{ right:16px; bottom:16px; }
  .btn-wp a{ height:52px; max-width:52px; padding-left:52px; }
  .btn-wp a::before{ width:52px; height:52px; }
  .btn-wp a svg{ left:26px; top:26px; width:24px; height:24px; }
}


.lobueno{
	background-color: #00b552;
	margin-top: -5px;
}

.lobueno h1{
	font-family: var(--font-display);
	color: #FFED00;
    font-size: 70px;
    font-weight: normal;
     margin-bottom: 2rem;

}
.lobueno h1 strong{
  color: #125428;
  font-weight: normal;
}
/* .lobueno p {
    color: white;
    font-size: 1.4rem;
    letter-spacing: 2.9px;
    font-weight: 400;
} */
/* Centrar el h1 */

/* Centrar el título */
.the_content h1 {
    text-align: center;
   
}

.the_content .parrafos-dos-columnas {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 2rem;
        padding: 0px 55px;
}

.the_content .parrafos-dos-columnas p {
    flex: 1;
    margin: 0;
}

.the_content .parrafos-dos-columnas p:first-child {
    	color: #FFED00;
      font-size: 36px;
          line-height: normal;
              font-weight: 500;
}

.the_content .parrafos-dos-columnas p:last-child {
    color: #FFF;
    font-size: 20px;
        line-height: normal;
}



a.btn-descu {
    background-color: white;
    padding: 5px 20px;
    color: #FF782D;
    font-size: 20px;
    letter-spacing: 2.5px;
    font-weight: 600;
    border-radius: 50px;
    display: inline-block;
}
a.btn-descu:hover {
	text-decoration: none;
	background-color: #FF782D;
	color: white;
	transition: all 0.3s ease;
}
.list-product h2:first-child {
	color: #00B552;
	font-size: 65px;
	font-weight: 100;
	text-transform: uppercase;
  font-family: var(--font-display);
}
.list-product h2:last-child {
	color: #FEEBDC;
	font-size: 95px;
	font-weight: 100;
	margin: 0;
	text-transform: uppercase;
  font-family: var(--font-display);
  background-image: url('/wp-content/themes/darvida/img/fondo-txt.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    padding: 10px 65px;
    display: inline-block;
 
}

.relacionados-producto  h2 {
	color: #FF782D;
	font-size: 40px;
	font-weight: 900;
	margin: 0;
	text-transform: uppercase;
}
section.blog{
  background-color: #FEEBDC;
}
section.blog .container-fluid,
section.recetas .container-fluid,
section.pregunt .container-fluid{
  max-width: 1440px;
  margin: auto;
}
.recetas h2 {
	color: #00B552;
	font-size: 70px;
	font-weight: 100;
	margin: 0;
	text-transform: uppercase;
  font-family: var(--font-display);
  line-height: 1.3;
}

.titulo-con-svg {
    position: relative;
    display: inline-block; /* o block, si querés que ocupe el ancho completo */
    text-align: center;
    width: 100%;
}

.titulo-con-svg svg {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
        max-width: 935px;
    min-width: 900px;
    height: auto;
    pointer-events: none;
    opacity: 1; /* ajustá si querés que se vea más tenue */
}

.titulo-con-svg h2 {
   
    position: relative;
    z-index: 1;

}

.recetas h3 {
	color: #00B552;
	font-size: 45px;
	font-weight: 100;
	margin: 0;
	text-transform: uppercase;
  font-family: var(--font-display);
  line-height: 1;
}
.blog h3 {
	color: #FF782D;
	font-size: 70px;
	font-weight: 100;
	margin: 0;
	text-transform: uppercase;
  font-family: var(--font-display);
  line-height: 1;
}

/* tarjeta base dentro de .col-sm-3 */
.cat-card{
  position:relative;
  overflow:hidden;

  height:540px;                          /* por si querés forzar alturas iguales */
}

/* link ocupa toda la tarjeta */
.cat-card__link{
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
      height: 100%;
}

/* área visual con relación 3:4 (como tus mockups) */
.cat-card__media{
  position:relative;
     height: 100%;
	     display: flex;
    align-items: center;
    justify-content: center;
}
@supports not (aspect-ratio: 3 / 4){
  .cat-card__media{ padding-top:133.333%; }
}

/* todas las imágenes apiladas */
img.cat-card__bg, img.cat-card__person{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* estado inicial: solo img_dest visible */
.cats-row .cat-card__dest{
	    inset: 0;
    opacity: 1;
    height: auto;
    width: 300px;
    transform: scale(1);
    transition: opacity .22s ease, transform .22s ease;
    z-index: 1;
        margin-bottom: 40px;
}
.cat-card__dest{
	    inset: 0;
    height: auto;
    width: auto;
    z-index: 1;
}

/* elementos del hover: ocultos al inicio */
.cat-card__bg{
  opacity:0;
  transition: opacity .25s ease .05s;
  z-index:2;
}
.cat-card__person{
  opacity:0;
  transform: translateY(18px);         
  transition: opacity .40s ease, transform .26s ease;
  z-index:3;
}



/* botón "Explorar" */
.cat-card__cta{
  position: absolute;
    text-align: center;
    font-weight: 900;
    width: 90%;
    font-size: 24px;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 10px);
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.90);
    padding: 10px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 4;
    color: #8A38F5;
}

/* hover/focus (accesible) */
.cats-row .cat-card:hover .cat-card__dest,
.cats-row .cat-card:focus-within .cat-card__dest{
  opacity:0; transform: scale(1.02);
}
.cat-card:hover .cat-card__bg,
.cat-card:focus-within .cat-card__bg{
  opacity:1;
}
.cat-card:hover .cat-card__person,
.cat-card:focus-within .cat-card__person{
  opacity:1; transform: translateY(0);
}
.cat-card:hover .cat-card__cta,
.cat-card:focus-within .cat-card__cta{
  opacity:1; transform: translate(-50%, 0);
}

/* focus visible */
.cat-card__link:focus{ outline:none; }
.cat-card__link:focus-visible{ outline:2px solid #8b45d1; outline-offset:3px; }


/* Título de la categoría (visible en estado base) */
.cat-card__title{
      font-family: var(--font-display);
      font-weight: 100;
  position:absolute;
  left:30px;
  right:16px;
  bottom:20px;                /* queda pegado al borde inferior */
  margin:0;
  text-transform: uppercase;
  line-height: .95;

  font-size: clamp(20px, 4.6vw, 45px); /* grande y responsivo */
  z-index: 2;                 /* sobre la imagen base */
  pointer-events: none;       /* no interfiere con el click del link */
  transition: opacity .2s ease, transform .2s ease;
  text-align: center;
}

.cat-card.avena .cat-card__title{
color: #FCCA00;
}

.cat-card.avena .cat-card__cta{
	color: #00B552;
}
.cat-card.mix-de-nueces .cat-card__title, 
.cat-card.mix-de-nueces .cat-card__cta,
.cat-card.pastas .cat-card__cta{
	color: #3ABFED;
}

.cat-card.bebidas-vegetales .cat-card__title{
color: #9A68D7;
}

.cat-card.bebidas-vegetales .cat-card__cta{
	color: #8A38F5;
}
.cat-card.pastas .cat-card__title{
color: #FCE830;

}
/* Al hacer hover/focus ocultamos el título porque el fondo ya lleva letras */
.cat-card:hover .cat-card__title,
.cat-card:focus-within .cat-card__title{
  opacity: 0;
  transform: translateY(6px);
}






/* ====== CARD BASE ====== */
.receta-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.receta-card__link{
  display: block;
text-decoration: none !important;
}

/* ====== IMAGEN DESTACADA ====== */

.receta-card__thumb img{
  /* position:absolute; inset:0; */
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1);
  transition: transform 1s ease;
}

/* ====== PLACA DE INFORMACIÓN (ABSOLUTA AL FONDO) ====== */
/* Anclada al bottom. En hover aumentamos padding-top (crece hacia arriba). */
.receta-card__info{
  position: relative;
      display: flex;
          align-items: flex-end;
  left: 0;
  right: 0;
  bottom: 0;
    width: 100%;
  /* color base por tipo se aplica por clase (.tipo-...) */
  color:#fff;
  /* border-radius: 24px; */
  padding: 20px 25px 16px;  /* base */
  padding-top: 25px;        /* controla ALTURA base */
  height: 155px;
    margin-top: -16px;
  z-index: 2;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  overflow: visible; /* para que la curva pueda sobresalir */
}

/* ====== CURVATURA (SVG INLINE DENTRO DEL SPAN) ====== */
.receta-card__curve{
      position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    width: 100%;
    height: 56px;
    z-index: -1;
    pointer-events: none;
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}




.receta-card__curve svg {
    display: block;
    width: 100%;
    height: 56px;
    transform-origin: bottom center; /* clave: el punto desde donde crece */
    transform: scaleY(1);
    transition: transform 0.5s ease-in-out;
}


.receta-card__curve svg *{
  transition: fill .22s ease;
}

.receta-card:hover .receta-card__curve svg {
    transform: scaleY(1.5); /* 76 / 56 ≈ 1.36 */
}

/* ====== BADGE DEL TIPO ====== */
.receta-card__badge{
   
    width: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
    z-index: 3;
    transition: transform .22s 
ease, filter .22s 
ease;
    transform-origin: left bottom;
    will-change: transform;
}

/* ====== TÍTULO & META ====== */
.receta-card__title{
    margin: 6px 0 20px 0;
    font-size: 20px;
    z-index: 9;
}
.receta-card__meta{
  list-style:none; margin:0; padding:0;
  font-size: 14px;
}
.receta-card__meta li{ margin-bottom: 6px;letter-spacing: 1.68px; transition: margin-bottom .2s ease;}
.receta-card__meta li:nth-child(2){
	margin-bottom: 15px;
}
.receta-card__meta li span{ opacity:.9; }
.receta-card__meta .receta-card__term{
      font-weight: 500;
    text-align: right;
    position: absolute;
    bottom: 10px;
    right: 25px;
}
/* .receta-card:hover .receta-card__info.categoria-mix-de-nueces .receta-card__curve { background: linear-gradient(to top, #fce830 75%, transparent 50%); }
.receta-card:hover .receta-card__info.categoria-avena .receta-card__curve { background: linear-gradient(to top, #00b552 75%, transparent 50%); }
.receta-card:hover .receta-card__info.categoria-bebidas-vegetales    .receta-card__curve { background: linear-gradient(to top, #d6b4ff 75%, transparent 50%); }
.receta-card:hover .receta-card__info.categoria-pastas .receta-card__curve { background: linear-gradient(to top, #1aa2e5 75%, transparent 50%); } */

/* ====== COLORES BASE POR TIPO (placa + curva) ====== */
.receta-card__info.categoria-mix-de-nueces{     background-color:#fce830; }
.receta-card__info.categoria-avena{ background-color:#00b552; }
.receta-card__info.categoria-bebidas-vegetales{    background-color:#d6b4ff; }
.receta-card__info.categoria-pastas{ background-color:#00c1f1; }

.receta-card__info.categoria-mix-de-nueces     .receta-card__curve svg *{ fill:#fce830; }
.receta-card__info.categoria-avena .receta-card__curve svg *{ fill:#00b552; }
.receta-card__info.categoria-bebidas-vegetales    .receta-card__curve svg *{ fill:#d6b4ff; }
.receta-card__info.categoria-pastas .receta-card__curve svg *{ fill:#00c1f1; }

/* ====== HOVER / FOCUS ====== */
/* Zoom sutil de la imagen */
.receta-card:hover .receta-card__thumb img,
.receta-card:focus-within .receta-card__thumb img{
  transform: scale(1.3);
}

/* La placa crece hacia ARRIBA (sin dejar hueco abajo) y pasa a naranja */
/* .receta-card:hover .receta-card__info,
.receta-card:focus-within .receta-card__info{
  padding-top: 40px;         
  background-color:#ff5a00;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
} */

/* La curva también se pinta naranja */
/* .receta-card:hover .receta-card__curve svg *,
.receta-card:focus-within .receta-card__curve svg *{
  fill:#ff5a00;
} */

/* ====== ACCESIBILIDAD ====== */
.receta-card__link:focus{ outline:none; }
.receta-card__link:focus-visible{ outline:2px solid #ff9c66; outline-offset:3px; }

/* .receta-card:hover .receta-card__badge,
.receta-card:focus-within .receta-card__badge{
  transform: translateY(17px) scale(1.25);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.20)); 
} */

/* .receta-card:hover .receta-card__title{
	margin-bottom: 20px;
}
.receta-card:hover .receta-card__meta li:nth-child(2){
	margin-bottom: 30px;
} */

.site-footer{
	background-color: #FBE9D9;
	
}
footer .footer-col h4{
	font-weight: 700;
	color: #6B3525;
	font-size: 20px;
}
footer .footer-col li a{
	color: #6B3525;
	font-size: 16px;
	font-weight: 400;	
}
.sigue-footer span{
	font-size: 20px;
	color: #6B3525;
	font-weight: 700;
	    display: block;
}

footer hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #6B3525;
}
footer .div-logo-hv div{
  color: #6B3525;
  font-size: 18px;
  font-weight: 700;

}
footer .div-logo-hv{
  gap: 15px;
}
footer .div-logo-hv img{
  width: 250px;
}
footer .ult-div-footer{
  background-color: #7D4B3B;;
}
.btn-tnutri {
    padding: 0px 35px;
    background-color: white;
	  border: 1px solid;
    font-size: 20px;
    font-weight: 500;
    border-radius: 50px;
    display: inline-block;
}
.btn-tnutri:hover {
	text-decoration: none;
	color: white !important;
	background-color: transparent;
	transition: all 0.3s ease;
}

.btn-recetas {
    padding: 3px 35px;
    color: white;
    background-color: #FF782D;
	  border: 1px solid #FF782D;
    font-size: 20px;
    font-weight: 500;
    border-radius: 50px;
    display: inline-block;
}
.btn-recetas:hover {
	text-decoration: none;
	color: #FF782D !important;;
	background-color: transparent;
	transition: all 0.3s ease;
}
section.pregunt .btn-recetas:hover{
  	background-color: white;
}
.recetas-tabs a.nav-link.prod-tab-link {
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #006382;
    background-color: #01C1F2;
    height: 100px;
}
.recetas-tabs a.nav-link.prod-tab-link.active, .recetas-tabs a.nav-link.prod-tab-link.active:hover {
    background: #006382;
    color: #01C1F2;
}
a.nav-link.prod-tab-link {
    color: #C59C86;
    font-size: 15px;
    font-weight: 700;
    background-color: #FFE5D4;
    width: 300px;
    border-radius: 8px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    transition: all 0.4s ease-in-out;
  
}
/* a.nav-link.prod-tab-link.active {
    background-color: #006382;
    color: #01C1F2;
} */
ul.prod-tabs li.nav-item {
    padding: 0px 10px;
        height: 99px;
}
a.nav-link.prod-tab-link span {
    height: 100%;
    align-content: center;
}

.prod-grid article.cat-card {
    border-radius: 24px;
        height: 500px;
}
.prod-grid article.cat-card .cat-card__dest{
     height: 50%;
}
.prod-grid h2.txtcat-card__title {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-base);
    margin: 0;
}
.prod-grid .h3.prod-card__title {
    font-size: 20px;
    font-weight: bold;
    font-family: var(--font-base);
    margin: 0;
}
.prod-grid .h4.prod-card__title {
    font-size: 18px;
    font-family: var(--font-base);
    margin: 0;
}
.prod-tt {
    color: white;
}
.prod-tt .h2{
  font-size: 36px;
  font-weight: 900;
  margin: 0;
}
.prod-tt .h3 {
    font-size: 24px;
    font-weight: 400;
}
#present-main{
  width: 80%;
  transform: rotate(-10deg);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
  transform-origin: center center;
  transition: transform 0.5s ease, opacity 0.4s ease;
  display: inline-block;
  will-change: transform, opacity;
}
.single-product-body .prod-nom_cat .h1 {
    font-size: 7rem;
}
.single-product-body.container-fluid{
  max-width: 1440px;
  margin: auto;
}
.prod-cat-desc p{
  color: white;    
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}
.card-product {
    position: absolute;
    bottom: -19%;
    left: 50%;
    width: 50%;
    transform: translateX(-50%);
    border-radius: 12.072px;
    border: none;
    box-shadow: 22.636px 85.262px 24.899px 0 rgba(0, 0, 0, 0.00), 14.336px 54.326px 22.636px 0 rgba(0, 0, 0, 0.01), 8.3px 30.936px 18.863px 0 rgba(0, 0, 0, 0.05), 3.773px 13.581px 14.336px 0 rgba(0, 0, 0, 0.09), 0.755px 3.773px 7.545px 0 rgba(0, 0, 0, 0.10);
}
.card-product span.tipo-sabor{
  color: white;
font-size: 30px;
font-weight: 100;
line-height: normal;
font-family: var(--font-display);
}
/* Contenedores */
.nav.list-sab, .present-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
      justify-content: space-evenly;
}
.nav.list-sab li.sab-item {
    padding: 0px 5px;
    border-radius: 3px;
}
.present-tabs li.present-tab span {
    padding: 0px 10px;
    border-radius: 3px;
    font-size: 18px;
}
.nav.list-sab a.sab-link {
    color: white;
}
.card-product .row .col-sm-6:nth-child(1){
  border-right: 1px solid white;
}

.present-tabs a.nav-link{
  padding: 0;
      display: flex;
    flex-direction: column;
    gap: 10px;
        align-items: center;
}
/* .nav.list-sab .sab-item,
.present-tabs .nav-item{
  margin-right:12px;
  margin-bottom:8px;
} */

/* Chip base (sirve tanto para <a.sab-link> como <span.sab-link>) */
/* .list-sab .sab-link,
.present-tabs .nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:10px 14px 6px 14px;           
  border-radius:6px;
  line-height:1;
  border:1px solid rgba(0,0,0,.08); 
  background:#fff;
  color:#453D3B;
  font-size:17px;
  font-weight:500;
  letter-spacing:1.5px;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
  will-change: transform, box-shadow;
} */

/* Hover sutil (sin reflow) */
/* .list-sab .sab-link:hover,
.present-tabs .nav-link:hover{
  background:#FF782D;
  color:#fff;
  border-color:rgba(255,91,0,.25);
  box-shadow:0 6px 14px rgba(255,91,0,.18);
  transform:translateY(-1px);
} */


/* .list-sab .sab-link.is-current,
.list-sab .sab-item.active .sab-link,
.present-tabs .present-tab.active .nav-link{
  background:#FF782D;
  color:#fff;
  border-color:rgba(255,91,0,.25);
  box-shadow:0 6px 14px rgba(255,91,0,.20);
  cursor:default;
  pointer-events:none; 
  transform:none;      
} */

/* Estado presionado (sutil) */
.list-sab .sab-link:active,
.present-tabs .nav-link:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(255,91,0,.18);
}

/* Accesibilidad focus */
.list-sab .sab-link:focus-visible,
.present-tabs .nav-link:focus-visible{
  outline:2px solid #FF782D;
  outline-offset:2px;
}

/* Opcional: deshabilitados/missing */
.list-sab .sab-link.is-missing,
.list-sab .sab-link[aria-disabled="true"]{
  opacity:.55;
  cursor:default;
  pointer-events:none;
}

/* ====== TABS DE CATEGORÍAS (single-prod-tabs) ====== */

section.banner-recetas{
  background-color: #FF782D;
}

section.banner-recetas h1{
  font-family: 'Mildstones';
font-size: 64px;
font-weight: 400;
text-transform: uppercase;
color: white;
}

section.banner-recetas p{
  color: #FF782D;
  background-color: white;
  font-size: 20px;
  letter-spacing: 2.4px;
  font-weight: 400;
    margin: auto;
    padding: 1px 15px 0px 15px;
    border-radius: 50px;
    width: max-content;
}


article.receta-list-card {
    position: relative;
        overflow: hidden;
    border-radius: 10px;
}

.receta-list-card__thumb img {
    object-fit: cover;
}
.receta-list-card__thumb {
    height: 240px;
}
.receta-list-card .receta-card__info {
    display: flex;
    align-items: flex-end;
        padding: 0px 30px 20px 30px;
       height: 90px;
}

.text-listrecetas h3.receta-card__title {
      font-size: 18px;
    line-height: normal;
    margin-bottom: 0;
     font-weight: 500;
         height: 50px;
}
.recetas-list-grid .pastas img.receta-list-card_img {
    width: 10%;
}
.recetas-list-grid .pastas.penne-rigate img.receta-list-card_img {
    width: 20%;
}
.recetas-list-grid .avena img.receta-list-card_img,
.recetas-list-grid .mix-de-nueces img.receta-list-card_img {
    width: 22%;
}
.recetas-list-grid .bebidas-vegetales img.receta-list-card_img {
    width: 15%;
}
span.receta-card__date{
 font-weight: 500;
 font-size: 13px;
}
span.receta-card__term {
    padding: 1px 5px;
    border-radius: 4px;
}
.pastas span.receta-card__term {
    background-color: #006382;
}
.pastas span.receta-card__date, 
.pastas h3.receta-card__title{
    color: #006382;  
}
.avena span.receta-card__term {
    background-color: #005A11;
}
.avena span.receta-card__date, 
.avena h3.receta-card__title{
    color: #005A11;  
}
.bebidas-vegetales span.receta-card__term {
    background-color: #8254A6;
}
.bebidas-vegetales span.receta-card__date, 
.bebidas-vegetales h3.receta-card__title{
    color: #8254A6;  
}
.mix-de-nueces span.receta-card__term {
    background-color: #E58B00;
}
.mix-de-nueces span.receta-card__date, 
.mix-de-nueces h3.receta-card__title{
    color: #E58B00;  
}
ul.pagination li.num-item a {
   background-color: #E6E6E6;
    color: #8B8B8B;
    font-size: 20px;
    border-radius: 4px;
    padding: 4px 7px;
}
ul.pagination li a span {
  color: #8B8B8B;
    font-size: 16px;
    font-weight: 400;
}
ul.pagination li.active a {
    background-color: #FF5B00;
    color: white;
    
}
ul.pagination {
    align-items: center;
    gap: 20px;
}
.banner-receta img {
    height: 500px;
    object-fit: cover;
}
.div_ttrece h1{
font-size: 55px;
font-weight: 100;
font-family: var(--font-display);
}
.div_ttrece h2{
  font-size: 40px;
}
.receta-card .receta-card__thumb {
    height: 403px;
}
.div_metas {
    position: absolute;
    top: 0;
    border-radius: 60px;
    background: #FBE9D9;
    width: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 10px;
    align-items: center;
    transform: translateX(-50%);
    left: 50%;
}
.div_metas .meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #6B3525;
    font-size: 15px;
    letter-spacing: 1.5px;
    font-weight: 800;
    gap: 10px;
}
.meta p span {
    font-size: 13px;
    display: block;
    line-height: 0;
    letter-spacing: 1.5px;
}
.meta p b {
    font-size: 24px;
}
.content-receta h2{
  font-size: 30px;
  font-weight: 400;
line-height: normal;
}
.content-receta p{
font-size: 20px;
font-weight: 500;
line-height: normal;
}
.prod-banner img {
    border-radius: 24px;
}


.curva_svg {
    position: absolute;
    
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
}
.curva1{
bottom: -3%;
}
.curva2{
bottom: -3%;
}

.curva1 svg, .curva2 svg {
    width: 100%;
    height: auto;
    display: block;
}
section.list-product {
    background-color: #feebdc;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* ajustá a tu gusto */
    height: 50px;
}

.carousel-control-prev svg,
.carousel-control-next svg {
    width: 100%;
    height: auto;
}

.carousel-indicators li {
    width: 24px;
    height: 25px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

.carousel-indicators .active {
    background-color: #fff; /* o el color que prefieras para el activo */
}
.carousel-indicators{
  bottom: 20px;
}
button.ver-blog {
    bottom: 5%;
    right: 5%;
    background-color: white;
    border: none;
    border-radius: 50px;
    padding: 5px 35px;
    line-height: normal;
    font-size: 20px;
    color: #FF782D;
    font-weight: 600;
}
#blogSlider .carousel-control-prev, #blogSlider .carousel-control-next,
.faq-sliders .carousel-control-prev, .faq-sliders .carousel-control-next{
      opacity: 1;
}
#blogSlider .carousel-control-prev svg, #blogSlider .carousel-control-next svg {
    width: 70%;
    height: auto;
}
#blogSlider .carousel-control-next {
    right: -10px;

}
#blogSlider .carousel-control-prev{ 
  left: -10px;
}
section.pregunt{
  background-image: url('img/fondo-pregunt.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.curva3{
bottom: -3%;
}
section.pregunt h3{
      color: #fff;
    font-size: 70px;
    font-weight: 100;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--font-display);
    line-height: 1;
}

.faq-sliders .carousel-inner {
    width: 95%;
    margin: auto;
}

.faq-sliders .carousel-control-next {
    right: -100px;

}
.faq-sliders .carousel-control-prev{ 
  left: -100px;
}
.faq-sliders .carousel-control-prev svg, .faq-sliders .carousel-control-next svg {
    width: 90%;
    height: auto;
}
button.filtro-btn.active, button.filtro-btn:hover {
    background-color: #FF782D;
    border: 1px solid #FF782D;
}
button.filtro-btn {
    border: 1px solid white;
    font-size: 20px;
    background-color: transparent;
    padding: 5px 20px;
    border-radius: 10px;
    color: white;
    font-weight: 400;
}
.faq-sliders .card{
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.80);
  height: 360px;
}
.nube-resp {
  position: relative;
  background-color: #FF782D;
  color: white;
  padding: 2rem 2.5rem;
  border-radius: 20px;
  max-width: 570px;
 font-size: 20px;
 font-weight: 400;
  line-height: normal;
}

/* PICO tipo SVG */
.nube-resp::after {
  content: "";
  position: absolute;
  bottom: -35px;
  left: 100px; /* ajustá según necesidad */
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 60px solid transparent;
  border-top: 40px solid #FF782D;
  transform: skewX(-40deg);
  z-index: 9;
}


.nube-pregu {
  position: relative;
  background-color: white;
  color: #666;
  padding: 2rem 2.5rem;
  border-radius: 20px;
  max-width: 570px;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-left: auto;
      margin-bottom: -15px;
       z-index: 9;
}

/* Pico estilo SVG, pero a la derecha */
.nube-pregu::after {
  content: "";
  position: absolute;
  bottom: -35px;
  right: 100px; /* ajustá para alinear como en el SVG */
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 0 solid transparent;
  border-top: 40px solid white;
  transform: skewX(40deg);
}
.faq-sliders .carousel-inner span, .faq-sliders .catgoria-pregunta {
    position: absolute;
    z-index: 9;
    background-color: #FF782D;
    top: 10%;
    font-size: 20px;
    padding: 8px 25px 8px 30px;
    color: white;
    border-radius: 0px 10px 10px 0px;
    left: -1px;
}

.btn-dudas{
       position: fixed;
    bottom: 85px;
    right: 28px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        padding: 10px 35px;
    display: flex;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
    color: #FF5B00;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.boton-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  padding: 0px 15px;
  display: flex;
  align-items: center;
  z-index: 1000;
  overflow: hidden;
  transition: all 0.7s ease;
      height: 50px;
}
.boton-flotante svg {
    height: auto;
    width: 30px;
}
.boton-comprar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: margin-right 0.8s ease;
  color: #C25131;
font-size: 16px;
font-style: normal;
font-weight: 400;
}

.slider-contenedor {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  overflow: hidden;
  transition: all 0.8s ease;
}

/* .boton-flotante.activo {
  transform: translateX(-220px); 
} */

.boton-flotante.activo .slider-contenedor {
  opacity: 1;
  visibility: visible;
  max-width: 600px;
  margin-left: 15px;
}
.slider-contenedor .slick-prev-custom svg,
.slider-contenedor .slick-next-custom svg{
  width: 20px;
  height: auto;
}
.slider-marcas {
  width: 245px;
}

.slider-marcas .slick-slide {
  padding: 0 10px;
}
.slider-contenedor .slick-track{
  display: flex;
    align-items: center;
}
.slick-prev-custom,
.slick-next-custom {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

@media (hover: hover) {
  #dondeComprar:hover .slider-contenedor {
    opacity: 1;
    visibility: visible;
    max-width: 450px;
    margin-left: 15px;
  }

  /* #dondeComprar:hover {
    transform: translateX(-220px);
  } */
}


section.productos-tabs{
  background-color: #c49b85;
   transition: background-color 0.4s ease-in-out;
}
section.productos-tabs .prod-grid{
 transition: background-color 0.4s ease-in-out;
 border-radius: 15px;
     position: relative;
    z-index: 2;
}

section.cat-bebidas-vegetales .prod-grid{
  background-color:#E0C7FE ;
}
section.cat-bebidas-vegetales a.nav-link.prod-tab-link,
section.cat-bebidas-vegetales .prod-nom_cat .h1,
section.cat-bebidas-vegetales .prod-grid h3.prod-card__title,
section.cat-bebidas-vegetales .prod-grid h2.txtcat-card__title,
section.cat-bebidas-vegetales .prod-tt .h2, section.cat-bebidas-vegetales .prod-tt .h3,
section.cat-bebidas-vegetales .sab-link, section.cat-bebidas-vegetales li.present-tab span,
section.cat-bebidas-vegetales .btn-tnutri, section.cat-bebidas-vegetales .prod-cat-desc p{
  color: #8254A6;
}
section.cat-bebidas-vegetales a.nav-link.prod-tab-link.active{
  color: #D6B4FF;
  background-color: #8254A6;
}
section.cat-bebidas-vegetales .card-product{
  background-color: #8254A6;
}


section.cat-avena .prod-grid{
  background-color:#03993A;
}
section.cat-avena a.nav-link.prod-tab-link,
section.cat-avena .prod-nom_cat .h1,
section.cat-avena .prod-grid h3.prod-card__title,
section.cat-avena .prod-grid h2.txtcat-card__title,
section.cat-avena .prod-tt .h2,
section.cat-avena .sab-link, section.cat-avena li.present-tab span,
section.cat-avena .btn-tnutri, section.cat-avena .prod-cat-desc p{
  color: #005A11;
}
section.cat-avena a.nav-link.prod-tab-link.active{
  color: #00B842;
  background-color: #005A11;
}
section.cat-avena .card-product{
  background-color: #00581D;
}

section.cat-mix-de-nueces .prod-grid{
  background-color:#CA9800;
}
section.cat-mix-de-nueces .card-product{
  background-color: #CA9800;
}
section.cat-mix-de-nueces a.nav-link.prod-tab-link,
section.cat-mix-de-nueces .prod-nom_cat .h1{
  color: #CA9800;
}
section.cat-mix-de-nueces .prod-tt .h2, section.cat-mix-de-nueces .prod-tt .h3,
section.cat-mix-de-nueces .sab-link, section.cat-mix-de-nueces li.present-tab a.active span,
section.cat-mix-de-nueces .btn-tnutri, section.cat-mix-de-nueces .prod-cat-desc p{ 
  color: #CA9800;
}
section.cat-mix-de-nueces .prod-grid h3.prod-card__title,
section.cat-mix-de-nueces .prod-grid h2.txtcat-card__title,
section.cat-mix-de-nueces li.present-tab span{
  color: #FCE830;
}
section.cat-mix-de-nueces a.nav-link.prod-tab-link.active{
  color: #FCE830;
  background-color: #CA9800; 
}

section.cat-pastas .prod-grid{
  background-color:#1AA2E5;
}
section.cat-pastas a.nav-link.prod-tab-link,
section.cat-pastas .prod-nom_cat .h1,
section.cat-pastas .prod-grid h3.prod-card__title,
section.cat-pastas .prod-grid h2.txtcat-card__title,
section.cat-pastas .sab-link, section.cat-pastas li.present-tab span,
section.cat-pastas .btn-tnutri, section.cat-pastas .prod-tt .h2, 
section.cat-pastas .prod-tt .h3, section.cat-pastas .prod-cat-desc p {
  color: #006180;
}
section.cat-pastas a.nav-link.prod-tab-link.active{
  color: #00c1f1;
  background-color: #006180;
}
section.cat-pastas .card-product{
  background-color: #006382;
}
ul.prod-tabs {
    position: relative;
    z-index: 9;
}
.prod-nom_cat .h1 {
  position: relative;
  display: inline-block;
  font-size: 5rem;
  font-weight: 100;
  z-index: 1;
  font-family: var(--font-display);
}
.cat-bg-svg{
  z-index: -1;
    left: 0;
}
.cat-bg-svg svg {
  width: 100%;
  height: auto;
  display: block;
}
.cat-bebidas-vegetales.svg1 {
    top: 25rem;
    left: 8rem;
    z-index: 3;
    height: 58%;
}
.cat-bebidas-vegetales.svg2 {
       top: 25rem;
    right: 8rem;
    z-index: 3;
    height: 65%;
}
.cat-bebidas-vegetales.svg3{
    top: 10rem;
    left: 0;
    z-index: 1;
}
.cat-bebidas-vegetales.svg4{
    bottom: -15rem;
    right:0;
    z-index:1;
}
.cat-avena.svg1 {
     bottom: -2rem;
    left: 0;
    z-index: 1;
    width: 100%;
}
.cat-avena.svg2 {
    top: 20.5rem;
    left: 3rem;
    z-index: 3;
}
.cat-avena.svg3{
    bottom: -3rem;
    right: 0;
    z-index: 3;
}
.cat-pastas.svg1 {
     top: 16rem;
    left: 0;
    z-index: 3;
    width: 18%;
}
.cat-pastas.svg2 {
      bottom: 0rem;
    right: 0;
    z-index: 3;
    width: 25%;
}
.cat-mix-de-nueces.svg1 {
    top: 17rem;
    left: 0;
    z-index: 3;
    width: 14%;
}
.cat-mix-de-nueces.svg2 {
        bottom: 0rem;
    right: 0rem;
    z-index: 3;
    width: 20%;
}
/* Animación de opacidad al cargar los SVGs */
.prod-svgs-container img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.prod-svgs-container img.loaded {
    opacity: 1;
}

img.avena1 {
    bottom: -5rem;
    left: 0;
}
img.avena2 {
    bottom: -8rem;
    right: 0;
}
.present-tabs .nav-link.active span {
  background-color: var(--cat-bg);
}

.present-tabs .nav-link span {
  transition: background-color 0.3s ease;
}
.sellos-producto img {
    width: 120px;
}
img.pasta1 {
    bottom: -13rem;
    right: 0;
}
.recetas-single h2 {
	color: #FF782D;
	font-size: 40px;
	font-weight: 900;
	margin: 0;
	text-transform: uppercase;
  line-height: 1.3;
}



/* ===========================
   🎯 CAT CARD HOVER EFFECT
   =========================== */

/* Contenedor de la imagen */
.prod-grid .cat-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 1rem; /* opcional: suaviza bordes */
}

/* Imagen base */
.prod-grid .cat-card__dest {
  /* width: 100%;
  height: auto; */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.4s ease,
              opacity 0.4s ease;
  transform-origin: center center;
  will-change: transform, filter, opacity;
}

/* Efecto al hacer hover */
.prod-grid .cat-card:hover .cat-card__dest {
  transform: scale(1.06) rotate(-1deg);
  filter: brightness(1.05) contrast(1.05);
  opacity: 0.95;
}

/* Sombra del contenedor (sutil, elegante) */
.prod-grid .cat-card {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  will-change: box-shadow, transform;
}

.prod-grid .cat-card:hover {
  box-shadow: 0 12px 25px rgba(0,0,0,0.18);
  transform: translateY(-4px);
}




/* ======= Fondo tipo blob para el formulario ======= */
#contactoModal .modal-content{
  position: relative;
  background: url('img/fondo-formu.webp') no-repeat center center / contain;
  padding: 3rem 7rem;
  color: #fff;
  /* overflow: hidden; */
}
#contactoModal .modal-content{
  border: none;
  background-color: transparent;
}

#contactoModal .modal-lg{
          max-width: 900px;
}
#contactoModal button.close {
    position: absolute;
    right: 5rem;
    font-size: 5rem;
    color: #F29100;
    opacity:1;
}
#contactoModal .modal-body .h1{
font-family: var(--font-display);
font-size: 4rem;
line-height: 1;
}
#contactoModal .modal-body p.p-form{
  font-size: 1.5rem;
  line-height: 1;
}



.formu-contacto .form-control{
    height: calc(1.5em + 1.1rem + 2px) !important;
    padding: 0.375rem 1.3rem !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	font-weight: 500 !important;
    border: none!important;
}
.formu-contacto .form-control:focus{
    color: #878787 !important;
	border-color: #878787 !important;
	box-shadow: 0 0 10px 1px #F29100 !important;
	background-color: #fff !important;
}
.formu-contacto textarea.form-control {
    height: auto !important;
}
.formu-contacto input[type=checkbox] {
    position: absolute;
    visibility: hidden;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
}
.formu-contacto input[type=checkbox] + span:before {
    display: block;
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    top: 0px;
    left: 7px;
    border: 1px solid #5D5D5D;
    background: white;
}
.formu-contacto input[type=checkbox] + span:after {
    display: block;
    position: absolute;
    font-family: bootstrap-icons !important;
    content: "\F26E";
    top: -9px;
    left: -2px;
    visibility: hidden;
    font-size: 2.5rem;
    text-align: center;
    line-height: 30px;
}
.formu-contacto input[type=checkbox]:checked + span:before {
    background: transparent;
}
.formu-contacto input[type=checkbox]:checked + span:after{
    visibility: visible;
}
.formu-contacto span.wpcf7-list-item, .news span.wpcf7-list-item, #formu span.wpcf7-list-item {
    display: inline-block;
    margin: 0% 1% 0% 1%;
    position: relative;
        display: flex;
    align-items: center;
    gap: 10px;
}
.formu-contacto .wpcf7 .wpcf7-list-item{
    display: block;
	font-size: 0.7rem;
    line-height: 1.3rem;
	color: #4d4d4d;
}
.formu-contacto .wpcf7-list-item label a {
    color: #AC3D00;
    font-weight: bold;
}
.formu-contacto .wpcf7 .wpcf7-list-item a{
	color: #4d4d4d;
	text-decoration: revert;
}

.formu-contacto .wpcf7-list-item label {
    display: inline-block;
    margin-bottom: .5rem;
    text-align: left;
    margin-left: 30px;
    line-height: 1.2;
    font-size: 0.8rem;
    color: #AC3D00;
    font-weight: 500;
}
.formu-contacto .btn-enviar{
    background-color: #FF5B00;
    padding: 0rem 1rem;
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    border: 2px solid #FF5B00;
    display: flex;
    width: 100%;
    justify-content: center;
}
.formu-contacto .btn-enviar:hover{
    background-color: transparent;
    color: #FF5B00;
    text-decoration: none;
}

.formu-contacto .wpcf7-not-valid-tip {
    color: red;
    font-size: 1em;
    font-weight: normal;
    display: block;
    position: absolute;
    z-index: 9;
    bottom: -5px;
}
.formu-contacto span.wpcf7-form-control.wpcf7-radio {
    color: #7E2D00;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    justify-content: center;
    gap: 30px;
}
.formu-contacto p.text-form-linea {
    margin-left: 2rem;
    line-height: normal;
    font-size: 0.8rem;
    color: #AC3D00;
    font-weight: 600;
}

.formu-contacto p.text-form-obli {
    color: #7E2D00;
    font-size: 18px;
    font-weight: 700;
}



.formu-contacto input[type="radio"] {
  accent-color: #B1B1B1; /* tu color personalizado */
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid #B1B1B1;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Punto interior */
input[type="radio"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #B1B1B1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

/* Cuando está seleccionado */
input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Efecto hover opcional */
input[type="radio"]:hover {
  border-color: #888;
}

/* Remueve el contorno azul del foco */
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(177, 177, 177, 0.3);
}


#mensaje-gracias {
  animation: fadeSlideIn 0.6s ease forwards;
  padding: 8rem 7rem;
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


#tablaNutricionalModal .modal-content{
  background-color: transparent;
  border: none;
}

#tablaNutricionalModal button.close {
    position: absolute;
    right: 0;
    font-size: 5rem;
    color: #fff;
    opacity:1;
    z-index: 999;
        top: -3rem;
}
.prod-panel .prod-grid .h3.prod-card__title {
    font-weight: 100;
    font-size: 18px;
    line-height: normal;
}



.receta-instagram-embed.solo-video {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 15px;
   cursor:pointer;
}

/* Oculta cabecera y pie */
.receta-instagram-embed.solo-video iframe {
     min-width: 200px !important;
    height: 494px;
  border: none;
  transform: scale(1.43); /* opcional, acerca un poco el video */
  transform-origin: center center;
}

.receta-instagram-embed.solo-video .instagram-media {
  border: none !important;
  box-shadow: none !important;
}





.content-receta .card{
  border-radius: 20px;
  border: none;
}
.receta-producto-relacionado {
   left: -50px;
    top: -80px;
}
.content-receta .div-ingre h3,
.content-receta .text_content h3{
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 32px;
}
.content-receta .text_content>p{
  font-size: 25px;
  font-weight: 700;
  line-height: normal;
}
.div-ingre{
  color: white;
}

.content-receta.bebidas-vegetales .card{
  background-color: #E0C7FE;
}
.content-receta.pastas .card{
  background-color: #1AA2E5;
}
.content-receta.avena .card{
  background-color: #03993A;
}
.content-receta.mix-de-nueces .card{
  background-color: #E58B00;
}
.content-receta.mix-de-nueces .div_ttrece h1,
.content-receta.mix-de-nueces .div_ttrece h2,
.content-receta.mix-de-nueces .tip-dar span,
.content-receta.mix-de-nueces .tip-dar p,
.content-receta.mix-de-nueces .text_content{
  color: #E58B00;
}
.content-receta.pastas .div_ttrece h1,
.content-receta.pastas .div_ttrece h2,
.content-receta.pastas .tip-dar span,
.content-receta.pastas .tip-dar p,
.content-receta.pastas .text_content{
  color: #006382;
}
.content-receta.avena .div_ttrece h1,
.content-receta.avena .div_ttrece h2,
.content-receta.avena .tip-dar span,
.content-receta.avena .tip-dar p,
.content-receta.avena .text_content{
  color: #005A11;
}
.content-receta.bebidas-vegetales .div_ttrece h1,
.content-receta.bebidas-vegetales .div_ttrece h2,
.content-receta.bebidas-vegetales .tip-dar span,
.content-receta.bebidas-vegetales .tip-dar p,
.content-receta.bebidas-vegetales .text_content{
  color: #8254A6;
}
.content-receta.mix-de-nueces .items-prepa div{
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 32"><path d="M27.9531 4.64026C22.4142 2.06205 18.592 0 14.9547 0C12.0766 0 9.31378 1.29175 5.90702 4.64026C-1.96901 12.3844 -1.96901 18.57 5.90702 26.3142C13.6181 33.8951 20.2421 33.8951 27.9536 26.3142C35.8307 18.57 38.7533 9.66831 27.9536 4.64026Z" fill="%23E58B00"/></svg>')
              no-repeat center / contain;
}
.content-receta.mix-de-nueces .items-ingr div{
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 32"><path d="M27.9531 4.64026C22.4142 2.06205 18.592 0 14.9547 0C12.0766 0 9.31378 1.29175 5.90702 4.64026C-1.96901 12.3844 -1.96901 18.57 5.90702 26.3142C13.6181 33.8951 20.2421 33.8951 27.9536 26.3142C35.8307 18.57 38.7533 9.66831 27.9536 4.64026Z" fill="%23FCE830"/></svg>')
              no-repeat center / contain;
              color: #E58B00;
}
.content-receta.avena .items-ingr div,
.content-receta.avena .items-prepa div{
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 32"><path d="M27.9531 4.64026C22.4142 2.06205 18.592 0 14.9547 0C12.0766 0 9.31378 1.29175 5.90702 4.64026C-1.96901 12.3844 -1.96901 18.57 5.90702 26.3142C13.6181 33.8951 20.2421 33.8951 27.9536 26.3142C35.8307 18.57 38.7533 9.66831 27.9536 4.64026Z" fill="%23005A11"/></svg>')
              no-repeat center / contain;
}
.content-receta.pastas .items-ingr div,
.content-receta.pastas .items-prepa div{
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 32"><path d="M27.9531 4.64026C22.4142 2.06205 18.592 0 14.9547 0C12.0766 0 9.31378 1.29175 5.90702 4.64026C-1.96901 12.3844 -1.96901 18.57 5.90702 26.3142C13.6181 33.8951 20.2421 33.8951 27.9536 26.3142C35.8307 18.57 38.7533 9.66831 27.9536 4.64026Z" fill="%23006382"/></svg>')
              no-repeat center / contain;
}
.content-receta.bebidas-vegetales .items-ingr div,
.content-receta.bebidas-vegetales .items-prepa div{
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 32"><path d="M27.9531 4.64026C22.4142 2.06205 18.592 0 14.9547 0C12.0766 0 9.31378 1.29175 5.90702 4.64026C-1.96901 12.3844 -1.96901 18.57 5.90702 26.3142C13.6181 33.8951 20.2421 33.8951 27.9536 26.3142C35.8307 18.57 38.7533 9.66831 27.9536 4.64026Z" fill="%238254A6"/></svg>')
              no-repeat center / contain;
}
.content-receta.mix-de-nueces .ideal{
    background-color: #E58B00;
    color: #FCE830;
}
.content-receta.avena .ideal{
    background-color: #005A11;
    color: #03993A;
}
.content-receta.pastas .ideal{
    background-color: #006382;
    color: #00C1F1;
}
.content-receta.bebidas-vegetales .ideal{
    background-color: #8254A6;
    color: #E0C7FE;
}
.content-receta.mix-de-nueces .ideal svg{
    fill: #FCE830;
}
.content-receta.mix-de-nueces .tip-dar svg path{
    fill: #E58B00;
}
.content-receta.pastas .ideal svg{
    fill: #00C1F1;
}
.content-receta.bebidas-vegetales .ideal svg{
    fill: #E0C7FE;
}
.content-receta.avena .ideal svg{
    fill: #03993A;
}

.content-receta.pastas.spaghetti .receta-producto-relacionado img {
    width: 165px;
}
.content-receta.avena .receta-producto-relacionado img {
    width: 185px;
}
.content-receta.mix-de-nueces .receta-producto-relacionado img {
    width: 200px;
}

/* tamaño / color */
[class^="icon-"], [class*=" icon-"] {
  font-size: 1.25rem;   /* cambia tamaño */
  line-height: 1;
  display: inline-block;
  color: currentColor;  /* hereda color del texto */
}
.items-ingr div, .items-prepa div {
    font-weight: 500;
      width: 45px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;  
    color: white;
}
.items-ingr, .items-prepa {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
}

.items-ingr div i:before {
    font-size: 20px;
}

.receta-producto-relacionado img {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

.ideal svg{
    width: 60px;
    height: auto;
}
.ideal div span:first-child{
  color: white;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.ideal div span.receta-categoria{
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.ideal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
}

.tip-dar span {
  font-family: var(--font-display);
    font-size: 30px;
    font-weight: 100;
    line-height: normal;
}
.tip-dar p{
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.single-receta .recetas h2 {
    font-size: 35px;
    font-weight: 900;
    font-family: var(--font-base);
    color: #FF5B00;
}


.tab-pane:not(.show) {
    opacity: 0;
}
.tab-pane.show {
    opacity: 1;
}
.faq-slider-wrap {
    transition: opacity .2s ease;
}

.page-template-preguntas-frecuentes button.filtro-btn.active, .page-template-preguntas-frecuentes button.filtro-btn:hover {
    color: white;
}
.page-template-preguntas-frecuentes button.filtro-btn {
    border: 1px solid #FF5B00;
    color: #FF5B00;
}