{"id":257,"date":"2026-06-15T17:12:26","date_gmt":"2026-06-15T17:12:26","guid":{"rendered":"https:\/\/magarestudio.es\/?page_id=257"},"modified":"2026-06-18T12:50:06","modified_gmt":"2026-06-18T12:50:06","slug":"magar-desing-home","status":"publish","type":"page","link":"https:\/\/magarestudio.es\/","title":{"rendered":"Magar Desing HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"257\" class=\"elementor elementor-257\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b05093 e-con-full e-flex e-con e-parent\" data-id=\"0b05093\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb3b321 elementor-widget elementor-widget-html\" data-id=\"cb3b321\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"magar-home\">\r\n\r\n  <div class=\"magar-slider\">\r\n    <div class=\"magar-slide slide-1\"><\/div>\r\n    <div class=\"magar-slide slide-2\"><\/div>\r\n    <div class=\"magar-slide slide-3\"><\/div>\r\n    <div class=\"magar-slide slide-4\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"magar-overlay\"><\/div>\r\n\r\n  <div class=\"magar-center\">\r\n\r\n    <input type=\"checkbox\" id=\"magar-menu-toggle\" class=\"magar-menu-toggle\">\r\n\r\n    <label for=\"magar-menu-toggle\" class=\"magar-logo-button\" aria-label=\"Abrir men\u00fa\">\r\n      <img decoding=\"async\" \r\n        src=\"https:\/\/magarestudio.es\/wp-content\/uploads\/2026\/06\/Mesa-de-trabajo-12.png\" \r\n        alt=\"Magar Studio\" \r\n        class=\"magar-logo\"\r\n      >\r\n\r\n      <span class=\"magar-menu-lines\">\r\n        <span><\/span>\r\n        <span><\/span>\r\n        <span><\/span>\r\n      <\/span>\r\n    <\/label>\r\n\r\n    <div class=\"magar-text\">\r\n      <p>Interiores e pezas a medida para quen valora a calidade, o oficio e os materiais nobres.<\/p>\r\n    <\/div>\r\n\r\n    <nav class=\"magar-menu\">\r\n           <a href=\"#\">Proxectos<\/a>\r\n      <a href=\"#\">Mobiliario<\/a>\r\n      <a href=\"https:\/\/magarestudio.es\/index.php\/magar-desing-quen-somos\/\">Quen somos<\/a>\r\n      <a href=\"https:\/\/magarestudio.es\/index.php\/contacto\/\">Contacto<\/a>\r\n    <\/nav>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n  :root {\r\n    --magar-blue: #448585;\r\n    --magar-bg: #f7f5f1;\r\n    --magar-white: #ffffff;\r\n  }\r\n\r\n  .magar-home {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    background: #000000;\r\n    font-family: \"Century Gothic\", CenturyGothic, AppleGothic, sans-serif;\r\n  }\r\n\r\n  .magar-slider {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n  }\r\n\r\n  .magar-slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    opacity: 0;\r\n    animation: magarFade 32s infinite;\r\n  }\r\n\r\n  .slide-1 {\r\n    background-image: url(\"https:\/\/magarestudio.es\/wp-content\/uploads\/2026\/06\/E_S-Noche-scaled.jpg\");\r\n    animation-delay: 0s;\r\n  }\r\n\r\n  .slide-2 {\r\n    background-image: url(\"https:\/\/magarestudio.es\/wp-content\/uploads\/2026\/06\/3.azulejotabarca0100.jpg\");\r\n    animation-delay: 8s;\r\n  }\r\n\r\n  .slide-3 {\r\n    background-image: url(\"https:\/\/magarestudio.es\/wp-content\/uploads\/2026\/06\/IMG_20180607_194340-Copia-scaled.jpg\");\r\n    animation-delay: 16s;\r\n  }\r\n\r\n  .slide-4 {\r\n    background-image: url(\"https:\/\/magarestudio.es\/wp-content\/uploads\/2026\/06\/PATIO-PIS-scaled.jpg\");\r\n    animation-delay: 24s;\r\n  }\r\n\r\n  @keyframes magarFade {\r\n    0% {\r\n      opacity: 0;\r\n      transform: scale(1);\r\n    }\r\n\r\n    8% {\r\n      opacity: 1;\r\n    }\r\n\r\n    32% {\r\n      opacity: 1;\r\n      transform: scale(1.025);\r\n    }\r\n\r\n    42% {\r\n      opacity: 0;\r\n      transform: scale(1.025);\r\n    }\r\n\r\n    100% {\r\n      opacity: 0;\r\n      transform: scale(1);\r\n    }\r\n  }\r\n\r\n  .magar-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    background:\r\n      linear-gradient(\r\n        to top,\r\n        rgba(247, 245, 241, 0.30) 0%,\r\n        rgba(247, 245, 241, 0.08) 34%,\r\n        rgba(0, 0, 0, 0.22) 68%,\r\n        rgba(0, 0, 0, 0.48) 100%\r\n      ),\r\n      rgba(0, 0, 0, 0.30);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .magar-center {\r\n    position: relative;\r\n    z-index: 3;\r\n    min-height: 100vh;\r\n    padding: 40px 24px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--magar-white);\r\n    text-align: center;\r\n  }\r\n\r\n  .magar-menu-toggle {\r\n    position: absolute;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .magar-logo-button {\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 5px;\r\n    padding: 0;\r\n    cursor: pointer;\r\n    -webkit-tap-highlight-color: transparent;\r\n    transition: transform 0.35s ease;\r\n  }\r\n\r\n  .magar-logo-button:hover {\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  .magar-logo {\r\n    width: clamp(180px, 20vw, 300px);\r\n    height: auto;\r\n    display: block;\r\n    margin-bottom: -2px;\r\n    filter:\r\n      brightness(0) invert(1)\r\n      drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42))\r\n      drop-shadow(0 0 18px rgba(68, 133, 133, 0.58));\r\n    animation: magarLogoMove 3.8s ease-in-out infinite;\r\n    transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;\r\n  }\r\n\r\n  @keyframes magarLogoMove {\r\n    0% {\r\n      transform: translateY(0) scale(1);\r\n      filter:\r\n        brightness(0) invert(1)\r\n        drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42))\r\n        drop-shadow(0 0 14px rgba(68, 133, 133, 0.42));\r\n    }\r\n\r\n    50% {\r\n      transform: translateY(-5px) scale(1.018);\r\n      filter:\r\n        brightness(0) invert(1)\r\n        drop-shadow(0 22px 36px rgba(0, 0, 0, 0.48))\r\n        drop-shadow(0 0 28px rgba(68, 133, 133, 0.95));\r\n    }\r\n\r\n    100% {\r\n      transform: translateY(0) scale(1);\r\n      filter:\r\n        brightness(0) invert(1)\r\n        drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42))\r\n        drop-shadow(0 0 14px rgba(68, 133, 133, 0.42));\r\n    }\r\n  }\r\n\r\n  .magar-logo-button:hover .magar-logo {\r\n    transform: translateY(-3px) scale(1.025);\r\n    filter:\r\n      brightness(0) invert(1)\r\n      drop-shadow(0 22px 38px rgba(0, 0, 0, 0.55))\r\n      drop-shadow(0 0 34px rgba(68, 133, 133, 1));\r\n  }\r\n\r\n  .magar-menu-toggle:checked + .magar-logo-button .magar-logo {\r\n    animation: none;\r\n    transform: translateY(-3px) scale(1.025);\r\n    filter:\r\n      brightness(0) invert(1)\r\n      drop-shadow(0 22px 38px rgba(0, 0, 0, 0.55))\r\n      drop-shadow(0 0 38px rgba(68, 133, 133, 1));\r\n  }\r\n\r\n  .magar-menu-lines {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 4px;\r\n    width: 32px;\r\n    margin-top: -4px;\r\n    opacity: 0.9;\r\n    transition: opacity 0.3s ease, transform 0.3s ease;\r\n  }\r\n\r\n  .magar-menu-lines span {\r\n    display: block;\r\n    width: 100%;\r\n    height: 1px;\r\n    background: #ffffff;\r\n    box-shadow:\r\n      0 0 10px rgba(68, 133, 133, 0.95),\r\n      0 3px 10px rgba(0, 0, 0, 0.45);\r\n    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;\r\n  }\r\n\r\n  .magar-logo-button:hover .magar-menu-lines {\r\n    opacity: 1;\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  .magar-menu-toggle:checked + .magar-logo-button .magar-menu-lines span {\r\n    background: var(--magar-blue);\r\n    box-shadow:\r\n      0 0 16px rgba(68, 133, 133, 1),\r\n      0 3px 10px rgba(0, 0, 0, 0.45);\r\n  }\r\n\r\n  .magar-menu-toggle:checked + .magar-logo-button .magar-menu-lines span:nth-child(1) {\r\n    transform: translateY(5px) rotate(35deg);\r\n  }\r\n\r\n  .magar-menu-toggle:checked + .magar-logo-button .magar-menu-lines span:nth-child(2) {\r\n    opacity: 0;\r\n  }\r\n\r\n  .magar-menu-toggle:checked + .magar-logo-button .magar-menu-lines span:nth-child(3) {\r\n    transform: translateY(-5px) rotate(-35deg);\r\n  }\r\n\r\n  .magar-text {\r\n    margin-top: 18px;\r\n    margin-bottom: 26px;\r\n  }\r\n\r\n  .magar-text p {\r\n    max-width: none;\r\n    margin: 0 auto;\r\n    font-size: clamp(15px, 1.15vw, 18px);\r\n    line-height: 1.55;\r\n    font-weight: 600;\r\n    letter-spacing: 0.02em;\r\n    white-space: nowrap;\r\n    color: #ffffff;\r\n    text-shadow:\r\n      0 8px 28px rgba(0, 0, 0, 0.42),\r\n      0 0 20px rgba(68, 133, 133, 0.38);\r\n  }\r\n\r\n  .magar-menu {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    display: flex;\r\n    gap: 28px;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease;\r\n    margin-top: 0;\r\n  }\r\n\r\n  .magar-menu-toggle:checked ~ .magar-menu {\r\n    max-height: 160px;\r\n    opacity: 1;\r\n    margin-top: 6px;\r\n  }\r\n\r\n  .magar-menu a {\r\n    position: relative;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-size: 12px;\r\n    letter-spacing: 0.14em;\r\n    text-transform: uppercase;\r\n    transition: color 0.25s ease, opacity 0.25s ease;\r\n    text-shadow:\r\n      0 6px 22px rgba(0, 0, 0, 0.36),\r\n      0 0 14px rgba(68, 133, 133, 0.35);\r\n  }\r\n\r\n  .magar-menu a::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: 50%;\r\n    bottom: -7px;\r\n    width: 0;\r\n    height: 1px;\r\n    background: var(--magar-blue);\r\n    transform: translateX(-50%);\r\n    transition: width 0.25s ease;\r\n  }\r\n\r\n  .magar-menu a:hover {\r\n    color: var(--magar-blue);\r\n    text-shadow:\r\n      0 6px 22px rgba(0, 0, 0, 0.36),\r\n      0 0 20px rgba(68, 133, 133, 0.9);\r\n  }\r\n\r\n  .magar-menu a:hover::after {\r\n    width: 100%;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .magar-text p {\r\n      white-space: normal;\r\n      max-width: 620px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .magar-center {\r\n      padding: 36px 22px;\r\n    }\r\n\r\n    .magar-logo {\r\n      width: 180px;\r\n    }\r\n\r\n    .magar-menu-lines {\r\n      width: 30px;\r\n      margin-top: -5px;\r\n    }\r\n\r\n    .magar-text {\r\n      margin-top: 18px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .magar-text p {\r\n      max-width: 330px;\r\n      font-size: 15px;\r\n      line-height: 1.55;\r\n      white-space: normal;\r\n    }\r\n\r\n    .magar-menu {\r\n      flex-direction: column;\r\n      gap: 14px;\r\n    }\r\n\r\n    .magar-menu-toggle:checked ~ .magar-menu {\r\n      max-height: 330px;\r\n      margin-top: 8px;\r\n    }\r\n\r\n    .magar-menu a {\r\n      font-size: 12px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .magar-logo {\r\n      width: 160px;\r\n    }\r\n\r\n    .magar-menu-lines {\r\n      width: 28px;\r\n      margin-top: -6px;\r\n    }\r\n\r\n    .magar-text p {\r\n      max-width: 300px;\r\n      font-size: 14px;\r\n    }\r\n  }\r\n<\/style>\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>Crea \u00fanicamente la primera secci\u00f3n HERO para la p\u00e1gina de inicio de Magar Studio.<\/p>\n<p>No modifiques el resto de la p\u00e1gina. No crees p\u00e1ginas interiores. No cambies el men\u00fa global ni el pie de p\u00e1gina. Solo dise\u00f1a una secci\u00f3n inicial para la home.<\/p>\n<p>IDIOMA:<br \/>\nTodo el texto debe estar en gallego.<\/p>\n<p>CONTEXTO:<br \/>\nMagar Studio \u00e9 un estudo de interiorismo e ebanister\u00eda a medida situado en Cangas, Galicia. O estudo combina dese\u00f1o de interiores, mobiliario a medida, madeira natural, soluci\u00f3ns personalizadas e execuci\u00f3n t\u00e9cnica coidada.<\/p>\n<p>OBXECTIVO DA SECCI\u00d3N:<br \/>\nCrear unha primeira impresi\u00f3n elegante, sobria, editorial e visual, inspirada en webs de estudos de arquitectura e interiorismo contempor\u00e1neo como OOAA.<\/p>\n<p>A secci\u00f3n debe transmitir:<br \/>\n&#8211; dese\u00f1o coidado<br \/>\n&#8211; interiores personalizados<br \/>\n&#8211; mobiliario a medida<br \/>\n&#8211; ebanister\u00eda propia<br \/>\n&#8211; madeira natural<br \/>\n&#8211; calidade construtiva<br \/>\n&#8211; detalle<br \/>\n&#8211; proporci\u00f3n<br \/>\n&#8211; espazos pensados para durar<\/p>\n<p>ESTILO VISUAL:<br \/>\n&#8211; Fondo branco ou ton neutro c\u00e1lido.<br \/>\n&#8211; Moito espazo en branco.<br \/>\n&#8211; Tipograf\u00eda elegante, limpa e lexible.<br \/>\n&#8211; Imaxe grande protagonista dun proxecto de interiorismo ou mobiliario a medida.<br \/>\n&#8211; Composici\u00f3n sobria, sen elementos decorativos innecesarios.<br \/>\n&#8211; Bot\u00f3ns discretos.<br \/>\n&#8211; Nada de iconas xen\u00e9ricas.<br \/>\n&#8211; Nada de cores estridentes.<br \/>\n&#8211; Sensaci\u00f3n de estudo de dese\u00f1o, non de empresa de reformas.<\/p>\n<p>ESTRUTURA DO HERO:<\/p>\n<p>T\u00edtulo principal:<br \/>\n\u201cInteriores e mobiliario a medida\u201d<\/p>\n<p>Subt\u00edtulo:<br \/>\n\u201cDese\u00f1amos espazos desde unha mirada integral, unindo interiorismo, ebanister\u00eda e execuci\u00f3n t\u00e9cnica.\u201d<\/p>\n<p>Texto breve:<br \/>\n\u201cDesde Cangas, traballamos proxectos residenciais e pezas a medida onde a proporci\u00f3n, o material e o detalle construtivo definen o resultado.\u201d<\/p>\n<p>Bot\u00f3n principal:<br \/>\n\u201cVer proxectos\u201d<\/p>\n<p>Bot\u00f3n secundario:<br \/>\n\u201cC\u00f3ntanos o teu proxecto\u201d<\/p>\n<p>INDICACI\u00d3NS DE DISE\u00d1O:<br \/>\nA secci\u00f3n debe ocupar a primeira pantalla da web. Pode ter a imaxe a pantalla completa con texto superposto de forma elegante, ou unha composici\u00f3n partida con texto nun lado e imaxe grande no outro.<\/p>\n<p>O texto debe ser curto, con moita marxe e boa xerarqu\u00eda visual. O resultado debe parecer unha portada editorial dun estudo de interiorismo e ebanister\u00eda a medida.<\/p>\n<p>IMPORTANTE:<br \/>\nNon usar frases comerciais como:<br \/>\n&#8211; \u201creformas baratas\u201d<br \/>\n&#8211; \u201cnos adaptamos a todos os presupostos\u201d<br \/>\n&#8211; \u201cprimeira consulta gratis\u201d<br \/>\n&#8211; \u201cdesde X \u20ac\u201d<br \/>\n&#8211; \u201csen Leroy Merlin\u201d<\/p>\n<p>Non crear m\u00e1is secci\u00f3ns. S\u00f3 o HERO inicial.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-257","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/pages\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":21,"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/pages\/257\/revisions"}],"predecessor-version":[{"id":332,"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/pages\/257\/revisions\/332"}],"wp:attachment":[{"href":"https:\/\/magarestudio.es\/index.php\/wp-json\/wp\/v2\/media?parent=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}