/* CM2 Uniformes — identidad: taller de bordado. Hilo, puntada y etiqueta de prenda. */
:root{
  --indigo:#24213a;      /* azul marino del logo */
  --indigo-2:#312d4d;
  --paper:#f2f4f6;       /* tela clara, fría */
  --white:#ffffff;
  --graphite:#22262e;    /* texto */
  --slate:#5a6273;       /* texto secundario */
  --line:#d7dce3;
  --thread-red:#d90f1f;  /* rojo de las estrellas */
  --thread-gold:#f39200; /* naranja del camuflaje */
  --camo-gray:#707070;
  --stitch:2px dashed;
  --wide:"Archivo",system-ui,sans-serif;
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  font-family:var(--wide);font-variation-settings:"wdth" 100;
  color:var(--graphite);background:var(--white);
  font-size:17px;line-height:1.6;
}
a{color:var(--thread-red)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--thread-gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Encabezado ---------- */
header.site{position:sticky;top:0;z-index:20;background:var(--indigo);color:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:700;font-size:18px;font-variation-settings:"wdth" 112}
.brand img{width:46px;height:46px;border-radius:50%;background:#fff;display:block}
nav.main{display:flex;gap:28px;align-items:center}
nav.main a{color:#cfd6e6;text-decoration:none;font-size:15px;font-weight:500}
nav.main a:hover{color:#fff}
nav.main a.cta{color:var(--indigo);background:var(--thread-gold);padding:9px 18px;border-radius:999px;font-weight:700}
nav.main a.cta:hover{background:#ffa31a;color:var(--indigo)}

/* ---------- Hero ---------- */
.hero{background:var(--indigo);color:#fff;overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:104px}
.hero h1{
  font-size:clamp(44px,7.2vw,92px);line-height:.95;letter-spacing:-.01em;
  font-weight:800;font-variation-settings:"wdth" 70;text-transform:none;margin-bottom:28px;
}
.hero p.lead{font-size:19px;color:#cfd6e6;max-width:520px;margin-bottom:36px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;
  font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;
  font-variation-settings:"wdth" 105;
}
.btn-primary{background:var(--thread-red);color:#fff}
.btn-primary:hover{background:#b30c19}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{border-color:#fff}
.btn svg{width:20px;height:20px;flex:none}

.badge{width:100%;max-width:420px;justify-self:center;position:relative}
.badge img{width:100%;height:auto;display:block;border-radius:50%;background:#fff;
  box-shadow:0 0 0 10px rgba(255,255,255,.06),0 30px 60px -20px rgba(0,0,0,.6);
  animation:drop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes drop{from{opacity:0;transform:translateY(24px) rotate(-8deg) scale(.94)}to{opacity:1;transform:none}}
.camo{height:14px;background:url("camo.svg") repeat-x left center/auto 14px}

/* ---------- Secciones ---------- */
section.block{padding:104px 0}
section.tint{background:var(--paper)}
.head{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:end;margin-bottom:56px}
.head h2{
  font-size:clamp(34px,4.6vw,56px);line-height:1;font-weight:800;
  font-variation-settings:"wdth" 72;color:var(--indigo);
}
.head p{color:var(--slate);font-size:18px;max-width:52ch}

/* Servicios: lista con muestras de hilo */
.services{border-top:var(--stitch) var(--line)}
.service{
  display:grid;grid-template-columns:72px 1fr 1.4fr;gap:32px;align-items:start;
  padding:34px 0;border-bottom:var(--stitch) var(--line);
}
.swatch{width:56px;height:56px;border-radius:12px;position:relative}
.swatch::after{content:"";position:absolute;inset:6px;border:2px dashed rgba(255,255,255,.7);border-radius:7px}
.service h3{font-size:26px;line-height:1.15;font-weight:700;font-variation-settings:"wdth" 80;color:var(--indigo)}
.service p{color:var(--slate)}

/* Proceso: es una secuencia real */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:27px;left:28px;right:28px;border-top:2px dashed var(--thread-red);opacity:.6}
.step{padding-right:28px;position:relative}
.step .n{
  width:56px;height:56px;border-radius:50%;background:var(--white);border:2px solid var(--thread-red);
  color:var(--thread-red);display:grid;place-items:center;font-weight:800;font-size:20px;margin-bottom:22px;position:relative
}
.step h3{font-size:21px;font-weight:700;color:var(--indigo);margin-bottom:8px;font-variation-settings:"wdth" 90}
.step p{color:var(--slate);font-size:16px}

/* Sectores */
.sectors{display:flex;flex-wrap:wrap;gap:12px}
.sectors span{
  padding:12px 22px;border-radius:999px;background:var(--white);border:1.5px solid var(--line);
  font-weight:600;color:var(--indigo);font-size:16px
}

/* Empresa: etiqueta de prenda */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.about p{color:var(--slate);margin-bottom:16px;max-width:58ch}
.label{
  background:var(--white);border-radius:6px;padding:34px 34px 30px;position:relative;
  box-shadow:0 1px 0 var(--line),0 24px 48px -28px rgba(36,33,58,.45);
  outline:2px dashed var(--line);outline-offset:-12px;
}
.label::before{ /* ojal de la etiqueta */
  content:"";position:absolute;top:-14px;left:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line)
}
.label h3{font-size:22px;font-weight:800;color:var(--indigo);text-align:center;font-variation-settings:"wdth" 115;margin-bottom:4px}
.label .sub{text-align:center;color:var(--slate);font-size:14px;margin-bottom:22px}
.label dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:15px}
.label dt{color:var(--slate)}
.label dd{font-weight:600;color:var(--graphite)}

/* Contacto */
.contact{background:var(--indigo);color:#fff}
.contact .head h2{color:#fff}
.contact .head p{color:#cfd6e6}
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px dashed rgba(255,255,255,.25)}
.channel{padding:32px 28px 8px 0}
.channel + .channel{padding-left:28px;border-left:2px dashed rgba(255,255,255,.25)}
.channel h3{font-size:15px;font-weight:600;color:var(--thread-gold);margin-bottom:10px}
.channel a,.channel p.big{font-size:22px;font-weight:700;color:#fff;text-decoration:none;font-variation-settings:"wdth" 92;line-height:1.3;display:block}
.channel a:hover{text-decoration:underline;text-decoration-color:var(--thread-gold)}
.channel .note{font-size:15px;color:#aeb8cf;margin-top:6px}

/* ---------- Páginas legales ---------- */
.legal-hero{background:var(--indigo);color:#fff;padding:64px 0 52px;position:relative}
.legal-hero::after{content:"";position:absolute;left:0;right:0;bottom:14px;border-top:2px dashed rgba(243,146,0,.6)}
.legal-hero h1{font-size:clamp(36px,5vw,60px);line-height:1;font-weight:800;font-variation-settings:"wdth" 72;margin-bottom:12px}
.legal-hero p{color:#cfd6e6}
.legal{max-width:760px;padding:56px 24px 96px;margin:0 auto}
.legal h2{font-size:24px;font-weight:700;color:var(--indigo);margin:44px 0 12px;font-variation-settings:"wdth" 90}
.legal h3{font-size:18px;font-weight:700;margin:24px 0 8px}
.legal p,.legal li{color:#3c4352;margin-bottom:12px}
.legal ul,.legal ol{padding-left:22px;margin-bottom:12px}
.legal .box{background:var(--paper);border-radius:8px;padding:22px 26px;margin:20px 0;outline:2px dashed var(--line);outline-offset:-8px}
.legal .box p:last-child{margin-bottom:0}

/* ---------- Pie ---------- */
footer.site{background:#1a1829;color:#aeb8cf;padding:64px 0 32px;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer.site h4{color:#fff;font-size:16px;margin-bottom:14px}
footer.site a{color:#aeb8cf;display:block;margin-bottom:8px;text-decoration:none}
footer.site a:hover{color:#fff}
footer.site .company dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;max-width:560px}
footer.site .company dt{color:#8590a8}
footer.site .company dd{color:#fff;font-weight:500}
footer.site .company dd a{display:inline;margin:0;color:#fff}
footer.site .company dd a:hover{color:var(--thread-gold)}
footer.site .legal-line{border-top:2px dashed rgba(255,255,255,.15);padding-top:22px;font-size:14px;color:#8590a8}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:80px}
  .badge{max-width:260px;order:-1}
  .head{grid-template-columns:1fr;gap:16px}
  .service{grid-template-columns:56px 1fr;gap:18px}
  .service p{grid-column:2}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before{display:none}
  .about{grid-template-columns:1fr;gap:48px}
  .channels{grid-template-columns:1fr}
  .channel + .channel{padding-left:0;border-left:none;border-top:2px dashed rgba(255,255,255,.25)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site .cols > div:first-child{grid-column:1/-1}
  section.block{padding:72px 0}
}
@media (max-width:640px){
  nav.main a:not(.cta){display:none}
  .wrap{padding:0 16px}
  .steps{grid-template-columns:1fr}
}