/* ==========================================================================
   TORRE Umbra - single page
   Tokens instanciados desde DESIGN.md (sistema Meta-commerce, tema claro)
   ========================================================================== */

:root {
   /* Brand & accent */
   --color-primary: #0064e0;        /* cobalto: SOLO CTA de compra */
   --color-primary-deep: #0143b5;
   --color-primary-soft: rgba(0, 100, 224, 0.15);

   /* Surface */
   --color-canvas: #ffffff;
   --color-surface-soft: #f4f5f6;
   --color-hairline: #d8dbde;
   --color-hairline-soft: #e9eaec;

   /* Text */
   --color-ink-deep: #0a1317;
   --color-ink: #1c2b33;
   --color-charcoal: #344854;
   --color-slate: #465a69;
   --color-steel: #63788a;
   --color-stone: #8a9aa9;

   /* Semantic */
   --color-success: #2e9e4f;
   --color-warning: #f8d84a;
   --color-critical: #d93025;

   /* Buttons */
   --color-ink-button: #0a1317;
   --color-on-ink-button: #ffffff;
   --color-on-primary: #ffffff;

   /* Radius (escala del DESIGN.md) */
   --rounded-lg: 8px;
   --rounded-xl: 16px;
   --rounded-xxl: 24px;
   --rounded-xxxl: 32px;
   --rounded-full: 100px;

   /* Spacing */
   --sp-base: 16px;
   --sp-lg: 20px;
   --sp-xl: 24px;
   --sp-xxl: 32px;
   --sp-xxxl: 40px;
   --sp-section-sm: 48px;
   --sp-section: 64px;
   --sp-section-lg: 80px;

   --font-sans: "Figtree", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --shadow-panel: rgba(20, 22, 26, 0.3) 0px 1px 4px 0px;
   --nav-height: 68px;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
   background: var(--color-canvas);
   color: var(--color-ink);
   font-family: var(--font-sans);
   font-size: 16px;
   line-height: 1.5;
   letter-spacing: -0.16px;
   -webkit-font-smoothing: antialiased;
}

body.menu-is-open { overflow: hidden; }

img { display: block; max-width: 100%; }

h1, h2, h3 {
   font-feature-settings: "ss01", "ss02";
   color: var(--color-ink-deep);
   letter-spacing: 0;
}

.container {
   max-width: 1280px;
   margin: 0 auto;
   padding-left: var(--sp-xxl);
   padding-right: var(--sp-xxl);
}

.container-narrow { max-width: 880px; }

section[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

.section { padding: var(--sp-section-lg) 0; }
.section-tight { padding: var(--sp-section-sm) 0; }

.section-head { margin-bottom: var(--sp-xxxl); max-width: 640px; }

.section-head h2 {
   font-size: 36px;
   font-weight: 500;
   line-height: 1.28;
}

.section-head p {
   margin-top: 12px;
   font-size: 18px;
   color: var(--color-slate);
}

/* ==========================================================================
   Botones (pill siempre, según DESIGN.md)
   ========================================================================== */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   font-family: var(--font-sans);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.14px;
   line-height: 1.43;
   padding: 14px 30px;
   border-radius: var(--rounded-full);
   border: 0;
   cursor: pointer;
   text-decoration: none;
   transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
   background: var(--color-ink-button);
   color: var(--color-on-ink-button);
}
.btn-primary:active { background: var(--color-charcoal); }

.btn-secondary {
   background: transparent;
   color: var(--color-ink-deep);
   border: 2px solid var(--color-ink-deep);
   padding: 12px 28px;
}

/* Cobalto: exclusivo del flujo de compra */
.btn-buy {
   background: var(--color-primary);
   color: var(--color-on-primary);
   width: 100%;
   font-size: 15px;
   padding: 15px 30px;
}
.btn-buy:active { background: var(--color-primary-deep); }

.btn-nav { padding: 10px 22px; }

/* ==========================================================================
   Promo banner + Nav
   ========================================================================== */

.promo-banner {
   background: var(--color-ink-deep);
   color: var(--color-canvas);
   text-align: center;
   padding: 12px 24px;
}

.promo-banner p {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.nav {
   position: sticky;
   top: 0;
   z-index: 40;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-xl);
   height: var(--nav-height);
   padding: 0 var(--sp-xxl);
   background: var(--color-canvas);
   border-bottom: 1px solid var(--color-hairline-soft);
}

.nav-logo {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 0.14em;
   color: var(--color-ink-deep);
   text-decoration: none;
}

.nav-links {
   display: flex;
   gap: var(--sp-xxl);
}

.nav-links a {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.14px;
   color: var(--color-ink);
   text-decoration: none;
   padding: 8px 0;
}

.nav-links a:hover { color: var(--color-primary-deep); }

