{"id":129,"date":"2026-03-28T20:56:31","date_gmt":"2026-03-28T19:56:31","guid":{"rendered":"https:\/\/clauscoffee.org\/?page_id=129"},"modified":"2026-04-04T22:25:37","modified_gmt":"2026-04-04T20:25:37","slug":"129-2","status":"publish","type":"page","link":"https:\/\/clauscoffee.org\/?page_id=129","title":{"rendered":""},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"129\" class=\"elementor elementor-129\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c8892a e-flex e-con-boxed e-con e-parent\" data-id=\"2c8892a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b44b2e8 elementor-widget elementor-widget-html\" data-id=\"b44b2e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"reserva-hero\">\n\n  <!-- EMPAQUE DETR\u00c1S -->\n  <div class=\"bg-pack\">\n    <img decoding=\"async\" src=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/03\/bolsa-3-d-png-1.png\" class=\"pack\">\n\n    <!-- HUMO -->\n    <div class=\"smoke s1\"><\/div>\n    <div class=\"smoke s2\"><\/div>\n    <div class=\"smoke s3\"><\/div>\n  <\/div>\n\n  <!-- TEXTO -->\n  <h1 class=\"reserva-text\">\n    <span>Reserva<\/span>\n    <span>ClausCoffee<\/span>\n  <\/h1>\n\n<\/section>\n\n<style>\n\/* \ud83d\udd25 QUITA BORDES DEL BODY (IMPORTANTE PARA ELEMENTOR) *\/\nbody, html {\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow-x: hidden;\n}\n\n\/* \ud83d\udd25 FULL WIDTH REAL *\/\n#reserva-hero {\n  position: relative;\n  width: 100vw;\n  min-height: 70vh;\n  margin-left: calc(-50vw + 50%); \/* \ud83d\udc48 CLAVE PARA QUITAR BORDES *\/\n\n  background: #000;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  perspective: 1200px;\n}\n\n\/* EMPAQUE DETR\u00c1S *\/\n.bg-pack {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* imagen *\/\n.pack {\n  width: 320px;\n  max-width: 70vw;\n  opacity: 0.25;\n  filter: blur(1px) drop-shadow(0 40px 60px rgba(0,0,0,0.8));\n  animation: floatPack 6s ease-in-out infinite;\n}\n\n@keyframes floatPack {\n  0% { transform: translateY(0) rotateZ(0);}\n  50% { transform: translateY(-20px) rotateZ(2deg);}\n  100% { transform: translateY(0) rotateZ(0);}\n}\n\n\/* HUMO *\/\n.smoke {\n  position: absolute;\n  bottom: 70%;\n  left: 50%;\n  width: 40px;\n  height: 140px;\n  background: rgba(255,255,255,0.15);\n  filter: blur(20px);\n  border-radius: 50%;\n  animation: smoke 4s infinite;\n}\n\n.s2 { left: 55%; animation-delay: 1s;}\n.s3 { left: 45%; animation-delay: 2s;}\n\n@keyframes smoke {\n  0% { opacity: 0; transform: translateY(0) scale(1);}\n  30% { opacity: 1;}\n  100% { opacity: 0; transform: translateY(-180px) scale(2);}\n}\n\n\/* TEXTO *\/\n.reserva-text {\n  position: relative;\n  z-index: 2;\n  font-size: clamp(40px, 8vw, 110px);\n  font-weight: 900;\n  text-align: center;\n  color: #fff;\n  transform-style: preserve-3d;\n}\n\n.reserva-text span {\n  display: block;\n  letter-spacing: 3px;\n  position: relative;\n\n  text-shadow:\n    0 2px 0 #aaa,\n    0 4px 0 #888,\n    0 8px 20px rgba(0,0,0,0.9);\n\n  animation: floatText 4s ease-in-out infinite;\n}\n\n@keyframes floatText {\n  0% { transform: translateY(0);}\n  50% { transform: translateY(-15px);}\n  100% { transform: translateY(0);}\n}\n\n\/* brillo *\/\n.reserva-text span::after {\n  content:\"\";\n  position:absolute;\n  top:0;\n  left:-120%;\n  width:120%;\n  height:100%;\n  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);\n  animation: shine 4s infinite;\n}\n\n@keyframes shine {\n  0% { left:-120%;}\n  100% { left:120%;}\n}\n\n\/* 3D PC *\/\n@media(min-width:768px){\n  #reserva-hero:hover .reserva-text{\n    transform: rotateY(10deg) rotateX(5deg);\n    transition: 0.4s;\n  }\n}\n\n\/* \ud83d\udcf1 MOBILE *\/\n@media(max-width:768px){\n\n  #reserva-hero{\n    min-height: 60vh;\n    padding: 40px 10px;\n  }\n\n  .pack{\n    width: 220px;\n    opacity: 0.2;\n  }\n\n  .reserva-text{\n    font-size: 38px;\n  }\n\n}\n<\/style>\n\n<script>\n\/\/ 3D MOUSE SOLO PC\ndocument.addEventListener(\"mousemove\",(e)=>{\n  if(window.innerWidth > 768){\n    let text = document.querySelector(\".reserva-text\");\n\n    let x = (window.innerWidth\/2 - e.clientX)\/30;\n    let y = (window.innerHeight\/2 - e.clientY)\/30;\n\n    text.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n  }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d55ff26 e-flex e-con-boxed e-con e-parent\" data-id=\"d55ff26\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8fe78df elementor-widget elementor-widget-html\" data-id=\"8fe78df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"reserva-content-full\">\n\n\n\n<div class=\"wrap-content\">\n\n  <div class=\"block\">\n    <p>\n      ClausCoffee no nace como un simple caf\u00e9, sino como una expresi\u00f3n del origen, el proceso y la intenci\u00f3n. Cada grano es trabajado con precisi\u00f3n para revelar su verdadero car\u00e1cter.\n    <\/p>\n  <\/div>\n\n  <div class=\"block\">\n    <p>\n      Detr\u00e1s de cada empaque existe una construcci\u00f3n consciente: selecci\u00f3n rigurosa, tueste controlado y una visi\u00f3n enfocada en resaltar la esencia natural del caf\u00e9.\n    <\/p>\n  <\/div>\n\n  <div class\n    <p>\n      \n  <\/div>\n\n<\/div>\n\n<\/section>\n\n<style>\n\/* FULL WIDTH *\/\n#reserva-content-full {\n  position: relative;\n  width: 100vw;\n  min-height: 100vh;\n  margin-left: calc(-50vw + 50%);\n  padding: 100px 20px;\n  background: #000;\n  overflow: hidden;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* \ud83d\udc97 HUMO FONDO *\/\n.smoke-bg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n\/* HUMO *\/\n.smoke {\n  position: absolute;\n  bottom: -100px;\n  width: 200px;\n  height: 300px;\n  background: radial-gradient(circle, rgba(255,105,180,0.25), transparent 70%);\n  filter: blur(60px);\n  opacity: 0.5;\n  animation: smokeMove 12s infinite ease-in-out;\n}\n\n\/* posiciones *\/\n.s1 { left: 10%; animation-delay: 0s; }\n.s2 { left: 30%; animation-delay: 3s; }\n.s3 { left: 60%; animation-delay: 6s; }\n.s4 { left: 80%; animation-delay: 9s; }\n\n@keyframes smokeMove {\n  0%   { transform: translateY(0) scale(1); opacity: 0;}\n  30%  { opacity: 0.6;}\n  100% { transform: translateY(-400px) scale(1.5); opacity: 0;}\n}\n\n\/* CONTENIDO *\/\n.wrap-content {\n  max-width: 1100px;\n  width: 100%;\n  display: grid;\n  gap: 30px;\n  z-index: 2;\n  transform-style: preserve-3d;\n}\n\n\/* BLOQUES *\/\n.block {\n  background: rgba(255, 105, 180, 0.07);\n  backdrop-filter: blur(14px);\n  border-radius: 20px;\n  padding: 30px;\n  border: 1px solid rgba(255,105,180,0.2);\n\n  color: #fff;\n\n  box-shadow:\n    0 10px 40px rgba(0,0,0,0.7),\n    0 0 20px rgba(255,105,180,0.1);\n\n  transform: translateY(60px) scale(0.95);\n  opacity: 0;\n  animation: fadeUp 1.2s ease forwards;\n}\n\n\/* delays *\/\n.block:nth-child(1){animation-delay:.3s;}\n.block:nth-child(2){animation-delay:.6s;}\n.block:nth-child(3){animation-delay:.9s;}\n\n@keyframes fadeUp {\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n}\n\n\/* TEXTO *\/\n.block p {\n  font-size: clamp(16px, 2vw, 20px);\n  line-height: 1.8;\n  color: #f5f5f5;\n}\n\n\/* HOVER *\/\n.block:hover {\n  transform: scale(1.05) rotateY(8deg) rotateX(5deg);\n  transition: 0.4s;\n}\n\n\/* MOBILE *\/\n@media(max-width:768px){\n\n  #reserva-content-full {\n    padding: 60px 15px;\n  }\n\n  .block {\n    padding: 20px;\n  }\n\n  .block p {\n    font-size: 15px;\n  }\n\n}\n<\/style>\n\n<script>\n\/\/ 3D PC\ndocument.addEventListener(\"mousemove\",(e)=>{\n  if(window.innerWidth > 768){\n    let wrap = document.querySelector(\".wrap-content\");\n    let x = (window.innerWidth\/2 - e.clientX)\/40;\n    let y = (window.innerHeight\/2 - e.clientY)\/40;\n    wrap.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n  }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14bb786 e-grid e-con-boxed e-con e-parent\" data-id=\"14bb786\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5fe507 elementor-widget elementor-widget-image\" data-id=\"e5fe507\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"682\" height=\"1024\" src=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/9-682x1024.jpeg\" class=\"attachment-large size-large wp-image-203\" alt=\"\" srcset=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/9-682x1024.jpeg 682w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/9-200x300.jpeg 200w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/9-768x1153.jpeg 768w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/9-1023x1536.jpeg 1023w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/9.webp 1066w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84f90ea elementor-widget elementor-widget-image\" data-id=\"84f90ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"682\" height=\"1024\" src=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/8-682x1024.jpeg\" class=\"attachment-large size-large wp-image-204\" alt=\"\" srcset=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/8-682x1024.jpeg 682w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/8-200x300.jpeg 200w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/8-768x1153.jpeg 768w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/8-1023x1536.jpeg 1023w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/8.webp 1066w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60ca973 elementor-widget elementor-widget-image\" data-id=\"60ca973\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"682\" height=\"1024\" src=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/0-682x1024.jpeg\" class=\"attachment-large size-large wp-image-205\" alt=\"\" srcset=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/0-682x1024.jpeg 682w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/0-200x300.jpeg 200w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/0-768x1153.jpeg 768w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/0-1023x1536.jpeg 1023w, https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/04\/0.webp 1066w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7209012 e-flex e-con-boxed e-con e-parent\" data-id=\"7209012\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd9dcf2 elementor-widget elementor-widget-html\" data-id=\"bd9dcf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"presentacion-pack\">\n\n  <!-- \ud83d\udca1 LUZ SUPERIOR -->\n  <div class=\"light\"><\/div>\n\n  <!-- \ud83d\udce6 CONTENEDOR -->\n  <div class=\"pack-wrapper\" id=\"pack3d\">\n\n    <img decoding=\"async\" src=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/03\/bolsa-3-d-png-1.png\" class=\"pack-img\">\n\n    <!-- \ud83e\ude9e REFLEJO -->\n    <img decoding=\"async\" src=\"https:\/\/clauscoffee.org\/wp-content\/uploads\/2026\/03\/bolsa-3-d-png-1.png\" class=\"reflection\">\n\n    <!-- \ud83d\udc97 HUMO -->\n    <div class=\"smoke s1\"><\/div>\n    <div class=\"smoke s2\"><\/div>\n    <div class=\"smoke s3\"><\/div>\n    <div class=\"smoke s4\"><\/div>\n    <div class=\"smoke s5\"><\/div>\n    <div class=\"smoke s6\"><\/div>\n\n  <\/div>\n\n<\/section>\n\n<style>\n\/* \ud83d\udd25 FULL SCREEN *\/\n#presentacion-pack {\n  width: 100vw;\n  height: 100vh;\n  margin-left: calc(-50vw + 50%);\n  background: radial-gradient(circle at center, #050505, #000);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  overflow: hidden;\n  perspective: 2000px;\n  position: relative;\n}\n\n\/* \ud83d\udca1 LUZ *\/\n.light {\n  position: absolute;\n  top: -100px;\n  width: 800px;\n  height: 500px;\n  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);\n  filter: blur(80px);\n  z-index: 1;\n}\n\n\/* \ud83d\udce6 EMPAQUE *\/\n.pack-wrapper {\n  position: relative;\n  z-index: 2;\n  transform-style: preserve-3d;\n  animation: floatRotate 6s ease-in-out infinite;\n}\n\n\/* IMAGEN *\/\n.pack-img {\n  width: clamp(450px, 65vw, 950px);\n  filter: drop-shadow(0 120px 160px rgba(0,0,0,1));\n}\n\n\/* \ud83e\ude9e REFLEJO *\/\n.reflection {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%) scaleY(-1);\n  width: 100%;\n  opacity: 0.15;\n  filter: blur(6px);\n}\n\n\/* \ud83d\udd04 ANIMACI\u00d3N *\/\n@keyframes floatRotate {\n  0%   { transform: rotateY(0deg) rotateX(0deg) translateY(0); }\n  25%  { transform: rotateY(18deg) rotateX(6deg) translateY(-20px); }\n  50%  { transform: rotateY(0deg) rotateX(-6deg) translateY(-40px); }\n  75%  { transform: rotateY(-18deg) rotateX(6deg) translateY(-20px); }\n  100% { transform: rotateY(0deg) rotateX(0deg) translateY(0); }\n}\n\n\/* \ud83d\udc97 HUMO EXPANDIDO *\/\n.smoke {\n  position: absolute;\n  top: -80px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: 220px;\n  height: 380px;\n\n  background: radial-gradient(circle, rgba(255,105,180,0.65), transparent 70%);\n  filter: blur(60px);\n\n  opacity: 0;\n  animation: smokeSpread 6s infinite ease-in-out;\n}\n\n\/* variaciones *\/\n.s2 { left: 60%; animation-delay: 1s;}\n.s3 { left: 40%; animation-delay: 2s;}\n.s4 { left: 70%; animation-delay: 3s;}\n.s5 { left: 30%; animation-delay: 4s;}\n.s6 { left: 50%; animation-delay: 5s;}\n\n@keyframes smokeSpread {\n  0% {\n    opacity: 0;\n    transform: translateX(-50%) translateY(0) scale(1);\n  }\n  20% {\n    opacity: 0.9;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-300px) scale(2.2);\n  }\n}\n\n\/* \ud83d\uddb1\ufe0f 3D REAL *\/\n@media(min-width:768px){\n  #presentacion-pack:hover .pack-wrapper {\n    transition: 0.3s;\n  }\n}\n\n\/* \ud83d\udcf1 MOBILE *\/\n@media(max-width:768px){\n\n  #presentacion-pack{\n    height: 85vh;\n  }\n\n  .pack-img {\n    width: 320px;\n  }\n\n  .reflection {\n    opacity: 0.1;\n  }\n\n  .smoke {\n    width: 140px;\n    height: 240px;\n  }\n\n}\n<\/style>\n\n<script>\n\/\/ \ud83d\uddb1\ufe0f 3D MOUSE\ndocument.addEventListener(\"mousemove\", (e)=>{\n  if(window.innerWidth > 768){\n    let pack = document.getElementById(\"pack3d\");\n\n    let x = (window.innerWidth\/2 - e.clientX)\/15;\n    let y = (window.innerHeight\/2 - e.clientY)\/15;\n\n    pack.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n  }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7b72fa e-flex e-con-boxed e-con e-parent\" data-id=\"e7b72fa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db5ed39 elementor-widget elementor-widget-html\" data-id=\"db5ed39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"experiencia-claus\">\n\n  <!-- \u2615 CAFETERA -->\n  <div class=\"coffee-machine\" id=\"machine\">\n\n    <!-- cuerpo -->\n    <div class=\"machine-body\"><\/div>\n\n    <!-- salida -->\n    <div class=\"spout\"><\/div>\n\n    <!-- caf\u00e9 cayendo -->\n    <div class=\"coffee-stream\"><\/div>\n\n    <!-- taza -->\n    <div class=\"cup\">\n      <div class=\"coffee-fill\"><\/div>\n    <\/div>\n\n    <!-- \ud83d\udca8 HUMO REAL -->\n    <div class=\"steam s1\"><\/div>\n    <div class=\"steam s2\"><\/div>\n    <div class=\"steam s3\"><\/div>\n\n  <\/div>\n\n  <!-- TEXTO -->\n  <div class=\"text-exp\">\n    <h2>EXPERIENCIA CLAUSCOFFEE<\/h2>\n    <p>\n      No es solo un producto, es una experiencia. Desde el primer aroma hasta el \u00faltimo sorbo, cada detalle est\u00e1 pensado para despertar los sentidos y elevar el momento del caf\u00e9 a otro nivel.\n    <\/p>\n  <\/div>\n\n<\/section>\n\n<style>\n\/* FULL WIDTH *\/\n#experiencia-claus {\n  width: 100vw;\n  min-height: 100vh;\n  margin-left: calc(-50vw + 50%);\n  background: #000;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 80px;\n  flex-wrap: wrap;\n\n  overflow: hidden;\n  perspective: 1400px;\n}\n\n\/* \u2615 CAFETERA *\/\n.coffee-machine {\n  position: relative;\n  width: 220px;\n  height: 340px;\n  transform-style: preserve-3d;\n  animation: floatMachine 6s ease-in-out infinite;\n}\n\n\/* cuerpo *\/\n.machine-body {\n  width: 100%;\n  height: 200px;\n  background: linear-gradient(160deg, #111, #2b2b2b);\n  border-radius: 20px;\n  box-shadow: inset 0 0 20px rgba(255,255,255,0.05),\n              0 30px 80px rgba(0,0,0,0.9);\n}\n\n\/* salida *\/\n.spout {\n  position: absolute;\n  top: 180px;\n  left: 50%;\n  width: 40px;\n  height: 10px;\n  background: #222;\n  border-radius: 5px;\n  transform: translateX(-50%);\n}\n\n\/* caf\u00e9 cayendo *\/\n.coffee-stream {\n  position: absolute;\n  top: 190px;\n  left: 50%;\n  width: 6px;\n  height: 0;\n  background: linear-gradient(#3b2a1a,#5a3a22);\n  transform: translateX(-50%);\n  border-radius: 10px;\n  animation: pour 2.2s infinite ease-in-out;\n}\n\n@keyframes pour {\n  0% { height: 0; opacity:0;}\n  30% { height: 80px; opacity:1;}\n  70% { height: 80px;}\n  100% { height: 0; opacity:0;}\n}\n\n\/* taza *\/\n.cup {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  width: 120px;\n  height: 70px;\n  background: #111;\n  border-radius: 0 0 60px 60px;\n  transform: translateX(-50%);\n  box-shadow: 0 10px 40px rgba(0,0,0,0.8);\n  overflow: hidden;\n}\n\n\/* caf\u00e9 dentro *\/\n.coffee-fill {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 0;\n  background: linear-gradient(#4b2e1f,#2a1a10);\n  animation: fill 2.2s infinite ease-in-out;\n}\n\n@keyframes fill {\n  0% { height: 0;}\n  50% { height: 100%;}\n  100% { height: 0;}\n}\n\n\/* \ud83d\udca8 HUMO REAL *\/\n.steam {\n  position: absolute;\n  bottom: 70px;\n  left: 50%;\n  width: 30px;\n  height: 120px;\n  background: rgba(255,255,255,0.15);\n  filter: blur(18px);\n  border-radius: 50%;\n  animation: steamUp 4s infinite;\n}\n\n.s2 { left: 55%; animation-delay: 1s;}\n.s3 { left: 45%; animation-delay: 2s;}\n\n@keyframes steamUp {\n  0% { opacity: 0; transform: translateY(0) scale(1);}\n  30% { opacity: 0.6;}\n  100% { opacity: 0; transform: translateY(-140px) scale(1.6);}\n}\n\n\/* TEXTO *\/\n.text-exp {\n  max-width: 520px;\n  color: #fff;\n}\n\n.text-exp h2 {\n  font-size: clamp(30px,5vw,60px);\n  font-weight: 900;\n  margin-bottom: 10px;\n\n  background: linear-gradient(90deg,#fff,#ccc);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.text-exp p {\n  line-height: 1.8;\n  font-size: 17px;\n  color: #ccc;\n}\n\n\/* \ud83d\udd04 MOVIMIENTO *\/\n@keyframes floatMachine {\n  0% { transform: rotateY(0) translateY(0);}\n  50% { transform: rotateY(12deg) translateY(-15px);}\n  100% { transform: rotateY(0) translateY(0);}\n}\n\n\/* \ud83d\uddb1\ufe0f 3D *\/\n@media(min-width:768px){\n  #experiencia-claus:hover .coffee-machine{\n    transform: scale(1.05) rotateY(10deg);\n    transition: 0.4s;\n  }\n}\n\n\/* \ud83d\udcf1 MOBILE *\/\n@media(max-width:768px){\n  #experiencia-claus{\n    flex-direction: column;\n    text-align: center;\n    gap: 40px;\n  }\n}\n<\/style>\n\n<script>\n\/\/ 3D mouse\ndocument.addEventListener(\"mousemove\",(e)=>{\n  if(window.innerWidth > 768){\n    let m = document.getElementById(\"machine\");\n\n    let x = (window.innerWidth\/2 - e.clientX)\/40;\n    let y = (window.innerHeight\/2 - e.clientY)\/40;\n\n    m.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;\n  }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Reserva ClausCoffee ClausCoffee no nace como un simple caf\u00e9, sino como una expresi\u00f3n del origen, el proceso y la intenci\u00f3n. Cada grano es trabajado con precisi\u00f3n para revelar su verdadero car\u00e1cter. Detr\u00e1s de cada empaque existe una construcci\u00f3n consciente: selecci\u00f3n rigurosa, tueste controlado y una visi\u00f3n enfocada en resaltar la esencia natural del caf\u00e9. EXPERIENCIA [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"footnotes":""},"class_list":["post-129","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/clauscoffee.org\/index.php?rest_route=\/wp\/v2\/pages\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clauscoffee.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clauscoffee.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clauscoffee.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clauscoffee.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=129"}],"version-history":[{"count":35,"href":"https:\/\/clauscoffee.org\/index.php?rest_route=\/wp\/v2\/pages\/129\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/clauscoffee.org\/index.php?rest_route=\/wp\/v2\/pages\/129\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/clauscoffee.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}