/* Botanical details adapted from the supplied second demo.
   All SVG motifs in this layer are drawn for Bruma; no new external assets. */
.identity-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.page-section { position: relative; isolation: isolate; }
.page-section > .wrap { z-index: 1; }
.section-motifs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.motif { position: absolute; inline-size: clamp(100px, 15vw, 210px); block-size: clamp(140px, 20vw, 280px); color: var(--forest); opacity: .055; }
.motif-left { top: 3%; left: -3%; transform: rotate(18deg); }
.motif-right { bottom: 5%; right: -2%; transform: rotate(-18deg); }
#carta .motif-left, #ofertas .motif-left { inline-size: 140px; block-size: 140px; }
#ofertas .motif-right { opacity: .08; }
#contacto .motif { color: var(--moss); opacity: .085; }
#galeria .motif-left { top: 0; left: -4%; transform: rotate(45deg); }
.coffee-divider { position: absolute; inset: auto 0 8px; display: flex; align-items: center; justify-content: center; gap: .7rem; block-size: 22px; color: var(--selva); opacity: .45; pointer-events: none; }
.coffee-divider span { inline-size: 55px; block-size: 1px; background: currentColor; }
.coffee-divider svg { inline-size: 16px; block-size: 22px; }

/* A planted border closes the contact section and leads into the footer. */
.forest-footer { position: relative; background: #10271e; color: var(--paper); padding: 0; border: 0; }
.footer-edge { position: relative; block-size: 80px; background: var(--forest-2); color: #10271e; overflow: hidden; }
.footer-canopy { display: block; inline-size: 100%; block-size: 100%; }
.footer-cup { position: absolute; inline-size: 65px; block-size: 65px; right: max(6%, 24px); bottom: 10px; color: var(--moss); }
.footer-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: 1.75rem 2rem; align-items: start; }
.footer-intro { position: relative; padding-right: 2rem; }
.footer-brand { display: inline-block; font-family: 'Arial Black', system-ui, sans-serif; font-size: 1.3rem; color: var(--paper); line-height: 1.3; text-decoration: none; }
.footer-label { display: block; margin-top: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .17em; color: var(--moss); }
.footer-intro p { font-size: .85rem; color: #bfccbe; line-height: 1.6; max-inline-size: 27ch; margin: 1rem 0 0; }
.footer-brand-leaf { position: absolute; right: -1rem; bottom: -1rem; inline-size: 70px; block-size: 95px; color: var(--leaf); opacity: .12; transform: rotate(35deg); pointer-events: none; }
.forest-footer h2 { font-family: system-ui, sans-serif; font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; color: var(--moss); margin: 0 0 .8rem; line-height: 1.5; }
.forest-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; color: var(--paper); font-size: .85rem; font-weight: 400; }
.footer-links a, .footer-contact-link { display: inline-flex; align-items: center; min-block-size: 40px; text-decoration: none; }
.forest-footer a:hover { color: var(--sand); }
.footer-contact { display: grid; gap: .5rem; font-size: .85rem; color: #d9e0d3; }
.footer-contact h2 { margin-bottom: .3rem; }
.footer-contact-link { gap: .75rem; margin-top: .25rem; color: var(--sand); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; border-top: 1px solid rgba(169,185,164,.2); padding-block: 1rem 1.25rem; font-size: .7rem; color: #b5c3b5; }
.footer-bottom a { display: inline-flex; align-items: center; min-block-size: 40px; color: var(--paper); text-decoration: none; }
@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro p { max-inline-size: none; }
  .footer-brand-leaf { right: 10%; }
  .footer-edge { block-size: 65px; }
  .motif { opacity: .04; }
}
@media (max-width: 599px) {
  .forest-footer { padding-bottom: calc(var(--bottom-bar) + 12px); }
  .footer-main { gap: 1.5rem 1rem; padding-block: 1.25rem; }
  .footer-brand { font-size: 1.1rem; }
  .footer-intro p { margin-top: .65rem; }
  .footer-contact, .forest-footer .footer-links { font-size: .78rem; }
  .forest-footer .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { gap: .3rem; }
  .footer-bottom > span { flex-basis: 100%; }
  .footer-cup { inline-size: 48px; block-size: 48px; bottom: 5px; }
  .motif { inline-size: 100px; block-size: 140px; }
  .coffee-divider { bottom: 5px; opacity: .3; block-size: 16px; }
  .coffee-divider svg { block-size: 16px; inline-size: 12px; }
  .coffee-divider span { inline-size: 35px; }
}
@media (max-height: 550px) {
  .coffee-divider { display: none; }
  .motif { opacity: .035; }
  .footer-main { grid-template-columns: 1.2fr 1fr 1fr; gap: 1.25rem; padding-block: 1rem; }
  .footer-intro { grid-column: auto; }
  .footer-edge { block-size: 48px; }
}
/* Footer composition and decorative SVGs taken from the user-supplied second HTML. */
.forest-footer { background: transparent; padding-bottom: 0; }
.footer-edge { block-size: clamp(88px, 10vw, 140px); background: var(--forest-2); color: #14271d; }
.footer-canopy { color: #14271d; }
.footer-cup { right: max(4%, 24px); top: 5px; bottom: auto; inline-size: 64px; block-size: 56px; }
.footer-body { position: relative; background: #14271d; isolation: isolate; }
.footer-backdrop { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .4; z-index: -1; pointer-events: none; }
.footer-main { grid-template-columns: 5fr 4fr 3fr; align-items: center; padding-block: .5rem 1.5rem; gap: 2rem; }
.footer-brand-row { display: flex; align-items: center; gap: .8rem; }
.footer-emblem { display: grid; place-items: center; inline-size: 44px; block-size: 44px; flex: 0 0 44px; border-radius: 50%; color: var(--moss); border: 1px solid rgba(169,185,164,.3); background: #1b3b2b; }
.footer-emblem svg { inline-size: 32px; block-size: 32px; }
.footer-brand { font-size: 1.15rem; }
.footer-label { font-size: .65rem; letter-spacing: .13em; }
.footer-intro { padding-right: 0; }
.footer-intro p { max-inline-size: 38ch; margin-top: .75rem; font-size: .8rem; }
.forest-footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.footer-signature { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; color: #afc4af; font-size: .68rem; text-align: right; }
.footer-badge { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; border: 1px solid rgba(169,185,164,.25); padding: .5rem .75rem; background: #1b3b2b; color: #c7ebd4; font-size: .7rem; }
.footer-badge > span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--moss); }
.footer-bottom { padding-block: .35rem .5rem; }
@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-intro { grid-column: 1 / -1; }
  .forest-footer .footer-links { justify-content: flex-start; }
  .footer-signature { align-items: flex-end; }
  .footer-body { padding-bottom: calc(var(--bottom-bar) + 12px); }
}
@media (max-width: 599px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .footer-intro { grid-column: auto; }
  .footer-signature { align-items: flex-start; text-align: left; gap: .45rem; }
  .footer-edge { block-size: 80px; }
  .footer-cup { inline-size: 48px; block-size: 42px; }
  .footer-brand { font-size: 1.05rem; }
  .footer-bottom > span { flex-basis: auto; }
}
/* Hand-drawn ceramic cup: saucer rests on the canopy's 110/140 ground line. */
.footer-edge .footer-cup {
  inline-size: 96px;
  block-size: 88px;
  top: auto;
  bottom: calc(21.4286% - 8px);
  right: max(5%, 24px);
  overflow: visible;
  pointer-events: none;
}
@media (max-width: 599px) {
  .footer-edge .footer-cup {
    inline-size: 72px;
    block-size: 66px;
    bottom: calc(21.4286% - 6px);
    right: 6%;
  }
}
/* Restrained identity: small editorial marks rather than oversized decorations. */
.section-motifs .motif { inline-size: 105px; block-size: 140px; opacity: .035; }
.section-motifs .motif-left { left: 1%; top: 6%; }
.section-motifs .motif-right { right: 1.5%; bottom: 6%; }
#carta .motif-left, #ofertas .motif-left { inline-size: 80px; block-size: 80px; }
#nosotros .motif-right { inline-size: 110px; block-size: 66px; transform: rotate(-8deg); opacity: .075; }
#nosotros .story-card {
  background: #eeeddf;
  color: var(--forest);
  border: 1px solid rgba(21,61,47,.13);
  box-shadow: none;
  padding: clamp(1.25rem, 3vw, 2rem);
  min-height: 0;
  min-block-size: 260px;
  justify-content: center;
  gap: 1.5rem;
}
.story-sprig { inline-size: 76px; block-size: 46px; flex-shrink: 0; color: var(--selva); opacity: .65; }
#nosotros .story-card .eyebrow-light { color: var(--muted); font-size: .7rem; letter-spacing: .12em; }
#nosotros .story-card h3 { color: var(--forest); font-family: system-ui, sans-serif; font-weight: 650; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.3; margin-block: .75rem; max-inline-size: 22ch; }
#nosotros .story-card p { color: var(--muted); font-size: .9rem; line-height: 1.6; max-inline-size: 34ch; margin: 0; }
#nosotros .fact-list { border: 0; background: transparent; padding: 0; gap: 1rem 1.5rem; }
#nosotros .fact { padding-top: .65rem; border-top: 1px solid var(--line); }
#nosotros .fact span { font-size: .83rem; line-height: 1.5; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.section-mark { inline-size: 23px; block-size: 23px; color: var(--selva); flex-shrink: 0; opacity: .8; }
.contact-section .section-mark { color: var(--moss); }
.review-frame .wall-leaf { inline-size: 55px; block-size: 85px; top: -20px; right: -9px; opacity: .7; }
.review-frame .wall-leaf + .wall-leaf { top: auto; bottom: -16px; right: auto; left: -12px; }
@media (max-width: 599px) {
  #nosotros .story-card { min-block-size: 220px; gap: 1rem; }
  .section-motifs .motif { inline-size: 70px; block-size: 90px; opacity: .025; }
  .section-mark { inline-size: 20px; block-size: 20px; }
}
@media (max-height: 550px) {
  #nosotros .story-card { min-block-size: 0; padding: 1rem 1.25rem; gap: .5rem; }
  .story-sprig { inline-size: 50px; block-size: 30px; }
  #nosotros .story-card h3 { font-size: 1.2rem; margin-block: .5rem; }
  #nosotros .story-card p { font-size: .83rem; }
}
/* Visible botanical accents, kept at the perimeter of the content. */
.section-motifs .motif {
  inline-size: clamp(110px, 12vw, 165px);
  block-size: clamp(145px, 16vw, 210px);
  opacity: .13;
}
.section-motifs .motif-left { left: 1%; top: 5%; transform: rotate(12deg); }
.section-motifs .motif-right { right: 1%; bottom: 5%; transform: rotate(-12deg); }
#carta .motif-left, #ofertas .motif-left { inline-size: 105px; block-size: 105px; opacity: .15; }
#ofertas .motif-right { opacity: .14; }
#nosotros .motif-right { inline-size: 150px; block-size: 90px; opacity: .22; bottom: 4%; right: 3%; }
#contacto .motif { opacity: .15; }
#galeria .motif-left { left: 0; top: 3%; }
.story-sprig { inline-size: 100px; block-size: 60px; opacity: .95; }
#nosotros .story-card { border-left: 3px solid var(--leaf); }
.section-mark { inline-size: 27px; block-size: 27px; opacity: 1; }
.coffee-divider { opacity: .7; gap: .85rem; }
.coffee-divider span { inline-size: 65px; }
.coffee-divider svg { inline-size: 20px; block-size: 25px; }
.review-frame .wall-leaf { inline-size: 65px; block-size: 100px; opacity: .9; }
@media (min-width: 1500px) {
  .section-motifs .motif-left { left: calc((100vw - 1400px) / 2); }
  .section-motifs .motif-right { right: calc((100vw - 1400px) / 2); }
}
@media (max-width: 599px) {
  .section-motifs .motif { inline-size: 90px; block-size: 120px; opacity: .1; }
  .section-motifs .motif-left { left: -14px; top: 2%; }
  .section-motifs .motif-right { right: -14px; bottom: 3%; }
  #carta .motif-left, #ofertas .motif-left { inline-size: 75px; block-size: 75px; opacity: .12; }
  #nosotros .motif-right { inline-size: 110px; block-size: 66px; opacity: .18; }
  .story-sprig { inline-size: 85px; block-size: 51px; }
  .section-mark { inline-size: 24px; block-size: 24px; }
  .coffee-divider { opacity: .55; }
  .coffee-divider svg { inline-size: 15px; block-size: 19px; }
}
@media (max-height: 550px) {
  .story-sprig { inline-size: 60px; block-size: 36px; }
  .section-motifs .motif { opacity: .09; }
}
/* Each section has a distinct small set of authored motifs. */
.section-motifs .motif { inline-size: clamp(95px, 11vw, 145px); block-size: clamp(95px, 11vw, 145px); opacity: .16; }
#nosotros .motif-right { inline-size: 120px; block-size: 120px; opacity: .16; transform: rotate(-9deg); }
#carta .motif-left, #ofertas .motif-left { inline-size: 120px; block-size: 120px; }
#galeria .motif-left { transform: rotate(-8deg); }
#ubicacion .motif-right { inline-size: 135px; block-size: 170px; }
@media (max-width: 599px) {
  .section-motifs .motif, #nosotros .motif-right, #carta .motif-left, #ofertas .motif-left { inline-size: 85px; block-size: 85px; opacity: .13; }
  #ubicacion .motif-right { inline-size: 90px; block-size: 120px; }
}
/* Three accents per section: perimeter motif, heading mark, closing divider. */
.section-divider {
  position: absolute;
  inset: auto 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  block-size: 22px;
  color: var(--selva);
  opacity: .65;
  pointer-events: none;
  z-index: 0;
}
.section-divider > span { inline-size: clamp(35px, 6vw, 75px); block-size: 1px; background: currentColor; opacity: .45; }
.section-divider svg { inline-size: 54px; block-size: 27px; overflow: visible; }
.hero .section-divider, .contact-section .section-divider { color: var(--moss); opacity: .75; }
.hero .eyebrow::before { display: none; }
.hero .eyebrow .section-mark { inline-size: 38px; block-size: 25px; color: var(--sand); }
.about-eyebrow { display: inline-flex; align-items: center; gap: .65rem; }
.about-eyebrow .section-mark { inline-size: 32px; block-size: 24px; }
.section-head .section-mark { stroke-width: 1.8; inline-size: 28px; block-size: 28px; }
.section-motifs .motif-right { inline-size: clamp(100px, 11vw, 145px); block-size: clamp(100px, 11vw, 145px); right: 1%; bottom: 7%; opacity: .17; }
#carta .motif-right { transform: rotate(-8deg); }
#nosotros .story-card { gap: .75rem; }
@media (max-width: 599px) {
  .section-motifs .motif-right { inline-size: 85px; block-size: 85px; right: -5px; opacity: .13; }
  .section-divider { bottom: 4px; block-size: 16px; }
  .section-divider svg { inline-size: 40px; block-size: 20px; }
  .section-head .section-mark { inline-size: 24px; block-size: 24px; }
}
@media (max-height: 550px) {
  .section-divider { bottom: 1px; block-size: 14px; }
  .section-divider svg { inline-size: 32px; block-size: 16px; }
}
/* Lateral ornaments are separate from heading marks and dividers. */
.hero { isolation: isolate; }
.hero > .section-motifs { z-index: 1; }
.hero .section-motifs .motif { color: var(--moss); opacity: .25; }
.page-section .section-motifs .motif,
.hero .section-motifs .motif {
  inline-size: clamp(65px, 8vw, 115px);
  block-size: clamp(65px, 8vw, 115px);
  pointer-events: none;
}
/* Stagger across the six perimeter anchors, away from the middle of the layout. */
#inicio .motif-left { top: 7%; left: -28px; transform: rotate(15deg); }
#inicio .motif-right { top: auto; bottom: 8%; right: -25px; }
#nosotros .motif-left { top: auto; bottom: 9%; left: -28px; transform: rotate(20deg); }
#nosotros .motif-right { top: 7%; bottom: auto; right: -25px; }
#ofertas .motif-left { top: 8%; left: -24px; }
#ofertas .motif-right { top: auto; bottom: 11%; right: -23px; }
#carta .motif-left { top: 48%; left: -30px; transform: translateY(-50%) rotate(-10deg); }
#carta .motif-right { top: 6%; bottom: auto; right: -28px; }
#galeria .motif-left { top: 8%; left: -28px; transform: rotate(12deg); }
#galeria .motif-right { top: auto; bottom: 8%; right: -26px; }
#equipo .motif-left { top: auto; bottom: 8%; left: -28px; }
#equipo .motif-right { top: 9%; bottom: auto; right: -28px; }
#ubicacion .motif-left { top: 7%; left: -26px; }
#ubicacion .motif-right { top: 50%; bottom: auto; right: -30px; transform: translateY(-50%); }
#contacto .motif-left { top: 50%; left: -28px; transform: translateY(-50%) rotate(-12deg); }
#contacto .motif-right { top: auto; bottom: 8%; right: -28px; }
@media (min-width: 1500px) {
  .page-section .section-motifs .motif-left, .hero .section-motifs .motif-left { left: max(12px, calc((100% - 1420px) / 2)); }
  .page-section .section-motifs .motif-right, .hero .section-motifs .motif-right { right: max(12px, calc((100% - 1420px) / 2)); }
}
@media (max-width: 599px) {
  .page-section .section-motifs .motif, .hero .section-motifs .motif { inline-size: 58px; block-size: 68px; opacity: .12; }
}