{"id":659053,"date":"2026-10-15T08:04:48","date_gmt":"2026-10-15T12:04:48","guid":{"rendered":"https:\/\/villanews.com.br\/?page_id=659053"},"modified":"2026-10-15T08:38:11","modified_gmt":"2026-10-15T12:38:11","slug":"villa","status":"publish","type":"page","link":"https:\/\/villanews.com.br\/?page_id=659053","title":{"rendered":"Villa"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"659053\" class=\"elementor elementor-659053\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a09cefb e-con-full e-flex e-con e-parent\" data-id=\"a09cefb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aee7c4b elementor-widget elementor-widget-html\" data-id=\"aee7c4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- GALERIA EDITORIAL CLEAN - VILLANEWS PLAY -->\r\n<div class=\"vn-gallery-container\">\r\n  \r\n  <!-- CABE\u00c7ALHO DA SEC\u00c7\u00c3O -->\r\n  <div class=\"vn-header\">\r\n    <div>\r\n      <span class=\"vn-badge\">VILLANEWS PLAY<\/span>\r\n      <h2 class=\"vn-title\">Podcasts &amp; V\u00eddeos<\/h2>\r\n    <\/div>\r\n    <a href=\"https:\/\/www.youtube.com\/@VillaNewsPodcast\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"vn-yt-btn\">\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"#ff0000\"><path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"\/><\/svg>\r\n      Subscrever Canal\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <!-- ESTRUTURA: DESTAQUE + LISTA COMPACTA -->\r\n  <div class=\"vn-layout-grid\">\r\n    \r\n    <!-- LADO ESQUERDO: V\u00cdDEO PRINCIPAL EM DESTAQUE -->\r\n    <div class=\"vn-featured-box\" id=\"vnFeaturedBox\">\r\n      <div class=\"vn-featured-media\" id=\"vnFeaturedMedia\">\r\n        <img decoding=\"async\" id=\"vnFeaturedThumb\" src=\"\" alt=\"Destaque VillaNews\" \/>\r\n        <div class=\"vn-featured-overlay\">\r\n          <div class=\"vn-featured-play\">\r\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#ffffff\"><polygon points=\"6 4 20 12 6 20 6 4\"><\/polygon><\/svg>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"vn-featured-info\">\r\n        <span class=\"vn-date\" id=\"vnFeaturedDate\">A carregar...<\/span>\r\n        <h3 class=\"vn-featured-title\" id=\"vnFeaturedTitle\">A carregar epis\u00f3dio...<\/h3>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- LADO DIREITO: LISTA DE V\u00cdDEOS MENORES -->\r\n    <div class=\"vn-sidebar-list\" id=\"vnSidebarList\">\r\n      <div class=\"vn-loading\">A carregar lista de epis\u00f3dios...<\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL LIGHTBOX \/ REPRODUTOR -->\r\n<div class=\"vn-modal\" id=\"vnModal\">\r\n  <div class=\"vn-modal-overlay\" id=\"vnModalOverlay\"><\/div>\r\n  <div class=\"vn-modal-body\">\r\n    <button class=\"vn-modal-close\" id=\"vnModalClose\" aria-label=\"Fechar\">&times;<\/button>\r\n    <div class=\"vn-iframe-wrapper\">\r\n      <iframe id=\"vnModalIframe\" src=\"\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Remove t\u00edtulos e breadcrumbs residuais do WordPress na p\u00e1gina *\/\r\n.breadcrumb, .breadcrumbs, .entry-header, .page-header, .trail-items, header.entry-header {\r\n  display: none !important;\r\n}\r\n\r\n.vn-gallery-container {\r\n  background: #ffffff;\r\n  border: 1px solid #e5e9f0;\r\n  border-radius: 16px;\r\n  padding: 24px;\r\n  margin: 15px 0 30px 0;\r\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n  color: #1a202c;\r\n}\r\n\r\n\/* CABE\u00c7ALHO *\/\r\n.vn-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-end;\r\n  border-bottom: 2px solid #f1f4f8;\r\n  padding-bottom: 16px;\r\n  margin-bottom: 22px;\r\n}\r\n.vn-badge {\r\n  background: #d90429;\r\n  color: #ffffff;\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n  letter-spacing: 1px;\r\n  padding: 4px 8px;\r\n  border-radius: 4px;\r\n  display: inline-block;\r\n  margin-bottom: 6px;\r\n}\r\n.vn-title {\r\n  font-size: 24px;\r\n  font-weight: 800;\r\n  margin: 0;\r\n  color: #0f172a !important;\r\n}\r\n.vn-yt-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  background: #f8fafc;\r\n  border: 1px solid #cbd5e1;\r\n  padding: 8px 14px;\r\n  border-radius: 20px;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: #334155;\r\n  text-decoration: none;\r\n  transition: all 0.2s ease;\r\n}\r\n.vn-yt-btn:hover {\r\n  background: #f1f5f9;\r\n  color: #0f172a;\r\n  border-color: #94a3b8;\r\n}\r\n\r\n\/* LAYOUT PRINCIPAL *\/\r\n.vn-layout-grid {\r\n  display: grid;\r\n  grid-template-columns: 1.6fr 1fr;\r\n  gap: 24px;\r\n  align-items: start;\r\n}\r\n@media (max-width: 860px) {\r\n  .vn-layout-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n\/* CARD DESTAQUE MAIOR *\/\r\n.vn-featured-box {\r\n  background: #ffffff;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  box-shadow: 0 4px 14px rgba(0,0,0,0.05);\r\n  cursor: pointer;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n.vn-featured-box:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 8px 24px rgba(0,0,0,0.08);\r\n}\r\n.vn-featured-media {\r\n  position: relative;\r\n  width: 100%;\r\n  padding-top: 56.25%;\r\n  background: #0f172a;\r\n}\r\n.vn-featured-media img {\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  object-fit: cover;\r\n}\r\n.vn-featured-overlay {\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0; bottom: 0;\r\n  background: rgba(15, 23, 42, 0.25);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.2s ease;\r\n}\r\n.vn-featured-box:hover .vn-featured-overlay {\r\n  background: rgba(15, 23, 42, 0.4);\r\n}\r\n.vn-featured-play {\r\n  width: 58px;\r\n  height: 58px;\r\n  background: #d90429;\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-shadow: 0 4px 16px rgba(217, 4, 41, 0.4);\r\n  transition: transform 0.2s ease;\r\n}\r\n.vn-featured-box:hover .vn-featured-play {\r\n  transform: scale(1.1);\r\n}\r\n.vn-featured-info {\r\n  padding: 18px;\r\n}\r\n.vn-date {\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  color: #64748b;\r\n  text-transform: uppercase;\r\n  display: block;\r\n  margin-bottom: 6px;\r\n}\r\n.vn-featured-title {\r\n  margin: 0;\r\n  font-size: 18px;\r\n  line-height: 1.4;\r\n  color: #0f172a;\r\n  font-weight: 700;\r\n}\r\n\r\n\/* LISTA LATERAL DE ITENS MENORES *\/\r\n.vn-sidebar-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  max-height: 480px;\r\n  overflow-y: auto;\r\n  padding-right: 4px;\r\n}\r\n.vn-sidebar-list::-webkit-scrollbar {\r\n  width: 5px;\r\n}\r\n.vn-sidebar-list::-webkit-scrollbar-thumb {\r\n  background: #cbd5e1;\r\n  border-radius: 4px;\r\n}\r\n.vn-side-item {\r\n  display: flex;\r\n  gap: 12px;\r\n  background: #f8fafc;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 10px;\r\n  padding: 10px;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n.vn-side-item:hover {\r\n  background: #f1f5f9;\r\n  border-color: #cbd5e1;\r\n  transform: translateX(3px);\r\n}\r\n.vn-side-thumb {\r\n  position: relative;\r\n  flex: 0 0 110px;\r\n  height: 68px;\r\n  border-radius: 6px;\r\n  overflow: hidden;\r\n  background: #0f172a;\r\n}\r\n.vn-side-thumb img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n.vn-side-play {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 26px;\r\n  height: 26px;\r\n  background: rgba(217, 4, 41, 0.9);\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.vn-side-info {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n.vn-side-title {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  color: #1e293b;\r\n  margin: 0;\r\n  line-height: 1.35;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n.vn-loading {\r\n  font-size: 13px;\r\n  color: #94a3b8;\r\n  padding: 20px;\r\n  text-align: center;\r\n}\r\n\r\n\/* MODAL \/ LIGHTBOX *\/\r\n.vn-modal {\r\n  display: none;\r\n  position: fixed;\r\n  top: 0; left: 0; width: 100vw; height: 100vh;\r\n  z-index: 999999;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.vn-modal.active { display: flex; }\r\n.vn-modal-overlay {\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  background: rgba(15, 23, 42, 0.85);\r\n  backdrop-filter: blur(4px);\r\n}\r\n.vn-modal-body {\r\n  position: relative;\r\n  width: 90%;\r\n  max-width: 860px;\r\n  z-index: 10;\r\n}\r\n.vn-modal-close {\r\n  position: absolute;\r\n  top: -42px; right: 0;\r\n  background: none;\r\n  border: none;\r\n  color: #ffffff;\r\n  font-size: 34px;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n}\r\n.vn-iframe-wrapper {\r\n  position: relative;\r\n  padding-bottom: 56.25%;\r\n  height: 0;\r\n}\r\n.vn-iframe-wrapper iframe {\r\n  position: absolute;\r\n  top: 0; left: 0; width: 100%; height: 100%;\r\n  border-radius: 10px;\r\n  box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n}\r\n<\/style>\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n  const featuredBox = document.getElementById(\"vnFeaturedBox\");\r\n  const featuredThumb = document.getElementById(\"vnFeaturedThumb\");\r\n  const featuredDate = document.getElementById(\"vnFeaturedDate\");\r\n  const featuredTitle = document.getElementById(\"vnFeaturedTitle\");\r\n  const sidebarList = document.getElementById(\"vnSidebarList\");\r\n\r\n  const modal = document.getElementById(\"vnModal\");\r\n  const modalIframe = document.getElementById(\"vnModalIframe\");\r\n  const modalClose = document.getElementById(\"vnModalClose\");\r\n  const modalOverlay = document.getElementById(\"vnModalOverlay\");\r\n\r\n  let activeVideoId = \"\";\r\n\r\n  function openVideo(id) {\r\n    if (!id) return;\r\n    modalIframe.src = \"https:\/\/www.youtube.com\/embed\/\" + id + \"?autoplay=1\";\r\n    modal.classList.add(\"active\");\r\n  }\r\n\r\n  function renderGallery(videos) {\r\n    if (!videos || videos.length === 0) {\r\n      sidebarList.innerHTML = '<div class=\"vn-loading\">Nenhum v\u00eddeo publicado no canal ainda. Publique um v\u00eddeo no YouTube para que ele apare\u00e7a aqui automaticamente.<\/div>';\r\n      return;\r\n    }\r\n\r\n    \/\/ 1. O v\u00eddeo mais recente fica como destaque principal \u00e0 esquerda\r\n    const featured = videos[0];\r\n    activeVideoId = featured.id;\r\n    featuredThumb.src = featured.thumb;\r\n    featuredDate.innerText = featured.date || \"\u00daltimo Epis\u00f3dio\";\r\n    featuredTitle.innerText = featured.title;\r\n\r\n    featuredBox.onclick = function () {\r\n      openVideo(activeVideoId);\r\n    };\r\n\r\n    \/\/ 2. Os epis\u00f3dios anteriores entram na barra lateral \u00e0 direita\r\n    sidebarList.innerHTML = \"\";\r\n    const remaining = videos.slice(1);\r\n\r\n    if (remaining.length === 0) {\r\n      sidebarList.innerHTML = '<div class=\"vn-loading\">Acompanhe novos epis\u00f3dios semanalmente.<\/div>';\r\n      return;\r\n    }\r\n\r\n    remaining.forEach(v => {\r\n      const item = document.createElement(\"div\");\r\n      item.className = \"vn-side-item\";\r\n      item.innerHTML = `\r\n        <div class=\"vn-side-thumb\">\r\n          <img decoding=\"async\" src=\"${v.thumb}\" alt=\"${v.title}\" loading=\"lazy\">\r\n          <div class=\"vn-side-play\">\r\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"#ffffff\"><polygon points=\"6 4 20 12 6 20 6 4\"><\/polygon><\/svg>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"vn-side-info\">\r\n          <span class=\"vn-date\" style=\"font-size:10px; margin-bottom:3px;\">${v.date || 'V\u00eddeo'}<\/span>\r\n          <h4 class=\"vn-side-title\">${v.title}<\/h4>\r\n        <\/div>\r\n      `;\r\n\r\n      item.onclick = function () {\r\n        openVideo(v.id);\r\n      };\r\n\r\n      sidebarList.appendChild(item);\r\n    });\r\n  }\r\n\r\n  \/\/ Faz a busca em tempo real na rota da sua pr\u00f3pria API\r\n  fetch(\"https:\/\/villanews.com.br\/api\/youtube-videos\")\r\n    .then(res => {\r\n      if (!res.ok) throw new Error(\"Erro na requisi\u00e7\u00e3o\");\r\n      return res.json();\r\n    })\r\n    .then(videos => {\r\n      if (Array.isArray(videos) && videos.length > 0) {\r\n        renderGallery(videos);\r\n      } else {\r\n        \/\/ Se a rota responder mas o canal ainda n\u00e3o tiver v\u00eddeos publicados\r\n        sidebarList.innerHTML = '<div class=\"vn-loading\">Canal conectado! Aguardando o envio do primeiro v\u00eddeo no YouTube.<\/div>';\r\n        featuredTitle.innerText = \"VillaNews Podcast - Em Breve\";\r\n        featuredDate.innerText = \"Canal Oficial\";\r\n        featuredThumb.src = \"https:\/\/images.unsplash.com\/photo-1590602847861-f357a9332bbc?auto=format&fit=crop&w=1200&q=80\";\r\n      }\r\n    })\r\n    .catch(() => {\r\n      sidebarList.innerHTML = '<div class=\"vn-loading\">Erro ao carregar v\u00eddeos da API. Verifique a rota \/youtube-videos.<\/div>';\r\n    });\r\n\r\n  \/\/ Fechamento do Lightbox\r\n  function closeModal() {\r\n    modal.classList.remove(\"active\");\r\n    modalIframe.src = \"\";\r\n  }\r\n  modalClose.onclick = closeModal;\r\n  modalOverlay.onclick = closeModal;\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\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>VILLANEWS PLAY Podcasts &amp; V\u00eddeos Subscrever Canal A carregar&#8230; A carregar epis\u00f3dio&#8230; A carregar lista de epis\u00f3dios&#8230; &times;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-659053","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/villanews.com.br\/index.php?rest_route=\/wp\/v2\/pages\/659053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/villanews.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/villanews.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/villanews.com.br\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/villanews.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=659053"}],"version-history":[{"count":15,"href":"https:\/\/villanews.com.br\/index.php?rest_route=\/wp\/v2\/pages\/659053\/revisions"}],"predecessor-version":[{"id":659072,"href":"https:\/\/villanews.com.br\/index.php?rest_route=\/wp\/v2\/pages\/659053\/revisions\/659072"}],"wp:attachment":[{"href":"https:\/\/villanews.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=659053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}