/* ==========================================================================
   EL CORAZÓN DEL POSTRE — Stylesheet
   ==========================================================================
   TABLE OF CONTENTS
     01. Design tokens (colors, type, spacing)
     02. Reset & base
     03. Utilities & shared components (container, buttons, section, grid)
     04. Header / nav / language toggle
     05. Hero
     06. About
     07. Products / menu cards
     08. Why choose us
     09. Testimonials
     10. How to order (steps)
     11. FAQ accordion
     12. Contact + form
     13. Footer
     14. Responsive breakpoints
     15. Reduced motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Change these values to restyle the whole site.
   ========================================================================== */
:root {
  /* Palette — soft pinks, creams, warm neutrals */
  --cream:      #FFF9F5;   /* page background */
  --cream-alt:  #FBF1EB;   /* alternating section background */
  --blush:      #F7E5DF;   /* soft pink fills, chips */
  --blush-deep: #EFD2C9;   /* borders on pink surfaces */
  --white:      #FFFFFF;

  --rose:       #A85853;   /* primary accent (buttons, links) — WCAG AA on cream */
  --rose-dark:  #8E4744;   /* accent hover / pressed */
  --cocoa:      #5A382B;   /* headings, taken from the logo */
  --wine:       #7A2E45;   /* secondary accent, from the logo wordmark */
  --gold:       #9C6C18;   /* review stars — deep amber, AA on white */

  --text:       #3E2C25;   /* body text */
  --muted:      #776056;   /* secondary text (passes AA on cream) */
  --line:       rgba(90, 56, 43, 0.14);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale — every margin/padding on the page comes from this 4px-based
     ramp, so vertical rhythm stays consistent instead of drifting per component. */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 6rem;      /* 96px */

  /* Shape */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(90, 56, 43, 0.06);
  --shadow:    0 10px 30px rgba(90, 56, 43, 0.09);
  --shadow-lg: 0 18px 48px rgba(90, 56, 43, 0.13);

  --header-h: 140px;       /* sticky header height, used for scroll offsets
                              (two rows on mobile, one row on desktop) */
  --section-y: var(--sp-8); /* vertical section padding (6rem on desktop) */

  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--cocoa);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--sp-4); }

a { color: var(--rose-dark); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Visible focus for keyboard users everywhere */
:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anchor targets clear the sticky header */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Skip link — visible only when focused */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--cocoa);
  color: var(--white);
  padding: 0.75rem 1.35rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   03. UTILITIES & SHARED COMPONENTS
   ========================================================================== */
.container {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}
.container--narrow { width: min(760px, 100% - 2.5rem); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--cream-alt); }

.section__head {
  max-width: 620px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.section__title {
  font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.7rem);
  margin-bottom: 0.5rem;
}
.section__lede {
  color: var(--muted);
  margin: 0;
}

