/*
Theme Name: Tema Macadamia
Theme URI: http://underscores.me/
Author: Himalaya SEM
Author URI: https://himalayadigital.co/
Description: Tema desarrollado para nuevo producto Macadamia-Manitoba
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: macadamia
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 Macadamia 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/
*/

/* 1) PlutoBold.otf */
@font-face {
  font-family: "PlutoBold";
  src: url("fonts/PlutoBold.otf") format("opentype");
  font-weight: 900;
  /* O el que corresponda */
  font-style: normal;
}

/* 2) PlutoCondBold.otf */
@font-face {
  font-family: "PlutoCondBold";
  src: url("fonts/PlutoCondBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* 3) PlutoCondMedium.otf */
@font-face {
  font-family: "PlutoCondMedium";
  src: url("fonts/PlutoCondMedium.otf") format("opentype");
  font-weight: 500;
  /* medium */
  font-style: normal;
}

/* 4) PlutoRegular.otf */
@font-face {
  font-family: "PlutoRegular";
  src: url("fonts/PlutoRegular.otf") format("opentype");
  font-weight: 400;
  /* regular */
  font-style: normal;
}

/* 5) Poppins-Light.ttf */
@font-face {
  font-family: "PoppinsLight";
  src: url("fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  /* light */
  font-style: normal;
}

/* 6) TRICK-Bold.otf */
@font-face {
  font-family: "TRICKBold";
  src: url("fonts/TRICK-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "HarpersBold";
  src: url("fonts/Harpers-Bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

body {
  scroll-snap-type: y mandatory;
  /* overflow-y: scroll; */
}

section {
  scroll-snap-align: start;
  overflow: hidden;
  /* 🔥 clave */
}

/* El slider móvil necesita scroll horizontal — excepción al overflow:hidden global */
section.seccion-videos-mobile {
  overflow-x: scroll !important;
  overflow-y: visible !important;
}

section::-webkit-scrollbar {
  display: none;
}

.container-fluid,
.container {
  height: 100%;
}

/* [FIX #1] overflow-x:clip en html+body evita desbordamiento horizontal
   sin romper position:sticky (a diferencia de overflow-x:hidden) */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

header#masthead {
  position: relative;
}

.site-branding {
  background-color: #c9b2d7;
}

a.custom-logo-link {
  position: relative;
  top: 0;
  left: 13%;
  z-index: 9;
}

a.custom-logo-link img {
  width: 140px;
  height: auto;
}

.seccion-videos-mobile {
  display: none;
}

/* SECCION PRINCIPAL */
section.principal {
  --hero-bg-shift: 72px;
  background-color: #c9b2d7;
  position: relative;
  overflow: visible;
  z-index: 2000;
}

.principal-bg-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.principal-bg {
  position: absolute;
  top: calc(var(--hero-bg-shift) * -1);
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--bg-desktop);
  background-repeat: no-repeat;
  background-position: center 70%;
  background-size: cover;
  transform: translate3d(0, var(--hero-bg-shift), 0);
  will-change: transform;
}

.principal-shell,
.principal .txt-abajo {
  position: relative;
  z-index: 1;
}

a.custom-logo-link img,
section.principal .hero-pretitle,
section.principal .hero-title-wrap,
section.principal .hero-tagline-wrap,
section.principal .hero-panel-copy img,
section.principal .hero-panel-product,
section.principal .hero-product-visual img,
section.principal .hero-star-group img,
section.principal .hero-badge,
section.principal .txt-abajo {
  opacity: 0;
}


section.principal .txt-principal h1 {
  font-family: "HarpersBold", sans-serif;
  margin: 0;
  color: #4b5b41;
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 5px;
}

section.principal .txt-principal p {
  font-family: "PlutoCondBold", sans-serif;
  margin: 0;
  color: #4b5b41;
  font-size: 1.5rem;
  line-height: 1;
}

section.principal .txt-abajo p {
  font-family: "PlutoRegular", sans-serif;
  margin: 0;
  color: #4b5b41;
  font-size: 1.25rem;
  line-height: 1;
  position: relative;
  animation: slideText 6s ease-in-out infinite;
}

@keyframes slideText {
  0% {
    transform: translateX(0%);
  }

  25% {
    transform: translateX(1%);
  }

  50% {
    transform: translateX(-1%);
  }

  75% {
    transform: translateX(0.5%);
  }

  100% {
    transform: translateX(0%);
  }
}

section.principal .txt-abajo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 12px;
  background: #7d549e;
  border-radius: 50%;
  box-shadow: 0 16px 32px rgba(125, 84, 158, 0.18);
  z-index: 10;
  animation: bounceArrowCentered 2.6s ease-in-out infinite;
}

section.seccion-flecha {
  height: 15vh;
  background-color: #d9bbe1;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.seccion-flecha .txt-abajo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  padding: 12px;
  background: #7d549e;
  border-radius: 50%;
  box-shadow: 0 16px 32px rgba(125, 84, 158, 0.18);
  z-index: 10;
  animation: bounceArrowInline 2.6s ease-in-out infinite;
  transform: translateY(0);
}

section.seccion-flecha .txt-abajo img {
  width: 40px;
  height: auto;
  filter: brightness(0) invert(1);
}

section.principal .txt-abajo img {
  width: 50px;
  height: auto;
  filter: brightness(0) invert(1);
}

@keyframes bounceArrowCentered {
  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  20% {
    transform: translate(-50%, -25%);
    opacity: 0.88;
  }

  40% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  60% {
    transform: translate(-50%, -15%);
    opacity: 0.92;
  }

  80% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes bounceArrowInline {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  20% {
    transform: translateY(-25%);
    opacity: 0.88;
  }

  40% {
    transform: translateY(0);
    opacity: 1;
  }

  60% {
    transform: translateY(-15%);
    opacity: 0.92;
  }

  80% {
    transform: translateY(0);
    opacity: 1;
  }
}

.txt-principal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
}

.principal-shell {
  height: 100%;
}

.hero-container {
  position: relative;
  /* padding: 0rem 1rem 10rem 10rem; */
  width: 100%;
  height: 100%;
  min-height: 720px;
  display: flex;
  align-items: center;
  /* Evita que el padding sume al width y genere desbordamiento */
  box-sizing: border-box;
}

.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(320px, 1.6fr);
  align-items: center;
  gap: 0rem;
  width: 100%;
  min-height: inherit;
}

.hero-panel {
  position: relative;
  min-width: 0;
}

.hero-panel-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-self: stretch;
  min-height: 100%;
  z-index: 5;
}

.hero-panel-product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-self: stretch;
  min-height: 100%;
  z-index: 5;
}

.hero-product-copy,
.hero-product-stage {
  position: absolute;
  inset: 0;
}

.hero-product-copy {
  z-index: 2301;
  pointer-events: none;
}

.hero-product-copy img {
  position: absolute;
  display: block;
  height: auto;
}

.podrastu {
  max-width: 508px;
  top: 2%;
  left: 2%;
}

.resistirnos {
  z-index: 2;
  top: -6%;
  left: 9%;
}

.hero-product-stage {
  z-index: 2200;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  left: 0;
  top: 0;
  max-width: 100%;
  z-index: 5;
}

.hero-copy p {
  margin: 0;
}

.hero-title-wrap {
  position: relative;
  max-width: 100%;
}

.hero-pretitle {
  font-family: "PlutoCondBold", sans-serif;
  color: #502a24;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.hero-copy h1 {
  font-family: "HarpersBold", sans-serif;
  margin: 0;
  font-size: 6rem;
  line-height: 0.88;
  color: #7d549e;
  letter-spacing: -0.04em;
  max-width: 100%;
}

.hero-copy h1 > b {
  color: #502a24;
}

.hero-title-fruit {
  width: 130px;
  position: absolute;
  left: -54px;
  top: -13px;
  z-index: 6;
}
.linea-container img {
  width: 85%;
}
.hero-tagline {
  margin-top: 1.2rem;
  font-size: 1.35rem;
  color: #4b5b41;
  max-width: 420px;
}

.hero-tagline-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.5rem;
  margin-left: 5rem;
}

.hero-copy .hero-tagline {
  font-family: "PlutoCondBold", sans-serif;
  position: absolute;
  margin: 0;
  color: #502a24;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  z-index: 6;
  margin: 0;
  top: 35px;
  left: 61px;
}

.hero-tagline-fruit {
  position: absolute;
  width: 100px;
  left: 265px;
  top: 80px;
  z-index: 6;
}

.hero-star-group {
  position: absolute;
  width: 183px;
  right: -25%;
  top: -8%;
  z-index: 100000;
}

.hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #7d549e;
  width: auto;
  padding: 0;
  font-family: "HarpersBold", sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 95%;
  transform: translate(-50%, -50%) rotate(-11deg);
  z-index: 2;
  text-align: center;
  transform-origin: center;
  white-space: nowrap;
}

.hero-badge b {
  font-size: 2rem;
  font-style: normal;
  font-weight: bold;
}

.hero-product-visual {
  position: absolute;
  right: 0px;
  bottom: 120px;
  left: -110px;
  top: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  height: 430px;
  z-index: 2300;
}

.hero-product-visual img {
  position: absolute;
  opacity: 1 !important;
  transition: opacity 1s ease-in-out;
}

img.vector {
  width: 240px;
  left: 20%;
  top: -20%;
  z-index: 1;
}

.elipse-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  align-items: center;
  z-index: 4;
}

.hero-tagline-wrap .elipse-container {
  position: absolute;
  left: 9.8rem;
  right: 0;
  top: 0;
}

.elipse-container img {
  width: 97px;
  height: auto;
  display: inline-block;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  flex-shrink: 0;
  margin-left: -38px;
}

img.crema-nueces {
  width: 670px;
  top: -15%;
  filter: drop-shadow(0 18px 28px rgba(99, 49, 130, 0.2));
  z-index: 99999;
}

img.star {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  right: auto;
  top: auto;
  z-index: 1;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: starSpin 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform: rotate(0deg);
}

