{"id":2,"date":"2026-09-09T14:47:06","date_gmt":"2026-09-09T14:47:06","guid":{"rendered":"https:\/\/smoothcoffee.cl\/?page_id=2"},"modified":"2026-09-09T19:17:57","modified_gmt":"2026-09-09T19:17:57","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/smoothcoffee.cl\/","title":{"rendered":"home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3cd3bd e-flex e-con-boxed e-con e-parent\" data-id=\"a3cd3bd\" 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-2621e09 elementor-widget elementor-widget-html\" data-id=\"2621e09\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"sc-waiting-page\" id=\"scWaitingPage\">\n\n  <!-- FRANJA SUPERIOR -->\n  <div class=\"sc-band sc-band-top\">\n    <div class=\"sc-stripe\"><\/div>\n    <div class=\"sc-floating sc-wrench\">\ud83d\udd27<\/div>\n    <div class=\"sc-floating sc-gear\">\u2699\ufe0f<\/div>\n    <div class=\"sc-floating sc-cup\">\u2615<\/div>\n\n    <div class=\"sc-top-content\">\n      <div class=\"sc-mini-badge\">SITIO EN CONSTRUCCI\u00d3N<\/div>\n      <div class=\"sc-mini-title\">Pr\u00f3ximamente<\/div>\n      <div class=\"sc-mini-text\">Estamos preparando algo grande.<\/div>\n    <\/div>\n\n    <div class=\"sc-steam sc-steam-1\"><\/div>\n    <div class=\"sc-steam sc-steam-2\"><\/div>\n    <div class=\"sc-steam sc-steam-3\"><\/div>\n  <\/div>\n\n  <!-- VIDEO -->\n  <div class=\"sc-video-wrap\">\n    <video\n      class=\"sc-video\"\n      autoplay\n      muted\n      loop\n      playsinline\n      preload=\"auto\"\n      webkit-playsinline\n    >\n      <source src=https:\/\/smoothcoffee.cl\/wp-content\/uploads\/2026\/09\/necesito_generar_una_animacio.mp4 type=\"video\/mp4\">\n    <\/video>\n  <\/div>\n\n  <!-- FRANJA INFERIOR -->\n  <div class=\"sc-band sc-band-bottom\">\n    <div class=\"sc-stripe\"><\/div>\n\n    <div class=\"sc-scene\">\n      <div class=\"sc-scene-title\">Activa la escena<\/div>\n      <div class=\"sc-scene-subtitle\">Pulsa el bot\u00f3n y mira c\u00f3mo cobra vida.<\/div>\n\n      <button class=\"sc-scene-btn\" id=\"scSceneBtn\" type=\"button\">\n        Encender escena\n      <\/button>\n\n      <div class=\"sc-floor\"><\/div>\n\n      <div class=\"sc-fire\" id=\"scFire\">\n        <span><\/span>\n        <span><\/span>\n        <span><\/span>\n      <\/div>\n\n      <div class=\"sc-water\"><\/div>\n\n      <div class=\"sc-worker sc-worker-1\">\n        <div class=\"sc-worker-icon\">\ud83d\udc77<\/div>\n        <div class=\"sc-worker-label\">brigada<\/div>\n      <\/div>\n\n      <div class=\"sc-worker sc-worker-2\">\n        <div class=\"sc-worker-icon\">\ud83d\udc77<\/div>\n        <div class=\"sc-worker-label\">caf\u00e9<\/div>\n        <div class=\"sc-worker-cup\">\u2615<\/div>\n      <\/div>\n\n      <div class=\"sc-scene-note\">Fuego, manguera y caf\u00e9 en camino.<\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<style>\n\/* RESET GENERAL *\/\nhtml, body {\n  margin: 0 !important;\n  padding: 0 !important;\n  width: 100%;\n  height: 100%;\n  overflow: hidden !important;\n  background: #0b0b0b;\n}\n\n.sc-waiting-page {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  height: 100svh;\n  height: 100dvh;\n  background: #0b0b0b;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 999999;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n\/* BANDAS DECORATIVAS *\/\n.sc-band {\n  position: relative;\n  overflow: hidden;\n  background:\n    linear-gradient(135deg, rgba(255,193,67,0.95) 0%, rgba(247,166,35,0.95) 100%);\n}\n\n.sc-band-top,\n.sc-band-bottom {\n  flex: 0 0 22svh;\n  min-height: 120px;\n}\n\n.sc-stripe {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 14px;\n  background:\n    repeating-linear-gradient(\n      -45deg,\n      #111 0 14px,\n      #f2bf2d 14px 28px\n    );\n  opacity: 0.95;\n  z-index: 2;\n}\n\n.sc-band-top .sc-stripe {\n  bottom: 0;\n}\n\n.sc-band-bottom .sc-stripe {\n  top: 0;\n}\n\n\/* VIDEO *\/\n.sc-video-wrap {\n  flex: 1 1 auto;\n  min-height: 0;\n  background: #000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.sc-video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center center;\n  display: block;\n  pointer-events: none;\n  background: #000;\n}\n\n\/* CONTENIDO SUPERIOR *\/\n.sc-top-content {\n  position: relative;\n  z-index: 5;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 18px 20px;\n  color: #1c1c1c;\n  text-align: center;\n}\n\n.sc-mini-badge {\n  display: inline-block;\n  margin: 0 auto 8px auto;\n  padding: 6px 12px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 1px;\n  color: #fff;\n  background: #111;\n  border-radius: 999px;\n  text-transform: uppercase;\n}\n\n.sc-mini-title {\n  font-size: 26px;\n  line-height: 1;\n  font-weight: 800;\n  color: #111;\n  text-transform: uppercase;\n  margin-bottom: 6px;\n}\n\n.sc-mini-text {\n  font-size: 13px;\n  color: rgba(17,17,17,0.8);\n}\n\n\/* ICONOS DECORATIVOS *\/\n.sc-floating {\n  position: absolute;\n  z-index: 3;\n  opacity: 0.28;\n  font-size: 32px;\n  animation: scFloat 5s ease-in-out infinite;\n}\n\n.sc-wrench {\n  top: 18px;\n  left: 18px;\n}\n\n.sc-gear {\n  right: 24px;\n  bottom: 28px;\n  animation-delay: 1s;\n}\n\n.sc-cup {\n  right: 18px;\n  top: 18px;\n  animation-delay: 2s;\n}\n\n\/* VAPOR *\/\n.sc-steam {\n  position: absolute;\n  bottom: 16px;\n  width: 20px;\n  height: 55px;\n  border-radius: 50%;\n  background: radial-gradient(circle at center, rgba(255,255,255,0.55), rgba(255,255,255,0.05));\n  filter: blur(6px);\n  opacity: 0;\n  z-index: 4;\n  animation: scSteam 4.5s infinite;\n}\n\n.sc-steam-1 {\n  left: 28%;\n  animation-delay: 0.8s;\n}\n\n.sc-steam-2 {\n  left: 50%;\n  animation-delay: 1.8s;\n}\n\n.sc-steam-3 {\n  left: 68%;\n  animation-delay: 2.8s;\n}\n\n\/* ESCENA INFERIOR *\/\n.sc-scene {\n  position: relative;\n  z-index: 5;\n  width: 100%;\n  height: 100%;\n  padding: 26px 14px 16px;\n  box-sizing: border-box;\n  text-align: center;\n}\n\n.sc-scene-title {\n  font-size: 20px;\n  font-weight: 800;\n  color: #111;\n  margin-bottom: 4px;\n  text-transform: uppercase;\n}\n\n.sc-scene-subtitle {\n  font-size: 12px;\n  color: rgba(17,17,17,0.8);\n  margin-bottom: 12px;\n}\n\n.sc-scene-btn {\n  appearance: none;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n  padding: 12px 18px;\n  border-radius: 999px;\n  font-size: 14px;\n  font-weight: 700;\n  color: #fff;\n  background: linear-gradient(135deg, #1c1c1c 0%, #2f2f2f 100%);\n  box-shadow: 0 8px 18px rgba(0,0,0,0.22);\n  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;\n  position: relative;\n  z-index: 10;\n}\n\n.sc-scene-btn:active {\n  transform: scale(0.98);\n}\n\n.sc-scene-btn.is-active {\n  background: linear-gradient(135deg, #ff4a1c 0%, #ff9900 100%);\n  box-shadow: 0 0 0 4px rgba(255,120,0,0.18), 0 10px 26px rgba(255,87,34,0.35);\n}\n\n.sc-floor {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 14px;\n  height: 22px;\n  background:\n    linear-gradient(to top, rgba(0,0,0,0.22), rgba(0,0,0,0.04));\n  border-radius: 999px;\n  margin: 0 14px;\n}\n\n\/* FUEGO *\/\n.sc-fire {\n  position: absolute;\n  left: 50%;\n  bottom: 24px;\n  width: 68px;\n  height: 68px;\n  transform: translateX(-50%) scale(0.4);\n  opacity: 0;\n  z-index: 6;\n  pointer-events: none;\n}\n\n.sc-fire span {\n  position: absolute;\n  bottom: 0;\n  border-radius: 50% 50% 42% 42%;\n  background: radial-gradient(circle at 50% 30%, #fff59d 0%, #ffca28 28%, #ff6d00 70%, #d84315 100%);\n  transform-origin: bottom center;\n}\n\n.sc-fire span:nth-child(1) {\n  left: 18px;\n  width: 30px;\n  height: 52px;\n}\n\n.sc-fire span:nth-child(2) {\n  left: 0;\n  width: 28px;\n  height: 40px;\n}\n\n.sc-fire span:nth-child(3) {\n  right: 0;\n  width: 28px;\n  height: 42px;\n}\n\n\/* AGUA *\/\n.sc-water {\n  position: absolute;\n  left: -120px;\n  bottom: 58px;\n  width: 0;\n  height: 8px;\n  background: linear-gradient(90deg, rgba(98,197,255,0.1), rgba(98,197,255,1), rgba(220,246,255,0.9));\n  border-radius: 999px;\n  opacity: 0;\n  z-index: 8;\n  box-shadow: 0 0 14px rgba(98,197,255,0.55);\n}\n\n\/* PERSONAJES *\/\n.sc-worker {\n  position: absolute;\n  bottom: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: rgba(17,17,17,0.88);\n  color: #fff;\n  padding: 7px 10px;\n  border-radius: 999px;\n  box-shadow: 0 8px 20px rgba(0,0,0,0.22);\n  opacity: 0;\n  z-index: 9;\n  white-space: nowrap;\n}\n\n.sc-worker-icon {\n  font-size: 22px;\n  line-height: 1;\n}\n\n.sc-worker-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  font-weight: 700;\n}\n\n.sc-worker-cup {\n  font-size: 18px;\n  line-height: 1;\n}\n\n.sc-worker-1 {\n  left: -140px;\n}\n\n.sc-worker-2 {\n  right: -170px;\n}\n\n.sc-scene-note {\n  position: absolute;\n  left: 50%;\n  bottom: 72px;\n  transform: translateX(-50%);\n  font-size: 11px;\n  font-weight: 700;\n  color: rgba(17,17,17,0.8);\n  opacity: 0.7;\n  z-index: 7;\n}\n\n\/* ESTADO ACTIVO *\/\n.sc-waiting-page.play-scene .sc-fire {\n  animation:\n    scFireIn 0.35s forwards,\n    scFireFlicker 0.7s 0.35s infinite,\n    scFireOut 1s 3.1s forwards;\n}\n\n.sc-waiting-page.play-scene .sc-worker-1 {\n  animation: scWorkerInLeft 1s 0.45s forwards;\n}\n\n.sc-waiting-page.play-scene .sc-water {\n  animation: scWaterSpray 1.8s 1.35s forwards;\n}\n\n.sc-waiting-page.play-scene .sc-worker-2 {\n  animation: scWorkerInRight 1s 2.2s forwards;\n}\n\n\/* DESKTOP *\/\n@media (min-width: 768px) {\n  .sc-band {\n    display: none;\n  }\n\n  .sc-video-wrap {\n    flex: 1 1 auto;\n  }\n\n  .sc-video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n}\n\n\/* MOBILE Y TABLET *\/\n@media (max-width: 767px) {\n  .sc-band-top,\n  .sc-band-bottom {\n    flex: 0 0 24svh;\n  }\n\n  .sc-video-wrap {\n    flex: 0 0 auto;\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    background: #000;\n  }\n\n  .sc-video {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    background: #000;\n  }\n\n  .sc-mini-title {\n    font-size: 22px;\n  }\n\n  .sc-scene-title {\n    font-size: 18px;\n  }\n\n  .sc-worker-label {\n    display: none;\n  }\n}\n\n@media (max-width: 420px) {\n  .sc-band-top,\n  .sc-band-bottom {\n    flex: 0 0 25svh;\n  }\n\n  .sc-mini-badge {\n    font-size: 10px;\n  }\n\n  .sc-mini-title {\n    font-size: 20px;\n  }\n\n  .sc-mini-text {\n    font-size: 12px;\n  }\n\n  .sc-scene-btn {\n    font-size: 13px;\n    padding: 11px 16px;\n  }\n\n  .sc-scene-note {\n    font-size: 10px;\n    bottom: 70px;\n  }\n}\n\n\/* ANIMACIONES *\/\n@keyframes scFloat {\n  0%, 100% { transform: translateY(0px) rotate(0deg); }\n  50% { transform: translateY(-8px) rotate(6deg); }\n}\n\n@keyframes scSteam {\n  0% {\n    opacity: 0;\n    transform: translateY(10px) scale(0.8);\n  }\n  25% {\n    opacity: 0.32;\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-48px) scale(1.25);\n  }\n}\n\n@keyframes scFireIn {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.4);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n@keyframes scFireFlicker {\n  0%, 100% {\n    transform: translateX(-50%) scale(1) rotate(0deg);\n    filter: brightness(1);\n  }\n  25% {\n    transform: translateX(-50%) scale(1.04) rotate(-2deg);\n    filter: brightness(1.06);\n  }\n  50% {\n    transform: translateX(-50%) scale(0.98) rotate(2deg);\n    filter: brightness(0.95);\n  }\n  75% {\n    transform: translateX(-50%) scale(1.05) rotate(-1deg);\n    filter: brightness(1.08);\n  }\n}\n\n@keyframes scFireOut {\n  from {\n    opacity: 1;\n    transform: translateX(-50%) scale(1);\n  }\n  to {\n    opacity: 0.15;\n    transform: translateX(-50%) scale(0.25);\n  }\n}\n\n@keyframes scWorkerInLeft {\n  from {\n    left: -140px;\n    opacity: 0;\n  }\n  to {\n    left: 14px;\n    opacity: 1;\n  }\n}\n\n@keyframes scWorkerInRight {\n  from {\n    right: -170px;\n    opacity: 0;\n  }\n  to {\n    right: 14px;\n    opacity: 1;\n  }\n}\n\n@keyframes scWaterSpray {\n  0% {\n    left: 56px;\n    width: 0;\n    opacity: 0;\n  }\n  20% {\n    opacity: 1;\n  }\n  35% {\n    left: 74px;\n    width: calc(50% - 74px);\n    opacity: 1;\n  }\n  70% {\n    left: 74px;\n    width: calc(50% - 74px);\n    opacity: 1;\n  }\n  100% {\n    left: 74px;\n    width: calc(50% - 74px);\n    opacity: 0;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const page = document.getElementById('scWaitingPage');\n  const btn = document.getElementById('scSceneBtn');\n  const video = document.querySelector('.sc-video');\n\n  if (video) {\n    video.muted = true;\n    video.defaultMuted = true;\n    video.loop = true;\n    video.playsInline = true;\n\n    const tryPlay = () => {\n      const p = video.play();\n      if (p !== undefined) {\n        p.catch(() => {});\n      }\n    };\n\n    document.addEventListener('DOMContentLoaded', tryPlay);\n    window.addEventListener('load', tryPlay);\n    document.addEventListener('touchstart', tryPlay, { once: true });\n  }\n\n  if (btn && page) {\n    btn.addEventListener('click', function () {\n      page.classList.remove('play-scene');\n      void page.offsetWidth;\n      page.classList.add('play-scene');\n\n      btn.classList.add('is-active');\n      btn.textContent = 'Repetir escena';\n    });\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>\ud83d\udd27 \u2699\ufe0f \u2615 SITIO EN CONSTRUCCI\u00d3N Pr\u00f3ximamente Estamos preparando algo grande. Activa la escena Pulsa el bot\u00f3n y mira c\u00f3mo cobra vida. Encender escena \ud83d\udc77 brigada \ud83d\udc77 caf\u00e9 \u2615 Fuego, manguera y caf\u00e9 en camino.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":21,"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/smoothcoffee.cl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}