@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Oooh Baby';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oooh-baby-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
}

@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-400.woff2') format('woff2');
}

:root {
  --paper: #fbf5eb;
  --wine: #711d28;
  --gold: #bc8241;
  --ink: #252325;
  --sans: Montserrat, Arial, sans-serif;
  --script: 'Oooh Baby', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }
figure, h1, h2, p { margin: 0; }
svg { display: block; }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.svg-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawn-heart { fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 50; background: var(--paper); padding: 12px 20px; border: 1px solid var(--wine); }
.skip-link:focus { top: 12px; }

/* A fluid page, with an independent illustrated hero, never a scaled screenshot. */
.site { position: relative; overflow: clip; isolation: isolate; background-image: url('../imagenes/textura-papel.svg'); }
.site-header { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 8px 3.05% 0; }
.brand { flex: 0 0 auto; width: clamp(228px, 25vw, 314px); }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; gap: clamp(23px, 2.75vw, 46px); padding-bottom: 9px; }
.main-nav > a:not(.button), .services-menu > summary { font-size: clamp(10px, .98vw, 12px); font-weight: 500; letter-spacing: .065em; text-transform: uppercase; }
.main-nav > a:not(.button) { padding: 12px 0; }
.main-nav > a:not(.button):hover { color: var(--wine); }
.services-menu { position: relative; }
.services-menu > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 12px 0; }
.services-menu > summary::-webkit-details-marker { display: none; }
.services-menu > summary .icon { width: 14px; height: 14px; transition: transform .2s; }
.services-menu[open] > summary .icon { transform: rotate(180deg); }
.services-dropdown { position: absolute; top: 100%; left: -22px; min-width: 215px; padding: 10px; border: 1px solid #b6804140; border-radius: 12px; background: var(--paper); box-shadow: 0 10px 24px #51171c12; }
.services-dropdown a { display: block; font-size: 12px; padding: 12px; border-radius: 6px; }
.services-dropdown a:hover, .services-dropdown a:focus-visible { color: var(--wine); background: #eed8be70; }
.menu-toggle { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 42px; padding: 12px 24px; border: 1px solid transparent; border-radius: 40px; font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 1.35; letter-spacing: .035em; text-transform: uppercase; transition: background .2s, box-shadow .2s, transform .2s; }
.button .icon { width: 17px; height: 17px; }
.button:hover { transform: translateY(-2px); box-shadow: 0 5px 13px #57251d17; }
.button-wine { color: white; background: var(--wine); }
.button-wine:hover { background: #57151e; }
.nav-cta { min-height: 40px; padding: 11px 19px; white-space: nowrap; }
.button-gold { color: white; background: linear-gradient(110deg, #bb7e39, #c89050); }
.button-gold:hover { background: #b07838; }
.button-outline { color: #191719; border-color: var(--gold); background: #fffaf140; padding: 14px 26px; }
.button-outline:hover { background: #f0dfca; }
.button-cream { background: var(--paper); color: #191719; padding: 14px 26px; }
.button-cream:hover { background: #f5e6d2; }

.hero { position: relative; height: clamp(610px, 65.234375vw, 925px); }
.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: url('../imagenes/mascara-portada.svg'); mask-image: url('../imagenes/mascara-portada.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hero-scene img { width: 100%; height: 100%; object-fit: fill; }
.hero-copy { position: absolute; z-index: 2; top: 18.1%; left: 5.5%; width: 36.5%; }
.hero-title { color: var(--wine); font-family: var(--script); font-size: clamp(68px, 7.2vw, 103px); font-weight: 400; line-height: .88; letter-spacing: -.035em; transform: rotate(-6deg); transform-origin: 30% 50%; }
.hero-title > span { display: block; white-space: nowrap; }
.headline-second { margin-top: -12px; margin-left: 39px; }
.hero-title .headline-last { display: flex; align-items: center; gap: 24px; margin-top: -4px; padding-left: 87px; font-size: 1.4em; line-height: .95; color: var(--gold); }
.headline-last .drawn-heart { width: .5em; height: .65em; margin-bottom: .1em; }
.hero-text { margin: 18px 0 0 47px; }
.hero-text p { font-size: clamp(12px, 1.26vw, 15px); font-weight: 400; line-height: 1.5; letter-spacing: .008em; }
.hero-text .button { margin-top: 20px; }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 13.6%; z-index: 1; fill: var(--paper); pointer-events: none; }
.paper-note { position: absolute; z-index: 4; right: 2.45%; bottom: -26px; width: clamp(154px, 15.85vw, 224px); padding: 22px 14px 15px; color: #33302c; background: #f8edde url('../imagenes/textura-papel.svg'); box-shadow: 3px 5px 6px #44301b2e; transform: rotate(-13deg); }
.paper-note::before { content: ''; position: absolute; top: -16px; left: 40%; width: 51px; height: 28px; background: #f2e7d7b3; transform: rotate(39deg); }
.paper-note p { text-align: center; font-family: Caveat, cursive; font-size: clamp(25px, 2.65vw, 36px); line-height: .98; }
.paper-note > .drawn-heart { width: 23px; height: 27px; color: var(--gold); margin: 5px auto 0; }

.services { position: relative; z-index: 3; padding: 4px 0 23px; }
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 83%; max-width: 1170px; margin: 0 auto; }
.service-card { position: relative; display: flex; align-items: center; flex-direction: column; padding: 0 13px; text-align: center; }
.service-card + .service-card::before { content: ''; position: absolute; left: 0; top: 37px; height: 75px; width: 1px; background: #c9976545; }
.service-icon { width: clamp(56px, 6.1vw, 76px); height: clamp(56px, 6.1vw, 76px); color: #bc7c31; transition: transform .2s; }
.service-card:hover .service-icon { transform: translateY(-3px); }
.service-card h2 { margin: 9px 0 4px; color: #151416; font-size: clamp(10px, 1.17vw, 14px); font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.service-card p { font-size: clamp(11px, 1.14vw, 13px); line-height: 1.5; }

.space { position: relative; z-index: 2; display: grid; grid-template-columns: 40% 60%; width: 100%; min-height: clamp(520px, 51.5vw, 708px); }
.watercolor-wash { position: absolute; z-index: -1; top: 0; left: -3%; width: 49%; height: 100%; fill: #f4d3b5; opacity: .4; }
.wash-stroke { fill: none; stroke: #eac39c; stroke-width: 6; stroke-dasharray: 26 6 8 5; }
.space-copy { position: relative; z-index: 3; padding: 44px 0 73px 25.4%; }
.eyebrow { margin-bottom: 10px; color: #b67831; font-size: clamp(9px, .99vw, 12px); font-weight: 600; line-height: 1.6; letter-spacing: .36em; text-transform: uppercase; }
.space-title { color: var(--wine); font-family: var(--serif); font-size: clamp(42px, 4.35vw, 61px); font-weight: 500; line-height: .94; letter-spacing: -.014em; }
.space-title > span { display: block; color: var(--gold); font-family: var(--script); font-size: 1.4em; font-weight: 400; line-height: .85; letter-spacing: -.025em; padding-top: 5px; transform: rotate(-5deg); transform-origin: 20% 50%; }
.space-description { max-width: 38ch; margin: 22px 0 12px; font-size: clamp(12px, 1.16vw, 15px); line-height: 1.5; letter-spacing: .005em; }
.space-copy .button { white-space: nowrap; }
.space-leaf { position: absolute; pointer-events: none; }
.space-leaf-left { z-index: 1; width: 77px; height: auto; left: -33px; bottom: 72px; transform: rotate(58deg); }

.collage { position: relative; z-index: 4; min-width: 0; height: 100%; }
.polaroid { position: absolute; z-index: 2; display: block; padding: 10px 10px 5px; background: #fffcf6; box-shadow: 0 3px 5px #58331f25; transition: transform .25s, box-shadow .25s; transform-origin: center center; }
.polaroid:hover, .polaroid:focus-visible { z-index: 6; box-shadow: 0 7px 16px #58331f2e; }
.polaroid figure > img { width: 100%; height: auto; aspect-ratio: 1.325; object-fit: cover; }
.polaroid figcaption { color: #23201d; padding: 8px 2px 6px; font-family: Caveat, cursive; font-size: clamp(22px, 2.3vw, 30px); font-weight: 400; line-height: 1; text-align: center; white-space: nowrap; }
.polaroid-garden { z-index: 3; top: 29px; left: 4%; width: 45.5%; transform: rotate(-8.5deg); }
.polaroid-garden:hover { transform: rotate(-6deg) translateY(-4px); }
.polaroid-room { z-index: 4; top: 23px; right: 3%; width: 45.5%; transform: rotate(8.5deg); }
.polaroid-room:hover { transform: rotate(6deg) translateY(-4px); }
.polaroid-pool { top: 51%; left: 27%; width: 51.5%; transform: rotate(5deg); }
.polaroid-pool figure > img { aspect-ratio: 1.76; }
.polaroid-pool:hover { transform: rotate(3deg) translateY(-4px); }
.collage-leaf { position: absolute; pointer-events: none; width: 12%; height: auto; z-index: 1; }
.collage-leaf-top { top: 6px; left: -2%; transform: rotate(-5deg); }
.collage-leaf-bottom { top: 62%; left: 13%; transform: rotate(-60deg) scale(1.8); }
.collage-flowers { position: absolute; z-index: 5; bottom: 4%; right: -1%; width: 17%; height: auto; pointer-events: none; }

.event-cta { position: relative; z-index: 1; isolation: isolate; min-height: clamp(274px, 27vw, 390px); margin-top: -60px; }
.paint-background { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.paint-mobile { display: none; }
.event-table { position: absolute; bottom: 0; left: 0; z-index: 2; width: 51.5%; height: auto; pointer-events: none; }
.event-content { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(72px, 7.5vw, 108px) 4.6% 80px 31%; }
.event-title { color: var(--paper); font-family: var(--serif); font-size: clamp(34px, 3.85vw, 54px); font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; }
.event-title > span { position: relative; display: block; padding-left: 28px; font-family: var(--script); font-size: 1.3em; line-height: .95; transform: rotate(-4deg); }
.event-title em { color: #e4b35e; font-style: normal; }
.event-title .drawn-heart { position: absolute; right: 2px; bottom: -39px; width: 28px; height: 38px; color: #e4b35e; }
.event-content > .button { flex: 0 0 auto; margin-top: 32px; font-size: 10px; padding-inline: 25px; white-space: nowrap; }

@media (min-width: 1450px) {
  .hero-copy { left: max(5.5%, calc((100vw - 1360px) / 2)); }
  .hero-text { margin-top: 37px; }
  .hero-title { font-size: 107px; }
  .hero-text p { font-size: 15px; }
  .space { grid-template-columns: 40% 60%; }
  .space-copy { padding-top: 69px; padding-bottom: 90px; }
  .collage { width: 100%; max-width: 950px; }
  .space-title { font-size: 61px; }
  .space-description { font-size: 15px; }
  .event-content { max-width: 1530px; margin: auto; padding-left: 32%; }
}

@media (max-width: 1000px) and (min-width: 701px) {
  .hero-copy { left: 5%; width: 39%; top: 20%; }
  .hero-title { font-size: clamp(56px, 7.2vw, 71px); }
  .hero-title .headline-last { padding-left: 68px; }
  .headline-second { margin-left: 27px; }
  .hero-text { margin-left: 24px; margin-top: 26px; }
  .hero-text p { font-size: 12px; }
  .hero-text .button { font-size: 9px; padding-inline: 17px; gap: 12px; }
  .paper-note { width: 128px; right: 1%; bottom: 2px; padding: 17px 11px 12px; }
  .paper-note p { font-size: 23px; }
  .space-copy { padding-left: 20%; padding-top: 43px; }
  .space-title { font-size: 38px; }
  .space-description { font-size: 11px; max-width: 29ch; }
  .space-copy .button { font-size: 9px; padding-inline: 16px; gap: 12px; }
  .polaroid figcaption { font-size: 21px; }
  .event-title { font-size: 32px; }
  .event-content { padding-left: 28%; padding-right: 3%; }
  .event-content > .button { padding-inline: 17px; font-size: 9px; gap: 11px; }
}

@media (max-width: 860px) {
  .site-header { align-items: flex-start; padding: 8px 24px; }
  .brand { width: 227px; }
  .main-nav { position: absolute; top: 81px; left: 24px; right: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 13px 20px; border: 1px solid #be8d5940; border-radius: 16px; background: var(--paper); box-shadow: 0 10px 24px #51171c12; }
  .js .main-nav { display: none; }
  .js .main-nav.is-open { display: flex; }
  .js .menu-toggle { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; margin-top: 11px; padding: 10px; border: 1px solid #bc82414a; border-radius: 50%; background: var(--paper); color: var(--wine); }
  .menu-toggle span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .main-nav > a:not(.button), .services-menu > summary { font-size: 12px; padding: 14px 0; }
  .services-menu > summary { justify-content: space-between; }
  .services-dropdown { position: static; min-width: 0; padding: 0 0 5px 10px; border: 0; border-radius: 0; box-shadow: none; }
  .nav-cta { margin: 9px 0 4px; }
}

@media (max-width: 700px) {
  .site-header { padding: 9px 19px; }
  .brand { width: 212px; }
  .main-nav { left: 19px; right: 19px; top: 76px; }
  .hero { height: 795px; }
  .hero-scene { top: 368px; bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .hero-scene img { height: 100%; object-fit: cover; object-position: 70% 50%; }
  .hero-copy { top: 98px; left: 0; width: 100%; padding: 0 30px 40px; }
  .hero-copy::before { content: ''; position: absolute; z-index: -1; top: -24px; bottom: 0; left: -30px; right: -30px; border-radius: 0 0 28% 12%; background: var(--paper) url('../imagenes/textura-papel.svg'); }
  .hero-title { font-size: 66px; line-height: .93; max-width: 340px; margin: 0 auto; transform: rotate(-5deg); }
  .headline-second { margin-top: 0; margin-left: 31px; }
  .hero-title .headline-last { padding-left: 95px; gap: 18px; font-size: 1.4em; }
  .hero-text { margin: 24px 0 0 20px; }
  .hero-text p { max-width: 31ch; font-size: 12px; line-height: 1.5; }
  .hero-text .button { margin-top: 16px; min-height: 42px; font-size: 10px; }
  .desktop-break { display: none; }
  .hero-wave { height: 62px; }
  .paper-note { right: 18px; bottom: -17px; width: 148px; padding: 20px 12px 12px; }
  .paper-note p { font-size: 25px; }
  .paper-note::before { width: 41px; height: 23px; }
  .services { padding: 21px 16px 22px; }
  .services-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 0; }
  .service-card { padding: 0 8px; }
  .service-card + .service-card::before { top: 26px; height: 75px; }
  .service-card:nth-child(3)::before { display: none; }
  .service-icon { width: 57px; height: 57px; }
  .service-card h2 { margin-top: 7px; font-size: 10px; letter-spacing: .075em; }
  .service-card p { font-size: 11px; }
  .space { display: block; min-height: 0; }
  .watercolor-wash { top: -11px; left: -65px; width: 470px; height: 487px; }
  .space-copy { padding: 35px 35px 20px; }
  .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .space-title { font-size: 46px; }
  .space-title > span { font-size: 1.45em; }
  .space-description { max-width: 35ch; margin-top: 25px; font-size: 12px; }
  .space-copy .button { margin-top: 3px; font-size: 10px; padding-inline: 21px; }
  .space-leaf-left { left: -40px; bottom: auto; top: 232px; }
  .collage { height: 440px; max-width: 570px; margin: 16px auto 0; }
  .polaroid { padding: 7px 7px 3px; }
  .polaroid-garden { top: 18px; left: 5%; width: 45%; }
  .polaroid-room { top: 27px; right: 4%; width: 45%; }
  .polaroid-pool { top: 201px; left: 18%; width: 65%; }
  .polaroid figcaption { padding: 7px 0 6px; font-size: clamp(14px, 4vw, 23px); }
  .polaroid-pool figcaption { font-size: 22px; }
  .collage-leaf-top { left: 0; top: -6px; width: 12%; }
  .collage-leaf-bottom { left: 4%; top: 61%; width: 12%; }
  .collage-flowers { right: -1%; width: 20%; bottom: 11%; }
  .event-cta { min-height: 430px; margin-top: -74px; }
  .paint-background { height: 100%; }
  .paint-main, .paint-background > g { display: none; }
  .paint-mobile { display: block; }
  .event-table { width: 380px; max-width: 90%; left: -38px; }
  .event-content { flex-direction: column; gap: 22px; padding: 69px 20px 166px; }
  .event-title { font-size: clamp(31px, 8.7vw, 43px); }
  .event-title > span { padding-left: 0; font-size: 1.25em; }
  .event-title .drawn-heart { right: 0; bottom: -27px; width: 22px; height: 27px; }
  .event-content > .button { margin-top: 0; min-height: 42px; font-size: 9px; padding-inline: 20px; }
}

@media (max-width: 370px) {
  .hero-title { font-size: 59px; }
  .hero-copy { padding-inline: 22px; }
  .hero-text { margin-left: 17px; }
  .hero-title .headline-last { padding-left: 79px; }
  .hero-scene { top: 350px; }
  .hero { height: 755px; }
  .space-copy { padding-inline: 27px; }
  .space-title { font-size: 43px; }
  .collage { height: 405px; }
  .polaroid-pool { top: 184px; }
}

@media (min-width: 501px) and (max-width: 700px) {
  .hero { height: 865px; }
  .hero-scene { top: 340px; }
  .hero-copy { width: 79%; padding-left: 45px; }
  .hero-title { margin-left: 0; font-size: 72px; }
  .hero-text { margin-left: 36px; }
  .collage { height: 505px; }
  .polaroid-pool { top: 252px; width: 59%; left: 24%; }
  .space-copy { padding-left: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}