/* ============================================================
   Oculoplástica — main.css (reconstruído)
   Fontes: Belleza (títulos) + Josefin Sans (texto)
   Paleta: marsala #8a4f3e | dourado #bd9a3a | bege #e2dcd0
   ============================================================ */

:root {
    --marsala: #8a4f3e;
    --marsala-dark: #6e3e30;
    --gold: #bd9a3a;
    --gold-dark: #a5842c;
    --bege: #e2dcd0;
    --bege-light: #f0ece3;
    --text: #4a4038;
    --white: #ffffff;

    /* Escala áurea (φ = 1.618) — ritmo de espaçamento harmônico */
    --phi: 1.618;
    --sp-1: 1rem;        /* base */
    --sp-2: 1.618rem;    /* base·φ  */
    --sp-3: 2.618rem;    /* base·φ² */
    --sp-4: 4.236rem;    /* base·φ³ */
    --sp-5: 6.854rem;    /* base·φ⁴ */
    --sp-6: 11.09rem;    /* base·φ⁵ */
}

* { box-sizing: border-box; }

html { font-size: 62.5%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--marsala); text-decoration: none; transition: color .25s, opacity .25s; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4 {
    font-family: 'Belleza', sans-serif;
    font-weight: 400;
    color: var(--marsala);
    line-height: 1.25;
    margin: 0 0 1.6rem;
}

p { margin: 0 0 1.6rem; }

.container {
    width: 100%;
    max-width: 114rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ---------- Ícones (SVG embutido via mask, herda a cor do texto) ---------- */
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 1.9rem;
    height: 1.9rem;
    vertical-align: -0.3rem;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.icon-whatsapp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
}
.icon-instagram {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}
.icon-facebook {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}
.icon-youtube {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}
.icon-linkedin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
}

/* ---------- Header / Navegação ---------- */
.header {
    position: relative;
    background: var(--white);
}

/* Na home o menu flutua transparente sobre o slideshow (como no design original) */
.header nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: transparent;
}
.header:not(.header-interna) .nav-links li a { color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.header:not(.header-interna) .nav-links li a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.header:not(.header-interna) .hamburger-inner,
.header:not(.header-interna) .hamburger-inner::before,
.header:not(.header-interna) .hamburger-inner::after { background: var(--white); }

/* Páginas internas: barra branca sólida */
.header-interna nav {
    position: relative;
    background: var(--white);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}

.header nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.header .logo { display: block; width: 24rem; flex-shrink: 0; }
.header .logo img { display: block; width: 100%; }

.nav-links {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 3.2rem;
}

.nav-links li a {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--marsala);
    padding: .6rem 0;
    border-bottom: 2px solid transparent;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

/* ---------- Hamburger (mobile) ---------- */
.hamburger {
    display: none;
    cursor: pointer;
    padding: 1rem;
}
.hamburger-box {
    width: 3rem; height: 2.2rem;
    display: inline-block;
    position: relative;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    position: absolute;
    left: 0;
    width: 3rem; height: .3rem;
    background: var(--marsala);
    border-radius: .3rem;
    transition: transform .25s, opacity .2s, top .25s;
}
.hamburger-inner { top: 50%; margin-top: -.15rem; }
.hamburger-inner::before { top: -.9rem; }
.hamburger-inner::after { top: .9rem; }

.hamburger.is-active .hamburger-inner { transform: rotate(45deg); }
.hamburger.is-active .hamburger-inner::before { top: 0; opacity: 0; }
.hamburger.is-active .hamburger-inner::after { top: 0; transform: rotate(-90deg); }

/* ---------- Slideshow (CSS puro, radios + dots) ---------- */
.slideshow { position: relative; }

.slideshow [data-am-gallery] { position: relative; display: block; }

.slideshow input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.slideshow .images {
    position: relative;
    height: clamp(52rem, 80vh, 82rem);
    overflow: hidden;
}

/* Cada slide: por padrão OCULTO na hora (sem transição de saída).
   Só o slide ativo faz fade-in suave — assim os textos nunca se sobrepõem. */
.slideshow .image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: none;
    display: flex;
    align-items: center;
}

