/* =============================================================================
   NUTRITUPP · landing.css — capa 03
   -----------------------------------------------------------------------------
   Lo que hace que la home hable el mismo idioma que el hero. Se carga después
   de sistema.css y componentes.css, y su trabajo es sobre todo QUITAR: la
   plantilla comprada mete rellenos de caramelo, tramas de garabatos, seis
   fondos distintos y 43 cajas blancas sobre fondo blanco.

   La regla que ordena todo: el fondo del hero es el fondo de la página. No hay
   costura porque no hay dos colores.
   ========================================================================== */

/* --- 1. La crema es el suelo, no el decorado de una sección --------------- */
body,
.section-bg,
section.bg-light,
.testimonial,
.benefits,
.popular-product,
.newsletter-section {
  background-color: var(--crema, #f1e9e2) !important;
  background-image: none !important;
}

/* La cabecera era una plancha blanca con sombra apoyada sobre la crema: el
   corte se veía en el píxel 140, antes de que el hero pintara nada. */
header.header,
.header__wrapper,
.header-section {
  background: var(--crema, #f1e9e2) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--linea, #dcd2c4);
}

/* --- 2. Fuera los rellenos de caramelo y sus tramas ----------------------- */
/* menta #D2F7CF, mostaza #FFDA84 y rosa #FFD3CC son residuos de la plantilla
   Torganic. La paleta de Nutritupp no tiene ninguno de los tres. */
.sale-banner__item--style2,
.sale-banner__item--style22,
.sale-banner__item--style5,
.sale-banner__item--style52,
.sale-banner__item-inner {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* --- 3. Las tarjetas de plato pierden la caja ----------------------------- */
/* Eran 43 cajitas blancas con borde #EBF8E4 sobre fondo blanco: un borde que
   no separaba nada y que solo dibujaba la retícula que el grid ya dibuja. */
.product__item-inner {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}
.product__item-thumb,
.product__item-thumb img {
  border-radius: var(--radio-foto, 12px);
  overflow: hidden;
}
.product__item-thumb {
  box-shadow: var(--sombra-hero, 0 18px 30px -18px rgba(22, 25, 21, .25));
}
/* El nombre del plato se cortaba a UNA línea: 12 de los 24 quedaban truncados. */
.product__item-content h5,
.product__item-content .product__item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 4. Movimiento: una sola regla, no siete envoltorios de 1000 ms ------- */
/* AOS animaba envoltorios gigantes (uno envuelve las ~50 fichas de plato):
   media página apareciendo de golpe con un desvanecido de un segundo. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-entra] > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s var(--curva, cubic-bezier(.22, .61, .36, 1)),
              transform .22s var(--curva, cubic-bezier(.22, .61, .36, 1));
}
[data-entra].dentro > * { opacity: 1; transform: none; }
[data-entra].dentro > :nth-child(2) { transition-delay: .04s; }
[data-entra].dentro > :nth-child(3) { transition-delay: .08s; }
[data-entra].dentro > :nth-child(n+4) { transition-delay: .12s; }

/* --- 5. La sección de planes, que hoy no existe --------------------------- */
.planes-home {
  background: var(--crema-honda, #e5dcd0);
  padding-block: clamp(72px, 9vw, 128px);
}
.planes-home__caja { max-width: 1160px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); }
.planes-home__titulo {
  font-size: var(--t-h2, clamp(1.75rem, 1.1rem + 2vw, 2.5rem));
  line-height: 1.18;
  margin: 0 0 10px;
  text-wrap: balance;
}
.planes-home__entrada { color: var(--tinta, #556354); margin: 0 0 40px; max-width: 52ch; }

.planes-home__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.plan-col {
  padding: 4px clamp(16px, 2.5vw, 32px) 4px;
  border-left: 1px solid var(--linea-honda, #d2c6b4);
}
.plan-col:first-child { border-left: 0; padding-left: 0; }
.plan-col:last-child { padding-right: 0; }

.plan-col__nombre { font-size: var(--t-h4, 1.375rem); font-weight: 700; margin: 0 0 6px; }
.plan-col__precio {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 4px;
  color: var(--teal, #145961);
  font-variant-numeric: tabular-nums;
}
.plan-col__unidad { color: var(--tinta, #556354); font-size: .92rem; margin: 0 0 14px; }
.plan-col__texto { color: var(--tinta, #556354); margin: 0 0 20px; font-size: .95rem; line-height: 1.5; }
.plan-col__dto {
  display: inline-block;
  background: var(--verde, #74b74e);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
}

@media (max-width: 860px) {
  .planes-home__rejilla { grid-template-columns: 1fr; }
  .plan-col {
    border-left: 0;
    border-top: 1px solid var(--linea-honda, #d2c6b4);
    padding: 26px 0;
  }
  .plan-col:first-child { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-entra] > * { opacity: 1; transform: none; }
}

/* =============================================================================
   Nada asoma por el lateral (Andrés: «el responsive se me va un poco»).
   Medido a 390 px: el halo del Cómo Funciona (cf-fondo, 420 px) y el banner
   de cookies de la plantilla (413 px, su botón a 539) empujaban la página a
   415 px de scroll horizontal.
   ========================================================================== */
/* los adornos del plato (halo, sonar, aro) se recortan en el borde del
   escenario en vez de empujar la página */
.cf-scrub__media { overflow: hidden; }

/* el banner de cookies de la plantilla: ancho de viewport de verdad */
.cookie-banner {
  width: auto !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box;
  max-width: 100vw;
}
.cookie-banner .btn { max-width: 100%; white-space: normal; }

/* y el cinturón: clip (no hidden, que rompería los sticky del hero y del
   Cómo Funciona convirtiendo el body en contenedor de scroll) */
body { overflow-x: clip; }