/* Fuentes propias (Inter y Manrope, licencia SIL OFL: fonts/OFL-*.txt). Mismo sistema de diseño que ttlos.es; los estilos propios de TTLVD van al final. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Colores */
  --color-blue:#2e6da6;      /* azul principal: botones, enlaces, iconos */
  --color-sky:#43a0df;       /* azul claro: acentos y decoración (no para texto sobre blanco) */
  --color-midnight-navy:#101214;
  --color-carbon-edge:#292a2e;
  --color-slate-current:#1c2b42;
  --color-muted-indigo:#42526e;
  --color-pure-white:#ffffff;
  --color-fog-white:#f0f1f2;
  --color-ash-gray:#b7b9be;
  --color-gold:#deb159;      /* dorado de acento: confeti, subrayado, viñetas de TTLVD */
  --color-ice:#bfe3f8;       /* confeti claro (sustituye al morado) */
  --tint-blue:#ecf6fc;
  --color-blue-strong:#255d8f;  /* azul al pasar el ratón */
  --color-blue-deep:#1e4d78;    /* azul al pulsar */
  --surface-soft:#f4f7fa;      /* único fondo claro alternativo de las secciones */
  --gradient-confetti:conic-gradient(rgb(191,227,248) 170deg, rgb(222,177,89) 171deg, rgb(222,177,89) 230deg, rgb(67,160,223) 231deg, rgb(67,160,223) 360deg);

  /* Tipografía */
  --font-display:'Manrope','Charlie Display',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-text:'Inter','Charlie Text',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Formas y sombras */
  --radius-card:20px;
  --radius-button:28px;
  --radius-input:8px;
  --radius-image:5px;
  --shadow-subtle:rgba(9,30,66,.31) 0 0 1px 0, rgba(9,30,66,.25) 0 1px 1px 0;
  --page:1200px;

  /* Movimiento */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --color-danger:#c9372c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-text);font-size:16px;line-height:1.5;color:var(--color-midnight-navy);background:var(--color-pure-white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
section[id]{scroll-margin-top:72px}
.wrap{max-width:var(--page);margin:0 auto;padding:0 24px}

/* ---------- Tipografía ---------- */
.display{font-family:var(--font-display);font-weight:500;line-height:1;letter-spacing:.012em}
h1.display{font-size:clamp(40px,6.4vw,80px)}
h2.display{font-size:clamp(32px,4vw,48px);line-height:1.14}
h3.display{font-size:24px;line-height:1.25;font-weight:700}
h1,h2,h3,.display,.sub-title{text-wrap:balance}
p,li,dd,.sub,.lead-c{text-wrap:pretty}
.eyebrow{font-size:13px;line-height:1.29;font-weight:500}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:var(--font-text);font-size:16px;font-weight:500;line-height:1.25;padding:10px 22px;border-radius:var(--radius-button);border:0;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;user-select:none;transition:transform 160ms var(--ease-out),background-color 180ms ease,border-color 180ms ease,color 180ms ease,box-shadow 240ms var(--ease-out)}
/* Pulsar: respuesta inmediata (90 ms); soltar vuelve con la transición normal, algo más lenta */
.btn:active{transform:scale(.97);transition-duration:90ms}
.btn-sm{min-height:36px;padding:7px 18px;font-size:14px}
.btn-primary{background:var(--color-blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(9,30,66,.2)}
.btn-primary:active{background:var(--color-blue-deep);box-shadow:inset 0 1px 2px rgba(9,30,66,.3)}
.btn-text{background:transparent;color:inherit;padding-left:8px;padding-right:8px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:transform 160ms var(--ease-out),text-decoration-color 180ms ease,opacity 180ms ease}
.btn-text [aria-hidden]{display:inline-block;transition:transform 220ms var(--ease-out)}
.btn-text:active{opacity:.75}
.btn-ghost{background:transparent;border:1px solid currentColor;color:inherit}
.btn-ghost:active{background:rgba(9,30,66,.1)}
.on-dark .btn-ghost:active{background:rgba(255,255,255,.14)}
.btn[aria-busy="true"]{filter:saturate(.6);cursor:progress}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--color-blue-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -6px rgba(9,30,66,.45)}
  .btn-primary:hover:active{background:var(--color-blue-deep);box-shadow:inset 0 1px 2px rgba(9,30,66,.3)}
  .btn-text:hover{text-decoration-color:currentColor}
  .btn-text:hover [aria-hidden]{transform:translateX(3px)}
  .btn-ghost:hover{background:rgba(9,30,66,.05)}
  .on-dark .btn-ghost:hover{background:rgba(255,255,255,.08)}
  .btn-ghost:hover:active{background:rgba(9,30,66,.1)}
}
.btn-row{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px}
:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px}
::selection{background:var(--color-ice);color:var(--color-midnight-navy)}
.on-dark ::selection,footer ::selection{background:var(--color-blue);color:#fff}
input,select,textarea{accent-color:var(--color-blue);caret-color:var(--color-blue)}
.on-dark :focus-visible{outline-color:#fff}

/* ---------- Info badge ---------- */
.badge{display:inline-block;border-radius:10000px;padding:4px 12px;font-size:13px;font-weight:500;line-height:1.29;background:var(--color-fog-white);color:var(--color-muted-indigo)}
.badge.blue{background:var(--tint-blue);color:var(--color-blue)}

/* ---------- Navegación ---------- */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--color-fog-white);height:56px}
.nav .wrap{height:100%;display:flex;align-items:center;gap:8px}
.nav .logo img{height:28px;width:auto}
.nav ul{list-style:none;display:flex;gap:0;margin-left:24px;margin-right:auto}
.nav ul a{position:relative;display:block;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.25;text-decoration:none;color:var(--color-muted-indigo);border-radius:var(--radius-image)}
@media (hover:hover) and (pointer:fine){.nav ul a:not(.btn):hover{background:var(--color-fog-white);color:var(--color-midnight-navy)}}
.nav ul a:not(.btn){transition:background-color 150ms ease,color 150ms ease}
.nav ul a.active{color:var(--color-blue)}
.nav ul li:not(.m-actions) a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:-11px;height:2px;border-radius:2px;background:currentColor}
.nav .right{margin-left:16px;display:flex;align-items:center;gap:16px}

/* ---------- Selector de idioma ---------- */
.lang{display:inline-flex;align-items:center;padding:2px;border-radius:999px;background:var(--color-fog-white);font-size:13px;font-weight:500;line-height:1}
.lang a,.lang span{transition:color 150ms ease;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:28px;padding:0 8px;border-radius:999px;text-decoration:none;color:var(--color-muted-indigo)}
.lang [aria-current]{background:#fff;color:var(--color-midnight-navy);box-shadow:var(--shadow-subtle)}
@media (hover:hover) and (pointer:fine){.lang a:hover{color:var(--color-midnight-navy)}}
.nav ul .m-actions{display:none}
.nav ul a.btn{display:flex;text-align:center}
.nav ul a.btn-primary{color:#fff;background:var(--color-blue)}
.nav ul a.btn-ghost{color:var(--color-midnight-navy);background:transparent;border:1px solid var(--color-midnight-navy)}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;color:var(--color-midnight-navy);border-radius:var(--radius-input);-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out)}
.burger:active{transform:scale(.94)}

