/* Estilos específicos del landing v2 — mockups, carruseles, layout sections.
       Los estilos compartidos (nav, footer, data-reveal, cta-final, quote-mark)
       viven en static/src/tailwind.css y se cargan vía base_public.html. */

    /* ════════════ Mockup de laptop (puro CSS) ════════════ */
    .laptop {
      position: relative; width: 100%; max-width: 520px; aspect-ratio: 16/10;
      background: linear-gradient(180deg, #0F1E35 0%, #0A1628 100%);
      border-radius: 14px 14px 4px 4px;
      padding: 14px 14px 16px 14px;
      box-shadow: 0 30px 60px -20px rgba(10,22,40,0.45), 0 0 0 1.5px rgba(199,154,32,0.12);
    }
    .laptop::after {
      content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
      width: 110%; height: 8px;
      background: linear-gradient(180deg, #142642 0%, #060E1C 100%);
      border-radius: 0 0 14px 14px;
    }
    .laptop-screen {
      background: #FDFBF7; border-radius: 6px; height: 100%;
      padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
      position: relative; overflow: hidden;
    }
    .laptop-screen::before {
      content:""; position:absolute; top:0; left:0; right:0; height:20px;
      background: linear-gradient(180deg, #F0E6CC 0%, #FDFBF7 100%);
      border-bottom: 1px solid rgba(199,154,32,0.25);
    }

    /* ════════════ Mockup iMac (Apple-style aluminio) ════════════ */
    .imac-mockup {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }
    .imac-frame {
      position: relative;
      background: linear-gradient(180deg, #EEEEEE 0%, #CACACA 100%);
      padding: 14px 14px 42px 14px;
      border-radius: 14px;
      box-shadow:
        0 30px 60px -12px rgba(10, 22, 40, 0.22),
        0 14px 28px -8px rgba(10, 22, 40, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    }
    .imac-frame::after {
      /* Apple logo sutil en el chin */
      content: '';
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 17px;
      background: #7A7A7A;
      opacity: 0.4;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'><path d='M11.2 8.9c0-1.6 1.3-2.4 1.3-2.4-.7-1.1-1.9-1.2-2.3-1.3-1-.1-1.9.6-2.4.6s-1.2-.6-2-.5c-1.1 0-2 .6-2.6 1.6-1.1 1.9-.3 4.7.8 6.3.5.8 1.2 1.6 2 1.6s1.1-.5 2.1-.5 1.2.5 2 .5 1.4-.7 2-1.5c.6-.9.9-1.7.9-1.8s-1.8-.7-1.8-2.6zM8.7 3.3c.4-.5.7-1.3.6-2-.7 0-1.5.4-1.9 1-.4.5-.8 1.3-.7 2 .8.1 1.5-.4 2-1z'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'><path d='M11.2 8.9c0-1.6 1.3-2.4 1.3-2.4-.7-1.1-1.9-1.2-2.3-1.3-1-.1-1.9.6-2.4.6s-1.2-.6-2-.5c-1.1 0-2 .6-2.6 1.6-1.1 1.9-.3 4.7.8 6.3.5.8 1.2 1.6 2 1.6s1.1-.5 2.1-.5 1.2.5 2 .5 1.4-.7 2-1.5c.6-.9.9-1.7.9-1.8s-1.8-.7-1.8-2.6zM8.7 3.3c.4-.5.7-1.3.6-2-.7 0-1.5.4-1.9 1-.4.5-.8 1.3-.7 2 .8.1 1.5-.4 2-1z'/></svg>") center/contain no-repeat;
    }
    .imac-screen {
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, #1A2E4D 0%, #0A1628 100%);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .imac-stand {
      width: 190px;
      height: 44px;
      margin: -2px auto 0;
      background: linear-gradient(180deg, #D8D8D8 0%, #A5A5A5 100%);
      clip-path: polygon(22% 0, 78% 0, 92% 100%, 8% 100%);
      position: relative;
    }
    .imac-base {
      width: 290px;
      height: 10px;
      margin: 0 auto;
      background: linear-gradient(180deg, #BEBEBE 0%, #888888 100%);
      border-radius: 4px 4px 12px 12px;
      box-shadow:
        0 20px 28px -10px rgba(10, 22, 40, 0.20),
        0 10px 16px -6px rgba(10, 22, 40, 0.12);
    }

    /* ════════════ Mockup MacBook Apple-style (mixta) ════════════ */
    .macbook-mockup {
      position: relative;
      width: 100%;
    }
    .macbook-frame {
      background: linear-gradient(180deg, #E8E8E8 0%, #B8B8B8 100%);
      padding: 9px 9px 7px 9px;
      border-radius: 8px 8px 3px 3px;
      box-shadow:
        0 18px 36px -10px rgba(10, 22, 40, 0.24),
        0 8px 16px -6px rgba(10, 22, 40, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }
    .macbook-screen {
      aspect-ratio: 16 / 10;
      background: #FDFBF7;
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    }
    .macbook-hinge {
      height: 3px;
      background: linear-gradient(180deg, #9E9E9E 0%, #6E6E6E 100%);
      margin: 0 -1.5%;
      border-radius: 0 0 3px 3px;
    }
    .macbook-base {
      position: relative;
      width: 112%;
      height: 10px;
      margin: 0 -6%;
      background: linear-gradient(180deg, #D4D4D4 0%, #959595 100%);
      clip-path: polygon(2% 0, 98% 0, 100% 55%, 97% 100%, 3% 100%, 0 55%);
      box-shadow: 0 10px 16px -6px rgba(10, 22, 40, 0.16);
    }
    .macbook-base::before {
      content: '';
      position: absolute;
      top: 0;
      left: 36%;
      right: 36%;
      height: 2.5px;
      background: rgba(0, 0, 0, 0.18);
      border-radius: 0 0 4px 4px;
    }

    /* ════════════ Pantalla de proyección (mixta) ════════════ */
    .projection-screen {
      position: relative;
      aspect-ratio: 4 / 3;
      background: linear-gradient(180deg, #FDFBF7 0%, #F4EAD1 100%);
      border-radius: 3px;
      box-shadow:
        0 16px 32px -10px rgba(10, 22, 40, 0.22),
        0 0 0 3px #1A2E4D,
        0 0 0 5px #0A1628;
    }
    .projection-screen::before {
      content: '';
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 18px;
      background: #0A1628;
    }
    .projection-screen::after {
      content: '';
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 6px;
      background: #0A1628;
      border-radius: 4px 4px 0 0;
    }

    /* ════════════ Labels narrativos (mixta — casa / presencial) ════════════ */
    .mixta-label {
      position: absolute;
      font-family: var(--font-sans);
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 10.5px;
      font-weight: 600;
      color: #8B6A0A;
      white-space: nowrap;
      text-align: center;
    }

    /* ════════════ Sillas presencial (mixta) — HTML puro, vistas desde atrás ════════════ */
    .sillas-fila {
      position: absolute;
      display: flex;
      gap: 4px;
      align-items: flex-end;
    }
    .silla {
      position: relative;
      flex: 0 0 auto;
      width: 50px;
      height: 82px;
      filter: drop-shadow(0 5px 4px rgba(10, 22, 40, 0.22));
    }
    .silla__back {
      /* Respaldo: alto, redondeado arriba */
      position: absolute;
      top: 0;
      left: 5px;
      right: 5px;
      height: 50px;
      background: linear-gradient(180deg, #3A5577 0%, #2D4566 70%, #1A2E4D 100%);
      border-radius: 6px 6px 2px 2px;
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(10, 22, 40, 0.4);
    }
    .silla__seat-edge {
      /* Borde trasero del asiento — pegado al respaldo */
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      height: 8px;
      background: #1A2E4D;
      border-radius: 2px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 3px -1px rgba(10, 22, 40, 0.32);
    }
    .silla__leg {
      /* Patas — pegadas al asiento, mismo navy oscuro para continuidad */
      position: absolute;
      top: 58px;
      width: 5px;
      height: 24px;
      background: #1A2E4D;
      border-radius: 0 0 2px 2px;
    }
    .silla__leg--left  { left: 4px; }
    .silla__leg--right { right: 4px; }

    /* ════════════ Altavoz activo en tile de Zoom (mixta) ════════════ */
    @keyframes speakerWave {
      0%, 100% { transform: scaleY(0.35); }
      50%      { transform: scaleY(1); }
    }

    /* ════════════ Carrusel infinito de fotos (auto-scroll, hover pause) ════════════ */
    .photo-carousel {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 1rem 0; /* aire para que las sombras no se recorten */
    }
    /* Gradient fade en bordes izq/der — elegancia editorial */
    .photo-carousel::before,
    .photo-carousel::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 120px;
      z-index: 3;
      pointer-events: none;
    }
    .photo-carousel::before {
      left: 0;
      background: linear-gradient(90deg, rgb(239, 231, 211) 0%, rgba(239, 231, 211, 0) 100%);
    }
    .photo-carousel::after {
      right: 0;
      background: linear-gradient(-90deg, rgb(239, 231, 211) 0%, rgba(239, 231, 211, 0) 100%);
    }
    @media (min-width: 768px) {
      .photo-carousel::before,
      .photo-carousel::after { width: 180px; }
    }
    .photo-carousel-track {
      display: flex;
      gap: 1.25rem;
      width: max-content;
      animation: photoScroll 32s linear infinite;
      will-change: transform;
    }
    @media (min-width: 768px) {
      .photo-carousel-track { gap: 1.75rem; }
    }
    .photo-carousel:hover .photo-carousel-track {
      animation-play-state: paused;
    }
    .photo-carousel-item {
      flex-shrink: 0;
      height: 300px;
      aspect-ratio: 4 / 3;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 14px 40px rgba(10,22,40,0.14), 0 0 0 1px rgba(199,154,32,0.08);
      transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms;
    }
    @media (min-width: 768px) {
      .photo-carousel-item { height: 440px; border-radius: 20px; }
    }
    .photo-carousel-item:hover {
      transform: translateY(-6px) scale(1.015);
      box-shadow: 0 24px 56px rgba(10,22,40,0.22), 0 0 0 1px rgba(199,154,32,0.18);
    }
    .photo-carousel-item picture { display: block; height: 100%; }   /* 13.5: WebP con JPG de respaldo */
    .photo-carousel-item img {
      display: block;
      height: 100%;
      width: auto;
      object-fit: cover;
    }
    @keyframes photoScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .photo-carousel-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
      }
      .photo-carousel::before,
      .photo-carousel::after { display: none; }
    }

    /* ════════════ Testimonial featured carousel (3 cards: peek-left + center + peek-right) ════════════ */
    .testimonial-stage {
      position: relative;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      min-height: 600px;
      /* Mobile: peek mini — cards laterales asomando ~20-50px dentro del stage (container px-6) para dar profundidad */
      --peek-offset: 62vw;
      --peek-scale: 0.6;
    }
    @media (min-width: 768px) {
      .testimonial-stage { min-height: 540px; --peek-offset: 280px; --peek-scale: 0.84; }
    }
    @media (min-width: 1024px) {
      .testimonial-stage { min-height: 520px; --peek-offset: 340px; --peek-scale: 0.86; }
    }

    .testimonial-slide {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(92%, 520px);
      transform: translate(-50%, -50%) scale(0.82);
      opacity: 0;
      pointer-events: none;
      transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }
    .testimonial-slide > figure { margin: 0; height: 100%; }

    .testimonial-slide.active {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      pointer-events: auto;
      z-index: 3;
    }
    .testimonial-slide.active > figure {
      box-shadow: 0 32px 70px rgba(10, 22, 40, 0.22),
                  0 0 0 1px rgba(199, 154, 32, 0.22),
                  0 0 48px rgba(199, 154, 32, 0.14);
    }

    .testimonial-slide.prev,
    .testimonial-slide.next {
      opacity: 0.42;
      z-index: 1;
      pointer-events: auto;
      cursor: pointer;
    }
    .testimonial-slide.prev {
      transform: translate(calc(-50% - var(--peek-offset)), -50%) scale(var(--peek-scale));
    }
    .testimonial-slide.next {
      transform: translate(calc(-50% + var(--peek-offset)), -50%) scale(var(--peek-scale));
    }
    .testimonial-slide.prev:hover,
    .testimonial-slide.next:hover { opacity: 0.7; }

    .testimonial-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(10, 22, 40, 0.08);
      box-shadow: 0 8px 20px rgba(10, 22, 40, 0.14);
      color: #0A1628;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: opacity 300ms ease,
                  transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 300ms ease;
      z-index: 10;
    }
    .testimonial-stage:hover .testimonial-arrow,
    .testimonial-arrow:focus-visible { opacity: 1; }
    .testimonial-arrow:hover {
      transform: translateY(-50%) scale(1.08);
      box-shadow: 0 12px 28px rgba(10, 22, 40, 0.22);
    }
    .testimonial-arrow.prev { left: 0.5rem; }
    .testimonial-arrow.next { right: 0.5rem; }
    @media (min-width: 1024px) {
      .testimonial-arrow.prev { left: 1.5rem; }
      .testimonial-arrow.next { right: 1.5rem; }
    }
    @media (max-width: 767px) {
      .testimonial-arrow { display: none; }
    }

    .testimonial-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 2.5rem;
    }
    .testimonial-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(10, 22, 40, 0.18);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 300ms ease, width 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .testimonial-dot:hover { background: rgba(10, 22, 40, 0.3); }
    .testimonial-dot.active {
      background: #C79A20;
      width: 28px;
      border-radius: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      .testimonial-stage {
        position: static;
        min-height: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
      }
      .testimonial-slide {
        position: static;
        width: 100%;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto;
      }
      .testimonial-arrow,
      .testimonial-nav { display: none; }
    }

    /* ════════════ Headline rotator ════════════ */
    #rotator {
      display: inline-block;
      min-height: 2.04em;        /* reserva 2 líneas (line-height 1.02 × 2) */
      vertical-align: top;
      transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    #rotator[data-state="out"] {
      opacity: 0;
      transform: translateY(-14px);
    }
    #rotator[data-state="in-start"] {
      opacity: 0;
      transform: translateY(14px);
      transition: none;
    }
    @media (prefers-reduced-motion: reduce) {
      #rotator, #rotator[data-state] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* ═════════ Hero laptop (limpio, MacBook-inspired) ═════════ */
    .hero-laptop {
      position: relative;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      filter: drop-shadow(0 32px 56px rgba(0, 0, 0, 0.48));
    }
    .hero-laptop-screen {
      position: relative;
      background: linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
      border-radius: 14px 14px 6px 6px;
      padding: 20px 11px 11px 11px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.35);
    }
    .hero-laptop-notch {
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 72px;
      height: 11px;
      background: #000;
      border-radius: 0 0 9px 9px;
      z-index: 2;
    }
    .hero-laptop-notch::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #1c1c1c;
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.15);
    }
    .hero-laptop-display {
      position: relative;
      aspect-ratio: 16 / 10;
      background: #FDFBF7;
      border-radius: 6px;
      overflow: hidden;
    }
    .hero-laptop-base {
      position: relative;
      height: 13px;
      margin: 0 -24px;
      background: linear-gradient(180deg, #1d1d1d 0%, #0f0f0f 48%, #2a2a2a 100%);
      border-radius: 0 0 22px 22px;
      box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    }
    .hero-laptop-base::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 3px;
      background: rgba(0, 0, 0, 0.55);
      border-radius: 0 0 8px 8px;
    }

    /* ═════════ Laptop como click-target (entero clickeable) ═════════ */
    .hero-laptop {
      display: block;
      text-decoration: none;
      cursor: pointer;
      transition:
        transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 500ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-laptop:hover {
      transform: translateY(-6px);
      filter: drop-shadow(0 44px 64px rgba(0, 0, 0, 0.55));
    }
    .hero-laptop:focus-visible {
      outline: none;
    }
    .hero-laptop:focus-visible .hero-laptop-screen {
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(199, 154, 32, 0.45);
    }

    /* ═════════ Contenido interno del display ═════════ */
    .hero-screen-content {
      position: absolute;
      inset: 0;
      padding: 1.1rem 1.4rem 1.3rem;
      display: flex;
      flex-direction: column;
    }
    .hero-screen-logo {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }
    .hero-screen-logo-img {
      height: 32px;
      width: auto;
    }
    .hero-screen-wordmark {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }
    .hero-screen-brand {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.82rem;
      color: #0A1628;
      letter-spacing: 0.08em;
    }
    .hero-screen-sub {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.56rem;
      color: #0A1628;
      letter-spacing: 0.22em;
      margin-top: 2px;
    }
    .hero-screen-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.1rem;
      text-align: center;
      padding: 0 1.5rem;
    }
    .hero-screen-question {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(1.1rem, 1.9vw, 1.65rem);
      color: #0A1628;
      line-height: 1.12;
      letter-spacing: -0.01em;
      max-width: 22ch;
    }
    .hero-screen-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      background: linear-gradient(135deg, #DCB84A 0%, #A7810E 100%);
      color: #060E1C;
      padding: 0.7rem 1.5rem;
      border-radius: 9999px;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      box-shadow: 0 6px 18px rgba(199, 154, 32, 0.42);
      transition:
        background 300ms,
        box-shadow 300ms,
        transform 300ms;
    }
    .hero-laptop:hover .hero-screen-cta {
      background: linear-gradient(135deg, #EED689 0%, #C79A20 100%);
      box-shadow: 0 10px 28px rgba(199, 154, 32, 0.58);
      transform: translateY(-1px);
    }
    .hero-screen-cta svg {
      transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-laptop:hover .hero-screen-cta svg {
      transform: translateX(3px);
    }
    .hero-screen-hint {
      font-family: var(--font-body);
      color: #55708F;
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.45;
      max-width: 32ch;
    }

    /* ═════════ Énfasis editorial "perfecta" — calidez + tranquilidad ═════════ */
    .hl-perfecta {
      font-size: 1.18em;
      letter-spacing: 0.005em;
      padding-inline: 0.03em;
      text-shadow:
        0 2px 28px rgba(199, 154, 32, 0.28),
        0 0 1px rgba(199, 154, 32, 0.18);
    }

    /* ═════════ Link soporte (debajo del PC) ═════════ */
    .hero-support-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 1.5rem;
      color: #55708F;
      font-size: 0.88rem;
      font-weight: 500;
      text-decoration: none;
      transition: color 220ms;
    }
    .hero-support-link:hover {
      color: #8B6A0A;
    }
    .hero-support-link svg {
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-support-link:hover svg {
      transform: translateX(3px);
    }

    /* ════════════ Fan-stack de controles / tarjetones (Modalidad 02) ════════════ */
    .stack-pair {
      position: relative;
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1.7;
      margin: 0 auto;
    }
    .stack-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: saturate(0.78) contrast(1.02) drop-shadow(0 18px 28px rgba(10,22,40,0.22));
      transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), opacity 700ms ease-out;
      opacity: 0;
    }
    /* RIGHT side (controles) — ambos entran desde la derecha, escalonados */
    .stack-pair--right .stack-img--back {
      transform: translateX(130%) translateY(12%) rotate(22deg) scale(0.82);
      z-index: 1;
    }
    .stack-pair--right .stack-img--front {
      transform: translateX(170%) translateY(-18%) rotate(38deg) scale(0.78);
      z-index: 2;
    }
    [data-reveal].in-view .stack-pair--right .stack-img--back {
      opacity: 1;
      transform: translateX(-14%) translateY(6%) rotate(-10deg) scale(1);
      transition-delay: 150ms;
    }
    [data-reveal].in-view .stack-pair--right .stack-img--front {
      opacity: 1;
      transform: translateX(14%) translateY(-6%) rotate(10deg) scale(1);
      transition-delay: 450ms;
    }
    /* LEFT side (tarjetones — mirror: ambos entran desde la izquierda) */
    .stack-pair--left .stack-img--back {
      transform: translateX(-130%) translateY(12%) rotate(-22deg) scale(0.82);
      z-index: 1;
    }
    .stack-pair--left .stack-img--front {
      transform: translateX(-170%) translateY(-18%) rotate(-38deg) scale(0.78);
      z-index: 2;
    }
    [data-reveal].in-view .stack-pair--left .stack-img--back {
      opacity: 1;
      transform: translateX(14%) translateY(6%) rotate(10deg) scale(1);
      transition-delay: 150ms;
    }
    [data-reveal].in-view .stack-pair--left .stack-img--front {
      opacity: 1;
      transform: translateX(-14%) translateY(-6%) rotate(-10deg) scale(1);
      transition-delay: 450ms;
    }
    @media (prefers-reduced-motion: reduce) {
      .stack-img { transition: none; opacity: 1 !important; transform: none !important; }
    }
    /* Modalidad mixta — mobile: ilustración primero, luego texto+CTA; desktop: texto izq + ilustración der */
    @media (max-width: 1023px) {
      .mixta-illus { order: 1; }
      .mixta-text { order: 2; text-align: center !important; }
    }

    /* Modalidad virtual — mobile centra texto (en desktop queda pegado a izq por default) */
    @media (max-width: 1023px) {
      .modalidad-text-block { text-align: center; }
      .modalidad-text-block h3,
      .modalidad-text-block p { margin-left: auto; margin-right: auto; }
    }

    /* Grid Presencial — mobile: tarjetón + control lado a lado arriba, texto+CTA abajo */
    /*                   desktop: 3 columnas clásico (tarjetones · texto · controles) */
    .presencial-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "imgL imgR"
        "text text";
    }
    .presencial-grid > :nth-child(1) { grid-area: imgL; }
    .presencial-grid > :nth-child(2) { grid-area: text; }
    .presencial-grid > :nth-child(3) { grid-area: imgR; }
    /* Mobile: tarjetón llena toda su imagen (sin padding interno), el control tiene aire — */
    /* compensamos ópticamente achicando el tarjetón para que visualmente queden en armonía */
    @media (max-width: 1023px) {
      .presencial-grid .stack-pair--left { max-width: 140px; }
      .presencial-grid .stack-pair--right { max-width: 200px; }
    }
    @media (min-width: 1024px) {
      .presencial-grid {
        grid-template-columns: 1fr 1.9fr 1fr !important;
        grid-template-areas: none;
      }
      .presencial-grid > :nth-child(1),
      .presencial-grid > :nth-child(2),
      .presencial-grid > :nth-child(3) { grid-area: auto; }
    }
    /* Tarjetón es más vertical que el control — proporción propia + más pequeño para balancear */
    .stack-pair--left { aspect-ratio: 1 / 2.15; max-width: 220px; }
    /* Tarjetón: drop-shadow más sutil (sus colores ya son cálidos y no requieren saturación) */
    .stack-pair--left .stack-img {
      filter: drop-shadow(0 14px 20px rgba(10,22,40,0.18));
    }

    /* Hero top padding — la nav sticky mide ~92px, damos aire moderado */
    .hero-top {
      padding-top: 3.5rem;
    }
    @media (min-width: 768px) {
      .hero-top {
        padding-top: 4.5rem;
      }
    }

    /* Logo strip — colores originales con hover sutil
       Ancho propio (no container-editorial) para que los 7 logos quepan en 1 fila. */
    .logo-strip-wrap {
      margin-top: 4rem;
      max-width: 1500px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    @media (min-width: 768px) {
      .logo-strip-wrap {
        margin-top: 5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
    .logo-strip-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 60px;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(16px) scale(0.96);
      animation: logoFadeIn 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @media (min-width: 768px) {
      .logo-strip-item {
        width: 175px;
        height: 95px;
      }
    }
    /* Stagger: cada logo entra 90ms después del anterior */
    .logo-strip-item:nth-child(1) { animation-delay: 300ms; }
    .logo-strip-item:nth-child(2) { animation-delay: 390ms; }
    .logo-strip-item:nth-child(3) { animation-delay: 480ms; }
    .logo-strip-item:nth-child(4) { animation-delay: 570ms; }
    .logo-strip-item:nth-child(5) { animation-delay: 660ms; }
    .logo-strip-item:nth-child(6) { animation-delay: 750ms; }
    .logo-strip-item:nth-child(7) { animation-delay: 840ms; }

    @keyframes logoFadeIn {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .logo-strip-item {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }
    .logo-strip-item img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      opacity: 0.88;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .logo-strip-item:hover img {
      opacity: 1;
      transform: scale(1.05);
    }

    /* ════════════ Mobile responsive fixes (post-deploy 2026-04-30) ════════════ */
    /* Counter superior: tamaño compacto para 1 fila + separadores con aire */
    .hero-counter {
      font-size: 11px;
      column-gap: 14px;
    }
    .hero-counter-sep {
      padding: 0 2px;
      opacity: 0.6;
    }
    @media (min-width: 768px) {
      .hero-counter { font-size: 14px; column-gap: 24px; }
      .hero-counter-sep { padding: 0 4px; }
    }

    /* Hero laptop mobile: cap tamaño + ocultar hint para limpiar contenido */
    @media (max-width: 767px) {
      .hero-laptop { max-width: 380px; }
      .hero-screen-hint { display: none; }
      .hero-screen-main { gap: 0.85rem; padding: 0 1rem; }
    }

    /* iMac mockup (modalidad virtual): cap mobile para que no domine viewport */
    @media (max-width: 767px) {
      .imac-mockup { max-width: 340px; }
      .imac-stand { width: 130px; height: 32px; }
      .imac-base { width: 200px; }
    }

    /* ════════════ Modalidad mixta — canvas fijo escalado ════════════ */
    /* Diseno original: 600x380 con elementos absolute (SVG, MacBook, projection,
       sillas, label). En lugar de pelear con cada elemento responsive, se mantiene
       el canvas a su tamano original y se aplica transform:scale uniforme en mobile.
       Asi se preservan proporciones, animaciones SVG y el layout completo.

       Patron: wrapper "viewport" responsive 100% width + canvas absolute centrado
       con left:50% translateX(-50%). El transform:scale se aplica EN COMBINACION
       con el translateX para mantener centrado horizontal real.

       NOTA: el contain:layout es crítico — sin él, el width:600px del canvas
       absolute contribuía al min-content del grid item .mixta-illus, empujando
       todo el grid mas ancho que el viewport y causando scroll horizontal en
       toda la pagina (los textos se cortaban a la derecha). */
    .mixta-canvas-wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 380px;
      contain: layout style;
    }
    .mixta-canvas {
      position: absolute;
      top: 0;
      left: 50%;
      width: 600px;
      height: 380px;
      transform: translateX(-50%);
      transform-origin: top center;
    }
    /* mixta-illus es grid item — sin min-width:0 toma min-content del child width:600px */
    .mixta-illus { min-width: 0; }

    /* Tablet/mobile: contener el canvas escalado y recortar el sobrante lateral */
    @media (max-width: 1023px) {
      .mixta-canvas-wrap {
        height: 250px;
        overflow: hidden;
      }
      .mixta-canvas { transform: translateX(-50%) scale(0.62); }
    }
    @media (max-width: 480px) {
      .mixta-canvas-wrap { height: 220px; }
      .mixta-canvas { transform: translateX(-50%) scale(0.55); }
    }