/* 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: linear-gradient(135deg, var(--accent), var(--accent-3));
    color: white; border-color: transparent;
  }
.journey-step:nth-child(3) .journey-node { border-color: rgba(30,200,255,.5); color: var(--accent); }
.journey-step:nth-child(4) .journey-card { background: rgba(183,148,244,.13); border-color: rgba(183,148,244,.28); }
.journey-step:nth-child(4) .journey-node { border-color: rgba(183,148,244,.6); color: var(--accent-2); }
.journey-step:nth-child(4) .journey-week { color: var(--accent-2); }
.journey-rail {
    position: absolute;
    top: 24px; left: 8%; right: 8%; height: 2px;
    background: rgba(11,13,18,.1);
    border-radius: 2px; z-index: 0;
  }
.journey-progress {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
    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: center; }
.journey-node {
    position: relative; z-index: 2;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--ink);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    letter-spacing: -.02em;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(11,13,18,.12);
    transition: transform .25s;
  }
.journey-step:hover .journey-node { transform: scale(1.1) rotate(-6deg); }
.journey-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.25; }
.glass-card.tint-cyan    { background: linear-gradient(135deg, rgba(30,200,255,.22), rgba(255,255,255,.5)); }
.glass-card.tint-lav     { background: linear-gradient(135deg, rgba(183,148,244,.22), rgba(255,255,255,.5)); }
.glass-card.tint-mint    { background: linear-gradient(135deg, rgba(110,231,168,.24), rgba(255,255,255,.5)); }
.glass-card.tint-rose    { background: linear-gradient(135deg, rgba(196,80,110,.24), rgba(255,255,255,.5)); }
.glass-card.tint-amber   { background: linear-gradient(135deg, rgba(255,206,120,.24), rgba(255,255,255,.5)); }
/* Carousel of curved product cards (Bending Spoons style) */
  .product-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    perspective: 1200px;
  }
.product-card {
    aspect-ratio: 3/4;
    border-radius: 22px;
    position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    transform: rotateY(8deg);
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
    display: flex; align-items: end;
    padding: 22px;
    color: #fff;
    box-shadow: 0 20px 50px rgba(11,13,18,.25);
  }
.product-card:nth-child(odd)  { transform: rotateY(-8deg); }
.product-card:hover { transform: rotateY(0deg) scale(1.04); z-index: 3; }
.product-card .label {
    position: relative; z-index: 2;
    font-weight: 700; letter-spacing: -.01em; font-size: 18px;
  }
.product-card.p1 { background: linear-gradient(160deg, #1ec8ff, #0a3a52); }
.product-card.p2 { background: linear-gradient(160deg, #b794f4, #2a1f4a); }
.product-card.p3 { background: linear-gradient(160deg, #6ee7a8, #1a4a30); }
.product-card.p4 { background: linear-gradient(160deg, #c4506e, #5a2236); }
.product-card.p5 { background: linear-gradient(160deg, #ffce78, #5a3a1a); }
.product-card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 50%);
  }
/* ── Product card floating UI compositions (v2 — elaborate) ── */
  .card-visual {
    position: absolute; top: 4%; left: 6%; right: 6%; bottom: 28%;
    z-index: 1; pointer-events: none;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
    perspective: 600px;
  }
.product-card:hover .card-visual { transform: translateY(-6px) scale(1.02); }
/* Glass panel base */
  .cv-p {
    position: absolute;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px; padding: 8px 10px;
    color: rgba(255,255,255,.88);
    box-shadow: 0 4px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.1);
    transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s;
  }
.product-card:hover .cv-p { transform: translateY(-2px); }
/* Elevated panel (front layer) */
  .cv-p.cv-elevated {
    background: rgba(255,255,255,.16);
    box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15);
    z-index: 2;
  }
/* Recessed panel (back layer) */
  .cv-p.cv-recessed {
    background: rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,.06);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.15);
  }
.cv-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.2); margin: 4px 0; overflow: hidden; position: relative; }
.cv-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; }
.cv-metric {
    font-weight: 800; letter-spacing: -.04em; color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.25), 0 0 40px rgba(255,255,255,.1);
    line-height: 1;
  }
