/* Encabezado de productos (con manzanas, ver js/apples.js) y las 4 fichas */
#productos { padding: 60px 0; text-align: center; }
#productos .container { position: relative; z-index: 1; }
#productos h1 { font-style: italic; }
#productos .kicker { font-size: 66px; font-weight: 100; }
#productos .brand { font-size: 100px; font-weight: 800; }
#productos hr { width: 46%; margin: 15px auto; border: 0; border-top: 1px solid #b29053; }
#productos p {
  max-width: 570px;
  margin: 10px auto 0;
  color: #636466;
  font-weight: 300;
  line-height: 2.8;
}
#productos .celiacos { margin-top: 15px; }

/* Manzanas: capa detrás del texto, pegadas a los costados de la sección.
   Tres movimientos independientes sobre cada una:
   - entrada (opacity + scale) cuando la sección entra en pantalla -> .apples-in
   - flotación continua (transform, por keyframes)
   - desplazamiento con el scroll (translate, vía --shift desde js/apples.js) */
.apples { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.apple {
  position: absolute;
  height: auto;
  opacity: 0;
  scale: .6;
  translate: 0 var(--shift, 0px);
  transition: opacity .9s ease, scale 1.1s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--delay, 0s);
  animation: appleFloat var(--float, 7s) ease-in-out infinite alternate;
  animation-delay: var(--float-delay, 0s);
  will-change: translate, transform;
}
.apples-in .apple { opacity: 1; scale: 1; }
@keyframes appleFloat {
  from { transform: translateY(-9px) rotate(-3deg); }
  to   { transform: translateY(9px) rotate(3deg); }
}
/* izquierda */
#apple1 { left: -4%;  top: -70px;   width: clamp(190px, 22vw, 378px); --delay: 0s;   --float: 9s; }
#apple2 { left: 8%;   bottom: 20px; width: clamp(100px, 11vw, 187px); --delay: .15s; --float: 6.5s; --float-delay: -2s; }
#apple3 { left: 19%;  top: 46%;     width: clamp(60px, 7vw, 120px);   --delay: .3s;  --float: 5.5s; --float-delay: -4s; }
/* derecha */
#apple4 { right: -3%; top: -30px;   width: clamp(160px, 19vw, 317px); --delay: .1s;  --float: 8s;   --float-delay: -3s; }
#apple5 { right: 5%;  bottom: 30px; width: clamp(130px, 15vw, 252px); --delay: .25s; --float: 7s;   --float-delay: -1s; }
#apple6 { right: 21%; bottom: 26%;  width: clamp(44px, 5vw, 84px);    --delay: .4s;  --float: 5s;   --float-delay: -2.5s; }

.product { background: center / cover no-repeat; }
.product .col { width: 50%; }
.product h2 { font-size: 40px; font-style: italic; margin-bottom: 20px; }
.product h3 { font-weight: 400; font-style: italic; }
.product p { padding-top: 30px; font-size: 17px; font-weight: 300; }
.product .txt-right { text-align: right; }
.product .txt-right p { max-width: 450px; margin-left: auto; }

#real { background-image: url(../assets/img/fondo1.webp); }
#real .txt { padding-top: 35px; }
#real .pic { padding-bottom: 20px; }
#negra { background-image: url(../assets/img/fondo2.webp); }
#negra .pic { padding-top: 35px; text-align: right; }
#negra .txt { padding-top: 65px; padding-bottom: 20px; }
#negra .txt p { max-width: 401px; }
#frutada { background-image: url(../assets/img/fondo31.webp); }
#frutada .txt { padding-top: 65px; }
#frutada .pic { padding-bottom: 20px; }
#blanca { background-image: url(../assets/img/fondo4.webp); padding-top: 35px; text-align: center; }
#blanca .col { width: 100%; }
#blanca p { max-width: 480px; margin: 0 auto; font-size: 16px; }
#blanca img { padding-top: 30px; padding-bottom: 18px; }

.center-img-left { position: relative; bottom: -20px; left: -140px; }
.center-img-left-red { position: relative; bottom: -20px; left: -235px; }
.center-img-right { position: relative; left: 180px; top: 0; }

/* En pantallas medianas las dos manzanas chicas del medio quedarían debajo del párrafo */
@media (max-width: 1279px) {
  #apple3, #apple6 { display: none; }
}
/* Por debajo de este ancho el título ocupa casi toda la fila: no hay lugar a los costados */
@media (max-width: 991px) {
  .apples { display: none; }
}
@media (max-width: 768px) {
  #productos .kicker { font-size: 11vw; }
  #productos .brand { font-size: 15vw; }
  #productos p { padding: 0 15px; }
  .product .col { width: 100%; }
  .product .txt, .product .pic { padding-top: 15px !important; padding-bottom: 0 !important; }
  .product p { margin-bottom: 0; }
  .order-2 { order: 2; }
  .center-img-left, .center-img-left-red, .center-img-right { left: -8px; bottom: 0; text-align: center !important; }
  .center-img-left img, .center-img-right img, #blanca img { max-width: 51%; }
  .center-img-left-red img { max-width: 54%; }
}
@media (max-width: 480px) {
  .product h2 { font-size: 8vw; }
  .product h3 { font-size: 5vw; }
  .product .txt, .product .txt p { text-align: center; margin-left: auto; margin-right: auto; }
  .product .txt { padding-left: 15px; padding-right: 15px; }
}
@media (max-width: 400px) {
  #frutada { background-image: url(../assets/img/fondo3-mobile.webp); }
}