/*
Theme Name: Décor by Mayra
Theme URI: https://floulexweb.com
Author: Floulex Web
Description: A bespoke bilingual block theme for Décor by Mayra, event styling in South Florida. Built from scratch, no page builder, no plugin dependency.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mayra-decor
*/

/* ===========================================================================
   WHY THIS PALETTE, SO THAT NOBODY QUIETLY UNDOES IT

   The brief arrived as cream + Cormorant Garamond + dusty rose. DESIGN.md bans
   "cream-plus-serif-plus-terracotta" by name as a combination that became a
   default, and that brief is the same family. It is also, exactly, the house
   style of every balloon-garland business on Instagram.

   The deeper reason to move is commercial rather than stylistic: MAYRA'S
   PRODUCT IS COLOUR. Pink and blue garlands, gold dessert tables, bright
   backdrops. A strongly coloured site fights every photograph she will ever
   send. So the site is the frame: warm paper, deep ink, one restrained accent,
   and her photographs are the only saturated thing on the page.

   The accent was chosen by elimination:
     NOT dusty rose or blush  the event-decor default, and the banned family
     NOT terracotta on cream  banned by name in DESIGN.md
     NOT gold                 reads "luxury wedding package", and it fights
                              every gold dessert table she styles
     NOT navy                 what every party-rental company already uses
     NOT pink and NOT blue    a gender reveal decorator's site cannot take a
                              side. The entire point is that nobody knows yet.

   Green is the one warm-adjacent hue that is never the answer to "boy or
   girl?", so it sits under a pink garland or a blue one without looking like
   it picked. Sage is the pale ground and the accent is the deep saturated
   version: one hue, two roles.

   Every value below was measured, not chosen. All 24 pairs the page actually
   uses clear 4.5:1; the worst on the whole site is accent-on-sage at 4.73.
   An accent that moves has to be measured against every surface it can land
   on, which is why there are two of them.
   ======================================================================== */