.cv-label {
    font-size: 8px; text-transform: uppercase; letter-spacing: .12em;
    opacity: .55; margin-bottom: 3px;
  }
.cv-dot {
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
  }
.cv-tag {
    font-size: 9px; padding: 2px 7px; border-radius: 6px;
    background: rgba(255,255,255,.12); letter-spacing: .02em;
  }
.cv-icon-circle {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
  }
/* Radial progress ring */
  .cv-ring { transform: rotate(-90deg); }
.cv-ring-bg { fill: none; stroke: rgba(255,255,255,.1); }
.cv-ring-fg { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1); }
/* Sparkline */
  .cv-spark { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cv-spark-area { opacity: .15; }
/* Glow beam */
  .cv-glow {
    position: absolute; border-radius: 50%;
    filter: blur(30px); opacity: .2; pointer-events: none;
  }
/* Animations */
  @keyframes cv-scan { 0%,100% { top: 8%; opacity: .6; } 50% { top: 75%; opacity: .3; } }
@keyframes cv-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 6px currentColor; } 50% { opacity: .5; box-shadow: 0 0 12px currentColor; } }
@keyframes cv-fill { from { width: 0; } }
@keyframes cv-count { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cv-typing { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cv-dash { to { stroke-dashoffset: 0; } }
@keyframes cv-shimmer { 0% { left: -40%; } 100% { left: 120%; } }
.cv-anim-scan { animation: cv-scan 3.5s ease-in-out infinite; }
.cv-anim-pulse { animation: cv-pulse 2s ease-in-out infinite; }
.cv-anim-float { animation: cv-float 4s ease-in-out infinite; }
.cv-anim-typing { animation: cv-typing 1s step-end infinite; }
@media(max-width:600px) {
    .card-visual { top: 3%; left: 5%; right: 5%; bottom: 26%; }
    .cv-p { border-radius: 10px; padding: 6px 8px; }
    .cv-metric { text-shadow: 0 1px 6px rgba(0,0,0,.2); }
  }
/* 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(3, 1fr); }
    .product-row > *:nth-child(n+4) { display: none; }
    .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: 12px; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
    .product-row::-webkit-scrollbar { display: none; }
    .product-row > * { flex: 0 0 65%; min-width: 65%; scroll-snap-align: start; transform: rotateY(0); }
    .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); }
  }
.card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px;
  }
.card .num-tag {
    display: inline-block;
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
    font-size: 11px; letter-spacing: .12em;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }
.sectors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
  }
/* 5th card spans 2 cols to fill last row */
  .sector:last-child { grid-column: span 2; }
@media (max-width: 860px) {
    .sectors { grid-template-columns: repeat(2, 1fr); }
    .sector:last-child { grid-column: span 1; }
  }
@media (max-width: 520px) {
    .sectors { grid-template-columns: 1fr; }
    .sector:last-child { grid-column: span 1; }
  }
.sector {
    border-radius: 28px;
    padding: 28px 26px 26px;
    text-align: left;
    position: relative;
    overflow: hidden;
    border: none;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  }
.sector::before { display: none; }
.sector:hover { box-shadow: 0 24px 48px rgba(11,13,18,.13); }
/* sin transform aquí, lo maneja el bloque ticker */
  /* Pastel gradient per card — follows page accent palette */
  /* Sector cards: glassmorphism igual que .glass-card de plataforma */
  .sector {
    background: rgba(255,255,255,.45) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 14px 40px rgba(11,13,18,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
  }
.sector.s1 { background: linear-gradient(135deg, rgba(30,200,255,.22), rgba(255,255,255,.5)) !important; }
.sector.s2 { background: linear-gradient(135deg, rgba(30,200,255,.18), rgba(110,231,168,.10)) !important; }
.sector.s3 { background: linear-gradient(135deg, rgba(110,231,168,.24), rgba(255,255,255,.5)) !important; }
.sector.s4 { background: linear-gradient(135deg, rgba(110,231,168,.24), rgba(255,255,255,.5)) !important; }
.sector.s5 { background: linear-gradient(135deg, rgba(30,200,255,.24), rgba(255,255,255,.5)) !important; }
.sector .icon {
    width: 32px; height: 32px;
    background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
    -webkit-mask-image: var(--diamond-mask);
            mask-image: var(--diamond-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    margin-bottom: 16px;
    position: relative; z-index: 1;
  }
.sector .metric {
    font-size: 46px; font-weight: 900;
    letter-spacing: -.04em; line-height: 1;
    color: var(--ink); margin: 0 0 10px;
    position: relative; z-index: 1;
  }
.sector h3 { margin: 0 0 7px; font-size: 15px; font-weight: 700; color: var(--ink); position: relative; z-index: 1; }
.sector p  { margin: 0; font-size: 13px; color: rgba(11,13,18,.62); line-height: 1.5; position: relative; z-index: 1; }
.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;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    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;
  }
.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; }
    .scene { opacity: .35; }
    nav.top .links { display: none; }
    nav.top .lang { display: none; }
    .progress { display: none; }
    .plan.featured { transform: none; }
  }
@media (max-width: 760px) {
    section { padding: 90px 4vw 70px; min-height: auto; }
    .journey { grid-template-columns: 1fr; gap: 14px; }
    .journey-step { flex-direction: row; align-items: flex-start; gap: 14px; }
    .journey-node { margin-bottom: 0; flex-shrink: 0; width: 42px; height: 42px; font-size: 12px; }
    /* Reset bento spans on mobile */
    .sec-left .journey .journey-step:nth-child(2),
    .sec-right .journey .journey-step:nth-child(2) { grid-row: auto; align-self: auto; }
    .sec-left .journey .journey-step:nth-child(5),
    .sec-right .journey .journey-step:nth-child(5) { grid-column: auto; flex-direction: row; }
    .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; }
    
    /* Force horizontal scroll for ALL card grids on mobile */
    .grid-2, .grid-3, .stat-row, .plans, .team, .sectors, .timeline, .bento, .product-row, .process-row, #testimonial-grid, .feature-spotlight {
      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-2::-webkit-scrollbar,
    .grid-3::-webkit-scrollbar,
    .stat-row::-webkit-scrollbar,
    .plans::-webkit-scrollbar,
    .team::-webkit-scrollbar,
    .sectors::-webkit-scrollbar,
    .timeline::-webkit-scrollbar,
    .bento::-webkit-scrollbar,
    .product-row::-webkit-scrollbar,
    .process-row::-webkit-scrollbar,
    #testimonial-grid::-webkit-scrollbar,
    .feature-spotlight::-webkit-scrollbar { display: none; }
    .grid-2 > *, .grid-3 > *, .stat-row > *, .plans > *, .team > *, .sectors > *, .timeline > *, .bento > *, .product-row > *, .process-row > *, #testimonial-grid > *, .feature-spotlight > * {
      scroll-snap-align: start;
      flex: 0 0 78%;
      min-width: 78%;
      border-radius: 22px !important;
    }
    .timeline .step { padding-top: 28px; }
  }
