/*
 * Diana Tovar — visual refinement 2.0
 * Editorial, calm and responsive design layer.
 */

:root {
    --forest-950: #142019;
    --forest-900: #1d3326;
    --forest-800: #2c4b39;
    --forest-700: #41634f;
    --forest-600: #5d7867;
    --sage-700: #697a6d;
    --sage-600: #7d8c80;
    --sage-500: #96a298;
    --sage-300: #c5cec4;
    --sage-200: #dce4da;
    --sage-100: #ebf0e9;
    --sage-50: #f4f7f3;
    --ivory-100: #f6f2ea;
    --ivory-50: #fcfbf8;
    --gold-700: #956c34;
    --gold-600: #aa7f43;
    --gold-500: #bc9153;
    --gold-300: #dec08b;
    --ink: #18221b;
    --muted: #5d6b62;
    --muted-light: #7a877e;
    --border: rgba(44, 75, 57, 0.13);
    --shadow-sm: 0 12px 34px rgba(28, 50, 37, 0.065);
    --shadow-md: 0 24px 62px rgba(28, 50, 37, 0.12);
    --shadow-lg: 0 38px 100px rgba(24, 43, 32, 0.17);
    --container: 1240px;
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
    --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-body: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --header-height: 74px;
}

html {
    scroll-padding-top: 106px;
}

body {
    background: var(--ivory-50);
    font-size: 15.5px;
    line-height: 1.68;
}

body.nav-open {
    overflow: hidden;
}

.container {
    width: min(calc(100% - 48px), var(--container));
}

.topbar {
    background: #132019;
    font-size: 11.5px;
}

.topbar__inner {
    min-height: 32px;
}

.topbar p {
    letter-spacing: 0.12em;
}

.topbar__contact {
    gap: 20px;
}

.site-header {
    background: rgba(252, 251, 248, 0.92);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.site-header.is-scrolled {
    background: rgba(252, 251, 248, 0.975);
    box-shadow: 0 12px 38px rgba(26, 45, 34, 0.075);
}

.header__inner {
    min-height: var(--header-height);
    gap: 34px;
}

.brand {
    width: 266px;
}

.main-nav {
    gap: 24px;
}

.main-nav > a:not(.btn) {
    color: var(--forest-900);
    font-size: 13.25px;
    font-weight: 650;
}

.main-nav > a:not(.btn).is-active {
    color: var(--gold-700);
}

.main-nav > a:not(.btn).is-active::after {
    transform: scaleX(1);
}

.main-nav__contact {
    display: none;
}

.btn {
    min-height: 49px;
    gap: 10px;
    padding: 12px 22px;
    font-size: 13.25px;
    box-shadow: none;
}

.btn--small {
    min-height: 42px;
    padding: 9px 18px;
    font-size: 12.5px;
}

.btn--primary {
    background: linear-gradient(135deg, #335642, #233e2f);
    box-shadow: 0 12px 28px rgba(34, 64, 47, 0.18);
}

.btn--primary:hover {
    background: linear-gradient(135deg, #294a37, #172d21);
}

.btn--ghost {
    border-color: rgba(44, 75, 57, 0.2);
    background: rgba(255, 255, 255, 0.64);
}

.eyebrow {
    gap: 11px;
    margin-bottom: 15px;
    font-size: 10.5px;
    letter-spacing: 0.19em;
}

.eyebrow > span {
    width: 30px;
}

.hero {
    position: relative;
    min-height: auto;
    display: block;
    overflow: visible;
    padding: 62px 0 0;
    background:
        radial-gradient(circle at 93% 12%, rgba(188, 145, 83, 0.11), transparent 25%),
        radial-gradient(circle at 7% 84%, rgba(125, 140, 128, 0.09), transparent 24%),
        linear-gradient(110deg, #fbf8f2 0%, #f9f8f3 48%, #eef3ed 100%);
}

.hero::before {
    top: -255px;
    right: -205px;
    width: 700px;
    height: 700px;
    border-color: rgba(188, 145, 83, 0.2);
    border-radius: 50%;
    transform: none;
}

.hero::after {
    right: auto;
    bottom: 68px;
    left: -250px;
    width: 460px;
    height: 460px;
    background: rgba(188, 145, 83, 0.055);
}

.hero__texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.23;
    background-image: radial-gradient(rgba(44, 75, 57, 0.16) 0.7px, transparent 0.7px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent 0 35%, #000 78%, transparent);
}

.hero__orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.hero__orb--one {
    top: 90px;
    left: 44%;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(188, 145, 83, 0.2);
}

.hero__orb--two {
    right: 39%;
    bottom: 140px;
    width: 68px;
    height: 68px;
    background: rgba(125, 140, 128, 0.12);
}

.hero__grid {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr);
    gap: clamp(54px, 7vw, 96px);
    min-height: 610px;
    padding-bottom: 54px;
}

.hero__content {
    max-width: 625px;
    padding: 18px 0 22px;
}

.hero h1,
.section-heading h2,
.digital-copy h2,
.for-you__content h2,
.approach-copy h2,
.faq-intro h2,
.contact-copy h2,
.legal-hero h1 {
    margin-bottom: 20px;
    letter-spacing: -0.032em;
    line-height: 1.08;
}

.hero h1 {
    max-width: 610px;
    font-size: clamp(45px, 4.35vw, 58px);
}

.hero h1 > span {
    display: block;
    color: var(--forest-700);
    font-size: 0.92em;
    font-style: italic;
    font-weight: 400;
}

.hero__lead {
    max-width: 610px;
    margin-bottom: 20px;
    color: #2c4033;
    font-size: clamp(16.5px, 1.45vw, 18.25px);
    line-height: 1.7;
}

.hero__support {
    max-width: 590px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: start;
    gap: 13px;
    margin: 0 0 25px;
    padding: 14px 16px;
    border: 1px solid rgba(44, 75, 57, 0.11);
    border-radius: 16px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.55);
    font-size: 13.8px;
    line-height: 1.6;
}

.hero__support p {
    margin: 0;
}

.hero__support-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-700);
    background: var(--ivory-100);
}

.hero__support-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero__actions {
    gap: 11px;
    margin-bottom: 24px;
}

.trust-list {
    gap: 10px;
    font-size: 11.75px;
}

