.page-main { min-height: 70vh; }
.page-hero { position: relative; min-height: 690px; padding: clamp(9rem, 16vw, 13rem) var(--edge) clamp(5rem, 9vw, 8rem); display: grid; align-items: end; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 78% 30%, rgba(0,212,197,.13), transparent 28%), #080d0f; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/Degradado.png") center/cover; opacity: .25; }
.page-hero::after { content: attr(data-ghost); position: absolute; right: -.03em; bottom: -.08em; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.055); font-size: clamp(8rem, 24vw, 24rem); font-weight: 800; line-height: .72; text-transform: uppercase; white-space: nowrap; }
.page-hero__inner { width: 100%; max-width: var(--max); margin: auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr); gap: 7vw; align-items: end; }
.page-hero h1 { margin: 0; font-size: clamp(4.3rem, 8vw, 9rem); line-height: .94; overflow-wrap: break-word; }
.page-hero__side { padding: 1.5rem 0 0 2rem; border-left: 1px solid var(--cyan); color: #bdc9c8; font-size: 1.18rem; }
.page-hero__side p { margin-bottom: 2rem; }
.page-index { display: flex; gap: .7rem; color: var(--cyan); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.page-index::before { content: ""; width: 30px; height: 1px; margin-top: .55rem; background: var(--cyan); }

.editorial-section { max-width: var(--max); margin: auto; }
.split-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; align-items: start; }
.split-intro h2, .page-section-title { margin: 0; font-size: clamp(3rem, 5.8vw, 6.4rem); line-height: .98; text-transform: uppercase; }
.split-intro__body { padding-top: .7rem; }
.split-intro__body > p { color: var(--muted); font-size: clamp(1.2rem, 2vw, 1.65rem); }
.kicker { color: var(--cyan); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

.showcase-frame { position: relative; max-width: var(--max); margin: 0 auto; padding: 3rem; border: 1px solid var(--line); background: #0c1315; box-shadow: 0 35px 90px rgba(0,0,0,.38); }
.showcase-frame::before { content: "LIVE / DATA"; position: absolute; left: 0; top: 0; padding: .5rem .75rem; background: var(--cyan); color: var(--ink); font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.showcase-frame img { width: 100%; border: 1px solid rgba(0,212,197,.28); }
.showcase-caption { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1rem; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.page-card-grid { max-width: var(--max); margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.page-card { position: relative; min-height: 360px; padding: 2.2rem; display: flex; flex-direction: column; justify-content: space-between; background: #0c1214; overflow: hidden; }
/* Antes quedaban recortados por arriba y al 13% de opacidad: se leían como un
   error de render, no como marca de agua. Ahora caben enteros y se distinguen. */
.page-card::after { content: attr(data-number); position: absolute; right: -.04em; top: -.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(0,212,197,.34); font-size: 8rem; font-weight: 800; }
.page-card--paper::after { -webkit-text-stroke-color: rgba(0,115,108,.38); }
.page-card__icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(0,212,197,.4); color: var(--cyan); font-size: 1.35rem; }
.page-card h3 { margin-bottom: .6rem; font-size: 1.65rem; text-transform: uppercase; }
.page-card p { margin: 0; color: var(--muted); }
.page-card--paper { background: #e5eceb; color: var(--ink); }.page-card--paper p { color: #536362; }
/* El cian de marca es ilegible sobre las tarjetas claras. */
.page-card--paper .page-card__icon { border-color: rgba(0,115,108,.45); color: #00736c; }

/* Catálogo de herramientas. Añadir una cuarta solo exige otra .product-card. */
.product-lineup { max-width: var(--max); margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.product-card { position: relative; display: flex; flex-direction: column; min-height: 620px; padding: 2.4rem; background: #0c1315; overflow: hidden; }
.product-card__index { color: var(--cyan); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.product-card h2 { margin: 1.4rem 0 .4rem; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .96; text-transform: uppercase; }
.product-card__tagline { margin: 0 0 1.4rem; color: var(--cyan); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.product-card > p { margin: 0 0 1.6rem; color: var(--muted); }
.product-card ul { margin: 0 0 2rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.product-card li { padding: .7rem 0; border-bottom: 1px solid var(--line); color: #c1cccb; font-size: .92rem; }
.product-card li::before { content: "→"; margin-right: .7rem; color: var(--cyan); }
.product-card__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: auto; }
.product-card--soon { background: #0a0f11; }
.product-card--soon h2, .product-card--soon .product-card__index { color: #7d8b8a; }
.product-card--soon .product-card__tagline { color: #7d8b8a; }
.product-card__badge { display: inline-flex; align-items: center; align-self: flex-start; margin-top: auto; padding: .6rem 1rem; border: 1px dashed rgba(0,212,197,.5); color: var(--cyan); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.field-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.field-chips li { padding: .5rem .85rem; border: 1px solid var(--line); color: #c1cccb; font-size: .78rem; letter-spacing: .04em; }

.detail-list { max-width: var(--max); margin: auto; border-top: 1px solid var(--line); }
.detail-row { display: grid; grid-template-columns: 80px .8fr 1.2fr; gap: 3rem; padding: 3rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.detail-row > span { color: var(--cyan); font-size: .7rem; letter-spacing: .12em; }
.detail-row h3 { margin: 0; font-size: clamp(1.9rem, 3vw, 3.1rem); line-height: .95; text-transform: uppercase; }
.detail-row p { margin: 0; color: var(--muted); font-size: 1.08rem; }

.sport-page-grid { max-width: var(--max); margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sport-page-card { position: relative; min-height: 590px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; background: #0b1214; overflow: hidden; }
.sport-page-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.45) brightness(.32) contrast(1.18); transition: transform .6s ease, filter .4s ease; }
.sport-page-card:hover img { transform: scale(1.035); filter: saturate(.65) brightness(.38) contrast(1.18); }
.sport-page-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,9,10,.98), transparent 65%); }
.sport-page-card > *:not(img) { position: relative; z-index: 2; }
.sport-page-card__top { display: flex; justify-content: space-between; color: var(--cyan); font-size: .68rem; letter-spacing: .12em; }
.sport-page-card h2 { margin-bottom: .6rem; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .96; text-transform: uppercase; }
.sport-page-card p { max-width: 520px; margin: 0; color: #bec9c8; }

.process-track { max-width: var(--max); margin: auto; position: relative; }
.process-track::before { content: ""; position: absolute; left: 29px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(var(--cyan), rgba(0,212,197,.1)); }
.process-step { position: relative; display: grid; grid-template-columns: 60px .7fr 1.3fr; gap: 3rem; min-height: 210px; }
.process-step__dot { position: relative; z-index: 2; width: 59px; height: 59px; display: grid; place-items: center; border: 1px solid var(--cyan); background: var(--ink); color: var(--cyan); font-size: .7rem; }
.process-step h2 { margin: .5rem 0 0; font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: .98; text-transform: uppercase; }
.process-step__body { padding: .7rem 0 3rem; color: var(--muted); }.process-step__body strong { display: block; margin-bottom: .7rem; color: var(--white); font-size: 1.25rem; }

.demo-layout { max-width: var(--max); margin: auto; display: grid; grid-template-columns: minmax(280px,.55fr) minmax(0,1.45fr); gap: 4rem; align-items: start; }
.demo-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; border-top: 1px solid var(--line); }
.demo-nav button { display: grid; grid-template-columns: 35px 1fr; gap: .8rem; padding: 1rem .8rem; border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; background: transparent; color: var(--muted); text-align: left; cursor: pointer; text-transform: uppercase; letter-spacing: .05em; transition: color .2s ease, border-color .2s ease, background .2s ease; }.demo-nav button span { color: var(--cyan); }.demo-nav button:hover { color: var(--white); }
/* El paso activo necesitaba una señal visible, no solo un cambio de color de texto. */
.demo-nav button[aria-pressed="true"] { border-left-color: var(--cyan); background: rgba(0,212,197,.08); color: var(--white); }
.demo-screen { position: relative; padding: 2.5rem; border: 1px solid var(--line); background: #11191b; }.demo-screen img { width: 100%; }.demo-screen__copy { display: grid; grid-template-columns: .55fr 1.45fr; gap: 2rem; margin-top: 2rem; }.demo-screen__copy h2 { margin: 0; font-size: 2rem; text-transform: uppercase; }.demo-screen__copy p { color: var(--muted); }

.pricing-note { max-width: var(--max); margin: auto; padding: 1.2rem 1.5rem; border: 1px solid rgba(255,184,77,.5); background: rgba(255,184,77,.07); color: #e5c78f; }
.pricing-grid { max-width: var(--max); margin: 3rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.price-card { position: relative; min-height: 590px; padding: 2.2rem; display: flex; flex-direction: column; background: #0c1315; }
.price-card--featured { background: var(--cyan); color: var(--ink); }.price-card--featured .price-card__label, .price-card--featured .price-card__status { color: #064e49; }.price-card--featured li { border-color: rgba(7,11,13,.18); }.price-card--featured .button { background: var(--ink); color: var(--white); border-color: var(--ink); }
.price-card__label { color: var(--cyan); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }.price-card h2 { margin: 1rem 0 .2rem; font-size: 3rem; text-transform: uppercase; }.price-card__status { color: var(--muted); font-size: .85rem; }.price-card__price { margin: 2rem 0; font-size: 2.2rem; font-weight: 800; }.price-card ul { margin: 0 0 2.5rem; padding: 0; list-style: none; }.price-card li { padding: .75rem 0; border-bottom: 1px solid var(--line); }.price-card li::before { content: "↗"; margin-right: .6rem; color: var(--cyan); }.price-card--featured li::before { color: var(--ink); }.price-card .button { margin-top: auto; }
.comparison { max-width: var(--max); margin: auto; overflow-x: auto; }.comparison:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }.comparison table { width: 100%; min-width: 760px; border-collapse: collapse; }.comparison th, .comparison td { padding: 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }.comparison th { color: var(--cyan); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }.comparison td:not(:first-child) { text-align: center; }

.faq-page { max-width: 980px; margin: auto; }.faq-group { margin-bottom: 4rem; }.faq-group > h2 { color: var(--cyan); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }.faq-page details { border-top: 1px solid var(--line); }.faq-page details:last-child { border-bottom: 1px solid var(--line); }.faq-page summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; list-style: none; cursor: pointer; font-size: 1.3rem; }.faq-page summary::-webkit-details-marker { display: none; }.faq-page summary span { color: var(--cyan); font-size: 1.6rem; line-height: 1; transition: transform .2s ease; }.faq-page details[open] summary span { transform: rotate(45deg); }.faq-page details p { max-width: 760px; color: var(--muted); }

.contact-layout, .auth-layout { max-width: var(--max); margin: auto; display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; align-items: start; }
.contact-aside h2, .auth-aside h1 { margin: 0 0 1.3rem; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .98; text-transform: uppercase; }.auth-aside h1 em { color: var(--cyan); font-style: normal; }.contact-aside p, .auth-aside p { color: var(--muted); }.contact-facts { margin-top: 3rem; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }.contact-facts div { padding: 1.2rem; background: #0c1315; }.contact-facts span { display: block; color: var(--cyan); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.prototype-form { padding: clamp(1.5rem,4vw,3.5rem); border: 1px solid var(--line); background: #0c1315; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }.field { display: grid; gap: .45rem; margin-bottom: 1.2rem; }.field--full { grid-column: 1 / -1; }.field label { color: #bdc8c7; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .8rem 1rem; border: 1px solid #3e4b4c; border-radius: 0; background: #080d0f; color: var(--white); font: inherit; }.field textarea { min-height: 150px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan); }.form-note { color: var(--muted); font-size: .75rem; }.form-status { display: none; margin-top: 1.3rem; padding: 1rem; border: 1px solid var(--cyan); color: var(--cyan); }.form-status.is-visible { display: block; }
.auth-layout { grid-template-columns: 1fr 1fr; align-items: center; min-height: 620px; }.auth-panel { max-width: 620px; }.auth-switch { margin-top: 1.5rem; color: var(--muted); }.auth-switch a { color: var(--cyan); }.auth-points { margin: 2rem 0 0; padding: 0; list-style: none; }.auth-points li { padding: .8rem 0; border-bottom: 1px solid var(--line); color: #c1cccb; }.auth-points li::before { content: "✓"; margin-right: .8rem; color: var(--cyan); }

.legal-layout { max-width: 1100px; margin: auto; display: grid; grid-template-columns: 260px 1fr; gap: 6rem; }.legal-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; display: grid; gap: .7rem; }.legal-nav a { color: var(--muted); text-decoration: none; }.legal-nav a:hover { color: var(--cyan); }.legal-content { max-width: 760px; }.legal-notice { margin-bottom: 3rem; padding: 1rem 1.2rem; border-left: 3px solid var(--amber); background: rgba(255,184,77,.07); color: #ddc394; }.legal-content section { margin-bottom: 3.5rem; }.legal-content h2 { font-size: 2rem; text-transform: uppercase; }.legal-content p, .legal-content li { color: var(--muted); }

.page-cta { position: relative; max-width: var(--max); margin: auto; min-height: 460px; padding: clamp(2rem,6vw,5rem); display: flex; align-items: end; justify-content: space-between; gap: 3rem; background: var(--cyan); color: var(--ink); overflow: hidden; }.page-cta::after { content: "↗"; position: absolute; right: 3%; top: -25%; font-size: 23rem; font-weight: 800; opacity: .08; }.page-cta h2 { position: relative; z-index: 2; max-width: 800px; margin: 0; font-size: clamp(3rem,6vw,6.5rem); line-height: .96; text-transform: uppercase; }.page-cta .button { position: relative; z-index: 2; flex-shrink: 0; background: var(--ink); color: var(--white); border-color: var(--ink); }

.main-nav a[aria-current="page"] { color: var(--white); }.main-nav a[aria-current="page"]::after { right: 0; }
.footer__top--links { grid-template-columns: 1.4fr repeat(3, .6fr); }.footer__top--links nav { display: grid; gap: .5rem; }.footer__top--links nav strong { margin-bottom: .5rem; color: var(--white); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }.footer__top--links nav a { color: var(--muted); text-decoration: none; font-size: .85rem; }.footer__top--links nav a:hover { color: var(--cyan); }
.footer__soon { color: #7d8b8a; font-size: .85rem; }.footer__soon i { font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }

@media (max-width: 1000px) {
    .page-hero__inner, .split-intro, .demo-layout, .contact-layout, .auth-layout { grid-template-columns: 1fr; }.page-hero__side { max-width: 640px; }.page-card-grid, .pricing-grid, .product-lineup { grid-template-columns: 1fr 1fr; }.product-lineup > :last-child { grid-column: auto; }.product-card { min-height: 0; }.page-card:last-child, .price-card:last-child { grid-column: 1/-1; }.sport-page-grid { grid-template-columns: 1fr; }.sport-page-card { min-height: 520px; }.process-step { grid-template-columns: 60px 1fr; }.process-step__body { grid-column: 2; }.demo-nav { position: static; grid-template-columns: repeat(3,1fr); }.footer__top--links { grid-template-columns: 1fr 1fr; }.legal-layout { grid-template-columns: 1fr; gap: 3rem; }.legal-nav { position: static; grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
    .page-hero { min-height: 620px; padding-top: 8.5rem; }.page-hero__side { padding-left: 1rem; }
    /* A 4.3rem una palabra larga («lanzamiento.») ensancha la rejilla y desborda. */
    .page-hero h1 { font-size: clamp(3.1rem, 13vw, 9rem); }.page-card-grid, .pricing-grid, .product-lineup { grid-template-columns: 1fr; }.product-lineup > :last-child { grid-column: auto; }.product-card { padding: 1.6rem; }.page-card:last-child, .price-card:last-child { grid-column: auto; }.page-card { min-height: 320px; }.detail-row { grid-template-columns: 45px 1fr; gap: 1.3rem; }.detail-row p { grid-column: 2; }.sport-page-card { min-height: 480px; }.process-step { gap: 1.3rem; }.demo-nav { grid-template-columns: 1fr; }.demo-screen { padding: 1rem; }.demo-screen__copy { grid-template-columns: 1fr; }.showcase-frame { padding: 1rem; }.showcase-caption { flex-direction: column; gap: .4rem; }.form-grid { grid-template-columns: 1fr; }.field--full { grid-column: auto; }.legal-nav { grid-template-columns: 1fr 1fr; }.page-cta { min-height: 540px; align-items: flex-start; flex-direction: column; justify-content: flex-end; }.footer__top--links { grid-template-columns: 1fr 1fr; }.footer__top--links > div { grid-column: 1/-1; }
}