.nav-actions {
   display: flex;
   align-items: center;
   gap: var(--sp-base);
}

.menu-open,
.menu-close {
   background: none;
   border: 0;
   font-family: var(--font-sans);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.14px;
   color: var(--color-ink-deep);
   cursor: pointer;
   padding: 10px 4px;
}

/* ==========================================================================
   Hero: secuencia de imágenes con scrub
   ========================================================================== */

.hero {
   background: var(--color-canvas);
}

.hero-inner {
   display: grid;
   grid-template-columns: 4.2fr 7.8fr;
   align-items: center;
   gap: var(--sp-xl);
   max-width: 1440px;
   margin: 0 auto;
   padding: var(--sp-xxl);
   min-height: calc(100dvh - var(--nav-height));
}

.hero-copy h1 {
   font-size: clamp(32px, 3.4vw, 48px);
   font-weight: 500;
   line-height: 1.12;
}

.hero-sub {
   margin-top: var(--sp-lg);
   font-size: 18px;
   line-height: 1.44;
   color: var(--color-slate);
   max-width: 42ch;
}

.hero-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-base);
   margin-top: var(--sp-xxl);
}

.seq-captions {
   position: relative;
   margin-top: var(--sp-section-sm);
   min-height: 84px;
}

.seq-caption {
   position: absolute;
   inset: 0;
   font-size: 15px;
   line-height: 1.5;
   color: var(--color-steel);
   max-width: 38ch;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.4s ease, transform 0.4s ease;
   border-left: 2px solid var(--color-hairline);
   padding-left: var(--sp-base);
}

.seq-caption.is-active {
   opacity: 1;
   transform: translateY(0);
   border-left-color: var(--color-ink-deep);
}

.hero-media {
   border-radius: var(--rounded-xxxl);
   overflow: hidden;
   background: var(--color-canvas);
}

.seq-canvas,
.hero-media img {
   width: 100%;
   height: auto;
   aspect-ratio: 1608 / 1288;
   display: block;
   /* Recorta el margen blanco de los frames para que la torre llene el encuadre */
   transform: scale(1.06);
   transform-origin: 50% 55%;
}

/* ==========================================================================
   Bento rendimiento
   ========================================================================== */

.bento {
   display: grid;
   grid-template-columns: 1.55fr 1fr;
   grid-template-rows: auto auto;
   gap: var(--sp-xl);
}

.bento-cell { border-radius: var(--rounded-xxxl); overflow: hidden; }

.bento-a { grid-row: 1 / 3; }

.bento-photo {
   position: relative;
   border: 1px solid var(--color-hairline-soft);
   background: var(--color-surface-soft);
}

.bento-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.bento-photo figcaption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: var(--sp-xxl);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 45%);
   padding-top: 72px;
}

.bento-photo h3 {
   font-size: 24px;
   font-weight: 500;
   line-height: 1.25;
}

.bento-photo figcaption p {
   margin-top: 6px;
   font-size: 14px;
   color: var(--color-slate);
   max-width: 46ch;
}

.bento-stat {
   background: var(--color-ink-deep);
   color: var(--color-canvas);
   padding: var(--sp-xxl);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   min-height: 240px;
}

.bento-stat-value {
   font-size: 64px;
   font-weight: 500;
   line-height: 1.1;
   font-feature-settings: "ss01", "ss02";
}

.bento-stat-label {
   margin-top: 10px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.72);
   max-width: 32ch;
}

/* ==========================================================================
   Promo strip oscura con fondo dither
   ========================================================================== */

.promo-strip {
   position: relative;
   border-radius: var(--rounded-xxxl);
   overflow: hidden;
   background:
      radial-gradient(75rem 50rem at 50% 45%, rgba(51, 199, 255, 0.14), transparent 60%),
      linear-gradient(180deg, #05080f, #081120);
   padding: var(--sp-section) var(--sp-section);
   min-height: 420px;
   display: flex;
   align-items: center;
}

.dither-container {
   position: absolute;
   inset: 0;
   opacity: 0.5;
}

.promo-strip-content {
   position: relative;
   z-index: 1;
   max-width: 560px;
}

.promo-strip-content h2 {
   color: var(--color-canvas);
   font-size: clamp(26px, 3vw, 36px);
   font-weight: 500;
   line-height: 1.28;
}

.promo-strip-content p {
   margin-top: var(--sp-base);
   font-size: 16px;
   color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Especificaciones
   ========================================================================== */

.spec-featured {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--sp-xl);
}

.spec-tile {
   background: var(--color-surface-soft);
   border-radius: var(--rounded-xl);
   padding: var(--sp-xl);
}

.spec-tile-label {
   font-size: 12px;
   font-weight: 700;
   color: var(--color-steel);
   line-height: 1.33;
}

.spec-tile-value {
   margin-top: 10px;
   font-size: 24px;
   font-weight: 500;
   line-height: 1.25;
   color: var(--color-ink-deep);
   font-feature-settings: "ss01", "ss02";
}

.spec-tile-note {
   margin-top: 4px;
   font-size: 14px;
   color: var(--color-slate);
}

.spec-groups {
   margin-top: var(--sp-section-sm);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--sp-xxl) var(--sp-section);
}

