/* ILUSTRACIONES
   Dibujos hechos solo con CSS: olivar, almendra y QR. El aceite y el
   laurel ya usan foto real de la etiqueta.
   Sin imagenes, para que el sitio no dependa de ficheros externos. */

.visual{
  position:relative;min-height:540px;border-radius:40px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(33,31,27,.02),rgba(57,70,43,.16)),
    linear-gradient(150deg,var(--arena) 0 29%,#83955f 29% 39%,#64784a 39% 46%,#aa7f58 46% 50%,#6e824f 50% 58%,#b68c63 58% 62%,#718651 62% 71%,#a57858 71% 76%,#53653f 76% 100%);
  box-shadow:var(--sombra)
}
/* Velo sobre los dibujos: en claro es transparente, en oscuro los baja. */
.visual::after,.product-visual::after,.cross-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--velo-dibujo)
}
.sun{position:absolute;right:45px;top:48px;width:110px;height:110px;border-radius:50%;background:#f4d48e;box-shadow:0 0 70px #f4d48e}
.branch{position:absolute;left:53px;top:45px;width:130px;height:180px}
.stem{position:absolute;left:63px;top:-10px;width:7px;height:165px;background:#607445;transform:rotate(17deg);border-radius:8px}
.olive{position:absolute;width:24px;height:36px;border-radius:50% 50% 48% 48%;background:#495b2f;box-shadow:inset 0 -5px 8px rgba(0,0,0,.12)}
.o1{left:43px;top:6px}.o2{left:18px;top:35px}.o3{left:70px;top:33px}.o4{left:4px;top:72px}.o5{left:49px;top:70px}.o6{left:86px;top:76px}.o7{left:28px;top:108px}.o8{left:70px;top:114px}
.olivecard{
  position:absolute;left:28px;right:28px;bottom:28px;background:rgba(255,253,250,.94);
  backdrop-filter:blur(14px);border-radius:26px;padding:22px;box-shadow:0 15px 45px rgba(38,37,31,.18)
}
.olivecard strong{font-family:Georgia,serif;font-size:1.5rem;color:var(--acento-texto)}
.olivecard p{margin:6px 0 0;color:#625f58}
/* Almendra */
.almond{
  width:108px;height:174px;border-radius:52% 52% 44% 44%/70% 70% 30% 30%;
  background:linear-gradient(118deg,#e8c894,#bb8f5d 55%,var(--tierra));transform:rotate(-8deg);
  box-shadow:0 22px 38px rgba(90,66,44,.26);position:relative
}
.almond:before{
  content:"";position:absolute;left:50%;top:15%;width:3px;height:70%;
  background:rgba(92,66,42,.42);border-radius:4px;transform:translateX(-50%)
}
.almond:after{
  content:"";position:absolute;left:19%;top:13%;width:36%;height:30%;border-radius:50%;
  background:rgba(255,255,255,.4);filter:blur(7px)
}