/* ===== inicio.css — estilos exclusivos de la página de inicio =====
   Recuperados del <style> inline que traía un index.php anterior del
   proyecto. Estas variables (--ink, --deep, --acid, --paper, --mono,
   --display) son el acento propio del home (globo 3D, hero, secciones
   oscuras) y conviven con la paleta general de tienda-general.css. */

:root {
  --home-section-gap: 120px;
  --ink: #173861;
  --paper: #fff;
  --acid: #00cfff;
  --deep: #0088b3;
  --mono: "DM Mono", monospace;
  --display: "Space Grotesk", sans-serif;
}

/* Hero */
main { position: relative; z-index: 2; }
.scroll-journey { height: 100vh; }
.hero-stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; display: flex; align-items: center; padding: 110px 7vw 70px; }
.hero-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 73% 48%, rgba(0,207,255,.13), transparent 20%), linear-gradient(90deg, rgba(238,247,251,.98) 0%, rgba(238,247,251,.9) 40%, rgba(238,247,251,.16) 74%, rgba(238,247,251,.55) 100%); }
.hero-stage::after { content: ""; position: absolute; z-index: 0; right: 1%; top: 13%; width: 54vw; height: 74vh; border: 1px solid rgba(0,136,179,.16); border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
.fiber-canvas { position: fixed; z-index: 1; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }
.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 720px;
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
}
.page-ready .hero-copy { opacity: 1; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 26px; color: var(--deep); font: 11px var(--mono); letter-spacing: .08em; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(0,207,255,.2); }
h1 { max-width: 820px; margin-bottom: 26px; color: var(--ink); font-size: clamp(3.3rem, 6.8vw, 7.4rem); font-weight: 500; letter-spacing: -.07em; line-height: .86; text-wrap: balance; }
h1 em, h2 em { color: var(--deep); font-style: normal; }
.hero-subtitle { max-width: 470px; margin: 0 0 18px; color: var(--deep); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 500; }
.hero-intro { max-width: 430px; margin: 0; color: rgba(23,56,97,.8); font-size: 14px; line-height: 1.5; }
.hero-actions { display: flex; gap: 24px; margin-top: 32px; align-items: center; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; gap: 22px; padding: 15px 18px; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.primary-button { color: #527b84; background: #d8f2f4; }
.primary-button:hover { background: #b8e3e8; color: #4f747d; transform: translateY(-3px); }
.primary-button:active, .secondary-button:active { transform: scale(0.97); }
.primary-button span, .secondary-button span { display: inline-block; font-size: 19px; transition: transform .25s var(--ease-out); }
.primary-button:hover span, .secondary-button:hover span { transform: translateX(4px); }
.secondary-button { color: var(--ink); border-bottom: 1px solid rgba(23,56,97,.5); }
.secondary-button:hover { color: var(--deep); border-color: var(--deep); }

/* Paneles de escenas: impares a la derecha, pares (.left) a la izquierda */
.journey-scenes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.journey-scene { --dx: 48px; position: absolute; top: calc(50% + 34px); right: 5vw; left: auto; width: min(600px, 46vw); padding: 30px 34px; border: 1px solid rgba(145,202,235,.28); background: rgba(7,19,34,.9); box-shadow: 0 24px 70px rgba(7,19,34,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translate(var(--dx), -50%); transition: opacity .55s ease, transform .8s cubic-bezier(.22,1,.36,1), visibility 0s .8s; }
.journey-scene.left { --dx: -48px; left: 5vw; right: auto; }
.journey-scene.is-visible { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.journey-scene::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--acid); box-shadow: 0 0 24px rgba(0,207,255,.45); }
.journey-scene.left::before { inset: 0 0 0 auto; }
.journey-scene-kicker { margin: 0 0 16px; color: var(--acid); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.journey-scene h2 { margin: 0 0 22px; color: var(--paper); font-size: clamp(2.2rem, 3.8vw, 4rem); font-weight: 500; letter-spacing: -.07em; line-height: .88; }
.journey-scene h2 em { color: var(--acid); }
.journey-scene.compact h2 { margin-bottom: 22px; font-size: clamp(3rem, 4.8vw, 5.1rem); line-height: .9; }
.journey-scene p { margin: 0 0 14px; color: #9bb2c7; font-size: 15px; line-height: 1.55; }
.journey-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.journey-chip { padding: 8px 10px; border: 1px solid rgba(145,202,235,.35); color: #dff7ff; font: 10px var(--mono); text-transform: uppercase; }
/* Valores de Fibercas: tarjetas horizontales que se acomodan con el scroll */
.values-section { position: relative; height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; gap: 34px; padding: 100px 5vw 48px; overflow-x: clip; background: radial-gradient(ellipse at 85% 0%, rgba(0,207,255,.16), transparent 45%), #173861; color: var(--paper); }
.values-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.values-kicker { margin: 0 0 14px; color: var(--acid); font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.values-head h2 { margin: 0; font-size: clamp(2.6rem, 5.4vw, 5.6rem); font-weight: 500; letter-spacing: -.07em; line-height: .9; }
.values-head h2 em { color: var(--acid); font-style: normal; text-shadow: 0 0 30px rgba(0,207,255,.32); }
.values-meter { display: flex; align-items: center; gap: 14px; color: #bcd3e6; font: 11px var(--mono); }
.values-bar { width: 120px; height: 2px; background: rgba(145,202,235,.3); }
.values-bar i { display: block; height: 100%; background: var(--acid); transform: scaleX(0); transform-origin: left; }
.values-track { display: flex; align-items: stretch; width: 100%; }
.value-card { position: relative; flex: none; width: 100%; height: clamp(340px, 56vh, 480px); overflow: hidden; container-type: inline-size; border: 1px solid rgba(145,202,235,.28); background: rgba(7,19,34,.6); transition: border-color .4s, box-shadow .4s; }
.value-card:not(:first-child) { width: 0; opacity: 0; }
.value-card.is-current { border-color: rgba(0,207,255,.75); box-shadow: 0 0 44px rgba(0,207,255,.16); }
.value-in { min-width: 168px; height: 100%; padding: 24px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.value-num { color: var(--acid); font: 500 clamp(2.6rem, 16cqw, 7.5rem)/.9 var(--display); letter-spacing: -.06em; text-shadow: 0 0 30px rgba(0,207,255,.3); }
.value-card h3 { margin: 0 0 12px; font-size: clamp(1.15rem, 7.5cqw, 2.9rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.value-card p { max-width: 560px; margin: 0; color: #b7cce0; font-size: clamp(12.5px, 3.4cqw, 16px); line-height: 1.5; }
.values-detail { display: none; min-height: 96px; max-width: 520px; margin: 0; color: #d4e3f0; font-size: 15px; line-height: 1.55; }
.values-section.compact .value-card p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.values-section.compact .values-detail { display: block; }
@container (max-width: 150px) {
  .values-section.compact .value-in { min-width: 0; padding: 16px 10px; }
  .values-section.compact .value-num { font-size: 1.7rem; }
  .values-section.compact .value-card h3 { margin: 0; align-self: flex-start; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .95rem; }
}
@media (max-width: 1180px) { .value-card { height: clamp(300px, 44vh, 420px); } }
@media (max-width: 700px) {
  .values-section { gap: 22px; padding: 84px 20px 28px; }
  .values-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .value-card { height: clamp(240px, 38vh, 320px); }
  .values-detail { min-height: 100px; font-size: 14px; }
}
.journey-progress { position: absolute; right: 4vw; bottom: 30px; z-index: 3; display: flex; gap: 7px; }
.journey-progress i { display: block; width: 26px; height: 2px; background: rgba(23,56,97,.25); transition: background .3s, transform .3s; }
.journey-progress i.is-active { background: var(--deep); transform: scaleX(1.2); }

/* Nosotros */
.about-section { position: relative; padding: 150px 7vw var(--home-section-gap); background: #fff; overflow: hidden; }
.about-section::before { content: "FIBERCAS"; position: absolute; right: -7vw; top: 13%; color: rgba(23,56,97,.035); font: 700 clamp(10rem, 28vw, 32rem)/.8 var(--display); letter-spacing: -.13em; pointer-events: none; }
.about-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .65fr); gap: clamp(4rem, 12vw, 12rem); max-width: 1320px; margin: 0 auto; }
.about-kicker, .about-detail-head, .values-title span { color: var(--deep); font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.about-intro h2 { max-width: 760px; margin: 24px 0 30px; font-size: clamp(3.2rem, 6.7vw, 7.5rem); font-weight: 500; letter-spacing: -.085em; line-height: .84; }
.about-intro p, .about-detail p { max-width: 650px; color: #5a718a; font-size: 16px; line-height: 1.6; }
.about-intro .about-lead { max-width: 560px; color: var(--ink); font-size: 20px; line-height: 1.4; }
.about-detail { align-self: end; padding-top: 18px; border-top: 1px solid rgba(23,56,97,.25); }
.about-detail-head { display: flex; justify-content: space-between; margin-bottom: 28px; }
.about-detail p { font-size: 15px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.about-tags span { padding: 8px 10px; border: 1px solid rgba(23,56,97,.25); font: 10px var(--mono); text-transform: uppercase; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.category-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 18px 18px 16px; border: 1px solid rgba(23,56,97,.12); background: linear-gradient(180deg, rgba(238,247,251,.7), rgba(255,255,255,.9)); }
.category-card small { color: var(--deep); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.category-card h3 { margin: 14px 0 8px; color: var(--ink); font-size: clamp(1.4rem, 1.8vw, 2.2rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.category-card p { margin: 0; color: #5a718a; font-size: 13px; line-height: 1.45; }

.new-products-section {
  position: relative;
  padding: 0 7vw var(--home-section-gap);
  background: #fff;
}
.new-products-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.new-products-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.new-products-header h2 {
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 5.8rem);
  letter-spacing: -.08em;
  line-height: .9;
  font-weight: 500;
  color: var(--ink);
}
.new-products-header h2 em { color: var(--deep); font-style: normal; }
.new-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.new-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 330px;
  border: 1px solid rgba(23,56,97,.12);
  background: linear-gradient(180deg, rgba(238,247,251,.7), rgba(255,255,255,.95));
  box-shadow: 0 18px 36px rgba(12,35,64,.04);
}
.new-product-image {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: rgba(23,56,97,.04);
}
.new-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.new-product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 8px;
  background: rgba(23,56,97,.88);
  color: #fff;
  font: 9px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.new-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 16px;
}
.new-product-body small {
  display: inline-block;
  color: var(--deep);
  font: 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.new-product-body h3 {
  margin: 12px 0 10px;
  color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
}
.new-product-brand {
  margin: 0;
  color: #5a718a;
  font-size: 12px;
  line-height: 1.5;
}
.new-product-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  margin-top: auto;
  padding-top: 12px;
}
.new-product-footer form {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.new-product-footer strong {
  display: block;
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: -.04em;
}
.new-product-footer .btn-accion {
  box-sizing: border-box;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}
.new-product-footer .btn-accion .btn-ico {
  width: 36px;
  min-height: 48px;
}
.new-product-footer .btn-label {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
}
.new-product-footer .primary-button {
  background: var(--ink);
  color: #ffffff;
  border: 0;
  border-radius: 2px;
}
.new-product-footer .primary-button:hover {
  background: #112d4e;
  color: #ffffff;
  transform: translateY(-3px);
}
.new-product-footer .secondary-button {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(23,56,97,.28);
  border-radius: 2px;
}
.new-products-empty {
  padding: 26px 18px;
  border: 1px dashed rgba(23,56,97,.2);
  background: rgba(238,247,251,.4);
  color: #5a718a;
  font: 13px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.store-section {
  position: relative;
  padding: 120px 7vw calc(var(--home-section-gap) - 20px);
  background: linear-gradient(180deg, rgba(238,247,251,.8), rgba(255,255,255,1));
}
.store-shell {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.store-head { margin-bottom: 26px; }
.store-head .about-kicker { margin-bottom: 18px; }
.store-copy h2 {
  margin: 0 0 26px;
  font-size: clamp(2.7rem, 5vw, 6rem);
  font-weight: 500;
  letter-spacing: -.08em;
  line-height: .9;
  color: var(--ink);
}
.store-copy h2 em { color: var(--deep); font-style: normal; }
.store-copy p {
  max-width: 620px;
  margin: 0 0 22px;
  color: #5a718a;
  font-size: 16px;
  line-height: 1.65;
}
.store-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.store-meta span {
  padding: 11px 14px;
  border: 1px solid rgba(23,56,97,.15);
  background: rgba(255,255,255,.7);
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.store-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.store-card {
  min-height: 220px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(23,56,97,.12);
  background: linear-gradient(180deg, rgba(238,247,251,.76), rgba(255,255,255,.95));
  box-shadow: 0 24px 50px rgba(12,35,64,.08);
}
.store-card small {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--deep);
  font: 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.store-card h3 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2.5vw, 2.8rem);
  letter-spacing: -.06em;
  line-height: 1;
}
.store-card p {
  margin: 0;
  color: #5a718a;
  font-size: 14px;
  line-height: 1.55;
}

.solution-section {
  padding: 30px 7vw 90px;
  background: transparent;
  color: var(--ink);
}
.solution-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.solution-header {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 42px;
}
.solution-header .about-kicker {
  color: var(--deep);
  margin-bottom: 12px;
}
.solution-header h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 6rem);
  letter-spacing: -.08em;
  line-height: .9;
  font-weight: 500;
  color: var(--ink);
}
.solution-header h2 em { color: var(--deep); font-style: normal; }
.solution-header p {
  margin: 0;
  color: #5a718a;
  font-size: 16px;
  line-height: 1.65;
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.solution-card {
  position: relative;
  min-height: 280px;
  padding: 26px 22px 22px;
  border: 1px solid rgba(23,56,97,.12);
  background: rgba(255,255,255,.7);
  box-shadow: 0 18px 36px rgba(12,35,64,.05);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.solution-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,207,255,.6);
  box-shadow: 0 24px 40px rgba(0,207,255,.08);
}
.solution-number {
  margin-bottom: 24px;
  color: var(--deep);
  font: 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.solution-card h3 {
  margin: 0 0 18px;
  font-size: clamp(1.8rem, 2.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .96;
  color: var(--ink);
}
.solution-card p {
  margin: 0;
  color: #5a718a;
  font-size: 15px;
  line-height: 1.6;
}
.solution-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.solution-list span {
  padding: 8px 10px;
  border: 1px solid rgba(23,56,97,.14);
  color: var(--ink);
  font: 10px var(--mono);
  text-transform: uppercase;
  background: rgba(255,255,255,.7);
}

.brand-section {
  position: relative;
  z-index: 1;
  padding: 20px 7vw 120px;
  background: #f5fbff;
}
.brand-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.brand-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 42px;
}
.brand-kicker {
  grid-column: 1 / -1;
  margin: 0 0 10px;
}
.brand-header h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.5rem, 4vw, 5rem);
  letter-spacing: -.055em;
  line-height: .96;
  font-weight: 600;
  color: #173861;
  opacity: 1;
  filter: none;
}
.brand-header h2 em {
  color: rgba(0, 136, 179, .85);
  font-style: normal;
  font-weight: 600;
}
.brand-header p {
  margin: 0;
  max-width: 540px;
  color: #5a718a;
  font-size: 18px;
  line-height: 1.6;
  justify-self: end;
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px;
  border: 1px solid rgba(23,56,97,.12);
  background: rgba(255,255,255,.8);
  color: var(--ink);
  font: 600 clamp(1.5rem, 2vw, 2.4rem)/1 var(--display);
  letter-spacing: -.04em;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.brand-badge:hover {
  transform: translateY(-3px);
  border-color: rgba(0,207,255,.6);
  box-shadow: 0 20px 35px rgba(0,207,255,.08);
}

@media (max-width: 1100px) {
  .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .new-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-about-summary__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .solution-header,
  .brand-header {
    grid-template-columns: 1fr;
  }
  .brand-header p {
    justify-self: start;
  }
  .brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  :root { --home-section-gap: 80px; }
  .new-products-section,
  .home-about-summary,
  .solution-section,
  .brand-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .new-products-grid,
  .solution-grid,
  .brand-grid {
    grid-template-columns: 1fr;
  }
  .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .store-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .store-shell {
    grid-template-columns: 1fr;
  }
  .store-featured {
    grid-template-columns: 1fr;
  }
}

/* Qué ofrecemos / Enfoque y visión: sección fija con el mismo globo */
.offer-journey { position: relative; height: 100svh; min-height: 620px; background: transparent; }
.offer-stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: transparent; }
.offer-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 73% 48%, rgba(0,207,255,.13), transparent 20%); }
.offer-stage::after { content: ""; position: absolute; z-index: 0; right: 1%; top: 13%; width: 54vw; height: 74vh; border: 1px solid rgba(0,136,179,.16); border-radius: 50%; transform: rotate(-18deg); pointer-events: none; }
@media (max-width: 700px) { .offer-stage::after { right: -28%; top: 39%; width: 110vw; height: 52vh; } }
.values-strip { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); max-width: 1320px; margin: auto; border-top: 1px solid rgba(23,56,97,.2); }
.values-title, .value-line { min-height: 150px; padding: 18px 16px 14px 0; border-right: 1px solid rgba(23,56,97,.14); }
.values-title { display: flex; flex-direction: column; justify-content: space-between; padding-right: 24px; }
.values-title strong { font-size: 22px; font-weight: 500; letter-spacing: -.05em; }
.value-line { display: flex; flex-direction: column; gap: 12px; padding-left: 16px; }
.value-line b { color: var(--deep); font: 11px var(--mono); font-weight: 400; }
.value-line strong { font-size: 17px; font-weight: 500; letter-spacing: -.04em; }
.value-line span { color: #6e8499; font-size: 12px; line-height: 1.4; }

/* Secciones oscuras */
.section-label { display: flex; justify-content: space-between; border-top: 1px solid rgba(145,202,235,.2); padding-top: 13px; color: #7892ac; font: 10px var(--mono); text-transform: uppercase; }
.statement { padding: 120px 7vw 170px; background: linear-gradient(#071322 0%, #071322 85%, #0b1d33 100%); color: var(--paper); }
.statement-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12vw; padding-top: 75px; }
.statement h2 { margin: 0; font-size: clamp(4rem, 9vw, 9rem); font-weight: 500; letter-spacing: -.085em; line-height: .82; }
.statement h2 em { color: var(--acid); text-shadow: 0 0 30px rgba(0,207,255,.32); }
.statement-side { align-self: end; max-width: 310px; padding-bottom: 10px; }
.statement-side p, .flow-header p { color: #9bb2c7; font-size: 16px; line-height: 1.45; }
.text-link { display: inline-flex; gap: 28px; margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--acid); font: 11px var(--mono); text-transform: uppercase; }
.flow { padding: 40px 7vw 150px; background: #0c2340; color: var(--paper); }
.flow-header { display: grid; grid-template-columns: 1fr .4fr; gap: 12vw; }
.flow-header p { margin: 0; }
.flow-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 80px; }
.flow-item { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-top: 1px solid rgba(145,202,235,.3); transition: background .3s, color .3s; }
.flow-item:hover, .flow-item.active { background: var(--acid); color: #040b16; box-shadow: 0 0 45px rgba(0,207,255,.2); }
.flow-number, .flow-item p { font: 11px var(--mono); }
.flow-item h3 { margin: auto 0; font-size: clamp(3rem, 6vw, 6rem); font-weight: 500; letter-spacing: -.08em; line-height: .77; }
.flow-item p { margin: 0; color: #9bb2c7; }
.flow-item:hover p, .flow-item.active p { color: #040b16; }
.flow-arrow { align-self: end; font-size: 29px; font-weight: 300; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (pointer: coarse) { .cursor-glow { display: none; } body { cursor: auto; } }
@media (max-width: 1100px) {
  .main-nav { gap: 13px; } .header-tools { gap: 10px; } .search-box input { width: 78px; }
  .about-layout { gap: 5rem; }
  .values-strip { grid-template-columns: repeat(3, 1fr); }
  .values-title { grid-column: 1 / -1; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(23,56,97,.14); }
}
@media (max-width: 700px) {
  body { cursor: auto; }
  .topbar { min-height: 68px; padding: 10px 5vw; }
  .main-nav, .top-action span, .search-box input { display: none; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .main-nav.menu-abierto { display: flex; flex: 1 0 100%; flex-direction: column; gap: 2px; padding: 8px 0 10px; }
  .main-nav.menu-abierto a { padding: 10px 12px; border-bottom: 0; border-left: 2px solid transparent; }
  .main-nav.menu-abierto a:hover, .main-nav.menu-abierto a[aria-current="page"] { border-left-color: var(--acid); background: rgba(255,255,255,.1); }
  .search-box { padding: 6px; border: 0; }
  .cart-link { font-size: 0; } .cart-link span { font-size: 11px; }
  .site-header.header-scrolled .main-menu-bar .menu-inner { gap: 10px; }
  .site-header.header-scrolled .delivery-pill { font-size: 11px; }
  .hero-stage { align-items: flex-start; padding: 100px 7vw 40px; }
  .hero-stage::before { background: linear-gradient(180deg, rgba(238,247,251,.98) 0%, rgba(238,247,251,.84) 48%, rgba(238,247,251,.35) 100%); }
  .hero-stage::after { right: -28%; top: 39%; width: 110vw; height: 52vh; }
  h1 { max-width: 100%; font-size: clamp(2rem, 9.5vw, 4.2rem); }
  .hero-subtitle, .hero-intro { max-width: 330px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; width: max-content; }
  .primary-button, .secondary-button { justify-content: space-between; }
  .journey-scene, .journey-scene.left { left: 16px; right: 16px; top: auto; bottom: 20px; width: auto; padding: 18px 18px 20px; --dx: 0px; transform: translateY(24px); }
  .journey-scene.is-visible, .journey-scene.left.is-visible { transform: none; }
  .journey-scene.left::before { inset: 0 auto 0 0; }
  .journey-scene h2 { margin-bottom: 12px; font-size: 1.8rem; }
  .journey-scene.compact { left: 4vw; right: 4vw; top: auto; bottom: 20px; width: auto; padding: 0; }
  .values-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .values-head h2 { font-size: clamp(2.8rem, 10vw, 5.5rem); }
  .values-head .values-counter::after { width: 90px; }
  .journey-scene p { margin-bottom: 10px; font-size: 13px; line-height: 1.45; }
  .journey-values-track { grid-template-columns: 1fr; gap: 18px; width: 100%; padding-top: 0; }
  .journey-value { min-height: 260px; padding: 18px 18px 20px; }
  .journey-value-number { margin-bottom: 28px; font-size: clamp(3rem, 12vw, 5rem); }
  .journey-value-copy strong { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .journey-value-copy p { font-size: 12.5px; }
  .journey-progress { display: none; }
  .about-section { padding: 90px 7vw var(--home-section-gap); }
  .about-layout { display: block; margin-bottom: 0; }
  .about-intro h2 { margin-top: 18px; font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .about-intro .about-lead { font-size: 18px; }
  .about-detail { margin-top: 64px; }
  .values-strip { display: block; }
  .values-title, .value-line { min-height: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(23,56,97,.14); }
  .values-title { gap: 22px; }
  .value-line { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; } .value-line span { grid-column: 2; }
  .statement { padding-top: 100px; }
  .statement-layout, .flow-header { display: block; }
  .statement-side { margin-top: 70px; }
  .statement h2 { font-size: clamp(3.8rem, 16vw, 6.5rem); }
  .flow-list { display: block; margin-top: 60px; }
  .flow-item { min-height: 250px; margin-bottom: 10px; }
}
@media (max-width: 480px) {
  .topbar { padding: 12px 16px; } .header-tools { gap: 6px; }
  .hero-stage { padding: 105px 20px 40px; }
  .hero-actions { width: 100%; }
  .primary-button, .secondary-button { width: 100%; min-height: 48px; }
  .statement, .flow { padding-left: 20px; padding-right: 20px; }
}