.spec-group { padding-top: var(--sp-lg); border-top: 1px solid var(--color-hairline-soft); }

.spec-group h3 {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.16px;
}

.spec-group p {
   margin-top: 6px;
   font-size: 14px;
   line-height: 1.43;
   color: var(--color-slate);
}

/* ==========================================================================
   Comprar
   ========================================================================== */

.buy-layout {
   display: grid;
   grid-template-columns: 58fr 42fr;
   gap: var(--sp-xxxl);
   align-items: start;
}

.buy-media {
   background: var(--color-surface-soft);
   border-radius: var(--rounded-xxxl);
   overflow: hidden;
   position: sticky;
   top: calc(var(--nav-height) + 24px);
}

.buy-media img { width: 100%; height: auto; }

.buy-panel {
   background: var(--color-canvas);
   border: 1px solid var(--color-hairline-soft);
   border-radius: var(--rounded-xl);
   box-shadow: var(--shadow-panel);
   padding: var(--sp-xl);
   max-width: 420px;
}

.badge {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.33;
   padding: 4px 10px;
   border-radius: var(--rounded-full);
}

.badge-success { background: var(--color-success); color: var(--color-canvas); }

.buy-panel h2 {
   margin-top: var(--sp-base);
   font-size: 28px;
   font-weight: 500;
   line-height: 1.21;
}

.buy-price {
   margin-top: 6px;
   font-size: 24px;
   font-weight: 700;
   color: var(--color-ink-deep);
}

.buy-finance {
   margin-top: 2px;
   font-size: 14px;
   color: var(--color-steel);
}

.buy-options {
   border: 0;
   margin-top: var(--sp-xl);
   display: grid;
   gap: 10px;
}

.buy-options legend {
   font-size: 14px;
   font-weight: 700;
   color: var(--color-ink);
   margin-bottom: 10px;
}

.radio-option {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: var(--sp-lg);
   border: 1px solid rgba(10, 19, 23, 0.12);
   border-radius: var(--rounded-lg);
   cursor: pointer;
   transition: border-color 0.15s ease;
}

.radio-option input {
   accent-color: var(--color-primary-deep);
   width: 18px;
   height: 18px;
   flex: none;
}

.radio-option:has(input:checked) {
   border: 2px solid var(--color-primary-deep);
   padding: calc(var(--sp-lg) - 1px);
}

.radio-body { flex: 1; min-width: 0; }

.radio-title {
   display: block;
   font-size: 14px;
   font-weight: 700;
   color: var(--color-ink-deep);
}

.radio-desc {
   display: block;
   margin-top: 2px;
   font-size: 13px;
   color: var(--color-steel);
}

.radio-price {
   font-size: 14px;
   font-weight: 700;
   color: var(--color-ink);
   flex: none;
}

#add-to-cart { margin-top: var(--sp-xl); }

.buy-note {
   margin-top: 12px;
   font-size: 13px;
   color: var(--color-steel);
   text-align: center;
}

/* ==========================================================================
   Why buy
   ========================================================================== */

.why-buy {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--sp-xl);
}

.why-tile {
   background: var(--color-canvas);
   border: 1px solid var(--color-hairline-soft);
   border-radius: var(--rounded-xl);
   padding: var(--sp-xxl) var(--sp-xl);
}

.why-tile i {
   font-size: 32px;
   color: var(--color-ink-deep);
}

.why-tile h3 {
   margin-top: var(--sp-base);
   font-size: 18px;
   font-weight: 700;
   line-height: 1.44;
   letter-spacing: -0.16px;
}

.why-tile p {
   margin-top: 6px;
   font-size: 14px;
   line-height: 1.43;
   color: var(--color-slate);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: grid; gap: 12px; }

.faq-item {
   border: 1px solid var(--color-hairline-soft);
   border-radius: var(--rounded-xl);
   overflow: hidden;
}

.faq-question {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sp-base);
   text-align: left;
   background: var(--color-canvas);
   border: 0;
   cursor: pointer;
   font-family: var(--font-sans);
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.16px;
   color: var(--color-ink-deep);
   padding: var(--sp-xl);
}

.faq-question i {
   font-size: 20px;
   color: var(--color-steel);
   transition: transform 0.3s ease;
   flex: none;
}