.trust-list li {
    gap: 7px;
    padding: 6px 11px 6px 7px;
    border: 1px solid rgba(44, 75, 57, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
}

.trust-icon {
    width: 21px;
    height: 21px;
    border: 0;
    background: var(--sage-100);
    font-size: 10px;
}

.hero__visual {
    align-self: end;
    width: min(100%, 500px);
}

.portrait-frame {
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(44, 75, 57, 0.11);
    border-radius: 38px 38px 112px 38px;
    background:
        radial-gradient(circle at 66% 19%, rgba(255, 255, 255, 0.82) 0 22%, transparent 43%),
        linear-gradient(150deg, #e8eee7 0%, #dce6dd 53%, #cdd8ce 100%);
    box-shadow: 0 30px 76px rgba(31, 54, 40, 0.16);
    isolation: isolate;
}

.portrait-frame::before {
    z-index: 0;
    inset: 20px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 27px 27px 93px 27px;
}

.portrait-frame::after {
    z-index: 1;
    right: 18%;
    bottom: 18px;
    left: 18%;
    height: 45px;
    background: rgba(20, 32, 24, 0.14);
    filter: blur(20px);
}

.portrait-frame picture {
    position: absolute;
    z-index: 2;
    inset: 34px 0 0;
    width: 100%;
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    mix-blend-mode: normal;
    filter: drop-shadow(0 16px 18px rgba(18, 29, 22, 0.13));
}

.portrait-frame__ring {
    z-index: 1;
    top: 76px;
    right: -12px;
    width: 270px;
    height: 270px;
    border-color: rgba(188, 145, 83, 0.32);
}

.portrait-frame__ring::before {
    inset: 15px;
    border-color: rgba(255, 255, 255, 0.38);
}

.portrait-frame__ring::after {
    inset: 34px;
    border-color: rgba(44, 75, 57, 0.08);
}

.portrait-kicker {
    position: absolute;
    z-index: 4;
    top: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    color: var(--forest-900);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 10px 32px rgba(31, 54, 40, 0.09);
    backdrop-filter: blur(12px);
}

.portrait-kicker > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ivory-50);
    background: var(--forest-800);
    font-family: var(--font-display);
    font-size: 12px;
}

.portrait-kicker p {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.25;
}

.portrait-kicker strong {
    color: var(--forest-950);
    font-size: 11px;
}

.portrait-badge {
    right: 19px;
    bottom: 21px;
    gap: 10px;
    padding: 10px 13px 10px 9px;
    border-color: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 46px rgba(31, 54, 40, 0.15);
}

.portrait-badge__mark {
    width: 38px;
    height: 38px;
    color: var(--gold-700);
    background: var(--ivory-100);
}

.portrait-badge__mark svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.portrait-badge > span:last-child {
    font-size: 9.5px;
}

.portrait-badge strong {
    font-size: 11.5px;
}

.portrait-focus {
    position: absolute;
    z-index: 4;
    bottom: 94px;
    left: 22px;
    width: 132px;
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 17px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(29, 51, 38, 0.86);
    box-shadow: 0 18px 44px rgba(24, 43, 32, 0.18);
    backdrop-filter: blur(10px);
}

