/* The approved hero remains in styles.css; these rules complete the page. */
:root { --line: #b7c5be; --ease: cubic-bezier(.22, 1, .36, 1); }
section { scroll-margin-top: 24px; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { touch-action: manipulation; }
button { font-family: var(--sans); }
:focus-visible { outline: 3px solid #3b9284; outline-offset: 6px; }
header { position: relative; z-index: 8; background: var(--paper); }
.brand-crop { position: relative; display: block; width: 166px; height: 76px; overflow: hidden; flex-shrink: 0; mix-blend-mode: multiply; }
.brand-crop img, .closing .brand-crop img, footer .brand-crop img { position: absolute; width: 280px; height: 212px; max-width: none; left: -62px; top: -54px; margin: 0; filter: none; opacity: 1; }
nav { gap: 22px; }
.book { padding: 12px 18px; }
.hero-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; transition: transform 650ms ease-out; }
.hero-light::before { content: ''; position: absolute; left: calc(66% - min(340px,55vw)); top: 48%; width: min(680px,110vw); height: 540px; margin-top: -270px; background: radial-gradient(ellipse, #b2ffe49c 0%, #79e9d54d 24%, #70dfcf1a 43%, transparent 67%); }
.hero-content, .hero-note, .motion-toggle { z-index: 2; }
.hero-image { animation: none; }
.motion-toggle { position: absolute; bottom: 24px; left: clamp(24px,7vw,108px); border: 1px solid #b2c7cc; border-radius: 30px; padding: 7px 12px; color: #edf4ef; background: #102b3d99; font-size: 10px; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.hero-note { bottom: 37px; }
.hero-content { max-width: 960px; padding-top: clamp(60px,9vh,100px); padding-bottom: 110px; }
.hero h1 { font-size: clamp(52px,5.4vw,84px); }
h2 i { color: var(--forest); }
.hero i, .digital-story h2 i { color: inherit; }
.manifesto { padding-top: 120px; padding-bottom: 120px; }
.manifesto h2 { line-height: 1.08; }
.manifesto-identity { padding-top: 24px; }
.manifesto .manifesto-identity p { font: 11px/1.7 var(--sans); max-width: 170px; margin: 25px 0 0; color: var(--forest); }
.manifesto-identity strong { display: block; font: 32px/1.2 var(--serif); margin-bottom: 5px; }
.manifesto div .overline { font: 11px 'DM Mono',monospace; margin: 0 0 23px; }
.digital-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--ink); color: var(--paper); }
.digital-story > *, .team-story > * { min-width: 0; }
.digital-story-copy { padding: clamp(60px,8vw,130px) clamp(30px,7vw,108px); align-self: center; }
.digital-story h2 { font-size: clamp(40px,4.8vw,72px); line-height: 1.04; }
.digital-story h2 i { color: #acd2bf; }
.digital-story-copy > p:not(.overline) { color: #dae5df; font-size: 16px; max-width: 450px; margin: 30px 0; }
.digital-story .inline { display: inline-block; padding: 12px 0; }
.team-scene, .carlos-scene { position: relative; margin: 0; overflow: hidden; }
.team-scene { width: 100%; aspect-ratio: 3 / 4; min-height: 660px; }
.team-scene img, .carlos-scene img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team-scene figcaption, .carlos-scene figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 45px 28px 24px; margin: 0; font: 11px/1.6 var(--sans); color: white; background: linear-gradient(transparent, #102b46d9); }
.technology-band, .patient-journey { padding: 105px max(30px,calc((100vw - 1160px)/2)); background: var(--mist); }
.section-heading h2 { font-size: clamp(36px,4.4vw,64px); line-height: 1.06; }
.section-heading > p:not(.overline) { max-width: 480px; margin: 28px 0 0; }
.technology-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; margin-top: 58px; }
.technology-grid article { border-top: 1px solid #90a99d; padding-top: 20px; }
.index { font: 10px/1.6 'DM Mono',monospace; letter-spacing: .07em; color: var(--forest); }
.technology-grid h3 { font: 26px/1.16 var(--serif); letter-spacing: -.02em; margin: 24px 0 15px; }
.technology-grid p { font-size: 14px; line-height: 1.7; margin: 0; }
.treatments { gap: 90px; padding-top: 120px; padding-bottom: 120px; }
.treatments h2 { line-height: 1.04; }
.text-link { display: inline-block; font: 600 13px/1.6 var(--sans); text-underline-offset: 7px; padding: 12px 0; }
.treatment-intro .text-link { margin-top: 25px; }
.service-groups { border-top: 1px solid var(--line); }
.service-groups details { border-bottom: 1px solid var(--line); }
.service-groups summary { display: grid; grid-template-columns: 25px 1fr 20px; gap: 15px; align-items: start; padding: 27px 0; cursor: pointer; list-style: none; font: 29px/1.16 var(--serif); letter-spacing: -.025em; }
summary::-webkit-details-marker { display: none; }
.service-groups summary .index { padding-top: 7px; }
.service-groups summary small { display: block; font: 11px/1.7 var(--sans); color: #526960; letter-spacing: 0; margin-top: 10px; }
summary b { font: 400 24px/1 var(--sans); transition: transform 200ms var(--ease); }
details[open] > summary b { transform: rotate(45deg); }
.service-content { padding: 0 30px 22px 40px; }
.service-content article + article { margin-top: 22px; }
.service-content h3 { font: 700 14px/1.5 var(--sans); margin: 0 0 5px; }
.service-content p { font-size: 13px; line-height: 1.7; margin: 0; color: #42564e; }
.smile-story { position: relative; min-height: 720px; background: #dce5d9; overflow: hidden; }
.smile-story > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.smile-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#e1e8dcea 0%,#e1e8dcb3 36%,transparent 66%); pointer-events: none; }
.smile-copy { position: relative; z-index: 1; max-width: 660px; padding: 125px clamp(30px,7vw,108px); }
.smile-copy h2 { font-size: clamp(44px,5.5vw,80px); line-height: 1.04; }
.smile-copy p:not(.overline) { max-width: 360px; margin: 28px 0 18px; }
.image-credit { position: absolute; z-index: 1; bottom: 18px; right: 22px; max-width: calc(100% - 44px); font-size: 10px; color: white; background: #112b46c9; padding: 5px 10px; }
.patient-journey { background: var(--paper); }
.journey-steps { margin: 65px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }
.journey-steps li { padding-top: 22px; border-top: 1px solid var(--line); }
.journey-steps .index { font-size: 15px; }
.journey-steps h3 { font: 28px/1.15 var(--serif); margin: 24px 0 15px; }
.journey-steps p { font-size: 14px; margin: 0; line-height: 1.8; }
.team-story { display: grid; grid-template-columns: .92fr 1.08fr; background: var(--warm); }
.carlos-scene { min-height: 760px; }
.carlos-scene img { object-position: center center; }
.team-copy { padding: 100px clamp(30px,6vw,95px); align-self: center; }
.team-copy h2 { font-size: clamp(37px,4.5vw,65px); line-height: 1.06; }
.team-copy > p:not(.overline) { margin-top: 28px; max-width: 460px; }
.clinicians { margin-top: 40px; }
.clinicians article { border-top: 1px solid #a4b0a9; padding: 20px 0; }
.clinicians h3 { font: 26px/1.2 var(--serif); margin: 0 0 7px; }
.clinicians p { font-size: 12px; margin: 0; }
.team-copy .team-note { font-size: 12px; }
.units { padding-top: 115px; padding-bottom: 115px; }
.units h2 { line-height: 1.05; }
.unit-grid { gap: 80px; }
.unit-grid article { padding-top: 30px; }
.unit-grid h3 { margin-top: 10px; }
.unit-grid .phone { text-decoration: none; font-size: 16px; font-weight: 500; }
.unit-grid > article > a { display: inline-block; padding: 12px 0; }
.faq { background: #edf1eb; gap: 70px; }
.faq h2 { line-height: 1.06; }
.faq-intro { max-width: 280px; margin-top: 28px; font-size: 14px; }
.questions summary { align-items: start; gap: 20px; font-size: 23px; line-height: 1.3; padding-top: 24px; }
.questions summary b { flex-shrink: 0; }
.questions p { line-height: 1.8; padding-right: 25px; }
.closing { background: #d5e4db; color: var(--ink); padding: 100px 25px 115px; }
.closing .closing-brand { margin: 0 auto 35px; }
.closing .overline { margin: 0 0 25px; font-size: 11px; }
.closing h2 { line-height: 1.04; }
.closing .primary { background: var(--ink); color: white; padding: 15px 23px; }
.closing .secondary { border: 1px solid var(--ink); border-radius: 40px; padding: 15px 23px; text-decoration: none; color: var(--ink); background: transparent; }
footer { gap: 25px; padding-bottom: 105px; }
footer div p + p { margin-top: 9px; }
footer a { text-underline-offset: 4px; }
.whatsapp-contact { position: fixed; right: 24px; bottom: 24px; z-index: 15; }
.whatsapp-contact > summary { display: flex; align-items: center; gap: 9px; list-style: none; border: 1px solid #b6d6c6; border-radius: 40px; background: #185c4c; color: white; padding: 14px 20px; min-height: 52px; cursor: pointer; font-size: 13px; font-weight: 700; box-shadow: 0 4px 18px #112b4624; }
.contact-close { display: none; font-size: 24px; line-height: 18px; }
.whatsapp-contact[open] .contact-close { display: inline; }
.contact-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: min(300px,calc(100vw - 40px)); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 15px 50px #112b4630; }
.contact-panel > p { font: 25px/1.15 var(--serif); margin: 0 0 18px; }
.contact-panel a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; text-decoration: none; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.contact-panel small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; }
@media (hover:hover) and (pointer:fine) {
  .primary, .book, .whatsapp-contact > summary { transition: transform 200ms var(--ease),box-shadow 200ms var(--ease); }
  .primary:hover, .book:hover, .whatsapp-contact > summary:hover { transform: translateY(-2px); box-shadow: 0 4px 16px #112b4622; }
  .text-link:hover, .inline:hover { text-decoration-thickness: 2px; }
}
@media (prefers-reduced-motion:no-preference) {
  .motion-ready .hero-image { animation: breathe 14s ease-in-out infinite alternate; }
  .motion-ready .hero-light::before { animation: light-drift 6s ease-in-out infinite alternate; }
  .contact-panel { animation: panel-enter 180ms var(--ease); }
  @keyframes light-drift { from { transform: translate(-90px,50px) scale(.85); opacity: .5; } to { transform: translate(110px,-60px) scale(1.15); opacity: 1; } }
  @keyframes panel-enter { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.motion-paused .hero-image, .motion-paused .hero-light::before { animation-play-state: paused; }
.motion-paused .hero-light { transition: none; }
@media (prefers-reduced-motion:reduce) {
  .hero-light { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width:1000px) {
  header { height: 86px; }
  .menu { display: flex; align-items: center; gap: 12px; padding: 14px 0 14px 18px; }
  nav { display: none; position: absolute; z-index: 5; top: 86px; left: 0; right: 0; padding: 25px; background: var(--paper); flex-direction: column; align-items: stretch; box-shadow: 0 15px 20px #112b4615; }
  nav.open { display: flex; gap: 6px; }
  nav a { padding: 12px 0; }
  nav .book { padding: 12px 18px; align-self: start; margin-top: 8px; }
  .technology-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .team-scene { min-height: 680px; }
  .digital-story-copy { padding: 65px 35px; }
  .team-copy { padding: 65px 35px; }
  .team-story { grid-template-columns: 1fr; }
  .carlos-scene { min-height: 0; aspect-ratio: 4/5; }
  .treatments { gap: 45px; }
  .smile-copy { padding-left: 40px; max-width: 510px; }
}
@media (max-width:750px) {
  header { padding: 5px 23px; height: 80px; }
  nav { top: 80px; }
  body .hero-content { padding-bottom: 180px; }
  .hero-note { bottom: 55px; width: 178px; }
  .motion-toggle { bottom: 17px; }
  .manifesto { padding: 75px 25px; gap: 20px; }
  .manifesto h2 { font-size: clamp(36px,9vw,53px); }
  .manifesto-identity { display: flex; align-items: center; gap: 28px; padding: 0 0 25px; border-bottom: 1px solid var(--line); }
  .manifesto .manifesto-identity p { margin: 0; }
  .digital-story, .team-story { grid-template-columns: 1fr; }
  .digital-story-copy { padding: 70px 25px; }
  .digital-story h2 { font-size: clamp(38px,10vw,58px); }
  .team-scene { min-height: 0; aspect-ratio: 3/4; }
  .team-scene img { object-fit: contain; }
  .technology-band, .patient-journey { padding: 75px 25px; }
  .technology-grid { margin-top: 40px; gap: 35px 24px; }
  .technology-grid h3 { font-size: 23px; }
  .technology-grid p { font-size: 13px; }
  .treatments { padding: 80px 25px; }
  .treatments h2 br { display: none; }
  .treatments h2 { font-size: 43px; max-width: 410px; }
  .service-groups summary { font-size: 25px; gap: 10px; grid-template-columns: 24px 1fr 18px; }
  .service-content { padding-left: 34px; padding-right: 15px; }
  .smile-story { min-height: 800px; display: flex; align-items: end; }
  .smile-story > img { object-position: 74% top; height: 490px; top: 0; }
  .smile-story::after { background: linear-gradient(0deg,#dce5d9 4%,#dce5d9 34%,#dce5d9e0 44%,transparent 65%); }
  .smile-copy { padding: 390px 25px 80px; max-width: none; }
  .smile-copy h2 { font-size: 48px; }
  .smile-copy p:not(.overline) { max-width: 380px; }
  .image-credit { bottom: 16px; left: 25px; right: auto; font-size: 9px; }
  .journey-steps { grid-template-columns: 1fr; gap: 35px; margin-top: 40px; }
  .journey-steps h3 { margin-top: 15px; }
  .carlos-scene { min-height: 0; aspect-ratio: 4/5; }
  .team-copy { padding: 70px 25px; }
  .units { padding: 80px 25px; }
  .unit-grid { gap: 45px; }
  .faq { padding: 75px 25px; }
  .questions summary { font-size: 22px; }
  .closing { padding: 75px 25px 85px; }
  .closing h2 { font-size: clamp(36px,9vw,52px); }
  .closing h2 br { display: none; }
  .closing > div { flex-direction: column; align-items: center; }
  .closing > div a { width: min(100%,310px); }
  footer { padding: 30px 25px 100px; gap: 25px; }
  .whatsapp-contact { bottom: 16px; right: 16px; }
  .whatsapp-contact > summary { padding: 13px 17px; }
}
@media (max-width:370px) {
  .technology-grid { grid-template-columns: 1fr; }
  .hero .overline { font-size: 10px; }
  .treatments h2 { font-size: 38px; }
  .service-groups summary { font-size: 23px; }
}