/* Estilos del octaedro 3D → asset compartido scene-3d.css */

  /* ========= Sections ========= */
  main { position: relative; z-index: 2; }
.sec-left .journey .journey-step:nth-child(5) .journey-node,
  .sec-right .journey .journey-step:nth-child(5) .journey-node {
    margin-bottom: 0; flex-shrink: 0;
    background: transparent;
    background-image: linear-gradient(120deg, #6ee7a8, #1ec8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; border-color: transparent;
  }
.journey-step:nth-child(3) .journey-node { border: none; background-image: linear-gradient(120deg, #6ee7a8, #1ec8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.journey-step:nth-child(4) .journey-card { background: rgba(110,231,168,.10); border-color: rgba(110,231,168,.22); }
.journey-step:nth-child(4) .journey-node { border: none; background-image: linear-gradient(120deg, #1ec8ff, #6ee7a8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.journey-step:nth-child(4) .journey-week { color: #6ee7a8; }
.journey-rail {
    display: none;
  }
.journey-progress {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #1ec8ff, #6ee7a8);
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(.8);
    box-shadow: 0 0 12px rgba(30,200,255,.5);
  }
.journey-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.journey-node {
    position: relative; z-index: 2;
    width: auto; height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(56px, 6vw, 96px);
    line-height: .85;
    letter-spacing: -.04em;
    background-image: linear-gradient(120deg, #6ee7a8, #1ec8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 4px;
    transition: none;
  }
.journey-step:hover .journey-node { transform: none; }
.journey-card h3 { margin: 0 0 8px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; }
.glass-card.tint-cyan    { background: linear-gradient(135deg, rgba(30,200,255,.18), rgba(30,200,255,.06)); border-color: rgba(30,200,255,.22); }
.glass-card.tint-lav     { background: linear-gradient(135deg, rgba(183,148,244,.18), rgba(183,148,244,.06)); border-color: rgba(183,148,244,.22); }
.glass-card.tint-mint    { background: linear-gradient(135deg, rgba(110,231,168,.18), rgba(110,231,168,.06)); border-color: rgba(110,231,168,.22); }
.glass-card.tint-rose    { background: linear-gradient(135deg, rgba(196,80,110,.16), rgba(196,80,110,.05)); border-color: rgba(196,80,110,.18); }
.glass-card.tint-amber   { background: linear-gradient(135deg, rgba(255,206,120,.20), rgba(255,206,120,.06)); border-color: rgba(255,206,120,.22); }
/* ── Casos reales — editorial cards ── */
  .product-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }
.product-card {
    grid-column: span 2;
    background: #fff;
    border-radius: 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.03);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    color: #1a1a2e;
    display: flex;
    flex-direction: column;
  }
/* Center last row (2 items) */
  .product-card:nth-child(4) { grid-column: 2 / 4; }
.product-card:nth-child(5) { grid-column: 4 / 6; }
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 20px 48px rgba(0,0,0,.08);
  }
/* Accent bar top */
  .product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
  }
.product-card.p1::before { background: #1ec8ff; }
.product-card.p2::before { background: #b794f4; }
.product-card.p3::before { background: #6ee7a8; }
.product-card.p4::before { background: #c4506e; }
.product-card.p5::before { background: #ffce78; }
/* Card inner layout */
  .caso-inner {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
.caso-metric {
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
  }
.caso-metric span {
    font-size: 26px;
    opacity: .45;
    font-weight: 700;
  }
.product-card.p1 .caso-metric { color: #0ea5d6; }
.product-card.p2 .caso-metric { color: #9b7ad8; }
.product-card.p3 .caso-metric { color: #2d9a62; }
.product-card.p4 .caso-metric { color: #c4506e; }
.product-card.p5 .caso-metric { color: #b8922e; }
.caso-desc {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7a7a8a;
    margin-top: 6px;
    font-weight: 500;
  }
.caso-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,.08), transparent);
    margin: 22px 0 18px;
  }
.caso-empresa {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1a1a2e;
  }
.caso-sector {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9a9aaa;
    opacity: .5;
    display: block;
    margin-bottom: 4px;
  }
/* Bento feature icons */
  .bento-icon {
    width: 44px; height: 44px; margin-bottom: 8px;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
.bento-icon svg { width: 26px; height: 26px; }
/* Mobile fixes for new bits */
  @media (max-width: 1000px) {
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .bento .b1, .bento .b2, .bento .b3, .bento .b4, .bento .b5 { grid-column: span 2; grid-row: auto; }
    .product-row { grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .product-card { grid-column: span 2 !important; }
    .product-card:nth-child(5) { grid-column: 2 / 4 !important; }
    .process-row { grid-template-columns: 1fr 1fr; }
    .feature-spotlight { grid-template-columns: 1fr; }
  }
@media (max-width: 760px) {
    .bento { grid-template-columns: 1fr; }
    .bento > * { grid-column: span 1 !important; }
    .product-row { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; padding: 0 16px 14px; scrollbar-width: none; }
    .product-row::-webkit-scrollbar { display: none; }
    .product-row > * { flex: 0 0 80%; min-width: 280px; scroll-snap-align: start; }
    .process-row { display: flex; flex-direction: row; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
    .process-row::-webkit-scrollbar { display: none; }
    .process-row > * { flex: 0 0 78%; min-width: 78%; scroll-snap-align: start; }
    .editorial h2 { font-size: clamp(36px, 9vw, 56px); }
  }
/* Octaes editorial: serif italic accent */
  .ital {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: #6ee7a8;
  }
.card {
    background: rgba(30,200,255,.03);
    border: 1px solid rgba(30,200,255,.10);
    border-radius: clamp(20px, 2vw, 28px);
    padding: clamp(22px, 2.4vw, 34px);
  }
.card .num-tag {
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(48px, 6vw, 80px);
    line-height: .85;
    letter-spacing: -.04em;
    background: linear-gradient(120deg, #6ee7a8, #1ec8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: auto; height: auto;
    border-radius: 0;
    border: none;
    position: static;
    padding: 0;
    margin: 0 0 4px;
  }
/* Sector base styles — see "Sectores — bento editorial" block below for full design */

  .team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.member .avatar {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 22px;
    box-shadow: 0 10px 24px rgba(30,200,255,.2);
    overflow: hidden;
  }
.member .avatar img {
    width: 100%; height: 100%; object-fit: cover;
  }
/* === Ignite effect: letras "encendiéndose" una a una al hacer scroll === */
  .ignite {
    display: inline-block;
    white-space: nowrap;
  }
.ignite .lt {
    display: inline-block;
    /* Cada letra lleva su propio gradiente: visible desde el inicio en estado "tenue" */
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Estado por defecto: visible, gradiente, ligeramente apagado, sin destello */
    filter: brightness(.85);
    transition: filter .35s ease;
    will-change: filter, transform;
  }
.ignite .lt.sp {
    background: none;
    -webkit-text-fill-color: initial;
    color: inherit;
    filter: none;
  }
/* Cascade trigger: cuando el contenedor recibe .lit, cada letra ejecuta el pulso */
  .ignite.lit .lt:not(.sp) {
    animation: ignite 950ms cubic-bezier(.16,.84,.36,1) both;
    animation-delay: calc(var(--i, 0) * 130ms);
  }
@keyframes ignite {
    0% {
      filter: brightness(.85);
      transform: translateY(0);
    }
    25% {
      filter: brightness(2.0)
              drop-shadow(0 0 14px rgba(30,200,255,.95))
              drop-shadow(0 0 28px rgba(183,148,244,.55));
      transform: translateY(-1px);
    }
    45% {
      filter: brightness(1.4)
              drop-shadow(0 0 8px rgba(110,231,168,.5));
      transform: translateY(0);
    }
    65% {
      filter: brightness(1.6)
              drop-shadow(0 0 10px rgba(30,200,255,.6));
    }
    100% {
      filter: brightness(1.05)
              drop-shadow(0 0 5px rgba(30,200,255,.35));
      transform: translateY(0);
    }
  }
@media (prefers-reduced-motion: reduce) {
    .ignite.lit .lt { animation: none; filter: brightness(1); }
  }
@media (max-width: 1000px) {
    .sec-left, .sec-right { grid-template-columns: 1fr; }
    .sec-right .content { grid-column: 1; }
    /* Octaedro: solo bajar opacidad en mobile (mismo patrón que el resto de landings).
       Sin transform: scale() ni transform-origin, que generan padding lateral
       y cortan el octaedro del viewport. */
    .scene { opacity: .35; }
    nav.top .links { display: none; }
    nav.top .lang { display: none; }
    .progress { display: none; }
    .plan.featured { transform: none; }
    /* Reset bento journey to simple 2-col auto-flow at tablet */
    .sec-left .journey, .sec-right .journey { grid-template-columns: 1fr 1fr; }
    .sec-left .journey .journey-step,
    .sec-right .journey .journey-step { grid-column: auto !important; grid-row: auto !important; align-self: start !important; }
    .sec-left .journey .journey-step .journey-card,
    .sec-right .journey .journey-step .journey-card { flex: initial !important; }
    .sec-left .journey .journey-step:nth-child(5),
    .sec-right .journey .journey-step:nth-child(5) { grid-column: auto !important; }
    .sec-left .journey .journey-step:nth-child(5) .journey-node,
    .sec-right .journey .journey-step:nth-child(5) .journey-node { background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: white; border-color: transparent; }
  }
@media (max-width: 760px) {
    section { padding: 90px 4vw 70px; min-height: auto; }
    /* Journey mobile: estilos movidos al bloque Octaes-style (línea ~2634) */
    .sec-left .stat-row .stat-card:first-child,
    .sec-right .stat-row .stat-card:first-child { grid-row: auto; }
    .panel { padding: 28px 22px; border-radius: 24px; }
    nav.top { top: 10px; padding: 8px 8px 8px 14px; gap: 8px; }
    nav.top .logo { font-size: 14px; padding-right: 10px; }
    nav.top .logo .mark { width: 22px; height: 22px; }
    nav.top .right { padding-left: 8px; margin-left: 0; }
    nav.top .signin { padding: 9px 14px; font-size: 13px; }
    h1 { font-size: clamp(34px, 9vw, 50px); }
    h2 { font-size: clamp(26px, 7vw, 38px); }
    .quote-block { font-size: clamp(20px, 5.2vw, 26px); }
    .panel.iridescent::before, .panel.iridescent::after { width: 180px; height: 180px; }
    
    /* Horizontal scroll para grids "homogéneos" (plans, team, casos, process, testimonios) */
    .grid-3, .plans, .team, .timeline, .product-row, .process-row, #testimonial-grid {
      display: flex !important;
      flex-direction: row !important;
      overflow-x: auto;
      gap: 12px;
      scroll-snap-type: x mandatory;
      padding: 4px 4px 18px;
      margin: 0 -4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .grid-3::-webkit-scrollbar,
    .plans::-webkit-scrollbar,
    .team::-webkit-scrollbar,
    .timeline::-webkit-scrollbar,
    .product-row::-webkit-scrollbar,
    .process-row::-webkit-scrollbar,
    #testimonial-grid::-webkit-scrollbar { display: none; }
    .grid-3 > *, .plans > *, .team > *, .timeline > *, .product-row > *, .process-row > *, #testimonial-grid > * {
      scroll-snap-align: start;
      flex: 0 0 78%;
      min-width: 78%;
      border-radius: 22px !important;
    }
    .timeline .step { padding-top: 28px; }
  }
/* Card 01 editorial illustration */
  .c01-scene { flex: 1; min-height: 160px; width: 100%; margin-top: 18px; position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, rgba(30,200,255,.06) 0%, rgba(30,200,255,.02) 100%); }
.c01-scene .c01-glow { position: absolute; width: 50%; height: 50%; border-radius: 50%; filter: blur(40px); opacity: .35; pointer-events: none; }
.c01-scene .c01-panel { background: rgba(255,255,255,.55); border: 1px solid rgba(30,200,255,.18); border-radius: 12px; font-family: 'Inter Tight', sans-serif; }
.c01-scene .c01-panel-dark { background: rgba(10,30,50,.65); border: 1px solid rgba(30,200,255,.15); border-radius: 12px; color: #fff; font-family: 'Inter Tight', sans-serif; }
.c01-scene .c01-label { font-size: 8px; text-transform: uppercase; letter-spacing: .12em; opacity: .55; font-weight: 600; }
.c01-scene .c01-metric { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.c01-scene .c01-tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 8px; font-weight: 700; letter-spacing: .05em; }
.c01-scene .c01-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid rgba(30,200,255,.08); font-size: 10px; }
.c01-scene .c01-row:last-child { border-bottom: none; }
.c01-scene .c01-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
@keyframes c01-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes c01-scan { 0% { top: 8%; } 100% { top: 88%; } }
.c01-scene .c01-scan-line { position: absolute; left: 3%; right: 3%; height: 1px; background: linear-gradient(90deg, transparent, rgba(30,200,255,.5), transparent); z-index: 5; animation: c01-scan 3s ease-in-out infinite alternate; box-shadow: 0 0 8px rgba(30,200,255,.3); }
@media (max-width: 760px) {
    .c01-scene { min-height: 110px; margin-top: 12px; }
    .c01-scene .c01-metric { font-size: 20px; }
    .c01-scene .c01-row { padding: 3px 6px; font-size: 9px; }
    .c01-scene .c01-label { font-size: 7px; }
  }
@media (max-width: 520px) {
    .c01-scene .c01-panel, .c01-scene .c01-panel-dark { border-radius: 8px; }
    .c01-scene .c01-row { padding: 2px 5px; font-size: 8px; gap: 4px; }
    .c01-scene .c01-dot { width: 4px; height: 4px; }
  }
/* Methodology card 03 detail list */
  .journey-details {
    list-style: none;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(110,231,168,.15);
  }
.journey-details li {
    position: relative;
    padding: 5px 0 5px 18px;
    font-size: 13px;
    color: #4a4a5a;
    line-height: 1.45;
  }
.journey-details li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #6ee7a8;
    font-weight: 600;
  }
/* Stat card +30% illustration fill */
  .stat-card.is-live { justify-content: flex-end; }
.stat-card.is-live .stat-fill { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; pointer-events: none; }
/* Plataforma glass-card fills */
  .bento .b2 .plat-fill { flex: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bento .b3, .bento .b4, .bento .b5 { display: flex; flex-direction: column; }
.bento .b3 .plat-fill, .bento .b4 .plat-fill, .bento .b5 .plat-fill { margin-top: auto; padding-top: 10px; pointer-events: none; }
/* Override heading accent in Metodología — brand colors only */
  #metodo h2 .accent {
    background: linear-gradient(120deg, #6ee7a8, #1ec8ff) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important;
  }
/* ===== Sectores — bento editorial (HeyGen-inspired) ===== */

  /* Contenedor bento */
  #sectores { overflow: visible !important; }
.sectors-bento {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "feat s2 s3"
      "feat s4 s5";
    gap: 16px;
    max-width: 1060px;
    margin: 0 auto;
  }
/* Featured card spans 2 rows */
  .sector-card.sc-1 { grid-area: feat; }
.sector-card.sc-2 { grid-area: s2; }
.sector-card.sc-3 { grid-area: s3; }
.sector-card.sc-4 { grid-area: s4; }
.sector-card.sc-5 { grid-area: s5; }
/* 6th card: full-width bottom row */
  .sector-card.sc-6 {
    grid-column: 1 / -1;
    max-width: 100%;
  }
/* === Card base === */
  .sector-card {
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  }
.sector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(0,0,0,.35);
  }
/* Asymmetric border-radius vocabulary: alternating 52px/14px */
  .sector-card.sc-1 { border-radius: 52px 14px 52px 14px; }
.sector-card.sc-2 { border-radius: 14px 52px 14px 52px; }
.sector-card.sc-3 { border-radius: 52px 14px 14px 52px; }
.sector-card.sc-4 { border-radius: 14px 52px 52px 14px; }
.sector-card.sc-5 { border-radius: 52px 14px 52px 14px; }
.sector-card.sc-6 { border-radius: 14px 52px 14px 52px; }
/* Glassmorphism backgrounds — glass-on-dark (Octaes-inspired) */
  .sector-card.sc-1 { background: linear-gradient(160deg, rgba(30,200,255,.18), rgba(255,255,255,.03)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(30,200,255,.22); box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); }
.sector-card.sc-2 { background: rgba(255,255,255,.06); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08); }
.sector-card.sc-3 { background: rgba(255,255,255,.06); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08); }
.sector-card.sc-4 { background: linear-gradient(160deg, rgba(110,231,168,.14), rgba(255,255,255,.03)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(110,231,168,.18); box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.sector-card.sc-5 { background: rgba(255,255,255,.06); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08); }
.sector-card.sc-6 { background: rgba(255,255,255,.06); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08); }
/* SVG scene container */
  .sector-scene {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
  }
.sector-scene svg {
    width: 100%;
    height: 100%;
    display: block;
  }
/* Featured card scene is taller */
  .sector-card.sc-1 .sector-scene {
    aspect-ratio: 4 / 3;
  }
/* 6th card is horizontal layout */
  .sector-card.sc-6 {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 20px 32px;
    max-width: 700px;
    margin: 0 auto;
  }
.sector-card.sc-6 .sector-scene {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }
/* Metric badge — floating */
  .sector-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 50px;
    color: #fff;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    box-shadow: 0 4px 16px rgba(11,13,18,.12);
  }
.sc-1 .sector-metric { background: #1ec8ff; }
.sc-2 .sector-metric { background: #1ec8ff; }
.sc-3 .sector-metric { background: #6ee7a8; color: #0a2a1a; }
.sc-4 .sector-metric { background: #6ee7a8; color: #0a2a1a; }
.sc-5 .sector-metric { background: #1ec8ff; }
.sc-6 .sector-metric { background: #1ec8ff; top: 16px; right: 16px; }
/* Card text */
  .sector-card h3 {
    font-family: "Inter Tight", "Inter", sans-serif;
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin: 0 0 6px;
  }
.sc-1 h3 { font-size: clamp(24px, 2.2vw, 32px); color: #0e6a8a; }
.sc-2 h3 { color: #0e6a8a; }
.sc-3 h3 { color: #1a7a52; }
.sc-4 h3 { color: #1a7a52; }
.sc-5 h3 { color: #0e6a8a; }
.sc-6 h3 { color: #0e6a8a; }
.sector-card p {
    font-size: 13px;
    font-weight: 500;
    color: #2c3340;
    line-height: 1.5;
    margin: 0;
  }
.sc-1 p { font-size: 14px; }
/* === Panel #sectores — Dark editorial (Octaes-inspired) === */
  #sectores .panel.mesh {
    background:
      linear-gradient(135deg, rgba(30,200,255,.18) 0%, rgba(11,13,18,.90) 50%, rgba(110,231,168,.14) 100%),
      rgba(11,13,18,.88) !important;
    backdrop-filter: blur(36px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(170%) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 40px 90px -30px rgba(0,0,0,.5) !important;
    position: relative;
  }
/* Diamond top-left — glow on dark */
  #sectores .panel.mesh::before {
    content: "" !important;
    position: absolute !important;
    inset: auto !important;
    width: 380px !important;
    height: 380px !important;
    background: radial-gradient(ellipse at center, rgba(30,200,255,.20), rgba(110,231,168,.08), transparent 70%) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: 1 !important;
    filter: blur(40px) !important;
    animation: none !important;
    left: -120px !important;
    top: -100px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 0 !important;
    pointer-events: none;
  }
/* Diamond bottom-right — glow on dark */
  #sectores .panel.mesh::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    background: radial-gradient(ellipse at center, rgba(110,231,168,.18), rgba(30,200,255,.06), transparent 70%);
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 1;
    filter: blur(40px);
    right: -120px;
    bottom: -100px;
    transform: none;
    z-index: 0;
    pointer-events: none;
  }
#sectores .panel.mesh > * { position: relative; z-index: 2; }
/* Dark theme text overrides for sectores */
  #sectores h2 { color: #fff !important; }
#sectores h2 .accent {
    background: linear-gradient(120deg, #6ee7a8, #1ec8ff) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important;
  }
#sectores .eyebrow { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.15) !important; background: rgba(255,255,255,.06) !important; }
#sectores .lede { color: rgba(255,255,255,.65) !important; }
#sectores .caso-sector { color: rgba(255,255,255,.5) !important; opacity: 1 !important; }
#sectores .sector-card h3 { color: #fff !important; }
#sectores .sector-card h3 .ital { color: #6ee7a8 !important; }
#sectores .sector-card p { color: rgba(255,255,255,.7) !important; }
/* === Tablet: 2 columns === */
  @media (max-width: 860px) {
    .sectors-bento {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "feat feat"
        "s2   s3"
        "s4   s5";
      gap: 12px;
    }
    .sector-card.sc-1 .sector-scene { aspect-ratio: 16 / 8; }
    .sector-card.sc-6 { flex-direction: column; max-width: 100%; }
    .sector-card.sc-6 .sector-scene { width: 100%; aspect-ratio: 16 / 10; }
    .sector-card h3 { font-size: 18px; }
    .sc-1 h3 { font-size: 22px; }
  }
/* === Mobile: 2 columns maintained === */
  @media (max-width: 520px) {
    .sectors-bento {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "feat feat"
        "s2   s3"
        "s4   s5";
      gap: 8px;
    }
    .sector-card { padding: 14px; }
    .sector-card h3 { font-size: 15px; }
    .sc-1 h3 { font-size: 19px; }
    .sector-card p { font-size: 11px; }
    .sc-1 p { font-size: 12px; }
    .sector-scene { aspect-ratio: 16 / 9; margin-bottom: 10px; }
    .sector-card.sc-1 .sector-scene { aspect-ratio: 16 / 8; }
    .sector-metric { font-size: 11px; padding: 4px 10px; top: 10px; right: 10px; }
    .sector-card.sc-6 { flex-direction: column; gap: 10px; max-width: 100%; padding: 14px; }
    .sector-card.sc-6 .sector-scene { width: 100%; aspect-ratio: 16 / 9; }
    .sc-6 .sector-metric { top: 10px; right: 10px; }
  }
#equipo { position: relative; z-index: 1; }
/* === DEBUG + CENTRADO NUCLEAR (mobile y tablet) === */
  @media (max-width: 1000px) {

    /* CENTRADO HYPER-AGRESIVO con html body section -- máxima especificidad */
    html body section#precios,
    html body section#precios *,
    html body section#planes,
    html body section#planes *,
    html body section#sectores,
    html body section#sectores *,
    html body section[data-scene="4"],
    html body section[data-scene="4"] *,
    html body section[data-scene="9"],
    html body section[data-scene="9"] *,
    html body section[data-scene="11"],
    html body section[data-scene="11"] *,
    html body section[data-scene="12"],
    html body section[data-scene="12"] * {
      text-align: center !important;
    }
    html body section[data-scene="12"] .glass-card > div:last-child {
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
    }
    html body section[data-scene="4"] .plan ul,
    html body section#precios .plan ul,
    html body section#planes .plan ul {
      padding: 0 !important;
      margin: 0 0 22px !important;
      list-style: none !important;
    }
    html body section[data-scene="4"] .plan ul li,
    html body section#precios .plan ul li,
    html body section#planes .plan ul li {
      padding-left: 0 !important;
      list-style: none !important;
      display: block !important;
    }
    html body section[data-scene="4"] .plan ul li::before,
    html body section#precios .plan ul li::before,
    html body section#planes .plan ul li::before {
      content: "" !important;
      margin: 0 !important;
    }
    html body section[data-scene="4"] .plan .btn {
      align-self: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
/* === CENTRADO RESPONSIVE: planes/precios, empresas, testimonios, cómo trabajamos === */
  /* Aplica de 480 a 1000px (tablet + mobile) para garantizar que SIEMPRE se vea */
  @media (max-width: 1000px) {
    /* Headers */
    section[data-scene="4"] h2,  section[data-scene="4"]  .lede,
    section[data-scene="9"] h2,  section[data-scene="9"]  .lede,
    section[data-scene="11"] h2, section[data-scene="11"] .lede,
    section[data-scene="12"] h2, section[data-scene="12"] .lede,
    #precios h2, #precios .lede,
    #planes h2,  #planes .lede,
    #sectores h2, #sectores .lede,
    #transparencia h2, #transparencia .lede {
      text-align: center !important;
    }

    
    .plan,
    .plan h3,
    .plan .tag,
    .plan .meta,
    .plan .price,
    .plan .per,
    .plan ul,
    .plan ul li,
    .plan p,
    .plan div {
      text-align: center !important;
    }
    .plan ul {
      padding: 0 !important;
      margin: 0 0 22px !important;
      list-style: none !important;
    }
    .plan ul li {
      padding-left: 0 !important;
      list-style: none !important;
      display: block !important;
    }
    .plan ul li::before {
      content: "" !important;
      margin: 0 !important;
    }
    .plan .btn {
      align-self: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Empresas / Casos reales */
    .product-card,
    .product-card * { text-align: left !important; }

    /* Cómo trabajamos / Process */
    .step-card,
    .step-card h3,
    .step-card p,
    .step-card * { text-align: center !important; }
    .step-card .num {
      margin-left: auto !important;
      margin-right: auto !important;
      margin-bottom: 12px !important;
    }

    /* Testimonios */
    #testimonial-grid .glass-card,
    #testimonial-grid .glass-card * {
      text-align: center !important;
    }
    #testimonial-grid .glass-card { align-items: center !important; }
    #testimonial-grid .glass-card > div:last-child {
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
    }
  }
/* Mobile: <768px */
  @media (max-width: 768px) {
    /* === HERO: solo padding mobile, sin centrar el texto general === */
    #hero { padding: 100px 5vw 50px !important; }
    #hero .pill-row { flex-wrap: wrap; }
    #hero h1 { font-size: clamp(36px, 11vw, 56px); line-height: 1.05; }
    #hero .lede { font-size: 16px; line-height: 1.55; }
    /* Stats del hero (1-a-1 / 3 planes / 0 dependencia): SOLO ESTOS centrados */
    #hero > .content > div[style*="display:flex"][style*="gap:36px"] {
      justify-content: center !important;
    }
    #hero > .content > div[style*="display:flex"][style*="gap:36px"] > div {
      text-align: center;
    }

    /* Journey mobile: movido al bloque Octaes-style más abajo (línea ~2640) */

    /* Section general: padding consistente y respira */
    section { padding: 70px 5vw 60px !important; min-height: auto !important; }
    .panel { padding: 28px 22px !important; border-radius: 28px !important; }

    /* === BENTO Plataforma — 2 cols con JERARQUÍA preservada === */
    .bento {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      grid-auto-rows: auto !important;
      gap: 10px !important;
      flex-direction: unset !important;
      overflow: visible !important;
      margin: 0 !important;
      padding: 0 !important;
      scroll-snap-type: none !important;
    }
    .bento > * {
      flex: unset !important;
      min-width: 0 !important;
      width: auto !important;
      aspect-ratio: auto !important;
      scroll-snap-align: none !important;
      border-radius: 22px !important;
      padding: 20px 18px !important;
    }
    /* Jerarquía: b1 (hero) + b2 (KPI) ocupan ancho completo. b3/b4 comparten fila. b5 ancho completo. */
    .bento .b1,
    .bento .b2,
    .bento .b5 {
      grid-column: 1 / -1 !important;
      min-height: 180px;
    }
    .bento .b3,
    .bento .b4 {
      grid-column: auto !important;
      min-height: 130px;
    }
    /* Reescala contenido interno del bento */
    .bento .b1 .video-slot { height: 130px !important; }
    .bento .b1 h3 { font-size: 22px !important; }
    .bento .b2 h3 { font-size: 19px !important; }
    .bento .b3 h3, .bento .b4 h3, .bento .b5 h3 { font-size: 16px !important; }

    /* === PARA QUIÉN (.grid-2) — preserva la narrativa bento desktop === */
    .grid-2 {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      grid-auto-rows: auto !important;
      gap: 10px !important;
      flex-direction: unset !important;
      overflow: visible !important;
      margin: 0 !important;
      padding: 0 !important;
      scroll-snap-type: none !important;
    }
    .grid-2 > * {
      flex: unset !important;
      min-width: 0 !important;
      width: auto !important;
      scroll-snap-align: none !important;
      border-radius: 18px !important;
      padding: 18px 16px !important;
    }
    /* Layout bento: 01 hero alto-izq · 02 top-der · 03 mid-der · 04 full-width close */
    #para-quien .grid-2 .card:nth-child(1) {
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
    }
    #para-quien .grid-2 .card:nth-child(1) .num-tag {
      font-size: 38px !important;
      padding: 0 !important;
      background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
      margin-bottom: 8px !important;
    }
    #para-quien .grid-2 .card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
    #para-quien .grid-2 .card:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
    #para-quien .grid-2 .card:nth-child(4) {
      grid-column: 1 / -1 !important;
      grid-row: 3 !important;
      display: grid !important;
      grid-template-columns: auto 1fr !important;
      column-gap: 14px !important;
      align-items: center !important;
    }
    #para-quien .grid-2 .card:nth-child(4) .num-tag {
      grid-row: 1 / span 2 !important;
      font-size: 38px !important;
      padding: 0 !important;
      background: linear-gradient(135deg, var(--accent-2), var(--accent-3)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
      margin: 0 !important;
    }
    #para-quien .grid-2 .card:nth-child(4) h3 { grid-column: 2 !important; grid-row: 1 !important; margin: 0 0 2px !important; }
    #para-quien .grid-2 .card:nth-child(4) p { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; }
    .grid-2 h3 { font-size: 14px !important; line-height: 1.2 !important; margin: 4px 0 4px !important; }
    .grid-2 p { font-size: 12.5px !important; line-height: 1.4 !important; }
    .grid-2 .num-tag { font-size: 11px !important; }

    /* === CENTRADO MOBILE: planes/precios, empresas, testimonios, cómo trabajamos === */
    /* Por data-scene cubre las 3 páginas aunque el contenido cambie */
    section[data-scene="4"] h2,  section[data-scene="4"]  .lede,
    section[data-scene="9"] h2,  section[data-scene="9"]  .lede,
    section[data-scene="11"] h2, section[data-scene="11"] .lede,
    section[data-scene="12"] h2, section[data-scene="12"] .lede,
    #precios h2, #precios .lede,
    #planes h2,  #planes .lede,
    #sectores h2, #sectores .lede,
    #transparencia h2, #transparencia .lede {
      text-align: center !important;
    }
    /* Eyebrows ya están centrados con flex-justify-center inline.
       Nos aseguramos que también lo estén por CSS */
    section[data-scene="4"] .eyebrow,
    section[data-scene="9"] .eyebrow,
    section[data-scene="11"] .eyebrow,
    section[data-scene="12"] .eyebrow {
      margin-left: auto !important; margin-right: auto !important;
    }

    /* === CARDS: contenido centrado === */
    /* Plans (Básico/Starter/PRO) */
    .plan { text-align: center !important; }
    .plan h3, .plan .meta, .plan .price, .plan .per { text-align: center !important; }
    .plan ul { padding: 0 !important; list-style: none !important; text-align: center !important; }
    .plan ul li { padding-left: 0 !important; text-align: center !important; }
    .plan ul li::before { content: "" !important; }
    /* Empresas / Casos reales (product-cards) */
    .product-card { text-align: left !important; }
    .product-card * { text-align: left !important; }
    /* Cómo trabajamos / Process (step-cards) */
    .step-card { text-align: center !important; }
    .step-card .num { margin: 0 auto 12px !important; }
    .step-card h3, .step-card p { text-align: center !important; }
    /* Testimonios (glass-cards con avatar+nombre) */
    #testimonial-grid .glass-card { text-align: center !important; align-items: center !important; }
    #testimonial-grid .glass-card > div { text-align: center !important; }
    #testimonial-grid .glass-card > div:last-child {
      flex-direction: column !important;
      text-align: center !important;
      align-items: center !important;
      gap: 8px !important;
    }

    /* === PARA QUIÉN: jerarquía visual de h3 por card === */
    #para-quien .grid-2 .card:nth-child(1) h3 { font-size: 17px !important; line-height: 1.15 !important; margin-top: 6px !important; }
    #para-quien .grid-2 .card:nth-child(2) h3,
    #para-quien .grid-2 .card:nth-child(3) h3 { font-size: 12.5px !important; line-height: 1.2 !important; }
    #para-quien .grid-2 .card:nth-child(4) h3 { font-size: 16px !important; line-height: 1.15 !important; }

    /* === STAT ROW (panel oscuro): 3 en 1 fila compactas === */
    .stat-row {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
      flex-direction: unset !important;
      overflow: visible !important;
      margin: 0 !important;
      padding: 0 !important;
      scroll-snap-type: none !important;
    }
    .stat-row > * {
      flex: unset !important;
      min-width: 0 !important;
      width: auto !important;
      scroll-snap-align: none !important;
      padding: 14px 10px !important;
      border-radius: 14px !important;
    }
    .panel.dark .stat-card .num {
      font-size: clamp(22px, 6.5vw, 30px) !important;
      line-height: 1 !important;
      white-space: nowrap;
    }
    .panel.dark .stat-card .lbl {
      font-size: 11px !important;
      line-height: 1.3 !important;
      margin-top: 8px !important;
    }

    /* === FEATURE SPOTLIGHT (imagen + texto): stack pero NO es card-list === */
    .feature-spotlight {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      flex-direction: unset !important;
      overflow: visible !important;
      scroll-snap-type: none !important;
    }
    .feature-spotlight > * {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: auto !important;
      scroll-snap-align: none !important;
    }

    /* CTA panel mobile */
    .cta-panel {
      padding: clamp(40px, 8vw, 60px) clamp(24px, 6vw, 40px) !important;
      border-radius: 32px !important;
    }
    .cta-panel h2 { font-size: clamp(30px, 8vw, 44px) !important; }
    .cta-panel::before, .cta-panel::after { width: 200px !important; height: 200px !important; }

    /* Touch targets — 44px mínimo (Apple/Google standard) */
    .btn, button {
      min-height: 44px;
      touch-action: manipulation;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    nav.top { padding-right: 6px !important; }

    /* Botones del btn-row centrados y full-width-friendly */
    .btn-row {
      flex-wrap: wrap;
      gap: 10px;
    }
    .btn-row .btn {
      flex: 1 1 auto;
      min-width: 200px;
      justify-content: center;
    }

        footer { padding: 60px 5vw 30px !important; }
  }
/* ── Journey mobile: Octaes ed-mosaic style ── */
  /* Selectores con .journey prefijo para ganar especificidad sobre .sec-left .journey .journey-step (0,3,0) */
  @media (max-width: 768px) {
    /* Grid mosaic: 4 cols (como Octaes), auto rows, dense flow */
    .journey,
    .sec-left .journey, .sec-right .journey {
      grid-template-columns: repeat(4, 1fr) !important;
      grid-auto-rows: auto !important;
      grid-auto-flow: dense !important;
      gap: 10px !important;
      align-items: stretch !important;
    }
    .journey-rail { display: none !important; }

    /* Card 01 (Diagnóstico) — hero: full width */
    .journey .journey-step:nth-child(2),
    .sec-left .journey .journey-step:nth-child(2),
    .sec-right .journey .journey-step:nth-child(2) {
      grid-column: span 4 !important;
      grid-row: auto !important;
    }
    /* Cards 02 + 03 — side by side: 2 cols each */
    .journey .journey-step:nth-child(3),
    .journey .journey-step:nth-child(4),
    .sec-left .journey .journey-step:nth-child(3),
    .sec-left .journey .journey-step:nth-child(4),
    .sec-right .journey .journey-step:nth-child(3),
    .sec-right .journey .journey-step:nth-child(4) {
      grid-column: span 2 !important;
      grid-row: auto !important;
    }
    /* Card 04 (Cierre) — hero: full width */
    .journey .journey-step:nth-child(5),
    .sec-left .journey .journey-step:nth-child(5),
    .sec-right .journey .journey-step:nth-child(5) {
      grid-column: span 4 !important;
      grid-row: auto !important;
    }

    /* Step container: column layout, glass tile */
    .journey .journey-step,
    .sec-left .journey .journey-step,
    .sec-right .journey .journey-step {
      flex-direction: column !important;
      align-items: stretch !important;
      align-self: stretch !important;
      text-align: left !important;
      position: relative !important;
      overflow: hidden !important;
      gap: 0 !important;
      background: rgba(255,255,255,.06) !important;
      border: 1px solid rgba(30,200,255,.12) !important;
      border-radius: clamp(18px, 3vw, 24px) !important;
      padding: 20px 18px 16px !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
    }
    /* Mint border for cards 03 + 04 */
    .journey .journey-step:nth-child(4),
    .journey .journey-step:nth-child(5) {
      border-color: rgba(110,231,168,.14) !important;
    }

    /* Node → Octaes big-num: serif italic, gradient */
    .journey .journey-step .journey-node,
    .sec-left .journey .journey-step .journey-node,
    .sec-right .journey .journey-step .journey-node {
      order: -1 !important;
      position: relative !important;
      width: auto !important;
      height: auto !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
      font-style: italic !important;
      font-weight: 400 !important;
      font-size: clamp(48px, 14vw, 72px) !important;
      letter-spacing: -.04em !important;
      line-height: .85 !important;
      background-image: linear-gradient(120deg, #6ee7a8, #1ec8ff) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      color: transparent !important;
      margin: 0 0 4px !important;
      padding: 0 !important;
      align-self: flex-start !important;
    }

    /* Card interior: transparent, left-aligned */
    .journey .journey-step .journey-card,
    .sec-left .journey .journey-step .journey-card,
    .sec-right .journey .journey-step .journey-card {
      flex: 1 1 auto !important;
      padding: 0 0 4px !important;
      border-radius: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      width: 100% !important;
      text-align: left !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    /* Week label — Octaes ed-meta style */
    .journey-week {
      font-size: 10px !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
      margin-bottom: 6px !important;
      opacity: .55 !important;
      order: -2 !important;
    }

    /* Title */
    .journey-card h3 {
      font-size: clamp(16px, 4.5vw, 20px) !important;
      line-height: 1.2 !important;
      margin: 0 0 8px !important;
      font-weight: 700 !important;
      letter-spacing: -.02em !important;
    }
    /* Hero cards (01, 04): bigger titles */
    .journey .journey-step:nth-child(2) .journey-card h3,
    .journey .journey-step:nth-child(5) .journey-card h3 {
      font-size: clamp(20px, 5.5vw, 26px) !important;
    }

    /* Description */
    .journey-card p {
      flex: initial !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 0 !important;
      color: var(--ink-soft) !important;
    }
    /* Compact cards (02, 03): slightly smaller text */
    .journey .journey-step:nth-child(3) .journey-card p,
    .journey .journey-step:nth-child(4) .journey-card p {
      font-size: 12.5px !important;
      line-height: 1.45 !important;
    }

    /* Meta */
    .journey-meta {
      margin-top: 8px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      opacity: .75 !important;
    }

    /* Hide bullet details on mobile */
    .journey-details {
      display: none !important;
    }
  }
/* Ocultar texto subtitular del octaedro 3D — solo se ven los gradients */
  .face .img-wrap span.num,
  .face .img-wrap span.label { display: none !important; }
/* Sectores mobile — responsive handled in bento editorial CSS block */

  /* ============================================================== */
  /* ===== Phase 3 — Mobile GPU optimization (added 2026-05-08) ====== */
  /* Goal: 30-50% less GPU strain on mobile, no visual loss on desktop. */
  /* ============================================================== */
  @media (max-width: 768px) {
    /* Cap backdrop-filter blur radius — still glassy, half the GPU cost */
    nav.top {
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    .nav-drawer {
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
    footer {
      backdrop-filter: blur(8px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    }
    .panel,
    .glass-card,
    .panel.glass .card,
    .panel.glass .stat-card,
    .journey-card,
    .process-row .step-card,
    .marquee-track .logo-pill,
    .video-slot .play,
    .btn.btn-revolucion {
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* Disable purely decorative large blurs on pseudo-elements
       (orbs/halos that are >30px blur — cheaper to just hide than blur) */
    .panel.mesh::before,
    .panel.mesh::after {
      filter: blur(20px) !important;
      opacity: 0.6 !important;
    }
    
    /* Release GPU layers on elements that aren't actively animating.
       Keep will-change only on the 3D scene parts that DO animate continuously. */
    *:not(.scene):not(.octa):not(.face):not(.scene-shadow):not(.scene-glow) {
      will-change: auto !important;
    }
    
    /* Simplify multi-layer box-shadows on cards — one shadow is enough on mobile */
    .card-blog,
    .glass-card,
    .sprint-cta-card {
      transition-property: transform !important;
    }
  }
/* ============================================================== */

  /* Section secondary link — subtle CTA at end of sections */
  .section-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #5a6072;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
  }
.section-cta-link:hover {
    color: var(--accent, #1ec8ff);
    border-bottom-color: var(--accent, #1ec8ff);
  }
.section-cta-link .arrow {
    transition: transform .2s;
  }
.section-cta-link:hover .arrow {
    transform: translateX(3px);
  }
.section-cta-wrap {
    text-align: center;
    margin-top: 24px;
  }