@import url("/ares-design-system/ares.css");

:root { --accent: var(--ares-accent-stock); --ares-navbar-accent: var(--accent); }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--ares-color-background); color: var(--ares-color-text-primary); font-family: var(--ares-font-body); margin: 0; } a { text-decoration: none; }.wrap { margin-inline: auto; width: min(1200px, calc(100% - 48px)); }
.nav { align-items: center; background: rgb(255 255 255 / 88%); border-bottom: 1px solid var(--ares-color-border); display: flex; height: 76px; justify-content: space-between; position: sticky; top: 0; width: 100%; z-index: 10; }.brand { align-items: center; color: var(--ares-color-deep-navy); display: inline-flex; font-family: var(--ares-font-display); font-size: 17px; font-weight: 800; gap: 9px; letter-spacing: -.02em; }.brand b { color: var(--accent); font-size: 11px; letter-spacing: .1em; }.brand-logo { border-radius: 8px; height: 32px; width: 32px; }.btn { align-items: center; border: 1px solid transparent; border-radius: var(--ares-radius-md); display: inline-flex; font-size: 14px; font-weight: 650; justify-content: center; min-height: 44px; padding: 10px 16px; transition: transform .2s ease, box-shadow .2s ease; }.btn:hover { transform: translateY(-2px); }.btn.main,.btn.buy { background: var(--ares-color-blue); color: #fff; }.btn.soft { background: #fff; border-color: var(--ares-color-border); color: var(--ares-color-text-primary); }
.hero { background: #fff; overflow: hidden; padding: 96px 0 108px; position: relative; }.hero::after { background: radial-gradient(circle, rgb(124 58 237 / 10%), transparent 68%); content: ""; height: 44rem; position: absolute; right: -20rem; top: -20rem; width: 44rem; }.hero-grid { align-items: center; display: grid; gap: clamp(40px, 7vw, 96px); grid-template-columns: 1fr 1fr; position: relative; z-index: 1; }.eyebrow { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }.hero h1 { font-family: var(--ares-font-display); font-size: clamp(42px, 5vw, 70px); letter-spacing: -.06em; line-height: 1.02; margin: 16px 0 20px; max-width: 640px; }.hero p { color: var(--ares-color-text-secondary); font-size: 18px; line-height: 1.65; max-width: 590px; }.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }.mini { display: flex; flex-wrap: wrap; font-size: 13px; gap: 10px 22px; margin-top: 28px; }.mini span { color: var(--ares-color-text-secondary); }.mini span::before { background: var(--accent); border-radius: 50%; content: ""; display: inline-block; height: 6px; margin: 0 8px 1px 0; width: 6px; }.csp-1 { font-size: 14px; margin-top: 18px; }.csp-2 { color: var(--ares-color-blue); }.preview { background: #fff; border: 1px solid var(--ares-color-border); border-radius: var(--ares-radius-xl); box-shadow: var(--ares-shadow-product); overflow: hidden; padding: 10px; }.preview img { border-radius: 10px; display: block; width: 100%; }
.section { padding: clamp(72px, 9vw, 128px) 0; }.section.light { background: #fff; }.title { margin-bottom: 52px; max-width: 720px; }.title h2 { font-family: var(--ares-font-display); font-size: clamp(31px, 3.4vw, 48px); letter-spacing: -.05em; line-height: 1.12; margin: 0 0 16px; }.title p { color: var(--ares-color-text-secondary); font-size: 17px; line-height: 1.6; margin: 0; }.grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }.card { background: #fff; border: 1px solid var(--ares-color-border); border-radius: var(--ares-radius-lg); box-shadow: var(--ares-shadow-sm); padding: 26px; }.card .icon { color: var(--accent); font-size: 22px; }.card h3,.step h3,.price h3 { font-family: var(--ares-font-display); letter-spacing: -.025em; }.card h3 { font-size: 19px; margin: 17px 0 9px; }.card p { color: var(--ares-color-text-secondary); line-height: 1.6; margin: 0; }
.shots { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }.shot { background: #fff; border: 1px solid var(--ares-color-border); border-radius: var(--ares-radius-lg); box-shadow: var(--ares-shadow-sm); margin: 0; overflow: hidden; }.shot img { display: block; width: 100%; }.shot figcaption { color: var(--ares-color-text-primary); font-family: var(--ares-font-display); font-size: 15px; padding: 15px 18px; }
.pricing { align-items: stretch; display: grid; gap: 16px; grid-template-columns: 1.25fr .85fr .85fr; }.price { background: #fff; border: 1px solid var(--ares-color-border); border-radius: var(--ares-radius-lg); display: flex; flex-direction: column; padding: 28px; }.price.featured { border-color: #b9a4f4; box-shadow: var(--ares-shadow-md); }.badge { align-self: flex-start; background: #f4f0ff; border-radius: var(--ares-radius-sm); color: #6234c5; font-size: 12px; font-weight: 700; padding: 5px 8px; }.price h3 { font-size: 22px; margin: 18px 0 5px; }.price .amount { color: var(--accent); font-family: var(--ares-font-display); font-size: 28px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 10px 0 15px; min-height: 0; }.price p { color: var(--ares-color-text-secondary); line-height: 1.6; margin: 0 0 16px; }.price ul { color: var(--ares-color-text-secondary); font-size: 14px; line-height: 1.55; margin: 0 0 24px; padding-left: 18px; }.price li + li { margin-top: 7px; }.price .btn { margin-top: auto; width: 100%; }.featured .btn { background: var(--ares-color-blue); color: #fff; }
.steps { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }.step { border-top: 1px solid var(--ares-color-border); padding-top: 22px; }.n { color: var(--accent); font-family: var(--ares-font-display); font-size: 13px; font-weight: 800; }.n::before { content: "0"; }.step h3 { font-size: 19px; margin: 17px 0 9px; }.step p { color: var(--ares-color-text-secondary); line-height: 1.6; margin: 0; }.faq { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }.faq article { border-bottom: 1px solid var(--ares-color-border); padding: 0 0 20px; }.faq h3 { font-family: var(--ares-font-display); font-size: 17px; letter-spacing: -.02em; margin: 0 0 8px; }.faq p { color: var(--ares-color-text-secondary); font-size: 14px; line-height: 1.6; margin: 0; }
.cta { background: #08111f; color: #fff; padding: 94px 0; text-align: center; }.cta h2 { font-family: var(--ares-font-display); font-size: clamp(32px, 4vw, 48px); letter-spacing: -.05em; margin: 0 0 14px; }.cta p { color: #b9c7d9; font-size: 17px; line-height: 1.6; margin: 0 auto 26px; max-width: 640px; }.footer { background: #050c16; color: #98a2b3; font-size: 13px; padding: 28px 0; }.footer .wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }.csp-5,.csp-6,.csp-7 { color: #b9c7d9; }
@media (max-width: 900px) { .hero-grid,.pricing { grid-template-columns: 1fr; }.preview { max-width: 620px; }.grid { grid-template-columns: 1fr 1fr; }.steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .wrap { width: min(100% - 32px, 1200px); }.nav .btn.soft { display: none; }.hero { padding: 70px 0; }.grid,.shots,.steps,.faq { grid-template-columns: 1fr; }.section { padding: 70px 0; }.footer .wrap { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.btn { transition: none; }.btn:hover { transform: none; } }

/* Fase 2.1: shared motion primitives, with Stock's accent reserved for product detail. */
.nav { transition: background-color .24s var(--ares-ease-standard), border-color .24s var(--ares-ease-standard), box-shadow .24s var(--ares-ease-standard); }.nav.is-scrolled { background: rgb(255 255 255 / 94%); box-shadow: var(--ares-shadow-sm); }
.ares-motion-reveal { opacity: 0; transform: translateY(20px); transition: opacity .56s var(--ares-ease-standard) var(--ares-motion-delay, 0ms), transform .56s var(--ares-ease-standard) var(--ares-motion-delay, 0ms); }.ares-motion-reveal.is-visible { opacity: 1; transform: translateY(0); }.ares-motion-product { transform: translateY(24px) scale(.97); transition-duration: .7s; }.ares-motion-product.is-visible { transform: translateY(0) scale(1); }
.btn span[aria-hidden="true"] { display: inline-block; transition: transform .2s var(--ares-ease-standard); }.btn:hover span[aria-hidden="true"] { transform: translateX(3px); }.btn:active { transform: translateY(0) scale(.98); }
.hero::after { animation: stock-ambient 20s ease-in-out infinite alternate; }.preview,.shot { transition: border-color .2s var(--ares-ease-standard), box-shadow .2s var(--ares-ease-standard), transform .2s var(--ares-ease-standard); }.preview:hover,.shot:hover { border-color: #c8b9f7; box-shadow: var(--ares-shadow-md); transform: translateY(-2px); }.support-link { background: #f4f1ff; padding: var(--ares-space-8) 0; text-align: center; }.support-link a { color: #5425b1; font-size: var(--ares-text-body-small); font-weight: 700; }.support-link a span { display: inline-block; margin-left: var(--ares-space-2); transition: transform .2s var(--ares-ease-standard); }.support-link a:hover span { transform: translateX(3px); }
@keyframes stock-ambient { to { transform: translate(-14px, 12px); } }
@media (hover: hover) and (pointer: fine) { .card { transition: border-color .2s var(--ares-ease-standard), box-shadow .2s var(--ares-ease-standard), transform .2s var(--ares-ease-standard); }.card:hover { border-color: #cbbcf7; box-shadow: var(--ares-shadow-md); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ares-motion-reveal,.ares-motion-product { opacity: 1; transform: none; transition: none; }.hero::after { animation: none; }.btn span[aria-hidden="true"],.support-link a span { transition: none; }.btn:hover span[aria-hidden="true"],.support-link a:hover span { transform: none; } }

/* Shared ARES Digital-inspired product navigation. */
.nav { background: #081a2e; border-bottom-color: rgb(255 255 255 / 8%); height: 88px; max-width: none; padding-inline: max(24px, calc((100% - 1200px) / 2)); }.nav.is-scrolled { background: rgb(8 26 46 / 94%); border-bottom-color: rgb(255 255 255 / 12%); box-shadow: 0 10px 28px rgb(0 0 0 / 14%); }.nav .brand { color: #f7fbff; }.nav .brand .brand-name { color: #f7fbff; font-size: 18px; letter-spacing: -.025em; }.nav .brand b { color: #a78bfa; }.top-nav { align-items: center; display: flex; gap: 34px; justify-content: center; }.top-nav a { color: #bdc9d7; font-size: 14px; font-weight: 600; transition: color .2s var(--ares-ease-standard); }.top-nav a:hover { color: #fff; }.header-cta { align-items: center; border: 1px solid rgb(147 188 216 / 45%); border-radius: 999px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 700; gap: 20px; justify-self: end; min-height: 46px; padding: 0 13px 0 19px; transition: background-color .2s var(--ares-ease-standard), border-color .2s var(--ares-ease-standard), transform .2s var(--ares-ease-standard); }.header-cta span { color: #a78bfa; font-size: 17px; transition: transform .2s var(--ares-ease-standard); }.header-cta:hover { background: rgb(255 255 255 / 7%); border-color: #a78bfa; transform: translateY(-1px); }.header-cta:hover span { transform: translate(2px, -2px); }.nav-toggle { background: transparent; border: 0; color: #fff; cursor: pointer; display: none; height: 44px; padding: 10px; width: 44px; }.nav-toggle span { background: currentColor; display: block; height: 2px; margin: 5px 0; transition: transform .2s var(--ares-ease-standard); width: 24px; }.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 801px) { .nav { display: grid; gap: 24px; grid-template-columns: 1fr auto 1fr; }.nav > .brand { justify-self: start; }.header-cta { justify-self: end; } }
@media (max-width: 800px) { .nav { height: 72px; padding-inline: 16px; }.top-nav { background: #0b2037; border: 1px solid rgb(255 255 255 / 12%); border-radius: 12px; box-shadow: 0 16px 28px rgb(0 0 0 / 25%); display: none; flex-direction: column; gap: 0; left: 16px; padding: 8px; position: absolute; right: 16px; top: 78px; }.top-nav.is-open { display: flex; }.top-nav a { padding: 12px; width: 100%; }.nav-toggle { display: block; }.header-cta { font-size: 13px; gap: 8px; min-height: 40px; padding: 0 11px 0 13px; }.header-cta span { font-size: 15px; } }

/* Final visual polish */
.hero .preview { background: linear-gradient(145deg, #fff, #f8f6ff); border-color: #d9d0f5; box-shadow: 0 2px 4px rgb(16 24 40 / 4%), 0 28px 70px rgb(61 35 112 / 15%); padding: 12px; }.hero .preview:hover { border-color: #c8b9f7; box-shadow: 0 4px 8px rgb(16 24 40 / 5%), 0 32px 76px rgb(61 35 112 / 17%); transform: none; }
.feature-primary { margin-bottom: clamp(48px, 7vw, 80px); }.feature-editorial { border-top: 1px solid var(--ares-color-border); }.feature-editorial article { align-items: start; border-bottom: 1px solid var(--ares-color-border); display: grid; gap: clamp(20px, 4vw, 56px); grid-template-columns: 44px minmax(0, 1fr); padding: 28px 4px; }.feature-editorial article > span { color: var(--accent); font-family: var(--ares-font-display); font-size: 12px; font-weight: 800; letter-spacing: .08em; }.feature-editorial h3 { font-family: var(--ares-font-display); font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.035em; margin: 0 0 8px; }.feature-editorial p { color: var(--ares-color-text-secondary); line-height: 1.6; margin: 0; max-width: 670px; }
.shot { display: flex; flex-direction: column; }.shot figcaption { color: #6d42c7; font-size: 12px; font-weight: 750; letter-spacing: .06em; order: -1; padding: 14px 18px; text-transform: uppercase; }.shot:hover { transform: none; }
.price.featured { background: linear-gradient(180deg, #fff 0%, #fbf9ff 100%); border-color: #9c7bea; border-width: 2px; box-shadow: 0 12px 34px rgb(93 53 170 / 12%); }.price:not(.featured) { box-shadow: none; }.price.featured .badge { background: #eee8ff; }
.faq { display: block; margin-inline: auto; max-width: 860px; }.faq details { border-bottom: 1px solid var(--ares-color-border); }.faq summary { align-items: center; cursor: pointer; display: flex; font-family: var(--ares-font-display); font-size: 17px; font-weight: 700; justify-content: space-between; list-style: none; min-height: 64px; padding: 18px 2px; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { color: var(--accent); content: "+"; font-family: var(--ares-font-body); font-size: 23px; font-weight: 400; margin-left: 20px; transition: transform .2s var(--ares-ease-standard); }.faq details[open] summary::after { transform: rotate(45deg); }.faq details p { animation: faq-open .24s var(--ares-ease-standard); color: var(--ares-color-text-secondary); font-size: 14px; line-height: 1.65; margin: 0; max-width: 760px; padding: 0 44px 22px 2px; }.faq summary:focus-visible { border-radius: var(--ares-radius-sm); outline: 3px solid rgb(124 58 237 / 22%); outline-offset: 3px; } @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--ares-color-border); box-shadow: var(--ares-shadow-sm); transform: none; } }
@media (max-width: 540px) { .hero .preview { padding: 7px; }.feature-editorial article { grid-template-columns: 34px minmax(0, 1fr); padding-block: 23px; }.faq summary { font-size: 16px; }.faq details p { padding-right: 28px; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; }.faq details p { animation: none; } }

/* Phase 4: final visual rhythm and commercial polish */
.title { margin-bottom: clamp(42px, 5vw, 58px); }
.feature-primary { gap: 18px; }
.card { box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 12px 30px rgb(61 35 112 / 4%); }
.pricing { gap: 18px; margin-inline: auto; max-width: 1080px; }
.price { padding: 30px; transition: border-color .2s var(--ares-ease-standard), box-shadow .2s var(--ares-ease-standard), transform .2s var(--ares-ease-standard); }
.price.featured { box-shadow: 0 18px 42px rgb(98 52 197 / 12%); transform: translateY(-4px); }
.price .btn { border-radius: 12px; min-height: 46px; }
.cta { padding-block: clamp(78px, 8vw, 108px); }
.footer { border-top: 1px solid rgb(255 255 255 / 8%); padding-block: 34px; }
@media (hover: hover) and (pointer: fine) { .price:not(.featured):hover { border-color: #d4c9ef; box-shadow: var(--ares-shadow-sm); transform: translateY(-2px); } }
@media (max-width: 900px) { .price.featured { transform: none; }.hero-grid { gap: 48px; }.pricing { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .price { transition: none; }.price.featured,.price:not(.featured):hover { transform: none; } }

@media (max-width: 540px) {
  body { overflow-x: hidden; }
  .nav { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto auto; }
  .hero-grid > * { min-width: 0; }
  .hero h1 { max-width: 100%; font-size: clamp(36px, 10.5vw, 44px); overflow-wrap: normal; }
  .hero p { max-width: 100%; font-size: 16px; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
  .header-cta { font-size: 0; gap: 0; justify-content: center; padding: 0; width: 40px; }
  .header-cta span { font-size: 17px; }
  .mini { align-items: flex-start; flex-direction: column; gap: 8px; }
}

.preview picture,.shot picture { display: block; }

/* Modern motion layer: commercial product movement without scroll overhead. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .hero .preview.is-visible { animation: stock-panel-float 8.4s 1.15s ease-in-out infinite; }
  @keyframes stock-panel-float { 50% { transform: translateY(-6px); } }
}
.hero .mini.ares-motion-reveal.is-visible span { animation: stock-indicator-in .48s ease-out both; }
.hero .mini.ares-motion-reveal.is-visible span:nth-child(2) { animation-delay: .07s; }
.hero .mini.ares-motion-reveal.is-visible span:nth-child(3) { animation-delay: .14s; }
.hero .mini.ares-motion-reveal.is-visible span:nth-child(4) { animation-delay: .21s; }
@keyframes stock-indicator-in { from { opacity: 0; transform: translateY(10px); } }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: #cbbcf7; box-shadow: var(--ares-shadow-md); transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .preview.is-visible,.hero .mini.ares-motion-reveal.is-visible span { animation: none; }
}
/* La captura principal conserva su proporción original aunque una regla compartida fije alturas. */
.hero .preview picture { display: block; }
.hero .preview img { aspect-ratio: 8 / 5; display: block; height: auto !important; max-width: 100%; object-fit: contain; width: 100%; }
/* Las capturas de la galería son 1600×1000: jamás deben rellenar una altura heredada. */
.shots .shot picture { aspect-ratio: 8 / 5; display: block; overflow: hidden; }
.shots .shot img { aspect-ratio: 8 / 5; display: block; height: auto !important; max-width: 100%; object-fit: contain !important; object-position: top; width: 100%; }