:root{
  color-scheme: light dark;
  --bg:#ffffff; --bg-alt:#f6f6f9; --fg:#0f1013; --dim:#5c5f6b;
  --rule:rgba(15,16,19,.11); --accent:#0a6cd6; --sobre-acento:#ffffff;
  --tarjeta:#ffffff; --realce:rgba(10,108,214,.07);
  --sombra:0 1px 2px rgba(15,16,19,.05), 0 10px 30px rgba(15,16,19,.055);
  --radio:16px; --ancho:68rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0c0f; --bg-alt:#101217; --fg:#f2f4f8; --dim:#98a0ae;
    --rule:rgba(255,255,255,.13); --accent:#63a9ff; --sobre-acento:#06121f;
    --tarjeta:#13161c; --realce:rgba(99,169,255,.10);
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.38);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.envoltura{max-width:var(--ancho); margin:0 auto; padding:0 1.5rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}

/* Saltar al contenido: solo aparece al tabular. */
.saltar{position:absolute; left:-9999px; top:0; background:var(--accent);
  color:var(--sobre-acento); padding:.7rem 1.1rem; border-radius:0 0 10px 0; z-index:99}
.saltar:focus{left:0}

/* ── Cabecera ── */
header.sitio{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--rule)}
header.sitio .envoltura{display:flex; align-items:center; gap:1.5rem; height:60px}
.marca{display:flex; align-items:center; gap:.55rem; font-weight:640; letter-spacing:-.02em;
  font-size:1.06rem; color:var(--fg)}
.marca:hover{text-decoration:none}
.marca span{white-space:nowrap}
nav.principal a{white-space:nowrap}
.marca svg{display:block}
nav.principal{margin-left:auto; display:flex; align-items:center; gap:1.4rem; font-size:.94rem}
nav.principal a{color:var(--dim)}
nav.principal a:hover,nav.principal a[aria-current=page]{color:var(--fg); text-decoration:none}
.idioma{border:1px solid var(--rule); border-radius:999px; padding:.28rem .78rem;
  font-size:.84rem; color:var(--dim)}
.idioma:hover{color:var(--fg); border-color:var(--dim); text-decoration:none}
@media(max-width:700px){
  nav.principal{gap:1rem; font-size:.88rem}
  nav.principal .oculta-movil{display:none}
}
@media(max-width:380px){
  header.sitio .envoltura{gap:.7rem; padding:0 1rem}
  .marca{font-size:.97rem; gap:.42rem}
  nav.principal{gap:.75rem; font-size:.82rem}
  .idioma{padding:.24rem .58rem; font-size:.78rem}
}

/* ── Portada ── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule)}
.hero::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 50% 0%, var(--realce), transparent 70%); pointer-events:none}
.hero .envoltura{position:relative; padding-top:6rem; padding-bottom:5rem; max-width:52rem}
.kicker{font-size:.76rem; font-weight:660; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.1rem}
h1{font-size:clamp(2.3rem,6vw,3.9rem); line-height:1.06; letter-spacing:-.033em;
  font-weight:680; margin:0 0 1.1rem; max-width:16ch}
.lead{font-size:clamp(1.08rem,2.1vw,1.32rem); line-height:1.55; color:var(--dim);
  margin:0; max-width:44ch}
.botones{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.boton{display:inline-block; padding:.72rem 1.4rem; border-radius:999px; font-size:.98rem;
  font-weight:560; border:1px solid transparent; transition:transform .15s ease, opacity .15s ease}
.boton:hover{text-decoration:none; transform:translateY(-1px)}
.boton.solido{background:var(--accent); color:var(--sobre-acento)}
.boton.solido:hover{opacity:.9}
.boton.hueco{border-color:var(--rule); color:var(--fg)}
.boton.hueco:hover{border-color:var(--dim)}

/* ── Secciones ── */
section{padding:5rem 0; border-bottom:1px solid var(--rule)}
section.tenue{background:var(--bg-alt)}
section > .envoltura > h2{font-size:clamp(1.6rem,3.2vw,2.15rem); letter-spacing:-.028em;
  font-weight:660; margin:0 0 .6rem; line-height:1.14}
.sublead{color:var(--dim); margin:0 0 2.6rem; max-width:52ch; font-size:1.02rem}