/* ===== Sectores — ticker horizontal infinito (estilo cta-panel) ===== */

  /* Contenedor: panel actúa como cta-panel — overflow hidden para clip de rombos */
  #sectores { overflow: visible !important; }
/* .panel.mesh queda con overflow: hidden (default de .panel) para tuck-in de rombos */

  .sectors {
    display: block !important;
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw);
    margin-right: 0 !important;
    overflow: hidden;
    position: relative;
    z-index: 20;
    margin-bottom: -80px;
    padding: 20px 0 30px;
    /* fades laterales */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    grid-template-columns: unset;
    grid-auto-rows: unset;
  }
/* Track: fila scroll-driven (controlada por JS) */
  .sector-track {
    display: flex;
    gap: 4px;
    width: max-content;
    align-items: center; /* todas a la misma altura */
    will-change: transform;
  }
/* Fallback CSS si JS no se carga */
  .sector-track:not(.js-scroll-driven) {
    animation: sector-scroll 5s linear infinite;
  }
@keyframes sector-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
/* Tarjeta individual — escaladas proporcionalmente */
  .sector {
    flex: none !important;
    width: 260px;
    height: 400px;
    border-radius: 38px !important;
    padding: 32px !important;
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 14px 40px rgba(11,13,18,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    transform-style: preserve-3d;
    transition: filter .3s, box-shadow .3s;
  }
.sector:hover { box-shadow: 0 28px 64px rgba(11,13,18,.16) !important; filter: brightness(1.04); }
/* Rombo en cada card → ELIMINADO (movido al fondo de sección) */
  .sector::before { display: none !important; }
/* === Panel #sectores estilo .cta-panel pero translúcido === */
  #sectores .panel.mesh {
    background: linear-gradient(135deg, rgba(216,238,247,.45) 0%, rgba(232,230,248,.45) 50%, rgba(221,243,230,.45) 100%) !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    position: relative;
    /* hereda overflow: hidden y border-radius: 36px de .panel */
  }
