.elementor-kit-102{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-2423ad4:#121212;--e-global-color-ce2ee54:#0099FF;--e-global-color-7f1cf68:#FFFFFF;--e-global-color-4e4d222:#F7F7F7;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-102 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- =========================
BLOQUE 00 (GLOBAL) - Tailwind + Fuentes + Estilos + Fix iPhone
Pegar SOLO 1 vez (ideal al inicio)
========================= -->

<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">

<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      extend: {
        colors: {
          "primary": "#D0B8B3",
          "primary-hover": "#BA9F9A",
          "background-light": "#FDFCFB",
          "background-subtle": "#F4F1EE",
          "text-main": "#3A2E2A",
          "text-muted": "#8A817C",
          "accent-stone": "#E8E4E1",
          "whatsapp": "#25D366"
        },
        fontFamily: {
          "display": ["Playfair Display", "serif"],
          "body": ["Manrope", "sans-serif"]
        },
        borderRadius: { "DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "9999px" },
      },
    },
  }
</script>

<style type="text/tailwindcss">
  @layer base {
    html, body { @apply bg-background-light text-text-main font-body antialiased; }
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }
    a, button { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 2px solid rgba(208,184,179,0.9); outline-offset: 3px; }
  }

  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  }

  .safe-x { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
  .safe-top { padding-top: max(1rem, env(safe-area-inset-top)); }
  .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

  .masonry-grid { column-count: 1; column-gap: 1.5rem; }
  @media (min-width: 640px) { .masonry-grid { column-count: 2; } }
  @media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
  .masonry-item { break-inside: avoid; margin-bottom: 1.5rem; }

  details[open] summary ~ * { animation: slideDown 0.35s ease-out; }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
</style>

<script>
  (function setVh() {
    function updateVh(){
      document.documentElement.style.setProperty('--vh', (window.innerHeight * 0.01) + 'px');
    }
    updateVh();
    window.addEventListener('resize', updateVh);
  })();
</script>/* End custom CSS */