.rejilla{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr))}
.principio h3{font-size:1.06rem; font-weight:620; letter-spacing:-.012em; margin:0 0 .5rem}
.principio p{color:var(--dim); margin:0; font-size:.98rem; line-height:1.62}
.principio .barra{width:2.2rem; height:3px; border-radius:2px; background:var(--accent);
  margin-bottom:1.1rem; opacity:.85}

/* ── Productos ── */
.productos{display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}
.producto{background:var(--tarjeta); border:1px solid var(--rule); border-radius:var(--radio);
  padding:1.7rem; display:flex; flex-direction:column; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease}
.producto:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(15,16,19,.06), 0 18px 44px rgba(15,16,19,.09)}
.icono{width:72px; height:72px; border-radius:17px; display:block; margin-bottom:1.15rem;
  border:1px solid var(--rule)}
.icono.monograma{display:grid; place-items:center; font-size:2rem; font-weight:640;
  color:#fff; background:var(--tono); border-color:transparent}
.producto h3{font-size:1.28rem; letter-spacing:-.02em; font-weight:650; margin:0 0 .3rem}
.producto .lema{color:var(--fg); font-size:1rem; margin:0 0 .8rem; font-weight:520}
.producto p.desc{color:var(--dim); font-size:.96rem; line-height:1.6; margin:0 0 1.3rem}
.producto .pie{margin-top:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.92rem}
.pastilla{display:inline-flex; align-items:center; align-self:flex-start; gap:.42rem; font-size:.78rem; font-weight:560;
  padding:.24rem .68rem; border-radius:999px; border:1px solid var(--rule); color:var(--dim);
  margin-bottom:.9rem}
.pastilla::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pastilla.app-store{color:#15703c; border-color:rgba(21,112,60,.32)}
.pastilla.testflight{color:#a06a00; border-color:rgba(160,106,0,.3)}
.pastilla.proximamente{color:#0a6cd6; border-color:rgba(10,108,214,.32)}
@media(prefers-color-scheme:dark){
  .pastilla.app-store{color:#4bd07f; border-color:rgba(75,208,127,.28)}
  .pastilla.testflight{color:#e0a53a; border-color:rgba(224,165,58,.28)}
  .pastilla.proximamente{color:#63a9ff; border-color:rgba(99,169,255,.3)}
}
.plataformas{color:var(--dim); font-size:.85rem; margin:0 0 1rem}

/* ── Servicios ── */
/* Cuatro tarjetas en tres columnas dejan la cuarta sola y descolgada. En dos
   columnas caen 2x2, que es lo que pide un número par. */
.caracteristicas.pares{grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));
  max-width:56rem}

/* ── Muestra de trabajo: pantallas de verdad, no ilustraciones ── */
.muestras{list-style:none; padding:0; margin:0 0 .4rem; display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.muestra a{display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  color:var(--fg); transition:transform .18s ease}
.muestra a:hover{text-decoration:none; transform:translateY(-4px)}
.muestra .captura{width:100%; max-width:210px}
.muestra .pie-muestra{display:block; text-align:center}
.muestra .nombre-app{display:block; font-weight:600; font-size:1.02rem;
  letter-spacing:-.012em}
.muestra .lema-corto{display:block; color:var(--dim); font-size:.9rem;
  margin-top:.15rem}
.muestra .ver{display:block; margin-top:.5rem; font-size:.88rem;
  font-weight:540; color:var(--acento)}

/* ── Servicios: los tres pasos ── */
.pasos{list-style:none; padding:0; margin:0; display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.paso{display:flex; gap:1rem; align-items:flex-start}
.paso .numero{flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center; font-size:.9rem; font-weight:620;
  color:var(--sobre-acento); background:var(--accent)}
.paso h3{font-size:1.04rem; font-weight:620; margin:.15rem 0 .4rem;
  letter-spacing:-.012em}
.paso p{color:var(--dim); margin:0; font-size:.97rem; line-height:1.62}

/* ── El anzuelo de la portada ── */
.gancho{background:
  linear-gradient(180deg, var(--realce), transparent 62%), var(--bg-alt)}
.gancho h2{font-size:clamp(1.6rem,3.2vw,2.15rem); letter-spacing:-.028em;
  font-weight:660; margin:0 0 .6rem; max-width:20ch; line-height:1.14}
.etiquetas{list-style:none; padding:0; margin:0 0 2rem; display:flex;
  flex-wrap:wrap; gap:.55rem}
.etiquetas li{font-size:.87rem; color:var(--dim); border:1px solid var(--rule);
  border-radius:999px; padding:.3rem .85rem; background:var(--tarjeta)}
.gancho .botones{margin-top:0}

/* ── Contacto y datos legales ── */
.datos{display:grid; gap:1.4rem 2.5rem; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
  margin:0}
.datos dt{font-size:.78rem; font-weight:620; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); margin-bottom:.32rem}
.datos dd{margin:0; font-size:1.02rem; line-height:1.5}
.datos dd address{font-style:normal; color:var(--fg)}

/* ── Texto largo (legales) ── */
article{max-width:44rem}
article h2{font-size:1.22rem; letter-spacing:-.015em; font-weight:640;
  margin:2.6rem 0 .6rem; line-height:1.3}
article p{color:var(--dim); line-height:1.68}
article p.destacado{color:var(--fg)}
.actualizado{color:var(--dim); font-size:.88rem; margin:.4rem 0 2.4rem}
ul.limpia{list-style:none; padding:0; margin:1.4rem 0 0}
ul.limpia li{padding:.85rem 0; border-top:1px solid var(--rule)}
ul.limpia li .nombre{font-weight:580; color:var(--fg)}
ul.limpia li .sep{color:var(--dim); margin:0 .5rem}

/* ── Pie ── */
footer.sitio{padding:3rem 0 4rem; color:var(--dim); font-size:.9rem}
footer.sitio .filas{display:flex; flex-wrap:wrap; gap:1.6rem 2.5rem; justify-content:space-between}
footer.sitio a{color:var(--dim)}
footer.sitio a:hover{color:var(--fg)}
footer.sitio nav{display:flex; flex-wrap:wrap; gap:1.2rem}
footer.sitio .legal{margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--rule);
  line-height:1.7}
footer.sitio address{font-style:normal}

/* El logotipo se colorea aquí y no con un atributo fill="var(...)": var()
   no se resuelve dentro de un atributo de presentación de SVG. */
.marca svg rect{fill:var(--accent)}
/* «IT» va en el color de acento: el dueño pidió que no se leyera como una
   sola palabra, y el color lo consigue a la primera, sin depender de que
   alguien se fije en el espacio. */
.marca-it{color:var(--accent)}
.nota-pie{margin:.7rem 0 0}
.entidad{color:var(--fg)}
.derechos{margin:.9rem 0 0}
.nota{margin-top:1.8rem; color:var(--dim); font-size:.94rem}


/* ── Marco de iPhone ──────────────────────────────────────────────────────
   La captura sale de un simulador de iPhone 17 Pro (1320x2868) y ya trae su
   barra de estado. El marco solo pone el bisel: un degradado, un brillo
   interior de 1 px y dos sombras superpuestas —una corta y dura, otra larga y
   suave—, que es lo que hace que un rectángulo parezca un objeto. */
.marco{position:relative; border-radius:34px; padding:7px;
  background:linear-gradient(158deg,#4a4e57,#101216 42%,#33373f);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),
             0 2px 6px rgba(15,16,19,.16), 0 22px 48px rgba(15,16,19,.20)}
@media(prefers-color-scheme:dark){
  .marco{background:linear-gradient(158deg,#5a5f6a,#0a0b0e 42%,#3a3f48);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.16),
               0 2px 8px rgba(0,0,0,.55), 0 24px 54px rgba(0,0,0,.5)}
}
.marco img{display:block; width:100%; height:auto; border-radius:27px;
  background:var(--bg-alt)}

.captura{margin:0; display:flex; flex-direction:column; gap:.95rem}
.captura figcaption{color:var(--dim); font-size:.88rem; line-height:1.5;
  max-width:26ch; margin:0 auto; text-align:center}

/* ── Galería: carrusel sin una línea de JavaScript ────────────────────────
   `scroll-snap` da el arrastre con imán nativo, con la inercia del sistema en
   iPhone. Un carrusel escrito a mano necesitaría scripts, y la CSP del sitio
   los prohíbe: aquí eso no es una limitación, es la solución. */
.galeria{display:flex; gap:1.7rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem 1.5rem 1.4rem; margin:0 -1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
  overscroll-behavior-x:contain}
.galeria .captura{flex:0 0 auto; width:268px; scroll-snap-align:center}
.galeria::-webkit-scrollbar{height:8px}
.galeria::-webkit-scrollbar-thumb{background:var(--rule); border-radius:99px}
.galeria::-webkit-scrollbar-track{background:transparent}
.pista{display:none; color:var(--dim); font-size:.84rem; margin:.2rem 0 0}
@media(hover:none) and (pointer:coarse){ .pista{display:block} }
.aviso-idioma{color:var(--dim); font-size:.88rem; margin:1.4rem 0 0}

/* ── Escaparate de la portada ─────────────────────────────────────────────
   Tres teléfonos en abanico. Las transformaciones son fijas, no animadas: se
   ven igual con «reducir movimiento» activado, que es mucha más gente de la
   que se piensa. */
.hero-portada .envoltura{padding-bottom:1.6rem}
.hero-portada{padding-bottom:.5rem}
.escaparate{position:relative; display:flex; justify-content:center;
  align-items:flex-end; gap:1.1rem; margin:3.6rem auto 0; max-width:var(--ancho);
  padding:0 1.5rem 2rem; perspective:1600px}
.escaparate .captura{width:212px; flex:0 0 auto}
.escaparate .pieza-1{transform:rotate(-5deg) translateY(20px) scale(.93);
  transform-origin:bottom center}
.escaparate .pieza-3{transform:rotate(5deg) translateY(20px) scale(.93);
  transform-origin:bottom center}
.escaparate .pieza-2{position:relative; z-index:2; width:232px}
@media(max-width:900px){
  .escaparate{gap:.6rem; margin-top:2.8rem}
  .escaparate .captura{width:22vw}
  .escaparate .pieza-2{width:25vw}
}
/* En un móvil los tres en fila salen a 100 px y no se lee nada. Se apilan
   solapados: el del centro grande y legible, los otros asomando lo justo para
   que se entienda que hay más apps. Los márgenes negativos suman -50vw, así
   que los tres ocupan 94vw en total y no rozan el borde. */
@media(max-width:640px){
  .escaparate{gap:0; align-items:center; margin-top:2.4rem; padding:0 .5rem 1.8rem}
  .escaparate .captura{width:44vw}
  .escaparate .pieza-2{width:56vw}
  .escaparate .pieza-1{margin-right:-25vw;
    transform:rotate(-6deg) translateY(6px) scale(.97)}
  .escaparate .pieza-3{margin-left:-25vw;
    transform:rotate(6deg) translateY(6px) scale(.97)}
}

/* ── Características de una app ───────────────────────────────────────────*/
:root{--acento:var(--accent)}
.caracteristicas{display:grid; gap:2.1rem 2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.rasgo h3{font-size:1.04rem; font-weight:620; letter-spacing:-.012em; margin:0 0 .45rem}
.rasgo p{color:var(--dim); margin:0; font-size:.97rem; line-height:1.62}
.cuadro-glifo{width:44px; height:44px; border-radius:13px; display:grid;
  place-items:center; margin-bottom:1rem; color:var(--acento);
  background:color-mix(in srgb, var(--acento) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--acento) 22%, transparent)}
.glifo{fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.glifo path[d^="M10 8.6"]{fill:currentColor; stroke:none}

/* ── Portada de una app ───────────────────────────────────────────────────*/
.hero-app::before{background:radial-gradient(58% 52% at 50% 0%,
  color-mix(in srgb, var(--acento) 15%, transparent), transparent 70%)}
.hero-app .envoltura{max-width:var(--ancho); padding-top:4.4rem; padding-bottom:3.4rem}
.encabezado-app{display:flex; align-items:center; gap:1.4rem; margin-bottom:1.6rem}
.encabezado-app .icono{margin-bottom:0; width:88px; height:88px; border-radius:20px}
.hero-app h1{margin:0 0 .2rem; font-size:clamp(2rem,4.6vw,3rem); max-width:none}
.hero-app .lema-grande{color:var(--dim); font-size:clamp(1.05rem,2vw,1.28rem);
  margin:0; font-weight:500}
.hero-app .promo{font-size:1.1rem; line-height:1.55; max-width:46ch; margin:0;
  color:var(--fg)}
.migas{font-size:.88rem; color:var(--dim); margin:0 0 1.8rem}
.migas a{color:var(--dim)}
.tira-datos{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  margin-top:1.7rem; font-size:.9rem; color:var(--dim)}
.tira-datos .pastilla{margin-bottom:0}
@media(max-width:560px){
  .encabezado-app{gap:1rem}
  .encabezado-app .icono{width:64px; height:64px; border-radius:15px}
}

/* Enlaces de la app: cuadrícula de tarjetas, no una lista de <a> sueltos. */
.enlaces-app{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  list-style:none; padding:0; margin:0}
.enlaces-app a{display:block; padding:1.15rem 1.3rem; border-radius:var(--radio);
  border:1px solid var(--rule); background:var(--tarjeta); color:var(--fg);
  transition:border-color .18s ease, transform .18s ease}
.enlaces-app a:hover{text-decoration:none; border-color:var(--acento);
  transform:translateY(-2px)}
.enlaces-app .rotulo{display:block; font-weight:580}
.enlaces-app .detalle{display:block; color:var(--dim); font-size:.88rem;
  margin-top:.2rem; word-break:break-word}

/* ── Otras apps, al pie de una ficha ──────────────────────────────────────*/
.otras{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
  list-style:none; padding:0; margin:0}
.otras a{display:flex; align-items:center; gap:.95rem; padding:1rem 1.15rem;
  border:1px solid var(--rule); border-radius:var(--radio); background:var(--tarjeta);
  color:var(--fg); transition:border-color .18s ease, transform .18s ease}
.otras a:hover{text-decoration:none; transform:translateY(-2px)}
.otras .icono{width:44px; height:44px; border-radius:11px; margin:0; flex:0 0 auto}
.otras .icono.monograma{font-size:1.15rem}
.otras .nombre-app{display:block; font-weight:580; font-size:.98rem}
.otras .lema-corto{display:block; color:var(--dim); font-size:.86rem; margin-top:.1rem}

/* ── Tarjeta de producto, con el color de la app en el borde superior ─────*/
.producto{position:relative; overflow:hidden}
.producto::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--acento), transparent 78%)}
.producto .pie a{font-weight:540}
.producto .pie .principal{color:var(--acento)}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

@media print{
  header.sitio,.saltar,.botones,.escaparate,.galeria,.pista,.migas,
  footer.sitio nav,.otras{display:none}
  body{background:#fff; color:#000; font:11pt/1.5 -apple-system,Georgia,serif}
  .envoltura{max-width:none; padding:0}
  section{padding:1.1rem 0; border:0}
  .hero{border:0}
  .hero::before{display:none}
  h1{font-size:20pt}
  h2{font-size:13pt}
  p,li,dd,.lead,.sublead{color:#000}
  a{color:#000; text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#444}
  .enlaces-app{display:block}
  .enlaces-app a{border:0; padding:.15rem 0; background:none; display:block}
  .enlaces-app .detalle{display:none}
  footer.sitio{padding:1rem 0 0; color:#000}
  footer.sitio .legal{border-top:1px solid #999}
  article{max-width:none}
}
.monograma.m-forja{--tono:#c2410c}
.acento-forja{--acento:#c2410c}
.monograma.m-saldy{--tono:#0f766e}
.acento-saldy{--acento:#0f766e}
.monograma.m-electricalprep{--tono:#b45309}
.acento-electricalprep{--acento:#b45309}
.monograma.m-poliglota{--tono:#4338ca}
.acento-poliglota{--acento:#4338ca}
.monograma.m-breakout-radar{--tono:#0369a1}
.acento-breakout-radar{--acento:#0369a1}
.monograma.m-macmini{--tono:#3f3f46}
.acento-macmini{--acento:#3f3f46}
.monograma.m-auction-lot-finder{--tono:#7c2d12}
.acento-auction-lot-finder{--acento:#7c2d12}