.portrait-focus small {
    margin-bottom: 3px;
    color: var(--gold-300);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.portrait-focus span {
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 10.5px;
}

.portrait-leaf--one {
    top: 158px;
    left: -4px;
}

.portrait-leaf--two {
    top: 208px;
    left: 15px;
}

.hero__areas {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: -48px;
    overflow: hidden;
    border: 1px solid rgba(44, 75, 57, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 22px 58px rgba(29, 51, 38, 0.11);
    backdrop-filter: blur(16px);
}

.hero__areas a {
    min-height: 96px;
    display: grid;
    grid-template-columns: 32px 1fr 20px;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-right: 1px solid var(--border);
    transition: background var(--transition), transform var(--transition);
}

.hero__areas a:last-child {
    border-right: 0;
}

.hero__areas a:hover {
    background: var(--sage-50);
}

.hero__areas > a > span {
    color: var(--gold-600);
    font-family: var(--font-display);
    font-size: 22px;
}

.hero__areas p {
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.35;
}

.hero__areas small {
    margin-bottom: 4px;
    color: var(--gold-700);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__areas strong {
    color: var(--forest-900);
    font-size: 12px;
    font-weight: 650;
}

.hero__areas i {
    color: var(--gold-600);
    font-size: 17px;
    font-style: normal;
    transition: transform var(--transition);
}

.hero__areas a:hover i {
    transform: translateX(3px);
}

.section {
    padding: clamp(78px, 7.2vw, 104px) 0;
}

#como-trabajamos {
    padding-top: clamp(120px, 10vw, 150px);
}

.section--soft {
    background:
        radial-gradient(circle at 10% 10%, rgba(188, 145, 83, 0.05), transparent 23%),
        var(--sage-50);
}

.section-heading {
    max-width: 590px;
}

.section-heading--center {
    max-width: 720px;
    margin-bottom: 40px;
}

.section-heading h2,
.digital-copy h2,
.for-you__content h2,
.approach-copy h2,
.faq-intro h2,
.contact-copy h2 {
    font-size: clamp(34px, 3.3vw, 46px);
}

.section-heading p:last-child {
    max-width: 610px;
    margin-top: -2px;
    font-size: 15px;
}

.process-intro {
    align-items: center;
    gap: clamp(44px, 6vw, 82px);
    margin-bottom: 38px;
}

.process-intro__text {
    padding: 3px 0 3px 24px;
}

.process-intro__text p {
    font-size: 14.8px;
    line-height: 1.7;
}

.benefits-grid {
    gap: 14px;
}

.benefit-card {
    min-height: 232px;
    padding: 24px 22px 22px;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 26px rgba(29, 51, 38, 0.035);
}

.benefit-card:hover {
    transform: translateY(-4px);
}

.benefit-card__number {
    top: 20px;
    right: 20px;
    font-size: 23px;
}

.icon-circle {
    width: 46px;
    height: 46px;
    margin-bottom: 19px;
    background: var(--ivory-50);
}

.icon-circle svg {
    width: 21px;
    height: 21px;
}

.benefit-card h3 {
    margin-bottom: 9px;
    font-size: 20px;
}

.benefit-card p {
    font-size: 13px;
    line-height: 1.62;
}

.services-grid {
    gap: 18px;
}

.service-card {
    padding: 28px 27px 26px;
    border-radius: 23px;
    box-shadow: 0 14px 38px rgba(29, 51, 38, 0.07);
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card__top {
    margin-bottom: 22px;
}

.service-card__index {
    font-size: 31px;
}

.service-card__icon {
    width: 48px;
    height: 48px;
}

.service-card__icon svg {
    width: 23px;
    height: 23px;
}

.service-card__label {
    margin-bottom: 7px;
    font-size: 9.5px;
}

.service-card h3 {
    margin-bottom: 13px;
    font-size: clamp(24px, 2vw, 28px);
}

.service-card > p:not(.service-card__label) {
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.65;
}

.service-card ul {
    gap: 8px;
    margin-bottom: 23px;
}

.service-card li {
    padding-left: 19px;
    font-size: 12.5px;
}

.service-card__ribbon {
    top: 18px;
    right: -55px;
    font-size: 8px;
}

.text-link {
    font-size: 12.2px;
}

.digital-section {
    padding: clamp(82px, 7.6vw, 108px) 0;
    background:
        radial-gradient(circle at 10% 12%, rgba(188, 145, 83, 0.13), transparent 25%),
        radial-gradient(circle at 94% 86%, rgba(125, 140, 128, 0.16), transparent 30%),
        linear-gradient(135deg, #243f30, #122219);
}

.digital-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(48px, 7vw, 92px);
}

.digital-copy > p:not(.eyebrow) {
    font-size: 14.5px;
    line-height: 1.7;
}

.digital-panel {
    padding: 26px;
    border-radius: 27px;
}

.digital-panel__items {
    gap: 11px;
}

.digital-panel__items > div {
    min-height: 137px;
    padding: 18px;
    border-radius: 16px;
}

.digital-panel__items > div > span {
    margin-bottom: 14px;
    font-size: 20px;
}

.digital-panel__items strong {
    font-size: 19px;
}

.digital-panel__items p {
    font-size: 11.8px;
}

.for-you-grid {
    grid-template-columns: minmax(350px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(48px, 7vw, 100px);
}

.for-you__visual {
    min-height: 410px;
}

.for-you__shape {
    width: 360px;
    height: 360px;
}

.quote-card {
    max-width: 338px;
    padding: 45px 36px 31px;
    border-radius: 21px;
}

.quote-card__mark {
    top: 5px;
    left: 24px;
    font-size: 80px;
}

.quote-card blockquote {
    margin-bottom: 18px;
    font-size: clamp(25px, 2.1vw, 31px);
}

.large-check-list {
    gap: 8px;
    margin: 25px 0 23px;
}

.large-check-list li {
    grid-template-columns: 28px 1fr;
    gap: 11px;
    padding: 9px 0 11px;
    font-size: 13.5px;
}

.large-check-list span {
    width: 26px;
    height: 26px;
}

.approach-grid {
    grid-template-columns: minmax(390px, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(52px, 7.5vw, 105px);
}

.approach-image {
    min-height: 560px;
}

.approach-image__backdrop {
    inset: 30px 30px 0 0;
    border-radius: 36px 36px 100px 36px;
}

.approach-image__backdrop::before {
    inset: -16px 18px 18px -16px;
    border-radius: inherit;
}

.approach-image picture {
    inset: 0 0 28px 28px;
    border-radius: 36px 36px 100px 36px;
}

.approach-image img {
    object-position: center 18%;
}

.approach-image__caption {
    right: -14px;
    bottom: 14px;
    gap: 11px;
    padding: 11px 15px 11px 10px;
}

.approach-image__monogram {
    width: 41px;
    height: 41px;
}

.approach-copy__lead {
    font-size: 16.5px;
}

.approach-values {
    gap: 4px;
    margin: 21px 0;
}

.approach-values > div {
    grid-template-columns: 38px 1fr;
    gap: 13px;
    padding: 11px 0;
}

.approach-values > div > span {
    font-size: 19px;
}

.approach-values p {
    font-size: 12.8px;
}

.approach-values strong {
    font-size: 14px;
}

.approach-copy__closing {
    padding: 15px 18px 15px 20px;
    border-radius: 0 12px 12px 0;
    font-size: 18px;
}

.steps-section {
    padding: clamp(76px, 7vw, 98px) 0;
}

.steps-grid {
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
    gap: 12px;
}

.step-card {
    min-height: 196px;
    padding: 25px 23px;
    border-radius: 20px;
}

.step-card__number {
    width: 39px;
    height: 39px;
    margin-bottom: 18px;
    font-size: 17px;
}

.step-card h3 {
    margin-bottom: 9px;
    font-size: 22px;
}

.step-card p {
    font-size: 12.8px;
}

.faq-grid {
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(48px, 7vw, 90px);
}

.faq-intro {
    top: 108px;
}

.faq-intro > p:not(.eyebrow) {
    font-size: 14px;
}

.faq-contact-card {
    margin-top: 24px;
    padding: 18px;
    border-radius: 16px;
}

.faq-list summary {
    min-height: 76px;
    grid-template-columns: 34px 1fr 29px;
    gap: 14px;
    padding: 15px 0;
    font-size: clamp(18px, 1.6vw, 21px);
}

.faq-answer {
    padding: 0 42px 21px 48px;
}

.faq-answer p {
    font-size: 13.7px;
}

.contact-section {
    padding: clamp(82px, 7.5vw, 110px) 0;
}

.contact-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
    gap: clamp(48px, 7vw, 92px);
}

.contact-copy > p:not(.eyebrow):not(.contact-copy__note) {
    font-size: 14.5px;
}

.contact-options {
    margin: 26px 0 24px;
}

.contact-option {
    grid-template-columns: 44px 1fr 22px;
    padding: 12px;
    border-radius: 15px;
}

.contact-option__icon {
    width: 44px;
    height: 44px;
}

.contact-form-card {
    padding: clamp(25px, 3vw, 36px);
    border-radius: 24px;
}

.contact-form-card__heading {
    margin-bottom: 22px;
    padding-bottom: 17px;
}

.contact-form-card__heading p {
    font-size: 25px;
}

.form-field {
    margin-bottom: 15px;
}

.form-field input,
.form-field select {
    height: 48px;
}

.form-field textarea {
    min-height: 128px;
}

.site-footer {
    background: #101a14;
}

.footer__main {
    gap: clamp(30px, 4.5vw, 64px);
    padding: 58px 0 44px;
}

.footer__brand img {
    width: 245px;
    height: auto;
    margin-bottom: 17px;
    filter: none;
    opacity: 1;
}

.footer__brand p {
    font-size: 12.5px;
}

.footer__cta h2 {
    font-size: 23px;
}

.footer__bottom {
    min-height: 60px;
}

.whatsapp-float {
    right: 18px;
    bottom: 18px;
    min-height: 48px;
    padding: 9px 15px 9px 11px;
    background: #267a4c;
    box-shadow: 0 14px 36px rgba(15, 57, 34, 0.24);
}

/* Legal and error pages share the refined visual system. */
.legal-hero {
    padding: 74px 0 64px;
}

.legal-hero h1 {
    font-size: clamp(38px, 4.2vw, 54px);
}

.error-card {
    border-radius: 26px;
}

@media (max-width: 1140px) {
    .brand {
        width: 238px;
    }

    .main-nav {
        gap: 17px;
    }

    .main-nav > a:not(.btn) {
        font-size: 12.5px;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
        gap: 52px;
    }

    .portrait-frame {
        min-height: 525px;
    }

    .hero__areas a {
        padding-inline: 18px;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .benefit-card {
        min-height: 205px;
    }

    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-card--featured {
        grid-column: auto;
        max-width: none;
    }
}

@media (max-width: 980px) {
    :root {
        --header-height: 70px;
    }

    .container {
        width: min(calc(100% - 36px), var(--container));
    }

    .site-header {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
        display: flex;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.74);
    }

    .main-nav {
        top: var(--mobile-nav-top, calc(32px + var(--header-height)));
        width: min(410px, 100vw);
        padding: 22px 24px 30px;
        border-left: 1px solid var(--border);
        background:
            radial-gradient(circle at 100% 0%, rgba(188, 145, 83, 0.09), transparent 30%),
            rgba(252, 251, 248, 0.995);
        box-shadow: -22px 34px 70px rgba(25, 45, 33, 0.2);
    }

    .main-nav > a:not(.btn) {
        padding: 15px 3px;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 400;
    }

    .main-nav .btn {
        margin-top: 20px;
    }

    .main-nav__contact {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 24px;
        padding-top: 21px;
        border-top: 1px solid var(--border);
    }

    .main-nav__contact span {
        margin-bottom: 4px;
        color: var(--gold-700);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
    }

    .main-nav__contact a {
        padding: 2px 0;
        color: var(--muted);
        font-size: 12px;
    }

    .hero {
        padding-top: 52px;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 46px;
        padding-bottom: 42px;
    }

    .hero__content {
        max-width: 720px;
        padding-top: 8px;
    }

    .hero h1 {
        max-width: 690px;
        font-size: clamp(44px, 7vw, 56px);
    }

    .hero__visual {
        justify-self: center;
        width: min(100%, 530px);
    }

    .portrait-frame {
        min-height: 585px;
    }

    .hero__areas {
        margin-bottom: -42px;
    }

    .hero__areas a {
        min-height: 88px;
        grid-template-columns: 28px 1fr 18px;
        gap: 10px;
        padding: 15px;
    }

    .hero__areas strong {
        font-size: 11px;
    }

    #como-trabajamos {
        padding-top: 118px;
    }

    .process-intro,
    .digital-grid,
    .for-you-grid,
    .approach-grid,
    .faq-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .process-intro {
        gap: 20px;
    }

    .process-intro__text {
        max-width: 720px;
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card--featured {
        grid-column: 1 / -1;
        max-width: 620px;
        margin-inline: auto;
    }

    .digital-grid {
        gap: 40px;
    }

    .digital-copy {
        max-width: 720px;
    }

    .for-you-grid {
        gap: 36px;
    }

    .for-you__content {
        order: 1;
    }

    .for-you__visual {
        order: 2;
        min-height: 380px;
    }

    .approach-image {
        width: min(560px, 100%);
        margin-inline: auto;
    }

    .approach-copy {
        max-width: 720px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin-inline: auto;
    }

    .step-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 42px 1fr;
        column-gap: 16px;
        padding: 22px;
    }

    .step-card__number {
        grid-row: 1 / 3;
        margin: 0;
    }

    .step-card h3 {
        margin-bottom: 5px;
    }

    .step-connector {
        width: 1px;
        height: 27px;
    }

    .faq-intro {
        position: static;
        max-width: 680px;
    }

    .faq-grid,
    .contact-grid {
        gap: 38px;
    }

    .contact-copy {
        max-width: 700px;
    }
}

@media (max-width: 720px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .topbar__inner {
        min-height: 30px;
    }

    .topbar__contact {
        gap: 0;
    }

    .topbar__contact a:first-child {
        display: none;
    }

    .brand {
        width: 214px;
    }

    .hero {
        padding-top: 42px;
    }

    .hero__grid {
        gap: 34px;
        padding-bottom: 34px;
    }

    .hero__content {
        padding: 0;
    }

    .eyebrow {
        margin-bottom: 13px;
        font-size: 9.5px;
    }

    .hero h1 {
        max-width: 100%;
        margin-bottom: 17px;
        font-size: clamp(36px, 10.3vw, 46px);
        line-height: 1.06;
    }

    .hero h1 > span {
        display: inline;
    }

    .hero__lead {
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 1.68;
    }

    .hero__support {
        grid-template-columns: 32px 1fr;
        gap: 10px;
        margin-bottom: 21px;
        padding: 12px;
        font-size: 12.8px;
    }

    .hero__support-icon {
        width: 31px;
        height: 31px;
    }

    .hero__actions {
        gap: 9px;
        margin-bottom: 20px;
    }

    .hero__actions .btn {
        flex: 1 1 220px;
    }

    .trust-list {
        gap: 7px;
    }

    .trust-list li {
        padding-right: 9px;
        font-size: 10.5px;
    }

    .portrait-frame {
        min-height: 500px;
        border-radius: 28px 28px 82px 28px;
    }

    .portrait-frame::before {
        inset: 13px;
        border-radius: 20px 20px 67px 20px;
    }

    .portrait-frame picture {
        inset: 26px 0 0;
    }

    .portrait-kicker {
        top: 16px;
        left: 16px;
    }

    .portrait-focus {
        bottom: 82px;
        left: 15px;
        width: 120px;
        padding: 12px;
    }

    .portrait-badge {
        right: 13px;
        bottom: 14px;
    }

    .hero__areas {
        display: flex;
        gap: 0;
        margin-bottom: -36px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .hero__areas::-webkit-scrollbar {
        display: none;
    }

    .hero__areas a {
        min-width: min(82vw, 330px);
        min-height: 82px;
        flex: 0 0 auto;
        border-right: 1px solid var(--border);
        scroll-snap-align: start;
    }

    #como-trabajamos {
        padding-top: 102px;
    }

    .section {
        padding: 72px 0;
    }

    .section-heading--center {
        margin-bottom: 30px;
    }

    .section-heading h2,
    .digital-copy h2,
    .for-you__content h2,
    .approach-copy h2,
    .faq-intro h2,
    .contact-copy h2 {
        font-size: clamp(31px, 8.2vw, 39px);
    }

    .section-heading p:last-child {
        font-size: 13.8px;
    }

    .benefits-grid,
    .services-grid,
    .digital-panel__items,
    .form-row--two {
        grid-template-columns: 1fr;
    }

    .benefit-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 46px 1fr;
        column-gap: 15px;
        padding: 20px;
    }

    .benefit-card .icon-circle {
        grid-row: 1 / 3;
        margin: 0;
    }

    .benefit-card h3 {
        align-self: end;
        margin-bottom: 4px;
    }

    .benefit-card p {
        grid-column: 2;
    }

    .benefit-card__number {
        top: 12px;
        right: 15px;
        font-size: 18px;
    }

    .service-card,
    .service-card--featured {
        max-width: none;
        padding: 25px 23px 23px;
    }

    .digital-panel {
        padding: 19px;
    }

    .digital-panel__items > div {
        min-height: 0;
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 12px;
        padding: 15px;
    }

    .digital-panel__items > div > span {
        margin: 0;
    }

    .for-you__visual {
        min-height: 350px;
    }

    .for-you__shape {
        width: 310px;
        height: 310px;
    }

    .quote-card {
        max-width: 295px;
        padding: 40px 28px 27px;
    }

    .quote-card blockquote {
        font-size: 25px;
    }

    .approach-image {
        min-height: 500px;
    }

    .approach-image picture,
    .approach-image__backdrop {
        border-radius: 28px 28px 82px 28px;
    }

    .faq-list summary {
        grid-template-columns: 28px 1fr 28px;
        gap: 10px;
        min-height: 69px;
        font-size: 17.5px;
    }

    .faq-answer {
        padding: 0 36px 18px 38px;
    }

    .contact-form-card {
        padding: 23px 18px;
    }

    .contact-form-card__heading p {
        font-size: 23px;
    }

    .footer__main {
        padding: 48px 0 38px;
    }

    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 14px;
        bottom: 14px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }

    .whatsapp-float span {
        display: none;
    }
}

@media (max-width: 500px) {
    :root {
        --header-height: 64px;
    }

    .brand {
        width: 187px;
    }

    .nav-toggle {
        width: 42px;
        height: 42px;
    }

    .hero {
        padding-top: 34px;
    }

    .hero h1 {
        font-size: clamp(34px, 10.6vw, 40px);
    }

    .hero__lead {
        font-size: 15.2px;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        flex-basis: auto;
    }

    .trust-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trust-list li {
        justify-content: center;
        padding: 6px;
        white-space: nowrap;
    }

    .portrait-frame {
        min-height: 430px;
    }

    .portrait-frame picture {
        inset: 29px -15px 0;
        width: auto;
    }

    .portrait-kicker p {
        display: none;
    }

    .portrait-kicker {
        padding-right: 8px;
    }

    .portrait-focus {
        bottom: 70px;
        width: 108px;
    }

    .portrait-focus span {
        font-size: 9.5px;
    }

    .portrait-badge {
        max-width: 202px;
    }

    .portrait-badge > span:last-child {
        font-size: 8.5px;
    }

    .portrait-badge strong {
        font-size: 10.5px;
    }

    .section {
        padding: 64px 0;
    }

    .process-intro__text {
        padding-left: 17px;
    }

    .service-card h3 {
        font-size: 25px;
    }

    .for-you__visual {
        min-height: 325px;
    }

    .for-you__shape {
        width: 280px;
        height: 280px;
    }

    .quote-card {
        max-width: 270px;
        padding-inline: 24px;
    }

    .approach-image {
        min-height: 430px;
    }

    .approach-image__caption {
        right: 0;
        max-width: 215px;
    }

    .contact-option {
        grid-template-columns: 41px 1fr 18px;
        gap: 9px;
    }

    .contact-option__icon {
        width: 41px;
        height: 41px;
    }

    .footer__main {
        grid-template-columns: 1fr;
    }

    .footer__brand,
    .footer__cta {
        grid-column: auto;
    }
}

/* Final polish: compact hero scale and robust mobile navigation. */
@media (min-width: 981px) {
    .hero {
        padding-top: 52px;
    }

    .hero__grid {
        min-height: 580px;
        padding-bottom: 46px;
    }

    .hero h1 {
        max-width: 590px;
        font-size: clamp(42px, 3.8vw, 52px);
    }

    .portrait-frame {
        min-height: 535px;
    }
}

@media (max-width: 980px) {
    .site-header,
    .site-header.is-scrolled {
        background: rgba(252, 251, 248, 0.985);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.nav-open::before {
        position: fixed;
        z-index: 90;
        inset: 0;
        content: "";
        background: rgba(14, 27, 19, 0.28);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .main-nav {
        bottom: 0;
        max-height: calc(100dvh - var(--mobile-nav-top, 102px));
        overscroll-behavior: contain;
    }

    .main-nav.is-open > a,
    .main-nav.is-open .main-nav__contact {
        animation: mobile-nav-item 380ms both;
    }

    .main-nav.is-open > a:nth-child(2) { animation-delay: 30ms; }
    .main-nav.is-open > a:nth-child(3) { animation-delay: 60ms; }
    .main-nav.is-open > a:nth-child(4) { animation-delay: 90ms; }
    .main-nav.is-open > a:nth-child(5) { animation-delay: 120ms; }
    .main-nav.is-open > a:nth-child(6) { animation-delay: 150ms; }
    .main-nav.is-open .main-nav__contact { animation-delay: 180ms; }

    .hero h1 {
        font-size: clamp(40px, 6.1vw, 48px);
    }
}

@keyframes mobile-nav-item {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 720px) {
    .hero h1 {
        font-size: clamp(33px, 8.8vw, 39px);
    }
}

@media (max-width: 500px) {
    .hero h1 {
        font-size: clamp(32px, 9.4vw, 36px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav.is-open > a,
    .main-nav.is-open .main-nav__contact {
        animation: none;
    }
}

/* Keep the first screen calm; reveal the quick WhatsApp action after scrolling. */
.js .whatsapp-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.96);
    transition:
        opacity 220ms ease,
        visibility 0s linear 220ms,
        transform 260ms ease,
        box-shadow var(--transition),
        background var(--transition);
}

.js .whatsapp-float.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.js .whatsapp-float.is-visible:hover {
    transform: translateY(-3px) scale(1);
}

body.nav-open .whatsapp-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The JavaScript body lock preserves the exact scroll position. */
body.nav-open {
    overflow: visible;
}

/* ================================================================
 * Online appointment booking — Calendly integration 2.1
 * ================================================================ */

.topbar__booking {
    position: relative;
    color: var(--gold-300);
    font-weight: 800;
    text-decoration: none;
    transition: color var(--transition);
}

.topbar__booking::after {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    content: "";
    background: currentColor;
    opacity: 0.45;
    transform: scaleX(0.45);
    transform-origin: left;
    transition: transform var(--transition), opacity var(--transition);
}

.topbar__booking:hover,
.topbar__booking:focus-visible {
    color: #f0d9ae;
}

.topbar__booking:hover::after,
.topbar__booking:focus-visible::after {
    opacity: 0.85;
    transform: scaleX(1);
}

.header-booking-quick {
    display: none;
}

.btn--booking {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.btn--booking::before {
    position: absolute;
    z-index: -1;
    top: -80%;
    left: -35%;
    width: 34%;
    height: 260%;
    content: "";
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(18deg) translateX(-180%);
    transition: transform 650ms ease, opacity 180ms ease;
}

.btn--booking:hover::before,
.btn--booking:focus-visible::before {
    opacity: 1;
    transform: rotate(18deg) translateX(510%);
}

.main-nav .btn--booking svg {
    width: 17px;
    height: 17px;
}

.main-nav__contact .main-nav__booking-link {
    color: var(--forest-800);
    font-weight: 800;
}

.hero__actions {
    margin-bottom: 12px;
}

.hero__booking-note {
    max-width: 575px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.hero__booking-note svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    fill: none;
    stroke: var(--gold-700);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.steps-section .section-heading--center {
    max-width: 760px;
}

.steps-section__intro {
    max-width: 650px;
    margin: -4px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
}

.booking-section {
    position: relative;
    padding: clamp(88px, 8vw, 118px) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 4%, rgba(188, 145, 83, 0.12), transparent 28%),
        radial-gradient(circle at 96% 88%, rgba(125, 140, 128, 0.13), transparent 32%),
        linear-gradient(112deg, #fbf8f2 0%, #f6f5ef 49%, #eef3ed 100%);
}

.booking-section::before {
    position: absolute;
    top: -210px;
    right: -160px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(188, 145, 83, 0.17);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.booking-section::after {
    position: absolute;
    bottom: -240px;
    left: -210px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: rgba(44, 75, 57, 0.045);
}

.booking-section__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image: radial-gradient(rgba(44, 75, 57, 0.14) 0.65px, transparent 0.65px);
    background-size: 23px 23px;
    mask-image: linear-gradient(90deg, #000 0%, transparent 39%, transparent 66%, #000 100%);
}

.booking-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(590px, 1.28fr);
    align-items: start;
    gap: clamp(44px, 6vw, 82px);
}

.booking-copy {
    position: sticky;
    top: 126px;
    max-width: 505px;
    padding-top: 18px;
}

.booking-copy h2 {
    margin-bottom: 22px;
    color: var(--forest-900);
    font-family: var(--font-display);
    font-size: clamp(36px, 3.45vw, 49px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.07;
}

.booking-copy > p:not(.eyebrow) {
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 14.3px;
    line-height: 1.72;
}

.booking-copy .booking-copy__lead {
    color: #2b4134;
    font-size: 17px;
    line-height: 1.7;
}

.booking-assurances {
    display: grid;
    gap: 8px;
    margin: 25px 0 23px;
    list-style: none;
}

.booking-assurances li {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(44, 75, 57, 0.105);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 8px 24px rgba(29, 51, 38, 0.025);
}

.booking-assurances__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-700);
    background: var(--ivory-100);
}

.booking-assurances__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.booking-assurances p {
    margin: 0;
    color: var(--muted);
    font-size: 12.4px;
    line-height: 1.52;
}

.booking-assurances strong {
    display: block;
    margin-bottom: 2px;
    color: var(--forest-900);
    font-size: 13.7px;
    font-weight: 750;
}

.booking-help {
    padding: 17px 19px;
    border-left: 2px solid var(--gold-500);
    border-radius: 0 14px 14px 0;
    background: rgba(255, 255, 255, 0.68);
}

.booking-help span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11.5px;
}

.booking-help a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--forest-800);
    font-size: 12.5px;
    font-weight: 800;
    transition: color var(--transition), gap var(--transition);
}

.booking-help a:hover,
.booking-help a:focus-visible {
    gap: 11px;
    color: var(--gold-700);
}

.booking-calendar {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(44, 75, 57, 0.13);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 34px 88px rgba(29, 51, 38, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.booking-calendar__header {
    min-height: 86px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 18px 21px;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 100% 0%, rgba(188, 145, 83, 0.1), transparent 38%),
        rgba(252, 251, 248, 0.96);
}

.booking-calendar__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--ivory-50);
    background: linear-gradient(145deg, var(--forest-700), var(--forest-900));
    box-shadow: 0 10px 24px rgba(29, 51, 38, 0.18);
}