:root {
  --paper:  var(--wp--preset--color--paper);
  --panel:  var(--wp--preset--color--panel);
  --sage:   var(--wp--preset--color--sage);
  --blush:  var(--wp--preset--color--blush);
  --ink:    var(--wp--preset--color--ink);
  --body:   var(--wp--preset--color--body);
  --muted:  var(--wp--preset--color--muted);
  --muted-ink: var(--wp--preset--color--muted-ink);
  --accent: var(--wp--preset--color--accent);
  --accent-lift: var(--wp--preset--color--accent-lift);
  --line:   var(--wp--preset--color--line);

  --display: var(--wp--preset--font-family--display);
  --text:    var(--wp--preset--font-family--text);

  --wrap:    80rem;
  --gutter:  clamp(1.25rem, 5vw, 6rem);
  --sec-pad: clamp(4.5rem, 9vw, 8.5rem);
  --arch:    999rem 999rem 1.25rem 1.25rem;

  /* One signature motion, one timing. */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.65;
  /* clip, not hidden: hidden breaks position:sticky on the header. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

/* The focus ring is designed, not inherited. On a low-contrast warm palette a
   default ring is close to invisible, and DESIGN.md has no rule for it. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.mdc-fork :focus-visible, .mdc-foot :focus-visible { outline-color: var(--accent-lift); }

/* The template-part wrapper generates no box, so the sticky header's containing
   block is the document rather than a div exactly its own height. */
.wp-block-template-part { display: contents; }

/* --- layout -------------------------------------------------------------- */

.mdc-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mdc-main { padding: 0; }
.mdc-sec  { padding-block: var(--sec-pad); }

.mdc-sec-blush { background: var(--blush); }
.mdc-sec-sage  { background: var(--sage); }

/* Two full paddings stack wherever sections abut, and it leaves a hole. The
   section above owns the gap; the one below starts at zero.

   A BAND is the exception and keeps its own top padding, because a background
   colour that begins hard against its first line reads as a mistake. That is
   what .mdc-band marks, and it is why the rule is not simply "+ .mdc-sec". */
.mdc-hero + .mdc-sec:not(.mdc-band) { padding-top: 0; }
.mdc-sec:not(.mdc-band) + .mdc-sec:not(.mdc-band) { padding-top: 0; }

.mdc-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.mdc-head h2 { margin-bottom: .6rem; }

.mdc-eyebrow {
  font-size: var(--wp--preset--font-size--micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
}
.mdc-lede { font-size: var(--wp--preset--font-size--lede); color: var(--body); max-width: 40rem; }

/* --- buttons ------------------------------------------------------------- */

.mdc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.375rem; padding-inline: 1.9rem;
  border: 1.5px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: var(--panel);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mdc-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.mdc-btn-ghost { background: transparent; color: var(--accent); }
.mdc-btn-ghost:hover { background: var(--accent); color: var(--panel); }

/* --- a fact Mayra has not given us yet ----------------------------------- */

.mdc-slot {
  display: inline;
  padding: .12em .5em;
  border: 1px dashed var(--accent);
  border-radius: .35rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  font-size: .9em;
  font-style: normal;
}
.mdc-slot::before { content: "\2026\00a0"; }

/* --- header -------------------------------------------------------------- */

.mdc-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.is-stuck .mdc-bar { box-shadow: 0 1px 18px rgba(32, 28, 26, .08); }

.mdc-bar-in {
  position: relative;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: .85rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}

.mdc-logo { display: block; text-decoration: none; margin-right: auto; }
/* The mark carries the name, so the bar is taller than a type-set logotype
   would need. That is the cost of using the whole logo and it is the right
   trade: the sprig and the flourish are what make it hers. It shrinks once the
   page is scrolled so a sticky header does not keep eating the viewport. */
.mdc-logo-mark {
  display: block; width: clamp(9.5rem, 15vw, 11.5rem); height: auto;
  transition: width .25s var(--ease);
}
.is-stuck .mdc-logo-mark { width: clamp(8rem, 11vw, 8.75rem); }
.mdc-logo-sub {
  display: block;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-top: .3rem; padding-left: .15rem;
}

/* display:contents so nav, the CTA and the language link lay out directly in
   the bar at desktop, and can all move into the phone panel together. */
.mdc-panel { display: contents; }
.mdc-nav { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.6rem); }
.mdc-nav-a {
  color: var(--ink); text-decoration: none; font-size: .9375rem;
  white-space: nowrap; padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.mdc-nav-a:hover { border-bottom-color: var(--line); }
.mdc-nav-a.is-here { border-bottom-color: var(--accent); color: var(--accent); }
.mdc-nav-cta {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: 1.15rem; border-radius: 999px;
  background: var(--accent); color: var(--panel);
  text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.mdc-nav-cta:hover { background: var(--ink); }

.mdc-lang {
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: var(--accent); text-decoration: none; white-space: nowrap;
  padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px;
}
.mdc-lang:hover { border-color: var(--accent); }

/* The disclosure. It opens on a click and from the keyboard with no script at
   all; site.js only adds Escape and click-outside, both conveniences. */
.mdc-menu { display: none; }
.mdc-menu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; font-weight: 600; color: var(--ink);
}
.mdc-menu > summary::-webkit-details-marker { display: none; }
.mdc-burger { display: grid; gap: 3px; }
.mdc-burger i { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; }

/* --- hero ---------------------------------------------------------------- */

.mdc-hero { padding-block: clamp(3rem, 6vw, 5.5rem) var(--sec-pad); }
.mdc-hero-in {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
}
.mdc-hero-text { display: flex; flex-direction: column; align-items: start; }
.mdc-hero-text h1 { margin-bottom: 1.25rem; }
.mdc-hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.mdc-hero-facts {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  font-size: .875rem; color: var(--muted);
}
/* The separator is part of the item's own inline content, not an absolutely
   positioned pseudo-element. Positioned, it orphaned onto the next line when
   the row wrapped and a phone line began with a lone middot. */
.mdc-hero-facts li + li::before { content: "\00b7"; margin-right: .5rem; color: var(--line); }

/* The arch is the signature shape. A 999rem radius is clamped by the browser to
   half the width, which is exactly a semicircular top however wide it gets. */
.mdc-arch, .mdc-hero-fig .mdc-ph { border-radius: var(--arch); }
.mdc-hero-fig { display: flex; justify-content: center; }
.mdc-hero-fig .mdc-ph { width: 100%; }

/* --- the fork: the one dark band ----------------------------------------- */

.mdc-fork { background: var(--ink); color: var(--muted-ink); }
.mdc-fork h2, .mdc-fork h3 { color: var(--paper); }
.mdc-fork h2 em { color: var(--accent-lift); }
.mdc-fork .mdc-eyebrow { color: var(--accent-lift); }
.mdc-fork .mdc-lede { color: var(--muted-ink); }

.mdc-paths {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
/* An island on a different surface restates every colour it uses. A light card
   that inherits the dark panel's values reads as a hole. */
.mdc-path {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid #4A403B; border-radius: 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
  color: var(--muted-ink);
}
.mdc-path-lit { background: var(--paper); border-color: var(--paper); color: var(--body); }
.mdc-path-lit h3 { color: var(--ink); }
.mdc-path-lit .mdc-path-kicker { color: var(--accent); }
.mdc-path-lit .mdc-path-price b { color: var(--ink); }
.mdc-path-lit .mdc-path-note { color: var(--accent); }
.mdc-path-lit .mdc-badge { background: var(--sage); color: var(--ink); }

.mdc-path-kicker {
  font-size: var(--wp--preset--font-size--micro); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-lift);
}
.mdc-badge {
  position: absolute; top: clamp(1.75rem, 3vw, 2.75rem); right: clamp(1.75rem, 3vw, 2.75rem);
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px;
  background: var(--accent-lift); color: var(--ink);
}
.mdc-path-price { display: flex; align-items: baseline; gap: .5rem; }
.mdc-path-price span { font-size: .9375rem; }
.mdc-path-price b { font-family: var(--display); font-size: clamp(2.5rem, 4.5vw, 3.75rem); font-weight: 400; color: var(--paper); line-height: 1; }
.mdc-path-note { font-size: .9375rem; font-weight: 600; color: var(--accent-lift); }
.mdc-fork-foot { margin-top: 2.25rem; }
.mdc-link-on-ink { color: var(--accent-lift); font-weight: 600; }

/* --- pricing tiers -------------------------------------------------------- */

.mdc-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.mdc-tier {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  border: 1px solid var(--line); border-radius: 1.5rem; background: var(--panel);
}
.mdc-tier-lit { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mdc-tier-for { font-size: var(--wp--preset--font-size--micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.mdc-tier-price { display: flex; align-items: baseline; gap: .5rem; }
.mdc-tier-price span { font-size: .9375rem; color: var(--muted); }
.mdc-tier-price b { font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 3.6vw, 3.25rem); color: var(--ink); line-height: 1; }
.mdc-tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .9375rem; }
.mdc-tier-list li { padding-left: 1.4rem; position: relative; }
.mdc-tier-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7rem; height: 1px; background: var(--accent); }
.mdc-tier .mdc-btn { margin-top: auto; }

/* --- the catalogue -------------------------------------------------------- */
/* Seven occasions plus one "ask me" tile makes eight, which divides cleanly by
   4, 2 and 1. Seven is prime and would leave a bare cell at every width. */

.mdc-occs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.mdc-occ {
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: var(--body);
  background: var(--panel); border: 1px solid var(--line); border-radius: 1.25rem;
  padding: .75rem .75rem 1.5rem;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.mdc-occ:hover { border-color: var(--accent); transform: translateY(-3px); }
.mdc-occ-fig { display: block; }
.mdc-occ-fig .mdc-ph { border-radius: .85rem; width: 100%; }
.mdc-occ-name { font-family: var(--display); font-size: 1.4rem; color: var(--ink); padding-inline: .6rem; line-height: 1.15; }
.mdc-occ-blurb { font-size: .875rem; color: var(--body); padding-inline: .6rem; }
.mdc-occ-ask { justify-content: center; background: var(--sage); border-color: var(--sage); padding-top: 1.5rem; }
.mdc-occ-go { padding-inline: .6rem; font-weight: 600; color: var(--accent); }

/* --- services ------------------------------------------------------------- */

.mdc-svcs { display: grid; gap: clamp(3.5rem, 7vw, 6.5rem); }
.mdc-svc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  scroll-margin-top: 7rem;
}
/* order:2 alone moved the figure into the SECOND track, which is the wide one,
   so images alternated between two sizes and the flipped text column wrapped
   more. Mirror the tracks as well, and the picture stays 5fr on every row. */
.mdc-svc-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mdc-svc-flip .mdc-svc-fig { order: 2; }
.mdc-svc-fig .mdc-ph { border-radius: 1.25rem; width: 100%; }
.mdc-svc-body { display: flex; flex-direction: column; align-items: start; gap: 1rem; }
.mdc-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.mdc-ticks li { padding-left: 1.5rem; position: relative; }
.mdc-ticks li::before { content: ""; position: absolute; left: 0; top: .58em; width: .85rem; height: 1px; background: var(--accent); }
.mdc-svc-body .mdc-btn { margin-top: .6rem; }

/* --- steps ---------------------------------------------------------------- */
/* Numbers here are real information: the order is the whole point. */

.mdc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
.mdc-step { display: grid; gap: .65rem; }
.mdc-step-n {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--display); font-size: 1.5rem; margin-bottom: .4rem;
}

/* --- add-ons and good to know -------------------------------------------- */

.mdc-two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.mdc-addons h2, .mdc-know h2 { margin-bottom: 1.5rem; }
.mdc-addon { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.mdc-addon b { white-space: nowrap; }
.mdc-know { background: var(--panel); border-radius: 1.5rem; padding: clamp(1.75rem, 3vw, 2.75rem); }
.mdc-know-item + .mdc-know-item { margin-top: 1.5rem; }
.mdc-know-item h3 { font-family: var(--text); font-size: 1.0625rem; font-weight: 700; margin-bottom: .3rem; }
.mdc-know-item p { font-size: .9375rem; }

/* --- latest work ---------------------------------------------------------- */

.mdc-latest { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.mdc-latest-fig .mdc-ph { border-radius: 1.5rem; width: 100%; }
.mdc-latest-body { display: grid; gap: 1.1rem; justify-items: start; }
.mdc-more { font-weight: 600; }
.mdc-more-wait { font-size: .9375rem; color: var(--muted); }

/* --- gallery -------------------------------------------------------------- */

.mdc-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.mdc-gal-cell { margin: 0; }
.mdc-gal-cell .mdc-ph { border-radius: 1rem; width: 100%; }
.mdc-gal-cell figcaption { font-size: .875rem; color: var(--muted); margin-top: .6rem; }

/* --- about ---------------------------------------------------------------- */
/* A portrait sits in a column beside the words. Run full bleed it is 1,400px
   tall and swallows the end of the page. */

.mdc-story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mdc-story-fig .mdc-ph { width: 100%; }
.mdc-story-body { display: grid; gap: 1.25rem; }
.mdc-verse {
  margin: .75rem 0 0; padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 2px solid var(--accent);
}
.mdc-verse p { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; color: var(--ink); }
.mdc-verse cite { display: block; margin-top: .6rem; font-style: normal; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.mdc-sign { font-family: var(--display); font-style: italic; font-size: 2rem; color: var(--accent); }

/* --- FAQ ------------------------------------------------------------------ */

.mdc-faqs { max-width: 52rem; border-top: 1px solid var(--line); }
.mdc-faq-q { border-bottom: 1px solid var(--line); }
.mdc-faq-q > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.5rem); color: var(--ink);
}
.mdc-faq-q > summary::-webkit-details-marker { display: none; }
.mdc-faq-q > summary::after {
  content: ""; flex: none; width: .7rem; height: .7rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.mdc-faq-q[open] > summary::after { transform: rotate(-135deg); }
.mdc-faq-q > p { padding: 0 0 1.4rem; max-width: 44rem; }

/* --- book ----------------------------------------------------------------- */

.mdc-book { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.mdc-contact { margin: 0 0 1rem; display: grid; gap: .7rem; }
.mdc-contact-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.mdc-contact dt { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.mdc-contact dd { margin: 0; }
.mdc-contact-note { font-size: .9375rem; color: var(--muted); margin-bottom: 1.75rem; }

/* Core's block gap never reaches a shortcode block, so the map brings its own. */
.mdc-map { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; background: var(--panel); }
.mdc-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.mdc-map-in { padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.mdc-map-lead { font-size: 1.0625rem; color: var(--ink); margin-bottom: .6rem; }
.mdc-map-sub { font-size: .875rem; color: var(--muted); }

/* --- the form ------------------------------------------------------------- */

.mdc-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.mdc-field { display: grid; gap: .45rem; margin: 0; }
.mdc-field-wide { grid-column: 1 / -1; }
.mdc-form label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.mdc-req { font-weight: 400; color: var(--muted); font-size: .78em; }
.mdc-form input[type=text], .mdc-form input[type=tel], .mdc-form input[type=date], .mdc-form select, .mdc-form textarea {
  font: inherit; color: var(--body);
  background: var(--paper); border: 1px solid var(--line); border-radius: .75rem;
  padding: .85rem .95rem; width: 100%; min-height: 3.25rem;
}
.mdc-form textarea { min-height: 7rem; resize: vertical; }
.mdc-form input:focus-visible, .mdc-form select:focus-visible, .mdc-form textarea:focus-visible { border-color: var(--accent); }
.mdc-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.mdc-form legend { padding: 0; font-size: .875rem; font-weight: 600; color: var(--ink); }
.mdc-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.mdc-radios label, .mdc-check label {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 400; font-size: .9375rem; color: var(--body);
  border: 1px solid var(--line); border-radius: .75rem; padding: .8rem .95rem; min-height: 3.25rem;
  cursor: pointer;
}
.mdc-radios label:has(:checked) { border-color: var(--accent); }
.mdc-check label { border: 0; padding: 0; min-height: 0; }
.mdc-form .mdc-btn { width: 100%; }
.mdc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mdc-note { grid-column: 1 / -1; padding: 1rem 1.15rem; border-radius: .9rem; font-size: .9375rem; margin-bottom: 1rem; }
.mdc-note-ok  { background: var(--sage); color: var(--ink); border: 1px solid var(--accent); }
.mdc-note-bad { background: var(--blush); color: var(--ink); border: 1px solid var(--line); }
.mdc-form-off { grid-column: 1 / -1; font-size: .9375rem; color: var(--muted); }

/* --- footer --------------------------------------------------------------- */

.mdc-foot { background: var(--ink); color: var(--muted-ink); padding-block: clamp(3rem, 6vw, 5rem); }
.mdc-foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: start; }
.mdc-foot-name { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--paper); }
.mdc-foot-name em { font-style: italic; color: var(--accent-lift); }
.mdc-foot-grace { font-size: .9375rem; color: var(--muted-ink); margin-top: .4rem; }
.mdc-foot-nav { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; }
.mdc-foot-nav a { color: var(--muted-ink); text-decoration: none; font-size: .9375rem; }
.mdc-foot-nav a:hover { color: var(--paper); text-decoration: underline; }
.mdc-foot-fine { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #3A322E; font-size: .8125rem; color: var(--muted-ink); }

/* --- the one signature motion: the arch rises ---------------------------- */
/* Scoped to .js so that with no script the selector never matches and the page
   is simply visible. The failsafe timer in site.js cannot rescue a blank page,
   because it is itself script. */

.js .mdc-rev { opacity: 0; transform: translateY(14px); }
.js .mdc-rev.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* The arch travels further and lands later. That is the signature, and it is
   the only thing on the site that moves differently from anything else. */
.js .mdc-hero .mdc-hero-fig { opacity: 0; transform: translateY(34px) scale(1.015); }
.js .mdc-hero.is-in .mdc-hero-fig {
  opacity: 1; transform: none;
  transition: opacity .95s var(--ease) .12s, transform .95s var(--ease) .12s;
}

@media (prefers-reduced-motion: reduce) {
  .js .mdc-rev, .js .mdc-rev.is-in,
  .js .mdc-hero .mdc-hero-fig, .js .mdc-hero.is-in .mdc-hero-fig {
    opacity: 1; transform: none; transition: none;
  }
  * { scroll-behavior: auto !important; }
}

/* --- widths --------------------------------------------------------------- */
/* The nav hand-off is measured, not guessed. See check-widths.py. */

@media (max-width: 1080px) {
  .mdc-occs, .mdc-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The hand-off is measured, not guessed, and it is measured on the SPANISH
   bar: "Servicios / Paquetes / Galería / Sobre mí / Consultar mi fecha" is the
   longer row, and it is what binds. It fits at 860 and breaks at 840, so the
   menu takes over below 880. The first guess here was 960, which served a
   hamburger to every laptop between 880 and 960 for no reason. Re-measure this
   whenever a label changes. */
@media (max-width: 879px) {
  .mdc-menu { display: block; margin-left: auto; }
  /* The nav itself has to carry display:none, not only its wrapper:
     getComputedStyle reports an element's OWN display, so a hidden parent would
     still leave check-widths believing the inline bar was laid out. */
  .mdc-panel, .mdc-nav { display: none; }
  .mdc-menu[open] ~ .mdc-panel {
    display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
    position: absolute; right: var(--gutter); top: calc(100% - .35rem);
    min-width: min(18rem, calc(100vw - 2 * var(--gutter)));
    background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
    box-shadow: 0 18px 44px rgba(32, 28, 26, .14);
    padding: .6rem; z-index: 70;
  }
  .mdc-menu[open] ~ .mdc-panel .mdc-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  .mdc-menu[open] ~ .mdc-panel .mdc-nav-a {
    padding: .8rem .85rem; border-bottom: 1px solid var(--line);
    border-radius: .5rem; border-top: 0; border-left: 0; border-right: 0;
  }
  .mdc-menu[open] ~ .mdc-panel .mdc-nav-a:last-child { border-bottom: 0; }
  .mdc-menu[open] ~ .mdc-panel .mdc-nav-cta,
  .mdc-menu[open] ~ .mdc-panel .mdc-lang { justify-content: center; text-align: center; }
  .mdc-tiers, .mdc-steps { grid-template-columns: 1fr; }
  .mdc-hero-in, .mdc-two-up, .mdc-latest, .mdc-story, .mdc-book { grid-template-columns: minmax(0, 1fr); }
  .mdc-hero-in { gap: 2.5rem; }
  .mdc-hero-fig { max-width: 26rem; margin-inline: auto; }
  .mdc-story-fig { max-width: 20rem; }
  .mdc-svc { grid-template-columns: minmax(0, 1fr); }
  .mdc-svc-flip .mdc-svc-fig { order: 0; }
  .mdc-paths { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .mdc-logo-sub { display: none; }
  .mdc-bar-in { gap: .75rem; }
  .mdc-form, .mdc-radios { grid-template-columns: minmax(0, 1fr); }
  .mdc-occs, .mdc-gal { grid-template-columns: minmax(0, 1fr); }
  .mdc-hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .mdc-hero-cta .mdc-btn { width: 100%; }
  .mdc-contact-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .mdc-badge { position: static; align-self: start; }
  .mdc-menu-word { display: none; }
}

@media (max-width: 380px) {
  .mdc-lang { padding: .45rem .55rem; font-size: .75rem; }
}

/* --- the compact call to action ------------------------------------------ */

.mdc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.mdc-cta .mdc-lede { margin-top: .6rem; }
.mdc-cta-btns { display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 620px) {
  .mdc-cta-btns { width: 100%; flex-direction: column; }
  .mdc-cta-btns .mdc-btn { width: 100%; }
}

/* --- the text-only opener on inner pages -------------------------------- */
/* Only the home page carries the arch. Repeating it put a plate captioned "the
   best setup Mayra has done" above the About copy, and a second arch on the
   same page as her portrait. */

.mdc-hero-plain { padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(2.75rem, 5.5vw, 5rem); }
.mdc-hero-plain .mdc-hero-in { grid-template-columns: minmax(0, 1fr); }
/* The measure goes on this inner element, never on .mdc-wrap, which centres
   itself and would move the whole page's left edge. */
.mdc-hero-plain .mdc-hero-text { max-width: 54rem; }

/* --- classes the audit found carrying no rule ----------------------------- */
/* A class in the markup that no stylesheet defines is usually a rename that
   missed a page, so the audit fails on it. These are real: each one does a job
   that was being left to a default. */

/* Grid children default to min-width:auto, so one long unbreakable string blows
   the track out. Both of these hold user-ish content. */
.mdc-book-side, .mdc-book-form { min-width: 0; }

/* The ground behind a photograph while it loads. A plate paints its own. */
.mdc-ph { background: var(--blush); }
.mdc-ph-plate { background: none; }

/* A paragraph that exists to hold a waiting slot gets the slot's own rhythm,
   not a body paragraph's. */
.mdc-latest-slot, .mdc-story-slot { max-width: 38rem; }

.mdc-path-body { color: inherit; }

/* No address yet, so the map panel is a labelled absence. The dashed edge says
   waiting, the same way a plate does. Filling MDC_CITY swaps in a real map and
   this class is no longer emitted. */
.mdc-map-wait { border-style: dashed; border-color: var(--accent); background: transparent; }

/* --- a real photograph in the hero --------------------------------------- */
/* The only decor photograph that exists is landscape, and every portrait crop
   of it cuts one balloon column off the arch. So when the slot holds a real
   picture it is presented as a landscape frame; the plate keeps the arch. */

.mdc-hero-fig:has(.mdc-ph:not(.mdc-ph-plate)) { align-self: center; }
.mdc-hero-fig .mdc-ph:not(.mdc-ph-plate) { border-radius: 1.5rem; }

/* --- testimonials --------------------------------------------------------- */

/* The occasions grid sets an explicit track count because there are exactly
   eight of them. This one cannot: the number of approved testimonials changes.
   auto-fit with a MAX as well as a min is what keeps two cards card-sized
   instead of stretching each one across half the page, and centring means a
   short row reads as deliberate rather than as a gap on the right. */
.mdc-reviews {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem));
  justify-content: center; gap: clamp(1rem, 2vw, 1.75rem);
}
.mdc-review {
  margin: 0; display: flex; flex-direction: column; gap: .85rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 1.25rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.mdc-review-video, .mdc-review-img {
  width: 100%; border-radius: .85rem; background: var(--ink);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.mdc-review blockquote { margin: 0; }
.mdc-review blockquote p { font-size: 1.0625rem; line-height: 1.6; }
.mdc-review blockquote p::before { content: "\201C"; }
.mdc-review blockquote p::after  { content: "\201D"; }
.mdc-review-stars { color: var(--accent); letter-spacing: .1em; font-size: .9375rem; }
.mdc-review figcaption { margin-top: auto; font-weight: 700; color: var(--ink); font-size: .9375rem; }
.mdc-review figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; }

.mdc-reviews-wait {
  background: var(--panel); border: 1px dashed var(--accent); border-radius: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem;
  display: grid; gap: 1.25rem; justify-items: start;
}
.mdc-reviews-foot { margin-top: 2rem; font-weight: 600; }

/* the star picker: radios, reversed so :checked can reach its siblings */
.mdc-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.mdc-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mdc-stars label { font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer; padding: .1rem; }
.mdc-stars input:checked ~ label,
.mdc-stars label:hover, .mdc-stars label:hover ~ label { color: var(--accent); }
.mdc-stars input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.mdc-form input[type=file] {
  font: inherit; width: 100%; padding: .85rem .95rem; min-height: 3.25rem;
  background: var(--paper); border: 1px dashed var(--line); border-radius: .75rem;
}
.mdc-help { font-size: .8125rem; font-weight: 400; color: var(--muted); }
.mdc-form-done { display: block; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 620px) { .mdc-reviews { grid-template-columns: minmax(0, 1fr); } }