/* Small uppercase kicker above headings */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 var(--sp-3);
}

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--primary {
  background: var(--rose);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--rose-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn--ghost {
  background: transparent;
  color: var(--cocoa);
  border-color: var(--blush-deep);
}
.btn--ghost:hover {
  background: var(--blush);
  transform: translateY(-2px);
}
.btn--block { width: 100%; }

/* Prominent click-to-call button in the contact section */
.btn--call {
  background: var(--white);
  color: var(--cocoa);
  border-color: var(--blush-deep);
  padding: 0.85rem 1.6rem;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.btn--call:hover {
  background: var(--blush);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn--call .icon { width: 26px; height: 26px; color: var(--rose); flex: none; }
.btn__stack { display: flex; flex-direction: column; line-height: 1.25; }
.btn__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.btn__number { font-size: 1.1rem; font-weight: 700; }

/* Generic inline SVG icon defaults */
.icon { width: 18px; height: 18px; fill: currentColor; }

/* Outline-style icon (the WhatsApp glyph on the submit button) */
.icon--wa {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------- Grids -------- */
.grid { display: grid; gap: var(--sp-5); }
/* Cards cap at 380px and the row centres, so a category with only two
   products doesn't stretch into two oversized cards. */
.grid--cards   {
  grid-template-columns: repeat(auto-fit, minmax(258px, 380px));
  justify-content: center;
}
.grid--why     { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.grid--reviews { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }


/* -------- Scroll-in reveal --------
   Elements are visible by default. script.js adds .js-reveal to <html> only
   when it can actually run the observer, so with JS off (or if the script
   fails) nothing is ever left invisible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
/* Cards in a row come in one after another, capped so nothing lags far behind */
.js-reveal .reveal.is-visible:nth-child(2) { transition-delay: 0.07s; }
.js-reveal .reveal.is-visible:nth-child(3) { transition-delay: 0.14s; }
.js-reveal .reveal.is-visible:nth-child(4) { transition-delay: 0.21s; }


/* ==========================================================================
   04. HEADER / NAV / LANGUAGE TOGGLE
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Mobile: two rows — brand + hamburger, then the phone/language bar.
   The phone lives outside the collapsible nav so it is never hidden. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding-block: 0.6rem;
}
.brand       { order: 1; }
.nav-toggle  { order: 2; }
.header-actions { order: 3; }
.primary-nav { order: 4; }

/* -------- Brand -------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/* Square 256px source, cropped to the badge — object-fit never has to crop,
   and the badge carries its own ring so no extra border is needed. */
.brand__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--white);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--cocoa);
}
.brand__tagline {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 600;
}

/* -------- Mobile menu button -------- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--cocoa);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
/* Bars morph into an X when the menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------- Nav (mobile-first: collapsed panel) -------- */
.primary-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  gap: 1.1rem;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.primary-nav.is-open { display: flex; }

.primary-nav__list { display: flex; flex-direction: column; gap: 0.2rem; }
.primary-nav__list a {
  display: block;
  padding: 0.6rem 0.35rem;
  color: var(--cocoa);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.primary-nav__list a:hover { color: var(--rose-dark); background: var(--blush); }
/* Section currently in view (set by script.js) */
.primary-nav__list a.is-current { color: var(--rose-dark); }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

/* -------- Language toggle -------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  flex: none;
}
.lang-toggle__btn {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.lang-toggle__btn:hover { color: var(--cocoa); }
.lang-toggle__btn.is-active { background: var(--rose); color: var(--white); }
.lang-toggle__sep { color: var(--blush-deep); font-size: 0.85rem; }

/* -------- Header phone (always visible) -------- */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  background: var(--blush);
  border: 1px solid var(--blush-deep);
  border-radius: 999px;
  color: var(--cocoa);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.header-phone:hover { background: var(--blush-deep); transform: translateY(-1px); }
.header-phone .icon { color: var(--rose); }


/* ==========================================================================
   05. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: var(--sp-7) 4.5rem;
  background:
    radial-gradient(80% 120% at 12% 0%, var(--blush) 0%, rgba(247, 229, 223, 0) 62%),
    var(--cream);
}
.hero__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
.hero__title {
  font-size: clamp(2.1rem, 1.2rem + 4vw, 3.6rem);
  margin-bottom: 0.7rem;
}
.hero__text {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 52ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--sp-5);
}
.hero__note {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Photo grid: one wide feature image with a row of three thumbnails below */
.hero__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.hero__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
  background: var(--blush);
}
.hero__photo--big {
  grid-column: span 3;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.hero__photo:hover img { transform: scale(1.04); }


/* ==========================================================================
   06. ABOUT
   ========================================================================== */
.about__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
.about__copy p { color: var(--muted); }
.about__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-5);
}
.chip {
  padding: 0.45rem 1rem;
  background: var(--blush);
  border: 1px solid var(--blush-deep);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cocoa);
}
.about__image {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.about__image img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   07. PRODUCTS / MENU CARDS
   ========================================================================== */
.category__title {
  font-size: 1.5rem;
  margin: var(--sp-7) 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--blush-deep);
  color: var(--wine);
}
.category__title:first-of-type { margin-top: 0; }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blush);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5);
}
.card__title { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.card__text {
  font-size: 0.95rem;
  color: var(--muted);
  flex: 1;
  margin-bottom: var(--sp-4);
}
.card__price {
  margin: 0;
  font-weight: 800;
  color: var(--rose-dark);
  font-size: 1rem;
}

.products__foot {
  margin: var(--sp-7) 0 0;
  text-align: center;
  color: var(--muted);
}
.products__foot a {
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.35rem;
  border-bottom: 2px solid var(--blush-deep);
  transition: border-color 0.2s var(--ease);
}
.products__foot a:hover { border-color: var(--rose); }


/* ==========================================================================
   08. WHY CHOOSE US
   ========================================================================== */
.feature {
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: var(--sp-4);
  background: var(--blush);
  border-radius: 50%;
  color: var(--rose-dark);
}
.feature__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature__title { font-size: 1.13rem; margin-bottom: 0.4rem; }
.feature__text { font-size: 0.94rem; color: var(--muted); margin: 0; }


/* ==========================================================================
   09. TESTIMONIALS  —  CURRENTLY UNUSED
   --------------------------------------------------------------------------
   The reviews section was removed from index.html because the sample quotes
   were invented and there are no real ones yet. These styles are kept so the
   section can be restored in minutes once real customer quotes exist.
   Safe to delete entirely if you decide against ever having reviews.
   ========================================================================== */
.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.review__stars {
  color: var(--gold);
  letter-spacing: 0.14em;
  margin-bottom: 0.85rem;
  font-size: 1.05rem;
}
.review__quote {
  margin: 0 0 1.3rem;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
}
.review__author { display: flex; flex-direction: column; }
.review__name { font-weight: 700; color: var(--cocoa); }
.review__meta { font-size: 0.85rem; color: var(--muted); }


/* ==========================================================================
   10. HOW TO ORDER (steps)
   ========================================================================== */
.steps {
  display: grid;
  gap: 2.5rem var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--cream-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step__num {
  position: absolute;
  top: -20px;
  left: var(--sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--rose);
  color: var(--white);
  border: 4px solid var(--cream);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.step__title { font-size: 1.1rem; margin: 0.35rem 0 0.4rem; }
.step__text { font-size: 0.94rem; color: var(--muted); margin: 0; }

.order__cta { margin: var(--sp-7) 0 0; text-align: center; }


/* ==========================================================================
   11. FAQ ACCORDION
   ========================================================================== */
.accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__heading { margin: 0; font-size: inherit; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem var(--sp-5);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--cocoa);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.accordion__trigger:hover { background: var(--cream-alt); color: var(--rose-dark); }
.accordion__trigger[aria-expanded="true"] { color: var(--rose-dark); }

/* Chevron built from a rotated border */
.accordion__chevron {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Collapsed panels animate from 0fr to 1fr.
   visibility:hidden also removes collapsed content from the tab order. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s var(--ease), visibility 0.3s var(--ease);
}
.accordion__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
}
.accordion__content { overflow: hidden; }
.accordion__content p {
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--muted);
  font-size: 0.97rem;
}


/* ==========================================================================
   12. CONTACT + FORM
   ========================================================================== */
.contact__inner {
  display: grid;
  gap: 2.75rem;
  align-items: start;
}
.contact__lede { color: var(--muted); }

.contact__facts {
  display: grid;
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
}
.contact__facts dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.2rem;
}
.contact__facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--cocoa);
}