/* ---------- Hero oscuro + confeti ---------- */
.hero{position:relative;background:var(--color-midnight-navy);color:#fff;overflow:hidden;padding:96px 0 104px}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;max-width:1360px;padding:0 clamp(24px,10vw,150px)}
.hero p.lead{margin-top:24px;font-size:20px;line-height:1.4;max-width:560px;color:#fff}
.hero .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start}
.frame{background:var(--gradient-confetti);padding:10px;border-radius:var(--radius-card)}
.frame-inner{background:var(--color-midnight-navy);border-radius:12px;padding:40px 32px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.frame-inner img{width:min(260px,70%);height:auto}
.frame-inner p{font-size:16px;line-height:1.5;color:#fff;max-width:340px}
/* Fragmentos de confeti: formas planas, sin degradado, sin sombra */
.confetti{position:absolute;z-index:1;pointer-events:none}
.c1{left:-40px;top:-30px;width:150px;height:210px;background:var(--color-ice);clip-path:polygon(0 0,100% 6%,78% 38%,92% 70%,40% 100%,0 86%)}
.c2{left:0;top:150px;width:90px;height:130px;background:var(--color-gold);clip-path:polygon(0 8%,70% 0,100% 40%,56% 100%,0 78%)}
.c3{left:-20px;bottom:-30px;width:170px;height:150px;background:var(--color-blue);clip-path:polygon(0 24%,60% 0,100% 44%,74% 100%,0 100%)}
.c4{left:110px;bottom:-10px;width:80px;height:70px;background:var(--color-sky);clip-path:polygon(18% 0,100% 30%,70% 100%,0 80%)}
.c5{right:-30px;top:-20px;width:170px;height:150px;background:var(--color-gold);clip-path:polygon(24% 0,100% 0,100% 100%,0 70%)}
.c6{right:0;top:120px;width:100px;height:190px;background:var(--color-sky);clip-path:polygon(40% 0,100% 10%,100% 100%,0 86%,24% 40%)}
.c7{right:-20px;bottom:-30px;width:190px;height:140px;background:var(--color-ice);clip-path:polygon(30% 0,100% 20%,100% 100%,0 100%)}
.c8{right:140px;bottom:-14px;width:90px;height:74px;background:var(--color-sky);clip-path:polygon(0 30%,80% 0,100% 80%,20% 100%)}

/* ---------- Secciones ---------- */
.section{padding:80px 0}
.center{text-align:center}
.sub{max-width:600px;margin:16px auto 0;color:var(--color-muted-indigo)}
/* Subrayado amarillo a mano */
.scribble{position:relative;display:inline-block;white-space:nowrap}
.scribble::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.22em;height:.3em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C30 3 52 12 84 7s58-6 84-2c10 1 22 3 30 5' fill='none' stroke='%23deb159' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* Tarjeta de producto sobre azul */
.showcase{background:var(--color-blue);padding:72px 0 40px;overflow:hidden}
.laptop{position:relative;max-width:560px;margin:0 auto;perspective:2400px;perspective-origin:50% 0}
.lt-lid{position:relative;padding:2.4% 2.4% 3%;background:#16181b;border-radius:18px 18px 4px 4px;box-shadow:inset 0 0 0 1.5px #2c2f35;transform-origin:50% 100%}
.lt-cam{position:absolute;top:1%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2f3338}
.lt-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#05070a}
.lt-screen img{display:block;width:100%;height:100%;object-fit:cover}
.lt-glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.09) 0 32%,transparent 32.2%);pointer-events:none}
.lt-base{position:relative;width:118%;margin-left:-9%;height:clamp(12px,2vw,20px);background:linear-gradient(180deg,#eceef1 0%,#c7cbd1 55%,#9da2aa 100%);border-radius:2px 2px 16px 16px / 2px 2px 100% 100%}
.lt-notch{position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);background:linear-gradient(#a3a8b0,#c6cad0);border-radius:0 0 10px 10px}
.laptop::after{content:"";display:block;height:28px;margin:0 -8%;background:radial-gradient(50% 100% at 50% 0,rgba(9,30,66,.35),transparent 70%)}

/* Qué nos diferencia */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px;align-items:start}
.two p{margin-bottom:16px}
.two p:last-child{margin-bottom:0}
.two strong{font-weight:700}
.logos{background:#fff;margin-top:24px;border:1px solid var(--color-fog-white);border-radius:var(--radius-card);padding:32px 24px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 40px;background:#fff}
.logos img{height:44px;width:auto;max-width:130px;object-fit:contain}

/* Banda lavanda */
.band{padding:80px 0;text-align:center}
.soft{background:var(--surface-soft)}
.band h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.2;max-width:820px;margin:0 auto}
.band p{max-width:680px;margin:16px auto 0}
.band .chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.band .chips .badge{background:var(--tint-blue);color:var(--color-midnight-navy)}

/* Tarjetas */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.card{background:#fff;border:1px solid var(--color-fog-white);border-radius:var(--radius-card);padding:24px;box-shadow:var(--shadow-subtle)}
.card .ico{width:48px;height:48px;border-radius:50%;background:var(--tint-blue);color:var(--color-blue);display:grid;place-items:center;margin-bottom:20px}
.card .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--font-display);font-size:20px;line-height:1.4;font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.card p{color:var(--color-carbon-edge)}
.card.wide{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr 1.2fr;gap:24px 32px;align-items:start}
.card.wide .ico{margin-bottom:0}
.card.wide ul{list-style:none;display:grid;gap:12px}
.card.wide li{position:relative;padding-left:24px;font-size:16px}
.card.wide li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--color-blue)}

/* SGTTLOS */
.sg{background:#fff}
.sg-logo{margin:0;line-height:0}
.sg-logo img{display:block;width:clamp(200px,24vw,280px);height:auto;margin:0 auto}
.sg-intro{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center;margin-top:56px}
.sg-text > p{font-size:17px;line-height:1.6;color:var(--color-carbon-edge);margin-bottom:16px}
.sg-text strong{font-weight:700;color:var(--color-midnight-navy)}
.sg-for-title{margin:28px 0 12px;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3}
.sg-for{list-style:none;display:grid;gap:10px}
.sg-for li{position:relative;padding-left:22px;line-height:1.45}
.sg-for li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--color-blue)}
.sg-shot{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(9,30,66,.08),0 24px 48px -16px rgba(9,30,66,.28)}
.sg-bar{display:flex;justify-content:flex-end;gap:6px;padding:10px 14px;background:#f4f6f8;border-bottom:1px solid var(--color-fog-white)}
.sg-bar span{width:10px;height:10px;border-radius:50%;background:#d3d7dd}
.sg-shot img{display:block;width:100%;height:auto}
.sg-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px;margin-top:72px}
.sg-grid li{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
.sg-grid .ico{width:36px;height:36px;border-radius:10px;background:#fff;color:var(--color-blue);display:grid;place-items:center;box-shadow:var(--shadow-subtle)}
.sg-grid svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sg-grid h3{font-family:var(--font-display);font-size:18px;line-height:1.3;font-weight:700}
.sg-grid p{grid-column:1/-1;margin-top:10px;font-size:15px;line-height:1.5;color:var(--color-carbon-edge)}
.sg .btn-row{margin-top:56px}

/* Sección oscura invertida */
.dark{background:var(--color-midnight-navy);color:#fff;padding:80px 0}
.dark .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dark h2{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,3.6vw,48px);line-height:1.14;letter-spacing:.012em}
.dark p{margin-top:16px;color:#fff}
.dark ul{list-style:none;margin:24px 0 32px;display:grid;gap:16px}
.dark .btn-row{justify-content:center}
.dark li{position:relative;padding-left:28px}
.dark li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:3px;background:var(--color-gold);transform:rotate(45deg)}
.dark .visual{background:var(--gradient-confetti);padding:10px;border-radius:var(--radius-card)}
.dark .visual > div{background:var(--color-midnight-navy);border-radius:12px;padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:20px}
.dark .visual img{width:min(260px,70%);height:auto}
.dark .visual .plus{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--color-gold)}
.dark .visual .tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.dark .visual .tags .badge{background:rgba(255,255,255,.12);color:#fff}

/* Recursos */
.docs{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.band .btn-ghost{color:var(--color-midnight-navy)}

/* Empresa */
.lead-c{max-width:660px;margin:24px auto 0;text-align:center;font-size:18px;line-height:1.55;color:var(--color-carbon-edge)}
.lead-c strong{font-weight:700}
/* Escritorio: cada punto centrado en su columna; la línea va del primer punto al último, así el conjunto queda simétrico */
.timeline{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;--col:calc((100% - 96px) / 5)}
.timeline::before{content:"";position:absolute;left:calc(var(--col) / 2);right:calc(var(--col) / 2);top:0;height:2px;background:var(--color-midnight-navy);transform-origin:left center}
.timeline .t{position:relative;padding-top:24px;text-align:center}
.timeline .t::before{content:"";position:absolute;left:calc(50% - 7px);top:-6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--color-blue);box-sizing:border-box}
.timeline .y{font-family:var(--font-display);font-size:32px;font-weight:500;line-height:1.2}
.timeline p{margin-top:8px;font-size:14px;line-height:1.4;color:var(--color-carbon-edge)}
/* Último punto: el año actual, sin descripción; punto relleno para marcar el presente */
.timeline .now::before{background:var(--color-blue)}
.timeline .now .y{color:var(--color-blue)}
.sub-title{margin-top:64px;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1.25;letter-spacing:.02em}
.clients{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;--per:7}
.client{flex:0 0 calc((100% - (var(--per) - 1) * 16px) / var(--per))}
.client{background:var(--tint-blue);border-radius:var(--radius-card);padding:24px 12px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-size:14px;font-weight:500;line-height:1.3}
.client .ic{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--color-blue);display:grid;place-items:center}
.client svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Contacto */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:stretch}
.contact > *{min-width:0}
.nw{white-space:nowrap}
.addr{background:#fff;border:1px solid var(--color-fog-white);border-radius:var(--radius-card);padding:32px;box-shadow:var(--shadow-subtle);display:flex;flex-direction:column;justify-content:center}
.addr > img{align-self:flex-start;height:26px;width:auto;max-width:100%;margin-bottom:28px}
.info{list-style:none;display:grid;gap:20px}
.info li{display:flex;gap:16px;align-items:flex-start}
.info .ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--tint-blue);color:var(--color-blue);display:grid;place-items:center}
.info svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.info address,.info a{font-style:normal;align-self:center;font-size:16px;line-height:1.4}
.info a{color:var(--color-blue);text-decoration:none;font-weight:500}
.info a:hover{text-decoration:underline}
.map{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-fog-white);min-height:340px;background:#fff}
.map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.map-ph{height:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 24px;text-align:center;background:#fff}
.map-pin{width:56px;height:56px;border-radius:50%;background:var(--tint-blue);color:var(--color-blue);display:grid;place-items:center}
.map-pin svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.map-note{max-width:340px;font-size:13px;line-height:1.45;color:var(--color-muted-indigo)}
.map-note a{color:var(--color-blue);white-space:nowrap}
form{margin:24px 0 0;background:#fff;border:1px solid var(--color-fog-white);border-radius:var(--radius-card);padding:32px;box-shadow:var(--shadow-subtle);display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.row.r3{grid-template-columns:repeat(3,1fr)}
.row.r4{grid-template-columns:repeat(4,1fr)}
label{display:block;font-size:14px;font-weight:500;color:var(--color-muted-indigo);margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--color-midnight-navy);background:#fff;border:1px solid var(--color-carbon-edge);border-radius:var(--radius-input);padding:10px 12px}
textarea{min-height:140px;resize:vertical}
input,select{height:46px}
input::placeholder{color:#6b7079}
input,select,textarea{transition:border-color 150ms ease,box-shadow 150ms ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-blue);box-shadow:0 0 0 3px rgba(46,109,166,.25)}
[aria-invalid="true"]{border-color:var(--color-danger)}
[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px rgba(201,55,44,.2)}
.err{display:block;margin-top:6px;font-size:13px;line-height:1.35;font-weight:500;color:var(--color-danger)}
.err:empty{display:none}
.hint{font-size:13px;color:var(--color-muted-indigo);text-align:center}
/* Información básica de protección de datos (primera capa) */
.privacy{border-top:1px solid var(--color-fog-white);padding-top:10px;font-size:13px;line-height:1.45;color:var(--color-muted-indigo)}
.privacy summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-weight:700;color:var(--color-midnight-navy);cursor:pointer;list-style:none;border-radius:4px;-webkit-tap-highlight-color:transparent}
.privacy summary::-webkit-details-marker{display:none}
.privacy summary::after{content:"";width:7px;height:7px;margin:0 0 3px 4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform 200ms var(--ease-out)}
.privacy details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
@media (hover:hover) and (pointer:fine){.privacy summary:hover{color:var(--color-blue)}}
.privacy summary:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px}
.privacy details[open] dl{margin:6px 0 10px;animation:privacy-in 200ms var(--ease-out)}
@keyframes privacy-in{from{opacity:0;transform:translateY(-4px)}}
.privacy dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px}
.privacy dl > div{display:contents}
.privacy dt{font-weight:500;color:var(--color-midnight-navy)}
.privacy a{color:var(--color-blue)}
.privacy-more{margin-top:4px}
.status{font-size:14px;font-weight:500;text-align:center;color:var(--color-midnight-navy)}
.status:empty{display:none}
.status.is-error{color:var(--color-danger)}
.status.is-ok{color:var(--color-blue)}
/* Campo trampa antispam del formulario de WordPress */
.hp{position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Barra de administración de WordPress (usuarios con sesión iniciada) */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
@media (max-width:600px){.admin-bar .nav{top:0}}
/* Páginas genéricas de WordPress (entradas u otras páginas sin plantilla ttlOS) */
.generic{padding:64px 0 96px}
.generic h1{font-family:var(--font-display);font-size:clamp(32px,4vw,48px);line-height:1.15;font-weight:500;margin-bottom:24px}

/* Pie */
footer{background:var(--color-midnight-navy);color:#fff;padding:40px 0 20px}
footer .fgrid{display:grid;grid-template-columns:1.1fr 1.4fr 1.2fr;gap:32px;align-items:start}
footer .brand{display:flex;flex-direction:column;align-items:center;width:max-content}
footer .brand img.logo{width:90px;height:auto}
footer .by{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--color-ash-gray)}
footer .by img{height:20px;width:auto}
footer ul.cols{list-style:none;columns:2;column-gap:32px}
footer ul.cols li{margin-bottom:8px;break-inside:avoid}
footer .fcontact{display:grid;gap:8px;justify-items:start}
footer .social{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
footer .social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--color-ash-gray);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:color 160ms ease,background-color 160ms ease,box-shadow 160ms ease,transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){footer .social a:hover{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}}
footer .social a:active{transform:scale(.94);background:rgba(255,255,255,.14);transition-duration:90ms}
footer .social svg{display:block}
footer a{text-decoration:none;font-size:14px}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .fcerts{margin-top:36px}
footer .fcerts img{display:block;width:100%;max-width:1040px;height:auto;margin:0 auto;opacity:.9}
footer .bottom{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:var(--color-ash-gray);text-align:center}