/* Painel bege à direita para o texto respirar (design original) */
.slideshow .image::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(226, 220, 208, 0) 38%, rgba(226, 220, 208, .78) 58%, var(--bege) 80%);
}
/* Grafismo pontilhado discreto sobre o painel bege */
.slideshow .image::after {
    content: "";
    position: absolute;
    top: 0; right: -6rem; bottom: 0;
    width: 42rem;
    background: url('../images/grafismo-right.png') right center / contain no-repeat;
    opacity: .85;
    pointer-events: none;
}

/* Arco suave na base, na cor bege da seção seguinte (fluidez, sem corte branco) */
.slideshow .images::after {
    content: "";
    position: absolute;
    z-index: 4;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 170%;
    height: 5.5rem;
    background: var(--bege);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.slideshow input#img-1:checked ~ .images .image:nth-child(1),
.slideshow input#img-2:checked ~ .images .image:nth-child(2),
.slideshow input#img-3:checked ~ .images .image:nth-child(3),
.slideshow input#img-4:checked ~ .images .image:nth-child(4) {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: opacity 1s ease;
}

/* Bloco de texto alinhado à direita do container (mesma margem do resto do site) */
.content-slide {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: var(--marsala);
    padding-bottom: 3rem;
}
.content-slide > * { max-width: 46rem; }
.content-slide h3 {
    color: var(--marsala);
    font-size: clamp(3.2rem, 4.4vw, 5rem);
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1.1;
    margin: 0 0 1.8rem;
    position: relative;
    padding-bottom: 2rem;
}
/* filete dourado sob o título, à direita */
.content-slide h3::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 6rem; height: 2px;
    background: var(--gold);
}
.content-slide p {
    font-size: clamp(1.5rem, 1.5vw, 1.8rem);
    font-weight: 300;
    letter-spacing: .16em;
    line-height: 1.85;
    color: #6f6052;
    text-transform: uppercase;
}

.slideshow .navigation {
    position: absolute;
    z-index: 6;
    left: 0; right: 0;
    bottom: 2.6rem;
    display: flex;
    justify-content: center;
    gap: 1.4rem;
}
.slideshow .dot {
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--marsala);
    opacity: .55;
    cursor: pointer;
    transition: all .3s;
}
.slideshow .dot:hover { opacity: 1; transform: scale(1.15); }
.slideshow input#img-1:checked ~ .navigation .dot:nth-child(1),
.slideshow input#img-2:checked ~ .navigation .dot:nth-child(2),
.slideshow input#img-3:checked ~ .navigation .dot:nth-child(3),
.slideshow input#img-4:checked ~ .navigation .dot:nth-child(4) { background: var(--marsala); opacity: 1; }

/* ---------- Seções ---------- */
section { padding: 6rem 0; position: relative; overflow-x: clip; }

.box-section .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); /* razão áurea: imagem : texto = 1 : φ */
    gap: var(--sp-5);   /* 6.854rem ≈ base·φ⁴ */
    align-items: center;
    max-width: 106rem;
}
.box-section .content { align-self: center; }
.box-section-reverse .container { direction: rtl; }
.box-section-reverse .container > * { direction: ltr; }

/* imagem padronizada num retrato elegante, cantos arredondados e sombra suave */
.image-radius {
    border-radius: 1.6rem;
    overflow: hidden;
    box-shadow: 0 24px 55px rgba(74, 64, 56, .20);
}
.image-radius img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: 0;
}

/* conteúdo textual das box-sections: ritmo vertical em escala áurea */
.box-section .content { text-align: left; }
.box-section .content .title-section {
    text-align: left;
    margin: 0 0 var(--sp-3);       /* 2.618rem */
}
.box-section .content .title-line { padding-bottom: var(--sp-2); } /* 1.618rem */
.box-section .content .title-line::after { left: 0; transform: none; }
.box-section .content .lead {
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--marsala);
    line-height: 1.618;
    margin: 0 0 var(--sp-3);       /* 2.618rem */
}
.box-section .content p {
    font-size: 1.7rem;
    line-height: 1.9;
    color: var(--text);
    margin: 0 0 var(--sp-4);       /* 4.236rem antes do botão */
    max-width: 42rem;              /* ≈ largura áurea da coluna de texto */
}
.box-section .content .btn-theme { margin-top: 0; }