/* Sobrescribir el ::before original (blob mesh animado) con el rombo top-left */
  #sectores .panel.mesh::before {
    content: "" !important;
    position: absolute !important;
    inset: auto !important;
    width: 280px !important;
    height: 280px !important;
    background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)) !important;
    -webkit-mask-image: var(--diamond-mask) !important;
            mask-image: var(--diamond-mask) !important;
    -webkit-mask-size: 100% 100% !important;
            mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    opacity: .55 !important;
    filter: blur(.5px) !important;
    animation: none !important;
    left: -90px !important;
    top: -60px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(15deg) !important;
    z-index: 0 !important;
    pointer-events: none;
  }
/* Rombo bottom-right */
  #sectores .panel.mesh::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
    -webkit-mask-image: var(--diamond-mask);
            mask-image: var(--diamond-mask);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: .55;
    filter: blur(.5px);
    right: -90px;
    bottom: -60px;
    transform: rotate(-25deg);
    z-index: 0;
    pointer-events: none;
  }
/* Contenido por encima de los rombos */
  #sectores .panel.mesh > * { position: relative; z-index: 2; }
/* Patrón TRAPECIO — alternancia ESTRICTA por posición (no por clase) */
  /* Pivote en CENTER: cards alineadas a la misma altura */
  .sector-track > .sector:nth-child(odd) {
    transform: perspective(700px) rotateX(-30deg) !important;
    transform-origin: center center !important;
  }
.sector-track > .sector:nth-child(even) {
    transform: perspective(700px) rotateX(30deg) !important;
    transform-origin: center center !important;
  }
/* Counter-rotation en contenido para mantener legibilidad */
  .sector-track > .sector:nth-child(odd) > * {
    transform: rotateX(30deg) !important;
    transform-origin: center;
  }
.sector-track > .sector:nth-child(even) > * {
    transform: rotateX(-30deg) !important;
    transform-origin: center;
  }
.sector-track > .sector:nth-child(odd)::before  { transform: rotateX(30deg) !important; }
.sector-track > .sector:nth-child(even)::before { transform: rotateX(-30deg) !important; }
/* Glassmorphism: fondos translúcidos con backdrop blur */
  .sector.s1 { background: linear-gradient(145deg, rgba(30,200,255,.22) 0%, rgba(30,200,255,.06) 100%) !important; }