/* ---------- Cómo funciona ---------- */
.flow-section{padding-bottom:16px}
.flow{--art-h:168px;margin-top:48px;display:grid;grid-template-columns:1fr 72px 1fr 72px 1fr;align-items:start}
.flow-step{text-align:center}
.flow-art{height:var(--art-h);border-radius:var(--radius-card);background:var(--tint-blue);display:grid;place-items:center;padding:16px}
.flow-art svg{width:100%;max-width:220px;height:auto;overflow:visible}
.flow-num{display:inline-grid;place-items:center;width:28px;height:28px;margin-top:20px;border-radius:50%;background:var(--color-blue);color:#fff;font-size:14px;font-weight:700}
.flow-step h3{margin-top:10px;font-family:var(--font-display);font-size:20px;line-height:1.3;font-weight:700}
.flow-step p{max-width:300px;margin:6px auto 0;color:var(--color-carbon-edge)}
.flow-link{position:relative;height:var(--art-h);display:flex;align-items:center}
.flow-line{display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--color-blue) 0 6px,transparent 6px 12px)}
.flow-packet{position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--color-sky);box-shadow:0 0 0 4px rgba(67,160,223,.3);opacity:0}

/* Dibujo */
.flow svg .f-bezel{fill:var(--color-midnight-navy)}
.flow svg .f-screen-dark{fill:#1d2125}
.flow svg .f-screen-light{fill:#fff}
.flow svg .f-taskbar{fill:var(--color-fog-white)}
.flow svg .f-track{fill:rgba(255,255,255,.14)}
.flow svg .f-bar{fill:#fff}
.flow svg .f-stroke{fill:none;stroke:var(--color-midnight-navy);stroke-width:4;stroke-linecap:round}
.flow svg .f-soft{stroke:var(--color-ash-gray);stroke-width:3}
.flow svg .f-box{fill:#fff;stroke:var(--color-midnight-navy);stroke-width:2.5}
.flow svg .f-led-on{fill:var(--color-sky)}
.flow svg .f-led{fill:var(--color-sky)}
.flow svg .f-window{fill:var(--tint-blue);stroke:var(--color-sky);stroke-width:1.5}
.flow svg .f-titlebar{fill:var(--color-blue)}
.flow svg .f-lock-bg{fill:var(--color-blue)}
.flow svg .f-lock-body{fill:#fff}
.flow svg .f-lock-shackle{fill:none;stroke:#fff;stroke-width:2.2}
.flow svg .f-boot,.flow svg .f-bar,.flow svg .f-win,.flow svg .f-lock,.flow svg .f-led{transform-box:fill-box;transform-origin:center}
.flow svg .f-bar{transform-origin:left center}

/* ---------- Animaciones al entrar en pantalla ([data-anim]) ----------
   El estado inicial solo se aplica si JS va a reproducirlas (.js-anim). Sin JS se ve todo en su estado final.
   ttlos.js añade .is-playing al entrar en pantalla y la quita al volver arriba (reinicio) para repetirla. */
[data-anim].is-resetting,[data-anim].is-resetting *,[data-anim].is-resetting::before,[data-anim].is-resetting *::before,[data-anim].is-resetting *::after{transition:none !important;animation:none !important}

/* Portátil: sube, abre la tapa y se enciende la pantalla */
.js-anim .showcase:not(.is-playing) .laptop{opacity:0;transform:translateY(24px)}
.js-anim .showcase:not(.is-playing) .lt-lid{transform:rotateX(-90deg)}
.js-anim .showcase:not(.is-playing) .lt-screen img{opacity:0;transform:scale(1.04)}
.js-anim .showcase:not(.is-playing) .lt-glare{opacity:0}
.showcase.is-playing .laptop{transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out)}
.showcase.is-playing .lt-lid{transition:transform 1000ms cubic-bezier(0.32,0.72,0,1) 150ms}
.showcase.is-playing .lt-screen img{transition:opacity 600ms var(--ease-out) 750ms,transform 800ms var(--ease-out) 750ms}
.showcase.is-playing .lt-glare{transition:opacity 500ms ease 650ms}

/* Cómo funciona: cada paso entra cuando le llega la conexión del anterior */
.flow .s1{--d:0ms}
.flow .s2{--d:1150ms}
.flow .s3{--d:2300ms}
.flow .l1{--d:650ms}
.flow .l2{--d:1800ms}
.flow svg .f-boot,.flow svg .f-bar,.flow svg .f-win,.flow svg .f-lock,.flow svg .f-led{transform-box:fill-box;transform-origin:center}
.flow svg .f-bar{transform-origin:left center}

.js-anim .flow:not(.is-playing) .flow-art{clip-path:inset(0 100% 0 0 round var(--radius-card))}
.js-anim .flow:not(.is-playing) .flow-art svg{opacity:0;transform:translateX(-14px)}
.js-anim .flow:not(.is-playing) .flow-num{opacity:0;transform:scale(.6)}
.js-anim .flow:not(.is-playing) .flow-step h3,.js-anim .flow:not(.is-playing) .flow-step p{opacity:0;transform:translateY(6px)}
.js-anim .flow:not(.is-playing) .flow-line{clip-path:inset(0 100% 0 0)}
.js-anim .flow:not(.is-playing) svg .f-boot{opacity:0;transform:scale(.92)}
.js-anim .flow:not(.is-playing) svg .f-bar{transform:scaleX(0)}
.js-anim .flow:not(.is-playing) svg .f-led{fill:var(--color-ash-gray)}
.js-anim .flow:not(.is-playing) svg .f-win{opacity:0;transform:translateY(6px) scale(.96)}
.js-anim .flow:not(.is-playing) svg .f-lock{opacity:0;transform:scale(.6)}

.flow-art{clip-path:inset(0 0 0 0 round var(--radius-card))}
.flow-line{clip-path:inset(0 0 0 0)}
.flow.is-playing .flow-art{transition:clip-path 650ms cubic-bezier(0.77,0,0.175,1) var(--d)}
.flow.is-playing .flow-art svg{transition:opacity 450ms var(--ease-out) calc(var(--d) + 200ms),transform 600ms var(--ease-out) calc(var(--d) + 200ms)}
.flow.is-playing .flow-num{transition:opacity 250ms var(--ease-out) calc(var(--d) + 350ms),transform 400ms var(--ease-out) calc(var(--d) + 350ms)}
.flow.is-playing .flow-step h3{transition:opacity 400ms var(--ease-out) calc(var(--d) + 420ms),transform 400ms var(--ease-out) calc(var(--d) + 420ms)}
.flow.is-playing .flow-step p{transition:opacity 400ms var(--ease-out) calc(var(--d) + 480ms),transform 400ms var(--ease-out) calc(var(--d) + 480ms)}
.flow.is-playing .flow-line{transition:clip-path 500ms cubic-bezier(0.77,0,0.175,1) var(--d)}
.flow.is-playing .flow-packet{animation:flow-packet 500ms cubic-bezier(0.77,0,0.175,1) var(--d) both}
.flow.is-playing svg .f-boot{transition:opacity 300ms var(--ease-out) 300ms,transform 300ms var(--ease-out) 300ms}
.flow.is-playing svg .f-bar{transition:transform 600ms cubic-bezier(0.77,0,0.175,1) 450ms}
.flow.is-playing svg .f-led{transition:fill 150ms ease}
.flow.is-playing svg .f-led1{transition-delay:calc(var(--d) + 300ms)}
.flow.is-playing svg .f-led2{transition-delay:calc(var(--d) + 380ms)}
.flow.is-playing svg .f-led3{transition-delay:calc(var(--d) + 460ms)}
.flow.is-playing svg .f-win{transition:opacity 300ms var(--ease-out),transform 350ms var(--ease-out)}
.flow.is-playing svg .f-win1{transition-delay:calc(var(--d) + 300ms)}
.flow.is-playing svg .f-win2{transition-delay:calc(var(--d) + 380ms)}
.flow.is-playing svg .f-lock{transition:opacity 200ms var(--ease-out) calc(var(--d) + 650ms),transform 400ms var(--ease-out) calc(var(--d) + 650ms)}
@keyframes flow-packet{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(62px)}}
/* Anillo que indica "este paso está ocurriendo ahora" y se desvanece */

/* Fechas de Empresa: la línea del tiempo se dibuja y cada hito aparece cuando la línea lo alcanza */
.timeline .t:nth-child(1){--d:100ms}
.timeline .t:nth-child(2){--d:600ms}
.timeline .t:nth-child(3){--d:1100ms}
.timeline .t:nth-child(4){--d:1600ms}
.timeline .t:nth-child(5){--d:2100ms}
.js-anim .timeline:not(.is-playing)::before{transform:scaleX(0)}
.js-anim .timeline:not(.is-playing) .t{opacity:0;transform:translateY(10px)}
.js-anim .timeline:not(.is-playing) .t::before{transform:scale(0)}
.timeline.is-playing::before{transition:transform 2000ms linear}
.timeline.is-playing .t{transition:opacity 700ms var(--ease-out) var(--d),transform 700ms var(--ease-out) var(--d)}
.timeline.is-playing .t::before{transition:transform 450ms var(--ease-out) var(--d)}

/* Movimiento reducido: mismas secuencias, solo con fundidos (sin giros, desplazamientos, escalas ni desenfoque) */
@media (prefers-reduced-motion:reduce){
  /* Portátil: versión suave. Aparece con un fundido y la tapa termina de abrirse con un giro corto y lento */
  .js-anim .showcase:not(.is-playing) .laptop,.js-anim .showcase:not(.is-playing) .lt-screen img{transform:none}
  .js-anim .showcase:not(.is-playing) .lt-lid{transform:rotateX(-40deg)}
  .showcase.is-playing .laptop{transition:opacity 600ms ease}
  .showcase.is-playing .lt-lid{transition:transform 1200ms var(--ease-out) 100ms}
  .showcase.is-playing .lt-screen img{transition:opacity 700ms ease 700ms}
  .js-anim .flow:not(.is-playing) .flow-art{clip-path:none;opacity:0}
  .flow.is-playing .flow-art{transition:opacity 400ms ease var(--d)}
  .js-anim .flow:not(.is-playing) .flow-art svg,.js-anim .flow:not(.is-playing) .flow-num,.js-anim .flow:not(.is-playing) .flow-step h3,.js-anim .flow:not(.is-playing) .flow-step p{transform:none}
  .js-anim .flow:not(.is-playing) .flow-line{clip-path:none;opacity:0}
  .flow.is-playing .flow-line{transition:opacity 300ms ease var(--d)}
  .flow-packet{display:none}
  .js-anim .flow:not(.is-playing) svg .f-boot,.js-anim .flow:not(.is-playing) svg .f-win,.js-anim .flow:not(.is-playing) svg .f-lock{transform:none}
  .js-anim .flow:not(.is-playing) svg .f-bar{transform:none;opacity:0}
  .flow.is-playing svg .f-bar{transition:opacity 300ms ease 450ms}
  .js-anim .timeline:not(.is-playing)::before{transform:none;opacity:0}
  .timeline.is-playing::before{transition:opacity 900ms ease}
  .js-anim .timeline:not(.is-playing) .t,.js-anim .timeline:not(.is-playing) .t::before{transform:none}
}

/* ---------- Páginas legales ---------- */
.legal-hero{position:relative;overflow:hidden;background:var(--color-midnight-navy);color:#fff;padding:64px 0 56px}
.legal-hero .wrap{position:relative;z-index:2}
.legal-hero .c1{left:auto;right:-40px;top:-60px;width:120px;height:170px}
.legal-hero .c4{left:auto;right:70px;bottom:-24px;width:70px;height:60px}
.crumbs{font-size:14px;color:var(--color-ash-gray)}
.crumbs a{color:#fff;text-underline-offset:3px}
.legal-hero h1{margin-top:12px;max-width:820px;font-size:clamp(32px,4.4vw,52px);line-height:1.1}
.legal-hero p{margin-top:16px;max-width:640px;color:var(--color-ash-gray)}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start;padding-top:56px;padding-bottom:96px}
.toc{position:sticky;top:80px}
.toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted-indigo);pointer-events:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary svg{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.toc ol{list-style:none;display:grid;border-left:1px solid var(--color-fog-white)}
.toc a{display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--color-muted-indigo);text-decoration:none}
.toc a.active{color:var(--color-blue);border-left-color:var(--color-blue)}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--color-midnight-navy)}}
.prose{max-width:68ch;font-size:17px;line-height:1.7;color:var(--color-carbon-edge)}
.prose h2{margin:56px 0 16px;font-family:var(--font-display);font-size:26px;line-height:1.25;font-weight:700;letter-spacing:.01em;color:var(--color-midnight-navy);scroll-margin-top:80px}
.prose h2:first-of-type{margin-top:0}
.prose p + p{margin-top:16px}
.prose a{color:var(--color-blue);text-underline-offset:3px;overflow-wrap:anywhere}
.prose strong{color:var(--color-midnight-navy);font-weight:600}
.note{margin-bottom:40px;padding:16px 20px;border-radius:12px;background:var(--tint-blue);font-size:15px;line-height:1.5;color:var(--color-slate-current)}
/* Botón flotante «Volver arriba» (lo crea ttlos.js) */
.back-top{position:fixed;right:24px;bottom:24px;z-index:40;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--color-blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -8px rgba(9,30,66,.45);opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;-webkit-tap-highlight-color:transparent;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),filter 150ms ease}
.back-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.back-top.is-visible:active{transform:scale(.94);background:var(--color-blue-deep);transition-duration:90ms}
.back-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.back-top:focus-visible{outline:3px solid var(--color-sky);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.back-top:hover{background:var(--color-blue-strong)}}
@media (max-width:760px){.back-top{right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.back-top,.back-top.is-visible:active{transform:none}}
.to-top{display:inline-flex;margin-top:56px;font-size:15px;font-weight:500;color:var(--color-blue);text-decoration:none}
@media (hover:hover) and (pointer:fine){.to-top:hover{text-decoration:underline;text-underline-offset:4px}}

/* ---------- Responsive ---------- */
/* Menú desplegable en móvil y tablet: la barra completa necesita unos 1000 px */
@media (max-width:1023px){
  .nav .logo{margin-right:auto}
  .burger{display:block;margin-left:8px;order:2}
  .lang{order:1}
  .lang a,.lang span{height:36px;min-width:40px}
  .nav .right{display:none}
  .nav ul{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;margin:0;background:#fff;border-bottom:1px solid var(--color-fog-white);padding:4px max(24px,calc(50% - 360px)) 20px;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;box-shadow:rgba(9,30,66,.25) 0 12px 16px -8px}
  .nav ul.open{display:flex;animation:menu-in 200ms var(--ease-out)}
  .nav ul li + li{border-top:1px solid var(--color-fog-white)}
  .nav ul .m-actions{display:flex;gap:12px;padding-top:20px;border-top:0}
  .nav ul .m-actions a.btn{flex:1;padding:12px 16px;font-size:16px;border-radius:var(--radius-button)}
  .nav ul a{padding:16px 4px;font-size:16px;border-radius:0}
  .nav ul a:hover{background:transparent}
  .nav ul a{color:var(--color-midnight-navy)}
  .nav ul li:not(.m-actions) a.active::after{display:none}
  .nav ul a.active{box-shadow:inset 3px 0 0 var(--color-blue);padding-left:14px}
}
@media (max-width:980px){
  .hero .wrap,.dark .wrap,.two{grid-template-columns:1fr}
  .hero{padding:104px 0 96px}
  .hero .wrap{padding:0 32px;text-align:center;gap:48px}
  .hero p.lead{margin-left:auto;margin-right:auto;max-width:640px}
  .hero .actions{justify-content:center}
  .c2,.c4,.c6,.c8{display:none}
  .c1{width:80px;height:110px}.c5{width:100px;height:90px}
  .c3{width:100px;height:90px}.c7{width:110px;height:80px}
  .grid3{grid-template-columns:1fr 1fr}
  .card.wide{grid-template-columns:auto 1fr}
  .card.wide ul{grid-column:1/-1}
  .timeline{grid-template-columns:1fr;gap:28px;padding-left:32px;max-width:520px;margin-left:auto;margin-right:auto}
  .timeline::before{left:6px;right:auto;top:6px;bottom:25px;width:2px;height:auto;transform-origin:center top}
  .js-anim .timeline:not(.is-playing)::before{transform:scaleY(0)}
  .timeline .t{padding-top:0;text-align:left}
  .timeline .t::before{left:-32px;top:6px}
  .clients{--per:4}
  .row.r4{grid-template-columns:1fr 1fr}
  .sg-intro{grid-template-columns:1fr;gap:40px}
  .two > *,.sg-text,.dark .wrap > *{width:100%;max-width:680px;margin-left:auto;margin-right:auto}
  .sg-shot{max-width:720px;margin:0 auto;width:100%}
  .sg-grid{grid-template-columns:1fr 1fr;margin-top:56px}
  footer .fgrid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .flow-link{height:56px;justify-content:center}
  .flow-line{width:2px;height:100%;background:repeating-linear-gradient(180deg,var(--color-blue) 0 6px,transparent 6px 12px)}
  .js-anim .flow:not(.is-playing) .flow-line{clip-path:inset(0 0 100% 0)}
  .js-anim .flow:not(.is-playing) .flow-art{clip-path:inset(0 0 100% 0 round var(--radius-card))}
  .js-anim .flow:not(.is-playing) .flow-art svg{transform:translateY(-12px)}
  .flow-packet{left:50%;top:0;margin:0 0 0 -5px}
  @keyframes flow-packet{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
  .legal{grid-template-columns:1fr;gap:32px;padding-top:32px;padding-bottom:72px}
  .toc{position:static;border:1px solid var(--color-fog-white);border-radius:12px;background:#fff}
  .toc summary{margin:0;min-height:52px;padding:0 16px;font-size:15px;letter-spacing:0;text-transform:none;color:var(--color-midnight-navy);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .toc summary svg{display:block}
  .toc[open] summary svg{transform:rotate(180deg)}
  .toc ol{border-left:0;padding:0 16px 8px}
  .toc li + li{border-top:1px solid var(--color-fog-white)}
  .toc a{margin:0;padding:12px 0;border-left:0;font-size:15px}
  .toc a.active{border-left:0}
}
@media (max-width:760px){
  .hero{padding:88px 0 80px}
  .hero .wrap{padding:0 24px}
  .hero p.lead{font-size:18px}
  .section,.band,.dark{padding:64px 0}
  .grid3,.row,.row.r3,.row.r4,.contact,.sg-grid{grid-template-columns:1fr}
  .sg-grid{gap:28px}
  .sg .btn-row .btn{width:100%}
  .privacy dl{grid-template-columns:1fr;gap:0}
  .privacy dd{margin-bottom:6px}
  .clients{--per:2}
  .card.wide{grid-template-columns:1fr}
  .addr{padding:24px 20px}
  .map,.map iframe,.map-ph{min-height:260px}
  .legal-hero{padding:48px 0 40px}
  .prose{font-size:16px}
  .prose h2{font-size:22px;margin-top:44px}
  .showcase{padding:48px 0 24px}
  .lt-lid{border-radius:12px 12px 3px 3px}
  footer .fgrid{grid-template-columns:1fr}
  footer ul.cols li{margin-bottom:0}
  footer ul.cols a,footer .fcontact > a{display:inline-block;padding:11px 0;font-size:15px}
  footer .social a{width:44px;height:44px}
  footer .fcontact{gap:0}
  footer .social{gap:10px;margin-top:8px}
  footer .fcerts{margin-top:28px}
}
/* Pantallas táctiles (móvil, tablet y portátiles táctiles): enlaces de texto con área de pulsación de 44 px */
@media (pointer:coarse){
  footer ul.cols li{margin-bottom:0}
  footer ul.cols a,footer .fcontact > a{display:inline-block;padding:11px 0}
  footer .fcontact{gap:0}
  footer .social a{width:44px;height:44px}
  .info a{display:inline-block;padding:11px 0}
  .info li{align-items:center}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .privacy details[open] dl{animation:none}
  html{scroll-behavior:auto}
  .btn:active,.burger:active{transform:none}
  .toc summary svg{transition:none}
  .nav ul.open{animation-name:menu-fade}
}
@keyframes menu-fade{from{opacity:0}}
.tekno{height:28px;width:auto;margin:0 auto 24px}

/* Botón con aspecto de enlace (p. ej. «Preferencias de cookies», que abre el banner de consentimiento) */
.linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
footer .linklike{font-size:14px}
@media (hover:hover) and (pointer:fine){footer .linklike:hover{text-decoration:underline;text-underline-offset:3px}}
@media (pointer:coarse){footer ul.cols .linklike{display:inline-block;padding:11px 0}}
@media (max-width:760px){footer ul.cols .linklike{display:inline-block;padding:11px 0;font-size:15px}}
/* Nota destacada dentro del texto legal (p. ej. enlace a la política de cookies) */
.prose .note{margin:20px 0}
.prose .note a{color:var(--color-blue);font-weight:500}

/* =========================================================================
   ttlVD: piezas propias sobre el sistema de diseño de ttlOS
   ========================================================================= */
.nav .logo img{height:28px;width:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* El subrayado decorativo sobresale un poco por los lados: sin desplazamiento horizontal en móviles estrechos */
main > section{overflow-x:clip}

/* Hero: logo blanco más ancho que alto */
.frame-inner img[src*="ttlvd_logo"]{width:min(240px,62%)}

/* Frase de cambio de modelo: una sola idea, en grande */
.vd-statement{padding:88px 0}
.vd-statement p{max-width:860px;margin:0 auto;text-align:center;font-family:var(--font-display);font-size:clamp(22px,2.6vw,32px);line-height:1.35;font-weight:500;color:var(--color-midnight-navy)}

/* ---------- Qué nos diferencia: texto + los cinco componentes ---------- */
.vd-diff{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:56px}
.vd-diff > *{min-width:0}
.vd-lead{font-size:19px;line-height:1.55;color:var(--color-carbon-edge)}
.vd-diff p + p{margin-top:16px;color:var(--color-carbon-edge)}
.vd-stack{position:relative;margin:0;background:var(--color-midnight-navy);border-radius:var(--radius-card);padding:28px;box-shadow:0 24px 48px -20px rgba(9,30,66,.45);overflow:hidden}
.vd-stack-logo{width:96px;height:auto;margin-bottom:20px}
.vd-stack ul{list-style:none;display:grid;gap:10px;position:relative}
.vd-stack li{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;font-weight:500}
.vd-stack .ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--color-blue);color:#fff}
.vd-stack svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vd-stack figcaption{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);color:#fff;font-weight:600;letter-spacing:.01em}
.vd-done{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--color-gold);color:var(--color-midnight-navy)}
.vd-done svg{width:16px;height:16px;stroke-width:2.6}
/* Animación (una vez, al entrar en pantalla): cada pieza se descubre de izquierda a derecha, de Hipervisor a Base de datos;
   su icono aparece al final de su barrido y, completadas las cinco, se confirma «Todo en una sola solución». */
.vd-stack li:nth-child(1){--d:0ms}.vd-stack li:nth-child(2){--d:140ms}.vd-stack li:nth-child(3){--d:280ms}.vd-stack li:nth-child(4){--d:420ms}.vd-stack li:nth-child(5){--d:560ms}
.vd-stack li{clip-path:inset(0 0 0 0 round 12px)}
.js-anim .vd-stack:not(.is-playing) li{clip-path:inset(0 100% 0 0 round 12px);transform:translateX(-10px)}
.js-anim .vd-stack:not(.is-playing) .ic{transform:scale(.6);opacity:0}
.js-anim .vd-stack:not(.is-playing) figcaption{opacity:0;transform:translateY(6px)}
.js-anim .vd-stack:not(.is-playing) .vd-done{transform:scale(.5)}
.vd-stack.is-playing li{transition:clip-path 520ms var(--ease-out) var(--d),transform 520ms var(--ease-out) var(--d)}
.vd-stack.is-playing .ic{transition:transform 360ms var(--ease-out) calc(var(--d) + 260ms),opacity 240ms ease calc(var(--d) + 260ms)}
.vd-stack.is-playing figcaption{transition:opacity 420ms ease 1100ms,transform 520ms var(--ease-out) 1100ms}
.vd-stack.is-playing .vd-done{transition:transform 420ms var(--ease-out) 1200ms}

/* ---------- Características ---------- */
.vd-sub{margin-top:28px}
#caracteristicas .sub{margin-top:12px}

/* Flexibilidad: lista de comprobación en dos columnas */
.vd-features{margin-top:48px;background:#fff;border:1px solid var(--color-fog-white);border-radius:var(--radius-card);box-shadow:var(--shadow-subtle);padding:36px 40px}
.vd-checks{list-style:none;columns:2;column-gap:48px}
.vd-checks li{position:relative;break-inside:avoid;padding:0 0 18px 34px;line-height:1.5;color:var(--color-carbon-edge)}
.vd-checks li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:var(--tint-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6da6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}

/* Sistemas operativos: una tarjeta por familia, con su icono y sus versiones */
.vd-os{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vd-os-card{background:#fff;border:1px solid var(--color-fog-white);border-radius:var(--radius-card);box-shadow:var(--shadow-subtle);padding:24px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:16px;align-items:center}
.vd-os-ic{grid-row:1/3;align-self:start;width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.vd-os-ic svg{width:28px;height:28px}
.vd-win{background:var(--tint-blue);color:var(--color-blue)}
.vd-win svg{fill:currentColor}
.vd-win svg.line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vd-tux{background:#fff4da;color:var(--color-midnight-navy)}
.vd-tux svg{fill:currentColor}
.vd-os-card h4{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3}
.vd-os-card ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-self:start}
.vd-os-card li{padding:4px 12px;border-radius:999px;background:var(--color-fog-white);font-size:14px;font-weight:500;color:var(--color-midnight-navy)}

/* Equipos */
.vd-hw{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin-left:auto;margin-right:auto}
.vd-hw .card{padding:32px}
.vd-hw ul{list-style:none;display:grid;gap:10px;margin-top:4px}
.vd-hw li{position:relative;padding-left:22px;color:var(--color-carbon-edge)}
.vd-hw li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--color-blue)}

/* ttlOS (sección oscura) */
.dark .visual img[src*="ttlvd_logo"]{width:min(240px,62%)}

/* Documentación */
.band p{max-width:64ch}
.vd-changelog{margin-top:20px}
.vd-changelog a{font-weight:500;text-decoration:none;text-underline-offset:4px;color:var(--color-blue)}
@media (hover:hover) and (pointer:fine){.vd-changelog a:hover{text-decoration:underline}}

/* Empresa: logos de clientes (12 visibles; el resto al pulsar «Ver todos») */
.vd-logos{margin-top:32px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.vd-logos img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid var(--color-fog-white);border-radius:14px;padding:6px}
.vd-logos .vd-more{display:none}
.vd-logos.is-open .vd-more{display:block;animation:vd-in 320ms var(--ease-out) both}
@keyframes vd-in{from{opacity:0;transform:translateY(6px)}}
.vd-logos-toggle{margin-top:20px}
.vd-logos-toggle .btn{color:var(--color-midnight-navy)}

/* Partners */
.vd-partners{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.vd-partners > *{min-width:0}
.vd-partners h2{text-align:left;overflow-wrap:break-word;hyphens:auto}
.vd-partner-list{list-style:none;margin-top:24px;display:grid;gap:10px}
.vd-partner-list li{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-radius:12px;box-shadow:var(--shadow-subtle);font-weight:600;color:var(--color-midnight-navy)}
.vd-ok{flex:none;width:26px;height:26px;color:var(--color-blue)}
.vd-ok svg{width:26px;height:26px;fill:currentColor}
.vd-ok .tick{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vd-become{background:var(--color-midnight-navy);color:#fff;border-radius:var(--radius-card);padding:32px}
.vd-become h3{font-family:var(--font-display);font-size:22px;line-height:1.3;font-weight:700;margin-bottom:20px}
.vd-become .info a{color:#fff}
.vd-become .info .ic{background:rgba(255,255,255,.1);color:#fff}

/* Pie */
footer .brand img.logo.vd-flogo{width:110px}
footer .flabel{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ash-gray);margin-top:6px}
footer .flabel:first-child{margin-top:0}

/* Changelog */
.vd-log ul{list-style:none;display:grid;gap:10px}
.vd-log li{position:relative;padding-left:22px}
.vd-log li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--color-blue)}
.vd-log li ul{margin-top:10px}
.vd-log li li::before{background:var(--color-ash-gray)}

@media (max-width:980px){
  .vd-diff,.vd-partners{grid-template-columns:1fr;gap:40px}
  .vd-diff > div:first-child,.vd-partners > div:first-child{max-width:64ch;margin-left:auto;margin-right:auto;width:100%}
  .vd-os{grid-template-columns:1fr 1fr}
  .vd-os-card:last-child{grid-column:1/-1}
  .vd-logos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .vd-statement{padding:64px 0}
  .vd-checks{columns:1}
  .vd-features{padding:24px 20px}
  .vd-hw,.vd-os{grid-template-columns:1fr}
  .vd-os-card:last-child{grid-column:auto}
  .vd-logos{grid-template-columns:repeat(3,1fr);gap:10px}
  .vd-stack{padding:20px}
  .vd-become{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .vd-stack:not(.is-playing) li{clip-path:inset(0 0 0 0 round 12px);transform:none;opacity:0}
  .js-anim .vd-stack:not(.is-playing) .ic,.js-anim .vd-stack:not(.is-playing) figcaption,.js-anim .vd-stack:not(.is-playing) .vd-done{transform:none}
  .vd-stack.is-playing li{transition:opacity 400ms ease var(--d)}
  .vd-logos.is-open .vd-more{animation:none}
}
/* Logos de clientes: más contenidos en escritorio, con aire alrededor de cada marca */
.vd-logos{max-width:840px;margin-left:auto;margin-right:auto}
.vd-logos img{padding:12px}
@media (max-width:760px){.vd-logos img{padding:6px}}

/* Características: el texto de introducción, más ancho para que no quede apretado */
#caracteristicas .sub{max-width:820px;margin-top:20px}
/* Equipos: una sola tarjeta de servidores, centrada, con el icono a la izquierda */
.vd-server{max-width:760px;margin:48px auto 0;display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:start;padding:32px}
.vd-server .ico{margin-bottom:0}
.vd-server h3{margin-bottom:6px}
.vd-server p{font-size:17px;color:var(--color-midnight-navy)}
.vd-server .vd-note{margin-top:10px;font-size:15px;line-height:1.55;color:var(--color-carbon-edge)}
@media (max-width:760px){.vd-server{grid-template-columns:1fr;padding:24px}.vd-server .ico{margin-bottom:12px}}

/* Sistemas operativos y equipos: la tarjeta de servidores ocupa toda la fila, bajo las tres de sistemas operativos */
#equipos{scroll-margin-top:88px}
.vd-os-wide{grid-column:1/-1}
.vd-os-text{grid-column:2;align-self:start;margin-top:6px}
.vd-os-text p{color:var(--color-midnight-navy);font-weight:500}
.vd-os-text .vd-note{margin-top:6px;font-weight:400;font-size:15px;line-height:1.55;color:var(--color-carbon-edge)}
/* Logos de clientes: mismo ancho que las tarjetas de «Entre sus clientes destacados»; tarjetas apaisadas para no crecer en alto */
.vd-logos{max-width:none;gap:16px}
.vd-logos img{aspect-ratio:3/2;padding:14px 18px}
@media (max-width:760px){.vd-logos{gap:10px}.vd-logos img{padding:8px}}
/* Partners: solo la lista, centrada */
.vd-partners{grid-template-columns:1fr;justify-items:center;text-align:center}
.vd-partners h2{text-align:center}
.vd-partners > div{width:100%;max-width:760px}
.vd-partner-list{grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.vd-partner-list li{justify-content:center;padding:18px 20px}
@media (max-width:760px){.vd-partner-list{grid-template-columns:1fr}}

/* Pie sin bloque de marca: enlaces y contacto centrados */
footer .fgrid{grid-template-columns:auto auto;justify-content:center;column-gap:clamp(48px,8vw,120px);align-items:start}
@media (max-width:760px){
  footer .fgrid{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:24px}
  footer ul.cols{column-gap:28px;text-align:left}
  footer .fcontact{justify-items:center}
  footer .social{justify-content:center}
}