.content-center {
    max-width: 68rem;
    margin: 0 auto 4.5rem;
    padding: 0 2rem;
    text-align: center;
}
.content-center p { font-size: 1.8rem; line-height: 1.7; color: var(--text); }

.content-section-center { text-align: center; max-width: 82rem; margin: 0 auto; padding: 0 2rem; }

.title-section {
    font-size: clamp(2.6rem, 3.6vw, 3.6rem);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* No HTML original há conteúdo de parágrafo dentro do h2.title-section —
   devolve a esses blocos a aparência de texto corrido */
.title-section .content,
.title-section div, .title-section p {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
    line-height: 1.6;
    margin-top: 2rem;
}

.title-line {
    position: relative;
    padding-bottom: 1.4rem;
    margin-bottom: 2.4rem;
}
.title-line::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 7rem; height: .3rem;
    background: var(--gold);
}
.content-center .title-line::after,
.content-section-center .title-line::after,
.agende-consulta .title-line::after,
.procedimentos .title-line::after { left: 50%; transform: translateX(-50%); }

.section-line { position: relative; }

/* Seção destaque bege com curva svg e grafismos */
.oculoplastica-section {
    background: var(--bege);
    position: relative;
    overflow: hidden;
    padding-top: var(--sp-5);     /* 6.854rem ≈ base·φ⁴ */
    padding-bottom: var(--sp-5);
}
.svg-section {
    position: absolute;
    top: -1px; left: 0;
    height: 8rem !important;
    width: 100%;
    transform: rotate(180deg);
    pointer-events: none;
}
/* Grafismos maiores, ancorados nos pontos áureos da seção (38,2% / 61,8%) */
.grafismo {
    position: absolute;
    width: clamp(34rem, 34vw, 48rem);
    opacity: .9;
    pointer-events: none;
    z-index: 0;
}
/* canto inferior-esquerdo, base alinhada ao ponto áureo vertical (61,8%) */
.grafismo-lf { left: -7rem; top: 61.8%; }
/* canto superior-direito, topo no ponto áureo (38,2%) espelhado */
.grafismo-rt { right: -7rem; bottom: 61.8%; }

.oculoplastica-section .content-center,
.oculoplastica-section .container { position: relative; z-index: 2; }

/* ---------- Botão ---------- */
.btn-theme {
    display: inline-block;
    background: var(--marsala);
    color: var(--white);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 1.4rem 3.6rem;
    border-radius: 3rem;
    border: 2px solid var(--marsala);
    transition: all .3s;
    margin-top: 1rem;
}
.btn-theme:hover {
    background: transparent;
    color: var(--marsala);
}

/* ---------- Procedimentos ---------- */
.procedimentos { text-align: center; }

.procedimentos-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.4rem;
    margin: 4rem auto;
}
.procedimentos-lista img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(74, 64, 56, .16);
    transition: transform .35s, box-shadow .35s;
}
.procedimentos-lista a:hover img {
    transform: translateY(-.5rem);
    box-shadow: 0 14px 32px rgba(74, 64, 56, .24);
}
.procedimentos-lista h3 { font-size: 2.2rem; margin-top: 1.8rem; }