/* -------- Form -------- */
.contact__formwrap {
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2, 1fr);
}
.field { display: flex; flex-direction: column; grid-column: span 2; }
/* Two class selectors so this keeps winning over the `.field { span 1 }` rule
   inside the 600px breakpoint, which would otherwise override it on order. */
.field.field--full { grid-column: 1 / -1; }

.field label {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cocoa);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--cream);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: #806B61; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rose); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(168, 88, 83, 0.20);
}
/* Keep the outline for keyboard users on top of the custom focus ring */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

/* Invalid state, applied by script.js after a submit attempt */
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #B3261E; background: #FFF6F5; }
.field__error {
  margin-top: 0.35rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: #A11B14;
}
.field__hint { margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }

.form__note {
  margin: 0.9rem 0 0;
  font-size: 0.83rem;
  color: var(--muted);
  text-align: center;
}
.form__status {
  grid-column: span 2;
  margin: 0;
  padding: 0;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.form__status.is-visible {
  padding: 0.95rem 1.1rem;
  background: #EDF7EE;
  border: 1px solid #BFDCC2;
  color: #245C2C;
}
/* Fallback link shown if the browser blocks the WhatsApp window */
.form__walink {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__status.is-error.is-visible {
  background: #FDF0EF;
  border-color: #E7C0BC;
  color: #A11B14;
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--cocoa);
  color: #F3E5DE;
  padding-top: 3.5rem;
}
.footer-inner {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
}
.footer__logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: contain;
  margin-bottom: var(--sp-4);
  background: var(--white);
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: #F7EDE8;
  margin: 0;
  max-width: 28ch;
}
.footer__heading {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E7B9AC;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 1rem;
}
/* Links get real vertical room so they clear the 24px WCAG minimum; on touch
   widths they grow to a full 44px thumb target (see the touch block below). */