@keyframes starSpin {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

section.seccion-culpable {
  background-color: #d9bbe1;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: right -2rem bottom -1rem;
  background-size: contain;
}

section.seccion-culpable .container-fluid {
  height: 100%;
}

.culpable-layout {
  display: grid;
  /* [FIX #12] 260+320=580px mínimo superaba pantallas entre 426-576px */
  grid-template-columns: minmax(min(260px, 40%), 0.7fr) minmax(
      min(320px, 48%),
      1.12fr
    );
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: 100%;
  padding: clamp(4rem, 7vw, 5.75rem) 0 clamp(3rem, 7vw, 5rem) 0;
}

.culpable-copy-col {
  position: relative; /* CLAVE para posicionar la imagen libre */
  width: 100%;
  max-width: 100%;
}

.culpable-text {
  width: 100%;
  max-width: 700px; /* puedes ajustar esto si quieres limitar lectura */
}

.culpable-text p {
  font-family: "PlutoRegular", sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.65vw, 1.52rem);
  color: #71479b;
  width: 100%;
  max-width: 100%; /* ahora sí ocupa todo el ancho */
  line-height: 1.18;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.culpable-text p strong {
  display: block;
  font-family: "PlutoCondBold", sans-serif;
  font-weight: 700;
  color: #71479b;
}

.culpable-text h2 {
  font-family: "HarpersBold", sans-serif;
  font-size: clamp(3.2rem, 2.35rem + 2.25vw, 4.85rem);
  line-height: 1.1;
  color: #502a24;
  margin: 0;
  letter-spacing: -0.04em;
  width: 100%;
  max-width: 100%;
}

.culpable-text h2 > b {
  font-family: "HarpersBold", sans-serif;
  font-size: inherit;
  line-height: inherit;
  color: #71479b;
}

.crimen-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
  pointer-events: none;
  z-index: 0;
}

.crimen-imagen {
  display: block;
  width: 100%;
  height: auto;
}

/* OPCIONAL: evita que el texto se meta debajo de la imagen */
.culpable-text {
  padding-right: 100px; /* igual o un poco más que el width de la imagen */
}

.culpable-visual {
  position: relative;
  padding-right: clamp(0rem, 2vw, 2.5rem) !important;
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: end;
  align-items: flex-start;
}

.culpable-imagen {
  position: relative;
  z-index: 1;
  /* [FIX #5] dimensiones fijas → fluidas; la imagen ya no sale de su celda */
  width: clamp(150px, 100%, 367px);
  height: auto;
  aspect-ratio: 367 / 467; /* preserva la proporción visual original */
  border-radius: 32px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
  object-fit: cover;
  display: block;
}

/* ============================= */
/* SECCION VIDEO */
/* ============================= */
.seccion-video {
  width: 100%;
}

/* CONTENEDOR */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9; /* 🔥 altura proporcional */
  overflow: hidden;
  background: #5b2d82; /* fallback */
}

/* VIDEO */
.video-element {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* OVERLAY PURPURA */
.video-overlay {
  position: absolute;
  inset: 0;
  background: #b193c4;
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* BOTON PLAY */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 260px;
  height: 260px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMAGEN PLAY */
.video-play-btn img {
  width: 100%;
  height: auto;
}

/* ESTADO ACTIVO */
.video-wrapper.playing .video-overlay {
  opacity: 0;
  pointer-events: none;
}

.video-wrapper.playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
}
section.section-verdad {
  height: clamp(80px, 18vw, 283px);
  width: 100%;

  background-size: cover;
  background-position: center;

  display: flex;
  align-items: center;

  overflow: hidden;
  position: relative;
}

.texto-animado {
  font-family: "HarpersBold", sans-serif;
  font-size: clamp(45px, 12vw, 166px);

  color: white;
  font-weight: bold;

  position: absolute;
  white-space: nowrap;

  transform: translateX(100%);
  will-change: transform;
}

/* animación activa solo cuando entra al viewport */

.section-verdad.animar .texto-animado {
  animation: marqueeMove linear infinite;
}

@keyframes marqueeMove {
  from {
    transform: translateX(var(--start));
  }

  to {
    transform: translateX(var(--end));
  }
}
.seccion-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 320px));
  gap: clamp(2.25rem, 3vw, 3.5rem);
  align-items: start;
  align-content: center;
  justify-content: center;
  padding: 4.5rem clamp(1.5rem, 5vw, 6rem) 5.5rem;
  background: #c9b2d7;
  min-height: 100vh;
  box-sizing: border-box;
}

.seccion-videos .card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.seccion-videos .video-media {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 1.8rem;
  overflow: hidden;
  cursor: pointer;
}

/* VIDEO MINIATURA */
.seccion-videos .video-element {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 1.8rem;
  box-shadow: 0 18px 36px rgba(90, 54, 123, 0.14);
  background: #8a61b3;
  transition: transform 0.4s ease;
}

/* PLAY */
.seccion-videos .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: rgba(62, 45, 83, 0.48);
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: blur(1px);
}

.seccion-videos .video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 1rem solid rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
}

/* HOVER */
.seccion-videos .video-media:hover .video-element {
  transform: scale(1.05);
}

.seccion-videos .video-media:hover .video-play {
  transform: translate(-50%, -50%) scale(1.1);
}

/* TEXTO */
.seccion-videos .card-content {
  width: min(100%, 320px);
  padding: 1.15rem 0 0;
}

.seccion-videos .card-title {
  font-family: "HarpersBold", sans-serif;
  font-size: clamp(3rem, 2.2rem + 1.5vw, 4rem);
  line-height: 0.9;
  color: #684092;
  letter-spacing: -0.04em;
  margin: 0 0 0.45rem;
}

.seccion-videos .card-subtitle {
  font-family: "PlutoRegular", sans-serif;
  font-size: clamp(1.2rem, 1rem + 0.35vw, 1.55rem);
  color: #8a61b3;
  margin: 0 0 0.8rem;
}

.seccion-videos .card-description {
  font-family: "PlutoCondMedium", sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.3rem);
  line-height: 1.15;
  color: #7d549e;
  max-width: 320px;
  margin: 0 auto;
}

.mesa-layout {
  display: grid;
  grid-template-columns: 1fr;
  /* una sola columna */
  gap: 1.5rem;
  text-align: center;
  color: #fff;
  /* ajusta según tu diseño */
}

.seccion-mesa {
  position: relative;
  /* [FIX #6] altura fija → mínimo fluido; el contenido ya puede crecer */
  min-height: clamp(790px, 70vw, 1008px);
  height: auto;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  background-repeat: no-repeat;
}

.mesa-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.mesa-layout {
  width: min(100%, 1440px);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy";
  align-items: stretch;
  gap: 1rem;
  /* [FIX #7] 17rem × 2 = 544px laterales → fluido que nunca supera el 12% */
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 10vw, 17rem)
    clamp(1rem, 2vw, 1.25rem);
  box-sizing: border-box;
  text-align: left;
  color: inherit;
}

.mesa-copy {
  grid-area: copy;
  align-self: start;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative;
  z-index: 2;
  text-align: start;
}

.mesa-pretitle {
  margin: 0 0 0.55rem;
  font-family: "PlutoCondBold", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: #6a3f34;
}

.mesa-title {
  margin: 0;
  font-family: "HarpersBold", sans-serif;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #7d549e;
}
.mesa-title b {
  color: #9874b1;
}

.mesa-tagline-wrap {
  position: relative;
  width: 100%;
}

.mesa-title-fruit {
  position: absolute;
  z-index: 3;
}

.mesa-tagline-fruit {
  position: absolute;
  width: 52px;
  left: -0.2rem;
  top: 1.15rem;
  z-index: 3;
  transform: rotate(-14deg);
}

.mesa-almendra-fruit {
  width: 90px;
  left: 25rem;
  top: 3rem;
  transform: rotate(-10deg);
}

.mesa-maranon-fruit {
  width: 90px;
  left: 4rem;
  top: 0.65rem;
  transform: rotate(5deg);
}

.mesa-tagline-copy {
  position: absolute;
  width: auto;
  left: 0;
  top: 0;
  z-index: 2;
}

.seccion-mezcla {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #f4ede4;
  overflow: hidden;
}

.mezcla-layout {
  position: relative;
  width: min(100%, 1460px);
  margin: 0 auto;
  padding: 4.25rem 4.5rem 5.75rem;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.55fr);
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.mezcla-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: start;
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.mezcla-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 315px;
  min-height: 3.65rem;
  padding: 0.8rem 1.9rem 0.95rem;
  border-radius: 999px;
  background: #8fd0ed;
  color: #7d549e;
  font-family: "PlutoCondBold", sans-serif;
  font-size: clamp(1.85rem, 1.55rem + 0.85vw, 2.7rem);
  line-height: 1;
}

.mezcla-title {
  margin: 1.3rem 0 0;
  color: #7d549e;
  font-family: "HarpersBold", sans-serif;
  font-size: clamp(4.8rem, 3.3rem + 3.6vw, 8rem);
  line-height: 1;
  text-align: left;
  margin-left: 7rem;
}

.mezcla-cards {
  min-width: 0;
  /* [FIX #8] en móvil calc(100% + 5.5rem) desbordaba; se activa solo en desktop */
  width: 100%;
  max-width: none;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
  align-self: stretch;
}

.mezcla-cards .slick-list {
  overflow: hidden;
  margin: 0;
  padding: 0 0.75rem 0 0;
}

.mezcla-cards.slick-slider,
.mezcla-cards .slick-list,
.mezcla-cards .slick-track {
  height: 100%;
}

.mezcla-cards .slick-track {
  display: flex;
  align-items: stretch;
  margin-left: 0;
  gap: 1rem;
  height: 516px;
}

.mezcla-cards .slick-slide {
  height: 100%;
  min-height: 1px;
  padding: 0 1rem 0 0;
  margin-left: 1rem;
}

.mezcla-cards .slick-slide > div {
  height: 100%;
}

.mezcla-cards.slick-initialized {
  display: block;
}

.mezcla-cards:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 1.8rem;
}

