/* DLS · PULSO HUMANO · PILOTO COPY-FIRST
   Tres páginas construidas de forma independiente. */
.pilot-page {
  --pilot-pad: clamp(104px, 10vw, 158px);
  overflow: clip;
  background: var(--paper);
}
.pilot-page h1,
.pilot-page h2,
.pilot-page h3,
.pilot-page p,
.pilot-page li,
.pilot-page a,
.pilot-page span,
.pilot-page strong { hyphens: none; overflow-wrap: normal; word-break: normal; }
.pilot-shell { width: min(calc(100% - 64px), 1280px); margin-inline: auto; }
.pilot-header {
  position: relative;
  z-index: 80;
  display: grid;
  grid-template-columns: 184px 1fr auto;
  grid-template-areas: "brand main cta" "switch switch switch";
  gap: 10px 34px;
  align-items: center;
  min-height: 142px;
  padding: 10px clamp(24px, 4vw, 70px) 0;
  border-bottom: 1px solid rgba(79,79,79,.18);
  background: rgba(255,255,255,.98);
}
.pilot-brand { grid-area: brand; display: block; width: 184px; padding: 3px 7px; background: #fff; }
.pilot-brand img { aspect-ratio: 650/362; object-fit: contain; }
.pilot-main-nav { grid-area: main; display: flex; justify-content: center; gap: clamp(18px,2.3vw,38px); }
.pilot-main-nav a { color: #485254; font-size: 13px; font-weight: 700; text-decoration: none; }
.pilot-header-cta { grid-area: cta; display: inline-flex; gap: 18px; align-items: center; padding: 13px 18px; background: var(--petrol); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.pilot-switch { grid-area: switch; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-self: stretch; border-top: 1px solid var(--line); }
.pilot-switch a { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 48px; border-right: 1px solid var(--line); color: #526062; font-size: 12px; font-weight: 750; line-height: 1.25; text-decoration: none; }
.pilot-switch a:last-child { border-right: 0; }
.pilot-switch a span { color: var(--coral-deep); font-size: 10px; letter-spacing: .1em; }
.pilot-switch a.is-active { background: var(--petrol); color: #fff; }
.pilot-switch a.is-active span { color: var(--coral); }
.pilot-footer { display: grid; grid-template-columns: 190px 1fr auto; gap: 36px; align-items: center; min-height: 190px; padding: 42px max(32px,calc((100vw - 1280px)/2)); background: #fff; }
.pilot-footer img { width: 170px; }
.pilot-footer p { margin: 0; color: #647072; font-size: 13px; }
.pilot-footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: flex-end; }
.pilot-footer a { color: var(--petrol); font-size: 13px; font-weight: 750; }

.pilot-eyebrow,
.pilot-kicker { display: block; color: var(--coral); font-size: 11px; font-weight: 850; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.pilot-section-head { display: grid; grid-template-columns: 68px minmax(0,920px); gap: 24px; margin-bottom: 56px; }
.pilot-section-head > span { padding-top: 11px; color: var(--coral-deep); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pilot-section-head h2 { color: var(--petrol); font: 500 clamp(52px,5.2vw,76px)/.98 var(--serif); letter-spacing: -.042em; }
.pilot-prose { max-width: 66ch; }
.pilot-prose p { color: #424b4d; font-size: 18px; line-height: 1.68; }
.pilot-prose p:last-child { margin-bottom: 0; }
.pilot-prose ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 34px; margin: 32px 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.pilot-prose li { border-bottom: 1px solid var(--line); padding: 13px 0; color: #424b4d; font-size: 16.5px; line-height: 1.45; }
.pilot-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.pilot-action { display: inline-flex; gap: 28px; align-items: center; width: fit-content; border: 1px solid var(--petrol); padding: 14px 20px; background: var(--petrol); color: #fff; font-size: 13px; font-weight: 850; text-decoration: none; }
.pilot-action span { transition: transform .2s ease; }
.pilot-action:hover span { transform: translateX(4px); }
.pilot-action.is-light { border-color: #fff; background: #fff; color: var(--petrol); }
.pilot-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 24px; }
.pilot-text-link { display: inline-flex; gap: 12px; align-items: center; border-bottom: 1px solid currentColor; color: var(--petrol); font-size: 14px; font-weight: 800; text-decoration: none; }
.pilot-contents { position: sticky; z-index: 40; top: 0; border-bottom: 1px solid rgba(79,79,79,.22); background: rgba(255,255,255,.97); backdrop-filter: blur(16px); }
.pilot-contents summary { display: flex; gap: 24px; align-items: center; justify-content: space-between; width: min(calc(100% - 64px),1280px); min-height: 66px; margin-inline: auto; color: var(--petrol); cursor: pointer; list-style: none; }
.pilot-contents summary::-webkit-details-marker { display: none; }
.pilot-contents summary span { font: 500 22px/1.1 var(--serif); }
.pilot-contents summary b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.pilot-contents summary b::after { content: " +"; color: var(--coral-deep); }
.pilot-contents[open] summary b::after { content: " −"; }
.pilot-contents nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: min(calc(100% - 64px),1280px); margin-inline: auto; padding-bottom: 24px; }
.pilot-contents button { display: grid; grid-template-columns: 30px 1fr; gap: 8px; min-width: 0; border: 0; border-top: 1px solid var(--line); padding: 13px 12px 13px 0; background: transparent; color: #4d595b; font: 750 11px/1.35 var(--sans); text-align: left; cursor: pointer; }
.pilot-contents button span { color: var(--coral-deep); }
.pilot-proof { padding: var(--pilot-pad) max(32px,calc((100vw - 1280px)/2)); background: var(--rose); }
.pilot-proof-image { position: relative; display: flex; min-height: 520px; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: clamp(34px,5vw,70px); background: linear-gradient(140deg,#315b62,#092f37); color: #fff; }
.pilot-proof-image::before { content: ""; position: absolute; inset: 11% 8% 25% 42%; border: 1px solid rgba(230,180,174,.62); border-radius: 50%; }
.pilot-proof-image span { position: relative; z-index: 2; color: var(--coral); font-size: 11px; font-weight: 850; letter-spacing: .13em; }
.pilot-proof-image strong { position: relative; z-index: 2; max-width: 760px; margin-top: 22px; font: 500 clamp(46px,5vw,70px)/.98 var(--serif); }
.pilot-faq { padding-block: var(--pilot-pad); }
.pilot-faq-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 44px; margin-top: 55px; border-top: 1px solid var(--line); }
.pilot-faq details { border-bottom: 1px solid var(--line); }
.pilot-faq summary { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 26px 0; color: var(--petrol); font: 500 27px/1.14 var(--serif); cursor: pointer; list-style: none; }
.pilot-faq summary::-webkit-details-marker { display: none; }
.pilot-faq summary span { padding-top: 6px; color: var(--coral-deep); font: 850 10px/1 var(--sans); }
.pilot-faq-answer { padding: 0 0 28px 46px; }
.pilot-faq-answer p { font-size: 17px; line-height: 1.64; }
.pilot-start { padding-block: clamp(110px,12vw,180px); background: var(--petrol-deep); color: #fff; }
.pilot-start h2 { max-width: 1020px; margin: 24px 0 34px; font: 500 clamp(58px,6.5vw,92px)/.95 var(--serif); letter-spacing: -.045em; }
.pilot-start-copy { max-width: 64ch; }
.pilot-start-copy p { color: #fff; font-size: 19px; }
.pilot-start-copy .pilot-action { margin-top: 18px; border-color: #fff; background: #fff; color: var(--petrol); }

/* 01 · MEDICINA ESTÉTICA FACIAL · ÁREA / HUB */
.facial-hub { --hub-ink: #063942; }
.facial-hero { position: relative; display: grid; grid-template-columns: minmax(570px,1.02fr) minmax(500px,.98fr); min-height: 900px; overflow: hidden; background: var(--petrol-deep); color: #fff; }
.facial-hero-copy { position: relative; z-index: 4; align-self: center; max-width: 820px; padding: 82px clamp(38px,6vw,102px) 105px; }
.facial-hero h1 { margin: 24px 0 34px; font: 500 clamp(76px,7vw,108px)/.9 var(--serif); letter-spacing: -.052em; }
.facial-hero-prose { max-width: 64ch; }
.facial-hero-prose p { color: #ecf1ef; font-size: 18.5px; line-height: 1.62; }
.facial-hero-prose p:first-child { color: #fff; font: 500 29px/1.34 var(--serif); }
.facial-hero-prose p:last-child { color: #fff; font-weight: 800; }
.facial-hero-image { position: relative; min-height: 900px; }
.facial-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,47,56,.52),transparent 32%),linear-gradient(0deg,rgba(3,47,56,.5),transparent 38%); }
.facial-hero-image img { height: 100%; object-fit: cover; object-position: 48% center; filter: saturate(.72) contrast(1.04); }
.facial-hero-image figcaption { position: absolute; z-index: 2; right: 28px; bottom: 28px; color: #fff; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.facial-hero-orbit { position: absolute; z-index: 5; right: clamp(22px,3vw,52px); bottom: 88px; left: 53%; display: flex; flex-wrap: wrap; gap: 8px; }
.facial-hero-orbit span { border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 9px 14px; color: #fff; font-size: 11px; font-weight: 800; }
.facial-territory { display: grid; grid-template-columns: minmax(520px,1fr) minmax(440px,.78fr); gap: 40px clamp(60px,7vw,110px); align-items: center; padding-block: var(--pilot-pad); }
.facial-territory > .pilot-section-head { grid-column: 1 / -1; }
.facial-compass { position: relative; min-height: 650px; }
.facial-compass figure { position: absolute; inset: 15%; overflow: hidden; border-radius: 50%; }
.facial-compass img { height: 100%; object-fit: cover; filter: saturate(.62); }
.compass-ring { position: absolute; inset: 0; border: 1px solid var(--coral-deep); border-radius: 50%; }
.compass-ring::before { content: ""; position: absolute; inset: 17%; border: 1px solid rgba(7,71,83,.28); border-radius: 50%; }
.compass-ring span { position: absolute; padding: 8px 13px; background: var(--paper); color: var(--petrol); font: 500 25px/1 var(--serif); }
.compass-ring span:nth-child(1) { top: 3%; left: 39%; }
.compass-ring span:nth-child(2) { top: 45%; right: -2%; }
.compass-ring span:nth-child(3) { bottom: 3%; left: 34%; }
.compass-ring span:nth-child(4) { top: 45%; left: -1%; }
.facial-territory-copy h3 { max-width: 620px; margin-bottom: 32px; color: var(--petrol); font: 500 36px/1.12 var(--serif); }
.facial-dls { display: grid; grid-template-columns: minmax(420px,.78fr) minmax(560px,1.22fr); gap: clamp(65px,8vw,130px); align-items: center; padding: var(--pilot-pad) max(32px,calc((100vw - 1280px)/2)); background: #234b53; color: #fff; }
.facial-dls figure img { aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.facial-dls figcaption { margin-top: 12px; color: #dce4e2; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.facial-dls .pilot-section-head h2,
.facial-dls .pilot-prose p { color: #fff; }
.facial-dls .pilot-section-head > span { color: var(--coral); }
.facial-dls-copy h3 { max-width: 690px; margin: -20px 0 32px 92px; color: #fff; font: 500 34px/1.16 var(--serif); }
.facial-dls-copy .pilot-prose { margin-left: 92px; }
.facial-decision-line { grid-column: 1/-1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 20px; align-items: center; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); padding: 30px 0; }
.facial-decision-line span { font: 500 clamp(22px,2.3vw,34px)/1.1 var(--serif); }
.facial-decision-line i { height: 1px; background: var(--coral); }
.facial-needs { padding-block: var(--pilot-pad); }
.facial-need-list { border-top: 1px solid var(--line); }
.facial-need { display: grid; grid-template-columns: 52px minmax(300px,.72fr) minmax(360px,1fr) auto; gap: 24px 34px; align-items: center; min-height: 150px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.facial-need > span { color: var(--coral-deep); font-size: 11px; font-weight: 850; }
.facial-need h3 { color: var(--petrol); font: 500 34px/1.05 var(--serif); }
.facial-need .pilot-prose p { margin: 0; font-size: 16.5px; line-height: 1.52; }
.facial-need .pilot-links { margin: 0; }
.facial-treatments { padding-block: var(--pilot-pad); background: var(--petrol-deep); color: #fff; }
.facial-treatments .pilot-section-head h2,
.facial-treatments .pilot-prose p { color: #fff; }
.facial-treatments .pilot-section-head > span { color: var(--coral); }
.facial-treatment-intro { max-width: 700px; margin: -18px 0 56px 92px; }
.facial-treatment-field { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; min-height: 660px; }
.facial-treatment-field article { position: relative; z-index: 2; min-height: 300px; border: 1px solid rgba(255,255,255,.28); padding: 32px; background: rgba(255,255,255,.03); }
.facial-treatment-field article:nth-child(3) { padding-right: 120px; }
.facial-treatment-field article:nth-child(4) { padding-left: 120px; }
.facial-treatment-field article > span { color: var(--coral); font-size: 11px; font-weight: 850; }
.facial-treatment-field h3 { margin: 38px 0 20px; color: #fff; font: 500 40px/1 var(--serif); }
.treatment-copy p { color: #dce5e3; font-size: 16.5px; line-height: 1.56; }
.treatment-center { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; place-items: center; width: 210px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid var(--coral); border-radius: 50%; background: var(--petrol-deep); text-align: center; }
.treatment-center span { max-width: 13ch; color: #fff; font: 500 23px/1.1 var(--serif); }
.facial-treatments .pilot-text-link { color: #fff; }
.facial-evolution { display: grid; grid-template-columns: minmax(500px,.9fr) minmax(520px,1.1fr); gap: clamp(65px,8vw,130px); align-items: center; padding-block: var(--pilot-pad); }
.facial-evolution-copy h3 { margin: -18px 0 30px 92px; color: var(--petrol); font: 500 35px/1.12 var(--serif); }
.facial-evolution-copy .pilot-prose { margin-left: 92px; }
.facial-evolution-track { display: grid; gap: 15px; }
.facial-evolution-track span { border-bottom: 1px solid var(--line); padding: 23px 0; color: var(--petrol); font: 500 clamp(31px,3vw,45px)/1 var(--serif); }
.facial-evolution-track i { width: 1px; height: 25px; margin: -15px 0 -15px 28px; background: var(--coral-deep); }
.facial-evolution-close { grid-column: 1/-1; max-width: 1080px; margin: 25px 0 0 auto; color: var(--petrol); font: 500 clamp(34px,4vw,56px)/1.04 var(--serif); }

/* 02 · MANCHAS FACIALES · NECESIDAD / OBJETIVO */
.pigment-hero { position: relative; min-height: 920px; overflow: hidden; background: var(--petrol-deep); color: #fff; }
.pigment-hero figure,
.pigment-hero figure img { position: absolute; inset: 0; height: 100%; }
.pigment-hero figure img { object-fit: cover; object-position: center; filter: saturate(.55) contrast(1.08); }
.pigment-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,47,56,.97) 0%,rgba(3,47,56,.82) 44%,rgba(3,47,56,.14) 78%),linear-gradient(0deg,rgba(3,47,56,.7),transparent 46%); }
.pigment-hero-copy { position: relative; z-index: 3; width: min(calc(100% - 64px),1280px); max-width: none; margin-inline: auto; padding: 115px 0 130px; }
.pigment-hero-copy > * { max-width: 700px; }
.pigment-hero h1 { margin: 24px 0 34px; font: 500 clamp(82px,8vw,122px)/.88 var(--serif); letter-spacing: -.052em; }
.pigment-hero-prose p { color: #e6ecea; font-size: 19px; line-height: 1.64; }
.pigment-hero-prose p:first-child { color: #fff; font: 500 30px/1.3 var(--serif); }
.pigment-hero-prose p:last-child { color: #fff; font-weight: 800; }
.pigment-hero-note { position: absolute; z-index: 4; right: max(32px,calc((100vw - 1280px)/2)); bottom: 38px; display: grid; grid-template-columns: auto 56px auto 56px auto; gap: 12px; align-items: center; color: #fff; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pigment-hero-note i { height: 1px; background: var(--coral); }
.pigment-diagnosis { display: grid; grid-template-columns: minmax(470px,.82fr) minmax(580px,1.18fr); gap: clamp(64px,8vw,128px); align-items: center; padding-block: var(--pilot-pad); }
.pigment-diagnosis-copy h3 { margin: -18px 0 30px 92px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.pigment-diagnosis-copy .pilot-prose { margin-left: 92px; }
.pigment-map { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.pigment-face { position: relative; min-height: 560px; border: 1px solid var(--coral-deep); border-radius: 48% 52% 45% 55% / 42% 44% 56% 58%; background: linear-gradient(145deg,#f3e2e0,#d9b9ae); }
.pigment-face::before,
.pigment-face::after { content: ""; position: absolute; top: 35%; width: 27%; height: 8%; border-top: 1px solid rgba(7,71,83,.55); border-radius: 50%; }
.pigment-face::before { left: 14%; }.pigment-face::after { right: 14%; }
.pigment-face i { position: absolute; border-radius: 50%; background: rgba(145,85,70,.25); }
.pigment-face i:nth-child(1) { top: 21%; left: 22%; width: 17%; height: 11%; }
.pigment-face i:nth-child(2) { top: 24%; right: 19%; width: 22%; height: 13%; }
.pigment-face i:nth-child(3) { right: 15%; bottom: 31%; width: 18%; height: 9%; }
.pigment-face i:nth-child(4) { bottom: 20%; left: 25%; width: 23%; height: 9%; }
.pigment-face span { position: absolute; right: 12%; bottom: 10%; left: 12%; color: var(--petrol); font: 500 28px/1.08 var(--serif); text-align: center; }
.pigment-map ol { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.pigment-map li { display: grid; grid-template-columns: 30px 1fr; gap: 9px; border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 15px; line-height: 1.35; }
.pigment-map li span { color: var(--coral-deep); font-size: 10px; font-weight: 850; }
.pigment-goals { padding-block: var(--pilot-pad); background: var(--rose); }
.pigment-goal-stage { display: grid; grid-template-columns: minmax(500px,1.05fr) minmax(430px,.95fr); min-height: 680px; margin-top: 66px; }
.pigment-goal-stage figure { overflow: hidden; }
.pigment-goal-stage img { height: 100%; object-fit: cover; object-position: 40% center; filter: saturate(.6); }
.pigment-goal-stage > div { display: grid; grid-template-rows: repeat(4,1fr); background: var(--petrol-deep); color: #fff; }
.pigment-goal-stage p { display: grid; grid-template-columns: 38px 1fr; gap: 18px; align-items: center; margin: 0; border-bottom: 1px solid rgba(255,255,255,.25); padding: 24px 34px; font: 500 27px/1.15 var(--serif); }
.pigment-goal-stage p:last-child { border-bottom: 0; }
.pigment-goal-stage p span { color: var(--coral); font: 850 10px/1 var(--sans); }
.pigment-goal-close { max-width: 760px; margin: 46px 0 0 auto; }
.pigment-goal-close p { color: var(--petrol); font: 500 25px/1.42 var(--serif); }
.melasma-section { padding-block: var(--pilot-pad); }
.melasma-layout { display: grid; grid-template-columns: minmax(520px,1fr) minmax(450px,.85fr); gap: clamp(64px,8vw,126px); align-items: center; }
.melasma-visual { position: relative; min-height: 690px; }
.melasma-face { position: absolute; inset: 0 8% 18%; border: 1px solid var(--line); border-radius: 48% 52% 45% 55% / 42% 44% 56% 58%; background: linear-gradient(145deg,#f8eee7,#d4afa7); }
.melasma-face i { position: absolute; top: 27%; width: 29%; height: 19%; border-radius: 45%; background: rgba(127,72,61,.27); }
.melasma-face i:first-child { left: 14%; }.melasma-face i:last-child { right: 14%; }
.melasma-cycle { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 13px; align-items: center; padding: 23px; background: var(--petrol); color: #fff; }
.melasma-cycle span { font-size: 11px; font-weight: 800; line-height: 1.3; }
.melasma-cycle i { height: 1px; background: var(--coral); }
.melasma-copy h3 { margin-bottom: 31px; color: var(--petrol); font: 500 38px/1.1 var(--serif); }
.pigment-options { padding-block: var(--pilot-pad); background: var(--petrol-deep); color: #fff; }
.pigment-options .pilot-section-head h2,
.pigment-options .pilot-prose p { color: #fff; }
.pigment-options .pilot-section-head > span { color: var(--coral); }
.pigment-options-lead { max-width: 760px; margin: -18px 0 34px 92px; color: #fff; font: 500 37px/1.12 var(--serif); }
.pigment-options-intro { margin-left: 92px; }
.pigment-options-intro p { color: #fff; }
.pigment-option-spectrum { display: grid; grid-template-columns: repeat(7,1fr); align-items: end; min-height: 420px; margin: 64px 0 45px; border-bottom: 1px solid rgba(255,255,255,.35); }
.pigment-option-spectrum span { display: flex; min-width: 0; height: calc(130px + var(--level) * 30px); flex-direction: column; justify-content: space-between; border-top: 1px solid var(--coral); border-right: 1px solid rgba(255,255,255,.22); padding: 18px 14px; color: #fff; font: 500 clamp(15px,1.4vw,21px)/1.16 var(--serif); }
.pigment-option-spectrum span:first-child { border-left: 1px solid rgba(255,255,255,.22); }
.pigment-option-spectrum b { color: var(--coral); font: 850 10px/1 var(--sans); }
.pigment-options-close { max-width: 760px; margin-left: auto; }
.pigment-options-close p { color: #fff; }
.pigment-moment { display: grid; grid-template-columns: minmax(500px,.9fr) minmax(520px,1.1fr); gap: clamp(68px,8vw,130px); align-items: center; padding-block: var(--pilot-pad); }
.pigment-year { position: relative; min-height: 620px; border: 1px solid var(--coral-deep); border-radius: 50%; }
.pigment-year::before { content: ""; position: absolute; inset: 20%; border: 1px solid rgba(7,71,83,.3); border-radius: 50%; }
.pigment-year > div { position: absolute; inset: 0; }
.pigment-year span { position: absolute; max-width: 175px; padding: 8px 12px; background: var(--paper); color: var(--petrol); font-size: 14px; font-weight: 800; text-align: center; }
.pigment-year span:nth-of-type(1) { top: 4%; left: 35%; }
.pigment-year span:nth-of-type(2) { top: 45%; right: -1%; }
.pigment-year span:nth-of-type(3) { bottom: 4%; left: 38%; }
.pigment-year span:nth-of-type(4) { top: 45%; left: -1%; }
.pigment-year i { display: none; }
.pigment-year strong { position: absolute; inset: 38%; display: grid; place-items: center; border-radius: 50%; background: var(--petrol); color: #fff; font: 850 12px/1 var(--sans); letter-spacing: .13em; }
.pigment-co2 { padding-block: var(--pilot-pad); background: var(--rose); }
.pigment-co2-layout { display: grid; grid-template-columns: minmax(500px,1fr) minmax(470px,.9fr); gap: clamp(65px,8vw,130px); align-items: center; }
.pigment-not-equal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; min-height: 400px; border-top: 1px solid var(--coral-deep); border-bottom: 1px solid var(--coral-deep); }
.pigment-not-equal span { color: var(--petrol); font: 500 clamp(39px,4vw,60px)/.98 var(--serif); }
.pigment-not-equal b { color: var(--coral-deep); font: 500 76px/1 var(--serif); }
.pigment-co2-layout h3 { margin-bottom: 30px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.pigment-dls { display: grid; grid-template-columns: minmax(430px,.78fr) minmax(560px,1.22fr); gap: clamp(65px,8vw,130px); align-items: center; padding: var(--pilot-pad) max(32px,calc((100vw - 1280px)/2)); background: #234b53; color: #fff; }
.pigment-dls figure img { aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.pigment-dls figcaption { margin-top: 11px; color: #dae4e2; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.pigment-dls .pilot-section-head h2,
.pigment-dls .pilot-prose p { color: #fff; }
.pigment-dls .pilot-section-head > span { color: var(--coral); }
.pigment-dls-copy h3 { margin: -18px 0 30px 92px; color: #fff; font: 500 36px/1.12 var(--serif); }
.pigment-dls-copy > .pilot-prose { margin-left: 92px; }
.pigment-dls-copy ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 38px 0 38px 92px; padding: 0; border-top: 1px solid rgba(255,255,255,.3); list-style: none; }
.pigment-dls-copy li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.25); padding: 13px 12px 13px 0; color: #fff; font-size: 15px; }
.pigment-dls-copy li span { color: var(--coral); font-size: 10px; font-weight: 850; }

/* 03 · ÁCIDO HIALURÓNICO · TRATAMIENTO */
.filler-hero { position: relative; display: grid; grid-template-columns: minmax(580px,1.03fr) minmax(500px,.97fr); min-height: 940px; overflow: hidden; background: #163f47; color: #fff; }
.filler-hero-copy { position: relative; z-index: 4; align-self: center; padding: 86px clamp(38px,6vw,102px) 112px; }
.filler-hero h1 { margin: 24px 0 34px; font: 500 clamp(78px,7.2vw,112px)/.89 var(--serif); letter-spacing: -.052em; }
.filler-hero-prose { max-width: 63ch; }
.filler-hero-prose p { color: #e4ebea; font-size: 18.5px; line-height: 1.62; }
.filler-hero-prose p:first-child { color: #fff; font: 500 29px/1.32 var(--serif); }
.filler-hero-prose p:nth-last-child(-n+2) { color: #fff; font-weight: 800; }
.filler-hero figure { position: relative; min-height: 940px; overflow: hidden; }
.filler-hero figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(22,63,71,.57),transparent 34%),linear-gradient(0deg,rgba(22,63,71,.55),transparent 45%); }
.filler-hero figure img { height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(.63) contrast(1.04); }
.filler-hero figcaption { position: absolute; z-index: 2; right: 28px; bottom: 28px; color: #fff; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.filler-hero-functions { position: absolute; z-index: 5; right: 34px; bottom: 74px; display: grid; grid-template-columns: repeat(2,auto); gap: 8px; }
.filler-hero-functions span { border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 9px 14px; color: #fff; font-size: 11px; font-weight: 800; }
.filler-material { display: grid; grid-template-columns: minmax(510px,.92fr) minmax(560px,1.08fr); gap: 54px clamp(68px,8vw,130px); align-items: center; padding-block: var(--pilot-pad); }
.filler-material-close { grid-column: 1/-1; max-width: 760px; margin-left: auto; }
.filler-material-copy h3 { margin: -18px 0 30px 92px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.filler-material-copy .pilot-prose { margin-left: 92px; }
.gel-visual { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: center; min-height: 620px; padding: 40px; border: 1px solid var(--line); background: #fff; }
.gel-drop { position: relative; display: grid; place-items: center; aspect-ratio: .75; border-radius: 58% 42% 58% 42% / 65% 41% 59% 35%; background: linear-gradient(145deg,rgba(230,180,174,.34),rgba(7,71,83,.18)); box-shadow: inset 18px 20px 38px rgba(255,255,255,.7); }
.gel-drop span { max-width: 9ch; color: var(--petrol); font: 500 31px/1.02 var(--serif); text-align: center; }
.gel-drop i { position: absolute; top: 16%; right: 17%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.65); }
.gel-distinctions { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gel-distinctions span,
.gel-distinctions strong { border-bottom: 1px solid var(--line); padding: 22px 0; color: #4a5557; font-size: 15px; line-height: 1.4; }
.gel-distinctions strong { color: var(--petrol); font: 500 26px/1.12 var(--serif); }
.filler-products { padding-block: var(--pilot-pad); background: var(--rose); }
.filler-products-layout { display: grid; grid-template-columns: minmax(500px,.9fr) minmax(530px,1.1fr); gap: clamp(65px,8vw,130px); align-items: center; }
.filler-products-layout h3 { margin-bottom: 30px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.gel-spectrum { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 14px; align-items: center; min-height: 560px; }
.gel-spectrum > span { max-width: 150px; color: var(--petrol); font: 500 24px/1.08 var(--serif); }
.gel-spectrum > i { height: 2px; background: linear-gradient(90deg,var(--petrol),var(--coral-deep)); }
.gel-spectrum > div { grid-column: 1/-1; display: grid; grid-template-columns: repeat(5,1fr); margin-top: 42px; border-top: 1px solid var(--line); }
.gel-spectrum b { border-right: 1px solid var(--line); padding: 15px 8px; color: #5d686a; font-size: 11px; text-align: center; }
.filler-functions { padding-block: var(--pilot-pad); }
.filler-functions-lead { max-width: 760px; margin: -18px 0 62px 92px; color: var(--petrol); font: 500 37px/1.12 var(--serif); }
.filler-function-field { position: relative; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.filler-function { min-height: 330px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px; background: #fff; }
.filler-function > span { color: var(--coral-deep); font-size: 10px; font-weight: 850; }
.filler-function h3 { margin: 44px 0 21px; color: var(--petrol); font: 500 39px/1 var(--serif); }
.filler-function .pilot-prose p { font-size: 16.5px; line-height: 1.56; }
.function-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 155px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid var(--coral-deep); border-radius: 50%; background: var(--petrol); color: #fff; text-align: center; }
.function-core span { max-width: 10ch; font: 500 20px/1.05 var(--serif); }
.filler-functions-close { max-width: 760px; margin: 44px 0 0 auto; }
.filler-planes { padding-block: var(--pilot-pad); background: var(--petrol-deep); color: #fff; }
.filler-planes .pilot-section-head h2,
.filler-planes .pilot-prose p { color: #fff; }
.filler-planes .pilot-section-head > span { color: var(--coral); }
.filler-planes-layout { display: grid; grid-template-columns: minmax(540px,1.1fr) minmax(470px,.9fr); gap: clamp(65px,8vw,130px); align-items: center; }
.filler-planes-layout h3 { margin-bottom: 30px; color: #fff; font: 500 37px/1.12 var(--serif); }
.tissue-layers { position: relative; display: grid; gap: 12px; min-height: 620px; align-content: center; }
.tissue-layers > div { display: flex; align-items: center; height: 135px; padding: 24px 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.05); }
.tissue-layers > div:nth-child(2) { width: 84%; margin-left: 8%; }
.tissue-layers > div:nth-child(3) { width: 66%; margin-left: 17%; }
.tissue-layers span { color: #fff; font: 500 28px/1 var(--serif); }
.tissue-layers i { position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: var(--coral); }
.tissue-layers strong { position: absolute; top: 48%; left: 52%; padding: 10px 14px; background: var(--coral); color: var(--petrol); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.filler-decision-list { margin: 34px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.3); list-style: none; }
.filler-decision-list li { display: grid; grid-template-columns: 30px 1fr; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.25); padding: 13px 0; color: inherit; font-size: 15.5px; }
.filler-decision-list li span { color: var(--coral); font-size: 10px; font-weight: 850; }
.filler-vial { display: grid; grid-template-columns: minmax(550px,1.08fr) minmax(470px,.92fr); gap: 50px clamp(65px,8vw,130px); align-items: center; padding-block: var(--pilot-pad); }
.filler-vial > .pilot-section-head { grid-column: 1/-1; }
.vial-equation { display: grid; grid-template-columns: auto auto 1fr auto 1fr; gap: 18px; align-items: center; min-height: 520px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vial-equation > div { display: grid; justify-items: center; }
.vial-equation > div strong { color: var(--petrol); font: 500 clamp(95px,10vw,150px)/.75 var(--serif); }
.vial-equation > div span { color: var(--coral-deep); font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.vial-equation > b { color: var(--coral-deep); font: 500 55px/1 var(--serif); }
.vial-equation > span { color: var(--petrol); font: 500 clamp(29px,3vw,43px)/1 var(--serif); }
.filler-vial-copy h3 { margin-bottom: 30px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.filler-zones { padding-block: var(--pilot-pad); background: var(--rose); }
.filler-zones-layout { display: grid; grid-template-columns: minmax(580px,1.12fr) minmax(430px,.88fr); gap: clamp(65px,8vw,130px); align-items: center; }
.face-zones { position: relative; min-height: 720px; }
.face-outline { position: absolute; inset: 6% 24%; border: 1px solid var(--coral-deep); border-radius: 48% 52% 45% 55% / 42% 44% 56% 58%; background: rgba(255,255,255,.3); }
.face-outline i { position: absolute; width: 12px; aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 5px rgba(185,114,101,.35); }
.face-outline i:nth-child(1) { top: 28%; left: 24%; }.face-outline i:nth-child(2) { top: 30%; right: 23%; }.face-outline i:nth-child(3) { top: 52%; left: 15%; }.face-outline i:nth-child(4) { top: 54%; right: 15%; }.face-outline i:nth-child(5) { bottom: 21%; left: 46%; }.face-outline i:nth-child(6) { bottom: 8%; left: 47%; }
.face-zones > span { position: absolute; max-width: 175px; padding: 8px 12px; background: var(--paper); color: var(--petrol); font-size: 13px; font-weight: 800; }
.face-zones .zone-1 { top: 10%; left: 4%; }.face-zones .zone-2 { top: 20%; right: 1%; }.face-zones .zone-3 { top: 45%; left: 0; }.face-zones .zone-4 { top: 53%; right: 0; }.face-zones .zone-5 { bottom: 22%; left: 2%; }.face-zones .zone-6 { bottom: 10%; right: 1%; }.face-zones .zone-7 { bottom: 1%; left: 24%; max-width: 300px; }
.filler-procedure { display: grid; grid-template-columns: minmax(480px,.83fr) minmax(590px,1.17fr); gap: clamp(65px,8vw,130px); align-items: start; padding-block: var(--pilot-pad); }
.filler-procedure-copy h3 { margin: -18px 0 30px 92px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.filler-procedure-copy .pilot-prose { margin-left: 92px; }
.filler-procedure-visual figure { position: relative; overflow: hidden; }
.filler-procedure-visual figure img { aspect-ratio: 3/2; object-fit: cover; filter: saturate(.7); }
.filler-procedure-visual figcaption { position: absolute; right: 0; bottom: 0; padding: 12px 16px; background: rgba(3,47,56,.9); color: #fff; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.filler-procedure-visual .filler-decision-list { border-color: var(--line); }
.filler-procedure-visual .filler-decision-list li { border-color: var(--line); color: #455052; }
.filler-procedure-visual .filler-decision-list li span { color: var(--coral-deep); }
.filler-after { padding-block: var(--pilot-pad); background: var(--rose); }
.filler-after h3 { max-width: 760px; margin: -18px 0 52px 92px; color: var(--petrol); font: 500 37px/1.12 var(--serif); }
.filler-after-timeline { display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr; gap: 16px; align-items: center; margin-bottom: 52px; }
.filler-after-timeline article { min-height: 230px; border-top: 1px solid var(--coral-deep); border-bottom: 1px solid var(--coral-deep); padding: 30px 22px; }
.filler-after-timeline article span { color: var(--coral-deep); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.filler-after-timeline article strong { display: block; margin-top: 44px; color: var(--petrol); font: 500 28px/1.08 var(--serif); }
.filler-after-timeline > i { height: 1px; background: var(--coral-deep); }
.filler-after .pilot-prose { max-width: 760px; margin-left: auto; }
.filler-duration { display: grid; grid-template-columns: minmax(470px,.78fr) minmax(590px,1.22fr); gap: clamp(68px,8vw,130px); align-items: center; padding-block: var(--pilot-pad); }
.duration-datum { display: grid; min-height: 570px; align-content: center; border: 1px solid var(--line); background: #fff; text-align: center; }
.duration-datum strong { color: var(--petrol); font: 500 clamp(105px,11vw,170px)/.8 var(--serif); letter-spacing: -.06em; }
.duration-datum span { margin-top: 26px; color: var(--coral-deep); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.duration-copy h3 { margin: -18px 0 30px 92px; color: var(--petrol); font: 500 37px/1.1 var(--serif); }
.duration-copy .pilot-prose,
.duration-copy .filler-decision-list { margin-left: 92px; }
.duration-copy .filler-decision-list { border-color: var(--line); }
.duration-copy .filler-decision-list li { border-color: var(--line); color: #455052; }
.duration-copy .filler-decision-list li span { color: var(--coral-deep); }
.filler-previous { padding-block: var(--pilot-pad); background: var(--petrol-deep); color: #fff; }
.filler-previous .pilot-section-head h2,
.filler-previous .pilot-prose p { color: #fff; }
.filler-previous .pilot-section-head > span { color: var(--coral); }
.filler-previous-layout { display: grid; grid-template-columns: minmax(530px,1.05fr) minmax(460px,.95fr); gap: clamp(65px,8vw,130px); align-items: center; }
.filler-previous-layout h3 { margin-bottom: 30px; color: #fff; font: 500 37px/1.1 var(--serif); }
.previous-path { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.3); }
.previous-path span { border-bottom: 1px solid rgba(255,255,255,.25); padding: 25px 0; color: #fff; font: 500 31px/1 var(--serif); }
.previous-path strong { margin-top: 48px; color: var(--coral); font: 500 34px/1.08 var(--serif); }
.filler-dls { display: grid; grid-template-columns: minmax(430px,.78fr) minmax(560px,1.22fr); gap: clamp(65px,8vw,130px); align-items: center; padding: var(--pilot-pad) max(32px,calc((100vw - 1280px)/2)); background: #244d55; color: #fff; }
.filler-dls figure img { aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.filler-dls figcaption { margin-top: 11px; color: #dae4e2; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.filler-dls .pilot-section-head h2,
.filler-dls .pilot-prose p { color: #fff; }
.filler-dls .pilot-section-head > span { color: var(--coral); }
.filler-dls-copy h3 { margin: -18px 0 30px 92px; color: #fff; font: 500 37px/1.1 var(--serif); }
.filler-dls-copy .pilot-prose { margin-left: 92px; }
.filler-formula { grid-column: 1/-1; display: grid; grid-template-columns: repeat(9,auto); gap: 13px; align-items: center; justify-content: center; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); padding: 28px 0; }
.filler-formula span { color: #fff; font: 500 clamp(22px,2.2vw,32px)/1 var(--serif); }
.filler-formula b { color: var(--coral); font: 500 30px/1 var(--serif); }
.filler-risks { display: grid; grid-template-columns: minmax(420px,.7fr) minmax(600px,1.3fr); gap: 44px clamp(65px,8vw,130px); align-items: start; padding-block: var(--pilot-pad); }
.filler-risks > .pilot-section-head { grid-column: 1/-1; }
.filler-risk-mark { display: grid; min-height: 390px; align-content: center; border: 1px solid var(--coral-deep); padding: 48px; }
.filler-risk-mark span { color: var(--petrol); font: 500 44px/1 var(--serif); }
.filler-risk-mark i { width: 90px; height: 1px; margin-top: 35px; background: var(--coral-deep); }
.filler-risk-copy { max-width: 760px; }
.filler-risk-copy p { font-size: 18px; }
.filler-close { padding-block: clamp(110px,12vw,180px); background: var(--petrol-deep); color: #fff; }
.filler-close h2 { max-width: 1100px; margin: 24px 0 34px; color: #fff; font: 500 clamp(58px,6.5vw,92px)/.95 var(--serif); letter-spacing: -.045em; }
.filler-close-copy { max-width: 64ch; }
.filler-close-copy p { color: #fff; font-size: 19px; }
.filler-close-copy .pilot-action { margin-top: 18px; border-color: #fff; background: #fff; color: var(--petrol); }

@media (max-width: 1120px) {
  .pilot-header { grid-template-columns: 160px 1fr auto; }
  .pilot-main-nav { gap: 16px; }
  .pilot-main-nav a { font-size: 12px; }
  .facial-hero,
  .filler-hero { grid-template-columns: minmax(520px,1.06fr) minmax(420px,.94fr); }
  .facial-territory,
  .pigment-diagnosis,
  .melasma-layout,
  .pigment-moment,
  .pigment-co2-layout,
  .filler-material,
  .filler-products-layout,
  .filler-planes-layout,
  .filler-vial,
  .filler-zones-layout,
  .filler-procedure,
  .filler-duration,
  .filler-previous-layout,
  .filler-risks { gap: 60px; }
  .pilot-section-head h2 { font-size: clamp(48px,5vw,64px); }
}

@media (max-width: 840px) {
  .pilot-page { --pilot-pad: 90px; overflow: hidden; }
  .pilot-shell { width: calc(100% - 40px); }
  .pilot-header { grid-template-columns: 130px 1fr; grid-template-areas: "brand cta" "switch switch"; gap: 8px 16px; min-height: 132px; padding: 8px 18px 0; }
  .pilot-brand { width: 130px; }
  .pilot-main-nav { display: none; }
  .pilot-header-cta { justify-self: end; padding: 11px 13px; font-size: 11px; }
  .pilot-header-cta span { display: none; }
  .pilot-switch a { min-height: 54px; padding: 8px 5px; font-size: 10px; text-align: center; }
  .pilot-switch a span { display: none; }
  .pilot-footer { grid-template-columns: 1fr; gap: 20px; padding: 52px 20px; }
  .pilot-footer nav { justify-content: flex-start; }
  .pilot-section-head { grid-template-columns: 40px 1fr; gap: 10px; margin-bottom: 42px; }
  .pilot-section-head h2 { font-size: clamp(38px,10.4vw,47px); line-height: 1.02; }
  .pilot-section-head > span { padding-top: 7px; }
  .pilot-prose { max-width: none; }
  .pilot-prose p { font-size: 17px; line-height: 1.66; }
  .pilot-prose ul { grid-template-columns: 1fr; }
  .pilot-contents summary { width: calc(100% - 40px); min-height: 60px; }
  .pilot-contents summary span { font-size: 19px; }
  .pilot-contents nav { grid-template-columns: 1fr; width: calc(100% - 40px); max-height: 62vh; overflow-y: auto; padding-bottom: 16px; }
  .pilot-contents button { min-height: 44px; }
  .pilot-proof { padding: 90px 20px; }
  .pilot-proof-image { min-height: 460px; padding: 30px 24px; }
  .pilot-proof-image strong { font-size: 42px; }
  .pilot-faq-list { grid-template-columns: 1fr; margin-top: 40px; }
  .pilot-faq summary { font-size: 24px; }
  .pilot-faq-answer { padding-left: 38px; }
  .pilot-start h2,
  .filler-close h2 { font-size: 52px; }

  .facial-hero,
  .filler-hero { display: flex; min-height: 0; flex-direction: column; }
  .facial-hero-image,
  .filler-hero figure { order: 1; min-height: 520px; height: 520px; }
  .facial-hero-copy,
  .filler-hero-copy { order: 2; padding: 54px 20px 82px; }
  .facial-hero h1,
  .filler-hero h1 { font-size: 56px; line-height: .94; }
  .facial-hero-prose p,
  .filler-hero-prose p { font-size: 17px; }
  .facial-hero-prose p:first-child,
  .filler-hero-prose p:first-child { font-size: 25px; }
  .facial-hero-orbit,
  .filler-hero-functions { top: 445px; right: 20px; bottom: auto; left: 20px; }
  .facial-territory,
  .facial-dls,
  .facial-evolution,
  .pigment-diagnosis,
  .melasma-layout,
  .pigment-moment,
  .pigment-co2-layout,
  .pigment-dls,
  .filler-material,
  .filler-products-layout,
  .filler-planes-layout,
  .filler-vial,
  .filler-zones-layout,
  .filler-procedure,
  .filler-duration,
  .filler-previous-layout,
  .filler-dls,
  .filler-risks { grid-template-columns: 1fr; gap: 48px; }
  .facial-compass { min-height: 520px; }
  .compass-ring span { font-size: 20px; }
  .facial-territory-copy h3,
  .facial-dls-copy h3,
  .facial-evolution-copy h3,
  .pigment-diagnosis-copy h3,
  .pigment-dls-copy h3,
  .filler-material-copy h3,
  .duration-copy h3,
  .filler-dls-copy h3,
  .filler-procedure-copy h3 { margin-left: 50px; font-size: 32px; }
  .facial-dls-copy .pilot-prose,
  .facial-evolution-copy .pilot-prose,
  .pigment-diagnosis-copy .pilot-prose,
  .pigment-dls-copy > .pilot-prose,
  .filler-material-copy .pilot-prose,
  .duration-copy .pilot-prose,
  .duration-copy .filler-decision-list,
  .filler-dls-copy .pilot-prose,
  .filler-procedure-copy .pilot-prose { margin-left: 50px; }
  .facial-dls,
  .pigment-dls,
  .filler-dls { padding: 90px 20px; }
  .facial-dls figure,
  .pigment-dls figure,
  .filler-dls figure { width: 86%; }
  .facial-decision-line { grid-template-columns: 1fr; gap: 12px; }
  .facial-decision-line i { width: 64px; }
  .facial-need { grid-template-columns: 34px 1fr; gap: 12px; padding: 28px 0; }
  .facial-need .pilot-prose,
  .facial-need .pilot-links { grid-column: 2; }
  .facial-treatment-intro,
  .pigment-options-lead,
  .pigment-options-intro,
  .filler-functions-lead,
  .filler-after h3 { margin-left: 50px; }
  .facial-treatment-field { grid-template-columns: 1fr; min-height: 0; }
  .facial-treatment-field article,
  .facial-treatment-field article:nth-child(3),
  .facial-treatment-field article:nth-child(4) { min-width: 0; min-height: 0; padding: 30px 22px; }
  .facial-treatment-field h3 { font-size: 34px; letter-spacing: -.02em; }
  .treatment-center,
  .function-core { display: none; }
  .facial-evolution-close { font-size: 37px; }

  .pigment-hero { min-height: 850px; }
  .pigment-hero::after { background: linear-gradient(0deg,rgba(3,47,56,.98) 0%,rgba(3,47,56,.88) 57%,rgba(3,47,56,.14) 100%); }
  .pigment-hero figure img { object-position: 52% top; }
  .pigment-hero-copy { width: calc(100% - 40px); padding: 350px 0 90px; }
  .pigment-hero h1 { font-size: 59px; }
  .pigment-hero-prose p { font-size: 17px; }
  .pigment-hero-prose p:first-child { font-size: 25px; }
  .pigment-hero-note { right: 20px; bottom: 20px; left: 20px; grid-template-columns: auto 1fr auto 1fr auto; }
  .pigment-map { grid-template-columns: 1fr; }
  .pigment-face { min-height: 460px; }
  .pigment-goal-stage { grid-template-columns: 1fr; min-height: 0; margin-top: 46px; }
  .pigment-goal-stage figure { min-height: 430px; }
  .pigment-goal-stage p { min-height: 150px; padding: 24px; font-size: 25px; }
  .melasma-visual { min-height: 580px; }
  .melasma-cycle { grid-template-columns: 1fr; gap: 9px; }
  .melasma-cycle i { width: 50px; }
  .pigment-option-spectrum { grid-template-columns: 1fr; min-height: 0; }
  .pigment-option-spectrum span { height: auto !important; min-height: 85px; flex-direction: row; align-items: center; gap: 15px; border-left: 1px solid rgba(255,255,255,.22); }
  .pigment-year { min-height: 560px; }
  .pigment-not-equal { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 46px 0; }
  .pigment-not-equal b { font-size: 55px; }
  .pigment-dls-copy ol { grid-template-columns: 1fr; margin-left: 50px; }

  .filler-material-close { grid-column: auto; }
  .gel-visual { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
  .gel-drop { max-width: 270px; margin-inline: auto; }
  .gel-spectrum { grid-template-columns: 1fr; gap: 16px; min-height: 0; }
  .gel-spectrum > span { max-width: none; font-size: 28px; }
  .gel-spectrum > i { width: 75px; }
  .gel-spectrum > div { grid-template-columns: 1fr; margin-top: 18px; }
  .gel-spectrum b { border-right: 0; border-bottom: 1px solid var(--line); }
  .filler-function-field { grid-template-columns: 1fr; }
  .filler-function { min-height: 0; padding: 28px 24px; }
  .filler-function h3 { margin: 32px 0 18px; }
  .tissue-layers { min-height: 520px; }
  .tissue-layers > div { height: 115px; padding: 20px; }
  .tissue-layers span { font-size: 23px; }
  .vial-equation { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 46px 0; text-align: center; }
  .vial-equation > b { font-size: 42px; }
  .face-zones { min-height: 650px; }
  .filler-after-timeline { grid-template-columns: 1fr; gap: 0; }
  .filler-after-timeline article { min-height: 190px; }
  .filler-after-timeline > i { width: 1px; height: 30px; margin-left: 30px; }
  .duration-datum { min-height: 430px; }
  .duration-datum strong { font-size: 118px; }
  .filler-formula { grid-template-columns: 1fr; justify-items: start; gap: 9px; }
  .filler-formula b { transform: rotate(90deg); }
  .filler-risk-mark { min-height: 300px; }
}

@media (max-width: 390px) {
  .pilot-shell { width: calc(100% - 32px); }
  .pilot-header { padding-inline: 14px; }
  .pilot-switch a { font-size: 9.5px; }
  .pilot-contents summary,
  .pilot-contents nav { width: calc(100% - 32px); }
  .pilot-section-head { grid-template-columns: 34px 1fr; }
  .pilot-section-head h2 { font-size: 38px; }
  .facial-hero h1,
  .filler-hero h1 { font-size: 52px; }
  .pigment-hero h1 { font-size: 55px; }
  .facial-compass { min-height: 480px; }
  .compass-ring span { font-size: 18px; }
  .facial-need h3 { font-size: 31px; }
  .pigment-face { min-height: 430px; }
  .pigment-year { min-height: 590px; }
  .pigment-year span { max-width: 148px; font-size: 13px; }
  .pigment-year span:nth-of-type(1) { left: 29%; }
  .pigment-year span:nth-of-type(3) { left: 31%; }
  .face-zones { min-height: 680px; }
  .face-zones > span { max-width: 145px; font-size: 12px; }
  .face-zones .zone-7 { max-width: 260px; }
}