/* Ritmo tipográfico y movimiento discreto. El contenido es visible sin JS. */
:root {
  --body: #52656e;
  --soft: #f4f7f8;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
body { line-height: 1.75; }
.hero h1 {
  font-weight: 400;
  font-size: clamp(46px, 4.6vw, 68px);
  line-height: 1.14;
  letter-spacing: -.028em;
  max-width: 930px;
  margin: 26px 0;
}
.hero-description { font-size: clamp(18px, 1.5vw, 21px); color: #4c626d; }
.eyebrow { font-size: 11px; letter-spacing: .19em; }
.hero-actions { margin-top: 36px; }
.hero-bottom > a { background: rgba(255,255,255,.64); }
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 150px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.42) 40%, #fff);
  pointer-events: none;
}
.section { padding-block: clamp(80px, 7.5vw, 120px); }
.section-heading { margin-bottom: 42px; align-items: center; }
.section-heading h2, .studio h2, .faq h2, .contact h2 {
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.022em;
}
.section-heading h2 { margin-top: 0; }
.team .section-heading, .approach .section-heading {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.approach .section-heading h2 { max-width: 24ch; margin-inline: auto; }
.studio h2, .faq h2 { margin-top: 0; }
.team-info h3 { margin-top: 0; }
.section-heading > p { max-width: 38ch; }
.practice-card {
  min-height: 244px;
  padding: 30px;
  border-radius: 20px;
  border-color: #e0e9ed;
  background: linear-gradient(145deg, #f4f8f9, #fafcfc);
}
/* Las tarjetas informativas no se presentan como botones. */
.practice-card:hover { transform: none; background: linear-gradient(145deg, #f4f8f9, #fafcfc); }
.practice-card h3, .team-info h3, .steps h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.012em;
}
.practice-card p { font-size: 15px; color: #627780; margin-top: 10px; }
.card-number, .step-number { color: #597580; }
.card-rule { width: 24px; background: #7da4b2; }
.studio {
  background: radial-gradient(ellipse at 100% 0%, #125f73, transparent 70%), #07516a;
}
.studio, .approach, .contact {
  width: calc(100% - 32px);
  margin-inline: auto;
  border-radius: 40px;
}
.studio > .wrap, .approach > .wrap, .contact > .wrap {
  width: min(1280px, calc(100% - 80px));
}
.studio h2 { margin-top: 0; }
.studio-copy { max-width: 43ch; }
.studio-copy > p:first-of-type { font-size: 21px; line-height: 1.5; font-weight: 400; }
.studio-copy > p { color: #e0edf1; line-height: 1.85; }
.team-card { border-radius: 20px; }
.portrait-placeholder > span { font-weight: 400; font-size: 60px; opacity: .45; }
.team-info { padding-block: 32px; }
.team-info h3 { font-size: 25px; }
.team-info .eyebrow { font-size: 10px; letter-spacing: .13em; }
.team-detail { color: #5c727c; }
.steps { gap: 40px; }
.steps h3 { margin-top: 24px; max-width: 20ch; }
.steps p { font-size: 16px; line-height: 1.8; max-width: 32ch; }
.faq summary { padding: 25px 12px; margin-inline: -12px; border-radius: 12px; transition: background 200ms, color 200ms; }
.faq summary:hover, .faq summary:focus-visible { background: #f0f6f8; color: #07516a; }
.faq details { overflow: clip; }
.faq details > p { padding: 0 36px 26px 0; max-width: 60ch; font-size: 16px; line-height: 1.8; }
.faq details.is-closing summary > span::after { transform: rotate(90deg); }
.contact { background: linear-gradient(150deg, #edf5f7, #f4f8f9); }
.contact h2 { font-size: clamp(36px, 3.6vw, 52px); }
.contact-intro { max-width: 38ch; }
.contact-row > p { font-size: 21px; font-weight: 400; letter-spacing: -.01em; }
.contact-row > span { font-size: 10px; letter-spacing: .12em; color: #526f7b; }
.footer-brand { font-weight: 500; font-size: 13px; }
.footer-inner { color: #526b76; }
.pillbar .nav-links a { font-weight: 400; font-size: 14px; }
.nav-links a::after { transition: transform 300ms var(--motion-ease); }
.nav-links a[aria-current="location"]::after { transform: scaleX(1); }
.button { transition: transform 220ms var(--motion-ease), box-shadow 220ms, background 220ms, border-color 220ms; }
.button:focus-visible { transform: translateY(-2px); }
.button:active { transform: translateY(1px) scale(.985); }
.text-link { transition: color 200ms, border-color 200ms; }
.text-link:hover { color: #07516a; border-color: #07516a; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff38, 0 8px 20px #07516a25; }
  .button:hover::before { opacity: .45; }
}
.reveal-pending { opacity: 0; transform: translateY(16px); }
.reveal-visible { opacity: 1; transform: none; transition: opacity 650ms var(--motion-ease), transform 650ms var(--motion-ease); transition-delay: var(--reveal-delay, 0ms); }
@media (max-width: 1100px) {
  .studio > .wrap, .approach > .wrap, .contact > .wrap { width: calc(100% - 40px); }
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(46px, 5.8vw, 56px); }
  .section-heading { align-items: flex-start; }
  .studio-layout { gap: 36px; }
  .steps { gap: 28px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(36px, 9.3vw, 48px); line-height: 1.16; letter-spacing: -.025em; }
  .hero-description { font-size: 18px; }
  .hero-actions { gap: 24px; margin-top: 30px; }
  .section { padding-block: 72px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2, .studio h2, .faq h2 { font-size: 34px; }
  .contact h2 { font-size: 38px; }
  .hero::after { height: 110px; }
  .studio, .approach, .contact { width: calc(100% - 16px); border-radius: 28px; }
  .studio > .wrap, .approach > .wrap, .contact > .wrap { width: calc(100% - 24px); }
  .practice-card { min-height: 185px; padding: 26px; }
  .practice-card h3, .steps h3 { font-size: 24px; }
  .steps h3 { margin-top: 16px; }
  .steps p { max-width: 100%; }
  .team-info { padding: 26px 20px; }
  .team-info h3 { font-size: 23px; }
  .faq summary, .faq details > p { font-size: 15px; }
  .pillbar .nav-links a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending, .reveal-visible { opacity: 1; transform: none; transition: none; }
  .button:hover, .button:focus-visible, .button:active { transform: none; }
}