/* Movimiento CSS: las páginas siguen siendo utilizables sin soporte de timelines. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}
html { scroll-padding-top: 115px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(246 243 237 / 94%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.header-inner { min-height: 90px; flex-wrap: nowrap; padding-block: 16px; }
.brand { font-size: 34px; transition: color .3s ease; }
.brand:hover { color: var(--accent); }
.brand-caption { font-size: 8px; letter-spacing: 2.6px; }
.account-nav { gap: 32px; }
.header-contact { font-size: 12px; text-decoration: none; position: relative; padding-block: 10px; }
.header-contact::after {
  content: ''; position: absolute; bottom: 6px; left: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.header-contact:hover::after, .header-contact[aria-current=page]::after {
  transform: scaleX(1); transform-origin: left;
}
.account-link { border-radius: 3px; transition: background .3s, border-color .3s, color .3s; }
.account-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.account-link span { transition: transform .4s var(--ease-out); }
.account-link:hover span { transform: translate(2px,-2px); }
.hero { min-height: 690px; grid-template-columns: 1.2fr 1fr; gap: 25px; padding-block: 75px; }
.hero h1 { font-size: clamp(46px,5.6vw,78px); line-height: 1.12; letter-spacing: -3px; }
.hero .eyebrow { font-size: 10px; letter-spacing: 2.8px; margin-bottom: 28px; }
.title-line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.title-line > span { display: block; }
.hero-description { font-size: 16px; line-height: 1.9; margin-block: 30px; }
.hero-actions { margin-top: 36px; }
.button { position: relative; isolation: isolate; overflow: hidden; border-radius: 3px; transition: transform .4s var(--ease-out), box-shadow .4s, background .4s; }
.button::before {
  content: ''; position: absolute; z-index: -1; inset: 0; background: rgb(255 255 255 / 10%);
  transform: translateX(-101%) skewX(-14deg); transition: transform .65s var(--ease-out);
}
.button:hover::before { transform: translateX(0) skewX(0); }
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 25px -14px #532c29a0; }
.button:active { transform: translateY(0) scale(.98); box-shadow: none; }
.button span { transition: transform .45s var(--ease-out); }
.button:hover span, .button:focus-visible span { transform: translate(3px,-3px); }
.quiet-link span { transition: transform .4s var(--ease-out); }
.quiet-link:hover span { transform: translateY(4px); }
/* Escultura abstracta construida con gradientes, capas y máscaras CSS. */
.calm-art { overflow: clip; position: relative; aspect-ratio: .93; isolation: isolate; min-width: 0; perspective: 1000px; }
.art-halo { position: absolute; inset: 0 -4%; background: radial-gradient(ellipse at 50% 55%, #d9c4ac99, #e9ddcc66 43%, transparent 69%); }
.art-sculpture {
  position: absolute; inset: 15% 14% 19%; border-radius: 48% 48% 42% 43%;
  background: linear-gradient(122deg,#e8c4a2 2%,#c59270 30%,#aa6d4e 63%,#7a4936 100%);
  box-shadow: inset 8px 8px 22px #fff4d880, inset -12px -15px 28px #57372550, 22px 35px 45px -28px #57433190;
  transform: rotate(-13deg); transition: transform 1.2s var(--ease-out), box-shadow 1.2s;
}
.art-core {
  position: absolute; inset: 18% 21%; border-radius: 50%;
  background: linear-gradient(125deg,#ae7555 0%,#e5c7a1 15%,#eee2d1 26%,#f3eee4 65%);
  box-shadow: inset 13px 10px 22px #553b3545, -4px -3px 8px #fff0d350, 4px 3px 7px #6a423854;
}
.art-shadow { position: absolute; left: 16%; right: 13%; bottom: 10%; height: 8%; background: radial-gradient(ellipse,#4c493c33,transparent 69%); filter: blur(8px); transform: rotate(-8deg); }
.art-orbit { position: absolute; border: 1px solid #82796655; border-radius: 50%; pointer-events: none; transition: transform 1.4s var(--ease-out); }
.orbit-one { inset: 6% 1% 7%; transform: rotate(27deg) scaleX(.75); }
.orbit-two { inset: 20% -2%; transform: rotate(-32deg) scaleY(.8); border-color: #a44e3633; }
.art-pebble { position: absolute; width: 17%; aspect-ratio: 1; right: 3%; bottom: 14%; border-radius: 50%; background: radial-gradient(circle at 32% 25%,#b6b99b,#7b8067 50%,#444e3b); box-shadow: 12px 15px 24px -10px #29372866; transition: transform 1.2s var(--ease-out); }
.art-frame { position: absolute; width: 12px; height: 12px; top: 13%; left: 12%; border: 1px solid #9a8c75; border-radius: 50%; }
@media (hover:hover) and (pointer:fine) {
  .calm-art:hover .art-sculpture { transform: rotate(-4deg) translateY(-12px); box-shadow: inset 8px 8px 22px #fff4d880, inset -12px -15px 28px #57372550, 28px 46px 55px -28px #57433170; }
  .calm-art:hover .orbit-one { transform: rotate(48deg) scaleX(.75); }
  .calm-art:hover .orbit-two { transform: rotate(-12deg) scaleY(.8); }
  .calm-art:hover .art-pebble { transform: translate(8px,-15px); }
}
.editorial-section { border-top: 1px solid var(--line); }
.step { transition: background .45s, transform .5s var(--ease-out), border-color .4s; padding-inline: 16px; }
.step:hover, .step:focus-within { transform: translateY(-7px); border-color: var(--accent); background: #eee8dc88; }
.step-number { transition: color .35s, transform .5s var(--ease-out); }
.step:hover .step-number { transform: translateX(6px); color: var(--ink); }
.underlined-link { transition: color .3s, gap .4s var(--ease-out), border-color .3s; }
.underlined-link:hover { gap: 34px; }
.contact-banner { border-radius: 4px; }
.banner-mark { width: 300px; height: 300px; border: 1px solid #f6f3ed16; border-radius: 50%; font-size: 0; bottom: -130px; transition: transform 1.5s var(--ease-out); }
.banner-mark::after { content: ''; position: absolute; inset: 30px; border: 1px solid #f6f3ed18; border-radius: 50%; }
.contact-banner:hover .banner-mark { transform: translateY(-35px) scale(1.15); }
.faq-list details { transition: padding .35s var(--ease-out), background .35s; }
.faq-list details[open] { padding-inline: 18px; background: #ede8de88; }
.faq-list summary { transition: color .3s; }
.faq-list summary:hover { color: var(--accent); }
input:not([type=hidden]), textarea, select { transition: border-color .25s, box-shadow .25s, background .25s; }
input:not([type=hidden]):focus, textarea:focus, select:focus { background: white; border-color: var(--accent); box-shadow: 0 0 0 3px #a44e360c; }
.contact-form .form-field label { transition: color .25s, transform .3s var(--ease-out); transform-origin: left; }
.contact-form .form-field:focus-within label { color: var(--accent); transform: translateX(3px); }
.footer-links a { transition: color .3s, transform .35s var(--ease-out); }
.footer-links a:hover { transform: translateX(4px); color: var(--accent); }
@keyframes line-enter { from { transform: translateY(110%) rotate(2deg); opacity: 0; } to { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sculpture-enter { from { opacity: 0; transform: rotate(-23deg) translateY(35px) scale(.93); } to { opacity: 1; transform: rotate(-13deg) translateY(0) scale(1); } }
@keyframes orbit-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes section-enter { from { opacity: .25; translate: 0 45px; } to { opacity: 1; translate: 0 0; } }
@keyframes header-depth { from { box-shadow: 0 0 0 transparent; } to { box-shadow: 0 8px 30px #30392f0d; } }
@media (prefers-reduced-motion:no-preference) {
  .hero-intro { animation: rise-in .9s var(--ease-out) both; }
  .title-line>span { animation: line-enter 1.2s var(--ease-out) .12s both; }
  .title-line:nth-child(2)>span { animation-delay: .26s; }
  .hero-description { animation: rise-in 1s var(--ease-out) .4s both; }
  .hero-actions { animation: rise-in 1s var(--ease-out) .55s both; }
  .art-sculpture { animation: sculpture-enter 1.8s var(--ease-out) backwards; }
  .art-orbit, .art-pebble, .art-frame { animation: orbit-enter 2s ease .25s backwards; }
  .contact-intro, .auth { animation: rise-in .85s var(--ease-out) both; }
  .contact-layout .card { animation: rise-in .95s var(--ease-out) .12s both; }
  .faq-list details[open]>p, .faq-list details[open]>.underlined-link { animation: rise-in .4s var(--ease-out); }
  @supports (animation-timeline:view()) {
    .editorial-section, .section-heading, .step, .contact-banner, .faq-section {
      animation: section-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    .step { animation-range: entry 0% entry 75%; }
    .step:nth-child(2) { animation-range: entry 5% entry 85%; }
    .step:nth-child(3) { animation-range: entry 10% entry 95%; }
  }
  @supports (animation-timeline:scroll()) {
    .site-header { animation: header-depth linear both; animation-timeline: scroll(); animation-range: 0px 150px; }
  }
  @supports (interpolate-size:allow-keywords) and selector(details::details-content) {
    .faq-list details { interpolate-size: allow-keywords; }
    .faq-list details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .4s var(--ease-out), opacity .3s, content-visibility .4s allow-discrete; }
    .faq-list details[open]::details-content { height: auto; opacity: 1; }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: orbit-enter .15s reverse ease both; }
  ::view-transition-new(root) { animation: rise-in .3s var(--ease-out) both; }
}
@media(max-width:1100px) {
  .hero { min-height: 590px; padding-block: 65px; gap: 10px; }
  .hero h1 { font-size: clamp(42px,5.6vw,64px); letter-spacing: -2.5px; }
}
@media(max-width:800px) {
  .header-inner { min-height: 88px; }
  .hero { grid-template-columns: 1.2fr 1fr; min-height: 500px; padding-block: 50px; }
  .hero h1 { font-size: 43px; letter-spacing: -1.9px; }
  .hero-description { font-size: 14px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .calm-art { aspect-ratio: .8; }
  .account-nav { gap: 23px; }
}
@media(max-width:560px) {
  html { scroll-padding-top: 95px; }
  .header-inner { min-height: 82px; gap: 12px; }
  .brand { font-size: 28px; }
  .brand-caption { font-size: 7px; letter-spacing: 1.7px; }
  .account-nav { gap: 15px; }
  .header-contact { font-size: 11px; }
  .account-link { font-size: 10px; padding: 9px; gap: 7px; }
  .account-link span { display: none; }
  .account-nav .text-button { font-size: 10px; }
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 48px; padding-bottom: 15px; }
  .hero h1 { font-size: clamp(36px,9.5vw,53px); letter-spacing: -1.8px; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 24px; }
  .hero-description { font-size: 15px; margin-block: 25px; }
  .hero-actions { margin-top: 28px; gap: 20px; }
  .calm-art { width: 88%; margin: 12px auto 0; aspect-ratio: 1.2; }
  .art-sculpture { inset: 12% 20% 15%; }
  .art-pebble { width: 13%; bottom: 13%; right: 13%; }
  .orbit-one { inset: 0% 14%; }
  .orbit-two { inset: 15% 8%; }
  .art-shadow { bottom: 6%; }
  .step { padding-left: 42px; padding-right: 10px; }
  .step:hover { transform: none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after,::view-transition-old(root),::view-transition-new(root) { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .calm-art:hover .art-sculpture { transform: rotate(-13deg); }
  .calm-art:hover .art-pebble { transform: none; }
}