@layer reset, base, components, sections, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, blockquote, figure { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
  button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

@layer base {
  :root {
    --wine: #6e262a;
    --wine-dark: #431518;
    --wine-soft: #87383d;
    --cream: #f6e8cd;
    --cream-soft: #fbf2e1;
    --paper: #fffaf0;
    --gold: #c89c55;
    --gold-soft: #e5c991;
    --ink: #2f2221;
    --muted: #756663;
    --line: rgba(110, 38, 42, 0.15);
    --line-light: rgba(255, 250, 240, 0.18);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Montserrat", Arial, sans-serif;
    --content: 1160px;
    --reading: 760px;
    --radius: 18px;
    --shadow-soft: 0 24px 70px rgba(67, 21, 24, 0.1);
    --shadow-card: 0 18px 45px rgba(40, 15, 17, 0.16);
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, blockquote { font-family: var(--serif); }
  h1, h2, h3 { color: var(--wine-dark); font-weight: 600; line-height: 1.02; text-wrap: balance; }
  h1 { font-size: clamp(3.6rem, 5.2vw, 5.5rem); letter-spacing: -0.045em; }
  h2 { font-size: clamp(3rem, 4.25vw, 4.65rem); letter-spacing: -0.04em; }
  h3 { font-size: clamp(1.75rem, 2.3vw, 2.4rem); letter-spacing: -0.025em; }
  p { text-wrap: pretty; }
  em { color: var(--wine); font-style: italic; }
  a { color: inherit; }
  [id] { scroll-margin-top: 96px; }
  :focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

  .container { width: min(calc(100% - 48px), var(--content)); margin-inline: auto; }
  .narrow { max-width: var(--reading); }
  .section { position: relative; padding: 112px 0; overflow: clip; }
  .section-heading { max-width: 790px; margin-bottom: 58px; }
  .section-heading.centered { margin-inline: auto; text-align: center; }
  .section-kicker, .eyebrow, .plan-label {
    margin-bottom: 16px;
    color: var(--wine);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .section-kicker.light { color: var(--gold-soft); }

  .skip-link {
    position: fixed;
    left: 16px;
    top: 12px;
    z-index: 200;
    padding: 10px 14px;
    background: var(--wine-dark);
    color: var(--cream);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: none; }
}

@layer components {
  .button {
    --button-sweep: rgba(67, 21, 24, 0.16);
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease;
  }
  .button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--button-sweep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .button:hover::before, .button:focus-visible::before { transform: scaleX(1); }
  .button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--gold-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease-out;
  }
  .button:hover::after, .button:focus-visible::after { transform: scaleX(1); }
  .button:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(67, 21, 24, 0.16); }
  .button:active { transform: translateY(-1px); }
  .button-primary { --button-sweep: var(--wine-dark); background: var(--wine); color: var(--paper); }
  .button-primary:hover { background: var(--wine); }
  .button-light { --button-sweep: var(--paper); background: var(--cream); color: var(--wine-dark); }
  .button-light:hover { background: var(--cream); }
  .cta-motion.cta-in { animation: cta-arrival 880ms cubic-bezier(0.22, 1, 0.36, 1) 1; }
  @keyframes cta-arrival {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 156, 85, 0); }
    42% { box-shadow: 0 0 0 9px rgba(200, 156, 85, 0.22); }
  }

  .site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 80;
    display: flex;
    width: 100%;
    height: 94px;
    align-items: center;
    justify-content: space-between;
    padding-inline: max(24px, calc((100vw - var(--content)) / 2));
  }
  .brand img, .footer img {
    width: 174px;
    height: auto;
    filter: brightness(0) saturate(100%) invert(16%) sepia(43%) saturate(2138%) hue-rotate(320deg) brightness(86%) contrast(93%);
  }
  .header-contact {
    position: relative;
    margin-right: 132px;
    color: var(--wine-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .header-contact::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 1px;
    background: var(--wine);
    transform-origin: left;
    transition: transform 220ms ease;
  }
  .header-contact:hover::after { transform: scaleX(0.55); }
  .header-seal {
    position: absolute;
    right: 24px;
    top: 2px;
    width: 104px;
    height: auto;
    opacity: 0.88;
    filter: drop-shadow(0 7px 14px rgba(110, 38, 42, 0.12));
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: seal-rotation 26s linear infinite;
  }

  .motion-decor {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
  }
  .motion-section-visible .motion-decor { clip-path: inset(0); }
  .motion-child { --motion-delay: 0ms; }
  .js-ready .motion-group .motion-child {
    opacity: 0;
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay), transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay);
    will-change: opacity, transform;
  }
  .js-ready .motion-group .motion-up { transform: translateY(26px); }
  .js-ready .motion-group .motion-left { transform: translateX(-22px); }
  .js-ready .motion-group .motion-right { transform: translateX(22px); }
  .js-ready .motion-group.is-visible .motion-child { opacity: 1; transform: none; }
  .js-ready .motion-group.is-visible .motion-child { will-change: auto; }

  @keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hero-image-in {
    from { opacity: 0.78; transform: scale(1.018); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes hero-piece-in {
    from { opacity: 0; translate: 0 16px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes seal-rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .mobile-whatsapp { display: none; }
}

@layer sections {
  .hero {
    position: relative;
    min-height: 800px;
    overflow: clip;
    background: var(--cream);
    isolation: isolate;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(246, 232, 205, 0.32) 0%, rgba(246, 232, 205, 0.1) 46%, transparent 66%);
    pointer-events: none;
  }
  .hero-media { position: absolute; inset: 0; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .hero-content {
    position: relative;
    z-index: 3;
    padding-top: 160px;
    padding-bottom: 72px;
  }
  .hero-media img { animation: hero-image-in 1100ms ease-out both; }
  .hero-content > * { max-width: 620px; animation: hero-piece-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero-content > :nth-child(1) { animation-delay: 80ms; }
  .hero-content > :nth-child(2) { animation-delay: 160ms; }
  .hero-content > :nth-child(3) { animation-delay: 250ms; }
  .hero-content > :nth-child(4) { animation-delay: 340ms; }
  .hero-content > :nth-child(5) { animation-delay: 430ms; }
  .hero-content > :nth-child(6) { animation-delay: 520ms; }
  .hero h1 {
    max-width: 580px;
    margin-bottom: 24px;
    font-size: clamp(3.25rem, 4.35vw, 4.65rem);
  }
  .hero h1 em { display: block; }
  .hero-subtitle { max-width: 575px; margin-bottom: 28px; color: #55433f; font-size: 1rem; line-height: 1.72; }
  .hero-support { margin: 13px 0 22px; color: var(--muted); font-size: 0.73rem; }
  .signature { color: var(--wine); font: 700 1.3rem/1.2 var(--serif); }
  .signature span { display: block; margin-top: 4px; color: var(--muted); font: 600 0.62rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }

  .identification { background: var(--paper); }
  .identification::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 52px;
    background: var(--gold);
  }
  .identification .section-kicker, .identification h2 { text-align: center; }
  .recognition-list {
    display: grid;
    margin: 18px 0 42px;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
  }
  .recognition-instruction { margin-top: 30px; color: var(--muted); font-size: 0.82rem; text-align: center; }
  .recognition-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 108px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 23px 28px 23px 48px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: #51423f;
    cursor: pointer;
    font: 500 0.94rem/1.65 var(--sans);
    text-align: left;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }
  .recognition-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .recognition-item:last-child { grid-column: 1 / -1; border-right: 0; }
  .recognition-item:hover, .recognition-item:focus-visible, .recognition-item[aria-pressed="true"] {
    background: rgba(246, 232, 205, 0.42);
    color: var(--wine);
    box-shadow: inset 3px 0 0 var(--wine);
  }
  .recognition-item::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 33px;
    width: 9px;
    height: 9px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  .recognition-item[aria-pressed="true"]::before { border-color: var(--wine); background: var(--wine); box-shadow: inset 0 0 0 2px var(--paper); }
  .recognition-item.is-activating { animation: recognition-select-pop 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  .recognition-item.is-activating::before { animation: recognition-dot-pop 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  @keyframes recognition-select-pop {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.018); }
  }
  @keyframes recognition-dot-pop {
    0% { transform: scale(0.72); }
    65% { transform: scale(1.28); }
    100% { transform: scale(1); }
  }
  .recognition-action {
    display: block;
    margin-top: 6px;
    color: var(--wine);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    opacity: 0;
    text-transform: uppercase;
    transform: translateY(5px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .recognition-item:hover .recognition-action,
  .recognition-item:focus-visible .recognition-action,
  .recognition-item[aria-pressed="true"] .recognition-action { opacity: 1; transform: none; }
  .section-closing {
    max-width: 690px;
    margin-inline: auto;
    color: var(--wine);
    font: 600 1.75rem/1.32 var(--serif);
    text-align: center;
  }
  .recognition-result {
    max-width: 720px;
    margin-inline: auto;
    padding: 24px 28px;
    border: 1px solid rgba(200, 156, 85, 0.58);
    border-radius: 12px;
    background: var(--cream-soft);
    color: var(--wine);
    font: 600 1.75rem/1.32 var(--serif);
    text-align: center;
    animation: recognition-result-in 320ms ease-out both;
  }
  @keyframes recognition-result-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  .avatar-voice { position: relative; padding: 105px 0; overflow: clip; background: var(--wine-dark); color: var(--cream); }
  .voice-dots { position: absolute; right: -45px; top: -80px; width: 360px; opacity: 0.11; }
  .voice-grid { position: relative; display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 90px; }
  .avatar-voice h2 { color: var(--cream); }
  .voice-copy { position: relative; padding-left: 38px; }
  .voice-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(229, 201, 145, 0.55);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
  }
  .voice-grid.is-visible .voice-copy::before { transform: scaleY(1); }
  .voice-copy blockquote { margin-bottom: 22px; color: var(--gold-soft); font-size: 1.7rem; font-style: italic; line-height: 1.25; }
  .voice-copy p { color: rgba(255, 250, 240, 0.72); }
  .voice-copy .voice-turn { margin-top: 26px; color: var(--paper); font: 600 1.55rem/1.3 var(--serif); }

  .protocol { background: var(--cream); }
  .protocol-branch { position: absolute; right: -26px; top: 44px; width: 230px; opacity: 0.25; transform: rotate(-8deg); }
  .protocol-heading em { display: block; }
  .protocol-steps { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(200, 156, 85, 0.38); }
  .protocol-steps::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 2;
    width: 1px;
    height: 100%;
    background: rgba(200, 156, 85, 0.88);
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 980ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
  }
  .protocol .motion-group.is-visible .protocol-steps::before { transform: scaleY(1); }
  .protocol-step {
    position: relative;
    min-height: 290px;
    padding: 34px 42px 34px 0;
    border-bottom: 0;
    background-image: linear-gradient(rgba(200, 156, 85, 0.55), rgba(200, 156, 85, 0.55));
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay), opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay), transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay);
  }
  .protocol .motion-group.is-visible .protocol-step { background-size: 100% 1px; }
  .protocol-step:nth-child(odd) { border-right: 1px solid rgba(200, 156, 85, 0.55); }
  .protocol-step:nth-child(even) { padding-left: 42px; }
  .protocol-step::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 26px;
    width: 38px;
    height: 1px;
    background: var(--gold);
    transition: width 220ms ease;
  }
  .protocol-step:hover::after { width: 76px; }
  .step-number {
    display: inline-grid;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(200, 156, 85, 0.52);
    border-radius: 50%;
    background: linear-gradient(to top, rgba(200, 156, 85, 0.2), rgba(200, 156, 85, 0.08));
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 0;
    color: var(--gold);
    font: 700 1.55rem/1 var(--serif);
    transform: scale(0.92);
    transition: background-size 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay), transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay);
  }
  .protocol .motion-group.is-visible .step-number { background-size: 100% 100%; transform: scale(1); }
  .protocol-step h3 { max-width: 430px; margin-bottom: 16px; font-size: 2rem; }
  .protocol-step p { max-width: 460px; color: #5d4c47; font-size: 0.9rem; }
  .protocol-closing { max-width: 680px; margin: 36px 0 27px; color: var(--wine); font: 600 1.55rem/1.35 var(--serif); }

  .practical { background: var(--paper); }
  .practical-grid { display: grid; align-items: center; grid-template-columns: 1.08fr 0.92fr; gap: 84px; }
  .practical-copy > p:not(.section-kicker):not(.section-closing) { max-width: 620px; color: var(--muted); }
  .check-list { margin: 30px 0; padding: 0; list-style: none; }
  .check-list li {
    position: relative;
    padding: 13px 0 13px 30px;
    background-image: linear-gradient(var(--line), var(--line));
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0 1px;
    color: #50413e;
    transition: background-size 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay), opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay), transform 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay);
  }
  .practical-grid.is-visible .check-list li { background-size: 100% 1px; }
  .check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
    transform: scale(0.45) rotate(-18deg);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay);
  }
  .practical-grid.is-visible .check-list li::before { transform: scale(1) rotate(0); }
  .practical .section-closing { margin: 26px 0 0; font-size: 1.35rem; text-align: left; }
  .practical-photo { position: relative; margin: 0; }
  .practical-photo::before {
    content: "";
    position: absolute;
    inset: -14px 14px 14px -14px;
    z-index: -1;
    border: 1px solid var(--gold-soft);
    border-radius: 210px 210px 18px 18px;
  }
  .practical-photo img { width: 100%; max-height: 690px; aspect-ratio: 4 / 5; border-radius: 210px 210px 18px 18px; object-fit: cover; object-position: center 28%; box-shadow: var(--shadow-soft); }
  .practical-photo img, .about-photo img, .closing figure img { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
  .practical-photo:hover img, .about-photo:hover img, .closing figure:hover img { transform: scale(1.018); }

  .about { background: var(--cream-soft); }
  .about-grid { display: grid; align-items: center; grid-template-columns: 0.88fr 1.12fr; gap: 92px; }
  .about-photo { margin: 0; }
  .about-photo img { width: 100%; max-height: 720px; aspect-ratio: 4 / 5; border-radius: var(--radius); object-fit: cover; object-position: center 20%; box-shadow: var(--shadow-soft); }
  .about-copy > p:not(.section-kicker):not(.credentials):not(.credentials-detail) { margin-bottom: 11px; color: #5f4d49; }
  .about-copy blockquote { position: relative; margin: 29px 0; padding: 4px 0 4px 25px; color: var(--wine); font-size: 1.55rem; font-style: italic; line-height: 1.32; }
  .about-copy blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay);
  }
  .about-grid.is-visible .about-copy blockquote::before { transform: scaleY(1); }
  .credentials { margin-bottom: 4px; color: var(--wine-dark); font-weight: 700; }
  .credentials-detail { margin-bottom: 26px; color: var(--muted); font-size: 0.82rem; }

  .fit { background: var(--paper); text-align: center; }
  .fit h2 { max-width: 840px; margin-inline: auto; }
  .fit-intro { color: var(--muted); }
  .fit-list { display: grid; margin: 46px 0 34px; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
  .fit-list p { padding: 30px 25px; color: var(--wine); font: 600 1.35rem/1.35 var(--serif); }
  .fit-list p:not(:last-child) { border-right: 1px solid var(--line); }
  .fit-counterpoint { max-width: 700px; margin-inline: auto; color: var(--muted); font-size: 0.86rem; }

  .plans { background: var(--wine-dark); color: var(--cream); }
  .plans-dots { position: absolute; left: -40px; top: -40px; width: 320px; opacity: 0.1; }
  .plans h2 { color: var(--cream); }
  .plan-grid { position: relative; display: grid; align-items: stretch; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .plan-card { position: relative; padding: 34px 28px; border: 1px solid var(--line-light); border-radius: 14px; background: rgba(255, 250, 240, 0.035); transition: transform 240ms ease, border-color 240ms ease, background-color 240ms ease; }
  .plan-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(229, 201, 145, 0.78);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.985);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .plan-card:hover::after, .plan-card:focus-within::after, .plan-card.featured::after { opacity: 1; transform: scale(1); }
  .plan-card:hover { transform: translateY(-6px); border-color: rgba(229, 201, 145, 0.55); }
  .plan-card.featured { border-color: var(--gold); background: var(--wine); box-shadow: var(--shadow-card); transform: translateY(-12px); }
  .plan-card.featured:hover { transform: translateY(-18px); }
  .plan-label { color: var(--gold-soft); }
  .plan-card h3 { min-height: 88px; margin-bottom: 16px; color: var(--cream); font-size: 2rem; }
  .plan-for { min-height: 115px; color: rgba(255, 250, 240, 0.8); font-size: 0.86rem; line-height: 1.65; }
  .plan-card ul { margin: 23px 0 0; padding: 0; list-style: none; }
  .plan-card li { position: relative; padding: 11px 0 11px 19px; border-top: 1px solid rgba(255, 250, 240, 0.12); color: rgba(255, 250, 240, 0.9); font-size: 0.82rem; line-height: 1.55; }
  .plan-card li::before { content: "•"; position: absolute; left: 0; color: var(--gold); }
  .plan-toggle { display: none; }
  .plans-closing { max-width: 660px; margin: 46px auto 23px; color: var(--cream); font: 600 1.42rem/1.32 var(--serif); text-align: center; }
  .plans .button { display: flex; width: fit-content; margin-inline: auto; }

  .faq { background: var(--paper); }
  .faq-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 88px; }
  .faq-heading img { width: 118px; margin-top: 34px; opacity: 0.34; }
  .accordion { border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item h3 { font-family: var(--sans); }
  .faq-item button { display: grid; width: 100%; min-height: 82px; align-items: center; padding: 20px 0; border: 0; background: linear-gradient(90deg, rgba(246, 232, 205, 0.34), transparent) no-repeat; background-position: left center; background-size: 0 100%; color: var(--wine-dark); cursor: pointer; font: 600 0.92rem/1.45 var(--sans); grid-template-columns: 1fr auto; gap: 22px; text-align: left; transition: background-size 300ms ease, color 220ms ease, padding-inline 300ms ease; }
  .faq-item button:hover, .faq-item button:focus-visible, .faq-item button[aria-expanded="true"] { background-size: 100% 100%; color: var(--wine); padding-inline: 12px; }
  .faq-item button span { color: var(--gold); font: 400 2rem/1 var(--serif); transition: transform 280ms ease, color 220ms ease; }
  .faq-item button[aria-expanded="true"] span { color: var(--wine); transform: rotate(45deg); }
  .faq-answer {
    display: grid;
    overflow: hidden;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-8px);
    transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .faq-answer[hidden] { display: none; }
  .faq-answer > * { min-height: 0; overflow: hidden; padding: 0 38px 25px 0; color: var(--muted); }
  .faq-answer.is-open { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .faq-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--line); gap: 24px; }
  .faq-cta p { color: var(--wine); font: 600 1.35rem/1.3 var(--serif); }

  .closing { position: relative; padding: 106px 0; overflow: clip; background: var(--wine-dark); color: var(--cream); }
  .closing-lines { position: absolute; left: -90px; bottom: 20px; width: 520px; opacity: 0.16; }
  .closing-dots { position: absolute; right: -70px; top: -60px; width: 400px; opacity: 0.09; }
  .closing-grid { position: relative; display: grid; align-items: center; grid-template-columns: 1.1fr 0.9fr; gap: 82px; }
  .closing h2 { margin-bottom: 24px; color: var(--cream); }
  .closing h2 em { color: var(--gold-soft); }
  .closing p { margin-bottom: 12px; color: rgba(255, 250, 240, 0.76); }
  .closing .button { margin-top: 14px; }
  .closing figure { margin: 0; }
  .closing figure img { width: 100%; max-height: 690px; aspect-ratio: 4 / 5; border: 1px solid rgba(229, 201, 145, 0.3); border-radius: 210px 210px 14px 14px; object-fit: cover; }
  .closing-support { font-size: 0.7rem; }

  .footer { padding: 38px 0 92px; background: var(--cream); color: var(--muted); }
  .footer-inner { display: grid; align-items: center; grid-template-columns: auto 1fr auto auto; gap: 28px; }
  .footer img { width: 145px; }
  .footer p, .footer a { font-size: 0.7rem; }
  .footer a { color: var(--wine); font-weight: 700; text-decoration: none; }
}

