{"id":418,"date":"2026-01-10T19:15:34","date_gmt":"2026-01-10T19:15:34","guid":{"rendered":"https:\/\/nextlevelproyectos.es\/?page_id=418"},"modified":"2026-05-13T16:49:48","modified_gmt":"2026-05-13T16:49:48","slug":"home","status":"publish","type":"page","link":"https:\/\/nextlevelcocinas.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"418\" class=\"elementor elementor-418\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03bb0c9 e-flex e-con-boxed e-con e-parent\" data-id=\"03bb0c9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd33f01 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"fd33f01\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<header id=\"mainmenu\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n  <div class=\"container\">\n\n    <!-- LOGO -->\n    <a href=\"\/\" class=\"logo logo-left\">\n      <img decoding=\"async\"\n        id=\"logoscroll\"\n        src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/NextLevelLOGOweb.png\"\n        alt=\"Logo\"\n      >\n    <\/a>\n\n    <!-- MEN\u00da -->\n    <nav class=\"menu main-menu\">\n\n      <a href=\"\/home\">Inicio<\/a>\n      <a href=\"\/proyectos\">Proyectos<\/a>\n      <a href=\"\/inspiracion\">Inspiraci\u00f3n<\/a>\n      <a href=\"\/nuestro-equipo\">Nuestro equipo<\/a>\n\n      <a href=\"#\" id=\"contacto-pop-up\" class=\"cta-btn\">\n        Reserva tu cita\n      <\/a>\n\n      <!-- IDIOMA -->\n      <nav id=\"LangDropdown\" class=\"lang-dropdown\">\n\n        <button class=\"lang-current\">\n          ES <span class=\"arrow\">\u2304<\/span>\n        <\/button>\n\n        <ul class=\"lang-list\">\n          <li><a href=\"javascript:void(0)\">English<\/a><\/li>\n          <li><a href=\"javascript:void(0)\">Espa\u00f1ol<\/a><\/li>\n        <\/ul>\n\n      <\/nav>\n\n    <\/nav>\n\n    <!-- TOGGLE -->\n    <div class=\"menu-toggle\">\n      <span><\/span>\n      <span><\/span>\n    <\/div>\n\n  <\/div>\n<\/header>\n\n<style>\n\n\/* =========================\n   HEADER\n========================= *\/\n\n#mainmenu{\n\n  position:fixed;\n\n  top:0;\n  left:0;\n  right:0;\n\n  z-index:9999;\n\n  padding:14px 0;\n\n  background:\n    rgba(235,234,228,.72);\n\n  backdrop-filter:blur(18px);\n\n  -webkit-backdrop-filter:blur(18px);\n\n  border-bottom:\n    1px solid rgba(255,255,255,.14);\n\n  transition:\n    background .45s ease,\n    backdrop-filter .45s ease,\n    transform .75s cubic-bezier(.22,.61,.36,1),\n    opacity .45s ease,\n    padding .45s ease;\n\n  transform:translateY(0);\n\n  opacity:1;\n}\n\n\/* ESTADO SCROLL *\/\n\n#mainmenu.scrolled{\n\n  background:\n    rgba(235,234,228,.54);\n\n  backdrop-filter:blur(24px);\n\n  -webkit-backdrop-filter:blur(24px);\n\n  box-shadow:\n    0 10px 35px rgba(0,0,0,.04);\n\n  padding:10px 0;\n}\n\n\/* ESCONDER *\/\n\n#mainmenu.hide{\n\n  opacity:0;\n\n  transform:\n    translateY(-8px);\n\n  pointer-events:none;\n}\n\/* =========================\n   CONTENEDOR\n========================= *\/\n\n#mainmenu .container{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:space-between;\n\n  gap:60px;\n}\n\n\/* =========================\n   LOGO\n========================= *\/\n\n.logo-left{\n\n  margin-left:70px;\n\n  display:flex;\n\n  align-items:center;\n\n  transition:\n    transform .75s cubic-bezier(.22,.61,.36,1),\n    opacity .45s ease;\n}\n\n\/* MOVIMIENTO LATERAL *\/\n\n#mainmenu.hide .logo-left{\n\n  transform:\n    translateX(-36px);\n\n  opacity:0;\n}\n\n#mainmenu .logo img{\n\n  height:45px;\n\n  transition:\n    transform .55s cubic-bezier(.22,1,.36,1);\n}\n\n#mainmenu .logo:hover img{\n\n  transform:scale(1.045);\n}\n\n\/* =========================\n   MEN\u00da\n========================= *\/\n\n.menu{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:42px;\n\n  transition:\n    transform .75s cubic-bezier(.22,.61,.36,1),\n    opacity .45s ease;\n}\n\n\/* MOVIMIENTO LATERAL *\/\n\n#mainmenu.hide .menu{\n\n  transform:\n    translateX(36px);\n\n  opacity:0;\n}\n\n.menu a{\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  height:40px;\n\n  position:relative;\n\n  text-decoration:none;\n\n  white-space:nowrap;\n}\n\n\/* LINKS *\/\n\n#mainmenu .menu a{\n\n  font-family:\"Instrument Sans\",sans-serif;\n\n  text-transform:none;\n\n  font-size:14px;\n\n  letter-spacing:.1px;\n\n  font-weight:500;\n\n  color:#292929;\n\n  transition:\n    opacity .3s ease;\n}\n\n#mainmenu .menu a:hover{\n\n  opacity:.72;\n}\n\n\/* L\u00cdNEA *\/\n\n.menu a::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:50%;\n  bottom:0;\n\n  width:0;\n\n  height:1px;\n\n  background:#292929;\n\n  transform:translateX(-50%);\n\n  opacity:.55;\n\n  transition:\n    width .35s ease,\n    opacity .35s ease;\n}\n\n.menu a:hover::after{\n\n  width:100%;\n}\n\n\/* =========================\n   CTA\n========================= *\/\n\n.cta-btn{\n\n  margin-left:90px;\n\n  font-size:14px !important;\n\n  letter-spacing:.1px;\n\n  animation:\n    subtlePulse 5s ease-in-out infinite;\n}\n\n.cta-btn::after{\n\n  width:58%;\n}\n\n\/* =========================\n   LANG\n========================= *\/\n\n.lang-dropdown{\n\n  position:relative;\n}\n\n.lang-current{\n\n  background:none;\n\n  border:none;\n\n  cursor:pointer;\n\n  display:flex;\n\n  align-items:center;\n\n  justify-content:center;\n\n  gap:5px;\n\n  height:30px;\n\n  padding:0 70px;\n\n  transform:translateY(-1px);\n\n  font-family:\"Instrument Sans\",sans-serif;\n\n  font-weight:500;\n\n  font-size:13px;\n\n  letter-spacing:.2px;\n\n  color:#292929;\n}\n\n.lang-current .arrow{\n\n  font-size:11px;\n\n  transform:translateY(-2px);\n}\n\n\/* LISTA *\/\n\n.lang-list{\n\n  position:absolute;\n\n  top:100%;\n  right:20px;\n\n  background:\n    rgba(235,234,228,.92);\n\n  backdrop-filter:blur(18px);\n\n  -webkit-backdrop-filter:blur(18px);\n\n  border:\n    1px solid rgba(255,255,255,.18);\n\n  padding:18px 28px;\n\n  margin:8px 0 0;\n\n  opacity:0;\n\n  transform:\n    translateY(-12px);\n\n  pointer-events:none;\n\n  transition:\n    all .3s ease;\n\n  list-style:none;\n}\n\n.lang-list.open{\n\n  opacity:1;\n\n  transform:\n    translateY(10px);\n\n  pointer-events:auto;\n}\n\n.lang-list li a{\n\n  display:block;\n\n  padding:10px 16px;\n\n  font-size:13px;\n}\n\n\/* =========================\n   TOGGLE\n========================= *\/\n\n.menu-toggle{\n\n  display:none;\n\n  width:26px;\n\n  height:18px;\n\n  position:relative;\n\n  cursor:pointer;\n}\n\n.menu-toggle span{\n\n  position:absolute;\n\n  left:0;\n\n  width:100%;\n\n  height:1px;\n\n  background:#292929;\n\n  transition:\n    all .35s cubic-bezier(.22,1,.36,1);\n}\n\n.menu-toggle span:first-child{\n\n  top:0;\n}\n\n.menu-toggle span:last-child{\n\n  bottom:0;\n}\n\n.menu-toggle.open span:first-child{\n\n  transform:\n    translateY(8px)\n    rotate(45deg);\n}\n\n.menu-toggle.open span:last-child{\n\n  transform:\n    translateY(-8px)\n    rotate(-45deg);\n}\n\n\/* =========================\n   PULSE\n========================= *\/\n\n@keyframes subtlePulse{\n\n  0%,90%,100%{\n    transform:scale(1);\n  }\n\n  95%{\n    transform:scale(1.03);\n  }\n}\n\n\/* =========================\n   MOBILE\n========================= *\/\n\n@media(max-width:900px){\n\n  #mainmenu{\n\n    padding:12px 0;\n  }\n\n  #mainmenu .container{\n\n    padding:0 20px;\n\n    gap:20px;\n  }\n\n  .logo-left{\n\n    margin-left:0;\n  }\n\n  #mainmenu .logo img{\n\n    height:36px;\n  }\n\n  .menu-toggle{\n\n    display:block;\n  }\n\n  .lang-dropdown{\n\n    display:block;\n  }\n\n  .menu{\n\n    position:fixed;\n\n    inset:0;\n\n    width:100%;\n\n    height:100vh;\n\n    background:\n      rgba(235,234,228,.96);\n\n    backdrop-filter:blur(18px);\n\n    -webkit-backdrop-filter:blur(18px);\n\n    flex-direction:column;\n\n    justify-content:center;\n\n    align-items:center;\n\n    gap:34px;\n\n    opacity:0;\n\n    pointer-events:none;\n\n    transition:\n      opacity .4s ease;\n  }\n\n  .menu.open{\n\n    opacity:1;\n\n    pointer-events:auto;\n  }\n\n  .menu a{\n\n    font-size:19px !important;\n  }\n\n  .cta-btn{\n\n    margin-left:0;\n\n    font-size:19px !important;\n  }\n\n  .lang-current{\n\n    padding:0 20px;\n  }\n\n  html,body{\n\n    overflow-x:hidden;\n  }\n}\n\/* =========================\n   MOBILE HORIZONTAL\n========================= *\/\n\n@media screen\nand (max-width: 950px)\nand (orientation: landscape) {\n\n  \/* HEADER *\/\n\n  #mainmenu{\n\n    padding: 10px 0;\n  }\n\n  #mainmenu.scrolled{\n\n    padding: 8px 0;\n  }\n\n  \/* CONTENEDOR *\/\n\n  #mainmenu .container{\n\n    padding: 0 22px;\n\n    gap: 26px;\n  }\n\n  \/* LOGO *\/\n\n  #mainmenu .logo img{\n\n    height: 34px;\n  }\n  .logo-left{\n\n  margin-left: 30px;\n}\n\n  \/* MEN\u00da *\/\n\n  .menu{\n\n    gap: 26px;\n  }\n\n  .menu a{\n\n    font-size: 14px !important;\n\n    height: 34px;\n  }\n\n  \/* CTA *\/\n\n  .cta-btn{\n\n    margin-left: 18px;\n\n    font-size: 15px !important;\n  }\n\n  \/* LANG *\/\n\n  .lang-current{\n\n    padding: 0 18px;\n\n    font-size: 12px;\n  }\n\n  \/* TOGGLE *\/\n\n  .menu-toggle{\n\n    width: 24px;\n\n    height: 17px;\n  }\n}\n<\/style>\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const mainMenu =\n    document.getElementById(\"mainmenu\");\n\n  let lastScroll = 0;\n\n  let scrollUpDistance = 0;\n\n  const threshold = 70;\n\n  \/* =========================\n     SCROLL\n  ========================= *\/\n\n  window.addEventListener(\"scroll\", function () {\n\n    const currentScroll =\n      window.scrollY;\n\n    \/* ESTADO SCROLL *\/\n\n    if(currentScroll > 12){\n\n      mainMenu.classList.add(\"scrolled\");\n\n    }else{\n\n      mainMenu.classList.remove(\"scrolled\");\n    }\n\n    \/* TOP *\/\n\n    if(currentScroll <= 0){\n\n      mainMenu.classList.remove(\"hide\");\n\n      return;\n    }\n\n    \/* BAJA *\/\n\n    if(currentScroll > lastScroll){\n\n      mainMenu.classList.add(\"hide\");\n\n      scrollUpDistance = 0;\n\n    }else{\n\n      scrollUpDistance +=\n        lastScroll - currentScroll;\n\n      if(scrollUpDistance > threshold){\n\n        mainMenu.classList.remove(\"hide\");\n      }\n    }\n\n    lastScroll = currentScroll;\n  });\n\n  \/* =========================\n     LANG\n  ========================= *\/\n\n  const dropdown =\n    document.querySelector(\"#LangDropdown\");\n\n  const current =\n    dropdown.querySelector(\".lang-current\");\n\n  const list =\n    dropdown.querySelector(\".lang-list\");\n\n  current.addEventListener(\"click\", function () {\n\n    list.classList.toggle(\"open\");\n  });\n\n  document.addEventListener(\"click\", function (e) {\n\n    if (!dropdown.contains(e.target)) {\n\n      list.classList.remove(\"open\");\n    }\n  });\n\n  \/* =========================\n     TOGGLE\n  ========================= *\/\n\n  const toggle =\n    document.querySelector(\".menu-toggle\");\n\n  const menu =\n    document.querySelector(\".menu\");\n\n  toggle.addEventListener(\"click\", () => {\n\n    toggle.classList.toggle(\"open\");\n\n    menu.classList.toggle(\"open\");\n  });\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<div class=\"elementor-element elementor-element-3129927 e-con-full e-flex e-con e-parent\" data-id=\"3129927\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ec2cde elementor-widget elementor-widget-html\" data-id=\"9ec2cde\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GOOGLE FONT -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@300;400;500;600&family=Dosis:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* =========================\n   HERO\n========================= *\/\n\n.nextlevel-hero{\n\n  position:relative;\n\n  width:100%;\n\n  height:100vh;\n\n  overflow:hidden;\n\n  background:#1f1f1f;\n}\n\n\/* =========================\n   IMAGEN\n========================= *\/\n\n.nextlevel-hero-image{\n\n  position:absolute;\n\n  inset:0;\n\n  background-image:url('https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/herohome.jpg');\n\n  background-size:cover;\n\n  background-position:center;\n\n  transform:scale(1);\n\n  animation:\n    heroZoom 18s ease-out forwards;\n}\n\n\/* =========================\n   SOMBRA ARQUITECT\u00d3NICA\n========================= *\/\n\n.hero-architectural-shadow{\n\n  position:absolute;\n\n  inset:-10%;\n\n  z-index:2;\n\n  pointer-events:none;\n\n  opacity:.42;\n\n  mix-blend-mode:multiply;\n\n  filter:blur(36px);\n\n  animation:\n    shadowFloat 20s ease-in-out infinite alternate;\n}\n\n\/* SOMBRA PRINCIPAL *\/\n\n.hero-architectural-shadow::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:-12%;\n  left:-8%;\n\n  width:1200px;\n  height:900px;\n\n  background:\n    radial-gradient(\n      ellipse at center,\n      rgba(0,0,0,.20) 0%,\n      rgba(0,0,0,.08) 28%,\n      transparent 70%\n    );\n\n  transform:\n    rotate(-16deg)\n    scaleY(.72);\n}\n\n\/* SOMBRA SECUNDARIA *\/\n\n.hero-architectural-shadow::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  right:-18%;\n  bottom:-10%;\n\n  width:900px;\n  height:700px;\n\n  background:\n    radial-gradient(\n      ellipse at center,\n      rgba(0,0,0,.16) 0%,\n      rgba(0,0,0,.06) 30%,\n      transparent 72%\n    );\n\n  transform:\n    rotate(12deg)\n    scaleY(.78);\n}\n\n\/* =========================\n   LIGHT SWEEP\n========================= *\/\n\n.hero-light-sweep{\n\n  position:absolute;\n\n  top:-20%;\n\n  left:-40%;\n\n  width:70%;\n\n  height:160%;\n\n  z-index:3;\n\n  pointer-events:none;\n\n  opacity:.12;\n\n  background:\n    linear-gradient(\n      110deg,\n      transparent 0%,\n      rgba(255,255,255,.9) 48%,\n      transparent 100%\n    );\n\n  filter:blur(40px);\n\n  transform:rotate(8deg);\n\n  animation:\n    lightSweep 14s ease-in-out infinite;\n}\n\n\/* =========================\n   OVERLAY\n========================= *\/\n\n.nextlevel-hero-overlay{\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(0,0,0,.08) 0%,\n      rgba(0,0,0,.18) 38%,\n      rgba(0,0,0,.62) 100%\n    );\n\n  z-index:4;\n}\n\n\/* =========================\n   VI\u00d1ETA\n========================= *\/\n\n.nextlevel-hero-vignette{\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    radial-gradient(\n      circle at center,\n      transparent 16%,\n      rgba(0,0,0,.42) 100%\n    );\n\n  z-index:5;\n\n  pointer-events:none;\n}\n\n\/* =========================\n   GRAIN\n========================= *\/\n\n.nextlevel-hero-grain{\n\n  position:absolute;\n\n  inset:0;\n\n  opacity:.055;\n\n  z-index:6;\n\n  background-image:url(\"https:\/\/grainy-gradients.vercel.app\/noise.svg\");\n\n  mix-blend-mode:soft-light;\n\n  pointer-events:none;\n}\n\n\/* =========================\n   CONTENIDO\n========================= *\/\n\n.nextlevel-hero-content{\n\n  position:absolute;\n\n  left:70px;\n  bottom:72px;\n\n  z-index:20;\n\n  max-width:760px;\n\n  color:#fff;\n\n  font-family:'Instrument Sans',sans-serif;\n}\n\n\/* =========================\n   TITULAR\n========================= *\/\n\n.nextlevel-hero-title{\n\n  font-family:'Instrument Sans',sans-serif;\n\n  font-size:60px;\n\n  line-height:1.00;\n\n  font-weight:300;\n\n  letter-spacing:-2.2px;\n\n  margin:0 0 38px;\n\n  color:rgba(255,255,255,.95);\n\n  opacity:0;\n\n  transform:\n    translateY(34px);\n\n  animation:\n    cinematicReveal 2.4s cubic-bezier(.22,.61,.36,1) forwards;\n\n  animation-delay:.5s;\n}\n\n\/* =========================\n   CTA\n========================= *\/\n\n.nextlevel-hero-link{\n\n  position:relative;\n\n  display:inline-block;\n\n  font-family:'Dosis',sans-serif;\n\n  font-size:11px;\n\n  font-weight:500;\n\n  letter-spacing:4px;\n\n  text-transform:uppercase;\n\n  color:rgba(255,255,255,.84);\n\n  padding-bottom:10px;\n\n  text-decoration:none;\n\n  opacity:0;\n\n  transform:translateY(18px);\n\n  animation:\n    cinematicReveal 2s cubic-bezier(.22,.61,.36,1) forwards;\n\n  animation-delay:1.35s;\n}\n\n.nextlevel-hero-link::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:0;\n  bottom:0;\n\n  width:0;\n\n  height:1px;\n\n  background:rgba(255,255,255,.72);\n\n  transition:width .5s ease;\n}\n\n.nextlevel-hero:hover .nextlevel-hero-link::after{\n\n  width:100%;\n}\n\n\/* =========================\n   SCROLL\n========================= *\/\n\n.nextlevel-scroll{\n\n  position:absolute;\n\n  right:42px;\n  bottom:42px;\n\n  z-index:20;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n\n  gap:16px;\n\n  opacity:0;\n\n  animation:\n    scrollReveal 2.6s ease forwards;\n\n  animation-delay:2s;\n}\n\n.nextlevel-scroll span{\n\n  font-family:'Instrument Sans',sans-serif;\n\n  font-size:9px;\n\n  letter-spacing:5px;\n\n  text-transform:uppercase;\n\n  color:rgba(255,255,255,.62);\n}\n\n\/* L\u00cdNEA *\/\n\n.nextlevel-scroll-line{\n\n  position:relative;\n\n  width:1px;\n\n  height:82px;\n\n  overflow:hidden;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(255,255,255,0),\n      rgba(255,255,255,.25),\n      rgba(255,255,255,0)\n    );\n}\n\n\/* PULSO *\/\n\n.nextlevel-scroll-line::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:-24px;\n  left:0;\n\n  width:100%;\n  height:24px;\n\n  background:rgba(255,255,255,.8);\n\n  animation:\n    scrollPulse 2.4s ease-in-out infinite;\n}\n\n\/* =========================\n   ANIMACIONES\n========================= *\/\n\n@keyframes heroZoom{\n\n  from{\n    transform:scale(1);\n  }\n\n  to{\n    transform:scale(1.08);\n  }\n}\n\n@keyframes cinematicReveal{\n\n  to{\n    opacity:1;\n    transform:translateY(0);\n  }\n}\n\n@keyframes shadowFloat{\n\n  0%{\n\n    transform:\n      translate3d(0,0,0)\n      rotate(0deg);\n  }\n\n  100%{\n\n    transform:\n      translate3d(-2%,1.5%,0)\n      rotate(-1deg);\n  }\n}\n\n@keyframes lightSweep{\n\n  0%{\n\n    transform:\n      translateX(-8%)\n      rotate(8deg);\n  }\n\n  100%{\n\n    transform:\n      translateX(12%)\n      rotate(8deg);\n  }\n}\n\n@keyframes scrollReveal{\n\n  from{\n    opacity:0;\n    transform:translateY(12px);\n  }\n\n  to{\n    opacity:.52;\n    transform:translateY(0);\n  }\n}\n\n@keyframes scrollPulse{\n\n  0%{\n    top:-24px;\n    opacity:0;\n  }\n\n  30%{\n    opacity:1;\n  }\n\n  100%{\n    top:100%;\n    opacity:0;\n  }\n}\n\n\/* =========================\n   MOBILE\n========================= *\/\n\n@media(max-width:768px){\n\n  .nextlevel-hero-content{\n\n    left:28px;\n    right:28px;\n    bottom:48px;\n  }\n\n  .nextlevel-hero-title{\n\n    font-size:44px;\n\n    line-height:1.04;\n\n    letter-spacing:-1.5px;\n\n    margin-bottom:28px;\n  }\n\n  .nextlevel-scroll{\n\n    right:24px;\n    bottom:24px;\n  }\n\n  .hero-architectural-shadow{\n\n    opacity:.34;\n  }\n\n  .hero-light-sweep{\n\n    opacity:.08;\n  }\n}\n\n<\/style>\n\n<!-- HERO -->\n\n<section class=\"nextlevel-hero\">\n\n  <!-- IMAGEN -->\n  <div class=\"nextlevel-hero-image\"><\/div>\n\n  <!-- SOMBRAS -->\n  <div class=\"hero-architectural-shadow\"><\/div>\n\n  <!-- LIGHT SWEEP -->\n  <div class=\"hero-light-sweep\"><\/div>\n\n  <!-- CAPAS -->\n  <div class=\"nextlevel-hero-overlay\"><\/div>\n  <div class=\"nextlevel-hero-vignette\"><\/div>\n  <div class=\"nextlevel-hero-grain\"><\/div>\n\n  <!-- CONTENIDO -->\n  <div class=\"nextlevel-hero-content\">\n\n    <h1 class=\"nextlevel-hero-title\">\n      Dise\u00f1adas para vivirlas\n    <\/h1>\n\n    <a href=\"#\" id=\"contacto-pop-up\" class=\"nextlevel-hero-link\">\n      Agenda una cita\n    <\/a>\n\n  <\/div>\n\n  <!-- SCROLL -->\n  <div class=\"nextlevel-scroll\">\n\n    <span>Scroll<\/span>\n\n    <div class=\"nextlevel-scroll-line\"><\/div>\n\n  <\/div>\n\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9143e27 e-con-full e-flex e-con e-parent\" data-id=\"9143e27\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34242a5 elementor-widget elementor-widget-html\" data-id=\"34242a5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GOOGLE FONTS -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@300;400;500;600&family=Dosis:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\nbody{\n  background:#EBEAE4;\n  margin:0;\n  font-family:'Dosis',sans-serif;\n}\n\n.scroll-cards-wrapper{\n  position:relative;\n\n  \/* M\u00c1S RECORRIDO PARA LAS CARDS *\/\n  height:240vh;\n\n  overflow:hidden;\n\n  background:#EBEAE4;\n}\n\n\/* ========= BACKGROUND ========= *\/\n\n.cards-background{\n  position:absolute;\n  inset:0;\n\n  background:\n    radial-gradient(\n      circle at top,\n      rgba(0,0,0,0.03),\n      transparent 45%\n    ),\n    #EBEAE4;\n}\n\n\/* ========= TREES ========= *\/\n\n.tree-overlay{\n\n  position:absolute;\n\n  left:0;\n\n  width:100%;\n\n  pointer-events:none;\n\n  mix-blend-mode:multiply;\n\n  z-index:1;\n}\n\n\/* ========= TOP TREE ========= *\/\n\n.tree-top{\n\n  top:-45vh;\n\n  height:170vh;\n\n  opacity:.28;\n\n  transition:opacity .3s linear;\n}\n\n\/* ========= BOTTOM TREE ========= *\/\n\n.tree-bottom{\n\n  bottom:-55vh;\n\n  height:170vh;\n\n  opacity:.20;\n\n  transform:rotate(180deg);\n\n  transition:opacity .3s linear;\n}\n\n.tree-overlay svg{\n  width:100%;\n  height:100%;\n}\n\n.tree-line{\n  fill:none;\n\n  stroke:rgba(0,0,0,0.30);\n\n  stroke-width:2;\n\n  stroke-linecap:round;\n  stroke-linejoin:round;\n\n  stroke-dasharray:1600;\n  stroke-dashoffset:1600;\n\n  transition:stroke-dashoffset .15s linear;\n}\n\n.trunk{\n  stroke-width:4;\n}\n\n\/* ========= OVERLAY ========= *\/\n\n.background-overlay{\n  position:absolute;\n  inset:0;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(235,234,228,0.10),\n      rgba(235,234,228,0.45)\n    );\n\n  pointer-events:none;\n\n  z-index:2;\n}\n\n\/* ========= SCROLL INDICATOR ========= *\/\n\n.scroll-indicator{\n\n  position:absolute;\n\n  top:38vh;\n  left:50%;\n\n  transform:translateX(-50%);\n\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  gap:14px;\n\n  z-index:10;\n\n  opacity:.75;\n\n  transition:\n    opacity .6s ease,\n    transform .6s ease;\n\n  pointer-events:none;\n}\n\n.scroll-indicator.hidden{\n\n  opacity:0;\n\n  transform:\n    translateX(-50%)\n    translateY(10px);\n}\n\n.scroll-indicator span{\n\n  font-family:'Dosis',sans-serif;\n\n  font-size:13px;\n\n  letter-spacing:4px;\n\n  text-transform:uppercase;\n\n  color:rgba(0,0,0,.45);\n}\n\n.scroll-line{\n\n  width:1px;\n  height:70px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(0,0,0,0),\n      rgba(0,0,0,.4),\n      rgba(0,0,0,0)\n    );\n\n  position:relative;\n\n  overflow:hidden;\n}\n\n.scroll-line::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:-20px;\n  left:0;\n\n  width:100%;\n  height:20px;\n\n  background:rgba(0,0,0,.45);\n\n  animation:scrollPulse 2s ease-in-out infinite;\n}\n\n@keyframes scrollPulse{\n\n  0%{\n    top:-20px;\n    opacity:0;\n  }\n\n  30%{\n    opacity:1;\n  }\n\n  100%{\n    top:100%;\n    opacity:0;\n  }\n}\n\n\/* ========= STICKY ========= *\/\n\n.scroll-cards-sticky{\n  position:fixed;\n  inset:0;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  opacity:0;\n  visibility:hidden;\n\n  transition:opacity .35s ease;\n\n  pointer-events:none;\n\n  z-index:5;\n}\n\n.scroll-cards-sticky.visible{\n  opacity:1;\n  visibility:visible;\n}\n\n\/* ========= CARDS ========= *\/\n\n.card{\n  position:absolute;\n\n  max-width:760px;\n\n  text-align:center;\n\n  color:rgba(41,41,41,.92);\n\n  opacity:0;\n\n  transform:translateY(18px);\n\n  transition:\n    opacity .8s cubic-bezier(.22,.61,.36,1),\n    transform .8s cubic-bezier(.22,.61,.36,1);\n\n  will-change:transform,opacity;\n\n  pointer-events:auto;\n}\n\n.card.active{\n  opacity:1;\n  transform:translateY(0);\n}\n\n.card:nth-child(2){\n  transform:translateX(45px);\n}\n\n.card:nth-child(2).active{\n  transform:translateX(0);\n}\n\n.card:nth-child(4){\n  transform:translateX(-45px);\n}\n\n.card:nth-child(4).active{\n  transform:translateX(0);\n}\n\n\/* ========= TITULOS ========= *\/\n\n.card h2{\n\n  font-family:'Instrument Sans',sans-serif;\n\n  font-size:32px;\n\n  font-weight:300;\n\n  line-height:1.15;\n\n  letter-spacing:-1px;\n\n  margin-bottom:18px;\n\n  color:rgba(41,41,41,.94);\n}\n\n\/* ========= TEXTOS ========= *\/\n\n.card p{\n\n  font-family:'Dosis',sans-serif;\n\n  font-size:22px;\n\n  line-height:1.45;\n\n  letter-spacing:.2px;\n\n  opacity:.82;\n\n  margin:0;\n\n  font-weight:300;\n}\n\n\/* ========= PROGRESS ========= *\/\n\n.progress-line{\n  width:140px;\n  height:1px;\n\n  background:rgba(0,0,0,.12);\n\n  margin:30px auto 0;\n\n  position:relative;\n\n  overflow:hidden;\n}\n\n.progress-line-fill{\n  position:absolute;\n  inset:0;\n\n  width:0%;\n\n  background:rgba(0,0,0,.5);\n\n  transition:width .6s ease;\n}\n\n\/* ========= MOBILE ========= *\/\n\n@media(max-width:768px){\n\n  .scroll-cards-wrapper{\n    height:220vh;\n  }\n\n  .tree-overlay{\n    width:150%;\n    left:-25%;\n  }\n\n  .tree-top{\n    top:-35vh;\n  }\n\n  .tree-bottom{\n    bottom:-40vh;\n  }\n\n  .scroll-indicator{\n    top:34vh;\n  }\n\n  .card{\n    padding:0 28px;\n  }\n\n  .card h2{\n    font-size:26px;\n\n    line-height:1.15;\n\n    letter-spacing:-0.8px;\n  }\n\n  .card p{\n    font-size:19px;\n  }\n}\n\n<\/style>\n\n<div class=\"scroll-cards-wrapper\" id=\"scrollCards\">\n\n  <div class=\"cards-background\"><\/div>\n\n  <!-- ========= TOP TREE ========= -->\n\n  <div class=\"tree-overlay tree-top\" id=\"treeTop\">\n\n    <svg viewBox=\"0 0 1000 1600\">\n\n      <path class=\"tree-line trunk top-line\"\n        d=\"\n        M500 1600\n        C490 1450 520 1320 500 1180\n        C480 1020 530 880 500 700\n        C470 520 520 360 500 120\n        \"\n      \/>\n\n      <path class=\"tree-line top-line\"\n        d=\"\n        M500 900\n        C420 820 340 760 260 650\n        C200 560 150 500 90 390\n        \"\n      \/>\n\n      <path class=\"tree-line top-line\"\n        d=\"\n        M330 720\n        C280 660 230 610 170 520\n        \"\n      \/>\n\n      <path class=\"tree-line top-line\"\n        d=\"\n        M510 760\n        C620 680 700 590 780 470\n        C850 360 900 260 960 140\n        \"\n      \/>\n\n      <path class=\"tree-line top-line\"\n        d=\"\n        M690 560\n        C760 500 820 430 870 350\n        \"\n      \/>\n\n      <path class=\"tree-line top-line\"\n        d=\"\n        M490 420\n        C430 340 360 280 300 190\n        C250 120 210 70 170 20\n        \"\n      \/>\n\n    <\/svg>\n\n  <\/div>\n\n  <!-- ========= BOTTOM TREE ========= -->\n\n  <div class=\"tree-overlay tree-bottom\" id=\"treeBottom\">\n\n    <svg viewBox=\"0 0 1000 1600\">\n\n      <path class=\"tree-line trunk bottom-line\"\n        d=\"\n        M500 1600\n        C490 1450 520 1320 500 1180\n        C480 1020 530 880 500 700\n        C470 520 520 360 500 120\n        \"\n      \/>\n\n      <path class=\"tree-line bottom-line\"\n        d=\"\n        M500 900\n        C420 820 340 760 260 650\n        C200 560 150 500 90 390\n        \"\n      \/>\n\n      <path class=\"tree-line bottom-line\"\n        d=\"\n        M330 720\n        C280 660 230 610 170 520\n        \"\n      \/>\n\n      <path class=\"tree-line bottom-line\"\n        d=\"\n        M510 760\n        C620 680 700 590 780 470\n        C850 360 900 260 960 140\n        \"\n      \/>\n\n      <path class=\"tree-line bottom-line\"\n        d=\"\n        M690 560\n        C760 500 820 430 870 350\n        \"\n      \/>\n\n      <path class=\"tree-line bottom-line\"\n        d=\"\n        M490 420\n        C430 340 360 280 300 190\n        C250 120 210 70 170 20\n        \"\n      \/>\n\n    <\/svg>\n\n  <\/div>\n\n  <div class=\"background-overlay\"><\/div>\n\n  <!-- ========= SCROLL INDICATOR ========= -->\n\n  <div class=\"scroll-indicator\" id=\"scrollIndicator\">\n\n    <span>scroll<\/span>\n\n    <div class=\"scroll-line\"><\/div>\n\n  <\/div>\n\n  <!-- ========= STICKY ========= -->\n\n  <div class=\"scroll-cards-sticky\" id=\"stickyCards\">\n\n    <div class=\"card active\">\n      <h2>El plus de elegirnos.<\/h2>\n      <p>\n        Un equipo especializado que controla dise\u00f1o, obra y montaje\n        para que tu cocina se proyecte correctamente desde el inicio.\n      <\/p>\n      <div class=\"progress-line\">\n        <div class=\"progress-line-fill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <h2>Asesoramiento con criterio.<\/h2>\n      <p>\n        Basados en tus gustos, elevaremos el dise\u00f1o de tu cocina al siguiente nivel .\n      <\/p>\n      <div class=\"progress-line\">\n        <div class=\"progress-line-fill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <h2>Instalaci\u00f3n cuidada hasta el \u00faltimo detalle.<\/h2>\n      <p>\n        Cada cocina se instala como fue concebida.\n      <\/p>\n      <div class=\"progress-line\">\n        <div class=\"progress-line-fill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <h2>Cercan\u00eda, claridad y seguimiento real.<\/h2>\n      <p>\n       Un \u00fanico equipo acompa\u00f1a el proyecto de principio a fin, cuidando cada fase de la ejecuci\u00f3n.\n      <\/p>\n      <div class=\"progress-line\">\n        <div class=\"progress-line-fill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <h2>Una cocina pensada para quedarse.<\/h2>\n      <p>\n    \n      <\/p>\n      <div class=\"progress-line\">\n        <div class=\"progress-line-fill\"><\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<script>\n\nconst wrapper = document.getElementById(\"scrollCards\");\nconst sticky = document.getElementById(\"stickyCards\");\n\nconst cards = wrapper.querySelectorAll(\".card\");\n\nconst treeTop = document.getElementById(\"treeTop\");\nconst treeBottom = document.getElementById(\"treeBottom\");\n\nconst topLines =\n  document.querySelectorAll(\".top-line\");\n\nconst bottomLines =\n  document.querySelectorAll(\".bottom-line\");\n\nconst scrollIndicator =\n  document.getElementById(\"scrollIndicator\");\n\nlet ticking = false;\n\nfunction updateCards(){\n\n  const rect = wrapper.getBoundingClientRect();\n\n  const wrapperTop = rect.top;\n  const wrapperBottom = rect.bottom;\n\n  const isVisible =\n    wrapperTop <= 0 &&\n    wrapperBottom >= window.innerHeight;\n\n  sticky.classList.toggle(\"visible\", isVisible);\n\n  const scrollRange =\n    wrapper.offsetHeight - window.innerHeight;\n\n  const scrollProgress = Math.min(\n    Math.max((-wrapperTop) \/ scrollRange, 0),\n    1\n  );\n\n  \/* ========= CARDS ========= *\/\n\n  const slowedProgress = scrollProgress * 0.88;\n\n  const index = Math.min(\n    cards.length - 1,\n    Math.floor(slowedProgress * cards.length)\n  );\n\n  cards.forEach((card, i) => {\n\n    card.classList.toggle(\"active\", i === index);\n\n    card.style.transform = \"\";\n\n    \/* ========= \u00daLTIMA CARD ========= *\/\n\n    if(i === cards.length - 1){\n\n      \/* EMPIEZA M\u00c1S TARDE *\/\n      const finalMoveStart = 0.94;\n\n      if(scrollProgress > finalMoveStart){\n\n        const extraProgress =\n          (scrollProgress - finalMoveStart) \/\n          (1 - finalMoveStart);\n\n        \/* M\u00c1S SUAVE *\/\n        const easedProgress =\n          extraProgress * extraProgress;\n\n        \/* M\u00c1S LENTO *\/\n        const moveDown =\n          easedProgress * 700;\n\n        card.style.transform =\n          `translateY(${moveDown}px)`;\n      }\n    }\n\n    const fill =\n      card.querySelector(\".progress-line-fill\");\n\n    if(fill){\n\n      fill.style.width =\n        ((i + 1) \/ cards.length) * 100 + \"%\";\n    }\n  });\n\n  \/* ========= TOP TREE ========= *\/\n\n  treeTop.style.opacity =\n    0.28 + (scrollProgress * 0.22);\n\n  topLines.forEach((line, i) => {\n\n    const delay = i * 0.07;\n\n    const p = Math.max(\n      0,\n      Math.min(1, scrollProgress - delay)\n    );\n\n    const initialDraw = 0.22;\n\n    line.style.strokeDashoffset =\n      1600 - (\n        1600 *\n        (\n          initialDraw +\n          (p * 0.78)\n        )\n      );\n  });\n\n  \/* ========= BOTTOM TREE ========= *\/\n\n  const bottomProgress = Math.max(\n    0,\n    (scrollProgress - 0.45) * 1.9\n  );\n\n  treeBottom.style.opacity =\n    0.10 + (bottomProgress * 0.22);\n\n  bottomLines.forEach((line, i) => {\n\n    const delay = i * 0.06;\n\n    const p = Math.max(\n      0,\n      Math.min(1, bottomProgress - delay)\n    );\n\n    const initialDraw = 0.10;\n\n    line.style.strokeDashoffset =\n      1600 - (\n        1600 *\n        (\n          initialDraw +\n          (p * 0.90)\n        )\n      );\n  });\n\n  \/* ========= INDICATOR ========= *\/\n\n  if(scrollProgress > 0.12){\n\n    scrollIndicator.classList.add(\"hidden\");\n\n  }else{\n\n    scrollIndicator.classList.remove(\"hidden\");\n  }\n\n  ticking = false;\n}\n\nwindow.addEventListener(\n  \"scroll\",\n  () => {\n\n    if(!ticking){\n\n      requestAnimationFrame(updateCards);\n\n      ticking = true;\n    }\n  },\n  { passive:true }\n);\n\nwindow.addEventListener(\n  \"resize\",\n  updateCards\n);\n\nupdateCards();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d11502e e-con-full e-flex e-con e-parent\" data-id=\"d11502e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1bda0f elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"d1bda0f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- TIPOGRAF\u00cdA -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@300;400;500;600&family=Dosis:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* CONTENEDOR *\/\n\n.cinematic-gallery {\n\n  position:relative;\n\n  width:100%;\n\n  height:88vh;\n\n  overflow:hidden;\n\n  background:#EBEAE4;\n\n  cursor:pointer;\n}\n\n\/* PROFUNDIDAD CINEM\u00c1TICA *\/\n\n.cinematic-gallery::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    radial-gradient(\n      circle at center,\n      transparent 20%,\n      rgba(0,0,0,.16) 100%\n    );\n\n  z-index:2;\n\n  pointer-events:none;\n}\n\n\/* LABEL EDITORIAL *\/\n\n.editorial-label{\n\n  position:absolute;\n\n  top:42px;\n  left:48px;\n\n  z-index:8;\n\n  font-family:'Instrument Sans',sans-serif;\n\n  font-size:11px;\n\n  font-weight:500;\n\n  letter-spacing:5px;\n\n  text-transform:uppercase;\n\n  color:rgba(255,255,255,.72);\n\n  opacity:0;\n\n  transform:translateY(10px);\n\n  transition:\n    opacity 1.6s ease,\n    transform 1.6s ease;\n\n  pointer-events:none;\n}\n\n.editorial-label.visible{\n\n  opacity:1;\n\n  transform:translateY(0);\n}\n\n\/* SLIDES *\/\n\n.cinematic-slide {\n\n  position:absolute;\n\n  inset:0;\n\n  opacity:0;\n\n  transition:opacity 1.6s ease;\n}\n\n.cinematic-slide.active {\n\n  opacity:1;\n\n  z-index:1;\n}\n\n.cinematic-slide img {\n\n  width:100%;\n  height:100%;\n\n  object-fit:cover;\n\n  transform:scale(1);\n\n  transition:\n    transform 8s ease,\n    filter 2s ease;\n\n  filter:saturate(.96);\n}\n\n.cinematic-slide.active img {\n\n  transform:scale(1.045);\n\n  filter:saturate(1);\n}\n\n\/* OVERLAY *\/\n\n.cinematic-overlay {\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(0,0,0,0.10) 0%,\n      rgba(0,0,0,0.20) 35%,\n      rgba(0,0,0,0.52) 100%\n    );\n\n  z-index:3;\n\n  pointer-events:none;\n}\n\n\/* CONTENIDO EDITORIAL *\/\n\n.cinematic-content{\n\n  position:absolute;\n\n  left:48px;\n  bottom:62px;\n\n  z-index:7;\n\n  max-width:620px;\n\n  color:#fff;\n}\n\n\/* TITULAR *\/\n\n.cinematic-title{\n\n  font-family:'Instrument Sans',sans-serif;\n\n  margin:0 0 24px;\n\n  font-size:44px;\n\n  line-height:1.08;\n\n  font-weight:300;\n\n  letter-spacing:-1.4px;\n\n  color:rgba(255,255,255,.95);\n\n  opacity:0;\n\n  transform:translateY(18px);\n\n  transition:\n    opacity 1.6s ease,\n    transform 1.6s ease;\n\n  transition-delay:.45s;\n}\n\n.cinematic-title.visible{\n\n  opacity:1;\n\n  transform:translateY(0);\n}\n\n\/* CTA EDITORIAL *\/\n\n.cinematic-link{\n\n  position:relative;\n\n  display:inline-block;\n\n  font-family:'Dosis',sans-serif;\n\n  font-size:11px;\n\n  font-weight:500;\n\n  letter-spacing:4px;\n\n  text-transform:uppercase;\n\n  color:rgba(255,255,255,.82);\n\n  padding-bottom:10px;\n\n  opacity:0;\n\n  transform:translateY(12px);\n\n  transition:\n    opacity 1.5s ease,\n    transform 1.5s ease;\n  \n  transition-delay:.95s;\n}\n\n.cinematic-link.visible{\n\n  opacity:1;\n\n  transform:translateY(0);\n}\n\n\/* L\u00cdNEA *\/\n\n.cinematic-link::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:0;\n  bottom:0;\n\n  width:0;\n\n  height:1px;\n\n  background:rgba(255,255,255,.72);\n\n  transition:width .5s ease;\n}\n\n.cinematic-gallery:hover .cinematic-link::after{\n\n  width:100%;\n}\n\n\/* MICRO MOVIMIENTO *\/\n\n.cinematic-gallery:hover .cinematic-title{\n\n  transform:translateY(-2px);\n}\n\n\/* MOBILE *\/\n\n@media(max-width:768px){\n\n  .cinematic-gallery{\n\n    height:82vh;\n  }\n\n  .editorial-label{\n\n    top:28px;\n    left:28px;\n\n    font-size:10px;\n\n    letter-spacing:4px;\n  }\n\n  .cinematic-content{\n\n    left:28px;\n    right:28px;\n    bottom:42px;\n  }\n\n  .cinematic-title{\n\n    font-size:31px;\n\n    line-height:1.12;\n\n    letter-spacing:-1px;\n\n    margin-bottom:22px;\n  }\n\n  .cinematic-link{\n\n    font-size:10px;\n\n    letter-spacing:3px;\n  }\n}\n\n<\/style>\n\n<!-- GALER\u00cdA -->\n\n<div class=\"cinematic-gallery\" id=\"contacto-pop-up\">\n\n  <!-- LABEL -->\n\n  <div class=\"editorial-label\" id=\"editorialLabel\">\n\n    Inspiraci\u00f3n\n\n  <\/div>\n\n  <!-- SLIDES -->\n\n  <div class=\"cinematic-slide active\">\n    <img decoding=\"async\" src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/LXtCxbDc4j1AtnauwTiXr7ilryvBDI-metaT0JfQ09NUE9TSUNJT04gOSBBVVggQi5qcGc-.jpg\" \/>\n  <\/div>\n\n  <div class=\"cinematic-slide\">\n    <img decoding=\"async\" src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/herohome.jpg\" \/>\n  <\/div>\n\n  <div class=\"cinematic-slide\">\n    <img decoding=\"async\" src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/3zKn3zVxhJAVYxyMJIlCRKhZeEFZHm-metaT0JfQ09NQklOQUNJT04gNyBERVRBTExFXzIuanBn-.jpg\" \/>\n  <\/div>\n\n  <div class=\"cinematic-slide\">\n    <img decoding=\"async\" src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/SUAQLom2jZ9PUWZSNiLRc6fYb2KvGM-metaT0JfQ09NUE9TSUNJT04gMSBBVVggMS5qcGc-.jpg\" \/>\n  <\/div>\n\n  <div class=\"cinematic-slide\">\n    <img decoding=\"async\" src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-27-at-20.37.08.png\" \/>\n  <\/div>\n\n  <!-- OVERLAY -->\n\n  <div class=\"cinematic-overlay\"><\/div>\n\n  <!-- CONTENIDO -->\n\n  <div class=\"cinematic-content\">\n\n    <h2 class=\"cinematic-title\" id=\"cinematicTitle\">\n\n      De proyecto a realidad.\n\n    <\/h2>\n\n    <div class=\"cinematic-link\" id=\"cinematicLink\">\n\n      Agenda tu cita\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<script>\n\n\/* SLIDER *\/\n\nwindow.addEventListener(\"load\", function () {\n\n  const slides =\n    document.querySelectorAll(\n      \"#contacto-pop-up .cinematic-slide\"\n    );\n\n  let current = 0;\n\n  function showNextSlide() {\n\n    slides[current].classList.remove(\"active\");\n\n    current = (current + 1) % slides.length;\n\n    slides[current].classList.add(\"active\");\n  }\n\n  setInterval(showNextSlide, 6200);\n});\n\n\/* APARICIONES + POPUP *\/\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n  const popup =\n    document.getElementById(\"custom-popup-overlay\");\n\n  const label =\n    document.getElementById(\"editorialLabel\");\n\n  const title =\n    document.getElementById(\"cinematicTitle\");\n\n  const link =\n    document.getElementById(\"cinematicLink\");\n\n  document.addEventListener(\"click\", function(e){\n\n    const trigger =\n      e.target.closest(\"#contacto-pop-up\");\n\n    if(trigger){\n\n      e.preventDefault();\n\n      popup.classList.add(\"active\");\n    }\n  });\n\n  \/* TIMINGS CINEM\u00c1TICOS *\/\n\n  setTimeout(() => {\n\n    label.classList.add(\"visible\");\n\n  }, 500);\n\n  setTimeout(() => {\n\n    title.classList.add(\"visible\");\n\n  }, 1100);\n\n  setTimeout(() => {\n\n    link.classList.add(\"visible\");\n\n  }, 1800);\n\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c77cbab e-con-full e-flex e-con e-parent\" data-id=\"c77cbab\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7ea0f3 elementor-widget elementor-widget-html\" data-id=\"d7ea0f3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GOOGLE FONT -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@300;400;500;600&family=Dosis:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* =========================\n   SECCI\u00d3N COMPLETA\n========================= *\/\n\n.editorial-closing-section{\n\n  position:relative;\n\n  overflow:hidden;\n\n  background:\n    linear-gradient(\n      to bottom,\n      #EBEAE4 0%,\n      #E7E5DF 58%,\n      #E1DED7 100%\n    );\n\n  padding:360px 20px 180px;\n\n  text-align:center;\n\n  color:#292929;\n}\n\n\/* =========================\n   LUZ CINEMATOGR\u00c1FICA\n========================= *\/\n\n.cinematic-light{\n\n  position:absolute;\n\n  inset:-10%;\n\n  z-index:1;\n\n  pointer-events:none;\n\n  opacity:1;\n\n  filter:blur(18px);\n\n  mix-blend-mode:soft-light;\n\n  animation:\n    cinematicFloat 14s ease-in-out infinite alternate;\n}\n\n\/* LUZ SUPERIOR *\/\n\n.cinematic-light::before{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:4%;\n  left:8%;\n\n  width:980px;\n  height:980px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(255,255,255,.82) 0%,\n      rgba(255,255,255,.32) 24%,\n      rgba(255,255,255,.08) 42%,\n      transparent 72%\n    );\n}\n\n\/* SOMBRA ORG\u00c1NICA *\/\n\n.cinematic-light::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  right:-6%;\n  bottom:-4%;\n\n  width:820px;\n  height:820px;\n\n  border-radius:50%;\n\n  background:\n    radial-gradient(\n      circle,\n      rgba(0,0,0,.09) 0%,\n      rgba(0,0,0,.045) 32%,\n      transparent 72%\n    );\n}\n\n\/* MOVIMIENTO *\/\n\n@keyframes cinematicFloat{\n\n  0%{\n\n    transform:\n      translate3d(0,0,0)\n      rotate(0deg)\n      scale(1);\n  }\n\n  100%{\n\n    transform:\n      translate3d(-2%,2%,0)\n      rotate(-2deg)\n      scale(1.04);\n  }\n}\n\n\/* =========================\n   TESTIMONIAL\n========================= *\/\n\n.testimonial-editorial{\n\n  position:relative;\n\n  z-index:3;\n\n  opacity:0;\n\n  transform:translateY(30px);\n\n  transition:\n    opacity 1.6s ease,\n    transform 1.6s ease;\n}\n\n\/* VISIBLE *\/\n\n.testimonial-editorial.visible{\n\n  opacity:1;\n\n  transform:translateY(0);\n}\n\n\/* TEXTO *\/\n\n.testimonial-editorial p{\n\n  font-family:'Dosis',sans-serif;\n\n  font-size:22px;\n\n  font-weight:300;\n\n  line-height:1.72;\n\n  letter-spacing:.1px;\n\n  max-width:760px;\n\n  margin:0 auto 38px;\n\n  color:rgba(41,41,41,.84);\n\n  text-wrap:balance;\n}\n\n\/* DETALLE *\/\n\n.testimonial-editorial span{\n\n  display:block;\n\n  font-family:'Dosis',sans-serif;\n\n  font-size:11px;\n\n  font-weight:500;\n\n  letter-spacing:5px;\n\n  text-transform:uppercase;\n\n  opacity:.38;\n\n  transform:translateY(10px);\n\n  transition:\n    opacity 1.4s ease,\n    transform 1.4s ease;\n\n  transition-delay:.35s;\n}\n\n\/* VISIBLE *\/\n\n.testimonial-editorial.visible span{\n\n  transform:translateY(0);\n}\n\n\/* =========================\n   L\u00cdNEA CENTRAL\n========================= *\/\n\n.closing-line{\n\n  position:relative;\n\n  width:1px;\n\n  height:220px;\n\n  margin:130px auto 130px;\n\n  background:\n    linear-gradient(\n      to bottom,\n      rgba(0,0,0,0),\n      rgba(0,0,0,.18),\n      rgba(0,0,0,0)\n    );\n\n  opacity:0;\n\n  transform:translateY(16px);\n\n  transition:\n    opacity 1.8s ease,\n    transform 1.8s ease;\n\n  transition-delay:.7s;\n}\n\n\/* GLOW *\/\n\n.closing-line::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  top:50%;\n  left:50%;\n\n  width:18px;\n  height:18px;\n\n  transform:translate(-50%,-50%);\n\n  background:rgba(0,0,0,.06);\n\n  border-radius:50%;\n\n  filter:blur(8px);\n}\n\n\/* VISIBLE *\/\n\n.testimonial-editorial.visible .closing-line{\n\n  opacity:1;\n\n  transform:translateY(0);\n}\n\n\/* =========================\n   CTA FINAL\n========================= *\/\n\n.final-editorial-cta{\n\n  position:relative;\n\n  z-index:3;\n\n  opacity:0;\n\n  transform:translateY(24px);\n\n  transition:\n    opacity 1.8s ease,\n    transform 1.8s ease;\n\n  transition-delay:.45s;\n}\n\n\/* VISIBLE *\/\n\n.final-editorial-cta.visible{\n\n  opacity:1;\n\n  transform:translateY(0);\n}\n\n\/* TEXTO FINAL *\/\n\n.final-editorial-cta p{\n\n  font-family:'Instrument Sans',sans-serif;\n\n  font-size:40px;\n\n  font-weight:300;\n\n  line-height:1.24;\n\n  letter-spacing:-1.6px;\n\n  max-width:820px;\n\n  margin:0 auto;\n\n  color:rgba(41,41,41,.94);\n\n  text-wrap:balance;\n}\n\n\/* =========================\n   MOBILE\n========================= *\/\n\n@media(max-width:768px){\n\n  .editorial-closing-section{\n\n    padding:140px 26px 120px;\n  }\n\n  .testimonial-editorial p{\n\n    font-size:19px;\n\n    line-height:1.68;\n\n    margin-bottom:34px;\n  }\n\n  .testimonial-editorial span{\n\n    font-size:10px;\n\n    letter-spacing:3px;\n  }\n\n  .closing-line{\n\n    height:140px;\n\n    margin:90px auto 90px;\n  }\n\n  .final-editorial-cta p{\n\n    font-size:30px;\n\n    line-height:1.32;\n\n    letter-spacing:-1px;\n  }\n\n  .cinematic-light::before{\n\n    width:620px;\n    height:620px;\n  }\n\n  .cinematic-light::after{\n\n    width:480px;\n    height:480px;\n  }\n}\n\n<\/style>\n\n<!-- =========================\n     SECCI\u00d3N\n========================= -->\n\n<section class=\"editorial-closing-section\">\n\n  <!-- LUZ CINEMATOGR\u00c1FICA -->\n\n  <div class=\"cinematic-light\"><\/div>\n\n  <!-- TESTIMONIAL -->\n\n  <div class=\"testimonial-editorial\" id=\"testimonialBlock\">\n\n    <p>\n      \u201cNo tuvimos que preocuparnos por la obra.\n      Todo estuvo coordinado desde el inicio.\u201d\n    <\/p>\n\n    <span>\n      Reforma completa de cocina \u00b7 Fuengirola 2026\n    <\/span>\n\n    <!-- L\u00cdNEA -->\n\n    <div class=\"closing-line\"><\/div>\n\n  <\/div>\n\n  <!-- CTA FINAL -->\n\n  <div class=\"final-editorial-cta\" id=\"finalEditorialCTA\">\n\n    <p>\n      La diferencia est\u00e1 antes de empezar.\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n<script>\n\n\/* APARICI\u00d3N SUAVE *\/\n\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\n  const testimonial =\n    document.getElementById(\"testimonialBlock\");\n\n  const finalCTA =\n    document.getElementById(\"finalEditorialCTA\");\n\n  const observer =\n    new IntersectionObserver((entries) => {\n\n      entries.forEach(entry => {\n\n        if(entry.isIntersecting){\n\n          testimonial.classList.add(\"visible\");\n\n          finalCTA.classList.add(\"visible\");\n        }\n\n      });\n\n    }, {\n      threshold:0.18\n    });\n\n  observer.observe(testimonial);\n\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-065b82c e-con-full e-flex e-con e-parent\" data-id=\"065b82c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b854e75 elementor-widget elementor-widget-html\" data-id=\"b854e75\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GOOGLE FONT -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n.footer {\n  background: #EBEAE4;\n  padding: 90px 20px 40px;\n  text-align: center;\n  font-family: 'Instrument Sans', sans-serif;\n  color: #292929;\n}\n\n\/* L\u00cdNEA SUPERIOR *\/\n.footer::before {\n  content: \"\";\n  display: block;\n  width: 60px;\n  height: 1px;\n  background: #292929;\n  opacity: 0.2;\n  margin: 0 auto 40px;\n}\n\n\/* LOGO *\/\n.footer-logo img {\n  height: 38px;\n  margin-bottom: 18px;\n  opacity: 0.95;\n}\n\n\/* TEXTO *\/\n.footer p {\n  font-size: 14px;\n  opacity: 0.7;\n  margin-bottom: 35px;\n}\n\n\/* NAV *\/\n.footer-nav {\n  display: flex;\n  justify-content: center;\n  gap: 30px;\n  margin-bottom: 35px;\n  flex-wrap: wrap;\n}\n\n.footer-nav a {\n  font-size: 13px;\n  text-decoration: none;\n  color: #292929;\n  letter-spacing: 2px;\n  text-transform: capitalize;\n  transition: 0.3s;\n}\n\n.footer-nav a:hover {\n  opacity: 0.5;\n}\n\n\/* CONTACTO *\/\n.footer-contact {\n  font-size: 14px;\n  opacity: 0.8;\n  margin-bottom: 35px;\n  line-height: 1.7;\n}\n\n\/* LINKS *\/\n.footer-contact a{\n  color:#292929;\n  text-decoration:none;\n}\n\n\/* CITA PREVIA *\/\n.footer-note {\n  font-size: 12px;\n  opacity: 0.6;\n  margin-top: 8px;\n}\n\n\/* LEGAL *\/\n.footer-legal {\n  font-size: 12px;\n  opacity: 0.5;\n}\n\n.footer-legal a {\n  color: #292929;\n  text-decoration: none;\n}\n\n<\/style>\n\n<footer class=\"footer\">\n\n  <!-- LOGO -->\n  <div class=\"footer-logo\">\n    <img decoding=\"async\" src=\"https:\/\/nextlevelcocinas.com\/wp-content\/uploads\/2026\/04\/NextLevelLOGOweb.png\" alt=\"Next Level Cocinas\">\n  <\/div>\n\n  <!-- FRASE -->\n  <p>Dise\u00f1o y ejecuci\u00f3n de cocinas<\/p>\n\n  <!-- NAV -->\n  <div class=\"footer-nav\">\n    <a href=\"\/\">Inicio<\/a>\n    <a href=\"\/inspiracion\">Inspiraci\u00f3n<\/a>\n\n    <!-- POPUP BUTTON -->\n    <a href=\"#\" id=\"contacto-pop-up-footer\">\n      Contacto\n    <\/a>\n\n  <\/div>\n\n  <!-- CONTACTO -->\n  <div class=\"footer-contact\">\n\n    <a href=\"tel:+34647036816\">+34 647 036 816<\/a><br>\n\n    info@nextlevelcocinas.com<br>\n\n    Calle Mariscal 7, M\u00e1laga<br>\n\n    <div class=\"footer-note\">\n      Atenci\u00f3n con cita previa\n    <\/div>\n\n  <\/div>\n\n  <!-- LEGAL -->\n  <div class=\"footer-legal\">\n\n    <a href=\"\/privacy\">\n      Pol\u00edtica de privacidad\n    <\/a>\n\n    \u00b7\n\n    <a href=\"\/terms\">\n      T\u00e9rminos de uso\n    <\/a>\n\n  <\/div>\n\n<\/footer>\n\n<!-- =========================\n     POPUP LINK\n========================= -->\n\n<script>\n\ndocument.addEventListener(\"click\", function(e){\n\n  const footerBtn =\n    e.target.closest(\"#contacto-pop-up-footer\");\n\n  if(!footerBtn) return;\n\n  e.preventDefault();\n\n  const popup =\n    document.getElementById(\"custom-popup-overlay\");\n\n  if(popup){\n\n    popup.classList.add(\"active\");\n\n    document.body.style.overflow = \"hidden\";\n  }\n\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2433d17 e-flex e-con-boxed e-con e-parent\" data-id=\"2433d17\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89eb067 elementor-widget elementor-widget-html\" data-id=\"89eb067\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CTA FIJO SOLO M\u00d3VIL -->\n<div class=\"mobile-cta-bar\">\n  <a href=\"#\" id=\"contacto-pop-up-mobile\">Reserva tu cita<\/a>\n<\/div>\n\n<style>\n\/* CTA SOLO M\u00d3VIL *\/\n.mobile-cta-bar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 58px;\n  background: #EBEAE4;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  transform: translateY(-100%);\n  transition: transform 0.35s ease, opacity 0.35s ease;\n\n  z-index: 9998;\n  opacity: 0;\n}\n\n\/* TEXTO (coherente con tu header) *\/\n.mobile-cta-bar a {\n  font-family: \"Dosis\", sans-serif;\n  text-transform: uppercase;\n  font-size: 15px;\n  font-weight: 500;\n  color: #292929;\n  text-decoration: none;\n  letter-spacing: 1px;\n  position: relative;\n  padding-bottom: 6px;\n}\n\n\/* l\u00ednea sutil *\/\n.mobile-cta-bar a::after {\n  content: \"\";\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  width: 60%;\n  height: 1px;\n  background: #292929;\n  transform: translateX(-50%);\n  opacity: 0.6;\n}\n\n\/* sombra suave *\/\n.mobile-cta-bar.active {\n  transform: translateY(0);\n  opacity: 1;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n}\n\n\/* \u274c oculto en desktop *\/\n@media (min-width: 901px) {\n  .mobile-cta-bar {\n    display: none !important;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const mobileCTA = document.querySelector(\".mobile-cta-bar\");\n\n  let lastScroll = 0;\n  let scrollUpDistance = 0;\n\n  \/* \ud83d\udd27 AJUSTE AQU\u00cd *\/\n  const threshold = 150; \n  \/\/ \ud83d\udc49 cuanto M\u00c1S alto, m\u00e1s tiene que subir el usuario para ocultarlo\n  \/\/ prueba: 60 (m\u00e1s sensible) \/ 100\u2013120 (m\u00e1s s\u00f3lido)\n\n  window.addEventListener(\"scroll\", function () {\n\n    const currentScroll = window.scrollY;\n\n    if (window.innerWidth <= 900) {\n\n      if (currentScroll > lastScroll && currentScroll > 80) {\n        \/\/ bajando \u2192 mostrar CTA\n        mobileCTA.classList.add(\"active\");\n        scrollUpDistance = 0;\n\n      } else {\n        \/\/ subiendo \u2192 acumulamos scroll\n        scrollUpDistance += lastScroll - currentScroll;\n\n        if (scrollUpDistance > threshold) {\n          mobileCTA.classList.remove(\"active\");\n        }\n      }\n\n    }\n\n    lastScroll = currentScroll;\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<div class=\"elementor-element elementor-element-633b338 e-flex e-con-boxed e-con e-parent\" data-id=\"633b338\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-858b0c5 elementor-widget elementor-widget-html\" data-id=\"858b0c5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GOOGLE FONT -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Dosis:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* =========================\n   OVERLAY\n========================= *\/\n\n#custom-popup-overlay {\n\n  position: fixed;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  background:\n    rgba(0,0,0,0.12);\n\n  backdrop-filter:\n    blur(0px);\n\n  -webkit-backdrop-filter:\n    blur(0px);\n\n  z-index: 999999;\n\n  opacity: 0;\n  visibility: hidden;\n\n  transition:\n    opacity .8s ease,\n    backdrop-filter 1.2s ease,\n    background 1s ease;\n}\n\n\/* ACTIVO *\/\n\n#custom-popup-overlay.active {\n\n  opacity: 1;\n  visibility: visible;\n\n  background:\n    rgba(0,0,0,0.22);\n\n  backdrop-filter:\n    blur(8px);\n\n  -webkit-backdrop-filter:\n    blur(8px);\n}\n\n\/* =========================\n   POPUP BOX\n========================= *\/\n\n#custom-popup-box {\n\n  position: relative;\n\n  background: #EBEAE4;\n\n  border-radius: 0;\n\n  max-width: 520px;\n  width: 90%;\n\n  max-height: 90vh;\n\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  border:\n    1px solid rgba(0,0,0,0.08);\n\n  opacity: 0;\n\n  transform:\n    translateY(34px)\n    scale(.985);\n\n  transition:\n    opacity 1s cubic-bezier(.22,.61,.36,1),\n    transform 1s cubic-bezier(.22,.61,.36,1);\n\n  box-shadow:\n    0 30px 80px rgba(0,0,0,.10);\n\n  animation:\n    popupBreathing 8s ease-in-out infinite alternate;\n}\n\n\/* ACTIVO *\/\n\n#custom-popup-overlay.active #custom-popup-box {\n\n  opacity: 1;\n\n  transform:\n    translateY(0)\n    scale(1);\n}\n\n\/* =========================\n   SCROLL SUAVE\n========================= *\/\n\n#custom-popup-box::-webkit-scrollbar {\n\n  width: 6px;\n}\n\n#custom-popup-box::-webkit-scrollbar-thumb {\n\n  background: rgba(41,41,41,.18);\n}\n\n\/* =========================\n   RESPIRACI\u00d3N SUTIL\n========================= *\/\n\n@keyframes popupBreathing {\n\n  0%{\n\n    transform:\n      translateY(0)\n      scale(1);\n  }\n\n  100%{\n\n    transform:\n      translateY(0)\n      scale(1.003);\n  }\n}\n\n\/* =========================\n   CERRAR\n========================= *\/\n\n#custom-popup-close {\n\n  position: absolute;\n\n  top: 14px;\n  right: 18px;\n\n  font-size: 20px;\n\n  cursor: pointer;\n\n  border: none;\n  background: none;\n\n  color: rgba(41,41,41,.72);\n\n  transition:\n    opacity .3s ease,\n    transform .3s ease;\n\n  z-index: 20;\n}\n\n#custom-popup-close:hover {\n\n  opacity: .6;\n\n  transform: rotate(90deg);\n}\n\n\/* =========================\n   FORM CONTAINER\n========================= *\/\n\n.custom-form-container {\n\n  position: relative;\n\n  font-family: 'Dosis', sans-serif;\n\n  color: #292929;\n\n  font-size: 15px;\n\n  max-width: 420px;\n\n  padding:\n    52px 40px 30px;\n\n  margin: auto;\n\n  box-sizing: border-box;\n}\n\n\/* =========================\n   INTRO EDITORIAL\n========================= *\/\n\n.popup-intro {\n\n  opacity: 0;\n\n  transform: translateY(14px);\n\n  animation:\n    introReveal 1.6s ease forwards;\n\n  animation-delay: .35s;\n}\n\n\/* TITULAR *\/\n\n.form-title {\n\n  font-size: 24px;\n\n  line-height: 1.25;\n\n  letter-spacing: -.3px;\n\n  font-weight: 300;\n\n  margin-bottom: 16px;\n\n  color: rgba(41,41,41,.94);\n}\n\n\/* TEXTO *\/\n\n.popup-intro p {\n\n  font-size: 15px;\n\n  line-height: 1.6;\n\n  color: rgba(41,41,41,.62);\n\n  margin: 0 0 28px;\n}\n\n\/* =========================\n   FORMULARIO\n========================= *\/\n\n#contact-form-popup {\n\n  opacity: 0;\n\n  transform: translateY(18px);\n\n  animation:\n    introReveal 1.6s ease forwards;\n\n  animation-delay: .8s;\n}\n\n\/* =========================\n   LABELS\n========================= *\/\n\n.custom-form-container label {\n\n  font-weight: 400;\n\n  font-size: 11px;\n\n  letter-spacing: 1.8px;\n\n  text-transform: uppercase;\n\n  margin-bottom: 6px;\n\n  display: block;\n\n  color: rgba(41,41,41,.72);\n}\n\n\/* =========================\n   INPUTS\n========================= *\/\n\n.custom-form-container input,\n.custom-form-container select {\n\n  width: 100%;\n\n  padding: 10px 2px;\n\n  font-size: 15px;\n\n  border: none;\n\n  border-bottom:\n    1px solid rgba(41,41,41,.24);\n\n  background: transparent;\n\n  margin-bottom: 22px;\n\n  font-family: 'Dosis', sans-serif;\n\n  transition:\n    border-color .4s ease,\n    transform .4s ease;\n\n  box-sizing: border-box;\n}\n\n\/* FOCUS *\/\n\n.custom-form-container input:focus,\n.custom-form-container select:focus {\n\n  outline: none;\n\n  border-bottom:\n    1px solid rgba(41,41,41,.92);\n\n  transform:\n    translateX(2px);\n}\n\n\/* PLACEHOLDER *\/\n\n.custom-form-container input::placeholder {\n\n  color: rgba(41,41,41,.32);\n}\n\n\/* =========================\n   CHECKBOX\n========================= *\/\n\n.terms-checkbox {\n\n  margin-bottom: 20px;\n}\n\n.terms-checkbox label {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 8px;\n\n  flex-wrap: wrap;\n\n  font-size: 11px;\n\n  font-weight: 300;\n\n  line-height: 1.5;\n\n  letter-spacing: 0;\n\n  text-transform: none;\n}\n\n.terms-checkbox input {\n\n  margin: 0;\n\n  transform: scale(.9);\n\n  accent-color: #292929;\n\n  flex-shrink: 0;\n\n  width: auto;\n}\n\n\/* LINKS *\/\n\n.terms-checkbox a {\n\n  color: rgba(41,41,41,.72);\n\n  text-decoration: none;\n\n  position: relative;\n}\n\n.terms-checkbox a::after{\n\n  content:\"\";\n\n  position:absolute;\n\n  left:0;\n  bottom:-1px;\n\n  width:100%;\n  height:1px;\n\n  background:rgba(41,41,41,.22);\n}\n\n\/* =========================\n   BOT\u00d3N\n========================= *\/\n\n.custom-submit-btn {\n\n  width: 100%;\n\n  background: transparent;\n\n  color: #292929;\n\n  border:\n    1px solid rgba(41,41,41,.84);\n\n  padding: 12px;\n\n  font-size: 11px;\n\n  letter-spacing: 3px;\n\n  text-transform: uppercase;\n\n  cursor: pointer;\n\n  transition:\n    background .45s ease,\n    color .45s ease,\n    letter-spacing .45s ease;\n}\n\n\/* HOVER *\/\n\n.custom-submit-btn:hover {\n\n  background: #292929;\n\n  color: #EBEAE4;\n\n  letter-spacing: 4px;\n}\n\n\/* =========================\n   SUCCESS\n========================= *\/\n\n#success-message-popup {\n\n  text-align: center;\n\n  padding-top: 10px;\n}\n\n#success-message-popup p {\n\n  font-size: 14px;\n\n  opacity: .62;\n\n  line-height: 1.6;\n}\n\n\/* =========================\n   ANIMACIONES\n========================= *\/\n\n@keyframes introReveal {\n\n  to{\n\n    opacity:1;\n\n    transform:translateY(0);\n  }\n}\n\n\/* =========================\n   TABLET\n========================= *\/\n\n@media(max-width:1024px){\n\n  #custom-popup-box {\n\n    width: 92%;\n  }\n\n  .custom-form-container {\n\n    padding:\n      44px 26px 26px;\n  }\n\n  .popup-intro p {\n\n    margin-bottom: 22px;\n  }\n\n  .custom-form-container input,\n  .custom-form-container select {\n\n    margin-bottom: 18px;\n\n    padding: 9px 2px;\n  }\n\n  .form-title {\n\n    font-size: 22px;\n  }\n}\n\n\/* =========================\n   MOBILE\n========================= *\/\n\n@media(max-width:768px){\n\n  #custom-popup-overlay {\n\n    align-items: flex-start;\n\n    overflow-y: auto;\n\n    padding: 20px 0;\n  }\n\n  #custom-popup-box {\n\n    margin: 10px 0;\n\n    max-height: none;\n  }\n\n  .custom-form-container {\n\n    padding:\n      40px 24px 24px;\n  }\n\n  .form-title {\n\n    font-size: 21px;\n\n    line-height: 1.3;\n  }\n\n  .popup-intro p {\n\n    font-size: 14px;\n\n    margin-bottom: 20px;\n  }\n}\n\n\/* =========================\n   FIX SOLO IPAD HORIZONTAL\n========================= *\/\n\n@media only screen\nand (min-device-width: 768px)\nand (max-device-width: 1366px)\nand (-webkit-min-device-pixel-ratio: 2)\nand (orientation: landscape) {\n\n  #custom-popup-overlay {\n\n    align-items: flex-start;\n\n    padding: 24px 0;\n\n    overflow-y: auto;\n  }\n\n  #custom-popup-box {\n\n    margin: 20px 0;\n\n    max-height: none;\n  }\n\n  .custom-form-container {\n\n    padding:\n      38px 28px 24px;\n  }\n\n  .custom-form-container input,\n  .custom-form-container select {\n\n    margin-bottom: 14px;\n\n    padding: 8px 2px;\n  }\n\n  .popup-intro p {\n\n    margin-bottom: 16px;\n  }\n\n  .terms-checkbox {\n\n    margin-bottom: 14px;\n  }\n}\n\n<\/style>\n\n<!-- =========================\n     POPUP\n========================= -->\n\n<div id=\"custom-popup-overlay\">\n\n  <div id=\"custom-popup-box\">\n\n    <!-- CLOSE -->\n\n    <button id=\"custom-popup-close\">&times;<\/button>\n\n    <!-- CONTENT -->\n\n    <div class=\"custom-form-container\">\n\n      <!-- INTRO -->\n\n      <div class=\"popup-intro\">\n\n        <div class=\"form-title\">\n           Cu\u00e9ntanos c\u00f3mo imaginas tu espacio.\n        <\/div>\n\n        <p>\n          Coordinaremos una primera conversaci\u00f3n contigo.\n        <\/p>\n\n      <\/div>\n\n      <!-- FORM -->\n\n      <form\n        id=\"contact-form-popup\"\n        action=\"https:\/\/api.web3forms.com\/submit\"\n        method=\"POST\"\n      >\n\n        <input\n          type=\"hidden\"\n          name=\"access_key\"\n          value=\"2cb15c77-96a9-49a8-8674-c3166d6f6aa8\"\n        >\n\n        <input\n          type=\"hidden\"\n          name=\"subject\"\n          value=\"Nueva cita desde popup\"\n        >\n\n        <input\n          type=\"hidden\"\n          name=\"from_name\"\n          value=\"Next Level Cocinas Web\"\n        >\n\n        <!-- NOMBRE -->\n\n        <label>Nombre completo *<\/label>\n\n        <input\n          type=\"text\"\n          name=\"Full Name\"\n          required\n          placeholder=\"Tu nombre\"\n        >\n\n        <!-- EMAIL -->\n\n        <label>Email *<\/label>\n\n        <input\n          type=\"email\"\n          name=\"Email\"\n          required\n          placeholder=\"Tu email\"\n        >\n\n        <!-- TEL -->\n\n        <label>Tel\u00e9fono m\u00f3vil *<\/label>\n\n        <input\n          type=\"text\"\n          name=\"Phone\"\n          required\n          placeholder=\"Tu tel\u00e9fono\"\n        >\n\n        <!-- FECHA -->\n\n        <label>\u00bfQu\u00e9 d\u00eda prefieres?<\/label>\n\n        <input\n          type=\"date\"\n          name=\"Fecha cita\"\n        >\n\n        <!-- HORARIO -->\n\n        <label>Rango horario<\/label>\n\n        <select name=\"Rango horario\">\n\n          <option value=\"\">\n            Selecciona una opci\u00f3n\n          <\/option>\n\n          <option value=\"Ma\u00f1ana\">\n            Ma\u00f1ana\n          <\/option>\n\n          <option value=\"Tarde\">\n            Tarde\n          <\/option>\n\n        <\/select>\n\n        <!-- HORA -->\n\n        <label>Hora aproximada (opcional)<\/label>\n\n        <input\n          type=\"text\"\n          name=\"Hora aproximada\"\n          placeholder=\"Ej: 10:30 o 17:00\"\n        >\n\n        <!-- TERMS -->\n\n        <div class=\"terms-checkbox\">\n\n          <label>\n\n            <input\n              type=\"checkbox\"\n              name=\"terms\"\n              id=\"terms-checkbox-popup\"\n              required\n            >\n\n            Acepto los\n\n            <a\n              href=\"https:\/\/nextlevelproyectos.es\/TERMS-OF-USE\/\"\n              target=\"_blank\"\n            >\n              T\u00e9rminos\n            <\/a>\n\n            y la\n\n            <a\n              href=\"https:\/\/nextlevelproyectos.es\/privacy\/\"\n              target=\"_blank\"\n            >\n              Pol\u00edtica de Privacidad\n            <\/a>.\n\n          <\/label>\n\n        <\/div>\n\n        <!-- BTN -->\n\n        <button\n          type=\"submit\"\n          class=\"custom-submit-btn\"\n        >\n          Solicitar cita\n        <\/button>\n\n      <\/form>\n\n      <!-- SUCCESS -->\n\n      <div\n        id=\"success-message-popup\"\n        style=\"display:none;\"\n      >\n\n        <div class=\"form-title\">\n          Muchas gracias\n        <\/div>\n\n        <p>\n          Te contactaremos en breve para comenzar a pensar tu proyecto.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n  const popup =\n    document.getElementById(\"custom-popup-overlay\");\n\n  const closeBtn =\n    document.getElementById(\"custom-popup-close\");\n\n  const form =\n    document.getElementById(\"contact-form-popup\");\n\n  const submitBtn =\n    form.querySelector('.custom-submit-btn');\n\n  \/* =========================\n     ABRIR POPUP\n  ========================= *\/\n\n  function openPopup(e){\n\n    e.preventDefault();\n\n    popup.classList.add(\"active\");\n\n    document.body.style.overflow = \"hidden\";\n  }\n\n  \/* DESKTOP *\/\n\n  const desktopBtn =\n    document.getElementById(\"contacto-pop-up\");\n\n  if(desktopBtn){\n\n    desktopBtn.addEventListener(\"click\", openPopup);\n  }\n\n  \/* MOBILE CTA *\/\n\n  const mobileBtn =\n    document.getElementById(\"contacto-pop-up-mobile\");\n\n  if(mobileBtn){\n\n    mobileBtn.addEventListener(\"click\", openPopup);\n  }\n\n  \/* =========================\n     CERRAR\n  ========================= *\/\n\n  function closePopup(){\n\n    popup.classList.remove(\"active\");\n\n    document.body.style.overflow = \"\";\n  }\n\n  closeBtn.addEventListener(\"click\", closePopup);\n\n  popup.addEventListener(\"click\", function(e){\n\n    if(e.target === popup){\n\n      closePopup();\n    }\n  });\n\n  \/* ESC *\/\n\n  document.addEventListener(\"keydown\", function(e){\n\n    if(e.key === \"Escape\"){\n\n      closePopup();\n    }\n  });\n\n  \/* =========================\n     FORM\n  ========================= *\/\n\n  form.addEventListener('submit', async function(e) {\n\n    e.preventDefault();\n\n    const termsAccepted =\n      document.getElementById('terms-checkbox-popup').checked;\n\n    if (!termsAccepted) {\n\n      alert('Por favor acepta los t\u00e9rminos antes de continuar.');\n\n      return;\n    }\n\n    submitBtn.disabled = true;\n\n    submitBtn.textContent = \"Enviando...\";\n\n    const formData = new FormData(form);\n\n    try {\n\n      const response = await fetch(form.action, {\n\n        method: 'POST',\n\n        body: formData\n      });\n\n      const result = await response.json();\n\n      if (result.success) {\n\n        form.style.display = \"none\";\n\n        document.querySelector(\".popup-intro\").style.display = \"none\";\n\n        document.getElementById(\"success-message-popup\").style.display = \"block\";\n\n      } else {\n\n        throw new Error();\n      }\n\n    } catch (error) {\n\n      alert(\"Error al enviar. Int\u00e9ntalo de nuevo.\");\n\n      submitBtn.disabled = false;\n\n      submitBtn.textContent = \"Solicitar cita\";\n    }\n\n  });\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>Inicio Proyectos Inspiraci\u00f3n Nuestro equipo Reserva tu cita ES \u2304 English Espa\u00f1ol Dise\u00f1adas para vivirlas Agenda una cita Scroll scroll El plus de elegirnos. Un equipo especializado que controla dise\u00f1o, obra y montaje para que tu cocina se proyecte correctamente desde el inicio. Asesoramiento con criterio. Basados en tus gustos, elevaremos el dise\u00f1o de tu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-418","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/pages\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":2130,"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/pages\/418\/revisions"}],"predecessor-version":[{"id":4827,"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/pages\/418\/revisions\/4827"}],"wp:attachment":[{"href":"https:\/\/nextlevelcocinas.com\/en\/wp-json\/wp\/v2\/media?parent=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}