.booking-calendar__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.booking-calendar__header p {
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.35;
}

.booking-calendar__header small {
    margin-bottom: 2px;
    color: var(--gold-700);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.booking-calendar__header strong {
    color: var(--forest-900);
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 400;
}

.booking-calendar__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(45, 109, 72, 0.16);
    border-radius: 999px;
    color: #416650;
    background: rgba(233, 238, 231, 0.72);
    font-size: 9.5px;
    font-weight: 750;
    white-space: nowrap;
}

.booking-calendar__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4d8a64;
    box-shadow: 0 0 0 4px rgba(77, 138, 100, 0.12);
    animation: booking-status-pulse 2.4s ease-in-out infinite;
}

@keyframes booking-status-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(77, 138, 100, 0.12); }
    50% { box-shadow: 0 0 0 7px rgba(77, 138, 100, 0.035); }
}

.calendly-inline-widget {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(110deg, rgba(246, 242, 234, 0.72), rgba(255, 255, 255, 0.98), rgba(235, 240, 233, 0.68));
}

.calendly-inline-widget iframe {
    width: 100% !important;
    min-width: 0 !important;
}

.booking-calendar__fallback {
    margin: 0;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.booking-calendar__fallback a,
.booking-calendar__privacy a {
    color: var(--forest-800);
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: rgba(44, 75, 57, 0.28);
    text-underline-offset: 3px;
}

.booking-calendar__privacy {
    margin: 0;
    padding: 13px 20px 15px;
    color: var(--muted-light);
    background: rgba(246, 242, 234, 0.58);
    font-size: 9.8px;
    line-height: 1.55;
    text-align: center;
}

.contact-booking-link {
    margin-top: 4px;
}

@media (max-width: 1140px) {
    .booking-grid {
        grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.28fr);
        gap: 45px;
    }

    .booking-copy h2 {
        font-size: clamp(35px, 3.5vw, 44px);
    }
}