.faq-item.is-open .faq-question i { transform: rotate(180deg); }

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-in-out;
}

.faq-answer p {
   padding: 0 var(--sp-xl) var(--sp-xl);
   font-size: 16px;
   color: var(--color-slate);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
   border-top: 1px solid var(--color-hairline-soft);
   padding: var(--sp-section) 0 var(--sp-xxl);
   margin-top: var(--sp-section-sm);
}

.footer-inner {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--sp-xxl);
   flex-wrap: wrap;
}

.footer-logo {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.14em;
   color: var(--color-ink-deep);
}

.footer-tag {
   margin-top: 6px;
   font-size: 14px;
   color: var(--color-steel);
}

.footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sp-xl) var(--sp-xxl);
}

.footer-links a {
   font-size: 14px;
   color: var(--color-steel);
   text-decoration: none;
}

.footer-links a:hover { color: var(--color-ink); }

.footer-legal {
   margin-top: var(--sp-xxl);
   padding-top: var(--sp-xl);
   border-top: 1px solid var(--color-hairline-soft);
}

.footer-legal p {
   font-size: 12px;
   line-height: 1.33;
   color: var(--color-stone);
}

/* ==========================================================================
   Menú fullscreen (clip-path reveal + parallax tilt)
   ========================================================================== */

.menu {
   position: fixed;
   inset: 0;
   z-index: 60;
   display: flex;
   gap: var(--sp-xl);
   padding: var(--sp-xl);
   overflow: hidden;
   pointer-events: none;
   background: #0a0d12;
   clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

.menu-nav {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   display: flex;
   justify-content: flex-end;
   padding: var(--sp-xl) var(--sp-xxl);
}

.menu-close { color: #ffffff; }

.menu-img {
   position: relative;
   flex: 3;
   overflow: hidden;
   border-radius: var(--rounded-xxl);
   background: #10141a;
}

.menu-img img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 78%;
   height: auto;
   border-radius: var(--rounded-xl);
   transform: translate(-50%, -50%);
}

#img-1 { opacity: 0.9; }
#img-2 { opacity: 0.75; }
#img-3 { opacity: 0.6; }
#img-4 { opacity: 0.95; }

.menu-items {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1.2;
   padding: var(--sp-section-sm) var(--sp-xxl) var(--sp-xxl);
}

.menu-logo {
   color: #ffffff;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.14em;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.menu-links { display: grid; gap: 6px; }

.menu-link { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

.menu-link p { position: relative; }

.menu-link a {
   color: #ffffff;
   text-decoration: none;
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 500;
   line-height: 1.25;
   font-feature-settings: "ss01", "ss02";
}

.menu-link a:hover { color: var(--color-stone); }

.menu-footer { display: flex; gap: var(--sp-xxl); width: 100%; }

.menu-sub-col { flex: 1; }

.menu-sub-item { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

.menu-sub-item p {
   position: relative;
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   line-height: 1.7;
}

.menu-sub-item a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.menu-sub-item a:hover { color: #ffffff; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
   .hero-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
   .spec-featured { grid-template-columns: repeat(2, 1fr); }
   .why-buy { grid-template-columns: repeat(2, 1fr); }
   .buy-layout { grid-template-columns: 1fr; }
   .buy-media { position: static; }
   .buy-panel { max-width: none; }
}

@media (max-width: 767px) {
   .container { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
   .section { padding: var(--sp-section) 0; }
   .nav { padding: 0 var(--sp-lg); }
   .nav-links { display: none; }
   .btn-nav { display: none; }

   .hero-inner {
      grid-template-columns: 1fr;
      padding: var(--sp-lg);
      min-height: 0;
      padding-top: var(--sp-xxl);
   }
   .hero-media { order: -1; }
   .hero-copy h1 { font-size: 34px; }
   .seq-captions { min-height: 100px; margin-top: var(--sp-xxl); }

   .bento { grid-template-columns: 1fr; grid-template-rows: none; }
   .bento-a { grid-row: auto; }
   .bento-photo figcaption { padding: var(--sp-xl); }

   .promo-strip { padding: var(--sp-section-sm) var(--sp-xl); min-height: 340px; }

   .spec-groups { grid-template-columns: 1fr; gap: var(--sp-xl); }
   .why-buy { grid-template-columns: 1fr; }

   .menu { flex-direction: column; }
   .menu-img { display: none; }
   .menu-items { padding: var(--sp-section) var(--sp-lg) var(--sp-lg); }
}

@media (max-width: 479px) {
   .spec-featured { grid-template-columns: 1fr; }
   .hero-ctas .btn { flex: 1; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   .seq-caption,
   .faq-answer,
   .faq-question i,
   .btn { transition: none; }
}