/* ---------- Agende sua consulta (CTA) ---------- */
.agende-consulta {
    background: var(--bege);
    text-align: center;
}
.agende-consulta a { font-weight: 400; color: var(--marsala); }
.agende-consulta a:hover { color: var(--gold-dark); }
.agende-consulta .icon-whatsapp { color: #25d366; }

.agende-consulta-interna { background: var(--bege); text-align: center; padding: 5rem 0; }
.content-agenda-consulta { max-width: 72rem; margin: 0 auto; }

/* ---------- Footer ---------- */
.main-footer {
    background: var(--marsala);
    color: #efe6df;
    padding: 5.5rem 0 4rem;
}
.main-footer .container {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.3fr;
    gap: 4.5rem;
    align-items: start;
}
.main-footer a { color: #f2e4d8; }
.main-footer a:hover { color: var(--gold); }
.main-footer h4 {
    color: var(--white);
    font-size: 2.1rem;
    letter-spacing: .06em;
    margin-bottom: 1.6rem;
}
.main-footer .img-logo { display: block; max-width: 26rem; margin-bottom: 2.4rem; }
.main-footer .img-logo img { filter: brightness(0) invert(1); opacity: .95; }

.main-footer .social {
    list-style: none;
    display: flex;
    gap: 1.8rem;
    margin: 0; padding: 0;
}
.main-footer .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem; height: 4rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    transition: all .3s;
}
.main-footer .social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.main-footer .social [class^="icon-"] { width: 1.7rem; height: 1.7rem; }

.menu-footer .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}
.menu-footer .nav-links li a {
    text-transform: none;
    letter-spacing: .03em;
    font-size: 1.6rem;
    color: #f2e4d8;
    border: none;
}
.menu-footer .nav-links li a:hover { color: var(--gold); }

.email-link { display: inline-block; margin-top: .6rem; text-decoration: underline; }

.sub-footer {
    background: var(--marsala-dark);
    color: #d8c2b4;
    text-align: center;
    padding: 1.6rem 2rem;
    font-size: 1.4rem;
}
.sub-footer p { margin: 0; }

/* ---------- Páginas internas ---------- */
.page-section, .section-interna { padding: 6rem 0; }
.section-white { background: var(--white); }