.sector.s2 { background: linear-gradient(145deg, rgba(30,200,255,.18) 0%, rgba(110,231,168,.06) 100%) !important; }
.sector.s3 { background: linear-gradient(145deg, rgba(110,231,168,.22) 0%, rgba(110,231,168,.06) 100%) !important; }
.sector.s4 { background: linear-gradient(145deg, rgba(110,231,168,.16) 0%, rgba(30,200,255,.06) 100%) !important; }
.sector.s5 { background: linear-gradient(145deg, rgba(30,200,255,.22) 0%, rgba(110,231,168,.06) 100%) !important; }
/* s6: teal suave a rosa — añadido para mantener alternancia par */
  .sector.s6 { background: linear-gradient(145deg, rgba(30,200,255,.22) 0%, rgba(30,200,255,.06) 100%) !important; }
/* === Tipografía estilo HeyGen: título grande coloreado al top, descripción soft al bottom === */
  .sector {
    justify-content: space-between !important; /* h3 arriba, p abajo */
  }
.sector .icon { display: none !important; }
/* Render crisp para todo el texto dentro de cards 3D-rotated */
  .sector h3, .sector p, .sector .metric {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
/* Metric: tag opaco al top */
  .sector .metric {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    line-height: 1 !important;
    margin: 0 !important;
    color: rgba(11,13,18,.78) !important; /* mate, no semi-transparente */
    position: relative; z-index: 2;
    order: 0;
  }
/* Título HERO: grande, peso máximo, color sólido */
  .sector h3 {
    font-size: 30px !important;
    font-weight: 900 !important; /* 800 → 900 para presencia mate */
    letter-spacing: -.025em !important;
    line-height: 1.05 !important;
    margin: 8px 0 0 !important;
    position: relative; z-index: 2;
    order: 1;
  }
/* Colores de título — saturados, oscuros, mate (no light/diffused) */
  .sector.s1 h3 { color: #0e6a8a !important; }
/* cian de marca */
  .sector.s2 h3 { color: #0e6a8a !important; }
/* cian de logo */
  .sector.s3 h3 { color: #1a7a52 !important; }
/* verde de marca */
  .sector.s4 h3 { color: #1a7a52 !important; }
/* verde de logo */
  .sector.s5 h3 { color: #0e6a8a !important; }
/* cian de logo */
  .sector.s6 h3 { color: #0e6a8a !important; }
/* cian de marca */

  /* Descripción: opaca, no semi-transparente */
  .sector p {
    font-size: 14px !important;
    font-weight: 600 !important; /* 500 → 600 para más cuerpo */
    color: #2c3340 !important; /* color sólido oscuro, no rgba con alpha */
    line-height: 1.5 !important;
    margin: 0 !important;
    position: relative; z-index: 2;
    order: 2;
  }
/* Next section behind */
  #equipo { position: relative; z-index: 1; padding-top: 110px !important; }
/* Mobile: scroll horizontal manual */
  @media (max-width: 860px) {
    .sectors {
      overflow-x: auto; overflow-y: visible;
      -webkit-mask-image: none; mask-image: none;
      margin-bottom: 0; padding: 16px 20px 20px;
      width: auto; margin-left: 0;
    }
    .sector-track { animation: none; }
    .sector-track > .sector:nth-child(n+7) { display: none; } /* ocultar duplicados en móvil (6 únicos) */
    #equipo { padding-top: 60px !important; }
  }
/* === 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 .label,
    .product-card * { text-align: center !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 (4 fases) en mobile: 2x2 perfecto, sin huérfanas, alturas igualadas === */
    .journey {
      grid-template-columns: repeat(2, 1fr) !important;
      grid-auto-rows: 1fr !important;
      gap: 10px !important;
      align-items: stretch !important;
    }
    /* OVERRIDE crítico: las reglas desktop forzaban grid-column: 1 / 3 (con rail en col 2).
       En mobile sin rail, eso crea una tercera columna fantasma → huecos vacíos.
       Reseteamos para que los 4 steps fluyan naturalmente en 2x2. */
    .journey-step,
    .journey-step:nth-child(2),
    .journey-step:nth-child(3),
    .journey-step:nth-child(4),
    .journey-step:nth-child(5) {
      grid-column: auto !important;
      grid-row: auto !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 10px !important;
      text-align: left !important;
    }
    .journey-node {
      width: 38px !important;
      height: 38px !important;
      font-size: 12px !important;
      margin-bottom: 0 !important;
      align-self: flex-start;
    }
    .journey-card {
      padding: 16px 14px !important;
      border-radius: 18px !important;
      width: 100% !important;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
    }
    .journey-card h3 { font-size: 15px !important; line-height: 1.2 !important; margin: 4px 0 6px !important; }
    .journey-card p { font-size: 12.5px !important; line-height: 1.45 !important; margin-bottom: 8px !important; flex: 1 1 auto; }
    .journey-week { font-size: 10.5px !important; letter-spacing: .08em !important; margin-bottom: 6px !important; }
    .journey-meta { font-size: 11.5px !important; line-height: 1.3 !important; margin-top: auto; }

    /* 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: center !important; }
    .product-card .label { text-align: center !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; }
  }
/* 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: carrusel ocupa todo el ancho del panel === */
  /* La sección mantiene sus márgenes laterales y bordes redondeados.
     SOLO el carrusel .sectors se extiende hasta los bordes internos del panel
     (negando el padding horizontal del panel.mesh) */
  @media (max-width: 768px) {
    #sectores .sectors {
      width: calc(100% + 44px) !important;  /* +22px×2 (padding del panel mobile) */
      max-width: none !important;
      margin-left: -22px !important;
      margin-right: -22px !important;
    }
  }
/* ============================================================== */
  /* ===== 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,
    .sector,
    #sectores .panel.mesh,
    .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;
    }
  }
/* ============================================================== */

  /* ================ Sigue explorando — interlinking block ================ */
  .next-steps {
    max-width: 1100px;
    margin: 64px auto 24px;
    padding: 48px 5vw;
    background: linear-gradient(135deg,
      rgba(216,238,247,.18) 0%,
      rgba(232,230,248,.18) 50%,
      rgba(221,243,230,.18) 100%);
    border-radius: 24px;
  }
.next-steps__eyebrow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft, #5a6072);
    margin: 0 0 8px;
  }
.next-steps__title {
    text-align: center;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 3vw, 28px);
    letter-spacing: -.02em;
    margin: 0 0 32px;
    color: var(--ink, #0b0d12);
  }
.next-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
@media (max-width: 700px) {
    .next-steps__grid { grid-template-columns: 1fr; }
  }
.next-steps__card {
    display: block;
    padding: 24px 20px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(11,13,18,.08);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform .25s, box-shadow .25s, border-color .25s;
  }
.next-steps__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(11,13,18,.08);
    border-color: var(--accent, #1ec8ff);
  }
.next-steps__card-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    color: var(--ink, #0b0d12);
    display: flex;
    align-items: center;
    gap: 8px;
  }
.next-steps__card-title .arrow { transition: transform .25s; }
.next-steps__card:hover .next-steps__card-title .arrow { transform: translateX(4px); }
.next-steps__card-desc {
    font-size: 13px;
    color: var(--ink-soft, #5a6072);
    margin: 0;
    line-height: 1.4;
  }

  /* === Filosofía Sprint · forzar texto oscuro sobre panel.glass claro === */
  /* El panel.glass tiene fondo translúcido claro, así que el texto debe ser oscuro
     para mantener contraste WCAG. Tanto contenido directo como cards interiores. */
  #filosofia .panel.glass > h2,
  #filosofia .panel.glass > .quote-block,
  #filosofia .panel.glass > .eyebrow {
    color: var(--ink);
  }
  #filosofia .panel.glass > .quote-block .muted {
    color: var(--ink-soft);
  }
  /* Cards interiores (.grid-2 > .card) — bg blanco translúcido, texto oscuro */
  #filosofia .panel.glass .card,
  #filosofia .panel.glass .card h3 {
    color: var(--ink);
  }
  #filosofia .panel.glass .card p {
    color: var(--ink-soft);
  }