@media (max-width: 980px) {
    .header__inner {
        gap: 11px;
    }

    .brand {
        margin-right: auto;
    }

    .header-booking-quick {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 13px;
        border: 1px solid rgba(44, 75, 57, 0.16);
        border-radius: 999px;
        color: var(--white);
        background: linear-gradient(135deg, #335642, #233e2f);
        box-shadow: 0 9px 22px rgba(34, 64, 47, 0.15);
        font-size: 11.5px;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    }

    .header-booking-quick:hover,
    .header-booking-quick:focus-visible {
        background: linear-gradient(135deg, #294a37, #172d21);
        box-shadow: 0 12px 28px rgba(34, 64, 47, 0.22);
        transform: translateY(-1px);
    }

    .header-booking-quick svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .booking-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .booking-copy {
        position: static;
        max-width: 730px;
        padding-top: 0;
    }

    .booking-copy h2 {
        max-width: 680px;
        font-size: clamp(36px, 5.3vw, 48px);
    }

    .booking-assurances {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .booking-assurances li {
        grid-template-columns: 1fr;
        align-content: start;
    }

    .booking-calendar {
        width: min(100%, 820px);
        margin-inline: auto;
    }
}

@media (max-width: 720px) {
    .hero__booking-note {
        font-size: 10.8px;
    }

    .steps-section__intro {
        font-size: 12.8px;
    }

    .booking-section {
        padding: 72px 0;
    }

    .booking-copy h2 {
        font-size: clamp(32px, 8.4vw, 40px);
    }

    .booking-copy .booking-copy__lead {
        font-size: 15.7px;
    }

    .booking-assurances {
        grid-template-columns: 1fr;
    }

    .booking-assurances li {
        grid-template-columns: 42px 1fr;
    }

    .booking-calendar {
        border-radius: 21px;
    }

    .booking-calendar__header {
        grid-template-columns: 43px 1fr;
        gap: 11px;
        padding: 16px;
    }

    .booking-calendar__icon {
        width: 43px;
        height: 43px;
        border-radius: 14px;
    }

    .booking-calendar__header strong {
        font-size: 19px;
    }

    .booking-calendar__status {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 2px;
    }

    .calendly-inline-widget {
        height: 820px !important;
    }

    .booking-calendar__privacy {
        padding-inline: 15px;
    }
}

@media (max-width: 500px) {
    .header__inner {
        gap: 8px;
    }

    .brand {
        width: min(44vw, 160px);
    }

    .header-booking-quick {
        min-height: 38px;
        gap: 5px;
        padding: 7px 9px;
        font-size: 10.5px;
    }

    .header-booking-quick svg {
        width: 15px;
        height: 15px;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .hero__booking-note {
        margin-bottom: 16px;
    }

    .booking-section {
        padding: 64px 0;
    }

    .booking-grid {
        gap: 34px;
    }

    .booking-copy h2 {
        font-size: clamp(30px, 8.8vw, 36px);
    }

    .booking-copy > p:not(.eyebrow) {
        font-size: 13.4px;
    }

    .booking-copy .booking-copy__lead {
        font-size: 15px;
    }

    .booking-assurances li {
        padding: 11px;
    }

    .booking-help {
        padding: 15px 16px;
    }

    .booking-calendar__header {
        padding: 14px;
    }

    .booking-calendar__header strong {
        font-size: 17.5px;
    }

    .booking-calendar__status {
        font-size: 8.8px;
    }

    .calendly-inline-widget {
        height: 860px !important;
    }
}

@media (max-width: 360px) {
    .brand {
        width: 135px;
    }

    .header-booking-quick {
        padding-inline: 8px;
        font-size: 10px;
    }

    .calendly-inline-widget {
        height: 900px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn--booking::before,
    .booking-calendar__status i {
        animation: none;
        transition: none;
    }
}

/* Privacy-aware Calendly activation. The external service loads only after
   a visitor explicitly chooses to view appointment availability. */
.calendly-consent[hidden],
.calendly-inline-widget[hidden],
.booking-calendar__error[hidden] {
    display: none !important;
}

.calendly-consent {
    min-height: 560px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 6vw, 70px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 10%, rgba(188, 145, 83, 0.11), transparent 31%),
        linear-gradient(150deg, rgba(252, 251, 248, 0.98), rgba(244, 247, 243, 0.96));
}

.calendly-consent__mark {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 21px;
    border: 1px solid rgba(44, 75, 57, 0.12);
    border-radius: 22px;
    color: var(--gold-700);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 45px rgba(29, 51, 38, 0.1);
}

.calendly-consent__mark svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendly-consent__eyebrow {
    margin: 0 0 8px;
    color: var(--gold-700);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.calendly-consent h3 {
    max-width: 510px;
    margin: 0 0 14px;
    color: var(--forest-900);
    font-family: var(--font-display);
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.calendly-consent > p:not(.calendly-consent__eyebrow) {
    max-width: 540px;
    margin: 0 0 23px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

.calendly-consent .btn {
    margin-bottom: 18px;
}

.calendly-consent small {
    max-width: 520px;
    color: var(--muted-light);
    font-size: 9.8px;
    line-height: 1.55;
}

.calendly-consent small a {
    color: var(--forest-800);
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: rgba(44, 75, 57, 0.28);
    text-underline-offset: 3px;
}

.booking-calendar:not(.is-loaded) .booking-calendar__privacy {
    display: none;
}

.booking-calendar.is-loading .calendly-inline-widget {
    display: block;
}

.booking-calendar.is-loading .calendly-inline-widget::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    content: "Cargando agenda…";
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.booking-calendar.is-loaded .calendly-inline-widget::before {
    display: none;
}

.booking-calendar__error {
    min-height: 420px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
    color: var(--muted);
    background: var(--ivory-50);
    text-align: center;
}

.booking-calendar__error[hidden] {
    display: none;
}

.booking-calendar__error strong {
    margin-bottom: 7px;
    color: var(--forest-900);
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 400;
}

.booking-calendar__error p {
    max-width: 440px;
    margin-bottom: 18px;
    font-size: 13px;
}

.booking-calendar__error button,
.booking-calendar__error a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    padding: 10px 16px;
    border: 1px solid rgba(44, 75, 57, 0.18);
    border-radius: 999px;
    color: var(--forest-800);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.booking-calendar__error button:hover,
.booking-calendar__error a:hover {
    border-color: var(--forest-700);
    background: var(--sage-50);
}

@media (max-width: 720px) {
    .calendly-consent {
        min-height: 500px;
        padding: 38px 22px;
    }

    .calendly-consent__mark {
        width: 62px;
        height: 62px;
        border-radius: 19px;
    }

    .calendly-consent h3 {
        font-size: clamp(26px, 7vw, 32px);
    }
}

@media (max-width: 500px) {
    .calendly-consent {
        min-height: 470px;
        padding: 34px 18px;
    }

    .calendly-consent > p:not(.calendly-consent__eyebrow) {
        font-size: 12.7px;
    }

    .calendly-consent .btn {
        width: 100%;
    }

    .booking-calendar__error {
        min-height: 380px;
        padding: 32px 18px;
    }
}

/* ================================================================
 * Scroll-to-top control — elegant progress button 2.2
 * ================================================================ */
.scroll-top {
    --scroll-progress: 0deg;
    position: fixed;
    z-index: 101;
    left: 22px;
    bottom: max(22px, env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        var(--gold-500) 0deg var(--scroll-progress),
        rgba(48, 74, 59, 0.13) var(--scroll-progress) 360deg
    );
    box-shadow:
        0 18px 44px rgba(25, 44, 33, 0.15),
        0 4px 12px rgba(25, 44, 33, 0.08);
    cursor: pointer;
    isolation: isolate;
    transition:
        transform 240ms cubic-bezier(.2,.7,.2,1),
        box-shadow 240ms ease,
        opacity 220ms ease,
        visibility 0s linear 0s;
}

.scroll-top::before {
    position: absolute;
    z-index: -1;
    inset: 2px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: inherit;
    content: "";
    background: rgba(251, 250, 247, 0.94);
    box-shadow: inset 0 0 0 1px rgba(48, 74, 59, 0.035);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}

.scroll-top__surface {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    color: var(--forest-800);
}

.scroll-top__surface svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 240ms cubic-bezier(.2,.7,.2,1), color 220ms ease;
}

.scroll-top__label {
    position: absolute;
    left: calc(100% + 11px);
    top: 50%;
    width: max-content;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(23, 34, 27, 0.94);
    box-shadow: 0 10px 28px rgba(16, 29, 21, 0.17);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.025em;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(5px, -50%);
    transition: opacity 180ms ease, transform 220ms ease;
}

.scroll-top:hover,
.scroll-top:focus-visible {
    box-shadow:
        0 22px 50px rgba(25, 44, 33, 0.19),
        0 6px 14px rgba(25, 44, 33, 0.09);
    transform: translateY(-3px);
}

.scroll-top:hover .scroll-top__surface svg,
.scroll-top:focus-visible .scroll-top__surface svg {
    color: var(--gold-700);
    transform: translateY(-2px);
}

.scroll-top:hover .scroll-top__label,
.scroll-top:focus-visible .scroll-top__label {
    opacity: 1;
    transform: translate(0, -50%);
}

.js .scroll-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.94);
    transition:
        transform 260ms cubic-bezier(.2,.7,.2,1),
        box-shadow 240ms ease,
        opacity 220ms ease,
        visibility 0s linear 220ms;
}

.js .scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.js .scroll-top.is-visible:hover,
.js .scroll-top.is-visible:focus-visible {
    transform: translateY(-3px) scale(1);
}

body.nav-open .scroll-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 720px) {
    .scroll-top {
        left: 16px;
        bottom: max(17px, env(safe-area-inset-bottom));
        width: 48px;
        height: 48px;
        box-shadow: 0 14px 34px rgba(25, 44, 33, 0.16);
    }

    .scroll-top__surface svg {
        width: 18px;
        height: 18px;
    }

    .scroll-top__label {
        display: none;
    }
}

@media (max-width: 380px) {
    .scroll-top {
        left: 13px;
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scroll-top,
    .scroll-top__surface svg,
    .scroll-top__label {
        transition: none !important;
    }
}



/* v2.3.0 — mobile portrait reliability and positioning.
   Uses a PNG fallback on mobile so Diana remains visible across iOS browsers. */
@media (max-width: 720px) {
    .portrait-frame .portrait-photo {
        position: absolute;
        z-index: 2;
        inset: 8px -4px 0;
        width: auto;
        height: auto;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
    }

    .portrait-frame .portrait-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
        object-position: center bottom;
        opacity: 1 !important;
        visibility: visible !important;
        mix-blend-mode: normal !important;
        filter: drop-shadow(0 16px 18px rgba(18, 29, 22, 0.13));
        transform: none !important;
    }
}

@media (max-width: 500px) {
    .portrait-frame .portrait-photo {
        inset: 4px -10px 0;
    }
}