:root{
    --navy-950:#071E38;
    --navy-900:#0A2A4D;
    --navy-800:#0A386C;
    --navy-700:#0D4A87;
    --blue-500:#1C7BC4;
    --teal-500:#5A4FCF;
    --teal-400:#7E76E0;
    --teal-300:#C9C4F2;
    --teal-100:#EFEDFB;
    --ink:#0C1B2A;
    --ink-soft:#3E5570;
    --paper:#F6FAFB;
    --paper-alt:#EBF3F5;
    --white:#FFFFFF;
    --line: rgba(10,56,108,0.12);
    --shadow: 0 20px 50px -20px rgba(7,30,56,0.35);
    --radius: 18px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  body{
    margin:0;
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    color:var(--navy-900);
    line-height:1.08;
    margin:0;
    letter-spacing:-0.01em;
  }

  p{margin:0; color:var(--ink-soft); line-height:1.65;}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  img{max-width:100%; display:block;}
  section{position:relative;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
  }
  @media (max-width:480px){ .wrap{ padding:0 18px; } }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal-500);
  }
  .eyebrow.on-light{color:var(--navy-700);}
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:currentColor;
    display:inline-block;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 28px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:linear-gradient(135deg, var(--teal-500), var(--teal-400));
    color:var(--navy-950);
    box-shadow:0 14px 30px -12px rgba(10,192,193,0.55);
  }
  .btn-primary:hover{box-shadow:0 18px 34px -12px rgba(10,192,193,0.7);}
  .btn-ghost{
    background:transparent;
    border-color:rgba(255,255,255,0.35);
    color:#fff;
  }
  .btn-ghost:hover{background:rgba(255,255,255,0.1);}
  .btn-outline{
    background:transparent;
    border-color:var(--navy-800);
    color:var(--navy-800);
  }
  .btn-outline:hover{background:var(--navy-800); color:#fff;}
  .btn-sm{padding:10px 18px; font-size:13.5px;}

  /* ---------- Header ---------- */
  /* "body > header" (no solo "header") a propósito: el blog usa su
     propio <header class="post-header"> para el título del artículo,
     una etiqueta <header> distinta anidada dentro del contenido, no
     el header del sitio. Con el selector genérico "header" de antes,
     ESE header del artículo también se volvía sticky/pegajoso y subía
     a competir por el mismo top:0 que el header real del sitio — de
     ahí que el título del artículo pareciera "montarse" sobre el menú.
     Limitando esto a un hijo directo de <body>, solo el header real
     del sitio quedará fijo arriba; el del artículo se queda quieto en
     su lugar normal, como cualquier título de página. */
  body > header{
    position:sticky; top:0; z-index:100;
    background:rgba(246,250,251,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row1{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
  }
  .nav-row2{
    display:flex; align-items:center; gap:20px;
    padding:10px 0; border-top:1px solid var(--line);
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:44px; width:44px; object-fit:contain; object-position:center; background:#fff; padding:3px; border-radius:12px; box-shadow:0 6px 16px -6px rgba(7,30,56,0.3); flex-shrink:0;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-text b{font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--navy-900); letter-spacing:0.01em;}
  .brand-text span{font-size:11px; letter-spacing:0.12em; color:var(--teal-500); font-weight:700; text-transform:uppercase;}

  .nav-links{display:flex; align-items:center; gap:34px;}
  .nav-links a{
    font-size:14.5px; font-weight:600; color:var(--navy-800);
    position:relative; padding:4px 0;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background:var(--teal-500); transition:width .2s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-links a.active{ color:var(--teal-500); }
  .nav-links a.active::after{ width:100%; }
  .row2-actions{display:flex; align-items:center; gap:12px; margin-left:auto; flex:none;}
  .burger{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{display:block; width:24px; height:2px; background:var(--navy-900); margin:5px 0; transition:.25s;}

  .lang-switch{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 12px; border-radius:999px; border:1px solid var(--line);
    font-size:12.5px; font-weight:700; color:var(--navy-800);
    background:#fff; transition:border-color .18s ease, background .18s ease;
  }
  .lang-switch:hover{border-color:var(--teal-500); background:var(--teal-100);}

  /* ---------- Hero ---------- */
  .hero{
    background:linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 58%, var(--navy-700) 100%);
    overflow:hidden;
    padding:58px 0 48px;
  }
  @media (max-width:720px){ .hero{ padding:30px 0 28px; } }
  .hero-inner{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:2;
  }
  .hero h1{
    font-size:clamp(34px, 4.6vw, 56px);
    color:#fff;
    margin-top:18px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg, var(--teal-400), var(--teal-300));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lead{
    color:rgba(230,242,247,0.82);
    font-size:17.5px;
    max-width:520px;
    margin-top:20px;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .hero-meta{
    display:flex; gap:26px; margin-top:42px; flex-wrap:wrap;
  }
  .hero-meta div{display:flex; flex-direction:column; gap:2px;}
  .hero-meta b{color:#fff; font-family:'Space Grotesk',sans-serif; font-size:22px;}
  .hero-meta span{color:rgba(230,242,247,0.65); font-size:12.5px;}

  .hero-card{
    position:relative;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius);
    padding:26px;
    backdrop-filter:blur(6px);
  }
  .hero-card img{border-radius:12px; width:100%; aspect-ratio:3/3.9; object-fit:cover; object-position:top center;}
  /* Barra de mensaje: mismo ancho que la foto (es un hijo normal del
     mismo contenedor con el mismo padding a los lados, no un elemento
     flotante superpuesto con posición absoluta calculada a ojo). */
  /* Barra de mensaje: overlay pegado a la parte de ABAJO de cada foto
     (no una barra aparte debajo de la imagen), con degradado para que
     se sienta parte de la foto y no un parche encima. Al vivir DENTRO
     de .hero-carousel (que ya tiene overflow:hidden + border-radius),
     queda recortada automáticamente a las mismas esquinas redondeadas
     que la imagen — mismo ancho que la foto, sin cálculos manuales. */
  .hero-badge{
    position:absolute; left:0; right:0; bottom:0; z-index:5;
    background:linear-gradient(0deg, rgba(7,30,56,0.92) 0%, rgba(7,30,56,0.78) 55%, rgba(7,30,56,0) 100%);
    color:#fff;
    padding:34px 18px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    box-sizing:border-box;
  }
  #heroMessage{
    display:block; font-family:'Space Grotesk',sans-serif; font-weight:600;
    font-size:14.5px; line-height:1.35; color:#fff;
    transition:opacity .25s ease;
  }

  /* comet / swoosh signature */
  .comet-wrap{position:absolute; inset:0; z-index:1; pointer-events:none;}
  .comet-path{
    stroke-dasharray:1400;
    stroke-dashoffset:1400;
    animation:draw 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .spark{
    position:absolute;
    animation:twinkle 2.4s ease-in-out infinite;
  }
  @keyframes twinkle{ 0%,100%{opacity:.25; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);} }

  /* ---------- Trust bar ---------- */
  .trust{
    background:var(--white);
    border-bottom:1px solid var(--line);
  }
  .trust-inner{
    display:grid; grid-template-columns:repeat(4,1fr);
    padding:34px 0;
  }
  .trust-inner div{
    text-align:center;
    border-right:1px solid var(--line);
    padding:0 12px;
  }
  .trust-inner div:last-child{border-right:none;}
  .trust-inner b{
    display:block; font-family:'Space Grotesk',sans-serif;
    font-size:clamp(22px,3vw,30px); color:var(--navy-900);
  }
  .trust-inner span{font-size:12.5px; color:var(--ink-soft); font-weight:600;}

  /* ---------- Section heading ---------- */
  .sec-head{max-width:640px; margin-bottom:52px;}
  .sec-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:14px;}
  .sec-head p{margin-top:14px; font-size:16px;}
  .sec-pad{padding:64px 0;}
  @media (max-width:720px){ .sec-pad{ padding:40px 0; } }

  /* ---------- Services ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .svc-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
  .svc-photo{ width:100%; aspect-ratio:4/2.7; overflow:hidden; background:var(--paper-alt); }
  .svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
  .svc-card:hover .svc-photo img{ transform:scale(1.05); }
  .svc-body{ padding:24px 24px 26px; }
  .svc-icon{
    width:44px; height:44px; border-radius:12px;
    background:var(--teal-100);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    margin-top:-46px;
    position:relative;
    box-shadow:0 6px 14px -6px rgba(7,30,56,0.3);
    border:3px solid #fff;
  }
  .svc-icon svg{width:22px; height:22px; stroke:var(--navy-800);}
  .svc-card h3{font-size:18px; margin-bottom:10px;}
  .svc-card p{font-size:14.5px;}
  .svc-card .svc-link{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:16px; font-size:13.5px; font-weight:700; color:var(--navy-800);
  }
  .svc-card .svc-link svg{width:14px; height:14px; transition:transform .2s;}
  .svc-card:hover .svc-link svg{transform:translateX(3px);}

  /* Mise en évidence à l'arrivée depuis un lien direct (ex. résultats de recherche) */
  .svc-card{ scroll-margin-top:130px; }
  .svc-card:target{
    outline:3px solid var(--teal-500); outline-offset:3px;
    animation:svcTargetPulse 1.8s ease-out 1;
  }
  @keyframes svcTargetPulse{
    0%{ box-shadow:0 0 0 8px rgba(10,192,193,0.35); }
    100%{ box-shadow:0 0 0 0 rgba(10,192,193,0); }
  }

  /* ---------- Hero carousel ---------- */
  .hero-card{ padding:0; overflow:hidden; }
  .hero-carousel{ position:relative; width:100%; aspect-ratio:3/3.9; border-radius:12px; overflow:hidden; }
  .hero-slide{
    position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
    pointer-events:none;
  }
  .hero-slide.active{ opacity:1; pointer-events:auto; }
  .hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .hero-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:34px; height:34px; border-radius:50%;
    background:rgba(7,30,56,0.55); border:1px solid rgba(255,255,255,0.3);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    backdrop-filter:blur(4px);
  }
  .hero-nav svg{ width:16px; height:16px; stroke:#fff; }
  .hero-nav.prev{ left:10px; }
  .hero-nav.next{ right:10px; }
  /* Los puntos ahora viven DENTRO de la barra del mensaje (fondo navy
     sólido y fijo), en vez de flotar sobre 5 fotos distintas con brillo
     muy distinto entre sí — así el contraste queda garantizado siempre,
     sin depender de qué foto esté activa en ese momento. */
  .hero-dots{
    display:flex; align-items:center; gap:7px; flex:0 0 auto;
  }
  .hero-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35); cursor:pointer; transition:.2s; border:1px solid rgba(255,255,255,0.5); }
  .hero-dot.active{ background:var(--teal-400); border-color:var(--teal-400); width:20px; border-radius:4px; }

  /* ---------- Why us ---------- */
  .why{background:var(--navy-950); color:#fff;}
  .why .sec-head p{color:rgba(230,242,247,0.72);}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  .why-col{
    border-radius:var(--radius);
    padding:32px 30px;
  }
  .why-col.good{background:linear-gradient(160deg, rgba(10,192,193,0.14), rgba(10,192,193,0.03)); border:1px solid rgba(10,192,193,0.35);}
  .why-col.bad{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);}
  .why-col h3{color:#fff; font-size:19px; margin-bottom:20px; display:flex; align-items:center; gap:10px;}
  .why-col li{display:flex; gap:12px; padding:10px 0; font-size:14.5px; color:rgba(230,242,247,0.85); border-top:1px solid rgba(255,255,255,0.08);}
  .why-col li:first-of-type{border-top:none;}
  .why-col.good li svg{stroke:var(--teal-400);}
  .why-col.bad li svg{stroke:rgba(255,255,255,0.35);}
  .why-col svg{flex:none; width:18px; height:18px; margin-top:1px;}

  /* ---------- Pioneer grid (Haïti) ---------- */
  .pioneer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .pioneer-card{
    background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.12);
    border-radius:var(--radius); padding:26px 22px;
  }
  .pioneer-icon{
    width:46px; height:46px; border-radius:12px;
    background:rgba(10,192,193,0.16); border:1px solid rgba(10,192,193,0.3);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .pioneer-icon svg{width:22px; height:22px; stroke:var(--teal-400);}
  .pioneer-card h3{color:#fff; font-size:16px; margin-bottom:8px;}
  .pioneer-card p{font-size:13.5px; color:rgba(230,242,247,0.7);}
  .pioneer-badge{
    display:inline-flex; align-items:center; gap:8px; margin-top:22px;
    background:rgba(10,192,193,0.12); border:1px solid rgba(10,192,193,0.35);
    color:var(--teal-300); font-size:13px; font-weight:700;
    padding:10px 18px; border-radius:999px;
  }
  @media (max-width:980px){ .pioneer-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .pioneer-grid{grid-template-columns:1fr;} }

  /* ---------- Process ---------- */
  .process-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  .step{position:relative; padding-top:8px;}
  .step .num{
    font-family:'Space Grotesk',sans-serif; font-size:46px; font-weight:700;
    color:var(--teal-500); opacity:.9;
  }
  .step h3{font-size:19px; margin:10px 0 10px;}
  .step p{font-size:14.5px;}

  /* ---------- Coverage ---------- */
  .coverage{background:var(--paper-alt);}
  .coverage-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .chip-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
  .chip{
    padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--line);
    font-size:13.5px; font-weight:600; color:var(--navy-800);
  }
  .cov-visual{
    background:#fff; border-radius:var(--radius); padding:6px;
    position:relative; overflow:hidden; min-height:420px;
    border:1px solid var(--line); box-shadow:var(--shadow);
  }
  #covMap{ width:100%; height:420px; border-radius:12px; }

  /* Pin estilo Google Maps: gota con punto blanco en el centro */
  .impeca-pin{
    position:relative; width:30px; height:40px;
  }
  .impeca-pin::before{
    content:""; position:absolute; top:0; left:0; width:30px; height:30px;
    background:var(--teal-500);
    border-radius:50% 50% 50% 0;
    transform:rotate(-45deg);
    box-shadow:0 4px 10px rgba(7,30,56,0.35);
  }
  .impeca-pin span{
    position:absolute; top:8px; left:8px; width:14px; height:14px;
    background:#fff; border-radius:50%; z-index:1;
  }
  .impeca-pin:hover::before{ background:var(--navy-800); }

  /* Popup / info window estilo Google Maps: blanco, sombra suave */
  .leaflet-popup-content-wrapper{
    border-radius:10px; background:#fff; color:var(--ink);
    box-shadow:0 6px 20px rgba(7,30,56,0.25);
  }
  .leaflet-popup-content{ font-family:'Inter',sans-serif; font-size:13.5px; margin:10px 14px; color:var(--ink); }
  .leaflet-popup-content b{ font-family:'Space Grotesk',sans-serif; color:var(--navy-800); }
  .leaflet-popup-tip{ background:#fff; }
  .leaflet-container{ background:#e8eaed !important; font-family:'Inter',sans-serif; }
  .leaflet-control-zoom{ border:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; }
  .leaflet-control-zoom a{ color:var(--navy-800) !important; }
  @media (max-width:980px){ #covMap{ height:320px; } .cov-visual{ min-height:320px; } }

  /* ---------- Testimonials ---------- */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .testi-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:28px; display:flex; flex-direction:column; gap:16px;
  }
  .testi-card .stars{color:var(--teal-500); font-size:14px; letter-spacing:2px;}
  .testi-card p{font-size:15px; color:var(--ink);}
  .testi-who{display:flex; align-items:center; gap:12px; margin-top:auto;}
  .testi-avatar{
    width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg, var(--navy-800), var(--teal-500));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:14px; font-family:'Space Grotesk',sans-serif;
  }
  .testi-who b{display:block; font-size:13.5px; color:var(--navy-900);}
  .testi-who span{font-size:12px; color:var(--ink-soft);}

  /* ---------- Group section ---------- */
  .group{background:var(--white);}
  .group-intro{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; margin-bottom:56px;
  }
  .group-badge{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--paper-alt); border-radius:16px; padding:16px 20px;
  }
  .group-badge img{height:52px; width:52px; object-fit:contain; object-position:center; background:#fff; padding:4px; border-radius:12px;}
  .group-badge b{display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--navy-900);}
  .group-badge span{font-size:12px; color:var(--ink-soft);}
  .subs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .sub-card{
    border-radius:var(--radius); padding:24px 22px;
    border:1px solid var(--line); position:relative; min-height:190px;
    display:flex; flex-direction:column;
  }
  .sub-card.active{
    background:linear-gradient(165deg, var(--navy-900), var(--navy-800));
    color:#fff; border-color:transparent;
  }
  .sub-card.soon{background:var(--paper-alt); color:var(--navy-900);}
  .sub-tag{
    align-self:flex-start;
    font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
    padding:5px 10px; border-radius:999px; margin-bottom:14px;
  }
  .sub-card.active .sub-tag{background:rgba(10,192,193,0.22); color:var(--teal-300);}
  .sub-card.soon .sub-tag{background:rgba(10,56,108,0.1); color:var(--navy-700);}
  .sub-card h3{font-size:16.5px; margin-bottom:8px;}
  .sub-card.active h3{color:#fff;}
  .sub-card p{font-size:13px; flex:1;}
  .sub-card.active p{color:rgba(230,242,247,0.75);}
  .sub-card .sub-link{margin-top:14px; font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px;}
  .sub-card.active .sub-link{color:var(--teal-300);}
  .sub-card.soon .sub-link{color:var(--ink-soft);}

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:linear-gradient(120deg, var(--navy-950), var(--navy-800));
    border-radius:28px;
    padding:56px 48px;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
    flex-wrap:wrap;
    position:relative; overflow:hidden;
  }
  .cta-banner h2{color:#fff; font-size:clamp(24px,3vw,32px); max-width:480px;}
  .cta-banner p{color:rgba(230,242,247,0.75); margin-top:10px;}
  .cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

  /* ---------- Aliados: carrusel de 4 columnas ---------- */
  .allies-wrap{background:var(--white);}
  .allies-carousel{ position:relative; overflow:hidden; }
  .allies-carousel::before, .allies-carousel::after{
    content:''; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none;
  }
  .allies-carousel::before{ left:0; background:linear-gradient(90deg, var(--paper) 0%, rgba(246,250,251,0) 100%); }
  .allies-carousel::after{ right:0; background:linear-gradient(270deg, var(--paper) 0%, rgba(246,250,251,0) 100%); }
  .allies-track{
    display:flex; gap:20px; width:max-content;
    animation:alliesMarquee 46s linear infinite;
  }
  .allies-carousel:hover .allies-track,
  .allies-carousel:focus-within .allies-track{ animation-play-state:paused; }
  @keyframes alliesMarquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .ally-card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:14px; display:flex; align-items:center; justify-content:center;
    transition:transform .18s ease, box-shadow .18s ease;
    flex:0 0 240px;
  }
  .ally-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
  .ally-card img{ width:100%; height:auto; border-radius:10px; }
  @media (max-width:560px){ .ally-card{ flex:0 0 190px; } }
  @media (prefers-reduced-motion: reduce){
    .allies-track{ animation:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
    .ally-card{ scroll-snap-align:start; }
    .allies-track .ally-card[aria-hidden="true"]{ display:none; }
  }

  /* ---------- Contact form ---------- */
  .contact-wrap{background:var(--paper-alt);}
  .contact-card{
    display:grid; grid-template-columns:0.85fr 1.15fr;
    background:#fff; border-radius:28px; overflow:hidden;
    border:1px solid var(--line); box-shadow:var(--shadow);
  }
  .contact-info{
    background:linear-gradient(165deg, var(--navy-950), var(--navy-800));
    color:#fff; padding:48px 40px; display:flex; flex-direction:column; justify-content:center;
  }
  .contact-info h2{color:#fff; font-size:clamp(22px,2.6vw,28px); margin-top:12px;}
  .contact-info p{color:rgba(230,242,247,0.75); margin-top:14px; font-size:14.5px;}
  .info-list{margin-top:30px; display:flex; flex-direction:column; gap:16px;}
  .info-list div{display:flex; gap:12px; align-items:center; font-size:14px; color:rgba(230,242,247,0.9);}
  .info-list svg{flex:none; width:18px; height:18px; stroke:var(--teal-400);}

  .contact-form{padding:44px 40px; display:flex; flex-direction:column; gap:18px;}
  .contact-form .form-row{display:flex; flex-direction:column; gap:6px;}
  .contact-form .form-row.two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .contact-form .form-row label{font-size:13px; font-weight:700; color:var(--navy-800); display:flex; flex-direction:column; gap:6px;}
  .contact-form .form-row input, .contact-form .form-row select, .contact-form .form-row textarea{
    font-family:'Inter',sans-serif; font-size:14.5px; padding:12px 14px; font-weight:400;
    border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper);
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .contact-form .form-row input:focus, .contact-form .form-row select:focus, .contact-form .form-row textarea:focus{
    outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(10,192,193,0.15);
  }
  .contact-form .form-row textarea{resize:vertical; min-height:110px; font-weight:400;}
  .form-submit{margin-top:4px;}
  @media (max-width:980px){
    .contact-card{grid-template-columns:1fr;}
    .contact-form .form-row.two{grid-template-columns:1fr;}
  }

  /* ---------- Footer ---------- */
  footer{background:var(--navy-950); color:rgba(230,242,247,0.7); padding:70px 0 26px;}
  .foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.08);}
  .foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .foot-brand img{height:42px; width:42px; object-fit:contain; object-position:center; background:#fff; padding:3px; border-radius:10px;}
  .foot-brand b{color:#fff; font-family:'Space Grotesk',sans-serif; font-size:16px;}
  footer h4{color:#fff; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px;}
  footer ul li{margin-bottom:10px; font-size:14px;}
  footer ul li a:hover{color:#fff;}
  .foot-social{display:flex; gap:10px; margin-top:18px;}
  .foot-social a{
    width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center;
  }
  .foot-social a:hover{background:var(--teal-500); border-color:var(--teal-500); color:var(--navy-950);}
  .foot-social svg{width:16px; height:16px;}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px;
  }

  /* ---------- Floating WhatsApp ---------- */
  .wa-float{
    position:fixed; right:22px; bottom:22px; z-index:200;
    width:58px; height:58px; border-radius:50%;
    background:#20BA5A; display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 26px -8px rgba(0,0,0,0.4);
    transition:transform .2s ease;
  }
  .wa-float:hover{transform:scale(1.07);}
  .wa-float svg{width:28px; height:28px; fill:#fff;}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- Mobile ---------- */
  @media (max-width:980px){
    .hero-inner{grid-template-columns:1fr;}
    .hero-card{order:-1; max-width:420px;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:1fr;}
    .process-grid{grid-template-columns:1fr;}
    .coverage-inner{grid-template-columns:1fr;}
    .testi-grid{grid-template-columns:1fr;}
    .group-intro{grid-template-columns:1fr;}
    .subs-grid{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .trust-inner{grid-template-columns:repeat(2,1fr); row-gap:24px;}
    .trust-inner div:nth-child(2){border-right:none;}
  }
  @media (max-width:720px){
    .nav-links{
      position:fixed; inset:64px 48px auto 48px; background:#fff;
      border-radius:18px; box-shadow:var(--shadow); padding:18px;
      flex-direction:column; align-items:flex-start; gap:6px;
      border:1px solid var(--line);
      transform:translateY(-12px); opacity:0; pointer-events:none;
      transition:.22s ease;
    }
    .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
    .nav-links a{padding:10px 6px; width:100%;}
    .burger{display:block;}
    .nav-cta .btn-sm span.long{display:none;}
    .services-grid{grid-template-columns:1fr;}
    .subs-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .cta-banner{padding:38px 26px;}

    /* Avec le menu mobile ouvert, cacher les icônes de compte et panier
       pour qu'elles ne dépassent pas à côté du panneau du menu. */
    header:has(.nav-links.open) .row2-actions .icon-btn{ display:none; }
  }
/* ---------- Header icons: recherche, compte, panier ---------- */
.icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--line);
  color:var(--navy-800); cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.icon-btn:hover{ background:var(--teal-100); border-color:var(--teal-500); }
.icon-btn svg{ width:18px; height:18px; }
.cart-btn .cart-count{
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 3px; border-radius:999px;
  background:var(--teal-500); color:var(--navy-950);
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
}
.search-form-inline{
  display:flex; align-items:center; gap:8px;
  flex:0 1 64%; max-width:64%;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:6px 8px 6px 16px;
}
.search-form-inline svg{ width:17px; height:17px; color:var(--ink-soft); flex:none; }
.search-form-inline input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); min-width:0;
}
.search-form-inline input::placeholder{ color:var(--ink-soft); }
.search-form-inline button{
  padding:9px 18px; border-radius:999px; border:none; cursor:pointer;
  background:var(--navy-800); color:#fff; font-weight:700; font-size:13px;
  flex:none; white-space:nowrap;
}
.search-form-inline button:hover{ background:var(--teal-500); color:var(--navy-950); }

@media (max-width:900px){
  .nav-row2{ flex-wrap:wrap; }
  .search-form-inline{ flex:1 1 100%; max-width:100%; order:2; }
  .row2-actions{ order:1; margin-left:auto; }
}
@media (max-width:720px){
  .icon-btn{ width:34px; height:34px; }
  .row2-actions{ gap:8px; }
  .btn.btn-outline.btn-sm{ padding:9px 14px; font-size:12.5px; }
}
@media (max-width:480px){
  .lang-switch{ padding:7px 9px; font-size:11.5px; }
}

/* ---------- Segmentos: Hogares / Pymes / Empresas ---------- */
.segments{ background:var(--navy-950); padding-top:42px; }
.segments-inner{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding-bottom:0;
}
.segment-tab{
  display:flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px 999px 0 0;
  color:rgba(230,242,247,0.6); font-weight:700; font-size:14px;
  cursor:pointer; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.segment-tab svg{ width:17px; height:17px; }
.segment-tab:hover{ color:rgba(230,242,247,0.9); }
.segment-tab.active{ color:#fff; border-color:var(--teal-500); }
.segment-copy{
  background:linear-gradient(180deg, var(--navy-950), var(--navy-800));
  padding:22px 24px 34px; text-align:center;
}
.segment-text{
  display:none; max-width:640px; margin:0 auto;
  color:rgba(230,242,247,0.85); font-size:15px;
}
.segment-text.active{ display:block; }
@media (max-width:600px){
  .segment-tab{ padding:10px 14px; font-size:13px; }
}
/* ================= CARRUSEL DE TESTIMONIOS ================= */
/* Reutiliza la mecánica de .allies-carousel/.allies-track (definida en
   colombia.css / haiti.css: desplazamiento continuo con CSS puro, sin
   JS, con degradado en los bordes y pausa al pasar el mouse). Aquí solo
   se ajustan las tarjetas de testimonio para que funcionen como items
   de ese carrusel en vez de como grilla. */
.testi-track{ align-items:stretch; }
.testi-track .testi-card{
  flex:0 0 300px;
  min-height:220px;
  margin:0;
}
.testi-track .testi-card p{
  text-align:justify;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:560px){ .testi-track .testi-card{ flex:0 0 260px; min-height:210px; } }

/* ---------- Formulario "Deja tu reseña" ---------- */
.testi-form-toggle{
  margin-top:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius, 16px);
  padding:4px 24px;
}
.testi-form-toggle summary{
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:var(--navy-900);
  font-size:15.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.testi-form-toggle summary::-webkit-details-marker{ display:none; }
.testi-form-toggle summary::before{
  content:'+';
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--teal-100); color:var(--teal-500);
  font-size:16px; line-height:1;
}
.testi-form-toggle[open] summary::before{ content:'−'; }
.testi-form{ padding:4px 0 26px; max-width:480px; }
.testi-form h3{ font-size:18px; color:var(--navy-900); margin-bottom:6px; }
.testi-form-sub{ color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; }
.testi-field{ display:block; margin-bottom:16px; }
.testi-field > span{ display:block; font-size:13.5px; font-weight:600; color:var(--navy-900); margin-bottom:6px; }
.testi-field input[type="text"],
.testi-field textarea{
  width:100%; box-sizing:border-box;
  padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14.5px; color:var(--ink);
}
.testi-field textarea{ resize:vertical; }
.testi-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* Estrellas seleccionables sin JavaScript: los radios van antes que
   sus labels en el HTML y se muestran en orden invertido (row-reverse)
   para que, con el combinador ~, seleccionar o pasar el mouse por una
   estrella también coloree todas las anteriores. */
.star-rating{
  display:inline-flex; flex-direction:row-reverse; justify-content:flex-end;
  gap:4px; font-size:0;
}
.star-rating input{ position:absolute; opacity:0; width:1px; height:1px; }
.star-rating label{
  font-size:28px; line-height:1; color:#d8dee4; cursor:pointer;
  transition:color .15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{ color:var(--teal-500); }

.testi-form-notice{
  margin-top:20px; padding:14px 18px; border-radius:12px; font-size:14px;
}
.testi-form-notice--ok{ background:#e7f7f0; color:#166a4c; border:1px solid #bfe9d6; }
.testi-form-notice--error{ background:#fdeceb; color:#a3372a; border:1px solid #f4c6c0; }

/* Ícono de WhatsApp delante del número en el pie de página */
.foot-contact-wa{
  display:inline-flex; align-items:center; gap:7px;
  color:inherit; text-decoration:none;
}
.foot-contact-wa svg{ flex:0 0 auto; color:#25D366; }
.foot-contact-wa:hover{ color:var(--teal-500); }

/* Texto justificado en todo el sitio (escritorio y teléfono) */
p{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.btn, .eyebrow, .nav-links a, .hero-meta span, .hero-meta b, h1, h2, h3, h4, .stars, .sub-tag, .foot-bottom span, .page-banner p, .breadcrumb, .cta-banner p{ text-align:inherit; hyphens:none; }

/* ================= IMPECA ÉCOVAL — estilos propios ================= */

.tech-row2{ justify-content:flex-end; }
.tech-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  text-decoration:none;
}
.tech-back svg{ width:16px; height:16px; }
.tech-back:hover{ color:var(--teal-500); }

.tech-hero{
  position:relative;
  background:var(--navy-950);
  overflow:hidden;
  padding:64px 0 58px;
}
.tech-hero-bg{ position:absolute; inset:0; z-index:0; }
.tech-hero-bg-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  animation:techHeroFade 28s infinite;
}
.tech-hero-bg-slide:nth-child(1){ animation-delay:0s; }
.tech-hero-bg-slide:nth-child(2){ animation-delay:7s; }
.tech-hero-bg-slide:nth-child(3){ animation-delay:14s; }
.tech-hero-bg-slide:nth-child(4){ animation-delay:21s; }
@keyframes techHeroFade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  25%{ opacity:1; }
  29%{ opacity:0; }
  100%{ opacity:0; }
}
.tech-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(150deg, rgba(7,30,56,0.72) 0%, rgba(10,56,108,0.62) 55%, rgba(31,74,50,0.60) 130%);
}
.tech-hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
}
.tech-hero .eyebrow{ color:var(--teal-300); }
.tech-hero h1{ color:#fff; font-size:clamp(30px,4vw,46px); margin-top:14px; }
.tech-hero .lead{ color:rgba(255,255,255,0.78); font-size:16.5px; margin-top:16px; max-width:520px; }
.tech-hero .hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.tech-hero-visual{ display:flex; justify-content:center; }
.tech-hero-card{
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius); padding:26px 28px; backdrop-filter:blur(6px);
  max-width:520px; width:100%;
}
.tech-hero-card h3{ color:#fff; font-size:17px; margin-top:8px; margin-bottom:15px; }
.tech-hero-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tech-hero-list li{
  color:rgba(255,255,255,0.85); font-size:13px; padding-left:22px; position:relative;
  white-space:nowrap;
}
.tech-hero-list li::before{
  content:'✓'; position:absolute; left:0; top:0; color:var(--teal-400); font-weight:700;
}
@media (max-width:900px){
  .tech-hero-inner{ grid-template-columns:1fr; }
  .tech-hero-visual{ justify-content:flex-start; }
}

.tech-ideas-grid, .tech-roadmap-grid{
  display:grid; gap:22px; margin-top:10px;
}
.tech-ideas-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .tech-ideas-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .tech-ideas-grid{ grid-template-columns:1fr; } }
.tech-ideas-grid .sub-card h3{ font-size:18px; }

/* "Únete" (2 tarjetas) reutiliza esta clase de Impeca Agro; faltaba
   aquí, por eso las tarjetas se veían pegadas (sin grid/gap). */
.agro-partners-grid{
  display:grid; gap:22px; margin-top:10px;
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:640px){ .agro-partners-grid{ grid-template-columns:1fr; } }

/* Insignia "en recherche" para dejar clara la etapa real del proyecto */
.tech-stage-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(76,156,108,0.16); color:var(--teal-300);
  border:1px solid rgba(76,156,108,0.35);
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  margin-bottom:16px;
}
.tech-stage-badge svg{ width:14px; height:14px; }

/* ================= SUBMENÚ "IMPECA GROUP" (empresas del grupo) ================= */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:600; color:var(--navy-800);
  padding:4px 0;
}
.nav-dropdown-trigger svg{ width:13px; height:13px; transition:transform .18s ease; }
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg{ transform:rotate(180deg); }
.nav-dropdown-menu{
  /* Sin margin-top: ese hueco entre el botón y el menú es justo lo que
     hacía que el menú se cerrara al mover el mouse hacia abajo (el
     cursor pasaba por una zona sin :hover activo). El mismo espaciado
     visual ahora vive DENTRO de la caja, como padding-top, para que el
     área con la que se puede interactuar llegue sin cortes hasta el
     botón. */
  position:absolute; top:100%; left:50%; transform:translate(-50%,-6px);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px 8px 8px; min-width:200px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.nav-dropdown-menu a{
  display:block; padding:10px 14px; border-radius:9px; font-size:14px;
  font-weight:600; color:var(--navy-900); white-space:nowrap; text-decoration:none;
}
.nav-dropdown-menu a:hover{ background:var(--paper-alt); }
.nav-dropdown-menu a.current{ color:var(--teal-500); }
@media (max-width:720px){
  .nav-dropdown{ width:100%; }
  .nav-dropdown-trigger{ width:100%; justify-content:space-between; padding:10px 6px; }
  .nav-dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; margin-top:0; padding:0 0 6px 14px;
    display:flex; flex-direction:column; gap:2px;
  }
  .nav-dropdown-menu a{ padding:8px 6px; font-weight:500; }
}

/* ================= SECTION "VISION" + SLIDER DE FOTOS ================= */
.vision-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.vision-card{
  position:relative; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.vision-card .hero-carousel{ aspect-ratio:4/3.1; border-radius:var(--radius); }
/* #heroMessage (estilo del carrusel del hero) es un selector por id,
   así que no alcanza a este segundo carrusel con un id distinto; se
   repite la misma regla por clase para que el texto del pie de foto
   se vea igual en los dos carruseles. */
.hero-badge > span{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:14.5px; line-height:1.35; color:#fff;
  transition:opacity .25s ease;
}
@media (max-width:980px){
  .vision-grid{ grid-template-columns:1fr; gap:28px; }
  .vision-card{ order:-1; max-width:480px; margin:0 auto; }
}

/* =====================================================================
   IMPECA TECH — TIENDA (prefijo .tt)
   Dirección visual: banco de trabajo del electrónico. Fondo azul noche,
   índigo de marca, y ámbar de soldadura solo para lo que se activa
   (LED, precios, etapa). El momento memorable es la ventana de código
   del hero: la línea de digitalWrite se enciende al mismo ritmo que
   el LED del circuito.
   ===================================================================== */
.tt{ --amber:#F2B233; --indigo-d:#4B40BF; --indigo-l:#6A5FE0; --night:#0A1730; }
/* Textos justificados (a izquierda y derecha) en todo Impeca Tech; los títulos, botones, etiquetas y pestañas quedan como están. */
.tt p, .tt dd, .tt .tt-checks li, .tt .tt-flow small, .tt .tt-teaser-list li span{ text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty; overflow-wrap:break-word; }
.tt .tt-sch-empty, .tt .tt-mode-who, .tt .tt-sch-more p.tt-keep, .tt .tt-chip, .tt .tt-stage, .tt .tt-crumb, .tt .tt-kicker, .tt .tt-price{ text-align:left; hyphens:none; }
.tt .tt-sch-empty{ text-align:center; }
.tt h1, .tt h2, .tt h3{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.015em; }

.tt .btn-primary{ background:linear-gradient(135deg,var(--indigo-d),var(--indigo-l)); color:#fff; box-shadow:0 14px 30px -14px rgba(90,79,207,0.7); }
.tt .btn-ghost-dark{ background:transparent; border-color:rgba(255,255,255,0.4); color:#fff; }
.tt .btn-ghost-dark:hover{ background:rgba(255,255,255,0.12); }
.tt .btn-outline-indigo{ background:transparent; border-color:var(--indigo-d); color:var(--indigo-d); }
.tt .btn-outline-indigo:hover{ background:var(--indigo-d); color:#fff; }
.tt .btn:focus-visible, .tt a:focus-visible, .tt button:focus-visible, .tt summary:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.tt .btn-sm{ white-space:normal; text-align:center; }

/* ---------- Secciones ---------- */
.tt-sec{ padding:84px 0; }
@media (max-width:720px){ .tt-sec{ padding:52px 0; } }
.tt-light{ background:#fff; }
.tt-paper{ background:var(--paper-alt); }
.tt-dark{ background:linear-gradient(170deg,var(--navy-950),var(--night) 60%,#0F2447); color:#fff; }
.tt-indigo{ background:linear-gradient(150deg,#3A30A6,var(--indigo-d) 55%,#6A5FE0); color:#fff; }
.tt-head{ max-width:700px; margin-bottom:44px; }
.tt-head h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.1; color:var(--navy-900); }
.tt-head p{ margin-top:14px; font-size:16.5px; color:var(--ink-soft); }
.tt-dark .tt-head h2, .tt-indigo .tt-head h2{ color:#fff; }
.tt-dark .tt-head p, .tt-indigo .tt-head p{ color:rgba(255,255,255,0.78); }

.tt-chip{
  display:inline-flex; align-items:center; font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:999px; background:rgba(126,118,224,0.22); color:#D8D4FA;
}
.tt-light .tt-chip, .tt-paper .tt-chip{ background:var(--teal-100); color:var(--indigo-d); }
.tt-chip-amber{ background:rgba(242,178,51,0.16) !important; color:var(--amber) !important; }

.tt-textlink{
  font-weight:700; color:var(--indigo-d); text-decoration:none;
  border-bottom:2px solid currentColor; padding-bottom:1px; align-self:flex-start;
}
.tt-textlink:hover{ color:var(--navy-900); }
.tt-indigo .tt-textlink, .tt-dark .tt-textlink{ color:#fff; }

/* ---------- Hero ---------- */
.tt-hero{
  position:relative; overflow:hidden; background:var(--navy-950); padding:76px 0 70px;
  background-image:radial-gradient(900px 480px at 82% 20%, rgba(90,79,207,0.38), transparent 70%);
}
.tt-traces{ position:absolute; inset:0; width:100%; height:100%; color:rgba(126,118,224,0.18); pointer-events:none; }
.tt-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.tt-stage{
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--amber);
  border:1px solid rgba(242,178,51,0.5); padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.tt-hero h1{ color:#fff; font-size:clamp(34px,4.8vw,58px); line-height:1.05; }
.tt-hero .lead{ color:rgba(255,255,255,0.82); font-size:17.5px; margin-top:20px; max-width:540px; }
.tt-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.tt-hero-facts{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:10px; }
.tt-hero-facts li{ color:rgba(255,255,255,0.78); font-size:14.5px; padding-left:20px; position:relative; }
.tt-hero-facts li::before{ content:""; position:absolute; left:0; top:0.5em; width:8px; height:8px; background:var(--amber); border-radius:2px; }

.tt-win{ background:#0C1A33; border:1px solid rgba(255,255,255,0.12); border-radius:14px; box-shadow:0 40px 70px -30px rgba(0,0,0,0.7); overflow:hidden; }
.tt-win-bar{ display:flex; align-items:center; gap:7px; padding:11px 16px; background:#0F2142; border-bottom:1px solid rgba(255,255,255,0.08); }
.tt-win-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.22); }
.tt-win-bar span{ margin-left:10px; font:12.5px/1 ui-monospace,Menlo,Consolas,monospace; color:#8FA3C2; }
.tt-win-code{ margin:0; padding:18px 0 8px; overflow-x:auto; white-space:normal; font:13.5px/1.7 ui-monospace,Menlo,Consolas,monospace; color:#E6ECF5; }
.tt-win-code .l{ display:block; padding:0 18px; white-space:pre; }
.tt-win-code b{ font-weight:400; }
.tt-win-code .k{ color:#B9B2FF; } .tt-win-code .f{ color:#8FE3D6; } .tt-win-code .n{ color:var(--amber); }
.tt-win-code .on{ animation:ttOn 2s steps(1,end) infinite; }
.tt-win-code .off{ animation:ttOff 2s steps(1,end) infinite; }
@keyframes ttOn{ 0%{ background:rgba(242,178,51,0.2); } 50%,100%{ background:transparent; } }
@keyframes ttOff{ 0%{ background:transparent; } 50%{ background:rgba(242,178,51,0.2); } 100%{ background:transparent; } }
.tt-win-body{ padding-bottom:6px; }
.tt-circuit{ display:block; width:100%; max-width:300px; margin:6px auto 12px; color:#C9C4F2; }
.tt-circuit .t{ fill:#8FA3C2; font:10px ui-monospace,Menlo,Consolas,monospace; }
.tt-led-glow{ fill:var(--amber); opacity:0; filter:blur(7px); animation:ttGlow 2s steps(1,end) infinite; }
@keyframes ttGlow{ 0%{ opacity:0.9; } 50%,100%{ opacity:0; } }

/* ---------- Categorías ---------- */
.tt-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tt-cat{ position:relative; display:block; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--navy-900); text-decoration:none; }
.tt-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tt-cat::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,30,56,0.05) 30%,rgba(7,30,56,0.88)); }
.tt-cat:hover img{ transform:scale(1.05); }
.tt-cat-txt{ position:absolute; z-index:1; left:16px; right:16px; bottom:14px; color:#fff; display:flex; flex-direction:column; gap:3px; }
.tt-cat-txt b{ font-family:'Space Grotesk',sans-serif; font-size:17px; }
.tt-cat-txt small{ font-size:12.5px; color:rgba(255,255,255,0.8); }

/* ---------- Libros ---------- */
.tt-shelf{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tt-book{ display:flex; gap:20px; padding:20px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); border-radius:16px; }
.tt-book-info{ display:flex; flex-direction:column; gap:10px; min-width:0; flex:1; }
.tt-book-info p{ color:rgba(255,255,255,0.78); font-size:14px; }
.tt-buy-row{ margin-top:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.tt-price{ font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--amber); }
.tt-price .woocommerce-Price-amount{ color:inherit; }

.tt-cover{
  --c1:#4B40BF; --c2:#2B2478; --fg:#fff;
  position:relative; flex:0 0 138px; width:138px; aspect-ratio:3/4.1; padding:14px 12px 12px 22px;
  display:flex; flex-direction:column; color:var(--fg);
  background:linear-gradient(155deg,var(--c1),var(--c2));
  border-radius:3px 9px 9px 3px; box-shadow:0 22px 34px -16px rgba(0,0,0,0.75);
  transition:transform .35s ease; transform-origin:left center;
}
.tt-book:hover .tt-cover{ transform:perspective(700px) rotateY(-14deg) translateY(-3px); }
.tt-cover-spine{ position:absolute; left:0; top:0; bottom:0; width:11px; background:linear-gradient(90deg,rgba(0,0,0,0.35),rgba(255,255,255,0.12) 70%,rgba(0,0,0,0.15)); border-radius:3px 0 0 3px; }
.tt-cover-ico svg{ width:38px; height:38px; opacity:0.92; }
.tt-cover-title{ margin-top:auto; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; line-height:1.12; }
.tt-cover-sub{ margin-top:6px; font-size:9.5px; line-height:1.25; opacity:0.85; }
.tt-cover-brand{ margin-top:10px; font-size:8.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; }
.cv-indigo{ --c1:#5A4FCF; --c2:#2B2478; }
.cv-teal{ --c1:#12A3A8; --c2:#0A5560; }
.cv-amber{ --c1:#F6BE45; --c2:#C9791A; --fg:#1A1200; }
.cv-navy{ --c1:#1D4A82; --c2:#071E38; }
.cv-green{ --c1:#33A36A; --c2:#17583A; }
.cv-rose{ --c1:#D95A82; --c2:#8E2850; }

.tt-extras{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.tt-extra{ display:flex; gap:18px; padding:22px; border:1px dashed rgba(255,255,255,0.22); border-radius:14px; }
.tt-extra-ico{ flex:0 0 54px; width:54px; height:54px; border-radius:12px; background:rgba(242,178,51,0.12); color:var(--amber); display:flex; align-items:center; justify-content:center; }
.tt-extra-ico svg{ width:32px; height:32px; }
.tt-extra-body{ display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.tt-extra-body h3{ font-size:18px; color:#fff; }
.tt-extra-body p{ color:rgba(255,255,255,0.75); font-size:14px; }

/* ---------- Kits ---------- */
.tt-kits{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tt-kit{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.tt-kit-img{ position:relative; aspect-ratio:16/10; background:var(--navy-900); }
.tt-kit-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-chip-on-img{ position:absolute; top:12px; left:12px; background:#fff !important; color:var(--navy-900) !important; }
.tt-kit-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; align-items:flex-start; }
.tt-kit-body h3{ font-size:18px; color:var(--navy-900); }
.tt-kit-body p{ font-size:14px; color:var(--ink-soft); flex:1; }
.tt-disclosure{ margin-top:28px; max-width:760px; font-size:13.5px; color:var(--ink-soft); border-left:3px solid var(--amber); padding-left:14px; }

/* ---------- Proyectos ---------- */
.tt-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.tt-filter button{ font:inherit; font-size:14px; font-weight:600; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--navy-800); cursor:pointer; }
.tt-filter button.on{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.tt-projects{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tt-proj{ background:#fff; border-radius:14px; border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; }
.tt-proj[hidden]{ display:none; }
.tt-proj img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--navy-900); }
.tt-proj-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tt-proj-body h3{ font-size:17px; color:var(--navy-900); }
.tt-proj-body p{ font-size:13.5px; color:var(--ink-soft); }
.tt-proj .tt-chip{ background:#E7E4FB; color:#3A30A6; }
.tt-proj-meta{ display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.tt-paper .tt-chip.tt-lv-ini{ background:#DDF4E8; color:#17583A; }
.tt-paper .tt-chip.tt-lv-int{ background:#FFF0CC; color:#7A4E00; }
.tt-paper .tt-chip.tt-lv-adv{ background:#FBE0E7; color:#8E2850; }
.tt-proj details{ margin-top:auto; border-top:1px solid var(--line); padding-top:10px; font-size:13px; }
.tt-proj summary{ cursor:pointer; font-weight:700; color:var(--indigo-d); }
.tt-proj dl{ margin:10px 0 0; }
.tt-proj dt{ font-weight:700; color:var(--navy-900); margin-top:8px; }
.tt-proj dd{ margin:2px 0 0; color:var(--ink-soft); }

/* ---------- Visor de código ---------- */
.tt-code{ background:#0C1A33; border:1px solid rgba(255,255,255,0.12); border-radius:16px; overflow:hidden; }
.tt-code-panel{ border-top:1px solid rgba(255,255,255,0.08); }
.tt-code.is-ready .tt-code-panel{ border-top:0; }
.tt-code-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#0F2142; padding:0 12px 0 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.tt-code-tabs{ display:flex; overflow-x:auto; }
.tt-code-tabs button{ font:inherit; font-size:14px; font-weight:600; background:none; border:0; border-bottom:3px solid transparent; color:#9FB0CC; padding:15px 18px; cursor:pointer; white-space:nowrap; }
.tt-code-tabs button.on{ color:#fff; border-bottom-color:var(--amber); }
.tt-copy{ flex:0 0 auto; font:inherit; font-size:13px; font-weight:700; color:var(--amber); background:transparent; border:1px solid rgba(242,178,51,0.55); border-radius:999px; padding:7px 16px; cursor:pointer; }
.tt-copy:hover{ background:rgba(242,178,51,0.12); }
.tt-code pre{ margin:0; padding:22px 24px; overflow-x:auto; font:14px/1.7 ui-monospace,Menlo,Consolas,monospace; color:#E6ECF5; tab-size:2; }
.tt-code i{ font-style:normal; }
.tt-code .k{ color:#B9B2FF; } .tt-code .n{ color:var(--amber); } .tt-code .s{ color:#9BE3A4; } .tt-code .c{ color:#7C8BA5; font-style:italic; }


/* ---------- Código + esquema + materiales (lado a lado) ---------- */
.tt-steps3{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:10px 14px; }
.tt-steps3 li{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#DCE5F4; font-size:14px; font-weight:600; padding:8px 16px 8px 8px; border-radius:999px; }
.tt-steps3 b{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--amber); color:var(--night); font-size:13px; }
.tt-split{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
.tt-codecol{ min-width:0; border-right:1px solid rgba(255,255,255,0.08); }
.tt-codecol pre{ position:sticky; top:84px; }
.tt-lab{ min-width:0; background:#0F2142; padding:22px 24px 24px; display:flex; flex-direction:column; gap:16px; }
.tt-lab-top{ display:flex; flex-direction:column; gap:8px; }
.tt-lab-level{ align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--night); background:var(--amber); padding:4px 11px; border-radius:999px; }
.tt .tt-lab-what{ margin:0; color:#E6ECF5; font-size:15.5px; line-height:1.55; text-align:justify; hyphens:auto; }
.tt-diagram{ position:relative; display:block; background:#F4F7FC; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.14); cursor:zoom-in; }
.tt-diagram img{ display:block; width:100%; height:auto; }
.tt-zoom{ position:absolute; right:10px; top:10px; font-size:12px; font-weight:700; color:#fff; background:rgba(10,23,48,.82); padding:5px 11px; border-radius:999px; opacity:0; transition:opacity .2s; }
.tt-diagram:hover .tt-zoom, .tt-diagram:focus-visible .tt-zoom{ opacity:1; }
.tt-photo{ margin:0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.14); background:#000; }
.tt-photo img{ display:block; width:100%; height:auto; }
.tt-photo figcaption{ font-size:12.5px; color:#C7D3E8; padding:8px 12px; background:#0A1730; }
.tt-lab-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tt-lab h4{ margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); }
.tt-parts, .tt-wires{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tt-parts li, .tt-wires li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.4; color:#E6ECF5; }
.tt-parts b{ flex:0 0 auto; min-width:30px; text-align:center; background:rgba(255,255,255,0.1); border-radius:6px; padding:1px 4px; font-size:13px; color:#fff; }
.tt-parts small{ display:block; color:#9FB0CC; font-size:12.5px; }
.tt-wires i{ flex:0 0 auto; width:22px; height:6px; border-radius:3px; margin-top:7px; }
.tt-wires em{ font-style:normal; color:#9FB0CC; }
.w-red{ background:#E53935; } .w-black{ background:#1F2430; box-shadow:0 0 0 1px #6C7482; } .w-green{ background:#2E9E4F; } .w-blue{ background:#1E6FD9; } .w-orange{ background:#F26B21; }
.tt .tt-lab-note{ margin:0; font-size:13.5px; line-height:1.55; color:#C7D3E8; background:rgba(242,178,51,0.1); border-left:3px solid var(--amber); padding:10px 14px; border-radius:0 10px 10px 0; text-align:justify; hyphens:auto; }
.tt-lab-note b{ color:var(--amber); }
.tt-lab-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.tt .btn-amber{ background:var(--amber); color:var(--night); box-shadow:none; font-weight:800; }
.tt .btn-amber:hover{ filter:brightness(1.07); }
.tt-aff{ font-size:12px; color:#9FB0CC; }

/* Ampliar esquema */
.tt-lightbox{ border:0; padding:0; background:transparent; max-width:min(1000px,94vw); width:100%; }
.tt-lightbox::backdrop{ background:rgba(6,14,30,.86); }
.tt-lightbox img{ display:block; width:100%; height:auto; border-radius:14px; background:#F4F7FC; }
.tt-lightbox button{ position:absolute; right:8px; top:8px; width:38px; height:38px; border-radius:50%; border:0; background:var(--amber); color:var(--night); font-size:22px; font-weight:800; line-height:1; cursor:pointer; }

@media (max-width: 980px){
  .tt-split{ grid-template-columns:1fr; }
  .tt-lab{ order:-1; }
  .tt-codecol{ border-right:0; border-top:1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 560px){
  .tt-lab{ padding:18px 16px 20px; }
  .tt-lab-cols{ grid-template-columns:1fr; }
}

/* ---------- Videos ---------- */
.tt-videos{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
.tt-video{ margin:0; }
.tt-video-main{ grid-row:span 2; }
.tt-yt, .tt-yt-frame{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:14px; background:var(--navy-900) center/cover no-repeat; }
.tt-yt{ position:relative; cursor:pointer; padding:0; overflow:hidden; }
.tt-yt::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(7,30,56,0.55)); }
.tt-play{ position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:50%; background:var(--amber); color:var(--navy-950); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(0,0,0,0.6); }
.tt-play svg{ width:30px; height:30px; margin-left:3px; }
.tt-video figcaption{ margin-top:12px; display:flex; flex-direction:column; gap:2px; }
.tt-video figcaption b{ color:var(--navy-900); font-size:15px; line-height:1.3; }
.tt-video small{ color:var(--ink-soft); font-size:13px; }
.tt-video-soon{ display:flex; gap:16px; align-items:center; padding:20px; border:1px dashed rgba(10,56,108,0.3); border-radius:14px; }
.tt-video-soon > div:last-child{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.tt-video-soon b{ color:var(--navy-900); }
.tt-soon-box{ flex:0 0 56px; width:56px; height:56px; border-radius:12px; background:var(--teal-100); color:var(--indigo-d); display:flex; align-items:center; justify-content:center; }
.tt-soon-box svg{ width:34px; height:34px; }

/* ---------- Ruta ---------- */
.tt-path{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tt-path li{ display:flex; gap:16px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.tt-path li > div{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.tt-step{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:var(--indigo-d); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tt-path h3{ font-size:17px; color:var(--navy-900); }
.tt-path p{ font-size:14px; color:var(--ink-soft); }

/* ---------- Servicios / aliados ---------- */
.tt-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px; }
.tt-service{ display:flex; flex-direction:column; gap:10px; border-top:3px solid var(--indigo-d); padding-top:18px; }
.tt-service h3{ font-size:19px; color:var(--navy-900); }
.tt-service p{ font-size:14.5px; color:var(--ink-soft); flex:1; }
.tt-partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.tt-partner{ display:flex; flex-direction:column; gap:10px; border-top:1px solid rgba(255,255,255,0.4); padding-top:18px; }
.tt-partner h3{ font-size:19px; color:#fff; }
.tt-partner p{ color:rgba(255,255,255,0.82); font-size:14.5px; flex:1; }
.tt-news{ margin-top:54px; max-width:640px; }
.tt-news label{ display:block; font-weight:600; margin-bottom:12px; }
.tt-news-row{ display:flex; gap:10px; }
.tt-news-row input{ flex:1; min-width:0; border:0; border-radius:999px; padding:14px 20px; font:inherit; }

/* ---------- Preguntas ---------- */
.tt-faq-wrap{ display:grid; grid-template-columns:0.8fr 1.5fr; gap:48px; align-items:start; }
.tt-faq-wrap .tt-head{ margin-bottom:0; }
.tt-faq details{ border-bottom:1px solid var(--line); }
.tt-faq summary{ cursor:pointer; list-style:none; font-weight:600; font-size:17px; color:var(--navy-900); padding:18px 36px 18px 0; position:relative; }
.tt-faq summary::-webkit-details-marker{ display:none; }
.tt-faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:24px; color:var(--indigo-d); }
.tt-faq details[open] summary::after{ content:"\2212"; }
.tt-faq p{ padding:0 0 18px; color:var(--ink-soft); font-size:15px; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .tt-projects{ grid-template-columns:repeat(2,1fr); }
  .tt-shelf{ grid-template-columns:repeat(2,1fr); }
  .tt-extras{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .tt-faq-wrap{ grid-template-columns:1fr; gap:20px; }
  .tt-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .tt-cats{ grid-template-columns:repeat(2,1fr); }
  .tt-kits, .tt-services, .tt-partners, .tt-path{ grid-template-columns:repeat(2,1fr); }
  .tt-videos{ grid-template-columns:1fr; }
  .tt-video-main{ grid-row:auto; }
}
@media (max-width:680px){
  .tt-hero{ padding:44px 0 44px; }
  .tt-shelf, .tt-kits, .tt-services, .tt-partners, .tt-path, .tt-projects{ grid-template-columns:1fr; }
  .tt-cats{ gap:10px; }
  .tt-cat-txt b{ font-size:15px; }
  .tt-cat-txt small{ display:none; }
  .tt-news-row{ flex-direction:column; }
  .tt-code pre{ padding:16px; font-size:13px; }
  .tt-code-head{ flex-direction:column; align-items:stretch; padding:0 0 10px; }
  .tt-copy{ margin:0 12px; }
}

/* El carrito del header (a.icon-btn) vive dentro de .nav-links: sin la línea de subrayado de los enlaces de texto */
.nav-links a.icon-btn::after{ display:none; }
.nav-links a.icon-btn{ padding:0; }

/* Libros: portada arriba (se aprecia el diseño), información debajo */
.tt-book{ flex-direction:column; align-items:center; gap:22px; padding:28px 22px 22px; }
.tt-book .tt-cover{ flex:0 0 auto; width:176px; padding:18px 14px 14px 26px; }
.tt-book .tt-cover-ico svg{ width:46px; height:46px; }
.tt-book .tt-cover-title{ font-size:19px; }
.tt-book .tt-cover-sub{ font-size:11px; }
.tt-book .tt-cover-brand{ font-size:9.5px; }
.tt-book-info{ width:100%; }
.tt-book-info .tt-chip, .tt-extra-body .tt-chip{ align-self:flex-start; }
.tt-book .tt-buy-row{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }

.tt-news .btn-primary{ background:var(--amber); color:var(--navy-950); box-shadow:none; }
.tt-book .tt-cover-title{ font-size:17.5px; }
.tech-footer p{ color:rgba(230,242,247,0.72); text-align:justify; text-justify:inter-word; hyphens:auto; }

/* Móvil: libros, kits y proyectos en filas que se deslizan (evita una página interminable) */
@media (max-width:680px){
  .tt-shelf, .tt-kits, .tt-projects{
    display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory;
    margin:0 -16px; padding:0 16px 14px; -webkit-overflow-scrolling:touch;
  }
  .tt-book, .tt-kit, .tt-proj{ flex:0 0 84%; scroll-snap-align:center; }
  .tt-proj[hidden]{ display:none; }
}

/* ---------- Libros: portada que se entreabre + visor que pasa las páginas ---------- */
.tt-cover-btn{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; }
.tt-cover-btn:focus-visible{ outline:3px solid var(--amber); outline-offset:6px; border-radius:8px; }
.tt-cover-stack{ position:relative; display:block; perspective:900px; }
.tt-pages-edge{
  position:absolute; left:10px; top:5px; right:-9px; bottom:-5px; border-radius:2px 8px 8px 2px;
  background:repeating-linear-gradient(90deg,#FBF7EE 0 5px,#E5DECB 5px 6px);
  box-shadow:0 18px 28px -14px rgba(0,0,0,.7);
}
.tt-pages-edge::after{ content:""; position:absolute; inset:10px 12px 10px 12px; background:repeating-linear-gradient(180deg,#D8D0BC 0 2px,transparent 2px 9px); opacity:.55; }
.tt-cover-btn .tt-cover{ display:flex; transition:transform .55s cubic-bezier(.3,.7,.2,1); }
.tt-cover-btn:hover .tt-cover, .tt-cover-btn:focus-visible .tt-cover{ transform:rotateY(-38deg) translateX(-2px); }
.tt-book:hover .tt-cover{ transform:none; }
.tt-book .tt-cover-btn:hover .tt-cover{ transform:rotateY(-38deg) translateX(-2px); }
.tt-peek-hint{ font-size:13px; font-weight:700; color:var(--amber); opacity:.85; transition:opacity .2s, transform .2s; }
.tt-cover-btn:hover .tt-peek-hint{ opacity:1; transform:translateX(3px); }

.tt-flip{ border:0; padding:0; background:transparent; color:#fff; width:min(860px,96vw); max-width:none; overflow:visible; }
.tt-flip::backdrop{ background:rgba(6,14,30,.88); }
.tt-flip-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 4px 14px; }
.tt-flip-title{ font-family:'Space Grotesk',sans-serif; font-size:18px; }
.tt-flip-x{ width:40px; height:40px; border-radius:50%; border:0; background:var(--amber); color:var(--night); font-size:24px; font-weight:800; line-height:1; cursor:pointer; }
.tt-flip-stage{ display:flex; justify-content:center; align-items:center; min-height:calc(var(--pw,300px)*1.34 + 30px); perspective:2200px; padding:6px 0 10px; }
.tt-flip-nav{ display:flex; justify-content:center; align-items:center; gap:22px; padding-top:14px; }
.tt-flip-nav button{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.tt-flip-nav button:hover:not(:disabled){ background:var(--amber); color:var(--night); border-color:var(--amber); }
.tt-flip-nav button:disabled{ opacity:.3; cursor:default; }
.tt-flip-count{ min-width:70px; text-align:center; font-weight:700; color:#C7D3E8; font-size:14px; }

/* Libro de dos páginas (escritorio) */
.bk{ --pw:300px; position:relative; width:calc(var(--pw)*2); height:calc(var(--pw)*1.34); transform-style:preserve-3d; transition:transform .8s cubic-bezier(.4,.1,.2,1); }
.bk.is-closed{ transform:translateX(calc(var(--pw)*-.5)); }
.bk-base, .bk-leaf{ position:absolute; top:0; left:50%; width:50%; height:100%; }
.bk-base{ border-radius:0 8px 8px 0; box-shadow:0 30px 40px -20px rgba(0,0,0,.8); }
.bk-leaf{ transform-origin:left center; transform-style:preserve-3d; transition:transform .95s cubic-bezier(.45,.05,.25,1); }
.bk-leaf.flipped{ transform:rotateY(-180deg); }
.bk-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; }
.bk-face.back{ transform:rotateY(180deg); }
.bk-face.front{ border-radius:0 8px 8px 0; }
.bk-face.back{ border-radius:8px 0 0 8px; }
.bk-face.front::after, .bk-base::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 14%); }
.bk-face.back::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(270deg,rgba(0,0,0,.22),rgba(0,0,0,0) 14%); }

/* Hoja suelta (móvil: una página a la vez) */
.bk1{ --pw:min(86vw,340px); position:relative; width:var(--pw); height:calc(var(--pw)*1.34); }
.bk-sheet{ position:absolute; inset:0; transform-origin:left center; transition:transform .75s cubic-bezier(.45,.05,.25,1), opacity .5s ease .25s; box-shadow:0 24px 34px -20px rgba(0,0,0,.8); border-radius:3px 8px 8px 3px; overflow:hidden; backface-visibility:hidden; }
.bk-sheet.turned{ transform:rotateY(-110deg); opacity:0; pointer-events:none; }

/* Páginas de papel */
.bkp{ position:relative; width:100%; height:100%; box-sizing:border-box; padding:24px 22px 34px 24px; background:linear-gradient(135deg,#FFFDF7,#F3EDDC); color:#1B2433; font-size:12.5px; line-height:1.5; overflow:hidden; text-align:left; }
.bkp *{ text-align:left; }
.bkp h5{ margin:0 0 12px; font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--indigo-d); letter-spacing:-.01em; }
.bkp p{ margin:0 0 10px; color:#2B3446; }
.bkp-toc, .bkp-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.bkp-toc li{ display:flex; gap:10px; align-items:flex-start; padding-bottom:8px; border-bottom:1px dotted #C9BFA4; font-weight:600; }
.bkp-toc span{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--indigo-d); color:#fff; display:grid; place-items:center; font-size:11px; }
.bkp-list li{ position:relative; padding-left:20px; font-weight:600; }
.bkp-list li::before{ content:""; position:absolute; left:2px; top:5px; width:9px; height:9px; border-radius:2px; background:var(--amber); }
.bkp-note{ font-size:11.5px; color:#6B7488; font-style:italic; }
.bkp-num{ position:absolute; bottom:12px; left:0; right:0; text-align:center !important; font-size:11px; color:#8B93A5; }
.bkp-img{ display:block; width:100%; height:auto; border-radius:8px; margin-bottom:10px; background:#F4F7FB; }
.bkp-code{ margin:0; padding:8px 10px; border-radius:8px; background:#0C1A33; color:#DDE6F5; font:9.8px/1.4 ui-monospace,Menlo,Consolas,monospace; overflow:hidden; white-space:pre; }
.bkp-cover{ padding:0; background:none; }
.bkp-cover .tt-cover{ width:100%; height:100%; aspect-ratio:auto; border-radius:3px 8px 8px 3px; box-shadow:none; transform:none !important; padding:26px 20px 20px 34px; }
.bkp-cover .tt-cover-ico svg{ width:62px; height:62px; }
.bkp-cover .tt-cover-title{ font-size:26px; }
.bkp-cover .tt-cover-sub{ font-size:13px; }
.bkp-cover .tt-cover-brand{ font-size:11px; }
.bkp-end{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; background:linear-gradient(160deg,#2B2478,#0A1730); color:#fff; padding:26px; }
.bkp-end b{ font-family:'Space Grotesk',sans-serif; font-size:21px; line-height:1.15; }
.bkp-end p{ color:#C7D3E8; }
.bkp-end .tt-price{ font-size:22px; }
.tt-vfile{ display:block; width:100%; aspect-ratio:16/9; border-radius:14px; background:#000; }

@media (max-width: 759px){
  .tt-flip-stage{ min-height:calc(min(86vw,340px)*1.34 + 20px); }
  .bkp{ font-size:13.5px; padding:26px 24px 36px 28px; }
  .bkp-code{ font-size:11.5px; }
}
@media (prefers-reduced-motion: reduce){
  .bk, .bk-leaf, .bk-sheet, .tt-cover-btn .tt-cover{ transition-duration:.01s; }
}

/* Selector de idioma ES · FR · KR (criollo) */
.lang-switch.lang-switch3{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.tech-header .lang-switch3 a{ padding:6px 11px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--navy-800); text-decoration:none; line-height:1; }
.tech-header .lang-switch3 a::after{ display:none !important; }
.tech-header .lang-switch3 a.on{ background:#4B40BF; color:#fff; }
.tech-header .lang-switch3 a:not(.on):hover{ background:rgba(75,64,191,.12); }
@media (max-width:980px){ .lang-switch.lang-switch3{ align-self:flex-start; } }

/* ---------- Banda en movimiento, cifras y galería ---------- */
.tt-marquee{ background:#0A1730; color:#C9C4F2; overflow:hidden; border-block:1px solid rgba(255,255,255,.08); }
.tt-marquee-track{ display:flex; align-items:center; gap:26px; width:max-content; padding:15px 0; animation:ttMarq 38s linear infinite; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; letter-spacing:.02em; white-space:nowrap; }
.tt-marquee-track i{ width:8px; height:8px; border-radius:2px; background:#F2B233; transform:rotate(45deg); flex:0 0 auto; }
@keyframes ttMarq{ to{ transform:translateX(-50%); } }
/* Tarjetas: se levantan al pasar el cursor */
.tt-kit, .tt-proj, .tt-service, .tt-path li, .tt-cat{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.tt-kit:hover, .tt-proj:hover, .tt-service:hover, .tt-cat:hover{ transform:translateY(-6px); box-shadow:0 26px 40px -24px rgba(10,23,48,.55); }
@media (prefers-reduced-motion: reduce){ .tt-marquee-track{ animation:none; } }

/* =====================================================================
   v35: sitio de Impeca Tech en varias páginas
   Encabezado y menú por páginas, cabecera de página, franja de textos,
   bloque "Lo que vas a armar", Excel, plan para colegios y llamadas finales.
   ===================================================================== */

/* ---------- Encabezado: menú con muchas páginas ---------- */
.tech-header .nav-links{ gap:20px; }
.tech-header .nav-links > a, .tech-header .nav-dropdown-trigger{ font-size:14px; white-space:nowrap; }
.tech-header .nav-dropdown-trigger.is-on{ color:var(--teal-500); }
.tech-header .nav-dropdown-menu{ min-width:210px; }
@media (max-width:1260px){
  .tech-header .burger{ display:block; }
  .tech-header .nav-links{
    position:fixed; inset:68px 24px auto 24px; max-height:calc(100vh - 92px); overflow-y:auto;
    background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:16px 18px;
    flex-direction:column; align-items:flex-start; gap:4px; border:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s ease;
  }
  .tech-header .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .tech-header .nav-links > a:not(.icon-btn){ padding:10px 6px; width:100%; }
  .tech-header .nav-dropdown{ width:100%; }
  .tech-header .nav-dropdown-trigger{ width:100%; justify-content:space-between; padding:10px 6px; }
  .tech-header .nav-dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; padding:0 0 6px 14px; display:flex; flex-direction:column; gap:2px; min-width:0;
  }
  .tech-header .nav-dropdown-menu a{ padding:8px 6px; font-weight:500; }
  .tech-header .nav-links > .lang-switch3{ margin-top:6px; }
  .tech-header .nav-links > .icon-btn.cart-btn{ align-self:flex-start; width:44px; height:44px; margin:6px 0 2px 4px; flex:0 0 auto; }
}

/* Opción destacada del menú: la oferta para colegios */
.tech-header .nav-links > a.nav-hot{ background:#F2B233; color:#0A1730; padding:7px 14px; border-radius:999px; font-weight:800; box-shadow:0 8px 18px -10px rgba(242,178,51,.95); transition:transform .2s ease, background .2s ease; }
.tech-header .nav-links > a.nav-hot::after{ display:none; }
.tech-header .nav-links > a.nav-hot:hover{ background:#FFC453; color:#0A1730; transform:translateY(-1px); }
.tech-header .nav-links > a.nav-hot.active{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #0A1730; color:#0A1730; }
@media (max-width:1260px){
  .tech-header .nav-links > a.nav-hot{ width:auto; align-self:flex-start; margin:6px 0 4px 4px; }
}

/* ---------- Cabecera de cada página interna ---------- */
.tt-pagehead{
  position:relative; overflow:hidden; color:#fff; padding:54px 0 50px;
  background:linear-gradient(135deg,#0A1730 0%,#1F1968 58%,#4B40BF 135%);
}
.tt-pagehead .tt-traces{ color:rgba(126,118,224,.22); }
.tt-pagehead .wrap{ position:relative; z-index:1; }
.tt-pagehead h1{ color:#fff; font-size:clamp(30px,4.2vw,50px); line-height:1.07; max-width:860px; }
.tt-pagehead .lead{ color:rgba(255,255,255,.82); font-size:17.5px; margin-top:16px; max-width:700px; }
.tt-pagehead .tt-hero-cta{ margin-top:26px; }
.tt-pagehead .tt-stage{ margin-bottom:16px; }
.tt-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.62); margin-bottom:18px; }
.tt-crumb a{ color:#C9C4F2; text-decoration:none; }
.tt-crumb a:hover{ color:#fff; text-decoration:underline; }
.tt-pagehead-green{ background:linear-gradient(135deg,#06231B 0%,#0B4A38 58%,#16885F 135%); }
.tt-pagehead-green .tt-traces{ color:rgba(120,230,180,.2); }
.tt-pagehead-green .btn-primary{ background:linear-gradient(135deg,#16885F,#2FB07F); box-shadow:0 14px 30px -14px rgba(47,176,127,.7); }

/* ---------- Franja de textos (sin cifras) ---------- */
.tt-chips-band{ background:linear-gradient(135deg,#4B40BF,#2B2478); color:#fff; padding:20px 0; }
.tt-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center; }
.tt-chips li{ white-space:nowrap; display:flex; align-items:center; gap:10px; padding:7px 18px 7px 7px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:14.5px; font-weight:600; color:#EDEBFF; }
.tt-chip-ico{ width:30px; height:30px; border-radius:50%; background:var(--amber); color:var(--night); display:grid; place-items:center; flex:0 0 auto; }
.tt-chip-ico svg{ width:17px; height:17px; }
/* Cinco chips en una sola línea en escritorio: la franja usa un contenedor más ancho y todo escala con la pantalla. */
.tt-chips-band .wrap{ max-width:1320px; padding:0 16px; }
@media (min-width:1000px){
  .tt-chips{ flex-wrap:nowrap; gap:10px clamp(6px,.9vw,14px); }
  .tt-chips li{ font-size:clamp(11.5px,1.05vw,14.5px); gap:clamp(6px,.7vw,10px); padding:6px clamp(10px,1.1vw,18px) 6px 6px; }
  .tt-chip-ico{ width:clamp(24px,2.1vw,30px); height:clamp(24px,2.1vw,30px); }
  .tt-chip-ico svg{ width:clamp(14px,1.2vw,17px); height:clamp(14px,1.2vw,17px); }
}

/* ---------- Títulos de sección ---------- */
.tt-kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:12px; }
.tt-light .tt-kicker, .tt-paper .tt-kicker{ color:var(--indigo-d); }
.tt-head-row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.tt-head-row > div{ max-width:700px; }

/* ---------- "Lo que vas a armar": cuadrícula tipo bento ---------- */
.tt-showcase{ position:relative; overflow:hidden; }
.tt-showcase::before{ content:""; position:absolute; inset:-20% -10% auto auto; width:640px; height:640px; background:radial-gradient(circle,rgba(106,95,224,.34),transparent 65%); pointer-events:none; }
.tt-showcase .wrap{ position:relative; }
.tt-bento{ display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(3,210px); gap:14px; }
.tt-tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate;
  border-radius:20px; overflow:hidden; text-decoration:none; color:#fff;
  background:linear-gradient(145deg,#2B2478,#0F2447);
  box-shadow:0 24px 40px -26px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.tt-tile:hover{ transform:translateY(-5px); box-shadow:0 34px 50px -28px rgba(0,0,0,.9); }
.tt-tile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.tt-tile:hover > img{ transform:scale(1.07); }
.tt-tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(6,14,30,.05) 38%,rgba(6,14,30,.9)); pointer-events:none; }
.tt-tile-tag{
  position:absolute; top:14px; left:14px; z-index:1; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:rgba(10,23,48,.55); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); color:#fff;
}
.tt-tile-go{
  position:absolute; top:12px; right:12px; z-index:1; width:36px; height:36px; border-radius:50%; background:var(--amber); color:var(--night);
  display:grid; place-items:center; opacity:0; transform:translate(6px,-6px) scale(.7); transition:opacity .25s, transform .25s;
}
.tt-tile-go svg{ width:18px; height:18px; }
.tt-tile:hover .tt-tile-go, .tt-tile:focus-visible .tt-tile-go{ opacity:1; transform:none; }
.tt-tile-title{ padding:18px 20px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; line-height:1.15; }
.t-a{ grid-column:1 / 6;  grid-row:1 / 3; }
.t-b{ grid-column:6 / 10; grid-row:1 / 2; }
.t-c{ grid-column:10 / 13; grid-row:1 / 2; }
.t-d{ grid-column:6 / 9;  grid-row:2 / 4; }
.t-code{ grid-column:9 / 13; grid-row:2 / 3; }
.t-f{ grid-column:9 / 13; grid-row:3 / 4; }
.t-g{ grid-column:1 / 3;  grid-row:3 / 4; }
.t-xl{ grid-column:3 / 6; grid-row:3 / 4; }
.t-a .tt-tile-title, .t-d .tt-tile-title{ font-size:24px; padding:24px; }
.tt-tile-art{ position:absolute; inset:0; z-index:-2; }
.t-code{ background:#0C1A33; }
.t-code::after{ background:linear-gradient(180deg,rgba(12,26,51,0) 45%,rgba(12,26,51,.92)); }
.tt-tile-code{ padding:56px 20px 0; font:13px/1.75 ui-monospace,Menlo,Consolas,monospace; color:#E6ECF5; }
.tt-tile-code i{ display:block; font-style:normal; white-space:nowrap; overflow:hidden; }
.tt-tile-code b{ font-weight:400; }
.tt-tile-code .k{ color:#B9B2FF; } .tt-tile-code .f{ color:#8FE3D6; } .tt-tile-code .n{ color:var(--amber); }
.tt-tile-code em{ display:inline-block; width:8px; height:15px; margin-left:4px; vertical-align:-2px; background:var(--amber); animation:ttBlink 1.1s steps(1,end) infinite; }
@keyframes ttBlink{ 50%{ opacity:0; } }
.t-xl{ background:linear-gradient(145deg,#0B4A38,#16885F); }
.t-xl::after{ background:linear-gradient(180deg,rgba(6,35,27,0) 40%,rgba(6,35,27,.9)); }
.tt-tile-sheet{ padding:52px 18px 0; }
.tt-tile-sheet .xl-bar{ display:block; width:62%; padding:5px 10px; border-radius:6px; background:rgba(255,255,255,.14); font:italic 700 12px Georgia,serif; color:#CFF5E3; }
.tt-tile-sheet .xl-grid{ display:grid; grid-template-columns:20px repeat(3,1fr); gap:3px; width:62%; margin-top:8px; }
.tt-tile-sheet .xl-grid b, .tt-tile-sheet .xl-grid i{ height:15px; border-radius:3px; font:700 9px/15px system-ui,sans-serif; text-align:center; color:#CFF5E3; background:rgba(255,255,255,.1); }
.tt-tile-sheet .xl-grid i{ background:rgba(255,255,255,.2); }
.tt-tile-sheet .xl-grid i.hi{ background:var(--amber); }
.tt-tile-sheet .xl-bars{ position:absolute; right:18px; top:56px; width:30%; height:62px; display:flex; align-items:flex-end; gap:6px; }
.tt-tile-sheet .xl-bars u{ flex:1; text-decoration:none; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#8FF0C0,#2FB07F); }

/* ---------- Libros destacados ---------- */
.tt-featured{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tt-feat{ display:flex; gap:26px; align-items:center; padding:26px; background:#fff; border:1px solid var(--line); border-radius:18px; text-decoration:none; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.tt-feat:hover{ transform:translateY(-5px); box-shadow:0 26px 40px -26px rgba(10,23,48,.55); }
.tt-feat:hover .tt-cover{ transform:perspective(700px) rotateY(-14deg) translateY(-3px); }
.tt-feat .tt-cover{ width:120px; flex:0 0 120px; padding:14px 10px 10px 20px; }
.tt-feat-txt{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; min-width:0; }
.tt-feat-txt b{ font-family:'Space Grotesk',sans-serif; font-size:17.5px; color:var(--navy-900); line-height:1.2; }
.tt-feat-txt small{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* ---------- Colegios de Haïti: anuncio en el inicio ---------- */
.tt-teaser{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:46px; border-radius:26px; color:#fff; background:linear-gradient(135deg,#0A1730,#2B2478 70%,#4B40BF); box-shadow:0 40px 60px -36px rgba(10,23,48,.8); }
.tt-teaser h2{ color:#fff; font-size:clamp(24px,3vw,36px); line-height:1.1; }
.tt-teaser p{ color:rgba(255,255,255,.82); margin-top:14px; }
.tt-teaser .tt-kicker{ color:var(--amber); }
.tt-teaser .btn-outline-indigo{ border-color:rgba(255,255,255,.5); color:#fff; }
.tt-teaser .btn-outline-indigo:hover{ background:#fff; color:var(--indigo-d); }
.tt-teaser-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.tt-teaser-list li{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-weight:600; font-size:14.5px; }
.tt-teaser-list svg{ width:26px; height:26px; color:var(--amber); flex:0 0 auto; }

/* ---------- Boletín y llamada final ---------- */
.tt-news-sec{ padding:56px 0; }
.tt-news-sec .tt-news, .tt-faq-news .tt-news{ margin:0 auto; text-align:center; }
.tt-light .tt-news label, .tt-paper .tt-news label{ color:var(--navy-900); }
.tt-light .tt-news-row input{ border:1px solid var(--line); background:#fff; box-shadow:0 8px 20px -14px rgba(10,23,48,.4); }
.tt-light .tt-news .btn-primary{ background:linear-gradient(135deg,var(--indigo-d),var(--indigo-l)); color:#fff; }
.tt-cta{ background:linear-gradient(135deg,#0A1730,#1F1968 60%,#4B40BF); color:#fff; padding:52px 0; }
.tt-cta-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.tt-cta h2{ color:#fff; font-size:clamp(22px,2.8vw,32px); line-height:1.12; max-width:640px; }
.tt-cta p{ color:rgba(255,255,255,.8); margin-top:8px; max-width:600px; }
.tt-cta-btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Listas con marca ---------- */
.tt-checks{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.tt-checks li{ display:flex; gap:12px; align-items:flex-start; font-weight:600; color:var(--navy-900); line-height:1.4; }
.tt-checks li > span{ flex:0 0 26px; height:26px; border-radius:50%; background:var(--teal-100); color:var(--indigo-d); display:grid; place-items:center; }
.tt-checks li svg{ width:15px; height:15px; }
.tt-checks-sm li{ font-weight:500; font-size:14.5px; }
.tt-nopeek{ cursor:default; }

/* ---------- Excel ---------- */
.tt-skills{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tt-skill{ padding:26px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 30px -26px rgba(10,23,48,.5); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.tt-skill:hover{ transform:translateY(-5px); }
.tt-skill-ico{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(135deg,#DFF6EA,#B9EAD0); color:#0B6B49; margin-bottom:14px; }
.tt-skill-ico svg{ width:26px; height:26px; }
.tt-skill h3{ font-size:18.5px; color:var(--navy-900); }
.tt-skill p{ margin-top:8px; font-size:14.5px; color:var(--ink-soft); }
.tt-flow{ list-style:none; margin:0 0 38px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.tt-flow li{ position:relative; display:flex; flex-direction:column; gap:6px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.tt-flow li:not(:last-child)::after{ content:"\2192"; position:absolute; right:-23px; top:50%; transform:translateY(-50%); font-weight:800; font-size:20px; color:var(--indigo-d); }
.tt-flow-n{ width:30px; height:30px; border-radius:50%; background:var(--indigo-d); color:#fff; display:grid; place-items:center; font:700 14px 'Space Grotesk',sans-serif; margin-bottom:4px; }
.tt-flow b{ font-family:'Space Grotesk',sans-serif; font-size:19px; color:var(--navy-900); }
.tt-flow small{ font-size:14px; color:var(--ink-soft); line-height:1.5; }
.tt-xl-demo{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.tt-xl-demo > *, .tt-xl-serv > *, .tt-two > *, .tt-modes > *, .tt-teaser > *{ min-width:0; }
.tt-xl-code .tt-pre{ max-width:100%; overflow-x:auto; }
.tt-xl-sheet{ overflow-x:auto; }
.tt-xl-sheet{ margin:0; background:#fff; border:1px solid #D5E2DB; border-radius:16px; overflow:hidden; box-shadow:0 28px 44px -30px rgba(10,60,40,.55); }
.xl-formula{ display:flex; align-items:center; gap:12px; padding:9px 14px; background:#F1F6F3; border-bottom:1px solid #D5E2DB; }
.xl-formula span{ font:italic 700 14px Georgia,serif; color:#0B6B49; }
.xl-formula code{ font:13px ui-monospace,Menlo,Consolas,monospace; color:#1B2B24; background:#fff; border:1px solid #D5E2DB; border-radius:4px; padding:3px 10px; }
table.xl{ width:100%; border-collapse:collapse; font-size:13.5px; color:#1B2B24; }
table.xl th{ background:#F1F6F3; color:#5B6B63; font-weight:600; border:1px solid #DFE8E3; padding:6px 10px; text-align:center; width:36px; }
table.xl thead th{ width:auto; }
table.xl td{ border:1px solid #E6EEE9; padding:7px 14px; }
table.xl td.h{ background:#E1F4EA; font-weight:700; color:#0B4A38; }
table.xl td.n{ text-align:right; font-variant-numeric:tabular-nums; }
table.xl tr.tot td{ font-weight:700; background:#F6FBF8; }
table.xl td.sel{ outline:2px solid #16885F; outline-offset:-2px; background:#fff; }
.xl-chart{ display:flex; align-items:flex-end; gap:12px; height:110px; padding:16px 26px 0; background:linear-gradient(#fff,#F4FAF6); border-top:1px solid #D5E2DB; }
.xl-chart u{ flex:1; text-decoration:none; background:linear-gradient(180deg,#2FB07F,#16885F); border-radius:6px 6px 0 0; }
.tt-xl-sheet figcaption{ padding:10px 14px; font-size:12.5px; font-style:italic; color:#5B6B63; background:#fff; border-top:1px solid #E6EEE9; }
.tt-xl-code h3{ font-size:21px; color:var(--navy-900); }
.tt-xl-code p{ margin-top:8px; font-size:15px; color:var(--ink-soft); }
.tt-pre{ margin:16px 0; padding:18px 20px; border-radius:14px; background:#0C1A33; color:#E6ECF5; overflow:auto; font:13px/1.65 ui-monospace,Menlo,Consolas,monospace; box-shadow:0 24px 40px -28px rgba(10,23,48,.7); }
.tt-pre code{ font:inherit; white-space:pre; }
.tt-xl-serv{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.tt-xl-serv h2{ font-size:clamp(26px,3.2vw,38px); line-height:1.1; color:var(--navy-900); }
.tt-xl-serv p{ margin:14px 0 24px; font-size:16.5px; color:var(--ink-soft); }

/* ---------- Plan para colegios de Haïti ---------- */
.tt-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tt-pillar{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:30px 24px 26px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 22px 36px -28px rgba(10,23,48,.55); }
.tt-pillar::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--indigo-d),var(--amber)); }
.tt-pillar-ico{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--indigo-d),var(--indigo-l)); margin-bottom:6px; }
.tt-pillar-ico svg{ width:28px; height:28px; }
.tt-pillar h3{ font-size:20px; line-height:1.15; color:var(--navy-900); }
.tt-pillar p{ font-size:14.5px; color:var(--ink-soft); }
.tt-phase{ display:flex; align-items:center; gap:14px; margin:34px 0 14px; font-family:'Inter',sans-serif; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo-d); }
.tt-phase:first-of-type{ margin-top:0; }
.tt-phase::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(75,64,191,.35),transparent); }
.tt-modules{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.tt-modules li{ display:flex; gap:16px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.tt-mod-n{ flex:0 0 42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--indigo-d); color:#fff; font:700 17px 'Space Grotesk',sans-serif; }
.tt-modules h4{ margin:0 0 4px; font-size:16.5px; color:var(--navy-900); }
.tt-modules p{ font-size:14px; color:var(--ink-soft); }
.tt-projects-sch{ grid-template-columns:repeat(5,1fr); gap:16px; }
.tt-projects-sch .tt-proj-body{ padding:14px; }
.tt-projects-sch .tt-proj-body h3{ font-size:15.5px; }
.tt-projects-sch .tt-proj-body p{ font-size:13px; }
.tt-modes{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tt-mode{ display:flex; flex-direction:column; gap:12px; padding:34px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 28px 44px -32px rgba(10,23,48,.6); }
.tt-mode-ico{ width:58px; height:58px; border-radius:17px; display:grid; place-items:center; background:var(--teal-100); color:var(--indigo-d); }
.tt-mode-ico svg{ width:30px; height:30px; }
.tt-mode h3{ font-size:27px; color:var(--navy-900); }
.tt-mode-who{ font-weight:800; color:var(--indigo-d); margin-top:-6px; }
.tt-mode p{ font-size:15px; color:var(--ink-soft); }
.tt-mode .tt-checks{ margin-top:6px; }
.tt-club-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tt-club-card{ padding:28px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(4px); }
.tt-club-n{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--amber); color:var(--night); font:800 16px 'Space Grotesk',sans-serif; margin-bottom:14px; }
.tt-club-card h3{ color:#fff; font-size:20px; }
.tt-club-card p{ margin-top:8px; color:rgba(255,255,255,.86); font-size:15px; }
.tt-two{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.tt-two h2{ font-size:clamp(24px,2.8vw,32px); color:var(--navy-900); margin-bottom:22px; }
.tt-skill-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.tt-skill-tags li{ display:flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:700; font-size:14.5px; color:var(--navy-900); }
.tt-skill-tags svg{ width:16px; height:16px; color:#16885F; }
.tt-start{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.tt-start li{ display:flex; gap:16px; align-items:flex-start; }
.tt-start b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:18px; color:var(--navy-900); }
.tt-start p{ margin-top:4px; font-size:14.5px; color:var(--ink-soft); }

/* ---------- Adaptación a pantallas más chicas ---------- */
@media (max-width:1100px){
  .tt-projects-sch{ grid-template-columns:repeat(3,1fr); }
  .tt-pillars{ grid-template-columns:repeat(2,1fr); }
  .tt-featured{ grid-template-columns:1fr; }
  .tt-flow{ grid-template-columns:repeat(2,1fr); }
  .tt-flow li:nth-child(2)::after{ display:none; }
}
@media (max-width:980px){
  .tt-bento{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:170px; }
  .tt-bento .tt-tile{ grid-column:auto; grid-row:auto; }
  .tt-bento .t-a{ grid-column:span 2; grid-row:span 2; }
  .tt-bento .t-d{ grid-row:span 2; }
  .tt-skills{ grid-template-columns:repeat(2,1fr); }
  .tt-xl-demo, .tt-xl-serv, .tt-two, .tt-modes, .tt-teaser{ grid-template-columns:1fr; }
  .tt-xl-serv{ gap:28px; }
  .tt-two{ gap:40px; }
  .tt-club-grid{ grid-template-columns:1fr; }
  .tt-teaser{ padding:34px 28px; }
}
@media (max-width:720px){
  .tt-pagehead{ padding:40px 0 38px; }
  .tt-skills, .tt-modules{ grid-template-columns:1fr; }
  .tt-projects-sch{ grid-template-columns:repeat(2,1fr); }
  .tt-pillars{ grid-template-columns:1fr; }
  .tt-flow{ grid-template-columns:1fr; gap:22px; }
  .tt-flow li::after{ display:none !important; }
  .tt-chips li{ font-size:13.5px; }
  .tt-cta-in{ flex-direction:column; align-items:flex-start; }
  .tt-feat{ gap:18px; padding:20px; }
  .tt-mode{ padding:26px; }
}
@media (max-width:520px){
  .tt-bento{ grid-auto-rows:150px; gap:10px; }
  .tt-tile-title, .t-a .tt-tile-title, .t-d .tt-tile-title{ font-size:15.5px; padding:14px; }
  /* Las dos tarjetas "dibujadas" (código y Excel) enseñan menos líneas para que el título no se pise. */
  .tt-tile-code{ padding:46px 14px 0; font-size:11px; line-height:1.55; }
  .tt-tile-code i:nth-child(n+3){ display:none; }
  .tt-tile-sheet{ padding:46px 14px 0; }
  .tt-tile-sheet .xl-bar{ display:none; }
  .tt-tile-sheet .xl-grid{ width:64%; margin-top:0; }
  .tt-tile-sheet .xl-grid > :nth-child(n+9){ display:none; }
  .tt-tile-sheet .xl-bars{ right:12px; top:48px; width:26%; height:34px; gap:4px; }
  .tt-projects-sch{ grid-template-columns:1fr; }
  .tt-tile-go{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .tt-tile, .tt-tile > img, .tt-skill, .tt-feat{ transition:none; }
  .tt-tile-code em{ animation:none; }
}

/* =====================================================================
   v1.2.0 · Offres scolaires: portada con ilustración, pestañas por nivel y catálogo
   ===================================================================== */

/* Cabecera con ilustración al lado del texto */
.tt-pagehead-split{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:44px; align-items:center; }
.tt-pagehead-split h1{ font-size:clamp(27px,3.1vw,42px); max-width:none; }
.tt-pagehead-split .lead{ max-width:620px; }
.tt-pagehead-visual{ width:100%; max-width:560px; justify-self:end; }
.tt-pagehead-visual svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 28px 34px rgba(5,10,30,.45)); }
@media (max-width:980px){
  .tt-pagehead-split{ grid-template-columns:1fr; gap:26px; }
  .tt-pagehead-visual{ max-width:460px; justify-self:center; }
}

/* Bras robot: animaciones suaves (se apagan con "reducir movimiento") */
.ra-cap{ font:600 13px 'Inter',sans-serif; fill:rgba(255,255,255,.82); letter-spacing:.02em; }
.ra-a1{ transform-origin:425px 285px; animation:raSwing1 6.4s ease-in-out infinite alternate; }
.ra-a2{ transform-origin:330px 150px; animation:raSwing2 5.2s ease-in-out infinite alternate; }
.ra-fing-t{ transform-origin:30px -9px; animation:raFingT 2.8s ease-in-out infinite alternate; }
.ra-fing-b{ transform-origin:30px 9px; animation:raFingB 2.8s ease-in-out infinite alternate; }
.ra-led{ opacity:.3; animation:raLed 3.6s linear infinite; }
.ra-led-2{ animation-delay:1.2s; }
.ra-led-3{ animation-delay:2.4s; }
.ra-flow{ animation:raFlow 1.3s linear infinite; }
.ra-blink{ animation:raBlink 1.1s steps(2,jump-none) infinite; }
.ra-blink-b{ animation-delay:.55s; }
@keyframes raSwing1{ from{ transform:rotate(-5deg); } to{ transform:rotate(4deg); } }
@keyframes raSwing2{ from{ transform:rotate(8deg); } to{ transform:rotate(-9deg); } }
@keyframes raFingT{ from{ transform:rotate(0); } to{ transform:rotate(-13deg); } }
@keyframes raFingB{ from{ transform:rotate(0); } to{ transform:rotate(13deg); } }
@keyframes raLed{ 0%,30%{ opacity:1; } 33.4%,100%{ opacity:.28; } }
@keyframes raFlow{ to{ stroke-dashoffset:-15; } }
@keyframes raBlink{ 50%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){
  .ra-a1,.ra-a2,.ra-fing-t,.ra-fing-b,.ra-led,.ra-flow,.ra-blink{ animation:none; }
  .ra-led{ opacity:1; }
}

/* Pestañas de nivel (Débutant 1 … Avancé) */
.tt-sch-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 30px; padding:0; }
.tt-sch-tabs button{
  font:inherit; font-size:15px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07); color:#fff;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.tt-sch-tabs button:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }
.tt-sch-tabs button.on{ background:var(--amber); border-color:var(--amber); color:var(--night); box-shadow:0 12px 24px -14px rgba(242,178,51,.9); }
.tt-sch-tabs button small{ font-size:12px; font-weight:800; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.18); }
.tt-sch-tabs button.on small{ background:rgba(10,23,48,.14); }
.tt-sch-tabs button:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.tt-paper .tt-sch-tabs button, .tt-light .tt-sch-tabs button{ border-color:var(--line); background:#fff; color:var(--navy-800); }
.tt-paper .tt-sch-tabs button:hover, .tt-light .tt-sch-tabs button:hover{ background:#F1F0FC; }
.tt-paper .tt-sch-tabs button.on, .tt-light .tt-sch-tabs button.on{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; box-shadow:none; }
.tt-paper .tt-sch-tabs button small, .tt-light .tt-sch-tabs button small{ background:#ECEAFB; color:var(--indigo-d); }
.tt-paper .tt-sch-tabs button.on small, .tt-light .tt-sch-tabs button.on small{ background:rgba(255,255,255,.2); color:#fff; }

.tt-sch-panel[hidden]{ display:none; }
.tt-sch-lead{ color:rgba(255,255,255,.86); font-size:16px; max-width:760px; margin:0 0 24px; }
.tt-paper .tt-sch-lead, .tt-light .tt-sch-lead{ color:var(--ink-soft); }
.tt-sch-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.tt-sch-grid-wide{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Tarjeta de proyecto escolar */
.tt-sch-card{ background:#fff; color:var(--ink); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(10,23,48,.08); box-shadow:0 22px 34px -26px rgba(0,0,0,.65); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.tt-sch-card:hover{ transform:translateY(-5px); box-shadow:0 30px 42px -26px rgba(0,0,0,.75); }
.tt-sch-card[hidden]{ display:none; }
.tt-sch-art{ --a:#4B40BF; --b:#7E76E0; position:relative; height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; color:#fff; background:linear-gradient(135deg,var(--a),var(--b)); overflow:hidden; }
.tt-sch-art::before{ content:""; position:absolute; right:-24px; top:-34px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.14); }
.tt-sch-art::after{ content:""; position:absolute; left:34%; bottom:-30px; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.09); }
.tt-sch-ico{ position:relative; z-index:1; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(2px); }
.tt-sch-ico svg{ width:28px; height:28px; stroke-width:1.7; }
.tt-sch-n{ position:relative; z-index:1; font:800 13px 'Space Grotesk',sans-serif; letter-spacing:.08em; padding:4px 10px; border-radius:999px; background:rgba(10,23,48,.28); }
.tt-sch-art[data-th="led"]{ --a:#F59E0B; --b:#E5484D; }
.tt-sch-art[data-th="sensor"]{ --a:#10B981; --b:#0E7C86; }
.tt-sch-art[data-th="motion"]{ --a:#4B40BF; --b:#8B83EE; }
.tt-sch-art[data-th="display"]{ --a:#2563EB; --b:#38BDF8; }
.tt-sch-art[data-th="sound"]{ --a:#E5484D; --b:#F472B6; }
.tt-sch-art[data-th="comm"]{ --a:#0EA5E9; --b:#6366F1; }
.tt-sch-art[data-th="power"]{ --a:#D97706; --b:#FACC15; }
.tt-sch-art[data-th="water"]{ --a:#0369A1; --b:#22D3EE; }
.tt-sch-art[data-th="security"]{ --a:#1E293B; --b:#6366F1; }
.tt-sch-art[data-th="home"]{ --a:#059669; --b:#84CC16; }
.tt-sch-art[data-th="robot"]{ --a:#5B21B6; --b:#F2B233; }
.tt-sch-art[data-th="code"]{ --a:#0F766E; --b:#2DD4BF; }
.tt-sch-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tt-sch-body h3{ font-size:16.5px; line-height:1.2; color:var(--navy-900); }
.tt-sch-body p{ font-size:13.2px; line-height:1.55; color:var(--ink-soft); }
.tt-sch-parts{ list-style:none; margin:auto 0 0; padding:10px 0 0; display:flex; flex-wrap:wrap; gap:5px; }
.tt-sch-parts li{ font-size:11.3px; font-weight:700; padding:3px 8px; border-radius:999px; background:#ECEAFB; color:#3A30A6; white-space:nowrap; }

/* "Voir plus de projets" */
.tt-sch-more{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; padding:18px 22px; border-radius:16px; background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35); color:#fff; }
.tt-sch-more p{ margin:0; font-size:15px; color:rgba(255,255,255,.88); }
.tt-sch-more .btn{ white-space:nowrap; }

/* Página del catálogo: buscador */
.tt-sch-tools{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:22px; }
.tt-sch-search{ position:relative; flex:1 1 280px; max-width:440px; }
.tt-sch-search svg{ position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--indigo-d); pointer-events:none; }
.tt-sch-search input{ width:100%; font:inherit; font-size:15px; padding:12px 16px 12px 42px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.tt-sch-search input:focus{ outline:3px solid rgba(75,64,191,.3); border-color:var(--indigo-d); }
.tt-sch-count{ font-weight:700; color:var(--navy-800); font-size:14.5px; }
.tt-sch-empty{ padding:30px; text-align:center; border-radius:16px; background:#fff; border:1px dashed var(--line); color:var(--ink-soft); }
.tt-sch-empty[hidden]{ display:none; }

@media (max-width:1280px){ .tt-sch-grid-wide{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1100px){ .tt-sch-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){
  .tt-sch-grid, .tt-sch-grid-wide{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .tt-sch-tabs{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding:2px 16px 8px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .tt-sch-tabs::-webkit-scrollbar{ display:none; }
  .tt-sch-tabs button{ flex:0 0 auto; scroll-snap-align:start; }
}
@media (max-width:520px){
  .tt-sch-grid, .tt-sch-grid-wide{ grid-template-columns:1fr; }
  .tt-sch-more{ flex-direction:column; align-items:flex-start; }
}
.tt-sch-more .btn svg{ width:18px; height:18px; margin-left:8px; flex:0 0 auto; }

/* Excel: enlaces de nivel sobre los libros */
.tt-xl-tabs{ margin-bottom:18px; }
.tt-xl-note{ max-width:760px; margin:0 0 30px; padding:14px 18px; border-left:4px solid var(--amber); background:rgba(255,255,255,.07); border-radius:0 12px 12px 0; color:rgba(255,255,255,.9); font-size:15.5px; }
.tt-shelf .tt-book[hidden]{ display:none; }

/* Servicios con ilustración */
.tt-services{ gap:30px 28px; }
.tt-service{ border:1px solid var(--line); border-top:1px solid var(--line); padding:0 0 22px; border-radius:18px; overflow:hidden; background:#fff; gap:10px; box-shadow:0 22px 34px -30px rgba(10,23,48,.55); }
.tt-service-img{ display:block; width:100%; height:auto; aspect-ratio:16/10; background:var(--navy-900); }
.tt-service h3, .tt-service p, .tt-service > .tt-textlink{ margin-left:22px; margin-right:22px; }
.tt-service h3{ margin-top:8px; }
.tt-service > .tt-textlink{ align-self:flex-start; }

/* =====================================================================
   Impeca Lab (laboratorio virtual)
   ===================================================================== */
.tt-pillars-3{ grid-template-columns:repeat(3,1fr); }
.tt-checks-light li{ color:#fff; }
.tt-checks-light li span{ background:var(--amber); color:var(--night); }
@media (max-width:980px){ .tt-pillars-3{ grid-template-columns:1fr; } }


/* ---- Impeca Lab: banco de pruebas (lab-engine.js + lab.js) ---- */
.tt-labsec{ background:linear-gradient(170deg,#0A1730,#10214A 60%,#16255A); color:#fff; }
.tt-labsec .tt-head h2{ color:#fff; }
.tt-labsec .tt-head p{ color:rgba(255,255,255,.8); }
.tt-head-sm{ margin-bottom:22px; }
.tt-head-sm h2{ font-size:clamp(24px,3vw,32px); }
.lab{ --lab-panel:#13224A; --lab-line:rgba(255,255,255,.14); --lab-ink:#E8EEFF; --lab-soft:#9AA8C4; color:var(--lab-ink); font-family:'Inter',sans-serif; }
.lab:not(.is-ready){ min-height:420px; }
.lab p{ text-align:left; hyphens:none; }
.lab-noscript{ padding:18px; border-radius:12px; background:rgba(229,72,77,.18); color:#FFD0D2; }
.lab :focus-visible{ outline:3px solid #FFC94D; outline-offset:2px; }
.lab select{ font:600 13px/1.2 'Inter',sans-serif; background:#0E1A38; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:7px 8px; max-width:100%; }
.lab-app{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; align-items:start; }
.lab-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.lab-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--lab-panel); border:1px solid var(--lab-line); border-radius:14px; padding:10px 12px; }
.lab-btn{ font:700 14px/1 'Inter',sans-serif; padding:10px 14px; min-height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.lab-btn:hover:not(:disabled){ background:rgba(255,255,255,.16); }
.lab-btn:disabled{ opacity:.4; cursor:not-allowed; }
.lab-run{ background:#2FB07F; border-color:#2FB07F; color:#06281C; }
.lab-run:hover:not(:disabled){ background:#3CC892; }
.lab-run.is-on{ box-shadow:0 0 0 3px rgba(47,176,127,.4); }
.lab-stop:not(:disabled){ background:#E5484D; border-color:#E5484D; color:#fff; }
.lab-stop:hover:not(:disabled){ background:#F0575C; }
.lab-status{ font-size:13px; font-weight:700; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--lab-soft); white-space:nowrap; }
.lab-status:empty{ display:none; }
.lab-status.is-run{ background:rgba(47,176,127,.2); color:#7BE3B5; }
.lab-status.is-err{ background:rgba(229,72,77,.22); color:#FFB3B5; }
.lab-speed, .lab-sound{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.lab-speed{ margin-left:auto; }
.lab-sound input{ width:18px; height:18px; accent-color:#2FB07F; }
.lab.is-dirty .lab-run::after{ content:'●'; color:#FFC94D; margin-left:2px; }
.lab-bench{ position:relative; display:flex; flex-direction:column; background-color:#F4F7FF; background-image:radial-gradient(#B9C3DC 1.2px,transparent 1.4px); background-size:16px 16px; border-radius:16px; padding:14px 12px 16px; color:#0E1A38; }
.lab-row{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.lab-row-top{ padding-bottom:50px; }
.lab-row-bottom{ padding-top:50px; }
.lab-row.is-empty{ padding:0; }
.lab-row-top.is-empty:has(.lab-lcdslot:not([hidden])){ padding-bottom:16px; }
.lab-boardwrap{ position:relative; z-index:1; }
.lab-board{ display:block; width:100%; height:auto; max-width:740px; margin:0 auto; filter:drop-shadow(0 14px 18px rgba(14,26,56,.28)); }
.lab-wires{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:3; overflow:visible; }
.lab-wire{ fill:none; stroke-width:3.2; stroke-linecap:round; opacity:.92; }
.lab-wire.is-on{ stroke-width:4.4; opacity:1; }
.lab-bench.no-wires .lab-row-top{ padding-bottom:14px; }
.lab-bench.no-wires .lab-row-bottom{ padding-top:14px; }
.lab-bench.no-wires .lab-terms{ display:none; }
.lab-card{ position:relative; width:112px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 8px 14px; background:#fff; border:1px solid #D5DDF0; border-radius:14px; box-shadow:0 8px 18px -12px rgba(14,26,56,.5); transition:box-shadow .12s, border-color .12s; }
.lab-card-rgb{ width:134px; }
.lab-card-pot, .lab-card-ldr, .lab-card-tmp{ width:144px; }
.lab-card.is-on{ border-color:#FFC94D; box-shadow:0 0 0 2px rgba(255,201,77,.5), 0 10px 22px -8px rgba(255,201,77,.7); }
.lab-art{ width:64px; height:64px; flex:0 0 auto; }
.lab-art svg{ display:block; width:100%; height:100%; overflow:visible; }
.lab-name{ font:700 11.5px/1.25 'Inter',sans-serif; color:#0E1A38; text-align:center; min-height:14px; }
.lab-pin{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:#3E5570; }
.lab-card select{ background:#F4F7FF; color:#0E1A38; border:1px solid #C5D0E6; font-size:12px; padding:3px 4px; border-radius:6px; }
.lab-x{ position:absolute; top:4px; right:4px; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:#EEF2FB; color:#6B7A99; font-size:15px; line-height:22px; cursor:pointer; }
.lab-x:hover{ background:#FFE1E2; color:#C0262B; }
.lab-terms{ position:absolute; left:0; right:0; display:flex; justify-content:space-evenly; pointer-events:none; }
.lab-card.is-top .lab-terms{ bottom:-6px; }
.lab-card.is-bottom .lab-terms{ top:-6px; }
.lab-term{ display:block; width:11px; height:11px; border-radius:50%; background:#0A1226; border:2px solid #fff; box-shadow:0 0 0 1px #C5D0E6; }
.lab-card-button .lab-art{ cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; border-radius:12px; }
.lab-card-button .lab-cap{ transform-box:fill-box; transform-origin:center; transition:transform .05s; }
.lab-card-button.is-pressed .lab-cap{ transform:scale(.86); fill:#B91C1C; }
.lab-card-button.is-pressed{ border-color:#E5484D; }
.lab-hold{ display:flex; align-items:center; gap:5px; font-size:11px; color:#3E5570; font-weight:600; }
.lab-waves{ opacity:0; }
.lab-card.is-sound .lab-waves{ opacity:1; animation:labWave .35s steps(2,jump-none) infinite; }
.lab-card.is-sound{ border-color:#FFC94D; }
@keyframes labWave{ from{ opacity:1; } to{ opacity:.25; } }
.lab-horn{ transition:transform .05s linear; }
.lab-card.is-idle .lab-horn{ opacity:.5; }
.lab-range{ display:flex; align-items:center; gap:6px; width:100%; }
.lab-range input{ flex:1; min-width:0; accent-color:#5A4FCF; }
.lab-range b{ font:700 11px 'Inter',sans-serif; min-width:36px; text-align:right; color:#3E5570; }
.lab-lcdslot{ flex:0 0 100%; display:flex; justify-content:center; }
.lab-lcdslot[hidden]{ display:none; }
.lab-lcd{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 12px; background:#0E1A38; border-radius:12px; box-shadow:0 8px 18px -10px rgba(14,26,56,.6); }
.lab-lcd-screen{ background:linear-gradient(#A9CB40,#8FB62F); border:3px solid #2B3550; border-radius:6px; padding:8px 10px; font:700 16px/1.3 'JetBrains Mono',Consolas,Menlo,monospace; letter-spacing:.12em; color:#1D2C0E; white-space:pre; }
.lab-lcd-screen span{ display:block; min-height:1.3em; }
.lab-lcd .lab-name{ color:#C9D3E6; }
.lab-lcd small{ color:#8FA0C9; font-size:10.5px; text-align:center; }
.lab-add{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; background:var(--lab-panel); border:1px solid var(--lab-line); border-radius:14px; padding:10px 12px; font-size:13px; font-weight:600; }
.lab-add label{ display:flex; align-items:center; gap:8px; }
.lab-panel{ display:flex; flex-direction:column; background:var(--lab-panel); border:1px solid var(--lab-line); border-radius:14px; overflow:hidden; }
.lab-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--lab-line); font-size:13px; }
.lab-ex{ display:flex; align-items:center; gap:8px; font-weight:600; min-width:0; }
.lab-ex select{ min-width:0; }
.lab-tools{ display:flex; gap:6px; flex:0 0 auto; }
.lab-mini{ font:700 12px/1 'Inter',sans-serif; padding:8px 11px; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.lab-mini:hover{ background:rgba(255,255,255,.16); }
.lab-confirm{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:9px 12px; background:rgba(242,178,51,.14); border-bottom:1px solid var(--lab-line); color:#FFD98A; font:600 12.5px/1.4 'Inter',sans-serif; }
.lab-confirm[hidden]{ display:none; }
.lab-confirm span{ flex:1 1 200px; }
.lab-mini-ok{ background:#2FB07F; border-color:#2FB07F; color:#06281C; }
.lab-editor{ position:relative; display:flex; height:390px; background:#0A1226; }
.lab-ln, .lab-hl, .lab-ta{ margin:0; font:13px/1.55 'JetBrains Mono',Consolas,Menlo,monospace; tab-size:2; -moz-tab-size:2; letter-spacing:0; }
.lab-ln{ flex:0 0 46px; width:46px; padding:10px 8px 10px 6px; text-align:right; overflow:hidden; color:#5C6A94; background:#0C1630; border-right:1px solid rgba(255,255,255,.08); user-select:none; -webkit-user-select:none; white-space:pre; }
.lab-ln .err{ color:#FF8A8F; font-weight:800; background:rgba(229,72,77,.22); }
.lab-code{ position:relative; flex:1; min-width:0; }
.lab-hl, .lab-ta{ position:absolute; left:0; top:0; right:0; bottom:0; padding:10px 12px; white-space:pre; border:0; }
.lab-hl{ overflow:hidden; color:#E8EEFF; pointer-events:none; }
.lab-hl code{ display:block; font:inherit; }
.lab-ta{ overflow:auto; resize:none; background:transparent; color:transparent; -webkit-text-fill-color:transparent; caret-color:#fff; outline:none; }
.lab-ta::selection{ background:rgba(106,95,224,.55); }
.t-c{ color:#6F7DA8; font-style:italic; } .t-s{ color:#FB9F7A; } .t-p{ color:#C792EA; } .t-n{ color:#FB7185; } .t-k{ color:#9A93F0; font-weight:600; } .t-u{ color:#4ADE80; } .t-f{ color:#F2B233; }
.lab-console{ height:210px; overflow:auto; padding:10px 12px; background:#0A1226; font:12.5px/1.5 'JetBrains Mono',Consolas,Menlo,monospace; color:#4ADE80; white-space:pre-wrap; word-break:break-word; }
.lab-out{ white-space:pre-wrap; }
.lab-msg{ margin:4px 0; padding:5px 9px; border-radius:7px; font:600 12.5px/1.45 'Inter',sans-serif; white-space:normal; }
.lab-msg-err{ background:rgba(229,72,77,.2); color:#FFB3B5; }
.lab-msg-warn{ background:rgba(242,178,51,.16); color:#FFD98A; }
.lab-msg-info{ color:#8FA0C9; padding-left:0; }
.lab-msg-note{ background:rgba(255,255,255,.07); color:#B7C3E3; }
.lab-msg-in{ color:#9A93F0; font-family:'JetBrains Mono',Consolas,Menlo,monospace; padding-left:0; }
.lab-serialin{ display:flex; gap:8px; padding:8px 10px; border-top:1px solid var(--lab-line); background:#0C1630; }
.lab-serialin input{ flex:1; min-width:0; font:13px 'JetBrains Mono',Consolas,Menlo,monospace; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:#0A1226; color:#fff; }
.lab-notes{ margin-top:18px; display:grid; gap:10px; }
.lab-notes p{ max-width:880px; color:rgba(255,255,255,.78); font-size:14px; }
.lab-notes .lab-legal{ color:rgba(255,255,255,.55); font-size:12.5px; }
.lab-status-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.lab-status-col{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 24px; }
.lab-status-col h3{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:19px; }
.lab-status-col h3 span{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:15px; font-weight:800; }
.lab-status-col.is-now h3 span{ background:#DDF7EC; color:#0F7A52; }
.lab-status-col.is-next h3 span{ background:#EEEAFB; color:#4B40BF; }
.lab-status-col li{ position:relative; margin:9px 0; padding-left:20px; color:var(--ink-soft); font-size:15px; line-height:1.55; text-align:justify; hyphens:auto; }
.lab-status-col li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:#2FB07F; }
.lab-status-col.is-next li::before{ background:#9A93F0; }
@media (max-width:1020px){ .lab-app{ grid-template-columns:minmax(0,1fr); } .lab-status-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  .lab-card, .lab-card-rgb, .lab-card-pot, .lab-card-ldr, .lab-card-tmp{ width:calc(50% - 6px); }
  .lab-editor{ height:330px; } .lab-console{ height:180px; }
  .lab-speed{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){ .lab-card.is-sound .lab-waves{ animation:none; } }

/* ---- Impeca Lab: vista 3D (lab-3d-*.js). Sin WebGL o con error queda la vista 2D ---- */
.lab-view{ display:inline-flex; border:1px solid rgba(255,255,255,.28); border-radius:10px; overflow:hidden; flex:0 0 auto; }
.lab-view button{ font:700 13px/1 'Inter',sans-serif; padding:10px 14px; min-height:40px; background:rgba(255,255,255,.06); color:#fff; border:0; cursor:pointer; }
.lab-view button + button{ border-left:1px solid rgba(255,255,255,.28); }
.lab-view button:hover:not(:disabled){ background:rgba(255,255,255,.16); }
.lab-view button[aria-pressed="true"]{ background:#6A5FE0; color:#fff; }
.lab-view button:disabled{ opacity:.4; cursor:not-allowed; }
.lab-stage{ display:none; position:relative; height:clamp(300px,52vw,560px); border-radius:12px; overflow:hidden; background:#F4F7FF; box-shadow:inset 0 0 0 1px #D5DDF0; }
.lab.is-3d .lab-stage{ display:block; }
.lab.is-3d .lab-boardwrap, .lab.is-3d .lab-wires, .lab.is-3d .lab-terms{ display:none; }
.lab.is-3d .lab-row{ padding:0; margin-top:12px; }
.lab.is-3d .lab-row.is-empty{ margin:0; }
.lab3d-canvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; outline:none; cursor:grab; touch-action:pan-y; }
.lab3d-canvas:active{ cursor:grabbing; }
.lab3d-canvas:focus-visible{ outline:3px solid #FFC94D; outline-offset:-3px; }
.lab3d-labels{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.lab3d-label{ position:absolute; left:0; top:0; font:700 11px/1 'Inter',sans-serif; background:rgba(14,26,56,.86); color:#fff; padding:5px 9px; border-radius:999px; white-space:nowrap; will-change:transform; transition:opacity .12s; box-shadow:0 2px 6px rgba(14,26,56,.25); }
.lab3d-tools{ position:absolute; top:8px; right:8px; z-index:3; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:calc(100% - 16px); }
.lab3d-tools button, .lab3d-tools label{ font:700 12px/1 'Inter',sans-serif; padding:8px 11px; min-height:34px; border-radius:9px; border:1px solid rgba(14,26,56,.22); background:rgba(255,255,255,.9); color:#0E1A38; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.lab3d-tools button:hover{ background:#fff; }
.lab3d-tools input{ accent-color:#5A4FCF; width:15px; height:15px; margin:0; }
.lab3d-hint{ position:absolute; left:10px; right:10px; bottom:8px; z-index:3; font:600 11.5px/1.3 'Inter',sans-serif; color:#3E5570; pointer-events:none; text-shadow:0 1px 0 rgba(255,255,255,.85); }
.lab3d-note{ position:absolute; left:10px; top:8px; z-index:3; max-width:min(52%,360px); font:600 12px/1.35 'Inter',sans-serif; background:rgba(255,236,179,.96); color:#5A4200; border-radius:9px; padding:7px 10px; }
.lab3d-note[hidden]{ display:none; }
.lab3d-loading{ position:absolute; inset:0; z-index:4; display:none; align-items:center; justify-content:center; font:700 14px 'Inter',sans-serif; color:#3E5570; background:#F4F7FF; }
.lab.is-3d-loading .lab3d-loading{ display:flex; }
@media (max-width:640px){
  .lab-stage{ height:clamp(300px,98vw,440px); }
  .lab3d-canvas{ top:42px; height:calc(100% - 42px); }
  .lab3d-labels{ top:42px; }
  .lab3d-tools{ top:6px; left:6px; right:6px; max-width:none; flex-wrap:nowrap; justify-content:space-between; gap:5px; }
  .lab3d-tools button, .lab3d-tools label{ flex:1 1 auto; justify-content:center; font-size:11px; padding:7px 6px; min-height:30px; white-space:nowrap; }
  .lab3d-hint{ display:none; }
  .lab3d-note{ top:auto; bottom:8px; max-width:calc(100% - 20px); }
}
@media (prefers-reduced-motion: reduce){ .lab3d-label{ transition:none; } }