/* Evolución editorial de Studio Web: marfil, carbón y salvia. */
:root {
  --muted: #5e6258;
  --accent: #a4c6b8;
  --surface: #f7f4ec;
  --premium-surface: #171e1a;
  --premium-copy: #c8d1c7;
  --section-space: clamp(76px, 8vw, 132px);
}
body { font-size: 16px; }
.section { padding-block: var(--section-space); }
.eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: .17em; }
.section-heading { gap: 48px; margin-bottom: 56px; }
.section-heading h2 { font-size: clamp(38px, 4.5vw, 66px); letter-spacing: -.045em; text-wrap: balance; }
.section-heading > p, .section-intro { font-size: 15px; max-width: 350px; }
.notice { font-size: 12px !important; }
.site-header nav { font-size: 12px; gap: clamp(16px, 2vw, 30px); }
.site-header nav > a { min-height: 44px; display: inline-flex; align-items: center; }
.site-header .nav-contact { border: 1px solid #a4c6b852; padding: 0 18px; border-radius: 4px; }
.site-header .nav-contact:hover { background: #a4c6b814; }
.hero { min-height: max(760px, calc(100svh - 90px)); }
.hero-topline { font-size: 10px; letter-spacing: .14em; }
.hero-copy { max-width: 1160px; padding-top: clamp(100px, 15svh, 180px); padding-bottom: 140px; }
.hero .eyebrow { font-size: 10px; letter-spacing: .18em; }
.hero h1 { font-size: clamp(54px, 7.1vw, 104px); max-width: 960px; line-height: 1.04; }
.hero h1 em { color: #e5e5d6; }
.hero-summary { max-width: 600px; }
.hero-description { font-size: 16px; max-width: 440px; line-height: 1.85; }
.hero .actions { align-items: center; gap: 30px; margin-top: 36px; }
.button { font-size: 13px; min-height: 48px; }
.hero .actions .primary { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); padding: 15px 24px; border-radius: 3px; }
.hero .actions .primary:hover { background: #d6e3d9; border-color: #d6e3d9; color: var(--ink); }
.hero-footer { font-size: 9px; letter-spacing: .1em; }
.studio-signature { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 36px 7%; border-bottom: 1px solid var(--line); }
.studio-signature p { margin: 0; font-size: 13px; color: var(--muted); }
.studio-signature strong { display: block; color: var(--ink); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.studio-signature .signature-statement { font: 400 clamp(23px, 2.4vw, 33px)/1.2 var(--serif); letter-spacing: -.5px; color: var(--ink); max-width: 330px; }
.project-grid { gap: 72px 48px; }
.project-visual { border-radius: 6px; }
.project-visual:before { font-size: 10px; }
.project-open { font-size: 12px; }
.project-open b { width: 44px; height: 44px; }
.project-caption { padding: 24px 0; }
.project-caption h3 { font: 400 clamp(23px, 2.5vw, 30px)/1.2 var(--serif); margin-bottom: 9px; }
.project-caption p { font-size: 13px; max-width: 78%; }
.project-caption > span { font-size: 10px; }
.project-mark > span { font-size: 10px; letter-spacing: .18em; }
.sector-list h3 { font-size: clamp(26px, 2.6vw, 36px); }
.sector-list p { font-size: 15px; }
.sector-list article > span { font-size: 12px; }
.plans { gap: 28px; margin-top: 48px; }
.plan { --plan-line: #bdb9ad99; padding: clamp(28px, 3.4vw, 50px); background: var(--surface); border-radius: 10px; box-shadow: 0 16px 40px #0d0e0d05; position: relative; }
.plan.premium { background: var(--premium-surface); color: var(--paper); border-color: #56675c; box-shadow: 0 18px 44px #0d0e0d14; --plan-line: #c8d1c72e; }
.plan.premium::before { content: ''; position: absolute; inset: 0 32px auto; height: 2px; background: var(--accent); }
.plan > .eyebrow { font-size: 10px; margin-bottom: 24px; }
.plan h3 { font-size: clamp(38px, 4vw, 54px); letter-spacing: -.035em; margin-bottom: 20px; }
.plan h3 span { letter-spacing: 0; }
.plan > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; min-height: 6em; }
.plan-position { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 4px; padding: 5px 11px; font-size: 10px; letter-spacing: .06em; border: 1px solid var(--plan-line); border-radius: 20px; }
.plan li { font-size: 14px; line-height: 1.65; border-color: var(--plan-line); padding-block: 15px; }
.plan-details { border-color: var(--plan-line); }
.plan-details summary { font-size: 14px; min-height: 72px; }
.plan-expanded > .eyebrow { font-size: 10px; }
.plan-expanded p, .plan-expanded dd { font-size: 14px; }
.plan-expanded dt { font-size: 14px; }
.plan-expanded dl > div { border-color: var(--plan-line); }
.plan .button { display: flex; margin-top: 24px; padding: 14px 18px; border: 1px solid #81988a; border-radius: 3px; gap: 16px; }
.plan .button:hover { background: #a4c6b820; color: #244b40; }
.premium > .eyebrow, .premium h3 span, .premium .plan-expanded > .eyebrow { color: var(--accent); }
.premium > p:not(.eyebrow), .premium .plan-expanded p, .premium .plan-expanded dd { color: var(--premium-copy); }
.premium .plan-position { color: #d1e5da; }
.premium li::before { color: var(--accent); }
.premium .plan-toggle-icon { border-color: #a4c6b870; }
.premium .plan-details summary:hover { color: var(--accent); }
.premium .plan-expanded .plan-note { background: #a4c6b80d; border-color: var(--accent); }
.premium .button { background: var(--accent); border-color: var(--accent); color: #17251d; }
.premium .button:hover { background: #c2d9cd; border-color: #c2d9cd; color: #17251d; }
.premium:focus-within { border-color: var(--accent); }
.small-print { font-size: 12px; line-height: 1.85; }
.steps span { font-size: 10px; }
.steps h3 { font-size: 28px; }
.steps p { font-size: 14px; }
.contact > p:not(.eyebrow) { font-size: 16px; max-width: 540px; }
.contact-pending { padding: 24px; border: 1px solid #c8d1c72e; border-radius: 6px; background: #a4c6b806; }
.contact-pending strong { font-size: 14px; }
.contact-pending p { font-size: 13px; color: #c2c8bc; }
.text-link { font-size: 13px; min-height: 44px; align-items: center; }
.site-footer p, .site-footer > a:last-child { font-size: 11px; }
.site-footer > a:last-child { min-height: 44px; display: inline-flex; align-items: center; }
.dialog-toolbar { font-size: 10px; }
.dialog-close { min-height: 44px; min-width: 80px; }
.dialog-copy > p:not(.eyebrow) { font-size: 16px; }
summary:focus-visible { outline: 2px solid #477d6e; outline-offset: 5px; }
.premium :is(summary, a):focus-visible { outline-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { border-color: #81988a; }
  .premium:hover { border-color: var(--accent); }
}
@media (max-width: 1100px) {
  .site-header nav { gap: 12px; font-size: 11px; }
  .site-header .nav-contact { padding-inline: 12px; }
  .studio-signature { padding-inline: 6%; }
  .plan { padding: 28px; }
}
@media (max-width: 760px) {
  .section { padding-block: 76px; }
  .site-header nav { font-size: 14px; }
  .site-header .nav-contact { padding-inline: 14px; margin-top: 12px; }
  .hero { min-height: max(730px, calc(100svh - 90px)); }
  .hero-copy { padding: 100px 6% 135px; }
  .hero h1 { font-size: clamp(44px, 10.8vw, 72px); letter-spacing: -.045em; }
  .hero .eyebrow, .hero-topline { font-size: 9px; }
  .hero-description { font-size: 15px; }
  .hero .circle-link { display: none; }
  .hero .actions { gap: 20px; }
  .hero .actions .primary { padding-inline: 18px; }
  .hero-footer { font-size: 8px; gap: 18px; }
  .hero-footer > span { max-width: 150px; }
  .studio-signature { grid-template-columns: 1fr 1fr; padding-block: 30px; gap: 24px 20px; }
  .studio-signature .signature-statement { grid-column: 1/-1; max-width: 360px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading > p, .section-intro { font-size: 15px; }
  .project-open { font-size: 11px; gap: 8px; }
  .project-visual:before { font-size: 9px; }
  .project-open b { width: 38px; height: 38px; }
  .project-mark > span { font-size: 8px; }
  .project-caption p { max-width: 100%; }
  .project-caption > span { position: static; display: block; margin-top: 12px; }
  .plan { padding: 30px 24px; }
  .plan > p:not(.eyebrow) { min-height: 0; }
  .plans { gap: 24px; margin-top: 36px; }
  .steps { gap: 32px 24px; }
  .steps h3 { font-size: 25px; }
  .steps span { font-size: 9px; letter-spacing: .07em; }
  .steps p { font-size: 14px; }
  .contact-pending { padding: 20px; }
}
@media (max-width: 420px) {
  .hero .actions { align-items: stretch; flex-direction: column; gap: 12px; max-width: 300px; }
  .hero .actions .secondary { align-self: flex-start; }
  .hero-footer { align-items: start; }
  .hero-footer a { white-space: normal; max-width: 145px; }
  .steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan-toggle-icon { transition: none; }
}