.footer__links { display: grid; gap: 0; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.footer__links a,
.footer__phone {
  color: #F3E5DE;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.footer__links a:hover,
.footer__phone:hover { color: #FFFFFF; text-decoration: underline; }

.footer__phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.footer__area { color: #DCC6BC; font-size: 0.93rem; margin: 0 0 1.25rem; }

.socials { display: flex; gap: 0.7rem; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(247, 237, 232, 0.28);
  border-radius: 50%;
  color: #F3E5DE;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.socials a:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--white);
  transform: translateY(-2px);
}
.socials svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icons drawn as a solid glyph rather than an outline */
.socials svg.socials__solid { fill: currentColor; stroke: none; }

.footer-bottom {
  border-top: 1px solid rgba(247, 237, 232, 0.18);
  padding-block: 1.4rem 1.8rem;
}
.footer-bottom p {
  margin: 0;
  font-size: 0.87rem;
  color: #D9C2B8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}


/* ==========================================================================
   14. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* -------- Touch layouts: give the language buttons a thumb-sized target --------
   At desktop widths these are mouse targets and stay compact. */
@media (max-width: 1159px) {
  .lang-toggle__btn {
    min-height: 44px;
    min-width: 44px;
  }
  .lang-toggle { padding: 0 0.4rem; }

  /* Everything tappable clears 44px */
  .footer__links a,
  .footer__phone { min-height: 44px; }
  .footer__phone { display: inline-flex; align-items: center; }
  .header-phone { min-height: 44px; }
  .socials a { width: 44px; height: 44px; }
}

/* -------- Narrow phones: tighten the header so nothing overflows -------- */
@media (max-width: 420px) {
  .brand__logo { width: 46px; height: 46px; }
  .brand__name { font-size: 1rem; }
  .header-phone { padding: 0.5rem 0.85rem; font-size: 0.88rem; }
  .lang-toggle { padding: 0.15rem 0.4rem; }
  .hero__grid { gap: 0.6rem; }
}

/* -------- Small tablets and up -------- */
@media (min-width: 600px) {
  .form { gap: 1.25rem; }
  .field { grid-column: span 1; }
  .contact__facts { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .contact__formwrap { padding: 2.5rem; }
}

/* -------- Tablets -------- */
@media (min-width: 820px) {
  :root { --section-y: var(--sp-9); }

  .hero__inner { grid-template-columns: 1.1fr 1fr; }
  .about__inner { grid-template-columns: 1fr 1fr; }
  .contact__inner { grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); }
  .section__head { margin-bottom: var(--sp-7); }
}

/* -------- Desktop (1160px+): single-row header, expanded nav, no hamburger -------- */
@media (min-width: 1160px) {
  :root { --header-h: 84px; }

  .nav-toggle { display: none; }

  .header-inner {
    flex-wrap: nowrap;
    min-height: var(--header-h);
  }
  .header-actions {
    order: 3;
    width: auto;
    padding-top: 0;
    border-top: 0;
    gap: 1rem;
    flex: none;
  }

  .primary-nav {
    order: 2;
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1.4rem;
    flex: 1;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  /* The header bar runs a little wider than the page content so all seven
     nav links fit on one line next to the logo and the phone button. */
  .site-header .container { width: min(1320px, 100% - 2.5rem); }

  .primary-nav__list { flex-direction: row; gap: 0.2rem; }
  .primary-nav__list a {
    padding: 0.45rem 0.55rem;
    font-size: 0.94rem;
    background: none;
    white-space: nowrap;
  }
  .primary-nav__list a:hover { background: none; }
  /* Underline that grows in on hover / for the active section */
  .primary-nav__list a {
    position: relative;
  }
  .primary-nav__list a::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.15rem;
    height: 2px;
    background: var(--rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }
  .primary-nav__list a:hover::after,
  .primary-nav__list a.is-current::after { transform: scaleX(1); }
}

/* -------- Large desktop: a little more breathing room in the nav -------- */
@media (min-width: 1440px) {
  .primary-nav { gap: 2rem; }
  .primary-nav__list a { padding-inline: 0.7rem; }
}


/* ==========================================================================
   15. REDUCED MOTION
   Honors the OS-level "reduce motion" setting.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Scroll-in reveals: show everything immediately, no fade, no movement */
  .js-reveal .reveal,
  .js-reveal .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  /* Remove movement-based hover effects entirely */
  .btn:hover,
  .card:hover,
  .feature:hover,
  .review:hover,
  .socials a:hover,
  .header-phone:hover { transform: none; }
  .card:hover .card__media img,
  .hero__photo:hover img { transform: none; }
}