.breadcrumb {
    font-size: 1.4rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a8a7d;
    margin-bottom: var(--sp-4);
}
.breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: .9rem;
    color: #c0b3a3;
    font-size: 1.6rem;
    line-height: 1;
}
.breadcrumb a { color: #9a8a7d; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--marsala); }
.breadcrumb li:last-child { color: var(--marsala); }

.main-oculoplastica { padding-top: 4rem; }

.mrgbt { margin-bottom: 3rem; }

.content-box { display: flex; gap: 4.5rem; align-items: center; }
.content-box-reverse { flex-direction: row-reverse; }

.info-clinica p { margin-bottom: 1.4rem; }

.page-section-clinica .container { display: flex; gap: 5rem; align-items: center; }

.section-social { text-align: center; padding: 4rem 0; }
.section-social .social {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0 0; padding: 0;
}
.section-social .social a {
    display: flex; align-items: center; justify-content: center;
    width: 4.6rem; height: 4.6rem;
    border: 2px solid var(--marsala);
    border-radius: 50%;
}
.section-social .social a:hover { background: var(--marsala); color: var(--white); }

/* WordPress helpers */
.alignnone, .size-full { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; margin: 2rem auto; text-align: center; }
.wp-caption-text { font-size: 1.4rem; color: #9a8a7d; margin-top: .8rem; }

/* ---------- Abas / conteúdo em tabs (páginas internas) ----------
   Estrutura real: article.tabbed-content.tabs-side > div.tabs (rótulos)
   + div.section-tabs (itens com .item-content) */
/* na página de abas, o container é fluxo normal (intro em cima, abas embaixo) */
.section-tabs-main .container { display: block; }
.section-tabs-main .content-section-center { margin-bottom: var(--sp-5); }

.tabbed-content.tabs-side {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
}
/* lista de procedimentos à ESQUERDA, conteúdo (imagem+texto) à DIREITA */
.tabbed-content .tabs {
    flex: 0 0 32rem;
    order: 1;
    position: sticky;
    top: 2rem;
}
.tabbed-content .section-tabs { flex: 1; order: 2; min-width: 0; }
.tabs ul { list-style: none; margin: 0; padding: 0; }
.tabs li { margin-bottom: .6rem; list-style: none; }
.tabs a, .tabs li > span {
    display: block;
    padding: 1.3rem 1.8rem;
    background: var(--bege-light);
    border-left: .4rem solid transparent;
    border-radius: .4rem;
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
    transition: all .25s;
}
.tabs a:hover,
.tabs .active > a,
.tabs a.active {
    background: var(--bege);
    border-left-color: var(--gold);
    color: var(--marsala);
}

.tabbed-content .item .item-content { display: none; padding: 0; }
.tabbed-content .item.active .item-content { display: block; }

/* no modo lista-lateral: só o procedimento ativo aparece à direita */
.tabbed-content.tabs-side .section-tabs .item { display: none; }
.tabbed-content.tabs-side .section-tabs .item.active { display: block; }

/* título do procedimento ativo */
.section-tabs .item.active .item-content h3 {
    font-size: clamp(2.2rem, 2.6vw, 2.8rem);
    color: var(--marsala);
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid #e2d8ca;
}
.section-tabs .item.active .item-content h4 {
    font-size: 1.9rem;
    color: var(--marsala);
    margin: var(--sp-3) 0 var(--sp-1);
}
.section-tabs .item-content p { margin: 0 0 1.6rem; line-height: 1.9; }

/* mídia do conteúdo nunca estoura */
.item-content img, .item-content iframe { max-width: 100%; height: auto; border-radius: 1rem; }
.item-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.box-content-tab { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.box-content-tab > * { flex: 1; min-width: 22rem; }
.box-content-tab img { border-radius: 1rem; max-width: 100%; height: auto; }

/* ---------- Contato (fundo bege com grafismo, como no design original) ---------- */
.section-contato {
    padding: 6rem 0 5rem;
    background: var(--bege) url('../images/grafismo-left.png') left 60% / 60rem no-repeat;
}
/* o container empilha os blocos; largura confortável e centralizada */
.section-contato > .container {
    position: relative;
    z-index: 1;
    max-width: 116rem;
}

.section-contato .content-section-center { margin-bottom: 4.5rem; }
.section-contato .content-section-center h1,
.section-contato .content-section-center h2 { font-size: 4rem; }
.section-contato .content-section-center p { margin-bottom: .8rem; }

/* bloco central com as 2 colunas: formulário + (mapa/endereço) */
.main-content-contato {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 5.5rem;
    align-items: start;
    margin-bottom: 5rem;
}
.main-content-contato .form { min-width: 0; }

.banner-contato {
    background: var(--bege);
    padding: 5rem 0;
    text-align: center;
}
.banner-footer { background: var(--bege); padding: 4rem 0; text-align: center; }

.box-right-contato { display: flex; flex-direction: column; align-items: center; text-align: center; }
.box-right-contato > p {
    margin-top: 2.4rem;
    font-size: 1.6rem;
    line-height: 1.7;
    color: var(--text);
}

.link-whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-weight: 400;
}
.link-whatsapp .icon-whatsapp { color: #25d366; }

/* Botão flutuante do WhatsApp (recriado pelo main.js) */
.whatsapp-flutuante {
    position: fixed;
    right: 2.4rem;
    bottom: 2.4rem;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: #25d366;
    color: var(--white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: transform .25s;
}
.whatsapp-flutuante:hover { transform: scale(1.08); color: var(--white); }
.whatsapp-flutuante [class^="icon-"] { width: 2.8rem; height: 2.8rem; }

/* Mapa redondo, como no design original */
.mapa-clinica {
    width: min(38rem, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(74, 64, 56, .22);
    border: .6rem solid var(--white);
}
.mapa-clinica iframe, .mapa-clinica img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* ---------- Formulário (Contact Form 7) ---------- */
.form { min-width: 0; }

/* cada grupo campo = um <div> dentro do form; espaçamento uniforme */
.wpcf7-form > div { margin-bottom: 2rem; }
.wpcf7-form > div:last-child { margin-bottom: 0; }
.wpcf7-form > div[style*="display: none"],
.wpcf7-form > div[style*="display:none"] { margin: 0; }

.wpcf7-form label {
    display: block;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .8rem;
    color: var(--marsala);
}
/* o <br> após o label vira sem efeito (usamos margin) */
.wpcf7-form label + br { display: none; }
.wpcf7-form-control-wrap { display: block; }

.wpcf7-form-control {
    display: block;
    width: 100%;
    padding: 1.4rem 1.6rem;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.6rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid #d9d0c1;
    border-radius: .6rem;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
}
.wpcf7-form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(189, 154, 58, .18);
}

textarea.wpcf7-form-control { min-height: 16rem; resize: vertical; }

.wpcf7-submit {
    width: auto;
    background: var(--marsala);
    color: var(--white);
    font-size: 1.5rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 1.4rem 4.2rem;
    border: 2px solid var(--marsala);
    border-radius: 3rem;
    cursor: pointer;
    transition: all .3s;
}
.wpcf7-submit:hover { background: transparent; color: var(--marsala); }

.screen-reader-response { position: absolute; clip: rect(0 0 0 0); }
.wpcf7-response-output { margin-top: 2rem; font-size: 1.5rem; }

/* ============================================================
   RESPONSIVO — breakpoints
   ============================================================ */

/* Laptop / telas médias */
@media screen and (max-width: 1200px) {
    .container { max-width: 100%; padding: 0 3rem; }
    .box-section .container { gap: 4rem; }
    .content-slide { margin-left: 44%; }
    .main-content-contato { gap: 4rem; }
}

/* Tablet */
@media screen and (max-width: 960px) {

    .header .logo { width: auto; max-width: 20rem; }

    .hamburger { display: inline-block; }

    .header nav .container {
        flex-wrap: wrap;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
    }

    /* menu mobile: painel branco sólido ao abrir, mesmo na home */
    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: 1.4rem;
        padding: .5rem 0;
        background: var(--white);
        border-radius: .6rem;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; }
    .header:not(.header-interna) .nav-links li a,
    .nav-links li a {
        display: block;
        padding: 1.4rem 1.8rem;
        color: var(--marsala);
        text-shadow: none;
        border-bottom: 1px solid #eee4d8;
    }
    .nav-links li:last-child a { border-bottom: none; }
    /* hamburger sempre visível (marsala) sobre a foto na home */
    .header:not(.header-interna) .hamburger-inner,
    .header:not(.header-interna) .hamburger-inner::before,
    .header:not(.header-interna) .hamburger-inner::after { background: var(--marsala); }

    /* Hero adaptado: foto centralizada, texto sobre painel bege embaixo */
    .slideshow .images { height: clamp(40rem, 70vw, 52rem); }
    .slideshow .image {
        background-position: center top;
        align-items: flex-end;
        justify-content: center;
    }
    .slideshow .image::before {
        background: linear-gradient(to top, var(--bege) 0%, rgba(226,220,208,.9) 26%, rgba(226,220,208,0) 58%);
    }
    .slideshow .image::after { display: none; }
    .slideshow .images::after { height: 4rem; }
    .content-slide {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        margin: 0;
        align-items: center;
        text-align: center;
        padding: 0 2rem 6rem;
    }
    .content-slide > * { max-width: 100%; }
    .content-slide h3 { padding-bottom: 1.6rem; }
    .content-slide h3::after { left: 50%; right: auto; transform: translateX(-50%); }
    .content-slide p { margin: 0 auto; }

    section { padding: 4.5rem 0; }

    /* seções de 2 colunas empilham */
    .box-section .container {
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 52rem;
    }
    .box-section-reverse .container { direction: ltr; }
    .box-section .content { text-align: center; }
    .box-section .content p { margin-left: auto; margin-right: auto; }
    .box-section .content .btn-theme { display: inline-block; }

    .content-box,
    .content-box-reverse,
    .page-section-clinica .container {
        flex-direction: column;
        gap: 3rem;
    }
    .box-section .image { width: 100%; }

    /* Contato: 1 coluna, tudo centralizado */
    .main-content-contato { grid-template-columns: 1fr; gap: 4rem; justify-items: center; }
    .main-content-contato .form { width: 100%; max-width: 52rem; }
    .box-right-contato { width: 100%; }
    .section-contato { background-size: 90rem; }

    .procedimentos-lista { grid-template-columns: 1fr 1fr; gap: 2.4rem; }

    .main-footer .container { grid-template-columns: 1fr 1fr; gap: 3.5rem; }

    /* MOBILE: vira sanfona (accordion) — título clicável + conteúdo abre embaixo dele */
    .tabbed-content.tabs-side { flex-direction: column; gap: 0; }
    .tabbed-content .tabs { display: none; }                 /* esconde a lista lateral */
    .tabbed-content .section-tabs { order: 1; width: 100%; }
    .tabbed-content.tabs-side .section-tabs .item {          /* todos os itens visíveis */
        display: block;
        border-bottom: 1px solid #e6ddd0;
    }
    .tabbed-content .section-tabs .item .item-content { display: block; padding: 0; }
    /* o h3 (título) vira o cabeçalho clicável, sempre visível */
    .tabbed-content .section-tabs .item .item-content h3:first-of-type {
        margin: 0;
        padding: 1.8rem 3.5rem 1.8rem 0;
        border: none;
        cursor: pointer;
        position: relative;
        font-size: 1.9rem;
        transition: color .2s;
    }
    .tabbed-content .section-tabs .item .item-content h3:first-of-type::after {
        content: "+";
        position: absolute;
        right: .4rem; top: 50%;
        transform: translateY(-50%);
        font-family: 'Josefin Sans', sans-serif;
        font-size: 2.6rem;
        font-weight: 300;
        color: var(--gold-dark);
        line-height: 1;
    }
    .tabbed-content .section-tabs .item.active .item-content h3:first-of-type { color: var(--marsala); }
    .tabbed-content .section-tabs .item.active .item-content h3:first-of-type::after { content: "\2212"; }
    /* colapsado: mostra só o título; ativo: mostra tudo */
    .tabbed-content .section-tabs .item:not(.active) .item-content > *:not(h3) { display: none; }
    .tabbed-content .section-tabs .item.active .item-content { padding-bottom: 2.6rem; }

    .grafismo { width: 18rem; opacity: .35; }
}

/* Mobile grande */
@media screen and (max-width: 768px) {
    .container { padding: 0 2rem; }
    section { padding: 4rem 0; }
    .procedimentos-lista { grid-template-columns: 1fr; gap: 3rem; }
    .procedimentos-lista img { aspect-ratio: 16 / 10; }
    .main-footer { padding: 4.5rem 0 3rem; }
    .main-footer .container { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .main-footer .logo, .menu-footer .nav-links { align-items: center; }
    .main-footer .social { justify-content: center; }
    .menu-footer .nav-links { align-items: center; }
    .content-slide h3 { font-size: clamp(2.4rem, 8vw, 3.4rem); }
}

/* Mobile */
@media screen and (max-width: 480px) {
    html { font-size: 56.25%; }
    .container { padding: 0 1.6rem; }
    .header .logo { max-width: 17rem; }
    .slideshow .images { height: clamp(38rem, 92vw, 46rem); }
    .content-slide { padding-bottom: 6rem; }
    .content-slide p { font-size: 1.4rem; letter-spacing: .08em; }
    .btn-theme { padding: 1.2rem 2.8rem; font-size: 1.4rem; }
    .title-line::after { width: 5rem; }
    .mapa-clinica { width: min(30rem, 100%); }
    .section-social .social { gap: 1.4rem; }
    .section-social .social a { width: 4rem; height: 4rem; }
    .whatsapp-flutuante { right: 1.4rem; bottom: 1.4rem; width: 4.8rem; height: 4.8rem; }
    .whatsapp-flutuante [class^="icon-"] { width: 2.4rem; height: 2.4rem; }
    .wpcf7-submit { width: 100%; }
}