.mezcla-cards:not(.slick-initialized) .mezcla-card:nth-child(n + 3) {
  display: none;
}

.mezcla-card {
  position: relative;
  height: 516px;
  border-radius: 1.9rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 22px 48px rgba(86, 61, 44, 0.16);
  background: #b07d54;
}

.mezcla-card-media,
.mezcla-card-pattern,
.mezcla-card-media::after {
  position: absolute;
  inset: 0;
}

.mezcla-card-media {
  overflow: hidden;
}

.mezcla-card-media::after {
  content: "";
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(35, 22, 6, 0.08) 0%,
    rgba(35, 22, 6, 0.18) 48%,
    rgba(35, 22, 6, 0.3) 100%
  );
}

.mezcla-card-pattern {
  z-index: 0;
  opacity: 0.35;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.mezcla-card-fruit {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.04);
}

.mezcla-card-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  min-height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.6rem 1.7rem;
  background: rgb(81 81 81 / 22%);
}

.mezcla-card.overlay-top .mezcla-card-overlay {
  inset: 0 0 auto;
  justify-content: flex-start;
  min-height: 38%;
  background: rgb(81 81 81 / 22%);
}

.mezcla-card-overlay h3 {
  color: #fff;
  font-family: "HarpersBold", sans-serif;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 2px;
  margin: 0;
  max-width: 8.5ch;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

.mezcla-card-overlay p {
  margin: 1rem 0 0;
  color: #fff;
  font-family: "PlutoRegular", sans-serif;
  font-size: 1.8rem;
  line-height: 1.2;
  text-wrap: balance;
}

section.seccion-mezcla .mezcla-next {
  position: absolute;
  right: clamp(1rem, 3.8vw, 3.25rem);
  bottom: clamp(0.75rem, 2.8vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  background: #7d549e;
  border-radius: 50%;
  box-shadow: 0 20px 34px rgba(125, 84, 158, 0.24);
  z-index: 20;
  cursor: pointer;
  animation: mezclaNextFloat 2.6s ease-in-out infinite;
}

section.seccion-mezcla .mezcla-next img {
  width: 2.35rem;
  height: auto;
  filter: brightness(0) invert(1);
  transform: rotate(-90deg);
}

section.seccion-mezcla .mezcla-next:hover {
  animation-play-state: paused;
}

@keyframes mezclaNextFloat {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }

  20% {
    transform: translateX(8px);
    opacity: 0.88;
  }

  40% {
    transform: translateX(0);
    opacity: 1;
  }

  60% {
    transform: translateX(5px);
    opacity: 0.92;
  }

  80% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* ============================= */
/* SECCION EVIDENCIA */
/* ============================= */

.seccion-evidencia {
  position: relative;

  min-height: clamp(720px, 70vw, 980px);

  height: 100vh;

  background-color: #a884d2;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  overflow: initial;
}

.evidencia-layout img.img-fondo {
  position: absolute;
  left: 0;
  bottom: -30%;
  width: 100%;
}

/* ============================= */
/* GRID PRINCIPAL */
/* ============================= */

.evidencia-layout {
  width: min(100%, 1440px);

  margin-inline: auto;

  min-height: inherit;

  padding: clamp(4.5rem, 6vw, 7.5rem) clamp(3rem, 6vw, 9.25rem) 0;

  display: grid;

  grid-template-columns:
    minmax(240px, 0.9fr)
    minmax(300px, 0.95fr)
    minmax(300px, 1.15fr);

  grid-template-rows:
    auto
    1fr
    auto;

  grid-template-areas:
    "copy benefits benefits"
    "stage benefits benefits"
    "stage claim claim";

  column-gap: clamp(0.75rem, 1.2vw, 1.5rem);

  row-gap: 1rem;

  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* ============================= */
/* TITULO */
/* ============================= */

.evidencia-copy {
  grid-area: copy;

  align-self: start;

  /* [FIX #9] contexto explícito para que .evidencia-title no escape al viewport */
  position: absolute;

  padding-top: 0.6rem;
}

.evidencia-title {
  /* [FIX #9] position:absolute sacaba el título del flujo sin contención */
  position: relative;

  font-family: "HarpersBold", sans-serif;

  font-size: clamp(5.5rem, 7vw, 9rem);

  line-height: 0.9;

  letter-spacing: -0.01em;

  /* max-width:60% era relativo al viewport, no al contenedor */
  max-width: 100%;

  margin: 0;

  color: #fff;
}
.evidencia-title b {
  font-size: clamp(4.8rem, 5.8vw, 7.5rem);
}

.evidencia-title span {
  color: #8fd0ed;

  font-size: clamp(5.5rem, 7vw, 9rem);
}

/* ============================= */
/* DECORACION LATERAL */
/* ============================= */

.evidencia-stage {
  grid-area: stage;

  position: relative;

  align-self: end;

  min-height: clamp(360px, 38vw, 560px);

  display: flex;

  align-items: flex-end;
}

.evidencia-lines {
  position: absolute;

  left: 130%;

  top: -25%;

  opacity: 0.92;

  pointer-events: none;
}

/* ============================= */
/* BENEFICIOS */
/* ============================= */

.evidencia-benefits {
  grid-area: benefits;

  display: grid;

  /* [FIX #10] minmax(240px,1fr) → en desktop con 2 cols mínimo 480px; fluido */
  grid-template-columns: repeat(2, minmax(min(240px, 45%), 1fr));

  gap: 0.95rem;

  width: min(100%, 650px);

  padding-top: clamp(1rem, 2vw, 2.4rem);

  /* [FIX #10] position:absolute con left:46% escapaba en pantallas 426-768px */
  position: absolute;

  left: clamp(30%, 46%, 52%); /* rango seguro en desktop */

  bottom: clamp(15%, 25%, 30%);
}

/* ============================= */
/* CARD BENEFICIO */
/* ============================= */

.evidencia-card {
  min-height: clamp(150px, 14vw, 207px);

  padding: clamp(0.8rem, 1vw, 1.15rem) clamp(0.6rem, 0.9vw, 1rem);

  border-radius: 1.1rem;

  background: rgba(255, 241, 214, 0.95);

  box-shadow: 0 20px 34px rgba(98, 59, 138, 0.12);

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

  align-items: center;

  text-align: center;
}

/* TITULO CARD */

.evidencia-card h3 {
  font-family: "PlutoCondBold", sans-serif;

  font-size: clamp(15px, 1.2vw, 20px);

  letter-spacing: 1px;

  color: #7d549e;

  margin: 0;
}

/* TEXTO CARD */

.evidencia-card p {
  font-family: "PlutoRegular", sans-serif;

  font-size: clamp(14px, 1.1vw, 18px);

  letter-spacing: 0.9px;

  color: #9a82b3;

  margin-top: 0.55rem;
}

/* ============================= */
/* CLAIM DECORATIVO */
/* ============================= */

.evidencia-claim {
  grid-area: claim;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  position: relative;

  z-index: 2;
}
.evidencia-claim img {
  position: absolute;
  top: -235px;
  width: 350px;
  left: 456px;
}

.evidencia-claim .pieza {
  position: relative;

  transition:
    transform 0.4s ease,
    top 0.4s ease;

  cursor: grab;
}

/* PIEZA SUPERIOR */

.pieza-noespor img {
  max-width: clamp(260px, 22vw, 371px);

  height: auto;
}

/* PIEZA INFERIOR */

.pieza-sabor img {
  max-width: clamp(150px, 14vw, 235px);

  transform: translate(5vw, -4vw);
}
/* ============================= */
/* SECCION CONCURSO */
/* ============================= */

.seccion-concurso {
  /* altura fluida equivalente a 900px original */
  min-height: clamp(620px, 60vw, 900px);

  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.5rem)
    clamp(3rem, 5vw, 5rem);

  background-image: var(--bg-concurso);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  margin-top: -4rem;
  padding-top: 10rem;

  position: relative;
  overflow: hidden;
  padding-bottom: 10rem;
}

/* ============================= */
/* LAYOUT PRINCIPAL */
/* ============================= */

.concurso-container {
  max-width: min(90vw, 1280px);

  margin-inline: auto;

  /* layout flexible configurable */
  display: flex;

  flex-direction: row; /* editable en futuro */

  align-items: flex-start;

  gap: clamp(1.5rem, 3vw, 3.5rem);
}

/* ============================= */
/* COLUMNA IMAGEN */
/* ============================= */

.concurso-media {
  flex: 1.1;

  display: flex;

  align-items: flex-end;
  justify-content: flex-start;

  min-width: 0;
  position: relative;
  margin-top: 5rem;
}

.concurso-img {
  width: 850px;
  height: auto;
  display: block;
  transform: translateX(-5vw);
  position: absolute;
  top: 0;
  left: -5rem;
}

/* ============================= */
/* COLUMNA TEXTO */
/* ============================= */

.concurso-content {
  flex: 0.86;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding-top: clamp(60px, 9vw, 120px);

  position: relative;

  align-items: end;
}

/* ============================= */
/* BLOQUE TITULO */
/* ============================= */

.concurso-title-wrap {
  position: relative;

  width: min(60vw, 44rem);

  margin-bottom: 1.25rem;

  left: 45%;

  transform: translateX(-60%);

  text-align: center;

  z-index: 2;
}

.concurso-title {
  font-family: "HarpersBold", sans-serif;

  font-size: clamp(3.5rem, 4.5vw, 5.9rem);

  font-weight: 800;

  line-height: 1;

  color: #5e3b7f;

  text-align: end;

  margin: 0;
}
.concurso-title b {
  color: #71479b;
}
/* ============================= */
/* BODY CONTENIDO */
/* ============================= */

.concurso-body {
  width: min(100%, 33rem);

  margin-left: clamp(0.5rem, 2vw, 2.25rem);
}

/* ============================= */
/* TIPOGRAFIA */
/* ============================= */

.concurso-subtitle {
  font-family: "HarpersBold", sans-serif;

  font-size: clamp(22px, 2vw, 35px);

  color: #71479b;

  margin-bottom: 1.2rem;
}

.concurso-description {
  font-family: "PlutoRegular", sans-serif;

  font-size: clamp(14px, 1.2vw, 18px);

  line-height: 120%;

  color: #9874b1;

  margin-bottom: 0.7rem;
}

.concurso-extra {
  font-family: "PlutoCondBold", sans-serif;

  font-size: clamp(15px, 1.4vw, 20px);

  color: #9874b1;

  margin-bottom: 1.2rem;
}

/* ============================= */
/* FORMULARIO */
/* ============================= */

.concurso-form {
  width: 100%;
}

/* CF7 FIX */

.concurso-form p {
  margin: 0;
}

.concurso-form .wpcf7 {
  width: 100%;
}

.concurso-form .wpcf7-form-control-wrap {
  display: block;
}

.concurso-form .wpcf7 input:not([type="submit"]) {
  width: 100%;

  min-height: clamp(2rem, 2.4vw, 2.4rem);

  padding: 0.72rem 1rem;

  border: 0;

  border-radius: 0.42rem;

  font-size: 0.9rem;

  font-family: "PlutoRegular", sans-serif;

  background: #fff;

  color: #554b58;
}

.concurso-form .wpcf7 input::placeholder {
  color: #9d929f;
}

.concurso-form .wpcf7 input:focus {
  outline: 2px solid rgba(107, 63, 160, 0.2);
}

/* BOTON */

.concurso-form .wpcf7-submit {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: clamp(6rem, 8vw, 7.75rem);

  min-height: clamp(2rem, 2.6vw, 2.35rem);

  padding: 0.55rem 1.9rem 0.65rem;

  border-radius: 999px;

  background: #6b3fa0;

  color: #fff;

  font-family: "PlutoCondBold", sans-serif;

  font-size: 1rem;

  transition: 0.3s ease;
}

.concurso-form input[type="submit"]:hover {
  background: #5a3388;
}

/* MENSAJES CF7 */

.concurso-form .wpcf7-response-output,
.concurso-form .wpcf7-not-valid-tip {
  font-family: "PlutoRegular", sans-serif;

  font-size: 0.78rem;

  line-height: 1.2;
}

.concurso-form .wpcf7-response-output {
  margin-top: 0.75rem;

  padding: 0.6rem 0.8rem;

  border-radius: 0.5rem;
}

/* [FIX #8] Reactiva la extensión del slider solo cuando hay espacio suficiente */
@media (min-width: 769px) {
  .mezcla-cards {
    width: calc(100% + 5.5rem);
    margin-right: -5.5rem;
  }
}

/* [FIX #12] Apila el layout culpable antes de que los mínimos (min 580px) excedan la pantalla */
@media (max-width: 580px) {
  .culpable-layout {
    grid-template-columns: 1fr;
    padding: 2.4rem 1rem;
  }
}

@media (max-width: 1024px) {
  /* =========================
HEADER
========================= */

  a.custom-logo-link img {
    width: 110px;
  }

  /* =========================
SECTION PRINCIPAL
========================= */

  .hero-container {
    padding: 0rem 1rem 8rem 6rem;
    min-height: 600px;
  }

  .hero-layout {
    grid-template-columns: minmax(260px, 2fr) minmax(260px, 1.6fr);
  }

  .hero-pretitle {
    font-size: 1.5rem;
  }

  .hero-copy h1 {
    font-size: 5.6rem;
  }

  .hero-copy h1 > b {
    font-size: 6rem;
  }

  .hero-title-fruit {
    width: 100px;
    left: 9rem;
    top: 20rem;
  }

  .hero-tagline-wrap {
    margin-left: 6rem;
  }

  .hero-copy .hero-tagline {
    font-size: 1.3rem;
    top: 1.5rem;
    left: 8rem;
  }

  .hero-tagline-fruit {
    width: 95px;
    left: 10rem;
    top: -15rem;
  }

  .elipse-container img {
    width: 70px;
    margin-left: -28px;
  }

  /* =========================
PRODUCT VISUAL HERO
========================= */

  .hero-product-visual {
    height: 360px;
    left: -90px;
    bottom: 100px;
  }

  img.crema-nueces {
    width: 600px;
    top: -12%;
  }

  .hero-star-group {
    width: 150px;
    right: -20%;
    top: -7%;
  }

  .hero-badge {
    font-size: 1.6rem;
  }

  .hero-badge b {
    font-size: 1.6rem;
  }

  /* .podrastu {
    max-width: 420px;
  } */

  /* .resistirnos {
    max-width: 320px;
  } */

  /* =========================
SCROLL BUTTON HERO
========================= */

  section.principal .txt-abajo {
    width: 54px;
    height: 54px;
    bottom: 70px;
  }

  section.principal .txt-abajo img {
    width: 40px;
  }

  .culpable-layout {
    grid-template-columns: minmax(240px, 0.88fr) minmax(280px, 1.12fr);
    padding: 4rem 0 4rem 0;
  }

  .culpable-imagen {
    width: 300px;
    border-radius: 26px;
  }

  .culpable-text p {
    font-size: 1.25rem;
  }

  .culpable-text h2 {
    font-size: 3.8rem;
  }

  .crimen-wrap {
    top: 95px;
    right: 20px;
    width: 180px;
  }

  .culpable-text {
    padding-right: 80px;
  }

  /* =========================
VIDEO FULL WIDTH
========================= */

  .video-play-btn {
    width: 160px;
    height: 160px;
  }

  /* =========================
VERDAD SCROLLER
========================= */

  section.section-verdad {
    height: 240px;
  }

  .texto-animado {
    font-size: 120px;
  }

  /* =========================
GRID VIDEOS TESTIMONIOS
========================= */

  .seccion-videos {
    gap: 2rem;
    padding: 3.5rem 4rem 4.5rem;
  }

  /* .seccion-videos .video-play {
    width: 3.4rem;
    height: 3.4rem;
  } */

  .seccion-videos .card-title {
    font-size: 3rem;
  }

  .seccion-videos .card-subtitle {
    font-size: 1.25rem;
  }

  .seccion-videos .card-description {
    font-size: 1rem;
  }

  /* =========================
SECCION MESA
========================= */

  /* .seccion-mesa {
    height: 760px;
  } */

  .mesa-layout {
    padding: 1.5rem 12rem 1.25rem;
  }

  .mesa-pretitle {
    font-size: 1.1rem;
  }

  .mesa-title {
    font-size: 4.1rem;
  }

  .mesa-tagline-fruit {
    width: 40px;
  }

  .mesa-almendra-fruit {
    width: 70px;
    left: 18rem;
    top: 2.5rem;
  }

  .mesa-maranon-fruit {
    width: 70px;
    left: 3rem;
    top: 0.6rem;
  }

  .mesa-tagline-copy {
    left: 5.5rem;
    top: 1.2rem;
  }

  /* =========================
SECCION MEZCLA
========================= */

  .mezcla-layout {
    padding: 3rem 3rem 4rem;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.55fr);
  }

  .mezcla-pill {
    min-width: 260px;
    font-size: 2.1rem;
  }

  .mezcla-title {
    font-size: 6rem;
  }

  .mezcla-cards .slick-track {
    height: 420px;
  }

  .mezcla-card {
    height: 420px;
  }

  .mezcla-card-overlay {
    padding: 1.6rem 1.2rem 1.4rem;
  }

  .mezcla-card-overlay h3 {
    font-size: 2.3rem;
  }

  .mezcla-card-overlay p {
    font-size: 1.15rem;
  }

  section.seccion-mezcla .mezcla-next {
    width: 3.8rem;
    height: 3.8rem;
  }

  section.seccion-mezcla .mezcla-next img {
    width: 1.8rem;
  }

  /* ============================= */
  /* SECCION EVIDENCIA */
  /* ============================= */

  /* .seccion-evidencia {
    min-height: clamp(620px, 68vw, 760px);
  } */

  /* GRID */

  .evidencia-layout {
    padding: clamp(3.2rem, 5vw, 5.5rem) clamp(2.2rem, 5vw, 6.8rem) 0;

    grid-template-columns:
      minmax(180px, 0.9fr)
      minmax(240px, 0.95fr)
      minmax(240px, 1.15fr);

    column-gap: clamp(0.55rem, 1vw, 1rem);
  }

  /* TITULO */

  .evidencia-title {
    font-size: clamp(4rem, 4.8vw, 5.8rem);
  }

  .evidencia-title span {
    font-size: clamp(4.5rem, 5.8vw, 7rem);
  }

  /* DECORACION */

  .evidencia-stage {
    min-height: clamp(260px, 34vw, 420px);
  }

  .evidencia-lines {
    left: 122%;
    top: -18%;
  }

  /* BENEFICIOS */

  .evidencia-benefits {
    grid-template-columns: repeat(2, minmax(180px, 1fr));

    width: min(100%, 480px);

    left: 44%;
    bottom: 21%;
  }

  /* CARD */

  .evidencia-card {
    min-height: clamp(120px, 12vw, 155px);

    padding: clamp(0.6rem, 0.8vw, 0.85rem) clamp(0.45rem, 0.7vw, 0.75rem);
  }

  /* CARD TITULO */

  .evidencia-card h3 {
    font-size: clamp(13px, 1vw, 16px);
  }

  /* CARD TEXTO */

  .evidencia-card p {
    font-size: clamp(12px, 0.95vw, 14px);
  }

  /* CLAIM */

  .pieza-noespor img {
    max-width: clamp(200px, 20vw, 280px);
  }

  .pieza-sabor img {
    max-width: clamp(120px, 12vw, 180px);

    transform: translate(4vw, -3vw);
  }

  /* ============================= */
  /* SECCION CONCURSO */
  /* ============================= */

  .seccion-concurso {
    min-height: clamp(520px, 58vw, 680px);

    padding: clamp(2rem, 3vw, 3rem) clamp(1rem, 2.4vw, 2rem)
      clamp(2.2rem, 4vw, 3.6rem);
  }

  /* LAYOUT */

  .concurso-container {
    gap: clamp(1rem, 2vw, 2.4rem);
  }

  /* IMAGEN */

  .concurso-img {
    width: min(46vw, 520px);

    transform: translateX(-2.2vw);
  }

  /* CONTENT */

  .concurso-content {
    padding-top: clamp(40px, 7vw, 85px);
  }

  /* TITULO WRAP */

  .concurso-title-wrap {
    width: min(60vw, 32rem);

    left: 43%;

    transform: translateX(-56%);
  }

  /* TITULO */

  .concurso-title {
    font-size: clamp(2.6rem, 4vw, 4.2rem);
  }

  /* BODY */

  .concurso-body {
    width: min(100%, 22rem);
  }

  /* SUBTITLE */

  .concurso-subtitle {
    font-size: clamp(16px, 1.6vw, 24px);
  }

  /* DESCRIPTION */

  .concurso-description {
    font-size: clamp(12px, 1vw, 14px);
  }

  /* EXTRA */

  .concurso-extra {
    font-size: clamp(13px, 1.1vw, 15px);
  }

  /* INPUT */

  .concurso-form .wpcf7 input:not([type="submit"]) {
    min-height: clamp(1.7rem, 2vw, 2rem);

    font-size: 0.8rem;
  }

  /* BUTTON */

  .concurso-form .wpcf7-submit {
    min-width: clamp(4.5rem, 6vw, 6rem);

    min-height: clamp(1.7rem, 2vw, 2rem);

    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  /* HEADER */

  a.custom-logo-link img {
    width: 85px;
  }

  /* HERO */

  .hero-container {
    padding: 0rem 1rem 6rem 3.5rem;
    min-height: 520px;
  }

  .hero-layout {
    grid-template-columns:
      minmax(200px, 2fr)
      minmax(200px, 1.6fr);
  }

  .hero-pretitle {
    font-size: 1.1rem;
  }

  .hero-copy h1 {
    font-size: 4rem;
  }

  .hero-copy h1 > b {
    font-size: 4.3rem;
  }

  .hero-title-fruit {
    width: 70px;
    left: 7rem;
    top: 15rem;
  }

  .hero-star-group {
    right: -30%;
  }

  .hero-copy .hero-tagline {
    font-size: 1rem;
    top: 1.2rem;
    left: 5rem;
  }

  .hero-tagline-fruit {
    width: 65px;
    left: 6.5rem;
    top: -11rem;
  }

  .hero-tagline-wrap .elipse-container {
    left: 4.8rem;
  }

  .elipse-container img {
    width: 55px;
    margin-left: -20px;
  }

  .hero-product-visual {
    height: 260px;
    left: -65px;
    bottom: 70px;
  }

  img.crema-nueces {
    width: 430px;
  }

  .hero-star-group {
    width: 110px;
  }

  .hero-badge {
    font-size: 1.1rem;
  }
  /* 
  .podrastu {
    max-width: 280px;
  } */

  /* .resistirnos {
    max-width: 220px;
  } */

  /* SCROLL BUTTON */

  section.principal .txt-abajo {
    width: 44px;
    height: 44px;
    bottom: 55px;
  }

  section.principal .txt-abajo img {
    width: 32px;
  }

  /* CULPABLE */

  .culpable-layout {
    grid-template-columns:
      minmax(200px, 0.88fr)
      minmax(220px, 1.12fr);

    padding: 4rem 0 6rem 0;
  }

  .culpable-imagen {
    width: 210px;
  }

  .culpable-text h2 {
    font-size: 2.8rem;
  }

  .culpable-text p {
    font-size: 1rem;
  }

  .crimen-wrap {
    top: 125px;
    right: 12px;
    width: 130px;
  }

  .culpable-text {
    padding-right: 55px;
  }

  /* VIDEO */

  .video-play-btn {
    width: 120px;
    height: 120px;
  }

  /* VERDAD */

  section.section-verdad {
    height: 180px;
  }

  .texto-animado {
    font-size: 90px;
  }

  /* TESTIMONIOS */

  .seccion-videos {
    padding: 3rem 2.5rem 3.5rem;
    gap: 1.6rem;
  }

  /* .seccion-videos .video-play {
    width: 2.6rem;
    height: 2.6rem;
  } */

  .seccion-videos .card-title {
    font-size: 2.2rem;
  }

  .seccion-videos .card-subtitle {
    font-size: 1rem;
  }

  .seccion-videos .card-description {
    font-size: 0.9rem;
  }

  /* MESA */

  /* .seccion-mesa {
    height: 560px;
  } */

  .mesa-layout {
    padding: 1.5rem 6rem 1rem;
  }

  .mesa-pretitle {
    font-size: 0.9rem;
  }

  .mesa-title {
    font-size: 2.8rem;
  }

  .mesa-tagline-fruit {
    width: 28px;
  }

  .mesa-almendra-fruit {
    width: 45px;
    left: 13rem;
    top: 1.5rem;
  }

  .mesa-maranon-fruit {
    width: 55px;
    left: 2rem;
    top: 0rem;
  }

  .mesa-tagline-copy {
    left: 4.5rem;
    width: 150px;
    top: 1.2rem;
  }

  /* MEZCLA */

  .mezcla-layout {
    padding: 2.4rem 2rem 3rem;
  }

  .mezcla-pill {
    min-width: 180px;
    font-size: 1.4rem;
  }

  .mezcla-title {
    font-size: 3.8rem;
  }

  .mezcla-card {
    height: 300px;
  }

  .mezcla-cards .slick-track {
    height: 300px;
  }

  .mezcla-card-overlay h3 {
    font-size: 1.6rem;
  }

  .mezcla-card-overlay p {
    font-size: 0.9rem;
  }

  section.seccion-mezcla .mezcla-next {
    width: 2.6rem;
    height: 2.6rem;
  }

  section.seccion-mezcla .mezcla-next img {
    width: 1.3rem;
  }

  /* ============================= */
  /* SECCION EVIDENCIA */
  /* ============================= */

  /* .seccion-evidencia {
    min-height: clamp(660px, 68vw, 760px);
  } */

  /* GRID */

  .evidencia-layout {
    padding: clamp(3.2rem, 5vw, 5.5rem) clamp(2.2rem, 5vw, 6.8rem) 0;

    grid-template-columns:
      minmax(180px, 0.9fr)
      minmax(240px, 0.95fr)
      minmax(240px, 1.15fr);

    column-gap: clamp(0.55rem, 1vw, 1rem);
  }

  /* TITULO */

  .evidencia-title {
    font-size: clamp(3.2rem, 4.2vw, 4.6rem);
  }

  .evidencia-title span {
    font-size: clamp(3.6rem, 5vw, 5.5rem);
  }

  /* DECORACION */

  .evidencia-stage {
    min-height: clamp(260px, 34vw, 420px);
  }

  .evidencia-lines {
    left: 135%;
    top: -75%;
    width: 340px;
  }

  /* BENEFICIOS */

  .evidencia-benefits {
    grid-template-columns: repeat(2, minmax(180px, 1fr));

    width: min(100%, 400px);

    left: 44%;
    bottom: 21%;
  }

  /* CARD */

  .evidencia-card {
    min-height: clamp(120px, 12vw, 155px);

    padding: clamp(0.6rem, 0.8vw, 0.85rem) clamp(0.45rem, 0.7vw, 0.75rem);
  }

  /* CARD TITULO */

  .evidencia-card h3 {
    font-size: clamp(13px, 1vw, 16px);
  }

  /* CARD TEXTO */

  .evidencia-card p {
    font-size: clamp(12px, 0.95vw, 14px);
  }

  /* CLAIM */

  .pieza-noespor img {
    max-width: clamp(200px, 20vw, 280px);
  }

  .pieza-sabor img {
    max-width: clamp(120px, 12vw, 180px);

    transform: translate(4vw, -3vw);
  }

  /* ============================= */
  /* SECCION CONCURSO */
  /* ============================= */

  .seccion-concurso {
    min-height: clamp(520px, 58vw, 680px);

    padding: clamp(2rem, 3vw, 3rem) clamp(1rem, 2.4vw, 2rem)
      clamp(2.2rem, 4vw, 3.6rem);
  }

  /* LAYOUT */

  .concurso-container {
    gap: clamp(1rem, 2vw, 2.4rem);
  }

  /* IMAGEN */

  .concurso-img {
    width: min(46vw, 520px);

    transform: translateX(-2.2vw);
  }

  /* CONTENT */

  .concurso-content {
    padding-top: clamp(40px, 7vw, 85px);
  }

  /* TITULO WRAP */

  .concurso-title-wrap {
    width: min(60vw, 32rem);

    left: 43%;

    transform: translateX(-56%);
  }

  /* TITULO */

  .concurso-title {
    font-size: clamp(2.6rem, 4vw, 4.2rem);
  }

  /* BODY */

  .concurso-body {
    width: min(100%, 22rem);
  }

  /* SUBTITLE */

  .concurso-subtitle {
    font-size: clamp(16px, 1.6vw, 24px);
  }

  /* DESCRIPTION */

  .concurso-description {
    font-size: clamp(12px, 1vw, 14px);
  }

  /* EXTRA */

  .concurso-extra {
    font-size: clamp(13px, 1.1vw, 15px);
  }

  /* INPUT */

  .concurso-form .wpcf7 input:not([type="submit"]) {
    min-height: clamp(1.7rem, 2vw, 2rem);

    font-size: 0.8rem;
  }

  /* BUTTON */

  .concurso-form .wpcf7-submit {
    min-width: clamp(4.5rem, 6vw, 6rem);

    min-height: clamp(1.7rem, 2vw, 2rem);

    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  a.custom-logo-link img {
    width: 65px;
  }

  /* HERO */

  .hero-container {
    padding: 0rem 1rem 4rem 2rem;
    min-height: 420px;
  }

  .hero-pretitle {
    font-size: 0.9rem;
  }

  .hero-copy h1 {
    font-size: 2.8rem;
  }

  .hero-copy h1 > b {
    font-size: 4rem;
  }

  .hero-title-fruit {
    width: 48px;
    left: 4rem;
    top: 10rem;
  }

  .hero-copy .hero-tagline {
    font-size: 0.8rem;
    left: 3.2rem;
  }

  .hero-tagline-fruit {
    width: 40px;
    left: 4rem;
    top: -8rem;
  }

  .elipse-container img {
    width: 36px;
    margin-left: -14px;
  }

  .hero-product-visual {
    height: 190px;
    left: -45px;
    bottom: 45px;
  }

  img.crema-nueces {
    width: 280px;
  }

  .hero-star-group {
    width: 70px;
  }

  .hero-badge {
    font-size: 0.8rem;
  }

  /* .podrastu {
    max-width: 180px;
  } */

  /* .resistirnos {
    max-width: 140px;
  } */

  /* SCROLL BUTTON */

  section.principal .txt-abajo {
    width: 36px;
    height: 36px;
    bottom: 45px;
  }

  section.principal .txt-abajo img {
    width: 24px;
  }

  /* CULPABLE */

  .culpable-imagen {
    width: 150px;
  }

  .culpable-text h2 {
    font-size: 2rem;
  }

  .culpable-text p {
    font-size: 0.8rem;
  }

  .crimen-wrap {
    top: 45px;
    width: 90px;
  }

  .culpable-text {
    padding-right: 40px;
  }

  /* VIDEO */

  .video-play-btn {
    width: 90px;
    height: 90px;
  }

  /* VERDAD */

  section.section-verdad {
    height: 130px;
  }

  .texto-animado {
    font-size: 60px;
  }

  /* TESTIMONIOS */

  .seccion-videos {
    padding: 2rem 4.5rem 2.5rem;
    gap: 1.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* 
  .seccion-videos .video-play {
    width: 2rem;
    height: 2rem;
  } */

  .seccion-videos .card-title {
    font-size: 1.6rem;
  }

  .seccion-videos .card-subtitle {
    font-size: 0.85rem;
  }

  .seccion-videos .card-description {
    font-size: 0.75rem;
  }

  /* MESA */

  /* .seccion-mesa {
    height: 420px;
  } */

  .mesa-layout {
    padding: 1rem 3rem 0.8rem;
  }

  .mesa-pretitle {
    font-size: 0.7rem;
  }

  .mesa-title {
    font-size: 2rem;
  }

  .mesa-tagline-fruit {
    width: 18px;
  }

  .mesa-almendra-fruit {
    width: 28px;
    left: 6rem;
  }

  .mesa-maranon-fruit {
    width: 28px;
    left: 1.2rem;
  }

  .mesa-tagline-copy {
    left: 2rem;
  }

  /* MEZCLA */

  .mezcla-layout {
    padding: 1.5rem 1.2rem 2rem;
  }

  .mezcla-pill {
    min-width: 120px;
    font-size: 1rem;
  }

  .mezcla-title {
    font-size: 2.6rem;
  }

  .mezcla-card {
    height: 220px;
  }

  .mezcla-cards .slick-track {
    height: 220px;
  }

  .mezcla-card-overlay h3 {
    font-size: 1.2rem;
  }

  .mezcla-card-overlay p {
    font-size: 0.7rem;
  }

  section.seccion-mezcla .mezcla-next {
    width: 2rem;
    height: 2rem;
  }

  section.seccion-mezcla .mezcla-next img {
    width: 0.9rem;
  }
}

/* =========================
OCULTAR SLIDER MOVIL EN DESKTOP
========================= */

@media (min-width: 426px) {
  .seccion-videos-mobile {
    display: none;
  }
}

/* =====================================================
MEDIA QUERY 425px
ESCALA PROPORCIONAL GLOBAL MOBILE
===================================================== */

@media (max-width: 500px) {
  /* =========================
  HEADER
  ========================= */

  a.custom-logo-link {
    left: 5%;
  }

  a.custom-logo-link img {
    width: 100px; /* 88 × 0.88 */
  }

  /* =========================
  HERO
  ========================= */

  section.principal {
    height: 750px !important; /* 580 × 0.88 */
    overflow: visible !important;
    z-index: 2000 !important;
  }

  .principal-bg {
    background-image: var(--bg-mobile);
  }

  .linea-container {
    display: flex;
    justify-content: flex-end;
  }
  .txt-abajo {
    visibility: hidden;
  }

  .hero-container {
    padding: 0rem 0.8rem 3rem 1.4rem;
    min-height: 77%; /* 520 × 0.88 */
    align-items: flex-start;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-product-copy {
    top: 230px; /* 225 × 0.88 */
    transform: translate(-22px, -22px);
  }

  .hero-product-copy .resistirnos {
    width: 250px; /* 200 × 0.88 */
    transform: rotate(20deg);
  }

  .hero-product-copy .podrastu {
    width: 300px;
    top: 25px;
    left: -5px;
    transform: rotate(18deg);
  }

  .hero-pretitle {
    font-size: 1rem;
  }

  .hero-copy h1 {
    font-size: 4rem; /* 3.8 × 0.84 */
  }

  /* .hero-copy h1 > b {
    font-size: 3.2rem;
  } */

  .hero-title-fruit {
    width: 64px;
    left: 38px;
    top: 0;
  }

  .hero-tagline-wrap {
    margin-left: 1.8rem;
  }

  .hero-copy .hero-tagline {
    font-size: 1.3rem;
    top: 21px;
    left: 90px;
  }

  .hero-tagline-fruit {
    width: 64px;
    left: 191px;
    top: 56px;
  }

  .elipse-container {
    left: 6.6rem !important;
  }

  .elipse-container img {
    width: 42px; /* 50 × 0.84 */
    margin-left: -14px;
  }

  img.crema-nueces {
    width: 370px; /* 360 × 0.86 */
    top: -35%;
    left: 20%;
  }

  .hero-product-visual {
    bottom: 32px; /* 40 × 0.80 */
    left: -22px;
    height: 140px; /* 165 × 0.85 */
  }

  .hero-star-group {
    width: 100px; /* 90 × 0.84 */
    right: -12%;
    top: -20%;
  }

  .hero-badge {
    font-size: 1.2rem;
  }

  .hero-badge b {
    font-size: 1.2rem;
  }

  /* =========================
  SECCION CULPABLE
  ========================= */

  section.seccion-culpable {
    padding-top: 50px !important;
    height: 740px !important; /* 930 × 0.88 */
    background-position: right -1.8rem bottom 1.8rem;
    background-size: 185%;
    position: relative;
    z-index: 1 !important;
  }

  .culpable-layout {
    grid-template-columns: 1fr;
    padding: 2rem 0.8rem;
  }

  .culpable-visual {
    justify-content: center;
  }

  .culpable-imagen {
    width: 100%; /* 342 × 0.86 */
    border-radius: 12px;
    height: 212px; /* 245 × 0.86 */
  }

  .culpable-text {
    padding-right: 0 !important;
    margin: 0 auto;
  }

  .culpable-text p {
    text-align: center;
    font-size: 0.88rem;
    margin-top: 0.8rem;
    transform: translateY(-85px);
  }

  .culpable-text h2 {
    font-size: 2.7rem;
    transform: translateY(-72px);
  }

  .crimen-wrap {
    top: auto;
    bottom: 60px;
    right: 6px;
    width: 100%;
  }

  .crimen-imagen {
    transform: translate(16px, 20px);
  }

  /* =========================
  VIDEO
  ========================= */

  .video-play-btn {
    width: 100px;
    height: 100px;
  }

  /* =========================
  VERDAD
  ========================= */

  section.section-verdad {
    height: 90px; /* 80 × 0.85 */
  }

  .texto-animado {
    font-size: 45px; /* 45 × 0.80 */
  }

  /* =========================
  VIDEOS GRID
  ========================= */

  .seccion-videos {
    display: none;
  }

  /* =========================
CONTENEDOR SLIDER
========================= */
  .seccion-videos-mobile {
    display: flex;
    /*gap: 18px;*/
    height: 806px !important;
    padding: 80px 24px 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background: #c9b2d7;
  }

  /* ocultar scrollbar */
  .seccion-videos-mobile::-webkit-scrollbar {
    display: none;
  }

  .video-media-mobile {
    position: relative;
  }

  .video-play-btn-mobile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(201, 178, 215, 0.278);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s ease;
  }

  .video-play-btn-mobile::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    border-top: 0.7rem solid transparent;
    border-bottom: 0.7rem solid transparent;
    border-left: 1rem solid rgba(255, 255, 255, 0.92);
    transform: translate(-50%, -50%);
  }
  .video-card-mobile.playing .video-play-btn-mobile {
    opacity: 0;
    pointer-events: none;
  }

  /* =========================
CARD BASE (estado pequeño)
========================= */

  .video-card-mobile {
    flex: 0 0 100%;
    max-width: 70%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #c9b2d7 !important;
    border: none !important;
    transition: all 0.35s ease;
    justify-content: center;
  }

  /* =========================
CARD ACTIVA (estado grande)
========================= */

  .video-card-mobile.is-active {
    flex: 0 0 78%;
    max-width: 78%;
  }

  /* =========================
WRAPPER VIDEO
========================= */

  .video-media-mobile {
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    padding: 15px 15px 15px 15px;
  }

  /* =========================
VIDEO
========================= */

  .video-element-mobile {
    width: 100%;
    aspect-ratio: 2/4;
    object-fit: cover;
    border-radius: 28px;
    transition: all 0.35s ease;
  }

  /* =========================
CONTENIDO TEXTO
========================= */

  .card-content-mobile {
    padding-top: 18px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* =========================
NOMBRE
========================= */

  .card-title-mobile {
    font-family: "HarpersBold", sans-serif;
    font-size: 32px;
    line-height: 1;
    color: #684092;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    text-align: center;
  }

  /* =========================
ROL
========================= */

  .card-subtitle-mobile {
    font-family: "PlutoRegular", sans-serif;
    font-size: 15px;
    color: #8a61b3;
    margin-bottom: 8px;
    text-align: center;
  }

  /* =========================
DESCRIPCIÓN
========================= */

  .card-description-mobile {
    font-family: "PlutoCondMedium", sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: #7d549e;
    max-width: 92%;
    text-align: center;
  }

  /* =========================
  MESA
  ========================= */
  /* 
  .seccion-mesa {
    height: 640px; 
  } */

  .mesa-container {
    min-height: 100vh;
    align-items: flex-start;
  }

  .mesa-layout {
    min-height: 100vh;
    padding: 1.6rem 1.2rem 0;
    text-align: left;
  }

  .mesa-copy {
    align-items: flex-start;
  }

  .mesa-pretitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .mesa-title {
    font-size: 2.5rem; /* 3.1 × 0.84 */
    line-height: 1;
  }

  .mesa-title b {
    font-size: 4.5rem !important;
    margin-bottom: -20px;
    display: block;
    line-height: 0.7;
  }

  .mesa-tagline-wrap {
    margin-top: 0.8rem;
    min-height: 68px;
  }

  .mesa-tagline-copy {
    position: absolute;
    left: 143px;
    top: 125px;
    width: 270px;
    transform: rotate(-29deg);
  }

  .mesa-almendra-fruit {
    width: 46px; /* 55 × 0.84 */
    left: auto;
    right: 0.9rem;
    top: 5.2rem;
  }

  .mesa-maranon-fruit {
    width: 50px; /* 60 × 0.83 */
    left: 9.4rem;
    top: 5.4rem;
  }

  .mesa-tagline-fruit {
    width: 42px; /* 50 × 0.84 */
    left: 19.6rem;
    top: 2.2rem;
  }

  /* =========================
  MEZCLA
  ========================= */
  .concurso-media {
    margin-top: 1rem;
  }
  .concurso-img {
    position: relative;
    width: 550px;
  }
  .seccion-mezcla {
    min-height: auto;
    padding: 2.4rem 1.1rem 4rem;
    align-items: flex-start;
  }

  .mezcla-layout {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 1.8rem;
  }

  .mezcla-copy {
    max-width: 100%;
    align-items: center;
    text-align: start;
  }

  .mezcla-pill {
    min-width: auto;
    padding: 0px 29px;
    line-height: 0;
    font-size: 1.5rem;
    border-radius: 999px;
    min-height: 2.65rem;
    margin-left: -30px;
  }

  .mezcla-title {
    font-size: 4.7rem;
    line-height: 0.92;
    margin-left: 0;
  }

  .mezcla-cards {
    width: 100%;
    margin: 0;
  }

  .mezcla-cards .slick-track {
    height: 450px; /* 420 × 0.86 */
    gap: 0.6rem;
  }

  .mezcla-card {
    height: 360px;
    border-radius: 1.4rem;
  }

  .mezcla-card-overlay {
    padding: 1.2rem 1rem 1.1rem;
  }

  .mezcla-card-overlay h3 {
    font-size: 2.5rem;
    max-width: 100%;
  }

  .mezcla-card-overlay p {
    font-size: 1.5rem;
    max-width: 100%;
  }

  section.seccion-mezcla .mezcla-next {
    display: none !important;
  }

  /* =========================
  EVIDENCIA
  ========================= */

  .seccion-evidencia {
    position: relative;
    height: 1122px;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
  }

  img.img-fondo-movil {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
  }
  .evidencia-layout {
    position: relative;
    width: 100%;
    min-height: 800px;
    display: block;
    padding: 1.6rem 1rem 0;
    background-repeat: no-repeat;
    background-size: 175% auto;
    background-position: 0% bottom;
    overflow: hidden;
  }
  .evidencia-claim img {
    position: absolute;
    top: auto;
    bottom: 63px;
    width: 250px;
    left: auto;
    right: -11px;
  }
  .evidencia-copy {
    position: relative;
    z-index: 4;
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 0.8rem;
  }

  .evidencia-title {
    position: relative;
    margin: 0;
    font-size: 3.5rem; /* 2.95 × 0.85 */
    line-height: 0.9;
    letter-spacing: 1px;
    max-width: 100%;
    color: #fff;
    text-align: left;
  }

  .evidencia-title span {
    font-size: 3.5rem;
    color: #8fd0ed;
  }
  .evidencia-title b {
    font-size: 2.5rem;
  }
  .evidencia-stage {
    display: block;
    position: absolute;
    left: 0;
    bottom: auto;
    width: 100%;
    top: 0;
    min-height: 0;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .evidencia-lines {
    position: absolute;
    left: auto;
    right: 20px;
    top: 140px;
    height: 780px;
    width: auto;
  }

  .evidencia-benefits {
    position: relative;
    z-index: 3;
    left: auto;
    bottom: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .evidencia-card {
    height: 260px; /* 198 × 0.87 */
    padding: 0.85rem 0.65rem 0.75rem;
    border-radius: 1rem;
    justify-content: center;
  }

  .evidencia-icon img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
  }

  .evidencia-card h3 {
    font-size: 1.2rem;
  }

  .evidencia-card p {
    font-size: 0.95rem;
    line-height: 1;
  }

  .evidencia-claim {
    position: relative;
    z-index: 4;
    width: 100%;
    min-height: 136px;
    margin-top: 14.5rem;
    align-items: flex-end;
    padding-right: 0.3rem;
  }

  .evidencia-claim .pieza {
    position: absolute;
  }

  .pieza-noespor {
    right: 0.9rem;
    bottom: 2.8rem;
  }

  .pieza-noespor img {
    max-width: 162px; /* 190 × 0.85 */
    width: 100%;
    height: auto;
    transform: rotate(-20deg);
  }

  .pieza-sabor {
    right: 0.4rem;
    bottom: 0.5rem;
  }

  .pieza-sabor img {
    max-width: 110px; /* 130 × 0.85 */
    width: 100%;
    height: auto;
    transform: none;
  }

  /* =========================
  CONCURSO
  ========================= */

  .seccion-concurso {
    background-position: top;
    background-size: 100% auto;
    padding-top: 27% !important;
    padding: 0;
    min-height: 464px;
    margin-top: -5.5rem;
    background-image: var(--bg-concurso);
    background-image:
      linear-gradient(
        to bottom,
        transparent 0%,
        #f5e9d7 20%,
        #f5e9d7 55%,
        #f5e9d7 55%,
        #f5e9d7 100%
      ),
      var(--bg-concurso);
  }

  .concurso-body {
    margin-left: 0;
  }

  .concurso-container {
    flex-direction: column-reverse;
    gap: 0.9rem;
  }

  .concurso-img {
    width: 520px;
    transform: translateX(-1.6rem);
  }

  .concurso-content {
    padding-top: 0;
    align-items: flex-start;
  }

  .concurso-title-wrap {
    left: 0;
    transform: none;
    width: 100%;
  }

  .concurso-title {
    font-size: 2.72rem; /* 2rem × 0.86 */
    text-align: left;
  }

  .concurso-subtitle {
    font-size: 1.5rem;
  }

  .concurso-description {
    font-size: 0.9rem;
  }

  .concurso-extra {
    font-size: 1.2rem;
  }

  .concurso-form .wpcf7-submit {
    min-width: 3.6rem;
    min-height: 1.4rem;
    font-size: 1rem;
  }
}

/* =====================================================
MEDIA QUERY 375px
ESCALA PROPORCIONAL — iPhone SE / Mini
Factor base: 375/425 ≈ 0.88
===================================================== */

@media (max-width: 375px) {
  /* =========================
  HEADER
  ========================= */

  a.custom-logo-link {
    left: 5%;
  }

  a.custom-logo-link img {
    width: 76px; /* 88 × 0.88 */
  }

  /* =========================
  HERO
  ========================= */

  section.principal {
    height: 510px !important; /* 580 × 0.88 */
    overflow: visible !important;
    z-index: 2000 !important;
  }

  .txt-abajo {
    visibility: hidden;
  }

  .hero-container {
    padding: 0rem 0.8rem 3rem 1.4rem;
    min-height: 460px; /* 520 × 0.88 */
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-product-copy {
    top: 198px; /* 225 × 0.88 */
    transform: translate(-22px, -22px);
  }

  .hero-product-copy .resistirnos {
    width: 176px; /* 200 × 0.88 */
    transform: rotate(20deg);
  }

  .hero-product-copy .podrastu {
  width: 264px;
  top: 15px;
  left: -18px;
  transform: rotate(17deg);
  }

  .hero-pretitle {
    font-size: 0.72rem;
  }

  .hero-copy h1 {
    font-size: 3.2rem; /* 3.8 × 0.84 */
  }

  .hero-copy h1 > b {
    font-size: 3.2rem;
  }

  .hero-title-fruit {
    width: 64px;
    left: 2.8rem;
    top: -0.3rem;
  }

  .hero-tagline-wrap {
    margin-left: 1.8rem;
  }

  .linea-container img {
    width: 75%;
  }

  .hero-copy .hero-tagline {
    font-size: 0.85rem;
    top: 1.3rem;
    left: 6.4rem;
  }

  .hero-tagline-fruit {
    width: 54px;
    left: 9rem;
    top: 2.5rem;
  }

  .elipse-container {
    left: 6.6rem !important;
  }

  .elipse-container img {
    width: 42px; /* 50 × 0.84 */
    margin-left: -14px;
  }

  img.crema-nueces {
    width: 310px; /* 360 × 0.86 */
    top: -35%;
    left: 20%;
  }

  .hero-product-visual {
    bottom: 32px; /* 40 × 0.80 */
    left: -22px;
    height: 140px; /* 165 × 0.85 */
  }

  .hero-star-group {
    width: 76px; /* 90 × 0.84 */
    right: -12%;
    top: -20%;
  }

  .hero-badge {
    font-size: 0.82rem;
  }

  .hero-badge b {
    font-size: 0.82rem;
  }

  .txt-abajo {
    visibility: hidden;
  }

  /* =========================
  SECCION CULPABLE
  ========================= */

  section.seccion-culpable {
    padding-top: 120px !important;
    height: 820px !important; /* 930 × 0.88 */
    background-position: right -1.8rem bottom 1.8rem;
    background-size: 185%;
    position: relative;
    z-index: 1 !important;
  }

  .culpable-layout {
    grid-template-columns: 1fr;
    padding: 2rem 0.8rem;
  }

  .culpable-imagen {
    width: 295px; /* 342 × 0.86 */
    border-radius: 12px;
    height: 212px; /* 245 × 0.86 */
  }

  .culpable-text {
    padding-right: 0 !important;
    margin: 0 auto;
  }

  .culpable-text p {
    text-align: center;
    font-size: 0.88rem;
    margin-top: 0.8rem;
    transform: translateY(-85px);
  }

  .culpable-text h2 {
    font-size: 2.6rem;
    transform: translateY(-72px);
  }

  .crimen-imagen {
    transform: translate(16px, 20px);
  }

  /* =========================
  VIDEO
  ========================= */

  .video-play-btn {
    width: 100px;
    height: 100px;
  }

  /* =========================
  VERDAD
  ========================= */

  section.section-verdad {
    height: 90px; /* 80 × 0.85 */
  }

  .texto-animado {
    font-size: 45px; /* 45 × 0.80 */
  }

  /* =========================
  VIDEOS GRID
  ========================= */

  .seccion-videos {
    display: none;
  }

  /* =========================
  SLIDER MÓVIL
  ========================= */

  .seccion-videos-mobile {
    height: 620px;
    display: flex;
    /*gap: 18px;*/
    padding: 32px 0 40px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    background: #c9b2d7;
  }

  .video-card-mobile {
    flex: 0 0 58%;
    max-width: 58%;
  }

  .video-card-mobile.is-active {
    flex: 0 0 78%;
    max-width: 78%;
  }

  .card-title-mobile {
    font-size: 28px;
  }

  .card-subtitle-mobile {
    font-size: 13px;
  }

  .card-description-mobile {
    font-size: 12px;
  }

  /* =========================
  MESA
  ========================= */

  /* .seccion-mesa {
    height: 640px;
  } */

  .mesa-container {
    min-height: 100vh;
    align-items: flex-start;
  }

  .mesa-layout {
    min-height: 100vh;
    padding: 1.6rem 1.2rem 0;
    text-align: left;
  }

  .mesa-copy {
    align-items: flex-start;
  }

  .mesa-pretitle {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
  }

  .mesa-title {
    font-size: 2.5rem; /* 3.1 × 0.84 */
    line-height: 0.95;
    letter-spacing: -0.01em;
  }

  .mesa-title b {
    font-size: 4.5rem !important;
  }

  .mesa-tagline-wrap {
    margin-top: 0.8rem;
    min-height: 68px;
  }

  .mesa-tagline-copy {
    position: relative;
    left: 155px;
    top: 155px;
    width: 210px;
    transform: rotate(-29deg);
  }

  .mesa-almendra-fruit {
    width: 46px; /* 55 × 0.84 */
    left: auto;
    right: 0.9rem;
    top: 5.2rem;
  }

  .mesa-maranon-fruit {
    width: 50px; /* 60 × 0.83 */
    left: 7.4rem;
    top: 5.4rem;
  }

  .mesa-tagline-fruit {
    width: 42px; /* 50 × 0.84 */
    left: 17.6rem;
    top: 2.2rem;
  }

  /* =========================
  MEZCLA
  ========================= */

  .seccion-mezcla {
    min-height: auto;
    padding: 2.4rem 1.1rem 4rem;
    align-items: flex-start;
  }

  .mezcla-layout {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 1.8rem;
  }

  .mezcla-copy {
    max-width: 100%;
    align-items: center;
    text-align: start;
  }

  .mezcla-pill {
    min-width: auto;
    padding: 0.55rem 1.3rem 0.65rem;
    font-size: 1.5rem;
    border-radius: 999px;
  }

  .mezcla-title {
    font-size: 4.7rem; /* 3.2 × 0.84 */
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin-top: 0.8rem;
  }

  .mezcla-cards {
    width: 100%;
    margin: 0;
  }

  .mezcla-cards .slick-track {
    height: 360px; /* 420 × 0.86 */
    gap: 0.6rem;
  }

  .mezcla-card {
    height: 360px;
    border-radius: 1.4rem;
  }

  .mezcla-card-overlay {
    padding: 1.2rem 1rem 1.1rem;
  }

  .mezcla-card-overlay h3 {
    font-size: 1.7rem;
    max-width: 10ch;
    letter-spacing: 0.035em;
  }

  .mezcla-card-overlay p {
    font-size: 1.2rem;
    max-width: 16ch;
  }

  section.seccion-mezcla .mezcla-next {
    display: none !important;
  }

  /* =========================
  EVIDENCIA
  ========================= */

  .seccion-evidencia {
    position: relative;
    min-height: 800px; /* 880 × 0.91 */
    height: auto;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
  }

  .evidencia-layout {
    position: relative;
    width: 100%;
    min-height: 800px;
    display: block;
    padding: 1.6rem 1rem 0;
    background-repeat: no-repeat;
    background-size: 175% auto;
    background-position: 0% bottom;
    overflow: hidden;
  }

  .evidencia-copy {
    position: relative;
    z-index: 4;
    width: 100%;
    text-align: center;
    margin-bottom: 1.4rem;
    padding-top: 0.8rem;
  }

  .evidencia-title {
    position: relative;
    margin: 0;
    font-size: 2.6rem; /* 2.95 × 0.85 */
    line-height: 0.9;
    letter-spacing: -0.02em;
    max-width: 100%;
    color: #fff;
  }

  .evidencia-title span {
    font-size: 3.5rem;
    color: #8fd0ed;
  }

  .evidencia-stage {
    display: block;
    position: absolute;
    left: -5.5rem;
    bottom: 5.5rem;
    width: 54%;
    min-height: 0;
    height: 310px; /* 360 × 0.86 */
    z-index: 1;
    pointer-events: none;
  }

  .evidencia-lines {
    position: absolute;
    left: auto;
    right: -14rem;
    top: -31.5rem;
    width: 345px;
    max-width: none;
    opacity: 0.95;
    transform: rotate(5deg);
  }

  .evidencia-benefits {
    position: relative;
    z-index: 3;
    left: auto;
    bottom: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .evidencia-card {
    min-height: 172px; /* 198 × 0.87 */
    padding: 0.85rem 0.65rem 0.75rem;
    border-radius: 1rem;
    justify-content: flex-start;
  }

  .evidencia-claim img {
    bottom: 55px;
    width: 230px;
    right: -18px;
  }

  .evidencia-icon img {
    width: 32px; /* 38 × 0.84 */
    height: 32px;
  }

  .evidencia-card h3 {
    font-size: 1.2rem;
  }

  .evidencia-card p {
    margin-top: 0.5rem;
    font-size: 1rem;
  }

  .evidencia-claim {
    position: relative;
    z-index: 4;
    width: 100%;
    min-height: 136px;
    margin-top: 12.5rem;
    align-items: flex-end;
    padding-right: 0.3rem;
  }

  .evidencia-claim .pieza {
    position: absolute;
  }

  .pieza-noespor {
    right: 0.9rem;
    bottom: 2.8rem;
  }

  .pieza-noespor img {
    max-width: 162px; /* 190 × 0.85 */
    width: 100%;
    height: auto;
    transform: rotate(-20deg);
  }

  .pieza-sabor {
    right: 0.4rem;
    bottom: 0.5rem;
  }

  .pieza-sabor img {
    max-width: 110px; /* 130 × 0.85 */
    width: 100%;
    height: auto;
    transform: none;
  }

  /* =========================
  CONCURSO
  ========================= */

  .seccion-concurso {
    background-position: 35%;
    background-size: 615% auto;
    padding-top: 30% !important;
    padding: 1.4rem 0.8rem 1.8rem;
    min-height: 460px;
  }

  .concurso-body {
    margin-left: 0;
  }

  .concurso-container {
    flex-direction: column-reverse;
    gap: 0.9rem;
  }

  .concurso-img {
    width: 520px;
    transform: translateX(-1.6rem);
  }

  .concurso-content {
    padding-top: 0;
    align-items: flex-start;
  }

  .concurso-title-wrap {
    left: 0;
    transform: none;
    width: 100%;
  }

  .concurso-title {
    font-size: 2.72rem; /* 2rem × 0.86 */
    text-align: left;
  }

  .concurso-subtitle {
    font-size: 1.5rem;
  }

  .concurso-description {
    font-size: 0.9rem;
  }

  .concurso-extra {
    font-size: 1.2rem;
  }

  .concurso-form .wpcf7-submit {
    min-width: 3.6rem;
    min-height: 1.4rem;
    font-size: 1rem;
  }
}

.concurso-form label {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.concurso-form input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
}
.concurso-form input[type="checkbox"] + span:before {
  display: block;
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  top: 0px;
  left: 0px;
  border: 1px solid #9f9f9f;
}
.concurso-form input[type="checkbox"] + span:after {
  display: block;
  position: absolute;
  font-family: bootstrap-icons !important;
  content: "\F26E";
  top: -9px;
  left: -9px;
  visibility: hidden;
  font-size: 2.5rem;
  text-align: center;
  line-height: 30px;
}
.concurso-form input[type="checkbox"]:checked + span:before {
  background: transparent;
}
.concurso-form input[type="checkbox"]:checked + span:after {
  visibility: visible;
}
.concurso-form span.wpcf7-list-item {
  display: inline-block;
  margin: 0 0 0 30px;
  font-size: 10px;
}
.concurso-form .wpcf7 .wpcf7-list-item {
  display: block;
  font-size: 0.6rem;
  line-height: 1.3;
  color: black;
}
.concurso-form .wpcf7 .wpcf7-list-item a {
  color: #5e3b7f;
  text-decoration: underline;
}

a.txt_terminos {
  margin-bottom: 2rem;
  display: block;
  color: #5e3b7f !important;
  text-decoration: underline !important;
}