@layer responsive {
  @media (max-width: 1020px) {
    .section { padding: 88px 0; }
    .hero { min-height: 740px; }
    .hero::after { background: linear-gradient(90deg, rgba(246, 232, 205, 0.44) 0%, rgba(246, 232, 205, 0.1) 60%, transparent 84%); }
    .hero-media img { object-position: 70% top; }
    .hero-content { padding-top: 145px; }
    .hero-content > * { max-width: 52%; }
    .hero h1 { font-size: clamp(2.8rem, 5.2vw, 4rem); }
    .hero-subtitle { max-width: 48%; }
    .hero-support { max-width: 340px; }
    .practical-grid, .about-grid, .closing-grid { gap: 52px; }
    .plan-grid { grid-template-columns: 1fr; max-width: 690px; margin-inline: auto; }
    .plan-card.featured { order: -1; transform: none; }
    .plan-card.featured:hover { transform: translateY(-6px); }
    .plan-card h3, .plan-for { min-height: auto; }
    .faq-grid { gap: 50px; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .header-contact { margin-right: 108px; }
    .header-seal { right: 18px; width: 88px; }
  }

  @media (max-width: 700px) {
    body { padding-bottom: 74px; font-size: 15px; }
    .container { width: min(calc(100% - 52px), var(--content)); }
    .section { padding: 70px 0; }
    h2 { font-size: clamp(2.35rem, 10vw, 3.2rem); }
    h3 { font-size: 1.7rem; }
    .site-header { height: 78px; padding-inline: 18px; }
    .brand img { width: 138px; }
    .header-contact { display: none; }
    .header-seal { left: auto; right: 18px; top: 7px; width: 64px; margin-left: 0; opacity: 0.86; }

    .hero {
      width: 100%;
      min-height: 0;
      aspect-ratio: 864 / 1821;
    }
    .hero::after {
      background: linear-gradient(180deg, rgba(246, 232, 205, 0.34) 0%, rgba(246, 232, 205, 0.12) 44%, transparent 70%);
    }
    .hero-media { position: absolute; inset: 0; }
    .hero-media img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
    .hero-content {
      position: absolute;
      top: 0;
      right: 26px;
      bottom: 0;
      left: 26px;
      z-index: 4;
      width: auto;
      margin: 0;
      padding-top: 108px;
      padding-bottom: 22px;
      opacity: 1;
      visibility: visible;
    }
    .hero-content > * { max-width: 305px; }
    .hero .eyebrow { margin-bottom: 12px; font-size: 0.64rem; }
    .hero h1 {
      max-width: 305px;
      margin-bottom: 16px;
      font-size: clamp(1.9rem, 8.3vw, 2.12rem);
      line-height: 1.01;
    }
    .hero h1 em { display: inline; }
    .hero-subtitle {
      max-width: 205px;
      margin-bottom: 14px;
      color: #44322f;
      font-size: 0.79rem;
      font-weight: 500;
      line-height: 1.55;
    }
    .hero .button { width: 188px; min-height: 47px; padding: 11px 12px; font-size: 0.61rem; }
    .hero-support { max-width: 188px; margin: 10px 0 14px; color: #574541; font-size: 0.59rem; line-height: 1.48; }
    .signature { max-width: 188px; font-size: 1rem; }
    .signature span { font-size: 0.56rem; }

    .recognition-list, .voice-grid, .practical-grid, .about-grid, .fit-list, .faq-grid, .closing-grid { grid-template-columns: 1fr; }
    .js-ready .motion-group .motion-left, .js-ready .motion-group .motion-right { transform: translateY(22px); }
    .js-ready .motion-group.is-visible .motion-left, .js-ready .motion-group.is-visible .motion-right { transform: none; }
    .recognition-list { margin-top: 38px; }
    .recognition-item { min-height: 0; padding-block: 20px; }
    .recognition-item:nth-child(odd) { border-right: 0; }
    .recognition-item:last-child { grid-column: auto; }
    .section-closing, .recognition-result { font-size: 1.45rem; }

    .avatar-voice { padding: 70px 0; }
    .voice-grid { gap: 34px; }
    .voice-copy { position: relative; padding: 28px 0 0; border: 0; }
    .voice-copy::before { left: 0; top: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; }
    .voice-grid.is-visible .voice-copy::before { transform: scaleX(1); }
    .voice-copy blockquote { font-size: 1.45rem; }

    .protocol-branch { width: 140px; opacity: 0.14; }
    .protocol-steps { display: block; padding-left: 20px; border: 0; }
    .protocol-steps::before { left: 0; top: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; }
    .protocol .motion-group.is-visible .protocol-steps::before { transform: scaleY(1); }
    .protocol-steps::after { display: none; }
    .protocol-step, .protocol-step:nth-child(even) { min-height: 0; padding: 18px 0 28px 25px; border-right: 0; }
    .protocol-step::after { display: none; }
    .protocol-step h3 { font-size: 1.7rem; }
    .step-number { margin-bottom: 10px; }

    .practical-grid, .about-grid { gap: 42px; }
    .practical-photo { order: -1; max-width: 300px; margin-inline: auto; }
    .practical-photo::before { border-radius: 140px 140px 14px 14px; }
    .practical-photo img, .closing figure img { max-height: 520px; border-radius: 140px 140px 14px 14px; }
    .practical .section-closing { font-size: 1.25rem; }
    .about-photo { max-width: 310px; margin-inline: auto; }
    .about-photo img { max-height: 540px; }
    .about-copy blockquote { font-size: 1.35rem; }

    .fit-list { margin: 36px 0 28px; }
    .fit-list p { padding: 23px 10px; }
    .fit-list p:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }

    .plans { padding-bottom: 76px; }
    .plan-grid { gap: 14px; }
    .plan-card { padding: 27px 23px; }
    .plan-card.featured { order: -1; }
    .plan-card ul { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height 420ms ease, opacity 260ms ease, margin-top 260ms ease; }
    .plan-card.is-expanded ul { max-height: 900px; margin-top: 21px; opacity: 1; }
    .plan-toggle {
      display: flex;
      width: 100%;
      min-height: 46px;
      align-items: center;
      justify-content: space-between;
      margin-top: 22px;
      padding: 10px 0;
      border: 0;
      border-top: 1px solid rgba(255, 250, 240, 0.15);
      background: transparent;
      color: var(--gold-soft);
      cursor: pointer;
      font: 700 0.64rem/1.4 var(--sans);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .plan-toggle span { font: 400 1.6rem/1 var(--serif); transition: transform 180ms ease; }
    .plan-card.is-expanded .plan-toggle span { transform: rotate(45deg); }
    .plans .button { width: 100%; }

    .faq-heading img { display: none; }
    .faq-grid { gap: 22px; }
    .faq-item button { min-height: 76px; }
    .faq-cta { align-items: stretch; flex-direction: column; }
    .faq-cta .button { width: 100%; }

    .closing { padding: 74px 0; }
    .closing-grid { gap: 38px; }
    .closing figure { order: -1; max-width: 300px; margin-inline: auto; }
    .closing .button { width: 100%; }

    .footer { padding-bottom: 36px; }
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer img { margin-inline: auto; }

    .mobile-whatsapp {
      position: fixed;
      right: 12px;
      bottom: max(10px, env(safe-area-inset-bottom));
      left: 12px;
      z-index: 90;
      display: flex;
      min-height: 54px;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      background: var(--wine);
      box-shadow: 0 12px 32px rgba(67, 21, 24, 0.28);
      color: var(--paper);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
      transform: translateY(140%);
      transition: transform 240ms ease;
    }
    .mobile-whatsapp.visible { transform: none; }
  }

  @media (max-width: 370px) {
    .hero-content { right: 24px; left: 24px; padding-top: 98px; }
    .hero h1 { max-width: 292px; font-size: 1.84rem; }
    .hero-subtitle { max-width: 190px; width: auto; }
    .hero .button, .hero-support { max-width: 182px; width: 182px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .header-seal, .hero-content > *, .hero-media img { animation: none !important; }
    .motion-child, .js-ready .motion-group .motion-child { opacity: 1 !important; transform: none !important; }
    .motion-mask img, .js-ready .motion-mask img { clip-path: none !important; }
  }
}